@spaced-out/genesis-mcp 1.0.8 → 1.0.9
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 +4 -4
- package/package.json +1 -1
package/data/design-system.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"buildDate": "2026-01-
|
|
4
|
-
"version": "0.5.
|
|
3
|
+
"buildDate": "2026-01-29T09:22:44.982Z",
|
|
4
|
+
"version": "0.5.44",
|
|
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",
|
package/package.json
CHANGED