BA-1853: Add Missing MDX Doc Files for BaseApp Frontend Packages - Group 3 #169
Conversation
joaosoutto
requested review from
anicioalexandre,
deboracosilveira,
ficast and
priscilladeroode
|
deboracosilveira
left a comment
deboracosilveira
left a comment
There was a problem hiding this comment.
plase update the title of all mdx. They all include "@baseapp-frontend-template" which is wrong, since we are talking about the packages. Besides that, the idea is that document pages live close to the referring component, like on the image.
To do so, use the same name of the stories, eg @baseapp-frontend | designSystem/Avatars/AvatarWithPlaceholder
WalkthroughThis pull request introduces comprehensive Storybook documentation for multiple components across different modules, including Comments, Messages, Notifications, and Shared components. The documentation provides detailed insights into each component's purpose, props, use cases, and example implementations. While the Notifications module's previous documentation was removed, new, more structured documentation has been added for individual notification-related components. Changes
Possibly related PRs
Suggested reviewers
Poem
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: 2
🧹 Nitpick comments (10)
packages/components/modules/messages/__storybook__/MessagesModule.mdx (2)
23-26: Enhance props documentation with type information and validation rules.Consider adding:
- Type information for each prop (e.g.,
React.ComponentType<SocialInputProps>for theSocialInputprop)- Validation rules or constraints where applicable
- Default values for optional props
38-45: Enhance example usage with error handling and realistic props.The current example is basic. Consider expanding it to demonstrate:
- Error handling for failed submissions
- Loading states
- Custom input component usage
- Form validation
const MyComponent = () => { + const [isLoading, setIsLoading] = useState(false) + const handleError = (error) => { + console.error('Failed to send message:', error) + } return ( - <SendMessage roomId="123" /> + <SendMessage + roomId="123" + isLoading={isLoading} + onError={handleError} + SocialInputProps={{ + placeholder: "Type your message...", + autoFocusInput: true + }} + /> ) }packages/components/modules/__shared__/__storybook__/SharedModule.mdx (3)
47-74: Enhance SocialInput example with proper form handling.The current example uses a simplified form implementation. Consider showing a more realistic example with proper form handling:
const MyComponent = () => { - const useForm = () => ({ - register: () => ({}), - handleSubmit: () => ({}), - formState: { errors: {} }, - }) + const { + register, + handleSubmit, + formState: { errors } + } = useForm({ + defaultValues: { + message: '' + }, + mode: 'onChange' + }) + + const onSubmit = async (data) => { + try { + await submitMessage(data) + } catch (error) { + console.error('Failed to submit:', error) + } + } return ( <SocialInput isLoading={false} - isReply={false} + isReply={true} + replyTargetName="John Doe" placeholder={'Message...'} autoFocusInput={false} - SocialTextFieldProps={{}} + SocialTextFieldProps={{ + maxLength: 1000, + multiline: true + }} SubmitActionsProps={{}} formId={'text-field-form'} - submit={() => {}} + submit={handleSubmit(onSubmit)} onCancelReply={() => {}} - form={useForm()} + form={{ register, handleSubmit, formState: { errors } }} /> ) }
80-91: Add timezone handling information to Timestamp documentation.The documentation should mention:
- How the component handles different timezones
- Available date format options
- Localization support
113-128: Clarify current limitations of SocialUpsertActions.Currently, the documentation lists future props that aren't implemented. Consider:
- Clearly marking which features are currently available vs. planned
- Adding a "Limitations" section
- Removing or clearly marking unimplemented props as "Future Implementation"
🧰 Tools
🪛 LanguageTool
[uncategorized] ~114-~114: A comma may be missing after the conjunctive/linking adverb ‘Currently’.
Context: ...n buttons for different social actions. Currently displays disabled attachment and mentio...(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
[uncategorized] ~123-~123: Possible missing comma found.
Context: ...tly, this component does not accept any props as it renders a fixed set of disabled b...(AI_HYDRA_LEO_MISSING_COMMA)
packages/components/modules/comments/__storybook__/CommentsModule.mdx (2)
70-72: Add pagination and performance considerations.The CommentsList documentation should include information about:
- How pagination is implemented
- Performance considerations for large lists
- Caching strategies
- Optimistic updates
157-192: Enhance example with TypeScript types.The example code could benefit from proper TypeScript types for better type safety and documentation:
import { CommentItem } from '@baseapp-frontend/design-system' + +interface Comment { + id: string + body: string +} + +interface Target { + id: string + name: string +} + +interface ActionOverlayProps { + onDelete: () => void +} + +interface CommentUpdateProps { + onCancel: () => void +} const MyComponent = () => { - const comment = { + const comment: Comment = { id: '123', body: 'This is a comment', } - const target = { + const target: Target = { id: '456', name: 'Target Object', }packages/components/modules/notifications/__storybook__/NotificationsModule.mdx (3)
94-99: Enhance prop type documentationThe props documentation would be more helpful with specific type information and default values.
Consider updating the props documentation to include more specific types:
- **setIsDrawerOpened** (function): Callback to control the drawer's open state + **setIsDrawerOpened** ((isOpen: boolean) => void): Callback to control the drawer's open state - **EmptyState** (component): Custom component to show when there are no notifications + **EmptyState** (React.ComponentType): Custom component to show when there are no notifications - **LoadingState** (component): Custom loading component + **LoadingState** (React.ComponentType): Custom loading component - **NotificationItem** (component): Custom notification item component + **NotificationItem** (React.ComponentType<NotificationItemProps>): Custom notification item component
164-169: Improve example notification object structureThe example notification object should better reflect the actual NotificationItemFragment type structure.
Consider updating the example to show a more realistic notification structure:
const notification = { id: '123', - title: 'Notification Title', - body: 'Notification Body', + verb: 'COMMENT_CREATED', + actor: { + id: '456', + fullName: 'John Doe', + avatar: { + url: 'https://example.com/avatar.jpg' + } + }, + target: { + id: '789', + type: 'POST' + }, read: false, + createdAt: '2025-01-15T12:00:00Z' }
Line range hint
250-268: Consider adding TypeScript typesThe example would be more robust with proper TypeScript type definitions.
Consider updating the example to include TypeScript types:
import Notification from './Notification' + import { NotificationProps } from './types' - const NewNotificationVerb = ({ notification }) => ( + const NewNotificationVerb: React.FC<{ notification: NotificationProps }> = ({ notification }) => ( <Notification.Root> <Notification.Avatar actorAvatar={notification.actor?.avatar?.url} actorName={notification.actor?.fullName} /> <Notification.Content> <Notification.Content.Header message={`New custom message: ${notification.customField}`} timestamp={notification.timestamp} actorName={notification.actor?.fullName} unread={notification.unread} /> <Notification.Content.Body content={notification.customBody} /> </Notification.Content> </Notification.Root> )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 6c8666c and 08db095669609e9e0691527a451b8642709e3f9b.
📒 Files selected for processing (4)
packages/components/modules/__shared__/__storybook__/SharedModule.mdx(1 hunks)packages/components/modules/comments/__storybook__/CommentsModule.mdx(1 hunks)packages/components/modules/messages/__storybook__/MessagesModule.mdx(1 hunks)packages/components/modules/notifications/__storybook__/NotificationsModule.mdx(4 hunks)
🧰 Additional context used
🪛 LanguageTool
packages/components/modules/__shared__/__storybook__/SharedModule.mdx
[uncategorized] ~114-~114: A comma may be missing after the conjunctive/linking adverb ‘Currently’.
Context: ...n buttons for different social actions. Currently displays disabled attachment and mentio...
(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
[uncategorized] ~123-~123: Possible missing comma found.
Context: ...tly, this component does not accept any props as it renders a fixed set of disabled b...
(AI_HYDRA_LEO_MISSING_COMMA)
There was a problem hiding this comment.
Remove duplicate prop definition.
The CommentUpdate prop is defined twice in the CommentItem props list (lines 134 and 142). Remove the duplicate entry.
- **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate.
**CommentUpdateProps** (object): Props passed to the CommentUpdate component.
**CommentRepliesProps** (object): Props passed to the CommentsReplies component.
**CommentReactionButton** (component): Custom reaction button component. Defaults to DefaultCommentReactionButton.
**CommentReplyButton** (component): Custom reply button component. Defaults to DefaultCommentReplyButton.
**CommentPinnedBadge** (component): Custom pinned badge component. Defaults to DefaultCommentPinnedBadge.
**Timestamp** (component): Custom timestamp component. Defaults to DefaultTimestamp.
**CommentsRepliesProps** (object): Props passed to the CommentsReplies component.
- **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate.📝 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.
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | |
| - **CommentUpdateProps** (object): Props passed to the CommentUpdate component. | |
| - **CommentRepliesProps** (object): Props passed to the CommentsReplies component. | |
| - **CommentReactionButton** (component): Custom reaction button component. Defaults to DefaultCommentReactionButton. | |
| - **CommentReplyButton** (component): Custom reply button component. Defaults to DefaultCommentReplyButton. | |
| - **CommentPinnedBadge** (component): Custom pinned badge component. Defaults to DefaultCommentPinnedBadge. | |
| - **Timestamp** (component): Custom timestamp component. Defaults to DefaultTimestamp. | |
| - **CommentsRepliesProps** (object): Props passed to the CommentsReplies component. | |
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | |
| **CommentUpdateProps** (object): Props passed to the CommentUpdate component. | |
| **CommentRepliesProps** (object): Props passed to the CommentsReplies component. | |
| **CommentReactionButton** (component): Custom reaction button component. Defaults to DefaultCommentReactionButton. | |
| **CommentReplyButton** (component): Custom reply button component. Defaults to DefaultCommentReplyButton. | |
| **CommentPinnedBadge** (component): Custom pinned badge component. Defaults to DefaultCommentPinnedBadge. | |
| **Timestamp** (component): Custom timestamp component. Defaults to DefaultTimestamp. | |
| **CommentsRepliesProps** (object): Props passed to the CommentsReplies component. |
There was a problem hiding this comment.
Fix incorrect implementation in the example code
The example code contains several issues that need to be addressed:
- The custom component implementations are incorrect (they should be actual component definitions)
- There's a conflict with NotificationBellIcon import and implementation
- NotificationsList is passed as an object instead of a component
Here's the corrected implementation:
-import { Badge, Drawer, NotificationBellIcon, NotificationsList } from '@mui/material'
+import { Badge, Drawer } from '@mui/material'
+import NotificationBellIcon from './NotificationBellIcon'
+import CustomNotificationsList from './CustomNotificationsList'
const MyComponent = () => {
- const Drawer = () => <div>Drawer</div>
- const Badge = () => <div>Badge</div>
- const NotificationBellIcon = () => <NotificationBellIcon />
+ const CustomDrawer = ({ children, ...props }) => (
+ <div {...props}>{children}</div>
+ )
+ const CustomBadge = ({ children, ...props }) => (
+ <div {...props}>{children}</div>
+ )
return (
<NotificationsPopover
- Drawer={Drawer}
- Badge={Badge}
+ Drawer={CustomDrawer}
+ Badge={CustomBadge}
DrawerProps={{}}
BadgeProps={{}}
NotificationBellIcon={NotificationBellIcon}
NotificationBellIconProps={{}}
- NotificationsList={{}}
+ NotificationsList={CustomNotificationsList}
NotificationsListProps={{}}
/>
)Committable suggestion skipped: line range outside the PR's diff.
joaosoutto
force-pushed
the
BA-2021-missing-MDX-group3
branch
from
a3cce60 to
1ce3702
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (21)
packages/components/modules/notifications/NotificationsPopover/__storybook__/NotificationsPopover.mdx (4)
9-10: Enhance component overview with accessibility and mobile details.The purpose and behavior descriptions are clear, but consider adding:
- Accessibility features (e.g., ARIA labels, keyboard navigation)
- Detailed mobile behavior (e.g., touch interactions, swipe gestures)
30-33: Enhance related components section with links and interactions.Consider enhancing the related components section with:
- Links to the documentation of each related component
- Brief description of how these components interact with NotificationsPopover
35-37: Remove duplicate "Example" headings.There are duplicate headings:
- Line 35: "Example Usage"
- Line 37: "Usage Examples"
Consider removing one of them for better documentation structure.
41-139: Enhance code examples with TypeScript and error handling.Consider adding:
- TypeScript examples with proper type definitions
- Error handling examples (e.g., network errors, empty states)
- Real-world data examples with realistic notification content
Example TypeScript enhancement:
interface NotificationProps { notification: { actor?: { avatar?: { url: string; }; fullName: string; }; timestamp: string; unread: boolean; customField?: string; customBody?: string; } } const NewNotificationVerb: React.FC<NotificationProps> = ({ notification }) => ( // ... existing implementation );packages/components/modules/__shared__/SocialUpsertActions/__storybook__/SocialUpsertActions.mdx (5)
9-10: Minor grammar improvement needed.Add a comma after "Currently" for better readability.
-- **Expected Behavior**: Renders a horizontal grid of icon buttons for different social actions. Currently displays disabled attachment and mention buttons. ++ **Expected Behavior**: Renders a horizontal grid of icon buttons for different social actions. Currently, displays disabled attachment and mention buttons.🧰 Tools
🪛 LanguageTool
[uncategorized] ~10-~10: A comma may be missing after the conjunctive/linking adverb ‘Currently’.
Context: ...n buttons for different social actions. Currently displays disabled attachment and mentio...(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
14-15: Consider enhancing use case examples.While the current and potential use cases are good, consider adding specific examples of where and how the component is currently being used in the application. This would help developers better understand the component's real-world applications.
19-23: Enhance props documentation with TypeScript types.Consider adding TypeScript type definitions for the future props and structuring them in a table format for better readability.
Example structure:
### Future Props | Prop | Type | Description | |------|------|-------------| | onAttachmentClick | () => void | Handler for attachment button clicks | | onMentionClick | () => void | Handler for mention button clicks | | disabled | boolean | Controls the disabled state of buttons |
27-31: Add implementation details and dependencies.Consider enhancing the Notes section with:
- Required package dependencies and versions
- Implementation considerations or gotchas
- Links to the documentation of related components
35-41: Enhance example with realistic usage patterns.Consider expanding the example to demonstrate:
- Integration with SocialInput
- Event handler implementation
- Disabled state usage
```javascript import { SocialUpsertActions } from '@baseapp-frontend/design-system' const MyComponent = () => { + const handleAttachmentClick = () => { + // Implementation + } + + const handleMentionClick = () => { + // Implementation + } + return ( - <SocialUpsertActions /> + <SocialUpsertActions + onAttachmentClick={handleAttachmentClick} + onMentionClick={handleMentionClick} + disabled={false} + /> ) }packages/components/modules/__shared__/Timestamp/__storybook__/Timestamp.mdx (5)
1-3: Add component parameter to Meta for automatic props documentation.Consider enhancing the Meta configuration to enable automatic props table generation:
import { Meta } from '@storybook/addon-docs' +import { Timestamp } from '@baseapp-frontend/design-system' -<Meta title="@baseapp-frontend | components/Shared/Timestamp" /> +<Meta + title="@baseapp-frontend | components/Shared/Timestamp" + component={Timestamp} +/>
17-20: Enhance props documentation with additional details.Consider adding more comprehensive prop documentation:
## Props -**date** (string): An ISO format date string that will be converted and displayed. Example: "2024-07-17T11:42:55.508653+00:00" +### date +- **Type**: `string` +- **Required**: `true` +- **Description**: An ISO format date string that will be converted and displayed +- **Example**: `"2024-07-17T11:42:55.508653+00:00"` +- **Validation**: Must be a valid ISO 8601 date string
28-37: Add more comprehensive usage examples.Consider adding examples that demonstrate:
- Error handling for invalid dates
- Different date formats
- Real-world integration scenarios
## Example Usage ```javascript import { Timestamp } from '@baseapp-frontend/design-system' const MyComponent = () => { return <Timestamp date="2024-07-17T11:42:55.508653+00:00" /> } export default MyComponent+### Error Handling Example
+```javascript
+const MyComponentWithErrorHandling = () => {
- try {
- return
- } catch (error) {
- return Invalid date format
- }
+}
+```+### Common Use Cases
+```javascript
+// In a message list
+const MessageItem = ({ message }) => (
- {message.content}
+)
+
+// In a notification
+const NotificationItem = ({ notification }) => (
- {notification.message}
+)
+```--- `21-27`: **Expand notes section with additional details and links.** Consider enhancing the notes section with: - Links to related component documentation - Details about available time format options - Information about timezone handling ```diff ## Notes - **Related Components**: - - Typography - Used for consistent text styling - - Uses luxon's DateTime for date parsing and formatting - - Integrates with the application's TIME_FORMAT constants for consistent time display +- **Related Components**: + - [Typography](/docs/components-shared-typography--docs) - Used for consistent text styling + - [DateTime](https://moment.github.io/luxon/docs/class/src/datetime.js~DateTime.html) - Luxon's DateTime for date parsing + +- **Time Format Options**: + - Default format: Defined in `TIME_FORMAT.DEFAULT` + - Available formats: + - `TIME_FORMAT.SHORT`: "HH:mm" + - `TIME_FORMAT.LONG`: "HH:mm:ss" + - `TIME_FORMAT.WITH_DATE`: "MMM dd, yyyy HH:mm" + +- **Timezone Handling**: + - Displays time in user's local timezone + - Handles UTC conversion automatically
1-37: Consider adding sections for accessibility, testing, and limitations.The documentation provides a good foundation but could be enhanced with additional sections:
Accessibility
- ARIA attributes usage
- Screen reader behavior
- Keyboard navigation
Testing Guidelines
- Unit test examples
- Integration test scenarios
- Common test cases
Known Limitations
- Browser compatibility notes
- Performance considerations
- Edge cases
Would you like me to provide example content for these sections?
packages/components/modules/comments/CommentsList/__storybook__/CommentsList.mdx (2)
25-30: Enhance props documentation with specific types and default valuesThe props section would benefit from more detailed type information and default values. For example:
- What type of "Reference" is expected for
target?- What properties are available in
CommentItemPropsandVirtuosoProps?
41-52: Add TypeScript types to the example codeThe example would be more helpful with proper TypeScript type annotations, especially for the
targetRefand callback parameters.-const MyComponent = () => { +const MyComponent: React.FC = () => { - const targetRef = useRef(null) + const targetRef = useRef<HTMLDivElement>(null) const handleReplyClick = (commentId: string) => { console.log('Reply clicked for comment:', commentId) }packages/components/modules/comments/Comments/__storybook__/Comments.mdx (2)
23-29: Clarify required vs optional props and remove duplicate entryThe props section needs improvement:
- Mark which props are required vs optional
CommentCreateandCommentCreatePropsappear to be duplicates of props mentioned in the example
41-58: Enhance example with error handling and typesThe example could be improved with:
- Error handling for the callback
- TypeScript type annotations
- Documentation of the expected shape of
targetRef-const MyComponent = () => { +const MyComponent: React.FC = () => { - const targetRef = useRef(null) + const targetRef = useRef<HTMLDivElement>(null) - const handleCommentCreateFocus = () => { + const handleCommentCreateFocus = (): void => { console.log('Comment create focused') + // Add error handling here }packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/NotificationItem.mdx (3)
9-10: Add implementation details for the read/unread mutationThe documentation mentions a mutation for marking notifications as read but doesn't provide implementation details. Consider adding:
- The mutation name/import
- Example mutation code
- Any configuration required
14-15: Enhance use cases with specific examplesConsider adding more specific examples of where this component could be used, such as:
- In a social media feed for interaction notifications
- In an e-commerce app for order status updates
- In a chat application for message notifications
24-27: Add component hierarchy visualizationConsider adding a component hierarchy diagram to better illustrate the relationships between:
- NotificationsList
- NotificationItem
- NotificationItemRenderer
- NotificationsPopover
This would help developers understand the component composition better.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 08db095669609e9e0691527a451b8642709e3f9b and e0a3dd6.
📒 Files selected for processing (13)
packages/components/modules/__shared__/SocialInput/__storybook__/SocialInput.mdx(1 hunks)packages/components/modules/__shared__/SocialUpsertActions/__storybook__/SocialUpsertActions.mdx(1 hunks)packages/components/modules/__shared__/Timestamp/__storybook__/Timestamp.mdx(1 hunks)packages/components/modules/comments/CommentCreate/__storybook__/CommentCreate.mdx(1 hunks)packages/components/modules/comments/CommentItem/__storybook__/CommentItem.mdx(1 hunks)packages/components/modules/comments/CommentUpdate/__storybook__/CommentUpdate.mdx(1 hunks)packages/components/modules/comments/Comments/__storybook__/Comments.mdx(1 hunks)packages/components/modules/comments/CommentsList/__storybook__/CommentsList.mdx(1 hunks)packages/components/modules/messages/SendMessage/__storybook__/MessagesModule.mdx(1 hunks)packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/NotificationItem.mdx(1 hunks)packages/components/modules/notifications/NotificationsList/__storybook__/NotificationsList.mdx(1 hunks)packages/components/modules/notifications/NotificationsPopover/__storybook__/NotificationsPopover.mdx(1 hunks)packages/components/modules/notifications/__storybook__/NotificationsModule.mdx(0 hunks)
💤 Files with no reviewable changes (1)
- packages/components/modules/notifications/storybook/NotificationsModule.mdx
✅ Files skipped from review due to trivial changes (5)
- packages/components/modules/messages/SendMessage/storybook/MessagesModule.mdx
- packages/components/modules/notifications/NotificationsList/storybook/NotificationsList.mdx
- packages/components/modules/shared/SocialInput/storybook/SocialInput.mdx
- packages/components/modules/comments/CommentCreate/storybook/CommentCreate.mdx
- packages/components/modules/comments/CommentUpdate/storybook/CommentUpdate.mdx
🧰 Additional context used
🪛 LanguageTool
packages/components/modules/__shared__/SocialUpsertActions/__storybook__/SocialUpsertActions.mdx
[uncategorized] ~10-~10: A comma may be missing after the conjunctive/linking adverb ‘Currently’.
Context: ...n buttons for different social actions. Currently displays disabled attachment and mentio...
(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Analyze (javascript)
- GitHub Check: Lint
- GitHub Check: Component Test Applications and Packages
🔇 Additional comments (3)
packages/components/modules/__shared__/SocialUpsertActions/__storybook__/SocialUpsertActions.mdx (1)
1-3: LGTM! Meta configuration is properly structured.The Meta tag is correctly imported and the title follows the established naming convention.
packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/NotificationItem.mdx (2)
1-3: Verify title structure consistency with other MDX filesThe title structure looks appropriate, but let's ensure it follows the same pattern as other MDX files in the codebase.
✅ Verification successful
Title structure follows codebase conventions ✅
The title structure
"@baseapp-frontend | components/Notifications/NotificationItem"follows the consistent pattern used across the codebase. There's only one file using a different format with forward slashes, but your implementation follows the majority convention.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check title structure consistency across MDX files # Expected: All titles should follow similar pattern # Search for Meta title patterns in MDX files rg -U 'title="[^"]*"' --type mdxLength of output: 62
Script:
#!/bin/bash # Find all MDX files and search for title patterns fd -e mdx -e stories.mdx -x rg -U 'title="[^"]*"' {}Length of output: 1266
1-50: Verify documentation against Tettra guide standardsPlease ensure this documentation follows all standards outlined in the Tettra guide mentioned in the PR objectives.
| - **Drawer** (Component, optional): Custom drawer component. Defaults to MUI Drawer. | ||
| - **DrawerProps** (object, optional): Props passed to the Drawer component. | ||
| - **Badge** (Component, optional): Custom badge component. Defaults to MUI Badge. | ||
| - **BadgeProps** (object, optional): Props passed to the Badge component. | ||
| - **NotificationBellIcon** (Component, optional): Custom notification bell icon component. | ||
| - **NotificationBellIconProps** (object, optional): Props passed to the NotificationBellIcon component. | ||
| - **NotificationsList** (Component, optional): Custom notifications list component. | ||
| - **NotificationsListProps** (object, optional): Props passed to the NotificationsList component. | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance props documentation with additional details.
Please enhance the props documentation with:
- Required/optional status for all props
- Detailed type information for object props (e.g., shape of DrawerProps, BadgeProps)
- Default values for optional props
Example format:
- **DrawerProps** (object, optional):
- Type: {
anchor?: 'left' | 'right' | 'top' | 'bottom';
open?: boolean;
// ... other properties
}
- Default: { anchor: 'right' }
- Description: Props passed to the Drawer component| ```javascript | ||
| import { CommentItem } from '@baseapp-frontend/design-system' | ||
|
|
||
| const MyComponent = () => { | ||
| const comment = { | ||
| id: '123', | ||
| body: 'This is a comment', | ||
| } | ||
| const target = { | ||
| id: '456', | ||
| name: 'Target Object', | ||
| } | ||
| return ( | ||
| <CommentItem | ||
| comment={comment} | ||
| target={target} | ||
| currentThreadDepth={0} | ||
| subscriptionsEnabled={true} | ||
| onReplyClick={() => {}} | ||
| enableDelete={false} | ||
| ActionOverlayProps={{ | ||
| onDelete: () => { | ||
| console.log('Delete clicked') | ||
| }, | ||
| }} | ||
| CommentUpdate={CommentUpdate} | ||
| CommentUpdateProps={{ | ||
| onCancel: () => { | ||
| console.log('Cancel clicked') | ||
| }, | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
| export default MyComponent | ||
| ``` No newline at end of file |
There was a problem hiding this comment.
Update example to match Relay implementation
The example code doesn't match the actual implementation which uses Relay. The comment and target objects should be Relay fragment references.
- const comment = {
- id: '123',
- body: 'This is a comment',
- }
- const target = {
- id: '456',
- name: 'Target Object',
- }
+ // The comment prop should be a Relay fragment reference
+ const comment = useFragment(
+ graphql`
+ fragment CommentItem_comment on Comment {
+ id
+ body
+ }
+ `,
+ commentRef
+ )Committable suggestion skipped: line range outside the PR's diff.
| - **comment** (CommentItem_comment$key): Relay fragment reference for the comment data. | ||
| - **target** (Object): The target object for the comment. | ||
| - **currentThreadDepth** (number): Current nesting level of the comment thread. | ||
| - **subscriptionsEnabled** (boolean): Enables real-time updates for the comment thread. | ||
| - **onReplyClick** (function): Callback triggered when reply button is clicked. | ||
| - **enableDelete** (boolean): Enables delete functionality. Defaults to false. | ||
| - **ActionOverlayProps** (object): Props for customizing the actions overlay. | ||
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | ||
| - **CommentUpdateProps** (object): Props passed to the CommentUpdate component. | ||
| - **CommentRepliesProps** (object): Props passed to the CommentsReplies component. | ||
| - **CommentReactionButton** (component): Custom reaction button component. Defaults to DefaultCommentReactionButton. | ||
| - **CommentReplyButton** (component): Custom reply button component. Defaults to DefaultCommentReplyButton. | ||
| - **CommentPinnedBadge** (component): Custom pinned badge component. Defaults to DefaultCommentPinnedBadge. | ||
| - **Timestamp** (component): Custom timestamp component. Defaults to DefaultTimestamp. | ||
| - **CommentsRepliesProps** (object): Props passed to the CommentsReplies component. | ||
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | ||
|
|
There was a problem hiding this comment.
Fix duplicate props and clarify Relay usage
There are several issues in the props section:
CommentUpdateandCommentsRepliesPropsare listed twice- The
commentprop uses Relay types (CommentItem_comment$key) but this isn't explained
Remove the duplicate entries and add explanation for Relay types:
- **CommentsRepliesProps** (object): Props passed to the CommentsReplies component.
- **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate.
+ **comment** (CommentItem_comment$key): Relay fragment reference for the comment data. This type comes from the Relay compiler and represents a reference to the comment's data in the Relay store.📝 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.
| - **comment** (CommentItem_comment$key): Relay fragment reference for the comment data. | |
| - **target** (Object): The target object for the comment. | |
| - **currentThreadDepth** (number): Current nesting level of the comment thread. | |
| - **subscriptionsEnabled** (boolean): Enables real-time updates for the comment thread. | |
| - **onReplyClick** (function): Callback triggered when reply button is clicked. | |
| - **enableDelete** (boolean): Enables delete functionality. Defaults to false. | |
| - **ActionOverlayProps** (object): Props for customizing the actions overlay. | |
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | |
| - **CommentUpdateProps** (object): Props passed to the CommentUpdate component. | |
| - **CommentRepliesProps** (object): Props passed to the CommentsReplies component. | |
| - **CommentReactionButton** (component): Custom reaction button component. Defaults to DefaultCommentReactionButton. | |
| - **CommentReplyButton** (component): Custom reply button component. Defaults to DefaultCommentReplyButton. | |
| - **CommentPinnedBadge** (component): Custom pinned badge component. Defaults to DefaultCommentPinnedBadge. | |
| - **Timestamp** (component): Custom timestamp component. Defaults to DefaultTimestamp. | |
| - **CommentsRepliesProps** (object): Props passed to the CommentsReplies component. | |
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | |
| - **comment** (CommentItem_comment$key): Relay fragment reference for the comment data. This type comes from the Relay compiler and represents a reference to the comment's data in the Relay store. | |
| - **target** (Object): The target object for the comment. | |
| - **currentThreadDepth** (number): Current nesting level of the comment thread. | |
| - **subscriptionsEnabled** (boolean): Enables real-time updates for the comment thread. | |
| - **onReplyClick** (function): Callback triggered when reply button is clicked. | |
| - **enableDelete** (boolean): Enables delete functionality. Defaults to false. | |
| - **ActionOverlayProps** (object): Props for customizing the actions overlay. | |
| - **CommentUpdate** (component): Custom comment update component. Defaults to DefaultCommentUpdate. | |
| - **CommentUpdateProps** (object): Props passed to the CommentUpdate component. | |
| - **CommentRepliesProps** (object): Props passed to the CommentsReplies component. | |
| - **CommentReactionButton** (component): Custom reaction button component. Defaults to DefaultCommentReactionButton. | |
| - **CommentReplyButton** (component): Custom reply button component. Defaults to DefaultCommentReplyButton. | |
| - **CommentPinnedBadge** (component): Custom pinned badge component. Defaults to DefaultCommentPinnedBadge. | |
| - **Timestamp** (component): Custom timestamp component. Defaults to DefaultTimestamp. |
| - **notification** (NotificationItemFragment): The notification data reference to be rendered. Contains notification content and metadata. | ||
| - **NotificationItemRenderer** (FC, optional): Custom renderer component for notification content. Defaults to DefaultNotificationItemRenderer. |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance props documentation with type definitions
Please enhance the props documentation with:
- Complete type definition for
NotificationItemFragment - Required/optional status for the
notificationprop - Default values where applicable
- Prop validation requirements
| ```javascript | ||
| import { NotificationItem } from '@baseapp-frontend/design-system' | ||
|
|
||
| const MyComponent = () => { | ||
| const notification = { | ||
| id: '123', | ||
| title: 'Notification Title', | ||
| body: 'Notification Body', | ||
| read: false, | ||
| } | ||
| const NotificationItemRenderer = () => <div>Notification Item Renderer</div> | ||
| return ( | ||
| <NotificationItem | ||
| notification={notification} | ||
| NotificationItemRenderer={NotificationItemRenderer} | ||
| /> | ||
| ) | ||
| } | ||
| export default MyComponent | ||
| ``` No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance example with real-world usage patterns
The current example is basic. Consider enhancing it with:
- Complete notification object structure matching
NotificationItemFragment - Error handling
- Loading states
- Custom renderer with actual notification content formatting
- Handling of read/unread state changes
Example enhancement:
const MyComponent = () => {
const notification = {
id: '123',
title: 'Notification Title',
body: 'Notification Body',
read: false,
+ createdAt: '2024-01-20T10:00:00Z',
+ type: 'COMMENT',
+ metadata: {
+ postId: '456',
+ commentId: '789'
+ }
}
- const NotificationItemRenderer = () => <div>Notification Item Renderer</div>
+ const NotificationItemRenderer = ({ notification, onRead }) => {
+ const handleClick = async () => {
+ try {
+ await onRead(notification.id);
+ } catch (error) {
+ console.error('Failed to mark notification as read:', error);
+ }
+ };
+
+ return (
+ <div onClick={handleClick}>
+ <h3>{notification.title}</h3>
+ <p>{notification.body}</p>
+ <span>{new Date(notification.createdAt).toLocaleString()}</span>
+ </div>
+ );
+ };
return (
<NotificationItem
notification={notification}
NotificationItemRenderer={NotificationItemRenderer}
/>
)
}📝 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.
| ```javascript | |
| import { NotificationItem } from '@baseapp-frontend/design-system' | |
| const MyComponent = () => { | |
| const notification = { | |
| id: '123', | |
| title: 'Notification Title', | |
| body: 'Notification Body', | |
| read: false, | |
| } | |
| const NotificationItemRenderer = () => <div>Notification Item Renderer</div> | |
| return ( | |
| <NotificationItem | |
| notification={notification} | |
| NotificationItemRenderer={NotificationItemRenderer} | |
| /> | |
| ) | |
| } | |
| export default MyComponent | |
| ``` | |
| import { NotificationItem } from '@baseapp-frontend/design-system' | |
| const MyComponent = () => { | |
| const notification = { | |
| id: '123', | |
| title: 'Notification Title', | |
| body: 'Notification Body', | |
| read: false, | |
| createdAt: '2024-01-20T10:00:00Z', | |
| type: 'COMMENT', | |
| metadata: { | |
| postId: '456', | |
| commentId: '789' | |
| } | |
| } | |
| const NotificationItemRenderer = ({ notification, onRead }) => { | |
| const handleClick = async () => { | |
| try { | |
| await onRead(notification.id); | |
| } catch (error) { | |
| console.error('Failed to mark notification as read:', error); | |
| } | |
| }; | |
| return ( | |
| <div onClick={handleClick}> | |
| <h3>{notification.title}</h3> | |
| <p>{notification.body}</p> | |
| <span>{new Date(notification.createdAt).toLocaleString()}</span> | |
| </div> | |
| ); | |
| }; | |
| return ( | |
| <NotificationItem | |
| notification={notification} | |
| NotificationItemRenderer={NotificationItemRenderer} | |
| /> | |
| ) | |
| } | |
| export default MyComponent |
Original Story:
Acceptance Criteria
Context:
The BaseApp Frontend Packages https://github.com/silverlogic/baseapp-frontend contains a number of pages and components that currently have Storybook stories but are missing corresponding MDX documentation files.
Create MDX Documentation Files: For each missing component or page listed below, create an .mdx file in the storybook folder within the component’s or page's directory.
Follow Documentation Standards: Use the MDX Documentation Template provided in our Tettra guide https://app.tettra.co/teams/TSL/pages/frontend-documentation-guide
Please check examples on:
https://bitbucket.org/silverlogic/baseapp-frontend-template/src/master/apps/web/components/design-system/inputs/PasswordField/__storybook__/PasswordField.mdx
https://bitbucket.org/silverlogic/baseapp-frontend-template/src/master/apps/web/app/(with-navigation)/__storybook__/HomePage.mdx
Missing MDX:
CommentsList
Comments
CommentUpdate
CommentCreate
CommentItem
NotificationsList
NotificationItem
NotificationsPopover
SocialInput
Timestamp
SocialUpsertActions
SendMessage
Current behavior
Expected behavior
Code Snippet
Approvd
https://app.approvd.io/projects/BA/stories/36742
Summary by CodeRabbit
Documentation
Chores