web/packages/design-system/lib/components/Input/Input.stories.tsx

import type { Meta, StoryObj } from "@storybook/nextjs-vite"

import { expect } from "storybook/test"

import { Input } from "./Input"
import { TextField } from "react-aria-components"
import { MaterialIcon } from "../Icons/MaterialIcon"
import type { SymbolCodepoints } from "../Icons/MaterialIcon/MaterialSymbol/types"

const meta: Meta<typeof Input> = {
  title: "Core Components/Input",
  // @ts-expect-error Input does not support this, but wrapping <TextField> does
  component: ({ isInvalid, validationState, ...props }) => (
    <TextField isInvalid={isInvalid} data-validation-state={validationState}>
      <Input {...props} data-validation-state={validationState} />
    </TextField>
  ),
  argTypes: {
    label: {
      control: "text",
      description: "The label text displayed for the input field",
      table: {
        type: { summary: "string" },
      },
    },
    labelPosition: {
      control: "select",
      options: ["floating", "top"],
      description: "Position of the label relative to the input",
      table: {
        type: { summary: "'floating' | 'top'" },
        defaultValue: { summary: "'floating'" },
      },
    },
    placeholder: {
      control: "text",
      description: "Placeholder text shown when input is empty",
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "undefined" },
      },
    },
    required: {
      control: "boolean",
      description: "Whether the input is required",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    disabled: {
      control: "boolean",
      description: "Whether the input is disabled",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    showClearContentIcon: {
      control: "boolean",
      description: "Whether the clear content icon is shown",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    showLeftIcon: {
      control: "boolean",
      description: "Whether to show a left icon",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    showRightIcon: {
      control: "boolean",
      description: "Whether to show a right icon",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    leftIconName: {
      control: "select",
      options: [
        "calendar_month",
        "credit_card",
        "email",
        "info_circle",
        "location_on",
        "lock",
        "phone",
        "search",
        "sell",
        "visibility",
        "visibility_off",
      ],
      description: "Icon name for the left icon",
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "'person'" },
      },
    },
    rightIconName: {
      control: "select",
      options: [
        "calendar_month",
        "credit_card",
        "email",
        "info_circle",
        "location_on",
        "lock",
        "phone",
        "search",
        "sell",
        "visibility",
        "visibility_off",
      ],
      description: "Icon name for the right icon",
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "'lock'" },
      },
    },
    showWarning: {
      control: "boolean",
      description: "Whether to show warning validation state",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: "false" },
      },
    },
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } as any,
}

export default meta

type Story = StoryObj<typeof Input>

export const Default: Story = {
  args: {
    label: "Label",
    name: "foo",
    required: false,
    showLeftIcon: false,
    showRightIcon: false,
    leftIconName: "person",
    rightIconName: "lock",
    showWarning: false,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } as any,
  render: (args) => {
    // Extract custom Storybook args
    const {
      showLeftIcon,
      showRightIcon,
      leftIconName,
      rightIconName,
      showWarning,
      ...inputProps
    } = args as typeof args & {
      showLeftIcon?: boolean
      showRightIcon?: boolean
      leftIconName?: string
      rightIconName?: string
      showWarning?: boolean
    }

    const validationState = showWarning ? "warning" : undefined

    return (
      <TextField data-validation-state={validationState}>
        <Input
          {...inputProps}
          data-validation-state={validationState}
          leftIcon={
            showLeftIcon && leftIconName ? (
              <MaterialIcon icon={leftIconName as SymbolCodepoints} />
            ) : undefined
          }
          rightIcon={
            showRightIcon && rightIconName ? (
              <MaterialIcon icon={rightIconName as SymbolCodepoints} />
            ) : undefined
          }
        />
      </TextField>
    )
  },
  play: async ({ canvas, userEvent }) => {
    const textbox = canvas.getByRole("textbox")
    expect(textbox).not.toBeDisabled()

    expect(textbox).toHaveValue("")

    await userEvent.type(textbox, "Hello World")
    expect(textbox).toHaveValue("Hello World")

    await userEvent.clear(textbox)
    expect(textbox).toHaveValue("")
  },
}