One-time code input

import { Button } from "@bosunkit/components/button";
import { Card } from "@bosunkit/components/card";
import { FormField } from "@bosunkit/components/form-field";
import { OneTimeCodeInput } from "@bosunkit/components/one-time-code-input";
import { useState, type Dispatch, type ReactElement, type SetStateAction, type SyntheticEvent } from "react";

export const description: string =
  "Joining a marina's network that sends a code by text: a box for each of the six digits over one field, which a " +
  "phone offers to fill from the message above its keyboard. A code pasted as 482 913 fills all six.";

const CODE_LENGTH: number = 6;

export default function Showcase(): ReactElement {
  const [code, setCode]: [string, Dispatch<SetStateAction<string>>] = useState<string>("");
  const [tried, setTried]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const short: boolean = tried && code.length !== CODE_LENGTH;
  return (
    <Card title="Hamble Point Marina Wi-Fi" style={{ width: "100%", maxWidth: 420 }}>
      <form
        style={{ display: "grid", gap: "var(--space-md)" }}
        onSubmit={(event: SyntheticEvent<HTMLFormElement>): void => {
          event.preventDefault();
          setTried(true);
        }}
      >
        <FormField
          label="Verification code"
          hint="Sent by text to the number you gave the marina office."
          error={
            short
              ? `The code has ${String(code.length)} digits. Type all ${String(CODE_LENGTH)} from the message.`
              : undefined
          }
          required
        >
          <OneTimeCodeInput length={CODE_LENGTH} value={code} onValueChange={setCode} />
        </FormField>
        <Button type="submit" variant="primary">
          Join network
        </Button>
      </form>
    </Card>
  );
}

import { FormField } from "@bosunkit/components/form-field";
import { OneTimeCodeInput } from "@bosunkit/components/one-time-code-input";
import type { ReactElement } from "react";

export const description: string =
  "A code whose length the caller does not fix, such as one a provider sends in four to eight digits: one field, no " +
  "boxes, any length.";

export default function AnyLength(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 320 }}>
      <FormField label="Sign-in code" hint="From the text the provider sent you.">
        <OneTimeCodeInput defaultValue="4829" />
      </FormField>
    </div>
  );
}

import { OneTimeCodeInput } from "@bosunkit/components/one-time-code-input";
import type { ReactElement } from "react";

export const description: string =
  "The outlined appearance, as the maritime inputs draw: the field's name on the outline and the hint under it.";

export default function Outlined(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <OneTimeCodeInput
        appearance="outlined"
        label="Verification code"
        hint="The six-digit code the marina sent by text."
      />
    </div>
  );
}

import { OneTimeCodeInput } from "@bosunkit/components/one-time-code-input";
import type { ReactElement } from "react";

export const description: string =
  "A code with a digit missing: the error counts the digits typed and says how many the message holds.";

export default function Invalid(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <OneTimeCodeInput
        appearance="outlined"
        label="Verification code"
        defaultValue="48291"
        error="The code has 5 digits. Type all 6 from the message."
      />
    </div>
  );
}

import { OneTimeCodeInput } from "@bosunkit/components/one-time-code-input";
import type { ReactElement } from "react";

export const description: string = "A disabled field, while the code is being checked.";

export default function Disabled(): ReactElement {
  return (
    <div style={{ width: "100%", maxWidth: 360 }}>
      <OneTimeCodeInput appearance="outlined" label="Verification code" defaultValue="482913" disabled />
    </div>
  );
}