Feat: add storybook setup by Wallgau · Pull Request #10721 · langflow-ai/langflow (original) (raw)

[](/apps/coderabbitai)

Cristhianzl changed the titleFeat/storybook setup feat: add storybook setup

Nov 26, 2025

Wallgau changed the titlefeat: add storybook setup Feat: add storybook setup

Nov 26, 2025

Olfa Maslah added 5 commits

November 26, 2025 13:44

• 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

Olfa Maslah and others added 19 commits

November 26, 2025 13:45

…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.

• 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

Olfa Maslah added 2 commits

November 26, 2025 14:00

Wallgau deleted the feat/storybook-setup branch

November 26, 2025 20:52

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

[ Show hidden characters]({{ revealButtonHref }})