validate there are no duplicate column names in a def (#307)

Signed-off-by: Aaron Sutula <asutula@users.noreply.github.com>
Co-authored-by: Aaron Sutula <asutula@users.noreply.github.com>

packages/validators/src/validators/defs.ts

@@ -13,6 +13,12 @@ const columnNameSchema = z
     "Column name can't start with a number and can contain any combination of letters, numbers, and underscores.",
   );
 
+function columnsNameUnique<T extends { name: string }>(columns: T[]) {
+  const columnNames = columns.map((column) => column.name);
+  const uniqueColumnNames = new Set(columnNames);
+  return columnNames.length === uniqueColumnNames.size;
+}
+
 const columnsSchema = z
   .array(
     z.object({
@@ -25,7 +31,8 @@ const columnsSchema = z
     }),
   )
   .min(1, "At least one column is required.")
-  .max(24, "A definition can have at most 24 columns.");
+  .max(24, "A definition can have at most 24 columns.")
+  .refine(columnsNameUnique, { message: "Column names must be unique." });
 
 const schemaSchema: z.ZodType<Schema> = z.object({
   columns: z
@@ -37,7 +44,8 @@ const schemaSchema: z.ZodType<Schema> = z.object({
       }),
     )
     .min(1, "At least one column is required.")
-    .max(24, "A definition can have at most 24 columns."),
+    .max(24, "A definition can have at most 24 columns.")
+    .refine(columnsNameUnique, { message: "Column names must be unique." }),
   defConstraints: z.array(z.string().trim().min(1)).optional(),
 });
 

packages/web/app/_components/new-env-form.tsx

@@ -6,7 +6,7 @@ import { type z } from "zod";
 import { skipToken } from "@tanstack/react-query";
 import { type schema } from "@tableland/studio-store";
 import { envNameSchema } from "@tableland/studio-validators";
-import { FormRootMessage } from "@/components/form-root";
+import { FormRootMessage } from "@/components/form";
 import InputWithCheck from "@/components/input-with-check";
 import { Button } from "@/components/ui/button";
 import {

packages/web/app/_components/new-team-form.tsx

@@ -6,7 +6,7 @@ import { type z } from "zod";
 import { skipToken } from "@tanstack/react-query";
 import { type schema } from "@tableland/studio-store";
 import { newTeamSchema } from "@tableland/studio-validators";
-import { FormRootMessage } from "@/components/form-root";
+import { FormRootMessage } from "@/components/form";
 import InputWithCheck from "@/components/input-with-check";
 import TagInput from "@/components/tag-input";
 import { Button } from "@/components/ui/button";

packages/web/components/edit-def.tsx

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { type z } from "zod";
 import { skipToken } from "@tanstack/react-query";
 import { updateDefFormSchema } from "@tableland/studio-validators";
-import { FormRootMessage } from "@/components/form-root";
+import { FormRootMessage } from "@/components/form";
 import InputWithCheck from "@/components/input-with-check";
 import { Button } from "@/components/ui/button";
 import {

packages/web/components/form-root.tsx → packages/web/components/form.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useFormContext } from "react-hook-form";
+import { useFormField } from "./ui/form";
 import { cn } from "@/lib/utils";
 
 const FormRootMessage = React.forwardRef<
@@ -27,4 +28,28 @@ const FormRootMessage = React.forwardRef<
 });
 FormRootMessage.displayName = "FormRootMessage";
 
-export { FormRootMessage };
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error?.root?.message ?? error?.message ?? children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export { FormRootMessage, FormMessage };

packages/web/components/import-table-form.tsx

@@ -18,7 +18,7 @@ import TeamSwitcher from "./team-switcher";
 import ProjectSwitcher from "./project-switcher";
 import EnvSwitcher from "./env-switcher";
 import ChainSelector from "@/components/chain-selector";
-import { FormRootMessage } from "@/components/form-root";
+import { FormRootMessage } from "@/components/form";
 import InputWithCheck from "@/components/input-with-check";
 import { Button } from "@/components/ui/button";
 import {

packages/web/components/new-def-form.tsx

@@ -12,7 +12,7 @@ import { type z } from "zod";
 import { skipToken } from "@tanstack/react-query";
 import { newDefFormSchema } from "@tableland/studio-validators";
 import Columns from "./columns";
-import { FormRootMessage } from "./form-root";
+import { FormRootMessage, FormMessage } from "./form";
 import InputWithCheck from "./input-with-check";
 import { Button } from "./ui/button";
 import DefConstraints from "./def-constraints";
@@ -30,7 +30,6 @@ import {
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,
 } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/trpc/react";

packages/web/components/new-project-form.tsx

@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/form";
 import { Button } from "@/components/ui/button";
 import InputWithCheck from "@/components/input-with-check";
-import { FormRootMessage } from "@/components/form-root";
+import { FormRootMessage } from "@/components/form";
 import { cn } from "@/lib/utils";
 
 export interface NewProjectFormProps {

packages/web/components/registration-dialog.tsx

@@ -18,7 +18,7 @@ import {
   DialogTitle,
 } from "./ui/dialog";
 import { Input } from "./ui/input";
-import { FormRootMessage } from "./form-root";
+import { FormRootMessage } from "./form";
 import {
   Form,
   FormControl,

packages/web/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@codemirror/lang-sql": "^6.7.0",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -63,7 +63,7 @@
     "next": "^14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.46.2",
+    "react-hook-form": "^7.52.2",
     "react-share": "^5.1.0",
     "siwe": "^2.3.2",
     "superjson": "^2.2.1",