From dfed8d0977a558d39b137864a7a6acba47e852f0 Mon Sep 17 00:00:00 2001 From: Joao Soutto Date: Tue, 7 Jan 2025 17:15:32 -0500 Subject: [PATCH] fixing docs --- .../components/Logo/__storybook__/Logo.mdx | 2 +- .../Popover/__storybook__/Popover.mdx | 2 +- .../__storybook__/AvatarWithPlaceholder.mdx | 53 +++++ .../__storybook__/ClickableAvatar.mdx | 55 +++++ .../__storybook__/AvatarsComponents.mdx | 115 ----------- .../IconButton/__storybook__/IconButton.mdx | 2 +- .../__storybook__/ConfirmDialog.mdx | 2 +- .../__storybook__/SwipeableDrawer.mdx | 40 ++-- .../__storybook__/SocialTextField.mdx | 62 ++++++ .../TextField/__storybook__/TextField.mdx | 62 ++++++ .../__storybook__/TextareaField.mdx | 57 ++++++ .../inputs/__storybook__/Inputs.mdx | 188 ------------------ .../__storybook__/TypographyWithEllipsis.mdx | 32 ++- 13 files changed, 325 insertions(+), 347 deletions(-) create mode 100644 packages/design-system/components/avatars/AvatarWithPlaceholder/__storybook__/AvatarWithPlaceholder.mdx create mode 100644 packages/design-system/components/avatars/ClickableAvatar/__storybook__/ClickableAvatar.mdx delete mode 100644 packages/design-system/components/avatars/__storybook__/AvatarsComponents.mdx create mode 100644 packages/design-system/components/inputs/SocialTextField/__storybook__/SocialTextField.mdx create mode 100644 packages/design-system/components/inputs/TextField/__storybook__/TextField.mdx create mode 100644 packages/design-system/components/inputs/TextareaField/__storybook__/TextareaField.mdx delete mode 100644 packages/design-system/components/inputs/__storybook__/Inputs.mdx diff --git a/packages/design-system/components/Logo/__storybook__/Logo.mdx b/packages/design-system/components/Logo/__storybook__/Logo.mdx index b34c0984..b2bf5b96 100644 --- a/packages/design-system/components/Logo/__storybook__/Logo.mdx +++ b/packages/design-system/components/Logo/__storybook__/Logo.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Component Documentation diff --git a/packages/design-system/components/Popover/__storybook__/Popover.mdx b/packages/design-system/components/Popover/__storybook__/Popover.mdx index b31d137e..e11adbe8 100644 --- a/packages/design-system/components/Popover/__storybook__/Popover.mdx +++ b/packages/design-system/components/Popover/__storybook__/Popover.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Component Documentation 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/avatars/__storybook__/AvatarsComponents.mdx b/packages/design-system/components/avatars/__storybook__/AvatarsComponents.mdx deleted file mode 100644 index c3cca7e6..00000000 --- a/packages/design-system/components/avatars/__storybook__/AvatarsComponents.mdx +++ /dev/null @@ -1,115 +0,0 @@ -import { Meta } from '@storybook/addon-docs' - - - -# Avatars Documentation - -## Avatars System - -## Components - -### 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 -``` - ---- - -### ClickableAvatar - -- **Purpose**: A clickable avatar component that combines avatar display with interactive functionality, allowing users to trigger actions through clicks or taps. -- **Expected Behavior**: Displays an avatar image or fallback text, responds to click events, and provides visual feedback for hover/active states. Can be configured with different sizes and styles. - -### Use Cases - -- **Current Usage**: - - User profile pictures in navigation menus - - Account settings triggers - - User selection interfaces - - Contact list avatars -- **Potential Usage**: - - Team member selectors - - Chat interface participant avatars - - Social media profile links - - Quick user switching interfaces - -### Props - -- **isOpen** (boolean): Whether the avatar is open -- **width** (number): Width of the avatar -- **height** (number): Height of the avatar -- **onClick** (function): Callback function triggered when avatar is clicked -- **children** (ReactNode): Content to be rendered inside the avatar - -### Notes - -- **Related Components**: - - Avatar: Base avatar component without click functionality - - Popover: Often used in conjunction for dropdown menus - - Badge: Can be combined to show status indicators - - Menu: Commonly triggered by ClickableAvatar - -### 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 index 655188ae..9c8a7b4e 100644 --- a/packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx +++ b/packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Component Documentation diff --git a/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx b/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx index ced72a3d..bcc51eca 100644 --- a/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx +++ b/packages/design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs' - + # Component Documentation diff --git a/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx b/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx index 358ab184..f39f792b 100644 --- a/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx +++ b/packages/design-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx @@ -1,41 +1,39 @@ import { Meta } from '@storybook/addon-docs' - + # Component Documentation - ## SwipeableDrawer -- **Purpose**: A swipeable drawer component that provides a sliding panel from any edge of the screen, with touch and swipe gesture support for enhanced mobile interaction. -- **Expected Behavior**: Opens smoothly with swipe gestures or programmatic control. Provides haptic feedback and smooth animations. Can be dismissed via swipe, backdrop click, or programmatic close. Maintains proper touch interaction zones and respects system gestures. +- **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**: - - Mobile navigation menus - - Filter panels in mobile views - - Action sheets - - Mobile cart drawers in e-commerce -- **Potential Usage**: - - Quick settings panels - - Mobile search interfaces - - Context menus - - Detail view panels + - Bottom sheet dialogs + - Mobile action sheets + - Expandable bottom panels + - Touch-friendly modal interfaces ## Props -- **open** (boolean): Controls the open/closed state of the drawer -- **onClose** (function): Callback fired when the drawer should close -- **onOpen** (function): Callback fired when the drawer should open -- **globalHeight** (number): Global height of the drawer +- **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**: - - Drawer: Standard non-swipeable drawer variant - - Modal: For modal dialogs - - Paper: Used as the surface component - - Backdrop: For the overlay effect + - MUI SwipeableDrawer: Base component providing core functionality + - ContentContainer: Styled component for content layout + - Puller: Visual handle component + - SwipeableContainer: Container for the puller ## Example Usage 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..188f226a --- /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/inputs/__storybook__/Inputs.mdx b/packages/design-system/components/inputs/__storybook__/Inputs.mdx deleted file mode 100644 index de6cc0af..00000000 --- a/packages/design-system/components/inputs/__storybook__/Inputs.mdx +++ /dev/null @@ -1,188 +0,0 @@ -import { Meta } from '@storybook/addon-docs' - - - -# Inputs Documentation - -## Inputs System - -## Components - -### SocialTextField - -- **Purpose**: The SocialTextField component extends the base TextField component to provide handling for social media interactions. -- **Expected Behavior**: It inherits responsive behavior from TextField. - -### Use Cases - -- **Current Usage**: - - Comments - - Chat - - Social media profile forms - - Messages - - Replies -- **Potential Usage**: - - Social media integration features - - Social sharing components - - Contact management systems - -### Props - -- **value** (string): The controlled value of the input field. -- **placeholder** (string): Placeholder text displayed when the input is empty. -- **onChange** (function): Callback fired when the input value changes. -- **isReply** (boolean): If true, the input will be a reply input. -- **replyTargetName** (string): The name of the user being replied to. -- **helperText** (string): Helper text displayed below the input field. -- **isResponsive** (boolean): If true, the input will be responsive. -- **onCancelReply** (function): Callback fired when the reply is canceled. - -### Notes - -- **Related Components**: - - TextField: Base component that SocialTextField extends - - FormControl: Parent component for form organization - - FormHelperText: For validation messages - -### 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 -``` - ---- - -### TextField - -- **Purpose**: The TextField component provides a customizable input field for text entry. -- **Expected Behavior**: The TextField responds to users input, displaying the values typed by the user. - -### 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 - -- **value** (string): The controlled value of the input field. -- **onChange** (function): Callback fired when the input value changes. -- **label** (string): Text label that appears above the input field. -- **disabled** (boolean): If true, the input will be disabled. -- **placeholder** (string): Placeholder text displayed when the input is empty. -- **type** (string): Type of input field (text, password, email, etc.). -- **fullWidth** (boolean): If true, the input will take up the full width of its container. -- **isResponsive** (boolean): If true, the input will be responsive. - -### Notes - -- **Related Components**: - - PureTextField: Used to create the base input field with additional functionality. - - InputLabel: For custom label styling - - FormHelperText: For custom helper text styling - -### 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 -``` - ---- - -### TextareaField - -- **Purpose**: The TextareaField component provides a multi-line text input field for longer form content. It extends the base TextField functionality to handle larger text inputs while maintaining consistent styling and behavior. -- **Expected Behavior**: The TextareaField expands vertically to accommodate multiple lines of text while maintaining responsive width. It supports standard text input features like placeholder text, disabled states, and validation. - -### Use Cases - -- **Current Usage**: - - Long form text inputs - - Comment sections - - Description fields - - Bio sections - - Feedback forms -- **Potential Usage**: - - Rich text editing - - Code snippet inputs - - Message composition - - Note-taking interfaces - -### Props - -- **value** (string): The controlled value of the textarea. -- **onChange** (function): Callback fired when the textarea value changes. -- **label** (string): Text label that appears above the textarea. -- **placeholder** (string): Placeholder text displayed when the textarea is empty. -- **multiline** (boolean): If true, the textarea will be a multi-line input. -- **maxRows** (number): Maximum number of rows before scrolling begins. - -### Notes - -- **Related Components**: - - TextField: For single-line text inputs - - FormControl: Parent component for form input organization - - InputLabel: For custom label styling - - FormHelperText: For validation messages and helper text - -### 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 -``` diff --git a/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx b/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx index a346953e..f44350d5 100644 --- a/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx +++ b/packages/design-system/components/typographies/TypographyWithEllipsis/__storybook__/TypographyWithEllipsis.mdx @@ -1,39 +1,33 @@ import { Meta } from '@storybook/addon-docs' - + # Component Documentation ## TypographyWithEllipsis -- **Purpose**: A typography component that truncates text with an ellipsis when it exceeds the available space, ensuring clean text overflow handling. -- **Expected Behavior**: The component displays text normally when it fits within its container. When text overflows, it truncates the content and adds an ellipsis (...) at the end. +- **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**: - - Table cells with limited width - - Card titles and descriptions - - List items with fixed widths - - Navigation items with space constraints -- **Potential Usage**: - - Breadcrumb navigation items - - File name displays - - Long form labels - - Status messages in confined spaces +- **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 -- **children** (ReactNode): The text content to be displayed and potentially truncated. -- **lineClamp** (number, optional, default: 1): The number of lines to clamp the text to. +- 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 typography component - - Tooltip: Used to show full text on hover - - Box: Can be used as a container to control width - - Card: Often contains truncated typography elements + - Typography: Base MUI component that provides core text styling + - Box: Can be used as container to control width constraints ## Example Usage