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

web/frontend/app/features/account/components/PasswordSection.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { createMemoryRouter, redirect, RouterProvider, useActionData } from 'react-router';
+import { expect, userEvent, within } from 'storybook/test';
+import PasswordSection from './PasswordSection';
+import { updatePasswordSchema } from '../schemas';
+import type { ActionResult } from '../types';
+
+const passwordSectionDescription = `Renders the real \`PasswordSection\` component (the account page's collapsible password-change card) behind a memory router so its \`useSubmit\`/\`useNavigation\` wiring runs against a fake action, exercising the real \`updatePasswordSchema\` (zod) cross-field rules. On success the real action redirects back to the account page with a toast message instead of returning data - here it redirects to a marker route so the redirect itself is the observable outcome, matching how the real route behaves.`;
+
+const PasswordSectionRoute = () => {
+    const [open, setOpen] = useState(true);
+    const result = useActionData() as ActionResult | undefined;
+
+    return (
+        <div className="w-full max-w-md">
+            <PasswordSection
+                open={open}
+                onToggle={() => setOpen((value) => !value)}
+                result={result}
+            />
+        </div>
+    );
+};
+
+const PasswordSectionHarness = () => {
+    const [router] = useState(() =>
+        createMemoryRouter([
+            {
+                path: '/',
+                element: <PasswordSectionRoute />,
+                action: async ({ request }) => {
+                    const formData = await request.formData();
+                    const parsed = updatePasswordSchema.safeParse({
+                        currentPassword: formData.get('currentPassword'),
+                        newPassword: formData.get('newPassword'),
+                        confirmNewPassword: formData.get('confirmNewPassword'),
+                    });
+
+                    if (!parsed.success) {
+                        return {
+                            intent: 'password',
+                            error: parsed.error.issues[0].message,
+                        } satisfies ActionResult;
+                    }
+
+                    return redirect('/success');
+                },
+            },
+            {
+                path: '/success',
+                element: <p data-testid="redirect-success">Password changed successfully.</p>,
+            },
+        ]),
+    );
+
+    return <RouterProvider router={router} />;
+};
+
+const meta = {
+    title: 'Account/PasswordSection',
+    component: PasswordSectionHarness,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        usesDataRouter: true,
+        docs: {
+            description: {
+                component: passwordSectionDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof PasswordSectionHarness>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Open: Story = {};
+
+const fillPasswordForm = async (
+    canvas: ReturnType<typeof within>,
+    values: { current: string; next: string; confirm: string },
+) => {
+    await userEvent.type(canvas.getByLabelText(/current password/i), values.current);
+    await userEvent.type(canvas.getByLabelText('New Password'), values.next);
+    await userEvent.type(canvas.getByLabelText(/confirm new password/i), values.confirm);
+    await userEvent.click(canvas.getByRole('button', { name: /change password/i }));
+};
+
+export const RejectsShortPassword: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await fillPasswordForm(canvas, {
+            current: 'OldPassword1!',
+            next: 'short',
+            confirm: 'short',
+        });
+        await expect(canvas.getByText(/at least 8 characters/i)).toBeInTheDocument();
+    },
+};
+
+export const RejectsMismatchedConfirmation: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await fillPasswordForm(canvas, {
+            current: 'OldPassword1!',
+            next: 'NewPassword2!',
+            confirm: 'NewPassword3!',
+        });
+        await expect(canvas.getByText(/passwords must match/i)).toBeInTheDocument();
+    },
+};
+
+export const RejectsReusingCurrentPassword: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await fillPasswordForm(canvas, {
+            current: 'SamePassword1!',
+            next: 'SamePassword1!',
+            confirm: 'SamePassword1!',
+        });
+        await expect(canvas.getByText(/different from the current password/i)).toBeInTheDocument();
+    },
+};
+
+export const AcceptsValidPasswordChange: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await fillPasswordForm(canvas, {
+            current: 'OldPassword1!',
+            next: 'NewPassword2!',
+            confirm: 'NewPassword2!',
+        });
+        await expect(canvas.getByTestId('redirect-success')).toBeInTheDocument();
+    },
+};

