Standardize table schema format

packages/store/src/api/tables.ts

@@ -3,7 +3,13 @@ import { randomUUID } from "crypto";
 import { eq } from "drizzle-orm";
 import { DrizzleD1Database } from "drizzle-orm/d1";
 import * as schema from "../schema";
-import { Table, projectTables, tables, teamProjects, teams } from "../schema";
+import {
+  NewTable,
+  projectTables,
+  tables,
+  teamProjects,
+  teams,
+} from "../schema";
 import { slugify } from "./utils";
 
 export function initTables(
@@ -31,7 +37,7 @@ export function initTables(
         tbl.prepare(projectTableSql).bind(projectTableParams),
         tbl.prepare(tableSql).bind(tableParams),
       ]);
-      const table: Table = { id: tableId, name, description, schema, slug };
+      const table: NewTable = { id: tableId, name, description, schema, slug };
       return table;
     },
 
@@ -44,7 +50,7 @@ export function initTables(
         .orderBy(tables.name)
         .all();
       const mapped = res.map((r) => r.tables);
-      return mapped;
+      return mapped as unknown as schema.Table[];
     },
 
     tableTeam: async function (tableId: string) {

packages/store/src/schema/index.ts

@@ -1,3 +1,4 @@
+import { Table as TablelandTable } from "@tableland/sdk";
 import { InferInsertModel, InferSelectModel } from "drizzle-orm";
 import {
   integer,
@@ -150,7 +151,11 @@ export const teamInvites = sqliteTable("team_invites", {
   claimedAt: text("claimed_at"),
 });
 
-export type Table = InferSelectModel<typeof tables>;
+export type Schema = TablelandTable["schema"];
+
+export type Table = Omit<InferSelectModel<typeof tables>, "schema"> & {
+  schema: Schema;
+};
 export type NewTable = InferInsertModel<typeof tables>;
 
 export type UserSealed = InferSelectModel<typeof users>;

packages/web/app/[team]/[project]/(project)/deployments/[[...slug]]/_components/exec-deployment.tsx

@@ -18,6 +18,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { generateCreateTableStatement } from "@/lib/schema";
 import { cn } from "@/lib/utils";
 import {
   Database,
@@ -108,8 +109,9 @@ export default function ExecDeployment({
           baseUrl: helpers.getBaseUrl(chainId),
           autoWait: false,
         });
-        // TODO: Table.schema will be JSON, convert it to SQL create table statement.
-        const res = await tbl.exec(table.schema);
+
+        const stmt = generateCreateTableStatement(table.name, table.schema);
+        const res = await tbl.exec(stmt);
         if (res.error) {
           throw new Error(res.error);
         }

packages/web/app/[team]/[project]/new-table/_components/new-table-form.tsx

@@ -1,9 +1,7 @@
 "use client";
 
 import { newTable } from "@/app/actions";
-import SchemaBuilder, {
-  createTableStatementFromObject,
-} from "@/components/schema-builder";
+import SchemaBuilder from "@/components/schema-builder";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -16,14 +14,13 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { createTableAtom } from "@/store/create-table";
+import { cleanSchema, generateCreateTableStatement } from "@/lib/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { helpers } from "@tableland/sdk";
 import { schema } from "@tableland/studio-store";
-import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import * as z from "zod";
 
@@ -51,7 +48,7 @@ export default function NewTable({ project, team, envs }: Props) {
   const [pending, startTransition] = useTransition();
   const router = useRouter();
 
-  const [createTable, setCreateTable] = useAtom(createTableAtom);
+  const [schema, setSchema] = useState<schema.Schema>({ columns: [] });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -73,17 +70,13 @@ export default function NewTable({ project, team, envs }: Props) {
 
   function onSubmit(values: z.infer<typeof formSchema>) {
     startTransition(async () => {
-      const statement = createTableStatementFromObject(
-        createTable,
+      await newTable(
+        project,
         values.name,
+        values.description,
+        cleanSchema(schema),
       );
-      if (!statement) {
-        console.error("No statement");
-        return;
-      }
-      await newTable(project, values.name, statement, values.description);
       router.replace(`/${team.slug}/${project.slug}`);
-      setCreateTable({ columns: [] });
     });
   }
 
@@ -128,8 +121,8 @@ export default function NewTable({ project, team, envs }: Props) {
         />
         <div className="space-y-2">
           <FormLabel>Columns</FormLabel>
-          <SchemaBuilder />
-          <pre>{createTableStatementFromObject(createTable, name)}</pre>
+          <SchemaBuilder schema={schema} setSchema={setSchema} />
+          <pre>{generateCreateTableStatement(name, schema)}</pre>
         </div>
         {/* <div className="space-y-2">
           <FormLabel>Deployments</FormLabel>

packages/web/app/actions.ts

@@ -80,13 +80,13 @@ export async function newEnvironment(
 export async function newTable(
   project: schema.Project,
   name: string,
-  schema: string,
   description: string,
+  schema: schema.Schema,
 ) {
   const table = api.tables.newTable.mutate({
     projectId: project.id,
     name,
-    schema,
+    schema: JSON.stringify(schema),
     description,
   });
   await api.tables.projectTables.revalidate({ projectId: project.id });

packages/web/components/crumb.tsx

@@ -15,16 +15,15 @@ export default function Crumb({
   return (
     <div className={cn("flex", className)}>
       {items.map((item, index) => (
-        <>
+        <div key={item.label}>
           <Link
-            key={item.label}
             href={item.href}
             className="text-lg text-muted-foreground hover:text-primary"
           >
             {item.label}
           </Link>
           <span className="mx-2 text-lg text-muted-foreground">/</span>
-        </>
+        </div>
       ))}
       <p className="text-lg">{title}</p>
     </div>