BA-1850: Add Missing MDX Doc Files for BaseApp Frontend Packages - group 1

packages/components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/components
 
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.0.0
+
 ## 0.0.42
 
 ### Patch Changes

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "0.0.42",
+  "version": "1.0.0",
   "main": "./index.ts",
   "types": "dist/index.d.ts",
   "sideEffects": false,

packages/design-system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/design-system
 
+## 1.0.0
+
+### Major Changes
+
+- MDX documentation files added for several components
+
 ## 0.0.27
 
 ### Patch Changes

packages/design-system/components/Logo/__storybook__/Logo.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/General/Logo" />
+
+# Component Documentation
+
+## Logo
+
+- **Purpose**: A flexible component that wraps logo content in a consistent container with optional link functionality.
+- **Expected Behavior**: Renders a container that centers its content. When not disabled, wraps the logo in a link to the homepage ("/").
+
+## Use Cases
+
+- **Current Usage**:
+  - Application header logos
+
+## Props
+
+- **children** (ReactNode): The logo content to be displayed in the container
+- **disabledLink** (boolean): If true, removes the link wrapper (defaults to false)
+- **sx** (object): MUI system props for custom styling
+- **...other**: Additional props are passed to the root Box component
+
+## Notes
+
+- **Related Components**:
+  - Box: Used as the container component
+  - Link: Wraps the logo when clickable
+  - Various logo icon components that can be passed as children
+
+## Example Usage
+
+```javascript
+import { Logo } from '@baseapp-frontend/design-system'
+import { BaseAppLogoCondensed } from '@baseapp-frontend/design-system/icons'
+
+const MyComponent = () => {
+  return (
+    <Logo disabledLink={false}>
+      <BaseAppLogoCondensed />
+    </Logo>
+  )
+}
+export default MyComponent
+```

packages/design-system/components/Popover/__storybook__/Popover.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Popover/Popover" />
+
+# Component Documentation
+
+## Popover
+
+- **Purpose**: A customized wrapper around MUI's Popover component that provides consistent positioning and styling, with an optional arrow indicator. It's used for displaying floating content like menus and tooltips with precise positioning control.
+- **Expected Behavior**: Renders a popover anchored to a specified element (currently only AccountPopover), with configurable arrow placement and positioning.
+
+## Use Cases
+
+- **Current Usage**:
+  - AccountPopover
+
+## Props
+
+- **open** (HTMLElement | null): The anchor element to position the popover against
+- **children** (ReactNode): Content to render inside the popover
+- **arrow** (string, optional): Position of the arrow indicator (default: 'top-right')
+- **hiddenArrow** (boolean, optional): Whether to hide the arrow indicator
+- **sx** (object, optional): Additional styles to apply to the popover
+- **...other**: All other props are passed to MUI Popover
+
+## Notes
+
+- **Related Components**:
+  - AccountPopover: Uses Popover internally for dropdown menus
+
+## Example Usage
+
+```javascript
+import { Popover } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <Popover open={anchorEl} onClose={handleClose}>
+      <div>This is the content of the Popover</div>
+    </Popover>
+  )
+}
+export default MyComponent
+```

packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/AvatarWithPlaceholder.mdx

@@ -0,0 +1,53 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Avatars/AvatarWithPlaceholder" />
+
+# Components Documentation
+
+## AvatarWithPlaceholder
+
+- **Purpose**: A flexible avatar component that displays either an image, text content, or a placeholder when no content is provided. It handles various content types gracefully while maintaining consistent sizing and styling.
+- **Expected Behavior**: Renders an avatar with the provided content (image or text), and falls back to a placeholder when no content is available.
+
+## Use Cases
+
+- **Current Usage**:
+  - User profile avatars throughout the application
+  - Team member displays
+  - Contact lists
+  - Comment sections
+- **Potential Usage**:
+  - Group chat avatars
+  - Organization logos
+  - Project thumbnails
+  - Social media integrations
+
+## Props
+
+- **width** (number): Width of the avatar in pixels. Default is 36.
+- **height** (number): Height of the avatar in pixels. Default is 36.
+- **children** (ReactNode): Content to be displayed within the avatar - can be an image component or text.
+- **...props** (AvatarProps): Additional props are passed through to the underlying MUI Avatar component.
+
+## Notes
+
+- **Related Components**:
+  - ClickableAvatar: Extends this component with click functionality
+  - Avatar: MUI's base avatar component
+  - Badge: Can be used to add status indicators
+  - AvatarGroup: For displaying multiple avatars together
+
+## Example Usage
+
+```javascript
+import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <AvatarWithPlaceholder width={50} height={50}>
+      "AA"
+    </AvatarWithPlaceholder>
+  )
+}
+export default MyComponent
+```

packages/design-system/components/avatars/ClickableAvatar/__storybook__/ClickableAvatar.mdx

