wip

pkgs/clan-app/ui/package-lock.json

@@ -19,7 +19,8 @@
         "@tanstack/solid-query": "^5.76.0",
         "solid-js": "^1.9.7",
         "solid-toast": "^0.5.0",
-        "three": "^0.176.0"
+        "three": "^0.176.0",
+        "valibot": "^1.1.0"
       },
       "devDependencies": {
         "@babel/plugin-syntax-import-attributes": "^7.27.1",

pkgs/clan-app/ui/package.json

@@ -74,7 +74,8 @@
     "@tanstack/solid-query": "^5.76.0",
     "solid-js": "^1.9.7",
     "solid-toast": "^0.5.0",
-    "three": "^0.176.0"
+    "three": "^0.176.0",
+    "valibot": "^1.1.0"
   },
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "^0.25.4",

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css

@@ -51,7 +51,7 @@ main#welcome {
                 @apply flex flex-col gap-y-5;
 
                 & > div.form-controls {
-                    @apply flex justify-end;
+                    @apply flex justify-end pt-6;
                 }
             }
         }

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx

@@ -7,17 +7,26 @@ import { Divider } from "@/src/components/Divider/Divider";
 import { Logo } from "@/src/components/Logo/Logo";
 import { navigateToClan, selectClanFolder } from "@/src/hooks/clan";
 import { activeClanURI } from "@/src/stores/clan";
-import { createForm } from "@modular-forms/solid";
+import { createForm, valiForm } from "@modular-forms/solid";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { TextArea } from "@/src/components/Form/TextArea";
 import { Fieldset } from "@/src/components/Form/Fieldset";
+import * as v from 'valibot';
 
 type State = "welcome" | "setup";
 
-type SetupForm = {
-  Name: string;
-  Description: string;
-};
+const SetupSchema = v.object({
+  name: v.pipe(
+    v.string(),
+    v.nonEmpty("Please enter a name.")
+  ),
+  description: v.pipe(
+    v.string(),
+    v.nonEmpty("Please describe your Clan.")
+  )
+})
+
+type SetupForm = v.InferInput<typeof SetupSchema>;
 
 export const Onboarding: Component<RouteSectionProps> = (props) => {
   const navigate = useNavigate();
@@ -36,7 +45,9 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
 
   const [state, setState] = createSignal<State>("setup");
 
-  const [setupForm, { Form, Field, FieldArray }] = createForm<SetupForm>();
+  const [setupForm, { Form, Field }] = createForm<SetupForm>({
+    validate: valiForm(SetupSchema)
+  });
 
   return (
     <main id="welcome">
@@ -98,30 +109,30 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
                 </Typography>
               </div>
               <Form>
-                <Field name="Name">
-                  {(field, props) =>
-                    <Fieldset>
+                <Field name="name">
+                  {(field, input) =>
+                    <Fieldset error={field.error}>
                       <TextInput
-                        {...props}
-                        label={field.name}
+                        {...input}
+                        label="Name"
                         value={field.value}
                         required
                         orientation="horizontal"
-                        input={{ placeholder: "Name your Clan" }}
+                        input={input}
                       />
                     </Fieldset>
                   }
                 </Field>
-                <Field name="Description">
-                  {(field, props) =>
-                    <Fieldset>
+                <Field name="description">
+                  {(field, input) =>
+                    <Fieldset error={field.error}>
                       <TextArea
-                        {...props}
-                        label={field.name}
+                        {...input}
                         value={field.value}
+                        label="Description"
                         required
                         orientation="horizontal"
-                        input={{ rows: 4 }}
+                        input={input}
                       />
                     </Fieldset>
                   }