@cube-dev/ui-kit 0.0.0-canary-e9c7690 → 0.0.0-canary-a804266

package/types/index.d.ts

@@ -57,7 +57,6 @@ export { Tag } from './components/content/Tag/Tag';
 export type { CubeTagProps } from './components/content/Tag/Tag';
 export { SearchInput } from './components/forms/SearchInput/SearchInput';
 export type { CubeSearchInputProps } from './components/forms/SearchInput/SearchInput';
-export { Submit } from './components/actions/Button/Submit';
 export type { CubeTextInputBaseProps } from './components/forms/TextInput/TextInputBase';
 export type { CubeTextInputBaseProps as CubeTextInputProps } from './components/forms/TextInput/TextInputBase';
 export { TextInput } from './components/forms/TextInput/TextInput';
@@ -143,6 +142,6 @@ export * from './styled';
 export * from './tasty';
 export { default as copy } from 'clipboard-copy';
 export * from '@react-aria/ssr';
-export * from './components/forms/Form';
+export * from './components/forms';
 export * from './components/overlays/NewNotifications';
 export * from './components/overlays/Toasts';

package/types/test/index.d.ts

@@ -1,2 +1,6 @@
+import userEvent from '@testing-library/user-event';
+export * from '@testing-library/user-event';
+export * from '@testing-library/react';
 export * from './utils';
 export * from './render';
+export { userEvent };

package/types/test/setup.d.ts

@@ -1,3 +1,2 @@
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import 'jest-styled-components';

package/cjs/components/actions/Button/Submit.js

@@ -1,29 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9c7690
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Submit = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const provider_1 = require("../../../provider");
-const Form_1 = require("../../forms/Form/Form");
-const Button_1 = require("./Button");
-function Submit(props, ref) {
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    const { form, ...otherProps } = props;
-    const formData = form.getFieldsValue();
-    const isValid = !Object.keys(formData).find((name) => {
-        return form.isFieldInvalid(name);
-    });
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form.isSubmitting, isDisabled: !isValid, ...otherProps }, void 0));
-}
-const _Submit = (0, react_1.forwardRef)(Submit);
-exports.Submit = _Submit;
-
-        

package/cjs/stories/FormFieldArgs.js

@@ -1,324 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9c7690
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICON_ARG = exports.SELECTED_KEY_ARG = exports.IS_INDETERMINATE_ARG = exports.IS_SELECTED_ARG = exports.MULTIPLE_NUMBER_VALUE_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.EXTRA_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: {
-        control: 'text',
-        description: 'The content to display as the label.',
-    },
-};
-exports.EXTRA_ARG = {
-    extra: {
-        control: 'text',
-        description: 'The extra content to display next to 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.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[]' },
-        },
-    },
-};
-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' },
-        },
-    },
-};
-exports.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/cjs/stories/components/ConfirmDeletionDialogForm.js

@@ -1,36 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9c7690
- * 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 index_1 = require("../../index");
-function ConfirmDeletionDialogForm(props) {
-    let { name, onSubmit, onDismiss } = props;
-    return ((0, jsx_runtime_1.jsxs)(index_1.DialogForm, { title: "Delete Deployment", submitProps: {
-            label: 'Delete',
-            theme: 'danger',
-        }, cancelProps: {
-            label: 'I changed my mind',
-        }, onSubmit: onSubmit, onDismiss: onDismiss, 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));
-}
-exports.ConfirmDeletionDialogForm = ConfirmDeletionDialogForm;
-
-        

package/cjs/stories/components/DialogFormApp.js

@@ -1,19 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9c7690
- * 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 index_1 = require("../../index");
-const ConfirmDeletionDialogForm_1 = require("./ConfirmDeletionDialogForm");
-function DialogFormApp() {
-    return ((0, jsx_runtime_1.jsxs)(index_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsx)(index_1.Button, { children: "Delete the instance" }, void 0), (0, jsx_runtime_1.jsx)(ConfirmDeletionDialogForm_1.ConfirmDeletionDialogForm, { name: "instanceName" }, void 0)] }, void 0));
-}
-exports.DialogFormApp = DialogFormApp;
-
-        

package/cjs/stories/components/StyledButton.js

@@ -1,37 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9c7690
- * 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 tasty_1 = require("../../tasty");
-const actions_1 = require("../../components/actions");
-exports.StyledButton = (0, tasty_1.tasty)(actions_1.Button, {
-    styles: {
-        padding: '3x 6x',
-        preset: 't1',
-    },
-});
-exports.GlobalStyledHeading = (0, tasty_1.tasty)('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/cjs/stories/lists/baseProps.js

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

package/es/components/actions/Button/Submit.js

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e9c7690
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useProviderProps } from '../../../provider';
-import { useFormProps } from '../../forms/Form/Form';
-import { Button } from './Button';
-function Submit(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    const { form, ...otherProps } = props;
-    const formData = form.getFieldsValue();
-    const isValid = !Object.keys(formData).find((name) => {
-        return form.isFieldInvalid(name);
-    });
-    return (_jsx(Button, { ref: ref, type: "primary", htmlType: "submit", isLoading: form.isSubmitting, isDisabled: !isValid, ...otherProps }, void 0));
-}
-const _Submit = forwardRef(Submit);
-export { _Submit as Submit };
-
-