@spaced-out/genesis-mcp 1.0.8 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/design-system.json +7 -7
- package/package.json +1 -1
package/data/design-system.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"buildDate": "2026-
|
|
4
|
-
"version": "0.5.
|
|
3
|
+
"buildDate": "2026-02-11T12:25:42.512Z",
|
|
4
|
+
"version": "0.5.45",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -602,11 +602,11 @@
|
|
|
602
602
|
"files": {
|
|
603
603
|
"main": {
|
|
604
604
|
"path": "Checklist.d.ts",
|
|
605
|
-
"content": "import * as React from 'react';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n header?: string;\n wrapper?: string;\n content?: string;\n listItemContainer?: string;\n cardContentContainer?: string;\n}>;\nexport interface ChecklistItem {\n label: React.ReactNode;\n key: string;\n iconLeftName?: string;\n iconLeftType?: IconType;\n iconLeftColor?: ColorTypes;\n iconLeftSize?: IconSize;\n disabled?: boolean;\n rightSlot?: React.ReactNode;\n onExpand?: (item: ChecklistItem) => void;\n}\nexport interface
|
|
605
|
+
"content": "import * as React from 'react';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n header?: string;\n footer?: string;\n wrapper?: string;\n content?: string;\n listItemContainer?: string;\n cardContentContainer?: string;\n}>;\nexport interface ChecklistItem {\n label: React.ReactNode;\n key: string;\n iconLeftName?: string;\n iconLeftType?: IconType;\n iconLeftColor?: ColorTypes;\n iconLeftSize?: IconSize;\n disabled?: boolean;\n rightSlot?: React.ReactNode;\n onExpand?: (item: ChecklistItem) => void;\n}\nexport interface ChecklistBaseProps {\n classNames?: ClassNames;\n isOpen?: boolean;\n testId?: string;\n title: React.ReactNode;\n rightSlot?: React.ReactNode;\n footer?: React.ReactNode;\n hideChecklistItemExpandButton?: boolean;\n}\ninterface ChecklistWithChildren extends ChecklistBaseProps {\n children: React.ReactNode;\n listItems?: never;\n}\ninterface ChecklistWithListItems extends ChecklistBaseProps {\n listItems: Array<ChecklistItem>;\n children?: never;\n}\nexport type ChecklistProps = ChecklistWithChildren | ChecklistWithListItems;\nexport interface ChecklistProgressBarProps {\n classNames?: {\n wrapper?: string;\n container?: string;\n bar?: string;\n };\n totalItems: number;\n completedItems: number;\n showLoadingBar?: boolean;\n}\nexport declare const ChecklistProgressBar: React.ForwardRefExoticComponent<ChecklistProgressBarProps & React.RefAttributes<HTMLDivElement>>;\nexport declare const Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLDivElement>>;\nexport {};\n//# sourceMappingURL=Checklist.d.ts.map"
|
|
606
606
|
},
|
|
607
607
|
"story": {
|
|
608
608
|
"path": "Checklist.stories.tsx",
|
|
609
|
-
"content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {\n ChecklistItem,\n ChecklistProps,\n} from 'src/components/Checklist/Checklist';\nimport {\n Checklist,\n ChecklistProgressBar,\n} from 'src/components/Checklist/Checklist';\nimport {Link} from 'src/components/Link';\n\nimport css from 'src/components/Checklist/Checklist.stories.module.css';\n\n\nconst meta = {\n tags: ['autodocs'],\n title: 'AI Prompt Components/Checklist',\n component: Checklist,\n argTypes: {\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper and content',\n control: {type: 'object'},\n table: {\n type: {summary
|
|
609
|
+
"content": "import * as React from 'react';\n\nimport {Button} from 'src/components/Button';\nimport type {\n ChecklistItem,\n ChecklistProps,\n} from 'src/components/Checklist/Checklist';\nimport {\n Checklist,\n ChecklistProgressBar,\n} from 'src/components/Checklist/Checklist';\nimport {Link} from 'src/components/Link';\nimport {BodySmall, SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/Checklist/Checklist.stories.module.css';\n\n\nconst meta = {\n tags: ['autodocs'],\n title: 'AI Prompt Components/Checklist',\n component: Checklist,\n argTypes: {\n classNames: {\n description:\n 'Provide an optional className to be applied to the wrapper and content',\n control: {type: 'object'},\n table: {\n type: {\n summary:\n '{ header?: string, footer?: string, wrapper?: string, content?: string, listItemContainer?: string, cardContentContainer?: string }',\n },\n },\n },\n listItems: {\n description:\n 'The list of items to be displayed in the checklist. ChecklistItem can have label, key, iconLeftName, iconLeftType, iconLeftColor, iconLeftSize, disabled, rightSlot, onExpand properties.',\n control: {type: 'object'},\n table: {\n type: {summary: 'Array<ChecklistItem>'},\n },\n },\n isOpen: {\n description: 'Whether the checklist is open or closed',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n title: {\n description: 'The title of the checklist',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n rightSlot: {\n description: 'The right slot of the checklist header.',\n control: {type: 'object'},\n table: {\n type: {summary: 'React.ReactNode'},\n },\n },\n children: {\n description: 'Renders children in place of list items.',\n control: {type: 'object'},\n table: {\n type: {summary: 'React.ReactNode'},\n },\n },\n footer: {\n description:\n 'The footer of the checklist card content. It is displayed at the bottom of the checklist card.',\n control: {type: 'object'},\n table: {\n type: {summary: 'React.ReactNode'},\n },\n },\n hideChecklistItemExpandButton: {\n description:\n 'If **true**, the expand button will not be displayed in any checklist item.',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a Checklist component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { Checklist, ChecklistProgressBar } from \"@spaced-out/ui-design-system/lib/components/Checklist\";\n\\`\\`\\`\nSome description about the component in MDX format. Don't change the indentation of this block.\nIt should start from extreme left.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Checklist/Checklist.tsx',\n },\n },\n};\n\nexport default meta;\n\nconst listItems = [\n {\n label: 'Data Collection',\n key: 'dataCollection',\n },\n {\n label: 'Scheduling',\n key: 'scheduling',\n },\n {\n label: 'Add a dynamic trigger',\n key: 'addDynamicTrigger',\n },\n {\n label: 'Add a new module',\n key: 'addNewModule',\n },\n {\n label: 'Add a new channel',\n key: 'addNewChannel',\n },\n {\n label: 'Channel configuration',\n key: 'channelConfiguration',\n },\n {\n label: 'Module configuration',\n key: 'moduleConfiguration',\n },\n {\n label: 'Module member configuration',\n key: 'moduleMemberConfiguration',\n },\n {\n label: 'Module execution',\n key: 'moduleExecution',\n },\n];\n\nconst checklistTitle = 'Module and Channel Configuration';\n\nexport const ChecklistStory = (args: ChecklistProps) => (\n <div className={css.container}>\n <Checklist {...args} />\n </div>\n);\n\nChecklistStory.args = {\n title: checklistTitle,\n rightSlot: (\n <ChecklistProgressBar totalItems={listItems.length} completedItems={0} />\n ),\n footer: (\n <div className={css.footerContainer}>\n <Button size=\"small\" type=\"tertiary\" isFluid>\n Ignore All ({listItems.length})\n </Button>\n <Button size=\"small\" isFluid>\n View All ({listItems.length})\n </Button>\n </div>\n ),\n listItems: listItems.map((item) => ({\n ...item,\n iconLeftName: 'warning',\n iconLeftType: 'solid',\n })) as ChecklistItem[],\n};\n\nChecklistStory.storyName = 'Checklist';\n\nexport const ChecklistInProgress = ({\n children: _children,\n ...args\n}: ChecklistProps) => {\n const [completedItems, setCompletedItems] = React.useState(0);\n const totalItems = 9;\n const [listItemsLocal, setListItemsLocal] = React.useState(listItems);\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n if (completedItems >= totalItems) {\n clearInterval(interval);\n return;\n }\n setCompletedItems((prev) => prev + 1);\n setListItemsLocal(\n listItemsLocal.map((item, idx) => ({\n ...item,\n iconLeftName: idx <= completedItems ? 'check-circle' : 'spinner',\n iconLeftType: 'solid',\n iconLeftColor: idx <= completedItems ? 'success' : 'tertiary',\n })),\n );\n }, 1000);\n return () => clearInterval(interval);\n }, [completedItems]);\n\n return (\n <div className={css.container}>\n <Checklist\n {...args}\n isOpen\n listItems={listItemsLocal}\n rightSlot={\n <ChecklistProgressBar\n totalItems={listItems.length}\n completedItems={completedItems}\n showLoadingBar\n />\n }\n />\n </div>\n );\n};\n\nChecklistInProgress.args = {\n title: checklistTitle,\n footer: (\n <div className={css.footerContainer}>\n <Button size=\"small\" type=\"tertiary\" isFluid>\n Ignore All ({listItems.length})\n </Button>\n <Button size=\"small\" isFluid>\n View All ({listItems.length})\n </Button>\n </div>\n ),\n};\n\nChecklistInProgress.storyName = 'Checklist In Progress';\n\nexport const ChecklistWithItemRightSlot = (args: ChecklistProps) => (\n <div className={css.container}>\n <Checklist {...args} />\n </div>\n);\n\nChecklistWithItemRightSlot.args = {\n title: checklistTitle,\n listItems: listItems.map((item) => ({\n ...item,\n iconLeftName: 'warning',\n iconLeftType: 'solid',\n rightSlot: (\n <Link as=\"bodyMedium\" underline color=\"primary\">\n Recheck\n </Link>\n ),\n })) as ChecklistItem[],\n footer: (\n <div className={css.footerContainer}>\n <Button size=\"small\" type=\"tertiary\" isFluid>\n Ignore All ({listItems.length})\n </Button>\n <Button size=\"small\" isFluid>\n View All ({listItems.length})\n </Button>\n </div>\n ),\n};\n\nChecklistWithItemRightSlot.storyName = 'Checklist With Item Right Slot';\n\nexport const ChecklistWithCustomContent = (args: ChecklistProps) => (\n <div className={css.container}>\n <Checklist {...args} />\n </div>\n);\n\nChecklistWithCustomContent.args = {\n title: checklistTitle,\n children: (\n <div>\n <SubTitleSmall>Multiple Actions</SubTitleSmall>\n <BodySmall>\n This card accordion demonstrates a footer with multiple action buttons.\n This pattern is useful when you need to provide several action options\n to the user.\n </BodySmall>\n </div>\n ),\n footer: (\n <div className={css.footerContainer}>\n <Button size=\"small\" type=\"tertiary\" isFluid>\n Ignore All ({listItems.length})\n </Button>\n <Button size=\"small\" isFluid>\n View All ({listItems.length})\n </Button>\n </div>\n ),\n};\n\nChecklistWithCustomContent.storyName = 'Checklist With Custom Content';\n"
|
|
610
610
|
},
|
|
611
611
|
"css": {
|
|
612
612
|
"path": "Checklist.module.css",
|
|
@@ -1463,15 +1463,15 @@
|
|
|
1463
1463
|
"files": {
|
|
1464
1464
|
"main": {
|
|
1465
1465
|
"path": "KPIBox.d.ts",
|
|
1466
|
-
"content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AlertSemanticType } from '../../types/common';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n topFoldContent?: string;\n middleFoldContent?: string;\n bottomFoldContent?: string;\n textContainer?: string;\n}>;\nexport interface KPIBoxProps {\n classNames?: ClassNames;\n semantic?: AlertSemanticType;\n topContent?: React.ReactNode;\n middleContent?: React.ReactNode;\n bottomContent?: React.ReactNode;\n iconName?: string;\n iconSize?: IconSize;\n iconType?: IconType;\n testId?: string;\n}\nexport declare const KPIBox: Flow.AbstractComponent<KPIBoxProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=KPIBox.d.ts.map"
|
|
1466
|
+
"content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { AlertSemanticType } from '../../types/common';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n topFoldContent?: string;\n middleFoldContent?: string;\n bottomFoldContent?: string;\n textContainer?: string;\n}>;\nexport interface KPIBoxProps {\n classNames?: ClassNames;\n semantic?: AlertSemanticType;\n topContent?: React.ReactNode;\n middleContent?: React.ReactNode;\n bottomContent?: React.ReactNode;\n iconName?: string;\n iconSize?: IconSize;\n iconType?: IconType;\n onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n testId?: string;\n}\nexport declare const KPIBox: Flow.AbstractComponent<KPIBoxProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=KPIBox.d.ts.map"
|
|
1467
1467
|
},
|
|
1468
1468
|
"story": {
|
|
1469
1469
|
"path": "KPIBox.stories.tsx",
|
|
1470
|
-
"content": "import * as React from 'react';\n\n// import {ALERT_SEMANTIC} from '../../types/common';\nimport {Icon} from 'src/components/Icon';\nimport type {KPIBoxProps} from 'src/components/KPIBox';\nimport {KPIBox} from 'src/components/KPIBox';\nimport {SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/KPIBox/KPIBox.stories.module.css';\n\n// const semanticOptions: Array<mixed> = [...Object.values(ALERT_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Data Viz/KPI',\n component: KPIBox,\n argTypes: {\n // Uncomment when we encourage having semantic KPI Boxes\n // semantic: {\n // description:\n // 'The semantic type of the KPIBox (e.g., success, warning, danger, etc.).',\n // control: {\n // type: 'select',\n // },\n // options: semanticOptions,\n // table: {\n // type: {\n // summary: 'AlertSemanticType',\n // },\n // defaultValue: {summary: 'neutral'},\n // },\n // },\n topContent: {\n description: 'Content to be displayed at the top of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n middleContent: {\n description: 'Content to be displayed in the middle of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n bottomContent: {\n description: 'Content to be displayed at the bottom of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n semantic: {\n description: 'Semantic of the icon to be displayed in the KPIBox.',\n options: ['danger', 'information', 'neutral', 'success', 'warning'],\n control: {\n type: 'select',\n },\n table: {\n type: {\n summary: 'AlertSemanticType',\n defaultValue: {summary: 'neutral'},\n },\n },\n },\n iconName: {\n description: 'Name of the icon to be displayed in the KPIBox.',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n iconSize: {\n description: 'Size of the icon in the KPIBox.',\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n table: {\n type: {\n summary: 'IconSize',\n },\n defaultValue: {summary: 'medium'},\n },\n },\n iconType: {\n description: 'Type of the icon (e.g., outline, solid, duotone).',\n control: {\n type: 'select',\n },\n options: ['regular', 'solid', 'duotone', 'brands'],\n table: {\n type: {\n summary: 'IconType',\n },\n defaultValue: {summary: 'solid'},\n },\n },\n classNames: {\n description:\n 'Additional CSS classes to customize the appearance of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a KPIBox component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { KPIBox } from \"@spaced-out/ui-design-system/lib/components/KPIBox\";\n\\`\\`\\`\nThe KPIBox component is designed to display Key Performance\nIndicators (KPIs) with customizable content and icons.\nIt is commonly used in dashboard and reporting applications to highlight\nimportant metrics and data.\n\n### Usage\n\n\\`\\`\\`jsx\n<KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={(\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n )}\n iconName=\"chart-bar\"\n iconSize=\"medium\"\n iconType=\"solid\"\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n.bottomContent {\n display: flex;\n gap: spaceXXSmall;\n align-items: flex-start;\n}\n\\`\\`\\`\n\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/KPIBox/KPIBox',\n },\n },\n};\n\nexport const KPIStory = (args: KPIBoxProps) => (\n <>\n <SubTitleSmall>Customizable</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox {...args} />\n </div>\n <SubTitleSmall>Variations</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n testId=\"kpi-box-variation-1\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n testId=\"kpi-box-variation-2\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n testId=\"kpi-box-variation-3\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-4\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-5\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-6\"\n />\n </div>\n {/* Uncomment when we encourage having semantic KPI Boxes */}\n {/* <SubTitleSmall>Semantics</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n />\n\n <KPIBox\n semantic=\"information\"\n topContent=\"Website Visits\"\n middleContent=\"10,000\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-mixed\" color=\"information\" />\n <span>15% (1,500 total)</span>\n </div>\n }\n iconName=\"globe\"\n />\n\n <KPIBox\n semantic=\"warning\"\n topContent=\"Pending Orders\"\n middleContent=\"15\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-area\" color=\"warning\" />\n <span>20% (3,000 total)</span>\n </div>\n }\n iconName=\"exclamation-triangle\"\n />\n\n <KPIBox\n semantic=\"success\"\n topContent=\"New Subscribers\"\n middleContent=\"5,678\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>8% (800 total)</span>\n </div>\n }\n iconName=\"user-plus\"\n />\n\n <KPIBox\n semantic=\"danger\"\n topContent=\"Critical Errors\"\n middleContent=\"3\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-line-down\" color=\"danger\" />\n <span>12% (1,200 total)</span>\n </div>\n }\n iconName=\"bug\"\n />\n </div> */}\n </>\n);\n\nKPIStory.args = {\n topContent: 'Total Users',\n middleContent: '10,000',\n bottomContent: (\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>10% (1,000 total)</span>\n </div>\n ) as React.ReactElement<React.ComponentProps<'div'>>,\n iconName: 'users',\n iconType: 'duotone',\n testId: 'kpi-box-story',\n};\nKPIStory.storyName = 'KPI';\n"
|
|
1470
|
+
"content": "import * as React from 'react';\n\n// import {ALERT_SEMANTIC} from '../../types/common';\nimport {Icon} from 'src/components/Icon';\nimport type {KPIBoxProps} from 'src/components/KPIBox';\nimport {KPIBox} from 'src/components/KPIBox';\nimport {SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/KPIBox/KPIBox.stories.module.css';\n\n// const semanticOptions: Array<mixed> = [...Object.values(ALERT_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Data Viz/KPI',\n component: KPIBox,\n argTypes: {\n // Uncomment when we encourage having semantic KPI Boxes\n // semantic: {\n // description:\n // 'The semantic type of the KPIBox (e.g., success, warning, danger, etc.).',\n // control: {\n // type: 'select',\n // },\n // options: semanticOptions,\n // table: {\n // type: {\n // summary: 'AlertSemanticType',\n // },\n // defaultValue: {summary: 'neutral'},\n // },\n // },\n topContent: {\n description: 'Content to be displayed at the top of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n middleContent: {\n description: 'Content to be displayed in the middle of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n bottomContent: {\n description: 'Content to be displayed at the bottom of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n semantic: {\n description: 'Semantic of the icon to be displayed in the KPIBox.',\n options: ['danger', 'information', 'neutral', 'success', 'warning'],\n control: {\n type: 'select',\n },\n table: {\n type: {\n summary: 'AlertSemanticType',\n defaultValue: {summary: 'neutral'},\n },\n },\n },\n iconName: {\n description: 'Name of the icon to be displayed in the KPIBox.',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n iconSize: {\n description: 'Size of the icon in the KPIBox.',\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n table: {\n type: {\n summary: 'IconSize',\n },\n defaultValue: {summary: 'medium'},\n },\n },\n iconType: {\n description: 'Type of the icon (e.g., outline, solid, duotone).',\n control: {\n type: 'select',\n },\n options: ['regular', 'solid', 'duotone', 'brands'],\n table: {\n type: {\n summary: 'IconType',\n },\n defaultValue: {summary: 'solid'},\n },\n },\n onClick: {\n description:\n '**onClick** handler applied to the root element. When provided, the KPIBox is clickable, shows a pointer cursor, and is keyboard accessible.',\n action: 'clicked',\n table: {\n type: {summary: '(e: React.MouseEvent<HTMLDivElement>) => void'},\n },\n },\n classNames: {\n description:\n 'Additional CSS classes to customize the appearance of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a KPIBox component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { KPIBox } from \"@spaced-out/ui-design-system/lib/components/KPIBox\";\n\\`\\`\\`\nThe KPIBox component is designed to display Key Performance\nIndicators (KPIs) with customizable content and icons.\nIt is commonly used in dashboard and reporting applications to highlight\nimportant metrics and data.\n\nOptional \\`onClick\\` makes the KPIBox clickable and keyboard accessible\n(role=\"button\", focusable via Tab, activated with Enter or Space).\n\n### Usage\n\n\\`\\`\\`jsx\n<KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={(\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n )}\n iconName=\"chart-bar\"\n iconSize=\"medium\"\n iconType=\"solid\"\n/>\n\\`\\`\\`\n\n### Clickable KPI\n\n\\`\\`\\`jsx\n<KPIBox\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n iconName=\"chart-bar\"\n onClick={() => { /* handle click */ }}\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n.bottomContent {\n display: flex;\n gap: spaceXXSmall;\n align-items: flex-start;\n}\n\\`\\`\\`\n\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/KPIBox/KPIBox',\n },\n },\n};\n\nexport const KPIStory = (args: KPIBoxProps) => (\n <>\n <SubTitleSmall>Customizable</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox {...args} />\n </div>\n <SubTitleSmall>Variations</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n testId=\"kpi-box-variation-1\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n testId=\"kpi-box-variation-2\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n testId=\"kpi-box-variation-3\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-4\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-5\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-6\"\n />\n </div>\n {/* Uncomment when we encourage having semantic KPI Boxes */}\n {/* <SubTitleSmall>Semantics</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n />\n\n <KPIBox\n semantic=\"information\"\n topContent=\"Website Visits\"\n middleContent=\"10,000\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-mixed\" color=\"information\" />\n <span>15% (1,500 total)</span>\n </div>\n }\n iconName=\"globe\"\n />\n\n <KPIBox\n semantic=\"warning\"\n topContent=\"Pending Orders\"\n middleContent=\"15\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-area\" color=\"warning\" />\n <span>20% (3,000 total)</span>\n </div>\n }\n iconName=\"exclamation-triangle\"\n />\n\n <KPIBox\n semantic=\"success\"\n topContent=\"New Subscribers\"\n middleContent=\"5,678\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>8% (800 total)</span>\n </div>\n }\n iconName=\"user-plus\"\n />\n\n <KPIBox\n semantic=\"danger\"\n topContent=\"Critical Errors\"\n middleContent=\"3\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-line-down\" color=\"danger\" />\n <span>12% (1,200 total)</span>\n </div>\n }\n iconName=\"bug\"\n />\n </div> */}\n </>\n);\n\nKPIStory.args = {\n topContent: 'Total Users',\n middleContent: '10,000',\n bottomContent: (\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>10% (1,000 total)</span>\n </div>\n ) as React.ReactElement<React.ComponentProps<'div'>>,\n iconName: 'users',\n iconType: 'duotone',\n testId: 'kpi-box-story',\n};\nKPIStory.storyName = 'KPI';\n\nexport const ClickableStory = (args: KPIBoxProps) => {\n const [clickCount, setClickCount] = React.useState(0);\n return (\n <>\n <SubTitleSmall>Click or focus and press Enter/Space</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n {...args}\n onClick={(e) => {\n args.onClick?.(e);\n setClickCount((c) => c + 1);\n }}\n />\n </div>\n {clickCount > 0 && (\n <SubTitleSmall>Clicked {clickCount} time(s)</SubTitleSmall>\n )}\n </>\n );\n};\nClickableStory.args = {\n topContent: 'Total Sales',\n middleContent: '$1,234,567',\n bottomContent: '5% (500 total)',\n iconName: 'chart-bar',\n iconType: 'solid',\n testId: 'kpi-box-clickable-story',\n};\nClickableStory.storyName = 'Clickable';\n"
|
|
1471
1471
|
},
|
|
1472
1472
|
"css": {
|
|
1473
1473
|
"path": "KPIBox.module.css",
|
|
1474
|
-
"content": "@value (\n colorBackgroundTertiary,\n colorTextSecondary,\n colorTextPrimary\n) from '../../styles/variables/_color.css';\n@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';\n@value (borderRadiusMedium) from '../../styles/variables/_border.css';\n@value (size60, size140, size252) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n composes: borderPrimary from '../../styles/border.module.css';\n min-width: size252;\n height: fit-content;\n align-items: center;\n gap: spaceSmall;\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n padding: spaceLarge spaceMedium;\n}\n\n.textContainer {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.topFoldContent,\n.middleFoldContent,\n.bottomFoldContent {\n display: flex;\n}\n\n.topFoldContent {\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.middleFoldContent {\n composes: jumboSmall from '../../styles/typography.module.css';\n color: colorTextPrimary;\n}\n\n.bottomFoldContent {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n"
|
|
1474
|
+
"content": "@value (\n colorBackgroundTertiary,\n colorFillPrimary,\n colorFocusPrimary,\n colorTextSecondary,\n colorTextPrimary,\n colorBorderSecondary\n) from '../../styles/variables/_color.css';\n@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';\n@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';\n@value (size60, size140, size252) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n composes: borderPrimary from '../../styles/border.module.css';\n min-width: size252;\n height: fit-content;\n align-items: center;\n gap: spaceSmall;\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n padding: spaceLarge spaceMedium;\n}\n\n.clickable {\n cursor: pointer;\n outline: none;\n}\n\n.clickable:hover {\n border-color: colorBorderSecondary;\n}\n\n.clickable:focus {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.textContainer {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.topFoldContent,\n.middleFoldContent,\n.bottomFoldContent {\n display: flex;\n}\n\n.topFoldContent {\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.middleFoldContent {\n composes: jumboSmall from '../../styles/typography.module.css';\n color: colorTextPrimary;\n}\n\n.bottomFoldContent {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n"
|
|
1475
1475
|
},
|
|
1476
1476
|
"index": {
|
|
1477
1477
|
"path": "index.d.ts",
|
package/package.json
CHANGED