feat(client): add Storybook with component stories#256
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
MartianGreed
force-pushed
the
feat/storybook
branch
from
2100537 to
1584648
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| /Users/valentindosimont/www/c7e/arcade/client/src/components/ui/modules/edition-actions.stories.tsx | ||
| /Users/valentindosimont/.claude/plans/zazzy-percolating-wreath.md | ||
| /Users/valentindosimont/www/c7e/arcade/.github/workflows/ci-chromatic.yml | ||
| /Users/valentindosimont/www/c7e/arcade/.github/workflows/ci-chromatic.yml |
There was a problem hiding this comment.
Developer tracking file accidentally committed to repository
Medium Severity
The .claude-modified-files file contains absolute paths from a developer's local machine (e.g., /Users/valentindosimont/...) and references to internal Claude planning files in .claude/plans/. This appears to be an internal tracking file that was accidentally staged and committed. It exposes the developer's username, local directory structure, and internal tooling artifacts that shouldn't be in version control.
| <div className="w-[500px]"> | ||
| <Story /> | ||
| </div> | ||
| </MemoryRouter> |
There was a problem hiding this comment.
Story uses wrong router library for component
Low Severity
The LeaderboardRow component imports Link from @tanstack/react-router, but the story file wraps it with MemoryRouter from react-router-dom. These are incompatible router libraries. While the current stories don't pass the to prop (so the Link isn't rendered), any future story that tests the linking functionality would fail because TanStack Router's Link component requires a TanStack Router context, not a react-router-dom context.
MartianGreed
force-pushed
the
feat/storybook
branch
from
1584648 to
ebc5fb5
Compare
|
|
||
| form.setError("password", { | ||
| message: "Password must be at least 8 characters", | ||
| }); |
There was a problem hiding this comment.
Form story calls setError in render causing potential loop
Low Severity
The FormWithErrorExample component calls form.setError() directly in the function body rather than in a useEffect hook. This state-modifying call executes on every render, which is incorrect React patterns and could cause infinite re-render loops depending on react-hook-form's internal implementation. To demonstrate an error state, the setError call needs to be wrapped in a useEffect with an empty dependency array to run only once on mount.
- Set up Storybook with Vite and dark theme support - Add Chromatic CI workflow for visual regression testing - Create stories for 37+ UI components - Fix GameCard text color for cartridge preset compatibility - Exclude stories from production TypeScript build
MartianGreed
force-pushed
the
feat/storybook
branch
from
ebc5fb5 to
525ee3d
Compare
- Merge latest main into feat/storybook - Upgrade Storybook 8.5 → 10.2.8 (fixes Node 22 ESM require error) - Apply automigrations: consolidated imports, addon cleanup, ESM fixes - Resolve merge conflicts in .gitignore and GameCard.tsx - Keep text-foreground-100 fix from original PR
MartianGreed
force-pushed
the
feat/storybook
branch
from
8a23c9b to
92ad325
Compare
- Fix AssetPreview stories: add required 'order' prop (set to null) - Fix LeaderboardRow stories: migrate from react-router-dom MemoryRouter to @tanstack/react-router (matching the actual component) - Add Tooltip stories (Default, LongContent, WithIcon) - Add PositionCard stories (Default, NegativePnl, LargePosition, List) - Add PredictCard stories (Default, TiedScore, HighStakes, CardGrid) Skipped components with heavy provider dependencies: - achievement-card (useAnalytics/PostHog) - arcade-header (useDevice, useTheme, SidebarToggle) - tabs/sub-tabs (useDevice, useAnalytics) - price-footer (ListingWithUsd, erc20Metadata) - summary (useAnalytics via game-header) - CollectionHeader (useMarketplaceItemsViewModel, useShare)
MartianGreed
force-pushed
the
feat/storybook
branch
from
defb737 to
81d7f80
Compare
1 participant
Summary
Changes
.storybook/main.ts,preview.ts,storybook.css.github/workflows/ci-chromatic.ymlfor Chromatic visual testingtext-whitetotext-foreground-100in GameCard for cartridge preset compatibilityTest plan
pnpm --filter @cartridge/client storybookto verify all stories loadNote
Adds a visual documentation and review workflow for the client UI.
client/.storybook/*(Vite config filters PWA plugins, alias@, sets__COMMIT_SHA__, dark/light themes, shared CSS).github/workflows/ci-chromatic.ymlto publish Storybook previews with caching and token guardui/,modules/,marketplace/, anddashboard(e.g.,GameCard,CollectibleCard, filters, tabs, icons, forms, pagination)client/package.json(storybook/chromatic scripts + deps),turbo.json(storybook/chromatic tasks),client/tsconfig.app.json(exclude*.stories.*),client/biome.jsonand root.gitignore(ignorestorybook-static)GameCard.tsxusestext-foreground-100instead oftext-whiteWritten by Cursor Bugbot for commit 525ee3d. This will update automatically on new commits. Configure here.