feat: Add Storybook for component documentation#11
Open
slmingol wants to merge 12 commits intoand-computers:mainfrom
Open
feat: Add Storybook for component documentation#11slmingol wants to merge 12 commits intoand-computers:mainfrom
slmingol wants to merge 12 commits intoand-computers:mainfrom
Conversation
- Add Dockerfile with Node.js build and Nginx production stages - Add docker-compose.yml for local development with build - Add docker-compose.simple.yml for running from GHCR - Add .dockerignore to optimize build context - Use Debian-based Node image for ARM compatibility
- Upgrade React & React DOM to v19.2.4 - Upgrade date-fns from v2 to v4 - Upgrade prettier from v2 to v3 - Upgrade react-spring from v9 to v10 - Upgrade query-string from v8 to v9 - Upgrade tailwind-merge from v1 to v3 - Upgrade ua-parser-js from v1 to v2 - Upgrade Parcel to v2.16.4 - Upgrade lucide-react to v0.575.0 - Upgrade Tailwind CSS to v3.4.19 - Upgrade all @radix-ui packages to latest versions - Upgrade other dependencies to latest compatible versions All tests passing with legacy peer deps for React 19 compatibility
- Upgrade to Node 20 (required by rimraf@6 and other packages) - Switch from npm ci to npm install --legacy-peer-deps for React 19
- Upgrade to Node 20 (required by rimraf@6 and other packages) - Switch from npm ci to npm install --legacy-peer-deps for React 19
chore: Update Dockerfile for React 19 compatibility
- Remove obsolete docker-compose version attribute - Update dev service from Node 18 to Node 20 - Remove unused eslint and eslint-config-react-app packages - Add package overrides to force secure versions of minimatch and glob - Fixes all 21 high severity security vulnerabilities (now 0) This resolves GHSA-3ppc-4f35-3m26 (minimatch ReDoS vulnerability) and eliminates all transitive dependencies on vulnerable package versions.
fix: Address critical security and configuration issues
- Add .nvmrc for consistent Node 20 environment - Enhance package.json scripts (start, clean, format, format:check, test) - Add GitHub Actions CI/CD workflow - Runs on push to main and PRs - Format check, tests, and build verification - Docker image build and push to GHCR (main branch only) - Setup Vitest testing framework - Configured for JSX support in .js files - Includes React Testing Library and jsdom - Added example test for WordButton component - Test scripts: test, test:ui, test:run, test:coverage All tests passing (4/4) with 0 vulnerabilities maintained.
feat: Add developer experience improvements
- Update React 18 → React 19 - Add Node 20 prerequisite and .nvmrc mention - Add Docker setup instructions (local build and GHCR image) - Document all npm scripts (start, test, format, clean, etc.) - Add testing section with Vitest and React Testing Library - Add CI/CD section explaining GitHub Actions workflow - Enhance Contributing section with development requirements - Note --legacy-peer-deps flag requirement - Add technology stack updates (Vitest, Docker, Node 20)
docs: Update README with React 19, Docker, testing, and CI/CD info
- Install Storybook 10.2.10 with React-Vite framework - Configure Storybook with essential addons: - @chromatic-com/storybook for visual testing - @storybook/addon-vitest for component testing integration - @storybook/addon-a11y for accessibility checks - @storybook/addon-docs for automatic documentation - Add vite.config.js for JSX support in .js files - Create example stories: - WordButton: Interactive word selection with multiple scenarios - Button: All design system button variants and sizes - Badge: Badge variants with game status examples - Update README with Storybook documentation and known limitation - Add storybook and build-storybook npm scripts Note: Storybook requires refactoring React component files from .js to .jsx extensions to work properly. This is due to the non-standard practice of using .js extensions for JSX content. Example stories are provided as reference for when this refactoring is completed. Future work: Rename all React component files to use .jsx extension for full Storybook compatibility.
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
2 participants
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.
Overview
This PR adds Storybook for component documentation and visual development, providing a foundation for design system documentation.
Changes
Storybook Installation
@chromatic-com/storybook- Visual testing integration@storybook/addon-vitest- Component unit testing@storybook/addon-a11y- Accessibility checks@storybook/addon-docs- Automatic documentation generationComponent Stories
Created comprehensive example stories:
Configuration Files
.storybook/main.js- Storybook configuration with addons.storybook/preview.js- Global story parameters and decorators.storybook/vitest.setup.js- Vitest integration for component testingvite.config.js- Vite configuration for JSX support in .js filesTesting
npm run test:runBenefits
Testing
Note on JSX Files
This PR works with the current
.jsfile extensions. However, modern build tools prefer JSX in.jsxfiles. The JSX refactor PR (#14) addresses this to make Storybook fully optimized.Dependencies
This PR builds upon:
From Fork
https://github.com/slmingol/react-connections-game