chore: initialize storybook using nx command #97
Conversation
WalkthroughWalkthroughThis pull request introduces significant enhancements to the Storybook integration within the project. It adds new configuration files for global styles, theming, and TypeScript settings specific to Storybook. The updates include a comprehensive styling framework utilizing Tailwind CSS, dark mode support, and theme configurations for the Storybook UI. Additionally, it establishes a structured environment for developing and testing UI components, ensuring a cohesive and visually appealing experience. Changes
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (4)
Files skipped from review as they are similar to previous changes (4)
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
added
documentation
`nx add @nx/storybook`
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
from
c79f80b
to
eff4183
Compare
Did not use `npx nx g @nx/storybook:migrate-8`, simply changed the version number in package.json by hand.
Command: `nx g @nx/react:library storybook-host --directory=libs/storybook-host --bundler=none --unitTestRunner=none --projectNameAndRootFormat=as-provided` From NX docs: https://nx.dev/recipes/storybook/one-storybook-for-all `eslint.config.js` was changed to ESM by hand, and `nx lint storybook-host --fix` was ran.
Command: nx g @nx/storybook:configuration storybook-host --interactionTests=true --uiFramework=@storybook/react-vite From NX Docs: https://nx.dev/recipes/storybook/one-storybook-for-all
Command used: `npx storybook@latest upgrade --config-dir libs/storybook-host/.storybook
MFarabi619
force-pushed
the
mfarabi/feat/96-add-storybook-with-tailwindcss-shadcn-ui-and-chromatic-visual-test-server
branch
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.
…ntrols, and sorting configs
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 😭 |
nx add @nx/storybookSummary by CodeRabbit
New Features
Chores
.gitignoreto exclude Storybook output files.package.json.