Skip to content

Commit fce9454

Browse files
rphlmrrphlmr
authored
Visualizer/better-UI (#40)
* ui rework * rework description ui * rework auto layout
1 parent 38febff commit fce9454

File tree

21 files changed

+762
-171
lines changed

21 files changed

+762
-171
lines changed

‎apps/cli/example/pg/schema.ts

+149-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { randomUUID } from "crypto";
1+
import { randomUUID } from "node:crypto";
22

33
import { explain } from "@drizzle-lab/api/extensions";
44
import { relations, sql, getTableColumns } from "drizzle-orm";
5+
import type { AnyPgColumn } from "drizzle-orm/pg-core";
56
import {
67
pgTable,
78
serial,
@@ -13,6 +14,7 @@ import {
1314
primaryKey,
1415
check,
1516
pgView,
17+
numeric,
1618
} from "drizzle-orm/pg-core";
1719

1820
import { info } from "@/example/pg/external";
@@ -149,3 +151,149 @@ export const postsRelations = relations(posts, ({ one }) => ({
149151
relationName: "reviewer",
150152
}),
151153
}));
154+
155+
export const products = pgTable("products", {
156+
id: serial("id").primaryKey(),
157+
name: text("name").notNull(),
158+
price: numeric("price", { precision: 10, scale: 2 }).notNull(),
159+
description: text("description"),
160+
categoryId: integer("category_id").references(() => categories.id),
161+
});
162+
163+
export const categories = pgTable("categories", {
164+
id: serial("id").primaryKey(),
165+
name: text("name").notNull(),
166+
parentId: integer("parent_id").references((): AnyPgColumn => categories.id),
167+
});
168+
169+
export const orders = pgTable("orders", {
170+
id: serial("id").primaryKey(),
171+
userId: integer("user_id")
172+
.references(() => users.id)
173+
.notNull(),
174+
status: text("status", {
175+
enum: ["pending", "processing", "shipped", "delivered"],
176+
}).notNull(),
177+
orderDate: timestamp("order_date").defaultNow(),
178+
});
179+
180+
export const orderItems = pgTable("order_items", {
181+
id: serial("id").primaryKey(),
182+
orderId: integer("order_id")
183+
.references(() => orders.id)
184+
.notNull(),
185+
productId: integer("product_id")
186+
.references(() => products.id)
187+
.notNull(),
188+
quantity: integer("quantity").notNull(),
189+
price: numeric("price", { precision: 10, scale: 2 }).notNull(),
190+
});
191+
192+
export const reviews = pgTable("reviews", {
193+
id: serial("id").primaryKey(),
194+
userId: integer("user_id")
195+
.references(() => users.id)
196+
.notNull(),
197+
productId: integer("product_id")
198+
.references(() => products.id)
199+
.notNull(),
200+
rating: integer("rating").notNull(),
201+
comment: text("comment"),
202+
createdAt: timestamp("created_at").defaultNow(),
203+
});
204+
205+
export const inventory = pgTable("inventory", {
206+
id: serial("id").primaryKey(),
207+
productId: integer("product_id")
208+
.references(() => products.id)
209+
.notNull(),
210+
quantity: integer("quantity").notNull(),
211+
lastUpdated: timestamp("last_updated").defaultNow(),
212+
});
213+
214+
export const suppliers = pgTable("suppliers", {
215+
id: serial("id").primaryKey(),
216+
name: text("name").notNull(),
217+
contactPerson: text("contact_person"),
218+
email: text("email"),
219+
phone: text("phone"),
220+
});
221+
222+
export const productSuppliers = pgTable("product_suppliers", {
223+
id: serial("id").primaryKey(),
224+
productId: integer("product_id")
225+
.references(() => products.id)
226+
.notNull(),
227+
supplierId: integer("supplier_id")
228+
.references(() => suppliers.id)
229+
.notNull(),
230+
cost: numeric("cost", { precision: 10, scale: 2 }).notNull(),
231+
});
232+
233+
export const shippingAddresses = pgTable("shipping_addresses", {
234+
id: serial("id").primaryKey(),
235+
userId: integer("user_id")
236+
.references(() => users.id)
237+
.notNull(),
238+
address: text("address").notNull(),
239+
city: text("city").notNull(),
240+
state: text("state").notNull(),
241+
country: text("country").notNull(),
242+
postalCode: text("postal_code").notNull(),
243+
});
244+
245+
export const promotions = pgTable("promotions", {
246+
id: serial("id").primaryKey(),
247+
code: text("code").notNull().unique(),
248+
discountPercentage: numeric("discount_percentage", {
249+
precision: 5,
250+
scale: 2,
251+
}).notNull(),
252+
startDate: timestamp("start_date").notNull(),
253+
endDate: timestamp("end_date").notNull(),
254+
});
255+
256+
export const wishlist = pgTable("wishlist", {
257+
id: serial("id").primaryKey(),
258+
userId: integer("user_id")
259+
.references(() => users.id)
260+
.notNull(),
261+
productId: integer("product_id")
262+
.references(() => products.id)
263+
.notNull(),
264+
addedAt: timestamp("added_at").defaultNow(),
265+
});
266+
267+
export const productTags = pgTable("product_tags", {
268+
id: serial("id").primaryKey(),
269+
productId: integer("product_id")
270+
.references(() => products.id)
271+
.notNull(),
272+
tag: text("tag").notNull(),
273+
});
274+
275+
export const tableWithLongColumnName1 = pgTable(
276+
"table_with_long_column_name_1",
277+
{
278+
id: serial("id").primaryKey(),
279+
thisIsAReallyLongColumnNameThatIsExactlySixtyFourCharactersLong: text(
280+
"this_is_a_really_long_column_name_that_is_exactly_sixty_four_characters_long",
281+
),
282+
authorId: integer("author_id")
283+
.references(() => users.id)
284+
.notNull(),
285+
},
286+
);
287+
288+
export const tableWithLongColumnName2 = pgTable(
289+
"table_with_long_column_name_2",
290+
{
291+
id: serial("id").primaryKey(),
292+
anotherExtremelyLongColumnNameThatIsAlsoSixtyFourCharactersLong: integer(
293+
"another_extremely_long_column_name_that_is_also_sixty_four_characters_long",
294+
),
295+
authorId: integer("author_id")
296+
.references(() => users.id)
297+
.notNull(),
298+
},
299+
);

