BA-1853: Add Missing MDX Doc Files for BaseApp Frontend Packages - Group 3

packages/components/modules/__shared__/SocialInput/__storybook__/SocialInput.mdx

@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Shared/SocialInput" />
+
+# Component Documentation
+
+## SocialInput
+
+- **Purpose**: A flexible form input component used for creating or replying to messages, comments, or other text-based inputs. Integrates with react-hook-form for form handling and validation.
+- **Expected Behavior**: Provides a text input field with optional reply functionality, submit actions, and social upsert actions. Handles form submission via Enter key (without Shift) and validates input before enabling submission.
+
+## Use Cases
+
+- **Current Usage**: Used in messaging interfaces, comment sections, and other social interaction features requiring text input with validation.
+- **Potential Usage**: Could be used in chat applications, feedback forms, or any interface requiring rich text input with customizable actions.
+
+## Props
+
+- **isLoading** (boolean): Loading state that disables submit button.
+- **isReply** (boolean, optional): Whether the input is for a reply. Defaults to false.
+- **replyTargetName** (string, optional): Name of the entity being replied to.
+- **placeholder** (string, optional): Input field placeholder text. Defaults to "Message...".
+- **autoFocusInput** (boolean, optional): Whether to automatically focus the input field.
+- **SocialTextField** (Component, optional): Custom text field component. Defaults to DefaultSocialTextField.
+- **SocialTextFieldProps** (object, optional): Additional props passed to SocialTextField.
+- **SocialUpsertActions** (Component, optional): Custom actions component. Defaults to DefaultSocialUpsertActions.
+- **SubmitActions** (Component, optional): Custom submit actions component. Defaults to DefaultSubmitActions.
+- **SubmitActionsProps** (object, optional): Additional props passed to SubmitActions.
+- **formId** (string, optional): Form identifier. Defaults to 'text-field-form'.
+- **submit** (function): Form submission handler.
+- **onCancelReply** (function, optional): Handler for canceling a reply.
+- **form** (UseFormReturn): react-hook-form form instance.
+
+## Notes
+
+- **Related Components**:
+  - SocialTextField - Handles the main input functionality
+  - SocialUpsertActions - Provides additional input actions
+  - SubmitActions - Handles submission controls
+
+## Example Usage
+
+```javascript
+import { SocialInput } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const useForm = () => ({
+    register: () => ({}),
+    handleSubmit: () => ({}),
+    formState: { errors: {} },
+  })
+
+  return (
+    <SocialInput
+      isLoading={false}
+      isReply={false}
+      replyTargetName={''}
+      placeholder={'Message...'}
+      autoFocusInput={false}
+      SocialTextFieldProps={{}}
+      SubmitActionsProps={{}}
+      formId={'text-field-form'}
+      submit={() => {}}
+      onCancelReply={() => {}}
+      form={useForm()}
+    />
+  )
+}
+export default MyComponent
+```

packages/components/modules/__shared__/SocialUpsertActions/__storybook__/SocialUpsertActions.mdx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Shared/SocialUpsertActions" />
+
+# Component Documentation
+
+## SocialUpsertActions
+
+- **Purpose**: A component that provides additional action buttons for social interactions, such as attachments and mentions, typically used within input fields or message composers.
+- **Expected Behavior**: Renders a horizontal grid of icon buttons for different social actions. Currently displays disabled attachment and mention buttons.
+
+## Use Cases
+
+- **Current Usage**: Used within the SocialInput component to provide additional interaction options for message composition.
+- **Potential Usage**: Could be extended to support file uploads, emoji selectors, or other social media-style interaction features in messaging or comment interfaces.
+
+## Props
+
+Currently, this component does not accept any props as it renders a fixed set of disabled buttons. Future implementations may include:
+
+- **onAttachmentClick** (function): Handler for attachment button clicks
+- **onMentionClick** (function): Handler for mention button clicks
+- **disabled** (boolean): To control the disabled state of buttons
+
+## Notes
+
+- **Related Components**:
+  - SocialInput - Parent component that typically implements this component
+  - IconButton - Used for the action buttons
+  - AttachmentIcon - Icon for file attachments
+  - MentionIcon - Icon for user mentions
+
+## Example Usage
+
+```javascript
+import { SocialUpsertActions } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return <SocialUpsertActions />
+}
+export default MyComponent
+```

