Wizard step

import { Button } from "@bosunkit/components/button";
import { RadioCards } from "@bosunkit/components/radio-cards";
import { FormField } from "@bosunkit/components/form-field";
import { TextArea } from "@bosunkit/components/text-area";
import { WizardStep } from "@bosunkit/components/wizard-step";
import { FilePlus, LayoutTemplate, Sparkles } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The first step of adding a maintenance record: how to start, what the job is, examples to try, and a footer that says " +
  "what will happen with Cancel and the one primary action.";

const EXAMPLES: readonly string[] = [
  "Replace the raw-water impeller every 200 engine hours",
  "Check the liferaft service date before each season",
  "Grease the winches every month",
];

export default function Showcase(): ReactElement {
  const [description, setDescription]: [string, Dispatch<SetStateAction<string>>] = useState<string>(
    "Replace the engine's raw-water impeller every 200 engine hours and remind me a week before.",
  );
  return (
    <WizardStep
      title="Add a maintenance record"
      description="Choose how to start. You can change everything later."
      closeLabel="Close"
      onClose={(): void => undefined}
      note={
        <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-sm)" }}>
          <Sparkles size="1em" aria-hidden="true" /> Drafts are saved as not yet due
        </span>
      }
      actions={
        <>
          <Button>Cancel</Button>
          <Button variant="primary">Create record</Button>
        </>
      }
    >
      <RadioCards
        label="How do you want to start?"
        defaultValue="describe"
        options={[
          { value: "describe", label: "Describe it", description: "Bosun drafts the steps from plain words.", icon: <Sparkles size="1.25em" /> },
          { value: "template", label: "From a template", description: "Tested schedules for your engine.", icon: <LayoutTemplate size="1.25em" /> },
          { value: "blank", label: "Blank record", description: "Fill in every field yourself.", icon: <FilePlus size="1.25em" /> },
        ]}
      />
      <FormField label="What needs doing?">
        <TextArea
          aria-label="What needs doing?"
          value={description}
          onChange={(event): void => {
            setDescription(event.target.value);
          }}
        />
      </FormField>
      <div>
        <div style={{ marginBlockEnd: "var(--space-sm)", color: "var(--text-dim)" }}>Try an example</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-sm)" }}>
          {EXAMPLES.map(
            (example: string): ReactElement => (
              <Button
                key={example}
                size="sm"
                variant="ghost"
                textCase="none"
                onClick={(): void => {
                  setDescription(example);
                }}
              >
                {example}
              </Button>
            ),
          )}
        </div>
      </div>
    </WizardStep>
  );
}

import { Button } from "@bosunkit/components/button";
import { FormField } from "@bosunkit/components/form-field";
import { Input } from "@bosunkit/components/input";
import { WizardStep } from "@bosunkit/components/wizard-step";
import type { ReactElement } from "react";

export const description: string =
  "A step in a flow of three: the segments above the title and the words \"Step 2 of 3\" say where the crew are, with Back " +
  "and Next at the end of the footer.";

export default function WithProgress(): ReactElement {
  return (
    <WizardStep
      title="When is it due?"
      description="Bosun reminds you a week before."
      progress={{ current: 2, total: 3, label: "Step 2 of 3" }}
      note="Engine hours come from the last reading"
      actions={
        <>
          <Button variant="ghost">Back</Button>
          <Button variant="primary">Next</Button>
        </>
      }
    >
      <FormField label="Every how many engine hours?">
        <Input aria-label="Every how many engine hours?" inputMode="numeric" defaultValue="200" />
      </FormField>
    </WizardStep>
  );
}

import { WizardStep } from "@bosunkit/components/wizard-step";
import type { ReactElement } from "react";

export const description: string =
  "A step with the why beside the what: the explanation says what the answer decides, the Back and Next buttons carry the whole phrases.";

export default function Navigated(): ReactElement {
  return (
    <WizardStep
      title="Choose the vessel"
      description="The checklist applies to this vessel."
      progress={{ current: 2, total: 3, label: "Step 2 of 3" }}
      explanation="The vessel decides the checklist's scope: its equipment, its crew and its routes."
      note="Nothing is saved until Finish."
      previousLabel="Back to the record"
      onPrevious={(): void => {}}
      nextLabel="Next: the checklist"
      onNext={(): void => {}}
    >
      <p>The vessel's choices.</p>
    </WizardStep>
  );
}

import { WizardFinal } from "@bosunkit/components/wizard-step";
import type { ReactElement } from "react";

export const description: string =
  "The wizard's last page: the flow finished, the answers to check, and the one done action.";

export default function Finished(): ReactElement {
  return (
    <WizardFinal
      title="The record is on the schedule"
      description="The crew are notified."
      summary={[
        { label: "Vessel", value: "Althea" },
        { label: "Work", value: "Anchor windlass service" },
        { label: "Due", value: "14 October" },
      ]}
      doneLabel="Done"
      onDone={(): void => {}}
    />
  );
}