‎apps/cli/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "drizzle-lab",
3-
"version": "0.8.0",
3+
"version": "0.9.0",
44
"description": "Drizzle Lab CLI",
55
"sideEffects": false,
66
"type": "module",

‎apps/cli/visualizer/routes/_index.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,12 @@ export default function Index() {
147147
{/* <div className="absolute left-0 top-0 z-50 flex w-full items-center justify-center">
148148
<span className="text-sm font-medium">Drizzle Lab - Visualizer</span>
149149
</div> */}
150-
<Alert className="absolute top-0 z-50 flex w-full flex-col items-center border-none bg-transparent">
151-
<span className="text-sm font-bold">Drizzle Lab - Visualizer</span>
152-
<p className="text-sm font-bold text-orange-500">
153-
This is a beta version. It can still have bugs!
150+
<Alert className="pointer-events-none absolute top-0 z-10 flex w-full flex-col border-none bg-transparent">
151+
<span className="text-sm font-bold text-muted-foreground/50">
152+
Drizzle Lab - Visualizer
153+
</span>
154+
<p className="text-sm text-muted-foreground/30">
155+
It can still have bugs!
154156
</p>
155157
</Alert>
156158
<ClientOnly fallback={<p>Loading...</p>}>

‎apps/cli/biome.json ‎biome.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
2-
"$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
2+
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
3+
"files": {
4+
"include": ["apps/cli/**/*"]
5+
},
36
"vcs": {
47
"enabled": true,
58
"clientKind": "git",
@@ -17,7 +20,6 @@
1720
"enabled": true
1821
},
1922
"linter": {
20-
"ignore": ["test-apps"],
2123
"enabled": true,
2224
"rules": {
2325
"recommended": true,
@@ -28,7 +30,8 @@
2830
},
2931
"style": {
3032
"recommended": true,
31-
"noParameterAssign": "info"
33+
"noParameterAssign": "info",
34+
"noNonNullAssertion": "warn"
3235
},
3336
"complexity": {
3437
"recommended": true

‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/api/README.md

+18-19
Original file line numberDiff line numberDiff line change
@@ -35,26 +35,25 @@ Works for tables and views.
3535
import { explain } from "@drizzle-lab/api/extensions";
3636
import { pgTable, text, jsonb } from "drizzle-orm/pg-core";
3737

38-
export const users = explain(
39-
pgTable("users", {
40-
id: text("id").primaryKey(),
41-
name: text("name").notNull(),
42-
metadata: jsonb("metadata").$type<{ role: string }>(),
43-
}), // or your table object
44-
{
45-
description: "Users table storing core user information",
46-
columns: {
47-
id: "Unique identifier for the user",
48-
name: "User's full name",
49-
metadata: "Additional user metadata stored as JSON"
38+
export const users = pgTable("users", {
39+
id: text("id").primaryKey(),
40+
name: text("name").notNull(),
41+
metadata: jsonb("metadata").$type<{ role: string }>(),
42+
});
43+
44+
explain(users, {
45+
description: "Users table storing core user information",
46+
columns: {
47+
id: "Unique identifier for the user",
48+
name: "User's full name",
49+
metadata: "Additional user metadata stored as JSON",
50+
},
51+
jsonShapes: {
52+
metadata: {
53+
role: "string",
5054
},
51-
jsonShapes: {
52-
metadata: {
53-
role: "string"
54-
}
55-
}
56-
}
57-
);
55+
},
56+
});
5857
```
5958

6059
### PostgreSQL API

0 commit comments

Comments
 (0)