packages/components/modules/__shared__/Timestamp/__storybook__/Timestamp.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Shared/Timestamp" />
+
+# Component Documentation
+
+## Timestamp
+
+- **Purpose**: A component that displays formatted time information from an ISO date string, commonly used to show timestamps in a consistent format throughout the application.
+- **Expected Behavior**: Takes an ISO date string as input and renders it in a standardized time format using the Typography component. The time is displayed in a subtle, secondary text color.
+
+## Use Cases
+
+- **Current Usage**: Used in message groups to display message timestamps and in other areas where time information needs to be displayed consistently.
+- **Potential Usage**: Could be used in any context where formatted time display is needed, such as activity logs, notification timestamps, or event schedules.
+
+## Props
+
+- **date** (string): An ISO format date string that will be converted and displayed. Example: "2024-07-17T11:42:55.508653+00:00"
+
+## 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
+
+## 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
+```

packages/components/modules/comments/CommentCreate/__storybook__/CommentCreate.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Comments/CommentCreate" />
+
+# Component Documentation
+
+## CommentCreate
+
+- **Purpose**: A form component that allows users to create new comments within the application. It provides a text area interface for composing comments.
+- **Expected Behavior**: The component renders a text input area where users can type their comment. Upon submission, it validates the content and triggers the provided callback function with the comment data
+
+## Use Cases
+
+- **Current Usage**: Used in discussion threads, article responses, and feedback sections where users need to add comments.
+- **Potential Usage**: Could be adapted for other text input scenarios like:
+  - Quick note creation
+  - Message composition
+  - Feedback forms
+
+## Props
+
+- **TargetObjectId** (string): The ID of the object that the comment is being created for.
+- **autoFocusInput** (boolean): If true, the input field will be focused when the component is mounted. Optional, defaults to false.
+- **SocialInput** (Component): Form Input Component
+- **SocialInputProps** (object): Additional props to pass to SocialInput components
+
+## Notes
+
+- **Related Components**:
+  - CommentList: Displays a list of existing comments
+  - CommentItem: Renders individual comment entries
+  - RichTextEditor: The base editor component used for comment input
+
+## Example Usage
+
+```javascript
+import { CommentCreate } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const handleSubmit = (comment) => {
+    console.log('Comment submitted:', comment)
+  }
+  return <CommentCreate onSubmit={handleSubmit} targetObjectId="123" autoFocusInput={true} />
+}
+export default MyComponent
+```

packages/components/modules/comments/CommentItem/__storybook__/CommentItem.mdx

@@ -0,0 +1,84 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Comments/CommentItem" />
+
+# Component Documentation
+
+## CommentItem
+
+- **Purpose**: A component that renders an individual comment with user information, content, reactions, and reply functionality. It handles both top-level comments and nested replies.
+- **Expected Behavior**: Displays comment content with the author's avatar and name, allows editing and deleting (if permitted), supports reactions and replies, and can expand/collapse nested replies.
+
+## Use Cases
+
+- **Current Usage**: Used within comment threads and discussion sections to display individual comments and their replies.
+- **Potential Usage**: Could be adapted for review systems, feedback forms, or any nested discussion interface.
+
+## Props
+
+- **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.
+
+## Notes
+
+- **Related Components**:
+  - CommentUpdate
+  - CommentsReplies
+  - CommentReplyButton
+  - CommentPinnedBadge
+  - CommentReactionButton
+  - ActionsOverlay
+  - AvatarWithPlaceholder
+
+## Example Usage
+
+```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
+```

packages/components/modules/comments/CommentUpdate/__storybook__/CommentUpdate.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Comments/CommentUpdate" />
+
+# Component Documentation
+
+## CommentUpdate
+
+- **Purpose**: A component that enables users to edit and update existing comments within the application.
+- **Expected Behavior**: When triggered, displays an editable text area with the current comment content. Users can modify the text and submit changes. The component handles validation and submission of the updated comment.
+
+## Use Cases
+
+- **Current Usage**: Used in comment threads and discussion sections where users need to edit their previously posted comments.
+- **Potential Usage**: Could be adapted for inline editing of other text content, such as notes, descriptions, or user-generated content.
+
+## Props
+
+- **comment** (object): The comment object containing the comment data structure.
+- **onCancel** (function): Callback function triggered when update is cancelled
+- **SocialInput** (Component): Form Input Component
+- **SocialInputProps** (object): Additional props to pass to SocialInput components
+
+## Notes
+
+- **Related Components**:
+  - CommentCreate - For creating new comments
+  - CommentList - For displaying comments
+  - CommentDelete - For removing comments
+
+## Example Usage
+
+```javascript
+import { CommentUpdate } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const comment = {
+    id: '123',
+    body: 'This is a comment',
+  }
+  const handleCancel = () => {
+    console.log('Comment update cancelled')
+  }
+  return <CommentUpdate comment={comment} onCancel={handleCancel} />
+}
+export default MyComponent
+```

packages/components/modules/comments/Comments/__storybook__/Comments.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Comments/Comments" />
+
+# Component Documentation
+
+## Comments
+
+- **Purpose**: The Comments component provides a structured interface for displaying and managing user comments within the application. It handles the rendering, creation, editing and deletion of comments in a threaded discussion format.
+- **Expected Behavior**: The component displays comments in a hierarchical thread structure, allows users to post new comments, reply to existing ones, edit their own comments, and delete them when permitted.
+
+## Use Cases
+
+- **Current Usage**: Currently used in discussion threads, article feedback sections, and collaborative workspaces where users need to exchange thoughts and feedback.
+- **Potential Usage**: Could be integrated into:
+  - Document review systems
+  - Project management tools for task discussions
+  - Social features requiring user interaction
+  - Feedback collection systems
+
+## Props
+
+- **subscriptionsEnabled** (boolean): Enables/disables real-time comment updates
+- **target** (Reference): Reference object for the comment thread target
+- **CommentsList** (Component): Component for rendering the list of comments.
+- **CommentsListProps** (object): Additional props to pass to CommentsList components
+- **CommentCreate** (Component): Component for creating new comments.
+- **CommentCreateProps** (object): Additional props to pass to CommentCreate components
+- **onCommentCreateFocus** (Function): Callback function triggered when a new comment is added. Required.
+
+## Notes
+
+- **Related Components**:
+  - CommentInput: Used for creating new comments
+  - CommentCard: Individual comment display
+  - UserAvatar: Displays user information in comments
+  - LoadingSpinner: Shows loading states
+
+## Example Usage
+
+```javascript
+import { Comments } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const targetRef = useRef(null)
+  const handleCommentCreateFocus = () => {
+    console.log('Comment create focused')
+  }
+  return (
+    <Comments
+      target={targetRef}
+      subscriptionsEnabled={true}
+      onCommentCreateFocus={handleCommentCreateFocus}
+    />
+  )
+}
+export default MyComponent
+```