[WEB-4835] feat: storybook enhancements#7702
Conversation
- Added `@storybook/addon-designs` and `@storybook/addon-docs` to the project dependencies. - Enhanced the Tabs component stories to support dynamic tab options. - Introduced a custom theme for Storybook with a new manager configuration. - Added a new SVG logo for branding in Storybook. - Pinned the storybook and related packages version
JayashTripathy
requested review from
anmolsinghbhatia,
Copilot and
lifeiscontent
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughUpdates Storybook configuration to include addons, a custom manager theme, and preview tags/parameters. Adjusts package.json devDependencies to add/pin Storybook addons. Refactors Tabs stories to a data-driven pattern with typed props, default args, and dynamic rendering of triggers and content. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant SB as Storybook Core
participant Addons as Addons (designs, docs)
participant Manager as Manager UI
participant Preview as Preview
Dev->>SB: Start Storybook
SB->>Addons: Load configured addons
Note right of Addons: @storybook/addon-designs<br/>@storybook/addon-docs
SB->>Manager: Initialize manager
Manager->>Manager: Apply custom dark theme
SB->>Preview: Load preview parameters & tags
Preview-->>Dev: Stories ready
sequenceDiagram
autonumber
actor User
participant SB as Storybook Preview
participant Story as Tabs.stories (Basic/Sizes)
participant Tabs as Tabs Component
User->>SB: Open Tabs story
SB->>Story: Invoke render with args { defaultValue, options }
Story->>Story: Compute safeDefault from options
Story->>Tabs: Render Tabs, map options to Triggers/Content
User->>Tabs: Click Trigger
Tabs-->>User: Show corresponding Content
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (2)
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Storybook setup by adding design and documentation addons, introducing dynamic tab options for the Tabs component stories, and implementing a custom Plane UI theme with branding.
- Added
@storybook/addon-designsand@storybook/addon-docsfor enhanced design and documentation capabilities - Refactored Tabs component stories to use dynamic tab options instead of hardcoded content
- Implemented custom Plane UI theme with dark mode and brand logo for Storybook manager
Reviewed Changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/propel/src/tabs/tabs.stories.tsx | Refactored to use dynamic tab options with configurable labels and values |
| packages/propel/package.json | Added storybook addon dependencies and pinned versions |
| packages/propel/.storybook/preview.ts | Restructured configuration and enabled autodocs tags |
| packages/propel/.storybook/manager.ts | Added custom Plane UI theme configuration |
| packages/propel/.storybook/main.ts | Enabled design and docs addons |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/propel/.storybook/main.ts (1)
12-19: AddstaticDirsand create the public folder for your logoconst config: StorybookConfig = { stories: ["../src/**/*.stories.@(ts|tsx)"], + staticDirs: ["./public"], addons: ["@storybook/addon-designs", "@storybook/addon-docs"], framework: { name: getAbsolutePath("@storybook/react-vite"), options: {}, }, };Create
packages/propel/.storybook/publicand placeplane-lockup-light.svgthere so Storybook can serve it.
🧹 Nitpick comments (4)
packages/propel/.storybook/preview.ts (1)
4-8: Either remove empty controls matchers or set sensible defaults.Empty
matchersis a no-op. Consider adding common defaults or omit the block:const parameters: Preview["parameters"] = { controls: { - matchers: {}, + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, }, };packages/propel/src/tabs/tabs.stories.tsx (3)
35-46: Avoid duplicating default args in Basic story.
meta.argsalready setsoptions. Unless you intend to override them, drop this block to keep a single source of truth.export const Basic: Story = { - args: { - options: [ - { - label: "Account", - value: "account", - }, - { - label: "Password", - value: "password", - }, - ], - },
48-66: Guard against mismatched defaultValue/options (resolves empty selection).If someone changes
defaultValuewithout updatingoptions, the tab may not select anything. Resolve a safe default:- render: ({ defaultValue, options }) => ( + render: ({ defaultValue, options }) => { + const resolvedDefault = + options.some((o) => o.value === defaultValue) ? defaultValue : options[0]?.value; + return ( <div className="w-[400px]"> - <Tabs defaultValue={defaultValue}> + <Tabs defaultValue={resolvedDefault}> <Tabs.List> {options.map((option) => ( <Tabs.Trigger key={option.value} value={option.value}> {option.label} </Tabs.Trigger> ))} <Tabs.Indicator /> </Tabs.List> {options.map((option) => ( <Tabs.Content key={option.value} value={option.value} className="p-4"> {option.label} content goes here </Tabs.Content> ))} </Tabs> </div> - ), + ); + },
70-88: Minor: reuse the same default resolution in Sizes for consistency.Replicate the
resolvedDefaultpattern to prevent empty state if args drift.- render: ({ defaultValue, options }) => { + render: ({ defaultValue, options }) => { + const resolvedDefault = + options.some((o) => o.value === defaultValue) ? defaultValue : options[0]?.value; const sizes = ["sm", "md", "lg"] as const; return ( <div className="w-[400px]"> {sizes.map((size) => ( <Fragment key={size}> <div className="text-lg">{size}</div> - <Tabs defaultValue={defaultValue}> + <Tabs defaultValue={resolvedDefault}> <Tabs.List> {options.map((option) => ( <Tabs.Trigger key={option.value} value={option.value} size={size}> {option.label} </Tabs.Trigger> ))} </Tabs.List> </Tabs> </Fragment> ))} </div> ); },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
packages/propel/public/plane-lockup-light.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
packages/propel/.storybook/main.ts(1 hunks)packages/propel/.storybook/manager.ts(1 hunks)packages/propel/.storybook/preview.ts(1 hunks)packages/propel/package.json(1 hunks)packages/propel/src/tabs/tabs.stories.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-29T08:45:15.953Z
Learnt from: sriramveeraghanta
PR: makeplane/plane#7672
File: pnpm-workspace.yaml:8-9
Timestamp: 2025-08-29T08:45:15.953Z
Learning: The makeplane/plane repository uses pnpm v10.12.1, which supports onlyBuiltDependencies configuration in pnpm-workspace.yaml files.
Applied to files:
packages/propel/package.json
🧬 Code graph analysis (1)
packages/propel/src/tabs/tabs.stories.tsx (1)
packages/propel/src/tabs/tabs.tsx (1)
Tabs(89-94)
⏰ 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). (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
packages/propel/.storybook/main.ts (1)
14-14: Confirm addon-designs compatibility and retain addon-docs for autodocs.
@storybook/addon-designs@10.0.2 supports Storybook 9.1.x (requires ≥8), and autodocs pages still need @storybook/addon-docs at runtime—do not remove it.packages/propel/.storybook/preview.ts (1)
10-13: LGTM: autodocs enabled.
tags: ["autodocs"]aligns with your docs setup.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
packages/propel/src/tabs/tabs.stories.tsx (1)
71-75: Size labels mapping looks good — nitpick: hoist constantsNice fix restoring user-friendly labels. You can hoist
sizesandsizeLabelsto module scope to avoid re-allocations per render.Example:
+const sizes = ["sm", "md", "lg"] as const; +const sizeLabels: Record<(typeof sizes)[number], string> = { + sm: "Small", + md: "Medium", + lg: "Large", +};…and remove their local declarations in the story.
🧹 Nitpick comments (4)
packages/propel/src/tabs/tabs.stories.tsx (4)
4-12: Make story data readonly to avoid accidental mutation in controlsMark
tabOptionsreadonly for safer reuse in controls and other stories.-const tabOptions: TabOption[] = [ +const tabOptions = [ { label: "Account", value: "account" }, { label: "Password", value: "password" }, -]; +] as const satisfies ReadonlyArray<TabOption>;
18-28: Add controls for options/defaultValue; confirm Storybook type import path
- Provide controls so users can tweak
optionsand pickdefaultValuefrom available values.- Verify that
@storybook/react-viteis correct for your pinned SB version; SB 8 typically uses@storybook/react. Adjust if needed.const meta: Meta<StoryProps> = { title: "Components/Tabs", component: Tabs, parameters: { layout: "centered", }, + argTypes: { + options: { control: "object" }, + defaultValue: { + control: { type: "select" }, + options: tabOptions.map((o) => o.value), + }, + }, args: { defaultValue: "account", options: tabOptions, }, };
34-46: Remove duplicated args in Basic — rely on meta.args
Basic.args.optionsrepeatsmeta.args.options. Drop it unless you intend to override.export const Basic: Story = { - args: { - options: [ - { - label: "Account", - value: "account", - }, - { - label: "Password", - value: "password", - }, - ], - },
69-95: Sizes story: add same defaultValue guard; optionally show content/indicator
- Apply the same
safeDefaultfallback here.- If the intent is to demo only Trigger sizes, ignore; otherwise add
Tabs.Content(and possiblyTabs.Indicator) for parity with Basic.-export const Sizes: Story = { - render: ({ defaultValue, options }) => { - const sizes = ["sm", "md", "lg"] as const; - const sizeLabels: Record<(typeof sizes)[number], string> = { +export const Sizes: Story = { + render: ({ defaultValue, options }) => { + const safeDefault = + options?.some((o) => o.value === defaultValue) ? defaultValue : options?.[0]?.value; + const sizes = ["sm", "md", "lg"] as const; + const sizeLabels: Record<(typeof sizes)[number], string> = { sm: "Small", md: "Medium", lg: "Large", }; return ( <div className="w-[400px] grid gap-4"> {sizes.map((size) => ( <div key={size} className="flex flex-col gap-2"> <div className="text-lg">{sizeLabels[size]}</div> - <Tabs defaultValue={defaultValue}> + <Tabs defaultValue={safeDefault}> <Tabs.List> {options.map((option) => ( <Tabs.Trigger key={option.value} value={option.value} size={size}> {option.label} </Tabs.Trigger> ))} </Tabs.List> + {/* Optional for parity */} + {options.map((option) => ( + <Tabs.Content key={option.value} value={option.value} className="p-4"> + {option.label} content goes here + </Tabs.Content> + ))} </Tabs> </div> ))} </div> ); }, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
packages/propel/package.json(1 hunks)packages/propel/src/accordion/accordion.tsx(1 hunks)packages/propel/src/tabs/tabs.stories.tsx(1 hunks)packages/utils/src/string.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/utils/src/string.ts
- packages/propel/src/accordion/accordion.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/propel/package.json
🧰 Additional context used
🧬 Code graph analysis (1)
packages/propel/src/tabs/tabs.stories.tsx (1)
packages/propel/src/tabs/tabs.tsx (1)
Tabs(89-94)
⏰ 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). (1)
- GitHub Check: Build and lint web apps
JayashTripathy
changed the title
…t-storybook-enhancements
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
packages/propel/package.json (1)
55-57: Fix addon-designs/SB major mismatch (and likely invalid version).
@storybook/addon-designsis pinned to 10.0.2 while the SB core packages are 9.1.2. The addon’s 8.x line supports Storybook ≥8 (works with 9), and sources show 10.x exists but targets newer SB majors. Align versions to avoid peer/resolution breakage.Recommended: keep SB 9 and use addon-designs 8.2.1.
- "@storybook/addon-designs": "10.0.2", + "@storybook/addon-designs": "8.2.1",Refs: the addon’s npm page lists 8.x with “Storybook@>=8.0.0” requirement; security trackers list 10.x releases (implying a newer major). (npmjs.com, security.snyk.io)
packages/propel/src/tabs/tabs.stories.tsx (1)
1-1: Use a type-only import to avoid an unnecessary runtime import.Switch to
import typeforComponentProps.-import { ComponentProps } from "react"; +import type { ComponentProps } from "react";
🧹 Nitpick comments (3)
packages/propel/src/tabs/tabs.stories.tsx (3)
25-28: Optional: opt-in autodocs at story level (if not set globally).If
preview.tsalready setstags: ['autodocs'], ignore. Otherwise consider adding:const meta: Meta<StoryProps> = { title: "Components/Tabs", component: Tabs, parameters: { layout: "centered", }, + tags: ["autodocs"], args: { defaultValue: "account", options: tabOptions, }, };
35-46: DRY: rely on meta.args unless you intend to override.
Basic.args.optionsduplicatesmeta.args.options. Remove for simplicity.export const Basic: Story = { - args: { - options: [ - { - label: "Account", - value: "account", - }, - { - label: "Password", - value: "password", - }, - ], - },
72-99: Apply the same safeDefault guard in Sizes story.Avoids an unselected state if controls change
options.export const Sizes: Story = { - render: ({ defaultValue, options }) => { + render: ({ defaultValue, options }) => { const sizes = ["sm", "md", "lg"] as const; const sizeLabels: Record<(typeof sizes)[number], string> = { sm: "Small", md: "Medium", lg: "Large", }; return ( <div className="w-[400px] grid gap-4"> {sizes.map((size) => ( <div key={size} className="flex flex-col gap-2"> <div className="text-lg">{sizeLabels[size]}</div> - <Tabs defaultValue={defaultValue}> + {(() => { + const safeDefault = + options?.some((o) => o.value === defaultValue) + ? defaultValue + : options?.[0]?.value; + return ( + <Tabs defaultValue={safeDefault}> <Tabs.List> {options.map((option) => ( <Tabs.Trigger key={option.value} value={option.value} size={size}> {option.label} </Tabs.Trigger> ))} </Tabs.List> </Tabs> + ); + })()} </div> ))} </div> ); }, };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
packages/propel/.storybook/manager.ts(1 hunks)packages/propel/package.json(1 hunks)packages/propel/src/tabs/tabs.stories.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/propel/.storybook/manager.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-08-29T08:45:15.953Z
Learnt from: sriramveeraghanta
PR: makeplane/plane#7672
File: pnpm-workspace.yaml:8-9
Timestamp: 2025-08-29T08:45:15.953Z
Learning: The makeplane/plane repository uses pnpm v10.12.1, which supports onlyBuiltDependencies configuration in pnpm-workspace.yaml files.
Applied to files:
packages/propel/package.json
🧬 Code graph analysis (1)
packages/propel/src/tabs/tabs.stories.tsx (1)
packages/propel/src/tabs/tabs.tsx (1)
Tabs(89-94)
⏰ 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). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
packages/propel/package.json (1)
60-61: LGTM on pinning Storybook tooling.Pinning
eslint-plugin-storybookandstorybookto 9.1.2 is consistent with the SB 9 stack. If you upgrade to addon-designs 10 later, plan a full SB 10 bump. (newreleases.io)packages/propel/src/tabs/tabs.stories.tsx (2)
5-17: Types and props surface look good.
TabOption+StoryProps extends ComponentProps<typeof Tabs>is clear and future-proof.
48-69: Nice guard for defaultValue.The
safeDefaultcheck prevents an unselected Tabs state when controls change options.
…t-storybook-enhancements
Description
@storybook/addon-designsand@storybook/addon-docsto the propel dependencies for automatic docs and Figma designs.Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit
New Features
Documentation
Chores