@cube-dev/ui-kit 0.9.5 → 0.9.8

package/es/stories/FormFieldArgs.js

@@ -0,0 +1,285 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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: {
+        // defaultValue: 'Field label',
+        control: 'text',
+        description: 'The content to display as 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 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' },
+        },
+    },
+};
+
+        

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { DialogForm, Field, Paragraph, Input, Text, } from '../../index';
+export const ConfirmDeletionDialogForm = forwardRef((props, ref) => {
+    let { name, onSubmit, onDismiss } = props;
+    return (_jsxs(DialogForm, { ref: ref, title: "Delete Deployment", onSubmit: onSubmit, onDismiss: onDismiss, submitProps: {
+            label: 'Delete',
+            theme: 'danger',
+        }, cancelProps: {
+            label: 'I changed my mind',
+        }, 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,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button } from '../../index';
+import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm';
+export function DialogFormApp() {
+    const ConfirmDeletionDialogFormRef = useRef(null);
+    function onConfirm() {
+        console.log('Deletion is confirmed');
+    }
+    function onDismiss() {
+        console.log('Deletion is cancelled');
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onPress: () => { var _a; return (_a = ConfirmDeletionDialogFormRef === null || ConfirmDeletionDialogFormRef === void 0 ? void 0 : ConfirmDeletionDialogFormRef.current) === null || _a === void 0 ? void 0 : _a.open(); }, children: "Delete the instance" }, void 0), _jsx(ConfirmDeletionDialogForm, { ref: ConfirmDeletionDialogFormRef, name: "instanceName", onSubmit: onConfirm, onDismiss: onDismiss }, 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.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '../../styled';
+import { Button } from '../../components/actions';
+export const StyledButton = styled(Button, {
+    styles: {
+        padding: '3x 6x',
+        preset: 't1',
+    },
+});
+export const GlobalStyledHeading = styled('div.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.9.8
+ * Released under the MIT license.
+ */
+
+import { BASE_STYLES, CONTAINER_STYLES, BLOCK_STYLES, COLOR_STYLES, FLOW_STYLES, OUTER_STYLES, DIMENSION_STYLES, TEXT_STYLES, POSITION_STYLES, } from '../../styles/list';
+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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+export * from './styled';
+
+        

package/es/styled/styled.js

@@ -0,0 +1,85 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import styledComponents, { createGlobalStyle } from 'styled-components';
+import { forwardRef, useContext, useMemo } from 'react';
+import { isValidElementType } from 'react-is';
+import { BreakpointsContext } from '../providers/BreakpointsProvider';
+import { modAttrs } from '../utils/react';
+import { useContextStyles } from '../providers/StylesProvider';
+import { renderStyles } from '../utils/renderStyles';
+import { pointsToZones } from '../utils/responsive';
+import { BASE_STYLES } from '../styles/list';
+import { mergeStyles } from '../utils/mergeStyles';
+import { deprecationWarning } from '../utils/warnings';
+// Implementation
+function styled(Component, options) {
+    var _a, _b, _c, _d, _e, _f;
+    deprecationWarning((options === null || options === void 0 ? void 0 : options.props) == null, {
+        property: 'props',
+        name: 'styled api',
+        betterAlternative: "inline props directly in styled(), eg: styled({ type: 'confirm' })",
+    });
+    if (typeof Component === 'string') {
+        let selector = Component;
+        let styles = options;
+        let Element = createGlobalStyle `${(css) => css}`;
+        const _Component = ({ breakpoints }) => {
+            let contextBreakpoints = useContext(BreakpointsContext);
+            let zones = pointsToZones(breakpoints || contextBreakpoints);
+            let css = `${styles ? `\n{}${selector}{${renderStyles(styles, zones)}}` : ''}`;
+            return _jsx(Element, { css: css }, void 0);
+        };
+        _Component.displayName = `CubeStyled(${(_b = (_a = Element.displayName) !== null && _a !== void 0 ? _a : Element.name) !== null && _b !== void 0 ? _b : Component})`;
+        return _Component;
+    }
+    if (isValidElementType(Component)) {
+        let { styles: extendStyles, props: legacyDefaultProps, name, tag: extendTag, ...defaultProps } = options !== null && options !== void 0 ? options : {};
+        const _StyledComponent = forwardRef((props, ref) => {
+            const { styles, styleName, as, ...restProps } = props;
+            const mergedStyles = useMemo(() => {
+                if (extendStyles != null && styles != null) {
+                    return mergeStyles(extendStyles, styles);
+                }
+                return extendStyles;
+            }, [styles]);
+            return (_jsx(Component, { ref: ref, ...legacyDefaultProps, ...defaultProps, ...restProps, styles: mergedStyles, styleName: styleName !== null && styleName !== void 0 ? styleName : name, as: as !== null && as !== void 0 ? as : extendTag }, void 0));
+        });
+        _StyledComponent.displayName = `CubeStyled(${(_d = (_c = Component.displayName) !== null && _c !== void 0 ? _c : Component.name) !== null && _d !== void 0 ? _d : 'Anonymous'})`;
+        return _StyledComponent;
+    }
+    options = Component;
+    let { name, tag = 'div', css: defaultCSS, styles: defaultStyles, props: legacyDefaultProps, styleProps, ...defaultProps } = options;
+    let Element = styledComponents[tag](({ css }) => css);
+    let _StyledComponent = forwardRef((allProps, ref) => {
+        let { as, styles, styleName, breakpoints, mods, element, qa, qaVal, css, ...props } = allProps;
+        let propStyles = useMemo(() => (styleProps
+            ? styleProps.concat(BASE_STYLES)
+            : BASE_STYLES).reduce((map, prop) => {
+            if (prop in props) {
+                map[prop] = props[prop];
+                delete props[prop];
+            }
+            return map;
+        }, {}), [props]);
+        let contextStyles = useContextStyles(styleName !== null && styleName !== void 0 ? styleName : name, props);
+        let allStyles = useMemo(() => mergeStyles(defaultStyles, contextStyles, styles, propStyles), [contextStyles, styles, propStyles]);
+        let contextBreakpoints = useContext(BreakpointsContext);
+        let zones = pointsToZones(breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints);
+        css = `${typeof defaultCSS === 'function' ? defaultCSS(props) : defaultCSS !== null && defaultCSS !== void 0 ? defaultCSS : ''}${typeof css === 'function' ? css(props) : css !== null && css !== void 0 ? css : ''}${allStyles ? renderStyles(allStyles, zones) : ''}`;
+        if (mods) {
+            Object.assign(props, modAttrs(mods));
+        }
+        return (_jsx(Element, { as: as !== null && as !== void 0 ? as : tag, "data-element": element, "data-qa": qa, "data-qaval": qaVal, ...legacyDefaultProps, ...defaultProps, ...props, ref: ref, css: css }, void 0));
+    });
+    _StyledComponent.displayName = `CubeStyled(${(_f = (_e = Element.displayName) !== null && _e !== void 0 ? _e : Element.name) !== null && _f !== void 0 ? _f : tag})`;
+    return _StyledComponent;
+}
+export { styled };
+
+        

package/es/styles/align.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+export function alignStyle({ align }) {
+    if (typeof align !== 'string')
+        return;
+    if (!align)
+        return;
+    return {
+        'align-items': align,
+        'align-content': align,
+    };
+}
+alignStyle.__lookupStyles = ['align'];
+
+        

package/es/styles/border.js

@@ -0,0 +1,48 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';
+const BORDER_STYLES = [
+    'none',
+    'hidden',
+    'dotted',
+    'dashed',
+    'solid',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+];
+/**
+ *
+ * @param border
+ * @return {{border: string}|*}
+ */
+export function borderStyle({ border }) {
+    if (!border && border !== 0)
+        return;
+    if (border === true)
+        border = '1bw';
+    const { values, mods, color } = parseStyle(String(border));
+    const directions = filterMods(mods, DIRECTIONS);
+    const typeMods = filterMods(mods, BORDER_STYLES);
+    const value = values[0] || 'var(--border-width)';
+    const type = typeMods[0] || 'solid';
+    const borderColor = color || 'var(--border-color)';
+    const styleValue = [value, type, borderColor].join(' ');
+    if (!directions.length) {
+        return { border: styleValue };
+    }
+    return mods.reduce((styles, dir) => {
+        styles[`border-${dir}`] = styleValue;
+        return styles;
+    }, {});
+}
+borderStyle.__lookupStyles = ['border'];
+
+        

package/es/styles/boxShadow.combinator.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+export function boxShadowCombinator(styles) {
+    const values = boxShadowCombinator.__lookupStyles.reduce((list, style) => {
+        const value = styles[style];
+        if (value) {
+            list.push(`var(--local-${style}-box-shadow)`);
+        }
+        return list;
+    }, []);
+    if (!values.length)
+        return '';
+    return { 'box-shadow': values.join(', ') };
+}
+boxShadowCombinator.__lookupStyles = ['outline', 'shadow'];
+
+        

package/es/styles/color.js

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+import { parseColor } from '../utils/styles';
+export function colorStyle({ color }) {
+    if (!color)
+        return '';
+    if (color === true)
+        color = 'currentColor';
+    if (color.startsWith('#')) {
+        color = parseColor(color).color || color;
+    }
+    const match = color.match(/var\(--(.+?)-color/);
+    let name = '';
+    if (match) {
+        name = match[1];
+    }
+    const styles = [
+        {
+            color: color,
+        },
+    ];
+    if (name) {
+        styles.push([
+            {
+                '--current-color': `var(--${name}-color, ${name})`,
+                '--current-color-rgb': `var(--${name}-color-rgb)`,
+            },
+        ]);
+    }
+    return styles;
+}
+colorStyle.__lookupStyles = ['color'];
+
+