web/frontend/app/features/account/components/SectionCard.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Lock } from 'iconoir-react';
+import { useState } from 'react';
+import { expect, userEvent, within } from 'storybook/test';
+import SectionCard from './SectionCard';
+
+const sectionCardDescription = `Collapsible card used on the account settings page to group a labeled form behind a toggle. These stories cover the closed and open states, plus the toggle interaction, so you can review spacing, icon alignment, and disclosure behavior in isolation.`;
+
+const SectionCardDemo = (props: React.ComponentProps<typeof SectionCard>) => {
+    const [open, setOpen] = useState(props.open);
+    return (
+        <div className="w-full max-w-md">
+            <SectionCard {...props} open={open} onToggle={() => setOpen((value) => !value)} />
+        </div>
+    );
+};
+
+const meta = {
+    title: 'Account/SectionCard',
+    component: SectionCard,
+    tags: ['autodocs'],
+    args: {
+        icon: <Lock className="size-5" aria-hidden="true" />,
+        title: 'Password',
+        description: 'Change the password used to sign in.',
+        open: false,
+        onToggle: () => undefined,
+        children: <p className="text-sm">Form fields go here.</p>,
+    },
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: sectionCardDescription,
+            },
+        },
+    },
+    render: (args) => <SectionCardDemo {...args} />,
+} satisfies Meta<typeof SectionCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Closed: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Password')).toBeInTheDocument();
+        await expect(canvas.queryByText('Form fields go here.')).not.toBeInTheDocument();
+    },
+};
+
+export const Open: Story = {
+    args: {
+        open: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getByText('Form fields go here.')).toBeInTheDocument();
+    },
+};
+
+export const ToggleInteraction: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const toggle = canvas.getByLabelText(/toggle password form/i);
+
+        await expect(canvas.queryByText('Form fields go here.')).not.toBeInTheDocument();
+
+        await userEvent.click(toggle);
+        await expect(canvas.getByText('Form fields go here.')).toBeInTheDocument();
+
+        await userEvent.click(toggle);
+        await expect(canvas.queryByText('Form fields go here.')).not.toBeInTheDocument();
+    },
+};

web/frontend/app/features/account/components/UsernameSection.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { createMemoryRouter, redirect, RouterProvider, useActionData } from 'react-router';
+import { expect, userEvent, within } from 'storybook/test';
+import UsernameSection from './UsernameSection';
+import { updateUsernameSchema } from '../schemas';
+import type { ActionResult } from '../types';
+
+const usernameSectionDescription = `Renders the real \`UsernameSection\` component (the account page's collapsible username-change card) behind a memory router so its \`useSubmit\`/\`useNavigation\` wiring runs against a fake action, exercising the real \`updateUsernameSchema\` (zod) validation. On success the real action redirects back to the account page with a toast message instead of returning data - here it redirects to a marker route so the redirect itself is the observable outcome, matching how the real route behaves.`;
+
+const UsernameSectionRoute = () => {
+    const [open, setOpen] = useState(true);
+    const result = useActionData() as ActionResult | undefined;
+
+    return (
+        <div className="w-full max-w-md">
+            <UsernameSection
+                username="jane_doe"
+                open={open}
+                onToggle={() => setOpen((value) => !value)}
+                result={result}
+            />
+        </div>
+    );
+};
+
+const UsernameSectionHarness = () => {
+    const [router] = useState(() =>
+        createMemoryRouter([
+            {
+                path: '/',
+                element: <UsernameSectionRoute />,
+                action: async ({ request }) => {
+                    const formData = await request.formData();
+                    const parsed = updateUsernameSchema.safeParse({
+                        newUsername: formData.get('newUsername'),
+                    });
+
+                    if (!parsed.success) {
+                        return {
+                            intent: 'username',
+                            error: parsed.error.issues[0].message,
+                        } satisfies ActionResult;
+                    }
+
+                    return redirect('/success');
+                },
+            },
+            {
+                path: '/success',
+                element: <p data-testid="redirect-success">Username updated successfully.</p>,
+            },
+        ]),
+    );
+
+    return <RouterProvider router={router} />;
+};
+
+const meta = {
+    title: 'Account/UsernameSection',
+    component: UsernameSectionHarness,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        usesDataRouter: true,
+        docs: {
+            description: {
+                component: usernameSectionDescription,
+            },
+        },
+    },
+} satisfies Meta<typeof UsernameSectionHarness>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Open: Story = {};
+
+export const RejectsShortUsername: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.clear(canvas.getByLabelText(/new username/i));
+        await userEvent.type(canvas.getByLabelText(/new username/i), 'ab');
+        await userEvent.click(canvas.getByRole('button', { name: /update username/i }));
+        await expect(canvas.getByText(/at least 3 characters/i)).toBeInTheDocument();
+    },
+};
+
+export const RejectsInvalidCharacters: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.clear(canvas.getByLabelText(/new username/i));
+        await userEvent.type(canvas.getByLabelText(/new username/i), 'bad user!');
+        await userEvent.click(canvas.getByRole('button', { name: /update username/i }));
+        await expect(canvas.getByText(/letters, numbers, dots, underscores/i)).toBeInTheDocument();
+    },
+};
+
+export const AcceptsValidUsername: Story = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.clear(canvas.getByLabelText(/new username/i));
+        await userEvent.type(canvas.getByLabelText(/new username/i), 'valid.user-99');
+        await userEvent.click(canvas.getByRole('button', { name: /update username/i }));
+        await expect(canvas.getByTestId('redirect-success')).toBeInTheDocument();
+    },
+};

web/frontend/app/features/account/hooks/useSectionError.ts

@@ -2,7 +2,10 @@ import { useEffect } from 'react';
 import { showErrorToast } from '../../../components/ui/toast/toast';
 import type { ActionResult } from '../types';
 
-export const useSectionError = (result: ActionResult | undefined, intent: ActionResult['intent']) => {
+export const useSectionError = (
+    result: ActionResult | undefined,
+    intent: ActionResult['intent'],
+) => {
     useEffect(() => {
         if (!result || result.intent !== intent) return;
         showErrorToast(result.error);