diff --git a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx b/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx index 855368b0b..eba2f9658 100644 --- a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx +++ b/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", + }, +}; diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx index 17bde23d2..4aebfdd9c 100644 --- a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx +++ b/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 ( - + Installing: {props.machineName} ); }; +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; + +const ConfigureAddress = () => { + const [formStore, { Form, Field }] = createForm({ + validate: valiForm(ConfigureAdressSchema), + }); + const stepSignal = useStepper(); + + // TODO: push values to the parent form Store + const handleSubmit: SubmitHandler = (values, event) => { + console.log("ISO creation submitted", values); + // Here you would typically trigger the ISO creation process + stepSignal.next(); + }; + + return ( +
+ +
+ + {(field, props) => ( + + )} + +
+ + } + footer={ +
+ + Next +
+ } + /> + + ); +}; + +const CheckHardware = () => { + const stepSignal = useStepper(); + // TODO: Hook this up with api + const [report, setReport] = createSignal(true); + + const handleNext = () => { + stepSignal.next(); + }; + + return ( + +
+ + + Check hardware + + + + + + + +
+ + } + footer={ +
+ + Next +
+ } + /> + ); +}; + export const installSteps = [ { - id: "install:machine-0", + id: "install:address", title: InstallHeader, - content: () => ( -
- Enter the targetHost - -
- ), + content: ConfigureAddress, + }, + { + id: "install:check-hardware", + title: InstallHeader, + content: CheckHardware, }, { id: "install:confirm",