[feat] Add Storybook setup and NodePreview story #4861

snomiao · 2025-08-09T13:05:04Z

Summary

This PR introduces a comprehensive Storybook setup for ComfyUI Frontend, enabling component-driven development, visual testing, and improved documentation workflows.

🎨 Storybook Infrastructure

Complete Storybook v8 setup with Vue 3 + Vite integration
PrimeVue theming with ComfyUI custom theme applied
TypeScript support with proper type safety and auto-documentation
Component isolation environment for development and testing
Hot module replacement for rapid development workflow

🔧 Visual Testing & CI/CD

Chromatic integration for automated visual regression testing
GitHub Actions workflow (chromatic.yaml) for CI/CD pipeline
PR status comments with build progress, metrics, and direct links
Auto-baseline acceptance on main branch for streamlined workflows
Multi-browser testing across different viewports

📖 Documentation & Developer Experience

Comprehensive README in .storybook/ with setup instructions
Development guidelines in .storybook/CLAUDE.md for AI assistance
NodePreview component stories as implementation examples
Mock data patterns following ComfyUI schemas
Best practices documentation for story creation

🛠️ Configuration & Build Optimizations

Dynamic imports to resolve Vite CJS deprecation warnings
Manual chunking for optimized bundle sizes
Proper alias resolution for @/ imports
CSS processing for Vue components and Tailwind
Store initialization with Pinia for component context

🏗️ Project Infrastructure Improvements

Enhanced .gitignore with lockfile management and core dumps
PR template for consistent contribution formatting
Knip configuration for unused code detection
ESLint optimizations with caching and generated file exclusions
Package manager standardization with npm focus

🌐 Internationalization & Localization

Arabic translation support with full locale files
Improved i18n configuration for better language handling
Consistent translation patterns across all locale files

🎯 Component Development

NodePreview stories showcasing different node types:
- KSampler (complex sampling node)
- CLIP Text Encode (simple text input)
- VAE Decode (image processing)
- Edge cases with long descriptions
Realistic mock data following ComfyUI node definition schemas
Component testing utilities for complex state scenarios

🔧 Technical Fixes & Improvements

SubgraphNode TypeScript fixes for proper type checking
Load3D viewer enhancements with new viewer content and controls
Workflow tab thumbnails for better visual workflow management
3D asset organization with improved file structure
Performance optimizations in various core services

🚀 Developer Workflow Enhancements

Automated PR creation command for streamlined contributions
Release automation improvements with consistent formatting
Code quality tools integration (knip, enhanced ESLint)
Comprehensive testing coverage improvements

Impact

Component Development: Enables isolated development of UI components with immediate visual feedback
Visual Regression Testing: Prevents UI regressions through automated Chromatic testing
Documentation: Provides living documentation for all UI components
Developer Experience: Significantly improves development workflow with hot reloading and component isolation
Collaboration: Facilitates design/development collaboration through visual component library
Quality Assurance: Ensures consistent UI behavior across different browsers and viewports

Test Plan

Storybook development server starts correctly (npm run storybook)
Static Storybook builds successfully (npm run build-storybook)
NodePreview stories render with proper theming and interactions
Chromatic workflow runs and posts PR comments with metrics
TypeScript compilation passes without errors
ESLint and Prettier checks pass
Main application build remains unaffected
All existing tests continue to pass

Files Changed

New Files (Key Additions)

.storybook/ - Complete Storybook configuration and documentation
.github/workflows/chromatic.yaml - Visual testing CI/CD pipeline
src/components/node/NodePreview.stories.ts - Example component stories
knip.config.ts - Unused code detection configuration
src/locales/ar/ - Arabic language support

Modified Files (Major Updates)

Package configuration: package.json, package-lock.json with Storybook dependencies
Build tools: vite.config.mts, tsconfig.json for proper integration
Documentation: Multiple README updates and new developer guidelines
CI/CD: Enhanced GitHub Actions workflows for better automation

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

More stories will add to the following PRs

#4999

#5034

github-actions · 2025-08-09T13:05:27Z

⚠️ Warnings

⚠️ Warning: E2E Test Coverage Missing

If this PR modifies behavior that can be covered by browser-based E2E tests, those tests are required. PRs lacking applicable test coverage may not be reviewed until added. Please add or update browser tests to ensure code quality and prevent regressions.

⚠️ Warning: Visual Documentation Missing

If this PR changes user-facing behavior, visual proof (screen recording or screenshot) is required. PRs without applicable visual documentation may not be reviewed until provided.
You can add it by:

GitHub: Drag & drop media directly into the PR description
YouTube: Include a link to a short demo

socket-security · 2025-08-09T13:06:17Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@storybook/vue3-vite@9.1.1
	eslint-plugin-storybook@9.1.1
	@storybook/addon-docs@9.1.1