@@ -0,0 +1,55 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Avatars/ClickableAvatar" />
+
+# Component Documentation
+## ClickableAvatar
+
+- **Purpose**: An enhanced avatar component that adds click interactivity and hover animations using Framer Motion. Built on top of AvatarWithPlaceholder to provide a clickable interface with visual feedback.
+- **Expected Behavior**: Renders a clickable avatar that scales up slightly on hover and provides tap animation feedback. Can display images or text content with consistent sizing.
+
+## Use Cases
+
+- **Current Usage**:
+  - Interactive user avatars
+  - Profile picture buttons
+  - Avatar menu triggers
+  - Clickable user representations
+
+## Props
+
+- **onClick** (function): Handler function called when avatar is clicked
+- **isOpen** (boolean): Controls the open state of the avatar (default: false)
+- **width** (number): Width of the avatar in pixels (default: 36)
+- **height** (number): Height of the avatar in pixels (default: 36) 
+- **children** (ReactNode): Content to be displayed within the avatar
+- **...props**: Additional props are passed through to the underlying AvatarWithPlaceholder component
+
+## Notes
+
+- **Related Components**:
+  - AvatarWithPlaceholder: Base component providing avatar display functionality
+  - IconButtonStyled: Styled button wrapper providing click interaction
+  - MUI IconButton: Base component for click functionality
+
+## Example Usage
+
+```javascript
+import { ClickableAvatar } from '@baseapp-frontend/design-system'
+
+import Image from 'next/image'
+
+const MyComponent = () => {
+  return (
+    <ClickableAvatar isOpen={false} width={50} height={50} onClick={() => {}}>
+      <Image
+        src="https://nyc3.digitaloceanspaces.com/baseapp-production-storage/media/user-avatars/5/6/4/resized/50/50/185a04dfdaa512d218cf9b7a5097e3c9.png"
+        alt="Avatar Icon"
+        width={50}
+        height={50}
+      />
+    </ClickableAvatar>
+  )
+}
+export default MyComponent
+```

packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx

@@ -0,0 +1,63 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Buttons/IconButton" />
+
+# Component Documentation
+
+## IconButton
+
+- **Purpose**: The IconButton component provides a clickable button that displays an icon.
+- **Expected Behavior**: The IconButton renders as a circular button containing an icon. It responds to hover and click states with visual feedback, and can be disabled when needed.
+
+## Use Cases
+
+- **Current Usage**:
+  - Navigation menus
+  - Toolbars
+  - Action buttons in tables/lists
+  - Close buttons for modals/dialogs
+  - Toggle buttons for expandable content
+- **Potential Usage**:
+  - Social media sharing buttons
+  - Media player controls
+  - Form field actions (clear, show/hide password)
+  - Mini floating action buttons
+
+## Props
+
+- **children** (ReactNode): The icon element to be displayed inside the button.
+- **color** (string): The color of the button.
+- **disabled** (boolean): If true, the button will be disabled.
+- **isLoading** (boolean): If true, the button will be in a loading state.
+- **onClick** (function): The function to be called when the button is clicked.
+- **hasTooltip** (boolean): If true, the button will have a tooltip.
+
+## Notes
+
+- **Related Components**:
+  - Button: Standard button component for text-based actions
+  - Tooltip: Often wraps IconButton to provide additional context
+  - Menu: Can be triggered by IconButton
+  - Icons: Provides the visual elements used within IconButton
+
+## Example Usage
+
+```javascript
+import { IconButton } from '@baseapp-frontend/design-system'
+import { CloseIcon } from '@baseapp-frontend/design-system/icons'
+
+const MyComponent = () => {
+  return (
+    <IconButton
+      hasTooltip={true}
+      isLoading={false}
+      disabled={false}
+      color="primary"
+      onClick={() => {}}
+    >
+      <CloseIcon />
+    </IconButton>
+  )
+}
+export default MyComponent
+```

packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx

@@ -0,0 +1,78 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Dialogs/ConfirmDialog" />
+
+# Component Documentation
+
+## ConfirmDialog
+
+- **Purpose**: A dialog component that prompts users to confirm or cancel an action, providing a clear decision point before proceeding with important operations.
+- **Expected Behavior**: Opens as a modal dialog with a message, title, and two action buttons (confirm and cancel). Blocks interaction with the main content until a choice is made.
+
+## Use Cases
+
+- **Current Usage**:
+  - Delete confirmation dialogs
+  - Save changes confirmations
+  - Logout confirmations
+  - Form submission confirmations
+- **Potential Usage**:
+  - Bulk action confirmations
+  - Settings changes verification
+  - Account modifications
+  - Data export confirmations
+
+## Props
+
+- **open** (boolean): Controls the visibility of the dialog
+- **title** (string): The heading text displayed at the top of the dialog
+- **content** (ReactNode): The main message or content displayed in the dialog body
+- **cancelText** (string): Custom text for the cancel button (optional, defaults to "Cancel")
+- **onClose** (function): Callback function executed when the cancel button is clicked
+- **action** (ReactNode): The action button to be displayed in the dialog
+
+## Notes
+
+- **Related Components**:
+  - Dialog: Base dialog component
+  - AlertDialog: For displaying important messages
+  - Modal: For more complex modal interactions
+  - Button: Used within the dialog for actions
+
+## Example Usage
+
+```javascript
+import { ConfirmDialog } from '@baseapp-frontend/design-system'
+import { Button } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [open, setOpen] = useState(false)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const handleConfirm = () => {
+    alert('Confirmed')
+    handleClose()
+  }
+
+  return (
+    <>
+      <Button onClick={handleClickOpen}>Open Confirm Dialog</Button>
+      <ConfirmDialog
+        open={open}
+        title="Are you sure?"
+        content="This action cannot be undone."
+        onClose={handleClose}
+        action={<Button onClick={handleConfirm}>Confirm</Button>}
+      />
+    </>
+  )
+}
+export default MyComponent
+```