Visualizer/better-UI (#40)

* ui rework * rework description ui * rework auto layout
rphlmr · Nov 27, 2024 · fce9454 · fce9454
1 parent 38febff
commit fce9454
Show file tree

Hide file tree

Showing 21 changed files with 762 additions and 171 deletions.
diff --git a/apps/cli/example/pg/schema.ts b/apps/cli/example/pg/schema.ts
@@ -1,7 +1,8 @@
-import { randomUUID } from "crypto";
+import { randomUUID } from "node:crypto";
 
 import { explain } from "@drizzle-lab/api/extensions";
 import { relations, sql, getTableColumns } from "drizzle-orm";
+import type { AnyPgColumn } from "drizzle-orm/pg-core";
 import {
   pgTable,
   serial,
@@ -13,6 +14,7 @@ import {
   primaryKey,
   check,
   pgView,
+  numeric,
 } from "drizzle-orm/pg-core";
 
 import { info } from "@/example/pg/external";
@@ -149,3 +151,149 @@ export const postsRelations = relations(posts, ({ one }) => ({
     relationName: "reviewer",
   }),
 }));
+
+export const products = pgTable("products", {
+  id: serial("id").primaryKey(),
+  name: text("name").notNull(),
+  price: numeric("price", { precision: 10, scale: 2 }).notNull(),
+  description: text("description"),
+  categoryId: integer("category_id").references(() => categories.id),
+});
+
+export const categories = pgTable("categories", {
+  id: serial("id").primaryKey(),
+  name: text("name").notNull(),
+  parentId: integer("parent_id").references((): AnyPgColumn => categories.id),
+});
+
+export const orders = pgTable("orders", {
+  id: serial("id").primaryKey(),
+  userId: integer("user_id")
+    .references(() => users.id)
+    .notNull(),
+  status: text("status", {
+    enum: ["pending", "processing", "shipped", "delivered"],
+  }).notNull(),
+  orderDate: timestamp("order_date").defaultNow(),
+});
+
+export const orderItems = pgTable("order_items", {
+  id: serial("id").primaryKey(),
+  orderId: integer("order_id")
+    .references(() => orders.id)
+    .notNull(),
+  productId: integer("product_id")
+    .references(() => products.id)
+    .notNull(),
+  quantity: integer("quantity").notNull(),
+  price: numeric("price", { precision: 10, scale: 2 }).notNull(),
+});
+
+export const reviews = pgTable("reviews", {
+  id: serial("id").primaryKey(),
+  userId: integer("user_id")
+    .references(() => users.id)
+    .notNull(),
+  productId: integer("product_id")
+    .references(() => products.id)
+    .notNull(),
+  rating: integer("rating").notNull(),
+  comment: text("comment"),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+
+export const inventory = pgTable("inventory", {
+  id: serial("id").primaryKey(),
+  productId: integer("product_id")
+    .references(() => products.id)
+    .notNull(),
+  quantity: integer("quantity").notNull(),
+  lastUpdated: timestamp("last_updated").defaultNow(),
+});
+
+export const suppliers = pgTable("suppliers", {
+  id: serial("id").primaryKey(),
+  name: text("name").notNull(),
+  contactPerson: text("contact_person"),
+  email: text("email"),
+  phone: text("phone"),
+});
+
+export const productSuppliers = pgTable("product_suppliers", {
+  id: serial("id").primaryKey(),
+  productId: integer("product_id")
+    .references(() => products.id)
+    .notNull(),
+  supplierId: integer("supplier_id")
+    .references(() => suppliers.id)
+    .notNull(),
+  cost: numeric("cost", { precision: 10, scale: 2 }).notNull(),
+});
+
+export const shippingAddresses = pgTable("shipping_addresses", {
+  id: serial("id").primaryKey(),
+  userId: integer("user_id")
+    .references(() => users.id)
+    .notNull(),
+  address: text("address").notNull(),
+  city: text("city").notNull(),
+  state: text("state").notNull(),
+  country: text("country").notNull(),
+  postalCode: text("postal_code").notNull(),
+});
+
+export const promotions = pgTable("promotions", {
+  id: serial("id").primaryKey(),
+  code: text("code").notNull().unique(),
+  discountPercentage: numeric("discount_percentage", {
+    precision: 5,
+    scale: 2,
+  }).notNull(),
+  startDate: timestamp("start_date").notNull(),
+  endDate: timestamp("end_date").notNull(),
+});
+
+export const wishlist = pgTable("wishlist", {
+  id: serial("id").primaryKey(),
+  userId: integer("user_id")
+    .references(() => users.id)
+    .notNull(),
+  productId: integer("product_id")
+    .references(() => products.id)
+    .notNull(),
+  addedAt: timestamp("added_at").defaultNow(),
+});
+
+export const productTags = pgTable("product_tags", {
+  id: serial("id").primaryKey(),
+  productId: integer("product_id")
+    .references(() => products.id)
+    .notNull(),
+  tag: text("tag").notNull(),
+});
+
+export const tableWithLongColumnName1 = pgTable(
+  "table_with_long_column_name_1",
+  {
+    id: serial("id").primaryKey(),
+    thisIsAReallyLongColumnNameThatIsExactlySixtyFourCharactersLong: text(
+      "this_is_a_really_long_column_name_that_is_exactly_sixty_four_characters_long",
+    ),
+    authorId: integer("author_id")
+      .references(() => users.id)
+      .notNull(),
+  },
+);
+
+export const tableWithLongColumnName2 = pgTable(
+  "table_with_long_column_name_2",
+  {
+    id: serial("id").primaryKey(),
+    anotherExtremelyLongColumnNameThatIsAlsoSixtyFourCharactersLong: integer(
+      "another_extremely_long_column_name_that_is_also_sixty_four_characters_long",
+    ),
+    authorId: integer("author_id")
+      .references(() => users.id)
+      .notNull(),
+  },
+);
diff --git a/apps/cli/package.json b/apps/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "drizzle-lab",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Drizzle Lab CLI",
   "sideEffects": false,
   "type": "module",

diff --git a/apps/cli/visualizer/routes/_index.tsx b/apps/cli/visualizer/routes/_index.tsx
@@ -147,10 +147,12 @@ export default function Index() {
       {/* <div className="absolute left-0 top-0 z-50 flex w-full items-center justify-center">
         <span className="text-sm font-medium">Drizzle Lab - Visualizer</span>
       </div> */}
-      <Alert className="absolute top-0 z-50 flex w-full flex-col items-center border-none bg-transparent">
-        <span className="text-sm font-bold">Drizzle Lab - Visualizer</span>
-        <p className="text-sm font-bold text-orange-500">
-          This is a beta version. It can still have bugs!
+      <Alert className="pointer-events-none absolute top-0 z-10 flex w-full flex-col border-none bg-transparent">
+        <span className="text-sm font-bold text-muted-foreground/50">
+          Drizzle Lab - Visualizer
+        </span>
+        <p className="text-sm text-muted-foreground/30">
+          It can still have bugs!
         </p>
       </Alert>
       <ClientOnly fallback={<p>Loading...</p>}>

diff --git a/apps/cli/biome.json → biome.json b/apps/cli/biome.json → biome.json
@@ -1,5 +1,8 @@
 {
-  "$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "files": {
+    "include": ["apps/cli/**/*"]
+  },
   "vcs": {
     "enabled": true,
     "clientKind": "git",
@@ -17,7 +20,6 @@
     "enabled": true
   },
   "linter": {
-    "ignore": ["test-apps"],
     "enabled": true,
     "rules": {
       "recommended": true,
@@ -28,7 +30,8 @@
       },
       "style": {
         "recommended": true,
-        "noParameterAssign": "info"
+        "noParameterAssign": "info",
+        "noNonNullAssertion": "warn"
       },
       "complexity": {
         "recommended": true

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/api/README.md b/packages/api/README.md
@@ -35,26 +35,25 @@ Works for tables and views.
   import { explain } from "@drizzle-lab/api/extensions";
   import { pgTable, text, jsonb } from "drizzle-orm/pg-core";
 
-  export const users = explain(
-    pgTable("users", {
-      id: text("id").primaryKey(),
-      name: text("name").notNull(),
-      metadata: jsonb("metadata").$type<{ role: string }>(),
-    }), // or your table object
-    {
-      description: "Users table storing core user information",
-      columns: {
-        id: "Unique identifier for the user",
-        name: "User's full name",
-        metadata: "Additional user metadata stored as JSON"
+  export const users = pgTable("users", {
+    id: text("id").primaryKey(),
+    name: text("name").notNull(),
+    metadata: jsonb("metadata").$type<{ role: string }>(),
+  });
+  
+  explain(users, {
+    description: "Users table storing core user information",
+    columns: {
+      id: "Unique identifier for the user",
+      name: "User's full name",
+      metadata: "Additional user metadata stored as JSON",
+    },
+    jsonShapes: {
+      metadata: {
+        role: "string",
       },
-      jsonShapes: {
-        metadata: {
-          role: "string"
-        }
-      }
-    }
-  );
+    },
+  });
   ```
 
 ### PostgreSQL API