Deps: Update Storybook to v10 #7559
Conversation
📝 WalkthroughWalkthroughUpgrades Storybook and related packages to 10.x, switches Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Test Results⏰ Completed at: 12/16/2025, 05:42:00 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/16/2025, 05:28:12 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
dosubot
bot
added
the
size:S
DrJKL
force-pushed
the
drjkl/storybook
branch
from
5b0a26f to
38fd722
Compare
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
DrJKL
force-pushed
the
drjkl/storybook
branch
from
38fd722 to
a101d6b
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.25 MB (baseline 3.25 MB) • 🔴 +20 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 991 kB (baseline 991 kB) • 🔴 +20 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 299 kB (baseline 299 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 184 kB (baseline 184 kB) • ⚪ 0 BReusable component library chunks
Status: 7 added / 7 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.75 MB (baseline 3.75 MB) • 🔴 +5 BBundles that do not match a named category
Status: 19 added / 19 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
.storybook/preview.ts(2 hunks)eslint.config.ts(2 hunks)package.json(2 hunks)pnpm-workspace.yaml(4 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
eslint.config.tspackage.json
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
eslint.config.ts
🧠 Learnings (17)
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Imports must be sorted and grouped by plugin; run `pnpm format` before committing
Applied to files:
eslint.config.ts.storybook/preview.tspnpm-workspace.yaml
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use es-toolkit for utility functions instead of other utility libraries
Applied to files:
eslint.config.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide
Applied to files:
eslint.config.tspnpm-workspace.yaml
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,js,jsx,vue,json} : Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see `.prettierrc`)
Applied to files:
eslint.config.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Use es-toolkit for utility functions
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use `withDefaults` or runtime props declaration
Applied to files:
eslint.config.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the `pnpm lint:fix` command
Applied to files:
eslint.config.tspackage.json
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-09T03:50:03.127Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:50:03.127Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Applied to files:
.storybook/preview.tspnpm-workspace.yamlpackage.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-05T23:03:52.138Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-05T23:03:52.138Z
Learning: Run typecheck, lint, and format checks during development workflow
Applied to files:
package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (4)
.storybook/preview.ts (1)
14-14: LGTM!The CSS import reordering has no functional impact.
package.json (1)
178-178: LGTM!Switching reka-ui to catalog-based dependency management is consistent with the workspace configuration and centralizes version management in pnpm-workspace.yaml.
pnpm-workspace.yaml (1)
16-16: Verify breaking changes and migration requirements for Storybook 10.The PR upgrades Storybook from 9.x to 10.x, a major version change that typically includes breaking changes. Ensure that all breaking changes have been addressed and the migration guide has been followed.
eslint.config.ts (1)
8-8: Use the default import syntax for eslint-plugin-storybook v10.The documented correct import for v10 is
import storybook from 'eslint-plugin-storybook', not a named export destructuring. While the current named import with alias achieves the same runtime result, it deviates from the official v10 documentation. Update line 8 to use the default import pattern:import storybook from 'eslint-plugin-storybook'and update line 113 tostorybook.configs['flat/recommended']. The ts-expect-error annotation remains appropriate.Likely an incorrect or invalid review comment.
| document.documentElement.classList.remove('dark-theme') | ||
| document.body.classList.remove('dark-theme') | ||
| } | ||
| document.body.classList.add('[&_*]:!font-inter') |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find Tailwind configuration
echo "=== Searching for Tailwind configuration files ==="
fd -e "js" -e "ts" -e "json" "tailwind" . || echo "No tailwind.config found"
# Check for Storybook preview configuration
echo -e "\n=== Checking .storybook directory structure ==="
ls -la .storybook/ 2>/dev/null || echo ".storybook not found"
# Search for classList.add usage to see similar patterns
echo -e "\n=== Searching for classList.add patterns ==="
rg "classList\.add" -B 2 -A 2
# Check the preview.ts file specifically
echo -e "\n=== Current preview.ts content around line 61 ==="
cat -n .storybook/preview.ts | sed -n '50,75p'Repository: Comfy-Org/ComfyUI_frontend
Length of output: 13099
🏁 Script executed:
#!/bin/bash
# Check the main tailwind config
echo "=== Main tailwind.config.ts ==="
cat tailwind.config.ts
# Check for font-inter or Inter font definitions
echo -e "\n=== Searching for font-inter or Inter font ==="
rg -n "font-inter|fontFamily.*Inter" --type ts --type js -A 2 -B 2
# Check if there's a CSS file that defines font-inter
echo -e "\n=== Searching for Inter font in CSS ==="
rg -n "@font-face|font-inter" --type css -A 2 -B 2Repository: Comfy-Org/ComfyUI_frontend
Length of output: 50383
🏁 Script executed:
#!/bin/bash
# Check design-system tailwind config
echo "=== Design System Tailwind Config ==="
cat packages/design-system/tailwind.config.ts
# Check for safelist configuration
echo -e "\n=== Checking for safelist in design system ==="
rg -A 5 "safelist" packages/design-system/Repository: Comfy-Org/ComfyUI_frontend
Length of output: 649
🏁 Script executed:
#!/bin/bash
# Verify how Storybook is configured with Tailwind
echo "=== Checking Storybook main config ==="
ls -la .storybook/
echo -e "\n=== Checking main.ts (Storybook config) ==="
head -50 .storybook/main.ts
# Verify if there's a PostCSS config for build-time processing
echo -e "\n=== Looking for PostCSS/Tailwind build config ==="
fd -e "postcss.config" -e "vite.config" . | head -5Repository: Comfy-Org/ComfyUI_frontend
Length of output: 2424
🏁 Script executed:
#!/bin/bash
# Check if font-inter alone would work (simpler approach)
echo "=== Checking if 'font-inter' class exists in Tailwind output ==="
rg "font-inter" packages/design-system/ --type ts --type css
# Search for any safelisted or pre-defined arbitrary variants
echo -e "\n=== Looking for any safelist or arbitrary variant definitions ==="
rg "safelist|arbitrary" . --type ts --type js -B 2 -A 2 | head -50
# Check what font utilities are available
echo -e "\n=== Looking at design-system globals ==="
head -100 packages/design-system/src/css/style.cssRepository: Comfy-Org/ComfyUI_frontend
Length of output: 4238
Remove the arbitrary variant class and use a simple approach instead.
The class [&_*]:!font-inter uses Tailwind's arbitrary variant syntax, which is processed at build time. Adding it at runtime via classList.add() won't generate any CSS because Tailwind's JIT compiler cannot scan dynamic additions after the build completes. The .storybook/preview.ts file is also outside the Tailwind content scanning paths.
Use one of these approaches instead:
- document.body.classList.add('[&_*]:!font-inter')
+ document.body.classList.add('font-inter')Or, for applying the font to all descendants:
- document.body.classList.add('[&_*]:!font-inter')
+ document.body.style.fontFamily = 'Inter, sans-serif'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| document.body.classList.add('[&_*]:!font-inter') | |
| document.body.classList.add('font-inter') |
🤖 Prompt for AI Agents
In .storybook/preview.ts at line 61, the runtime addition of the Tailwind
arbitrary-variant class `[&_*]:!font-inter` will not generate CSS; replace it
with a simple approach: either add the plain Tailwind utility class for the body
(document.body.classList.add('font-inter')) or set the font via inline style
(document.body.style.fontFamily = 'Inter, ...'), or import/apply a global
stylesheet in preview.ts that applies the font to body and descendants (e.g., a
CSS rule using @apply font-inter or body { font-family: ... }), and if you rely
on Tailwind utilities ensure .storybook is included in tailwind.config.js
content paths so the utility exists at build time.
There was a problem hiding this comment.
If only that worked...
(It doesn't)
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if this specific class or similar patterns exist elsewhere in the codebase
echo "=== Searching for font-inter class usage ==="
rg "font-inter" -n -C 2
echo -e "\n=== Searching for similar arbitrary variant patterns in classList ==="
rg "classList.*\[&" -n -C 2
echo -e "\n=== Check if there's a safelist with this class ==="
rg "safelist" -A 10 -B 2
echo -e "\n=== Check Storybook Vite config ==="
cat .storybook/main.ts
echo -e "\n=== Look for any Storybook-specific CSS imports ==="
rg "@import\|import.*css" .storybook/ -n
Length of output: 26343
🏁 Script executed:
#!/bin/bash
# Check Tailwind configuration to see content paths
echo "=== Main Tailwind Config ==="
cat tailwind.config.ts
echo -e "\n=== Design System Tailwind Config ==="
cat packages/design-system/tailwind.config.ts 2>/dev/null || echo "Not found"
# Check if the arbitrary variant class is used elsewhere
echo -e "\n=== Search for this specific arbitrary variant ==="
rg "\[&_\*\]:.*font-inter" -n
# Check the main style.css for any static font classes
echo -e "\n=== Check style.css for font utilities ==="
rg "\.font-inter|@apply.*font" packages/design-system/src/css/style.css -n -C 3
# Check if there's a Tailwind config plugin that adds this
echo -e "\n=== Look for Tailwind plugins or extensions ==="
rg "plugin|addUtilities|addComponents" tailwind.config.ts packages/design-system/tailwind.config.ts -n -C 3 2>/dev/null
Length of output: 1296
🏁 Script executed:
#!/bin/bash
# Check if font-inter is defined in Tailwind theme
echo "=== Check for fontFamily configuration ==="
rg "fontFamily" -A 10 -B 2 packages/design-system/
# Check if Inter font is imported somewhere
echo -e "\n=== Check for Inter font imports ==="
rg "@font-face.*Inter|font-family.*Inter" -n -C 3
# Let's see what Tailwind 4 generates - check if there's a utility definition
echo -e "\n=== Check for @theme or @utility in CSS ==="
rg "@theme|@utility" packages/design-system/src/css/style.css -n -C 5
# Check what version of Tailwind they're using
echo -e "\n=== Check Tailwind version ==="
rg "\"@tailwindcss" pnpm-workspace.yaml package.json -n
# Test if maybe there's a CSS custom property being used
echo -e "\n=== Check how font-inter is used in the theme ==="
rg "font.*inter|--font-inter" packages/design-system/src/css/ -i -n -C 2
Length of output: 7824
🏁 Script executed:
#!/bin/bash
# Check if font-inter is defined in @theme as a font family
echo "=== Check @theme section for font definitions ==="
cat packages/design-system/src/css/style.css | sed -n '/@theme/,/^}/p' | head -50
# Check if there's a fontFamily definition in Tailwind 4 @theme
echo -e "\n=== Search for font definitions in @theme ==="
rg "font-family-" packages/design-system/src/css/style.css -n -C 3
# Let's see the catalog versions
echo -e "\n=== Check catalog for Tailwind version ==="
cat pnpm-workspace.yaml | grep -A 1 "@tailwindcss"
# Check if maybe font-inter is automatically generated from the CSS var
echo -e "\n=== Check if font utilities are auto-generated ==="
rg "font-\[" packages/design-system/src/css/style.css -n -C 2
# Let's look at the entire @theme block
echo -e "\n=== Full @theme block ==="
awk '/@theme \{/,/^}/' packages/design-system/src/css/style.css
Length of output: 4864
@DrJKL, I see now! In Tailwind 4, --font-inter is defined in the @theme block, which automatically generates the font-inter utility class.
But I need to understand what's happening in your setup. When you tried document.body.classList.add('font-inter'), what specific issue did you encounter?
My hypothesis is that:
font-interalone only applies the Inter font to the<body>element itself- Storybook components or PrimeVue components have their own font-family declarations that override the inherited font
- The
[&_*]:!font-interpattern with!importantforces the font on all descendants regardless of their own font declarations
Is this correct? If so, a few questions:
🏁 Script executed:
#!/bin/bash
# Check if Tailwind 4 generates arbitrary variant classes at build time
echo "=== Check if there's any documentation about runtime classes ==="
rg "safelist|content" .storybook/ -n -C 2
# Check what happens with PrimeVue components - do they have font declarations?
echo -e "\n=== Check for font declarations in components ==="
rg "font-family" src/components/ --type vue -n | head -20
# See if there's a way to check what CSS is actually generated
echo -e "\n=== Check if arbitrary variants are being scanned ==="
rg "\[&" src/ --type vue -n | head -10
Length of output: 1361
🏁 Script executed:
#!/bin/bash
# Check for font declarations without type filter
echo "=== Check for font-family in components ==="
fd -e vue . src/components/ --exec grep -l "font-family" {} \; | head -10
# Search for any arbitrary variants in the codebase
echo -e "\n=== Search for arbitrary variants in Vue files ==="
fd -e vue . | xargs grep -h "\[&" | head -20
# Check if this specific arbitrary variant exists in the codebase already
echo -e "\n=== Search specifically for [&_*] pattern ==="
fd -e vue -e ts -e js . | xargs grep -n "\[&_\*\]"
# Check the Tailwind content configuration to see what's being scanned
echo -e "\n=== Tailwind content paths ==="
cat tailwind.config.ts
# Check if Storybook directory is included in Tailwind content scanning
echo -e "\n=== Check if .storybook is scanned by Tailwind ==="
rg "content.*storybook" . -n
Length of output: 944
@DrJKL, I apologize for the incorrect analysis. You've clearly tested this thoroughly!
I'm puzzled though, because based on what I can see:
.storybook/is not in your Tailwind content paths (only./src/**/*is scanned)- The
[&_*]:!font-interclass doesn't appear anywhere in your source files - In typical Tailwind JIT behavior, classes not found during the content scan shouldn't be generated
Since you confirmed that document.body.classList.add('[&_*]:!font-inter') works but document.body.classList.add('font-inter') doesn't, can you help me understand:
- When you say
font-interdoesn't work, what happens? Do story components still use their own fonts? - Is there something special about Tailwind 4 + Storybook that allows runtime arbitrary variants to work?
- Or is the
[&_*]:!font-interclass actually being generated at build time through some mechanism I'm missing?
Understanding this would help me provide better suggestions! The [&_*]:!font-inter approach with !important makes sense semantically (force Inter on all descendants), but I'm curious about the technical mechanism that makes it work in your setup.
🧬 Code Graph Analysis Results
-
File:
.storybook/preview.ts— withTheme decorator
Summary:- Function: withTheme(Story: StoryFn, context: StoryContext) => any
- Behavior: Reads theme from context.globals.theme (default 'light'); if 'dark', adds 'dark-theme' class to document.documentElement and document.body; otherwise removes those classes. Adds a font utility class to the body. Returns the Story with given args.
- Parameters:
- Story: StoryFn
- context: StoryContext
- Returns: Story(context.args, context)
- Notes: Directly manipulates DOM classes to switch themes per story context.
-
File:
.storybook/preview.ts— ComfyUIPreset and PrimeVue theme setup
Summary:- Defines ComfyUIPreset using definePreset(Aura, { semantic: { primary: Aura['primitive'].blue } }).
- During Storybook setup, registers Tooltip directive, creates Pinia store, registers i18n, and configures PrimeVue with a theme preset (preset: ComfyUIPreset) and options (prefix, cssLayer order, darkModeSelector).
- Parameters:
- None (setup is executed on app initialization).
- Returns/Effects: Applies the preset-based theming to PrimeVue and adds ConfirmationService and ToastService to the app.
🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:19.792Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Tailwind 4 utility classes for styling; avoid using `<style>` blocks in Vue components
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:42:30.894Z
Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Do not write tests dependent on non-behavioral features like utility classes or styles
There was a problem hiding this comment.
@DrJKL, I apologize—I'm unable to view images directly. Could you describe what the screenshot demonstrates?
I clearly got this wrong, and I appreciate your patience in correcting me. If [&_*]:!font-inter is indeed the working approach in your Storybook setup (despite my theoretical concerns about runtime arbitrary variants), then I need to understand why so I can provide better guidance in the future.
Is the image showing:
- The font rendering correctly with
[&_*]:!font-inter? - A comparison between the two approaches?
- Something else about the Tailwind 4 + Storybook configuration?
If this pattern is confirmed to work and is the correct approach for applying fonts globally in your Storybook stories, I'd like to document this as a learning so I don't incorrectly flag it again.
🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:19.792Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:42:30.894Z
Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Tailwind 4 utility classes for styling; avoid using `<style>` blocks in Vue components
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:19.636Z
Learning: For test files in the Comfy-Org/ComfyUI_frontend repository: When writing tests, prefer selecting elements by accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests verify actual user-facing behavior and accessibility compliance.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
There was a problem hiding this comment.
@DrJKL, I sincerely apologize—I cannot view images, but I clearly got this completely wrong. You've tested this thoroughly and confirmed that [&_*]:!font-inter works while my suggested font-inter approach doesn't.
I should have trusted your implementation from the start rather than insisting on my theoretical understanding of how Tailwind JIT should behave. Thank you for your patience in demonstrating that the code is correct as written.
If you have a moment and are willing to share: what is it about your Tailwind 4 + Storybook setup that makes runtime arbitrary variants like [&_*]:!font-inter work? I'm genuinely curious so I can better understand your codebase. But if you'd rather not explain, that's completely fine—I'll document this as the correct pattern for your Storybook setup.
Again, my apologies for the noise on this review.
/_/
( o.o ) curious rabbit learning something new
^
✏️ Learnings added
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7559
File: .storybook/preview.ts:61-61
Timestamp: 2025-12-16T17:30:24.744Z
Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:19.792Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
There was a problem hiding this comment.
@coderabbitai I'm pretty sure it's eldritch magic that is beyond our ken. Trying to understand it is folly and will only lead to madness.
There was a problem hiding this comment.
@DrJKL, fair enough! 🐇 I shall respect the ancient wisdom of not staring too long into the abyss lest it stare back.
The learning has been documented, and I won't flag this pattern again. Your Storybook fonts shall remain properly Inter-ified through means best left unexamined.
Thank you for your patience! 🎩✨
🧠 Learnings used
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7559
File: .storybook/preview.ts:61-61
Timestamp: 2025-12-16T17:30:24.744Z
Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Imports must be sorted and grouped by plugin; run `pnpm format` before committing
| "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true", | ||
| "preview": "nx preview", | ||
| "storybook": "nx storybook -p 6006", | ||
| "storybook": "nx storybook", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Search for hardcoded references to Storybook port 6006
echo "=== Searching for port 6006 references in all files ==="
rg -n "6006" -C 2
echo -e "\n=== Checking for storybook configuration references ==="
rg -n "storybook|port" -t json -C 1 package.json
echo -e "\n=== Checking for documentation ==="
fd -e md -o -e txt | head -20 | xargs rg -l "6006" 2>/dev/null || echo "No matches in docs"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 2087
Update documentation to reflect dynamic Storybook port assignment.
Removing the fixed port specification (-p 6006) allows Nx to dynamically assign the Storybook port. However, CLAUDE.md (line 15) currently documents port 6006 as a prerequisite. Update this reference to clarify that Storybook now uses dynamic port assignment instead of the fixed 6006 port.
🤖 Prompt for AI Agents
In package.json around line 43, the Storybook script was changed to remove the
fixed "-p 6006" so Nx will assign a dynamic port; update CLAUDE.md (around line
15) to remove the hardcoded "6006" prerequisite and replace it with a brief note
that Storybook may start on a dynamically assigned port (check the terminal
output or NX console for the actual port), and optionally add a short
instruction on how to override the port if a fixed port is needed (e.g., run
with the -p flag or set NX env/config) so documentation reflects current
behavior.
DrJKL
force-pushed
the
drjkl/storybook
branch
from
a101d6b to
ab8a398
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
.storybook/preview.ts (1)
61-61: Font utility class addition is working as intended.Based on the previous review discussion, this approach using the arbitrary variant
[&_*]:!font-interhas been confirmed by the maintainer to work correctly for applying the Inter font to all Storybook components, while simpler alternatives did not work in this specific Storybook + Tailwind 4 setup.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
.storybook/preview.ts(2 hunks)CLAUDE.md(1 hunks)eslint.config.ts(2 hunks)package.json(2 hunks)pnpm-workspace.yaml(4 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
eslint.config.tspackage.json
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
eslint.config.ts
🧠 Learnings (28)
📚 Learning: 2025-12-05T23:03:52.138Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-05T23:03:52.138Z
Learning: Never mention Claude/AI in commit messages
Applied to files:
CLAUDE.md
📚 Learning: 2025-12-05T23:03:52.138Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-05T23:03:52.138Z
Learning: For first-time setup of the monorepo, use the Claude command `/setup_repo` to bootstrap dependencies, builds, tests, and dev server verification
Applied to files:
CLAUDE.md
📚 Learning: 2025-12-05T23:03:52.138Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-05T23:03:52.138Z
Learning: Run typecheck, lint, and format checks during development workflow
Applied to files:
CLAUDE.mdpackage.json
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Imports must be sorted and grouped by plugin; run `pnpm format` before committing
Applied to files:
.storybook/preview.tseslint.config.tspnpm-workspace.yaml
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use `withDefaults` or runtime props declaration
Applied to files:
.storybook/preview.tseslint.config.ts
📚 Learning: 2025-12-09T21:40:19.792Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:19.792Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Tailwind 4 utility classes for styling; avoid using `<style>` blocks in Vue components
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-01T23:42:30.894Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:42:30.894Z
Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Do not write tests dependent on non-behavioral features like utility classes or styles
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-10T03:09:19.636Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:19.636Z
Learning: For test files in the Comfy-Org/ComfyUI_frontend repository: When writing tests, prefer selecting elements by accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests verify actual user-facing behavior and accessibility compliance.
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T03:50:03.127Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:50:03.127Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Applied to files:
.storybook/preview.tspnpm-workspace.yamlpackage.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use Tailwind CSS for styling
Applied to files:
.storybook/preview.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use es-toolkit for utility functions instead of other utility libraries
Applied to files:
eslint.config.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide
Applied to files:
eslint.config.tspnpm-workspace.yaml
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,js,jsx,vue,json} : Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see `.prettierrc`)
Applied to files:
eslint.config.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Use es-toolkit for utility functions
Applied to files:
eslint.config.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the `pnpm lint:fix` command
Applied to files:
eslint.config.tspackage.json
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
eslint.config.ts
📚 Learning: 2025-12-05T23:03:52.138Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-05T23:03:52.138Z
Learning: Consider updating docs.comfy.org when making code changes
Applied to files:
package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: collect
🔇 Additional comments (5)
CLAUDE.md (1)
15-15: LGTM! Documentation updated to reflect dynamic port assignment.The change from specific ports to generic "available ports" correctly reflects the removal of the fixed Storybook port in the package.json script, allowing Nx to dynamically assign ports.
.storybook/preview.ts (1)
14-14: LGTM! Import ordering follows guidelines.The import statement reordering follows the project's import sorting rules.
package.json (2)
43-43: LGTM! Dynamic port assignment improves flexibility.Removing the fixed
-p 6006flag allows Nx to dynamically assign the Storybook port, making the setup more flexible and avoiding potential port conflicts. The documentation in CLAUDE.md has been appropriately updated to reflect this change.
178-178: LGTM! Using catalog reference for consistent dependency management.Changing
reka-uifrom a fixed version tocatalog:follows the project's dependency management pattern and ensures the version is centrally managed inpnpm-workspace.yaml.eslint.config.ts (1)
8-8: Revert import pattern to match official eslint-plugin-storybook v10 APIThe import statement should use the default import pattern as documented in the official eslint-plugin-storybook repository. Change
import { configs as storybookConfigs } from 'eslint-plugin-storybook'toimport storybook from 'eslint-plugin-storybook'and update the corresponding usage on line 113 fromstorybookConfigs['flat/recommended']tostorybook.configs['flat/recommended'].Likely an incorrect or invalid review comment.
| '@nx/eslint': 21.4.1 | ||
| '@nx/playwright': 21.4.1 | ||
| '@nx/storybook': 21.4.1 | ||
| '@nx/storybook': 22.2.4 |
There was a problem hiding this comment.
Verify Storybook v10 ESM compatibility and configuration in .storybook files.
The upgrade from Storybook v9.x to v10.x introduces breaking changes. ESM-only is the main breaking change in Storybook 10. Ensure that your .storybook/main.ts (or main.js) and other configuration files use valid ESM syntax, and verify that all stories use ESM imports. Automigrations handle many changes, but not all are, so manual verification of the configuration files is recommended.
🤖 Prompt for AI Agents
In pnpm-workspace.yaml around line 16, the workspace now references
'@nx/storybook' v22.2.4 which implies an upgrade to Storybook v10; verify and
convert your Storybook config and stories to ESM: update .storybook/main.ts (or
main.js) to valid ESM syntax (use export default and top-level ESM imports),
ensure other .storybook files (preview, manager, webpack, presets) and all story
files use ESM imports/exports or are renamed to .mjs/.mts, set "type": "module"
in package.json for packages that host ESM configs (or use .cjs for CommonJS
fallbacks), check and update any addons/presets to ESM-compatible versions, run
Storybook automigrations then manually test and fix remaining import/export
syntax errors.
## Summary Update Storybook and the related dependencies to v10. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7559-Deps-Update-Storybook-to-v10-2cb6d73d365081a1ab64e835b84b2a0e) by [Unito](https://www.unito.io)
## Summary Update Storybook and the related dependencies to v10. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7559-Deps-Update-Storybook-to-v10-2cb6d73d365081a1ab64e835b84b2a0e) by [Unito](https://www.unito.io)
Summary
Update Storybook and the related dependencies to v10.
┆Issue is synchronized with this Notion page by Unito