-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fb8db6c
commit dfed8d0
Showing
13 changed files
with
325 additions
and
347 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/design-system/components/Popover/__storybook__/Popover.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
53 changes: 53 additions & 0 deletions
53
...omponents/avatars/AvatarWithPlaceholder/__storybook__/AvatarWithPlaceholder.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ``` |
55 changes: 55 additions & 0 deletions
55
...ign-system/components/avatars/ClickableAvatar/__storybook__/ClickableAvatar.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ``` |
115 changes: 0 additions & 115 deletions
115
packages/design-system/components/avatars/__storybook__/AvatarsComponents.mdx
This file was deleted.
Oops, something went wrong.
2 changes: 1 addition & 1 deletion
2
packages/design-system/components/buttons/IconButton/__storybook__/IconButton.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
.../design-system/components/dialogs/ConfirmDialog/__storybook__/ConfirmDialog.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 19 additions & 21 deletions
40
...ign-system/components/drawers/SwipeableDrawer/__storybook__/SwipeableDrawer.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
...sign-system/components/inputs/SocialTextField/__storybook__/SocialTextField.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { Meta } from '@storybook/addon-docs' | ||
|
|
||
| <Meta title="@baseapp-frontend | designSystem/Inputs/SocialTextField" /> | ||
|
|
||
| # 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 ( | ||
| <SocialTextField | ||
| label="Default Label" | ||
| placeholder="Type something..." | ||
| value={value} | ||
| onChange={(e) => setValue(e.target.value)} | ||
| isReply={true} | ||
| replyTargetName="John Doe" | ||
| helperText="This is a helper text" | ||
| isResponsive={true} | ||
| onCancelReply={() => {}} | ||
| /> | ||
| ) | ||
| } | ||
| export default MyComponent | ||
| ``` |
Oops, something went wrong.