the-biergarten-app/src/Website/stories/FormField.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite";
import { expect, within } from "storybook/test";
import FormField from "../app/components/forms/FormField";

const meta = {
  title: "Forms/FormField",
  component: FormField,
  tags: ["autodocs"],
  args: {
    id: "email",
    name: "email",
    type: "email",
    label: "Email address",
    placeholder: "you@example.com",
    hint: "We only use this to manage your account.",
  },
  parameters: {
    layout: "centered",
  },
  render: (args) => (
    <div className="w-full max-w-md rounded-box bg-base-100 p-6 shadow-lg">
      <FormField {...args} />
    </div>
  ),
} satisfies Meta<typeof FormField>;

export default meta;
type Story = StoryObj<typeof meta>;

export const WithHint: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByLabelText(/email address/i)).toBeInTheDocument();
    await expect(canvas.getByText(/manage your account/i)).toBeInTheDocument();
  },
};

export const WithError: Story = {
  args: {
    error: "Please enter a valid email address.",
    hint: undefined,
    "aria-invalid": true,
    defaultValue: "not-an-email",
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByText(/valid email address/i)).toBeInTheDocument();
    await expect(canvas.getByLabelText(/email address/i)).toHaveAttribute("aria-invalid", "true");
  },
};

export const PasswordField: Story = {
  args: {
    id: "password",
    name: "password",
    type: "password",
    label: "Password",
    placeholder: "Enter a strong password",
    hint: "Use 12 or more characters.",
  },
};