mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-15 10:04:44 +00:00
Add brewery discovery & detail pages with location-based search (#253)
This commit is contained in:
Aaron Po
71
web/frontend/app/components/ui/forms/FormField.stories.tsx
Normal file
71
web/frontend/app/components/ui/forms/FormField.stories.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import FormField from './FormField';
|
||||
|
||||
const formFieldDescription = `Reusable labeled input for Biergarten forms. This page shows guided, error, and password states so you can review label spacing, helper text, validation messaging, and ARIA behavior in the same card layout used across the app.`;
|
||||
|
||||
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',
|
||||
docs: {
|
||||
description: {
|
||||
component: formFieldDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
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.',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import SubmitButton from './SubmitButton';
|
||||
|
||||
const submitButtonDescription = `Shared submit action for Biergarten forms. These stories cover the idle, loading, and custom-width states so you can verify button copy, disabled behavior during submission, and theme styling without wiring up a full form flow.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Forms/SubmitButton',
|
||||
component: SubmitButton,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
idleText: 'Save changes',
|
||||
submittingText: 'Saving changes',
|
||||
isSubmitting: false,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
docs: {
|
||||
description: {
|
||||
component: submitButtonDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof SubmitButton>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Idle: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('button', { name: /save changes/i })).toBeEnabled();
|
||||
},
|
||||
};
|
||||
|
||||
export const Submitting: Story = {
|
||||
args: {
|
||||
isSubmitting: true,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('button', { name: /saving changes/i })).toBeDisabled();
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomWidth: Story = {
|
||||
args: {
|
||||
className: 'btn btn-secondary min-w-64',
|
||||
idleText: 'Register user',
|
||||
submittingText: 'Registering user',
|
||||
},
|
||||
};
|
||||
69
web/frontend/app/components/ui/navbar/Navbar.stories.tsx
Normal file
69
web/frontend/app/components/ui/navbar/Navbar.stories.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, userEvent, within } from 'storybook/test';
|
||||
import Navbar from './Navbar';
|
||||
|
||||
const navbarDescription = `Top-level navigation for the Biergarten website. These stories cover guest, authenticated, and mobile states so you can review branding, route visibility, account menu behavior, and responsive collapse without leaving Storybook.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Navigation/Navbar',
|
||||
component: Navbar,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: navbarDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof Navbar>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Guest: Story = {
|
||||
args: {
|
||||
auth: null,
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('link', { name: /the biergarten app/i })).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('link', { name: /login/i })).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('link', { name: /register user/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const Authenticated: Story = {
|
||||
args: {
|
||||
auth: {
|
||||
username: 'Hans',
|
||||
accessToken: 'access-token',
|
||||
refreshToken: 'refresh-token',
|
||||
userAccountId: 'user-1',
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const userButton = canvas.getByRole('button', { name: /hans/i });
|
||||
await expect(userButton).toBeInTheDocument();
|
||||
await userEvent.click(userButton);
|
||||
await expect(canvas.getByRole('menuitem', { name: /dashboard/i })).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('menuitem', { name: /logout/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const MobileMenu: Story = {
|
||||
args: {
|
||||
auth: null,
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: 'mobile1',
|
||||
},
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /toggle navigation/i }));
|
||||
await expect(canvas.getByRole('link', { name: /beer styles/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
69
web/frontend/app/components/ui/toast/Toast.stories.tsx
Normal file
69
web/frontend/app/components/ui/toast/Toast.stories.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, screen, userEvent, within } from 'storybook/test';
|
||||
import ToastProvider from './ToastProvider';
|
||||
import { dismissToasts, showErrorToast, showInfoToast, showSuccessToast } from './toast';
|
||||
|
||||
const toastDescription = `Theme-aware toast feedback built on react-hot-toast. Use this page to trigger success, error, and info messages, check icon contrast and surface styling, and confirm notifications feel consistent across Biergarten themes.`;
|
||||
|
||||
const ToastDemo = () => {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<ToastProvider />
|
||||
<div className="card border border-base-300 bg-base-100 shadow-md">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">Toast demo</h2>
|
||||
<p className="text-sm text-base-content/70">
|
||||
Use these actions to preview toast styles.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
className="btn btn-success btn-sm"
|
||||
onClick={() => showSuccessToast('Saved successfully')}
|
||||
>
|
||||
Success
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-error btn-sm"
|
||||
onClick={() => showErrorToast('Something went wrong')}
|
||||
>
|
||||
Error
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-info btn-sm"
|
||||
onClick={() => showInfoToast('Heads up: check your email')}
|
||||
>
|
||||
Info
|
||||
</button>
|
||||
<button className="btn btn-ghost btn-sm" onClick={dismissToasts}>
|
||||
Dismiss all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Feedback/Toast',
|
||||
component: ToastDemo,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: toastDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof ToastDemo>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Playground: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button', { name: /success/i }));
|
||||
await expect(screen.getByText(/saved successfully/i)).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user