SIGN IN SIGN UP
langflow-ai / langflow UNCLAIMED

Langflow is a powerful tool for building and deploying AI-powered agents and workflows.

146432 0 0 Python

Feat: add storybook setup (#10721)

* feat(storybook): add Storybook setup and Button component stories

- 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

* ci(storybook): add GitHub Pages deployment workflow

- 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

* fix(storybook): align Storybook versions and fix TypeScript issues

- 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

* feat(storybook): replace Button stories with Dropdown component stories

- 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

* feat(storybook): add SettingsPage stories and remove dropdown stories

- Remove dropdown component stories
- Add SettingsPage stories with router, store, and dark mode decorators
- Include variants: default, with general settings, and dark mode

* feat(storybook): fix SettingsPage stories to show full page and add play functions

- Fix router setup to properly render SettingsPage with nested routes
- Add Routes configuration for all settings sub-pages (General, MCP Servers, Global Variables, Shortcuts, Messages)
- Add play functions to test page visibility and navigation
- Add stories for different routes: Default, WithGeneralSettings, NavigateToShortcuts, NavigateToGlobalVariables, DarkMode

* revert(storybook): restore SettingsPage stories to original working version

- Revert to simpler router setup without Routes configuration
- Remove play functions and complex routing
- Restore original three stories: Default, WithGeneralSettings, DarkMode

* feat(storybook): add stories for ShortcutsPage and GlobalVariablesPage 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

* fix(storybook): add QueryClientProvider to GlobalVariablesPage stories

- Add QueryClientProvider decorator to support React Query hooks
- Configure QueryClient with retry disabled for Storybook

* fix(storybook): remove WithGeneralSettings story to fix nested router error

- Remove WithGeneralSettings story that was causing nested Router error
- Keep Default and DarkMode stories only

* feat(storybook): enhance SettingsPage stories with multiple states and 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

* fix(storybook): initialize Zustand stores synchronously in SettingsPage 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

* feat(storybook): add story to verify store state accessibility

- Add VerifyStoreState story that demonstrates accessing Zustand store state
- Verify store values match expected configuration
- Show that state is accessible from play functions

* fix(storybook): remove router from SettingsPage stories to fix errors

- Remove MemoryRouter decorator that was causing errors
- Keep store setup and dark mode decorators
- Stories now work without router dependency

* fix(storybook): add router back to SettingsPage stories for useNavigate 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

* fix(storybook): fix router decorator order in SettingsPage stories

- 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

* feat(storybook): add PlaygroundPage story as example for complex page 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.

* chore(storybook): remove SettingsPage stories

Keep only PlaygroundPage story as the example for complex page stories.

* chore: restore pyproject.toml to match main branch

* chore: restore pyproject.toml to match main branch

* Revert "chore: restore pyproject.toml to match main branch"

This reverts commit a2b75a4028f1f046bc84a8d7999d53a2cb720fc9.

* chore: remove src/frontend/pyproject.toml as it doesn't exist in main

* fix gitignore and add make commands

* update package-json

* chore(storybook): migrate from v8.6.14 to v10.1.0

- 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

* fix: update package-lock.json to sync with package.json

* fix: regenerate package-lock.json with all optional dependencies

---------

Co-authored-by: Olfa Maslah <[email protected]>
Co-authored-by: Cristhian Zanforlin <[email protected]>
Co-authored-by: Olfa Maslah <[email protected]>
W
Wallgau committed
0ddfed3c43a7e000af42297b124d2598ce559869
Parent: 5226daa
Committed by GitHub <[email protected]> on 11/26/2025, 8:39:05 PM