BA-1794: storybook cleanup #134
Conversation
|
WalkthroughThe changes in this pull request primarily involve updates to the Storybook configuration across multiple components within the Changes
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/components/.storybook/main.tsOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (4)
packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx (3)
9-10: Consider enhancing the Relay implementation detailsWhile the documentation mentions Relay, it would be helpful to explicitly state the Relay dependencies and requirements for implementing this component.
Consider adding:
- **Purpose**: The `ReactionButton` component provides an interactive button for users to react to content (e.g., like or dislike) with options to handle success and error responses. The component also displays the current reaction count and supports Relay for efficient data loading. +- **Dependencies**: This component requires a Relay environment and expects the target prop to be a Relay fragment. The fragment should include fields for reaction counts and user reaction status.
14-15: Consider adding code examples for potential use casesThe potential usage scenarios are good, but providing concrete code examples would make it easier for developers to implement the component in these contexts.
Consider adding example snippets for posts and articles:
- **Potential Usage**: The `ReactionButton` could also be used for other content types that support reactions, such as posts, images, or articles. + +Example for posts: +```jsx +<ReactionButton + target={post} + reactionType="LIKE" + handleSuccess={() => refetch()} +> + {({ handleReaction, isLoading, target }) => ( + <LikeButton + onClick={handleReaction} + loading={isLoading} + count={target.likeCount} + /> + )} +</ReactionButton> +```
19-24: Enhance props documentation clarity and completeness
- Add a comma after "Typically" for better readability
- Consider indicating which props are required vs optional
Apply these improvements:
- **target** (ReactionButton_target$key): The target data for the reaction button. Typically a comment or post, providing data about the current reactions. + **target** (ReactionButton_target$key): The target data for the reaction button. Typically, a comment or post, providing data about the current reactions. (Required) - **reactionType** (string): Specifies the type of reaction, such as "LIKE" or "DISLIKE". + **reactionType** (string): Specifies the type of reaction, such as "LIKE" or "DISLIKE". (Required) - **children** (function): Function to render children components with reaction handlers and data. + **children** (function): Function to render children components with reaction handlers and data. (Required) - **handleError** (function): Callback function to handle errors during the reaction process. + **handleError** (function): Callback function to handle errors during the reaction process. (Optional) - **handleSuccess** (function): Callback function to handle success, executed after a successful reaction. + **handleSuccess** (function): Callback function to handle success, executed after a successful reaction. (Optional)🧰 Tools
🪛 LanguageTool
[typographical] ~19-~19: Consider adding a comma after ‘Typically’ for more clarity.
Context: ...he target data for the reaction button. Typically a comment or post, providing data about...(RB_LY_COMMA)
packages/design-system/CHANGELOG.md (1)
3-8: Enhance the changelog entry with more detailed documentation.The current changelog entry could be more descriptive. Consider expanding it to better reflect all the changes mentioned in the PR objectives:
## 0.0.17 ### Patch Changes -Storybook cleanup +- Storybook cleanup and improvements: + - Removed unnecessary configurations and documentation + - Added MDX documentation example + - Created Intro Page explaining Storybook's purpose and usage + - Refactored component stories with clear descriptions
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📥 Commits
Reviewing files that changed from the base of the PR and between 54e140c and 8d16ae5815a53d6f1dc1301472836f38d529638c.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (40)
packages/components/.storybook/main.ts(2 hunks)packages/components/CHANGELOG.md(1 hunks)packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx(1 hunks)packages/components/modules/__shared__/ReactionButton/__storybook__/stories.tsx(0 hunks)packages/components/modules/__shared__/SocialInput/__storybook__/stories.tsx(0 hunks)packages/components/modules/__shared__/SocialUpsertActions/__storybook__/stories.tsx(0 hunks)packages/components/modules/__shared__/Timestamp/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentCreate/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentItem/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentUpdate/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/Comments/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentsList/__storybook__/stories.tsx(0 hunks)packages/components/modules/messages/SendMessage/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/Header/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavCentered/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavHorizontal/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavMini/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavVertical/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavigationLayout/__storybook__/stories.tsx(0 hunks)packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/stories.tsx(0 hunks)packages/components/modules/notifications/NotificationsList/__storybook__/stories.tsx(0 hunks)packages/components/modules/notifications/NotificationsPopover/__storybook__/stories.tsx(0 hunks)packages/components/package.json(2 hunks)packages/design-system/CHANGELOG.md(1 hunks)packages/design-system/components/Logo/__storybook__/stories.tsx(0 hunks)packages/design-system/components/Popover/__storybook__/stories.tsx(0 hunks)packages/design-system/components/Scrollbar/__storybook__/stories.tsx(0 hunks)packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/stories.tsx(0 hunks)packages/design-system/components/avatars/ClickableAvatar/__storybook__/stories.tsx(0 hunks)packages/design-system/components/buttons/IconButton/__storybook__/stories.tsx(0 hunks)packages/design-system/components/dialogs/ConfirmDialog/__storybook__/stories.tsx(0 hunks)packages/design-system/components/dialogs/Dialog/__storybook__/stories.tsx(0 hunks)packages/design-system/components/displays/LoadingState/__storybook__/stories.tsx(0 hunks)packages/design-system/components/drawers/SwipeableDrawer/__storybook__/stories.tsx(0 hunks)packages/design-system/components/inputs/SocialTextField/__storybook__/stories.tsx(0 hunks)packages/design-system/components/inputs/TextField/__storybook__/stories.tsx(0 hunks)packages/design-system/components/inputs/TextareaField/__storybook__/stories.tsx(0 hunks)packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/stories.tsx(0 hunks)packages/design-system/package.json(1 hunks)
💤 Files with no reviewable changes (34)
- packages/components/modules/shared/ReactionButton/storybook/stories.tsx
- packages/components/modules/shared/SocialInput/storybook/stories.tsx
- packages/components/modules/shared/SocialUpsertActions/storybook/stories.tsx
- packages/components/modules/shared/Timestamp/storybook/stories.tsx
- packages/components/modules/comments/CommentCreate/storybook/stories.tsx
- packages/components/modules/comments/CommentItem/storybook/stories.tsx
- packages/components/modules/comments/CommentUpdate/storybook/stories.tsx
- packages/components/modules/comments/Comments/storybook/stories.tsx
- packages/components/modules/comments/CommentsList/storybook/stories.tsx
- packages/components/modules/messages/SendMessage/storybook/stories.tsx
- packages/components/modules/navigations/Header/AccountMenu/AccountPopover/storybook/stories.tsx
- packages/components/modules/navigations/Header/storybook/stories.tsx
- packages/components/modules/navigations/NavCentered/storybook/stories.tsx
- packages/components/modules/navigations/NavHorizontal/storybook/stories.tsx
- packages/components/modules/navigations/NavMini/storybook/stories.tsx
- packages/components/modules/navigations/NavVertical/storybook/stories.tsx
- packages/components/modules/navigations/NavigationLayout/storybook/stories.tsx
- packages/components/modules/notifications/NotificationsList/NotificationItem/storybook/stories.tsx
- packages/components/modules/notifications/NotificationsList/storybook/stories.tsx
- packages/components/modules/notifications/NotificationsPopover/storybook/stories.tsx
- packages/design-system/components/Logo/storybook/stories.tsx
- packages/design-system/components/Popover/storybook/stories.tsx
- packages/design-system/components/Scrollbar/storybook/stories.tsx
- packages/design-system/components/avatars/AvatarWithPlaceholder/storybook/stories.tsx
- packages/design-system/components/avatars/ClickableAvatar/storybook/stories.tsx
- packages/design-system/components/buttons/IconButton/storybook/stories.tsx
- packages/design-system/components/dialogs/ConfirmDialog/storybook/stories.tsx
- packages/design-system/components/dialogs/Dialog/storybook/stories.tsx
- packages/design-system/components/displays/LoadingState/storybook/stories.tsx
- packages/design-system/components/drawers/SwipeableDrawer/storybook/stories.tsx
- packages/design-system/components/inputs/SocialTextField/storybook/stories.tsx
- packages/design-system/components/inputs/TextField/storybook/stories.tsx
- packages/design-system/components/inputs/TextareaField/storybook/stories.tsx
- packages/design-system/components/typographies/TypographyWithEllipsis/storybook/stories.tsx
✅ Files skipped from review due to trivial changes (2)
- packages/components/CHANGELOG.md
- packages/design-system/package.json
🧰 Additional context used
🪛 LanguageTool
packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx
[typographical] ~19-~19: Consider adding a comma after ‘Typically’ for more clarity.
Context: ...he target data for the reaction button. Typically a comment or post, providing data about...
(RB_LY_COMMA)
🔇 Additional comments (3)
packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx (1)
1-3: LGTM! Well-structured Storybook setup
The component documentation is properly organized in the Storybook hierarchy following the established pattern.
packages/components/.storybook/main.ts (1)
29-29: LGTM! Addition of documentation addon.
The addition of @storybook/addon-docs aligns with the PR objectives to enhance documentation capabilities.
Let's verify the addon compatibility with the current Storybook setup:
#!/bin/bash
# Description: Check package.json for Storybook version compatibility
# Expected: Storybook core and addon-docs versions should match
echo "Checking Storybook dependencies versions..."
fd -t f "package.json" . -x jq -r '.dependencies + .devDependencies | with_entries(select(.key | contains("storybook"))) // empty'packages/components/package.json (1)
4-4: LGTM: Version bump is appropriate
The version increment from 0.0.15 to 0.0.16 aligns with the scope of changes (Storybook documentation improvements).
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance the example with TypeScript and best practices
The current example could be more comprehensive by including TypeScript types and demonstrating the children render prop pattern.
Consider updating the example:
-```javascript
+```typescript
import ReactionButton from '../ReactionButton'
+import type { ReactionButton_target$key } from './__generated__/ReactionButton_target.graphql'
+
+interface Props {
+ target: ReactionButton_target$key
+}
-export const DefaultComments = (target) => (
+export const DefaultComments: React.FC<Props> = ({ target }) => (
<ReactionButton
target={target}
reactionType="LIKE"
- handleError={() => console.log('Error handling reaction')}
- handleSuccess={() => console.log('Successfully handled reaction')}
+ handleError={(error) => {
+ console.error('Error handling reaction:', error)
+ // Show error toast or handle appropriately
+ }}
+ handleSuccess={() => {
+ console.log('Successfully handled reaction')
+ // Refetch data or update UI
+ }}
+ >
+ {({ handleReaction, isLoading, target }) => (
+ <button
+ onClick={handleReaction}
+ disabled={isLoading}
+ >
+ {isLoading ? 'Loading...' : `Like (${target.likeCount})`}
+ </button>
+ )}
/>
)There was a problem hiding this comment.
💡 Codebase verification
No MDX files found in specified directories.
Please ensure that MDX files exist in the following paths:
packages/components/modules/**/__storybook__packages/design-system/components/**/__storybook__
🔗 Analysis chain
LGTM! Proper organization of story paths.
The story paths are well-organized with documentation files (.mdx) preceding the story files, which follows best practices for Storybook configuration.
Let's verify the existence of MDX files in the specified paths:
Shell script corrected to verify MDX file existence:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence of MDX files in the specified paths
# Expected: Should find at least one MDX file in each directory
echo "Checking for MDX files in modules directory..."
fd -e mdx . "packages/components/modules/**/__storybook__"
echo "Checking for MDX files in design-system directory..."
fd -e mdx . "packages/design-system/components/**/__storybook__"
Length of output: 1803
Script:
#!/bin/bash
# Description: Verify the existence of MDX files in the specified paths
# Expected: Should find at least one MDX file in each directory
echo "Checking for MDX files in modules directory..."
fd -e mdx "packages/components/modules/**/__storybook__"
echo "Checking for MDX files in design-system directory..."
fd -e mdx "packages/design-system/components/**/__storybook__"
Length of output: 341
packages/components/package.json
Outdated
There was a problem hiding this comment.
💡 Codebase verification
Storybook Addon Docs Configuration Missing
The @storybook/addon-docs is present in package.json and MDX documentation files are found, but it is not configured in .storybook/main.ts. Please add @storybook/addon-docs to the addons array in main.ts.
🔗 Analysis chain
Verify Storybook configuration for the new addon
The addition of @storybook/addon-docs is appropriate for MDX documentation support. Let's verify the corresponding Storybook configuration.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Storybook configuration for the new addon
# Check if the addon is properly configured in .storybook/main.ts
echo "Checking Storybook configuration..."
rg -A 10 "addons.*=" "packages/components/.storybook/main.ts"
# Check for MDX documentation files
echo "Checking for MDX documentation files..."
fd -e mdx . packages/components/
Length of output: 353
deboracosilveira
force-pushed
the
BA-1794-storybook-clean-up
branch
from
8d16ae5 to
dbe6d80
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (10)
packages/design-system/.storybook/preview.ts (1)
Line range hint
20-57: Consider improving the story order maintainability.The story order array could benefit from better organization and documentation:
- Consider grouping stories into a separate constant object by category
- Add missing section comments for consistency
- Consider addressing the TypeScript ignore comment with proper typing
Here's a suggested refactor:
+ const STORY_ORDER = { + documentation: ['Introduction'], + avatars: ['AvatarWithPlaceholder', 'ClickableAvatar'], + buttons: ['IconButton'], + dialogs: ['BaseDialog', 'ConfirmDialog'], + displays: ['LoadingState'], + drawers: ['SwipeableDrawer'], + form: ['TextField', 'TextareaField', 'CommentTextField'], + iconography: ['Iconography'], + popover: ['Popover'], + typography: ['TypographyWithEllipsis'], + general: ['Logo', 'Scrollbar'] + } as const; + + // Flatten the groups into a single array + const order = Object.values(STORY_ORDER).flat(); -const order = [ - 'Introduction', - 'Iconography', - // Avatars - 'AvatarWithPlaceholder', - 'ClickableAvatar', - // ... rest of the array -]packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx (2)
5-29: Documentation structure is comprehensive and well-organized.Consider adding a comma after "Typically" in line 19 for better readability:
-Typically a comment or post, providing data about the current reactions. +Typically, a comment or post, providing data about the current reactions.🧰 Tools
🪛 LanguageTool
[typographical] ~19-~19: Consider adding a comma after ‘Typically’ for more clarity.
Context: ...he target data for the reaction button. Typically a comment or post, providing data about...(RB_LY_COMMA)
23-24: Consider enhancing error handling documentation.The error handling section could benefit from more specific examples of common error scenarios and recommended handling patterns.
Consider adding:
### Error Handling Examples Common error scenarios: - Network failures - Permission issues - Rate limiting Example implementation: ```typescript handleError: (error: Error) => { if (error.name === 'NetworkError') { showToast('Connection lost. Please try again.'); } else if (error.message.includes('permission')) { showToast('You do not have permission to perform this action.'); } // Log error for monitoring logError(error); }packages/components/.storybook/preview.ts (2)
38-38: Consider consolidating duplicate story ordersWhile adding 'Introduction' as the first entry in both arrays is good for documentation, there's significant duplication between
designSystemStoriesOrderandcomponentsStoriesOrder. This could lead to maintenance challenges.Consider extracting the common entries into a shared array:
const commonStoriesOrder = [ 'Introduction', 'Iconography', // Avatars 'AvatarWithPlaceholder', 'ClickableAvatar', // ... other common entries ] const designSystemStoriesOrder = [...commonStoriesOrder] const componentsStoriesOrder = [ ...commonStoriesOrder, // Navigation 'NavigationLayout', // ... other component-specific entries ]Also applies to: 66-66
Line range hint
31-124: Improve type safety and sorting logicThe current implementation has a few areas that could be enhanced:
- The
@ts-ignorecomment suggests underlying type issues with the storySort function- The sorting logic could be more maintainable using a Map for O(1) lookups instead of indexOf
Consider refactoring the sort function to improve type safety and performance:
const storySort = (a: { title?: string }, b: { title?: string }) => { const storiesOrderMap = new Map( [...designSystemStoriesOrder, ...componentsStoriesOrder] .map((title, index) => [title, index]) ); const titleA = (a.title || '').split('/').pop() || ''; const titleB = (b.title || '').split('/').pop() || ''; const indexA = storiesOrderMap.get(titleA) ?? -1; const indexB = storiesOrderMap.get(titleB) ?? -1; if (indexA === -1 || indexB === -1) { return titleA.localeCompare(titleB, undefined, { numeric: true }); } return indexA - indexB; };README.md (5)
174-176: Consider enhancing the introduction with expected outcomes.The introduction clearly states the purpose but could be more impactful by mentioning the benefits of following these guidelines, such as improved maintainability and team collaboration.
## Documentation Guide -To ensure that all pages, components, and utilities are thoroughly documented in Storybook, please follow these steps. +To ensure that all pages, components, and utilities are thoroughly documented in Storybook, please follow these steps. Following these guidelines helps maintain consistent documentation across the project, improves component discoverability, and facilitates easier onboarding for new team members.
183-184: Add an example for MSW mock usage.Consider adding a code example to demonstrate how to properly implement MSW mocks in stories.
- **Use Mocks for Data**: Use MSW (Mock Service Worker) to mock any necessary API requests, ensuring stories are self-contained and reproducible. +- **Use Mocks for Data**: Use MSW (Mock Service Worker) to mock any necessary API requests, ensuring stories are self-contained and reproducible. For example: + ```tsx + export const Default = { + parameters: { + msw: { + handlers: [ + rest.get('/api/data', (req, res, ctx) => { + return res(ctx.json({ data: 'mocked response' })) + }), + ], + }, + }, + } + ```
188-189: Enhance the storySort instruction with an example.The instruction about adding to
storySortcould be more helpful with a concrete example.**After creating the story**: -Add the story name to `storySort` in the `preview.ts` file to ensure it appears in the correct order. If you're unsure where to add this, please ask a COP member for assistance. +Add the story name to `storySort` in the `preview.ts` file to ensure it appears in the correct order. For example: +```ts +export const parameters = { + options: { + storySort: { + order: ['Introduction', 'Components', ['Buttons', 'Forms', 'Layout'], 'Pages'], + }, + }, +} +``` +If you're unsure where to add this, please ask a COP member for assistance.
195-199: Add an example MDX structure.Consider adding a basic MDX file structure to help developers get started quickly.
- **Create an MDX File**: Place the `.mdx` file in the corresponding `__storybook__` folder. The file name should match the component or page name (e.g., `Button.mdx` for the `Button` component). +- **Create an MDX File**: Place the `.mdx` file in the corresponding `__storybook__` folder. The file name should match the component or page name (e.g., `Button.mdx` for the `Button` component). Example structure: + ```mdx + import { Meta } from '@storybook/blocks'; + + <Meta title="@baseapp-frontend-template / Components/Buttons/Button" /> + + # Button Component + + ## Overview + Description of the button component and its purpose. + + ## Props + | Prop | Type | Description | + |------|------|-------------| + | variant | 'primary' \| 'secondary' | The button's visual style | + + ## Usage Guidelines + Best practices and examples of when to use this component. + ```
200-200: Consider maintaining documentation links in a central location.External documentation links like Tettra could break or change over time. Consider maintaining such links in a central configuration file.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📥 Commits
Reviewing files that changed from the base of the PR and between 8d16ae5815a53d6f1dc1301472836f38d529638c and dbe6d80.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (45)
README.md(1 hunks)packages/components/.storybook/Introduction.mdx(1 hunks)packages/components/.storybook/main.ts(2 hunks)packages/components/.storybook/preview.ts(2 hunks)packages/components/CHANGELOG.md(1 hunks)packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx(1 hunks)packages/components/modules/__shared__/ReactionButton/__storybook__/stories.tsx(0 hunks)packages/components/modules/__shared__/SocialInput/__storybook__/stories.tsx(0 hunks)packages/components/modules/__shared__/SocialUpsertActions/__storybook__/stories.tsx(0 hunks)packages/components/modules/__shared__/Timestamp/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentCreate/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentItem/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentUpdate/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/Comments/__storybook__/stories.tsx(0 hunks)packages/components/modules/comments/CommentsList/__storybook__/stories.tsx(0 hunks)packages/components/modules/messages/SendMessage/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/Header/AccountMenu/AccountPopover/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/Header/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavCentered/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavHorizontal/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavMini/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavVertical/__storybook__/stories.tsx(0 hunks)packages/components/modules/navigations/NavigationLayout/__storybook__/stories.tsx(0 hunks)packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/stories.tsx(0 hunks)packages/components/modules/notifications/NotificationsList/__storybook__/stories.tsx(0 hunks)packages/components/modules/notifications/NotificationsPopover/__storybook__/stories.tsx(0 hunks)packages/components/package.json(2 hunks)packages/design-system/.storybook/Introduction.mdx(1 hunks)packages/design-system/.storybook/preview.ts(1 hunks)packages/design-system/CHANGELOG.md(1 hunks)packages/design-system/components/Logo/__storybook__/stories.tsx(0 hunks)packages/design-system/components/Popover/__storybook__/stories.tsx(0 hunks)packages/design-system/components/Scrollbar/__storybook__/stories.tsx(0 hunks)packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/stories.tsx(0 hunks)packages/design-system/components/avatars/ClickableAvatar/__storybook__/stories.tsx(0 hunks)packages/design-system/components/buttons/IconButton/__storybook__/stories.tsx(0 hunks)packages/design-system/components/dialogs/ConfirmDialog/__storybook__/stories.tsx(0 hunks)packages/design-system/components/dialogs/Dialog/__storybook__/stories.tsx(0 hunks)packages/design-system/components/displays/LoadingState/__storybook__/stories.tsx(0 hunks)packages/design-system/components/drawers/SwipeableDrawer/__storybook__/stories.tsx(0 hunks)packages/design-system/components/inputs/SocialTextField/__storybook__/stories.tsx(0 hunks)packages/design-system/components/inputs/TextField/__storybook__/stories.tsx(0 hunks)packages/design-system/components/inputs/TextareaField/__storybook__/stories.tsx(0 hunks)packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/stories.tsx(0 hunks)packages/design-system/package.json(1 hunks)
💤 Files with no reviewable changes (34)
- packages/components/modules/shared/ReactionButton/storybook/stories.tsx
- packages/components/modules/shared/SocialInput/storybook/stories.tsx
- packages/components/modules/shared/SocialUpsertActions/storybook/stories.tsx
- packages/components/modules/shared/Timestamp/storybook/stories.tsx
- packages/components/modules/comments/CommentCreate/storybook/stories.tsx
- packages/components/modules/comments/CommentItem/storybook/stories.tsx
- packages/components/modules/comments/CommentUpdate/storybook/stories.tsx
- packages/components/modules/comments/Comments/storybook/stories.tsx
- packages/components/modules/comments/CommentsList/storybook/stories.tsx
- packages/components/modules/messages/SendMessage/storybook/stories.tsx
- packages/components/modules/navigations/Header/AccountMenu/AccountPopover/storybook/stories.tsx
- packages/components/modules/navigations/Header/storybook/stories.tsx
- packages/components/modules/navigations/NavCentered/storybook/stories.tsx
- packages/components/modules/navigations/NavHorizontal/storybook/stories.tsx
- packages/components/modules/navigations/NavMini/storybook/stories.tsx
- packages/components/modules/navigations/NavVertical/storybook/stories.tsx
- packages/components/modules/navigations/NavigationLayout/storybook/stories.tsx
- packages/components/modules/notifications/NotificationsList/NotificationItem/storybook/stories.tsx
- packages/components/modules/notifications/NotificationsList/storybook/stories.tsx
- packages/components/modules/notifications/NotificationsPopover/storybook/stories.tsx
- packages/design-system/components/Logo/storybook/stories.tsx
- packages/design-system/components/Popover/storybook/stories.tsx
- packages/design-system/components/Scrollbar/storybook/stories.tsx
- packages/design-system/components/avatars/AvatarWithPlaceholder/storybook/stories.tsx
- packages/design-system/components/avatars/ClickableAvatar/storybook/stories.tsx
- packages/design-system/components/buttons/IconButton/storybook/stories.tsx
- packages/design-system/components/dialogs/ConfirmDialog/storybook/stories.tsx
- packages/design-system/components/dialogs/Dialog/storybook/stories.tsx
- packages/design-system/components/displays/LoadingState/storybook/stories.tsx
- packages/design-system/components/drawers/SwipeableDrawer/storybook/stories.tsx
- packages/design-system/components/inputs/SocialTextField/storybook/stories.tsx
- packages/design-system/components/inputs/TextField/storybook/stories.tsx
- packages/design-system/components/inputs/TextareaField/storybook/stories.tsx
- packages/design-system/components/typographies/TypographyWithEllipsis/storybook/stories.tsx
✅ Files skipped from review due to trivial changes (2)
- packages/components/.storybook/Introduction.mdx
- packages/design-system/.storybook/Introduction.mdx
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/components/.storybook/main.ts
- packages/components/CHANGELOG.md
- packages/components/package.json
- packages/design-system/CHANGELOG.md
- packages/design-system/package.json
🧰 Additional context used
🪛 LanguageTool
packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx
[typographical] ~19-~19: Consider adding a comma after ‘Typically’ for more clarity.
Context: ...he target data for the reaction button. Typically a comment or post, providing data about...
(RB_LY_COMMA)
🔇 Additional comments (4)
packages/design-system/.storybook/preview.ts (1)
20-20: LGTM: Introduction story placement is correct.
The addition of 'Introduction' at the start of the order array aligns with the PR objectives and ensures the intro documentation appears first in the Storybook navigation.
packages/components/modules/__shared__/ReactionButton/__storybook__/ReactionButton.mdx (2)
1-3: LGTM! Meta configuration is well-structured.
The title hierarchy follows Storybook's best practices for organization.
32-42: 🛠️ Refactor suggestion
Add accessibility attributes to the example.
While the TypeScript improvements suggested in the previous review are valuable (), the example should also demonstrate proper accessibility attributes.
Consider enhancing the example with ARIA attributes:
export const DefaultComments: React.FC<Props> = ({ target }) => (
<ReactionButton
target={target}
reactionType="LIKE"
handleError={(error) => console.error('Error handling reaction:', error)}
handleSuccess={() => console.log('Successfully handled reaction')}
>
{({ handleReaction, isLoading, target }) => (
<button
onClick={handleReaction}
disabled={isLoading}
aria-pressed={target.hasReacted}
aria-label={`Like this content. Current likes: ${target.likeCount}`}
>
{isLoading ? 'Loading...' : `Like (${target.likeCount})`}
</button>
)}
/>
)packages/components/.storybook/preview.ts (1)
Line range hint 1-124: LGTM! Changes align well with Storybook cleanup objectives
The modifications effectively support the PR's goals by:
- Prioritizing Introduction pages in the story order
- Maintaining a clear structure for component documentation
- Supporting MDX documentation through the existing configuration
Summary by CodeRabbit
Release Notes
New Features
@storybook/addon-docs.ReactionButtoncomponent.Bug Fixes
argTypesandtagsproperties across various components, improving clarity and usability.Chores
@baseapp-frontend/components(0.0.16) and@baseapp-frontend/design-system(0.0.17) packages to reflect recent changes and improvements.