diff --git a/pkgs/clan-app/ui/package-lock.json b/pkgs/clan-app/ui/package-lock.json index 6409316e7..d79fb9047 100644 --- a/pkgs/clan-app/ui/package-lock.json +++ b/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", diff --git a/pkgs/clan-app/ui/package.json b/pkgs/clan-app/ui/package.json index f57071054..b38d909a0 100644 --- a/pkgs/clan-app/ui/package.json +++ b/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", diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css index 2a9a759a4..1b7f2a35e 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css +++ b/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; } } } diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx index 3f835f26e..e65ad2b49 100644 --- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx +++ b/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; export const Onboarding: Component = (props) => { const navigate = useNavigate(); @@ -36,7 +45,9 @@ export const Onboarding: Component = (props) => { const [state, setState] = createSignal("setup"); - const [setupForm, { Form, Field, FieldArray }] = createForm(); + const [setupForm, { Form, Field }] = createForm({ + validate: valiForm(SetupSchema) + }); return (
@@ -98,30 +109,30 @@ export const Onboarding: Component = (props) => {
- - {(field, props) => -
+ + {(field, input) => +
}
- - {(field, props) => -
+ + {(field, input) => +