@cube-dev/ui-kit 0.9.5 → 0.9.8

package/dist/es/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,251 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
-import { Block } from '../../Block';
-import { Space } from '../../layout/Space';
-import { Flex } from '../../layout/Flex';
-import { Button } from '../../actions';
-const LegacyTabsContext = createContext({
-    addTab() { },
-    removeTab() { },
-    setTab() { },
-    changeTab() { },
-});
-const TAB_STYLES = {
-    color: {
-        '': '#dark',
-        'selected, hovered': '#purple-text',
-        disabled: '#dark.50',
-    },
-    fill: '#purple.0',
-    textAlign: 'center',
-    fontWeight: 600,
-    padding: '(1x - 1px) (1x - 1px)',
-    radius: '1r 1r 0 0',
-    border: 0,
-};
-const TAB_CSS = `
-&::before {
-  --outline-size: 0px;
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  box-shadow: inset 0 calc(-1 * var(--outline-size)) 0 var(--purple-color);
-  pointer-events: none;
-  transition: opacity linear .2s, box-shadow linear .2s;
-}
-&[data-is-selected]::before {
-  --outline-size: 2px;
-}
-&:not([data-is-selected]):not([disabled])[data-is-hovered]::before {
-  --outline-size: 1px;
-}
-`;
-const TABS_PANEL_CSS = `
-  position: relative;
-  overflow: auto hidden;
-  top: 1px;
-  white-space: nowrap;
-
-  ::-webkit-scrollbar-track {
-    background: var(--grey-light-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 1px;
-    background: var(--dark-04-color);
-    background-clip: padding-box;
-  }
-
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar {
-    width: 3px;
-    height: 3px;
-  }
-`;
-const TABS_CONTAINER_CSS = `
-  position: relative;
-
-  &::before {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    width: 32px;
-    height: 37px;
-    transition: all .15s linear;
-    background-image: linear-gradient(
-      to left,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-    z-index: 10;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 32px;
-    height: 37px;
-    pointer-events: none;
-    transition: all .15s linear;
-    background-image: linear-gradient(
-      to right,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
-    );
-    z-index: 10;
-  }
-
-  &[data-is-left-fade]::before, &[data-is-right-fade]::after {
-    opacity: 1;
-  }
-`;
-const Tab = ({ isSelected, isHidden, onClose, ...props }) => {
-    return (_jsx(Button, { type: "tab", styles: TAB_STYLES, css: TAB_CSS, isSelected: isSelected, isHidden: isHidden, ...props }, void 0));
-};
-export function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }) {
-    const tabsRef = useRef(null);
-    const [tabs, setTabs] = useState([]);
-    const [activeKey, setActiveKey] = useState(activeKeyProp || defaultActiveKey);
-    const [leftFade, setLeftFade] = useState(false);
-    const [rightFade, setRightFade] = useState(false);
-    function updateScroll() {
-        const el = tabsRef && tabsRef.current;
-        if (!el)
-            return;
-        setLeftFade(!!el.scrollLeft);
-        setRightFade(el.scrollWidth !== el.offsetWidth &&
-            !!(el.scrollWidth - el.offsetWidth - el.scrollLeft));
-    }
-    useLayoutEffect(updateScroll, [tabs]);
-    function scrollCurrentIntoView() {
-        const el = tabsRef && tabsRef.current;
-        if (!el)
-            return;
-        const current = el.querySelector('button[disabled]');
-        if (!current)
-            return;
-        current.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
-    }
-    useEffect(() => {
-        function update() {
-            updateScroll();
-        }
-        if (tabsRef && tabsRef.current) {
-            tabsRef.current.addEventListener('scroll', update);
-            tabsRef.current.addEventListener('mousewheel', update);
-            window.addEventListener('resize', update);
-        }
-        return () => {
-            if (tabsRef && tabsRef.current) {
-                tabsRef.current.removeEventListener('scroll', update);
-                tabsRef.current.removeEventListener('mousewheel', update);
-            }
-            window.removeEventListener('resize', update);
-        };
-    }, [tabsRef]);
-    useEffect(scrollCurrentIntoView, [activeKey]);
-    useEffect(() => {
-        setActiveKey(activeKeyProp);
-    }, [activeKeyProp]);
-    function getTab(tabs, key) {
-        return tabs.find((tab) => tab.id === key);
-    }
-    function setTab(key) {
-        if (getTab(tabs, key)) {
-            setActiveKey(key);
-        }
-    }
-    function addTab(tab) {
-        setTabs((tabs) => {
-            if (!getTab(tabs, tab.id)) {
-                return [...tabs, tab];
-            }
-            return tabs;
-        });
-    }
-    function removeTab(tab) {
-        setTabs((tabs) => {
-            const _tabs = tabs.filter((_tab) => _tab.id !== tab.id);
-            setActiveKey((prevActiveKey) => {
-                if (prevActiveKey === tab.id) {
-                    return _tabs[0] && _tabs[0].id;
-                }
-                return prevActiveKey;
-            });
-            return _tabs;
-        });
-    }
-    function changeTab(tab) {
-        setTabs((tabs) => {
-            const existTab = tabs.find((_tab) => _tab.id === tab.id);
-            if (existTab) {
-                Object.assign(existTab, tab);
-            }
-            return [...tabs];
-        });
-    }
-    function onPress(tab) {
-        onTabClick && onTabClick(tab.id);
-        setTab(tab.id);
-    }
-    return (_jsx(Flex, { flow: "column", height: "max 100%", width: "max 100%", "data-is-left-fade": leftFade || null, "data-is-right-fade": rightFade || null, css: TABS_CONTAINER_CSS, ...props, children: _jsxs(LegacyTabsContext.Provider, { value: {
-                addTab,
-                setTab,
-                removeTab,
-                changeTab,
-                currentTab: activeKey,
-            }, children: [_jsxs(Space, { gap: ".5x", placeContent: "center space-between", children: [_jsx(Space, { ref: tabsRef, gap: "1x", flexShrink: 0, css: TABS_PANEL_CSS, children: tabs.map((tab) => {
-                                return (_jsx(Tab, { "data-qa": tab.qa, onPress: () => onPress(tab), isSelected: tab.id === activeKey || false, isDisabled: tab.isDisabled, isHidden: tab.isHidden, children: tab.title }, tab.id));
-                            }) }, void 0), extra] }, void 0), _jsx(Flex, { flexGrow: 1, border: "top rgb(227, 227, 233)", ...(paneStyles || {}), children: children }, void 0)] }, void 0) }, void 0));
-}
-LegacyTabs.TabPane = function TabPane({ id, title, qa, isHidden, isDisabled, children, ...props }) {
-    const { addTab, removeTab, changeTab, currentTab } = useContext(LegacyTabsContext);
-    useEffect(() => {
-        const tabData = {
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        };
-        addTab(tabData);
-        return () => {
-            removeTab(tabData);
-        };
-    }, [id]);
-    useEffect(() => {
-        changeTab({
-            id,
-            qa,
-            title,
-            isDisabled,
-            isHidden,
-        });
-    }, [title, isDisabled, isHidden]);
-    const isCurrent = id === currentTab;
-    return (_jsx(Block, { style: { display: isCurrent ? 'block' : 'none' }, flexGrow: 1, ...props, children: children }, void 0));
-};
-
-        

