feat: core component library + React showcase - #5
Merged
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
7 production-ready React components: Button (4 variants, 3 sizes, loading), Input (label/error/helper), Card (3 variants), Badge (6 colour variants), Skeleton (shimmer), Dialog (native <dialog>, confirm/destructive/loading), BottomTabBar + Sidebar navigation. All components use CSS variable tokens, pass strict TypeScript, and are covered by 160 Vitest tests. Includes archived core-component-library OpenSpec change and 7 synced component specs in openspec/specs/. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Converts showcase/index.html from a 2,278-line hardcoded mockup into a live Vite + React app that renders the actual component library. Each of the 7 components is shown with all variants and interactive states. Dialog section includes both inline panel previews and live trigger buttons. BottomTabBar demo overrides fixed positioning for inline display. Adds Tailwind CSS v4 (@tailwindcss/vite), Vite 8, and @vitejs/plugin-react v6. Uses pnpm.overrides to deduplicate vite across vitest and the new dev server. Adds pnpm dev and build:showcase scripts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Mark component library and showcase as complete. Add Empty States and Toast to the backlog. Update Tailwind CSS version to v4. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pnpm/action-setup@v4 errors when both version: and packageManager in package.json are set. Dropping version: lets the action read pnpm@10.7.0 from the packageManager field directly. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… error ESLint and Prettier were scanning dist/showcase/ build output causing hundreds of spurious errors. Adding dist/ to both ignore files fixes it. Also corrects @typescript-eslint/array-type violation in BadgeSection (Array<T> → T[]) and applies Prettier to all showcase source files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
showcase/index.htmlwith a live Vite + React app (pnpm dev) that renders the actual components with all variants and interactive demos@tailwindcss/vitefor the showcase; updatesPROJECT.mdto reflect v4openspec/specs/and archives the completedcore-component-libraryOpenSpec changeTest plan
pnpm test— 160 tests pass (8 test files)pnpm typecheck— no TypeScript errorspnpm lint— no lint errorspnpm dev— showcase runs athttp://localhost:5173, all 7 component sections render correctly with tokens resolvingpnpm build:showcase— producesdist/showcase/without errors🤖 Generated with Claude Code