feat(ui): implement storybook #14572
Open
Conversation
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
Fixed tsconfig.json paths in storybook-workspace to correctly reference repo root (../../ instead of ../), switched to react-docgen to avoid typescript scanning overhead, and installed missing Astro dependencies that were causing tsconfig parsing errors.
Add optional chaining to IntersectionObserver method calls to prevent crashes when observer is null (e.g., when IntersectionObserver API is unavailable or disabled).
Replace inline styles and hardcoded colors with CSS variables from Payload design system. Use actual TextInput components instead of plain HTML inputs. Create reference example showing proper styling approach.
Update all element, field, and icon story files to use Payload CSS variables instead of hardcoded hex colors. Ensures consistent theming and proper dark mode support across Storybook. Changes: - Elements (7 files): Banner, Card, Collapsible, LoadingOverlay, Modal, SearchBar, Tooltip - Fields (9 files): CodeField, EmailField, FieldComponents, JSONField, PasswordField, RadioGroupField, SlugField, TextInput, TextareaInput - Icons (5 files): Edit, IconShowcase, Plus, SimpleIcon, Trash Color mapping: #fff → var(--theme-elevation-0), #e2e8f0 → var(--theme-elevation-150), etc.
Add inline styles to textarea elements in CodeField and JSONField stories to match Payload design system. Includes borders, padding, colors, shadows using CSS variables.
Use Payload's actual CodeEditor component (Monaco Editor) instead of plain textareas to match real Payload admin panel styling exactly. This provides proper syntax highlighting, better UX, and matches the production implementation.
Add explicit imports for CodeEditor, Code field, and JSON field styles in Storybook preview.ts. Remove duplicate imports from individual story files to avoid conflicts. This ensures the formInput mixin and Monaco editor styles are properly applied.
Increase maxWidth in decorators for CodeField and JSONField stories from 800px to 1200px to provide more horizontal space for viewing and editing code. Code editors benefit from wider displays to show longer lines without wrapping.
The 'centered' layout was constraining width regardless of decorator maxWidth. Change to 'padded' layout to allow the 1200px maxWidth to take effect and give CodeEditor proper horizontal space.
Add tags: ['autodocs'] to Banner, Card, Collapsible, LoadingOverlay, Modal, SearchBar, and Tooltip stories. This enables automatic documentation pages in Storybook for all UI elements, matching the existing Button component pattern.
Remove all test and experimental story files to clean up Storybook: - Test directory stories (5 files): BasicTest, ButtonTest, CardTest, IconTest, PayloadComponentTest - Simple component stories (3 files): SimpleButton, CardSimple, SimpleIcon - Experimental variants (3 files): ButtonWithNewIcons, ButtonWithProviders, CardFixed These were development/testing artifacts not needed in final Storybook.
Remove the reference example story as all components now use proper Payload styling. The reference served its purpose during development and is no longer needed.
Add tags: ['autodocs'] to all field stories (9 files) and IconShowcase. This enables automatic documentation pages in Storybook for all UI fields and icons. Field stories: - CodeField, EmailField, FieldComponents, JSONField, PasswordField - RadioGroupField, SlugField, TextareaInput, TextInput Icon stories: - IconShowcase (Edit, Plus, Trash already had autodocs)
# Conflicts: # pnpm-lock.yaml
Contributor
📦 esbuild Bundle Analysis for payloadThis analysis was generated by esbuild-bundle-analyzer. 🤖
Largest pathsThese visualization shows top 20 largest paths in the bundle.Meta file: packages/next/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js
Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js
Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js
Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js
DetailsNext to the size is how much the size has increased or decreased compared with the base branch of this PR.
|
`ERR_PNPM_ADDING_TO_ROOT` errors randomly started in the create-payload-app int suite despite no changes in related code on our end. Solving this by ignoring workspace root with pnpm. It is still unclear what in this test flow actually changed in CI. --- Investigation: - Last successful runs: ~17 hours ago (2025-11-11 ~20:51 UTC) - Failures started: ~12 hours ago (2025-11-11 ~11:00 UTC) - 100% of integration tests fail, e2e tests pass 1. Code Changes: NONE - No PRs merged to main between last success and first failure - No changes to: - create-payload-app package - Workspace config (.npmrc, pnpm-workspace.yaml) - pnpm version (still 9.7.1 in .tool-versions) - Test files 2. GitHub Actions Environment - Runner image: ubuntu-24.04 (20251102.99.1) - deployed Nov 3, 2025 - No breaking changes found in Nov image update - pnpm/action-setup@v4: Latest is v4.2.0 (Oct 2024) - no recent updates 3. pnpm Behavior - ✓ pnpm 9.7.1 released Aug 2024 (no recent changes) - No changes to ERR_PNPM_ADDING_TO_ROOT logic in 9.7.1 - Error occurs when pnpm detects directory as workspace root 6. Test Flow - Test creates temp directory - scaffolds Next.js with pnpm create next-app@canary - calls pnpm add payload@latest... - pnpm rejects, treating temp directory as workspace root
denolfe
requested review from
AlessioGr,
JarrodMFlesch and
jacobsfletch
as code owners
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
A good starting point for Storybook for component development and documentation.
How to Use
Start Storybook:
pnpm storybookAdd new stories:
NOTE: You may need to go into the examples/astro directory and run
pnpm install. Tried everything to make storybook not crawl for every tsconfig.json in the monorepo, but I was unsuccessful.