Add brewery discovery & detail pages with location-based search (#253)

web/frontend/app/features/auth/components/LoginForm.stories.tsx

@@ -0,0 +1,67 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { expect, userEvent, within } from 'storybook/test';
+import LoginForm from './LoginForm';
+import { loginSchema, type LoginSchema } from '../schemas';
+
+const loginFormDescription = `Renders the real \`LoginForm\` component wired to the real \`loginSchema\` (zod) through the same react-hook-form setup used on the login page, so these stories validate actual client-side validation behavior rather than a re-implemented form.`;
+
+const LoginFormHarness = () => {
+    const [submitted, setSubmitted] = useState<LoginSchema | null>(null);
+    const form = useForm<LoginSchema>({ resolver: zodResolver(loginSchema) });
+
+    return (
+        <div className="w-full max-w-md space-y-3 rounded-box bg-base-100 p-6 shadow-lg">
+            <LoginForm
+                onSubmit={form.handleSubmit((values) => setSubmitted(values))}
+                formState={form.formState}
+                register={form.register}
+                submitting={false}
+            />
+            {submitted ? (
+                <p data-testid="submit-result">Signed in as {submitted.username}</p>
+            ) : null}
+        </div>
+    );
+};
+
+const meta = {
+    title: 'Forms/LoginForm',
+    component: LoginFormHarness,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: loginFormDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof LoginFormHarness>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {};
+
+export const RejectsEmptySubmission: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: /sign in/i }));
+        await expect(canvas.getByText(/username is required/i)).toBeInTheDocument();
+        await expect(canvas.getByText(/password is required/i)).toBeInTheDocument();
+        await expect(canvas.queryByTestId('submit-result')).not.toBeInTheDocument();
+    },
+};
+
+export const AcceptsValidLogin: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.type(canvas.getByLabelText(/username/i), 'hans');
+        await userEvent.type(canvas.getByLabelText(/password/i), 'correct-horse-battery');
+        await userEvent.click(canvas.getByRole('button', { name: /sign in/i }));
+        await expect(canvas.getByTestId('submit-result')).toHaveTextContent('hans');
+    },
+};