@cube-dev/ui-kit 0.9.6 → 0.9.7

package/es/components/portal/usePortal.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { usePortalContext } from './PortalProvider';
+/**
+ * @internal Do not use it
+ */
+export function usePortal(props) {
+    const { children, isDisabled = false, root = null, onMount } = props;
+    const onMountRef = useRef(onMount);
+    const portalContext = usePortalContext();
+    const [mountRoot, setMountRoot] = useState(null);
+    onMountRef.current = onMount;
+    useEffect(() => {
+        var _a, _b;
+        if (!isDisabled) {
+            const contextRoot = portalContext.root;
+            const currentRoot = (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : null;
+            const currentContextRoot = (_b = contextRoot === null || contextRoot === void 0 ? void 0 : contextRoot.current) !== null && _b !== void 0 ? _b : null;
+            invariant(!(contextRoot === null && currentRoot === null), 'Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component');
+            setMountRoot(currentRoot !== null && currentRoot !== void 0 ? currentRoot : currentContextRoot);
+        }
+    }, [root, portalContext.root, isDisabled]);
+    useEffect(() => {
+        var _a;
+        if (isDisabled || mountRoot) {
+            (_a = onMountRef.current) === null || _a === void 0 ? void 0 : _a.call(onMountRef);
+        }
+    }, [isDisabled, mountRoot]);
+    return {
+        isDisabled,
+        children,
+        mountRoot,
+    };
+}
+
+        

package/es/components/status/LoadingAnimation/LoadingAnimation.js

@@ -0,0 +1,132 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Block } from '../../Block';
+import styled from 'styled-components';
+const POSITIONS = [
+    [49, 0.5],
+    [0, 25],
+    [49, 49],
+    [98, 25],
+];
+const cubeImage = 'data:image/svg+xml,%3Csvg width=\'36\' height=\'41\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\' fill=\'%23FAFAFF\'/%3E%3Cpath d=\'M18 41L0 30.75l.101-20.5L18 20.5\' fill=\'%23E5E5F6\'/%3E%3Cpath d=\'M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\' fill=\'%23C0C0EA\'/%3E%3C/svg%3E';
+function pos(index) {
+    return `transform: translate(${POSITIONS[index][0]}%, ${POSITIONS[index][1]}%);`;
+}
+const RawImg = styled.img(({ index }) => `
+  display: block;
+  position: absolute;
+  width: 50%;
+  height: 50%;
+
+  ${index != null
+    ? `
+  animation-name: dice${index};
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+  z-index: 0;
+
+  @keyframes dice${index} {
+    ${index === 0
+        ? `
+    from {
+      ${pos(0)}
+      z-index: 0;
+    }
+
+    25% {
+      ${pos(0)}
+      z-index: 0;
+    }
+
+    50% {
+      ${pos(1)}
+      z-index: 0;
+    }
+
+    51% {
+      z-index: 1;
+    }
+
+    75% {
+      z-index: 1;
+    }
+
+    to {
+      ${pos(1)}
+      z-index: 1;
+    }
+    `
+        : ''}
+
+    ${index === 1
+        ? `
+    from {
+      ${pos(1)}
+      z-index: 3;
+    }
+
+    25% {
+      ${pos(2)}
+      z-index: 3;
+    }
+
+    75% {
+      ${pos(2)}
+      z-index: 2;
+    }
+
+    to {
+      ${pos(3)}
+      z-index: 1;
+    }
+    `
+        : ''}
+
+    ${index === 2
+        ? `
+    from {
+      ${pos(3)}
+      z-index: 1;
+    }
+
+    50% {
+      ${pos(3)}
+      z-index: 0;
+    }
+
+    75% {
+      ${pos(0)}
+      z-index: 0;
+    }
+
+    to {
+      ${pos(0)}
+      z-index: 0;
+    }
+    `
+        : ''}
+  }
+  `
+    : ''}
+`);
+const Cube = (props) => {
+    return _jsx(RawImg, { role: "presentation", src: cubeImage, alt: "", ...props }, void 0);
+};
+const SIZE_MAP = {
+    small: 32,
+    medium: 64,
+    large: 96,
+};
+export function LoadingAnimation({ size = 'medium', ...props }) {
+    const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
+    return (_jsxs(Block, { role: "img", "aria-label": "Loading animation", width: numSize, height: numSize * 1.1388888889, style: { position: 'relative' }, ...props, children: [_jsx(Cube, { style: { transform: 'translate(0%, 72.5%)' } }, void 0), _jsx(Cube, { style: { transform: 'translate(98%, 72.5%)' } }, void 0), _jsx(Cube, { style: { transform: 'translate(49%, 96.5%)' } }, void 0), _jsx(Cube, { index: 0 }, void 0), _jsx(Cube, { index: 1 }, void 0), _jsx(Cube, { index: 2 }, void 0)] }, void 0));
+}
+
+        

