diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a3773d34..99e67b13 100644 --- a/packages/components/CHANGELOG.md +++ b/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 diff --git a/packages/components/package.json b/packages/components/package.json index 2656b9ed..0685b259 100644 --- a/packages/components/package.json +++ b/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, diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index bdbd2ff0..d023ce5e 100644 --- a/packages/design-system/CHANGELOG.md +++ b/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 diff --git a/packages/design-system/components/Logo/__storybook__/Logo.mdx b/packages/design-system/components/Logo/__storybook__/Logo.mdx new file mode 100644 index 00000000..b2bf5b96 --- /dev/null +++ b/packages/design-system/components/Logo/__storybook__/Logo.mdx @@ -0,0 +1,45 @@ +import { Meta } from '@storybook/addon-docs' + + + +# 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 ( + + + + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/Popover/__storybook__/Popover.mdx b/packages/design-system/components/Popover/__storybook__/Popover.mdx new file mode 100644 index 00000000..e11adbe8 --- /dev/null +++ b/packages/design-system/components/Popover/__storybook__/Popover.mdx @@ -0,0 +1,54 @@ +import { Meta } from '@storybook/addon-docs' + + + +# 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(null) + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget) + } + + const handleClose = () => { + setAnchorEl(null) + } + + return ( + +
This is the content of the Popover
+ + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/AvatarWithPlaceholder.mdx b/packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/AvatarWithPlaceholder.mdx new file mode 100644 index 00000000..e06e8278 --- /dev/null +++ b/packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/AvatarWithPlaceholder.mdx @@ -0,0 +1,53 @@ +import { Meta } from '@storybook/addon-docs' + + + +# 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 ( + + "AA" + + ) +} +export default MyComponent +``` \ No newline at end of file diff --git a/packages/design-system/components/avatars/ClickableAvatar/__storybook__/ClickableAvatar.mdx b/packages/design-system/components/avatars/ClickableAvatar/__storybook__/ClickableAvatar.mdx new file mode 100644 index 00000000..6b33c484 --- /dev/null +++ b/packages/design-system/components/avatars/ClickableAvatar/__storybook__/ClickableAvatar.mdx @@ -0,0 +1,55 @@ +import { Meta } from '@storybook/addon-docs' + + + +# 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 ( + {}}> + Avatar Icon + + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx b/packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx new file mode 100644 index 00000000..9c8a7b4e --- /dev/null +++ b/packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx @@ -0,0 +1,63 @@ +import { Meta } from '@storybook/addon-docs' + + + +# 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 ( + {}} + > + + + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx b/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx new file mode 100644 index 00000000..bcc51eca --- /dev/null +++ b/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx @@ -0,0 +1,78 @@ +import { Meta } from '@storybook/addon-docs' + + + +# 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 ( + <> + + Confirm} + /> + + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx b/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx new file mode 100644 index 00000000..f39f792b --- /dev/null +++ b/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx @@ -0,0 +1,71 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation +## SwipeableDrawer + +- **Purpose**: A customized MUI SwipeableDrawer component that provides a bottom sliding panel with a puller handle and custom styling. +- **Expected Behavior**: Renders a bottom-anchored drawer that can be opened and closed programmatically. Features a visual puller handle and custom content container. Disables swipe-to-open functionality but maintains swipe-to-close. + +## Use Cases + +- **Current Usage**: + - Bottom sheet dialogs + - Mobile action sheets + - Expandable bottom panels + - Touch-friendly modal interfaces + +## Props + +- **children** (ReactNode): Content to be rendered inside the drawer +- **globalHeight** (string): Height of the drawer paper component (default: `calc(25% - SWIPE_AREA_WIDTH)`) +- **...MUISwipeableDrawerProps**: All other props are passed to the underlying MUI SwipeableDrawer component + - open + - onClose + - onOpen (defaults to no-op function) + - anchor (fixed to "bottom") + - disableSwipeToOpen (fixed to true) + +## Notes + +- **Related Components**: + - MUI SwipeableDrawer: Base component providing core functionality + - ContentContainer: Styled component for content layout + - Puller: Visual handle component + - SwipeableContainer: Container for the puller + +## Example Usage + +```javascript +import { useState } from 'react' + +import { SwipeableDrawer } from '@baseapp-frontend/design-system' + +import { Button, Typography } from '@mui/material' + +const MyComponent = () => { + const [open, setOpen] = useState(false) + + const handleOpen = () => { + setOpen(true) + } + + const handleClose = () => { + setOpen(false) + } + return ( + <> + + + + This is the content of the Swipeable Drawer. You can put any components or content here. + + + + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/inputs/SocialTextField/__storybook__/SocialTextField.mdx b/packages/design-system/components/inputs/SocialTextField/__storybook__/SocialTextField.mdx new file mode 100644 index 00000000..0157b19a --- /dev/null +++ b/packages/design-system/components/inputs/SocialTextField/__storybook__/SocialTextField.mdx @@ -0,0 +1,62 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## SocialTextField + +- **Purpose**: A TextField component made specifically for comments creation, with support for replies and additional social features. +- **Expected Behavior**: Renders a textarea field with optional reply functionality showing who is being replied to, and a container for additional actions/children. + +## Use Cases + +- **Current Usage**: + - Comments sections + - Reply threads + - Social interactions +- **Potential Usage**: + - Discussion forums + - Messaging interfaces + - Any social commenting system + +## Props + +- **children** (ReactNode): Content rendered below the textarea, typically action buttons +- **isReply** (boolean): If true, shows the reply interface with target user's name +- **replyTargetName** (string): Name of the user being replied to, shown when isReply is true +- **onCancelReply** (function): Callback fired when clicking the cancel reply button +- **...TextareaFieldProps**: All other props are passed to the underlying TextareaField component + +## Notes + +- **Related Components**: + - TextareaField: Used as the base input component + - IconButton: Used for the cancel reply action + - Typography/TypographyWithEllipsis: Used for reply text display + - CommentReplyIcon/CloseIcon: Icons used in the reply interface + +## Example Usage + +```javascript +import { SocialTextField } from '@baseapp-frontend/design-system' + +const MyComponent = () => { + const [value, setValue] = useState < string > '' + + return ( + setValue(e.target.value)} + isReply={true} + replyTargetName="John Doe" + helperText="This is a helper text" + isResponsive={true} + onCancelReply={() => {}} + /> + ) +} +export default MyComponent +``` \ No newline at end of file diff --git a/packages/design-system/components/inputs/TextField/__storybook__/TextField.mdx b/packages/design-system/components/inputs/TextField/__storybook__/TextField.mdx new file mode 100644 index 00000000..e522646a --- /dev/null +++ b/packages/design-system/components/inputs/TextField/__storybook__/TextField.mdx @@ -0,0 +1,62 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## TextField + +- **Purpose**: A customizable text input field component that wraps MUI's TextField with responsive sizing and form controller functionality. +- **Expected Behavior**: Renders a text input that automatically adjusts size based on screen width when responsive mode is enabled. The component is wrapped with form controller capabilities by default. + +## Use Cases + +- **Current Usage**: + - Login/Registration forms + - Search inputs + - Data entry forms + - Contact forms +- **Potential Usage**: + - Filtering interfaces + - In-line editing + - Dynamic form generation + - Auto-complete fields + +## Props + +- **isResponsive** (boolean): If true, the input will adjust size based on screen width (default: true) +- **...MUITextFieldProps**: All other props are passed to the underlying MUI TextField component + - value + - onChange + - label + - disabled + - placeholder + - type + - fullWidth (default: true) + - etc. + +## Notes + +- **Related Components**: + - MUI TextField: Used as the base input component + - withController HOC: Adds form control capabilities + - PureTextField: Unwrapped version without form controller + +## Example Usage + +```javascript +import { TextField } from '@baseapp-frontend/design-system' +const MyComponent = () => { + const [value, setValue] = useState < string > '' + + return ( + setValue(e.target.value)} + /> + ) +} +export default MyComponent +``` \ No newline at end of file diff --git a/packages/design-system/components/inputs/TextareaField/__storybook__/TextareaField.mdx b/packages/design-system/components/inputs/TextareaField/__storybook__/TextareaField.mdx new file mode 100644 index 00000000..cb9b0165 --- /dev/null +++ b/packages/design-system/components/inputs/TextareaField/__storybook__/TextareaField.mdx @@ -0,0 +1,57 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## TextareaField + +- **Purpose**: A simple textarea component that extends TextField with multiline support and consistent styling. It wraps the base component with form controller functionality. +- **Expected Behavior**: Renders a multiline text input field with a maximum of 3 rows before scrolling begins. The border is hidden by default. + +## Use Cases + +- **Current Usage**: + - Comment sections + - Description fields + - Any multiline text input needs +- **Potential Usage**: + - Form text areas + - Message composition + - Note inputs + +## Props + +- Inherits all props from TextField component +- **multiline**: Always true (hardcoded) +- **maxRows**: Set to 3 (hardcoded) +- **hideBorder**: Always true (hardcoded) + +## Notes + +- **Related Components**: + - TextField: Base component that provides core functionality + - withController: HOC that adds form control capabilities + - Textarea: Styled component for visual presentation + +## Example Usage + +```javascript +import { TextareaField } from '@baseapp-frontend/design-system' + +const MyComponent = () => { + const [value, setValue] = useState < string > '' + + return ( + setValue(e.target.value)} + multiline={true} + maxRows={3} + /> + ) +} +export default MyComponent +``` \ No newline at end of file diff --git a/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx b/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx new file mode 100644 index 00000000..f44350d5 --- /dev/null +++ b/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx @@ -0,0 +1,45 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## TypographyWithEllipsis + +- **Purpose**: A styled Typography component that handles text overflow with ellipsis, with optional multi-line clamping support. +- **Expected Behavior**: Renders text with a max width of 300px. By default shows single line with ellipsis, but can display multiple lines when lineClamp prop is provided. + +## Use Cases + +- **Current Usage**: + - Single line text truncation + - Multi-line text clamping with ellipsis + - Fixed width containers where text may overflow + - Responsive layouts requiring text truncation + +## Props + +- Inherits all props from MUI Typography component +- **lineClamp** (number, optional): Number of lines to show before truncating with ellipsis. When not provided, defaults to single line truncation. +- **maxWidth** (number): Fixed at 300px by default + +## Notes + +- **Related Components**: + - Typography: Base MUI component that provides core text styling + - Box: Can be used as container to control width constraints + +## Example Usage + +```javascript +import { TypographyWithEllipsis } from '@baseapp-frontend/design-system' + +const MyComponent = () => { + return ( + + This is a long text that should be truncated with an ellipsis. + + ) +} +export default MyComponent +``` diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 15d8d399..1fba7791 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/design-system", "description": "Design System components and configurations.", - "version": "0.0.27", + "version": "1.0.0", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false, diff --git a/packages/wagtail/CHANGELOG.md b/packages/wagtail/CHANGELOG.md index 4c59e128..4bfdf711 100644 --- a/packages/wagtail/CHANGELOG.md +++ b/packages/wagtail/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/wagtail +## 2.0.0 + +### Patch Changes + +- Updated dependencies + - @baseapp-frontend/design-system@1.0.0 + ## 1.0.12 ### Patch Changes diff --git a/packages/wagtail/package.json b/packages/wagtail/package.json index 98c24c39..efd64615 100644 --- a/packages/wagtail/package.json +++ b/packages/wagtail/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/wagtail", "description": "BaseApp Wagtail", - "version": "1.0.12", + "version": "2.0.0", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,