@spaced-out/genesis-mcp 1.0.1 → 1.0.2
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": "2025-12-
|
|
4
|
-
"version": "0.5.
|
|
3
|
+
"buildDate": "2025-12-15T11:10:28.893Z",
|
|
4
|
+
"version": "0.5.36",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -260,11 +260,11 @@
|
|
|
260
260
|
"files": {
|
|
261
261
|
"main": {
|
|
262
262
|
"path": "Button.d.ts",
|
|
263
|
-
"content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n text?: string;\n}>;\n/**\n * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.\n * This only supports pre-defined gradient that moves from left to right.\n * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.\n *\n * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged\n * as it would add an additional overhead on the component to figure out exact color values from string tokens\n * and since this is rarely used type anyway, it should be avoided.\n */\nexport declare const BUTTON_TYPES: Readonly<{\n primary: \"primary\";\n secondary: \"secondary\";\n tertiary: \"tertiary\";\n ghost: \"ghost\";\n danger: \"danger\";\n gradient: \"gradient\";\n
|
|
263
|
+
"content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n icon?: string;\n text?: string;\n}>;\n/**\n * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.\n * This only supports pre-defined gradient that moves from left to right.\n * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.\n *\n * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged\n * as it would add an additional overhead on the component to figure out exact color values from string tokens\n * and since this is rarely used type anyway, it should be avoided.\n */\nexport declare const BUTTON_TYPES: Readonly<{\n primary: \"primary\";\n secondary: \"secondary\";\n tertiary: \"tertiary\";\n ghost: \"ghost\";\n danger: \"danger\";\n gradient: \"gradient\";\n tertiaryGradient: \"tertiaryGradient\";\n}>;\nexport declare const BUTTON_ACTION_TYPE: Readonly<{\n button: \"button\";\n submit: \"submit\";\n reset: \"reset\";\n}>;\nexport declare const BUTTON_SIZE: Readonly<{\n small: \"small\";\n medium: \"medium\";\n}>;\nexport type ButtonType = (typeof BUTTON_TYPES)[keyof typeof BUTTON_TYPES];\nexport type ButtonActionType = (typeof BUTTON_ACTION_TYPE)[keyof typeof BUTTON_ACTION_TYPE];\nexport type ButtonSize = keyof typeof BUTTON_SIZE;\nexport interface BaseButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'actionType' | 'onClick' | 'ariaLabel' | 'tabIndex' | 'isLoading' | 'role'> {\n children?: React.ReactNode;\n disabled?: boolean;\n actionType?: ButtonActionType;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n ariaLabel?: string;\n tabIndex?: number;\n isLoading?: boolean;\n role?: string;\n testId?: string;\n}\nexport interface UnstyledButtonProps extends Omit<BaseButtonProps, 'className'> {\n className?: string;\n}\nexport interface ButtonProps extends Omit<BaseButtonProps, 'classNames' | 'iconLeftName' | 'iconLeftType' | 'iconRightName' | 'iconRightType' | 'type' | 'isFluid' | 'size'> {\n classNames?: ClassNames;\n iconLeftName?: string;\n iconLeftType?: IconType;\n iconRightName?: string;\n iconRightType?: IconType;\n type?: ButtonType;\n isFluid?: boolean;\n size?: ButtonSize;\n}\nexport declare const UnstyledButton: Flow.AbstractComponent<UnstyledButtonProps, HTMLButtonElement>;\nexport declare const Button: Flow.AbstractComponent<ButtonProps, HTMLButtonElement>;\nexport {};\n//# sourceMappingURL=Button.d.ts.map"
|
|
264
264
|
},
|
|
265
265
|
"story": {
|
|
266
266
|
"path": "Button.stories.tsx",
|
|
267
|
-
"content": "import * as React from 'react';\n\nimport type {ButtonProps} from 'src/components/Button/Button';\nimport {\n Button,\n BUTTON_ACTION_TYPE,\n BUTTON_SIZE,\n BUTTON_TYPES,\n} from 'src/components/Button/Button';\n\n\nconst actionTypeOptions: Array<unknown> = [\n ...Object.values(BUTTON_ACTION_TYPE),\n];\nconst buttonTypeOptions: Array<unknown> = [...Object.values(BUTTON_TYPES)];\nconst buttonSizeOptions: Array<unknown> = [...Object.values(BUTTON_SIZE)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Button',\n component: Button,\n argTypes: {\n onClick: {\n description:\n '**onClick** handler that is applied to the root `<button>` element',\n action: 'clicked',\n table: {\n type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},\n },\n },\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{wrapper?: string, icon?: string, text?: string}'},\n },\n },\n iconLeftName: {\n description:\n 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconLeftType: {\n description:\n 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n iconRightName: {\n description:\n 'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconRightType: {\n description:\n 'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n type: {\n options: buttonTypeOptions,\n description: 'Type of Button. Supported types are listed on the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'primary'},\n },\n },\n actionType: {\n options: actionTypeOptions,\n description:\n 'Type of action to perform upon Button click. Supported types are listed on the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'submit'},\n },\n },\n size: {\n description:\n 'Button supports only two size variants namely small and medium. `small` < `medium`',\n options: buttonSizeOptions,\n control: {type: 'select'},\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n isLoading: {\n description:\n 'If **true**, the component would show a circular loader and also preserve the current size of button so that there are no jumps',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n isFluid: {\n description:\n 'If **true**, the component would take the container\\'s `width`',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n children: {\n description: 'The content of the Button',\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n ariaLabel: {\n control: {\n type: 'text',\n },\n description:\n '**aria-label** should be used where Button do not have have discernible text. This would avoid accessibility violations in screen readers',\n table: {\n type: {summary: 'string'},\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 Button component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Button } from \"@spaced-out/ui-design-system/lib/components/Button\";\n\\`\\`\\`\nButtons allow users to take actions. Button comes with multiple variants and has various states(hover, focus, etc). Variation also include\nan Icon only variant, it is rendered when no content(child) is passed to the button. An unstyled button is also present for one off use cases\nwhere we want to style the button differently.\n\n**Note: ** Always use \\`ariaLabel\\` with Icon only button for accessibility\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Button/Button',\n },\n },\n};\n\n/** Text only Button */\nexport const TextOnlyStory = (args: ButtonProps) => <Button {...args} />;\n\nTextOnlyStory.args = {\n children: 'Primary Button Text',\n type: 'primary',\n size: 'medium',\n testId: 'button-text-only-story',\n};\n\nexport const TextIconLeftStory = (args: ButtonProps) => <Button {...args} />;\n\nTextIconLeftStory.args = {\n children: 'Button Text',\n type: 'primary',\n size: 'medium',\n iconLeftName: 'face-party',\n testId: 'button-text-icon-left-story',\n};\n\nexport const TextIconRightStory = (args: ButtonProps) => <Button {...args} />;\n\nTextIconRightStory.args = {\n children: 'Button Text',\n type: 'primary',\n size: 'medium',\n iconRightName: 'face-party',\n testId: 'button-text-icon-right-story',\n};\n\nexport const IconOnlyStory = (args: ButtonProps) => <Button {...args} />;\n\nIconOnlyStory.args = {\n type: 'primary',\n size: 'medium',\n iconRightName: 'face-party',\n ariaLabel: 'Icon Button',\n testId: 'button-icon-only-story',\n};\n\nexport const GradientStory = (args: ButtonProps) => <Button {...args} />;\n\nGradientStory.args = {\n type: 'gradient',\n iconLeftName: 'sparkles',\n iconLeftType: 'solid',\n children: 'Sense AI',\n testId: 'button-gradient-story',\n};\n\nexport const TertiaryGradientStory = (args: ButtonProps) => (\n <Button {...args} />\n);\n\nTertiaryGradientStory.args = {\n type: '
|
|
267
|
+
"content": "import * as React from 'react';\n\nimport type {ButtonProps} from 'src/components/Button/Button';\nimport {\n Button,\n BUTTON_ACTION_TYPE,\n BUTTON_SIZE,\n BUTTON_TYPES,\n} from 'src/components/Button/Button';\n\n\nconst actionTypeOptions: Array<unknown> = [\n ...Object.values(BUTTON_ACTION_TYPE),\n];\nconst buttonTypeOptions: Array<unknown> = [...Object.values(BUTTON_TYPES)];\nconst buttonSizeOptions: Array<unknown> = [...Object.values(BUTTON_SIZE)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Components/Button',\n component: Button,\n argTypes: {\n onClick: {\n description:\n '**onClick** handler that is applied to the root `<button>` element',\n action: 'clicked',\n table: {\n type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},\n },\n },\n classNames: {\n description: 'External classNames to be applied',\n control: {\n type: 'object',\n },\n table: {\n type: {summary: '{wrapper?: string, icon?: string, text?: string}'},\n },\n },\n iconLeftName: {\n description:\n 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconLeftType: {\n description:\n 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n iconRightName: {\n description:\n 'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n iconRightType: {\n description:\n 'Type of Right Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',\n options: ['regular', 'solid', 'duotone', 'brands'],\n control: {type: 'select'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'regular'},\n },\n },\n type: {\n options: buttonTypeOptions,\n description: 'Type of Button. Supported types are listed on the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'primary'},\n },\n },\n actionType: {\n options: actionTypeOptions,\n description:\n 'Type of action to perform upon Button click. Supported types are listed on the dropdown',\n control: {\n type: 'select',\n },\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'submit'},\n },\n },\n size: {\n description:\n 'Button supports only two size variants namely small and medium. `small` < `medium`',\n options: buttonSizeOptions,\n control: {type: 'select'},\n table: {\n type: {summary: 'enum'},\n defaultValue: {summary: 'medium'},\n },\n },\n disabled: {\n description: 'If **true**, the component is disabled',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n isLoading: {\n description:\n 'If **true**, the component would show a circular loader and also preserve the current size of button so that there are no jumps',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n isFluid: {\n description:\n 'If **true**, the component would take the container\\'s `width`',\n control: {\n type: 'boolean',\n },\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n children: {\n description: 'The content of the Button',\n table: {\n type: {summary: 'React.Component | string'},\n },\n },\n ariaLabel: {\n control: {\n type: 'text',\n },\n description:\n '**aria-label** should be used where Button do not have have discernible text. This would avoid accessibility violations in screen readers',\n table: {\n type: {summary: 'string'},\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 Button component',\n description: {\n component: `\n\\`\\`\\`js\nimport { Button } from \"@spaced-out/ui-design-system/lib/components/Button\";\n\\`\\`\\`\nButtons allow users to take actions. Button comes with multiple variants and has various states(hover, focus, etc). Variation also include\nan Icon only variant, it is rendered when no content(child) is passed to the button. An unstyled button is also present for one off use cases\nwhere we want to style the button differently.\n\n**Note: ** Always use \\`ariaLabel\\` with Icon only button for accessibility\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/Button/Button',\n },\n },\n};\n\n/** Text only Button */\nexport const TextOnlyStory = (args: ButtonProps) => <Button {...args} />;\n\nTextOnlyStory.args = {\n children: 'Primary Button Text',\n type: 'primary',\n size: 'medium',\n testId: 'button-text-only-story',\n};\n\nexport const TextIconLeftStory = (args: ButtonProps) => <Button {...args} />;\n\nTextIconLeftStory.args = {\n children: 'Button Text',\n type: 'primary',\n size: 'medium',\n iconLeftName: 'face-party',\n testId: 'button-text-icon-left-story',\n};\n\nexport const TextIconRightStory = (args: ButtonProps) => <Button {...args} />;\n\nTextIconRightStory.args = {\n children: 'Button Text',\n type: 'primary',\n size: 'medium',\n iconRightName: 'face-party',\n testId: 'button-text-icon-right-story',\n};\n\nexport const IconOnlyStory = (args: ButtonProps) => <Button {...args} />;\n\nIconOnlyStory.args = {\n type: 'primary',\n size: 'medium',\n iconRightName: 'face-party',\n ariaLabel: 'Icon Button',\n testId: 'button-icon-only-story',\n};\n\nexport const GradientStory = (args: ButtonProps) => <Button {...args} />;\n\nGradientStory.args = {\n type: 'gradient',\n iconLeftName: 'sparkles',\n iconLeftType: 'solid',\n children: 'Sense AI',\n testId: 'button-gradient-story',\n};\n\nexport const TertiaryGradientStory = (args: ButtonProps) => (\n <Button {...args} />\n);\n\nTertiaryGradientStory.args = {\n type: 'tertiaryGradient',\n iconLeftName: 'sparkles',\n iconLeftType: 'solid',\n children: 'Sense AI',\n testId: 'button-tertiary-gradient-story',\n};\n\nTextOnlyStory.storyName = 'Text Only';\nTextIconLeftStory.storyName = 'Text Icon Left';\nTextIconRightStory.storyName = 'Text Icon Right';\nIconOnlyStory.storyName = 'Icon Only';\nGradientStory.storyName = 'Gradient';\nTertiaryGradientStory.storyName = 'Tertiary Gradient';\n"
|
|
268
268
|
},
|
|
269
269
|
"css": {
|
|
270
270
|
"path": "Button.module.css",
|
package/package.json
CHANGED