chore: initialize storybook using nx command #97
Conversation
📝 WalkthroughWalkthroughThe pull request introduces several significant changes across multiple files, primarily focusing on configuration updates, component removals, and the addition of new components and utilities. Key modifications include updates to 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
❌ Deploy Preview for cuhacking-portal-dev failed. Why did it fail? →
|
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
2 times, most recently
from
bc63fbe to
1ff9815
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
libs/storybook-host/src/lib/storybook-host.tsx (1)
1-9: LGTM!The
StorybookHostcomponent provides a solid foundation for the Storybook host interface. The implementation is correct and follows the React functional component syntax.Consider the following suggestions for further customization:
- Add more JSX elements and components to create a more comprehensive and visually appealing Storybook host interface.
- Utilize CSS or a styling library to enhance the visual presentation of the component.
- Incorporate interactive elements, such as buttons or links, to navigate between different stories or sections within Storybook.
- Integrate with the Storybook API to dynamically render the selected story components within the host interface.
- Implement responsive design techniques to ensure the component adapts well to different screen sizes and devices.
Feel free to explore and expand upon this component to create a rich and engaging Storybook experience tailored to your project's needs.
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 (15)
- libs/storybook-host/.babelrc (1 hunks)
- libs/storybook-host/.storybook/main.ts (1 hunks)
- libs/storybook-host/.storybook/preview.ts (1 hunks)
- libs/storybook-host/README.md (1 hunks)
- libs/storybook-host/eslint.config.js (1 hunks)
- libs/storybook-host/package.json (1 hunks)
- libs/storybook-host/project.json (1 hunks)
- libs/storybook-host/src/index.ts (1 hunks)
- libs/storybook-host/src/lib/storybook-host.tsx (1 hunks)
- libs/storybook-host/tsconfig.json (1 hunks)
- libs/storybook-host/tsconfig.lib.json (1 hunks)
- libs/storybook-host/tsconfig.storybook.json (1 hunks)
- nx.json (3 hunks)
- package.json (3 hunks)
- tsconfig.base.json (2 hunks)
Files skipped from review due to trivial changes (6)
- libs/storybook-host/.storybook/preview.ts
- libs/storybook-host/README.md
- libs/storybook-host/package.json
- libs/storybook-host/project.json
- libs/storybook-host/src/index.ts
- tsconfig.base.json
Files skipped from review as they are similar to previous changes (1)
- nx.json
Additional comments not posted (7)
libs/storybook-host/.babelrc (1)
1-12: Babel configuration follows best practices for React applications.The Babel configuration in this file is well-structured and follows best practices for React applications:
- The
@nx/react/babelpreset is used, which is tailored for React applications and enables the automatic JSX runtime. This ensures compatibility with modern React features and simplifies the JSX usage.- The
useBuiltInsoption is set to "usage," allowing Babel to include only the necessary polyfills based on the code's usage. This helps optimize the bundle size by avoiding the inclusion of unnecessary polyfills.- The empty plugins array indicates that no additional plugins are being used, keeping the configuration simple and focused on the preset's default behavior.
Overall, this Babel configuration provides a solid foundation for transpiling React code in the project.
libs/storybook-host/tsconfig.json (1)
1-20: LGTM!The new TypeScript configuration file for the
libs/storybook-hostdirectory is well-structured and follows best practices. It extends a base configuration, specifies appropriate compiler options for a React application, and references additional configuration files for further customization.The configuration promotes type safety, module management, and interoperability, which will contribute to code quality and maintainability in the Storybook host library.
libs/storybook-host/tsconfig.lib.json (1)
1-27: LGTM!The TypeScript configuration for the library looks good:
- Extending the base
tsconfig.jsonpromotes consistency across the project.- Setting
outDirto../../dist/out-tsckeeps the compiled output separate from the source files.- Including types for Node.js and specific React typings enhances type safety.
- Explicitly including JavaScript, JSX, TypeScript, and TSX files ensures all relevant source files are compiled.
- Excluding test files, stories, and configuration files keeps the compilation focused on the library code.
The configuration follows best practices and provides a solid foundation for the library.
libs/storybook-host/tsconfig.storybook.json (1)
1-31: LGTM!The TypeScript configuration for Storybook looks good and follows the recommended setup for integrating Storybook with TypeScript in an Nx workspace. It extends the base
tsconfig.json, enables necessary compiler options, includes relevant type declaration files, and specifies appropriate include/exclude patterns for Storybook files.libs/storybook-host/.storybook/main.ts (1)
1-35: LGTM!The Storybook configuration follows the recommended practices and includes essential addons for an enhanced development experience. The custom Vite configuration ensures compatibility with the Nx workspace, and the use of
react-docgen-typescriptensures accurate documentation of React components.libs/storybook-host/eslint.config.js (1)
1-41: LGTM! The ESLint configuration file is well-structured and modular.The file follows a modular approach by importing the base configuration from a separate file and extending it with additional rules and settings. The use of an asynchronous function allows for proper resolution of the base configuration promise.
The commented-out sections provide a clear structure for extending the configuration in the future, making it easy to add specific rules for different file types or frameworks.
A few suggestions for future improvements:
- Consider adding comments to explain the purpose of each section and the specific rules being applied.
- If the commented-out sections are not needed, consider removing them to keep the file clean and focused.
- Ensure that the
TODOcomment regarding merging with theantfuESLint config is addressed in a timely manner.Overall, the file sets up a solid foundation for the ESLint configuration of the
storybook-hostlibrary.package.json (1)
38-40: LGTM! The added Babel and Storybook dependencies are essential for the Storybook integration.The added dependencies in the
devDependenciessection are crucial for integrating Storybook into the project and enabling the development and testing of UI components in isolation. The Babel dependencies (@babel/coreand@babel/preset-react) are required for transpiling modern JavaScript and React code, while the Storybook packages provide the necessary tools and addons for building and showcasing UI components.The versions of the dependencies appear to be consistent and up to date, aligning with the project's requirements.
Also applies to: 64-70
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
libs/storybook-host/src/button.tsx (1)
1-3: Consider enhancing the Button component for better reusability and customization.The Button component is a good start for a reusable UI component. However, consider the following improvements:
Rename the component to a more descriptive name, such as
PrimaryButtonorDefaultButton, to better convey its purpose and appearance.Make the button text configurable through props to allow for different labels to be used when the component is reused in different contexts. For example:
export function Button({ label }: { label: string }) { return <button type="button">{label}</button>; }
- Make the button type configurable through props to support other types like "submit" or "reset". For example:
export function Button({ label, type }: { label: string; type?: "button" | "submit" | "reset" }) { return <button type={type || "button"}>{label}</button>; }These enhancements will make the Button component more flexible and reusable across different scenarios in the application.
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 (4)
- libs/storybook-host/.storybook/main.ts (1 hunks)
- libs/storybook-host/src/button.stories.tsx (1 hunks)
- libs/storybook-host/src/button.tsx (1 hunks)
- package.json (4 hunks)
Files skipped from review as they are similar to previous changes (2)
- libs/storybook-host/.storybook/main.ts
- package.json
Additional comments not posted (5)
libs/storybook-host/src/button.stories.tsx (5)
6-21: LGTM!The
metaconfiguration object is correctly set up and follows the Storybook conventions. The use offnfor theonClickargument is a good practice for tracking user interactions in the actions panel.
27-32: LGTM!The
Primarystory definition is correctly set up and provides a clear example of the primary variant of theButtoncomponent.
34-38: LGTM!The
Secondarystory definition is correctly set up and provides a clear example of the secondary variant of theButtoncomponent.
40-45: LGTM!The
Largestory definition is correctly set up and provides a clear example of the large variant of theButtoncomponent.
47-52: LGTM!The
Smallstory definition is correctly set up and provides a clear example of the small variant of theButtoncomponent.
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
1a2f848 to
12dfc41
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
apps/website/app/components/button.tsx (1)
1-3: LGTM! Consider enhancing the component by accepting props.The
Buttoncomponent is correctly implemented and provides a reusable UI element. Setting the button type to "button" is a good practice to prevent form submission on click.To make the component more reusable and customizable, consider accepting props to:
- Customize the button text.
- Apply custom styles or CSS classes.
- Handle click events.
Here's an example of how the component can be enhanced:
type ButtonProps = { text: string; onClick: () => void; className?: string; }; export function Button({ text, onClick, className }: ButtonProps) { return ( <button type="button" onClick={onClick} className={className}> {text} </button> ); }
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 (9)
- apps/website/app/components/button.tsx (1 hunks)
- libs/storybook-host/.storybook/custom-viewports.ts (1 hunks)
- libs/storybook-host/.storybook/main.ts (1 hunks)
- libs/storybook-host/.storybook/preview.tsx (1 hunks)
- libs/storybook-host/package.json (1 hunks)
- libs/storybook-host/src/button.stories.tsx (1 hunks)
- libs/storybook-host/src/button.tsx (1 hunks)
- libs/storybook-host/tsconfig.json (1 hunks)
- package.json (4 hunks)
Files skipped from review due to trivial changes (2)
- libs/storybook-host/package.json
- libs/storybook-host/src/button.tsx
Files skipped from review as they are similar to previous changes (3)
- libs/storybook-host/.storybook/main.ts
- libs/storybook-host/tsconfig.json
- package.json
Additional comments not posted (7)
libs/storybook-host/.storybook/custom-viewports.ts (1)
1-40: LGTM!The custom viewport configurations are well-defined, covering a good range of common display resolutions and aspect ratios. The code follows a consistent and readable structure, making it easy to understand and maintain.
Extending the default Storybook viewports with these custom configurations will provide greater flexibility for testing and showcasing UI components across various screen sizes, enhancing the overall development experience.
libs/storybook-host/src/button.stories.tsx (5)
6-21: LGTM!The
metaconfiguration object is correctly set up and follows the Storybook documentation guidelines. The inclusion of theonClickspy function is a good practice for tracking user interactions in the actions panel.
27-32: LGTM!The
Primarystory definition is correctly set up and provides a clear example of the primary button variant.
34-38: LGTM!The
Secondarystory definition is correctly set up and provides a clear example of the secondary button variant.
40-45: LGTM!The
Largestory definition is correctly set up and provides a clear example of the large button variant.
47-52: LGTM!The
Smallstory definition is correctly set up and provides a clear example of the small button variant.libs/storybook-host/.storybook/preview.tsx (1)
1-58: LGTM!The Storybook configuration in this file is comprehensive and well-structured. It covers essential aspects such as layout, actions, controls, sorting, viewports, and backgrounds. The use of custom viewports enhances the responsiveness of the components being showcased, and the predefined background colors provide a visually appealing presentation.
The code segment aligns with the PR objective of initializing Storybook using the Nx command. The configurations are set up correctly and follow best practices.
Great job on setting up a solid foundation for Storybook in this project!
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
libs/storybook-host/.storybook/themes-storybook-ui.ts (1)
82-116: Complete the light theme configuration.The
lightUIStorybookobject is a good starting point for providing a light theme option in Storybook. However, the majority of the properties are currently commented out, indicating that the configuration is incomplete.To ensure a fully functional light theme:
- Uncomment the relevant properties and provide appropriate values for each.
- Customize the color scheme, background colors, and other visual properties to create a cohesive and visually appealing light theme.
- Test the light theme thoroughly to ensure proper contrast, readability, and overall user experience.
By completing the light theme configuration, users will have the flexibility to switch between dark and light themes based on their preferences.
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 (5)
- libs/storybook-host/.storybook/globals.css (1 hunks)
- libs/storybook-host/.storybook/preview.tsx (1 hunks)
- libs/storybook-host/.storybook/themes-storybook-ui.ts (1 hunks)
- libs/storybook-host/tsconfig.storybook.json (1 hunks)
- package.json (4 hunks)
Files skipped from review as they are similar to previous changes (2)
- libs/storybook-host/tsconfig.storybook.json
- package.json
Additional comments not posted (11)
libs/storybook-host/.storybook/themes-storybook-ui.ts (2)
3-80: LGTM!The
darkUIStorybookobject is well-structured and provides a comprehensive dark theme configuration for Storybook's UI. The use of HSL color values allows for precise color management, and the included properties cover various aspects of the UI, ensuring a cohesive dark theme experience.The commented out properties provide additional context and alternative values, which can be helpful for future customization or reference.
118-123: LGTM!The
commonThemeobject effectively encapsulates the common branding properties for the Storybook UI. The included properties, such asbrandTitle,brandUrl,brandTarget, andbrandImage, provide relevant information for consistent branding across different theme configurations.The naming of the properties is clear and self-explanatory, making it easy to understand their purpose. The
brandImageproperty allows for convenient customization of the logo displayed in the Storybook UI.This approach promotes reusability and maintainability by centralizing the branding information in a single object.
libs/storybook-host/.storybook/preview.tsx (5)
1-19: LGTM!The imports are correctly set up and the necessary dependencies are included. The custom configurations are also imported correctly.
20-105: LGTM!The Storybook configurations are correctly set up in the
previewobject. The configurations include:
- Layout set to 'fullscreen'
- Action handlers defined via a regex pattern
- Control matchers for color and date types
- Sorting method set to alphabetical order
- Custom viewports for responsiveness
- Dark mode with custom UI themes
- Background colors defined
No issues found in the configurations.
106-129: LGTM!The custom container for documentation is correctly set up. It listens to the dark mode event and updates the theme accordingly, ensuring consistency across the Storybook interface. No issues found in the implementation.
130-143: LGTM!The HTML addon for Storybook is correctly configured with Prettier settings and highlighter options. The configurations are set up correctly and no issues are found.
145-169: LGTM!The decorators for the Storybook preview are correctly set up. The decorators include:
- A theme provider with the default theme and transition options
- A theme switcher with the default theme and class names for light and dark themes
No issues found in the decorator setup.
libs/storybook-host/.storybook/globals.css (4)
1-4: LGTM!The Tailwind configuration is correctly imported and applied.
31-197: LGTM!The CSS variables for theming and dark mode are correctly defined using the HSL color format. The variables cover a comprehensive set of UI elements, providing a solid foundation for consistent styling throughout the application.
199-207: LGTM!The code segment correctly applies the border color to all elements and sets the background color and text color for the
bodyelement using the appropriate utility classes.
209-242: LGTM!The utility class for backdrop blur and the keyframe animations for the "bobbing" effect are correctly defined. The utility classes for applying the "bobbing" animations with varying durations provide a nice visual enhancement that can be easily reused across different components.
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
328c8a5 to
6a38a85
Compare
|
Regarding Babel, all Storybook needs to work is to see a I'm surprised you got it to work with Babel in the first place, that genuinely deserves an award 😭 |
Handed off to you and Jeremy as per discord messages, feel free to take it out. I don't see us needing Babel anywhere else, and this was scaffolded by the nx storybook command I used lmao. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
libs/storybook-host/.storybook/main.ts (2)
49-63: Consider removing unused commented-out code for better maintainabilityThe configuration for
@storybook/addon-storysourceis currently commented out. If this addon is not going to be used, consider removing the commented-out code to enhance readability and maintainability of the configuration file.
65-88: Clean up commented-out addons to streamline the configurationSeveral addons, such as
@storybook/addon-onboarding,@storybook/addon-toolbars, and@whitespace/storybook-addon-html, are commented out in theaddonsarray. If these addons are no longer needed, removing the commented code can help keep the configuration file clean and easier to navigate.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- libs/storybook-host/.storybook/main.ts (1 hunks)
🔇 Additional comments (1)
libs/storybook-host/.storybook/main.ts (1)
6-104: Configuration is comprehensive and well-structuredThe Storybook configuration is well-organized, and the selection of addons and custom plugins appears appropriate for the project's needs. The custom ordering and inclusion of specific addons provide a tailored development environment.
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
5a71141 to
f79dbae
Compare
❌ Deploy Preview for website-cuhacking failed. Why did it fail? →
|
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range and nitpick comments (29)
libs/ui/src/shadcn/cn.ts (2)
4-6: LGTM: Efficient implementation of class name utility function.The
cnfunction is well-implemented, combiningclsxandtwMergeto efficiently handle dynamic class names and resolve conflicts in Tailwind CSS classes. This approach is ideal for React components using Tailwind CSS.Consider renaming the function to something more descriptive, like
combineClassNamesormergeClasses, to improve readability and self-documentation of the code. However, ifcnis a widely accepted convention in your team or the broader community, it's fine to keep it as is.
1-6: Overall assessment: Well-implemented utility function for class name management.This file introduces a concise and efficient utility function for managing class names in a React project using Tailwind CSS. The implementation follows best practices by leveraging
clsxfor conditional class names andtwMergefor resolving Tailwind class conflicts. The function is exported, making it easily accessible throughout the project.Consider documenting the usage of this utility function in your project's README or developer guidelines to ensure consistent usage across the codebase and to help onboard new developers quickly.
libs/ui/src/lib/ui.tsx (2)
1-3: Consider using a more descriptive name for the component.The component name
Uiis quite generic. In React, it's a best practice to use more descriptive, PascalCase names for components. Consider renaming it to something that better describes its purpose or content, such asWelcomeMessageorUiDemo.
11-11: Consider removing the default export.Having both a named export and a default export for the same component can lead to inconsistent import styles across the project. It's generally better to stick to one export style consistently. Since you're already using a named export, consider removing the default export.
You can simply remove line 11:
-export default UiThis will encourage consistent use of named imports throughout your project.
libs/ui/tsconfig.storybook.json (2)
6-14: LGTM: Comprehensive include patterns for Storybook files.The include patterns cover all common story file extensions and Storybook configuration files, ensuring that TypeScript processes all relevant files for Storybook.
Consider simplifying the include patterns for better maintainability:
"include": [ - "src/**/*.stories.ts", - "src/**/*.stories.js", - "src/**/*.stories.jsx", - "src/**/*.stories.tsx", - "src/**/*.stories.mdx", + "src/**/*.stories.@(ts|js|jsx|tsx|mdx)", ".storybook/*.js", ".storybook/*.ts" ],This change uses a more concise glob pattern to match all story file types.
15-15: LGTM: Appropriate exclusion of test files.Excluding test files from the Storybook TypeScript configuration is a good practice. It prevents potential conflicts and keeps the Storybook build process focused on story files.
Consider expanding the exclude pattern to cover JavaScript test files as well:
- "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"] + "exclude": ["src/**/*.@(spec|test).@(ts|js)"]This change will exclude both TypeScript and JavaScript test files, ensuring consistency across your project.
libs/ui/postcss.config.js (2)
3-6: Informative comment, consider adding version informationThe comment block provides valuable guidance on configuration usage and potential conflicts. It's great that you've included a link to the Nx documentation for further information.
Consider adding the Nx version number for which this configuration is valid. This can help future-proof the configuration and make it easier for developers to troubleshoot if the recommended setup changes in future Nx versions.
8-15: LGTM: Well-structured PostCSS configurationThe configuration object is well-structured and includes both Tailwind CSS and Autoprefixer, which is a good combination for modern CSS processing.
For improved robustness, consider adding error handling for the case where the Tailwind config file doesn't exist. Here's a suggested modification:
const { join } = require('node:path') +const { existsSync } = require('node:fs') + +const tailwindConfigPath = join(__dirname, 'tailwind.config.js') + +if (!existsSync(tailwindConfigPath)) { + console.warn(`Warning: Tailwind config file not found at ${tailwindConfigPath}`) +} module.exports = { plugins: { tailwindcss: { - config: join(__dirname, 'tailwind.config.js'), + config: tailwindConfigPath, }, autoprefixer: {}, }, }This change will provide a warning if the Tailwind config file is missing, which can help developers quickly identify configuration issues.
libs/ui/.storybook/custom-viewports.ts (1)
5-39: LGTM with suggestions: Comprehensive custom viewport configurationsThe custom viewport configurations cover a good range of common resolutions, including ultrawide (21:9) displays. The structure is consistent and well-organized.
Suggestions for improvement:
Consider using more descriptive names for the viewports. For example:
- '720p' -> 'hdReady'
- '1080p' -> 'fullHd'
- '2k' -> 'quadHd'
- '4k' -> 'ultraHd'
- '21/9' -> 'ultraWide'
Add a
typeproperty to each viewport for better categorization. For example:'1080p': { name: 'Full HD', type: 'desktop', styles: { width: '1920px', height: '1080px', }, },Consider adding more common mobile and tablet viewports if they're not already included in INITIAL_VIEWPORTS.
Would you like me to provide a refactored version of the custom viewports with these improvements?
libs/ui/eslint.config.js (3)
1-6: Address TODO comment and clean up importsThere are a few points to address in this section:
- The TODO comment suggests merging with antfu eslint config. Consider creating an issue to track this task if it hasn't been done already.
- There are several commented-out import statements. If these are no longer needed, consider removing them to keep the code clean.
- The active import uses ES module syntax (
import ... from) while the commented-out ones use CommonJS (require()). Ensure consistency in the import style across the project.Would you like me to create an issue for the TODO item or help clean up the unused imports?
7-12: Approve structure with minor suggestionThe structure of the exported configuration is good. It allows for asynchronous loading of the base configuration and easy extension. However, consider this minor improvement:
Instead of using an immediately invoked async function, you could use a named async function and export its invocation. This might improve readability:
async function createConfig() { const baseConfig = await baseConfigPromise; return [ ...baseConfig, // Additional configurations... ]; } export default createConfig();This change would make the code slightly more explicit about its intentions.
Also applies to: 41-42
13-40: Consider removing or documenting commented configurationsThe file contains large blocks of commented-out configurations. While these might serve as references for future additions, they can make the file harder to read and maintain.
Consider the following options:
- If these configurations are intended for future use, document them in a separate file or in the project's documentation, then remove them from this file.
- If some of these configurations are ready to be used, uncomment and activate them.
- If these are just examples or no longer relevant, remove them entirely.
This will help keep the configuration file clean and focused on active rules.
Would you like assistance in creating a separate documentation file for these configuration options?
libs/ui/src/shadcn/button.stories.tsx (2)
11-45: LGTM: Well-structured Storybook metadata with room for enhancement.The metadata configuration is comprehensive and well-organized. It provides good control over the Button component's props in the Storybook UI. The use of the 'autodocs' tag is excellent for automatic documentation generation.
Consider adding a description field to the metadata to provide more context about the Button component. For example:
description: 'A versatile button component with various styles and states.',This would enhance the auto-generated documentation.
57-97: LGTM: Well-implemented advanced button stories with room for enhancement.The Icon, WithIcon, and Loading stories are well-implemented, showcasing different advanced uses of the Button component. The use of React fragments and proper className assignments for icons is commendable.
Consider adding an accessibility enhancement to the Icon story:
export const Icon: Story = { args: { variant: 'outline', size: 'icon', children: <ChevronRightIcon className="size-4" />, 'aria-label': 'Next', // Add this line }, // ... rest of the story configuration }This
aria-labeladdition would improve the accessibility of the icon-only button by providing a text alternative for screen readers.libs/ui/.storybook/main.ts (2)
6-85: LGTM: Comprehensive addon configuration with room for optimizationThe addon configuration is well-structured and includes a wide range of useful tools for UI development and testing. The comments provide helpful context for each addon's purpose.
Consider reviewing the commented-out addons (@storybook/addon-onboarding, @storybook/addon-toolbars, @whitespace/storybook-addon-html) to determine if they would be beneficial to include in the current setup.
Would you like assistance in evaluating these additional addons for potential inclusion?
92-96: LGTM: Proper export and helpful comments for future customizationThe configuration object is correctly exported as default. The comments provide valuable information about customizing webpack configuration in the future.
Consider adding a TODO comment to remind the team to review and potentially implement webpack customizations when needed in the future.
Would you like me to suggest a TODO comment to add?
libs/ui/.storybook/themes-storybook-ui.ts (1)
3-80: Comprehensive dark theme implementation with suggestions for improvementThe
darkUIStorybookconstant provides a thorough dark theme configuration for the Storybook UI. However, there are a few areas that could be improved:
There are several commented-out lines with alternative color values using HSL notation. Consider cleaning up the code by removing unused comments or standardizing the color notation (either use HSL or hexadecimal consistently).
If the alternative color values are intended for future use or comparison, consider moving them to a separate constant or documenting their purpose clearly.
Some properties are duplicated with different values (commented and uncommented). Resolve these duplications to avoid confusion and potential bugs.
Would you like assistance in cleaning up the commented code and standardizing the color notation?
libs/ui/.storybook/globals.css (5)
1-7: LGTM! Consider adding a brief description of the file's purpose.The Tailwind CSS setup and imports are correct. The comments provide useful resources for theme customization and exploring the Shadcn/ui ecosystem.
Consider adding a brief comment at the top of the file describing its purpose and importance in the project's styling architecture.
9-29: Evaluate the necessity of commented-out color definitions.These commented-out color definitions might be useful for reference, but they could also clutter the file. Consider one of the following options:
- Remove them if they are no longer needed.
- Move them to a separate file for future reference.
- If they are actively being used for comparison or future changes, add a comment explaining their purpose.
31-113: LGTM! Consider standardizing HSL value formatting for consistency.The CSS variables for the light mode are well-defined and comprehensive. The use of HSL colors allows for easy theming and manipulation.
For consistency, consider standardizing the format of HSL values. Some are written with spaces (e.g.,
196 100% 95%), while others use commas (e.g.,203, 100%, 37%). Adopting a single format throughout the file would improve readability.
115-196: LGTM! Address commented-out color definitions in dark mode.The dark mode color scheme is well-defined and complements the light mode. The structure and naming conventions are consistent, which is excellent for maintainability.
Similar to the light mode section, there are commented-out color definitions (lines 145-149). Consider removing or documenting these as suggested in the previous comment about commented-out colors.
199-222: LGTM! Consider parameterizing the bobbing animation.The additional styles and animation are well-defined and add useful functionality to the project.
Consider parameterizing the bobbing animation to make it more flexible. You could use CSS custom properties to allow easy customization of the animation distance and duration. For example:
@keyframes bobbing { 0%, 100% { transform: translateY(calc(var(--bobbing-distance, -2px) * -1)); } 50% { transform: translateY(var(--bobbing-distance, 2px)); } } .bobbing { animation: bobbing var(--bobbing-duration, 2s) infinite; }This way, you can easily adjust the animation for different elements by setting
--bobbing-distanceand--bobbing-durationon the element or its parent.apps/website/app/nx-welcome.tsx (2)
438-442: Button demonstrates UI library usageThe addition of the
Buttoncomponent effectively demonstrates the usage of the newly imported UI library. This is a good way to showcase the Storybook integration.Consider the following suggestions:
- Add an
onClickhandler to the button to demonstrate its functionality.- Consider using a more descriptive label for the button, related to your application's purpose.
- You might want to add a Storybook story for this
Buttoncomponent to fully leverage the Storybook integration.Would you like me to provide an example of how to implement these suggestions?
Line range hint
1-1023: Consider refactoring for improved maintainabilityWhile the additions related to Storybook are good, the overall structure of this component could be improved:
Separate Concerns: Consider moving the inline CSS to a separate stylesheet. This will improve readability and maintainability.
Component Breakdown: The component contains a large amount of static JSX. Consider breaking it down into smaller, reusable components. This aligns well with the component-driven development approach that Storybook encourages.
Data Abstraction: Static content like learning materials and links could be moved to a separate data file and mapped over in the JSX.
Accessibility: Ensure that all interactive elements are keyboard accessible and have appropriate ARIA attributes.
Styling Consistency: With the introduction of a UI library, consider using its styling system consistently throughout this component.
These changes will make the codebase more maintainable, easier to test, and more aligned with React and Storybook best practices.
Would you like me to provide an example of how to implement any of these suggestions?
libs/ui/tailwind.config.js (1)
60-62: Use consistent quotation marks for string valuesIn the
borderRadiusconfiguration (lines 60-62), there is an inconsistency in the use of quotation marks. Lines 60 and 61 use backticks (` `), while line 62 uses single quotes (' '). For consistency and readability, consider using single quotes for all string values unless template literals are necessary.Apply this diff to make the changes:
60 - lg: `var(--radius)`, 61 - md: `calc(var(--radius) - 2px)`, 62 sm: 'calc(var(--radius) - 4px)', + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)',libs/ui/.storybook/preview.tsx (4)
5-5: Clarify or remove the inline comment for better readabilityThe inline comment on line 5 may be unclear or unnecessary. Consider clarifying its purpose or removing it to improve code readability.
46-60: Consider removing commented-out code to reduce clutterThere's a large block of commented-out code related to
globalTypes. If this code is no longer needed, removing it can help keep the codebase clean. If you plan to use it later, consider adding a comment explaining its purpose.
115-115: Remove unnecessary ESLint disable commentAfter wrapping the event listener in a
useEffecthook, the ESLint rulereact-hooks/rules-of-hooksis no longer violated. You can remove the// eslint-disable-next-line react-hooks/rules-of-hookscomment on line 115.
123-126: Remove commented-out debugging statementsThe commented-out
console.logstatements from lines 123 to 126 can be removed to clean up the code. If you need them for future debugging, consider adding a note explaining their purpose.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (2)
libs/ui/.storybook/cuhacking-logo.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (27)
- .gitignore (1 hunks)
- apps/website/app/nx-welcome.tsx (2 hunks)
- apps/website/app/tailwind.css (1 hunks)
- libs/ui/.babelrc (1 hunks)
- libs/ui/.storybook/custom-viewports.ts (1 hunks)
- libs/ui/.storybook/globals.css (1 hunks)
- libs/ui/.storybook/main.ts (1 hunks)
- libs/ui/.storybook/preview.tsx (1 hunks)
- libs/ui/.storybook/themes-storybook-ui.ts (1 hunks)
- libs/ui/README.md (1 hunks)
- libs/ui/eslint.config.js (1 hunks)
- libs/ui/package.json (1 hunks)
- libs/ui/postcss.config.js (1 hunks)
- libs/ui/project.json (1 hunks)
- libs/ui/src/index.ts (1 hunks)
- libs/ui/src/lib/ui.module.css (1 hunks)
- libs/ui/src/lib/ui.tsx (1 hunks)
- libs/ui/src/shadcn/button.stories.tsx (1 hunks)
- libs/ui/src/shadcn/button.tsx (1 hunks)
- libs/ui/src/shadcn/cn.ts (1 hunks)
- libs/ui/tailwind.config.js (1 hunks)
- libs/ui/tsconfig.json (1 hunks)
- libs/ui/tsconfig.lib.json (1 hunks)
- libs/ui/tsconfig.storybook.json (1 hunks)
- nx.json (3 hunks)
- package.json (4 hunks)
- tsconfig.base.json (1 hunks)
✅ Files skipped from review due to trivial changes (10)
- .gitignore
- apps/website/app/tailwind.css
- libs/ui/.babelrc
- libs/ui/README.md
- libs/ui/package.json
- libs/ui/project.json
- libs/ui/src/index.ts
- libs/ui/src/lib/ui.module.css
- libs/ui/tsconfig.json
- libs/ui/tsconfig.lib.json
🧰 Additional context used
🔇 Additional comments (28)
libs/ui/src/shadcn/cn.ts (1)
1-2: LGTM: Imports are correctly structured and necessary.The import statements are well-organized and import the required utilities from 'clsx' and 'tailwind-merge' libraries. These imports are essential for the
cnfunction implementation.libs/ui/tsconfig.storybook.json (3)
1-2: LGTM: Proper extension of base TypeScript configuration.The configuration correctly extends the base
tsconfig.json, which is a good practice for maintaining consistent TypeScript settings across the project while allowing Storybook-specific overrides.
1-16: Overall, the Storybook TypeScript configuration is well-structured.The
tsconfig.storybook.jsonfile is properly set up to extend the base TypeScript configuration and includes appropriate patterns for Storybook files. The suggestions provided in the review are minor optimizations to improve maintainability and consistency. Once these small adjustments are made, the configuration will be in excellent shape for your Storybook setup.
3-5: Verify the necessity ofemitDecoratorMetadata.The
emitDecoratorMetadataoption is enabled, which is typically used in Angular projects or with certain dependency injection systems. For a React-based Storybook setup, this option might not be necessary and could potentially increase bundle size.Please confirm if this option is required for your project. If not, consider removing it to optimize performance and bundle size. You can use the following script to check for decorator usage in your project:
✅ Verification successful
emitDecoratorMetadatais not required and can be removed.No decorator usages were found in the TypeScript files, indicating that the
emitDecoratorMetadataoption is unnecessary for this project. Removing it can help optimize performance and reduce the bundle size.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for decorator usage in TypeScript files # Test: Search for decorator usage (@decorator syntax) rg --type typescript '@\w+' -g '!*.d.ts'Length of output: 77
Script:
#!/bin/bash # Description: Check for decorator usage in TypeScript files # Search for decorator usage (@decorator syntax) in .ts and .tsx files rg '@\w+' --glob '*.ts' --glob '*.tsx' -nLength of output: 11003
Script:
#!/bin/bash # Description: Check for decorator usage in TypeScript files # Search for decorator usage (@Decorator syntax) in .ts and .tsx files, excluding import statements rg '^\s*@\w+' --glob '*.ts' --glob '*.tsx' -nLength of output: 126
libs/ui/postcss.config.js (1)
1-1: LGTM: Proper import of Node.js path moduleThe use of the
node:prefix for importing the built-inpathmodule is a best practice. It ensures clarity and avoids potential conflicts with third-party modules.libs/ui/.storybook/custom-viewports.ts (3)
1-1: LGTM: Correct import of INITIAL_VIEWPORTSThe import statement is correct and imports the necessary INITIAL_VIEWPORTS from the Storybook viewport addon.
3-4: LGTM: Well-structured export of customViewportsThe export statement is correct, and the structure allows for easy extension of INITIAL_VIEWPORTS with custom configurations. This approach preserves the default viewports while adding new ones.
1-40: Overall assessment: Well-implemented custom viewports with room for minor enhancementsThe
custom-viewports.tsfile successfully extends Storybook's default viewports with additional, useful configurations. The implementation is correct, consistent, and covers a good range of display resolutions. The suggestions provided earlier can further improve the clarity and extensibility of the custom viewports.Great job on setting up these custom viewports! They will significantly enhance the ability to test and showcase UI components across various screen sizes.
tsconfig.base.json (1)
17-17: LGTM! New UI library path mapping added.The addition of the "@cuhacking/ui" path mapping is consistent with the existing structure and aligns with the PR's objective of initializing Storybook. This will allow for easier imports of UI components across the project.
To ensure the referenced file exists, please run the following script:
✅ Verification successful
Path mapping verified successfully.
The existence of
libs/ui/src/index.tshas been confirmed. The addition of the"@cuhacking/ui"path mapping is correct and aligns with the project's structure.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify the existence of the UI library entry point if [ -f "libs/ui/src/index.ts" ]; then echo "File exists: libs/ui/src/index.ts" else echo "Warning: File not found: libs/ui/src/index.ts" fiLength of output: 110
libs/ui/src/shadcn/button.stories.tsx (3)
1-9: LGTM: Imports are well-structured and appropriate.The imports are correctly set up for a Storybook file. The use of named imports from '@radix-ui/react-icons' is good for tree-shaking, and the TypeScript types are properly imported. The local Button component import is also correct.
47-48: LGTM: Correct type definitions and default export.The default export of the metadata and the Story type definition are correctly implemented for Storybook with TypeScript support.
50-55: LGTM: Comprehensive coverage of button variants.The stories for different button variants (Primary, Secondary, Destructive, Outline, Ghost, and Link) are well-defined. Each variant is correctly implemented as a separate story, allowing for easy visualization and testing of different button styles.
nx.json (2)
13-16: LGTM: Appropriate exclusions for Storybook filesThe added exclusions for Storybook-related files in the
productioninput are correct and align with best practices. This ensures that development-only Storybook artifacts are not included in production builds.
83-87: Clarify the decision to disable unit tests for React librariesThe new generator configuration for
@nx/reactsetsunitTestRunnertononefor libraries. This means that newly generated React libraries will not include unit tests by default.Could you please clarify if this is intentional and aligns with the project's testing strategy? If unit tests are important for your project, you might want to reconsider this setting.
To help understand the current testing setup, please run the following script:
#!/bin/bash # Description: Check for existing test files and configurations # Test: Check for jest.config files echo "Searching for jest.config files:" fd --type f --glob "jest.config.@(js|ts)" # Test: Check for test files echo "Searching for test files:" fd --type f --glob "*.@(spec|test).@(js|jsx|ts|tsx)" # Test: Check for testing-library dependencies echo "Checking for testing-library dependencies:" grep -E "@testing-library|jest" package.jsonlibs/ui/.storybook/main.ts (3)
1-3: LGTM: Proper import and configuration setupThe import statement and configuration object declaration are correctly implemented. The use of TypeScript for type-checking is a good practice that enhances code reliability.
4-5: LGTM: Comprehensive story file inclusionThe 'stories' configuration effectively includes all relevant story file formats (.mdx and stories.{js,jsx,ts,tsx}) from the '../src/' directory. This setup ensures that all story files are properly recognized by Storybook.
86-89: LGTM: Appropriate framework configurationThe framework configuration correctly specifies '@storybook/nextjs', which is suitable for a Next.js project. The empty options object provides flexibility for future customizations if needed.
libs/ui/.storybook/themes-storybook-ui.ts (1)
118-123: Well-structured common theme implementationThe
commonThemeconstant is well-implemented, providing essential branding information for the Storybook UI. The use of a separate constant for common theme elements promotes reusability across different theme variations.package.json (5)
77-92: Excellent addition of Storybook and its ecosystem!The inclusion of Storybook and its various addons (a11y, actions, backgrounds, controls, etc.) provides a robust environment for UI component development and testing. Using the latest version (8.3.5) ensures access to the most recent features and security updates.
This setup will greatly enhance the team's ability to develop, test, and document UI components in isolation, improving overall development efficiency and collaboration.
Also applies to: 144-145
73-74: Great additions for enhanced UI development!The new dependencies significantly improve the project's UI development capabilities:
- Radix UI components (
@radix-ui/react-icons,@radix-ui/react-slot) provide accessible and customizable UI primitives.- Utilities like
class-variance-authority,clsx, andtailwind-mergeenhance CSS class management, particularly useful with Tailwind CSS.tailwindcss-animateadds animation utilities to Tailwind CSS.next-themesenables easy theme switching in Next.js applications.These additions will contribute to a more robust and flexible UI component system, improving developer productivity and user experience.
Also applies to: 113-114, 136-136, 146-146, 148-148
66-66: Nx package additions align with project objectives.The addition of Nx packages, particularly
@nx/reactand@nx/storybook, aligns well with the PR objective of initializing Storybook using Nx commands. The consistent use of versions 19.5.7 and 19.6.0 across different Nx packages ensures compatibility.To maintain optimal performance and access to new features, consider setting up a process to keep these Nx packages updated in the future.
Also applies to: 68-68
Line range hint
1-164: Summary of package.json changesThe updates to
package.jsonsignificantly enhance the project's development capabilities:
- Storybook integration provides a robust environment for UI component development.
- UI-related packages improve component styling and theming capabilities.
- Nx package additions support the project's build and development workflow.
- The Prettier update brings the latest formatting features but requires careful integration.
These changes align well with the PR objectives and should improve the overall development experience. However, please address the concerns raised about Babel dependencies and the Prettier update to ensure a smooth integration of these changes.
49-50:⚠️ Potential issueConsider removing Babel dependencies if not explicitly required.
The addition of
@babel/coreand@babel/preset-reactmight be unnecessary for this project:
- Next.js (which is used in this project) already includes built-in support for JSX transformation and modern JavaScript features.
- Storybook 8.x for Next.js typically doesn't require explicit Babel configuration.
Unless there's a specific need for custom Babel transformations, consider removing these dependencies to simplify the project setup.
To verify if Babel is being used in the project, run the following command:
If no results are found, it's likely safe to remove the Babel dependencies.
✅ Verification successful
Babel dependencies are unused and can be removed.
No Babel configuration files or Babel-related scripts were found in the project, indicating that
@babel/coreand@babel/preset-reactare likely unnecessary.
- Remove
@babel/coreand@babel/preset-reactfrompackage.jsondevDependencies.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for Babel configuration files or usage in the project echo "Searching for Babel configuration files:" fd -e babelrc -e babel.config.js -e babel.config.json echo "Searching for Babel usage in package.json scripts:" jq '.scripts | to_entries[] | select(.value | contains("babel"))' package.jsonLength of output: 338
libs/ui/.storybook/globals.css (1)
1-222: Excellent foundation for project-wide styling and theming.This
globals.cssfile provides a robust and flexible foundation for styling and theming in the project. The use of Tailwind CSS combined with custom CSS variables creates a powerful system for maintaining consistent design across the application. The inclusion of both light and dark mode color schemes demonstrates good forethought for accessibility and user preferences.Key strengths:
- Comprehensive color scheme definitions
- Flexible use of CSS variables and HSL colors
- Integration with Tailwind CSS
- Provision for both light and dark modes
- Addition of utility classes and custom animations
While there are a few minor suggestions for improvement (as noted in previous comments), the overall quality and structure of this file are excellent. It will serve as a crucial component in maintaining a consistent and easily customizable design system for the project.
apps/website/app/nx-welcome.tsx (1)
1-1: LGTM: Import aligns with Storybook initializationThe import of the
Buttoncomponent from@cuhacking/uiis consistent with the PR's objective of initializing Storybook. This suggests that a UI library has been set up, which is a good practice for component-driven development.libs/ui/src/shadcn/button.tsx (1)
1-57: LGTMThe implementation of the
Buttoncomponent is well-structured, and the use ofcvafor managing variants is appropriate. Good job on implementing the customizable button with various styling options.libs/ui/tailwind.config.js (2)
65-66: Confirm that '--font-sans' CSS variable is definedIn the
fontFamilyconfiguration (lines 65-66), you're using the CSS variable--font-sans. Ensure that this variable is defined in your CSS so that the custom font is applied correctly.Would you like assistance in verifying where
--font-sansis defined?
83-83: Ensure 'tailwindcss-animate' plugin is installedIn your plugins array (line 83), you are requiring
'tailwindcss-animate'. Please verify that this plugin is installed and listed in your project's dependencies to prevent any runtime errors.Run the following script to check if the plugin is installed:
If the output is
null, the plugin is not installed.✅ Verification successful
Verified that 'tailwindcss-animate' is installed.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that 'tailwindcss-animate' is installed. # Test: Check if 'tailwindcss-animate' is listed in package.json dependencies. jq '.dependencies["tailwindcss-animate"] // .devDependencies["tailwindcss-animate"]' package.jsonLength of output: 108
libs/ui/src/lib/ui.tsx
Outdated
| return ( | ||
| <div className={styles.container}> | ||
| <h1>Welcome to Ui!</h1> | ||
| </div> | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance component flexibility with props.
The current implementation uses a static welcome message. To make this component more reusable, consider accepting the message as a prop. This would allow the component to be used in various contexts with different messages.
Here's a suggested implementation:
-export function Ui() {
+export function Ui({ message = 'Welcome to Ui!' }: { message?: string }) {
return (
<div className={styles.container}>
- <h1>Welcome to Ui!</h1>
+ <h1>{message}</h1>
</div>
)
}📝 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.
| return ( | |
| <div className={styles.container}> | |
| <h1>Welcome to Ui!</h1> | |
| </div> | |
| ) | |
| export function Ui({ message = 'Welcome to Ui!' }: { message?: string }) { | |
| return ( | |
| <div className={styles.container}> | |
| <h1>{message}</h1> | |
| </div> | |
| ) | |
| } |
| }, | ||
| { | ||
| "plugin": "@nx/storybook/plugin", | ||
| "options": { | ||
| "serveStorybookTargetName": "storybook", | ||
| "buildStorybookTargetName": "build-storybook", | ||
| "testStorybookTargetName": "test-storybook", | ||
| "staticStorybookTargetName": "static-storybook" | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
Issue: Incomplete Storybook Configuration
.storybookdirectory is missing..storybook/main.jsor.storybook/main.tsis not found..storybook/preview.jsor.storybook/preview.tsis not found.
🔗 Analysis chain
LGTM: Storybook plugin correctly added
The @nx/storybook/plugin has been properly configured with the standard target names for Storybook integration in an Nx workspace. This aligns with the PR objective of initializing Storybook.
To ensure the Storybook setup is complete, please run the following verification script:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Storybook configuration files exist
# Test: Check for .storybook configuration directory
if [ -d ".storybook" ]; then
echo ".storybook directory exists"
else
echo "Warning: .storybook directory not found"
fi
# Test: Check for main.js in .storybook
if [ -f ".storybook/main.js" ] || [ -f ".storybook/main.ts" ]; then
echo ".storybook/main.js or .storybook/main.ts exists"
else
echo "Warning: .storybook/main.js or .storybook/main.ts not found"
fi
# Test: Check for preview.js in .storybook
if [ -f ".storybook/preview.js" ] || [ -f ".storybook/preview.ts" ]; then
echo ".storybook/preview.js or .storybook/preview.ts exists"
else
echo "Warning: .storybook/preview.js or .storybook/preview.ts not found"
fi
# Test: Check for any .stories files
if fd --type f --glob "*.stories.@(js|jsx|ts|tsx|mdx)"; then
echo "Story files found"
else
echo "Warning: No story files found"
fi
Length of output: 879
Script:
#!/bin/bash
# Description: Verify Storybook configuration files exist
# Test: Check for .storybook configuration directory
if [ -d ".storybook" ]; then
echo ".storybook directory exists"
else
echo "Warning: .storybook directory not found"
fi
# Test: Check for main.js in .storybook
if [ -f ".storybook/main.js" ] || [ -f ".storybook/main.ts" ]; then
echo ".storybook/main.js or .storybook/main.ts exists"
else
echo "Warning: .storybook/main.js or .storybook/main.ts not found"
fi
# Test: Check for preview.js in .storybook
if [ -f ".storybook/preview.js" ] || [ -f ".storybook/preview.ts" ]; then
echo ".storybook/preview.js or .storybook/preview.ts exists"
else
echo "Warning: .storybook/preview.js or .storybook/preview.ts not found"
fi
# Test: Check for any .stories files
if fd --type f --glob '*.stories.@(js|jsx|ts|tsx|mdx)'; then
echo "Story files found"
else
echo "Warning: No story files found"
fi
Length of output: 615
| export const lightUIStorybook = { | ||
| fontBase: | ||
| '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif', | ||
| fontCode: | ||
| 'ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New", monospace', | ||
| // --background: 0 0% 100%; | ||
| // --foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --card: 0 0% 100%; | ||
| // --card-foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --popover: 0 0% 100%; | ||
| // --popover-foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --primary: 222.2 47.4% 11.2%; | ||
| // --primary-foreground: 210 40% 98%; | ||
| // | ||
| // --secondary: 210 40% 96.1%; | ||
| // --secondary-foreground: 222.2 47.4% 11.2%; | ||
| // | ||
| // --muted: 210 40% 96.1%; | ||
| // --muted-foreground: 215.4 16.3% 46.9%; | ||
| // | ||
| // --accent: 210 40% 96.1%; | ||
| // --accent-foreground: 222.2 47.4% 11.2%; | ||
| // | ||
| // --destructive: 0 84.2% 60.2%; | ||
| // --destructive-foreground: 210 40% 98%; | ||
| // | ||
| // --border: 214.3 31.8% 91.4%; | ||
| // --input: 214.3 31.8% 91.4%; | ||
| // --ring: 222.2 84% 4.9%; | ||
| // | ||
| // --radius: 0.5rem; | ||
| } |
There was a problem hiding this comment.
Incomplete light theme implementation
The lightUIStorybook constant is currently incomplete compared to the dark theme. This inconsistency may lead to issues when switching between themes. Consider the following suggestions:
-
Complete the light theme implementation to match the structure of the dark theme. This ensures consistency and proper functionality when switching between themes.
-
If the light theme is intentionally left incomplete (e.g., work in progress), please add a comment explaining its status and any pending tasks.
-
Remove or implement the commented-out CSS variables. If they are intended for future use, consider moving them to a separate constant or file for clarity.
Would you like assistance in completing the light theme implementation or documenting its current status?
| "nx": "19.5.7", | ||
| "postcss": "8.4.38", | ||
| "prettier": "^2.6.2", | ||
| "prettier": "^3.3.3", |
There was a problem hiding this comment.
💡 Codebase verification
ESLint and Prettier configurations are missing.
While eslint-config-prettier is present in devDependencies, there are no ESLint or Prettier configuration files found in the repository. To ensure proper integration and avoid potential formatting conflicts:
Action items:
- Add an ESLint configuration file (e.g.,
.eslintrc.json) to define linting rules. - Add a Prettier configuration file (e.g.,
.prettierrc) to specify formatting preferences. - Ensure integration between ESLint and Prettier by extending
eslint-config-prettierin the ESLint configuration. - Run linting and formatting checks to verify that the configurations work as expected.
🔗 Analysis chain
Review Prettier update for potential breaking changes.
Prettier has been updated from version 2.6.2 to 3.3.3, which is a major version jump. While this update brings the latest features and improvements, it may also introduce breaking changes in code formatting.
Action items:
- Review the Prettier changelog for any breaking changes between versions 2.x and 3.x.
- Run Prettier on a sample of your codebase to ensure the formatting changes are acceptable.
- Update any Prettier-related configurations or scripts if necessary.
- Ensure this update doesn't conflict with other linting or formatting tools in your project.
To check for potential conflicts with ESLint, run the following command:
If both ESLint and Prettier configurations are found, ensure they are properly integrated to avoid conflicts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for ESLint and Prettier configuration files
echo "ESLint configuration files:"
fd -e eslintrc -e eslintrc.js -e eslintrc.json
echo "Prettier configuration files:"
fd -e prettierrc -e prettierrc.js -e prettierrc.json
echo "Checking for eslint-config-prettier in package.json:"
jq '.devDependencies | has("eslint-config-prettier")' package.json
Length of output: 426
Script:
#!/bin/bash
# Check for inline ESLint and Prettier configurations in package.json
echo "Checking for 'eslintConfig' in package.json:"
jq '.eslintConfig' package.json
echo "Checking for 'prettier' configuration in package.json:"
jq '.prettier' package.json
Length of output: 299
libs/ui/src/shadcn/button.tsx
Outdated
| const Comp = asChild ? Slot : 'button' | ||
| return ( | ||
| <Comp | ||
| className={cn(buttonVariants({ variant, size, className }))} |
There was a problem hiding this comment.
Fix className merging to include custom class names
Passing className directly into buttonVariants may not merge the custom class names as intended. To ensure that any custom className props are properly merged with the variant classes, consider adjusting the className assignment.
Apply this diff to fix the class name merging:
- className={cn(buttonVariants({ variant, size, className }))}
+ className={cn(buttonVariants({ variant, size }), className)}📝 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.
| className={cn(buttonVariants({ variant, size, className }))} | |
| className={cn(buttonVariants({ variant, size }), className)} |
libs/ui/tailwind.config.js
Outdated
| join( | ||
| __dirname, | ||
| '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', | ||
| ), | ||
| ...createGlobPatternsForDependencies(__dirname), | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Include Storybook files in Tailwind's content paths
In the content array (lines 9-14), you are excluding files ending with .stories and .spec. If you are using Tailwind CSS classes within your Storybook stories, excluding .stories files might prevent Tailwind from generating the necessary styles for your Storybook components. Consider including .stories files to ensure all styles are applied in Storybook.
You can adjust the content pattern to include .stories files:
11 - '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+ '{src,pages,components,app}/**/*!(*.spec).{ts,tsx,html}',📝 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.
| join( | |
| __dirname, | |
| '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', | |
| ), | |
| ...createGlobPatternsForDependencies(__dirname), | |
| ], | |
| join( | |
| __dirname, | |
| '{src,pages,components,app}/**/*!(*.spec).{ts,tsx,html}', | |
| ), | |
| ...createGlobPatternsForDependencies(__dirname), | |
| ], |
libs/ui/.storybook/preview.tsx
Outdated
| // currentProps.theme = isDark ? themes.dark : themes.light | ||
| currentProps.theme = isDark | ||
| ? (darkUIStorybook as ThemeVars) | ||
| : themes.light |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use consistent theme variables for light mode
In the DocsContainer, when setting currentProps.theme, you're using darkUIStorybook for dark mode but themes.light for light mode. For consistency and to apply your custom light theme, consider using lightUIStorybook instead.
Apply this change:
currentProps.theme = isDark
- ? (darkUIStorybook as ThemeVars)
- : themes.light
+ ? (darkUIStorybook as ThemeVars)
+ : (lightUIStorybook as ThemeVars)📝 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.
| // currentProps.theme = isDark ? themes.dark : themes.light | |
| currentProps.theme = isDark | |
| ? (darkUIStorybook as ThemeVars) | |
| : themes.light | |
| // currentProps.theme = isDark ? themes.dark : themes.light | |
| currentProps.theme = isDark | |
| ? (darkUIStorybook as ThemeVars) | |
| : (lightUIStorybook as ThemeVars) |
libs/ui/.storybook/preview.tsx
Outdated
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [isDark, setDark] = React.useState(true) | ||
| props.context.channel.on(DARK_MODE_EVENT_NAME, state => | ||
| setDark(state)) |
There was a problem hiding this comment.
Wrap event listener in useEffect to prevent memory leaks
The event listener for DARK_MODE_EVENT_NAME is added directly in the render function without cleanup. This can lead to memory leaks because the listener is not removed when the component unmounts. Wrap the event listener in a useEffect hook with a cleanup function to manage it properly.
Apply this change:
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const [isDark, setDark] = React.useState(true)
- props.context.channel.on(DARK_MODE_EVENT_NAME, state =>
- setDark(state))
+ const [isDark, setDark] = React.useState(true)
+ React.useEffect(() => {
+ const handleDarkMode = (state: boolean) => setDark(state)
+ props.context.channel.on(DARK_MODE_EVENT_NAME, handleDarkMode)
+ return () => {
+ props.context.channel.off(DARK_MODE_EVENT_NAME, handleDarkMode)
+ }
+ }, [props.context.channel])📝 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.
| // eslint-disable-next-line react-hooks/rules-of-hooks | |
| const [isDark, setDark] = React.useState(true) | |
| props.context.channel.on(DARK_MODE_EVENT_NAME, state => | |
| setDark(state)) | |
| const [isDark, setDark] = React.useState(true) | |
| React.useEffect(() => { | |
| const handleDarkMode = (state: boolean) => setDark(state) | |
| props.context.channel.on(DARK_MODE_EVENT_NAME, handleDarkMode) | |
| return () => { | |
| props.context.channel.off(DARK_MODE_EVENT_NAME, handleDarkMode) | |
| } | |
| }, [props.context.channel]) |
|
Closing as stale |
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
f79dbae to
9916411
Compare
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
9916411 to
1412605
Compare
…' to 'dist/config-inspector'
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
1412605 to
714bade
Compare
✅ Deploy Preview for website-cuhacking ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for eslint-cuhacking ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (4)
apps/website/app/root.tsx (1)
13-24: Consider optimizing the font loading strategy.While the preconnect hints are good for performance, the font configuration could be optimized:
- The current font URL loads all weights (100-900) and styles, which might impact initial page load.
- Consider adding a
font-displaystrategy.Consider updating the font URL to only include the weights you need:
- href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&font-display=swap',apps/website/app/routes/_index.tsx (3)
19-19: Consider using a more specific type for date stateThe date state could benefit from a more specific type definition to prevent potential undefined states.
- const [date, setDate] = useState<Date | undefined>(new Date()) + const [date, setDate] = useState<Date>(new Date())
22-23: Consider responsive design improvementsThe current max-width constraint might not be optimal for all screen sizes.
- <div className="container mx-auto flex justify-center"> - <div className="max-w-lg"> + <div className="container mx-auto flex justify-center px-4 py-8"> + <div className="w-full max-w-lg sm:w-2/3 lg:w-1/2">
31-38: Expand accordion content for better user informationWhile the current content confirms accessibility, consider adding more detailed information about the hackathon's accessibility features.
<Accordion type="single" collapsible> <AccordionItem value="item-1"> <AccordionTrigger>Is it accessible?</AccordionTrigger> <AccordionContent> - Yes. It adheres to the WAI-ARIA design pattern. + Yes. Our website adheres to WAI-ARIA design patterns and WCAG guidelines. + We provide keyboard navigation, screen reader support, and high contrast + modes. If you need any specific accommodations, please contact our team. </AccordionContent> </AccordionItem> </Accordion>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
apps/website/public/favicon.icois excluded by!**/*.ico
📒 Files selected for processing (7)
.gitignore(2 hunks)apps/website/app/nx-welcome.tsx(0 hunks)apps/website/app/root.tsx(2 hunks)apps/website/app/routes/_index.tsx(1 hunks)apps/website/postcss.config.js(1 hunks)apps/website/tailwind.config.ts(1 hunks)components.json(1 hunks)
💤 Files with no reviewable changes (1)
- apps/website/app/nx-welcome.tsx
✅ Files skipped from review due to trivial changes (3)
- apps/website/postcss.config.js
- apps/website/tailwind.config.ts
- components.json
🚧 Files skipped from review as they are similar to previous changes (1)
- .gitignore
🔇 Additional comments (3)
apps/website/app/root.tsx (2)
Line range hint 1-11: LGTM! Imports are well-structured.
The imports are properly organized, with types separated from regular imports. The global CSS import suggests a centralized styling approach.
11-11: Verify Storybook compatibility with global styles.
Since this PR is part of Storybook initialization, ensure that the global CSS import works correctly in Storybook context.
apps/website/app/routes/_index.tsx (1)
13-17: LGTM! Meta information is well-defined
The meta tags are appropriately set with relevant title and description for the hackathon website.
| <html | ||
| lang="en" | ||
| className="dark" | ||
| > |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider implementing a more flexible dark mode strategy.
The current implementation hard-codes dark mode. Consider:
- Respecting user's system preferences using
prefers-color-scheme - Implementing a theme toggle
- Persisting user's theme preference
Here's a suggested implementation:
- <html
- lang="en"
- className="dark"
- >
+ <html
+ lang="en"
+ className={`${
+ typeof window !== 'undefined'
+ ? localStorage.getItem('theme') ?? 'dark'
+ : 'dark'
+ }`}
+ >Consider adding a theme context and toggle functionality in a separate PR.
Would you like me to help create a GitHub issue for implementing a proper theme switching mechanism?
Committable suggestion skipped: line range outside the PR's diff.
| <Calendar | ||
| mode="single" | ||
| selected={date} | ||
| onSelect={setDate} | ||
| className="rounded-md border shadow" | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance Calendar accessibility
The Calendar component should include an aria-label for better accessibility.
<Calendar
mode="single"
selected={date}
onSelect={setDate}
className="rounded-md border shadow"
+ aria-label="Select event date"
/>📝 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.
| <Calendar | |
| mode="single" | |
| selected={date} | |
| onSelect={setDate} | |
| className="rounded-md border shadow" | |
| /> | |
| <Calendar | |
| mode="single" | |
| selected={date} | |
| onSelect={setDate} | |
| className="rounded-md border shadow" | |
| aria-label="Select event date" | |
| /> |
apps/website/app/routes/_index.tsx
Outdated
| import { | ||
| Accordion, | ||
| AccordionContent, | ||
| AccordionItem, | ||
| AccordionTrigger, | ||
| } from '@shadcn/ui/accordion' | ||
| import { Calendar } from '@shadcn/ui/calendar' |
There was a problem hiding this comment.
💡 Codebase verification
@shadcn/ui is incorrectly referenced with an unsupported dependency
The project imports components from @shadcn/ui, but the dependency declared is @nx-extend/shadcn-ui. Ensure that the imported package matches the declared dependency or properly aliases @nx-extend/shadcn-ui to @shadcn/ui.
🔗 Analysis chain
Verify @shadcn/ui dependency configuration
The shadcn/ui components are being imported, but let's ensure they're properly configured in the project.
@shadcn/ui is incorrectly referenced with an unsupported dependency
The project imports components from @shadcn/ui, but the dependency declared is @nx-extend/shadcn-ui. Ensure that the imported package matches the declared dependency or properly aliases @nx-extend/shadcn-ui to @shadcn/ui.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify shadcn/ui configuration and dependencies
# Check if the necessary configuration files exist
echo "Checking for shadcn/ui configuration..."
fd "components.json|tailwind.config" --type f
# Check package.json for required dependencies
echo "Checking package.json for dependencies..."
if [ -f "package.json" ]; then
jq '.dependencies + .devDependencies | with_entries(select(.key | contains("shadcn")))' package.json
fi
Length of output: 578
Script:
#!/bin/bash
# Description: Verify if @nx-extend/shadcn-ui aliases or re-exports as @shadcn/ui
# Search for alias configurations in the project
echo "Searching for alias configurations for @shadcn/ui..."
rg '@shadcn/ui' --type ts,tsx,js,jsx,config
# Check if any files re-export components from @nx-extend/shadcn-ui as @shadcn/ui
echo "Checking for re-exports from @nx-extend/shadcn-ui to @shadcn/ui..."
rg 'from\s+["@]nx-extend/shadcn-ui' --type ts,tsx,js,jsx
Length of output: 443
Script:
#!/bin/bash
# Description: Verify if @nx-extend/shadcn-ui aliases or re-exports as @shadcn/ui
# Search for alias configurations in the project
echo "Searching for alias configurations for @shadcn/ui..."
rg '@shadcn/ui' -g '*.{ts,tsx,js,jsx,config}'
# Check if any files re-export components from @nx-extend/shadcn-ui to @shadcn/ui
echo "Checking for re-exports from @nx-extend/shadcn-ui to @shadcn/ui..."
rg 'from\s+["@]nx-extend/shadcn-ui' -g '*.{ts,tsx,js,jsx}'
Length of output: 759
There was a problem hiding this comment.
This is correct. @nx-extend/shadcn-ui is an nx plugin that fetches shadcn components and puts them into libs/shared/ui. @shadcn/ui is a local library. You can find the path alias for this in tsconfig.base.json at the root of the repo.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
There was a problem hiding this comment.
No I was replying to you
There was a problem hiding this comment.
Actionable comments posted: 13
🧹 Outside diff range and nitpick comments (41)
libs/shared/external/shadcn/utils/src/cn.ts (1)
4-6: LGTM! Well-implemented utility function.The
cnutility function is implemented correctly:
- Proper type safety with
ClassValue[]- Correct composition order:
twMerge(clsx())ensures Tailwind classes are properly merged after combination- Follows shadcn's recommended patterns
This utility will be valuable for components that need dynamic class name handling, especially when working with conditional Tailwind classes in your Storybook stories.
libs/shared/src/config/tailwind/base.ts (1)
9-13: Consider adding essential theme customizations and pluginsThe current configuration lacks theme customizations and plugins that could be beneficial:
- Consider adding common theme customizations:
theme: { - extend: {}, + extend: { + colors: { + // Add your brand colors + }, + spacing: { + // Add custom spacing if needed + }, + screens: { + // Add custom breakpoints if needed + } + }, },
- Consider adding useful plugins:
-plugins: [], +plugins: [ + require('@tailwindcss/forms'), + require('@tailwindcss/typography'), +],Would you like me to provide more detailed theme customizations based on your brand guidelines?
libs/shared/src/config/eslint/playwright.js (2)
1-2: Consider using a more robust import path for the base configThe deep relative import path
../../eslint.config.jscould become fragile if the file structure changes. Consider using module aliases or a more direct import path from the project root.
12-13: Add specific ESLint rules for Playwright testsThe rules object is currently empty. Consider adding Playwright-specific rules to enforce best practices for end-to-end testing.
Would you like me to suggest some common Playwright ESLint rules that could be beneficial for your testing setup? For example:
playwright/no-conditional-in-testplaywright/no-force-optionplaywright/prefer-web-first-assertionslibs/shared/external/shadcn/ui/.storybook/custom-viewports.ts (2)
1-4: Add TypeScript types for better maintainability.While the implementation is correct, adding TypeScript types would improve code maintainability and provide better IDE support.
+ import type { ViewportMap } from '@storybook/addon-viewport'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' - export const customViewports = { + export const customViewports: ViewportMap = {
5-39: Improve documentation and naming consistency.The viewport configurations are well-structured, but could benefit from:
- JSDoc comments explaining the purpose of each viewport
- Consistent naming convention (some use lowercase 'p', others uppercase 'K')
+ /** + * Custom viewport presets for common display resolutions: + * - HD (720p): Standard HD resolution + * - Full HD (1080p): Common desktop/laptop resolution + * - 2K: QHD resolution + * - 4K: UHD resolution + * - Ultrawide: 21:9 aspect ratio displays + */ export const customViewports: ViewportMap = { ...INITIAL_VIEWPORTS, 'hd': { - name: '720p', + name: 'HD (720p)', styles: { width: '1280px', height: '720px', }, }, 'fullHd': { - name: '1080p', + name: 'Full HD (1080p)', styles: { width: '1920px', height: '1080px', }, }, '2k': { - name: '2K', + name: '2K (QHD)', styles: { width: '2560px', height: '1440px', }, }, '4k': { - name: '4K', + name: '4K (UHD)', styles: { width: '3840px', height: '2160px', }, }, 'ultrawide': { - name: '21/9', + name: 'Ultrawide (21:9)', styles: { width: '2560px', height: '1080px', }, }, }libs/shared/src/config/eslint/default.js (1)
26-31: Enhance documentation for rule overrides sectionThe empty rules object appears to be a placeholder for future rule overrides. Consider adding documentation about:
- What types of rules should be added here
- Examples of common overrides
- When to use this section vs. the previous rules configuration
files: ['**.ts', '**.tsx', '**.js', '**.jsx'], - // Override or add rules here + // Use this section to override existing rules or add new ones specific to TypeScript/JavaScript files. + // Example: + // rules: { + // '@typescript-eslint/explicit-function-return-type': 'error', + // 'no-console': 'warn' + // } rules: {}, },🧰 Tools
🪛 eslint
[error] 31-31: Extra semicolon.
(style/semi)
libs/shared/external/shadcn/ui/eslint.config.js (2)
21-37: Consider potential race conditions with async configurationWhile using async/await for configuration loading is modern, be aware that ESLint might not handle async configurations consistently across all environments and integrations. Some ESLint tools or IDE plugins might expect synchronous configuration.
Consider adding error handling:
export default (async () => { - const baseConfig = await baseConfigPromise + try { + const baseConfig = await baseConfigPromise - return [ - ...baseConfig, - { - files: [ - '**/*.ts', - '**/*.tsx', - '**/*.js', - '**/*.jsx', - ], - // Override or add rules here - rules: {}, - }, - ] + return [ + ...baseConfig, + { + files: [ + '**/*.ts', + '**/*.tsx', + '**/*.js', + '**/*.jsx', + ], + // Override or add rules here + rules: {}, + }, + ] + } catch (error) { + console.error('Failed to load ESLint config:', error) + // Provide fallback configuration + return [{ + files: ['**/*.{ts,tsx,js,jsx}'], + rules: {}, + }] + } })()
34-34: Consider adding essential ESLint rulesThe rules object is empty. Consider adding essential rules for the shadcn UI library to maintain code quality and consistency.
- rules: {}, + rules: { + // Enforce consistent React imports + 'react/jsx-uses-react': 'error', + 'react/jsx-uses-vars': 'error', + // Enforce accessibility rules + 'jsx-a11y/alt-text': 'error', + 'jsx-a11y/aria-props': 'error', + // Enforce consistent component structure + 'react/prop-types': 'off', // Since we're using TypeScript + 'react/react-in-jsx-scope': 'off', // Not needed in modern React + },libs/shared/external/shadcn/utils/eslint.config.js (1)
1-17: Remove commented out code.The old configuration should be removed as it's no longer needed and adds unnecessary noise to the codebase.
-// const nx = require("@nx/eslint-plugin"); -// const baseConfig = require("../../eslint.config.js"); - -// module.exports = [ -// ...baseConfig, -// ...nx.configs["flat/react"], -// { -// files: [ -// "**/*.ts", -// "**/*.tsx", -// "**/*.js", -// "**/*.jsx" -// ], -// // Override or add rules here -// rules: {} -// } -// ];libs/shared/external/shadcn/ui/src/shadcn/colors.mdx (2)
38-43: Maintain consistent comment capitalization.For consistency with other color section comments, capitalize "destructive".
- {/*destructive*/} + {/*Destructive*/}
1-62: Consider adding usage documentation.While the color palette is well-structured, it would be helpful to add a brief description of how to use these color tokens in the application, including:
- How to apply these classes
- Examples of common use cases
- Any theme customization options
libs/shared/external/shadcn/ui/src/shadcn/button.tsx (3)
8-8: Consider adding aria-disabled for better accessibility.While the disabled state is visually handled, it's recommended to add
aria-disabled="true"for better screen reader support.Consider updating the base classes to include this attribute:
-'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', +'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [aria-disabled="true"]:pointer-events-none [aria-disabled="true"]:opacity-50',
42-54: LGTM! Well-implemented component with proper ref forwarding.The Button component follows React best practices with proper ref forwarding, polymorphic rendering, and clean prop handling.
Consider adding a type assertion for the displayName to ensure type safety:
-Button.displayName = 'Button' +Button.displayName = 'Button' as string
1-56: Consider adding Storybook documentation comments.Since this PR is about initializing Storybook, consider enhancing the component with JSDoc comments that Storybook can use for documentation. This will improve the component's documentation in Storybook and make it easier for other developers to understand its usage.
Example documentation:
/** * A flexible button component that supports multiple variants and sizes. * @component * @example * ```tsx * <Button variant="primary" size="lg"> * Click me * </Button> * ``` */libs/shared/external/shadcn/ui/src/shadcn/accordion.tsx (3)
7-7: Consider adding a displayName for debugging.While the direct assignment is correct, adding a displayName would improve component identification during debugging.
const Accordion = AccordionPrimitive.Root +Accordion.displayName = 'Accordion'
9-19: Consider making border styling configurable.The border styling is currently hardcoded. Consider making it configurable through a variant prop for better theme customization.
- className={cn('border-b', className)} + className={cn( + 'border-b', + 'data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r', + className + )}
21-39: Consider enhancing component customization options.The component has hardcoded values for icon size and transition duration. Consider making these configurable through props.
+interface AccordionTriggerProps extends + React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> { + iconSize?: number; + transitionDuration?: number; +} const AccordionTrigger = React.forwardRef< React.ElementRef<typeof AccordionPrimitive.Trigger>, - React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> + AccordionTriggerProps ->(({ className, children, ...props }, ref) => ( +>(({ className, children, iconSize = 4, transitionDuration = 200, ...props }, ref) => ( // ... - <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" /> + <ChevronDown + className={cn( + 'shrink-0 transition-transform', + `h-${iconSize} w-${iconSize}`, + `duration-${transitionDuration}` + )} + />libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx (3)
10-44: Consider updating the story title format.The configuration is well-structured, but consider updating the title format for consistency:
- title: 'Shadcn-ui/Button', + title: 'UI/Button',This follows the more common Storybook naming convention and provides a cleaner navigation structure.
69-82: Improve spacing in WithIcon story.Instead of using JSX expression for spacing, consider using margin classes:
- <EnvelopeOpenIcon className="mr-2 size-4" /> - {' '} - Login with Email + <EnvelopeOpenIcon className="mr-2 size-4" /> + Login with Email
84-98: Enhance loading state accessibility.Consider adding aria-label to improve accessibility for the loading state:
variant: 'secondary', disabled: true, + 'aria-label': 'Loading, please wait', children: ( <> <ReloadIcon className="mr-2 size-4 animate-spin" /> Please wait </> ),libs/shared/external/shadcn/utils/src/tailwind.config.ts (1)
1-78: Well-structured and maintainable configuration setup.The use of a builder function makes the configuration reusable and maintainable. The structure follows modern Tailwind practices and integrates well with shadcn-ui conventions.
Consider adding JSDoc comments to document:
- The purpose of the
buildConfigfunction- The expected format of the
appDirparameter- The relationship with shadcn-ui theming system
Example:
+/** + * Builds a Tailwind CSS configuration for shadcn-ui integration + * @param appDir - The root directory of the application (e.g., __dirname) + * @returns Tailwind CSS configuration object + */ export function buildConfig( appDir: string, ): Config {libs/shared/external/shadcn/ui/src/shadcn/calendar.tsx (2)
10-15: Consider adding JSDoc comments for better documentation.The props structure is clean and well-organized. Consider adding JSDoc comments to document the purpose of each prop, especially for custom props like
showOutsideDays.Example documentation:
+/** + * Calendar component props extending DayPicker's props + * @property {string} className - Additional CSS classes for the calendar + * @property {object} classNames - Custom class names for various calendar elements + * @property {boolean} showOutsideDays - Whether to display days from previous/next months + */ export type CalendarProps = React.ComponentProps<typeof DayPicker>
20-53: Consider extracting complex styles into constants.The classNames object contains complex Tailwind CSS classes that could be hard to maintain. Consider extracting these into named constants for better readability and reusability.
Example refactor:
const CALENDAR_STYLES = { months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0', month: 'space-y-4', // ... other styles } as const; // In the component: classNames={{ ...CALENDAR_STYLES, ...classNames, }}libs/shared/external/shadcn/ui/.storybook/main.ts (3)
5-8: Consider adding Next.js specific framework options.The framework configuration could benefit from additional Next.js specific options such as
staticDirsfor serving static files andbabelconfiguration if needed.framework: { name: '@storybook/nextjs', - options: {}, + options: { + staticDirs: ['../public'], + }, },
43-59: Consider cleaning up or documenting commented code.There's a significant block of commented configuration for
@storybook/addon-storysource. If this is intended for future use, consider:
- Moving it to a separate documentation file
- Adding a comment explaining why it's preserved
- Removing it if it's not needed
3-87: Consider adding performance optimizations.The configuration could benefit from some common Storybook performance optimizations:
const config: StorybookConfig = { stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'], + features: { + storyStoreV7: true, + }, + typescript: { + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + compilerOptions: { + allowSyntheticDefaultImports: false, + esModuleInterop: false, + }, + propFilter: { skipPropsWithoutDoc: true }, + }, + }, // ... rest of the config }libs/shared/external/shadcn/ui/.storybook/themes-storybook-ui.ts (1)
112-117: Add type safety to common theme configuration.The common theme configuration looks good but would benefit from proper type definitions.
+import { ThemeVars } from '@storybook/theming'; + -export const commonTheme = { +export const commonTheme: Pick<ThemeVars, 'brandTitle' | 'brandUrl' | 'brandTarget' | 'brandImage'> = { brandTitle: 'cuHacking', brandUrl: '/', brandTarget: '_self', brandImage: 'https://cuhacking.ca/Logo-2025.svg', }libs/shared/external/shadcn/ui/src/shadcn/introduction.tsx (4)
1-13: Consider optimizing the typography import path.The import path
@shadcn/ui/typography/typographyappears redundant. Consider simplifying it to@shadcn/ui/typographyif possible.
15-27: Remove empty className attribute.The
className=""on the<main>tag is empty and can be removed.- <main className=""> + <main>
67-70: Fix typo in content."drawback" should be "drawbacks" since it's referring to multiple issues with npm packages.
- One of the drawback of packaging the components + One of the drawbacks of packaging the components
47-51: Enhance accordion accessibility.Consider adding an ARIA label to the accordion to provide context for screen readers.
<Accordion type="single" collapsible + aria-label="Frequently Asked Questions" className="max-w-xs md:max-w-sm lg:max-w-2xl" >libs/shared/external/shadcn/ui/src/shadcn/typography/typography.tsx (4)
1-2: Remove unnecessary ESLint disable directiveThe ESLint directive
unused-imports/no-unused-varsappears unnecessary as thecnimport is actively used throughout the file.-/* eslint-disable unused-imports/no-unused-vars */ import { cn } from '@cuhacking/utils'
4-74: Well-structured heading components with room for accessibility enhancementThe heading components are well-implemented with proper typography hierarchy and React best practices. Consider enhancing accessibility by adding ARIA landmarks where appropriate.
export function TypographyH1({ className, children, ...props }: React.ComponentProps<'h1'>) { return ( <h1 className={cn( 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', className, )} + aria-level="1" {...props} > {children} </h1> ) }
200-210: Remove empty className from TypographyListItemThe empty string in the
cn()utility call is unnecessary.export function TypographyListItem({ className, children, ...props }: React.ComponentProps<'li'>) { return ( - <li className={cn('', className)} {...props}> + <li className={className} {...props}> {children} </li> ) }
76-89: Well-implemented text components with room for theme customizationThe text components are well-structured with appropriate semantic HTML elements and styling. Consider adding theme customization capabilities for better flexibility.
Consider implementing a theme context for customizable typography styles:
interface TypographyTheme { lead: string muted: string // ... other variants } const defaultTheme: TypographyTheme = { lead: 'text-xl text-muted-foreground', muted: 'text-sm text-muted-foreground', // ... other defaults } const TypographyContext = React.createContext(defaultTheme)Also applies to: 245-300
libs/shared/external/shadcn/ui/.storybook/preview.tsx (5)
2-2: Adjust comment placement after import statementThe comment on line 2 is placed immediately after the import statement without proper spacing, which may reduce readability. Consider moving the comment to a separate line above the import or adding appropriate spacing.
13-13: Remove unnecessary commented-out importThe import statement on line 13 is commented out. If it's no longer needed, consider removing it to keep the code clean and maintainable.
132-133: Ensure consistent theming in documentationIn line 133, when setting
currentProps.theme, consider usinglightUIStorybookinstead ofthemes.lightfor consistency with the custom theming applied in dark mode.Apply this change:
- currentProps.theme = isDark ? darkUIStorybook as ThemeVars : themes.light + currentProps.theme = isDark ? darkUIStorybook as ThemeVars : lightUIStorybook as ThemeVars
134-137: Clean up commented-out console logsRemove the commented-out
console.logstatements if they are no longer needed. This helps maintain clean and readable code.
156-175: Review multiple theme decorators for potential conflictsThe decorators array includes both a
ThemeProviderfromnext-themesand thewithThemeByClassNamedecorator from@storybook/addon-themes. Using multiple theming solutions might cause conflicts or redundant styling. Consider consolidating them to a single theming approach to avoid unexpected behavior.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (2)
libs/shared/external/shadcn/ui/public/cuhacking-logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (41)
.gitignore(2 hunks)chromatic.config.json(1 hunks)components.json(1 hunks)libs/shared/external/shadcn/ui/.storybook/custom-viewports.ts(1 hunks)libs/shared/external/shadcn/ui/.storybook/global.css(1 hunks)libs/shared/external/shadcn/ui/.storybook/main.ts(1 hunks)libs/shared/external/shadcn/ui/.storybook/preview.tsx(1 hunks)libs/shared/external/shadcn/ui/.storybook/themes-storybook-ui.ts(1 hunks)libs/shared/external/shadcn/ui/README.md(1 hunks)libs/shared/external/shadcn/ui/eslint.config.js(1 hunks)libs/shared/external/shadcn/ui/package.json(1 hunks)libs/shared/external/shadcn/ui/postcss.config.js(1 hunks)libs/shared/external/shadcn/ui/project.json(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/accordion.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/button.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/calendar.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/colors.mdx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/docs.mdx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/introduction.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/typography/typography.tsx(1 hunks)libs/shared/external/shadcn/ui/tailwind.config.ts(1 hunks)libs/shared/external/shadcn/ui/tsconfig.json(1 hunks)libs/shared/external/shadcn/ui/tsconfig.lib.json(1 hunks)libs/shared/external/shadcn/ui/tsconfig.storybook.json(1 hunks)libs/shared/external/shadcn/utils/README.md(1 hunks)libs/shared/external/shadcn/utils/eslint.config.js(1 hunks)libs/shared/external/shadcn/utils/project.json(1 hunks)libs/shared/external/shadcn/utils/src/cn.ts(1 hunks)libs/shared/external/shadcn/utils/src/global.css(1 hunks)libs/shared/external/shadcn/utils/src/index.ts(1 hunks)libs/shared/external/shadcn/utils/src/tailwind.config.ts(1 hunks)libs/shared/external/shadcn/utils/tsconfig.json(1 hunks)libs/shared/external/shadcn/utils/tsconfig.lib.json(1 hunks)libs/shared/features/awesome-feature/index.ts(1 hunks)libs/shared/src/config/eslint/antfu.js(1 hunks)libs/shared/src/config/eslint/default.js(1 hunks)libs/shared/src/config/eslint/playwright.js(1 hunks)libs/shared/src/config/tailwind/base.ts(1 hunks)libs/shared/src/config/typescript/base.json(1 hunks)package.json(4 hunks)
✅ Files skipped from review due to trivial changes (18)
- chromatic.config.json
- libs/shared/external/shadcn/ui/.storybook/global.css
- libs/shared/external/shadcn/ui/README.md
- libs/shared/external/shadcn/ui/package.json
- libs/shared/external/shadcn/ui/postcss.config.js
- libs/shared/external/shadcn/ui/project.json
- libs/shared/external/shadcn/ui/src/shadcn/docs.mdx
- libs/shared/external/shadcn/ui/tailwind.config.ts
- libs/shared/external/shadcn/ui/tsconfig.json
- libs/shared/external/shadcn/ui/tsconfig.lib.json
- libs/shared/external/shadcn/ui/tsconfig.storybook.json
- libs/shared/external/shadcn/utils/README.md
- libs/shared/external/shadcn/utils/project.json
- libs/shared/external/shadcn/utils/src/global.css
- libs/shared/external/shadcn/utils/src/index.ts
- libs/shared/external/shadcn/utils/tsconfig.json
- libs/shared/external/shadcn/utils/tsconfig.lib.json
- libs/shared/features/awesome-feature/index.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- .gitignore
- components.json
🧰 Additional context used
🪛 eslint
libs/shared/src/config/eslint/default.js
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
[error] 31-31: Extra semicolon.
(style/semi)
🪛 Biome
libs/shared/src/config/typescript/base.json
[error] 5-5: Expected a property but instead found '// "---------- JAVASCRIPT SUPPORT ---------": "",'.
Expected a property here.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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] 11-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)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-28: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-30: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 32-35: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-38: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🔇 Additional comments (38)
libs/shared/src/config/eslint/antfu.js (2)
3-10: Review configuration options and clean up commented code
A few suggestions to improve this configuration:
- The
slidevoption is enabled - please verify if this is actually needed for presentations in the project - Consider removing or documenting the purpose of the commented code:
- Line 5:
// unocss: true - Line 9-10:
// {}
- Line 5:
Consider applying this diff:
export default antfu({
formatters: true,
- // unocss: true,
react: true,
- slidev: true,
+ slidev: false, // Enable only if project uses Slidev for presentations
},
- // {}
)#!/bin/bash
# Description: Check if project uses Slidev
# Look for Slidev-related files or configurations
# Search for Slidev dependencies or configurations
rg -l "slidev" --type json --type yaml1-2: Verify @antfu/eslint-config dependency
Let's ensure this dependency is properly declared in package.json.
✅ Verification successful
Dependency is properly configured and integrated
The @antfu/eslint-config dependency is correctly declared in package.json with version ^3.8.0 and is present in the pnpm-lock.yaml file. The project has multiple ESLint configurations across different apps and libraries, which is a common setup in a monorepo structure, and there's no indication of conflicts.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if @antfu/eslint-config is properly declared in package.json
# and verify its version compatibility
# Check if dependency exists in package.json
jq '.dependencies["@antfu/eslint-config"] // .devDependencies["@antfu/eslint-config"]' package.json
# Look for other ESLint configs to ensure no conflicts
fd -e json -e js -e cjs --full-path '.*eslint.*\.(?:json|js|cjs)$'
Length of output: 272
Script:
#!/bin/bash
# Let's try a different approach to verify the dependency and ESLint configs
# Check package.json for @antfu/eslint-config
rg "@antfu/eslint-config" package.json
# Find ESLint config files using simpler patterns
fd eslint
fd .eslintrc
# Check if the dependency is listed in pnpm-lock.yaml
rg "@antfu/eslint-config" pnpm-lock.yaml
Length of output: 1055
libs/shared/external/shadcn/utils/src/cn.ts (1)
1-2: LGTM! Clean and focused imports.
The imports are well-structured, bringing in exactly what's needed:
clsxfor combining class names with conditional logictwMergefor resolving Tailwind CSS class conflicts
libs/shared/src/config/tailwind/base.ts (1)
1-2: LGTM! Proper type imports and utility functions.
The imports are well-structured, utilizing TypeScript types for type safety and including the necessary Nx utility function for dependency scanning.
libs/shared/src/config/eslint/playwright.js (1)
4-16: Verify base configuration integration
The overall structure using an async IIFE is correct for ESLint's flat config system. However, let's verify that the base configuration is properly integrated.
✅ Verification successful
Base configuration integration is correctly implemented
The configuration structure is properly implemented with:
- Root
eslint.config.jsexports the Antfu ESLint config as the base - The Playwright config correctly imports and awaits this base config
- The configuration is merged in the correct order: Playwright recommended rules first, followed by base config, then file-specific overrides
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the base ESLint config exists and exports a valid configuration
cat libs/shared/src/eslint.config.js 2>/dev/null || echo "Base config not found at expected location"
# Look for any other ESLint configs that might conflict
fd -e js -e cjs -e json --full-path '.*eslint.*\.(?:js|cjs|json)$'
Length of output: 569
Script:
#!/bin/bash
# Check the content of default.js which might be the base config
cat libs/shared/src/config/eslint/default.js
# Check if baseConfigPromise is imported from somewhere
rg "baseConfigPromise" -A 2 -B 2
Length of output: 4336
Script:
#!/bin/bash
# Check the root eslint.config.js which is imported as baseConfigPromise
cat eslint.config.js
Length of output: 969
libs/shared/src/config/eslint/default.js (2)
5-7: LGTM! Correctly ignores build output directory
The ignore pattern for the dist directory is properly configured.
8-25: Consider restricting module boundary constraints
The current configuration allows all tags ('*') to depend on all other tags. This might be too permissive and could lead to unwanted dependencies between modules.
#!/bin/bash
# Description: Check for existing tag definitions and usage in the project
# Search for project.json files that might define tags
fd 'project.json' --exec jq -r '.tags // empty'
# Search for other module boundary configurations
rg -l "enforce-module-boundaries"Consider defining specific tags and their allowed dependencies based on your project's architecture. For example:
depConstraints: [
{
- sourceTag: '*',
- onlyDependOnLibsWithTags: ['*'],
+ sourceTag: 'scope:ui',
+ onlyDependOnLibsWithTags: ['scope:shared', 'scope:ui'],
},
],libs/shared/external/shadcn/ui/eslint.config.js (1)
19-37: Verify the removal of Nx React ESLint configuration
The new implementation removes the Nx React ESLint configuration (nx.configs["flat/react"]) that was present in the old code. This might affect React-specific linting rules.
✅ Verification successful
Removal of Nx React config is intentional and properly handled
The removal of nx.configs["flat/react"] is part of a broader migration from Nx ESLint configs to @antfu/eslint-config. The root eslint.config.js now uses antfu() with react: true, which provides React-specific linting rules for the entire project. This is a valid replacement that maintains React linting coverage.
- The change aligns with the codebase-wide transition from Nx ESLint configs to @antfu/eslint-config
- React linting is properly configured at the root level with
react: true - All shadcn-related ESLint configs inherit from this root configuration through the base config import
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if Nx React ESLint rules are configured elsewhere
# Expected: Find other ESLint configurations that might include Nx React rules
# Search for ESLint config files
echo "Searching for ESLint configurations..."
fd -e js -e cjs -e mjs -e json --full-path '.*eslint.*' | grep -v 'node_modules'
# Search for Nx React ESLint configuration usage
echo "Checking for Nx React ESLint configuration usage..."
rg -l "nx.*configs.*['\"]flat/react" --type js
Length of output: 832
Script:
#!/bin/bash
# Let's check the content of the files that use Nx React config to understand the full context
echo "Checking content of libs/shared/utils/eslint.config.js..."
cat libs/shared/utils/eslint.config.js
echo -e "\nChecking content of libs/shared/external/shadcn/utils/eslint.config.js..."
cat libs/shared/external/shadcn/utils/eslint.config.js
# Also check the root eslint config since it's imported by the file under review
echo -e "\nChecking content of libs/shared/eslint.config.js..."
cat libs/shared/eslint.config.js
Length of output: 2100
Script:
#!/bin/bash
# Let's check the root eslint config (correct path this time) and check for any React-specific configurations
echo "Checking content of root eslint.config.js..."
cat eslint.config.js
# Also check if there are any React-specific ESLint configurations in the shared config directory
echo -e "\nChecking React-specific configurations in shared config..."
cat libs/shared/src/config/eslint/default.js
Length of output: 1939
libs/shared/external/shadcn/utils/eslint.config.js (1)
19-37: Verify React-specific ESLint rules are properly configured.
The new configuration removes nx.configs["flat/react"] which provided React-specific linting rules. Ensure these rules are properly configured elsewhere or consider adding them back if needed.
Additionally, consider these architectural improvements:
- The deep relative import path (
../../../eslint.config.js) seems fragile. Consider using a more robust path resolution mechanism. - Add error handling for the async configuration loading.
Here's a suggested improvement:
-import baseConfigPromise from '../../../eslint.config.js'
+// Use path from project root or environment variable
+import baseConfigPromise from '@project/eslint-config'
export default (async () => {
+ try {
const baseConfig = await baseConfigPromise
return [
...baseConfig,
{
files: [
'**/*.ts',
'**/*.tsx',
'**/*.js',
'**/*.jsx',
],
// Override or add rules here
rules: {},
},
]
+ } catch (error) {
+ console.error('Failed to load ESLint configuration:', error)
+ throw error
+ }
})()✅ Verification successful
React ESLint rules are properly configured in the root config
The root eslint.config.js uses @antfu/eslint-config with react: true, which provides React-specific linting rules. The removal of nx.configs["flat/react"] is intentional as the project has migrated to use antfu's ESLint configuration instead.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for React-specific ESLint rules in the base config and other ESLint configs
# Search for React ESLint configurations in the codebase
echo "Searching for React ESLint configurations..."
rg -l "eslint-plugin-react" package.json
rg -l "react" .eslintrc*
# Check the base ESLint config for React rules
echo "Checking base ESLint config..."
cat ../../../eslint.config.js
Length of output: 391
Script:
#!/bin/bash
# Let's try to find the base ESLint config and React-related configurations using more robust search
# Find all eslint config files
echo "Finding ESLint config files..."
fd -e js -e cjs -e mjs -e json --full-path "eslint\.config"
# Check package.json for React ESLint dependencies and configurations
echo -e "\nChecking package.json for React ESLint setup..."
cat package.json | jq '.dependencies,.devDependencies,.peerDependencies | select(. != null) | with_entries(select(.key | contains("eslint") or contains("react")))'
# Search for React ESLint rule configurations in JS files
echo -e "\nSearching for React ESLint rules in config files..."
rg -A 5 "(?i)react.*rules|rules.*react" --type js
# Look for nx.configs patterns
echo -e "\nSearching for nx.configs patterns..."
rg "nx\.configs.*react" --type js
Length of output: 2424
Script:
#!/bin/bash
# Let's examine the base ESLint config and the React rules setup
# Check the root eslint.config.js content
echo "Checking root ESLint config..."
cat eslint.config.js
# Check the commented out nx.configs["flat/react"] in the related files
echo -e "\nChecking the shadcn utils ESLint config..."
cat libs/shared/external/shadcn/utils/eslint.config.js
# Check if there are any other React-specific rule configurations
echo -e "\nChecking for React rule configurations..."
rg -B 2 -A 5 '"rules":\s*{' --type js | grep -B 2 -A 5 -i 'react'
Length of output: 2201
libs/shared/external/shadcn/ui/src/shadcn/colors.mdx (3)
1-3: LGTM! Import statement and Meta configuration are properly set up.
31-36: LGTM! Muted color tokens are properly defined.
5-15: Verify CSS variable definitions for background and foreground colors.
The color tokens reference CSS variables that should be defined in your theme. Let's verify their existence.
✅ Verification successful
The previous script failed because scss type wasn't recognized. Let's broaden our search to include more file types and potential theme configuration files to locate these CSS variable definitions.
Let's examine the content of these global CSS files to locate the variable definitions.
CSS variables for background and foreground colors are properly defined
The CSS variables --background and --foreground are correctly defined in the shadcn theme system at libs/shared/external/shadcn/utils/src/global.css. They are defined for both light and dark themes:
Light theme:
--background: 0 0% 100%--foreground: 240 10% 3.9%
Dark theme:
--background: 240 10% 3.9%--foreground: 0 0% 98%
The color tokens in your MDX file correctly reference these CSS variables, and they will work as expected when the global CSS is imported into your application.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for CSS variable definitions in the codebase
rg --type css --type scss -l '(--background|--foreground)\s*:'
Length of output: 93
Script:
#!/bin/bash
# Search for CSS variable definitions in the codebase with broader file types and patterns
rg -t css -t tsx -t jsx -t html -l '(--background|--foreground)\s*:'
# Also search for potential theme configuration files
fd -e ts -e js -e json -e css "theme|colors|tokens|global"
Length of output: 319
Script:
#!/bin/bash
# Check the content of potential global CSS files for the variable definitions
cat libs/shared/external/shadcn/utils/src/global.css
cat libs/shared/utils/src/global.css
cat apps/docs/src/styles/globals.css
cat apps/docs/src/app/\(docs\)/fumadocs.global.css
Length of output: 13636
libs/shared/external/shadcn/ui/src/shadcn/button.tsx (4)
1-5: LGTM! Well-organized imports.
The imports are clean, well-structured, and include all necessary dependencies for the component's functionality.
7-34: LGTM! Comprehensive variant system with good defaults.
The button variants are well-structured and provide good flexibility with meaningful defaults. The use of class-variance-authority makes the styling system maintainable and type-safe.
36-40: LGTM! Well-typed props interface.
The ButtonProps interface is properly typed, extends the correct HTML button attributes, and includes the necessary variant props. The asChild pattern is correctly implemented for polymorphic usage.
56-56: LGTM! Clean exports.
The exports provide access to both the Button component and its variants, which is useful for consuming components that might need to reuse the styling.
libs/shared/external/shadcn/ui/src/shadcn/accordion.tsx (3)
1-5: LGTM! Well-organized imports.
The imports are properly structured and include all necessary dependencies for the accordion component.
56-56: LGTM! Clean exports.
The export statement is well-organized and includes all necessary components.
41-54: Verify animation class definitions.
The component uses custom animation classes (animate-accordion-up and animate-accordion-down). Ensure these animations are properly defined in your Tailwind configuration.
✅ Verification successful
Animation classes are properly defined
The animation classes animate-accordion-up and animate-accordion-down are correctly defined in both Tailwind configurations with appropriate keyframes and timing. The animations use Radix UI's content height variable and have a smooth 0.2s ease-out transition.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for accordion animation definitions in Tailwind config
rg -l "accordion-(up|down)" -g "tailwind.config.*"
Length of output: 150
Script:
#!/bin/bash
# Check the actual animation definitions in both config files
rg "accordion-(up|down)" -A 5 -B 5 libs/shared/utils/src/tailwind.config.ts libs/shared/external/shadcn/utils/src/tailwind.config.ts
Length of output: 3597
libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx (3)
1-9: LGTM! Well-organized imports.
The imports are properly structured and include all necessary dependencies for the stories.
46-47: LGTM! Proper type definitions.
The type definitions are well-structured and provide good type safety using the satisfies operator.
49-55: LGTM! Well-organized basic variants.
The basic button variants are properly demonstrated with clear, concise configurations.
libs/shared/external/shadcn/utils/src/tailwind.config.ts (4)
1-9: LGTM! Well-structured imports and function signature.
The imports are appropriate and follow best practices, including the use of the node:path protocol. The function signature is properly typed with TypeScript.
75-77: LGTM! Plugin configuration is appropriate.
The tailwindcss-animate plugin is correctly configured and necessary for the accordion animations defined in the theme.
18-74: Verify CSS variable definitions and consider documenting theme structure.
The theme configuration is well-structured and follows shadcn-ui conventions. However, we should:
- Verify that all CSS variables are properly defined
- Consider adding documentation for the theming system
#!/bin/bash
# Description: Check for CSS variable definitions used in the theme
# Search for CSS variable definitions
echo "Searching for CSS variable definitions:"
rg --type css --type html "(?:^|\s)(:root|html|body)\s*{[^}]*--(?:border|input|ring|background|foreground|primary|secondary|destructive|muted|accent|popover|card|radius|radix-accordion)[^}]*}"Consider adding a theme.md documentation file in the same directory to:
- Document the color system and its semantic usage
- Explain the theming architecture and customization
- Provide examples of theme customization
11-17: Verify content paths cover all component locations.
The content configuration excludes test files appropriately, but we should verify that all component locations are covered by the glob pattern.
✅ Verification successful
Let me generate a new script to better verify the component locations and content paths.
This script will help us:
- Understand the actual repository structure for TypeScript files
- Find React component definitions
- Check specifically for feature libraries that might contain components
This will give us a better picture of whether the current glob pattern is sufficient or needs adjustment.
Based on the repository structure revealed by the scripts, I can now provide a final response:
Content paths in tailwind config are appropriate for the project structure
The current glob pattern {src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html} combined with createGlobPatternsForDependencies() is sufficient because:
- All UI components are properly organized under standard directories that are covered by the pattern
- The repository structure shows components are located in expected paths like
apps/*/src,libs/shared/external/shadcn/ui/src - The
createGlobPatternsForDependencies()function from Nx ensures all library dependencies are included - No component files were found in unexpected locations that would be missed by the current configuration
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for potential component files that might be missed by the current glob pattern
# Find all TypeScript/TSX files that might contain components
echo "Potential component files that might be missed by current glob pattern:"
fd -e tsx -e ts --type f \
--exclude '*.stories.*' \
--exclude '*.spec.*' \
--exclude '**/src/**' \
--exclude '**/pages/**' \
--exclude '**/components/**' \
--exclude '**/app/**'
Length of output: 713
Script:
#!/bin/bash
# Let's check the actual structure of TypeScript/TSX files in the repository
echo "=== Repository TypeScript/TSX file structure ==="
fd -e tsx -e ts --type f \
--exclude '*.stories.*' \
--exclude '*.spec.*' \
| sort
echo -e "\n=== Files containing component definitions ==="
# Look for files containing React component patterns
ast-grep --pattern 'export $_ function $_($$$) {
return $$$
}'
echo -e "\n=== Checking lib/feature structure ==="
fd -e tsx -e ts --type f \
--exclude '*.stories.*' \
--exclude '*.spec.*' \
-p "libs/*/feature"
Length of output: 2051
libs/shared/external/shadcn/ui/src/shadcn/calendar.tsx (2)
1-8: LGTM! Well-organized imports and type definition.
The imports are properly structured and the type definition correctly extends the DayPicker props, providing good type safety.
64-66: LGTM! Proper component naming and export.
The displayName is correctly set for debugging purposes, and the component export is clean.
libs/shared/external/shadcn/ui/.storybook/main.ts (1)
19-24: Verify theme-related addon interactions.
You have three theme/background related addons:
storybook-dark-mode@storybook/addon-themes@storybook/addon-backgrounds
While the comments explain their different purposes, ensure they don't conflict with each other, especially when toggling dark mode.
✅ Verification successful
No conflicts detected between theme-related addons
These addons are officially supported by Storybook and designed to work together:
storybook-dark-modecontrols the Storybook UI theme@storybook/addon-themesmanages component-level theming@storybook/addon-backgroundshandles story canvas backgrounds
The clear commenting in your configuration correctly describes their separate responsibilities, and their coexistence is a common pattern in Storybook projects.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if there are any known issues or conflicts between these addons
gh search issues "storybook-dark-mode addon-themes conflict" --repo storybookjs/storybook
gh search issues "addon-backgrounds addon-themes conflict" --repo storybookjs/storybook
Length of output: 181
Script:
#!/bin/bash
# Let's check the storybook configuration for any theme-related setup or conflicts
rg -A 5 "storybook-dark-mode|addon-themes|addon-backgrounds" --type ts
# Also check for any theme-related decorators or configurations
ast-grep --pattern 'export const decorators = [$$$]'
# Look for any preview configurations that might show theme setup
fd preview.ts --exec cat {}
Length of output: 159
libs/shared/external/shadcn/ui/.storybook/themes-storybook-ui.ts (1)
116-116: Verify brand image URL accessibility.
Ensure the brand image URL is accessible and returns the correct logo image.
libs/shared/external/shadcn/ui/src/shadcn/introduction.tsx (2)
28-44: Well-structured content with clear hierarchy!
Good use of semantic HTML and typography components to create a clear content hierarchy.
115-115: LGTM!
The default export follows React conventions.
package.json (5)
5-5: LGTM: Package metadata updates follow best practices
The changes to package visibility and repository/bugs URLs are well-structured and follow npm conventions.
Also applies to: 11-14
32-43: LGTM: Dependencies are well-organized and consistent
Good job maintaining version consistency across related packages (e.g., Remix packages at 2.14.0). The new UI component dependencies will work well with Storybook.
148-156: LGTM: Development tooling is well-configured
Good job maintaining consistent versions across development tools and testing utilities. The UI-related packages will integrate well with Storybook.
78-94: Verify Storybook addon configurations
Excellent selection of Storybook addons covering accessibility, design, testing, and theming. To ensure proper functionality:
Let's verify the addon configurations:
#!/bin/bash
# Check for Storybook configuration files
echo "Checking for main.js/ts:"
fd -e js -e ts -name "main*" -path "*.storybook*"
echo "Checking for preview.js/ts:"
fd -e js -e ts -name "preview*" -path "*.storybook*"
# Verify addon imports in main configuration
echo "Checking addon imports in Storybook main config:"
rg -l "@storybook/addon-" -g "*.storybook/main.*"23-23: Verify Chromatic configuration for Storybook
The new scripts look good, particularly:
- The
cleanscript safely preserves environment files - The Chromatic integration for visual testing
Let's verify the Chromatic configuration:
Also applies to: 28-29
✅ Verification successful
Chromatic is properly configured with appropriate settings
The Chromatic configuration is well-structured in chromatic.config.json with:
- Correct project ID setup
- Proper Storybook directory configuration (
libs/shared/ui) - Build command using nx
- Appropriate output directory configuration
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for Chromatic configuration
echo "Checking for chromatic.config.ts/js:"
fd -e ts -e js -name "chromatic.config*"
# Check if project token is properly configured
echo "Checking for CHROMATIC_PROJECT_TOKEN in environment files:"
fd -H -g ".env*" --exec grep -l "CHROMATIC_PROJECT_TOKEN" {} \;
Length of output: 998
Script:
#!/bin/bash
# Let's try a different approach to find Storybook and Chromatic configurations
# Check for Storybook config directory
echo "Checking for .storybook directory:"
fd -t d ".storybook$"
# Look for any Chromatic-related configuration
echo -e "\nSearching for Chromatic configuration in any file:"
rg -l "chromatic" --type-add 'config:*.{js,ts,json,yaml,yml}' -t config
# Check package.json for Chromatic configuration
echo -e "\nChecking package.json for Chromatic configuration:"
cat package.json | grep -A 5 "chromatic"
# Look for environment files
echo -e "\nListing environment files:"
fd -H "^\.env"
Length of output: 951
Script:
#!/bin/bash
# Let's check the content of chromatic.config.json and look for any Storybook configurations
echo "Checking chromatic.config.json content:"
cat chromatic.config.json
echo -e "\nChecking for Storybook configuration files:"
fd -e js -e ts -e json -e cjs -e mjs ".storybook"
echo -e "\nLooking for Storybook build output directory configuration:"
rg -l "storybook-static|storybookBuildDir" --type json --type js --type ts
Length of output: 888
libs/shared/external/shadcn/ui/src/shadcn/typography/typography.tsx (1)
91-104: Well-implemented special components
The Blockquote and InlineCode components are well-structured with appropriate semantic elements and styling.
Also applies to: 227-243
| content: [ | ||
| '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', | ||
| ...createGlobPatternsForDependencies(__dirname), | ||
| ], |
There was a problem hiding this comment.
💡 Codebase verification
Content patterns need to be updated for the current project structure
The current content patterns need adjustment based on the actual project structure:
- The pattern
{src,pages,components,app}/**/*doesn't fully match the monorepo structure where files are underapps/andlibs/ - Files with Tailwind classes are found in locations not covered by current patterns
- Multiple Tailwind configs exist in the project, suggesting a need for workspace-specific patterns
Recommended updates:
- Update the pattern to include:
{apps,libs}/**/*!(*.stories|*.spec).{ts,tsx,html} - Keep the dependency patterns via
createGlobPatternsForDependencies
🔗 Analysis chain
Verify content patterns coverage
The current glob patterns might need adjustment:
- Verify that all component locations are covered
- Consider if excluding all story files is desired, as some might contain useful class names
- Confirm that the dependency patterns are working as expected
Let me gather more information about the actual file structure and content patterns to make a more informed decision.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the coverage of Tailwind content patterns
# Check for any potential component directories that might be missed
echo "Checking for potential component directories..."
fd --type directory --max-depth 3 "components|ui|elements|layouts|features"
# Check for story files that might contain Tailwind classes
echo "Checking for Storybook files with potential Tailwind classes..."
rg -l "className=" --glob "*.stories.{ts,tsx}"
Length of output: 449
Script:
#!/bin/bash
# Check the actual directory structure relative to the Tailwind config
echo "Checking directory structure..."
fd --type directory --max-depth 3 "src|pages|components|app"
# Check for any TypeScript/TSX files that might contain Tailwind classes
echo "Checking for TS/TSX files with potential Tailwind classes..."
rg -l "className=" --glob "*.{ts,tsx}" --glob "!*.stories.{ts,tsx}" --glob "!*.spec.{ts,tsx}"
# Check the actual location of the Tailwind config
echo "Locating Tailwind configs..."
fd "tailwind" --type file
Length of output: 1229
| import type { Config } from 'tailwindcss' | ||
| import { createGlobPatternsForDependencies } from '@nx/react/tailwind' | ||
|
|
||
| export default { | ||
| content: [ | ||
| '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', | ||
| ...createGlobPatternsForDependencies(__dirname), | ||
| ], | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
| plugins: [], | ||
| } satisfies Config |
There was a problem hiding this comment.
💡 Codebase verification
Base Tailwind configuration needs to be updated
The verification reveals that the base configuration in libs/shared/src/config/tailwind/base.ts is not being used. Instead, other configurations are importing from libs/shared/utils/src/tailwind.config which contains a more comprehensive setup with theme extensions and animations.
- The base config at
libs/shared/src/config/tailwind/base.tsshould either:- Be removed since it's not being used
- Or be updated to re-export the configuration from
libs/shared/utils/src/tailwind.config
The PostCSS configuration is properly set up in both locations to use Tailwind.
🔗 Analysis chain
Verify configuration integration
Let's ensure this base configuration is properly integrated:
- Verify that other Tailwind configs import this base config
- Confirm PostCSS is configured to use Tailwind
Let me gather more information about the PostCSS configurations and other potential Tailwind config files.
Let me check the contents of these Tailwind config files to see if they properly import and extend the base configuration.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Tailwind configuration integration
# Check for other Tailwind configs that should import this base config
echo "Checking for other Tailwind configurations..."
rg -l "from.*config/tailwind/base" --type ts
# Check for PostCSS configuration
echo "Checking PostCSS configuration..."
fd "postcss.config.js"
Length of output: 327
Script:
#!/bin/bash
# Check contents of PostCSS configs
echo "Contents of apps/website/postcss.config.js:"
cat apps/website/postcss.config.js
echo -e "\nContents of libs/shared/external/shadcn/ui/postcss.config.js:"
cat libs/shared/external/shadcn/ui/postcss.config.js
# Find all tailwind config files
echo -e "\nFinding all tailwind config files:"
fd "tailwind.config" .
# Check for direct references to tailwindcss in package.json
echo -e "\nChecking package.json for tailwindcss dependencies:"
fd "package.json" -x grep -l "tailwindcss" {}
Length of output: 1025
Script:
#!/bin/bash
# Check contents of Tailwind config files
echo "Contents of apps/website/tailwind.config.ts:"
cat apps/website/tailwind.config.ts
echo -e "\nContents of apps/docs/tailwind.config.ts:"
cat apps/docs/tailwind.config.ts
echo -e "\nContents of libs/shared/external/shadcn/ui/tailwind.config.ts:"
cat libs/shared/external/shadcn/ui/tailwind.config.ts
echo -e "\nContents of libs/shared/external/shadcn/utils/src/tailwind.config.ts:"
cat libs/shared/external/shadcn/utils/src/tailwind.config.ts
echo -e "\nContents of libs/shared/utils/src/tailwind.config.ts:"
cat libs/shared/utils/src/tailwind.config.ts
Length of output: 6850
| playwright.configs['flat/recommended'], | ||
| ...baseConfig, | ||
| { | ||
| files: ['**.ts', '**.js'], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Narrow down file patterns to Playwright-specific files
The current patterns ['**.ts', '**.js'] will apply these rules to all TypeScript and JavaScript files. For Playwright-specific rules, consider limiting the scope to test files:
- files: ['**.ts', '**.js'],
+ files: ['**/*.spec.{ts,js}', '**/*.test.{ts,js}', '**/e2e/**/*.{ts,js}'],📝 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.
| files: ['**.ts', '**.js'], | |
| files: ['**/*.spec.{ts,js}', '**/*.test.{ts,js}', '**/e2e/**/*.{ts,js}'], |
| export default [ | ||
| ...nx.configs['flat/base'], | ||
| ...nx.configs['flat/typescript'], | ||
| ...nx.configs['flat/javascript'], |
There was a problem hiding this comment.
💡 Codebase verification
Remove or update the nx-based ESLint configuration
The codebase has moved away from nx-based ESLint configuration to using @antfu/eslint-config as evident in eslint.config.js. The configuration in libs/shared/src/config/eslint/default.js appears to be outdated and conflicts with the new setup.
- The main
eslint.config.jshas the nx configuration commented out - The project uses
@antfu/eslint-configfor its ESLint rules - While
@nx/eslint-pluginis installed, its configurations are not being used anymore
Consider either:
- Removing this file as it's no longer needed, or
- Updating it to use the new
@antfu/eslint-configbased configuration
🔗 Analysis chain
Add missing import for nx configurations
The nx variable is undefined. This will cause runtime errors when attempting to spread the configurations.
Consider adding the necessary import:
+import * as nx from '@nx/eslint-plugin';
export default [
...nx.configs['flat/base'],
...nx.configs['flat/typescript'],
...nx.configs['flat/javascript'],Let me gather more information to verify the nx configuration setup.
The previous results show that nx configurations are used in both eslint.config.js and our target file. Let's see how nx is imported and configured in these files to understand the correct pattern to follow.
Let me try one more search pattern to find how nx is being used in the project.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for nx configuration imports and definitions in the project
# Search for nx configuration definitions
rg -l "nx.configs\['flat"
# Search for potential nx imports or definitions
ast-grep --pattern 'import $_ from "@nx/eslint"'
Length of output: 160
Script:
#!/bin/bash
# Check for nx-related imports and configurations
rg -A 3 "nx\.configs" eslint.config.js
rg -A 3 "import.*nx" eslint.config.js
rg -A 3 "import.*nx" libs/shared/src/config/eslint/default.js
rg -A 3 "const.*nx" eslint.config.js
Length of output: 338
Script:
#!/bin/bash
# Get the full content of both files to understand the nx setup
echo "=== eslint.config.js ==="
cat eslint.config.js
echo -e "\n=== libs/shared/src/config/eslint/default.js ==="
cat libs/shared/src/config/eslint/default.js
# Also check for any nx-related package dependencies
fd package.json --exec jq -r '.dependencies["@nx/eslint-plugin"] // .devDependencies["@nx/eslint-plugin"] // empty'
Length of output: 2004
🧰 Tools
🪛 eslint
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
| <ColorItem | ||
| title="input" | ||
| subtitle="bg-input" | ||
| colors={{ input: 'hsl(var(--input))'}} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Follow consistent className format for input color.
The subtitle format for input color differs from other color definitions.
<ColorItem
title="input"
- subtitle="bg-input"
+ subtitle="className='bg-input'"
colors={{ input: 'hsl(var(--input))'}}
/>📝 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.
| <ColorItem | |
| title="input" | |
| subtitle="bg-input" | |
| colors={{ input: 'hsl(var(--input))'}} | |
| /> | |
| <ColorItem | |
| title="input" | |
| subtitle="className='bg-input'" | |
| colors={{ input: 'hsl(var(--input))'}} | |
| /> |
| export const darkUIStorybook = { | ||
| base: 'dark', | ||
| colorPrimary: '#FF4785', | ||
| colorSecondary: '#029CFD', | ||
|
|
||
| // --primary: 210 40% 98%; | ||
| // --primary-foreground: 222.2 47.4% 11.2%; | ||
| // colorPrimary: 'hsl(210 40% 98%)', | ||
|
|
||
| // --secondary: 217.2 32.6% 17.5%; | ||
| // --secondary-foreground: 210 40% 98%; | ||
| // colorSecondary: 'hsl(217.2 32.6% 17.5%)', | ||
|
|
||
| // UI | ||
| // appBg: '#222425', | ||
| // appContentBg: '#1B1C1D', | ||
| // appPreviewBg: '#FFFFFF', | ||
| // appBorderColor: 'rgba(255,255,255,.1)', | ||
| // appBorderRadius: 4, | ||
|
|
||
| // --background: 222.2 84% 4.9%; | ||
| // --foreground: 210 40% 98%; | ||
| appBg: 'hsl(222.2 84% 4.9%)', | ||
| appContentBg: 'hsl(222.2 84% 4.9%)', | ||
| appPreviewBg: 'hsl(210 40% 98%)', | ||
| // --border: 217.2 32.6% 17.5%; | ||
| // --input: 217.2 32.6% 17.5%; | ||
| // --ring: 212.7 26.8% 83.9%; | ||
| appBorderColor: 'hsl(217.2 32.6% 17.5%)', | ||
| appBorderRadius: 8, | ||
|
|
||
| // Typography | ||
| fontBase: '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif', | ||
| fontCode: 'ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New", monospace', | ||
| textColor: '#C9CDCF', | ||
| textInverseColor: '#222425', | ||
| textMutedColor: '#798186', | ||
|
|
||
| // fontBase: "", | ||
| // fontCode: '', | ||
| // textColor: 'hsl(210 40% 98%)', | ||
| // textInverseColor: 'hsl(217.2 32.6% 17.5%)', | ||
| // textMutedColor: 'hsl(217.2 32.6% 17.5%)', | ||
|
|
||
| // Toolbar and action bar | ||
| // barTextColor: '#73828C', | ||
| barHoverColor: '#029CFD', | ||
| barSelectedColor: '#029CFD', | ||
| // barBg: '#292C2E', | ||
|
|
||
| barTextColor: 'hsl(210 40% 98%)', // toolbar and action bar text color | ||
| // barHoverColor: string; | ||
| // barSelectedColor: 'hsl(210 40% 98%)', | ||
| barBg: 'hsl(222.2 84% 4.9%)', | ||
|
|
||
| // buttonBg: '#222425', // plus button for creating new story | ||
| buttonBorder: 'rgba(255,255,255,.1)', | ||
| booleanBg: '#222425', | ||
| booleanSelectedBg: '#2E3438', | ||
|
|
||
| buttonBg: 'hsl(222.2 84% 4.9%)', | ||
| // buttonBorder: string; | ||
| // booleanBg: string; | ||
| // booleanSelectedBg: string; | ||
|
|
||
| // Forms | ||
| inputBg: '#1B1C1D', | ||
| inputBorder: 'rgba(255,255,255,.1)', | ||
| inputTextColor: '#FFFFFF', | ||
| inputBorderRadius: 4, | ||
|
|
||
| // inputBg: 'hsl(217.2 32.6% 17.5%)', | ||
| // inputBorder: 'hsl(217.2 32.6% 17.5%)', | ||
| // inputTextColor: 'hsl(210 40% 98%)', | ||
| // inputBorderRadius: '0.4rem', | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety and consistency in dark theme configuration.
The dark theme configuration needs several improvements:
- Add proper type definitions from Storybook
- Standardize color format usage
- Clean up redundant commented code
+import { ThemeVars } from '@storybook/theming';
+
-export const darkUIStorybook = {
+export const darkUIStorybook: Partial<ThemeVars> = {
base: 'dark',
- colorPrimary: '#FF4785',
- colorSecondary: '#029CFD',
+ colorPrimary: 'hsl(348, 100%, 64%)', // Convert #FF4785 to HSL
+ colorSecondary: 'hsl(203, 99%, 50%)', // Convert #029CFD to HSL
// UI
appBg: 'hsl(222.2 84% 4.9%)',
appContentBg: 'hsl(222.2 84% 4.9%)',
appPreviewBg: 'hsl(210 40% 98%)',
appBorderColor: 'hsl(217.2 32.6% 17.5%)',
appBorderRadius: 8,
// Remove commented properties that have active values
- // appBg: '#222425',
- // appContentBg: '#1B1C1D',
- // appPreviewBg: '#FFFFFF',Committable suggestion skipped: line range outside the PR's diff.
| export const lightUIStorybook = { | ||
| // --background: 0 0% 100%; | ||
| // --foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --card: 0 0% 100%; | ||
| // --card-foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --popover: 0 0% 100%; | ||
| // --popover-foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --primary: 222.2 47.4% 11.2%; | ||
| // --primary-foreground: 210 40% 98%; | ||
| // | ||
| // --secondary: 210 40% 96.1%; | ||
| // --secondary-foreground: 222.2 47.4% 11.2%; | ||
| // | ||
| // --muted: 210 40% 96.1%; | ||
| // --muted-foreground: 215.4 16.3% 46.9%; | ||
| // | ||
| // --accent: 210 40% 96.1%; | ||
| // --accent-foreground: 222.2 47.4% 11.2%; | ||
| // | ||
| // --destructive: 0 84.2% 60.2%; | ||
| // --destructive-foreground: 210 40% 98%; | ||
| // | ||
| // --border: 214.3 31.8% 91.4%; | ||
| // --input: 214.3 31.8% 91.4%; | ||
| // --ring: 222.2 84% 4.9%; | ||
| // | ||
| // --radius: 0.5rem; | ||
| } |
There was a problem hiding this comment.
Implement light theme configuration.
The light theme is currently just a placeholder with CSS custom property comments. It should be properly implemented using the Storybook theme format.
-export const lightUIStorybook = {
+import { ThemeVars } from '@storybook/theming';
+
+export const lightUIStorybook: Partial<ThemeVars> = {
+ base: 'light',
+ colorPrimary: 'hsl(222.2, 47.4%, 11.2%)',
+ colorSecondary: 'hsl(210, 40%, 96.1%)',
+
+ // UI
+ appBg: 'hsl(0, 0%, 100%)',
+ appContentBg: 'hsl(0, 0%, 100%)',
+ appPreviewBg: 'hsl(222.2, 84%, 4.9%)',
+ appBorderColor: 'hsl(214.3, 31.8%, 91.4%)',
+ appBorderRadius: 8,
+
+ // Typography
+ textColor: 'hsl(222.2, 84%, 4.9%)',
+ textInverseColor: 'hsl(210, 40%, 98%)',
// ... implement remaining properties
}Committable suggestion skipped: line range outside the PR's diff.
| export function TypographyTable(props: React.ComponentProps<'table'>) { | ||
| return ( | ||
| <div className="my-6 w-full overflow-y-auto"> | ||
| <table className="w-full"> | ||
| <thead> | ||
| <Tr> | ||
| <Th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| King"s Treasury | ||
| </Th> | ||
| <Th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| People"s happiness | ||
| </Th> | ||
| </Tr> | ||
| </thead> | ||
| <tbody> | ||
| <Tr> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Empty | ||
| </Td> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Overflowing | ||
| </Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Modest | ||
| </Td> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Satisfied | ||
| </Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Full | ||
| </Td> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Ecstatic | ||
| </Td> | ||
| </Tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Remove hardcoded example data from component implementation
The TypographyTable component contains hardcoded example data about "King's Treasury" and "People's happiness". This should be moved to a story file or documentation.
Consider refactoring to accept children or data prop:
-export function TypographyTable(props: React.ComponentProps<'table'>) {
+export function TypographyTable({
+ children,
+ className,
+ ...props
+}: React.ComponentProps<'table'>) {
return (
<div className="my-6 w-full overflow-y-auto">
- <table className="w-full">
- <thead>
- <Tr>
- <Th>King's Treasury</Th>
- <Th>People's happiness</Th>
- </Tr>
- </thead>
- <tbody>
- {/* Remove hardcoded rows */}
- </tbody>
+ <table className={cn("w-full", className)} {...props}>
+ {children}
</table>
</div>
)
}📝 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 function TypographyTable(props: React.ComponentProps<'table'>) { | |
| return ( | |
| <div className="my-6 w-full overflow-y-auto"> | |
| <table className="w-full"> | |
| <thead> | |
| <Tr> | |
| <Th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| King"s Treasury | |
| </Th> | |
| <Th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| People"s happiness | |
| </Th> | |
| </Tr> | |
| </thead> | |
| <tbody> | |
| <Tr> | |
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| Empty | |
| </Td> | |
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| Overflowing | |
| </Td> | |
| </Tr> | |
| <Tr> | |
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| Modest | |
| </Td> | |
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| Satisfied | |
| </Td> | |
| </Tr> | |
| <Tr> | |
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| Full | |
| </Td> | |
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | |
| Ecstatic | |
| </Td> | |
| </Tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| ) | |
| } | |
| export function TypographyTable({ | |
| children, | |
| className, | |
| ...props | |
| }: React.ComponentProps<'table'>) { | |
| return ( | |
| <div className="my-6 w-full overflow-y-auto"> | |
| <table className={cn("w-full", className)} {...props}> | |
| {children} | |
| </table> | |
| </div> | |
| ) | |
| } |
| export function Tr({ | ||
| className, | ||
| children, | ||
| ...props | ||
| }: React.ComponentProps<'tr'>) { | ||
| return ( | ||
| <tr | ||
| className={cn('m-0 border-t p-0 even:bg-muted', className)} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </tr> | ||
| ) | ||
| } | ||
| export function Th({ | ||
| className, | ||
| children, | ||
| ...props | ||
| }: React.ComponentProps<'th'>) { | ||
| return ( | ||
| <th | ||
| className={cn( | ||
| 'border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </th> | ||
| ) | ||
| } | ||
| export function Td({ | ||
| className, | ||
| children, | ||
| ...props | ||
| }: React.ComponentProps<'td'>) { | ||
| return ( | ||
| <td | ||
| className={cn( | ||
| 'border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </td> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consolidate duplicate className definitions in table components
The table cell components (Tr, Th, Td) have duplicate className definitions. Consider extracting common styles to constants.
+const TABLE_CELL_BASE_CLASSES = 'border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right'
export function Th({
className,
children,
...props
}: React.ComponentProps<'th'>) {
return (
<th
className={cn(
- 'border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
+ TABLE_CELL_BASE_CLASSES,
+ 'font-bold',
className,
)}
{...props}
>
{children}
</th>
)
}Committable suggestion skipped: line range outside the PR's diff.
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [isDark, setDark] = React.useState(true) | ||
| props.context.channel.on(DARK_MODE_EVENT_NAME, state => | ||
| setDark(state)) | ||
| const currentProps = { ...props } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor to comply with React Hooks rules
The use of React.useState and event listeners inside the functional component violates React Hooks rules, as indicated by the ESLint disable comment on line 127. To adhere to best practices, refactor the code to use useEffect for side effects.
Here's a refactored version:
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const [isDark, setDark] = React.useState(true)
- props.context.channel.on(DARK_MODE_EVENT_NAME, state =>
- setDark(state))
+ const [isDark, setDark] = React.useState(true)
+ React.useEffect(() => {
+ const handleDarkModeChange = (state: boolean) => {
+ setDark(state)
+ }
+ props.context.channel.on(DARK_MODE_EVENT_NAME, handleDarkModeChange)
+ return () => {
+ props.context.channel.off(DARK_MODE_EVENT_NAME, handleDarkModeChange)
+ }
+ }, [props.context.channel])📝 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.
| // eslint-disable-next-line react-hooks/rules-of-hooks | |
| const [isDark, setDark] = React.useState(true) | |
| props.context.channel.on(DARK_MODE_EVENT_NAME, state => | |
| setDark(state)) | |
| const currentProps = { ...props } | |
| const [isDark, setDark] = React.useState(true) | |
| React.useEffect(() => { | |
| const handleDarkModeChange = (state: boolean) => { | |
| setDark(state) | |
| } | |
| props.context.channel.on(DARK_MODE_EVENT_NAME, handleDarkModeChange) | |
| return () => { | |
| props.context.channel.off(DARK_MODE_EVENT_NAME, handleDarkModeChange) | |
| } | |
| }, [props.context.channel]) | |
| const currentProps = { ...props } |
✅ Deploy Preview for design-cuhacking ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
fcd68cf to
53e19f2
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (11)
libs/shared/src/config/eslint/default.js (1)
26-31: Consider removing empty rules configurationThe empty rules object with a TODO-style comment doesn't provide any value. Consider removing this section or adding the necessary rules.
- { - files: ['**.ts', '**.tsx', '**.js', '**.jsx'], - // Override or add rules here - rules: {}, - },🧰 Tools
🪛 eslint
[error] 31-31: Extra semicolon.
(style/semi)
libs/shared/src/config/typescript/base.json (3)
3-4: Consider updating the TypeScript target versionThe target is set to "es2015" while using "es2020" library features. Consider updating the target to match the library version for consistency and to take advantage of newer JavaScript features.
- "target": "es2015", + "target": "es2020",
29-31: Consider stricter type checking for shared componentsBoth
skipDefaultLibCheckandskipLibCheckare enabled, which improves build performance but reduces type safety. For a shared UI component library, consider if stricter type checking would be beneficial.🧰 Tools
🪛 Biome
[error] 29-29: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-29: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-29: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-30: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 31-31: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 31-31: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 31-31: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
5-35: Consider using JSDoc comments for better tooling supportThe section comments improve readability, but they might cause issues with some JSON parsers. Consider using JSDoc comments above the relevant sections instead:
{ "compilerOptions": { - // "---------- JAVASCRIPT SUPPORT ---------": "", + /** ---------- JAVASCRIPT SUPPORT --------- */🧰 Tools
🪛 Biome
[error] 5-5: Expected a property but instead found '// "---------- JAVASCRIPT SUPPORT ---------": "",'.
Expected a property here.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 10-10: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 10-10: 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] 11-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)
[error] 15-15: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 16-16: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 17-17: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 17-18: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 19-19: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 19-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-28: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-29: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-29: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-29: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 29-30: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 31-31: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 31-31: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 31-31: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 32-35: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx (3)
10-44: Well-structured meta configuration!The meta configuration is comprehensive and follows Storybook best practices. The variant and size options are properly defined, and the use of
fn()for the onClick handler enables proper interaction tracking in Storybook.Consider adding descriptions for each variant and size option to improve documentation:
argTypes: { variant: { options: ['default', 'secondary', 'destructive', 'outline', 'ghost', 'link'], control: { type: 'select' }, + description: 'The visual style of the button', }, size: { options: ['default', 'sm', 'lg', 'icon'], control: { type: 'select' }, + description: 'The size of the button', }, },
49-54: Good coverage of button variants!The basic variant stories are well-structured and provide comprehensive coverage.
Consider adding accessibility testing parameters to ensure each variant meets WCAG standards:
export const Primary: Story = { + parameters: { + a11y: { + config: { + rules: [ + { + id: 'color-contrast', + enabled: true + } + ] + } + } + } }
56-98: Well-implemented complex button variations!The icon-based stories effectively demonstrate different button use cases. The implementation is clean and follows best practices.
Consider these enhancements:
- Extract common argTypes to avoid repetition:
const disabledChildrenControl = { argTypes: { children: { control: { disable: true } } } } export const Icon: Story = { args: {/*...*/}, ...disabledChildrenControl }
- Add aria-label to icon-only buttons for accessibility:
export const Icon: Story = { args: { variant: 'outline', size: 'icon', + 'aria-label': 'Next', children: ( <ChevronRightIcon className="size-4" /> ), }, }libs/shared/external/shadcn/ui/src/shadcn/calendar.tsx (1)
20-53: Consider extracting classNames configuration.The classNames configuration is quite extensive and could benefit from being extracted into a separate constant or configuration file. This would improve maintainability and reusability.
+const calendarClassNames = { + months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0', + month: 'space-y-4', + // ... rest of the classNames configuration +}; function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( <DayPicker showOutsideDays={showOutsideDays} className={cn('p-3', className)} - classNames={{ - months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0', - // ... rest of the inline configuration - ...classNames, - }} + classNames={{ + ...calendarClassNames, + ...classNames, + }} // ... rest of the component /> ); }libs/shared/external/shadcn/ui/.storybook/preview.tsx (3)
55-69: Consider removing unnecessary commented-out codeThe block of commented-out code related to
globalTypesand theme settings from lines 55-69 may no longer be needed. Keeping unnecessary commented-out code can clutter the file and reduce readability.If this code is obsolete, please remove it. If you plan to use it later, consider adding a comment explaining its purpose.
93-116: Clean up commented-out properties in backgrounds grid configurationWithin the
backgroundsgrid configuration, several properties are commented out (lines 93-116). This may make the configuration harder to read and maintain.Please review and remove any commented-out properties that are not required. If they are kept for future reference, consider documenting the reason.
132-137: Remove commented-out code for better readabilityLines 132-137 contain commented-out code and console logs. Removing unnecessary commented-out code enhances readability and maintainability.
Consider deleting these lines if they are no longer needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
libs/shared/external/shadcn/ui/public/cuhacking-logo.svgis excluded by!**/*.svglibs/shared/features/awesome-feature/assets/cuhacking-logo.svgis excluded by!**/*.svglibs/shared/src/assets/cuhacking-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (39)
.gitignore(2 hunks)components.json(1 hunks)libs/shared/external/shadcn/ui/.storybook/custom-viewports.ts(1 hunks)libs/shared/external/shadcn/ui/.storybook/global.css(1 hunks)libs/shared/external/shadcn/ui/.storybook/main.ts(1 hunks)libs/shared/external/shadcn/ui/.storybook/preview.tsx(1 hunks)libs/shared/external/shadcn/ui/.storybook/themes-storybook-ui.ts(1 hunks)libs/shared/external/shadcn/ui/README.md(1 hunks)libs/shared/external/shadcn/ui/eslint.config.js(1 hunks)libs/shared/external/shadcn/ui/package.json(1 hunks)libs/shared/external/shadcn/ui/postcss.config.js(1 hunks)libs/shared/external/shadcn/ui/project.json(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/accordion.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/button.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/calendar.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/colors.mdx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/docs.mdx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/introduction.tsx(1 hunks)libs/shared/external/shadcn/ui/src/shadcn/typography/typography.tsx(1 hunks)libs/shared/external/shadcn/ui/tailwind.config.ts(1 hunks)libs/shared/external/shadcn/ui/tsconfig.json(1 hunks)libs/shared/external/shadcn/ui/tsconfig.lib.json(1 hunks)libs/shared/external/shadcn/ui/tsconfig.storybook.json(1 hunks)libs/shared/external/shadcn/utils/README.md(1 hunks)libs/shared/external/shadcn/utils/eslint.config.js(1 hunks)libs/shared/external/shadcn/utils/project.json(1 hunks)libs/shared/external/shadcn/utils/src/cn.ts(1 hunks)libs/shared/external/shadcn/utils/src/global.css(1 hunks)libs/shared/external/shadcn/utils/src/index.ts(1 hunks)libs/shared/external/shadcn/utils/src/tailwind.config.ts(1 hunks)libs/shared/external/shadcn/utils/tsconfig.json(1 hunks)libs/shared/external/shadcn/utils/tsconfig.lib.json(1 hunks)libs/shared/features/awesome-feature/index.ts(1 hunks)libs/shared/src/config/eslint/antfu.js(1 hunks)libs/shared/src/config/eslint/default.js(1 hunks)libs/shared/src/config/eslint/playwright.js(1 hunks)libs/shared/src/config/tailwind/base.ts(1 hunks)libs/shared/src/config/typescript/base.json(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- libs/shared/external/shadcn/ui/README.md
🚧 Files skipped from review as they are similar to previous changes (33)
- .gitignore
- components.json
- libs/shared/external/shadcn/ui/.storybook/custom-viewports.ts
- libs/shared/external/shadcn/ui/.storybook/global.css
- libs/shared/external/shadcn/ui/.storybook/main.ts
- libs/shared/external/shadcn/ui/.storybook/themes-storybook-ui.ts
- libs/shared/external/shadcn/ui/eslint.config.js
- libs/shared/external/shadcn/ui/package.json
- libs/shared/external/shadcn/ui/postcss.config.js
- libs/shared/external/shadcn/ui/project.json
- libs/shared/external/shadcn/ui/src/shadcn/accordion.tsx
- libs/shared/external/shadcn/ui/src/shadcn/button.tsx
- libs/shared/external/shadcn/ui/src/shadcn/colors.mdx
- libs/shared/external/shadcn/ui/src/shadcn/docs.mdx
- libs/shared/external/shadcn/ui/src/shadcn/introduction.tsx
- libs/shared/external/shadcn/ui/src/shadcn/typography/typography.tsx
- libs/shared/external/shadcn/ui/tailwind.config.ts
- libs/shared/external/shadcn/ui/tsconfig.json
- libs/shared/external/shadcn/ui/tsconfig.lib.json
- libs/shared/external/shadcn/ui/tsconfig.storybook.json
- libs/shared/external/shadcn/utils/README.md
- libs/shared/external/shadcn/utils/eslint.config.js
- libs/shared/external/shadcn/utils/project.json
- libs/shared/external/shadcn/utils/src/cn.ts
- libs/shared/external/shadcn/utils/src/global.css
- libs/shared/external/shadcn/utils/src/index.ts
- libs/shared/external/shadcn/utils/src/tailwind.config.ts
- libs/shared/external/shadcn/utils/tsconfig.json
- libs/shared/external/shadcn/utils/tsconfig.lib.json
- libs/shared/features/awesome-feature/index.ts
- libs/shared/src/config/eslint/antfu.js
- libs/shared/src/config/eslint/playwright.js
- libs/shared/src/config/tailwind/base.ts
🧰 Additional context used
🪛 eslint
libs/shared/src/config/eslint/default.js
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
[error] 31-31: Extra semicolon.
(style/semi)
🪛 Biome
libs/shared/src/config/typescript/base.json
[error] 5-5: Expected a property but instead found '// "---------- JAVASCRIPT SUPPORT ---------": "",'.
Expected a property here.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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] 11-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)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-28: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-30: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 32-35: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-38: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🔇 Additional comments (10)
libs/shared/src/config/eslint/default.js (1)
1-4:
Critical: Remove or update nx-based ESLint configuration
The codebase has moved to @antfu/eslint-config and this nx-based configuration appears to be outdated:
- The 'nx' variable is undefined and will cause runtime errors
- This configuration conflicts with the main
eslint.config.jssetup
Consider either:
- Removing this file and using the main
eslint.config.js, or - Converting to
@antfu/eslint-configbased configuration:
-export default [
- ...nx.configs['flat/base'],
- ...nx.configs['flat/typescript'],
- ...nx.configs['flat/javascript'],
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+ // your configuration
+})🧰 Tools
🪛 eslint
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
libs/shared/src/config/typescript/base.json (2)
10-11: LGTM! Decorator settings are properly configured
The decorator settings are correctly configured for modern framework support.
🧰 Tools
🪛 Biome
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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)
1-38: Verify Storybook-specific TypeScript requirements
Since this configuration is part of a Storybook initialization, we should verify that all necessary TypeScript settings for Storybook are included.
#!/bin/bash
# Description: Check for Storybook-related configurations
# Look for Storybook config files
fd -e js -e ts "\.stories\."
# Check for Storybook dependencies in package.json
rg "\"@storybook/.*\":" -A 1🧰 Tools
🪛 Biome
[error] 5-5: Expected a property but instead found '// "---------- JAVASCRIPT SUPPORT ---------": "",'.
Expected a property here.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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] 11-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)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-28: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-30: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 32-35: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-38: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx (2)
46-47: LGTM!
The type definition is properly set up using TypeScript's type inference.
1-9: Verify the Button component implementation
The imports look good, but let's ensure the Button component exists and is properly implemented.
✅ Verification successful
Button component is properly implemented and matches the stories file imports
The Button component exists in the same directory and is correctly implemented with:
- Proper exports of both
ButtonandbuttonVariants - React.forwardRef implementation with correct prop types
- Radix UI Slot integration matching the story's needs
- Variant system that supports the icons imported in the stories file
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the Button component exists in the same directory
fd --type f --extension tsx "button.tsx" "$(dirname "libs/shared/external/shadcn/ui/src/shadcn/button.stories.tsx")"
Length of output: 207
Script:
#!/bin/bash
# Let's verify the Button component implementation
cat libs/shared/external/shadcn/ui/src/shadcn/button.tsx
Length of output: 1898
libs/shared/external/shadcn/ui/src/shadcn/calendar.tsx (4)
1-6: LGTM! Well-organized imports.
The imports are properly organized with a clear separation between external and internal dependencies.
8-8: LGTM! Good type definition practice.
Exporting the props type provides good TypeScript integration and API transparency.
54-59: Skipping previously raised icon components issue.
A previous review already suggested extracting the icon components to avoid ESLint warnings.
64-66: LGTM! Proper component naming and export.
Setting the display name is a good practice for debugging and React DevTools.
libs/shared/external/shadcn/ui/.storybook/preview.tsx (1)
127-131: Refactor to comply with React Hooks rules
The previous review comment regarding the use of React Hooks rules is still applicable to these lines. The usage of React.useState and event listeners inside the functional component without useEffect violates React Hooks rules.
| { | ||
| files: ['**.ts', '**.tsx', '**.js', '**.jsx'], | ||
| rules: { | ||
| '@nx/enforce-module-boundaries': [ | ||
| 'error', | ||
| { | ||
| enforceBuildableLibDependency: true, | ||
| allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?js$'], | ||
| depConstraints: [ | ||
| { | ||
| sourceTag: '*', | ||
| onlyDependOnLibsWithTags: ['*'], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
💡 Codebase verification
Module boundaries configuration needs to be updated for new ESLint setup
The codebase has switched to using @antfu/eslint-config in the main eslint.config.js, but the @nx/enforce-module-boundaries configuration in libs/shared/src/config/eslint/default.js is still using the old Nx flat config format. This is incompatible as:
- The main config now uses
@antfu/eslint-configand has the old Nx config commented out - The shared config still depends on
nx.configswhich won't be available in the new setup - Both Nx (
20.1.0) and its ESLint plugin (20.1.0) are still present but not integrated with the new config
The module boundaries configuration needs to be migrated to work with the new ESLint setup or removed if no longer needed.
🔗 Analysis chain
Verify module boundaries configuration compatibility
The @nx/enforce-module-boundaries rule configuration needs verification as it might not be compatible with the new ESLint setup.
Let me gather more information about the ESLint configuration to verify compatibility.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if @nx/enforce-module-boundaries is still in use and compatible
# Check if the rule is used in the main config
echo "=== Checking main eslint.config.js ==="
rg -A 3 "@nx/enforce-module-boundaries" eslint.config.js
# Check for any nx plugin dependencies
echo -e "\n=== Checking nx plugin in package.json ==="
fd package.json --exec jq -r '.dependencies["@nx/eslint-plugin"] // .devDependencies["@nx/eslint-plugin"] // empty'
# Look for other module boundary configurations
echo -e "\n=== Checking for other module boundary configs ==="
rg -l "enforce-module-boundaries" --type js --type ts
Length of output: 725
Script:
#!/bin/bash
# Check the content of both ESLint configs to understand the module boundaries setup
echo "=== Content of main eslint.config.js ==="
cat eslint.config.js
echo -e "\n=== Content of shared ESLint config ==="
cat libs/shared/src/config/eslint/default.js
# Check if we're using flat config format
echo -e "\n=== Checking for eslint:recommended in configs ==="
rg "eslint:recommended" --type js
# Check nx version to verify compatibility
echo -e "\n=== Checking nx version ==="
jq -r '.dependencies["nx"] // .devDependencies["nx"] // empty' package.json
Length of output: 2200
| "declaration": false, | ||
| "importHelpers": true, | ||
| "sourceMap": true, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enable declaration files for shared library
Since this is a shared library that will be consumed by other parts of the application, consider enabling declaration files to provide proper TypeScript support for consumers.
- "declaration": false,
+ "declaration": true,📝 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.
| "declaration": false, | |
| "importHelpers": true, | |
| "sourceMap": true, | |
| "declaration": true, | |
| "importHelpers": true, | |
| "sourceMap": true, |
🧰 Tools
🪛 Biome
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
| "paths": { | ||
| "@cuhacking/ui": ["libs/shared/ui/src/index.ts"] | ||
| }, |
There was a problem hiding this comment.
💡 Codebase verification
Path mapping in base.json needs to be updated to match tsconfig.base.json
The path mapping in libs/shared/src/config/typescript/base.json is outdated compared to the project's root tsconfig.base.json. The base.json file maps @cuhacking/ui to libs/shared/ui/src/index.ts, while tsconfig.base.json correctly maps it to libs/shared/ui/src/cuhacking/index.ts.
- Update the path mapping in
libs/shared/src/config/typescript/base.jsonto:
"paths": {
"@cuhacking/ui": ["libs/shared/ui/src/cuhacking/index.ts"]
}🔗 Analysis chain
Verify the UI library path mapping
The path mapping for @cuhacking/ui points to libs/shared/ui/src/index.ts, but the AI summary mentions a different path (libs/ui/src/index.ts). Please verify the correct path.
Let me gather more information to verify the path mapping.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the UI library path exists and is correctly referenced
# Check if the mapped path exists
fd --type f "index.ts" libs/shared/ui/src
# Check for any other potential UI library locations
fd --type f "index.ts" libs/ui/src
# Look for other references to this path in the codebase
rg -l "@cuhacking/ui"
Length of output: 1317
Script:
#!/bin/bash
# Check if the mapped path exists and list all index.ts files in libs directory
fd --type f "index.ts" libs/
# Check for any references to UI components or libraries in the codebase
rg -l "ui" --type ts --type json
# Check the content of tsconfig.base.json for path mappings
cat tsconfig.base.json
Length of output: 2390
Script:
#!/bin/bash
# Check if the specific UI paths from tsconfig.base.json exist
fd --type f "index.ts" libs/shared/ui/src/shadcn/
fd --type f "index.ts" libs/shared/ui/src/cuhacking/
# Check the content of the file under review to compare with tsconfig.base.json
cat libs/shared/src/config/typescript/base.json
Length of output: 1775
🧰 Tools
🪛 Biome
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
| @@ -0,0 +1,178 @@ | |||
| import type { Preview } from '@storybook/react' | |||
| import { withThemeByClassName } from '@storybook/addon-themes'// Wide button with a pen and text. Toggles both Preview Components and Preview Background | |||
There was a problem hiding this comment.
Remove unintended comment in import statement
The comment appended to the import statement on line 2 appears to be unintended or misplaced. This could lead to confusion or potential issues during parsing.
Please remove or reposition the comment to improve code clarity:
-import { withThemeByClassName } from '@storybook/addon-themes'// Wide button with a pen and text. Toggles both Preview Components and Preview Background
+import { withThemeByClassName } from '@storybook/addon-themes'
// Wide button with a pen and text. Toggles both Preview Components and Preview BackgroundIf the comment is necessary, consider placing it on the line above the import statement.
📝 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.
| import { withThemeByClassName } from '@storybook/addon-themes'// Wide button with a pen and text. Toggles both Preview Components and Preview Background | |
| import { withThemeByClassName } from '@storybook/addon-themes' | |
| // Wide button with a pen and text. Toggles both Preview Components and Preview Background |
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
53e19f2 to
09eccc3
Compare
There was a problem hiding this comment.
Actionable comments posted: 14
🧹 Outside diff range and nitpick comments (47)
libs/external/shadcn/lib/utils/cn.ts (1)
4-6: Consider using arrow function syntax for a more concise implementation.The current implementation is correct, but it has a redundant function name. Consider simplifying it using an arrow function.
-export const cn = function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) -} +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))libs/shared/utils/cn.ts (1)
4-6: Consider these improvements for better developer experience.
- The function declaration name is redundant with the const assignment
- Adding JSDoc documentation would improve developer experience
Consider applying this diff:
-export const cn = function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) -} +/** + * Combines multiple class names using clsx and merges Tailwind classes using tailwind-merge + * @param inputs - Array of class names, conditional classes, or class name objects + * @returns Merged class names string with resolved Tailwind conflicts + * @example + * cn('px-2 py-1', 'bg-blue-500', { 'text-white': true, 'rounded': false }) + */ +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));libs/shared/config/tailwind/base.ts (1)
9-13: Consider adding commonly useful Tailwind plugins.While starting minimal is fine, consider adding these widely-used plugins to enhance your component library:
@tailwindcss/formsfor better form styling@tailwindcss/typographyfor rich text contenttheme: { extend: {}, }, -plugins: [], +plugins: [ + require('@tailwindcss/forms'), + require('@tailwindcss/typography'), +],libs/shared/config/eslint/playwright.js (3)
11-11: Consider using more specific file patterns for Playwright testsThe current pattern
['**.ts', '**.js']will apply to all TypeScript and JavaScript files. Consider using more specific patterns that target Playwright test files:- files: ['**.ts', '**.js'], + files: ['**/*.spec.{ts,js}', '**/*.test.{ts,js}', '**/e2e/**/*.{ts,js}'],
12-13: Consider removing empty rules object if not usedIf no specific rules are being overridden, you can remove the empty rules object to keep the configuration concise.
- // Override or add rules here - rules: {},
4-16: Add more descriptive documentationConsider adding a JSDoc comment to explain the purpose of this configuration file and how it should be used.
+/** + * ESLint configuration for Playwright tests + * Extends the recommended Playwright configuration and base project config + * @returns {Promise<Array>} Combined ESLint configuration + */ export default (async () => {libs/shared/config/typescript/tsconfig.storybook.json (2)
3-5: Consider adding recommended Storybook compiler optionsWhile
emitDecoratorMetadatais included, consider adding these commonly recommended options for Storybook:{ "extends": "./tsconfig.json", "compilerOptions": { - "emitDecoratorMetadata": true + "emitDecoratorMetadata": true, + "jsx": "react-jsx", + "esModuleInterop": true, + "skipLibCheck": true },
17-17: Enhance test file exclusion patternsConsider adjusting the path pattern and adding more common test file extensions.
- "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"] + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/__tests__/**" + ].storybook/custom-viewports.ts (3)
1-4: Add TypeScript type annotations for better type safetyThe code would benefit from explicit type annotations to ensure type safety and improve maintainability.
- import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' + import { INITIAL_VIEWPORTS, Viewport } from '@storybook/addon-viewport' - export const customViewports = { + export const customViewports: Record<string, Viewport> = {
5-39: Standardize viewport naming conventions and consider extracting dimensions as constantsThe viewport names have inconsistent casing (e.g., '4k' vs '2K'). Additionally, the dimensions could be extracted as named constants for better maintainability.
Consider applying these improvements:
+ const VIEWPORT_DIMENSIONS = { + HD_720P: { width: 1280, height: 720 }, + FULL_HD: { width: 1920, height: 1080 }, + QHD: { width: 2560, height: 1440 }, + UHD_4K: { width: 3840, height: 2160 }, + ULTRAWIDE: { width: 2560, height: 1080 }, + } as const; export const customViewports: Record<string, Viewport> = { ...INITIAL_VIEWPORTS, 'HD720P': { - name: '720p', + name: 'HD (720p)', styles: { - width: '1280px', - height: '720px', + width: `${VIEWPORT_DIMENSIONS.HD_720P.width}px`, + height: `${VIEWPORT_DIMENSIONS.HD_720P.height}px`, }, }, // Apply similar changes to other viewports...
33-39: Consider adding more descriptive names for aspect ratio viewportsThe '21/9' viewport name could be more descriptive to better indicate its purpose.
- '21/9': { - name: '21/9', + 'ultrawide': { + name: 'Ultrawide (21:9)',libs/shared/config/eslint/default.js (2)
8-25: Well-structured module boundary configurationThe module boundary rules are well configured:
- Enforces buildable library dependencies
- Allows necessary exceptions for ESLint configs
- Properly scoped to TypeScript and JavaScript files
Consider being more specific with
sourceTagandonlyDependOnLibsWithTagsconstraints to better enforce architectural boundaries. For example:depConstraints: [ { sourceTag: 'scope:shared', onlyDependOnLibsWithTags: ['scope:shared', 'scope:utils'], }, { sourceTag: 'scope:feature', onlyDependOnLibsWithTags: ['scope:shared', 'scope:utils'], } ]
26-30: Consider adding Storybook-specific ESLint rulesSince this configuration is part of a Storybook initialization, consider adding specific rules for story files.
Add these Storybook-specific rules:
{ files: ['**.ts', '**.tsx', '**.js', '**.jsx'], - // Override or add rules here - rules: {}, + rules: { + // Enforce story files to have .stories suffix + 'file-naming-convention': [ + 'error', + { + 'stories/**/*.{jsx,tsx}': '*.stories.{jsx,tsx}' + } + ], + // Ensure stories have descriptions + 'storybook/story-exports': 'error', + 'storybook/default-exports': 'error' + }, },libs/external/shadcn/eslint.config.js (1)
1-17: Remove commented-out code.The old configuration should be removed to maintain code cleanliness. If needed, this code can be retrieved from version control history.
-// const nx = require("@nx/eslint-plugin"); -// const baseConfig = require("../../eslint.config.js"); - -// module.exports = [ -// ...baseConfig, -// ...nx.configs["flat/react"], -// { -// files: [ -// "**/*.ts", -// "**/*.tsx", -// "**/*.js", -// "**/*.jsx" -// ], -// // Override or add rules here -// rules: {} -// } -// ];.storybook/global.css (2)
1-3: Enhance the documentation comment with specific import instructions.The comment should provide clear instructions on how to import this file in the app's global.css.
-/** - * Don't forget to update your APPs global.css to include this file! - */ +/** + * Important: Include this file in your app's global.css using: + * @import '.storybook/global.css'; + * + * Note: Ensure the import path is correct relative to your app's structure + */
56-66: Document the purpose of font feature settings.The font feature settings (
rligandcalt) should be documented to explain their purpose and impact on typography.@layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: - 'rlig' 1, - 'calt' 1; + /* Enable ligatures for more refined typography */ + 'rlig' 1, /* Standard Ligatures */ + 'calt' 1; /* Contextual Alternates */ } }libs/external/shadcn/global.css (2)
1-8: Enhance documentation for better maintainability.The current comment lacks specific implementation details. Consider expanding it to include:
- The purpose of this file (shadcn theming)
- Exact import statement needed
- List of apps that should include this file
-/** - * Don't forget to update your APPs global.css to include this file! - */ +/** + * shadcn/ui base theme configuration + * + * To use these styles, import this file in your app's global.css: + * @import '@/libs/external/shadcn/global.css'; + * + * Required by the following apps: + * - app1 + * - app2 + */
30-30: Consider making border radius configurable.The
--radiusvariable is currently hardcoded to0.5rem. Consider making this more flexible by:
- Providing multiple radius options for different component sizes
- Allowing override through a configuration file
- --radius: 0.5rem; + --radius-sm: 0.25rem; + --radius-md: 0.5rem; + --radius-lg: 1rem; + --radius: var(--radius-md);libs/shared/ui/global.css (3)
1-3: Enhance documentation clarity for setup instructions.The comment could be more specific about where and how to include this file.
Consider updating the comment to be more explicit:
-/** - * Don't forget to update your APPs global.css to include this file! - */ +/** + * Setup Instructions: + * 1. Import this file in your app's global.css using: + * @import '@your-workspace/shared/ui/global.css'; + * 2. Ensure your app's global.css is imported in the root layout/component + */
33-53: Verify dark mode color accessibility and consider adding color scheme preference detection.The dark theme colors look good, but consider adding system preference detection.
Add media query support for system preferences:
+@media (prefers-color-scheme: dark) { + :root { + /* Add the same dark theme variables here */ + } +} .dark { /* Existing dark theme variables */ }This allows for automatic dark mode based on system preferences while maintaining the ability to manually toggle via the
.darkclass.
56-66: Consider adding additional base styles and browser support checks.The base styles are good but could be enhanced with additional resets and browser support checks.
Consider adding these improvements:
@layer base { * { @apply border-border; + @apply box-border; + @apply m-0; + @apply p-0; } body { @apply bg-background text-foreground; + @apply min-h-screen; + @apply antialiased; font-feature-settings: 'rlig' 1, 'calt' 1; } + /* Add smooth scrolling to html */ + html { + @apply scroll-smooth; + } }libs/external/shadcn/components/ui/button.tsx (2)
7-34: Consider enhancing the button variants implementation.The implementation is solid but could benefit from some improvements:
- The transition-colors property could be more specific about which properties are transitioning
- Consider documenting the color scheme tokens (primary, destructive, etc.) for better maintainability
- 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-[background-color,border-color] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',Also, consider adding JSDoc comments to document the color scheme tokens:
/** * Button variants using the following color tokens: * - primary: Main action color * - destructive: Error/danger actions * - secondary: Less prominent actions * ... */ const buttonVariants = cva(...)
42-56: Consider enhancing type safety in the Button component.The implementation is solid but could benefit from stronger typing:
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( +const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(( { className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button' + const Comp = asChild ? Slot : 'button' as const return ( <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} /> ) - }, + }) as React.ForwardRefRenderFunction<HTMLButtonElement, ButtonProps>, )libs/external/shadcn/components/ui/accordion.tsx (2)
1-5: Consider reordering imports following common conventions.Consider reordering imports to follow the common convention:
- React imports
- Third-party libraries
- Internal utilities
-import * as AccordionPrimitive from '@radix-ui/react-accordion' -import { cn } from '@shadcn/lib/utils' -import { ChevronDown } from 'lucide-react' - -import * as React from 'react' +import * as React from 'react' + +import * as AccordionPrimitive from '@radix-ui/react-accordion' +import { ChevronDown } from 'lucide-react' + +import { cn } from '@shadcn/lib/utils'
21-39: Consider enhancing keyboard interaction feedback.While the implementation is solid, consider adding focus styles for better keyboard navigation visibility:
className={cn( - 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', + 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 [&[data-state=open]>svg]:rotate-180', className, )}libs/external/shadcn/components/ui/button.stories.tsx (2)
49-54: Consider adding descriptions to variant storiesWhile the variant stories are well-structured, they could benefit from additional documentation. Consider adding descriptions to explain the use case for each variant.
-export const Primary: Story = {} +export const Primary: Story = { + parameters: { + docs: { + description: 'Primary button for main actions in the interface' + } + } +}
56-98: Well-implemented complex stories with room for accessibility improvementThe implementation of icon and loading stories is excellent, with consistent styling and proper TypeScript usage. Consider adding ARIA labels for better accessibility.
export const Icon: Story = { args: { variant: 'outline', size: 'icon', + 'aria-label': 'Next', children: ( <ChevronRightIcon className="size-4" /> ), },libs/external/shadcn/tailwind.config.ts (2)
1-6: Consider organizing imports by typeThe imports are correct but could be better organized. Consider grouping them as follows:
- External dependencies (tailwindcss, tailwindcss-animate)
- Node.js built-ins (node:path)
- Framework-specific utilities (@nx/react/tailwind)
import type { Config } from 'tailwindcss' -import { join } from 'node:path' -import { createGlobPatternsForDependencies } from '@nx/react/tailwind' - import TailwindAnimate from 'tailwindcss-animate' + +import { join } from 'node:path' + +import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
73-74: Consider additional Tailwind plugins based on project needsThe configuration currently only includes the
tailwindcss-animateplugin. Based on the shadcn UI integration, you might want to consider additional official plugins:
@tailwindcss/formsfor better form styling@tailwindcss/typographyif you plan to style rich text content- plugins: [TailwindAnimate], + plugins: [ + TailwindAnimate, + require('@tailwindcss/forms'), + require('@tailwindcss/typography'), + ],libs/shared/config/tailwind/shadcn.ts (3)
11-17: Consider including additional file extensions in the content pattern.While the current pattern covers most cases, you might want to include
.jsxfiles for completeness, even if you're not currently using them. This future-proofs your configuration.- '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', + '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,jsx,html}',
18-74: Document required CSS variables.The theme configuration uses various CSS variables (e.g.,
--border,--primary,--radius) but there's no documentation about what variables need to be defined. Consider adding a comment block or README explaining all required CSS variables and their expected formats.Example documentation:
/** * Required CSS Variables: * Color Variables (format: <hue> <saturation> <lightness>): * --border: Base border color * --input: Input element color * --ring: Focus ring color * [...] * * Other Variables: * --radius: Base border radius value (px/rem) * --radix-accordion-content-height: Set automatically by Radix UI */
76-76: Consider using type-safe plugin import.While the current import works, you could make it more type-safe by properly typing the plugin import.
-import TailwindAnimate from 'tailwindcss-animate' +import type { PluginAPI } from 'tailwindcss/types/config' +import TailwindAnimate from 'tailwindcss-animate' + +// Type assertion for plugin +const typedTailwindAnimate = TailwindAnimate as (api: PluginAPI) => voidThen use
typedTailwindAnimatein the plugins array.libs/external/shadcn/components/ui/calendar.tsx (1)
20-53: Consider extracting complex Tailwind classes into constants.The classNames object contains complex Tailwind classes that could be more maintainable if extracted into named constants.
const CALENDAR_CLASSES = { months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0', month: 'space-y-4', // ... other classes } as const; // Then in the component: classNames={{ ...CALENDAR_CLASSES, ...classNames, }}.storybook/main.ts (3)
48-62: Clean up or complete the commented storysource addon configurationThe commented storysource addon configuration includes a hardcoded path that would need adjustment. Consider either:
- Removing this commented code if it won't be used
- Completing the configuration if it will be needed soon
If you decide to use it, here's the suggested configuration:
- // include: [path.resolve(__dirname, '../src')], // You can specify directories + // include: [path.resolve(__dirname, '../libs')], // Point to the libs directory where stories reside
72-85: Simplify the docs addon configurationThe docs addon configuration contains many commented options. Unless these serve as documentation for future use, consider simplifying to only include the active
sourceLoaderOptions.{ name: '@storybook/addon-docs', options: { - // csfPluginOptions: null, - // mdxPluginOptions: { - // mdxCompileOptions: { - // remarkPlugins: [], - // }, - // }, sourceLoaderOptions: { injectStoryParameters: false, }, }, },
14-89: Consider performance impact of multiple addonsThe configuration includes a comprehensive set of addons which might impact Storybook's build time and runtime performance. Consider:
- Measuring the impact on build time
- Loading non-essential addons only in development
- Creating different Storybook configurations for development and production
This will help optimize the development experience while maintaining fast builds for production.
.storybook/themes-storybook-ui.ts (1)
112-117: Consider improvements to common theme configuration.The common theme configuration looks good but could benefit from two improvements:
- Add type safety
- Use a local image instead of an external URL to prevent potential loading issues
Consider applying these changes:
+import { ThemeVars } from '@storybook/theming'; + -export const commonTheme = { +export const commonTheme: Partial<ThemeVars> = { brandTitle: 'cuHacking', brandUrl: '/', brandTarget: '_self', - brandImage: 'https://cuhacking.ca/Logo-2025.svg', + brandImage: '/assets/Logo-2025.svg', // Move the logo to your local assets }libs/external/shadcn/components/ui/introduction.tsx (2)
15-44: Add component documentation and improve accessibilityConsider the following improvements:
- Add JSDoc documentation for the component
- Add ARIA landmarks for better accessibility
Apply this diff:
+/** + * Introduction component that provides an overview of the UI component library + * and its usage guidelines. + * + * @returns {JSX.Element} The rendered Introduction component + */ function Introduction() { return ( - <main className=""> + <main className="" role="main" aria-labelledby="introduction-title"> <div className="flex flex-col gap-1"> - <TypographyH1>Introduction</TypographyH1> + <TypographyH1 id="introduction-title">Introduction</TypographyH1>
45-110: Fix typo and enhance accordion accessibility
- Fix the typo "drawback" to "drawbacks"
- Add aria-label to the FAQ section for better screen reader support
Apply these changes:
- <section className="mt-6"> + <section className="mt-6" aria-label="Frequently Asked Questions"> <TypographyH2>FAQ</TypographyH2> <Accordion type="single" collapsible className="max-w-xs md:max-w-sm lg:max-w-2xl" > {/* ... */} - One of the drawback of packaging the components + One of the drawbacks of packaging the componentslibs/external/shadcn/components/ui/typography/typography.tsx (5)
1-2: Remove unnecessary ESLint directiveThe ESLint directive
unused-imports/no-unused-varscan be removed as thecnutility is actively used throughout the file.-/* eslint-disable unused-imports/no-unused-vars */ import { cn } from '@shadcn/lib/utils'
4-74: Consider enhancing heading components with TypeScript and accessibility improvementsWhile the heading components are well-implemented, consider these improvements:
- Extract common prop types to reduce repetition
- Add aria-level support for better accessibility
+type TypographyHeadingProps = { + level?: 1 | 2 | 3 | 4; +} & React.ComponentProps<'h1'>; -export function TypographyH1({ +export function TypographyHeading({ className, children, + level = 1, ...props -}: React.ComponentProps<'h1'>) { +}: TypographyHeadingProps) { + const Component = `h${level}` as const; return ( - <h1 + <Component className={cn( - 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', + level === 1 && 'text-4xl font-extrabold tracking-tight lg:text-5xl', + level === 2 && 'border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0', + level === 3 && 'text-2xl font-semibold tracking-tight', + level === 4 && 'text-xl font-semibold tracking-tight', + 'scroll-m-20', className, )} + aria-level={level} {...props} > {children} - </h1> + </Component> ) } +export const TypographyH1 = (props: Omit<TypographyHeadingProps, 'level'>) => ( + <TypographyHeading {...props} level={1} /> +);
200-210: Remove unnecessary empty string in className concatenationThe empty string in the
cn()utility call is unnecessary.export function TypographyListItem({ className, children, ...props }: React.ComponentProps<'li'>) { return ( - <li className={cn('', className)} {...props}> + <li className={cn(className)} {...props}> {children} </li> ) }
227-300: Enhance type safety for typography utility componentsConsider extracting common types and adding proper children typing for better type safety.
+type TypographyBaseProps<T extends keyof JSX.IntrinsicElements> = { + children: React.ReactNode; + className?: string; +} & Omit<React.ComponentProps<T>, 'children' | 'className'>; -export function TypographyInlineCode({ +export function TypographyInlineCode({ className, children, ...props -}: React.ComponentProps<'code'>) { +}: TypographyBaseProps<'code'>) {Apply similar type improvements to other utility components for consistency.
1-300: Add tests and documentation for typography componentsThe implementation would benefit from:
- Unit tests for each component
- Storybook stories for visual testing and documentation
- JSDoc comments explaining component usage and props
Would you like me to help generate:
- Jest test suite for the components
- Storybook stories with various usage examples
- Comprehensive JSDoc documentation
.storybook/preview.tsx (3)
2-2: Improve comment placement for better readability.The inline comment on line 2 is appended directly after the import statement, which can reduce readability. Consider moving the comment to its own line above the import statement.
Apply this diff to improve readability:
+// Wide button with a pen and text. Toggles both Preview Components and Preview Background import { withThemeByClassName } from '@storybook/addon-themes'// Wide button with a pen and text. Toggles both Preview Components and Preview Background - import { withThemeByClassName } from '@storybook/addon-themes'// Wide button with a pen and text. Toggles both Preview Components and Preview Background +import { withThemeByClassName } from '@storybook/addon-themes'
13-13: Remove commented-out import statement to clean up the code.The import statement on line 13 is commented out. If it's no longer needed, consider removing it to keep the codebase clean.
Apply this diff to remove the commented-out code:
-/* import '../../utils/src/global.css' */
55-69: Remove unused commented-out code block to improve maintainability.The block of code from lines 55 to 69 is commented out. If it's not required, consider removing it to enhance code clarity and maintainability.
Apply this diff:
- // globalTypes: { - // theme: { - // description: 'Global theme for components', - // defaultValue: 'light', - // toolbar: { // Requires @storybook/addon-toolbars, included in @storybook/addon-essentials. Imported separately in main.ts. - // // The label to show for this toolbar item - // title: 'Theme', - // icon: 'medium', - // // Array of plain string values or MenuItem shape (see below) - // items: ['light', 'dark'], - // // Change title based on selected value - // dynamicTitle: true, - // }, - // }, - // },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
libs/external/shadcn/public/cuhacking-logo.svgis excluded by!**/*.svglibs/shared/assets/cuhacking-logo.svgis excluded by!**/*.svglibs/shared/features/awesome-feature/assets/cuhacking-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (39)
.gitignore(2 hunks).storybook/custom-viewports.ts(1 hunks).storybook/global.css(1 hunks).storybook/main.ts(1 hunks).storybook/preview.tsx(1 hunks).storybook/themes-storybook-ui.ts(1 hunks)apps/website/app/root.tsx(2 hunks)components.json(1 hunks)libs/external/shadcn/README.md(1 hunks)libs/external/shadcn/components/ui/accordion.tsx(1 hunks)libs/external/shadcn/components/ui/button.stories.tsx(1 hunks)libs/external/shadcn/components/ui/button.tsx(1 hunks)libs/external/shadcn/components/ui/calendar.tsx(1 hunks)libs/external/shadcn/components/ui/colors.mdx(1 hunks)libs/external/shadcn/components/ui/docs.mdx(1 hunks)libs/external/shadcn/components/ui/introduction.tsx(1 hunks)libs/external/shadcn/components/ui/typography/typography.tsx(1 hunks)libs/external/shadcn/eslint.config.js(1 hunks)libs/external/shadcn/global.css(1 hunks)libs/external/shadcn/lib/utils/cn.ts(1 hunks)libs/external/shadcn/postcss.config.js(1 hunks)libs/external/shadcn/project.json(1 hunks)libs/external/shadcn/tailwind.config.ts(1 hunks)libs/external/shadcn/tsconfig.json(1 hunks)libs/external/shadcn/tsconfig.lib.json(1 hunks)libs/shared/config/eslint/antfu.js(1 hunks)libs/shared/config/eslint/default.js(1 hunks)libs/shared/config/eslint/playwright.js(1 hunks)libs/shared/config/tailwind/base.ts(1 hunks)libs/shared/config/tailwind/shadcn.ts(1 hunks)libs/shared/config/typescript/base.json(1 hunks)libs/shared/config/typescript/tsconfig.storybook.json(1 hunks)libs/shared/features/awesome-feature/index.ts(1 hunks)libs/shared/project.json(1 hunks)libs/shared/tsconfig.json(1 hunks)libs/shared/tsconfig.lib.json(1 hunks)libs/shared/ui/global.css(1 hunks)libs/shared/utils/cn.ts(1 hunks)tsconfig.base.json(1 hunks)
✅ Files skipped from review due to trivial changes (11)
- libs/external/shadcn/README.md
- libs/external/shadcn/components/ui/colors.mdx
- libs/external/shadcn/components/ui/docs.mdx
- libs/external/shadcn/postcss.config.js
- libs/external/shadcn/project.json
- libs/external/shadcn/tsconfig.json
- libs/external/shadcn/tsconfig.lib.json
- libs/shared/config/eslint/antfu.js
- libs/shared/project.json
- libs/shared/tsconfig.json
- libs/shared/tsconfig.lib.json
🚧 Files skipped from review as they are similar to previous changes (5)
- .gitignore
- apps/website/app/root.tsx
- components.json
- libs/shared/features/awesome-feature/index.ts
- tsconfig.base.json
🧰 Additional context used
🪛 eslint
libs/shared/config/eslint/default.js
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
[error] 31-31: Extra semicolon.
(style/semi)
🪛 Biome
libs/shared/config/typescript/base.json
[error] 5-5: Expected a property but instead found '// "---------- JAVASCRIPT SUPPORT ---------": "",'.
Expected a property here.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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] 11-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)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-28: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-30: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 32-35: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-38: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🔇 Additional comments (36)
libs/external/shadcn/lib/utils/cn.ts (2)
1-2: LGTM! Clean and well-structured imports.
The imports are properly typed and follow good practices by importing both the type and function from clsx.
1-6: Verify consistent usage across components.
As this is a new utility function for class name management, let's ensure it's being used consistently across components and there are no competing utilities.
libs/shared/utils/cn.ts (1)
1-6: LGTM! The utility function is well-implemented.
The implementation correctly combines clsx and tailwind-merge libraries to handle class name merging, which is essential for component styling.
libs/shared/config/tailwind/base.ts (1)
1-2: LGTM! Proper type safety and Nx integration.
The imports demonstrate good practices by:
- Using TypeScript types for type safety
- Leveraging Nx's built-in Tailwind utilities for dependency management
libs/shared/config/eslint/playwright.js (1)
1-2: LGTM! Clean import structure
The imports are well-organized, correctly importing the Playwright plugin and base configuration.
libs/shared/config/typescript/tsconfig.storybook.json (1)
1-18: Verify Storybook setup in Nx workspace
Let's ensure this configuration aligns with the Nx workspace structure and existing Storybook setup.
✅ Verification successful
Storybook configuration appears correctly structured for the workspace
The verification shows that:
- Storybook is properly configured with comprehensive dependencies (v8.4.2)
- Story files exist in the expected structure (e.g., in
libs/external/shadcn/components/ui/) - The
tsconfig.storybook.jsoninclude patterns correctly match the actual story file extensions found in the codebase - The configuration aligns with Nx workspace conventions by being placed in the shared config directory
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Storybook setup in Nx workspace
# Check for Storybook configurations in the workspace
echo "Checking for Storybook configurations..."
fd -t f -e js -e ts -e json ".storybook"
# Check if Storybook dependencies are properly configured
echo "Checking package.json for Storybook dependencies..."
jq '.dependencies + .devDependencies | with_entries(select(.key | contains("storybook")))' package.json
# Verify Nx configuration
echo "Checking Nx configuration..."
jq '.storybook' nx.json
Length of output: 1351
Script:
#!/bin/bash
# Let's verify the Nx workspace structure and Storybook setup more thoroughly
# Check for .storybook configuration files in the entire workspace
echo "Checking for .storybook configuration files..."
fd -t f -g "*.{js,ts}" -p ".storybook/"
# Check for any stories files to verify the include patterns
echo "Checking for story files..."
fd -t f -g "*.stories.{ts,tsx,js,jsx,mdx}"
# Check for project.json files that might contain Storybook configuration
echo "Checking for Storybook targets in project.json files..."
fd -t f -g "project.json" -x grep -l "storybook" {}
# Check workspace.json for Storybook configuration
echo "Checking workspace configuration..."
if [ -f "workspace.json" ]; then
cat workspace.json
fi
Length of output: 588
.storybook/custom-viewports.ts (1)
1-40: Verify viewport configurations in Storybook
The viewport configurations look correct, but we should verify that they are properly registered and working in Storybook's viewport addon.
✅ Verification successful
Let me check the preview.tsx file to verify if the custom viewports are properly configured.
Custom viewports are properly configured in Storybook
The verification confirms that:
- The custom viewports are correctly imported from
custom-viewports.ts - The viewports are properly registered in the viewport parameters of the preview configuration
- All essential Storybook configuration files are present
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Storybook configuration files are properly set up
# Check if the viewports are properly imported in preview file
echo "Checking Storybook preview configuration..."
rg -l "custom-viewports" .storybook/
# Verify other required Storybook configuration files
echo "Checking for essential Storybook files..."
fd -t f . .storybook/
Length of output: 402
Script:
#!/bin/bash
# Check the content of preview.tsx to verify viewport configuration
echo "Content of .storybook/preview.tsx:"
cat .storybook/preview.tsx
Length of output: 5466
libs/shared/config/eslint/default.js (1)
5-7: LGTM! Correctly ignores build artifacts
The configuration properly ignores the dist directory, which is a good practice to avoid linting build artifacts.
libs/external/shadcn/eslint.config.js (2)
34-34: Consider adding project-specific ESLint rules.
The empty rules object suggests that no specific rules have been configured for this project. Consider adding rules that align with your project's coding standards.
Let's check for ESLint rules in other configurations:
#!/bin/bash
# Description: Check for existing ESLint rules in the project
# Search for ESLint rule configurations
rg -g "*.{js,json}" "rules.*:" -A 521-37: Consider potential issues with async ESLint configuration.
While the async IIFE pattern works, it might cause issues with certain ESLint integrations that expect synchronous configuration. Consider documenting this approach or providing a fallback for tools that don't support async configs.
Additionally, the removal of the nx plugin configuration (nx.configs["flat/react"]) might affect React-specific linting rules.
Let's verify the impact of removing the nx plugin:
.storybook/global.css (3)
5-7: LGTM! Tailwind directives are correctly configured.
The Tailwind directives are properly ordered following the recommended setup.
1-66: Verify integration with existing styles.
Let's ensure these global styles don't conflict with existing application styles.
Run the following script to check for potential style conflicts:
#!/bin/bash
# Description: Look for existing global styles that might conflict
# Find all global style files
echo "Searching for global style files..."
fd -e css -e scss | grep -i "global\|main\|app"
# Look for existing CSS custom properties
echo "Checking for existing CSS custom properties..."
fd -e css -e scss | xargs rg ":root|--background|--foreground|--primary|--secondary"9-54: Verify color contrast ratios for accessibility.
The color system is well-structured, but we should ensure all color combinations meet WCAG accessibility guidelines, particularly for text-background combinations.
Run the following script to check for any existing color contrast testing setup:
Consider adding automated color contrast validation using tools like colorjs.io or wcag-contrast. This can be integrated into the CI pipeline to ensure all color combinations maintain proper contrast ratios.
libs/external/shadcn/global.css (2)
1-66: Verify completeness of shadcn theme variables.
Please ensure all required shadcn component theme variables are included:
#!/bin/bash
# Search for shadcn component styles that might need theme variables
fd -e tsx -e jsx --exec grep -l "className=" {} \; | \
xargs grep -l "shadcn"61-65: Verify browser support for font-feature-settings.
While the typography enhancements are good, ensure browser compatibility for older versions:
✅ Verification successful
Since the attempt to fetch browser compatibility data failed in the sandbox environment, let me verify this differently by checking the codebase for any existing browser compatibility configurations or polyfills.
Font feature settings are well-supported with autoprefixer handling vendor prefixes
The codebase includes autoprefixer in its PostCSS configuration, which automatically handles vendor prefixing and browser compatibility for CSS properties. The font-feature-settings property has broad browser support in modern browsers, and the OpenType features 'rlig' (required ligatures) and 'calt' (contextual alternates) are standard typography enhancements.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check browser support for font-feature-settings
curl -s "https://raw.githubusercontent.com/mdn/browser-compat-data/main/css/properties/font-feature-settings.json" | \
jq '.css.properties["font-feature-settings"].support'
Length of output: 529
Script:
#!/bin/bash
# Check for browserslist config
fd -t f -e json "package.json" --exec grep -l "browserslist" {} ";"
fd -t f "browserslist" -x cat {} ";"
# Check for postcss config that might handle compatibility
fd -t f "postcss.config" --exec cat {} ";"
# Look for any browser compatibility related comments or configurations in CSS files
rg -l "browser|compat|support" --type css
Length of output: 927
libs/shared/ui/global.css (1)
9-31: Consider documenting color usage and verifying contrast ratios.
The color system is well-structured, but could benefit from documentation about intended usage and accessibility verification.
Let's verify the color contrast ratios for key combinations:
Consider adding documentation about color usage:
@layer base {
:root {
+ /* Core background and content colors */
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
+ /* Component-specific colors */
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;libs/external/shadcn/components/ui/button.tsx (3)
1-5: LGTM! Clean and purposeful imports.
The imports are well-organized and each dependency serves a clear purpose in the implementation.
36-40: LGTM! Well-structured props interface.
The ButtonProps interface is well-designed:
- Properly extends native button attributes
- Integrates variant props type-safely
- Includes asChild prop for flexible composition
1-56: Verify shadcn integration patterns.
Let's ensure this implementation follows shadcn's conventions and is properly integrated with other components.
✅ Verification successful
Based on the results, I can now generate the final response:
Button component follows shadcn's integration patterns correctly
The verification confirms proper shadcn integration:
- Consistent usage of
cn()utility across components - Proper import pattern of
@shadcn/lib/utils - Button component is correctly referenced in other UI components
- Implementation matches shadcn's conventions for component structure and styling
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for other shadcn component implementations and verify consistent patterns
fd -e tsx -e ts --full-path "libs/external/shadcn/components/ui" --exec rg -l "buttonVariants|ButtonProps|from '@shadcn/lib/utils'" {}
# Verify cn utility usage pattern
rg "cn\(" "libs/external/shadcn/components/ui"
Length of output: 2726
libs/external/shadcn/components/ui/accordion.tsx (4)
7-7: LGTM! Clean and straightforward implementation.
Direct assignment from AccordionPrimitive.Root follows the recommended pattern for Radix UI components.
9-19: LGTM! Well-implemented with proper TypeScript types and ref forwarding.
The implementation follows React best practices:
- Proper use of forwardRef
- Correct TypeScript type definitions
- Flexible className handling with the cn utility
- Appropriate display name for debugging
56-56: LGTM! Clean exports of all necessary components.
The exports are well-organized and include all required components for the accordion functionality.
41-54: Verify animation definitions in your global styles.
The implementation references animate-accordion-up and animate-accordion-down classes. Ensure these animations are defined in your global styles or Tailwind configuration.
✅ Verification successful
Animation definitions are properly configured
The accordion animations are correctly defined in the shadcn Tailwind configuration at libs/external/shadcn/tailwind.config.ts. The configuration includes:
- Keyframes for both
accordion-downandaccordion-upanimations - Animation classes with proper timing and easing
- The required
tailwindcss-animateplugin
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for accordion animation definitions
echo "Searching for animation definitions in Tailwind config..."
rg -l "animate-accordion" --type=js --type=ts --type=css
echo "Searching for potential missing animation definitions..."
rg -l "keyframes.*accordion" --type=js --type=ts --type=css
Length of output: 415
Script:
#!/bin/bash
# Search for tailwind config files and their content
echo "Searching for tailwind config files..."
fd -e js -e ts -e cjs -e mjs -e json tailwind.config
echo "Checking content of tailwind config files..."
fd -e js -e ts -e cjs -e mjs -e json tailwind.config -x cat {}
echo "Searching for any CSS files that might contain animation definitions..."
fd -e css -x cat {}
Length of output: 18401
libs/external/shadcn/components/ui/button.stories.tsx (1)
10-44: Well-structured Storybook configuration!
The meta configuration demonstrates several good practices:
- Comprehensive variant and size options
- Type-safe configuration using
satisfies Meta<typeof Button> - Proper control configurations for interactive documentation
- Sensible default args and layout parameters
libs/external/shadcn/tailwind.config.ts (2)
15-72: Verify CSS variable definitions in global styles
The theme configuration uses CSS variables (e.g., --border, --primary, etc.) that must be defined in your global CSS file.
#!/bin/bash
# Description: Check if all CSS variables used in the theme are defined
# Create an array of required CSS variables
required_vars=(
"--border" "--input" "--ring" "--background" "--foreground"
"--primary" "--primary-foreground" "--secondary" "--secondary-foreground"
"--destructive" "--destructive-foreground" "--muted" "--muted-foreground"
"--accent" "--accent-foreground" "--popover" "--popover-foreground"
"--card" "--card-foreground" "--radius"
)
# Search for CSS variable definitions in CSS/SCSS files
echo "Checking for CSS variable definitions..."
for var in "${required_vars[@]}"; do
echo "Searching for $var:"
rg "$var:" --type css --type scss
done8-14: Verify content path patterns for complete coverage
The current content configuration might miss some files:
- The pattern only includes specific directories (
{src,pages,components,app}). - Using
__dirnamealone might not catch all component files.
✅ Verification successful
Content paths are correctly configured
The current content configuration in tailwind.config.ts is appropriate for the project structure:
- The
__dirnamecorrectly covers the shadcn components inlibs/external/shadcn - The glob pattern
{src,pages,components,app}/**/*matches UI files in both apps and libs:apps/*/src/**apps/*/app/**libs/*/components/**
createGlobPatternsForDependenciesensures coverage of dependencies
The file structure scan shows all UI-related files are within these patterns, and no TypeScript/TSX files containing potential Tailwind classes are being missed.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify if any UI component files might be missed by the current patterns
# Find all TypeScript/TSX files that might contain Tailwind classes
echo "Files that might be missed by current patterns:"
fd -e tsx -e ts --type f \
--exclude '*.stories.*' \
--exclude '*.spec.*' \
--exclude '*tailwind.config*' \
| grep -vE '/(src|pages|components|app)/'
Length of output: 11648
Script:
#!/bin/bash
# Let's try a different approach to find TypeScript/TSX files that might contain UI components
# First, let's see the directory structure to understand where components might be located
fd --type d --max-depth 3
# Then find all TypeScript/TSX files excluding test/story files
echo -e "\nAll TypeScript/TSX files (excluding tests/stories):"
fd -e tsx -e ts --type f \
--exclude '*.stories.*' \
--exclude '*.spec.*' \
--exclude '*.test.*' \
--exclude '*tailwind.config*' \
--exclude 'node_modules' \
--exclude 'dist' \
--exclude '.next'
# Also check if there are any CSS/SCSS files that might need to be included
echo -e "\nCSS/SCSS files:"
fd -e css -e scss --type f \
--exclude 'node_modules' \
--exclude 'dist' \
--exclude '.next'
Length of output: 2836
libs/shared/config/tailwind/shadcn.ts (2)
1-9: LGTM! Well-structured imports and function signature.
The imports are appropriate, and using the node:path protocol is a good practice for explicit Node.js core module usage. The function signature is well-typed with the Config type from tailwindcss.
1-78: Verify shadcn UI integration.
Since this configuration is crucial for shadcn UI components, ensure that all required theme values are present and match shadcn UI's expectations.
✅ Verification successful
Shadcn UI theme configuration is properly integrated
The verification shows that the configuration includes all the required CSS variables and color tokens that shadcn UI expects:
- All essential theme colors (primary, secondary, muted, destructive, etc.)
- Required UI component variables (border, input, ring, radius)
- Necessary animation keyframes for components like accordion
- Proper HSL color format usage across all variables
The configuration in libs/shared/config/tailwind/shadcn.ts perfectly mirrors the expected shadcn UI theme structure as evidenced by the matching variables in libs/external/shadcn/components/ui/colors.mdx.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if all necessary shadcn UI components are properly styled
# Look for any shadcn UI component files
fd -e tsx -e ts --type f . | rg -l "@/components/ui" | while read -r file; do
# Extract class names used in these files
rg -o 'className="[^"]*"' "$file"
done
# Check for any custom CSS variables being used
rg "var\(--[^)]+\)" .
Length of output: 5955
libs/external/shadcn/components/ui/calendar.tsx (4)
1-7: LGTM! Imports are well-organized.
The imports follow a logical pattern and all imported items are utilized in the component.
8-8: LGTM! Type definition follows best practices.
Good use of React.ComponentProps to inherit DayPicker's props, making the component type-safe and maintainable.
64-66: LGTM! Clean export with proper displayName.
Good practice setting the displayName for debugging purposes.
1-66: Verify integration with shadcn theme system and component usage.
The component appears well-integrated with shadcn's design system, but let's verify:
- Theme compatibility
- Component usage patterns
✅ Verification successful
Let me check the actual usage of the Calendar component and theme configuration to make a more informed decision.
Let me check the shadcn configuration file to verify the theme setup.
Calendar component is properly integrated with shadcn theme system
The verification shows:
- The Calendar component correctly uses shadcn's theme tokens and utility classes
- It's properly imported and used in the index route with correct props
- The shadcn configuration includes all necessary theme tokens used by the component (primary, accent, muted, etc.)
- The component's styling classes align with the configured theme system
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for theme configuration files
echo "Checking for theme configuration..."
fd -t f "theme|colors|tokens" -e ts -e js -e json
# Look for Calendar component usage
echo "Checking Calendar component usage..."
rg -l "Calendar.*from.*@shadcn/ui/calendar"
Length of output: 296
Script:
#!/bin/bash
# Check the Calendar usage in the index route
echo "Checking Calendar implementation in index route..."
cat "apps/website/app/routes/_index.tsx"
# Check for shadcn theme configuration
echo "Checking for shadcn configuration..."
fd -t f "shadcn" -e json -e ts -e js
Length of output: 1452
Script:
#!/bin/bash
# Check shadcn configuration
echo "Checking shadcn configuration..."
cat "libs/shared/config/tailwind/shadcn.ts"
# Check for tailwind configuration
echo "Checking tailwind configuration..."
fd -t f "tailwind.config" -e ts -e js
Length of output: 2718
.storybook/main.ts (1)
14-28: Well-organized toolbar addons with clear documentation!
The toolbar addons are logically grouped and each addon's purpose is clearly documented with comments explaining their UI representation.
libs/external/shadcn/components/ui/introduction.tsx (2)
115-115: LGTM!
The export statement follows React best practices.
1-13: Verify path alias configuration for @shadcn
The imports use the @shadcn path alias. Ensure that this alias is properly configured in your TypeScript and build configuration.
.storybook/preview.tsx (1)
16-176: Overall, the Storybook preview configuration is comprehensive and well-structured.
The setup of parameters, themes, viewports, and decorators aligns with best practices and enhances the Storybook environment.
| content: [ | ||
| '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', | ||
| ...createGlobPatternsForDependencies(__dirname), | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Include Storybook patterns in content configuration.
The current configuration excludes *.stories files, which might prevent Tailwind from processing classes in Storybook previews. Consider including Storybook patterns since this PR initializes Storybook.
content: [
'{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+ '{src,pages,components,app}/**/*.stories.{ts,tsx}',
...createGlobPatternsForDependencies(__dirname),
],Committable suggestion skipped: line range outside the PR's diff.
|
|
||
| export default { | ||
| content: [ | ||
| '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}', |
There was a problem hiding this comment.
💡 Codebase verification
Update glob patterns to match monorepo structure
The current glob pattern {src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html} doesn't accurately reflect your monorepo structure. Your codebase follows a different organization:
- TypeScript/HTML files are primarily under
apps/andlibs/ - The structure uses nested directories like
apps/*/src,apps/*/app,libs/shared/*, etc.
Suggested pattern update:
'{apps,libs}/**/*!(*.stories|*.spec).{ts,tsx,html}'🔗 Analysis chain
Verify content patterns match project structure.
Let's ensure the glob patterns match your actual project structure.
The previous output showed that the directories exist but at different locations within the monorepo structure. We need to verify the actual layout to suggest a more accurate glob pattern that matches the monorepo structure.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check if the specified directories exist and contain matching files
# Check directory structure
echo "Checking directory structure..."
for dir in src pages components app; do
if fd -t d "^${dir}$" ; then
echo "✓ Found ${dir} directory"
# Check for matching files
echo "Files in ${dir}:"
fd -t f . "${dir}" -e ts -e tsx -e html
else
echo "✗ Missing ${dir} directory"
fi
done
Length of output: 1430
Script:
#!/bin/bash
# Let's check the actual structure more accurately by looking at the monorepo layout
echo "Project structure analysis:"
fd -t d --max-depth 3 . | sort
echo -e "\nChecking for TypeScript/HTML files in apps and libs:"
echo "Files in apps:"
fd -t f -e ts -e tsx -e html . apps/
echo -e "\nFiles in libs:"
fd -t f -e ts -e tsx -e html . libs/
Length of output: 2928
| import playwright from 'eslint-plugin-playwright' | ||
| import baseConfigPromise from '../../eslint.config.js' | ||
|
|
||
| export default (async () => { | ||
| const baseConfig = await baseConfigPromise | ||
|
|
||
| return [ | ||
| playwright.configs['flat/recommended'], | ||
| ...baseConfig, | ||
| { | ||
| files: ['**.ts', '**.js'], | ||
| // Override or add rules here | ||
| rules: {}, | ||
| }, | ||
| ] | ||
| })() |
There was a problem hiding this comment.
💡 Codebase verification
The import path for the base configuration is incorrect
The current import path ../../eslint.config.js in libs/shared/config/eslint/playwright.js is incorrect as it would look for the base config at libs/shared/eslint.config.js, which doesn't exist. The base configuration is actually located at the root of the project as eslint.config.js. The import path should be changed to ../../../../eslint.config.js.
🔗 Analysis chain
Verify the base configuration path
The import path assumes the existence of eslint.config.js two levels up from this file.
Let me check the content of the base ESLint config file at the root level since the relative path in the code might be incorrect.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and content of the base ESLint config
# Check if the base config exists
if [ -f "libs/shared/eslint.config.js" ]; then
echo "Base config exists"
cat "libs/shared/eslint.config.js"
else
echo "Warning: Base config not found at expected location"
# Search for possible locations of the config
fd -t f "eslint.config.js"
fi
Length of output: 328
Script:
#!/bin/bash
# Check the content of the root eslint.config.js
cat eslint.config.js
# Also verify the current file's location to ensure we understand the relative path correctly
fd -t f "playwright.js" | grep "eslint"
Length of output: 1047
| "include": [ | ||
| "src/**/*.stories.ts", | ||
| "src/**/*.stories.js", | ||
| "src/**/*.stories.jsx", | ||
| "src/**/*.stories.tsx", | ||
| "src/**/*.stories.mdx", | ||
| ".storybook/*.js", | ||
| ".storybook/*.ts", | ||
| "tailwind.config.ts", | ||
| "postcss.config.js" | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Adjust path patterns for Nx workspace structure
The current include patterns use src/** which might not align with the Nx workspace structure. Also, consider including common Storybook addon configurations.
"include": [
- "src/**/*.stories.ts",
- "src/**/*.stories.js",
- "src/**/*.stories.jsx",
- "src/**/*.stories.tsx",
- "src/**/*.stories.mdx",
+ "**/*.stories.ts",
+ "**/*.stories.js",
+ "**/*.stories.jsx",
+ "**/*.stories.tsx",
+ "**/*.stories.mdx",
".storybook/*.js",
".storybook/*.ts",
+ ".storybook/preview.ts",
+ ".storybook/main.ts",
"tailwind.config.ts",
"postcss.config.js"
],Committable suggestion skipped: line range outside the PR's diff.
| { | ||
| "extends": "./tsconfig.json", |
There was a problem hiding this comment.
💡 Codebase verification
Incorrect relative path in tsconfig.storybook.json's extends field
The configuration extends "./tsconfig.json" but this file doesn't exist in the same directory. The base TypeScript configuration is actually located at "../../tsconfig.json" relative to the storybook config's location. The path needs to be corrected to properly extend from the shared library's base configuration.
libs/shared/config/typescript/tsconfig.storybook.jsonshould extend from../../tsconfig.jsoninstead of./tsconfig.json
🔗 Analysis chain
Verify the base TypeScript configuration file exists
The configuration extends from "./tsconfig.json". Let's ensure this file exists and is properly configured.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and content of the base tsconfig.json file
# Check if the base config exists
ls -l libs/shared/config/typescript/tsconfig.json
# If it exists, display its content
if [ $? -eq 0 ]; then
cat libs/shared/config/typescript/tsconfig.json
fi
Length of output: 160
Script:
#!/bin/bash
# Let's search for any tsconfig.json files in the repository to understand the structure
fd tsconfig.json
# Also check if there might be a different base config being referenced
rg -l "extends.*tsconfig.*json" --type json
Length of output: 621
Script:
#!/bin/bash
# Let's check the content of tsconfig.storybook.json to see the exact path it's trying to extend
cat libs/shared/config/typescript/tsconfig.storybook.json
# Also check the content of nearby tsconfig files that might be the intended base
cat libs/shared/tsconfig.json
cat libs/shared/tsconfig.lib.json
Length of output: 1404
.storybook/main.ts
Outdated
| stories: [ | ||
| '../libs/external/shadcn/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))', | ||
| '../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))', | ||
| ], |
There was a problem hiding this comment.
💡 Codebase verification
Update story paths in Storybook configuration
The configured story paths don't match the actual directory structure. Please update the paths to:
'../libs/external/shadcn/components/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'instead of'../libs/external/shadcn/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))''../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'is correct but currently empty
The existing story files were found at:
libs/external/shadcn/components/ui/button.stories.tsxlibs/external/shadcn/components/ui/colors.mdxlibs/external/shadcn/components/ui/docs.mdx
🔗 Analysis chain
Verify the stories directory structure
The configuration specifies two directories for stories. Let's ensure these directories exist and are properly structured.
The initial results show that story files exist but in a slightly different path structure than configured. Let's verify the exact directory structure to suggest the correct paths.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence of story directories and any existing story files
# Check if the directories exist
echo "Checking directories..."
fd -t d "shadcn|shared" libs
# Look for any existing story files
echo -e "\nChecking for story files..."
fd -e mdx -e stories.js -e stories.jsx -e stories.ts -e stories.tsx . libs
Length of output: 414
Script:
#!/bin/bash
# Let's verify the actual paths in the configuration against what exists
# First, check the exact directory structure under libs/external/shadcn
echo "Shadcn directory structure:"
fd . libs/external/shadcn -t d
echo -e "\nShared UI directory structure:"
fd . libs/shared/ui -t d
# Check if the UI components are in the correct location
echo -e "\nVerifying UI components location:"
fd . "libs/external/shadcn/ui" "libs/shared/ui"
Length of output: 686
| export const lightUIStorybook = { | ||
| // --background: 0 0% 100%; | ||
| // --foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --card: 0 0% 100%; | ||
| // --card-foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --popover: 0 0% 100%; | ||
| // --popover-foreground: 222.2 84% 4.9%; | ||
| // | ||
| // --primary: 222.2 47.4% 11.2%; | ||
| // --primary-foreground: 210 40% 98%; | ||
| // | ||
| // --secondary: 210 40% 96.1%; | ||
| // --secondary-foreground: 222.2 47.4% 11.2%; | ||
| // | ||
| // --muted: 210 40% 96.1%; | ||
| // --muted-foreground: 215.4 16.3% 46.9%; | ||
| // | ||
| // --accent: 210 40% 96.1%; | ||
| // --accent-foreground: 222.2 47.4% 11.2%; | ||
| // | ||
| // --destructive: 0 84.2% 60.2%; | ||
| // --destructive-foreground: 210 40% 98%; | ||
| // | ||
| // --border: 214.3 31.8% 91.4%; | ||
| // --input: 214.3 31.8% 91.4%; | ||
| // --ring: 222.2 84% 4.9%; | ||
| // | ||
| // --radius: 0.5rem; | ||
| } |
There was a problem hiding this comment.
Implement or remove the light theme configuration.
The light theme is currently exported as an empty object with only commented CSS custom properties. This doesn't provide any functional value to the application.
Either:
- Implement the light theme properly using the Storybook theme variables:
import { ThemeVars } from '@storybook/theming';
export const lightUIStorybook: Partial<ThemeVars> = {
base: 'light',
colorPrimary: 'hsl(222.2 47.4% 11.2%)',
colorSecondary: 'hsl(210 40% 96.1%)',
// ... implement remaining properties
};- Or remove the empty export if the light theme isn't needed yet:
-export const lightUIStorybook = {
- // ... commented properties
-}| export const darkUIStorybook = { | ||
| base: 'dark', | ||
| colorPrimary: '#FF4785', | ||
| colorSecondary: '#029CFD', | ||
|
|
||
| // --primary: 210 40% 98%; | ||
| // --primary-foreground: 222.2 47.4% 11.2%; | ||
| // colorPrimary: 'hsl(210 40% 98%)', | ||
|
|
||
| // --secondary: 217.2 32.6% 17.5%; | ||
| // --secondary-foreground: 210 40% 98%; | ||
| // colorSecondary: 'hsl(217.2 32.6% 17.5%)', | ||
|
|
||
| // UI | ||
| // appBg: '#222425', | ||
| // appContentBg: '#1B1C1D', | ||
| // appPreviewBg: '#FFFFFF', | ||
| // appBorderColor: 'rgba(255,255,255,.1)', | ||
| // appBorderRadius: 4, | ||
|
|
||
| // --background: 222.2 84% 4.9%; | ||
| // --foreground: 210 40% 98%; | ||
| appBg: 'hsl(222.2 84% 4.9%)', | ||
| appContentBg: 'hsl(222.2 84% 4.9%)', | ||
| appPreviewBg: 'hsl(210 40% 98%)', | ||
| // --border: 217.2 32.6% 17.5%; | ||
| // --input: 217.2 32.6% 17.5%; | ||
| // --ring: 212.7 26.8% 83.9%; | ||
| appBorderColor: 'hsl(217.2 32.6% 17.5%)', | ||
| appBorderRadius: 8, | ||
|
|
||
| // Typography | ||
| fontBase: '"Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif', | ||
| fontCode: 'ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New", monospace', | ||
| textColor: '#C9CDCF', | ||
| textInverseColor: '#222425', | ||
| textMutedColor: '#798186', | ||
|
|
||
| // fontBase: "", | ||
| // fontCode: '', | ||
| // textColor: 'hsl(210 40% 98%)', | ||
| // textInverseColor: 'hsl(217.2 32.6% 17.5%)', | ||
| // textMutedColor: 'hsl(217.2 32.6% 17.5%)', | ||
|
|
||
| // Toolbar and action bar | ||
| // barTextColor: '#73828C', | ||
| barHoverColor: '#029CFD', | ||
| barSelectedColor: '#029CFD', | ||
| // barBg: '#292C2E', | ||
|
|
||
| barTextColor: 'hsl(210 40% 98%)', // toolbar and action bar text color | ||
| // barHoverColor: string; | ||
| // barSelectedColor: 'hsl(210 40% 98%)', | ||
| barBg: 'hsl(222.2 84% 4.9%)', | ||
|
|
||
| // buttonBg: '#222425', // plus button for creating new story | ||
| buttonBorder: 'rgba(255,255,255,.1)', | ||
| booleanBg: '#222425', | ||
| booleanSelectedBg: '#2E3438', | ||
|
|
||
| buttonBg: 'hsl(222.2 84% 4.9%)', | ||
| // buttonBorder: string; | ||
| // booleanBg: string; | ||
| // booleanSelectedBg: string; | ||
|
|
||
| // Forms | ||
| inputBg: '#1B1C1D', | ||
| inputBorder: 'rgba(255,255,255,.1)', | ||
| inputTextColor: '#FFFFFF', | ||
| inputBorderRadius: 4, | ||
|
|
||
| // inputBg: 'hsl(217.2 32.6% 17.5%)', | ||
| // inputBorder: 'hsl(217.2 32.6% 17.5%)', | ||
| // inputTextColor: 'hsl(210 40% 98%)', | ||
| // inputBorderRadius: '0.4rem', | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve theme configuration maintainability.
The dark theme configuration has several areas for improvement:
- Inconsistent color format usage (HSL, hex, rgba).
- Redundant commented configurations.
- Missing TypeScript type definitions.
Consider these improvements:
+import { ThemeVars } from '@storybook/theming';
+
-export const darkUIStorybook = {
+export const darkUIStorybook: Partial<ThemeVars> = {
base: 'dark',
- colorPrimary: '#FF4785',
- colorSecondary: '#029CFD',
+ colorPrimary: 'hsl(348, 100%, 64%)', // #FF4785 in HSL
+ colorSecondary: 'hsl(203, 99%, 50%)', // #029CFD in HSL
// UI
appBg: 'hsl(222.2 84% 4.9%)',
appContentBg: 'hsl(222.2 84% 4.9%)',
appPreviewBg: 'hsl(210 40% 98%)',
appBorderColor: 'hsl(217.2 32.6% 17.5%)',
appBorderRadius: 8,Remove commented-out alternative values and maintain them in a separate documentation file or create theme variants if needed.
Committable suggestion skipped: line range outside the PR's diff.
| export function TypographyTable(props: React.ComponentProps<'table'>) { | ||
| return ( | ||
| <div className="my-6 w-full overflow-y-auto"> | ||
| <table className="w-full"> | ||
| <thead> | ||
| <Tr> | ||
| <Th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| King"s Treasury | ||
| </Th> | ||
| <Th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| People"s happiness | ||
| </Th> | ||
| </Tr> | ||
| </thead> | ||
| <tbody> | ||
| <Tr> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Empty | ||
| </Td> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Overflowing | ||
| </Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Modest | ||
| </Td> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Satisfied | ||
| </Td> | ||
| </Tr> | ||
| <Tr> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Full | ||
| </Td> | ||
| <Td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"> | ||
| Ecstatic | ||
| </Td> | ||
| </Tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
Refactor table component to remove hardcoded data and reduce duplication
The current implementation has two issues:
- Contains hardcoded example data that should be parameterized
- Duplicates className definitions across table cells
Consider refactoring to:
- Accept data as props
- Extract common className definitions
+type TableData = {
+ headers: string[];
+ rows: string[][];
+};
-export function TypographyTable(props: React.ComponentProps<'table'>) {
+export function TypographyTable({
+ data,
+ ...props
+}: React.ComponentProps<'table'> & { data: TableData }) {
return (
<div className="my-6 w-full overflow-y-auto">
<table className="w-full">
<thead>
<Tr>
- <Th>King"s Treasury</Th>
- <Th>People"s happiness</Th>
+ {data.headers.map((header, index) => (
+ <Th key={index}>{header}</Th>
+ ))}
</Tr>
</thead>
<tbody>
- <Tr>
- <Td>Empty</Td>
- <Td>Overflowing</Td>
- </Tr>
+ {data.rows.map((row, rowIndex) => (
+ <Tr key={rowIndex}>
+ {row.map((cell, cellIndex) => (
+ <Td key={cellIndex}>{cell}</Td>
+ ))}
+ </Tr>
+ ))}
</tbody>
</table>
</div>
)
}Committable suggestion skipped: line range outside the PR's diff.
| // eslint-disable-next-line react-hooks/rules-of-hooks | ||
| const [isDark, setDark] = React.useState(true) | ||
| props.context.channel.on(DARK_MODE_EVENT_NAME, state => | ||
| setDark(state)) | ||
| const currentProps = { ...props } | ||
| // currentProps.theme = isDark ? themes.dark : themes.light | ||
| currentProps.theme = isDark ? darkUIStorybook as ThemeVars : themes.light |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Refactor to properly use React Hooks and remove ESLint disable comment.
The ESLint rule react-hooks/rules-of-hooks is being disabled on line 127 to allow the use of useState outside of a React component scope. This indicates potential misuse of hooks.
Consider refactoring the container function to properly use hooks within a React component and handle the event listener within a useEffect to ensure proper lifecycle management.
Apply this diff to refactor the code:
// eslint-disable-next-line react-hooks/rules-of-hooks
- const [isDark, setDark] = React.useState(true)
- props.context.channel.on(DARK_MODE_EVENT_NAME, state =>
- setDark(state))
+ const [isDark, setDark] = React.useState(true);
+ React.useEffect(() => {
+ const handleDarkMode = (state: boolean) => setDark(state);
+ props.context.channel.on(DARK_MODE_EVENT_NAME, handleDarkMode);
+ return () => {
+ props.context.channel.off(DARK_MODE_EVENT_NAME, handleDarkMode);
+ };
+ }, [props.context.channel]);This refactoring adheres to React Hooks rules and ensures that the event listener is properly added and removed, eliminating the need to disable the ESLint rule.
📝 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.
| // eslint-disable-next-line react-hooks/rules-of-hooks | |
| const [isDark, setDark] = React.useState(true) | |
| props.context.channel.on(DARK_MODE_EVENT_NAME, state => | |
| setDark(state)) | |
| const currentProps = { ...props } | |
| // currentProps.theme = isDark ? themes.dark : themes.light | |
| currentProps.theme = isDark ? darkUIStorybook as ThemeVars : themes.light | |
| const [isDark, setDark] = React.useState(true); | |
| React.useEffect(() => { | |
| const handleDarkMode = (state: boolean) => setDark(state); | |
| props.context.channel.on(DARK_MODE_EVENT_NAME, handleDarkMode); | |
| return () => { | |
| props.context.channel.off(DARK_MODE_EVENT_NAME, handleDarkMode); | |
| }; | |
| }, [props.context.channel]); | |
| const currentProps = { ...props } | |
| // currentProps.theme = isDark ? themes.dark : themes.light | |
| currentProps.theme = isDark ? darkUIStorybook as ThemeVars : themes.light |
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
09eccc3 to
95c2a6e
Compare
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
95c2a6e to
a9180ad
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (25)
libs/shared/config/eslint/default.js (2)
8-25: Consider restricting module boundaries with specific tagsThe current configuration allows any module to depend on any other module (
'*'tags). This might lead to unwanted dependencies and make the codebase harder to maintain.Consider defining specific tags and constraints. For example:
{ sourceTag: '*', - onlyDependOnLibsWithTags: ['*'], + onlyDependOnLibsWithTags: ['shared', 'utils'], },
26-31: Document the purpose of empty override sectionWhile it's fine to have a placeholder for future overrides, consider adding a more detailed comment explaining:
- When should rules be added here?
- What types of overrides are expected?
- Any specific guidelines for adding new rules?
Also, remove the trailing semicolon at the end of the file:
-]; +]🧰 Tools
🪛 eslint
[error] 31-31: Extra semicolon.
(style/semi)
apps/website/app/routes/_index.tsx (3)
13-17: Enhance meta tags for better SEO and social sharingConsider adding additional meta tags for improved SEO and social media sharing:
export const meta: MetaFunction = () => { return [ { title: 'cuHacking 2025' }, { name: 'description', content: 'Carleton University\'s Official Hackathon.' }, + { property: 'og:title', content: 'cuHacking 2025' }, + { property: 'og:description', content: 'Carleton University\'s Official Hackathon.' }, + { property: 'og:type', content: 'website' }, + { name: 'twitter:card', content: 'summary' }, + { name: 'twitter:title', content: 'cuHacking 2025' }, + { name: 'twitter:description', content: 'Carleton University\'s Official Hackathon.' } ] }
31-38: Enhance Accordion implementation for better accessibility and user experienceThe Accordion implementation could be improved in several ways:
- <Accordion type="single" collapsible> - <AccordionItem value="item-1"> + <Accordion + type="single" + collapsible + className="mt-4" + aria-label="Frequently Asked Questions" + > + <AccordionItem value="accessibility"> <AccordionTrigger>Is it accessible?</AccordionTrigger> <AccordionContent> - Yes. It adheres to the WAI-ARIA design pattern. + Yes. Our website follows WAI-ARIA design patterns and includes: + • Proper heading hierarchy + • ARIA labels and landmarks + • Keyboard navigation support + • High contrast color schemes + • Screen reader compatibility </AccordionContent> </AccordionItem> </Accordion>Changes include:
- More descriptive value prop
- Added aria-label for better accessibility
- Added margin-top class for better spacing
- Enhanced content with specific accessibility features
22-23: Improve responsive layout and spacingThe current layout could be enhanced for better responsiveness and visual hierarchy:
- <div className="container mx-auto flex justify-center"> - <div className="max-w-lg"> + <div className="container mx-auto px-4 py-8 sm:py-12"> + <div className="max-w-lg mx-auto space-y-6">Changes:
- Added padding for better spacing on mobile
- Added vertical padding that increases on larger screens
- Added space between children using space-y utility
libs/shared/config/typescript/base.json (2)
3-4: Consider updating the TypeScript target versionThe current setup uses ES2015 as the target while including ES2020 library features. Consider updating the target to match:
- "target": "es2015", + "target": "es2020",This would better align with modern web development practices and Storybook's capabilities.
22-24: Consider enabling declaration filesSince this is in the
libs/shareddirectory, enabling declaration files would improve TypeScript integration when other parts of the workspace consume these shared modules:- "declaration": false, + "declaration": true,🧰 Tools
🪛 Biome
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 24-24: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
libs/external/shadcn/components/ui/button.tsx (2)
42-54: Consider adding aria-label handling for icon buttonsThe Button component implementation is solid, but could benefit from explicit aria-label handling when used as an icon button.
Consider adding this check:
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button' + if (size === 'icon' && !props['aria-label']) { + console.warn('Button: Icon buttons should have an aria-label prop for accessibility') + } return ( <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} /> ) }, )
1-56: Consider adding component documentationThis is a well-implemented button component following shadcn/ui patterns. Consider adding JSDoc comments or a separate documentation file to explain:
- Usage examples for each variant
- Accessibility considerations
- Common patterns when using with asChild
Example JSDoc:
/** * A flexible button component that supports multiple variants and sizes. * * @example * // Default button * <Button>Click me</Button> * * // Icon button * <Button size="icon" aria-label="Settings"> * <SettingsIcon /> * </Button> * * // As child (polymorphic) * <Button asChild> * <Link href="/settings">Settings</Link> * </Button> */tailwind.config.ts (1)
65-65: Consider additional useful Tailwind pluginsWhile the animate plugin is correctly configured, consider adding other official Tailwind plugins that might be useful for your project:
@tailwindcss/formsfor better form styling@tailwindcss/typographyfor rich text content@tailwindcss/aspect-ratiofor responsive media- plugins: [TailwindAnimate], + plugins: [ + TailwindAnimate, + // require('@tailwindcss/forms'), + // require('@tailwindcss/typography'), + // require('@tailwindcss/aspect-ratio'), + ],libs/external/shadcn/components/ui/button.stories.tsx (2)
10-46: Consider following Storybook naming conventions for the titleThe configuration is well-structured, but the title
'Shadcn-ui/Button'could be more consistent with conventional Storybook naming patterns.Consider updating the title to follow the standard format:
- title: 'Shadcn-ui/Button', + title: 'UI/Button',This aligns better with common Storybook practices and makes navigation more intuitive.
56-98: Consider using h-4 w-4 instead of size-4 for better browser supportThe icon stories are well-implemented, but the
size-4utility class might have limited browser support.Consider updating the className for better compatibility:
- <ChevronRightIcon className="size-4" /> + <ChevronRightIcon className="h-4 w-4" /> - <EnvelopeOpenIcon className="mr-2 size-4" /> + <EnvelopeOpenIcon className="mr-2 h-4 w-4" /> - <ReloadIcon className="mr-2 size-4 animate-spin" /> + <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />.storybook/main.ts (3)
10-14: Document available framework optionsConsider documenting the available framework options that can be configured here. This will help future maintainers understand what can be customized.
framework: { name: '@storybook/nextjs', - options: {}, + options: { + // Available options: + // builder: {} // Configure the builder options + // fastRefresh: true // Enable/disable fast refresh + // strictMode: true // Enable/disable React strict mode + }, },
25-29: Review potential theme/background management conflictsThere are three addons that affect theme/background:
storybook-dark-mode: Toggles Manager, Preview Components, and Background@storybook/addon-themes: Toggles Preview Components and Background@storybook/addon-backgrounds: Toggles only BackgroundConsider documenting the intended usage pattern to avoid confusion, or remove redundant addons.
48-64: Complete or remove commented addon configurationThe commented out
@storybook/addon-storysourceconfiguration appears to be a work in progress. Consider either:
- Completing the setup if source code viewing is needed
- Removing the commented code to maintain cleaner configuration
package.json (2)
23-23: Document the clean script's behaviorThe
cleanscript usesgit clean -fdXwhich forcefully removes all ignored files. While the script preserves.envfiles, it's important to document this behavior as it could lead to unexpected data loss.Consider adding a comment in the README about this script's behavior and what files it will remove.
47-48: Consider consolidating build toolsThe project includes multiple build tools and bundlers:
- Babel (@babel/core)
- Vite
- SWC (@swc/core)
This could lead to confusion about which tool should be used in different scenarios.
Consider standardizing on a single build tool stack to reduce complexity and maintenance overhead.
Also applies to: 156-157
.storybook/preview.tsx (4)
29-48: Add documentation for the story sorting hierarchy.While the sorting configuration is logical, consider adding comments to explain the significance of each category in the order array (Website, cuHacking Design System, etc.) to help future contributors understand the intended structure.
70-89: Consider memoizing theme objects.The theme objects are created by spreading multiple sources (
themes.dark,darkUIStorybook,commonTheme). Consider memoizing these merged objects to avoid unnecessary re-creation:+const darkTheme = React.useMemo(() => ({ + ...themes.dark, + ...darkUIStorybook, + ...commonTheme, +}), []); + +const lightTheme = React.useMemo(() => ({ + ...themes.normal, + ...lightUIStorybook, + ...commonTheme, +}), []); darkMode: { // ...other config dark: { - ...themes.dark, - ...darkUIStorybook, - ...commonTheme, + ...darkTheme, }, light: { - ...themes.normal, - ...lightUIStorybook, - ...commonTheme, + ...lightTheme, }, }
133-136: Remove commented console.log statements.Debug console.log statements should be removed from production code. If they're needed for development, consider using a debug library that can be enabled/disabled based on environment.
155-174: Consider consolidating theme configuration.The default theme is specified in both the
ThemeProviderandwithThemeByClassNamedecorator. Consider extracting this to a constant to maintain a single source of truth:+const DEFAULT_THEME = 'dark'; decorators: [ (Story) => ( <ThemeProvider attribute="class" - defaultTheme="dark" + defaultTheme={DEFAULT_THEME} disableTransitionOnChange > <Story /> </ThemeProvider> ), withThemeByClassName({ themes: { light: 'light', dark: 'dark', }, - defaultTheme: 'dark', + defaultTheme: DEFAULT_THEME, }), ],libs/external/shadcn/components/ui/typography/typography.tsx (4)
1-2: Consider removing ESLint disable directiveThe ESLint directive
unused-imports/no-unused-varsseems unnecessary as thecnutility is being used throughout the file.-/* eslint-disable unused-imports/no-unused-vars */
4-89: Consider extracting common component props typeMultiple components share the same props pattern. Consider creating a shared type to reduce duplication:
type TypographyProps<T extends keyof JSX.IntrinsicElements> = { className?: string; children: React.ReactNode; } & React.ComponentProps<T>;Usage example:
export function TypographyH1({ className, children, ...props }: TypographyProps<'h1'>) { // ... rest of the implementation }
200-210: Add base styles to TypographyListItemThe empty string in className concatenation seems unintentional:
- <li className={cn('', className)} {...props}> + <li className={cn('text-base leading-7', className)} {...props}>
227-243: Enhance accessibility for code and small text componentsConsider adding aria-label props to improve screen reader experience for
TypographyInlineCodeandTypographySmallcomponents:type EnhancedTypographyProps<T extends keyof JSX.IntrinsicElements> = { 'aria-label'?: string; } & TypographyProps<T>; export function TypographyInlineCode({ className, children, 'aria-label': ariaLabel, ...props }: EnhancedTypographyProps<'code'>) { return ( <code className={cn( 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold', className )} aria-label={ariaLabel || `Code: ${typeof children === 'string' ? children : ''}`} {...props} > {children} </code> ); }Also applies to: 272-285
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (4)
libs/external/shadcn/public/cuhacking-logo.svgis excluded by!**/*.svglibs/shared/assets/cuhacking-logo.svgis excluded by!**/*.svglibs/shared/features/awesome-feature/assets/cuhacking-logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (45)
.gitignore(2 hunks).storybook/custom-viewports.ts(1 hunks).storybook/main.ts(1 hunks).storybook/preview.tsx(1 hunks).storybook/themes-storybook-ui.ts(1 hunks).storybook/tsconfig.storybook.json(1 hunks)apps/website/app/root.tsx(2 hunks)apps/website/app/routes/_index.tsx(1 hunks)apps/website/tailwind.config.ts(1 hunks)components.json(1 hunks)libs/external/shadcn/README.md(1 hunks)libs/external/shadcn/components/ui/accordion.tsx(1 hunks)libs/external/shadcn/components/ui/button.stories.tsx(1 hunks)libs/external/shadcn/components/ui/button.tsx(1 hunks)libs/external/shadcn/components/ui/calendar.tsx(1 hunks)libs/external/shadcn/components/ui/colors.mdx(1 hunks)libs/external/shadcn/components/ui/docs.mdx(1 hunks)libs/external/shadcn/components/ui/introduction.tsx(1 hunks)libs/external/shadcn/components/ui/typography/typography.tsx(1 hunks)libs/external/shadcn/eslint.config.js(1 hunks)libs/external/shadcn/global.css(1 hunks)libs/external/shadcn/index.ts(1 hunks)libs/external/shadcn/lib/utils/cn.ts(1 hunks)libs/external/shadcn/lib/utils/index.ts(1 hunks)libs/external/shadcn/postcss.config.js(1 hunks)libs/external/shadcn/project.json(1 hunks)libs/external/shadcn/tailwind.config.ts(1 hunks)libs/external/shadcn/tsconfig.json(1 hunks)libs/external/shadcn/tsconfig.lib.json(1 hunks)libs/shared/config/eslint/antfu.js(1 hunks)libs/shared/config/eslint/default.js(1 hunks)libs/shared/config/eslint/playwright.js(1 hunks)libs/shared/config/tailwind/base.ts(1 hunks)libs/shared/config/tailwind/shadcn.ts(1 hunks)libs/shared/config/typescript/base.json(1 hunks)libs/shared/features/awesome-feature/index.ts(1 hunks)libs/shared/project.json(1 hunks)libs/shared/tsconfig.json(1 hunks)libs/shared/tsconfig.lib.json(1 hunks)libs/shared/ui/global.css(1 hunks)libs/shared/utils/cn.ts(1 hunks)package.json(4 hunks)postcss.config.js(1 hunks)tailwind.config.ts(1 hunks)tsconfig.base.json(1 hunks)
✅ Files skipped from review due to trivial changes (5)
- .storybook/tsconfig.storybook.json
- libs/external/shadcn/components/ui/accordion.tsx
- libs/external/shadcn/index.ts
- libs/external/shadcn/lib/utils/index.ts
- postcss.config.js
🚧 Files skipped from review as they are similar to previous changes (30)
- .gitignore
- .storybook/custom-viewports.ts
- .storybook/themes-storybook-ui.ts
- apps/website/app/root.tsx
- apps/website/tailwind.config.ts
- components.json
- libs/external/shadcn/README.md
- libs/external/shadcn/components/ui/calendar.tsx
- libs/external/shadcn/components/ui/colors.mdx
- libs/external/shadcn/components/ui/docs.mdx
- libs/external/shadcn/components/ui/introduction.tsx
- libs/external/shadcn/eslint.config.js
- libs/external/shadcn/global.css
- libs/external/shadcn/lib/utils/cn.ts
- libs/external/shadcn/postcss.config.js
- libs/external/shadcn/project.json
- libs/external/shadcn/tailwind.config.ts
- libs/external/shadcn/tsconfig.json
- libs/external/shadcn/tsconfig.lib.json
- libs/shared/config/eslint/antfu.js
- libs/shared/config/eslint/playwright.js
- libs/shared/config/tailwind/base.ts
- libs/shared/config/tailwind/shadcn.ts
- libs/shared/features/awesome-feature/index.ts
- libs/shared/project.json
- libs/shared/tsconfig.json
- libs/shared/tsconfig.lib.json
- libs/shared/ui/global.css
- libs/shared/utils/cn.ts
- tsconfig.base.json
🧰 Additional context used
🪛 eslint
libs/shared/config/eslint/default.js
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
[error] 31-31: Extra semicolon.
(style/semi)
🪛 Biome
libs/shared/config/typescript/base.json
[error] 5-5: Expected a property but instead found '// "---------- JAVASCRIPT SUPPORT ---------": "",'.
Expected a property here.
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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] 11-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)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 22-22: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 23-23: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-24: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 24-28: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-30: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 32-35: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-38: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
🔇 Additional comments (19)
libs/shared/config/eslint/default.js (2)
1-4: Missing nx import issue already identified
This issue has been previously identified in an existing review comment. The solution provided there to add the nx import is still valid and necessary.
🧰 Tools
🪛 eslint
[error] 2-2: 'nx' is not defined.
(no-undef)
[error] 3-3: 'nx' is not defined.
(no-undef)
[error] 4-4: 'nx' is not defined.
(no-undef)
5-7: LGTM! Correctly ignoring build outputs
The ignore pattern for dist directory is appropriate and follows best practices.
libs/shared/config/typescript/base.json (3)
14-21: LGTM! Module and path configuration follows Nx best practices
The module resolution settings and path aliases are well-configured for an Nx workspace structure.
🧰 Tools
🪛 Biome
[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)
[error] 15-15: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 16-16: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-17: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 17-18: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-19: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 19-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
36-37: LGTM! Project settings are well-configured
The exclude patterns and compileOnSave settings follow TypeScript best practices.
🧰 Tools
🪛 Biome
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 36-36: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 37-37: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
10-11: Verify decorator settings necessity
The configuration enables decorator metadata and experimental decorators, which are typically needed for Angular projects. If this is a React-based Storybook setup, these settings might not be necessary.
🧰 Tools
🪛 Biome
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 10-10: 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)
libs/external/shadcn/components/ui/button.tsx (2)
7-34: Well-structured button variants with comprehensive styling!
The button variants implementation is excellent, featuring:
- Proper accessibility attributes (focus states, disabled states)
- Comprehensive variant coverage (default, destructive, outline, etc.)
- Responsive sizing options
- Type-safe variants using class-variance-authority
36-40: Well-typed props interface with polymorphic support!
The ButtonProps interface is well-designed with:
- Complete type safety through HTML button attributes
- Variant props typing via VariantProps
- Polymorphic component support via asChild
tailwind.config.ts (3)
1-2: LGTM: Clean import statement
The import of tailwindcss-animate is properly typed and aligns with the animation configurations defined in the theme.
4-6: Consider broadening the content pattern
The current content pattern might miss files containing Tailwind classes. Consider including additional common file extensions and checking if the project structure matches the pattern.
content: [
- '{libs,apps}/**/*!(*.stories|*.spec).{ts,tsx,html}',
+ '{libs,apps}/**/*!(*.stories|*.spec).{ts,tsx,html,jsx,js,mdx}',
+ // Add any additional paths where Tailwind classes might be used
],7-64: Verify CSS variable definitions
The theme configuration uses HSL color variables, but these need to be defined in your CSS. Ensure all these CSS custom properties are properly defined in your global styles:
--border,--input,--ring--background,--foreground--primary,--primary-foreground- etc.
Also, the accordion animations are configured for Radix UI's Accordion component. Ensure you're using Radix UI's Accordion or implement compatible height variables.
✅ Verification successful
Let me search for CSS variable definitions in other potential locations and check the component usage.
CSS variables are properly defined and Radix UI Accordion is integrated
The verification shows that:
- All required CSS variables are properly defined in the global CSS files under both
:rootand.darkselectors, including all color variables used in the Tailwind config. - Radix UI Accordion is correctly imported at
libs/external/shadcn/components/ui/accordion.tsx, matching the animation configuration.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for CSS variable definitions in global styles
echo "Searching for CSS variable definitions..."
rg --type css "(:root|html|body).*\{[^}]*--(\w|-)*:" -A 20
# Check for Radix UI Accordion usage
echo "Verifying Radix UI Accordion usage..."
rg "from.*@radix-ui/react-accordion"
Length of output: 390
Script:
#!/bin/bash
# Search for CSS files and their content
echo "Searching for CSS files..."
fd -e css -x cat {}
# Search for CSS-in-JS or styled-components usage
echo "Checking for CSS-in-JS patterns..."
rg "createGlobalStyle|globalCss|global\s*\{"
# Check for theme-related files
echo "Looking for theme-related files..."
fd -e ts -e js -e tsx -e jsx -i theme
Length of output: 13782
libs/external/shadcn/components/ui/button.stories.tsx (3)
1-9: LGTM! Clean import organization
The imports are well-organized, using specific imports for icons and Storybook utilities. The relative import for the Button component is correctly structured.
47-47: LGTM! Proper type definition
The Story type is correctly defined using StoryObj with proper type reference to meta.
49-54: LGTM! Well-structured variant stories
The variant stories are concisely defined and cover all button variants. The implementation follows Storybook best practices.
.storybook/main.ts (1)
1-103: Verify TypeScript and addon compatibility
Please ensure:
- TypeScript configuration is properly set up for Storybook
- All included addons are compatible with the current Storybook version
#!/bin/bash
# Check TypeScript configuration
echo "Checking for TypeScript configuration..."
fd "tsconfig.*json" . -x cat {} \;
# Check package.json for addon versions
echo -e "\nChecking addon versions..."
cat package.json | jq '.dependencies + .devDependencies | with_entries(select(.key | contains("storybook")))'package.json (3)
78-94: LGTM: Storybook configuration is complete and consistent
All necessary Storybook addons are included with consistent versioning (8.4.2), which aligns with the PR objective of initializing Storybook.
61-72: LGTM: Nx packages are consistently versioned
All Nx packages are correctly pinned to version 20.1.0, which ensures compatibility between the packages.
34-36: Verify React version compatibility
The React version (18.3.1) specified is ahead of the latest stable release. This could lead to compatibility issues with other dependencies.
Also applies to: 41-41
.storybook/preview.tsx (1)
1-14: LGTM: Imports are well-organized and complete.
All necessary dependencies are properly imported, including theme providers, Storybook components, and custom configurations.
libs/external/shadcn/components/ui/typography/typography.tsx (1)
155-198: 🛠️ Refactor suggestion
Add accessibility attributes to table structure
The table implementation should include proper ARIA attributes and semantic markup:
export function TypographyTable(props: React.ComponentProps<'table'>) {
return (
<div className="my-6 w-full overflow-y-auto">
- <table className="w-full">
+ <table className="w-full" role="grid" aria-label="Data comparison table">
<thead>
- <Tr>
+ <Tr role="row">Skipping comment about hardcoded data as it's already covered in previous review.
| "skipDefaultLibCheck": true, | ||
| // "---------- WATCH OPTIONS ---------": "" | ||
| "skipLibCheck": true |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider enabling additional type-checking options
For a shared configuration, you might want to enable stricter type checking. Consider adding:
"skipDefaultLibCheck": true,
- "skipLibCheck": true
+ "skipLibCheck": true,
+ "strict": true,
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true📝 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.
| "skipDefaultLibCheck": true, | |
| // "---------- WATCH OPTIONS ---------": "" | |
| "skipLibCheck": true | |
| "skipDefaultLibCheck": true, | |
| // "---------- WATCH OPTIONS ---------": "" | |
| "skipLibCheck": true, | |
| "strict": true, | |
| "noImplicitAny": true, | |
| "noImplicitThis": true, | |
| "strictNullChecks": true |
🧰 Tools
🪛 Biome
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-29: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 29-30: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
[error] 31-31: End of file expected
Use an array for a sequence of values: [1, 2]
(parse)
| import { Slot } from '@radix-ui/react-slot' | ||
| import { cva, type VariantProps } from 'class-variance-authority' | ||
| import * as React from 'react' | ||
|
|
||
| import { cn } from '../../lib/utils' |
There was a problem hiding this comment.
💡 Codebase verification
The relative import path is inconsistent across files
The codebase shows inconsistent import paths for the utils module:
- Some files use relative paths:
../../lib/utils - Others use module paths:
@shadcn/lib/utils
This inconsistency should be standardized:
button.tsx:../../lib/utilsaccordion.tsx:../../lib/utilstypography.tsx:../../../lib/utilscalendar.tsx:@shadcn/lib/utils← different pattern
The utils module exists at libs/external/shadcn/lib/utils/, so all these imports should work, but the inconsistent style should be addressed for maintainability.
🔗 Analysis chain
Verify the relative import path
The relative import path ../../lib/utils assumes a specific directory structure. Let's verify this path exists and is consistent with the project structure.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence and location of the utils file
# Check if the utils file exists relative to this component
fd --type f "utils.{ts,tsx}" "libs/external/shadcn/lib"
# Check for any potential duplicate utils files that might cause confusion
fd --type f "utils.{ts,tsx}" | grep -i "/lib/utils"
Length of output: 723
Script:
#!/bin/bash
# Description: Verify the existence and location of the utils file using correct glob patterns
# Check if the utils file exists relative to this component
fd -t f -g "utils.ts" "libs/external/shadcn/lib"
fd -t f -g "utils.tsx" "libs/external/shadcn/lib"
# Check for any potential duplicate utils files that might cause confusion
fd -t f -g "utils.ts" | grep "/lib/utils"
fd -t f -g "utils.tsx" | grep "/lib/utils"
# Also try ripgrep to find any imports of utils
rg "from.*['\"].*lib/utils['\"]" -t ts -t tsx
Length of output: 255
Script:
#!/bin/bash
# Description: Verify the existence and location of the utils file using simpler commands
# Look for utils.ts in the entire codebase
find . -type f -name "utils.ts"
# Search for imports using ripgrep without file type specification
rg "from ['\"].*lib/utils['\"]"
# Check the content of the shadcn lib directory
ls -R libs/external/shadcn/lib/
Length of output: 1083
| @@ -0,0 +1,103 @@ | |||
| import type { StorybookConfig } from '@storybook/nextjs' | |||
|
|
|||
| // import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin' | |||
There was a problem hiding this comment.
💡 Codebase verification
Path aliases are configured - enable TsconfigPathsPlugin for Storybook
The codebase has path aliases configured in the base tsconfig.json:
@shadcn->libs/external/shadcn@cuhacking->libs/shared
You should uncomment and use the TsconfigPathsPlugin to enable these path aliases in Storybook stories.
🔗 Analysis chain
Consider implementing path aliasing for better imports
The commented out TsconfigPathsPlugin import suggests incomplete path aliasing setup. This could make imports in stories more verbose.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if tsconfig contains path aliases that would benefit from the plugin
fd -t f "tsconfig.*json" . -x cat {} \; | jq -r 'select(.compilerOptions.paths != null) | .compilerOptions.paths'
Length of output: 7455
|
🎉 This PR is included in version 1.6.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
nx add @nx/storybookSummary by CodeRabbit
New Features
CalendarandAccordioncomponents for enhanced user interaction.Buttoncomponent with various styles and sizes.Typographycomponent suite for consistent text presentation.Bug Fixes
.gitignoreto improve clarity on ignored files.Documentation
Chores