@cube-dev/ui-kit 0.8.5 → 0.9.0

package/dist/cjs/provider.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProviderProps = exports.Provider = exports.UIKitContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const StylesProvider_1 = require("./providers/StylesProvider");
+const BreakpointsProvider_1 = require("./providers/BreakpointsProvider");
+exports.UIKitContext = (0, react_1.createContext)({});
+function Provider(allProps) {
+    let { breakpoints, children, insideForm, isDisabled, isReadOnly, isRequired, validationState, router, styles, root, ref, } = allProps;
+    if (styles) {
+        children = (0, jsx_runtime_1.jsx)(StylesProvider_1.StyleProvider, { ...styles, children: children }, void 0);
+    }
+    if (breakpoints) {
+        children = ((0, jsx_runtime_1.jsx)(BreakpointsProvider_1.BreakpointsProvider, { value: breakpoints, children: children }, void 0));
+    }
+    const parentContext = (0, react_1.useContext)(exports.UIKitContext);
+    const props = {
+        ref,
+        breakpoints,
+        insideForm,
+        isDisabled,
+        isReadOnly,
+        isRequired,
+        validationState,
+        router,
+        root,
+    };
+    const newValue = Object.assign({}, parentContext);
+    Object.keys(props).forEach((key) => {
+        if (props[key] != null) {
+            newValue[key] = props[key];
+        }
+    });
+    return ((0, jsx_runtime_1.jsx)(exports.UIKitContext.Provider, { value: newValue, children: children }, void 0));
+}
+exports.Provider = Provider;
+function useProviderProps(props) {
+    const contextProps = (0, react_1.useContext)(exports.UIKitContext);
+    return { ...contextProps, ...props };
+}
+exports.useProviderProps = useProviderProps;
+
+        

package/dist/cjs/providers/BreakpointsProvider.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreakpointsProvider = exports.BreakpointsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Default breakpoints mirror Bootstrap defaults without md and xxl breakpoints.
+exports.BreakpointsContext = (0, react_1.createContext)([980]);
+function BreakpointsProvider({ value, children, }) {
+    return ((0, jsx_runtime_1.jsx)(exports.BreakpointsContext.Provider, { value: value, children: children }, void 0));
+}
+exports.BreakpointsProvider = BreakpointsProvider;
+
+        

package/dist/cjs/providers/StylesProvider.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContextStyles = exports.StyleProvider = exports.StyleContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.StyleContext = (0, react_1.createContext)({});
+function StyleProvider({ children, ...props }) {
+    const styles = Object.assign({}, (0, react_1.useContext)(exports.StyleContext));
+    Object.keys(props).forEach((propName) => {
+        if (styles[propName]) {
+            styles[propName] = [...styles[propName], props[propName]];
+        }
+        else {
+            styles[propName] = [props[propName]];
+        }
+    });
+    // @ts-ignore
+    return ((0, jsx_runtime_1.jsx)(exports.StyleContext.Provider, { value: styles, children: children }, void 0));
+}
+exports.StyleProvider = StyleProvider;
+function useContextStyles(name, props) {
+    const contextStyles = (0, react_1.useContext)(exports.StyleContext);
+    if (!name)
+        return null;
+    const styles = {};
+    if (contextStyles[name]) {
+        contextStyles[name].forEach((handler) => {
+            Object.assign(styles, typeof handler === 'function' ? handler(props) : handler);
+        });
+    }
+    return styles;
+}
+exports.useContextStyles = useContextStyles;
+
+        

package/dist/cjs/services/notification.js

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = __importDefault(require("react-dom"));
+const Notification_1 = require("../components/overlays/Notification/Notification");
+const react_transition_group_1 = require("react-transition-group");
+let ID = 0;
+exports.notification = {
+    root: null,
+    defaultOptions: {
+        duration: 5000,
+    },
+    items: [],
+    init() {
+        if (this.root)
+            return;
+        this.root = document.createElement('div');
+        this.root.classList.add('cube-notification-container');
+        document.body.appendChild(this.root);
+        this._render([]);
+    },
+    render() {
+        this.init();
+        this._render();
+    },
+    _render(items) {
+        if (!items) {
+            items = this.items;
+        }
+        react_dom_1.default.render((0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: "cube-notifications", children: items.map((item) => ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { timeout: 400, classNames: "cube-notification", children: (0, jsx_runtime_1.jsx)(Notification_1.Notification, { type: item.type, onClose: () => this.close(item.id), children: item.message }, void 0) }, item.id))) }, void 0), this.root);
+    },
+    show(type, message, options = {}) {
+        options = Object.assign({}, this.defaultOptions, options);
+        const id = ++ID;
+        this.items.push({ id, type, message });
+        this.render();
+        setTimeout(() => {
+            this.close(id);
+        }, options.duration);
+    },
+    close(id) {
+        this.items = this.items.filter((item) => item.id !== id);
+        this.render();
+    },
+    success(message, options) {
+        this.show('success', message, options);
+    },
+    danger(message, options) {
+        this.show('danger', message, options);
+    },
+    info(message, options) {
+        this.show('note', message, options);
+    },
+};
+
+        

