feat(storybook): add RoomHeader stories for slot variants and room types#39902
feat(storybook): add RoomHeader stories for slot variants and room types#39902Deepvamja wants to merge 1 commit into
Conversation
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
|
|
Caution Review failedAn error occurred during the review process. Please try again later. WalkthroughA new Storybook story file is added for the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Suggested labels
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
apps/meteor/client/views/room/Header/RoomHeader.stories.tsx (2)
30-33: Remove block comments from this TSX implementation file.Line [30], Line [36], Line [50], Line [68], and Line [91] add descriptive block comments; this repository rule asks to avoid code comments in implementation files.
As per coding guidelines, "Avoid code comments in the implementation".
Also applies to: 36-39, 50-53, 68-71, 91-93
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/views/room/Header/RoomHeader.stories.tsx` around lines 30 - 33, The file RoomHeader.stories.tsx contains multiple block comments (around the Default RoomHeader story and others) that violate the rule against comments in implementation files; remove those block comments (the multi-line /* ... */ blocks located near the Default RoomHeader story and the other comment blocks at the indicated positions) so the TSX file contains only code and concise story metadata (use story titles/args if descriptive text is needed), leaving the component exports (e.g., the story definitions for RoomHeader) unchanged.
15-21: Unify room provider by derivingroomOverridesfromcontext.args.roomin the meta decorator.The meta decorator at line 15 hardcodes
roomOverrides={mockedChannel}, andDirectMessageat line 98 adds a separate decorator withroomOverrides={mockedDM}. This creates duplicate provider setup. Usecontext.argsin the meta decorator to read the room value from story args, then remove the redundantDirectMessage.decoratorsblock.♻️ Proposed refactor
const meta = { component: RoomHeader, args: { room: mockedChannel, }, decorators: [ - (story) => ( - <FakeRoomProvider roomOverrides={mockedChannel}> - {story()} + (Story, context) => ( + <FakeRoomProvider roomOverrides={context.args.room}> + <Story /> </FakeRoomProvider> ), ], parameters: { layout: 'fullscreen', @@ export const DirectMessage: Story = { args: { room: mockedDM, }, - decorators: [ - (story) => ( - <FakeRoomProvider roomOverrides={mockedDM}> - {story()} - </FakeRoomProvider> - ), - ], };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/views/room/Header/RoomHeader.stories.tsx` around lines 15 - 21, Update the meta decorator to derive FakeRoomProvider's roomOverrides from the story args (use context.args.room) instead of the hardcoded mockedChannel, and then remove the redundant DirectMessage.decorators block that sets roomOverrides={mockedDM}; specifically modify the meta decorator that currently renders <FakeRoomProvider roomOverrides={mockedChannel}> to read room data from context.args (so FakeRoomProvider gets roomOverrides={context.args.room}) and delete the separate DirectMessage.decorators entry to unify provider setup.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/meteor/client/views/room/Header/RoomHeader.stories.tsx`:
- Around line 30-33: The file RoomHeader.stories.tsx contains multiple block
comments (around the Default RoomHeader story and others) that violate the rule
against comments in implementation files; remove those block comments (the
multi-line /* ... */ blocks located near the Default RoomHeader story and the
other comment blocks at the indicated positions) so the TSX file contains only
code and concise story metadata (use story titles/args if descriptive text is
needed), leaving the component exports (e.g., the story definitions for
RoomHeader) unchanged.
- Around line 15-21: Update the meta decorator to derive FakeRoomProvider's
roomOverrides from the story args (use context.args.room) instead of the
hardcoded mockedChannel, and then remove the redundant DirectMessage.decorators
block that sets roomOverrides={mockedDM}; specifically modify the meta decorator
that currently renders <FakeRoomProvider roomOverrides={mockedChannel}> to read
room data from context.args (so FakeRoomProvider gets
roomOverrides={context.args.room}) and delete the separate
DirectMessage.decorators entry to unify provider setup.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ee499f6d-ed6a-4914-a891-f1bd820cccbd
📒 Files selected for processing (1)
apps/meteor/client/views/room/Header/RoomHeader.stories.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
apps/meteor/client/views/room/Header/RoomHeader.stories.tsx
🔇 Additional comments (1)
apps/meteor/client/views/room/Header/RoomHeader.stories.tsx (1)
40-89: Good slot-variant story coverage.Line [40], Line [54], and Line [72] correctly exercise
toolbox.hidden,toolbox.content,toolbox.pre, andtoolbox.pos, matchingRoomHeaderslot access paths and giving useful visual baselines.
1 participant
Adds Storybook stories for the
RoomHeadercomponent to improve visualdocumentation and establish a baseline for the Room Header Buttons Ordering feature.
Currently,
RoomHeaderhas unit tests (RoomHeader.spec.tsx) but no Storybookstories. This PR fills that gap, following the exact pattern of
RoomInviteHeader.stories.tsx.Stories Added
Summary by CodeRabbit