Configure Storybook and Document Design System Primitives (#361)#433
Configure Storybook and Document Design System Primitives (#361)#433JoyLight00 wants to merge 3 commits into
Conversation
|
Warning Review limit reached
Next review available in: 2 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (12)
📝 WalkthroughWalkthroughThis PR introduces Storybook configuration and tooling (config files, package.json scripts/dependencies, conditional PostCSS setup, .gitignore updates) plus story files for Avatar, Badge, Button, Card, and StatusBadge components. It also includes unrelated minor cleanups to SessionHistory, NotificationHub, ExpertCard, ExpertDetails, RefundForm, and useHeartbeat. ChangesStorybook Setup and Stories
Component and Hook Cleanups
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
![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
🧹 Nitpick comments (5)
src/components/session/RefundForm.tsx (1)
135-141: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
sessionIdstill required inRefundFormPropsbut no longer used.The interface (line 48) still declares
sessionId: string;as a required prop, yet the component no longer destructures or uses it. Callers are still forced to pass it, but the value is now silently dropped. Given the TODO at line 202 referencessettle_session(sessionId, ...)for the future on-chain wiring, consider either removingsessionIdfromRefundFormPropsnow (if genuinely unused) or keeping it destructured (even if unused) to avoid re-plumbing it later when the real contract call is added.♻️ Suggested fix: remove unused prop from interface
interface RefundFormProps { ... - sessionId: string; ... }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/session/RefundForm.tsx` around lines 135 - 141, `RefundFormProps` still requires `sessionId`, but `RefundForm` no longer destructures or uses it. Update the `RefundFormProps` interface and the `RefundForm` component together: either remove `sessionId` from the required props now if it is truly unused, or keep it destructured in `RefundForm` if you want to preserve the future `settle_session(sessionId, ...)` wiring referenced in the TODO. Make sure the component signature and all callers stay consistent with the chosen approach..storybook/main.ts (1)
8-13: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider removing
addon-onboardingfrom checked-in config.
@storybook/addon-onboardingis meant for the first-run guided tour and is typically removed once onboarding is complete, since it registers an "add a story" walkthrough that doesn't belong in a shared config.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.storybook/main.ts around lines 8 - 13, Remove `@storybook/addon-onboarding` from the shared addons list in the Storybook config, since it is only meant for the first-run guided tour. Update the addons array in the main Storybook configuration to keep only the permanent addons such as addon-links, addon-essentials, and addon-interactions.postcss.config.mjs (1)
3-5: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winFragile Storybook-environment detection via
argvsubstring matching.
arg.includes("sb")is overly broad and can match unrelated CLI arguments/paths that happen to contain "sb", causing the wrong PostCSS plugin config to be selected outside genuine Storybook runs. Consider settingSTORYBOOK=trueexplicitly in thestorybook/build-storybooknpm scripts (Line 10-11 of package.json) and relying on that single, unambiguous signal instead of the argv heuristic.♻️ Proposed simplification
-const isStorybook = process.env.STORYBOOK === "true" || - (process.env.npm_lifecycle_event && process.env.npm_lifecycle_event.includes("storybook")) || - (process.argv && process.argv.some(arg => arg.includes("storybook") || arg.includes("sb"))); +const isStorybook = process.env.STORYBOOK === "true" || + (process.env.npm_lifecycle_event?.includes("storybook") ?? false);"scripts": { - "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "storybook": "STORYBOOK=true storybook dev -p 6006", + "build-storybook": "STORYBOOK=true storybook build"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@postcss.config.mjs` around lines 3 - 5, The Storybook detection in `postcss.config.mjs` is too broad because `isStorybook` relies on `process.argv` substring checks, especially `arg.includes("sb")`, which can misidentify non-Storybook runs. Simplify `isStorybook` to use a single explicit signal like `process.env.STORYBOOK === "true"` and set that env var in the `storybook` and `build-storybook` scripts in package.json; remove the `process.argv` heuristic from the `isStorybook` expression..gitignore (1)
38-75: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDuplicate
.gitignoreentries.This new block re-adds
node_modules,.pnp,/coverage,/.next/,/build,npm-debug.log*,.env*, etc. — all already present earlier in the file (Lines 4-5, 14, 17, 21, 30, 36). Functionally harmless but adds redundant/confusing content under an unrelated "# vercel" header.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.gitignore around lines 38 - 75, Remove the duplicated ignore patterns added under the "# vercel" section in .gitignore, since entries like node_modules, .pnp, /coverage, /.next/, /build, npm-debug.log*, and .env* are already defined earlier. Keep only the unique Vercel-related ignore rules, and use the existing .gitignore sections and symbols (for example the "# dependencies", "# testing", "# next.js", "# production", and "# debug" blocks) to avoid redundant, confusing duplication.package.json (1)
45-45: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUnused
@storybook/nextjsdependency.
.storybook/main.tsconfiguresframework: { name: "@storybook/react-vite" }— the PR explicitly moved to the Vite builder to sidestep Next.js 15 Webpack/Turbopack issues.@storybook/nextjs(Line 45) doesn't appear to be referenced anywhere and adds unnecessary weight/confusion given the stated intent.Also applies to: 47-47
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@package.json` at line 45, The project is still listing unused Storybook Next.js packages even though .storybook/main.ts uses the `@storybook/react-vite` framework. Remove the unused `@storybook/nextjs` dependency from package.json and also clean up the related extra entry mentioned in the review so the dependency list matches the Vite-based Storybook setup. Verify there are no remaining references to `@storybook/nextjs` in the Storybook config or scripts after the cleanup.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.storybook/main.ts:
- Around line 1-22: Storybook is missing the repo’s `@/*` path alias, so imports
in stories can fail to resolve under Vite. Update the `config` in
`.storybook/main.ts` by adding a `viteFinal` hook (or equivalent `resolve.alias`
setup) that maps `@` to the project’s source directory, so `@/...` imports work
in Storybook 8 with Vite 6.
In `@src/components/ui/Card.stories.tsx`:
- Line 55: The gradient utility in the Card story uses the old Tailwind class,
so update the JSX in Card.stories.tsx to replace bg-gradient-to-br with the
Tailwind v4 equivalent bg-linear-to-br. Keep the rest of the className on the
story wrapper div unchanged so the visual styling remains the same.
---
Nitpick comments:
In @.gitignore:
- Around line 38-75: Remove the duplicated ignore patterns added under the "#
vercel" section in .gitignore, since entries like node_modules, .pnp, /coverage,
/.next/, /build, npm-debug.log*, and .env* are already defined earlier. Keep
only the unique Vercel-related ignore rules, and use the existing .gitignore
sections and symbols (for example the "# dependencies", "# testing", "#
next.js", "# production", and "# debug" blocks) to avoid redundant, confusing
duplication.
In @.storybook/main.ts:
- Around line 8-13: Remove `@storybook/addon-onboarding` from the shared addons
list in the Storybook config, since it is only meant for the first-run guided
tour. Update the addons array in the main Storybook configuration to keep only
the permanent addons such as addon-links, addon-essentials, and
addon-interactions.
In `@package.json`:
- Line 45: The project is still listing unused Storybook Next.js packages even
though .storybook/main.ts uses the `@storybook/react-vite` framework. Remove the
unused `@storybook/nextjs` dependency from package.json and also clean up the
related extra entry mentioned in the review so the dependency list matches the
Vite-based Storybook setup. Verify there are no remaining references to
`@storybook/nextjs` in the Storybook config or scripts after the cleanup.
In `@postcss.config.mjs`:
- Around line 3-5: The Storybook detection in `postcss.config.mjs` is too broad
because `isStorybook` relies on `process.argv` substring checks, especially
`arg.includes("sb")`, which can misidentify non-Storybook runs. Simplify
`isStorybook` to use a single explicit signal like `process.env.STORYBOOK ===
"true"` and set that env var in the `storybook` and `build-storybook` scripts in
package.json; remove the `process.argv` heuristic from the `isStorybook`
expression.
In `@src/components/session/RefundForm.tsx`:
- Around line 135-141: `RefundFormProps` still requires `sessionId`, but
`RefundForm` no longer destructures or uses it. Update the `RefundFormProps`
interface and the `RefundForm` component together: either remove `sessionId`
from the required props now if it is truly unused, or keep it destructured in
`RefundForm` if you want to preserve the future `settle_session(sessionId, ...)`
wiring referenced in the TODO. Make sure the component signature and all callers
stay consistent with the chosen approach.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 79ced26d-e9e2-41f3-96ba-9a06afca9e83
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
.gitignore.storybook/main.ts.storybook/preview.ts.storybook/tsconfig.jsonpackage.jsonpostcss.config.mjssrc/components/dashboard/SessionHistory.tsxsrc/components/layout/NotificationHub.tsxsrc/components/marketplace/ExpertCard.tsxsrc/components/profile/ExpertDetails.tsxsrc/components/session/RefundForm.tsxsrc/components/ui/Avatar.stories.tsxsrc/components/ui/Badge.stories.tsxsrc/components/ui/Button.stories.tsxsrc/components/ui/Card.stories.tsxsrc/components/ui/StatusBadge.stories.tsxsrc/hooks/useHeartbeat.ts
💤 Files with no reviewable changes (1)
- src/components/profile/ExpertDetails.tsx
| import type { StorybookConfig } from "@storybook/react-vite"; | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: [ | ||
| "../src/**/*.mdx", | ||
| "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)", | ||
| ], | ||
| addons: [ | ||
| "@storybook/addon-links", | ||
| "@storybook/addon-essentials", | ||
| "@storybook/addon-onboarding", | ||
| "@storybook/addon-interactions", | ||
| ], | ||
| framework: { | ||
| name: "@storybook/react-vite", | ||
| options: {}, | ||
| }, | ||
| docs: { | ||
| autodocs: "tag", | ||
| }, | ||
| }; | ||
| export default config; No newline at end of file |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check whether the app relies on a "`@/`*" alias, and whether it's wired into vite/storybook config anywhere.
rg -n '"`@/`\*"' tsconfig.json
rg -n 'alias' .storybook/main.ts vite.config.* 2>/dev/nullRepository: LightForgeHub/SkillSphere-Dapp
Length of output: 196
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Files\n'
git ls-files .storybook/main.ts tsconfig.json vite.config.* .storybook/* 2>/dev/null || true
printf '\n## Storybook config\n'
if [ -f .storybook/main.ts ]; then
cat -n .storybook/main.ts
fi
printf '\n## TS config alias\n'
if [ -f tsconfig.json ]; then
sed -n '1,120p' tsconfig.json | cat -n
fi
printf '\n## Vite config search\n'
rg -n --hidden --glob '!*node_modules*' --glob '!dist' --glob '!build' 'resolve\s*:|alias\s*:|`@/`\*|viteFinal|storybook' .storybook vite.config.* tsconfig*.json package.json 2>/dev/null || trueRepository: LightForgeHub/SkillSphere-Dapp
Length of output: 2942
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Storybook tsconfig\n'
if [ -f .storybook/tsconfig.json ]; then
cat -n .storybook/tsconfig.json
fi
printf '\n## Any "`@/`\" imports in repo\n'
rg -n --hidden --glob '!*node_modules*' --glob '!dist' --glob '!build' --glob '!coverage' 'from\s+["@'\'"'"'"]`@/`|import\s+["@'\'"'"'"]`@/`' . 2>/dev/null || true
printf '\n## Any Storybook Vite alias wiring\n'
rg -n --hidden --glob '!*node_modules*' --glob '!dist' --glob '!build' 'viteFinal|resolve\s*:\s*\{|alias\s*:' .storybook . 2>/dev/null || trueRepository: LightForgeHub/SkillSphere-Dapp
Length of output: 24191
🌐 Web query:
Storybook 8 react-vite tsconfig paths viteFinal alias automatic support documentation
💡 Result:
In Storybook 8 with the Vite builder, the approach for handling TypeScript path aliases (defined in tsconfig.json) depends on your version of Vite [1][2]. For projects using Vite 8 or higher, Storybook supports native resolution of TypeScript paths [1][2]. You do not need to use external plugins like vite-tsconfig-paths [1]. Instead, you should enable native support in your Vite configuration file (vite.config.ts) [1]: // vite.config.ts export default defineConfig({ resolve: { tsconfigPaths: true, }, }); If you are using an older version of Vite or need to manually configure aliases in Storybook regardless of your global Vite setup, you can use the viteFinal function in your.storybook/main.ts file [3][4]. This allows you to merge custom Vite configurations into the Storybook build process [5][4]. To manually configure paths using vite-tsconfig-paths (for older Vite versions): //.storybook/main.ts import { mergeConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; export default { //... other config async viteFinal(config) { return mergeConfig(config, { plugins: [tsconfigPaths], }); }, }; Alternatively, to manually define specific aliases without a plugin: //.storybook/main.ts import { mergeConfig } from 'vite'; import path from 'path'; export default { //... other config async viteFinal(config) { return mergeConfig(config, { resolve: { alias: { '@': path.resolve(dirname, '../src'), }, }, }); }, }; Important Considerations: 1. Vite Configuration File: By default, Storybook's Vite builder attempts to read your project's vite.config.ts file [6][4]. However, it may sometimes override or ignore parts of it to ensure compatibility with Storybook’s internal build requirements [7][3]. 2. viteFinal: This function is the recommended way to override or extend the Vite configuration specifically for Storybook [8][4]. It receives the existing config and must return the modified version [5][4]. 3. Native Support: Always check if your project is running Vite 8+, as the native resolve.tsconfigPaths: true option is the preferred, modern approach [1][2].
Citations:
- 1: [Bug]:
vite-tsconfig-pathsused on Vite 8 storybookjs/vite-plugin-storybook-nextjs#108 - 2: Use native tsconfig paths support on Vite 8 storybookjs/vite-plugin-storybook-nextjs#109
- 3: tsconfig absolute paths not working in a react+ts+vite+storybook project #65 storybookjs/storybook#18891
- 4: https://www.npmjs.com/package/%40storybook/builder-vite
- 5: https://storybook.js.org/docs/8/api/main-config/main-config-vite-final.md
- 6: https://storybook.js.org/docs/8/builders/vite.md
- 7: Absolute Imports in Storybook Vite storybookjs/builder-vite#411
- 8: https://storybook.js.org/docs/api/main-config/main-config-vite-final
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## package.json Vite/Storybook deps\n'
if [ -f package.json ]; then
rg -n '"vite"|`@storybook/`(react-vite|builder-vite|nextjs|react)' package.json
fi
printf '\n## vite config files\n'
git ls-files 'vite.config.*' '.storybook/*' 2>/dev/null || true
printf '\n## explicit Storybook Vite hooks or alias wiring\n'
rg -n --hidden --glob '!*node_modules*' --glob '!dist' --glob '!build' 'viteFinal|resolve\s*:\s*\{|alias\s*:|tsconfigPaths|tsconfigPaths' .storybook vite.config.* package.json tsconfig*.json 2>/dev/null || trueRepository: LightForgeHub/SkillSphere-Dapp
Length of output: 487
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Story files\n'
git ls-files '*.stories.*' '*.mdx' '.storybook/*' 2>/dev/null || true
printf '\n## Alias imports inside story files\n'
rg -n --hidden --glob '*.stories.*' --glob '*.mdx' 'from\s+["'\'']`@/`|import\s+["'\'']`@/`' . 2>/dev/null || trueRepository: LightForgeHub/SkillSphere-Dapp
Length of output: 474
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## Button story\n'
cat -n src/components/ui/Button.stories.tsx
printf '\n## Button component imports\n'
sed -n '1,120p' src/components/ui/Button.tsx | cat -n
printf '\n## Card story\n'
cat -n src/components/ui/Card.stories.tsx
printf '\n## Card component imports\n'
sed -n '1,120p' src/components/ui/Card.tsx | cat -nRepository: LightForgeHub/SkillSphere-Dapp
Length of output: 12057
🌐 Web query:
Storybook 8 builder-vite tsconfig paths automatically resolved vite 6 viteFinal alias docs
💡 Result:
Storybook 8 does not automatically resolve tsconfig paths for the Vite builder [1][2]. While Storybook's Vite builder attempts to merge your root vite.config.ts into its own configuration, it does not inherently apply tsconfig.json path mappings [3][4][2]. To resolve these aliases, you must explicitly configure them in your .storybook/main.ts file using the viteFinal hook [3][1][4]. The most common and effective way to achieve this is by using the vite-tsconfig-paths plugin within viteFinal [1][2][5]. Implementation Example: In your .storybook/main.ts (or .js), you can modify the Vite configuration as follows: import type { StorybookConfig } from '@storybook/your-framework'; import { mergeConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { //... rest of your config async viteFinal(config) { return mergeConfig(config, { plugins: [tsconfigPaths], }); }, }; export default config; Alternatively, you can define aliases manually within viteFinal if you prefer not to use a plugin: async viteFinal(config) { config.resolve = config.resolve || {}; config.resolve.alias = {...(config.resolve.alias || {}), '@/src': path.resolve(dirname, '../src'), }; return config; }, Important Notes: 1. Vite Configuration: While Storybook looks for a vite.config.ts in your project root, it may not pick up all settings (like path plugins) automatically due to the specific way Storybook needs to wrap and manage the configuration [4][2]. 2. Custom Config Paths: If your Storybook configuration folder is not at the project root, you may need to explicitly specify the viteConfigPath in your main.ts to ensure your base Vite configuration is loaded correctly [3][1][4]. 3. Vite 6 Compatibility: The approach of using viteFinal to inject plugins or aliases remains the standard method for Vite 6 compatibility in Storybook 8 [3][6]. Ensure your dependencies, including vite-tsconfig-paths, are updated to versions compatible with Vite 6.
Citations:
- 1: How to render stories with import alias and custom config path storybookjs/storybook#32430
- 2: Absolute Imports in Storybook Vite storybookjs/builder-vite#411
- 3: https://storybook.js.org/docs/8/builders/vite.md
- 4: https://www.npmjs.com/package/@storybook/builder-vite
- 5: https://stackoverflow.com/questions/66444895/how-to-resolve-aliases-in-storybook
- 6: https://storybook.js.org/docs/8/api/main-config/main-config-vite-final.md
Add Storybook Vite alias wiring
.storybook/main.ts doesn’t inherit the repo’s @/* path mapping, and Storybook 8 with Vite 6 won’t resolve tsconfig.json paths on its own. Add a viteFinal hook (or equivalent resolve.alias) here so stories can import @/... modules without build failures.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.storybook/main.ts around lines 1 - 22, Storybook is missing the repo’s
`@/*` path alias, so imports in stories can fail to resolve under Vite. Update
the `config` in `.storybook/main.ts` by adding a `viteFinal` hook (or equivalent
`resolve.alias` setup) that maps `@` to the project’s source directory, so
`@/...` imports work in Storybook 8 with Vite 6.
|
|
||
| export const Glass: Story = { | ||
| render: (args) => ( | ||
| <div className="p-8 bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-950 rounded-xl"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
Does Tailwind CSS v4.1 still support the legacy bg-gradient-to-* class names, or are they fully removed?
💡 Result:
In Tailwind CSS v4, the legacy bg-gradient-to-* class names have been removed and are no longer supported [1][2]. They have been replaced by the bg-linear-to-* utility set to better align with the underlying CSS linear-gradient function [1][3]. While the from-, via-, and to-* color stop utilities remain unchanged and fully compatible with the new gradient system [4][1][2], you must update your base utility classes from bg-gradient-to-* to bg-linear-to-* (e.g., changing bg-gradient-to-r to bg-linear-to-r) [1][2][3]. The official Tailwind CSS upgrade tool is designed to automatically detect and rewrite these legacy class names in your static code [1][3]. However, because this tool may not catch classes built dynamically (such as those concatenated in strings or templates), it is recommended to search your codebase for bg-gradient- after upgrading to ensure no legacy classes remain [1][2].
Citations:
- 1: https://richdynamix.com/articles/tailwind-v4-gradient-utilities-bg-linear-radial-conic
- 2: https://capytoolkit.com/tools/design/gradient-builder/tailwind-v4-gradients/
- 3: https://stacknotice.com/blog/tailwind-css-v4-migration-guide
- 4: https://tailwindcss.com/blog/tailwindcss-v4
Switch this gradient class to Tailwind v4 syntax
bg-gradient-to-br was removed in Tailwind v4, so this story won't render the intended gradient. Use bg-linear-to-br instead.
Proposed fix
- <div className="p-8 bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-950 rounded-xl">
+ <div className="p-8 bg-linear-to-br from-indigo-950 via-purple-950 to-slate-950 rounded-xl">📝 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.
| <div className="p-8 bg-gradient-to-br from-indigo-950 via-purple-950 to-slate-950 rounded-xl"> | |
| <div className="p-8 bg-linear-to-br from-indigo-950 via-purple-950 to-slate-950 rounded-xl"> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/ui/Card.stories.tsx` at line 55, The gradient utility in the
Card story uses the old Tailwind class, so update the JSX in Card.stories.tsx to
replace bg-gradient-to-br with the Tailwind v4 equivalent bg-linear-to-br. Keep
the rest of the className on the story wrapper div unchanged so the visual
styling remains the same.
1 participant
Closes : #361
This pull request configures Storybook for the design system primitives and adds corresponding stories for Button, Card, Avatar, Badge, and StatusBadge. It also fixes existing typescript/linter warnings and a minor markup syntax error to ensure error-free compilation of both Next.js and Storybook.
To avoid the Webpack/Turbopack compatibility conflicts common in Next.js 15, Storybook was configured to use the Vite builder (@storybook/react-vite), which runs in a isolated, super-fast pipeline while sharing path aliases and Tailwind CSS v4 variables seamlessly.
Key Changes
Storybook Integration & Config:
Added Storybook 8.6.18 packages and vite as devDependencies.
Initialized .storybook/ configurations:
main.ts: Configures the @storybook/react-vite framework.
preview.ts: Imports the main src/app/globals.css style definitions so Tailwind classes load inside the stories.
tsconfig.json: Extends root typescript configurations.
Modified postcss.config.mjs to dynamically detect running environments (Storybook/Vite vs. Next.js) and serve plugins in their corresponding compatible format (tailwindcss() vs ["@tailwindcss/postcss"]).
Added /storybook-static to .gitignore.
Primitive UI Stories:
Button.stories.tsx: Documents all 8 style variants (primary, glow, destructive, outline, etc.), sizes, and interactive states.
Card.stories.tsx: Showcases nested components (CardHeader, CardContent, etc.) and visual configurations.
Avatar.stories.tsx: Demonstrates image loading and initials fallback state.
Badge.stories.tsx: Details the look and feel of all 9 badge colors/variants.
StatusBadge.stories.tsx: Details mapped state tags (resolved, pending, completed, draft, published) and custom fallbacks.
Linter & Syntax Bug Fixes:
Removed CLI-generated boilerplate stories in src/stories that were causing unescaped JSX quotation errors.
Fixed a syntax error in SessionHistory.tsx where an unclosed header div was breaking type compilation.
Removed unused imports and variable declarations (sessionId in RefundForm.tsx, error in useHeartbeat.ts, useEffect in NotificationHub.tsx, and ratesLoading in ExpertCard.tsx).
Summary by CodeRabbit
New Features
Bug Fixes
Chores