📚 Add comprehensive Storybook stories for UI library components #3671
Conversation
Add Storybook stories for 20 components, icons, logos, and markers to improve component documentation and development experience: Components: - Avatar (size and user variants) - Callout (5 variants: default, danger, success, info, warning) - Collapsible (Radix UI wrapper) - ContextMenu (right-click menu) - CookieConsent (banner with accept/deny) - Drawer (Vaul wrapper) - DropdownMenu (with icons and radio items) - GridTable (semantic definition list) - Input (sizes, icons, error states) - Modal (Radix Dialog wrapper) - Popover (Radix UI wrapper) - RadioGroup (Radix UI wrapper) - RemoveButton (transparent/solid variants) - Resizable (horizontal/vertical panels) - RoundBadge (4 color variants) - Select (Radix UI wrapper with groups) - Sidebar (complex navigation component) - Spinner (3 sizes) - Switch (Radix UI wrapper) - Tabs (Radix UI wrapper) Showcases: - Icons: All 80+ icons (custom + Lucide) in 2D grid layout - Logos: 6 logos with proper sizing - Markers: 3 SVG markers with visual examples All stories use Object.entries() pattern for DRY code and automatic name generation.
- Delete false positive ref reassignment ignore comments across SelectTrigger, SelectScrollUpButton, SelectScrollDownButton, SelectContent, SelectLabel, SelectItem, and SelectSeparator - These comments were incorrectly flagging ref prop passing as parameter reassignment - Refs are correctly passed as props to Radix UI primitives without any reassignment Improves code cleanliness by removing unnecessary linter suppression comments.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
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. WalkthroughAdds many new Storybook story files and three showcase pages for UI components (typed meta objects, Changes
Sequence Diagram(s)Not applicable. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 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). (3)
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 |
|
Updates to Preview Branch (add-storybook-stories-for-ui-components) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
frontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsx (1)
58-58: Consider using Storybook actions for better interactivity.Same as the
Defaultstory—consider usingfn()for interactive feedback.
🧹 Nitpick comments (13)
frontend/packages/ui/src/components/Spinner/Spinner.stories.tsx (1)
18-40: Consider removing duplicate story configuration.The
Defaultstory andSize16story have identical args (both usesize: '16'). This duplication is unnecessary for Storybook documentation.Consider either:
- Removing the
Size16story entirely, or- Changing the
Defaultstory to use a different size (e.g.,'14'as a middle option)Example refactor to remove the duplicate:
export const Default: Story = { args: { size: '16', }, } export const Size12: Story = { args: { size: '12', }, } export const Size14: Story = { args: { size: '14', }, } - -export const Size16: Story = { - args: { - size: '16', - }, -}frontend/packages/ui/src/components/Popover/Popover.stories.tsx (1)
11-33: Consider using CSS modules for production components.The inline styles are acceptable for Storybook demonstration purposes, but note that production components in this codebase should follow the existing pattern of using CSS modules (as seen in Button.tsx).
frontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsx (1)
34-34: Consider using Storybook actions for better interactivity.The empty
onClickhandler doesn't provide feedback in Storybook. Consider using Storybook'sfn()or action logging to demonstrate the interaction.Apply this diff to add action logging:
+import { fn } from '@storybook/test' export const Default: Story = { args: { // ... - onClick: () => {}, + onClick: fn(), }, }frontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsx (1)
23-49: Remove duplicate story definitions.The
Default,Transparent, andSmallstories have identical args (all usevariant: 'transparent'andsize: 'sm'). This duplication adds no value and increases maintenance burden.Consider keeping only the
Defaultstory and removing the duplicateTransparentandSmallstories:export const Default: Story = { args: { variant: 'transparent', size: 'sm', }, } -export const Transparent: Story = { - args: { - variant: 'transparent', - size: 'sm', - }, -} - export const Solid: Story = { args: { variant: 'solid', size: 'sm', }, } -export const Small: Story = { - args: { - variant: 'transparent', - size: 'sm', - }, -} - export const Medium: Story = { args: { variant: 'transparent', size: 'md', }, }This leaves you with four distinct stories covering all prop combinations: Default (transparent+sm), Solid (solid+sm), Medium (transparent+md), and SolidMedium (solid+md).
frontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsx (1)
5-15: LGTM!The example component correctly demonstrates RadioGroup state management and follows the naming convention seen in other story files (e.g., CollapsibleExample, SwitchExample).
Optional: Display selected value for better demonstration.
Consider displaying the current selected value to help viewers understand the interactive behavior:
const RadioGroupExample = () => { const [value, setValue] = useState('option1') return ( - <RadioGroup value={value} onValueChange={setValue}> - <RadioGroupItem value="option1" label="Option 1" /> - <RadioGroupItem value="option2" label="Option 2" /> - <RadioGroupItem value="option3" label="Option 3" /> - </RadioGroup> + <div> + <RadioGroup value={value} onValueChange={setValue}> + <RadioGroupItem value="option1" label="Option 1" /> + <RadioGroupItem value="option2" label="Option 2" /> + <RadioGroupItem value="option3" label="Option 3" /> + </RadioGroup> + <p>Selected: {value}</p> + </div> ) }frontend/packages/ui/src/components/Input/Input.stories.tsx (2)
39-51: Remove redundant Medium story.Both
DefaultandMediumstories demonstrate the same size ('md') with nearly identical placeholder text. This duplication doesn't add value for visual testing or documentation.Consider removing the
Mediumstory or differentiating it (e.g., add a value, demonstrate focus state, or show different content).-export const Medium: Story = { - args: { - placeholder: 'Medium input', - size: 'md', - }, -} -
95-115: Replace emoji placeholders with proper icon components.Using emoji
<span>elements for icons is not production-ready. It doesn't align with typical design systems or accessibility best practices (emojis have inconsistent rendering and poor screen-reader support).Replace emoji spans with actual icon components from your icon library (e.g., icons from the
iconspackage referenced elsewhere in the PR):+import { SearchIcon, MailIcon, UserIcon, CheckIcon } from '@/icons' // adjust path as needed + export const WithLeftIcon: Story = { args: { placeholder: 'Search...', - leftIcon: <span>🔍</span>, + leftIcon: <SearchIcon />, }, } export const WithRightIcon: Story = { args: { placeholder: 'Email', - rightIcon: <span>✉️</span>, + rightIcon: <MailIcon />, }, } export const WithBothIcons: Story = { args: { placeholder: 'Username', - leftIcon: <span>👤</span>, - rightIcon: <span>✓</span>, + leftIcon: <UserIcon />, + rightIcon: <CheckIcon />, }, }If icon components are unavailable, document this as a placeholder and track it as a TODO.
frontend/packages/ui/src/components/Drawer/Drawer.stories.tsx (1)
54-56: Single story is appropriate for initial documentation.The Default story effectively demonstrates the Drawer component. Consider adding additional stories in the future for different use cases (e.g., with form content, different sizes, etc.) if the component supports such variations.
frontend/packages/ui/src/logos/index.stories.tsx (1)
11-84: Consider extracting common showcase styles.The showcase component uses inline styles that are duplicated across similar story files (logos, markers, icons). While acceptable for Storybook stories, extracting shared styles would reduce duplication.
Example shared styles object:
const showcaseStyles = { heading: { fontSize: '20px', fontWeight: 'bold', marginBottom: '16px', }, grid: { display: 'flex', flexWrap: 'wrap' as const, gap: '24px', }, card: { display: 'flex', flexDirection: 'column' as const, alignItems: 'center', gap: '16px', padding: '24px', border: '1px solid #e0e0e0', borderRadius: '8px', minWidth: '200px', }, } as constfrontend/packages/ui/src/markers/index.stories.tsx (1)
8-86: Good accessibility implementation.The SVG marker preview includes proper accessibility attributes (
role,aria-label,title), making it screen-reader friendly. The marker rendering pattern correctly demonstrates how SVG markers are applied to lines.As with the logos showcase, consider extracting common showcase styles to reduce duplication across story files (optional refactor).
frontend/packages/ui/src/icons/index.stories.tsx (2)
167-170: Consider renaming_iconstoicons.The underscore prefix is typically used for unused parameters or private members in TypeScript conventions. Since this variable is actively used, consider removing the prefix.
- const _icons = Object.entries(iconsMap).map(([name, Icon]) => ({ + const icons = Object.entries(iconsMap).map(([name, Icon]) => ({ name, Icon, }))Then update the usage on line 205:
- {_icons.map(({ name, Icon }) => ( + {icons.map(({ name, Icon }) => (
207-211: Consider documenting the icon prop convention.The conditional rendering distinguishes between custom icons (using
width/heightprops) and Lucide icons (usingsizeprop) based on the naming convention (name.endsWith('Icon')). While this works for the current set, consider adding a comment to document this convention for maintainability.<div key={name} style={iconItemStyle}> + {/* Custom icons (ending with 'Icon') use width/height; Lucide icons use size */} {name.endsWith('Icon') ? ( <Icon width={24} height={24} /> ) : ( <Icon size={24} /> )}frontend/packages/ui/src/components/GridTable/GridTable.stories.tsx (1)
27-30: Consolidate the Category term and its description within a single GridTableItem
- Replace the separate
<GridTableRow>and<GridTableItem>blocks with:<GridTableItem> <GridTableRow>Category</GridTableRow> <GridTableDd>Electronics</GridTableDd> </GridTableItem>- If you meant to show a full-width row header followed by an item, add an inline comment in the story to explain that alternate pattern.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
frontend/packages/ui/src/components/Avatar/Avatar.stories.tsx(1 hunks)frontend/packages/ui/src/components/Callout/Callout.stories.tsx(1 hunks)frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx(1 hunks)frontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsx(1 hunks)frontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsx(1 hunks)frontend/packages/ui/src/components/Drawer/Drawer.stories.tsx(1 hunks)frontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsx(1 hunks)frontend/packages/ui/src/components/GridTable/GridTable.stories.tsx(1 hunks)frontend/packages/ui/src/components/Input/Input.stories.tsx(1 hunks)frontend/packages/ui/src/components/Modal/Modal.stories.tsx(1 hunks)frontend/packages/ui/src/components/Popover/Popover.stories.tsx(1 hunks)frontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsx(1 hunks)frontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsx(1 hunks)frontend/packages/ui/src/components/Resizable/Resizable.stories.tsx(1 hunks)frontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsx(1 hunks)frontend/packages/ui/src/components/Select/Select.stories.tsx(1 hunks)frontend/packages/ui/src/components/Select/Select.tsx(0 hunks)frontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsx(1 hunks)frontend/packages/ui/src/components/Spinner/Spinner.stories.tsx(1 hunks)frontend/packages/ui/src/components/Switch/Switch.stories.tsx(1 hunks)frontend/packages/ui/src/components/Tabs/Tabs.stories.tsx(1 hunks)frontend/packages/ui/src/icons/index.stories.tsx(1 hunks)frontend/packages/ui/src/logos/index.stories.tsx(1 hunks)frontend/packages/ui/src/markers/index.stories.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/packages/ui/src/components/Select/Select.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Name React component files in PascalCase and use TSX (e.g., App.tsx)
Prefix event handler functions with “handle” (e.g., handleClick)
Files:
frontend/packages/ui/src/components/Modal/Modal.stories.tsxfrontend/packages/ui/src/components/Tabs/Tabs.stories.tsxfrontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsxfrontend/packages/ui/src/icons/index.stories.tsxfrontend/packages/ui/src/components/Spinner/Spinner.stories.tsxfrontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsxfrontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsxfrontend/packages/ui/src/components/Input/Input.stories.tsxfrontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsxfrontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsxfrontend/packages/ui/src/components/Callout/Callout.stories.tsxfrontend/packages/ui/src/markers/index.stories.tsxfrontend/packages/ui/src/components/GridTable/GridTable.stories.tsxfrontend/packages/ui/src/components/Resizable/Resizable.stories.tsxfrontend/packages/ui/src/components/Drawer/Drawer.stories.tsxfrontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsxfrontend/packages/ui/src/components/Switch/Switch.stories.tsxfrontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsxfrontend/packages/ui/src/components/Popover/Popover.stories.tsxfrontend/packages/ui/src/components/Avatar/Avatar.stories.tsxfrontend/packages/ui/src/logos/index.stories.tsxfrontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsxfrontend/packages/ui/src/components/Select/Select.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript/TSX across the codebase
**/*.{ts,tsx}: Prefer early returns for readability
Use named exports only (no default exports)
Prefer const arrow functions over function declarations for simple utilities (e.g., const toggle = () => {})
Files:
frontend/packages/ui/src/components/Modal/Modal.stories.tsxfrontend/packages/ui/src/components/Tabs/Tabs.stories.tsxfrontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsxfrontend/packages/ui/src/icons/index.stories.tsxfrontend/packages/ui/src/components/Spinner/Spinner.stories.tsxfrontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsxfrontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsxfrontend/packages/ui/src/components/Input/Input.stories.tsxfrontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsxfrontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsxfrontend/packages/ui/src/components/Callout/Callout.stories.tsxfrontend/packages/ui/src/markers/index.stories.tsxfrontend/packages/ui/src/components/GridTable/GridTable.stories.tsxfrontend/packages/ui/src/components/Resizable/Resizable.stories.tsxfrontend/packages/ui/src/components/Drawer/Drawer.stories.tsxfrontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsxfrontend/packages/ui/src/components/Switch/Switch.stories.tsxfrontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsxfrontend/packages/ui/src/components/Popover/Popover.stories.tsxfrontend/packages/ui/src/components/Avatar/Avatar.stories.tsxfrontend/packages/ui/src/logos/index.stories.tsxfrontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsxfrontend/packages/ui/src/components/Select/Select.stories.tsx
frontend/packages/**
📄 CodeRabbit inference engine (AGENTS.md)
Shared libraries and tools live under frontend/packages
Files:
frontend/packages/ui/src/components/Modal/Modal.stories.tsxfrontend/packages/ui/src/components/Tabs/Tabs.stories.tsxfrontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsxfrontend/packages/ui/src/icons/index.stories.tsxfrontend/packages/ui/src/components/Spinner/Spinner.stories.tsxfrontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsxfrontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsxfrontend/packages/ui/src/components/Input/Input.stories.tsxfrontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsxfrontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsxfrontend/packages/ui/src/components/Callout/Callout.stories.tsxfrontend/packages/ui/src/markers/index.stories.tsxfrontend/packages/ui/src/components/GridTable/GridTable.stories.tsxfrontend/packages/ui/src/components/Resizable/Resizable.stories.tsxfrontend/packages/ui/src/components/Drawer/Drawer.stories.tsxfrontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsxfrontend/packages/ui/src/components/Switch/Switch.stories.tsxfrontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsxfrontend/packages/ui/src/components/Popover/Popover.stories.tsxfrontend/packages/ui/src/components/Avatar/Avatar.stories.tsxfrontend/packages/ui/src/logos/index.stories.tsxfrontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsxfrontend/packages/ui/src/components/Select/Select.stories.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Follow existing import patterns and tsconfig path aliases
Files:
frontend/packages/ui/src/components/Modal/Modal.stories.tsxfrontend/packages/ui/src/components/Tabs/Tabs.stories.tsxfrontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsxfrontend/packages/ui/src/icons/index.stories.tsxfrontend/packages/ui/src/components/Spinner/Spinner.stories.tsxfrontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsxfrontend/packages/ui/src/components/ContextMenu/ContextMenu.stories.tsxfrontend/packages/ui/src/components/Input/Input.stories.tsxfrontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsxfrontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsxfrontend/packages/ui/src/components/Callout/Callout.stories.tsxfrontend/packages/ui/src/markers/index.stories.tsxfrontend/packages/ui/src/components/GridTable/GridTable.stories.tsxfrontend/packages/ui/src/components/Resizable/Resizable.stories.tsxfrontend/packages/ui/src/components/Drawer/Drawer.stories.tsxfrontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsxfrontend/packages/ui/src/components/Switch/Switch.stories.tsxfrontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsxfrontend/packages/ui/src/components/Popover/Popover.stories.tsxfrontend/packages/ui/src/components/Avatar/Avatar.stories.tsxfrontend/packages/ui/src/logos/index.stories.tsxfrontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsxfrontend/packages/ui/src/components/Select/Select.stories.tsx
🧠 Learnings (1)
📚 Learning: 2025-09-22T07:54:22.594Z
Learnt from: CR
PR: liam-hq/liam#0
File: CLAUDE.md:0-0
Timestamp: 2025-09-22T07:54:22.594Z
Learning: Applies to frontend/**/*.{tsx} : Import icons from liam-hq/ui
Applied to files:
frontend/packages/ui/src/icons/index.stories.tsx
🧬 Code graph analysis (13)
frontend/packages/ui/src/components/Modal/Modal.stories.tsx (1)
frontend/packages/ui/src/components/Button/Button.tsx (1)
Button(23-80)
frontend/packages/ui/src/components/Tabs/Tabs.stories.tsx (1)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
Default(45-47)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
frontend/packages/ui/src/components/Button/Button.tsx (1)
Button(23-80)
frontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsx (2)
frontend/packages/ui/src/components/Avatar/Avatar.stories.tsx (2)
Default(45-51)Small(67-72)frontend/packages/ui/src/components/Input/Input.stories.tsx (2)
Default(39-44)Small(53-58)
frontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsx (1)
frontend/packages/ui/src/components/Button/Button.tsx (1)
Button(23-80)
frontend/packages/ui/src/components/Callout/Callout.stories.tsx (5)
frontend/packages/ui/src/components/Avatar/Avatar.stories.tsx (1)
Default(45-51)frontend/packages/ui/src/components/Input/Input.stories.tsx (1)
Default(39-44)frontend/packages/ui/src/components/RemoveButton/RemoveButton.stories.tsx (1)
Default(23-28)frontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsx (1)
Default(26-31)frontend/packages/ui/src/components/Spinner/Spinner.stories.tsx (1)
Default(18-22)
frontend/packages/ui/src/components/GridTable/GridTable.stories.tsx (3)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
Default(45-47)frontend/packages/ui/src/components/Drawer/Drawer.stories.tsx (1)
Default(54-56)frontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsx (1)
Default(95-97)
frontend/packages/ui/src/components/Drawer/Drawer.stories.tsx (1)
frontend/packages/ui/src/components/Button/Button.tsx (1)
Button(23-80)
frontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsx (2)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
Default(45-47)frontend/packages/ui/src/components/Switch/Switch.stories.tsx (1)
Default(33-35)
frontend/packages/ui/src/components/Switch/Switch.stories.tsx (2)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
Default(45-47)frontend/packages/ui/src/components/Select/Select.stories.tsx (1)
Default(74-76)
frontend/packages/ui/src/components/Popover/Popover.stories.tsx (1)
frontend/packages/ui/src/components/Button/Button.tsx (1)
Button(23-80)
frontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsx (1)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
Default(45-47)
frontend/packages/ui/src/components/Select/Select.stories.tsx (1)
frontend/packages/ui/src/components/Select/Select.tsx (8)
Select(13-13)SelectTrigger(19-33)SelectValue(17-17)SelectContent(65-92)SelectGroup(15-15)SelectLabel(95-104)SelectItem(107-124)SelectSeparator(127-136)
⏰ 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). (5)
- GitHub Check: frontend-lint
- GitHub Check: frontend-ci
- GitHub Check: security-review
- GitHub Check: Supabase Preview
- GitHub Check: codeql / languages (javascript) / Perform CodeQL for javascript
🔇 Additional comments (68)
frontend/packages/ui/src/components/Spinner/Spinner.stories.tsx (3)
1-2: LGTM!Imports are correct and follow the established Storybook patterns.
4-13: LGTM!The meta configuration is well-structured with appropriate argTypes control for the size prop.
15-16: LGTM!The default export and Story type alias follow Storybook conventions correctly.
frontend/packages/ui/src/components/Tabs/Tabs.stories.tsx (4)
1-2: LGTM!Imports follow the established pattern and use named imports as per coding guidelines.
4-29: LGTM!The example component effectively demonstrates the Tabs API with clear visual presentation. The const arrow function pattern and inline styles are appropriate for Storybook documentation.
31-41: LGTM!The meta configuration correctly uses TypeScript's satisfies assertion and provides clear documentation about the Radix UI Tabs wrapper and its component composition.
43-48: LGTM!Story exports follow the established Storybook pattern and use named exports for the story itself, consistent with the codebase guidelines and similar story files.
frontend/packages/ui/src/components/Popover/Popover.stories.tsx (3)
1-9: LGTM!Import structure follows the coding guidelines with named exports only and clear relative paths.
35-45: LGTM!Meta definition correctly uses
satisfiesfor type safety and provides clear documentation about the compound component pattern.
47-52: LGTM!The default export of
metaand named export ofDefaultstory follow Storybook conventions. While the coding guidelines prefer named exports, the default export of meta is a Storybook framework requirement.frontend/packages/ui/src/components/Modal/Modal.stories.tsx (4)
1-14: LGTM!The imports are well-organized and include all necessary components for the Modal story composition.
16-42: LGTM!The
ModalExamplecomponent correctly demonstrates the Modal composition pattern using Radix UI primitives. The use ofasChildonModalTriggerand the button variants are appropriate.
44-54: LGTM!The meta configuration properly types the story using
satisfies, targets theModalRootcomponent, and provides clear documentation of the Modal API composition pattern.
56-61: LGTM!The story exports follow the standard Storybook pattern. The default export is required by Storybook (a necessary exception to the "named exports only" guideline), and the
Defaultstory correctly renders the example component.frontend/packages/ui/src/components/DropdownMenu/DropdownMenu.stories.tsx (6)
1-14: LGTM!Imports are well-organized and follow the coding guidelines for named exports and TypeScript usage.
16-32: LGTM!The basic example correctly demonstrates DropdownMenu composition with items, separators, and variant usage.
34-56: LGTM!The example effectively demonstrates icon support in menu items using simple emoji placeholders.
58-79: LGTM!The radio example correctly demonstrates controlled radio group usage with proper state management and label composition.
81-92: LGTM!Meta configuration properly types the component and provides clear documentation. The
satisfiesoperator ensures type safety while allowing proper inference.
93-105: LGTM!Story definitions are clean and follow Storybook conventions. The type alias and named exports align with the coding guidelines.
frontend/packages/ui/src/components/CookieConsent/CookieConsent.stories.tsx (5)
1-2: LGTM!Imports are correctly structured with proper TypeScript type imports and appropriate Storybook Next.js integration.
4-12: LGTM!Meta configuration correctly uses the
satisfiespattern and appropriately exposes theopenboolean prop as a Storybook control. Handler props are intentionally excluded from controls, which is standard practice.
14-15: LGTM!The default export is required by Storybook's API, and the
Storytype alias follows the established pattern for typing story objects.
17-23: LGTM!The
Openstory correctly demonstrates the visible state with appropriate stubbed handlers. Named export follows coding guidelines, and the arrow function pattern is appropriate for Storybook event handlers.
25-31: LGTM!The
Closedstory correctly demonstrates the hidden state with consistent handler stubs. The implementation mirrors theOpenstory pattern appropriately.frontend/packages/ui/src/components/Sidebar/Sidebar.stories.tsx (4)
1-16: LGTM!The imports are well-organized and correctly typed. All necessary Sidebar subcomponents are imported from the local module, and Storybook types are properly imported.
18-57: Well-structured example demonstrating the full Sidebar API.The component correctly uses
useStateto manage the open state and demonstrates all Sidebar subcomponents in a realistic composition. The inline styles are acceptable for a Storybook example.
59-71: LGTM!The meta configuration correctly uses
SidebarProvideras the component and provides clear documentation. Thesatisfiesoperator ensures type safety while allowing proper type inference.
72-76: LGTM!The Story type alias and Default export follow the established pattern from other story files in the codebase (e.g., Collapsible.stories.tsx). The structure is consistent with the project's Storybook conventions.
frontend/packages/ui/src/components/RadioGroup/RadioGroup.stories.tsx (3)
1-3: LGTM!Imports are clean and follow the established patterns for Storybook story files.
17-27: LGTM!The meta configuration is well-structured with helpful documentation describing the Radix UI wrapper and usage pattern.
29-34: LGTM!Story exports follow the established Storybook patterns seen in other story files in this PR. The default export of
metais required by Storybook (exception to the named exports guideline).frontend/packages/ui/src/components/Select/Select.stories.tsx (5)
1-12: LGTM!Imports are well-organized and follow the project's named export convention. All necessary Storybook types and Select components are correctly imported.
14-32: LGTM!The controlled Select example is correctly implemented with proper state management and component composition. The inline styling is appropriate for a Storybook demonstration.
34-57: LGTM!The grouped Select example effectively demonstrates the use of SelectSeparator and multiple SelectGroups. The empty initial value properly showcases the placeholder behavior.
59-69: LGTM!The Storybook meta configuration is properly structured with helpful documentation that clearly explains the composite nature of the Select component and its sub-components.
71-80: LGTM!Story exports follow Storybook conventions correctly. The default meta export is standard for Storybook, and the named story exports (Default, WithGroups) are appropriately descriptive.
frontend/packages/ui/src/components/Resizable/Resizable.stories.tsx (5)
1-7: LGTM!The import statements are well-structured and include all necessary dependencies for the Storybook stories.
9-34: LGTM!The horizontal resizable example effectively demonstrates the component API with proper state management for resize tracking. The use of inline styles is appropriate for Storybook documentation.
36-61: LGTM!The vertical resizable example mirrors the horizontal example appropriately. While there is some code duplication, it's acceptable for Storybook stories as it keeps each example self-contained and easy to understand.
63-75: LGTM!The meta configuration correctly describes the resizable components and follows Storybook conventions. The default export is necessary for Storybook integration, which is an acceptable exception to the named exports guideline.
76-84: LGTM!The story definitions are properly typed and exported. The Horizontal and Vertical stories effectively demonstrate both orientations of the resizable layout.
frontend/packages/ui/src/components/Switch/Switch.stories.tsx (1)
1-36: LGTM! Well-structured Storybook story.This story file follows best practices and is consistent with other story files in the codebase (Collapsible, Select). The controlled example clearly demonstrates Switch usage with visual feedback.
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (4)
1-8: LGTM!Imports are well-organized and follow the expected pattern for Storybook stories.
10-28: LGTM!The example component demonstrates proper usage of the Collapsible primitives with interactive state management. The implementation is appropriate for a Storybook story.
30-42: LGTM!The meta configuration follows Storybook conventions correctly. The default export on line 42 is required by Storybook's framework requirements, which is an acceptable exception to the named-exports-only guideline.
43-47: LGTM!The story definition follows best practices with proper TypeScript typing and a named export.
frontend/packages/ui/src/components/Avatar/Avatar.stories.tsx (2)
4-40: LGTM! Well-configured Storybook meta.The meta configuration is comprehensive with appropriate control types and clear descriptions for all Avatar props. The use of
satisfies Meta<typeof Avatar>ensures type safety.
45-135: Excellent story coverage.The stories comprehensively demonstrate all Avatar variants including sizes (xxs through 2xl), user types, and custom colors. Each story is clearly named and properly configured.
frontend/packages/ui/src/components/Drawer/Drawer.stories.tsx (2)
13-37: Good example component demonstrating Drawer usage.The
DrawerExampledemonstrates the complete Drawer composition pattern with proper usage ofasChildfor component composition. The inline styles are acceptable for Storybook examples.
39-49: LGTM! Clear documentation for composite component.The meta configuration appropriately documents the compositional nature of the Drawer component, making it clear that multiple sub-components work together.
frontend/packages/ui/src/components/Callout/Callout.stories.tsx (3)
4-22: Well-structured meta configuration.The meta configuration comprehensively covers all Callout variants and device modes with clear descriptions for each control.
27-60: Comprehensive variant coverage.All five callout variants are properly demonstrated with clear, variant-specific messaging.
62-76: Excellent edge case coverage.The Mobile and LongContent stories provide important test cases for responsive behavior and text wrapping, complementing the variant stories nicely.
frontend/packages/ui/src/components/RoundBadge/RoundBadge.stories.tsx (3)
4-21: Complete meta configuration for badge behavior.The meta configuration appropriately covers both visual variants and the number capping functionality with clear control descriptions.
26-52: All color variants properly demonstrated.The variant stories effectively showcase all four badge colors with distinct numbers for easy visual differentiation.
54-74: Excellent coverage of badge capabilities.The stories effectively demonstrate the number capping behavior (custom and default thresholds) and text content support, providing comprehensive examples of the component's flexibility.
frontend/packages/ui/src/logos/index.stories.tsx (2)
1-9: LGTM!Imports follow the required pattern of named exports and proper organization.
86-105: LGTM!Follows Storybook conventions correctly. The default export of
metais required by Storybook, while other exports (Storytype,AllLogosstory) properly use named exports.frontend/packages/ui/src/markers/index.stories.tsx (2)
1-6: LGTM!Imports follow the required named exports pattern.
88-107: LGTM!Follows Storybook conventions correctly with appropriate default and named exports.
frontend/packages/ui/src/icons/index.stories.tsx (3)
1-82: LGTM!Comprehensive icon imports following the named exports pattern. The large import list is appropriate for a complete showcase.
172-199: LGTM! Good style organization.Extracting styles into named constants improves readability and is a better pattern than inline styles. The
as constassertions for string literals are appropriate.
220-239: LGTM!Follows Storybook conventions correctly with appropriate exports.
frontend/packages/ui/src/components/GridTable/GridTable.stories.tsx (4)
1-9: LGTM!Imports are clean and follow the project's named export convention. All imported components are used in the example.
35-45: LGTM!The meta object is properly typed with
satisfies Meta<typeof GridTableRoot>and provides clear documentation about the GridTable's composition primitives.
47-48: LGTM!The default export and Story type alias follow Storybook conventions and match the project's established pattern.
50-52: LGTM!The Default story follows the established pattern from other component stories and uses named exports as per the coding guidelines.
junkisai
requested review from
MH4GF,
NoritakaIkeda and
sasamuku
and removed request for
a team
frontend/packages/ui/src/components/Callout/Callout.stories.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/packages/ui/src/components/Callout/Callout.stories.tsx (1)
27-68: Consider adding a story demonstrating the device prop.All variant stories are well-structured. However, the
deviceprop defined in argTypes (line 12-16) is not demonstrated in any story. Consider adding a story that showcases the mobile device styling, for example:export const Mobile: Story = { args: { variant: 'info', device: 'mobile', children: 'This is a callout optimized for mobile devices.', }, }This would make the stories more comprehensive and help developers understand the device-specific styling.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/packages/ui/src/components/Callout/Callout.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Name React component files in PascalCase and use TSX (e.g., App.tsx)
Prefix event handler functions with “handle” (e.g., handleClick)
Files:
frontend/packages/ui/src/components/Callout/Callout.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript/TSX across the codebase
**/*.{ts,tsx}: Prefer early returns for readability
Use named exports only (no default exports)
Prefer const arrow functions over function declarations for simple utilities (e.g., const toggle = () => {})
Files:
frontend/packages/ui/src/components/Callout/Callout.stories.tsx
frontend/packages/**
📄 CodeRabbit inference engine (AGENTS.md)
Shared libraries and tools live under frontend/packages
Files:
frontend/packages/ui/src/components/Callout/Callout.stories.tsx
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Follow existing import patterns and tsconfig path aliases
Files:
frontend/packages/ui/src/components/Callout/Callout.stories.tsx
⏰ 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: claude-code-action
- GitHub Check: frontend-ci
- GitHub Check: frontend-lint
- GitHub Check: security-review
🔇 Additional comments (3)
frontend/packages/ui/src/components/Callout/Callout.stories.tsx (3)
1-2: LGTM!Imports follow TypeScript and Storybook conventions correctly.
4-22: LGTM!The meta configuration is comprehensive, with well-defined argTypes and proper type safety using the
satisfieskeyword.
24-25: LGTM!The default export of the meta object and the Story type alias follow Storybook conventions correctly. (Note: The default export is a necessary framework requirement for Storybook, an acceptable exception to the no-default-exports guideline.)
Replace Button components with text content in ModalClose, ModalConfirm, and ModalTrigger to prevent invalid HTML structure. Co-authored-by: Hirotaka Miyagi <MH4GF@users.noreply.github.com>
|
@MH4GF |
|
@junkisai #3671 (comment) Please check this comment! I think it's fine to merge first and then make corrections. |
|
@MH4GF |
- Add proper label with useId() for switch-label association - Include aria-label for screen reader support - Implement visual styling with CSS variables for consistent theming - Add smooth transitions for state changes (checked/unchecked) - Style SwitchThumb with proper dimensions, shadows, and transform animations Improves component documentation and demonstrates best practices for accessible switch implementation.
junkisai
force-pushed
the
add-storybook-stories-for-ui-components
branch
from
96369c2 to
5b62b85
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
frontend/packages/ui/src/components/Switch/Switch.stories.tsx (1)
5-46: Verify click functionality is working as expected.A previous review comment indicated that clicking the switch didn't seem to work. The current implementation looks correct with proper state management (
checkedstate andonCheckedChange={setChecked}), which is the standard Radix UI Switch pattern.Please confirm that the switch is now interactive and toggles correctly when clicked. If the issue persists, it may be worth checking:
- Console for any errors
- Whether the Switch component is properly implementing the Radix UI primitives
- Browser compatibility
Based on the PR discussion, it seems this is being tracked and will be addressed if needed.
🧹 Nitpick comments (1)
frontend/packages/ui/src/components/Switch/Switch.stories.tsx (1)
16-16: Remove redundant aria-label.The
aria-labelon line 16 is unnecessary since there's already a visible label on line 11 that's properly associated with the switch viahtmlForandid. The visible label takes precedence, making thearia-labelredundant.Apply this diff to remove the redundant attribute:
<SwitchRoot id={switchId} checked={checked} onCheckedChange={setChecked} - aria-label="Airplane mode" style={{
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
frontend/packages/ui/src/components/Switch/Switch.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Name React component files in PascalCase and use TSX (e.g., App.tsx)
**/*.tsx: Prefix React event handler functions with "handle" (e.g., handleClick)
Import UI components from @liam-hq/ui when available
Import icons from @liam-hq/ui
Files:
frontend/packages/ui/src/components/Switch/Switch.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript/TSX across the codebase
**/*.{ts,tsx}: Use runtime type validation with valibot for external data validation
Prefer early returns for readability
Write simple, direct code without backward compatibility shims; update all call sites together
Use const-assigned arrow functions instead of function declarations for small utilities (e.g., const toggle = () => {})
Follow existing import patterns and tsconfig path aliases
Files:
frontend/packages/ui/src/components/Switch/Switch.stories.tsx
frontend/packages/**
📄 CodeRabbit inference engine (AGENTS.md)
Shared libraries and tools live under frontend/packages
Files:
frontend/packages/ui/src/components/Switch/Switch.stories.tsx
**/!(page).tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Use named exports only (no default exports) for React/TSX modules
Files:
frontend/packages/ui/src/components/Switch/Switch.stories.tsx
🧬 Code graph analysis (1)
frontend/packages/ui/src/components/Switch/Switch.stories.tsx (1)
frontend/packages/ui/src/components/Collapsible/Collapsible.stories.tsx (1)
Default(45-47)
⏰ 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: frontend-ci
- GitHub Check: security-review
🔇 Additional comments (3)
frontend/packages/ui/src/components/Switch/Switch.stories.tsx (3)
1-3: LGTM!Imports are appropriate and follow the project's patterns for Storybook stories.
48-60: LGTM!The meta configuration is well-structured with clear documentation describing the component's usage pattern.
63-65: LGTM!The Default story follows the established pattern from other components in this PR and effectively demonstrates the Switch component.
Issue
Why is this change needed?
This PR adds comprehensive Storybook stories for the UI component library to improve component documentation, facilitate visual testing, and enhance developer experience when working with the design system.
Changes
Added Storybook stories for the following components:
Minor cleanup:
Testing
Run Storybook to verify all stories render correctly:
cd frontend/packages/ui pnpm storybookEach story demonstrates the component's key features, props, and usage patterns.
pr_agent:summary
pr_agent:walkthrough
Summary by CodeRabbit