Skip to content

Conversation

zawoj
Copy link

@zawoj zawoj commented Sep 30, 2025

What?

This PR adds comprehensive Storybook integration to the Payload UI package, including:

  • Complete Storybook configuration with React + Vite setup
  • Story files for 100+ UI components (buttons, modals, forms, etc.)
  • MDX documentation for each component
  • Docker configuration for deployment
  • Production-ready deployment setup with nginx

Note: This is currently in progress - Many components still need documentation and proper story implementations.

Why?

The Payload UI package contains many reusable components, but currently lacks:

  • A centralized way to view and test all components in isolation
  • Interactive documentation for developers
  • Visual regression testing capabilities
  • Easy component development and iteration

Storybook solves these problems by providing a dedicated environment for component development, testing, and documentation.

How?

  • Storybook Setup: Added .storybook/ configuration with React + Vite integration
  • Component Stories: Created .stories.tsx files for each UI component with various states and props
  • Documentation: Added .mdx files with component documentation and usage examples
  • Docker Deployment: Created Dockerfile.ui and deployment configuration for production hosting
  • Package Scripts: Added storybook and serve-storybook scripts to package.json
  • Dependencies: Added Storybook-related packages and serve for static file serving

Current Focus: The most challenging aspect is implementing stories for more advanced components that require Payload API and context to function properly. These components need proper mocking and context providers to work in isolation within Storybook.

Preview: https://payloadcms-ui.coolify.zawojit.com/

The implementation follows Storybook best practices and integrates seamlessly with the existing Payload UI package structure.

Copy link
Contributor

github-actions bot commented Sep 30, 2025

Pull Request titles must follow the Conventional Commits specification and have valid scopes.

The subject "Storybook for UI package" found in the pull request title "feat(ui): Storybook for UI package"
didn't match the configured pattern. Please ensure that the subject
doesn't start with an uppercase character.

feat(ui): add Button component
^    ^    ^
|    |    |__ Subject
|    |_______ Scope
|____________ Type

@zawoj zawoj changed the title WIP - Storybook for UI package feat(ui): Storybook for UI package Sep 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant