Repository navigation
Feat/template accordion - #178
Conversation
- Create AccordionTemplate with props-based API - Add AccordionItem interface for item configuration - Support all Accordion variants and behaviors - Add comprehensive Storybook stories with FAQ content
|
Review changes with Changed Files
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughExports the previously internal Changes
Sequence Diagram(s)sequenceDiagram
%%{init: {"themeVariables":{"actorBorder":"#2b6cb0","actorBg":"#ebf8ff","noteBorder":"#a0aec0","noteBg":"#f7fafc"}}}%%
participant User
participant Template as AccordionTemplate
participant Accordion
participant Item as Accordion.Item
participant Header as Accordion.Header
participant Indicator as Accordion.Indicator
participant Content as Accordion.Content
User->>Template: Render(props: items, showIndicator, ...)
Template->>Accordion: Mount with passed props
loop for each item
Accordion->>Item: Create(value, disabled)
Item->>Header: Render(title)
alt showIndicator == true
Header->>Indicator: Render indicatorIcon
end
Item->>Content: Render(item.content)
end
Content-->>User: Display expanded/collapsed content
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
libs/ui/src/molecules/accordion.tsx(1 hunks)libs/ui/src/templates/accordion.tsx(1 hunks)libs/ui/stories/templates/accordion.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
libs/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement UI library components using Zag.js for React and Tailwind CSS for styling
Files:
libs/ui/src/molecules/accordion.tsxlibs/ui/stories/templates/accordion.stories.tsxlibs/ui/src/templates/accordion.tsx
libs/ui/src/{atoms,molecules}/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/{atoms,molecules}/**/*.tsx: React 19 components must not use forwardRef; pass ref as a prop instead
Do not use useCallback in components
Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Exported React components should be PascalCase (e.g., ComponentName)
Do not use abbreviations in component names (e.g., btn, pc)
When using Zag.js, derive styles from data attributes (e.g., data-state) rather than imperative styling
Files:
libs/ui/src/molecules/accordion.tsx
libs/ui/src/molecules/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Interactive components must use Zag.js patterns (machine, useMachine, normalizeProps, connect)
Files:
libs/ui/src/molecules/accordion.tsx
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Files:
libs/ui/src/molecules/accordion.tsx
libs/ui/stories/**/*.stories.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/stories/**/*.stories.tsx: Storybook stories must exist for components and cover all variants and states
Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Files:
libs/ui/stories/templates/accordion.stories.tsx
🧠 Learnings (3)
📚 Learning: 2025-10-03T08:38:48.431Z
Learnt from: KaiUweCZE
PR: NMIT-WR/new-engine#151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Applied to files:
libs/ui/stories/templates/accordion.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
PR: NMIT-WR/new-engine#0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Storybook stories must exist for components and cover all variants and states
Applied to files:
libs/ui/stories/templates/accordion.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
PR: NMIT-WR/new-engine#0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Applied to files:
libs/ui/stories/templates/accordion.stories.tsx
🧬 Code graph analysis (2)
libs/ui/stories/templates/accordion.stories.tsx (1)
libs/ui/src/templates/accordion.tsx (1)
AccordionTemplate(20-65)
libs/ui/src/templates/accordion.tsx (2)
libs/ui/src/molecules/accordion.tsx (2)
AccordionProps(136-148)Accordion(150-199)libs/ui/src/atoms/icon.tsx (1)
IconType(5-5)
🔇 Additional comments (5)
libs/ui/src/templates/accordion.tsx (2)
1-3: LGTM! Clean imports.All necessary types and components are correctly imported.
20-65: LGTM! Well-structured template component.The implementation correctly:
- Maps items to
Accordion.Itemelements with proper keys and prop forwarding- Conditionally renders the indicator based on
showIndicator- Forwards all
AccordionPropsto the underlyingAccordioncomponent- Uses React 19 patterns (ref as a prop, no forwardRef)
- Provides sensible defaults for all optional props
libs/ui/src/molecules/accordion.tsx (1)
136-136: LGTM! Correct visibility change.Exporting
AccordionPropsis necessary to support the newAccordionTemplateand follows best practices for public API design.libs/ui/stories/templates/accordion.stories.tsx (2)
4-82: LGTM! Comprehensive Storybook configuration.The Meta configuration correctly:
- Uses the proper title hierarchy
Templates/AccordionTemplatefor the templates layer- Provides complete argTypes with appropriate controls and categorisation
- Includes helpful descriptions for documentation
As per coding guidelines.
87-118: LGTM! Well-structured default items.The FAQ content is realistic and demonstrates the accordion template effectively. The use of
text-fg-mutedsemantic token is acceptable in story files for demonstration purposes.Based on learnings.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
libs/ui/src/templates/accordion.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
libs/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement UI library components using Zag.js for React and Tailwind CSS for styling
Files:
libs/ui/src/templates/accordion.tsx
🧬 Code graph analysis (1)
libs/ui/src/templates/accordion.tsx (2)
libs/ui/src/molecules/accordion.tsx (2)
AccordionProps(136-148)Accordion(150-199)libs/ui/src/atoms/icon.tsx (1)
IconType(5-5)
🔇 Additional comments (4)
libs/ui/src/templates/accordion.tsx (4)
1-2: LGTM!The imports are properly structured and all imported entities are utilised in the component.
11-16: LGTM! Previous ref handling issue resolved.The interface now correctly inherits
reffromAccordionPropswithout redundant omission or re-declaration, addressing the feedback from the previous review.
18-33: LGTM!The function signature correctly destructures all props with sensible defaults. The explicit defaults for
variant,size, andshadowprovide clear API expectations for the template.
34-62: LGTM!The implementation correctly composes the
Accordionprimitives, properly forwards all props, and cleanly maps items toAccordion.Itemcomponents. The conditional indicator rendering provides the expected flexibility whilst maintaining a consistent layout.
|
@CodeRabbit full review |
✅ Actions performedFull review triggered. |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
libs/ui/src/templates/accordion.tsx (1)
4-9: Document the uniqueness requirement forvalue.The
valuefield is used as the React key (line 50), which requires uniqueness. Adding JSDoc documentation or runtime validation would help prevent developer errors.Consider adding documentation:
+/** + * Configuration for an individual accordion item. + * @property value - Unique identifier for the accordion item (used as React key) + * @property title - The header text displayed for the item + * @property content - The content displayed when the item is expanded + * @property disabled - Whether the item is disabled + */ export interface AccordionItem { value: string title: string content: React.ReactNode disabled?: boolean }libs/ui/stories/templates/accordion.stories.tsx (1)
120-162: Add dedicated stories for all variants and states.Whilst the Default and Playground stories provide good baseline coverage, the coding guidelines require stories to "cover all variants and states". Consider adding dedicated stories for each variant (
borderless,child), size (sm,lg), and shadow option to ensure comprehensive documentation.For example:
export const Borderless: Story = { args: { items: defaultItems, variant: 'borderless', showIndicator: true, }, } export const SmallSize: Story = { args: { items: defaultItems, size: 'sm', showIndicator: true, }, } export const WithShadow: Story = { args: { items: defaultItems, shadow: 'md', showIndicator: true, }, }As per coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
libs/ui/src/molecules/accordion.tsx(1 hunks)libs/ui/src/templates/accordion.tsx(1 hunks)libs/ui/stories/templates/accordion.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
libs/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Implement UI library components using Zag.js for React and Tailwind CSS for styling
Files:
libs/ui/stories/templates/accordion.stories.tsxlibs/ui/src/molecules/accordion.tsxlibs/ui/src/templates/accordion.tsx
libs/ui/stories/**/*.stories.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/stories/**/*.stories.tsx: Storybook stories must exist for components and cover all variants and states
Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Files:
libs/ui/stories/templates/accordion.stories.tsx
libs/ui/src/{atoms,molecules}/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/{atoms,molecules}/**/*.tsx: React 19 components must not use forwardRef; pass ref as a prop instead
Do not use useCallback in components
Component implementations should use tv() with token-based classes (no raw Tailwind arbitrary values)
Use data attributes for state-based styling (e.g., data-[state=open], data-[disabled])
Do not use arbitrary Tailwind values in class names (e.g., bg-[#ff0000], bg-[var(--...)]); use token classes instead
Do not use direct semantic tokens like bg-primary; use component-specific token classes (e.g., bg-button-bg-primary)
Exported React components should be PascalCase (e.g., ComponentName)
Do not use abbreviations in component names (e.g., btn, pc)
When using Zag.js, derive styles from data attributes (e.g., data-state) rather than imperative styling
Files:
libs/ui/src/molecules/accordion.tsx
libs/ui/src/molecules/**/*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Interactive components must use Zag.js patterns (machine, useMachine, normalizeProps, connect)
Files:
libs/ui/src/molecules/accordion.tsx
libs/ui/src/{atoms,molecules}/[a-z0-9-]*.tsx
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Component files must be placed under src/atoms or src/molecules and named in kebab-case (component-name.tsx)
Files:
libs/ui/src/molecules/accordion.tsx
🧠 Learnings (3)
📚 Learning: 2025-10-03T08:38:48.431Z
Learnt from: KaiUweCZE
PR: NMIT-WR/new-engine#151
File: libs/ui/stories/molecules/product-card.stories.tsx:214-227
Timestamp: 2025-10-03T08:38:48.431Z
Learning: Story files in libs/ui/stories/**/*.tsx can use semantic tokens (e.g., bg-accent, text-accent-fg, hover:bg-accent-hover) for demonstration purposes, unlike component implementation files which should use component-specific token classes.
Applied to files:
libs/ui/stories/templates/accordion.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
PR: NMIT-WR/new-engine#0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Storybook stories must exist for components and cover all variants and states
Applied to files:
libs/ui/stories/templates/accordion.stories.tsx
📚 Learning: 2025-09-07T21:30:50.058Z
Learnt from: CR
PR: NMIT-WR/new-engine#0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-09-07T21:30:50.058Z
Learning: Applies to libs/ui/stories/**/*.stories.tsx : Use Storybook title hierarchy matching the layer (e.g., Atoms/ComponentName)
Applied to files:
libs/ui/stories/templates/accordion.stories.tsx
🔇 Additional comments (5)
libs/ui/src/molecules/accordion.tsx (1)
136-136: LGTM! Clean public API exposure.Exporting
AccordionPropsenables the template layer to extend it properly. This follows good practice for building composable component architectures.libs/ui/src/templates/accordion.tsx (2)
11-16: LGTM! Clean interface extension.The interface correctly extends
AccordionPropsby omitting onlychildrenand adding template-specific props. Therefis properly inherited without redundancy.
34-62: LGTM! Clean template implementation.The component correctly maps items to the compound Accordion structure, conditionally renders the indicator, and forwards all props appropriately.
libs/ui/stories/templates/accordion.stories.tsx (2)
4-82: LGTM! Comprehensive Storybook configuration.The meta configuration follows best practices with proper title hierarchy, thorough argTypes with categories, and clear documentation. Well done!
87-118: LGTM! Good demo content with appropriate styling.The FAQ content provides realistic examples, and the use of semantic tokens like
text-fg-mutedin story content is appropriate per established patterns.Based on learnings.
Create AccordionTemplate with props-based API
Add AccordionItem interface for item configuration
Support all Accordion variants and behaviors
Add comprehensive Storybook stories with FAQ content
Summary by CodeRabbit
New Features
API
Documentation