add storybook

src/Website/stories/FormField.stories.tsx

@@ -0,0 +1,61 @@
+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.",
+  },
+};