fragginwagon/pokemon-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate visual fixtures to storybook

Browse Source
This commit is contained in:
fragginwagon
2026-09-08 21:43:26 -04:00
parent 41efdfe041
commit f7534d901b
69 changed files with 62947 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/molecules/ListingCard.scss
+13 -12
View File
@@ -1,19 +1,20 @@
.listing-card {
display: grid;
grid-template-columns: 60px 1fr;
gap: 18px;
gap: var(--space-4);
min-height: 180px;
padding: 20px;
border: 1px solid #d6d3c7;
background: #fffdf8;
color: #22231f;
border: var(--border-thin) solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
background: var(--color-surface-raised);
color: var(--color-text);
box-shadow: var(--shadow-sm);
text-decoration: none;
transition: border-color 160ms ease, transform 160ms ease;
transition: border-color var(--duration-standard) ease, transform var(--duration-standard) ease;
}
.listing-card:hover { border-color: #386052; transform: translateY(-2px); }
.listing-card:focus-visible { outline: 3px solid #a3482a; outline-offset: 4px; }
.listing-card__mark { display: grid; place-items: center; aspect-ratio: 1; align-self: start; background: #d9e7df; color: #386052; font: 700 0.85rem Arial, sans-serif; }
.listing-card__status { display: block; margin-top: 2px; color: #386052; font: 700 0.75rem/1.2 Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.listing-card__name { display: block; margin: 8px 0 16px; font-size: 1.25rem; }
.listing-card__price { display: block; font: 700 1rem Arial, sans-serif; }
.listing-card:hover { border-color: var(--color-interactive); transform: translateY(-2px); }
.listing-card__mark { display: grid; place-items: center; aspect-ratio: 1; align-self: start; border-radius: var(--radius-md); background: var(--color-stage); color: var(--color-interactive); font: var(--weight-bold) var(--text-sm) var(--font-display); }
.listing-card__status { display: block; margin-top: 2px; }
.listing-card__name { display: block; margin: var(--space-2) 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-lg); }
.listing-card__price { display: block; font-size: var(--text-md); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
apps/web/src/components/molecules/ListingCard.stories.js
+22
View File
@@ -9,4 +9,26 @@ export const available = {
status: 'AVAILABLE',
},
},
};
export const pending = {
args: {
listing: {
id: 'listing-2',
productName: 'Pikachu World Collection',
askingPriceMinor: 8200,
status: 'PENDING',
},
},
};
export const sold = {
args: {
listing: {
id: 'listing-3',
productName: 'Gengar holo promo',
askingPriceMinor: 4500,
status: 'SOLD',
},
},
};
apps/web/src/components/organisms/DesignSystemShowcase.stories.js
+8
View File
@@ -0,0 +1,8 @@
import DesignSystemShowcase from './DesignSystemShowcase.vue';
export default {
title: 'Organisms/Design System Showcase',
component: DesignSystemShowcase,
};
export const AllFixtures = {};
apps/web/src/components/organisms/DesignSystemShowcase.vue
+136
View File
@@ -0,0 +1,136 @@
<script setup>
import { ref } from 'vue';
const selectedCondition = ref('Near Mint');
const listings = [
{ id: 'fixture-charizard', productName: 'Charizard ex #199/165', askingPriceMinor: 11500, status: 'AVAILABLE' },
{ id: 'fixture-pikachu', productName: 'Pikachu World Collection', askingPriceMinor: 8200, status: 'PENDING' },
{ id: 'fixture-gengar', productName: 'Gengar holo promo', askingPriceMinor: 4500, status: 'SOLD' },
];
</script>
<template>
<main class="showcase-page">
<header class="showcase-header">
<div>
<p class="catalog-kicker">Design system fixture</p>
<h1>Collectible data, made precise.</h1>
<p>Representative visual fixtures for the catalog, detail views, controls, states, and themes. This component uses mock data only.</p>
</div>
<p class="fixture-label">Use the Storybook theme toolbar to inspect light and dark themes.</p>
</header>
<section class="showcase-section" aria-labelledby="type-title">
<h2 id="type-title">Typography and tokens</h2>
<div class="showcase-grid">
<article class="showcase-panel type-sample">
<h3>Type scale</h3>
<p class="type-sample__display">Space Grotesk display</p>
<p class="type-sample__ui">Manrope interface and metadata</p>
<p class="type-sample__numeric">$1,150.00 · 12 copies · 199/165</p>
</article>
<article class="showcase-panel">
<h3>Primitive palette</h3>
<div class="swatch-row">
<span class="swatch"><span class="swatch__chip swatch__chip--cobalt" />Cobalt</span>
<span class="swatch"><span class="swatch__chip swatch__chip--success" />Success</span>
<span class="swatch"><span class="swatch__chip swatch__chip--warning" />Warning</span>
<span class="swatch"><span class="swatch__chip swatch__chip--danger" />Danger</span>
<span class="swatch"><span class="swatch__chip swatch__chip--info" />Info</span>
</div>
</article>
<article class="showcase-panel">
<h3>Controls</h3>
<div class="control-row">
<button class="button button--primary" type="button">Primary</button>
<button class="button button--secondary" type="button">Secondary</button>
<button class="button button--danger" type="button">Remove</button>
<button class="button button--secondary" type="button" disabled>Disabled</button>
</div>
<label class="fixture-label" for="fixture-input">Persistent label</label>
<input id="fixture-input" class="fixture-input" value="Charizard ex" />
</article>
</div>
</section>
<section class="showcase-section" aria-labelledby="state-title">
<h2 id="state-title">Statuses, conditions, and feedback</h2>
<div class="showcase-grid">
<article class="showcase-panel">
<h3>Status treatments</h3>
<div class="status-row">
<span class="status status--available">Available</span>
<span class="status status--pending">Pending</span>
<span class="status status--sold">Sold</span>
</div>
</article>
<article class="showcase-panel">
<h3>Condition selection</h3>
<div class="control-row">
<button v-for="condition in ['Near Mint', 'Lightly Played', 'Damaged']" :key="condition" class="condition" :class="{ 'condition--selected': selectedCondition === condition }" type="button" @click="selectedCondition = condition">
{{ condition }}
</button>
</div>
<p class="fixture-label">Selected: {{ selectedCondition }}</p>
</article>
<article class="showcase-panel state-stack">
<h3>Feedback states</h3>
<p class="state state--empty">No relevant matches found.</p>
<p class="state state--loading" role="status">Loading collectible...</p>
<p class="state state--error" role="alert">Unable to load marketplace values.</p>
</article>
</div>
</section>
<section class="showcase-section" aria-labelledby="card-title">
<h2 id="card-title">Collectible cards</h2>
<div class="showcase-grid">
<article v-for="listing in listings" :key="listing.id" class="fixture-card">
<div class="fixture-stage" aria-label="Neutral collectible image stage"><span class="fixture-stage__glyph">PK</span></div>
<div>
<p class="fixture-card__meta">Trading card · Scarlet & Violet 151</p>
<h3>{{ listing.productName }}</h3>
<p class="fixture-card__meta">Condition: {{ listing.status === 'SOLD' ? 'Lightly Played' : 'Near Mint' }}</p>
</div>
<span :class="['status', `status--${listing.status.toLowerCase()}`]">{{ listing.status }}</span>
<p v-if="listing.status !== 'SOLD'" class="fixture-card__price">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</p>
<p v-else class="fixture-card__meta">Sold history retained</p>
<div class="fixture-card__actions">
<button class="button button--primary" type="button">View collectible</button>
<button class="button button--secondary" type="button">Compare</button>
</div>
</article>
</div>
</section>
<section class="showcase-section" aria-labelledby="detail-title">
<h2 id="detail-title">Detail and gallery treatment</h2>
<div class="showcase-grid">
<article class="showcase-panel">
<h3>Collectible detail</h3>
<div class="fixture-stage fixture-stage--image" aria-label="Neutral image gallery stage"><span class="fixture-stage__glyph">01</span></div>
<p class="catalog-kicker">Identity</p>
<h3>Charizard ex #199/165</h3>
<p class="fixture-card__meta">Scarlet & Violet 151 · Trading card · Near Mint</p>
</article>
<article class="showcase-panel">
<h3>Listing detail</h3>
<p class="catalog-kicker">Available</p>
<h3>Asking price</h3>
<p class="fixture-card__price">$115.00</p>
<dl class="product-facts">
<div><dt>Condition</dt><dd>Near Mint</dd></div>
<div><dt>Market context</dt><dd>$120 reference</dd></div>
<div><dt>Updated</dt><dd>Today</dd></div>
<div><dt>Seller note</dt><dd>Clean front and back</dd></div>
</dl>
</article>
<article class="showcase-panel">
<h3>Image treatment</h3>
<div class="fixture-stage fixture-stage--image" aria-label="Museum-style contained collectible image stage"><span class="fixture-stage__glyph">GALLERY</span></div>
<p class="fixture-card__meta">Contained, neutral, aspect-ratio preserving, and free of cobalt image backgrounds.</p>
</article>
</div>
</section>
</main>
</template>