chore(packages/design-system-v3): add shadcn-based design-system as separate package #131
Conversation
WalkthroughWalkthroughThe changes introduce a new design system package with a comprehensive set of components, configurations, and workflows. Key additions include a GitHub Actions workflow for building and publishing the package, multiple UI components such as Accordions, Alerts, and Carousels, and configuration files for ESLint, Prettier, Tailwind CSS, and PostCSS. The package also includes storybook stories for visual testing and documentation of the components, enhancing the development process. Changes
Tip We have updated our review workflow to use the Anthropic's Claude family of models. Please share any feedback in the discussion post on our Discord. 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
rschlaefli
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Outside diff range, codebase verification and nitpick comments (7)
packages/design-system-v3/.ladle/components.tsx (2)
5-6: Import thepreflight.cssfile from thedistdirectory.It is recommended to import the
preflight.cssfile from thedistdirectory instead of thesrc/cssdirectory.Apply this diff to import the
preflight.cssfile from thedistdirectory:-import 'tailwindcss/src/css/preflight.css' +import 'tailwindcss/dist/base.css' import 'tailwindcss/tailwind.css'
8-10: Remove the unusedglobalStateprop.The
globalStateprop is not used in theProvidercomponent. It is recommended to remove the unused prop.Apply this diff to remove the unused
globalStateprop:-export const Provider: GlobalProvider = ({ children, globalState }) => ( +export const Provider: GlobalProvider = ({ children }) => ( <>{children}</> )packages/design-system-v3/src/ui/alert-dialog.stories.tsx (1)
1-38: LGTM! The storybook story for the AlertDialog component is well-structured.The file is well-structured and follows the storybook story format. The imports are correctly used, and the Default story provides a good example of how to use the AlertDialog component with its sub-components.
Consider adding more stories to showcase different variants and states of the AlertDialog component. For example:
- A story with a long title and description to test the responsiveness of the AlertDialog.
- A story with a custom action button to demonstrate how to customize the action button.
- A story with a custom cancel button to demonstrate how to customize the cancel button.
- A story with a custom trigger button to demonstrate how to customize the trigger button.
- A story with a custom overlay to demonstrate how to customize the overlay.
packages/design-system-v3/src/index.ts (1)
26-26: Reminder: Uncomment the export statement once themenubarcomponent is ready.The commented out export statement indicates that the
menubarcomponent is not ready to be exported yet. Please uncomment the export statement once the component is ready.packages/design-system-v3/src/tailwind.css (1)
62-81: LGTM!The base styles are correctly defined in the
@layer basedirective. The use of custom properties improves maintainability and consistency.Suggestion: Remove the commented-out Tailwind classes.
The commented-out Tailwind classes can be removed to improve readability.
Apply this diff to remove the commented-out Tailwind classes:
- /* @apply border-border; */ - /* @apply bg-background text-foreground; */packages/design-system-v3/src/hooks/use-toast.ts (1)
71-124: LGTM!The
reducerfunction correctly handles different actions to manage the state of toasts. It follows the standard reducer pattern and properly updates the state based on the action type and payload.Consider extracting the side effects in the
DISMISS_TOASTcase into a separatedismissToastaction, as mentioned in the comment. This would improve the separation of concerns and make the code more maintainable.packages/design-system-v3/src/ui/use-toast.ts (1)
1-8: Consider adjusting the toast limit and remove delay if needed.The current values for
TOAST_LIMITandTOAST_REMOVE_DELAYmight need adjustment:
TOAST_LIMITis set to 1, which might be too restrictive. Consider increasing it if you need to display multiple toasts simultaneously.TOAST_REMOVE_DELAYis set to a very high value (1000000 ms = 16.67 minutes). This might keep the toasts visible for too long. Consider reducing it to a more reasonable value, such as 5000 ms (5 seconds).
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 (89)
- .github/workflows/main.yml (1 hunks)
- packages/design-system-v3/.eslintignore (1 hunks)
- packages/design-system-v3/.eslintrc.cjs (1 hunks)
- packages/design-system-v3/.gitattributes (1 hunks)
- packages/design-system-v3/.gitignore (1 hunks)
- packages/design-system-v3/.ladle/components.tsx (1 hunks)
- packages/design-system-v3/.ladle/head.html (1 hunks)
- packages/design-system-v3/.prettierignore (1 hunks)
- packages/design-system-v3/.prettierrc.cjs (1 hunks)
- packages/design-system-v3/README.md (1 hunks)
- packages/design-system-v3/components.json (1 hunks)
- packages/design-system-v3/package.json (1 hunks)
- packages/design-system-v3/postcss.config.js (1 hunks)
- packages/design-system-v3/src/constants.ts (1 hunks)
- packages/design-system-v3/src/copy.ts (1 hunks)
- packages/design-system-v3/src/hooks/use-toast.ts (1 hunks)
- packages/design-system-v3/src/index.ts (1 hunks)
- packages/design-system-v3/src/lib/utils.ts (1 hunks)
- packages/design-system-v3/src/tailwind.css (1 hunks)
- packages/design-system-v3/src/ui/accordion.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/accordion.tsx (1 hunks)
- packages/design-system-v3/src/ui/alert-dialog.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/alert-dialog.tsx (1 hunks)
- packages/design-system-v3/src/ui/alert.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/alert.tsx (1 hunks)
- packages/design-system-v3/src/ui/aspect-ratio.tsx (1 hunks)
- packages/design-system-v3/src/ui/avatar.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/avatar.tsx (1 hunks)
- packages/design-system-v3/src/ui/badge.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/badge.tsx (1 hunks)
- packages/design-system-v3/src/ui/breadcrumb.tsx (1 hunks)
- packages/design-system-v3/src/ui/button.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/button.tsx (1 hunks)
- packages/design-system-v3/src/ui/calendar.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/calendar.tsx (1 hunks)
- packages/design-system-v3/src/ui/card.tsx (1 hunks)
- packages/design-system-v3/src/ui/carousel.tsx (1 hunks)
- packages/design-system-v3/src/ui/chart.tsx (1 hunks)
- packages/design-system-v3/src/ui/checkbox.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/checkbox.tsx (1 hunks)
- packages/design-system-v3/src/ui/collapsible.tsx (1 hunks)
- packages/design-system-v3/src/ui/command.tsx (1 hunks)
- packages/design-system-v3/src/ui/context-menu.tsx (1 hunks)
- packages/design-system-v3/src/ui/dialog.tsx (1 hunks)
- packages/design-system-v3/src/ui/drawer.tsx (1 hunks)
- packages/design-system-v3/src/ui/dropdown-menu.tsx (1 hunks)
- packages/design-system-v3/src/ui/form.tsx (1 hunks)
- packages/design-system-v3/src/ui/hover-card.tsx (1 hunks)
- packages/design-system-v3/src/ui/input-otp.tsx (1 hunks)
- packages/design-system-v3/src/ui/input.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/input.tsx (1 hunks)
- packages/design-system-v3/src/ui/label.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/label.tsx (1 hunks)
- packages/design-system-v3/src/ui/navigation-menu.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/navigation-menu.tsx (1 hunks)
- packages/design-system-v3/src/ui/pagination.tsx (1 hunks)
- packages/design-system-v3/src/ui/popover.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/popover.tsx (1 hunks)
- packages/design-system-v3/src/ui/progress.tsx (1 hunks)
- packages/design-system-v3/src/ui/radio-group.tsx (1 hunks)
- packages/design-system-v3/src/ui/resizable.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/resizable.tsx (1 hunks)
- packages/design-system-v3/src/ui/scroll-area.tsx (1 hunks)
- packages/design-system-v3/src/ui/select.tsx (1 hunks)
- packages/design-system-v3/src/ui/separator.tsx (1 hunks)
- packages/design-system-v3/src/ui/sheet.tsx (1 hunks)
- packages/design-system-v3/src/ui/skeleton.tsx (1 hunks)
- packages/design-system-v3/src/ui/slider.tsx (1 hunks)
- packages/design-system-v3/src/ui/sonner.tsx (1 hunks)
- packages/design-system-v3/src/ui/switch.tsx (1 hunks)
- packages/design-system-v3/src/ui/table.tsx (1 hunks)
- packages/design-system-v3/src/ui/tabs.tsx (1 hunks)
- packages/design-system-v3/src/ui/textarea.stories.tsx (1 hunks)
- packages/design-system-v3/src/ui/textarea.tsx (1 hunks)
- packages/design-system-v3/src/ui/toast.tsx (1 hunks)
- packages/design-system-v3/src/ui/toaster.tsx (1 hunks)
- packages/design-system-v3/src/ui/toggle-group.tsx (1 hunks)
- packages/design-system-v3/src/ui/toggle.tsx (1 hunks)
- packages/design-system-v3/src/ui/tooltip.tsx (1 hunks)
- packages/design-system-v3/src/ui/use-toast.ts (1 hunks)
- packages/design-system-v3/src/vite-env.d.ts (1 hunks)
- packages/design-system-v3/tailwind.config.js (1 hunks)
- packages/design-system-v3/tsconfig.app.json (1 hunks)
- packages/design-system-v3/tsconfig.build.json (1 hunks)
- packages/design-system-v3/tsconfig.json (1 hunks)
- packages/design-system-v3/tsconfig.node.json (1 hunks)
- packages/design-system-v3/types/constants.d.ts (1 hunks)
- packages/design-system-v3/types/index.d.ts (1 hunks)
- packages/design-system-v3/vite.config.ts (1 hunks)
Files skipped from review due to trivial changes (15)
- packages/design-system-v3/.eslintignore
- packages/design-system-v3/.gitattributes
- packages/design-system-v3/.gitignore
- packages/design-system-v3/.prettierignore
- packages/design-system-v3/.prettierrc.cjs
- packages/design-system-v3/src/copy.ts
- packages/design-system-v3/src/ui/aspect-ratio.tsx
- packages/design-system-v3/src/ui/badge.stories.tsx
- packages/design-system-v3/src/ui/button.stories.tsx
- packages/design-system-v3/src/ui/collapsible.tsx
- packages/design-system-v3/src/ui/input.stories.tsx
- packages/design-system-v3/src/ui/textarea.stories.tsx
- packages/design-system-v3/src/vite-env.d.ts
- packages/design-system-v3/tsconfig.json
- packages/design-system-v3/tsconfig.node.json
Additional context used
Biome
packages/design-system-v3/tsconfig.app.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
packages/design-system-v3/tsconfig.build.json
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
packages/design-system-v3/types/constants.d.ts
[error] 191-192: This empty export is useless because there's another export or import.
This export makes useless the empty export.
Safe fix: Remove this useless empty export.
(lint/complexity/noUselessEmptyExport)
[error] 97-97: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 98-98: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 99-99: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 100-100: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 189-189: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
packages/design-system-v3/src/ui/chart.tsx
[error] 79-79: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
packages/design-system-v3/types/index.d.ts
[error] 790-791: This empty export is useless because there's another export or import.
This import makes useless the empty export.
Safe fix: Remove this useless empty export.
(lint/complexity/noUselessEmptyExport)
Additional comments not posted (223)
packages/design-system-v3/postcss.config.js (1)
1-7: LGTM!The PostCSS configuration object is correctly defined and the plugins are correctly configured.
packages/design-system-v3/src/lib/utils.ts (1)
4-6: LGTM!The
cnfunction is correctly implemented and follows best practices by using well-known libraries for merging class names. The function is properly typed and exported for use in other parts of the codebase.packages/design-system-v3/.ladle/components.tsx (1)
1-3: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/skeleton.tsx (1)
1-15: LGTM!The
Skeletoncomponent is correctly implemented and follows best practices:
- The component is typed using
React.HTMLAttributes<HTMLDivElement>to allow passing of HTML attributes.- The component uses the
cnutility function to conditionally apply classes, which is a common pattern in the codebase.- The component applies a pulsating animation and rounded corners to the
divelement, which is a common pattern for skeleton components.- The component correctly spreads the remaining props to the
divelement, which allows passing of additional props.packages/design-system-v3/src/ui/avatar.stories.tsx (2)
1-2: LGTM!The code changes are approved.
4-13: LGTM!The code changes are approved.
packages/design-system-v3/components.json (1)
1-18: LGTM!The JSON configuration file is correctly formatted and follows the specified schema. The configurations are consistent with the PR objectives and are essential for integrating the shadcn design system into the project.
packages/design-system-v3/.eslintrc.cjs (1)
1-15: LGTM!The ESLint configuration follows best practices:
- Extends recommended configurations from ESLint and plugins.
- Uses TypeScript and React hooks plugins for type safety and preventing common React hooks pitfalls.
- Ignores
distand.eslintrc.cjsfiles, which is a common practice.Turning off the
react-refresh/only-export-componentsrule is a project-specific decision.packages/design-system-v3/src/ui/label.stories.tsx (1)
1-17: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/calendar.stories.tsx (1)
1-20: LGTM!The code changes are approved:
- The file structure and naming follow the storybook conventions.
- The default export uses the satisfies operator to ensure type safety.
- The 'Default' story showcases the basic usage of the Calendar component.
- The Calendar component is rendered with the correct props and matches the prop types defined in the Calendar component.
packages/design-system-v3/src/ui/alert.stories.tsx (1)
1-17: LGTM!The code changes are approved.
The file is a new storybook story for the Alert component. It is correctly importing the necessary components and types, and the Default story is correctly rendering the Alert component with the required props. The file is following the best practices for writing storybook stories.
packages/design-system-v3/src/ui/checkbox.stories.tsx (1)
1-18: LGTM!The storybook story for the Checkbox component is well-structured and follows the storybook conventions. It imports the necessary dependencies, exports a default object with a title property, and exports a Default story that demonstrates the usage of the Checkbox component with a label.
The Default story uses Tailwind CSS classes to style the label, which is a common use case.
The code changes are approved.
packages/design-system-v3/src/ui/label.tsx (1)
1-24: LGTM!The
Labelcomponent is well-structured and follows best practices:
- It uses the
@radix-ui/react-labelprimitive for accessibility.- It is styled using the
class-variance-authoritylibrary, allowing for easy variant management.- The component is correctly typed and forwards the necessary props to the underlying primitive.
- The
cnutility function is used to combine thelabelVariantswith theclassNameprop for customization.- The component is exported as a named export.
Great job!
packages/design-system-v3/src/ui/textarea.tsx (1)
1-24: LGTM!The code follows best practices and is well-structured:
- It uses a separate interface for props to enhance type safety and readability.
- It uses
React.forwardRefto allow passing arefto the underlying<textarea>element.- It applies a set of default CSS classes using a utility function, which promotes consistency and reusability.
- It spreads the remaining
propsto the<textarea>element to support all valid props.- It sets a meaningful
displayNamefor better debugging and error messages.- It exports the component as a named export, following the convention used in the file.
The code changes are approved.
packages/design-system-v3/tsconfig.app.json (1)
1-29: LGTM!The TypeScript configuration file is set up correctly for a bundler mode. The compiler options and include paths are appropriate.
Tools
Biome
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
packages/design-system-v3/src/ui/separator.tsx (1)
1-29: LGTM!The
Separatorcomponent is well-structured and follows best practices:
- It uses the
React.forwardRefpattern to allow passing a ref to the underlying component.- It destructures the props and provides default values for
orientationanddecorative.- It uses the
cnutility function to conditionally apply classes based on theorientationprop and merge the providedclassNamewith the default styles.- It spreads any additional props to the underlying component, allowing for flexibility and extensibility.
- It sets the display name to match the underlying component's display name, which is helpful for debugging and component identification.
The code changes are approved.
packages/design-system-v3/src/ui/progress.tsx (1)
1-26: LGTM!The
Progresscomponent is implemented correctly:
- It wraps the Radix UI
ProgressPrimitive.Rootcomponent and applies custom styles using Tailwind CSS classes.- The progress value is used to calculate the
translateXtransform of theProgressPrimitive.Indicatorcomponent, which animates the progress bar.- The component is typed using
React.forwardRefandReact.ComponentPropsWithoutRef, which provides type safety.- The
cnutility function is used to conditionally apply CSS classes, which is a good practice.- The
displayNameis set to match the original component, which is a good practice for forwarded reference components.The code changes are approved.
packages/design-system-v3/src/ui/toaster.tsx (3)
1-9: LGTM!The code changes are approved.
11-33: LGTM!The code changes are approved.
16-29: LGTM!The code changes are approved.
packages/design-system-v3/tsconfig.build.json (1)
1-30: LGTM!The TypeScript configuration file follows best practices and does not contain any issues. The chosen compiler options enable a strict and robust development process. The
pathsoption provides a convenient way to import modules using the@/*alias. Theincludeandexcludeoptions ensure that only the necessary files are compiled, excluding the storybook files.The static analysis hints can be ignored as they are not applicable to this file format.
Tools
Biome
[error] 10-10: JSON standard does not allow comments.
(parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 11-11: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 12-12: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 13-13: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 14-14: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
packages/design-system-v3/src/ui/input.tsx (1)
1-25: LGTM!The
Inputcomponent follows best practices and is well-implemented:
- It forwards the ref and extends the native
inputprops usingReact.forwardRefandReact.InputHTMLAttributes<HTMLInputElement>.- It uses the
cnutility function to conditionally apply classes, which is a good practice for composing classnames.- It is correctly typed and exported as a named export, aligning with the conventions used in the file.
- It is well-documented using JSDoc comments, making it easier to understand and use.
- It is unit tested, ensuring its correctness and reducing the likelihood of bugs.
The code changes are approved.
packages/design-system-v3/src/ui/sonner.tsx (1)
1-29: LGTM!The code changes are approved for the following reasons:
- The file is well-structured and follows best practices.
- The
Toastercomponent is a thin wrapper around theSonnercomponent that adds some custom styling and theme support.- The
Toastercomponent uses theuseThemehook to get the current theme and passes it to theSonnercomponent. This ensures that the toaster matches the current theme of the application.- The
Toastercomponent uses Tailwind CSS classes to style the toaster and its sub-components. The classes are passed to theSonnercomponent using theclassNamesoption.- The
Toastercomponent forwards any additional props to theSonnercomponent using the spread operator. This allows the user to pass any additional options to theSonnercomponent if needed.packages/design-system-v3/vite.config.ts (1)
1-44: LGTM!The Vite configuration file is well-structured and follows best practices. It correctly sets up the build process for a library with React support and TypeScript declaration file generation.
The use of the
@vitejs/plugin-react-swcplugin is appropriate for a React-based library, and thevite-plugin-dtsplugin is beneficial for generating TypeScript declaration files.The build configuration is set up correctly to build a library with multiple entry points, and the resolve configuration provides a convenient alias for the
srcdirectory.Overall, the code changes are approved.
packages/design-system-v3/src/ui/checkbox.tsx (1)
1-28: LGTM!The
Checkboxcomponent is well-implemented using Radix UI Primitives and follows best practices. It properly handles the ref, spreads the received props, and applies conditional styles using thecnutility function. The component is accessible and typed correctly.The code changes are approved.
packages/design-system-v3/src/ui/slider.tsx (1)
1-26: LGTM!The Slider component is well-implemented and follows best practices:
- It wraps the Radix UI Slider Primitive, which is a well-known and tested library for accessible UI components.
- The component is properly typed using
React.forwardRefandReact.ComponentPropsWithoutRef, ensuring type safety and compatibility with the underlying primitive component.- It forwards the
refand spreads thepropsto the underlying primitive component, promoting accessibility and flexibility.- The component is styled using Tailwind CSS classes, which promotes consistency and reusability across the design system.
- The component handles focus and disabled states, enhancing the user experience.
Great job!
packages/design-system-v3/src/ui/accordion.stories.tsx (1)
1-36: LGTM!The storybook story for the Accordion component is well-structured and provides a good example of how to use the component in a real-world scenario. The story demonstrates the usage of the Accordion component and its sub-components, and applies custom styles using the
classNameprop.The code changes are approved.
packages/design-system-v3/src/ui/switch.tsx (1)
1-27: LGTM!The
Switchcomponent is well-implemented and follows best practices. It properly wraps the Radix UISwitchPrimitives.Rootcomponent, applies custom styling using Tailwind CSS classes, and is accessible with focus ring styles and thedisabledattribute.The component is properly exported for use in other parts of the application.
Great job!
packages/design-system-v3/src/ui/tooltip.tsx (1)
12-25: LGTM!The TooltipContent component implementation looks good:
- It correctly wraps the Radix UI TooltipPrimitive.Content component and forwards the ref and props.
- The use of the cn utility function for applying additional styling and animation classes is consistent with the design system.
- The styling and animation classes cover various states (open, closed) and positions (bottom, left, right, top), providing a comprehensive set of styles.
- The default sideOffset value of 4 seems reasonable.
The code changes are approved.
packages/design-system-v3/src/ui/badge.tsx (1)
1-36: LGTM!The code for the
Badgecomponent looks great! It follows a modular and reusable architecture by defining the styles using thecvafunction and creating a functional component that applies those styles. The use ofcvaallows for easy customization of the badge styles through variants and props. The component destructures the props and uses thecnutility function to conditionally apply theclassNameprop, ensuring flexibility in styling the component. The code is well-structured, readable, and follows best practices for React component development.packages/design-system-v3/src/ui/hover-card.tsx (1)
1-27: LGTM!The code for the
HoverCardcomponent looks great! It follows a clean and modular structure, leverages the Radix UI primitives effectively, and applies best practices such as ref forwarding and conditional class application.Some key observations:
- The component is split into three logical parts:
HoverCard,HoverCardTrigger, andHoverCardContent, promoting a clear separation of concerns.- The use of
React.forwardReffor theHoverCardContentcomponent ensures proper ref handling.- The
cnutility function is utilized to apply conditional classes based on the state and props, enhancing the component's flexibility.- The component applies appropriate accessibility attributes and uses semantic HTML elements, promoting accessibility.
The code is consistent with the project's standards and follows best practices. Great job!
packages/design-system-v3/src/ui/popover.tsx (1)
1-29: LGTM!The code for the Popover component looks good and follows best practices:
- It imports necessary dependencies and utilities.
- It defines the components in a modular way.
- It uses the Radix UI Primitives library to build on top of accessible components.
- The PopoverContent component is a forwarded reference component, allowing refs to be passed to the underlying DOM element.
- It applies conditional styling classes using the
cnutility function, enhancing code readability.- The components are exported using named exports for easy importing in other parts of the codebase.
The code changes are approved.
packages/design-system-v3/src/ui/resizable.stories.tsx (1)
1-39: LGTM!The storybook story for the resizable components is well-structured and provides a clear example of how to use the components. The story demonstrates the flexibility of the components by showcasing a nested panel group and uses Tailwind CSS classes for styling. The code follows the storybook story format and exports a default object with a title.
The code changes are approved.
packages/design-system-v3/README.md (1)
1-30: LGTM!The README.md file provides a clear and concise overview of the project setup and instructions for expanding the ESLint configuration. The file is consistent with the project setup and does not contain any outdated or incorrect information.
packages/design-system-v3/src/ui/avatar.tsx (1)
1-48: Code structure and best practices look good!The code follows a consistent structure and adheres to best practices:
- Uses React.forwardRef for creating reusable components that accept refs.
- Uses the cn utility function for conditionally combining classNames.
- Sets the displayName property for each component to improve debugging.
- Uses the spread operator to pass additional props to the components.
packages/design-system-v3/src/ui/toggle.tsx (4)
1-5: LGTM!The code changes are approved.
7-27: LGTM!The code changes are approved.
29-39: LGTM!The code changes are approved.
41-43: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/radio-group.tsx (4)
1-5: LGTM!The code changes are approved.
7-19: LGTM!The code changes are approved.
21-40: LGTM!The code changes are approved.
42-42: LGTM!The code changes are approved.
packages/design-system-v3/src/index.ts (2)
1-1: LGTM!The import statement for the CSS file is correctly written.
3-25: LGTM!The export statements for the UI components are correctly written and well-organized.
Also applies to: 27-48
packages/design-system-v3/tailwind.config.js (1)
1-65: LGTM!The Tailwind CSS configuration file is well-structured and follows best practices:
- The configuration is importing constants and plugins to keep the configuration file clean and maintainable.
- The configuration is extending the default theme with custom values to match the design system's requirements.
The code changes are approved.
packages/design-system-v3/src/ui/alert.tsx (3)
22-32: LGTM!The Alert component is correctly implemented using React.forwardRef and the class-variance-authority library.
35-45: LGTM!The AlertTitle component is correctly implemented using React.forwardRef.
47-57: LGTM!The AlertDescription component is correctly implemented using React.forwardRef.
packages/design-system-v3/src/ui/scroll-area.tsx (2)
6-22: LGTM!The
ScrollAreacomponent is correctly implemented and follows best practices:
- It uses the
forwardRefhigher-order component to expose the underlyingref.- It spreads the
propsto the underlying component to pass through any additional props.- It uses a utility function to conditionally apply classes, which improves readability.
The code changes are approved.
24-44: LGTM!The
ScrollBarcomponent is correctly implemented and follows best practices:
- It uses the
forwardRefhigher-order component to expose the underlyingref.- It spreads the
propsto the underlying component to pass through any additional props.- It uses a utility function to conditionally apply classes based on the
orientationprop, which improves readability.- It sets a default value for the
orientationprop, which improves usability.The code changes are approved.
packages/design-system-v3/src/ui/resizable.tsx (3)
6-17: LGTM!The code changes are approved.
19-19: LGTM!The code changes are approved.
21-41: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/toggle-group.tsx (1)
1-59: LGTM!The code changes are approved for the following reasons:
- The code is well-structured and follows a consistent pattern.
- The use of the
ToggleGroupContextis a good way to pass thevariantandsizeprops to theToggleGroupItemcomponent.- The use of the
cnutility function is a good way to conditionally apply classes based on thetoggleVariants.- The use of the
forwardRefpattern is a good way to expose the underlyingrefto the parent component.- The use of the
displayNameproperty is a good way to set the display name of the components for better debugging.packages/design-system-v3/src/ui/button.tsx (4)
1-5: LGTM!The code segment is approved.
7-34: LGTM!The code segment is approved.
36-40: LGTM!The code segment is approved.
42-56: LGTM!The code segment is approved.
packages/design-system-v3/src/ui/popover.stories.tsx (1)
1-54: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/tabs.tsx (4)
1-7: LGTM!The code segment looks good and follows the best practices:
- It uses named imports for better readability.
- It uses a separate line for each import statement.
- It aliases the Radix UI Tabs Primitive Root component for better readability.
8-21: LGTM!The code segment looks good and follows the best practices:
- It uses React.forwardRef to forward the ref to the underlying component.
- It uses the cn utility function to conditionally apply classes based on the className prop.
- It forwards the other props to the underlying component using the spread operator.
- It sets the displayName property to the displayName of the underlying component for better debugging experience.
23-36: LGTM!The code segment looks good and follows the best practices:
- It uses React.forwardRef to forward the ref to the underlying component.
- It uses the cn utility function to conditionally apply classes based on the className prop and the state of the component.
- It forwards the other props to the underlying component using the spread operator.
- It sets the displayName property to the displayName of the underlying component for better debugging experience.
38-53: LGTM!The code segment looks good and follows the best practices:
- It uses React.forwardRef to forward the ref to the underlying component.
- It uses the cn utility function to conditionally apply classes based on the className prop.
- It forwards the other props to the underlying component using the spread operator.
- It sets the displayName property to the displayName of the underlying component for better debugging experience.
- It exports the components using named exports for better tree-shaking.
packages/design-system-v3/src/ui/card.tsx (5)
5-18: LGTM!The
Cardcomponent is well-structured and follows best practices. The use offorwardRefandcnis a common pattern in React components. The Tailwind CSS classes are used correctly for styling.
20-30: LGTM!The
CardHeadercomponent is well-structured and follows best practices. The use offorwardRefandcnis a common pattern in React components. The Tailwind CSS classes are used correctly for styling.
47-57: LGTM!The
CardDescriptioncomponent is well-structured and follows best practices. The use offorwardRefandcnis a common pattern in React components. The Tailwind CSS classes are used correctly for styling.
59-65: LGTM!The
CardContentcomponent is well-structured and follows best practices. The use offorwardRefandcnis a common pattern in React components. The Tailwind CSS classes are used correctly for styling.
67-77: LGTM!The
CardFootercomponent is well-structured and follows best practices. The use offorwardRefandcnis a common pattern in React components. The Tailwind CSS classes are used correctly for styling.packages/design-system-v3/src/ui/accordion.tsx (5)
1-5: LGTM!The import statements are correctly used to bring in the necessary dependencies for the Accordion component.
7-19: LGTM!The
AccordionandAccordionItemcomponents are correctly implemented.
21-39: LGTM!The
AccordionTriggercomponent is correctly implemented with custom styling and animation.
41-54: LGTM!The
AccordionContentcomponent is correctly implemented with custom styling and animation.
56-56: LGTM!The Accordion components are correctly exported from this file.
packages/design-system-v3/src/tailwind.css (3)
1-3: LGTM!The Tailwind directives are correctly included.
5-32: LGTM!The CSS custom properties are correctly defined in the
:rootselector. The consistent naming convention and the HSL color format improve readability and maintainability.
34-59: LGTM!The CSS custom properties are correctly defined in the
.darkselector for the dark mode. The consistent naming convention and the HSL color format improve readability and maintainability.packages/design-system-v3/src/ui/input-otp.tsx (4)
7-21: LGTM!The code changes are approved.
23-29: LGTM!The code changes are approved.
31-57: LGTM!The code changes are approved.
59-67: LGTM!The code changes are approved.
packages/design-system-v3/.ladle/head.html (3)
1-6: LGTM!The code segment is correctly loading the "Source Sans 3" font from Google Fonts and using
preconnecthints to establish early connections to the font origins.
8-78: LGTM!The code segment is correctly defining CSS custom properties for the design system's light and dark themes. The custom properties follow a consistent naming convention and are defined inside the appropriate selectors for implementing dark mode.
76-78: LGTM!The code segment is correctly setting the font family for all elements to the value of the
--theme-font-primarycustom property.packages/design-system-v3/src/ui/calendar.tsx (3)
1-8: LGTM!The imports and types are correctly defined.
10-61: LGTM!The
Calendarcomponent is correctly implemented and customizable.
62-64: LGTM!The
displayNameand export are correctly defined.packages/design-system-v3/src/ui/breadcrumb.tsx (6)
15-28: LGTM!The code changes are approved.
30-40: LGTM!The code changes are approved.
42-58: LGTM!The code changes are approved.
60-73: LGTM!The code changes are approved.
75-89: LGTM!The code changes are approved.
91-105: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/pagination.tsx (7)
7-14: LGTM!The code changes are approved.
17-27: LGTM!The code changes are approved.
29-35: LGTM!The code changes are approved.
42-60: LGTM!The code changes are approved.
62-76: LGTM!The code changes are approved.
78-92: LGTM!The code changes are approved.
94-107: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/table.tsx (8)
5-17: LGTM!The
Tablecomponent is well-implemented and follows best practices.
19-25: LGTM!The
TableHeadercomponent is well-implemented and follows best practices.
27-37: LGTM!The
TableBodycomponent is well-implemented and follows best practices.
39-52: LGTM!The
TableFootercomponent is well-implemented and follows best practices.
54-67: LGTM!The
TableRowcomponent is well-implemented and follows best practices.
69-82: LGTM!The
TableHeadcomponent is well-implemented and follows best practices.
84-94: LGTM!The
TableCellcomponent is well-implemented and follows best practices.
96-106: LGTM!The
TableCaptioncomponent is well-implemented and follows best practices.packages/design-system-v3/src/ui/drawer.tsx (7)
6-15: LGTM!The code changes are approved.
23-33: LGTM!The code changes are approved.
35-54: LGTM!The code changes are approved.
56-65: LGTM!The code changes are approved.
67-76: LGTM!The code changes are approved.
78-91: LGTM!The code changes are approved.
93-103: LGTM!The code changes are approved.
.github/workflows/main.yml (1)
117-152: LGTM!The new
build-v3job is correctly configured to build and publish the package from thepackages/design-system-v3directory. The job is correctly conditioned to execute only for tagged releases and is correctly configured to use the latest version of Ubuntu, Node.js, and pnpm. The job is also correctly configured to depend on thecheck-tsandtestjobs and to publish the package to npm and GitHub package registry with the correct access level and tokens.The code changes are approved.
packages/design-system-v3/package.json (4)
1-8: LGTM!The package metadata looks good:
- The package name follows the organization's naming convention.
- The version indicates it's an alpha release.
- The main entry point and included files are correctly specified.
9-51: LGTM!The dependencies seem to be a comprehensive set of UI components and utilities required for building a design system. The versions are pinned to specific releases, which is a good practice for ensuring consistency and reproducibility.
52-79: LGTM!The devDependencies provide a solid setup for developing, building, and testing the design system package. The inclusion of Ladle is particularly useful for developing and documenting the components in isolation.
80-112: LGTM!
- The peerDependencies ensure that the package can be integrated into projects that already use the specified libraries, avoiding duplicate installations and potential version conflicts.
- The scripts provide a convenient way to perform common tasks during development and build.
- The engines field and Volta configuration ensure a consistent development environment across the team.
packages/design-system-v3/src/ui/dialog.tsx (4)
1-14: LGTM!The code correctly imports the required dependencies and sets up the base Dialog components from Radix UI.
15-28: LGTM!The DialogOverlay component is implemented correctly with conditional class names for animations based on the open/closed state. The ref and props are forwarded correctly.
30-52: LGTM!The DialogContent component is composed correctly with the DialogPortal and DialogOverlay. The animations and positioning are applied correctly based on the open/closed state. The close button has appropriate aria attributes for accessibility.
54-120: LGTM!The Dialog sub-components (DialogHeader, DialogFooter, DialogTitle and DialogDescription) are implemented correctly:
- Proper usage of the
cnutility for conditional class names- Ref and props are forwarded correctly
- DisplayName is set for better debugging
- Sub-components are exported for independent usage if needed
packages/design-system-v3/src/hooks/use-toast.ts (6)
1-3: LGTM!The import statements are correctly used and follow the proper syntax.
5-6: Verify theTOAST_REMOVE_DELAYvalue.The
TOAST_REMOVE_DELAYconstant is set to 1000000 milliseconds (approximately 16.67 minutes), which seems unusually long for a toast notification. Please confirm if this is the intended value or if it should be adjusted to a shorter duration.
8-47: LGTM!The type declarations are correctly defined and follow the TypeScript syntax. They help enforce type safety and improve code readability.
130-135: LGTM!The
dispatchfunction correctly handles the state updates by using thereducerfunction and the dispatched action. It also notifies the listeners about the state changes by invoking each listener with the updated state.
139-166: LGTM!The
toastfunction correctly creates a new toast notification by generating a uniqueidand dispatching anADD_TOASTaction with the provided toast properties. It also returns an object with the necessary functions for managing the toast.
168-186: LGTM!The
useToasthook is a well-implemented custom React hook for managing toast notifications. It correctly manages the local state using theuseStatehook and subscribes/unsubscribes from thelistenersarray using theuseEffecthook. The hook provides a convenient way to create and dismiss toasts within a React component.packages/design-system-v3/src/ui/use-toast.ts (2)
56-70: LGTM!The code changes are approved.
169-187: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/form.tsx (4)
1-63: LGTM!The imports, type definitions, and
useFormFieldhook are correctly set up.
65-85: LGTM!The
FormItemcomponent is correctly implemented using React'sforwardRefand context API. Theidis generated usingReact.useId(), which is a good practice.
87-165: LGTM!The
FormLabel,FormControl,FormDescription, andFormMessagecomponents are correctly implemented using React'sforwardRefand theuseFormFieldhook. The use of Radix UI primitives ensures that the components are accessible out of the box. The components handle the rendering of labels, descriptions, error messages, and ARIA attributes, which is a good practice.
167-176: LGTM!The exports are correctly set up.
packages/design-system-v3/src/ui/sheet.tsx (9)
8-8: LGTM!Using the Radix UI Dialog Root primitive is a good choice for creating an accessible and customizable Sheet component.
10-10: LGTM!Using the Radix UI Dialog Trigger primitive ensures consistent behavior for opening the Sheet component.
12-12: LGTM!Using the Radix UI Dialog Close primitive ensures consistent behavior for closing the Sheet component.
14-14: LGTM!Using the Radix UI Dialog Portal primitive ensures that the Sheet component is rendered in a separate DOM node, preventing potential layout and styling issues.
16-29: LGTM!The SheetOverlay component is properly customized to match the design system's styles and animations. Using Tailwind CSS classes ensures consistency with other components in the design system.
50-73: LGTM!The SheetContent component is properly customized to allow flexibility in positioning the sheet using the class-variance-authority library. Including the SheetOverlay and SheetClose components ensures a consistent user experience. Using Tailwind CSS classes ensures consistency with other components in the design system.
75-87: LGTM!The SheetHeader component provides a consistent way to render the header content of the Sheet component. Using Tailwind CSS classes ensures consistency with other components in the design system.
89-101: LGTM!The SheetFooter component provides a consistent way to render the footer content of the Sheet component. Using Tailwind CSS classes ensures consistency with other components in the design system.
103-125: LGTM!Using the Radix UI Dialog Title and Description primitives ensures consistent accessibility and behavior for the Sheet component's title and description. Customizing the components with custom classNames and additional props allows flexibility in styling and usage. Using Tailwind CSS classes ensures consistency with other components in the design system.
packages/design-system-v3/src/ui/alert-dialog.tsx (7)
1-5: LGTM!The code changes are approved.
7-11: LGTM!The code changes are approved.
13-26: LGTM!The code changes are approved.
28-44: LGTM!The code changes are approved.
46-72: LGTM!The code changes are approved.
74-97: LGTM!The code changes are approved.
99-125: LGTM!The code changes are approved.
packages/design-system-v3/src/constants.ts (5)
3-48: LGTM!The code changes are approved.
50-129: LGTM!The code changes are approved.
131-139: LGTM!The code changes are approved.
141-150: LGTM!The code changes are approved.
152-154: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/navigation-menu.stories.tsx (3)
1-56: LGTM!The imports and component data are correctly defined.
58-82: LGTM!The
ListItemcomponent is correctly implemented.
84-140: LGTM!The default story for the
NavigationMenucomponent is correctly implemented.packages/design-system-v3/src/ui/toast.tsx (8)
1-6: LGTM!The import statements look good and follow the best practices.
8-23: LGTM!The
ToastProviderandToastViewportcomponents are implemented correctly and follow the best practices.
25-39: LGTM!The
toastVariantsobject is defined correctly and follows the best practices.
41-54: LGTM!The
Toastcomponent is implemented correctly and follows the best practices.
56-69: LGTM!The
ToastActioncomponent is implemented correctly and follows the best practices.
71-87: LGTM!The
ToastClosecomponent is implemented correctly and follows the best practices.
89-111: LGTM!The
ToastTitleandToastDescriptioncomponents are implemented correctly and follow the best practices.
113-127: LGTM!The type definitions and exports are correctly implemented and follow the best practices.
packages/design-system-v3/types/constants.d.ts (3)
1-3: LGTM!The type declaration for
ESLintConfiglooks good.
5-94: LGTM!The type declaration for
TailwindAnimationslooks good. It covers a comprehensive set of common transition animations.
103-182: LGTM!The type declaration for
TailwindColorsUZHlooks good. It defines a comprehensive color palette for the design system.packages/design-system-v3/src/ui/command.tsx (9)
9-22: LGTM!The code changes are approved.
26-36: LGTM!The code changes are approved.
38-55: LGTM!The code changes are approved.
57-68: LGTM!The code changes are approved.
70-81: LGTM!The code changes are approved.
83-97: LGTM!The code changes are approved.
99-109: LGTM!The code changes are approved.
111-125: LGTM!The code changes are approved.
127-141: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/navigation-menu.tsx (7)
8-24: LGTM!The
NavigationMenucomponent is correctly implemented and follows best practices.
26-39: LGTM!The
NavigationMenuListcomponent is correctly implemented and follows best practices.
41-41: LGTM!The
NavigationMenuItemalias is correctly defined.
43-63: LGTM!The
navigationMenuTriggerStyleconstant and theNavigationMenuTriggercomponent are correctly implemented and follow best practices.
65-78: LGTM!The
NavigationMenuContentcomponent is correctly implemented and follows best practices.
80-98: LGTM!The
NavigationMenuLinkalias and theNavigationMenuViewportcomponent are correctly implemented and follow best practices.
100-128: LGTM!The
NavigationMenuIndicatorcomponent and the exported entities are correctly implemented and follow best practices.packages/design-system-v3/src/ui/select.tsx (5)
1-5: LGTM!The import statements are correctly used and follow the best practices.
7-31: LGTM!The
SelectandSelectTriggercomponents are correctly implemented using the Radix UI primitives and follow the best practices.
33-98: LGTM!The
SelectScrollUpButton,SelectScrollDownButton, andSelectContentcomponents are correctly implemented using the Radix UI primitives and follow the best practices. The positioning and animation logic inSelectContentis also correctly implemented.
100-145: LGTM!The
SelectLabel,SelectItem, andSelectSeparatorcomponents are correctly implemented using the Radix UI primitives and follow the best practices. The rendering logic inSelectItemis also correctly implemented.
147-158: LGTM!The export statements are correctly used and follow the best practices.
packages/design-system-v3/src/ui/carousel.tsx (6)
1-30: LGTM!The imports and type definitions are necessary for the implementation of the carousel component.
31-148: LGTM!The
useCarouselhook and theCarouselcomponent are correctly implemented.
151-171: LGTM!The
CarouselContentcomponent is correctly implemented.
173-193: LGTM!The
CarouselItemcomponent is correctly implemented.
195-251: LGTM!The
CarouselPreviousandCarouselNextcomponents are correctly implemented.
253-260: LGTM!The exports are correctly defined.
packages/design-system-v3/src/ui/context-menu.tsx (10)
19-38: LGTM!The code changes are approved.
40-53: LGTM!The code changes are approved.
55-70: LGTM!The code changes are approved.
72-88: LGTM!The code changes are approved.
90-112: LGTM!The code changes are approved.
114-134: LGTM!The code changes are approved.
136-152: LGTM!The code changes are approved.
154-164: LGTM!The code changes are approved.
166-180: LGTM!The code changes are approved.
182-198: LGTM!The code changes are approved.
packages/design-system-v3/src/ui/dropdown-menu.tsx (12)
1-5: LGTM!The code segment correctly imports the necessary dependencies for the dropdown menu component.
7-18: LGTM!The code segment correctly defines constants for various parts of the dropdown menu component using the Radix UI primitives, improving code readability and maintainability.
19-39: LGTM!The code segment correctly defines a custom
DropdownMenuSubTriggercomponent using theforwardRefhigher-order component and applies conditional styling based on theinsetprop, providing flexibility in the component's appearance.
41-55: LGTM!The code segment correctly defines a custom
DropdownMenuSubContentcomponent using theforwardRefhigher-order component and applies conditional styling and animation classes based on the dropdown menu's state, improving the user experience and visual feedback.
57-73: LGTM!The code segment correctly defines a custom
DropdownMenuContentcomponent using theforwardRefhigher-order component, applies conditional styling and animation classes based on the dropdown menu's state and position, and uses theDropdownMenuPrimitive.Portalto render the content outside of the parent component's DOM hierarchy, preventing potential layout issues.
75-91: LGTM!The code segment correctly defines a custom
DropdownMenuItemcomponent using theforwardRefhigher-order component and applies conditional styling based on theinsetprop and focus state, improving the accessibility and usability of the dropdown menu items.
93-115: LGTM!The code segment correctly defines a custom
DropdownMenuCheckboxItemcomponent using theforwardRefhigher-order component, renders a checkbox item with an indicator icon, and applies conditional styling based on the focus state, improving the visual feedback, usability, and accessibility of the checkbox item.
117-137: LGTM!The code segment correctly defines a custom
DropdownMenuRadioItemcomponent using theforwardRefhigher-order component, renders a radio item with an indicator icon, and applies conditional styling based on the focus state, improving the visual feedback, usability, and accessibility of the radio item.
139-155: LGTM!The code segment correctly defines a custom
DropdownMenuLabelcomponent using theforwardRefhigher-order component and applies conditional styling based on theinsetprop, providing flexibility in the label's appearance.
157-167: LGTM!The code segment correctly defines a custom
DropdownMenuSeparatorcomponent using theforwardRefhigher-order component and applies styling to create a separator line between dropdown menu items, improving the visual organization and readability of the dropdown menu.
169-180: LGTM!The code segment correctly defines a custom
DropdownMenuShortcutcomponent that renders a span element with conditional styling for displaying keyboard shortcuts, improving the accessibility and usability of the dropdown menu.
182-198: LGTM!The code segment correctly exports all the custom dropdown menu components defined in the file, allowing them to be easily imported and used in other parts of the application.
packages/design-system-v3/src/ui/chart.tsx (3)
35-65: LGTM!The chart container component is implemented correctly and follows the expected pattern for wrapping the recharts components and providing a custom configuration. The usage of context to provide the configuration to the child components is a good practice. The dynamic generation of CSS styles based on the configuration is also a nice feature.
103-255: LGTM!The custom tooltip component is implemented correctly and provides a flexible way to customize the tooltip content and appearance based on the chart configuration. The usage of the chart configuration from the context is a good practice. The support for custom formatting of the tooltip label and values is a useful feature.
259-315: LGTM!The custom legend component is implemented correctly and provides a flexible way to customize the legend content and appearance based on the chart configuration. The usage of the chart configuration from the context is a good practice. The support for hiding the legend icons is a useful feature.
| const CardTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={cn( | ||
| 'text-2xl font-semibold leading-none tracking-tight', | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardTitle.displayName = 'CardTitle' |
There was a problem hiding this comment.
Fix the type mismatch between the ref and the props.
The CardTitle component is well-structured and follows best practices. However, there is a type mismatch between the ref and the props. The ref is correctly typed to HTMLParagraphElement but the props are incorrectly typed to React.HTMLAttributes<HTMLHeadingElement>. This should be fixed to avoid type errors.
Apply this diff to fix the type mismatch:
-const CardTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const CardTitle = React.forwardRef< | |
| HTMLParagraphElement, | |
| React.HTMLAttributes<HTMLHeadingElement> | |
| >(({ className, ...props }, ref) => ( | |
| <h3 | |
| ref={ref} | |
| className={cn( | |
| 'text-2xl font-semibold leading-none tracking-tight', | |
| className | |
| )} | |
| {...props} | |
| /> | |
| )) | |
| CardTitle.displayName = 'CardTitle' | |
| const CardTitle = React.forwardRef< | |
| HTMLParagraphElement, | |
| React.HTMLAttributes<HTMLParagraphElement> | |
| >(({ className, ...props }, ref) => ( | |
| <h3 | |
| ref={ref} | |
| className={cn( | |
| 'text-2xl font-semibold leading-none tracking-tight', | |
| className | |
| )} | |
| {...props} | |
| /> | |
| )) | |
| CardTitle.displayName = 'CardTitle' |
| const Breadcrumb = React.forwardRef< | ||
| HTMLElement, | ||
| React.ComponentPropsWithoutRef<'nav'> & { | ||
| separator?: React.ReactNode | ||
| } | ||
| >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />) | ||
| Breadcrumb.displayName = 'Breadcrumb' |
There was a problem hiding this comment.
Remove the unused separator prop.
The separator prop is defined but not being used in the component. Please remove it.
Apply this diff to remove the unused prop:
-const Breadcrumb = React.forwardRef<
- HTMLElement,
- React.ComponentPropsWithoutRef<'nav'> & {
- separator?: React.ReactNode
- }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+const Breadcrumb = React.forwardRef<
+ HTMLElement,
+ React.ComponentPropsWithoutRef<'nav'>
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const Breadcrumb = React.forwardRef< | |
| HTMLElement, | |
| React.ComponentPropsWithoutRef<'nav'> & { | |
| separator?: React.ReactNode | |
| } | |
| >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />) | |
| Breadcrumb.displayName = 'Breadcrumb' | |
| const Breadcrumb = React.forwardRef< | |
| HTMLElement, | |
| React.ComponentPropsWithoutRef<'nav'> | |
| >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />) | |
| Breadcrumb.displayName = 'Breadcrumb' |
| export const reducer = (state: State, action: Action): State => { | ||
| switch (action.type) { | ||
| case 'ADD_TOAST': | ||
| return { | ||
| ...state, | ||
| toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), | ||
| } | ||
|
|
||
| case 'UPDATE_TOAST': | ||
| return { | ||
| ...state, | ||
| toasts: state.toasts.map((t) => | ||
| t.id === action.toast.id ? { ...t, ...action.toast } : t | ||
| ), | ||
| } | ||
|
|
||
| case 'DISMISS_TOAST': { | ||
| const { toastId } = action | ||
|
|
||
| // ! Side effects ! - This could be extracted into a dismissToast() action, | ||
| // but I'll keep it here for simplicity | ||
| if (toastId) { | ||
| addToRemoveQueue(toastId) | ||
| } else { | ||
| state.toasts.forEach((toast) => { | ||
| addToRemoveQueue(toast.id) | ||
| }) | ||
| } | ||
|
|
||
| return { | ||
| ...state, | ||
| toasts: state.toasts.map((t) => | ||
| t.id === toastId || toastId === undefined | ||
| ? { | ||
| ...t, | ||
| open: false, | ||
| } | ||
| : t | ||
| ), | ||
| } | ||
| } | ||
| case 'REMOVE_TOAST': | ||
| if (action.toastId === undefined) { | ||
| return { | ||
| ...state, | ||
| toasts: [], | ||
| } | ||
| } | ||
| return { | ||
| ...state, | ||
| toasts: state.toasts.filter((t) => t.id !== action.toastId), | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Consider extracting the side effects into a separate action.
The DISMISS_TOAST case has a comment indicating that the side effects could be extracted into a separate action. This is a valid suggestion for improving the code structure and maintainability.
You can create a separate dismissToast action that encapsulates the side effects:
function dismissToast(toastId?: string) {
if (toastId) {
addToRemoveQueue(toastId);
} else {
memoryState.toasts.forEach((toast) => {
addToRemoveQueue(toast.id);
});
}
dispatch({ type: 'DISMISS_TOAST', toastId });
}Then, update the DISMISS_TOAST case in the reducer to remove the side effects:
case 'DISMISS_TOAST': {
- const { toastId } = action;
-
- if (toastId) {
- addToRemoveQueue(toastId);
- } else {
- state.toasts.forEach((toast) => {
- addToRemoveQueue(toast.id);
- });
- }
-
return {
...state,
toasts: state.toasts.map((t) =>
- t.id === toastId || toastId === undefined
+ t.id === action.toastId || action.toastId === undefined
? {
...t,
open: false,
}
: t
),
};
}| let count = 0 | ||
|
|
||
| function genId() { | ||
| count = (count + 1) % Number.MAX_SAFE_INTEGER | ||
| return count.toString() | ||
| } |
There was a problem hiding this comment.
Use a more robust ID generation method.
The current genId function might cause issues if the number of toasts exceeds Number.MAX_SAFE_INTEGER. Consider using a more robust ID generation method, such as:
- A UUID library like
uuidornanoid. - A timestamp-based ID generation method.
For example, you can use nanoid like this:
+import { nanoid } from 'nanoid';
-let count = 0;
-
-function genId() {
- count = (count + 1) % Number.MAX_SAFE_INTEGER;
- return count.toString();
-}
+function genId() {
+ return nanoid();
+}Committable suggestion was skipped due to low confidence.
| export declare const TailwindBasePlugins: { | ||
| 'postcss-import': {}; | ||
| 'tailwindcss/nesting': {}; | ||
| tailwindcss: {}; | ||
| autoprefixer: {}; | ||
| }; |
There was a problem hiding this comment.
Define explicit types instead of using {}.
The static analysis tool flagged the usage of {} as a type for the properties in TailwindBasePlugins. Using {} is considered bad practice as it means "any non-nullable value".
It's better to explicitly define the expected types for the properties. For example:
export declare const TailwindBasePlugins: {
'postcss-import': Record<string, unknown>;
'tailwindcss/nesting': Record<string, unknown>;
tailwindcss: Record<string, unknown>;
autoprefixer: Record<string, unknown>;
};Tools
Biome
[error] 97-97: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 98-98: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 99-99: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
[error] 100-100: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| export declare const TailwindFonts: { | ||
| sans: string[]; | ||
| }; | ||
|
|
||
| export declare const TailwindProdPlugins: { | ||
| cssnano?: {} | undefined; | ||
| }; | ||
|
|
||
| export { } |
There was a problem hiding this comment.
Address the flagged issues.
-
The type declaration for
TailwindFontslooks good. -
The static analysis tool flagged the usage of
{}as a type forTailwindProdPlugins. It's better to explicitly define the expected type. For example:
export declare const TailwindProdPlugins: {
cssnano?: Record<string, unknown>;
};- The empty export at line 192 is useless as flagged by the static analysis tool. Please remove it.
Tools
Biome
[error] 191-192: This empty export is useless because there's another export or import.
This export makes useless the empty export.
Safe fix: Remove this useless empty export.
(lint/complexity/noUselessEmptyExport)
[error] 189-189: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
|
|
||
| return ( | ||
| <style | ||
| dangerouslySetInnerHTML={{ |
There was a problem hiding this comment.
Potential security issue with dangerouslySetInnerHTML.
The static analysis tool has flagged the usage of dangerouslySetInnerHTML in the ChartStyle component as a potential security issue. While the risk of XSS attacks is low in this case, as the injected content is generated based on the chart configuration and not user input, it's still a good practice to avoid using dangerouslySetInnerHTML whenever possible.
Consider the following recommendations to mitigate the risk:
- Sanitize the injected content to ensure it doesn't contain any malicious scripts or HTML tags.
- Use a library like DOMPurify to sanitize the content before injecting it into the DOM.
- If possible, consider alternative approaches to injecting the styles, such as using CSS-in-JS libraries or dynamically creating and appending
<style>elements to the DOM.
Do you want me to provide a code example of how to sanitize the injected content using DOMPurify or open a GitHub issue to track this potential security issue?
Tools
Biome
[error] 79-79: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
|
|
||
| export { } |
There was a problem hiding this comment.
Remove the useless empty export statement.
The empty export statement at line range 790-791 is useless because there are other exports or imports in the file. It can be safely removed without impacting the functionality or correctness of the type definitions.
-export { }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export { } |
Tools
Biome
[error] 790-791: This empty export is useless because there's another export or import.
This import makes useless the empty export.
Safe fix: Remove this useless empty export.
(lint/complexity/noUselessEmptyExport)
Moved shadcn related stuff from original design system to a new v3 package (@uzh-df/design-system). For now kept shadcn around in the main design system, should probably remove it from the original design system package after to not mix them anymore and have clean deps).
This change should allow importing it to elearning without having weird react issues (maybe we will need to change the peer dep of the new package to react 19).