yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Brian McGee
2025-07-09 11:05:33 +01:00
parent 2e8ea44a30
commit a2a7dceafe
4 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pkgs/clan-app/ui/package-lock.json generated
View File

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

3
pkgs/clan-app/ui/package.json
View File

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

2
pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css
View File

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

47
pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx
View File

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