package/dist/cjs/shared/form.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/dist/cjs/shared/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./form"), exports);
+
+        

package/dist/cjs/stories/FormFieldArgs.js

@@ -0,0 +1,288 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELECTED_KEY_ARG = exports.IS_INDETERMINATE_ARG = exports.IS_SELECTED_ARG = exports.MULTIPLE_VALUE_ARG = exports.NUMBER_VALUE_ARG = exports.TEXT_VALUE_ARG = exports.REQUIRED_MARK_ARG = exports.MULTILINE_ARG = exports.SIZE_ARG = exports.IS_DISABLED_ARG = exports.IS_READ_ONLY_ARG = exports.IS_REQUIRED_ARG = exports.AUTO_FOCUS_ARG = exports.IS_LOADING_ARG = exports.VALIDATION_STATE_ARG = exports.PLACEHOLDER_ARG = exports.MESSAGE_ARG = exports.NECESSITY_INDICATOR_ARG = exports.DESCRIPTION_ARG = exports.LABEL_ARG = exports.LABEL_POSITION_ARG = exports.DISABLE_BASE_ARGS = void 0;
+const baseProps_1 = require("./lists/baseProps");
+exports.DISABLE_BASE_ARGS = baseProps_1.baseProps.reduce((map, prop) => {
+    map[prop] = { table: { disable: true } };
+    return map;
+}, {});
+exports.LABEL_POSITION_ARG = {
+    labelPosition: {
+        description: 'The position of labels for each field.',
+        options: ['top', 'side'],
+        control: 'radio',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'top' },
+        },
+    },
+};
+exports.LABEL_ARG = {
+    label: {
+        // defaultValue: 'Field label',
+        control: 'text',
+        description: 'The content to display as the label.',
+    },
+};
+exports.DESCRIPTION_ARG = {
+    description: {
+        control: 'text',
+        description: 'The description for the field.',
+    },
+};
+exports.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' },
+        },
+    },
+};
+exports.MESSAGE_ARG = {
+    message: {
+        // defaultValue: '',
+        description: 'Validation error message',
+        control: 'text',
+    },
+};
+exports.PLACEHOLDER_ARG = {
+    placeholder: {
+        // defaultValue: 'Placeholder',
+        control: 'text',
+    },
+};
+exports.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' },
+        },
+    },
+};
+exports.IS_LOADING_ARG = {
+    isLoading: {
+        control: 'boolean',
+        description: 'Loading state with spinner. Also works as disabled',
+        // defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+exports.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 },
+        },
+    },
+};
+exports.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 },
+        },
+    },
+};
+exports.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 },
+        },
+    },
+};
+exports.IS_DISABLED_ARG = {
+    isDisabled: {
+        // defaultValue: false,
+        description: 'Whether the input is disabled.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+exports.SIZE_ARG = {
+    size: {
+        // defaultValue: undefined,
+        description: 'The size of the button',
+        options: [undefined, 'default', 'small'],
+        control: 'radio',
+        table: {
+            type: { summary: 'string' },
+            defaultValue: { summary: 'default' },
+        },
+    },
+};
+exports.MULTILINE_ARG = {
+    multiLine: {
+        // defaultValue: false,
+        description: 'Whether the input is multiline.',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+    },
+};
+exports.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 },
+        },
+    },
+};
+exports.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' },
+        },
+    },
+};
+exports.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' },
+        },
+    },
+};
+exports.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[]' },
+        },
+    },
+};
+exports.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' },
+        },
+    },
+};
+exports.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' },
+        },
+    },
+};
+exports.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/dist/cjs/stories/components/ConfirmDeletionDialogForm.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDeletionDialogForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("../../index");
+exports.ConfirmDeletionDialogForm = (0, react_1.forwardRef)((props, ref) => {
+    let { name, onSubmit, onDismiss } = props;
+    return ((0, jsx_runtime_1.jsxs)(index_1.DialogForm, { ref: ref, title: "Delete Deployment", onSubmit: onSubmit, onDismiss: onDismiss, submitProps: {
+            label: 'Delete',
+            theme: 'danger',
+        }, cancelProps: {
+            label: 'I changed my mind',
+        }, children: [(0, jsx_runtime_1.jsxs)(index_1.Paragraph, { children: ["To delete the instance, please, enter its full name:", ' ', (0, jsx_runtime_1.jsx)(index_1.Text.Strong, { children: name }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(index_1.Field, { name: "name", rules: [
+                    {
+                        required: true,
+                        message: 'This field is required',
+                    },
+                    {
+                        async validator(rule, value) {
+                            if (value !== name) {
+                                throw new Error('Incorrect name');
+                            }
+                        },
+                    },
+                ], children: (0, jsx_runtime_1.jsx)(index_1.Input.Text, { placeholder: "Enter the name of the instance" }, void 0) }, void 0)] }, void 0));
+});
+
+        

package/dist/cjs/stories/components/DialogFormApp.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogFormApp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("../../index");
+const ConfirmDeletionDialogForm_1 = require("./ConfirmDeletionDialogForm");
+function DialogFormApp() {
+    const ConfirmDeletionDialogFormRef = (0, react_1.useRef)(null);
+    function onConfirm() {
+        console.log('Deletion is confirmed');
+    }
+    function onDismiss() {
+        console.log('Deletion is cancelled');
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_1.Button, { onPress: () => ConfirmDeletionDialogFormRef?.current?.open(), children: "Delete the instance" }, void 0), (0, jsx_runtime_1.jsx)(ConfirmDeletionDialogForm_1.ConfirmDeletionDialogForm, { ref: ConfirmDeletionDialogFormRef, name: "instanceName", onSubmit: onConfirm, onDismiss: onDismiss }, void 0)] }, void 0));
+}
+exports.DialogFormApp = DialogFormApp;
+
+        