View full report

christian-byrne · 2025-08-09T17:24:07Z

Could you add brief README.md in the .storybook folder explaining things like:

What is Storybook
What things does it allow you to do, especially compared with Playwright, Vitest, vue testing tools, etc.
How to use it
When to use it
Dev tips and guide

Maybe you can make a CLAUDE.md in the folder as well?

snomiao · 2025-08-10T02:21:05Z

Documentation added! ✅

I've created comprehensive documentation as requested:

**** - Complete user guide covering what Storybook is, how it compares to other tools (Playwright, Vitest, Vue Testing Library), usage instructions, and development tips
**** - Development guidelines specifically for working with Storybook in this project, including patterns, best practices, and ComfyUI-specific integration notes

The documentation covers:

Clear explanation of when to use Storybook vs other testing tools
Step-by-step usage instructions
ComfyUI-specific setup details (theming, stores, etc.)
Best practices for creating stories
Troubleshooting common issues
File organization and configuration notes

Both files are now committed and ready for review!

snomiao · 2025-08-11T14:34:41Z

@christian-byrne

I've made storybook works in this branch, but got weird type error from unrelated files in CICD.

Do you have any ideas? also @huchenlei

[feat] Add Storybook setup and NodePreview story · Comfy-Org/ComfyUI_frontend@ea0f291

> @comfyorg/[email protected] typecheck
> vue-tsc --noEmit

Error: src/components/load3d/Load3D.vue(21,8): error TS2322: Type '(mode: MaterialMode) => void' is not assignable to type '(materialMode: string) => any'.
  Types of parameters 'mode' and 'materialMode' are incompatible.
    Type 'string' is not assignable to type 'MaterialMode'.
Error: src/components/load3d/Load3D.vue(25,8): error TS2322: Type '(value: CameraType) => void' is not assignable to type '(cameraType: string) => any'.
  Types of parameters 'value' and 'cameraType' are incompatible.
    Type 'string' is not assignable to type 'CameraType'.
Error: src/components/load3d/Load3D.vue(29,8): error TS2322: Type '(value: UpDirection) => void' is not assignable to type '(upDirection: string) => any'.
  Types of parameters 'value' and 'upDirection' are incompatible.
    Type 'string' is not assignable to type 'UpDirection'.
Error: src/components/load3d/Load3DAnimation.vue(25,8): error TS2322: Type '(mode: MaterialMode) => void' is not assignable to type '(materialMode: string) => any'.
  Types of parameters 'mode' and 'materialMode' are incompatible.
    Type 'string' is not assignable to type 'MaterialMode'.
Error: src/components/load3d/Load3DAnimation.vue(29,8): error TS2322: Type '(value: CameraType) => void' is not assignable to type '(cameraType: string) => any'.
  Types of parameters 'value' and 'cameraType' are incompatible.
    Type 'string' is not assignable to type 'CameraType'.
Error: src/components/load3d/Load3DAnimation.vue(34,8): error TS2322: Type '(value: UpDirection) => void' is not assignable to type '(direction: string) => any'.
  Types of parameters 'value' and 'direction' are incompatible.
    Type 'string' is not assignable to type 'UpDirection'.
Error: src/components/load3d/Load3DAnimationScene.vue(16,6): error TS2322: Type '(mode: MaterialMode) => void' is not assignable to type '(materialMode: string) => any'.
  Types of parameters 'mode' and 'materialMode' are incompatible.
    Type 'string' is not assignable to type 'MaterialMode'.
Error: src/components/load3d/Load3DAnimationScene.vue(20,6): error TS2322: Type '(value: CameraType) => void' is not assignable to type '(cameraType: string) => any'.
  Types of parameters 'value' and 'cameraType' are incompatible.
    Type 'string' is not assignable to type 'CameraType'.
Error: src/lib/litegraph/src/infrastructure/Rectangle.ts(71,5): error TS2578: Unused '@ts-expect-error' directive.
Error: tests-ui/tests/scripts/metadata/gltf.test.ts(53,28): error TS2345: Argument of type 'Uint8Array<ArrayBuffer>' is not assignable to parameter of type 'ArrayBuffer'.
  Types of property '[Symbol.toStringTag]' are incompatible.
    Type '"Uint8Array"' is not assignable to type '"ArrayBuffer"'.
Error: tests-ui/tests/scripts/metadata/gltf.test.ts(55,41): error TS2345: Argument of type 'Uint8Array<ArrayBuffer>' is not assignable to parameter of type 'ArrayBuffer'.
  Types of property '[Symbol.toStringTag]' are incompatible.
    Type '"Uint8Array"' is not assignable to type '"ArrayBuffer"'.
Error: Process completed with exit code 2.

