chore: add minimal storybook config #90
Conversation
WalkthroughThe recent updates enhance the development and testing environment by integrating Storybook into the UI component library. Key improvements include new configurations for Storybook, enriched component stories, and better organization through enhanced linting and styling practices. The addition of various new UI component stories promotes interactive documentation, and the updates to configuration files streamline the overall workflow, ensuring a more cohesive development experience. Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant Storybook
participant UI Component
Developer->>Storybook: Add new stories and configurations
Storybook-->>UI Component: Load component stories
UI Component-->>Storybook: Render different states
Storybook-->>Developer: Display interactive UI
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (27)
- .eslintrc.js (1 hunks)
- .gitignore (1 hunks)
- .storybook/main.ts (1 hunks)
- .storybook/preview.tsx (1 hunks)
- .storybook/themes.ts (1 hunks)
- package.json (7 hunks)
- src/stories/Avatar.stories.tsx (1 hunks)
- src/stories/Badge.stories.tsx (1 hunks)
- src/stories/Button.stories.ts (1 hunks)
- src/stories/CheckboxDemo.stories.ts (1 hunks)
- src/stories/DataTableDemo.stories.tsx (1 hunks)
- src/stories/FormBuilderDemo.stories.tsx (1 hunks)
- src/stories/Input.stories.tsx (1 hunks)
- src/stories/Label.stories.tsx (1 hunks)
- src/stories/Select.stories.tsx (1 hunks)
- src/stories/SelectScrollable.stories.tsx (1 hunks)
- src/stories/Separator.stories.tsx (1 hunks)
- src/stories/Skeleton.stories.tsx (1 hunks)
- src/stories/Switch.stories.tsx (1 hunks)
- src/stories/TableDemo.stories.ts (1 hunks)
- src/stories/Tooltip.stories.tsx (1 hunks)
- src/stories/demo/CheckboxDemo.tsx (1 hunks)
- src/stories/demo/DataTableDemo.tsx (1 hunks)
- src/stories/demo/FormBuilderDemo.tsx (1 hunks)
- src/stories/demo/TableDemo.tsx (1 hunks)
- src/storybook.css (1 hunks)
- tailwind.config.js (1 hunks)
Files skipped from review due to trivial changes (5)
- .eslintrc.js
- src/stories/DataTableDemo.stories.tsx
- src/stories/Label.stories.tsx
- src/stories/TableDemo.stories.ts
- src/stories/demo/TableDemo.tsx
Files skipped from review as they are similar to previous changes (16)
- .gitignore
- .storybook/main.ts
- .storybook/preview.tsx
- .storybook/themes.ts
- package.json
- src/stories/Badge.stories.tsx
- src/stories/Button.stories.ts
- src/stories/CheckboxDemo.stories.ts
- src/stories/FormBuilderDemo.stories.tsx
- src/stories/Input.stories.tsx
- src/stories/Skeleton.stories.tsx
- src/stories/demo/CheckboxDemo.tsx
- src/stories/demo/DataTableDemo.tsx
- src/stories/demo/FormBuilderDemo.tsx
- src/storybook.css
- tailwind.config.js
Additional context used
Biome
src/stories/Switch.stories.tsx
[error] 17-17: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/Tooltip.stories.tsx
[error] 28-28: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/Avatar.stories.tsx
[error] 18-18: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/Select.stories.tsx
[error] 35-35: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/Separator.stories.tsx
[error] 29-29: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/SelectScrollable.stories.tsx
[error] 80-80: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
Additional comments not posted (3)
src/stories/Select.stories.tsx (1)
1-44: LGTM!The Storybook story for the Select component is well-structured and follows best practices for component isolation and documentation.
Tools
Biome
[error] 35-35: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/Separator.stories.tsx (1)
1-59: LGTM!The Storybook story for the Separator component is well-structured and demonstrates different orientations effectively.
Tools
Biome
[error] 29-29: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
src/stories/SelectScrollable.stories.tsx (1)
1-88: LGTM!The Storybook story for the SelectScrollable component is comprehensive and effectively demonstrates the component's functionality with various time zones.
Tools
Biome
[error] 80-80: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| } satisfies Meta<{}>; |
There was a problem hiding this comment.
Avoid using '{}' as a type.
Define an explicit object shape for better type safety and clarity.
-} satisfies Meta<{}>;
+} satisfies Meta<typeof SelectRoot>;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.
| } satisfies Meta<{}>; | |
| } satisfies Meta<typeof SelectRoot>; |
Tools
Biome
[error] 35-35: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| } satisfies Meta<{}>; |
There was a problem hiding this comment.
Avoid using '{}' as a type.
Define an explicit object shape for better type safety and clarity.
-} satisfies Meta<{}>;
+} satisfies Meta<typeof Separator>;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.
| } satisfies Meta<{}>; | |
| } satisfies Meta<typeof Separator>; |
Tools
Biome
[error] 29-29: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| } satisfies Meta<{}>; |
There was a problem hiding this comment.
Avoid using {} as a type.
The use of {} as a type is discouraged because it means "any non-nullable value." Define a more specific type for better type safety.
-} satisfies Meta<{}>;
+} satisfies Meta<typeof Switch>;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.
| } satisfies Meta<{}>; | |
| } satisfies Meta<typeof Switch>; |
Tools
Biome
[error] 17-17: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| } satisfies Meta<{}>; |
There was a problem hiding this comment.
Avoid using '{}' as a type.
Define an explicit object shape for better type safety and clarity.
-} satisfies Meta<{}>;
+} satisfies Meta<typeof SelectRoot>;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.
| } satisfies Meta<{}>; | |
| } satisfies Meta<typeof SelectRoot>; |
Tools
Biome
[error] 80-80: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| } satisfies Meta<{}>; |
There was a problem hiding this comment.
Avoid using {} as a type.
The use of {} as a type is discouraged because it means "any non-nullable value." Define a more specific type for better type safety.
-} satisfies Meta<{}>;
+} satisfies Meta<typeof TooltipRoot>;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.
| } satisfies Meta<{}>; | |
| } satisfies Meta<typeof TooltipRoot>; |
Tools
Biome
[error] 28-28: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
| parameters: { | ||
| layout: "centered", | ||
| }, | ||
| } satisfies Meta<{}>; |
There was a problem hiding this comment.
Avoid using {} as a type.
The use of {} as a type is discouraged because it means "any non-nullable value." Define a more specific type for better type safety.
-} satisfies Meta<{}>;
+} satisfies Meta<typeof Avatar>;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.
| } satisfies Meta<{}>; | |
| } satisfies Meta<typeof Avatar>; |
Tools
Biome
[error] 18-18: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
Summary by CodeRabbit
New Features
Improvements
.gitignoreto streamline repository management by ignoring unnecessary log files.Development Tools
package.jsonfor easier Storybook development and builds.Style