enhance: add shadcn components and stories #120
Conversation
WalkthroughWalkthroughThis update enhances the design system by introducing new components and updating existing ones, improving modularity and usability. Key changes include the addition of aliases for easier imports, version upgrades for several dependencies, and the introduction of various UI components like Button, Calendar, and Popover. These changes aim to streamline development and improve the overall user experience across the design system. Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![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
Outside diff range, codebase verification and nitpick comments (3)
packages/design-system/src/ui/input.tsx (1)
1-3: Consider adding a description for utility imports.The
cnutility function is imported from@/lib/utils. Ensure that this function is well-documented, as it plays a crucial role in managing class names.packages/design-system/src/ui/checkbox.tsx (1)
1-3: Ensure Radix UI components are documented.The
Checkboxcomponent relies on Radix UI'sCheckboxPrimitive. Ensure that the usage and customization of Radix UI components are well-documented for future reference.packages/design-system/src/ui/button.tsx (1)
56-56: Consider separating constants or functions to a new file.Fast refresh only works when a file only exports components. Consider moving
buttonVariantsto a separate file to adhere to this best practice.Tools
GitHub Check: Lint
[warning] 56-56:
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (17)
- packages/design-system/components.json (1 hunks)
- packages/design-system/package.json (1 hunks)
- packages/design-system/src/ui/accordion.stories.tsx (1 hunks)
- packages/design-system/src/ui/button.stories.tsx (1 hunks)
- packages/design-system/src/ui/button.tsx (1 hunks)
- packages/design-system/src/ui/calendar.stories.tsx (1 hunks)
- packages/design-system/src/ui/calendar.tsx (1 hunks)
- packages/design-system/src/ui/checkbox.stories.tsx (1 hunks)
- packages/design-system/src/ui/checkbox.tsx (1 hunks)
- packages/design-system/src/ui/input.stories.tsx (1 hunks)
- packages/design-system/src/ui/input.tsx (1 hunks)
- packages/design-system/src/ui/label.stories.tsx (1 hunks)
- packages/design-system/src/ui/label.tsx (1 hunks)
- packages/design-system/src/ui/navigation-menu.stories.tsx (1 hunks)
- packages/design-system/src/ui/navigation-menu.tsx (1 hunks)
- packages/design-system/src/ui/popover.stories.tsx (1 hunks)
- packages/design-system/src/ui/popover.tsx (1 hunks)
Files skipped from review due to trivial changes (4)
- packages/design-system/components.json
- packages/design-system/src/ui/checkbox.stories.tsx
- packages/design-system/src/ui/input.stories.tsx
- packages/design-system/src/ui/label.stories.tsx
Additional context used
GitHub Check: Lint
packages/design-system/src/ui/button.tsx
[warning] 56-56:
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between componentspackages/design-system/src/ui/navigation-menu.tsx
[warning] 119-119:
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Additional comments not posted (26)
packages/design-system/src/ui/button.stories.tsx (1)
1-9: LGTM!The setup for the Button story is clear and follows best practices for storybook components.
packages/design-system/src/ui/calendar.stories.tsx (1)
1-20: LGTM!The Calendar story is well-implemented, demonstrating state management with React hooks effectively.
packages/design-system/src/ui/label.tsx (1)
1-24: LGTM!The Label component is well-structured and uses
forwardRefeffectively. The styling approach withcvaandcnis clean and maintainable.packages/design-system/src/ui/input.tsx (1)
8-22: LGTM! Ensure consistent usage offorwardRef.The
Inputcomponent usesReact.forwardRef, which is a good practice for allowing parent components to access the input's DOM node. Ensure this pattern is consistently applied across similar components for uniformity.packages/design-system/src/ui/accordion.stories.tsx (2)
8-12: Ensure type compatibility with Storybook.The use of
satisfies StoryDefaultensures type compatibility with Storybook's expectations. This is a good practice to prevent type-related issues.
14-32: Enhance clarity with updated labels and content.The updated labels and content for the accordion items improve the clarity of the story. These changes align the component's presentation with its visual design and user experience.
packages/design-system/src/ui/checkbox.tsx (1)
7-25: LGTM! Consistent use offorwardRefand utility functions.The
Checkboxcomponent usesReact.forwardRefand utility functions for class names, which is consistent with best practices for reusable components.packages/design-system/src/ui/popover.tsx (3)
6-6: Export ofPopoveris straightforward and correct.The component is correctly exported as a direct alias for
PopoverPrimitive.Root, maintaining simplicity and consistency.
8-8: Export ofPopoverTriggeris straightforward and correct.The component is correctly exported as a direct alias for
PopoverPrimitive.Trigger, ensuring consistency with Radix UI's design.
10-27:PopoverContentcomponent is well-implemented.The component uses
forwardRefcorrectly, and the styling is handled through a utility function, ensuring flexibility and maintainability.packages/design-system/src/ui/button.tsx (2)
7-34:buttonVariantsutility is well-structured.The utility provides a flexible and maintainable approach to styling buttons with different variants and sizes.
42-54:Buttoncomponent is well-implemented.The component uses
forwardRefandbuttonVariantseffectively, and theasChildprop adds flexibility.packages/design-system/src/ui/popover.stories.tsx (1)
12-53:Defaultstory forPopoveris well-constructed.The story provides a clear and comprehensive example of the Popover component's usage, demonstrating its integration with other design system components.
packages/design-system/src/ui/calendar.tsx (2)
10-60: LGTM! Ensure accessibility compliance.The
Calendarcomponent implementation looks good. Ensure that the component is accessible, focusing on keyboard navigation and screen reader compatibility.
5-6: Verify utility functions.Ensure that the utility functions
cnandbuttonVariantsare robust and handle edge cases gracefully.Verification successful
Utility Functions Verified
The utility functions
cnandbuttonVariantsare implemented robustly. Thecnfunction effectively merges class names usingtwMergeandclsx, whilebuttonVariantsis a well-structured constant usingcvafor styling variants.
cnis located inpackages/design-system/src/lib/utils.ts.buttonVariantsis defined inpackages/design-system/src/ui/button.tsx.These implementations ensure flexibility and maintainability in styling components.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the robustness of utility functions `cn` and `buttonVariants`. # Test: Search for the utility function implementations. Expect: Proper handling of edge cases. rg --type javascript --type typescript --pattern $'function cn' -A 5 rg --type javascript --type typescript --pattern $'function buttonVariants' -A 5Length of output: 975
Script:
#!/bin/bash # Description: Verify the robustness of utility functions `cn` and `buttonVariants`. # Test: Search for the utility function implementations. Expect: Proper handling of edge cases. rg 'function cn' --type javascript --type typescript -A 5 rg 'function buttonVariants' --type javascript --type typescript -A 5Length of output: 201
Script:
#!/bin/bash # Description: Verify the robustness of utility functions `cn` and `buttonVariants`. # Test: Search for the utility function implementations. Expect: Proper handling of edge cases. rg 'function cn' --type js --type ts -A 5 rg 'function buttonVariants' --type js --type ts -A 5Length of output: 298
Script:
#!/bin/bash # Description: Search for `buttonVariants` as a variable or import. # Test: Search for `buttonVariants` declaration or import. Expect: Find its definition or source. rg 'buttonVariants' --type js --type ts -A 5Length of output: 3143
packages/design-system/package.json (1)
11-29: Verify compatibility of updated dependencies.Ensure that the updated and newly added dependencies are compatible with the existing codebase and do not introduce any breaking changes.
packages/design-system/src/ui/navigation-menu.stories.tsx (1)
1-140: LGTM! Verify story configuration.The story for
NavigationMenuis well-structured. Ensure that the configuration accurately reflects the intended use cases and that all components are correctly set up.packages/design-system/src/ui/navigation-menu.tsx (9)
26-39: LGTM!The
NavigationMenuListcomponent is straightforward and uses Radix UI primitives effectively.
41-41: LGTM!The
NavigationMenuItemcomponent is a simple re-export of the Radix UI primitive, which is appropriate.
43-45: LGTM!The
navigationMenuTriggerStyledefinition is comprehensive and uses Tailwind CSS classes effectively.
65-78: LGTM!The
NavigationMenuContentcomponent effectively uses animations and Radix UI primitives.
80-80: LGTM!The
NavigationMenuLinkcomponent is a simple re-export of the Radix UI primitive, which is appropriate.
47-63: LGTM! VerifyChevronDownicon behavior.The
NavigationMenuTriggercomponent is well-implemented and uses Radix UI primitives effectively.However, ensure that the
ChevronDownicon rotates correctly on state changes.Verification successful
ChevronDown Icon Behavior Verified
The
ChevronDownicon in theNavigationMenuTriggercomponent rotates correctly on state changes, as indicated by thegroup-data-[state=open]:rotate-180class. No further issues were found.
- Location:
packages/design-system/src/ui/navigation-menu.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the behavior of the `ChevronDown` icon in `NavigationMenuTrigger`. # Test: Search for the `ChevronDown` icon usage. Expect: Correct rotation on state changes. rg --type javascript --type typescript -A 5 $'ChevronDown'Length of output: 92
Script:
#!/bin/bash # Description: Verify the behavior of the `ChevronDown` icon in `NavigationMenuTrigger`. # Corrected Test: Search for the `ChevronDown` icon usage. Expect: Correct rotation on state changes. rg --type js --type ts -A 5 'ChevronDown'Length of output: 4178
100-116: LGTM! Verify indicator animations and positioning.The
NavigationMenuIndicatorcomponent is well-implemented and uses Radix UI primitives effectively.However, ensure that the indicator's animations and positioning are correct.
82-98: LGTM! Verify viewport positioning.The
NavigationMenuViewportcomponent is well-structured and uses Radix UI primitives effectively.However, ensure that the viewport is positioned correctly within the navigation menu.
8-23: LGTM! Verifycnutility function usage.The
NavigationMenucomponent is well-structured and uses Radix UI primitives effectively.However, ensure that the
cnutility function is correctly implemented to handle class name concatenation.Verification successful
The
cnutility function is correctly implemented.The
cnfunction usestwMergeandclsxto handle class name concatenation effectively. This ensures that Tailwind CSS classes are merged correctly and conditional class names are handled properly. No issues found with the implementation.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the implementation of the `cn` utility function. # Test: Search for the `cn` function implementation. Expect: Correct handling of class name concatenation. rg --type javascript --type typescript -A 5 $'function cn'Length of output: 94
Script:
#!/bin/bash # Description: Verify the implementation of the `cn` utility function. # Test: Search for the `cn` function implementation. Expect: Correct handling of class name concatenation. rg --type typescript --type typescriptreact -A 5 $'function cn'Length of output: 99
Script:
#!/bin/bash # Description: Locate and verify the implementation of the `cn` utility function. # Find all TypeScript and TSX files and search for the `cn` function. fd --extension ts --extension tsx --exec rg -A 5 $'function cn' {}Length of output: 148
| export { | ||
| navigationMenuTriggerStyle, | ||
| NavigationMenu, | ||
| NavigationMenuList, | ||
| NavigationMenuItem, | ||
| NavigationMenuContent, | ||
| NavigationMenuTrigger, | ||
| NavigationMenuLink, | ||
| NavigationMenuIndicator, | ||
| NavigationMenuViewport, | ||
| } |
There was a problem hiding this comment.
Consider separating navigationMenuTriggerStyle into a different file.
Fast refresh only works when a file only exports components. Consider moving navigationMenuTriggerStyle to a separate file to adhere to best practices.
Tools
GitHub Check: Lint
[warning] 119-119:
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components
Summary by CodeRabbit
New Features
Updates
Documentation