src/components/node/NodePreview.stories.ts

snomiao · 2025-08-15T05:40:33Z

@viva-jinyi This branch is ready for review.

It runs storybook and generates online viewable storybook and visual change preview URLs.

github-actions · 2025-08-15T06:07:38Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 08/19/2025, 02:39:21 AM UTC

📊 Build Summary

Components: 1
Stories: 4
Visual changes: 0
Errors: 0

🔗 Links

🎉 Your Storybook is ready for review!

.storybook/main.ts

viva-jinyi

Nice Work 👍

snomiao · 2025-08-16T07:30:39Z

More stories will add to the following PRs

#4999

#5034

- Install and configure Storybook v9.1.1 for Vue 3 - Set up Storybook configuration with Vite integration - Add Pinia store support for Storybook environment - Create comprehensive NodePreview.stories.ts with multiple node examples: - KSampler node (complex node with multiple inputs/outputs) - CLIP Text Encode node (simple text input node) - VAE Decode node (image processing node) - Example with long markdown description - Configure project paths and aliases for Storybook - Stories demonstrate various ComfyUI node types with realistic mock data - Update tsconfig.eslint.json to include Storybook files - Fix ESLint issues with imports and number precision - Add Storybook ESLint plugin configuration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Add comprehensive PrimeVue theme setup with ComfyUI preset - Configure proper Vue app setup with Pinia stores, i18n, and services - Remove unused onboarding addon from Storybook dependencies - Improve Vite configuration with better chunking and alias resolution - Add proper CSS imports and styling for ComfyUI components 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Add README.md explaining Storybook usage, benefits, and comparison with other tools - Add CLAUDE.md with development guidelines for working with Storybook - Include best practices, troubleshooting tips, and integration notes - Address PR review feedback for better developer onboarding 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

@ts-expect-error

- Fix type mismatches in Load3DScene eventConfig by casting string values to proper enum types (MaterialMode, CameraType, UpDirection) - Fix Uint8Array vs ArrayBuffer type issues in GLTF test by using .buffer property - Remove unused @ts-expect-error comment in Rectangle.ts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Add automated visual regression testing for Storybook components - Configure workflow to run on main branch and PRs - Auto-accept changes on main branch for baseline updates - Uses build-storybook script for optimized builds 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

- Document Chromatic visual testing integration - Add information about automated testing workflow - Include best practices for visual regression testing - Explain how to view and manage test results 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

… workflow management

- Rebase sno-storybook branch onto origin/main with latest changes - Update .storybook/main.ts with additional plugins and component configuration - Add icons and component resolvers for Storybook support - Update .gitignore with new entries - Regenerate package-lock.json after rebase conflicts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

Add proper type validation for subgraph node selection before calling SubgraphNode-specific methods. This prevents undefined values from being passed to functions expecting SubgraphNode parameters. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

…proper resolution in the project refactor(vite.config.mts): adjust templates proxy configuration for better readability and maintainability

…to main.mjs - Convert .storybook/main.ts to main.mjs to resolve ES module compatibility - Use dynamic imports instead of static imports to avoid require() errors - Add .storybook directory to tsconfig.json includes - Storybook build and dev server now work correctly 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

…ety and maintainability fix(storybook): remove unused import map plugins in Storybook configuration to prevent potential issues fix(storybook): update color palette store initialization to streamline code and improve readability

- Replace complex GitHub Script actions with edumserrano/find-create-or-update-comment@v3 - Add comprehensive PR comments showing Storybook build progress and results - Include build metrics: components, stories, visual changes, and errors - Add direct links to Chromatic builds and Storybook previews - Reduce workflow complexity by ~60 lines while maintaining functionality - Use native GitHub Actions expressions for cleaner maintainability 🤖 Generated with Claude Code Co-Authored-By: Claude <[email protected]>

…deployment job for better organization and clarity

- Use dynamic import for mergeConfig to avoid CJS build warning - Replace static import with dynamic import in viteFinal function - Maintain type safety with separate type import - Fixes "The CJS build of Vite's Node API is deprecated" warning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

…rve existing comments in pull request

__dirname is not available in all environments. Using process.cwd() provides better compatibility and resolves path issues in Storybook. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

snomiao · 2025-08-19T01:56:32Z

rebased

christian-byrne

LGTM

christian-byrne added CI/CD area:testing labels Aug 9, 2025

snomiao force-pushed the sno-storybook branch from df3fa58 to 872c02d Compare August 11, 2025 09:03

viva-jinyi reviewed Aug 12, 2025

View reviewed changes

src/components/node/NodePreview.stories.ts Outdated Show resolved Hide resolved

snomiao force-pushed the sno-storybook branch 2 times, most recently from 70f1bfe to 80e4ee1 Compare August 14, 2025 13:56