package/dist/cjs/stories/components/StyledButton.js

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Block = exports.GlobalStyledHeading = exports.StyledButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = require("../../styled");
+const Button_1 = require("../../components/actions/Button/Button");
+exports.StyledButton = (0, styled_1.styled)(Button_1.Button, {
+    styles: {
+        padding: '3x 6x',
+        preset: 't1',
+    },
+});
+exports.GlobalStyledHeading = (0, styled_1.styled)('div.myButton', {
+    display: 'inline-block',
+    padding: '1x 2x',
+    preset: 't2',
+    border: true,
+    radius: true,
+    fill: {
+        '': '#white',
+        ':hover': '#purple.20',
+    },
+    color: '#dark',
+});
+function Block() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.StyledButton, { children: "123" }, void 0), (0, jsx_runtime_1.jsx)(exports.GlobalStyledHeading, {}, void 0)] }, void 0));
+}
+exports.Block = Block;
+
+        

package/dist/cjs/stories/lists/baseProps.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseProps = void 0;
+const list_1 = require("../../styles/list");
+const allStyles = Array.from(new Set([
+    ...list_1.BASE_STYLES,
+    ...list_1.POSITION_STYLES,
+    ...list_1.CONTAINER_STYLES,
+    ...list_1.BLOCK_STYLES,
+    ...list_1.COLOR_STYLES,
+    ...list_1.FLOW_STYLES,
+    ...list_1.OUTER_STYLES,
+    ...list_1.DIMENSION_STYLES,
+    ...list_1.TEXT_STYLES,
+    ...list_1.POSITION_STYLES,
+]));
+exports.baseProps = [
+    'qa',
+    'qaVal',
+    'block',
+    'inline',
+    'style',
+    'styles',
+    'css',
+    'styleName',
+    'hidden',
+    'disabled',
+    'mods',
+    'breakpoints',
+    'isHidden',
+    'element',
+    ...allStyles,
+];
+
+        

package/dist/cjs/styled/index.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./styled"), exports);
+
+