mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 19:21:54 +00:00
[feat] Add Storybook setup and NodePreview story (#4861)
* [feat] Add Storybook setup and NodePreview story - 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 <noreply@anthropic.com> * [feat] Improve Storybook configuration and setup - 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 <noreply@anthropic.com> * [docs] Add comprehensive Storybook documentation - 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 <noreply@anthropic.com> * [refactor] Remove ts-expect-error comment from Storybook preview 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [bugfix] Fix TypeScript errors in Load3D components and GLTF test - 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 <noreply@anthropic.com> * [feat] Add Chromatic GitHub Action for Storybook visual testing - 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 <noreply@anthropic.com> * [docs] Add Chromatic documentation to Storybook README - 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 <noreply@anthropic.com> * chore(chromatic.yaml): restrict push branches to main only for better workflow management * [feat] Rebase branch onto main and update Storybook configuration - 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 <noreply@anthropic.com> * [bugfix] Fix TypeScript errors in SubgraphNode type checking 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 <noreply@anthropic.com> * fix(vite.config.mts): correct path alias for src directory to ensure 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 * [bugfix] Fix Storybook builder require() error by converting main.ts 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 <noreply@anthropic.com> * chore(storybook): replace main.mjs with main.ts for improved type safety 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 * [feat] Optimize Chromatic workflow with automated PR status comments - 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 <noreply@anthropic.com> * chore(chromatic.yaml): move permissions section inside the chromatic-deployment job for better organization and clarity * [fix] Resolve Vite CJS deprecation warning in Storybook config - 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 <noreply@anthropic.com> * fix(chromatic.yaml): change edit-mode from replace to append to preserve existing comments in pull request * [fix] Replace __dirname with process.cwd() in Storybook config __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 <noreply@anthropic.com> * feature: storybook-setting (#5088) --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Jin Yi <jin12cc@gmail.com>
This commit is contained in:
snomiao
197
.storybook/CLAUDE.md
Normal file
197
.storybook/CLAUDE.md
Normal file
@@ -0,0 +1,197 @@
|
||||
# Storybook Development Guidelines for Claude
|
||||
|
||||
## Quick Commands
|
||||
|
||||
- `npm run storybook`: Start Storybook development server
|
||||
- `npm run build-storybook`: Build static Storybook
|
||||
- `npm run test:component`: Run component tests (includes Storybook components)
|
||||
|
||||
## Development Workflow for Storybook
|
||||
|
||||
1. **Creating New Stories**:
|
||||
- Place `*.stories.ts` files alongside components
|
||||
- Follow the naming pattern: `ComponentName.stories.ts`
|
||||
- Use realistic mock data that matches ComfyUI schemas
|
||||
|
||||
2. **Testing Stories**:
|
||||
- Verify stories render correctly in Storybook UI
|
||||
- Test different component states and edge cases
|
||||
- Ensure proper theming and styling
|
||||
|
||||
3. **Code Quality**:
|
||||
- Run `npm run typecheck` to verify TypeScript
|
||||
- Run `npm run lint` to check for linting issues
|
||||
- Follow existing story patterns and conventions
|
||||
|
||||
## Story Creation Guidelines
|
||||
|
||||
### Basic Story Structure
|
||||
|
||||
```typescript
|
||||
import type { Meta, StoryObj } from '@storybook/vue3'
|
||||
import ComponentName from './ComponentName.vue'
|
||||
|
||||
const meta: Meta<typeof ComponentName> = {
|
||||
title: 'Category/ComponentName',
|
||||
component: ComponentName,
|
||||
parameters: {
|
||||
layout: 'centered' // or 'fullscreen', 'padded'
|
||||
}
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
// Component props
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Mock Data Patterns
|
||||
|
||||
For ComfyUI components, use realistic mock data:
|
||||
|
||||
```typescript
|
||||
// Node definition mock
|
||||
const mockNodeDef = {
|
||||
input: {
|
||||
required: {
|
||||
prompt: ["STRING", { multiline: true }]
|
||||
}
|
||||
},
|
||||
output: ["CONDITIONING"],
|
||||
output_is_list: [false],
|
||||
category: "conditioning"
|
||||
}
|
||||
|
||||
// Component instance mock
|
||||
const mockComponent = {
|
||||
id: "1",
|
||||
type: "CLIPTextEncode",
|
||||
// ... other properties
|
||||
}
|
||||
```
|
||||
|
||||
### Common Story Variants
|
||||
|
||||
Always include these story variants when applicable:
|
||||
|
||||
- **Default**: Basic component with minimal props
|
||||
- **WithData**: Component with realistic data
|
||||
- **Loading**: Component in loading state
|
||||
- **Error**: Component with error state
|
||||
- **LongContent**: Component with edge case content
|
||||
- **Empty**: Component with no data
|
||||
|
||||
### Storybook-Specific Code Patterns
|
||||
|
||||
#### Store Access
|
||||
```typescript
|
||||
// In stories, access stores through the setup function
|
||||
export const WithStore: Story = {
|
||||
render: () => ({
|
||||
setup() {
|
||||
const store = useMyStore()
|
||||
return { store }
|
||||
},
|
||||
template: '<MyComponent :data="store.data" />'
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
#### Event Testing
|
||||
```typescript
|
||||
export const WithEvents: Story = {
|
||||
args: {
|
||||
onUpdate: fn() // Use Storybook's fn() for action logging
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Configuration Notes
|
||||
|
||||
### Vue App Setup
|
||||
The Storybook preview is configured with:
|
||||
- Pinia stores initialized
|
||||
- PrimeVue with ComfyUI theme
|
||||
- i18n internationalization
|
||||
- All necessary CSS imports
|
||||
|
||||
### Build Configuration
|
||||
- Vite integration with proper alias resolution
|
||||
- Manual chunking for better performance
|
||||
- TypeScript support with strict checking
|
||||
- CSS processing for Vue components
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
1. **Import Errors**: Verify `@/` alias is working correctly
|
||||
2. **Missing Styles**: Ensure CSS imports are in `preview.ts`
|
||||
3. **Store Errors**: Check store initialization in setup
|
||||
4. **Type Errors**: Use proper TypeScript types for story args
|
||||
|
||||
### Debug Commands
|
||||
|
||||
```bash
|
||||
# Check TypeScript issues
|
||||
npm run typecheck
|
||||
|
||||
# Lint Storybook files
|
||||
npm run lint .storybook/
|
||||
|
||||
# Build to check for production issues
|
||||
npm run build-storybook
|
||||
```
|
||||
|
||||
## File Organization
|
||||
|
||||
```
|
||||
.storybook/
|
||||
├── main.ts # Core configuration
|
||||
├── preview.ts # Global setup and decorators
|
||||
├── README.md # User documentation
|
||||
└── CLAUDE.md # This file - Claude guidelines
|
||||
|
||||
src/
|
||||
├── components/
|
||||
│ └── MyComponent/
|
||||
│ ├── MyComponent.vue
|
||||
│ └── MyComponent.stories.ts
|
||||
```
|
||||
|
||||
## Integration with ComfyUI
|
||||
|
||||
### Available Context
|
||||
|
||||
Stories have access to:
|
||||
- All ComfyUI stores (widgetStore, colorPaletteStore, etc.)
|
||||
- PrimeVue components with ComfyUI theming
|
||||
- Internationalization system
|
||||
- ComfyUI CSS variables and styling
|
||||
|
||||
### Testing Components
|
||||
|
||||
When testing ComfyUI-specific components:
|
||||
1. Use realistic node definitions and data structures
|
||||
2. Test with different node types (sampling, conditioning, etc.)
|
||||
3. Verify proper CSS theming and dark/light modes
|
||||
4. Check component behavior with various input combinations
|
||||
|
||||
### Performance Considerations
|
||||
|
||||
- Use manual chunking for large dependencies
|
||||
- Minimize bundle size by avoiding unnecessary imports
|
||||
- Leverage Storybook's lazy loading capabilities
|
||||
- Profile build times and optimize as needed
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Keep Stories Focused**: Each story should demonstrate one specific use case
|
||||
2. **Use Descriptive Names**: Story names should clearly indicate what they show
|
||||
3. **Document Complex Props**: Use JSDoc comments for complex prop types
|
||||
4. **Test Edge Cases**: Create stories for unusual but valid use cases
|
||||
5. **Maintain Consistency**: Follow established patterns in existing stories
|
||||
173
.storybook/README.md
Normal file
173
.storybook/README.md
Normal file
@@ -0,0 +1,173 @@
|
||||
# Storybook Configuration for ComfyUI Frontend
|
||||
|
||||
## What is Storybook?
|
||||
|
||||
Storybook is a frontend workshop for building UI components and pages in isolation. It allows developers to:
|
||||
|
||||
- Build components independently from the main application
|
||||
- Test components with different props and states
|
||||
- Document component APIs and usage patterns
|
||||
- Share components across teams and projects
|
||||
- Catch visual regressions through visual testing
|
||||
|
||||
## Storybook vs Other Testing Tools
|
||||
|
||||
| Tool | Purpose | Use Case |
|
||||
|------|---------|----------|
|
||||
| **Storybook** | Component isolation & documentation | Developing, testing, and showcasing individual UI components |
|
||||
| **Playwright** | End-to-end testing | Full user workflow testing across multiple pages |
|
||||
| **Vitest** | Unit testing | Testing business logic, utilities, and component behavior |
|
||||
| **Vue Testing Library** | Component testing | Testing component interactions and DOM output |
|
||||
|
||||
### When to Use Storybook
|
||||
|
||||
**✅ Use Storybook for:**
|
||||
- Developing new UI components in isolation
|
||||
- Creating component documentation and examples
|
||||
- Testing different component states and props
|
||||
- Sharing components with designers and stakeholders
|
||||
- Visual regression testing
|
||||
- Building a component library or design system
|
||||
|
||||
**❌ Don't use Storybook for:**
|
||||
- Testing complex user workflows (use Playwright)
|
||||
- Testing business logic (use Vitest)
|
||||
- Integration testing between components (use Vue Testing Library)
|
||||
|
||||
## How to Use Storybook
|
||||
|
||||
### Development Commands
|
||||
|
||||
```bash
|
||||
# Start Storybook development server
|
||||
npm run storybook
|
||||
|
||||
# Build static Storybook for deployment
|
||||
npm run build-storybook
|
||||
```
|
||||
|
||||
### Creating Stories
|
||||
|
||||
Stories are located alongside components in `src/` directories with the pattern `*.stories.ts`:
|
||||
|
||||
```typescript
|
||||
// MyComponent.stories.ts
|
||||
import type { Meta, StoryObj } from '@storybook/vue3'
|
||||
import MyComponent from './MyComponent.vue'
|
||||
|
||||
const meta: Meta<typeof MyComponent> = {
|
||||
title: 'Components/MyComponent',
|
||||
component: MyComponent,
|
||||
parameters: {
|
||||
layout: 'centered'
|
||||
}
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: 'Hello World'
|
||||
}
|
||||
}
|
||||
|
||||
export const WithVariant: Story = {
|
||||
args: {
|
||||
title: 'Variant Example',
|
||||
variant: 'secondary'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Available Features
|
||||
|
||||
- **Vue 3 Support**: Full Vue 3 composition API and reactivity
|
||||
- **PrimeVue Integration**: All PrimeVue components and theming
|
||||
- **ComfyUI Theming**: Custom ComfyUI theme preset applied
|
||||
- **Pinia Stores**: Access to application stores for components that need state
|
||||
- **TypeScript**: Full TypeScript support with proper type checking
|
||||
- **CSS/SCSS**: Component styling support
|
||||
- **Auto-documentation**: Automatic prop tables and component documentation
|
||||
- **Chromatic Integration**: Automated visual regression testing for component stories
|
||||
|
||||
## Development Tips
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Keep Stories Simple**: Each story should demonstrate one specific use case
|
||||
2. **Use Realistic Data**: Use data that resembles real application usage
|
||||
3. **Document Edge Cases**: Create stories for loading states, errors, and edge cases
|
||||
4. **Group Related Stories**: Use consistent naming and grouping for related components
|
||||
|
||||
### Component Testing Strategy
|
||||
|
||||
```typescript
|
||||
// Example: Testing different component states
|
||||
export const Loading: Story = {
|
||||
args: {
|
||||
isLoading: true
|
||||
}
|
||||
}
|
||||
|
||||
export const Error: Story = {
|
||||
args: {
|
||||
error: 'Failed to load data'
|
||||
}
|
||||
}
|
||||
|
||||
export const WithLongText: Story = {
|
||||
args: {
|
||||
description: 'Very long description that might cause layout issues...'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Debugging Tips
|
||||
|
||||
- Use browser DevTools to inspect component behavior
|
||||
- Check the Storybook console for Vue warnings or errors
|
||||
- Use the Controls addon to dynamically change props
|
||||
- Leverage the Actions addon to test event handling
|
||||
|
||||
## Configuration Files
|
||||
|
||||
- **`main.ts`**: Core Storybook configuration and Vite integration
|
||||
- **`preview.ts`**: Global decorators, parameters, and Vue app setup
|
||||
- **`manager.ts`**: Storybook UI customization (if needed)
|
||||
|
||||
## Chromatic Visual Testing
|
||||
|
||||
This project uses [Chromatic](https://chromatic.com) for automated visual regression testing of Storybook components.
|
||||
|
||||
### How It Works
|
||||
|
||||
- **Automated Testing**: Every push to `main` and `sno-storybook` branches triggers Chromatic builds
|
||||
- **Pull Request Reviews**: PRs against `main` branch include visual diffs for component changes
|
||||
- **Baseline Management**: Changes on `main` branch are automatically accepted as new baselines
|
||||
- **Cross-browser Testing**: Tests across multiple browsers and viewports
|
||||
|
||||
### Viewing Results
|
||||
|
||||
1. Check the GitHub Actions tab for Chromatic workflow status
|
||||
2. Click on the Chromatic build link in PR comments to review visual changes
|
||||
3. Accept or reject visual changes directly in the Chromatic UI
|
||||
|
||||
### Best Practices for Visual Testing
|
||||
|
||||
- **Consistent Stories**: Ensure stories render consistently across different environments
|
||||
- **Meaningful Names**: Use descriptive story names that clearly indicate the component state
|
||||
- **Edge Cases**: Include stories for loading, error, and empty states
|
||||
- **Realistic Data**: Use data that closely resembles production usage
|
||||
|
||||
## Integration with ComfyUI
|
||||
|
||||
This Storybook setup includes:
|
||||
|
||||
- ComfyUI-specific theming and styling
|
||||
- Pre-configured Pinia stores for state management
|
||||
- Internationalization (i18n) support
|
||||
- PrimeVue component library integration
|
||||
- Proper alias resolution for `@/` imports
|
||||
|
||||
For component-specific examples, see the NodePreview stories in `src/components/node/`.
|
||||
96
.storybook/main.ts
Normal file
96
.storybook/main.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import type { StorybookConfig } from '@storybook/vue3-vite'
|
||||
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
|
||||
import IconsResolver from 'unplugin-icons/resolver'
|
||||
import Icons from 'unplugin-icons/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import type { InlineConfig } from 'vite'
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||
addons: ['@storybook/addon-docs'],
|
||||
framework: {
|
||||
name: '@storybook/vue3-vite',
|
||||
options: {}
|
||||
},
|
||||
async viteFinal(config) {
|
||||
// Use dynamic import to avoid CJS deprecation warning
|
||||
const { mergeConfig } = await import('vite')
|
||||
|
||||
// Filter out any plugins that might generate import maps
|
||||
if (config.plugins) {
|
||||
config.plugins = config.plugins.filter((plugin: any) => {
|
||||
if (plugin && plugin.name && plugin.name.includes('import-map')) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
||||
return mergeConfig(config, {
|
||||
// Replace plugins entirely to avoid inheritance issues
|
||||
plugins: [
|
||||
// Only include plugins we explicitly need for Storybook
|
||||
Icons({
|
||||
compiler: 'vue3',
|
||||
customCollections: {
|
||||
comfy: FileSystemIconLoader(
|
||||
process.cwd() + '/src/assets/icons/custom'
|
||||
)
|
||||
}
|
||||
}),
|
||||
Components({
|
||||
dts: false, // Disable dts generation in Storybook
|
||||
resolvers: [
|
||||
IconsResolver({
|
||||
customCollections: ['comfy']
|
||||
})
|
||||
],
|
||||
dirs: [
|
||||
process.cwd() + '/src/components',
|
||||
process.cwd() + '/src/layout',
|
||||
process.cwd() + '/src/views'
|
||||
],
|
||||
deep: true,
|
||||
extensions: ['vue']
|
||||
})
|
||||
// Note: Explicitly NOT including generateImportMapPlugin to avoid externalization
|
||||
],
|
||||
server: {
|
||||
allowedHosts: true
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': process.cwd() + '/src'
|
||||
}
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
external: () => {
|
||||
// Don't externalize any modules in Storybook build
|
||||
// This ensures PrimeVue and other dependencies are bundled
|
||||
return false
|
||||
},
|
||||
onwarn: (warning, warn) => {
|
||||
// Suppress specific warnings
|
||||
if (
|
||||
warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
|
||||
warning.message?.includes('resolveComponent')
|
||||
) {
|
||||
return
|
||||
}
|
||||
// Suppress Storybook font asset warnings
|
||||
if (
|
||||
warning.code === 'UNRESOLVED_IMPORT' &&
|
||||
warning.message?.includes('nunito-sans')
|
||||
) {
|
||||
return
|
||||
}
|
||||
warn(warning)
|
||||
}
|
||||
},
|
||||
chunkSizeWarningLimit: 1000
|
||||
}
|
||||
} satisfies InlineConfig)
|
||||
}
|
||||
}
|
||||
export default config
|
||||
34
.storybook/preview-head.html
Normal file
34
.storybook/preview-head.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<style>
|
||||
body {
|
||||
overflow-y: auto !important;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Light theme default */
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Dark theme styles */
|
||||
body.dark-theme,
|
||||
.dark-theme body {
|
||||
background-color: #0a0a0a;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* Ensure Storybook canvas follows theme */
|
||||
.sb-show-main {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.dark-theme .sb-show-main,
|
||||
.dark-theme .docs-story {
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
/* Fix for Storybook controls panel in dark mode */
|
||||
.dark-theme .docblock-argstable-body {
|
||||
color: #e5e5e5;
|
||||
}
|
||||
</style>
|
||||
104
.storybook/preview.ts
Normal file
104
.storybook/preview.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { definePreset } from '@primevue/themes'
|
||||
import Aura from '@primevue/themes/aura'
|
||||
import { setup } from '@storybook/vue3'
|
||||
import type { Preview } from '@storybook/vue3-vite'
|
||||
import { createPinia } from 'pinia'
|
||||
import 'primeicons/primeicons.css'
|
||||
import PrimeVue from 'primevue/config'
|
||||
import ConfirmationService from 'primevue/confirmationservice'
|
||||
import ToastService from 'primevue/toastservice'
|
||||
import Tooltip from 'primevue/tooltip'
|
||||
|
||||
import '../src/assets/css/style.css'
|
||||
import { i18n } from '../src/i18n'
|
||||
import '../src/lib/litegraph/public/css/litegraph.css'
|
||||
import { useWidgetStore } from '../src/stores/widgetStore'
|
||||
import { useColorPaletteStore } from '../src/stores/workspace/colorPaletteStore'
|
||||
|
||||
const ComfyUIPreset = definePreset(Aura, {
|
||||
semantic: {
|
||||
// @ts-expect-error fix me
|
||||
primary: Aura['primitive'].blue
|
||||
}
|
||||
})
|
||||
|
||||
// Setup Vue app for Storybook
|
||||
setup((app) => {
|
||||
app.directive('tooltip', Tooltip)
|
||||
const pinia = createPinia()
|
||||
app.use(pinia)
|
||||
|
||||
// Initialize stores
|
||||
useColorPaletteStore(pinia)
|
||||
useWidgetStore(pinia)
|
||||
|
||||
app.use(i18n)
|
||||
app.use(PrimeVue, {
|
||||
theme: {
|
||||
preset: ComfyUIPreset,
|
||||
options: {
|
||||
prefix: 'p',
|
||||
cssLayer: {
|
||||
name: 'primevue',
|
||||
order: 'primevue, tailwind-utilities'
|
||||
},
|
||||
darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
|
||||
}
|
||||
}
|
||||
})
|
||||
app.use(ConfirmationService)
|
||||
app.use(ToastService)
|
||||
})
|
||||
|
||||
// Dark theme decorator
|
||||
export const withTheme = (Story: any, context: any) => {
|
||||
const theme = context.globals.theme || 'light'
|
||||
|
||||
// Apply theme class to document root
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark-theme')
|
||||
document.body.classList.add('dark-theme')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark-theme')
|
||||
document.body.classList.remove('dark-theme')
|
||||
}
|
||||
|
||||
return Story()
|
||||
}
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i
|
||||
}
|
||||
},
|
||||
backgrounds: {
|
||||
default: 'light',
|
||||
values: [
|
||||
{ name: 'light', value: '#ffffff' },
|
||||
{ name: 'dark', value: '#0a0a0a' }
|
||||
]
|
||||
}
|
||||
},
|
||||
globalTypes: {
|
||||
theme: {
|
||||
name: 'Theme',
|
||||
description: 'Global theme for components',
|
||||
defaultValue: 'light',
|
||||
toolbar: {
|
||||
icon: 'circlehollow',
|
||||
items: [
|
||||
{ value: 'light', icon: 'sun', title: 'Light' },
|
||||
{ value: 'dark', icon: 'moon', title: 'Dark' }
|
||||
],
|
||||
showName: true,
|
||||
dynamicTitle: true
|
||||
}
|
||||
}
|
||||
},
|
||||
decorators: [withTheme]
|
||||
}
|
||||
|
||||
export default preview
|
||||
Reference in New Issue
Block a user