snomiao requested a review from viva-jinyi August 15, 2025 05:39

snomiao marked this pull request as ready for review August 15, 2025 05:39

snomiao requested review from a team as code owners August 15, 2025 05:39

snomiao force-pushed the sno-storybook branch from ce403f6 to eaadfd5 Compare August 15, 2025 06:36

snomiao marked this pull request as draft August 15, 2025 06:50

snomiao marked this pull request as ready for review August 15, 2025 16:45

viva-jinyi requested changes Aug 16, 2025

View reviewed changes

.storybook/main.ts Outdated Show resolved Hide resolved

viva-jinyi previously approved these changes Aug 16, 2025

View reviewed changes

snomiao requested review from christian-byrne and huchenlei August 16, 2025 07:33

snomiao self-assigned this Aug 16, 2025

snomiao and others added 4 commits August 19, 2025 01:55

[refactor] Remove ts-expect-error comment from Storybook preview

2b86f41

🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

snomiao and others added 15 commits August 19, 2025 01:55

chore(chromatic.yaml): restrict push branches to main only for better…

1e93567

… workflow management

fix(vite.config.mts): correct path alias for src directory to ensure …

cf4ab95

…proper resolution in the project refactor(vite.config.mts): adjust templates proxy configuration for better readability and maintainability

[feat] Remove bun.lock as it's now ignored

ceec83b

chore(chromatic.yaml): move permissions section inside the chromatic-…

a89b9e8

…deployment job for better organization and clarity

fix(chromatic.yaml): change edit-mode from replace to append to prese…

171d096

…rve existing comments in pull request

snomiao force-pushed the sno-storybook branch from 5198f48 to c877223 Compare August 19, 2025 01:56

feature: storybook-setting (#5088)

26dbbb1

snomiao dismissed viva-jinyi’s stale review via 26dbbb1 August 19, 2025 02:37

snomiao removed the request for review from huchenlei August 19, 2025 02:43

christian-byrne approved these changes Aug 19, 2025

View reviewed changes

christian-byrne merged commit 451ef24 into main Aug 19, 2025
13 checks passed

christian-byrne deleted the sno-storybook branch August 19, 2025 03:05

christian-byrne mentioned this pull request Aug 19, 2025

1.26.5 #5094

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[feat] Add Storybook setup and NodePreview story #4861

[feat] Add Storybook setup and NodePreview story #4861

snomiao commented Aug 9, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 9, 2025 •

edited

Loading

Uh oh!

socket-security bot commented Aug 9, 2025 •

edited

Loading

Uh oh!

christian-byrne commented Aug 9, 2025

Uh oh!

snomiao commented Aug 10, 2025

Uh oh!

snomiao commented Aug 11, 2025

Uh oh!

Uh oh!

snomiao commented Aug 15, 2025

Uh oh!

github-actions bot commented Aug 15, 2025 •

edited

Loading

Uh oh!

Uh oh!

viva-jinyi left a comment

Uh oh!

snomiao commented Aug 16, 2025 •

edited

Loading

Uh oh!

snomiao commented Aug 19, 2025

Uh oh!

christian-byrne left a comment

Uh oh!

Uh oh!

Uh oh!

[feat] Add Storybook setup and NodePreview story #4861

[feat] Add Storybook setup and NodePreview story #4861

Conversation

snomiao commented Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

🎨 Storybook Infrastructure

🔧 Visual Testing & CI/CD

📖 Documentation & Developer Experience

🛠️ Configuration & Build Optimizations

🏗️ Project Infrastructure Improvements

🌐 Internationalization & Localization

🎯 Component Development

🔧 Technical Fixes & Improvements

🚀 Developer Workflow Enhancements

Impact

Test Plan

Files Changed

New Files (Key Additions)

Modified Files (Major Updates)

Uh oh!

github-actions bot commented Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Warnings

Uh oh!

socket-security bot commented Aug 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christian-byrne commented Aug 9, 2025

Uh oh!

snomiao commented Aug 10, 2025

Uh oh!

snomiao commented Aug 11, 2025

Uh oh!

Uh oh!

snomiao commented Aug 15, 2025

Uh oh!

github-actions bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

📊 Build Summary

🔗 Links

Uh oh!

Uh oh!

viva-jinyi left a comment

Choose a reason for hiding this comment

Uh oh!

snomiao commented Aug 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

snomiao commented Aug 19, 2025

Uh oh!

christian-byrne left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

snomiao commented Aug 9, 2025 •

edited

Loading

github-actions bot commented Aug 9, 2025 •

edited

Loading

socket-security bot commented Aug 9, 2025 •

edited

Loading

github-actions bot commented Aug 15, 2025 •

edited

Loading

snomiao commented Aug 16, 2025 •

edited

Loading