Standardize table schema format

packages/api/package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tableland/sdk": "^4.5.1",
+    "@tableland/sdk": "^4.5.2",
     "@tableland/studio-mail": "^0.0.0",
     "@tableland/studio-store": "^1.0.0",
     "@trpc/server": "^10.38.4",

packages/api/src/routers/tables.ts

@@ -1,9 +1,20 @@
 import { Validator, helpers } from "@tableland/sdk";
-import { Store } from "@tableland/studio-store";
+import { Schema, Store } from "@tableland/studio-store";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { projectProcedure, publicProcedure, router } from "../trpc";
 
+const schemaSchema: z.ZodType<Schema> = z.object({
+  columns: z.array(
+    z.object({
+      name: z.string().nonempty(),
+      type: z.string().nonempty(),
+      constraints: z.array(z.string().nonempty()).optional(),
+    }),
+  ),
+  table_constraints: z.array(z.string().nonempty()).optional(),
+});
+
 export function tablesRouter(store: Store) {
   return router({
     projectTables: publicProcedure
@@ -15,8 +26,8 @@ export function tablesRouter(store: Store) {
       .input(
         z.object({
           name: z.string(),
-          schema: z.string(),
           description: z.string().nonempty(),
+          schema: schemaSchema,
         }),
       )
       .mutation(async ({ input }) => {
@@ -47,12 +58,11 @@ export function tablesRouter(store: Store) {
           tableId: input.tableId,
         });
 
-        // TODO: Figure out a standard way of encoding schema for both Tables created in Studio and imported tables.
         const table = await store.tables.createTable(
           input.projectId,
           input.name,
           input.description,
-          JSON.stringify(tablelandTable.schema),
+          tablelandTable.schema,
         );
         const createdAttr = tablelandTable.attributes?.find(
           (attr) => attr.traitType === "created",

packages/cli/package.json

@@ -43,7 +43,7 @@
   },
   "license": "MIT AND Apache-2.0",
   "dependencies": {
-    "@tableland/sdk": "^4.5.1",
+    "@tableland/sdk": "^4.5.2",
     "@tableland/sqlparser": "^1.3.0",
     "@tableland/studio-client": "^0.0.0",
     "@toruslabs/broadcast-channel": "^8.0.0",

packages/store/package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tableland/sdk": "^4.5.1",
+    "@tableland/sdk": "^4.5.2",
     "drizzle-orm": "^0.28.5",
     "iron-session": "^6.3.1"
   }

packages/store/src/api/tables.ts

@@ -2,6 +2,7 @@ import { Database } from "@tableland/sdk";
 import { randomUUID } from "crypto";
 import { eq } from "drizzle-orm";
 import { DrizzleD1Database } from "drizzle-orm/d1";
+import { Schema } from "../custom-types";
 import * as schema from "../schema";
 import { Table, projectTables, tables, teamProjects, teams } from "../schema";
 import { slugify } from "./utils";
@@ -15,7 +16,7 @@ export function initTables(
       projectId: string,
       name: string,
       description: string,
-      schema: string,
+      schema: Schema,
     ) {
       const tableId = randomUUID();
       const slug = slugify(name);

packages/store/src/custom-types/index.ts

@@ -0,0 +1,18 @@
+import { Schema as SDKSchema } from "@tableland/sdk";
+import { customType } from "drizzle-orm/sqlite-core";
+
+export type Schema = SDKSchema;
+
+export const schema = customType<{
+  data: Schema;
+}>({
+  dataType() {
+    return "text";
+  },
+  fromDriver(value: unknown): Schema {
+    return value as Schema;
+  },
+  toDriver(value: Schema): string {
+    return JSON.stringify(value);
+  },
+});

packages/store/src/index.ts

@@ -1,6 +1,7 @@
 import { init } from "./api";
+import { Schema } from "./custom-types";
 import * as schema from "./schema";
 
 type Store = ReturnType<typeof init>;
 
-export { Store, init, schema };
+export { Schema, Store, init, schema };

packages/store/src/schema/index.ts

@@ -6,6 +6,7 @@ import {
   text,
   uniqueIndex,
 } from "drizzle-orm/sqlite-core";
+import { schema } from "../custom-types";
 
 export const users = sqliteTable(
   "users",
@@ -80,7 +81,7 @@ export const tables = sqliteTable("tables", {
   slug: text("slug").notNull(),
   name: text("name").notNull(),
   description: text("description").notNull(),
-  schema: text("schema").notNull(),
+  schema: schema("schema").notNull(),
 });
 
 export const projectTables = sqliteTable(

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 { Schema, schema } from "@tableland/studio-store";
 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>({ 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

@@ -2,7 +2,7 @@
 
 import { api } from "@/trpc/server-invoker";
 import { Auth } from "@tableland/studio-api";
-import { schema } from "@tableland/studio-store";
+import { schema, Schema } from "@tableland/studio-store";
 
 export async function authenticated() {
   return await api.auth.authenticated.query();
@@ -80,8 +80,8 @@ export async function newEnvironment(
 export async function newTable(
   project: schema.Project,
   name: string,
-  schema: string,
   description: string,
+  schema: Schema,
 ) {
   const table = api.tables.newTable.mutate({
     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>