wip

pkgs/clan-app/ui/src/components/Form/Fieldset.tsx

@@ -17,7 +17,7 @@ export interface FieldsetProps
   legend?: string;
   disabled?: boolean;
   error?: string;
-  children: (props: FieldsetFieldProps) => JSX.Element;
+  children: JSX.Element | ((props: FieldsetFieldProps) => JSX.Element);
 }
 
 export const Fieldset = (props: FieldsetProps) => {

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

@@ -27,11 +27,11 @@ main#welcome {
         }
     }
 
-    & > div.choose {
+    & > div.container {
         @apply absolute top-0 left-0 z-30;
         @apply flex flex-col items-center justify-evenly gap-y-20 w-full h-full;
 
-        & > div.controls {
+        & > div.welcome {
             @apply flex flex-col min-w-80 gap-y-6;
 
             & > div.separator {
@@ -39,6 +39,23 @@ main#welcome {
             }
         }
 
+        & > div.setup {
+            @apply flex flex-col min-w-[520px] gap-y-5;
+            @apply pt-10 px-8 pb-8 bg-def-1 rounded-lg;
+
+            & > div.header {
+                @apply flex items-center justify-start gap-x-2;
+            }
+
+            form {
+                @apply flex flex-col gap-y-5;
+
+                & > div.form-controls {
+                    @apply flex justify-end;
+                }
+            }
+        }
+
         svg[data-logo-name="Clan"], svg[data-logo-name="Darknet"] {
             @apply h-5;
         }

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

@@ -1,4 +1,4 @@
-import { Component } from "solid-js";
+import { Component, createSignal, Match, Switch } from "solid-js";
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
 import "./Onboarding.css";
 import { Typography } from "@/src/components/Typography/Typography";
@@ -7,9 +7,20 @@ 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 { TextInput } from "@/src/components/Form/TextInput";
+import { TextArea } from "@/src/components/Form/TextArea";
+import { Fieldset } from "@/src/components/Form/Fieldset";
+
+type State = "welcome" | "setup";
+
+type SetupForm = {
+  Name: string;
+  Description: string;
+};
 
 export const Onboarding: Component<RouteSectionProps> = (props) => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const activeURI = activeClanURI();
   if (activeURI) {
@@ -23,6 +34,10 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
     navigateToClan(navigate, uri);
   };
 
+  const [state, setState] = createSignal<State>("setup");
+
+  const [setupForm, { Form, Field, FieldArray }] = createForm<SetupForm>();
+
   return (
     <main id="welcome">
       <div class="background">
@@ -30,38 +45,98 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
         <div class="layer-2" />
         <div class="layer-3" />
       </div>
-      <div class="choose">
+
+      <div class="container">
         <Logo variant="Darknet" inverted={true} />
 
-        <div class="controls">
-          <Typography
-            hierarchy="headline"
-            size="xxl"
-            weight="bold"
-            align="center"
-            inverted={true}
-          >
-            Build your <br />
-            own darknet
-          </Typography>
-          <Button hierarchy="secondary">Start building</Button>
-          <div class="separator">
-            <Divider orientation="horizontal" inverted={true} />
-            <Typography
-              hierarchy="body"
-              size="s"
-              weight="medium"
-              inverted={true}
-              align="center"
-            >
-              or
-            </Typography>
-            <Divider orientation="horizontal" inverted={true} />
-          </div>
-          <Button hierarchy="primary" ghost={true} onAction={selectFolder}>
-            Select folder
-          </Button>
-        </div>
+        <Switch>
+          <Match when={state() === "welcome"}>
+            <div class="welcome">
+              <Typography
+                hierarchy="headline"
+                size="xxl"
+                weight="bold"
+                align="center"
+                inverted={true}
+              >
+                Build your <br />
+                own darknet
+              </Typography>
+              <Button hierarchy="secondary" onClick={() => setState("setup")}>
+                Start building
+              </Button>
+              <div class="separator">
+                <Divider orientation="horizontal" inverted={true} />
+                <Typography
+                  hierarchy="body"
+                  size="s"
+                  weight="medium"
+                  inverted={true}
+                  align="center"
+                >
+                  or
+                </Typography>
+                <Divider orientation="horizontal" inverted={true} />
+              </div>
+              <Button hierarchy="primary" ghost={true} onAction={selectFolder}>
+                Select folder
+              </Button>
+            </div>
+          </Match>
+
+          <Match when={state() === "setup"}>
+            <div class="setup">
+              <div class="header">
+                <Button
+                  hierarchy="secondary"
+                  ghost={true}
+                  icon="ArrowLeft"
+                  onClick={() => setState("welcome")}
+                />
+                <Typography hierarchy="headline" size="default" weight="bold">
+                  Setup
+                </Typography>
+              </div>
+              <Form>
+                <Field name="Name">
+                  {(field, props) =>
+                    <Fieldset>
+                      <TextInput
+                        {...props}
+                        label={field.name}
+                        value={field.value}
+                        required
+                        orientation="horizontal"
+                        input={{ placeholder: "Name your Clan" }}
+                      />
+                    </Fieldset>
+                  }
+                </Field>
+                <Field name="Description">
+                  {(field, props) =>
+                    <Fieldset>
+                      <TextArea
+                        {...props}
+                        label={field.name}
+                        value={field.value}
+                        required
+                        orientation="horizontal"
+                        input={{ rows: 4 }}
+                      />
+                    </Fieldset>
+                  }
+                </Field>
+
+                <div class="form-controls">
+                  <Button type="submit" hierarchy="primary" endIcon="ArrowRight">
+                    Next
+                  </Button>
+                </div>
+              </Form>
+            </div>
+          </Match>
+        </Switch>
+
         <Logo variant="Clan" inverted={true} />
       </div>
     </main>