Skip to content

Deps: Update Storybook to v10 #7559

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DrJKL merged 3 commits into from
Dec 16, 2025
Merged

Deps: Update Storybook to v10 #7559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d9f8f75
deps: Update Storybook to v10
DrJKL Dec 16, 2025
4c7e754
fix: Storybook tailwind CSS loading
DrJKL Dec 16, 2025
ab8a398
Update Claude reference to arbitrary ports.
DrJKL Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import ConfirmationService from 'primevue/confirmationservice'
import ToastService from 'primevue/toastservice'
import Tooltip from 'primevue/tooltip'

import '@/assets/css/style.css'
import { i18n } from '@/i18n'
import '@/lib/litegraph/public/css/litegraph.css'
import '@/assets/css/style.css'

const ComfyUIPreset = definePreset(Aura, {
semantic: {
Expand Down Expand Up @@ -58,6 +58,7 @@ export const withTheme = (Story: StoryFn, context: StoryContext) => {
document.documentElement.classList.remove('dark-theme')
document.body.classList.remove('dark-theme')
}
document.body.classList.add('[&_*]:!font-inter')
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 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 2

Repository: 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 -5

Repository: 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.css

Repository: 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.

Suggested change
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.

Copy link
Contributor Author

@DrJKL DrJKL Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If only that worked...
(It doesn't)

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 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:

  1. font-inter alone only applies the Inter font to the <body> element itself
  2. Storybook components or PrimeVue components have their own font-family declarations that override the inherited font
  3. The [&_*]:!font-inter pattern with !important forces 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-inter class 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:

  1. When you say font-inter doesn't work, what happens? Do story components still use their own fonts?
  2. Is there something special about Tailwind 4 + Storybook that allows runtime arbitrary variants to work?
  3. Or is the [&_*]:!font-inter class 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

Copy link
Contributor Author

@DrJKL DrJKL Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Contributor Author

@DrJKL DrJKL Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Contributor Author

@DrJKL DrJKL Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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


return Story(context.args, context)
}
Expand Down
2 changes: 1 addition & 1 deletion CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ For first-time setup, use the Claude command:

This bootstraps the monorepo with dependencies, builds, tests, and dev server verification.

**Prerequisites:** Node.js >= 24, Git repository, available ports (5173, 6006)
**Prerequisites:** Node.js >= 24, Git repository, available ports for dev server, storybook, etc.

## Development Workflow

Expand Down
5 changes: 3 additions & 2 deletions eslint.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescrip
import { importX } from 'eslint-plugin-import-x'
import oxlint from 'eslint-plugin-oxlint'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import storybook from 'eslint-plugin-storybook'
import { configs as storybookConfigs } from 'eslint-plugin-storybook'
import unusedImports from 'eslint-plugin-unused-imports'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
Expand Down Expand Up @@ -109,7 +109,8 @@ export default defineConfig([
// Difference in typecheck on CI vs Local
pluginVue.configs['flat/recommended'],
eslintPluginPrettierRecommended,
storybook.configs['flat/recommended'],
// @ts-expect-error Type incompatibility between storybook plugin and ESLint config types
storybookConfigs['flat/recommended'],
// @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
importX.flatConfigs.recommended,
// @ts-expect-error Type incompatibility between import-x plugin and ESLint config types
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"preinstall": "pnpm dlx only-allow pnpm",
"prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
"preview": "nx preview",
"storybook": "nx storybook -p 6006",
"storybook": "nx storybook",
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 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.

"stylelint:fix": "stylelint --cache --fix '{apps,packages,src}/**/*.{css,vue}'",
"stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
"test:browser": "pnpm exec nx e2e",
Expand Down Expand Up @@ -175,7 +175,7 @@
"pinia": "catalog:",
"primeicons": "catalog:",
"primevue": "catalog:",
"reka-ui": "^2.5.0",
"reka-ui": "catalog:",
"semver": "^7.7.2",
"three": "^0.170.0",
"tiptap-markdown": "^0.8.10",
Expand Down
Loading