feat: add storybook #1270
feat: add storybook #1270
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
❌ 1 Tests Failed:
View the top 1 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
JReinhold
left a comment
JReinhold
left a comment
There was a problem hiding this comment.
my suggestions here could potentially be a longer-term solution to the unsupported parts of nuxt.
sacrosanctic
force-pushed
the
storybook
branch
from
f441ce8 to
e726dde
Compare
sacrosanctic
force-pushed
the
storybook
branch
from
e726dde to
eff116d
Compare
sacrosanctic
force-pushed
the
storybook
branch
from
1344552 to
4478f7e
Compare
JReinhold
left a comment
JReinhold
left a comment
There was a problem hiding this comment.
great job! I didn't look too much into the stories themselves, but it looked good.
No worries, the stories will be iterative. I will be removing them so they can be discussed in their own PR. |
sacrosanctic
force-pushed
the
storybook
branch
from
4478f7e to
4778120
Compare
Improve Storybook setup
sacrosanctic
force-pushed
the
storybook
branch
from
4778120 to
812c3f5
Compare
📝 WalkthroughWalkthroughAdds Storybook to the Nuxt/Vue project: new Storybook config ( 🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
.storybook/README.md (1)
47-51: Add language specifier to fenced code block.The static analysis tool flagged this code block for missing a language identifier. Adding
textorplaintextwill satisfy the linter and improve rendering consistency.📝 Proposed fix
-``` +```text components/ ├── Button.vue └── Button.stories.ts</details> </blockquote></details> <details> <summary>nuxt.config.ts (1)</summary><blockquote> `19-19`: **Consider using `.filter(Boolean)` for cleaner module array.** While Nuxt handles `undefined` values in the modules array, using `.filter(Boolean)` makes the intent more explicit and avoids potential confusion. <details> <summary>♻️ Alternative approach</summary> ```diff modules: [ '@unocss/nuxt', '@nuxtjs/html-validator', '@nuxt/scripts', '@nuxt/a11y', '@nuxt/fonts', 'nuxt-og-image', '@nuxt/test-utils', '@vite-pwa/nuxt', '@vueuse/nuxt', '@nuxtjs/i18n', - isStorybook ? undefined : '@nuxtjs/color-mode', - ], + !isStorybook && '@nuxtjs/color-mode', + ].filter(Boolean),app/components/Button/Base.vue (1)
25-26: Update icon class example to use colon syntax.The JSDoc example uses dash-separated form (
i-carbon-add), but the project convention is to use colon syntax (i-carbon:add) for UnoCSS icons. This aids UnoCSS in resolving the correct collection directly.📝 Suggested documentation fix
- /** Icon class (e.g., i-carbon-add) */ + /** Icon class (e.g., i-carbon:add) */ classicon?: stringBased on learnings: "In Vue components that use UnoCSS with the preset-icons collection, prefer colon-syntax for icons (e.g., i-carbon:checkmark) over the dash-separated form (i-carbon-checkmark)."
app/components/Button/Base.stories.ts (1)
12-112: Consider extracting a reusable render helper to reduce duplication.Each story repeats the same render function pattern. While this is a common Storybook approach, you could reduce boilerplate by extracting a helper.
♻️ Optional refactor to reduce duplication
+const createRender = (label: string) => (args: Story['args']) => ({ + components: { Component }, + setup() { + return { args } + }, + template: `<Component v-bind="args">${label}</Component>`, +}) + export const Primary: Story = { args: { variant: 'primary', size: 'medium', }, - render: args => ({ - components: { Component }, - setup() { - return { args } - }, - template: '<Component v-bind="args">Primary Button</Component>', - }), + render: createRender('Primary Button'), }Apply the same pattern to other stories.
| import type { StorybookConfig } from '@nuxtjs/storybook' | ||
|
|
||
| const config = { | ||
| stories: ['../app/**/*.stories.@(js|ts|mdx)'], | ||
| addons: ['@storybook/addon-a11y', '@storybook/addon-docs'], | ||
| framework: '@storybook-vue/nuxt', | ||
| features: { | ||
| backgrounds: false, | ||
| }, | ||
| } satisfies StorybookConfig | ||
| export default config |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check package.json for the dependency
echo "=== Checking package.json for `@storybook-vue/nuxt` ==="
if [ -f "package.json" ]; then
jq '.devDependencies["@storybook-vue/nuxt"] // .dependencies["@storybook-vue/nuxt"] // "NOT FOUND"' package.json
else
echo "package.json not found"
fi
echo ""
echo "=== Checking `@nuxtjs/storybook` dependency ==="
if [ -f "package.json" ]; then
jq '.devDependencies["@nuxtjs/storybook"] // .dependencies["@nuxtjs/storybook"] // "NOT FOUND"' package.json
fi
echo ""
echo "=== Searching for knip configuration ==="
find . -type f \( -name "knip.json" -o -name "knip.ts" -o -name "knip.js" \) 2>/dev/null | head -10
if [ $? -eq 0 ]; then
fd -t f -e json -e ts -e js -path "*knip*" --exec cat {} \; 2>/dev/null | head -100
fi
echo ""
echo "=== Checking package.json for knip config ==="
if [ -f "package.json" ]; then
jq '.knip // "NOT FOUND"' package.json
fiRepository: npmx-dev/npmx.dev
Length of output: 293
🏁 Script executed:
#!/bin/bash
echo "=== Contents of knip.ts ==="
if [ -f "knip.ts" ]; then
cat -n knip.ts
fi
echo ""
echo "=== Checking if `@storybook-vue/nuxt` appears in knip ignoreDependencies ==="
if [ -f "knip.ts" ]; then
grep -i "storybook-vue\|ignoreDependencies\|ignoreWorkspaces" knip.ts
fi
echo ""
echo "=== Checking node_modules for `@storybook-vue/nuxt` ==="
if [ -d "node_modules/@storybook-vue" ]; then
ls -la node_modules/@storybook-vue/
else
echo "@storybook-vue directory not found in node_modules (expected in sandbox)"
fi
echo ""
echo "=== Checking `@nuxtjs/storybook` package.json for peer dependencies ==="
if [ -f "node_modules/@nuxtjs/storybook/package.json" ]; then
jq '.peerDependencies["@storybook-vue/nuxt"] // .dependencies["@storybook-vue/nuxt"] // "NOT FOUND in peer or direct dependencies"' node_modules/@nuxtjs/storybook/package.json
else
echo "@nuxtjs/storybook package.json not found in node_modules"
fiRepository: npmx-dev/npmx.dev
Length of output: 2964
🏁 Script executed:
#!/bin/bash
echo "=== Checking for lock files ==="
ls -la package-lock.json pnpm-lock.yaml yarn.lock 2>/dev/null || echo "No standard lock files found in root"
echo ""
echo "=== Checking .storybook directory structure ==="
find .storybook -type f -name "*.ts" -o -name "*.js" -o -name "*.json" 2>/dev/null | head -20
echo ""
echo "=== Checking if there's a .storybook/package.json or similar ==="
if [ -f ".storybook/package.json" ]; then
cat .storybook/package.json
fi
echo ""
echo "=== Checking if `@storybook-vue/nuxt` appears anywhere in config files ==="
rg "@storybook-vue/nuxt" --type ts --type js --type json -lRepository: npmx-dev/npmx.dev
Length of output: 425
🏁 Script executed:
#!/bin/bash
echo "=== Searching pnpm-lock.yaml for `@storybook-vue/nuxt` ==="
grep -c "@storybook-vue/nuxt" pnpm-lock.yaml 2>/dev/null && echo "Found in lock file" || echo "Not found in lock file"
echo ""
echo "=== Checking if `@storybook-vue` is mentioned at all in lock file ==="
grep "@storybook-vue" pnpm-lock.yaml | head -5
echo ""
echo "=== Checking `@nuxtjs/storybook` in lock file for dependencies on `@storybook-vue/nuxt` ==="
rg "/@nuxtjs/storybook" -A 10 pnpm-lock.yaml | head -30Repository: npmx-dev/npmx.dev
Length of output: 2355
Add @storybook-vue/nuxt to knip's ignoreDependencies or explicitly to devDependencies.
The dependency @storybook-vue/nuxt is installed transitively (present in pnpm-lock.yaml), but knip reports it as unlisted because it's not declared in package.json and is not ignored in the knip configuration. Add it to the ignoreDependencies array in knip.ts at line 37, or add it explicitly to devDependencies in package.json.
🧰 Tools
🪛 GitHub Actions: ci
[error] 1-1: Unlisted dependencies: @storybook-vue/nuxt. knip step failed with exit code 1 (ELIFECYCLE).
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| ``` | ||
| components/ | ||
| ├── Button.vue | ||
| └── Button.stories.ts | ||
| ``` |
There was a problem hiding this comment.
Add a language tag to the fenced block.
The tree example fence is missing a language identifier, which trips MD040.
🔧 Proposed fix
-```
+```text
components/
├── Button.vue
└── Button.stories.ts🧰 Tools
🪛 markdownlint-cli2 (0.20.0)
[warning] 47-47: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
2 participants
In this PR
todo
considerations
notes
notes for me