package/es/components/status/Spin/Spin.js

@@ -0,0 +1,35 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Block } from '../../Block';
+const SIZE_MAP = {
+    small: 3,
+    default: 4,
+    large: 6,
+};
+const Spin = ({ size, spinning, style, children, ...props }, ref) => {
+    const localSize = (size && SIZE_MAP[size]) || size || SIZE_MAP.default;
+    if (spinning === false) {
+        return _jsx(_Fragment, { children: children }, void 0);
+    }
+    return (_jsx(Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "1em", opacity: ".8", style: {
+            fontSize: localSize * 8,
+            position: 'relative',
+            ...(style || {}),
+        }, ...props, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                margin: 'auto',
+                display: 'inline-block',
+                width: '1em',
+                height: '1em',
+            }, viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [_jsxs("rect", { fill: "#7a77ff", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [_jsx("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-2.083333333333333s" }, void 0), _jsx("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-1.5151515151515151s" }, void 0)] }, void 0), _jsxs("rect", { fill: "#ff6492", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [_jsx("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-1.325757575757576s" }, void 0), _jsx("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-0.7575757575757576s" }, void 0)] }, void 0), _jsxs("rect", { fill: "#727290", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [_jsx("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-0.5681818181818182s" }, void 0), _jsx("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "0s" }, void 0)] }, void 0)] }, void 0) }, void 0));
+};
+const _Spin = forwardRef(Spin);
+export { _Spin as Spin };
+
+        

package/es/components/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

package/es/data/themes.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export default {
+    success: {
+        fill: '#success-bg',
+        color: '#success-text',
+        border: '#success.40',
+    },
+    danger: {
+        fill: '#danger-bg',
+        color: '#danger-text',
+        border: '#danger.40',
+    },
+    note: {
+        fill: '#note-bg',
+        color: '#note-text',
+        border: '#note.40',
+    },
+    disabled: {
+        fill: '#dark.10',
+        color: '#dark.40',
+        border: '#dark.20',
+    },
+};
+
+        

package/es/index.js

@@ -0,0 +1,95 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { Text } from './components/content/Text';
+import { Title } from './components/content/Title';
+import { Paragraph } from './components/content/Paragraph';
+export { Item } from '@react-stately/collections';
+// generic components
+export { Base } from './components/Base';
+export { Block } from './components/Block';
+export { ActiveZone } from './components/content/ActiveZone/ActiveZone';
+export { Grid } from './components/layout/Grid';
+export { Flex } from './components/layout/Flex';
+export { Link } from './components/navigation/Link/Link';
+export { Space } from './components/layout/Space';
+export { Flow } from './components/layout/Flow';
+export { Root } from './components/Root';
+export { PrismCode } from './components/content/PrismCode/PrismCode';
+export { Prefix } from './components/layout/Prefix';
+export { Suffix } from './components/layout/Suffix';
+export { Divider } from './components/content/Divider';
+export { GridProvider } from './components/GridProvider';
+export { Content } from './components/content/Content';
+export { Header } from './components/content/Header';
+export { Footer } from './components/content/Footer';
+export { Result } from './components/content/Result/Result';
+export { FieldWrapper } from './components/forms/FieldWrapper';
+// atoms
+export { LoadingAnimation } from './components/status/LoadingAnimation/LoadingAnimation';
+export { Spin } from './components/status/Spin/Spin';
+export { Base64Upload } from './components/other/Base64Upload/Base64Upload';
+export { Card } from './components/content/Card/Card';
+export * from './components/actions';
+export { Placeholder } from './components/content/Placeholder/Placeholder';
+export { Skeleton } from './components/content/Skeleton/Skeleton';
+export { CloudLogo } from './components/other/CloudLogo/CloudLogo';
+export { Badge } from './components/content/Badge/Badge';
+export { Tag } from './components/content/Tag/Tag';
+export { SearchInput } from './components/forms/SearchInput/SearchInput';
+export { Submit } from './components/actions/Button/Submit';
+export { TextInput } from './components/forms/TextInput/TextInput';
+export { TextArea } from './components/forms/TextArea/TextArea';
+export { FileInput } from './components/forms/FileInput/FileInput';
+export { PasswordInput } from './components/forms/PasswordInput/PasswordInput';
+export { Checkbox } from './components/forms/Checkbox/Checkbox';
+export { CheckboxGroup } from './components/forms/Checkbox/CheckboxGroup';
+export { Switch } from './components/forms/Switch/Switch';
+export { Radio } from './components/forms/RadioGroup/Radio';
+export { ComboBox } from './components/pickers/ComboBox/ComboBox';
+export { Select, ListBoxPopup } from './components/pickers/Select/Select';
+export { NumberInput } from './components/forms/NumberInput/NumberInput';
+export { Avatar } from './components/content/Avatar/Avatar';
+export { Dialog, DialogTrigger, DialogContainer, DialogForm, } from './components/overlays/Dialog';
+export { Tooltip } from './components/overlays/Tooltip/Tooltip';
+export { TooltipTrigger } from './components/overlays/Tooltip/TooltipTrigger';
+export { TooltipProvider } from './components/overlays/Tooltip/TooltipProvider';
+// molecules
+export { TopBar } from './components/organisms/TopBar/TopBar';
+export { Alert } from './components/organisms/Alert/Alert';
+export { DirectoryTree } from './components/organisms/DirectoryTree/DirectoryTree';
+export { LegacyTabs } from './components/navigation/LegacyTabs/LegacyTabs';
+export { FileTabs } from './components/organisms/FileTabs/FileTabs';
+export { Modal } from './components/organisms/Modal/Modal';
+export { CopySnippet } from './components/organisms/CopySnippet/CopySnippet';
+export { StatsCard } from './components/organisms/StatsCard/StatsCard';
+export { AlertDialog, useAlertDialogAPI, } from './components/overlays/AlertDialog';
+export { SearchResults } from './components/organisms/SearchResults/SearchResults';
+// services
+export { notification } from './services/notification';
+export * from './providers/BreakpointsProvider';
+export const Typography = {
+    Text,
+    Title,
+    Paragraph,
+};
+export { Text, Title, Paragraph };
+export { useContextStyles, StyleProvider } from './providers/StylesProvider';
+export { Provider } from './provider';
+export { Portal } from './components/portal';
+export * from './components/forms';
+export * from './styles/types';
+export * from './styles/list';
+export * from './styles/index';
+export { ModalProvider } from '@react-aria/overlays';
+export * from './utils/react';
+export * from './styled';
+export { default as copy } from 'clipboard-copy';
+export * from '@react-aria/ssr';
+export * from './components/forms/Form';
+
+        

package/es/provider.js

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, } from 'react';
+import { StyleProvider } from './providers/StylesProvider';
+import { BreakpointsProvider } from './providers/BreakpointsProvider';
+export const UIKitContext = createContext({});
+export function Provider(allProps) {
+    let { breakpoints, children, insideForm, isDisabled, isReadOnly, isRequired, validationState, router, styles, root, ref, } = allProps;
+    if (styles) {
+        children = _jsx(StyleProvider, { ...styles, children: children }, void 0);
+    }
+    if (breakpoints) {
+        children = (_jsx(BreakpointsProvider, { value: breakpoints, children: children }, void 0));
+    }
+    const parentContext = useContext(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 (_jsx(UIKitContext.Provider, { value: newValue, children: children }, void 0));
+}
+export function useProviderProps(props) {
+    const contextProps = useContext(UIKitContext);
+    return { ...contextProps, ...props };
+}
+
+        

package/es/providers/BreakpointsProvider.js

@@ -0,0 +1,16 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }, void 0));
+}
+
+        

package/es/providers/StylesProvider.js

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export const StyleContext = createContext({});
+export function StyleProvider({ children, ...props }) {
+    const styles = Object.assign({}, useContext(StyleContext));
+    Object.keys(props).forEach((propName) => {
+        if (styles[propName]) {
+            styles[propName] = [...styles[propName], props[propName]];
+        }
+        else {
+            styles[propName] = [props[propName]];
+        }
+    });
+    // @ts-ignore
+    return (_jsx(StyleContext.Provider, { value: styles, children: children }, void 0));
+}
+export function useContextStyles(name, props) {
+    const contextStyles = useContext(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;
+}
+
+        

package/es/services/notification.js

@@ -0,0 +1,61 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom';
+import { Notification, } from '../components/overlays/Notification/Notification';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+let ID = 0;
+export const 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;
+        }
+        ReactDOM.render(_jsx(TransitionGroup, { className: "cube-notifications", children: items.map((item) => (_jsx(CSSTransition, { timeout: 400, classNames: "cube-notification", children: _jsx(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/es/shared/form.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

package/es/shared/index.js

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