UI/install: installer steps bootstrap visuals {TargetHost,hw_report}

pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx

@@ -52,3 +52,17 @@ export const CreateInstallerDone: Story = {
     initialStep: "create:done",
   },
 };
+export const InstallConfigureAddress: Story = {
+  description: "Installation configure address step",
+  args: {
+    machineName: "Test Machine",
+    initialStep: "install:address",
+  },
+};
+export const InstallCheckHardware: Story = {
+  description: "Installation check hardware step",
+  args: {
+    machineName: "Test Machine",
+    initialStep: "install:check-hardware",
+  },
+};

pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx

@@ -1,24 +1,144 @@
 import { Typography } from "@/src/components/Typography/Typography";
-import { NextButton } from "../../Steps";
+import { BackButton, NextButton, StepLayout } from "../../Steps";
+import {
+  createForm,
+  getError,
+  SubmitHandler,
+  valiForm,
+} from "@modular-forms/solid";
+import { Fieldset } from "@/src/components/Form/Fieldset";
+import * as v from "valibot";
+import { useStepper } from "@/src/hooks/stepper";
+import { InstallSteps } from "../install";
+import { TextInput } from "@/src/components/Form/TextInput";
+import { Alert } from "@/src/components/Alert/Alert";
+import { createSignal, Show } from "solid-js";
+import { Divider } from "@/src/components/Divider/Divider";
+import { Orienter } from "@/src/components/Form/Orienter";
+import { Button } from "@/src/components/Button/Button";
 
 export const InstallHeader = (props: { machineName: string }) => {
   return (
-    <Typography hierarchy="label" size="default">
+    <Typography hierarchy="label" size="default" class="px-6">
       Installing: {props.machineName}
     </Typography>
   );
 };
 
+const ConfigureAdressSchema = v.object({
+  targetHost: v.pipe(
+    v.string("Please set a target host."),
+    v.nonEmpty("Please set a target host."),
+  ),
+});
+
+type ConfigureAdressForm = v.InferInput<typeof ConfigureAdressSchema>;
+
+const ConfigureAddress = () => {
+  const [formStore, { Form, Field }] = createForm<ConfigureAdressForm>({
+    validate: valiForm(ConfigureAdressSchema),
+  });
+  const stepSignal = useStepper<InstallSteps>();
+
+  // TODO: push values to the parent form Store
+  const handleSubmit: SubmitHandler<ConfigureAdressForm> = (values, event) => {
+    console.log("ISO creation submitted", values);
+    // Here you would typically trigger the ISO creation process
+    stepSignal.next();
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <StepLayout
+        body={
+          <div class="flex flex-col gap-2">
+            <Fieldset>
+              <Field name="targetHost">
+                {(field, props) => (
+                  <TextInput
+                    {...field}
+                    label="IP Address"
+                    description="Hostname of the installation target"
+                    value={field.value}
+                    required
+                    orientation="horizontal"
+                    validationState={
+                      getError(formStore, "targetHost") ? "invalid" : "valid"
+                    }
+                    input={{
+                      ...props,
+                      placeholder: "i.e. flash-installer.local",
+                    }}
+                  />
+                )}
+              </Field>
+            </Fieldset>
+          </div>
+        }
+        footer={
+          <div class="flex justify-between">
+            <BackButton />
+            <NextButton type="submit">Next</NextButton>
+          </div>
+        }
+      />
+    </Form>
+  );
+};
+
+const CheckHardware = () => {
+  const stepSignal = useStepper<InstallSteps>();
+  // TODO: Hook this up with api
+  const [report, setReport] = createSignal<boolean>(true);
+
+  const handleNext = () => {
+    stepSignal.next();
+  };
+
+  return (
+    <StepLayout
+      body={
+        <div class="flex flex-col gap-2">
+          <Fieldset>
+            <Orienter orientation="horizontal">
+              <Typography hierarchy="label" size="xs" weight="bold">
+                Check hardware
+              </Typography>
+              <Button hierarchy="secondary" startIcon="Report">
+                Run hardware report
+              </Button>
+            </Orienter>
+            <Divider orientation="horizontal" />
+            <Show when={report()}>
+              <Alert
+                icon="Checkmark"
+                type="info"
+                title="Hardware report exists"
+              />
+            </Show>
+          </Fieldset>
+        </div>
+      }
+      footer={
+        <div class="flex justify-between">
+          <BackButton />
+          <NextButton onClick={handleNext}>Next</NextButton>
+        </div>
+      }
+    />
+  );
+};
+
 export const installSteps = [
   {
-    id: "install:machine-0",
+    id: "install:address",
     title: InstallHeader,
-    content: () => (
+    content: ConfigureAddress,
-      <div>
+  },
-        Enter the targetHost
+  {
-        <NextButton />
+    id: "install:check-hardware",
-      </div>
+    title: InstallHeader,
-    ),
+    content: CheckHardware,
   },
   {
     id: "install:confirm",