@cube-dev/ui-kit 0.0.0-canary-f2f75e5 → 0.0.0-canary-6f46707

package/es/stories/FormFieldArgs.js

@@ -0,0 +1,321 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
+ * Released under the MIT license.
+ */
+
+import { baseProps } from './lists/baseProps';
+export const DISABLE_BASE_ARGS = baseProps.reduce((map, prop) => {
+    map[prop] = { table: { disable: true } };
+    return map;
+}, {});
+export const LABEL_POSITION_ARG = {
+    labelPosition: {
+        description: 'The position of labels for each field.',
+        options: ['top', 'side'],
+        control: 'radio',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'top' },
+        },
+    },
+};
+export const LABEL_ARG = {
+    label: {
+        control: 'text',
+        description: 'The content to display as the label.',
+    },
+};
+export const EXTRA_ARG = {
+    extra: {
+        control: 'text',
+        description: 'The extra content to display next to the label.',
+    },
+};
+export const DESCRIPTION_ARG = {
+    description: {
+        control: 'text',
+        description: 'The description for the field.',
+    },
+};
+export const NECESSITY_INDICATOR_ARG = {
+    necessityIndicator: {
+        // defaultValue: 'icon',
+        description: 'Type of the necessity indicator',
+        options: ['icon', 'label', false],
+        control: 'radio',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'icon' },
+        },
+    },
+};
+export const MESSAGE_ARG = {
+    message: {
+        // defaultValue: '',
+        description: 'Validation error message',
+        control: 'text',
+    },
+};
+export const PLACEHOLDER_ARG = {
+    placeholder: {
+        // defaultValue: 'Placeholder',
+        control: 'text',
+    },
+};
+export const VALIDATION_STATE_ARG = {
+    validationState: {
+        // defaultValue: undefined,
+        description: 'Whether the input should display its "valid" or "invalid" visual styling.',
+        options: [undefined, 'valid', 'invalid'],
+        control: 'radio',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'top' },
+        },
+    },
+};
+export const IS_LOADING_ARG = {
+    isLoading: {
+        control: 'boolean',
+        description: 'Loading state with spinner. Also works as disabled',
+        // defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+export const AUTO_FOCUS_ARG = {
+    autoFocus: {
+        // defaultValue: false,
+        description: 'Whether the element should receive focus on render.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+export const IS_REQUIRED_ARG = {
+    isRequired: {
+        // defaultValue: false,
+        description: 'Whether user input is required on the input before form submission. Often paired with the necessityIndicator prop to add a visual indicator to the input.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+export const IS_READ_ONLY_ARG = {
+    isReadOnly: {
+        // defaultValue: false,
+        description: 'Whether the input can be selected but not changed by the user.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+export const IS_DISABLED_ARG = {
+    isDisabled: {
+        // defaultValue: false,
+        description: 'Whether the input is disabled.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+export const SIZE_ARG = {
+    size: {
+        // defaultValue: undefined,
+        description: 'The size of the button',
+        options: [undefined, 'default', 'small'],
+        control: 'radio',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'default' },
+        },
+    },
+};
+export const MULTILINE_ARG = {
+    multiLine: {
+        // defaultValue: false,
+        description: 'Whether the input is multiline.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+export const REQUIRED_MARK_ARG = {
+    requiredMark: {
+        // defaultValue: true,
+        description: 'Whether to show the required mark on labels.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: true },
+        },
+    },
+};
+export const TEXT_VALUE_ARG = {
+    value: {
+        defaultValue: undefined,
+        description: 'The text value in controlled mode',
+        control: 'text',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    defaultValue: {
+        defaultValue: undefined,
+        description: 'The default text value in uncontrolled mode',
+        control: 'text',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+};
+export const NUMBER_VALUE_ARG = {
+    value: {
+        defaultValue: undefined,
+        description: 'The number value in controlled mode',
+        control: 'text',
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+    defaultValue: {
+        defaultValue: undefined,
+        description: 'The default number value in uncontrolled mode',
+        control: 'text',
+        table: {
+            type: { summary: 'number' },
+        },
+    },
+};
+export const MULTIPLE_VALUE_ARG = {
+    value: {
+        defaultValue: undefined,
+        description: 'The multiple value in controlled mode',
+        control: 'object',
+        table: {
+            type: { summary: 'string[]' },
+        },
+    },
+    defaultValue: {
+        defaultValue: undefined,
+        description: 'The default multiple value in uncontrolled mode',
+        control: 'object',
+        table: {
+            type: { summary: 'string[]' },
+        },
+    },
+};
+export const MULTIPLE_NUMBER_VALUE_ARG = {
+    value: {
+        defaultValue: undefined,
+        description: 'The multiple value in controlled mode',
+        control: 'object',
+        table: {
+            type: { summary: 'number[]' },
+        },
+    },
+    defaultValue: {
+        defaultValue: undefined,
+        description: 'The default multiple value in uncontrolled mode',
+        control: 'object',
+        table: {
+            type: { summary: 'number[]' },
+        },
+    },
+};
+export const IS_SELECTED_ARG = {
+    isSelected: {
+        defaultValue: undefined,
+        description: 'Whether the input is selected in controlled mode',
+        control: {
+            type: 'radio',
+            options: [undefined, true, false],
+        },
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    defaultSelected: {
+        defaultValue: undefined,
+        description: 'Whether the input is selected by default in uncontrolled mode',
+        control: {
+            type: 'radio',
+            options: [undefined, true, false],
+        },
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+};
+export const IS_INDETERMINATE_ARG = {
+    isIndeterminate: {
+        defaultValue: undefined,
+        description: 'Whether the input is indeterminate in controlled mode',
+        control: {
+            type: 'radio',
+            options: [undefined, true, false],
+        },
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+};
+export const SELECTED_KEY_ARG = {
+    selectedKey: {
+        defaultValue: undefined,
+        description: 'The selected value in controlled mode',
+        control: 'text',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    defaultSelectedKey: {
+        defaultValue: undefined,
+        description: 'The default selected value in uncontrolled mode',
+        control: 'text',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+};
+export const ICON_ARG = {
+    icon: {
+        // defaultValue: true,
+        description: 'Whether to show an icon on the element',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: true },
+        },
+    },
+};
+
+        

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -0,0 +1,32 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DialogForm, Field, Paragraph, Input, Text, } from '../../index';
+export function ConfirmDeletionDialogForm(props) {
+    let { name, onSubmit, onDismiss } = props;
+    return (_jsxs(DialogForm, { title: "Delete Deployment", submitProps: {
+            label: 'Delete',
+            theme: 'danger',
+        }, cancelProps: {
+            label: 'I changed my mind',
+        }, onSubmit: onSubmit, onDismiss: onDismiss, children: [_jsxs(Paragraph, { children: ["To delete the instance, please, enter its full name:", ' ', _jsx(Text.Strong, { children: name }, void 0)] }, void 0), _jsx(Field, { name: "name", rules: [
+                    {
+                        required: true,
+                        message: 'This field is required',
+                    },
+                    {
+                        async validator(rule, value) {
+                            if (value !== name) {
+                                throw new Error('Incorrect name');
+                            }
+                        },
+                    },
+                ], children: _jsx(Input.Text, { placeholder: "Enter the name of the instance" }, void 0) }, void 0)] }, void 0));
+}
+
+        

package/es/stories/components/DialogFormApp.js

@@ -0,0 +1,15 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogTrigger } from '../../index';
+import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm';
+export function DialogFormApp() {
+    return (_jsxs(DialogTrigger, { children: [_jsx(Button, { children: "Delete the instance" }, void 0), _jsx(ConfirmDeletionDialogForm, { name: "instanceName" }, void 0)] }, void 0));
+}
+
+        

package/es/stories/components/StyledButton.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tasty } from '../../tasty';
+import { Button } from '../../components/actions';
+export const StyledButton = tasty(Button, {
+    styles: {
+        padding: '3x 6x',
+        preset: 't1',
+    },
+});
+export const GlobalStyledHeading = tasty('.myButton', {
+    display: 'inline-block',
+    padding: '1x 2x',
+    preset: 't2',
+    border: true,
+    radius: true,
+    fill: {
+        '': '#white',
+        ':hover': '#purple.20',
+    },
+    color: '#dark',
+});
+export function Block() {
+    return (_jsxs(_Fragment, { children: [_jsx(StyledButton, { children: "123" }, void 0), _jsx(GlobalStyledHeading, {}, void 0)] }, void 0));
+}
+
+        

package/es/stories/lists/baseProps.js

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
+ * Released under the MIT license.
+ */
+
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty';
+const allStyles = Array.from(new Set([
+    ...BASE_STYLES,
+    ...POSITION_STYLES,
+    ...CONTAINER_STYLES,
+    ...BLOCK_STYLES,
+    ...COLOR_STYLES,
+    ...FLOW_STYLES,
+    ...OUTER_STYLES,
+    ...DIMENSION_STYLES,
+    ...TEXT_STYLES,
+    ...POSITION_STYLES,
+]));
+export const baseProps = [
+    'qa',
+    'qaVal',
+    'block',
+    'inline',
+    'style',
+    'styles',
+    'css',
+    'styleName',
+    'hidden',
+    'disabled',
+    'mods',
+    'breakpoints',
+    'isHidden',
+    'element',
+    ...allStyles,
+];
+
+        

package/es/styled/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/styled/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -26,7 +26,7 @@ function styled(Component, options) {
             let contextBreakpoints = useContext(BreakpointsContext);
             let zones = pointsToZones(breakpoints || contextBreakpoints);
             let css = `${styles ? `\n{}${selector}{${renderStyles(styles, zones)}}` : ''}`;
-            return _jsx(Element, { css: css });
+            return _jsx(Element, { css: css }, void 0);
         };
         _Component.displayName = `CubeStyled(${Element.displayName ?? Element.name ?? Component})`;
         return _Component;
@@ -41,7 +41,7 @@ function styled(Component, options) {
                 }
                 return extendStyles;
             }, [styles]);
-            return (_jsx(Component, { ref: ref, ...legacyDefaultProps, ...defaultProps, ...restProps, styles: mergedStyles, styleName: styleName ?? name, as: as ?? extendTag }));
+            return (_jsx(Component, { ref: ref, ...legacyDefaultProps, ...defaultProps, ...restProps, styles: mergedStyles, styleName: styleName ?? name, as: as ?? extendTag }, void 0));
         });
         _StyledComponent.displayName = `CubeStyled(${getDisplayName(Component)})`;
         return _StyledComponent;
@@ -70,7 +70,7 @@ function styled(Component, options) {
         if (mods) {
             Object.assign(props, modAttrs(mods));
         }
-        return (_jsx(Element, { as: as ?? tag, "data-element": element, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...props, ref: ref, css: css }));
+        return (_jsx(Element, { as: as ?? tag, "data-element": element, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...props, ref: ref, css: css }, void 0));
     });
     _StyledComponent.displayName = `CubeStyled(${Element.displayName ?? Element.name ?? tag})`;
     return _StyledComponent;

package/es/tasty/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/providers/BreakpointsProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { createContext } from 'react';
 // Default breakpoints mirror Bootstrap defaults without md and xxl breakpoints.
 export const BreakpointsContext = createContext([980]);
 export function BreakpointsProvider({ value, children, }) {
-    return (_jsx(BreakpointsContext.Provider, { value: value, children: children }));
+    return (_jsx(BreakpointsContext.Provider, { value: value, children: children }, void 0));
 }
 
         

package/es/tasty/styles/align.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/border.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/boxShadow.combinator.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/color.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/createStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/dimension.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/display.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fill.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/font.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fontStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/gap.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/groupRadius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/height.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */
 

package/es/tasty/styles/justify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-f2f75e5
+ * @cube-dev/ui-kit v0.0.0-canary-6f46707
  * Released under the MIT license.
  */