package/dist/es/components/navigation/Link/Link.js

@@ -1,15 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Button } from '../../actions';
-export const Link = forwardRef((props, ref) => {
-    return _jsx(Button, { type: "link", ...props, ref: ref }, void 0);
-});
-
-        

package/dist/es/components/organisms/Alert/Alert.js

@@ -1,35 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Base } from '../../Base';
-import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    radius: '1x',
-    padding: '1.5x',
-    preset: 't3',
-};
-const STYLE_LIST = [...CONTAINER_STYLES, ...TEXT_STYLES];
-export const Alert = forwardRef((allProps, ref) => {
-    let { type, label, ...props } = allProps;
-    type = type || 'note';
-    const styles = extractStyles(props, STYLE_LIST, {
-        ...DEFAULT_STYLES,
-        fill: THEMES[type] ? THEMES[type].fill : '#clear',
-        border: THEMES[type] && THEMES[type].border ? THEMES[type].border : '#clear',
-        color: '#dark',
-    });
-    return (_jsx(Base, { role: "alert", qa: "Alert", ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/es/components/organisms/CopySnippet/CopySnippet.js

@@ -1,105 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import copy from 'clipboard-copy';
-import { Button } from '../../actions';
-import { Card } from '../../content/Card/Card';
-import { Grid } from '../../layout/Grid';
-import { styled } from '../../../styled';
-import { PrismCode, } from '../../content/PrismCode/PrismCode';
-import { notification } from '../../../services/notification';
-import { CopyOutlined } from '@ant-design/icons';
-import { TooltipTrigger } from '../../overlays/Tooltip/TooltipTrigger';
-import { Action } from '../../actions/Action';
-import { Tooltip } from '../../overlays/Tooltip/Tooltip';
-const POSITION_ACTION = {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    zIndex: 1,
-};
-const StyledBlock = styled({
-    styles: {
-        position: 'relative',
-        overflow: {
-            '': 'hidden',
-            scroll: 'auto hidden',
-        },
-        maxWidth: '100%',
-        whiteSpace: {
-            '': 'initial',
-            nowrap: 'nowrap',
-        },
-        styledScrollbar: true,
-        '& code': {
-            font: {
-                '': 'monospace',
-                serif: true,
-            },
-        },
-    },
-});
-const ButtonContainer = styled({
-    styles: {
-        position: 'relative',
-        '&::after': {
-            display: {
-                '': 'none',
-                overlay: 'block',
-            },
-            content: '""',
-            width: '2x',
-            position: 'absolute',
-            left: '-2x',
-            top: 0,
-            bottom: 0,
-            backgroundImage: 'linear-gradient(to right,rgba(var(--context-fill-color-rgb),0),rgba(var(--context-fill-color-rgb),1))',
-        },
-    },
-});
-export function CopySnippet(allProps) {
-    let { code, title, nowrap, prefix, language, showScroll = true, serif, children, padding, showOverlay = true, showTooltip = false, styles, ...props } = allProps;
-    padding = padding || '1.125x 1.5x';
-    const codeTitle = title || 'Code example';
-    async function onCopy() {
-        await copy(code);
-        notification.success(`${codeTitle} copied`);
-    }
-    code = (code || '').replace(/\n$/, '');
-    const multiline = code.includes('\n') && !nowrap;
-    const formattedCode = code
-        .split(/\n/g)
-        .map((line) => `${prefix || ''}${line} `)
-        .join('\n');
-    styles = {
-        preset: 'default',
-        ...styles,
-    };
-    const Snippet = (_jsx(Card, { "data-qa": "CopySnippet", fill: "#grey-light", radius: "1r", border: 0, padding: 0, styles: styles, ...props, children: _jsxs(Grid, { columns: "minmax(0, 1fr) 5x", width: "min 20x", radius: "1r", style: { position: 'relative', overflow: 'hidden' }, children: [_jsx(StyledBlock, { mods: {
-                        nowrap,
-                        multiline,
-                        scroll: showScroll,
-                        serif,
-                    }, styles: { padding }, children: _jsx(PrismCode, { style: { margin: 0, overflow: 'visible' }, code: formattedCode, language: language || 'javascript' }, void 0) }, void 0), _jsx(ButtonContainer, { styles: { padding }, mods: { overlay: showOverlay } }, void 0), _jsx(Button, { label: `Copy ${codeTitle}`, type: "clear", styles: {
-                        padding: '1x 1.5x',
-                        fontWeight: 500,
-                        radius: multiline || showScroll ? '0 1r' : '0 1r 1r 0',
-                        placeSelf: !multiline && !showScroll ? 'stretch' : 'none',
-                        border: '#clear',
-                        outline: {
-                            '': '#purple-03.0',
-                            'focused & focus-visible': '#purple-03 inset',
-                        },
-                    }, style: POSITION_ACTION, onPress: onCopy, icon: _jsx(CopyOutlined, {}, void 0) }, void 0)] }, void 0) }, void 0));
-    if (showTooltip) {
-        return (_jsxs(TooltipTrigger, { children: [_jsx(Action, { styles: { display: 'block', cursor: 'default', width: '100%' }, children: Snippet }, void 0), _jsx(Tooltip, { children: formattedCode }, void 0)] }, void 0));
-    }
-    return Snippet;
-}
-
-        

package/dist/es/components/organisms/DirectoryTree/DirectoryTree.js

@@ -1,162 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.5
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { CaretDownOutlined, CaretUpOutlined, FileOutlined, FolderOpenFilled, FolderFilled, } from '@ant-design/icons';
-import { Flex } from '../../layout/Flex';
-import { Action } from '../../actions/Action';
-import { Button } from '../../actions';
-import { Space } from '../../layout/Space';
-import { Block } from '../../Block';
-const IMAGES = {
-    created: (_jsxs("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M4.714 8.572h2.714v2.715c0 .078.065.142.143.142h.857a.143.143 0 00.143-.143V8.572h2.715a.143.143 0 00.142-.143v-.857a.143.143 0 00-.142-.143H8.57V4.715a.143.143 0 00-.143-.143h-.857a.143.143 0 00-.143.143V7.43H4.714a.143.143 0 00-.143.143v.857c0 .079.065.143.143.143z", fill: "#67C082" }, void 0), _jsx("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#67C082" }, void 0)] }, void 0)),
-    deleted: (_jsxs("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M4.714 8.57h6.572a.143.143 0 00.142-.142V7.57a.143.143 0 00-.142-.143H4.714a.143.143 0 00-.143.143v.857c0 .078.065.143.143.143z", fill: "#FF646D" }, void 0), _jsx("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FF646D" }, void 0)] }, void 0)),
-    modified: (_jsxs("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FBBC05" }, void 0), _jsx("circle", { cx: "8", cy: "8", r: "2.222", fill: "#FBBC05" }, void 0)] }, void 0)),
-};
-const TEXT_OVERFLOW_STYLES = {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    maxWidth: '100%',
-    overflow: 'hidden',
-};
-function calcPadding(indent) {
-    return `.75x .5x .75x ${1.5 * indent + 0.5}x`;
-}
-function extractLeafKeys(subTreeData, dirsOnly = false) {
-    return subTreeData.reduce((list, item) => {
-        if (!item.isLeaf) {
-            list.push(item.key);
-            list.push(...extractLeafKeys(item.children || []));
-        }
-        else if (!dirsOnly) {
-            list.push(item.key);
-        }
-        return list;
-    }, []);
-}
-const MODE_BG = {
-    created: {
-        '': '#success.10',
-        hovered: '#success.15',
-    },
-    deleted: {
-        '': '#danger.08',
-        hovered: '#danger.13',
-    },
-};
-const MODE_COLOR = {
-    created: '#success',
-    deleted: '#danger',
-};
-function getItemStyles({ isSelected, mode, indent }) {
-    return {
-        width: 'max 100%',
-        radius: true,
-        textAlign: 'left',
-        fill: isSelected
-            ? '#purple.05'
-            : MODE_BG[mode] || {
-                '': '#clear',
-                hovered: '#dark.04',
-            },
-        color: isSelected ? '#purple-text' : MODE_COLOR[mode] || '#dark.75',
-        outline: {
-            '': '#purple-03.0',
-            'focused & focus-visible': '#purple-03',
-        },
-        fontWeight: isSelected ? 500 : 400,
-        padding: calcPadding(indent),
-    };
-}
-function Item(props) {
-    let { children, mode, indent, onPress, isSelected } = props;
-    return (_jsx(Action, { onPress: onPress, styles: getItemStyles({ isSelected, mode, indent }), style: { whiteSpace: 'nowrap' }, children: children }, void 0));
-}
-function sortTreeData(filesTree) {
-    filesTree = filesTree.map((item) => {
-        return {
-            ...item,
-            children: item.children ? sortTreeData(item.children) : undefined,
-        };
-    });
-    return filesTree.sort((a, b) => {
-        if (!a.isLeaf && b.isLeaf) {
-            return -1;
-        }
-        else if (!b.isLeaf && a.isLeaf) {
-            return 1;
-        }
-        else if (a.title && b.title) {
-            return a.title.localeCompare(b.title, 'en', { sensitivity: 'base' });
-        }
-        else {
-            return 0;
-        }
-    });
-}
-const HOVER_CSS = `
-  &:hover .actions {
-    opacity: 1;
-  }
-  &:not(:hover) .actions {
-    opacity: 0;
-  }
-`;
-export function DirectoryTree(props) {
-    let { onSelect, treeData, selectedKey, defaultExpandAll, rootTitle, actionsPanel, onlyDirs, ...otherProps } = props;
-    treeData = sortTreeData(treeData);
-    const [expanded, setExpanded] = useState(['/']);
-    const [selected, setSelected] = useState(selectedKey);
-    const fullTreeData = [
-        {
-            key: '/',
-            title: rootTitle || '/',
-            children: treeData,
-        },
-    ];
-    useEffect(() => {
-        setSelected(selectedKey);
-    }, [selectedKey]);
-    useEffect(() => {
-        if (defaultExpandAll) {
-            setExpanded(extractLeafKeys(fullTreeData, true));
-        }
-    }, []);
-    function toggle(item) {
-        if (expanded.includes(item.key)) {
-            setExpanded(expanded.filter((key) => key !== item.key));
-        }
-        else {
-            setExpanded([...expanded, item.key]);
-        }
-    }
-    function select(item) {
-        onSelect && onSelect(item.key);
-        setSelected(item.key);
-    }
-    function recursiveRender(subTreeData, indent = 0) {
-        return subTreeData.reduce((list, item) => {
-            if (!item.isLeaf) {
-                list.push(_jsx(Item, { indent: indent, isSelected: selected === item.key, onPress: () => select(item), children: _jsxs(Space, { gap: ".5x", css: HOVER_CSS, children: [_jsx(Button, { type: "clear", margin: "-.5x", padding: ".25x", color: {
-                                    '': '#dark.60',
-                                    hovered: '#purple',
-                                }, onPress: () => toggle(item), label: expanded.includes(item.key) ? 'Collapse' : 'Expand', children: expanded.includes(item.key) ? (_jsx(CaretUpOutlined, {}, void 0)) : (_jsx(CaretDownOutlined, {}, void 0)) }, void 0), _jsxs(Space, { gap: "1x", flexGrow: 1, color: selected === item.key ? '#purple' : '#dark.50', children: [expanded.includes(item.key) ? (_jsx(FolderOpenFilled, {}, void 0)) : (_jsx(FolderFilled, {}, void 0)), _jsx(Block, { style: TEXT_OVERFLOW_STYLES, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0)] }, void 0), actionsPanel && actionsPanel(item)] }, void 0) }, item.key));
-                if (expanded.includes(item.key)) {
-                    list.push(...recursiveRender(item.children || [], indent + 1));
-                }
-            }
-            else if (!onlyDirs) {
-                list.push(_jsx(Item, { indent: indent + 1.7, isSelected: selected === item.key, onPress: () => select(item), mode: item.mode, children: _jsxs(Space, { gap: "1x", css: HOVER_CSS, color: selected === item.key ? '#purple' : '#dark.50', children: [_jsx(FileOutlined, {}, void 0), _jsx(Block, { style: TEXT_OVERFLOW_STYLES, flexGrow: 1, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0), actionsPanel && actionsPanel(item), item.mode && (_jsx(Flex, { padding: "0 .5x", placeItems: "center", children: IMAGES[item.mode] }, void 0))] }, void 0) }, item.key));
-            }
-            return list;
-        }, []);
-    }
-    return (_jsx(Flex, { styles: { flow: 'column', fontWeight: 500, width: '100%', gap: '1bw' }, ...otherProps, children: recursiveRender(fullTreeData) }, void 0));
-}
-
-