Feat: add storybook setup #10721
Feat: add storybook setup #10721
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis PR introduces Storybook into the frontend, adding configuration files, a GitHub Actions deployment workflow to GitHub Pages, new npm scripts, Storybook and Chromatic dependencies, and a comprehensive Button component story demonstrating multiple variants and interactive testing. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 error)
✅ Passed checks (6 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report❌ Patch coverage is
❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #10721 +/- ##
==========================================
- Coverage 32.44% 32.41% -0.04%
==========================================
Files 1367 1368 +1
Lines 63315 63412 +97
Branches 9357 9373 +16
==========================================
+ Hits 20544 20555 +11
- Misses 41738 41825 +87
+ Partials 1033 1032 -1
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
.github/workflows/deploy-storybook.yml (1)
7-11: Consider expanding path filters to include additional config files.The current path filters might miss changes to configuration files that affect the Storybook build, such as
src/frontend/tsconfig.json,src/frontend/vite.config.ts, orsrc/frontend/tailwind.config.js. Consider adding these to ensure the workflow triggers when relevant configuration changes are made.paths: - 'src/frontend/**/*.stories.*' - 'src/frontend/.storybook/**' - 'src/frontend/package.json' + - 'src/frontend/tsconfig.json' + - 'src/frontend/vite.config.ts' + - 'src/frontend/tailwind.config.js' - '.github/workflows/deploy-storybook.yml'src/frontend/src/components/ui/button.stories.tsx (1)
185-256: Consider adding type safety to CompleteShowcase button props.The
CompleteShowcasestory builds button configurations dynamically, but the props objects (lines 191-226) lack type annotations. While this works, adding a type would improve maintainability and catch potential issues.Consider defining a type for the button configuration:
+type ButtonConfig = Partial<ButtonProps> & { + label?: string; + icon?: string; +}; + export const CompleteShowcase: Story = { render: () => { const sections = [ { title: "Variants", - buttons: [ + buttons: [ { variant: "default" }, // ...
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
.github/workflows/deploy-storybook.yml(1 hunks)src/frontend/.storybook/css.d.ts(1 hunks)src/frontend/.storybook/main.ts(1 hunks)src/frontend/.storybook/preview.ts(1 hunks)src/frontend/package.json(3 hunks)src/frontend/src/components/ui/button.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
src/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management
Files:
src/frontend/src/components/ui/button.stories.tsx
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/components/ui/button.stories.tsx
src/frontend/src/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/components/**/*.{tsx,jsx}: Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Use the cn() utility function for combining Tailwind CSS classes in components
Use TypeScript interfaces for defining component props in React components
Files:
src/frontend/src/components/ui/button.stories.tsx
src/frontend/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application
Files:
src/frontend/src/components/ui/button.stories.tsx
🧠 Learnings (15)
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/**/*.{tsx,jsx,css,scss} : Use Tailwind CSS for styling
Applied to files:
src/frontend/.storybook/css.d.tssrc/frontend/.storybook/preview.tssrc/frontend/package.json
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/utils/**/*.{ts,tsx} : Use named exports for utility functions in the utils/ directory
Applied to files:
src/frontend/.storybook/css.d.tssrc/frontend/.storybook/main.ts
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx} : Use React 18 with TypeScript for frontend development
Applied to files:
src/frontend/.storybook/css.d.tssrc/frontend/.storybook/preview.tssrc/frontend/.storybook/main.tssrc/frontend/package.json
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/**/*.test.{ts,tsx} : Write component tests using React Testing Library with render(), screen, and fireEvent utilities
Applied to files:
src/frontend/.storybook/preview.tssrc/frontend/src/components/ui/button.stories.tsx
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx} : Use Zustand for state management
Applied to files:
src/frontend/.storybook/preview.tssrc/frontend/.storybook/main.ts
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/components/**/*.{tsx,jsx} : Use TypeScript interfaces for defining component props in React components
Applied to files:
src/frontend/.storybook/preview.ts
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/**/*.{tsx,jsx} : Implement dark mode support using the useDarkMode hook and dark store
Applied to files:
src/frontend/.storybook/preview.tssrc/frontend/src/components/ui/button.stories.tsx
📚 Learning: 2025-11-24T19:47:28.965Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-11-24T19:47:28.965Z
Learning: Applies to src/frontend/**/*.{test,spec}.{ts,tsx,js,jsx} : Frontend tests should validate component rendering, user interactions, state management, and async operations using appropriate testing libraries (React Testing Library, Vitest, Jest, etc.)
Applied to files:
src/frontend/.storybook/preview.tssrc/frontend/package.json
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/components/**/*.{tsx,jsx} : Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Applied to files:
src/frontend/.storybook/preview.ts
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/components/**/*.{tsx,jsx} : Use the cn() utility function for combining Tailwind CSS classes in components
Applied to files:
src/frontend/.storybook/preview.ts
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Applies to src/frontend/src/stores/**/*.{ts,tsx} : Store state management code in stores/ directory using Zustand with typed state interfaces
Applied to files:
src/frontend/.storybook/main.ts
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Use Vite for build tooling and dev server
Applied to files:
src/frontend/.storybook/main.tssrc/frontend/package.json
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Frontend builds must be performed using Vite, with production output placed in the dist/ directory and served by the backend in production environments.
Applied to files:
src/frontend/.storybook/main.ts
📚 Learning: 2025-06-23T12:46:29.953Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-06-23T12:46:29.953Z
Learning: The documentation site is built and served locally using 'yarn build' and 'yarn serve', and is automatically deployed on commit to the main branch.
Applied to files:
src/frontend/package.json
📚 Learning: 2025-11-24T19:46:45.782Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.782Z
Learning: Run make lint before committing to check ESLint and TypeScript errors
Applied to files:
src/frontend/package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Test Starter Templates
🔇 Additional comments (9)
src/frontend/.storybook/preview.ts (1)
10-20: LGTM!The Storybook preview configuration is well-structured with appropriate parameters for actions (matching handlers starting with "on") and controls matchers for color and date fields.
src/frontend/.storybook/main.ts (1)
5-38: LGTM! Storybook configuration is well-structured.The configuration includes:
- Appropriate story patterns and addons
- Correct Vite integration with path alias setup for the
@import alias- Sensible TypeScript options (type checking disabled for performance, with proper docgen configuration)
- Good propFilter to exclude node_modules props from documentation
This aligns well with the project's use of Vite for build tooling.
src/frontend/package.json (2)
109-112: LGTM! Storybook scripts are properly configured.The Storybook scripts follow standard conventions:
storybookfor local development on port 6006storybook:networkfor network access (useful for testing on mobile devices)build-storybookfor production builds (used by the deployment workflow)chromaticfor visual regression testing integration
103-106: I'll verify whether thelint-changed.shscript exists and is properly accessible for the npm scripts referenced in the package.json file.
<function_calls>
#!/bin/bashSearch for lint-changed.sh in the repository
fd -t f "lint-changed.sh"
</function_calls>
<function_calls>
#!/bin/bashCheck the directory structure around scripts in src/frontend
fd -t f "scripts" src/frontend/ || echo "Checking for scripts directory..."
ls -la src/frontend/scripts/ 2>/dev/null || echo "Scripts directory not found or empty"
</function_calls>src/frontend/src/components/ui/button.stories.tsx (4)
9-32: Verify dark mode decorator works correctly in Storybook.The
withDarkModedecorator directly manipulates the DOM to toggle dark mode. Line 20 usesdocument.getElementById("body") || document.bodywhich might not target the correct element in Storybook's iframe environment. Storybook typically renders stories within an iframe, so you may need to ensure the dark mode class is applied to the correct container.Consider testing this decorator to confirm dark mode toggle works as expected in the Storybook UI.
34-37: LGTM! Clean helper function.The
renderButtonhelper cleanly separates the story-leveldarkModearg from the actual Button props, which is a good pattern for managing Storybook-specific arguments.
39-55: Well-structured play functions for interaction testing.The play functions (
playClickableandplayDisabled) provide good test coverage:
- Verify button accessibility (role="button")
- Check text content
- Test interaction behavior (clickable vs disabled)
- Validate visibility
This follows Storybook best practices for interaction testing.
57-105: Comprehensive meta configuration with proper type handling.The meta configuration is well-structured:
- Includes all button variants and sizes from the component
- Uses the
withDarkModedecorator consistently- Properly handles the non-Button
darkModearg with@ts-expect-errorand a clear comment (Lines 98-103)- Enables autodocs for automatic documentation generation
As per coding guidelines, this properly uses TypeScript interfaces for component props in React components.
src/frontend/.storybook/css.d.ts (1)
2-4: Type definition forRecord<string, never>is correct for this codebase's CSS usage.The CSS files in this project (classes.css, index.css, App.css, applies.css) are global stylesheets imported for side effects only—never used as CSS modules with class name access. The type
Record<string, never>accurately reflects this: it declares an empty object, preventing any property access attempts.The
@ts-ignorecomments in preview.ts are unrelated to type definition accuracy; they suppress TypeScript warnings on side-effect-only imports. No CSS modules with class name patterns (e.g.,import * as styles) exist in the codebase.
Adam-Aghili
left a comment
Adam-Aghili
left a comment
There was a problem hiding this comment.
LGTM! Just some minor comments
Why are we using storybook v8.6.14 instead of latest?
Nitpick: I see whe have Deploy to GitHub Pages I will for sure get confused in a few months by the names. Could you either change Deploy to GitHub Pages to Deploy Docs to GitHub Pages or have your new storybook action be triggered by Deploy to GitHub Pages?
Wallgau
force-pushed
the
feat/storybook-setup
branch
6 times, most recently
from
040a832 to
10296e2
Compare
github-actions
bot
added
enhancement
github-actions
bot
added
lgtm
- Add Storybook configuration files (.storybook/main.ts, preview.ts, css.d.ts) - Add Button component stories with interaction testing - Add Storybook dependencies and scripts to package.json - Support dark mode in stories via decorator - Include play functions for automated interaction testing
- Add automated deployment workflow for Storybook - Deploy on push to main when Storybook files change - Support manual trigger via workflow_dispatch - Use official GitHub Actions for Pages deployment
- Update all @storybook/* packages from ^8.4.7 to ^8.6.14 to match main storybook version - Fix CSS type declarations in css.d.ts (Record<string, string> instead of Record<string, never>) - Remove @ts-ignore comments from preview.ts (CSS imports now properly typed) - Fix darkMode type issue in button.stories.tsx with proper ArgTypes type assertion
- Remove Button stories (shadcn already has documentation) - Add comprehensive Dropdown component stories showcasing: - Default, with value, combobox mode - With metadata, disabled, loading states - Many options, searchable filtering - Dark mode support - Add store initialization decorator for Storybook - Include interaction testing with play functions
- Remove dropdown component stories - Add SettingsPage stories with router, store, and dark mode decorators - Include variants: default, with general settings, and dark mode
…ersion - Revert to simpler router setup without Routes configuration - Remove play functions and complex routing - Restore original three stories: Default, WithGeneralSettings, DarkMode
…e with tables - Add ShortcutsPage stories showing the shortcuts table - Add GlobalVariablesPage stories showing the global variables table - Include store setup for shortcuts data - Add play functions to verify table visibility - Support dark mode for both pages
- Add QueryClientProvider decorator to support React Query hooks - Configure QueryClient with retry disabled for Storybook
… error - Remove WithGeneralSettings story that was causing nested Router error - Keep Default and DarkMode stories only
…d logic variations - Add stories showcasing different store configurations (autoLogin, hasStore) - Demonstrate conditional General settings visibility logic - Add interactive sidebar navigation story - Show full configuration with all features - Include play functions to verify state-based behavior - Showcase how page adapts to different user/auth states
…ge stories - Set store state before component render instead of in useEffect - Ensures stores are accessible when SettingsPage component mounts - Fixes state access errors in Storybook
- Add VerifyStoreState story that demonstrates accessing Zustand store state - Verify store values match expected configuration - Show that state is accessible from play functions
- Remove MemoryRouter decorator that was causing errors - Keep store setup and dark mode decorators - Stories now work without router dependency
…te support - Add MemoryRouter back to support useCustomNavigate hook in PageLayout - Router is needed for navigation hooks to work properly - Keep router at decorator level to avoid nested router errors
- Move router decorator to be outermost (last in array) - Decorators run bottom-to-top, so router should wrap everything - Ensures useNavigate context is available to all components
… stories - Add PlaygroundPage story demonstrating how to create stories for complex pages - Include darkMode toggle control as example for interactive story controls - Set up decorators for query client, router, and theme switching - Hide publish elements (Theme buttons, Built with Langflow) in story view - Center chat title header in story view - Configure Storybook preview and CSS types This story serves as a reference for creating stories for full page components rather than simple UI components, which are already documented in shadcn docs.
Keep only PlaygroundPage story as the example for complex page stories.
This reverts commit a2b75a4.
- Update all Storybook packages to v10.1.0 - Replace @storybook/addon-essentials with @storybook/addon-docs - Remove @storybook/addon-interactions (moved to core) - Remove @storybook/blocks and @storybook/test (consolidated) - Fix import in PlaygroundPage.stories.tsx to use @storybook/react - Update tsconfig.json moduleResolution to 'bundler' for better compatibility - Add explicit types configuration for @storybook/react
Wallgau
force-pushed
the
feat/storybook-setup
branch
from
006b2a5 to
8cfe170
Compare
This PR adds Storybook configuration and setup for the frontend, enabling component documentation and visual testing. It includes Storybook configuration files (
.storybook/main.ts,preview.ts,css.d.ts),Playground
component stories with interaction testing (
PlaygroundPage.stories.tsx) as an example, Storybook dependencies and scripts inpackage.json, and a GitHub Actions workflow for automated deployment to GitHub Pages. The setup supports dark mode via decorator and includes play functions for automated interaction testing.To test locally, navigate to
src/frontend, runnpm installto install dependencies, then runnpm run storybookto start the Storybook dev server athttp://localhost:6006. Explore the Playground component stories in the Storybook. After merging tomain, Storybook will be automatically deployed to GitHub Pages. Enable GitHub Pages in repository Settings → Pages by selecting "GitHub Actions" as the source. For documentation, see Storybook Documentation, Storybook for React, Writing Stories, and Interaction Testing.Uploading Screen Recording 2025-11-25 at 10.16.36 PM.mov…
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.