mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-14 17:54:42 +00:00
Add brewery discovery & detail pages with location-based search (#253)
This commit is contained in:
Aaron Po
@@ -0,0 +1,47 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import BeerListCard from './BeerListCard';
|
||||
import { FILLER_BEERS } from '../../utils/filler-brewery-detail';
|
||||
|
||||
const beerListCardDescription = `A brewery's beer list on the detail page: name/description, style badge, ABV, and star rating per row. Currently filler pending a beers-by-brewery endpoint — see BREWERY_HANDOFF.md.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/BeerListCard',
|
||||
component: BeerListCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
beers: FILLER_BEERS,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: beerListCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof BeerListCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('heading', { name: 'Beers (9)' })).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('link', { name: /view all beers/i })).toHaveAttribute(
|
||||
'href',
|
||||
'/beers',
|
||||
);
|
||||
await expect(canvas.getByText('Switchyard IPA')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('6.8% ABV')).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleBeer: Story = {
|
||||
args: { beers: FILLER_BEERS.slice(0, 1) },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('heading', { name: 'Beers (1)' })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Link } from 'react-router';
|
||||
import StarRating from '../shared/StarRating';
|
||||
import type { FillerBeer } from '../../utils/filler-brewery-detail';
|
||||
|
||||
interface BeerListCardProps {
|
||||
beers: FillerBeer[];
|
||||
}
|
||||
|
||||
const BeerListCard = ({ beers }: BeerListCardProps) => (
|
||||
<div className="card bg-base-100 shadow">
|
||||
<div className="card-body gap-3 p-6">
|
||||
<div className="flex items-baseline justify-between gap-4">
|
||||
<h3 className="text-xl m-0">Beers ({beers.length})</h3>
|
||||
<Link to="/beers" className="link link-primary text-sm">
|
||||
View all beers
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
{beers.map((beer) => (
|
||||
<div
|
||||
key={beer.id}
|
||||
className="grid grid-cols-[1fr_auto_auto_auto] items-center gap-3 py-2.5 border-t border-base-content/10 first:border-t-0"
|
||||
>
|
||||
<div className="flex flex-col gap-0.5 min-w-0">
|
||||
<span className="font-bold text-sm">{beer.name}</span>
|
||||
<span className="text-xs text-base-content/60">{beer.description}</span>
|
||||
</div>
|
||||
<span className="badge badge-ghost bg-base-300 text-xs font-semibold whitespace-nowrap">
|
||||
{beer.style}
|
||||
</span>
|
||||
<span className="text-xs text-base-content/60 tabular-nums whitespace-nowrap">
|
||||
{beer.abv.toFixed(1)}% ABV
|
||||
</span>
|
||||
<StarRating value={beer.rating} size="xs" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default BeerListCard;
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import BeerStyleBreakdownCard from './BeerStyleBreakdownCard';
|
||||
import { FILLER_BEERS } from '../../utils/filler-brewery-detail';
|
||||
|
||||
const beerStyleBreakdownCardDescription = `Sidebar "Beer styles" card: per-style progress bars, sorted by count descending, derived client-side from a brewery's beer list.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/BeerStyleBreakdownCard',
|
||||
component: BeerStyleBreakdownCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
beers: FILLER_BEERS,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: beerStyleBreakdownCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof BeerStyleBreakdownCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('Beer styles')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('IPA')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('Sour')).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
|
||||
export const SingleStyle: Story = {
|
||||
args: {
|
||||
beers: FILLER_BEERS.filter((beer) => beer.style === 'IPA'),
|
||||
},
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('IPA')).toBeInTheDocument();
|
||||
await expect(canvas.queryByText('Sour')).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import SidebarCard from '../shared/SidebarCard';
|
||||
import type { FillerBeer } from '../../utils/filler-brewery-detail';
|
||||
|
||||
interface BeerStyleBreakdownCardProps {
|
||||
beers: FillerBeer[];
|
||||
}
|
||||
|
||||
const BeerStyleBreakdownCard = ({ beers }: BeerStyleBreakdownCardProps) => {
|
||||
const counts = new Map<string, number>();
|
||||
beers.forEach((beer) => counts.set(beer.style, (counts.get(beer.style) ?? 0) + 1));
|
||||
const maxCount = Math.max(...counts.values());
|
||||
const styles = [...counts.entries()].sort((a, b) => b[1] - a[1]);
|
||||
|
||||
return (
|
||||
<SidebarCard title="Beer styles">
|
||||
{styles.map(([style, count]) => (
|
||||
<div key={style} className="flex flex-col gap-1">
|
||||
<div className="flex items-baseline justify-between gap-2">
|
||||
<span className="text-sm font-semibold">{style}</span>
|
||||
<span className="text-xs text-base-content/60 tabular-nums">{count}</span>
|
||||
</div>
|
||||
<progress
|
||||
className="progress progress-primary h-1.5"
|
||||
value={count}
|
||||
max={maxCount}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</SidebarCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeerStyleBreakdownCard;
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import BreweryDetailsCard from './BreweryDetailsCard';
|
||||
|
||||
const breweryDetailsCardDescription = `Sidebar "Details" card on the brewery detail page: founded year, brewery type, and beer count. Founded year and type are currently filler pending backend support — see BREWERY_HANDOFF.md.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/BreweryDetailsCard',
|
||||
component: BreweryDetailsCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
foundedYear: 2014,
|
||||
type: 'Microbrewery',
|
||||
beerCount: 9,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: breweryDetailsCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof BreweryDetailsCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('Founded')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('2014')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('Microbrewery')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('9')).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import SidebarCard from '../shared/SidebarCard';
|
||||
|
||||
interface BreweryDetailsCardProps {
|
||||
foundedYear: number;
|
||||
type: string;
|
||||
beerCount: number;
|
||||
}
|
||||
|
||||
const DetailRow = ({ label, value }: { label: string; value: string | number }) => (
|
||||
<div className="flex items-center justify-between gap-2 text-sm">
|
||||
<span className="text-base-content/60">{label}</span>
|
||||
<span className="font-semibold">{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const BreweryDetailsCard = ({ foundedYear, type, beerCount }: BreweryDetailsCardProps) => (
|
||||
<SidebarCard title="Details">
|
||||
<DetailRow label="Founded" value={foundedYear} />
|
||||
<DetailRow label="Type" value={type} />
|
||||
<DetailRow label="Beers listed" value={beerCount} />
|
||||
</SidebarCard>
|
||||
);
|
||||
|
||||
export default BreweryDetailsCard;
|
||||
@@ -0,0 +1,77 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, fn, userEvent, within } from 'storybook/test';
|
||||
import BreweryHeaderCard from './BreweryHeaderCard';
|
||||
import type { Brewery, BreweryLocation } from '../../breweries.server';
|
||||
|
||||
const breweryHeaderCardDescription = `Top card on the brewery detail page: eyebrow + "Est." badge, name, address, like button, average rating, and description. Founded year and average rating are currently filler pending backend support — see BREWERY_HANDOFF.md.`;
|
||||
|
||||
const portlandLocation: BreweryLocation = {
|
||||
breweryPostLocationId: 'loc-1',
|
||||
breweryPostId: 'brewery-1',
|
||||
cityId: 'city-1',
|
||||
cityName: 'Portland',
|
||||
stateProvinceName: 'Oregon',
|
||||
stateProvinceCode: 'OR',
|
||||
countryName: 'United States',
|
||||
countryCode: 'US',
|
||||
addressLine1: '123 Hop Street',
|
||||
addressLine2: null,
|
||||
postalCode: '97201',
|
||||
coordinates: { latitude: 45.5152, longitude: -122.6784 },
|
||||
};
|
||||
|
||||
const brewery: Brewery = {
|
||||
breweryPostId: 'brewery-1',
|
||||
postedById: 'user-1',
|
||||
breweryName: 'Cascade Hollow Brewing',
|
||||
description:
|
||||
'A small-batch brewery known for hazy IPAs and barrel-aged sours, tucked into an old warehouse district.',
|
||||
createdAt: '2024-03-01T12:00:00.000Z',
|
||||
updatedAt: null,
|
||||
location: portlandLocation,
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/BreweryHeaderCard',
|
||||
component: BreweryHeaderCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
brewery,
|
||||
foundedYear: 2014,
|
||||
avgRating: 4,
|
||||
ratingsCount: 76,
|
||||
onToggleLike: fn(),
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: breweryHeaderCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof BreweryHeaderCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Unliked: Story = {
|
||||
args: { liked: false, likeCount: 127 },
|
||||
play: async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(
|
||||
canvas.getByRole('heading', { name: 'Cascade Hollow Brewing', level: 1 }),
|
||||
).toBeInTheDocument();
|
||||
const likeButton = canvas.getByRole('button', { name: /like · 127/i });
|
||||
await userEvent.click(likeButton);
|
||||
await expect(args.onToggleLike).toHaveBeenCalledOnce();
|
||||
},
|
||||
};
|
||||
|
||||
export const Liked: Story = {
|
||||
args: { liked: true, likeCount: 128 },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('button', { name: /liked · 128/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Heart, HeartSolid, MapPin } from 'iconoir-react';
|
||||
import StarRating from '../shared/StarRating';
|
||||
import { formatBreweryAddress } from '../../utils/format-address';
|
||||
import type { Brewery } from '../../breweries.server';
|
||||
|
||||
interface BreweryHeaderCardProps {
|
||||
brewery: Brewery;
|
||||
foundedYear: number;
|
||||
liked: boolean;
|
||||
likeCount: number;
|
||||
avgRating: number;
|
||||
ratingsCount: number;
|
||||
onToggleLike: () => void;
|
||||
}
|
||||
|
||||
const BreweryHeaderCard = ({
|
||||
brewery,
|
||||
foundedYear,
|
||||
liked,
|
||||
likeCount,
|
||||
avgRating,
|
||||
ratingsCount,
|
||||
onToggleLike,
|
||||
}: BreweryHeaderCardProps) => (
|
||||
<div className="card bg-base-100 shadow">
|
||||
<div className="card-body gap-4 p-7">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-base-content/50">
|
||||
Brewery
|
||||
</span>
|
||||
<span className="badge bg-[var(--color-highlight)] text-[var(--color-highlight-content)]">
|
||||
Est. {foundedYear}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl leading-tight m-0">{brewery.breweryName}</h1>
|
||||
{brewery.location && (
|
||||
<p className="text-sm text-base-content/60 flex items-center gap-1 m-0">
|
||||
<MapPin className="size-4" aria-hidden="true" />
|
||||
{formatBreweryAddress(brewery.location)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleLike}
|
||||
className={`btn btn-sm ${liked ? 'btn-primary' : 'btn-outline'}`}
|
||||
>
|
||||
{liked ? (
|
||||
<HeartSolid className="size-4" aria-hidden="true" />
|
||||
) : (
|
||||
<Heart className="size-4" aria-hidden="true" />
|
||||
)}
|
||||
{liked ? 'Liked' : 'Like'} · {likeCount}
|
||||
</button>
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<StarRating value={avgRating} size="sm" />
|
||||
<span className="font-bold">{avgRating.toFixed(1)}</span>
|
||||
<span className="text-sm text-base-content/60">({ratingsCount} ratings)</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-base-content/70 leading-relaxed text-pretty m-0">
|
||||
{brewery.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default BreweryHeaderCard;
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import BreweryLocationMap from './BreweryLocationMap';
|
||||
|
||||
const breweryLocationMapDescription = `Small fixed single-pin Leaflet map used by the brewery detail page's Location sidebar card. Smoke-render only - this hits the real OpenStreetMap tile server in the browser test run.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/BreweryLocationMap',
|
||||
component: BreweryLocationMap,
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: breweryLocationMapDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof BreweryLocationMap>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
latitude: 45.5152,
|
||||
longitude: -122.6784,
|
||||
label: 'Cascade Hollow Brewing — 123 Hop Street',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import L, { type LatLngTuple } from 'leaflet';
|
||||
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
|
||||
delete (L.Icon.Default.prototype as unknown as { _getIconUrl?: unknown })._getIconUrl;
|
||||
L.Icon.Default.mergeOptions({ iconRetinaUrl, iconUrl, shadowUrl });
|
||||
|
||||
interface BreweryLocationMapProps {
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const ZOOM = 15;
|
||||
|
||||
const BreweryLocationMap = ({ latitude, longitude, label }: BreweryLocationMapProps) => {
|
||||
const position: LatLngTuple = [latitude, longitude];
|
||||
|
||||
return (
|
||||
<MapContainer
|
||||
center={position}
|
||||
zoom={ZOOM}
|
||||
scrollWheelZoom={false}
|
||||
className="h-45 w-full rounded-field relative z-0"
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
noWrap
|
||||
/>
|
||||
<Marker position={position}>
|
||||
<Popup>{label}</Popup>
|
||||
</Marker>
|
||||
</MapContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default BreweryLocationMap;
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import CommunityStatsCard from './CommunityStatsCard';
|
||||
|
||||
const communityStatsCardDescription = `Sidebar "Community" card: live likes/ratings/comments counts, kept in sync with the header, your-rating, and comments cards on the brewery detail page.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/CommunityStatsCard',
|
||||
component: CommunityStatsCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
likeCount: 127,
|
||||
ratingsCount: 76,
|
||||
commentCount: 3,
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: communityStatsCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof CommunityStatsCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('Likes')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('127')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('76')).toBeInTheDocument();
|
||||
await expect(canvas.getByText('3')).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import SidebarCard from '../shared/SidebarCard';
|
||||
|
||||
interface CommunityStatsCardProps {
|
||||
likeCount: number;
|
||||
ratingsCount: number;
|
||||
commentCount: number;
|
||||
}
|
||||
|
||||
const StatRow = ({ label, value }: { label: string; value: number }) => (
|
||||
<div className="flex items-center justify-between gap-2 text-sm">
|
||||
<span className="text-base-content/60">{label}</span>
|
||||
<span className="font-semibold tabular-nums">{value}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CommunityStatsCard = ({ likeCount, ratingsCount, commentCount }: CommunityStatsCardProps) => (
|
||||
<SidebarCard title="Community">
|
||||
<StatRow label="Likes" value={likeCount} />
|
||||
<StatRow label="Ratings" value={ratingsCount} />
|
||||
<StatRow label="Comments" value={commentCount} />
|
||||
</SidebarCard>
|
||||
);
|
||||
|
||||
export default CommunityStatsCard;
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, within } from 'storybook/test';
|
||||
import LocationCard from './LocationCard';
|
||||
import type { BreweryLocation } from '../../breweries.server';
|
||||
|
||||
const locationCardDescription = `Sidebar "Location" card: an interactive single-pin map (when coordinates are available), address, and website link. Smoke-render only for the map portion - this hits the real OpenStreetMap tile server in the browser test run.`;
|
||||
|
||||
const portlandLocation: BreweryLocation = {
|
||||
breweryPostLocationId: 'loc-1',
|
||||
breweryPostId: 'brewery-1',
|
||||
cityId: 'city-1',
|
||||
cityName: 'Portland',
|
||||
stateProvinceName: 'Oregon',
|
||||
stateProvinceCode: 'OR',
|
||||
countryName: 'United States',
|
||||
countryCode: 'US',
|
||||
addressLine1: '123 Hop Street',
|
||||
addressLine2: null,
|
||||
postalCode: '97201',
|
||||
coordinates: { latitude: 45.5152, longitude: -122.6784 },
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/LocationCard',
|
||||
component: LocationCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
breweryName: 'Cascade Hollow Brewing',
|
||||
website: 'cascadehollow.example',
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: locationCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof LocationCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const WithCoordinates: Story = {
|
||||
args: { location: portlandLocation },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('Location')).toBeInTheDocument();
|
||||
await expect(canvas.getByRole('link', { name: 'cascadehollow.example' })).toHaveAttribute(
|
||||
'href',
|
||||
'https://cascadehollow.example',
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutCoordinates: Story = {
|
||||
args: { location: { ...portlandLocation, coordinates: null } },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(
|
||||
canvas.getByText('123 Hop Street, Portland, OR 97201, United States'),
|
||||
).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import { lazy, Suspense } from 'react';
|
||||
import ClientOnly from '../../../../components/ClientOnly';
|
||||
import SidebarCard from '../shared/SidebarCard';
|
||||
import { formatBreweryAddress } from '../../utils/format-address';
|
||||
import type { BreweryLocation } from '../../breweries.server';
|
||||
|
||||
const BreweryLocationMap = lazy(() => import('./BreweryLocationMap'));
|
||||
|
||||
interface LocationCardProps {
|
||||
breweryName: string;
|
||||
location: BreweryLocation;
|
||||
website: string;
|
||||
}
|
||||
|
||||
const MAP_PLACEHOLDER_CLASS = 'skeleton h-45 w-full rounded-field';
|
||||
|
||||
const LocationCard = ({ breweryName, location, website }: LocationCardProps) => (
|
||||
<SidebarCard title="Location">
|
||||
{location.coordinates && (
|
||||
<ClientOnly fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
|
||||
{() => (
|
||||
<Suspense fallback={<div className={MAP_PLACEHOLDER_CLASS} />}>
|
||||
<BreweryLocationMap
|
||||
latitude={location.coordinates!.latitude}
|
||||
longitude={location.coordinates!.longitude}
|
||||
label={`${breweryName} — ${location.addressLine1}`}
|
||||
/>
|
||||
</Suspense>
|
||||
)}
|
||||
</ClientOnly>
|
||||
)}
|
||||
<p className="text-sm leading-relaxed m-0">{formatBreweryAddress(location)}</p>
|
||||
<p className="text-sm m-0">
|
||||
<a
|
||||
href={`https://${website}`}
|
||||
className="link link-primary"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{website}
|
||||
</a>
|
||||
</p>
|
||||
</SidebarCard>
|
||||
);
|
||||
|
||||
export default LocationCard;
|
||||
@@ -0,0 +1,45 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, fn, userEvent, within } from 'storybook/test';
|
||||
import YourRatingCard from './YourRatingCard';
|
||||
|
||||
const yourRatingCardDescription = `Interactive 1-5 star rating control on the brewery detail page. The hint text switches once a rating is set, and clicking the selected star again clears it.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/YourRatingCard',
|
||||
component: YourRatingCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
onChange: fn(),
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: yourRatingCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof YourRatingCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Unrated: Story = {
|
||||
args: { value: 0 },
|
||||
play: async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('Tap a star to rate this brewery.')).toBeInTheDocument();
|
||||
await userEvent.click(canvas.getByRole('radio', { name: 'Rate 4 of 5' }));
|
||||
await expect(args.onChange).toHaveBeenCalledWith(4);
|
||||
},
|
||||
};
|
||||
|
||||
export const Rated: Story = {
|
||||
args: { value: 4 },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(
|
||||
canvas.getByText('You rated this 4 of 5. Tap the same star to clear.'),
|
||||
).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
import StarRating from '../shared/StarRating';
|
||||
|
||||
interface YourRatingCardProps {
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
}
|
||||
|
||||
const YourRatingCard = ({ value, onChange }: YourRatingCardProps) => (
|
||||
<div className="card bg-base-100 shadow">
|
||||
<div className="card-body flex-row flex-wrap items-center justify-between gap-4 p-6">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3 className="text-xl m-0">Your rating</h3>
|
||||
<p className="text-sm text-base-content/60 m-0">
|
||||
{value
|
||||
? `You rated this ${value} of 5. Tap the same star to clear.`
|
||||
: 'Tap a star to rate this brewery.'}
|
||||
</p>
|
||||
</div>
|
||||
<StarRating value={value} onChange={onChange} size="lg" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default YourRatingCard;
|
||||
@@ -0,0 +1,56 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, fn, userEvent, within } from 'storybook/test';
|
||||
import CommentItem from './CommentItem';
|
||||
import type { FillerComment } from '../../../utils/filler-brewery-detail';
|
||||
|
||||
const commentItemDescription = `A single comment row on the brewery detail page: avatar initials, username/star/timestamp, body, and a per-comment like toggle.`;
|
||||
|
||||
const comment: FillerComment = {
|
||||
id: '1',
|
||||
user: 'malt_kettle',
|
||||
initials: 'MK',
|
||||
rating: 5,
|
||||
time: '2 days ago',
|
||||
text: 'The barrel-aged flanders red is worth the trip alone.',
|
||||
likes: 12,
|
||||
liked: false,
|
||||
};
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/CommentItem',
|
||||
component: CommentItem,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
onToggleLike: fn(),
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: commentItemDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof CommentItem>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Unliked: Story = {
|
||||
args: { comment },
|
||||
play: async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByText('malt_kettle')).toBeInTheDocument();
|
||||
const likeButton = canvas.getByRole('button', { name: /12 likes/i });
|
||||
await userEvent.click(likeButton);
|
||||
await expect(args.onToggleLike).toHaveBeenCalledWith('1');
|
||||
},
|
||||
};
|
||||
|
||||
export const Liked: Story = {
|
||||
args: { comment: { ...comment, liked: true } },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(canvas.getByRole('button', { name: /13 likes/i })).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Heart, HeartSolid } from 'iconoir-react';
|
||||
import StarRating from '../../shared/StarRating';
|
||||
import type { FillerComment } from '../../../utils/filler-brewery-detail';
|
||||
|
||||
interface CommentItemProps {
|
||||
comment: FillerComment;
|
||||
onToggleLike: (id: string) => void;
|
||||
}
|
||||
|
||||
const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
|
||||
const likeCount = comment.likes + (comment.liked ? 1 : 0);
|
||||
|
||||
return (
|
||||
<div className="flex gap-3 items-start border-t border-base-content/10 pt-4">
|
||||
<div className="avatar avatar-placeholder shrink-0">
|
||||
<div className="bg-secondary text-secondary-content w-9 rounded-full">
|
||||
<span className="text-sm font-bold">{comment.initials}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-1 min-w-0">
|
||||
<div className="flex items-baseline gap-2 flex-wrap">
|
||||
<span className="font-bold text-sm">{comment.user}</span>
|
||||
<StarRating value={comment.rating} size="xs" />
|
||||
<span className="text-xs text-base-content/60">{comment.time}</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed m-0">{comment.text}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onToggleLike(comment.id)}
|
||||
className={`self-start inline-flex items-center gap-1 text-xs font-semibold ${
|
||||
comment.liked ? 'text-primary' : 'text-base-content/60'
|
||||
}`}
|
||||
>
|
||||
{comment.liked ? (
|
||||
<HeartSolid className="size-3.5" aria-hidden="true" />
|
||||
) : (
|
||||
<Heart className="size-3.5" aria-hidden="true" />
|
||||
)}
|
||||
{likeCount} {likeCount === 1 ? 'like' : 'likes'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentItem;
|
||||
@@ -0,0 +1,59 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
import { expect, fn, userEvent, within } from 'storybook/test';
|
||||
import CommentsCard from './CommentsCard';
|
||||
import { FILLER_COMMENTS } from '../../../utils/filler-brewery-detail';
|
||||
|
||||
const commentsCardDescription = `Comments section on the brewery detail page: a post form (logged in) or a sign-in alert (logged out), followed by the comment list. Posting is disabled until the textarea has non-whitespace content.`;
|
||||
|
||||
const meta = {
|
||||
title: 'Breweries/CommentsCard',
|
||||
component: CommentsCard,
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
comments: FILLER_COMMENTS,
|
||||
currentUserInitials: 'JD',
|
||||
onAddComment: fn(),
|
||||
onToggleCommentLike: fn(),
|
||||
},
|
||||
parameters: {
|
||||
layout: 'padded',
|
||||
docs: {
|
||||
description: {
|
||||
component: commentsCardDescription,
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof CommentsCard>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const LoggedIn: Story = {
|
||||
args: { loggedIn: true },
|
||||
play: async ({ args, canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const postButton = canvas.getByRole('button', { name: /post comment/i });
|
||||
await expect(postButton).toBeDisabled();
|
||||
|
||||
await userEvent.type(
|
||||
canvas.getByPlaceholderText('Share your thoughts on this brewery'),
|
||||
'Great taproom!',
|
||||
);
|
||||
await expect(postButton).toBeEnabled();
|
||||
await userEvent.click(postButton);
|
||||
await expect(args.onAddComment).toHaveBeenCalledWith('Great taproom!');
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedOut: Story = {
|
||||
args: { loggedIn: false },
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await expect(
|
||||
canvas.getByText('Sign in to like, rate, and comment on breweries.'),
|
||||
).toBeInTheDocument();
|
||||
await expect(
|
||||
canvas.queryByPlaceholderText('Share your thoughts on this brewery'),
|
||||
).not.toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useState } from 'react';
|
||||
import CommentItem from './CommentItem';
|
||||
import type { FillerComment } from '../../../utils/filler-brewery-detail';
|
||||
|
||||
interface CommentsCardProps {
|
||||
comments: FillerComment[];
|
||||
loggedIn: boolean;
|
||||
currentUserInitials: string;
|
||||
onAddComment: (text: string) => void;
|
||||
onToggleCommentLike: (id: string) => void;
|
||||
}
|
||||
|
||||
const CommentsCard = ({
|
||||
comments,
|
||||
loggedIn,
|
||||
currentUserInitials,
|
||||
onAddComment,
|
||||
onToggleCommentLike,
|
||||
}: CommentsCardProps) => {
|
||||
const [commentText, setCommentText] = useState('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
const text = commentText.trim();
|
||||
if (!text) return;
|
||||
onAddComment(text);
|
||||
setCommentText('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card bg-base-100 shadow">
|
||||
<div className="card-body gap-5 p-6">
|
||||
<h3 className="text-xl m-0">Comments ({comments.length})</h3>
|
||||
|
||||
{loggedIn ? (
|
||||
<div className="flex gap-3 items-start">
|
||||
<div className="avatar avatar-placeholder shrink-0">
|
||||
<div className="bg-secondary text-secondary-content w-9 rounded-full">
|
||||
<span className="text-sm font-bold">{currentUserInitials}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-2">
|
||||
<textarea
|
||||
rows={3}
|
||||
placeholder="Share your thoughts on this brewery"
|
||||
value={commentText}
|
||||
onChange={(e) => setCommentText(e.target.value)}
|
||||
className="textarea w-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={!commentText.trim()}
|
||||
className="btn btn-sm btn-primary self-end"
|
||||
>
|
||||
Post comment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div role="alert" className="alert alert-info alert-soft">
|
||||
Sign in to like, rate, and comment on breweries.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{comments.map((comment) => (
|
||||
<CommentItem
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
onToggleLike={onToggleCommentLike}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentsCard;
|
||||
Reference in New Issue
Block a user