feat: storybook of attachment #269
Conversation
WalkthroughThis PR introduces a new Storybook file for the Attachment component with three stories—Dashboard, Landing, and Thumbnail—each wrapped in an ApiProvider. Additionally, it updates styling in the AttachmentAdmin and AttachmentThumbnail components by replacing a hard-coded color class with a shared utility class and exports the AttachmentThumbnailProps interface. The AttachmentItem component has its button styling and file name display simplified, and a console log statement has been added in the useAttachment hook to output allowed types. These changes are primarily cosmetic and for interactive component testing. Changes
Sequence Diagram(s)sequenceDiagram
participant SB as Storybook
participant AP as ApiProvider
participant AC as Attachment Component
participant C as Console
SB->>AP: Render Dashboard / Landing / Thumbnail story
AP->>AC: Render corresponding Attachment component (Admin, Landing, or Thumbnail)
AC->>C: Invoke onChange event (log file IDs)
Possibly related PRs
Suggested reviewers
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
Scope: all 2 workspace projects This error happened while installing a direct dependency of /tmp/eslint @repo/eslint-config is not in the npm registry, or you have no permission to fetch it. No authorization header was set for the request. ✨ Finishing Touches
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: 0
🧹 Nitpick comments (1)
apps/storybook/src/stories/Attachment.stories.tsx (1)
44-44: Remove irrelevant comment.The comment "✅ Individual Button Stories" seems out of place in an Attachment component story file.
-// ✅ **Individual Button Stories** +// Attachment component stories
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/storybook/src/stories/Attachment.stories.tsx(1 hunks)packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentAdmin.tsx(2 hunks)packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx(2 hunks)packages/ui/src/components/molecules/attachment/attachmentThumbnail/attachmentThumbnail.tsx(3 hunks)packages/ui/src/components/molecules/attachment/useAttachment.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentAdmin.tsx
- packages/ui/src/components/molecules/attachment/useAttachment.ts
🔇 Additional comments (7)
packages/ui/src/components/molecules/attachment/attachmentThumbnail/attachmentThumbnail.tsx (3)
12-12: Good improvement for component reusability.Exporting the interface makes it accessible outside this module, which facilitates its use in the new Storybook file.
41-41: Improved styling consistency.Replacing the hard-coded color value
bg-[#26262666]with the utility classbg-cardenhances theme consistency across components and improves maintainability.
158-160: LGTM!The multi-line formatting of the Typography component improves code readability while maintaining the same functionality.
packages/ui/src/components/molecules/attachment/attachmentAdmin/attachmentItem/attachmentItem.tsx (2)
37-37: Button styling improvement.Adding
min-w-autoto the className ensures the button maintains appropriate sizing, improving UI consistency.
54-57: Simplified file name display structure.The markup for displaying the file name has been simplified by using a single Typography component instead of multiple nested spans, improving readability and maintainability while preserving the truncation behavior.
apps/storybook/src/stories/Attachment.stories.tsx (2)
1-43: Good Storybook configuration.The meta configuration is well-structured with appropriate controls for all component props and sensible default values.
44-109: Well-structured component stories.All three stories (Dashboard, Landing, and Thumbnail) are properly implemented with:
- Appropriate props
- ApiProvider wrapper
- Consistent onChange handlers
This provides a good foundation for interactive testing of the components.
Summary by CodeRabbit
New Features
Style