From 53ea8e3467cfdb48c590c9eac05da150f8403b31 Mon Sep 17 00:00:00 2001 From: Arifulislam5577 Date: Wed, 6 Mar 2024 12:57:25 +0600 Subject: [PATCH] Updated: Tag component updated. --- app/components/ComponentApi.tsx | 10 +- app/docs/components/avatar/avatarApi.ts | 2 +- .../avatar/variant/StatusOfAvatar.tsx | 8 +- app/docs/components/tag/Tag.mdx | 46 ++--- app/docs/components/tag/TagApi.ts | 43 +---- app/docs/components/tag/page.tsx | 4 +- .../tag/variant/BothSideIconTag.tsx | 157 ---------------- .../components/tag/variant/ColorsOfTag.tsx | 39 ---- .../components/tag/variant/DefaultTag.tsx | 6 +- .../components/tag/variant/DisabledTag.tsx | 17 ++ .../tag/variant/LeftSideIconTag.tsx | 73 -------- .../tag/variant/TagWithDashedBorder.tsx | 173 ------------------ .../components/tag/variant/TagWithIcon.tsx | 50 +++++ app/src/components/Avatar/Avatar.tsx | 2 +- app/src/components/Tag/Tag.stories.tsx | 165 ----------------- app/src/components/Tag/Tag.tsx | 29 +++ app/src/components/Tag/index.tsx | 111 +---------- app/src/components/Tag/theme.ts | 77 -------- 18 files changed, 128 insertions(+), 884 deletions(-) delete mode 100644 app/docs/components/tag/variant/BothSideIconTag.tsx delete mode 100644 app/docs/components/tag/variant/ColorsOfTag.tsx create mode 100644 app/docs/components/tag/variant/DisabledTag.tsx delete mode 100644 app/docs/components/tag/variant/LeftSideIconTag.tsx delete mode 100644 app/docs/components/tag/variant/TagWithDashedBorder.tsx create mode 100644 app/docs/components/tag/variant/TagWithIcon.tsx delete mode 100644 app/src/components/Tag/Tag.stories.tsx create mode 100644 app/src/components/Tag/Tag.tsx diff --git a/app/components/ComponentApi.tsx b/app/components/ComponentApi.tsx index a5da0195..e224547d 100644 --- a/app/components/ComponentApi.tsx +++ b/app/components/ComponentApi.tsx @@ -19,7 +19,7 @@ const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] }) const ComponentApi: FC = ({ data }) => { return (
- +
- - - diff --git a/app/docs/components/avatar/avatarApi.ts b/app/docs/components/avatar/avatarApi.ts index 620778a6..9722a848 100644 --- a/app/docs/components/avatar/avatarApi.ts +++ b/app/docs/components/avatar/avatarApi.ts @@ -25,7 +25,7 @@ export const avatarApiData = [ propsName: 'color', propsType: ['primary', 'secondary', 'success', 'warning', 'error'], propsDescription: 'Specifies the color of the avatar', - default: 'primary', + default: 'secondary', }, { id: 4, diff --git a/app/docs/components/avatar/variant/StatusOfAvatar.tsx b/app/docs/components/avatar/variant/StatusOfAvatar.tsx index f2275489..ea706689 100644 --- a/app/docs/components/avatar/variant/StatusOfAvatar.tsx +++ b/app/docs/components/avatar/variant/StatusOfAvatar.tsx @@ -4,8 +4,8 @@ import { Avatar } from '../../../../src' const StatusOfAvatar = () => { return (
- - + +
) } @@ -17,8 +17,8 @@ import { Avatar } from "keep-react"; export const AvatarComponent = () => { return ( <> - - + + ); } diff --git a/app/docs/components/tag/Tag.mdx b/app/docs/components/tag/Tag.mdx index 9a823d85..614cf4de 100644 --- a/app/docs/components/tag/Tag.mdx +++ b/app/docs/components/tag/Tag.mdx @@ -1,60 +1,40 @@ import { DefaultTag, DefaultTagCode } from './variant/DefaultTag' -import { BothSideIconTag, BothSideIconTagCode } from './variant/BothSideIconTag' -import { ColorsOfTag, ColorsOfTagCode } from './variant/ColorsOfTag' -import { LeftSideIconTag, LeftSideIconTagCode } from './variant/LeftSideIconTag' -import { TagWithDashedBorder, TagWithDashedBorderCode } from './variant/TagWithDashedBorder' +import { TagWithIcon, TagWithIconCode } from './variant/TagWithIcon' +import { DisabledTag, DisabledTagCode } from './variant/DisabledTag' import { tagApiData } from './TagApi' - import CodePreview from '../../../components/CodePreview' - import ComponentApi from '../../../components/ComponentApi' ## Table of Contents -The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction. +The Color Tag Component in Keep React allows you to visually represent and label items with customizable options for style and icon. ## Default Tag -The Default Tag component represents a tag without any additional elements. It serves as a fundamental building block for various tag variations. +The Default Tag component represents a tag without any additional elements. -## Colors of Tag - -Customize the appearance of your tags by choosing from a range of color options. The "Colors of Tag" component showcases the available color variants. - - - - - -## Left Side Icon Tag - -Enhance your tags by adding an icon to the left side using the `leftIcon` props. - - - - - -## Tag With Both Side Icon +## Tag With Icon -Create tags with icons on both sides. The left side can accommodate a custom icon, while the right side features a dismiss icon for easy removal. +Enhance your tags by adding icons for better visual representation. - - + + -## Tag With Dashed Border +## Disabled Tag -The "Tag With Dashed Border" example demonstrates two types of border styles for tags: `borderType="solid"` and `borderType="dashed"`. +Restrict user interaction with the `disabled` prop set to `true`. - - + + ## API Reference -For a comprehensive overview of the Tag component's properties, refer to the API documentation. +Refer to the API documentation for a comprehensive overview of the Tag component's properties. diff --git a/app/docs/components/tag/TagApi.ts b/app/docs/components/tag/TagApi.ts index b69e4805..46b3dab5 100644 --- a/app/docs/components/tag/TagApi.ts +++ b/app/docs/components/tag/TagApi.ts @@ -1,51 +1,16 @@ export const tagApiData = [ { id: 1, - propsName: 'leftIcon', - propsType: 'ReactNode', - propsDescription: 'Icon component displayed on the left side of the tag.', - default: '', - }, - { - id: 2, - propsName: 'dismissIcon', - propsType: 'ReactNode', - propsDescription: 'Icon component used for dismissing the tag.', - default: '', - }, - { - id: 3, - propsName: 'dismiss', - propsType: 'Boolean', - propsDescription: 'Determines if the tag can be dismissed.', + propsName: 'rounded', + propsType: 'boolean', + propsDescription: 'Tag with rounded corner', default: 'false', }, { - id: 4, + id: 2, propsName: 'disabled', propsType: 'Boolean', propsDescription: 'Disables interactions with the tag.', default: 'false', }, - { - id: 5, - propsName: 'color', - propsType: ['error', 'gray', 'info', 'success', 'warning', 'teal', 'purple'], - propsDescription: 'Specifies the color variant of the tag.', - default: 'gray', - }, - { - id: 6, - propsName: 'borderType', - propsType: ['solid', 'dashed'], - propsDescription: 'Sets the type of border for the tag.', - default: 'solid', - }, - { - id: 7, - propsName: 'onDismiss', - propsType: 'boolean | (() => void)', - propsDescription: 'Callback function when the tag is dismissed.', - default: 'Function', - }, ] diff --git a/app/docs/components/tag/page.tsx b/app/docs/components/tag/page.tsx index 1b2bc13d..fb831f94 100644 --- a/app/docs/components/tag/page.tsx +++ b/app/docs/components/tag/page.tsx @@ -1,10 +1,10 @@ import type { Metadata, NextPage } from 'next' -import { DocsContentLayout } from '../../../components/DocsContentLayout' import TagDocs from '.' +import { DocsContentLayout } from '../../../components/DocsContentLayout' export const metadata: Metadata = { description: - 'The Color Tag Component in the Keep React allows you to visually represent and label items with different colors. With customizable options for the type, close button, color, and border, you can create color tags that align with your design and provide a clear visual distinction.', + 'The Color Tag Component in the Keep React allows you to visually represent and label items. With customizable options for the style, icon.', title: 'Tag - Keep React', } diff --git a/app/docs/components/tag/variant/BothSideIconTag.tsx b/app/docs/components/tag/variant/BothSideIconTag.tsx deleted file mode 100644 index 33ef79ce..00000000 --- a/app/docs/components/tag/variant/BothSideIconTag.tsx +++ /dev/null @@ -1,157 +0,0 @@ -'use client' -import { useState } from 'react' -import { Tag } from '../../../../src' -import { CrownSimple, X } from 'phosphor-react' - -const BothSideIconTag = () => { - const [dismiss, setDismiss] = useState([false, false, false, false, false, false, false]) - - const handleDismiss = (index: number) => { - const updatedDismissStates = [...dismiss] - updatedDismissStates[index] = true - setDismiss(updatedDismissStates) - } - return ( -
- handleDismiss(1)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(2)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(3)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(4)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(5)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(6)} - leftIcon={} - dismissIcon={}> - Tag - - handleDismiss(0)} - leftIcon={} - dismissIcon={}> - Tag - -
- ) -} - -const BothSideIconTagCode = ` -"use client"; -import { Tag } from "keep-react"; -import { useState } from "react"; -import { CrownSimple, X } from "phosphor-react"; - -export const TagComponent = () => { - const [dismiss, setDismiss] = useState(false); - const onDismiss = () => { - setDismiss(!dismiss); - }; - return ( -
- } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - - } - dismissIcon={} - > - Tag - -
- ); -} -` - -export { BothSideIconTag, BothSideIconTagCode } diff --git a/app/docs/components/tag/variant/ColorsOfTag.tsx b/app/docs/components/tag/variant/ColorsOfTag.tsx deleted file mode 100644 index a3acee9e..00000000 --- a/app/docs/components/tag/variant/ColorsOfTag.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client' -import { Tag } from '../../../../src' - -const ColorsOfTag = () => { - return ( -
- Gray Tag - Error Tag - Info Tag - Success Tag - Warning Tag - Teal Tag - Purple Tag - Disabled Tag -
- ) -} - -const ColorsOfTagCode = ` -"use client"; -import { Tag } from "keep-react"; - -export const TagComponent = () => { - return ( -
- Gray Tag - Error Tag - Info Tag - Success Tag - Warning Tag - Teal Tag - Purple Tag - Disabled Tag -
- ); -} -` - -export { ColorsOfTag, ColorsOfTagCode } diff --git a/app/docs/components/tag/variant/DefaultTag.tsx b/app/docs/components/tag/variant/DefaultTag.tsx index 02ef3ce2..b85696a4 100644 --- a/app/docs/components/tag/variant/DefaultTag.tsx +++ b/app/docs/components/tag/variant/DefaultTag.tsx @@ -2,11 +2,7 @@ import { Tag } from '../../../../src' const DefaultTag = () => { - return ( -
- Default Tag -
- ) + return Default Tag } const DefaultTagCode = ` diff --git a/app/docs/components/tag/variant/DisabledTag.tsx b/app/docs/components/tag/variant/DisabledTag.tsx new file mode 100644 index 00000000..3ae5c688 --- /dev/null +++ b/app/docs/components/tag/variant/DisabledTag.tsx @@ -0,0 +1,17 @@ +'use client' +import { Tag } from '../../../../src' + +const DisabledTag = () => { + return Disabled Tag +} + +const DisabledTagCode = ` +'use client' +import { Tag } from 'keep-react' + +export const TagComponent = () => { + return Disabled Tag +} +` + +export { DisabledTag, DisabledTagCode } diff --git a/app/docs/components/tag/variant/LeftSideIconTag.tsx b/app/docs/components/tag/variant/LeftSideIconTag.tsx deleted file mode 100644 index 8b2e9a89..00000000 --- a/app/docs/components/tag/variant/LeftSideIconTag.tsx +++ /dev/null @@ -1,73 +0,0 @@ -'use client' -import { Tag } from '../../../../src' -import { CrownSimple } from 'phosphor-react' - -const LeftSideIconTag = () => { - return ( -
- } color="gray"> - Tag - - } color="error"> - Tag - - } color="info"> - Tag - - } color="success"> - Tag - - } color="warning"> - Tag - - } color="teal"> - Tag - - } color="purple"> - Tag - - } disabled={true}> - Tag - -
- ) -} - -const LeftSideIconTagCode = ` -"use client"; -import { Tag } from "keep-react"; -import { CrownSimple } from "phosphor-react"; - -export const TagComponent = () => { - return ( -
- } color="gray"> - Tag - - } color="error"> - Tag - - } color="info"> - Tag - - } color="success"> - Tag - - } color="warning"> - Tag - - } color="teal"> - Tag - - } color="purple"> - Tag - - } disabled={true}> - Tag - -
- ); -} -` - -export { LeftSideIconTag, LeftSideIconTagCode } diff --git a/app/docs/components/tag/variant/TagWithDashedBorder.tsx b/app/docs/components/tag/variant/TagWithDashedBorder.tsx deleted file mode 100644 index 247f9dd1..00000000 --- a/app/docs/components/tag/variant/TagWithDashedBorder.tsx +++ /dev/null @@ -1,173 +0,0 @@ -'use client' -import { useState } from 'react' -import { Tag } from '../../../../src' -import { CrownSimple, X } from 'phosphor-react' - -const TagWithDashedBorder = () => { - const [dismiss, setDismiss] = useState([false, false, false, false, false, false, false]) - - const handleDismiss = (index: number) => { - const updatedDismissStates = [...dismiss] - updatedDismissStates[index] = true - setDismiss(updatedDismissStates) - } - - return ( -
- handleDismiss(0)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(1)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(2)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - - handleDismiss(3)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(4)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(5)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - - handleDismiss(6)} - leftIcon={} - dismissIcon={} - borderType="dashed"> - Tag - -
- ) -} - -const TagWithDashedBorderCode = ` -"use client"; -import { useState } from "react"; -import { Tag } from "keep-react"; -import { CrownSimple, X } from "phosphor-react"; - -export const TagComponent = () => { - const [dismiss, setDismiss] = useState(false); - const onDismiss = () => { - setDismiss(!dismiss); - }; - return ( -
- } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - - } - dismissIcon={} - borderType="dashed" - > - Tag - -
- ); -} -` - -export { TagWithDashedBorder, TagWithDashedBorderCode } diff --git a/app/docs/components/tag/variant/TagWithIcon.tsx b/app/docs/components/tag/variant/TagWithIcon.tsx new file mode 100644 index 00000000..47527ab6 --- /dev/null +++ b/app/docs/components/tag/variant/TagWithIcon.tsx @@ -0,0 +1,50 @@ +'use client' +import { Clock, X } from 'phosphor-react' +import { Tag } from '../../../../src' + +const TagWithIcon = () => { + return ( +
+ + + Icon Tag + + + Icon Tag + + + + + Round Tag + +
+ ) +} + +const TagWithIconCode = ` +'use client' +import { Tag } from 'keep-react' +import { Clock, X } from 'phosphor-react' + +export const TagComponent = () => { + return ( +
+ + + Icon Tag + + + Icon Tag + + + + + Round Tag + +
+ ) +} + +` + +export { TagWithIcon, TagWithIconCode } diff --git a/app/src/components/Avatar/Avatar.tsx b/app/src/components/Avatar/Avatar.tsx index 1a81a1cf..c329df6a 100644 --- a/app/src/components/Avatar/Avatar.tsx +++ b/app/src/components/Avatar/Avatar.tsx @@ -23,7 +23,7 @@ const AvatarComponent: FC = forwardRef alt = 'avatar', size = 'xl', shape = 'circle', - color = 'primary', + color = 'secondary', active = false, verified = false, className, diff --git a/app/src/components/Tag/Tag.stories.tsx b/app/src/components/Tag/Tag.stories.tsx deleted file mode 100644 index 0be59430..00000000 --- a/app/src/components/Tag/Tag.stories.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import { CrownSimple, X } from 'phosphor-react' -import { Tag } from '.' - -const meta: Meta = { - component: Tag, - tags: ['autodocs'], - argTypes: { - color: { - control: 'select', - options: ['error', 'gray', 'info', 'success', 'warning', 'teal', 'purple'], - table: { - type: { - summary: 'error | gray | info | success | warning | teal | purple', - }, - defaultValue: { summary: 'gray' }, - }, - description: 'Available Tag colors', - }, - borderType: { - table: { - type: { summary: 'solid | dashed' }, - defaultValue: { summary: 'solid' }, - }, - description: 'Available Tag border type', - }, - dismiss: { - control: { type: 'boolean' }, - description: 'Tag show or not?', - }, - children: { - control: { - disable: true, - }, - table: { - type: { summary: 'ReactNode' }, - }, - description: 'Tag Text with JSX', - }, - leftIcon: { - control: { - disable: true, - }, - table: { - type: { summary: 'ReactNode' }, - }, - description: 'Tag Left side icon', - }, - dismissIcon: { - control: { - disable: true, - }, - table: { - type: { summary: 'ReactNode' }, - }, - description: 'Tag dismiss icon', - }, - onDismiss: { - control: { - disable: true, - }, - table: { - type: { summary: 'Function' }, - }, - description: 'Tag Handler', - }, - }, - decorators: [ - (Story) => ( -
- -
- ), - ], -} - -export default meta -type Story = StoryObj - -export const DefaultTag: Story = { - args: { - color: 'gray', - disabled: false, - borderType: 'solid', - dismiss: false, - leftIcon: null, - dismissIcon: null, - children: 'Default Tag', - }, -} - -export const ErrorTag: Story = { - args: { - ...DefaultTag.args, - color: 'error', - children: 'Error Tag', - }, -} -export const InfoTag: Story = { - args: { - ...DefaultTag.args, - color: 'info', - children: 'Info Tag', - }, -} -export const WarningTag: Story = { - args: { - ...DefaultTag.args, - color: 'warning', - children: 'Warning Tag', - }, -} -export const SuccessTag: Story = { - args: { - ...DefaultTag.args, - color: 'success', - children: 'Success Tag', - }, -} -export const TealTag: Story = { - args: { - ...DefaultTag.args, - color: 'teal', - children: 'Teal Tag', - }, -} -export const PurpleTag: Story = { - args: { - ...DefaultTag.args, - color: 'purple', - children: 'Purple Tag', - }, -} -export const DashedTag: Story = { - args: { - ...DefaultTag.args, - color: 'gray', - borderType: 'dashed', - children: 'Dashed Border', - }, -} -export const TagWithLeftSideIcon: Story = { - args: { - ...DefaultTag.args, - color: 'gray', - leftIcon: , - }, -} -export const TagWithBothSideIcon: Story = { - args: { - ...DefaultTag.args, - color: 'gray', - leftIcon: , - dismissIcon: , - }, -} -export const TagWithDashedBorder: Story = { - args: { - ...DefaultTag.args, - color: 'gray', - leftIcon: , - dismissIcon: , - borderType: 'dashed', - }, -} diff --git a/app/src/components/Tag/Tag.tsx b/app/src/components/Tag/Tag.tsx new file mode 100644 index 00000000..657831c9 --- /dev/null +++ b/app/src/components/Tag/Tag.tsx @@ -0,0 +1,29 @@ +'use client' +import { HTMLAttributes, Ref, forwardRef } from 'react' +import { cn } from '../../helpers/cn' + +interface TagProps extends HTMLAttributes { + disabled?: boolean + rounded?: boolean +} + +const Tag = forwardRef( + ({ children, className, disabled, rounded, ...props }, ref: Ref) => { + return ( + + {children} + + ) + }, +) + +Tag.displayName = 'Tag' +export { Tag } diff --git a/app/src/components/Tag/index.tsx b/app/src/components/Tag/index.tsx index 8445c868..b9d13fdf 100644 --- a/app/src/components/Tag/index.tsx +++ b/app/src/components/Tag/index.tsx @@ -1,110 +1 @@ -import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react' -import { cn } from '../../helpers/cn' -import { TagColors, tagTheme } from './theme' - -/** - * Props for the Tag component. - * @interface TagProps - * @extends {PropsWithChildren, 'color'>>} - */ -export interface TagProps extends PropsWithChildren, 'color'>> { - /** - * The left icon element to be displayed in the tag. - * @type {ReactNode} - * @default '' - */ - leftIcon?: ReactNode - - /** - * The dismiss icon element to be displayed in the tag. - * @type {ReactNode} - * @default '' - */ - dismissIcon?: ReactNode - - /** - * Determines whether the tag can be dismissed. - * @type {boolean} - * @default false - */ - dismiss?: boolean - - /** - * Determines whether the tag is disabled. - * @type {boolean} - * @default false - */ - disabled?: boolean - - /** - * The color of the tag. Can be one of the predefined TagColors. - * @type {keyof TagColors} - * @default 'gray' - */ - color?: keyof TagColors - - /** - * The type of border for the tag. Can be 'solid' or 'dashed'. - * @type {'solid' | 'dashed'} - * @default 'solid' - */ - borderType?: 'solid' | 'dashed' - - /** - * Callback function to be called when the tag is dismissed. - * If set to `true`, the tag will be dismissed automatically. - * @type {boolean | (() => void)} - * @default false - */ - onDismiss?: boolean | (() => void) - - /** - * Additional CSS class name for the tag. - * @type {string} - * @default '' - */ - className?: string -} - -export const Tag: FC = ({ - children, - color = 'gray', - borderType = 'solid', - leftIcon, - dismissIcon, - onDismiss, - dismiss = false, - disabled = false, - className, -}) => { - const theme = tagTheme - - return ( -
- {leftIcon && {leftIcon}} - - {children} - {onDismiss && typeof onDismiss === 'function' && ( - <> - {leftIcon && } - (disabled ? e.stopPropagation() : onDismiss())} - className={cn(!disabled && theme.disabled.off, !disabled && theme.children.colors[color])}> - {dismissIcon} - - - )} -
- ) -} - -Tag.displayName = 'Tag' +export { Tag } from './Tag' diff --git a/app/src/components/Tag/theme.ts b/app/src/components/Tag/theme.ts index 39c0b448..e69de29b 100644 --- a/app/src/components/Tag/theme.ts +++ b/app/src/components/Tag/theme.ts @@ -1,77 +0,0 @@ -import { KeepBoolean, KeepColors } from '../../Keep/KeepTheme' - -export interface keepTagTheme { - base: string - dismiss: string - disabled: KeepBoolean - icon: { - left: string - right: string - } - borderType: { - solid: string - dashed: string - } - color: TagColors - bar: { - base: string - color: TagColors - } - children: { - colors: TagColors - } -} - -export interface TagColors - extends Pick { - [key: string]: string -} - -export const tagTheme: keepTagTheme = { - base: 'flex items-center px-2 py-1 rounded', - dismiss: 'hidden', - disabled: { - on: 'opacity-50 cursor-not-allowed text-body-5 font-medium text-metal-500', - off: 'cursor-pointer', - }, - icon: { - left: 'pr-[6px]', - right: '', - }, - borderType: { - solid: 'border border-solid', - dashed: 'border border-dashed', - }, - color: { - error: 'bg-error-25 border-error-100', - gray: 'bg-metal-25 border-metal-200', - info: 'bg-primary-25 border-primary-200', - success: 'bg-success-25 border-success-200', - warning: 'bg-warning-25 border-warning-200', - teal: 'bg-teal-25 border-teal-200', - purple: 'bg-purple-25 border-purple-100', - }, - children: { - colors: { - error: 'text-body-5 font-medium text-error-500', - gray: 'text-body-5 font-medium text-metal-500', - info: 'text-body-5 font-medium text-primary-500', - success: 'text-body-5 font-medium text-success-500', - warning: 'text-body-5 font-medium text-warning-500', - teal: 'text-body-5 font-medium text-teal-500', - purple: 'text-body-5 font-medium text-purple-500', - }, - }, - bar: { - base: 'px-1.5 border w-3 h-0 rotate-90', - color: { - error: 'border-error-100', - gray: 'border-metal-200', - info: 'border-primary-200', - success: 'border-success-200', - warning: 'border-warning-200', - teal: 'border-teal-200', - purple: 'border-purple-100', - }, - }, -}
@@ -39,19 +39,19 @@ const ComponentApi: FC = ({ data }) => { {item.propsName} + {item.propsDescription} + {typeof item.propsType === 'string' ? item.propsType : item.propsType.map((prop) => ( - 
+                        
                           {prop}
                         

                       ))}
+ {item.default ? item.default : 'None'}