BA-2387: activity log storybook

packages/components/modules/activity-log/web/ActivityLogComponent/LogGroups/__storybook__/LogGroups.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/ActivityLog/LogGroups" />
+
+# Component Documentation
+
+## LogGroups
+
+- **Purpose**: A component that renders multiple log items, allowing to group them for better visualization.
+- **Expected Behavior**: Displays array of log groups. A group is intended to group activities happening in close times, instead of just display each one (similar to how Slack does it).
+
+## Use Cases
+
+- **Current Usage**: Used within activity log to group activities.
+
+## Props
+
+- **logGroups** (LogGroup[]): List of relay fragment reference for log items.
+- **LoadingState** (FC): Component to replace default loading component.
+- **LoadingStateProps** (any): Extra props to be passed to LoadingState.
+- **VirtuosoProps** (Partial\<VirtuosoProps\<any, any\>\>): Extra props to be passed to Virtuoso.
+- **loadNext** (LoadMoreFn\<OperationType\>): Function to load more logGroups.
+- **hasNext** (boolean): Information to know if there are more logGroups to load.
+- **isLoadingNext** (boolean): Information to know if it is currently loading more logGroups.
+
+## Notes
+
+- **Related Components**:
+  - ActivityLog
+  - LogItem
+
+## Example Usage
+
+```javascript
+import { LogGroups, useActivityLogs } from '@baseapp-frontend/components/activity-log/web'
+
+const MyComponent = ({
+  queryRef,
+  LogGroupsProps,
+}) => {
+  const { logGroups, loadNext, hasNext, isLoadingNext } = useActivityLogs(queryRef)
+  return (
+    <LogGroups
+      logGroups={logGroups}
+      loadNext={loadNext}
+      hasNext={hasNext}
+      isLoadingNext={isLoadingNext}
+      {...LogGroupsProps}
+    />
+  )
+}
+export default ActivityLogComponent
+```

packages/components/modules/activity-log/web/ActivityLogComponent/LogGroups/__storybook__/stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import LogGroups from '..'
+
+const meta: Meta<typeof LogGroups> = {
+  title: '@baseapp-frontend | components/ActivityLog/LogGroups',
+  component: LogGroups,
+}
+
+export default meta
+
+type Story = StoryObj<typeof LogGroups>
+
+export const DefaultLogItem: Story = {
+  name: 'Default LogGroups',
+  args: {
+    logGroups: [
+      {
+        lastActivityTimestamp: '2025-03-25T10:00:00Z',
+        logs: [
+          {
+            id: 'log-1',
+            createdAt: '2025-03-25T09:59:59Z',
+            verb: 'comments.add_comment',
+            url: '/some/url',
+            events: {
+              edges: [
+                {
+                  node: {
+                    diff: '',
+                    label: 'Title',
+                  },
+                },
+              ],
+            },
+            user: {
+              id: 'user-1',
+              fullName: 'Alice Doe',
+              email: 'alice@example.com',
+              avatar: {
+                url: 'https://placehold.co/48x48',
+              },
+            },
+          },
+          {
+            id: 'log-2',
+            createdAt: '2025-03-25T09:58:00Z',
+            verb: 'comments.pin_comment',
+            url: '/other/url',
+            events: {
+              edges: [],
+            },
+            user: {
+              id: 'user-2',
+              fullName: 'Bob Smith',
+              email: 'bob@example.com',
+              avatar: {
+                url: 'https://placehold.co/48x48?text=Bob',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+}

packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/__storybook__/LogItem.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/ActivityLog/LogItem" />
+
+# Component Documentation
+
+## LogItem
+
+- **Purpose**: A component that renders an individual log item for the activity log.
+- **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.
+- **Expected Behavior**: Displays single log based on the verb passed to it.
+
+## Use Cases
+
+- **Current Usage**: Used within activity log list.
+
+## Props
+
+- **log** (ActivityLogNode): Relay node reference for the log data.
+- **sx** (SxProps): Optional Material-UI system props for additional styling.
+
+## Notes
+
+- **Related Components**:
+  - ActivityLog
+  - LogGroup
+
+## Example Usage
+
+```javascript
+import { LogItem } from '@baseapp-frontend/components/activity-log/web'
+
+const MyComponent = (log: ActivityLogNode, isLast: Boolean) => {
+  return (
+    <LogItem
+      key={log.id}
+      sx={isLast ? { marginBottom: '6px' } : undefined}
+      log={log}
+    />
+  )
+}
+export default MyComponent
+```

packages/components/modules/activity-log/web/ActivityLogComponent/LogItem/__storybook__/stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import LogItem from '..'
+
+const meta: Meta<typeof LogItem> = {
+  title: '@baseapp-frontend | components/ActivityLog/LogItem',
+  component: LogItem,
+}
+
+export default meta
+
+type Story = StoryObj<typeof LogItem>
+
+export const DefaultLogItem: Story = {
+  name: 'Default LogItem',
+  args: {
+    log: {
+      id: '123',
+      verb: 'comments.add_comment',
+      createdAt: '2025-03-26T12:00:00Z',
+      url: 'https://example.com',
+      events: {
+        edges: [
+          {
+            node: {
+              diff: '',
+              label: 'mock label',
+            },
+          },
+        ],
+      },
+      user: {
+        id: 'user-1',
+        fullName: 'Mock User',
+        email: 'mock@tsl.io',
+        avatar: {
+          url: 'https://placehold.co/48x48',
+        },
+      },
+    },
+  },
+}

packages/components/modules/activity-log/web/ActivityLogComponent/__storybook__/ActivityLog.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/ActivityLog/ActivityLog" />
+
+# Component Documentation
+
+## ActivityLog
+
+- **Purpose**: A component that renders the activity log groups allowing the user to search by user and filter by periods.
+- **Expected Behavior**: Displays an Activity Log title, search by user, filter by period and list of activity log groups.
+
+## Use Cases
+
+- **Current Usage**: Used as main component for Activity Logs.
+
+## Props
+
+- **queryRef** (ActivityLogsPaginationQuery$data): Relay pagination query reference for the activity logs.
+- **LogGroups** (FC\<LogGroupsProps\>): Optional field to replace default activity logs retrieved by the component.
+- **LogGroupsProps** (Partial\<LogGroupsProps\>): Optional field to add extra props to LogGroups.
+
+## Notes
+
+- **Related Components**:
+  - LogItem
+  - LogGroups
+
+## Example Usage
+
+```javascript
+import { ActivityLogComponent } from '@baseapp-frontend/components/activity-log/web'
+
+const MyComponent = () => {
+  const data = usePreloadedQuery(ActivityLogsQuery, queryRef)
+  return <ActivityLogComponent queryRef={data} />
+}
+```

packages/components/modules/activity-log/web/ActivityLogComponent/__storybook__/ActivityLogWithQuery.tsx

@@ -0,0 +1,18 @@
+import { graphql, useLazyLoadQuery } from 'react-relay'
+
+import ActivityLog from '..'
+import { ActivityLogsPaginationQuery } from '../../../../../__generated__/ActivityLogsPaginationQuery.graphql'
+import { ActivityLogComponentProps } from '../types'
+
+const ActivityLogWithQuery = (props: ActivityLogComponentProps) => {
+  const query = graphql`
+    query ActivityLogWithQuery @relay_test_operation {
+      ...ActivityLogsFragment
+    }
+  `
+  const data = useLazyLoadQuery<ActivityLogsPaginationQuery>(query, {})
+
+  return <ActivityLog {...props} queryRef={data} />
+}
+
+export default ActivityLogWithQuery