Files
ComfyUI_frontend/eslint.config.js
snomiao 451ef24ea6 [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>
2025-08-18 20:05:28 -07:00

102 lines
2.8 KiB
JavaScript

// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
import pluginJs from '@eslint/js'
import pluginI18n from '@intlify/eslint-plugin-vue-i18n'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import storybook from 'eslint-plugin-storybook'
import unusedImports from 'eslint-plugin-unused-imports'
import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import tseslint from 'typescript-eslint'
export default [
{
files: ['src/**/*.{js,mjs,cjs,ts,vue}']
},
{
ignores: [
'src/scripts/*',
'src/extensions/core/*',
'src/types/vue-shim.d.ts',
// Generated files that don't need linting
'src/types/comfyRegistryTypes.ts',
'src/types/generatedManagerTypes.ts'
]
},
{
languageOptions: {
globals: {
...globals.browser,
__COMFYUI_FRONTEND_VERSION__: 'readonly'
},
parser: tseslint.parser,
parserOptions: {
project: ['./tsconfig.json', './tsconfig.eslint.json'],
ecmaVersion: 2020,
sourceType: 'module',
extraFileExtensions: ['.vue']
}
}
},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs['flat/recommended'],
eslintPluginPrettierRecommended,
{
files: ['src/**/*.vue'],
languageOptions: {
parserOptions: {
parser: tseslint.parser
}
}
},
{
plugins: {
'unused-imports': unusedImports,
'@intlify/vue-i18n': pluginI18n
},
rules: {
'@typescript-eslint/no-floating-promises': 'error',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'@typescript-eslint/prefer-as-const': 'off',
'unused-imports/no-unused-imports': 'error',
'vue/no-v-html': 'off',
// i18n rules
'@intlify/vue-i18n/no-raw-text': [
'error',
{
// Ignore strings that are:
// 1. Less than 2 characters
// 2. Only symbols/numbers/whitespace (no letters)
// 3. Match specific patterns
ignorePattern:
'^[^a-zA-Z]*$|^.{0,1}$|^[\\w._%+-]+@[\\w.-]+\\.[A-Za-z]{2,}$',
ignoreNodes: ['md-icon', 'v-icon', 'pre', 'code', 'script', 'style'],
// Brand names and technical terms that shouldn't be translated
ignoreText: [
'ComfyUI',
'GitHub',
'OpenAI',
'API',
'URL',
'JSON',
'YAML',
'GPU',
'CPU',
'RAM',
'GB',
'MB',
'KB',
'ms',
'fps',
'px',
'App Data:',
'App Path:'
]
}
]
}
},
...storybook.configs['flat/recommended']
]