{}}
+ 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
diff --git a/packages/components/modules/comments/CommentUpdate/__storybook__/CommentUpdate.mdx b/packages/components/modules/comments/CommentUpdate/__storybook__/CommentUpdate.mdx
new file mode 100644
index 00000000..2da44287
--- /dev/null
+++ b/packages/components/modules/comments/CommentUpdate/__storybook__/CommentUpdate.mdx
@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# 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
+}
+export default MyComponent
+```
diff --git a/packages/components/modules/comments/Comments/__storybook__/Comments.mdx b/packages/components/modules/comments/Comments/__storybook__/Comments.mdx
new file mode 100644
index 00000000..058d4496
--- /dev/null
+++ b/packages/components/modules/comments/Comments/__storybook__/Comments.mdx
@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# 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 (
+
+ )
+}
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/comments/CommentsList/__storybook__/CommentsList.mdx b/packages/components/modules/comments/CommentsList/__storybook__/CommentsList.mdx
new file mode 100644
index 00000000..fbcbc022
--- /dev/null
+++ b/packages/components/modules/comments/CommentsList/__storybook__/CommentsList.mdx
@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# Component Documentation
+
+## CommentsList
+
+- **Purpose**: A virtualized list component for displaying and managing comments, supporting infinite scroll and real-time updates through subscriptions.
+- **Expected Behavior**: Renders a scrollable list of comments with support for nested replies, lazy loading of additional comments, and real-time updates when subscriptions are enabled.
+
+## Use Cases
+
+- **Current Usage**: Used in discussion threads, feedback sections, and any area requiring threaded comments with real-time updates.
+- **Potential Usage**: Could be used in:
+ - Social media feeds
+ - Documentation systems with comments
+ - Collaborative platforms
+ - Review systems
+ - Live chat interfaces
+ - Forum applications
+
+## Props
+
+- **target** (Reference): Reference object for the comment thread target
+- **subscriptionsEnabled** (boolean): Enables/disables real-time comment updates
+- **onReplyClick** (function): Callback function triggered when reply button is clicked
+- **CommentItem** (Component): Optional custom comment item component (defaults to DefaultCommentItem)
+- **CommentItemProps** (object): Additional props to pass to CommentItem components
+- **VirtuosoProps** (object): Props to customize the underlying Virtuoso list component
+
+## Notes
+
+- **Related Components**:
+ - CommentItem: Individual comment display component
+ - CommentsSubscription: Handles real-time updates
+ - LoadingState: Displays loading status during data fetching
+
+## Example Usage
+
+```javascript
+import { CommentsList } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+ const targetRef = useRef(null)
+ const handleReplyClick = (commentId: string) => {
+ console.log('Reply clicked for comment:', commentId)
+ }
+ return
+}
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/messages/SendMessage/__storybook__/MessagesModule.mdx b/packages/components/modules/messages/SendMessage/__storybook__/MessagesModule.mdx
new file mode 100644
index 00000000..9b1e6783
--- /dev/null
+++ b/packages/components/modules/messages/SendMessage/__storybook__/MessagesModule.mdx
@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# Component Documentation
+
+## SendMessage
+
+- **Purpose**: A component that handles message sending functionality, integrating form management with GraphQL mutations for submitting messages in a chat interface.
+- **Expected Behavior**: Provides a form with input validation that submits messages to a chat room. Handles loading states, error handling, and form reset after successful submission.
+
+## Use Cases
+
+- **Current Usage**: Used in chat rooms and messaging interfaces where users need to compose and send messages.
+- **Potential Usage**: Could be adapted for comment systems, feedback forms, or any interface requiring text submission with validation and API integration.
+
+## Props
+
+- **roomId** (string): The ID of the chat room where messages will be sent.
+- **SocialInput** (component, optional): A custom input component that can replace the default SocialInput component. Defaults to DefaultSocialInput.
+- **SocialInputProps** (object, optional): Additional props to be passed to the SocialInput component. Defaults to an empty object.
+- **ref** (React.Ref): A forwarded ref for the input element.
+
+## Notes
+
+- **Related Components**:
+ - SocialInput - The default input component used for message composition
+ - useForm - React Hook Form integration for form management
+ - useSendMessageMutation - GraphQL mutation hook for message submission
+ - ConnectionHandler - Relay connection management for optimistic updates
+
+## Example Usage
+
+```javascript
+import { SendMessage } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+ return
+}
+export default MyComponent
+```
diff --git a/packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/NotificationItem.mdx b/packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/NotificationItem.mdx
new file mode 100644
index 00000000..fd4ce96b
--- /dev/null
+++ b/packages/components/modules/notifications/NotificationsList/NotificationItem/__storybook__/NotificationItem.mdx
@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# Component Documentation
+
+## NotificationItem
+
+- **Purpose**: A component that renders individual notification items within a notifications list, handling both the display and read/unread state management of notifications.
+- **Expected Behavior**: When clicked, marks unread notifications as read via a mutation. Renders notification content using a provided renderer component.
+
+## Use Cases
+
+- **Current Usage**: Used within the NotificationsList component to display individual notification items in the notifications drawer/popover.
+- **Potential Usage**: Could be used in any context where individual notifications need to be displayed with read/unread state management.
+
+## Props
+
+- **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.
+
+## Notes
+
+- **Related Components**:
+ - NotificationsList - Parent component that manages the list of notifications
+ - NotificationItemRenderer - Handles the actual rendering of notification content
+ - NotificationsPopover - Higher level component that contains the notifications drawer
+
+## Example Usage
+
+```javascript
+import { NotificationItem } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+ const notification = {
+ id: '123',
+ title: 'Notification Title',
+ body: 'Notification Body',
+ read: false,
+ }
+ const NotificationItemRenderer = () => Notification Item Renderer
+ return (
+
+ )
+}
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/notifications/NotificationsList/__storybook__/NotificationsList.mdx b/packages/components/modules/notifications/NotificationsList/__storybook__/NotificationsList.mdx
new file mode 100644
index 00000000..67e9a2f7
--- /dev/null
+++ b/packages/components/modules/notifications/NotificationsList/__storybook__/NotificationsList.mdx
@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# Component Documentation
+
+### NotificationsList
+
+- **Purpose**: A component that displays a scrollable list of notifications with virtualization support. It handles both read and unread notifications, with visual separation between them.
+- **Expected Behavior**:
+ - Displays notifications in a virtualized list for performance
+ - Shows a divider between read and unread notifications
+ - Supports infinite scrolling to load more notifications
+ - Includes a header with title and optional "Mark all as read" button
+ - Responsive design with drawer close button on mobile
+ - Shows loading states during data fetching
+ - Shows empty state when no notifications exist
+
+## Use Cases
+
+- **Current Usage**: Used in the main notifications drawer/panel of the application to display user notifications
+- **Potential Usage**:
+ - Could be adapted for displaying activity feeds
+ - Could be used in email-like interfaces
+ - Suitable for any chronological list of items requiring read/unread states
+
+## Props
+
+- **setIsDrawerOpened** (function): Callback to control the drawer's open state
+- **EmptyState** (component): Custom component to show when there are no notifications. Defaults to DefaultEmptyState
+- **LoadingState** (component): Custom loading component. Defaults to DefaultLoadingState
+- **LoadingStateProps** (object): Props to pass to the LoadingState component. Defaults to {}
+- **NotificationItem** (component): Custom notification item component. Defaults to DefaultNotificationItem
+- **NotificationItemProps** (object): Props to pass to each NotificationItem. Defaults to {}
+
+## Notes
+
+- **Related Components**:
+ - NotificationItem: Individual notification display component
+ - EmptyState: Component shown when no notifications exist
+ - MarkAllAsReadButton: Button to mark all notifications as read
+ - HeaderContainer: Styled container for the notifications header
+
+## Example Usage
+
+```javascript
+import { NotificationsList } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+ const [isDrawerOpened, setIsDrawerOpened] = useState(false)
+ const EmptyState = () => No notifications
+ const LoadingState = () => Loading...
+ const NotificationItem = () => Notification Item
+
+ return (
+
+ )
+}
+export default MyComponent
+```
\ No newline at end of file
diff --git a/packages/components/modules/notifications/NotificationsPopover/__storybook__/NotificationsPopover.mdx b/packages/components/modules/notifications/NotificationsPopover/__storybook__/NotificationsPopover.mdx
new file mode 100644
index 00000000..637d28f9
--- /dev/null
+++ b/packages/components/modules/notifications/NotificationsPopover/__storybook__/NotificationsPopover.mdx
@@ -0,0 +1,139 @@
+import { Meta } from '@storybook/addon-docs'
+
+
+
+# Component Documentation
+
+## NotificationsPopover
+
+- **Purpose**: A component that provides a notification system interface, displaying a bell icon with an unread count badge that opens a drawer containing notifications when clicked.
+- **Expected Behavior**: Shows a notification bell icon with a badge indicating unread notifications count. When clicked, opens a drawer (from right on desktop, bottom on mobile) containing a scrollable list of notifications. The drawer can be closed via an X button or clicking outside.
+
+## Use Cases
+
+- **Current Usage**: Used in the main application header/navigation to provide users access to their notifications.
+- **Potential Usage**: Could be used in any context where a notification system needs to be implemented, such as admin panels, social platforms, or communication tools.
+
+## Props
+
+- **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.
+
+## Notes
+
+- **Related Components**:
+ - NotificationsList - Renders the list of notifications in the drawer
+ - NotificationItem - Individual notification items within the list
+ - NotificationBellIcon - The bell icon component
+
+## Example Usage
+
+## Usage Examples
+
+### **NotificationsPopover with Default Components**
+
+```javascript
+import { NotificationsPopover } from './NotificationsPopover'
+
+const Example = () =>
+
+export default Example
+```
+
+### Adding a New Notification Type:
+
+To add a new notification renderer:
+
+1. Create a new component for the notification type (e.g., `NewNotificationVerb`).
+ When building `NewNotificationVerb`, you can use the existing `Notification` components for structure:
+
+ ```javascript
+ import Notification from './Notification'
+
+ const NewNotificationVerb = ({ notification }) => (
+
+
+
+
+
+
+
+ )
+ export default NewNotificationVerb
+ ```
+
+2. Create a custom `NotificationItemRenderer` in your project:
+
+ ```javascript
+ import NewNotificationVerb from './NewNotificationVerb'
+
+ const NotificationItemRenderer = ({ notification }) => {
+ switch (notification.verb) {
+ case NOTIFICATION_VERB.customType:
+ return
+ // other cases
+ default:
+ return null
+ }
+ }
+ ```
+
+3. Pass the custom renderer through `NotificationsPopover`:
+ ```javascript
+
+ ```
+
+### **Custom Badge and Drawer**
+
+```javascript
+import CustomBadge from './CustomBadge'
+import CustomDrawer from './CustomDrawer'
+import { NotificationsPopover } from './NotificationsPopover'
+
+const Example = () => (
+
+)
+
+export default Example
+```
+
+### **Custom NotificationList**
+
+```javascript
+import CustomNotificationsList from './CustomNotificationsList'
+import { NotificationsPopover } from './NotificationsPopover'
+
+const Example = () => (
+
+)
+
+export default Example
+```
\ No newline at end of file
diff --git a/packages/components/modules/notifications/__storybook__/NotificationsModule.mdx b/packages/components/modules/notifications/__storybook__/NotificationsModule.mdx
deleted file mode 100644
index e7744af3..00000000
--- a/packages/components/modules/notifications/__storybook__/NotificationsModule.mdx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-
-
-# Notifications Documentation
-
-## Notifications System
-
-The Notifications system is a modular solution for displaying and interacting with notifications. It includes components to handle lists, individual items, and specific notification types, ensuring consistency and scalability across the application.
-
----
-
-## Components
-
-### **NotificationsPopover**
-
-- **Purpose:** Acts as the parent component for the notifications system, managing the triggering, rendering, and behavior of the notification drawer.
-- **Expected Behavior:**
- - Renders a notification bell icon that displays the count of unread notifications.
- - Opens a drawer containing the notification list when clicked.
- - Supports responsiveness, adjusting the drawer's position based on screen size.
-
-#### Props:
-| Prop Name | Type | Description |
-|------------------------|--------------------|--------------------------------------------|
-| `Drawer` | `Component` | Custom drawer component. |
-| `DrawerProps` | `Object` | Additional props for the drawer. |
-| `Badge` | `Component` | Custom badge component for the notification count. |
-| `BadgeProps` | `Object` | Additional props for the badge. |
-| `NotificationBellIcon` | `Component` | Custom bell icon component. |
-| `NotificationBellIconProps` | `Object` | Additional props for the bell icon. |
-| `NotificationsList` | `Component` | Custom list component to render notifications. |
-| `NotificationsListProps` | `Object` | Additional props for the notification list. |
-
----
-
-### **NotificationList**
-
-- **Purpose:** Displays a list of notifications with support for virtualization, pagination, and real-time updates via subscriptions.
-- **Expected Behavior:**
- - Renders all notifications passed to it.
- - Supports states such as loading, empty, and paginated.
- - Ensures data freshness with subscription updates.
-
-#### Props:
-| Prop Name | Type | Description |
-|--------------------|--------------|------------------------------------------------|
-| `setIsDrawerOpened` | `(boolean) => void` | Function to toggle the notification drawer state. |
-| `EmptyState` | `Component` | Custom component for the empty state. |
-| `LoadingState` | `Component` | Custom component for the loading state. |
-| `NotificationItem` | `Component` | Custom component for rendering individual items. |
-
----
-
-### **NotificationItem**
-
-- **Purpose:** Represents a single notification and handles interactions such as marking as read.
-- **Expected Behavior:**
- - Marks notifications as read when clicked.
- - Accepts custom rendering logic for notification content.
-
-#### Props:
-| Prop Name | Type | Description |
-|------------------------|--------------------|--------------------------------------------|
-| `notification` | `Fragment` | GraphQL fragment representing a notification. |
-| `NotificationItemRenderer` | `Component` | Custom renderer for the notification. |
-
----
-
-### **Notification**
-
-A compositional component used internally for structuring notifications. Includes:
-- **Root:** Wrapper for the notification structure.
-- **Avatar:** Displays the actor's avatar.
-- **Content:** Handles the layout for the header and body.
-
-#### Props for Notification.Avatar:
-| Prop Name | Type | Description |
-|--------------|------------|--------------------------------------|
-| `actorAvatar`| `string` | URL of the actor's avatar. |
-| `actorName` | `string` | Name of the actor for accessibility. |
-
----
-
-### **NotificationItemRenderer**
-
-- **Purpose:** Dynamically routes notifications to the appropriate renderer based on the verb.
-- **Expected Behavior:**
- - Handles different notification types such as comments, replies, and reactions.
- - Returns `null` for unsupported types.
-
-#### Props:
-| Prop Name | Type | Description |
-|------------------------|--------------------|--------------------------------------------|
-| `notification` | `Fragment` | GraphQL fragment representing a notification. |
-
----
-
-### **CommentCreated, CommentReply, ReactionCreated**
-
-Renderers for specific notification types:
-- **CommentCreated:** Displays a notification when a comment is added.
-- **CommentReply:** Displays a notification when a reply to a comment is added.
-- **ReactionCreated:** Displays a notification when a reaction is added.
-
-#### Shared Props:
-| Prop Name | Type | Description |
-|------------------------|--------------------|--------------------------------------------|
-| `notification` | `Fragment` | GraphQL fragment representing a notification. |
-
----
-
-## Usage Examples
-
-### **NotificationsPopover with Default Components**
-```javascript
-import { NotificationsPopover } from './NotificationsPopover';
-
-const Example = () => (
-
-);
-
-export default Example;
-```
-
-### Adding a New Notification Type:
-To add a new notification renderer:
-1. Create a new component for the notification type (e.g., `NewNotificationVerb`).
- When building `NewNotificationVerb`, you can use the existing `Notification` components for structure:
- ```javascript
- import Notification from './Notification';
-
- const NewNotificationVerb = ({ notification }) => (
-
-
-
-
-
-
-
- );
- export default NewNotificationVerb;
- ```
-2. Create a custom `NotificationItemRenderer` in your project:
- ```javascript
- import NewNotificationVerb from './NewNotificationVerb';
-
- const NotificationItemRenderer = ({ notification }) => {
- switch (notification.verb) {
- case NOTIFICATION_VERB.customType:
- return ;
- // other cases
- default:
- return null;
- }
- };
- ```
-3. Pass the custom renderer through `NotificationsPopover`:
- ```javascript
-
- ```
-
-### **Custom Badge and Drawer**
-```javascript
-import { NotificationsPopover } from './NotificationsPopover';
-import CustomBadge from './CustomBadge';
-import CustomDrawer from './CustomDrawer';
-
-const Example = () => (
-
-);
-
-export default Example;
-```
-
-### **Custom NotificationList**
-```javascript
-import { NotificationsPopover } from './NotificationsPopover';
-import CustomNotificationsList from './CustomNotificationsList';
-
-const Example = () => (
-
-);
-
-export default Example;
-```