@cube-dev/ui-kit 0.9.6 → 0.9.7

package/es/test/setup.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';
+
+        

package/es/tokens.js

@@ -0,0 +1,230 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+const colors = {
+    pink: '255, 100, 146',
+    'pink-02': '255, 131, 168',
+    purple: '122, 119, 255',
+    'purple-text': '102, 93, 232',
+    'purple-01': '122, 119, 255',
+    'purple-02': '149, 146, 255',
+    'purple-03': '175, 173, 255',
+    'purple-04': '202, 201, 255',
+    text: '91, 92, 125',
+    dark: '20, 20, 70',
+    'dark-01': '20, 20, 70',
+    'dark-02': '67, 67, 107',
+    'dark-03': '114, 114, 144',
+    'dark-04': '161, 161, 181',
+    'dark-05': '213, 213, 226',
+    'grey-light': '248, 248, 249',
+    light: '246, 246, 248',
+    white: '255, 255, 255',
+    black: '0, 0, 0',
+    'danger-text': '239, 64, 74',
+    danger: '255, 100, 109',
+    'light-grey': '248, 248, 249',
+    success: '49, 195, 124',
+    'success-text': '48, 166, 102',
+    note: '251, 188, 5',
+};
+function color(name, opacity = 1) {
+    return `rgba(${colors[name]}, ${opacity})`;
+}
+const TOKENS = {
+    // Base and legacy tokens
+    'font-size': '14px',
+    'line-height': '20px',
+    'input-font-size': '14px',
+    'input-line-height': '20px',
+    'input-letter-spacing': '0.02em',
+    'disabled-opacity': '.4',
+    gap: '8px',
+    'outline-width': 'calc(1rem / 16 * 3)',
+    'border-width': '1px',
+    radius: '4px',
+    'leaf-sharp-radius': '0px',
+    transition: '120ms',
+    'clear-color': 'transparent',
+    'border-color': color('dark', 0.1),
+    'shadow-color': color('dark-03', 0.1),
+    'draft-color': color('dark', 0.2),
+    'minor-color': color('dark', 0.65),
+    'success-bg-color': 'rgba(41, 190, 110, .1)',
+    'note-bg-color': color('note', 0.1),
+    'note-text-color': color('dark', 0.65),
+    'danger-bg-color': color('danger', 0.05),
+    'danger-bg-hover-color': color('danger', 0.1),
+    'primary-1': color('purple', 0.9),
+    'primary-2': color('purple', 0.8),
+    'primary-3': color('purple', 0.7),
+    'primary-4': color('purple', 0.6),
+    'primary-5': color('purple', 0.5),
+    'primary-6': color('purple', 0.4),
+    'primary-7': color('purple', 0.3),
+    'primary-8': color('purple', 0.2),
+    'primary-9': color('purple', 0.1),
+    'primary-10': color('purple', 0),
+    'dark-75-color': color('dark', 0.75),
+    'primary-color': color('purple'),
+    'pink-8-color': color('pink', 0.2),
+    'pink-9-color': color('pink', 0.1),
+    'disabled-color': color('dark-01', 0.25),
+    'disabled-text-color': color('dark-01', 0.25),
+    'disabled-bg': color('dark-05', 0.2),
+    'disabled-bg-color': color('dark-05', 0.2),
+    'max-content-width': '1440px',
+    'topbar-height': '48px',
+    'devmodebar-height': '54px',
+    'sidebar-width': '200px',
+    'border-radius-base': '4px',
+    // font sizes
+    'text-font-size': '14px',
+    'text-line-height': '20px',
+    'text-letter-spacing': '0.02em',
+    // h1
+    'h1-font-size': '36px',
+    'h1-line-height': '44px',
+    'h1-letter-spacing': '-0.01em',
+    'h1-font-weight': '700',
+    // h2
+    'h2-font-size': '24px',
+    'h2-line-height': '36px',
+    'h2-letter-spacing': '0em',
+    'h2-font-weight': '700',
+    // h3
+    'h3-font-size': '20px',
+    'h3-line-height': '28px',
+    'h3-letter-spacing': '0em',
+    'h3-font-weight': '700',
+    // h4
+    'h4-font-size': '18px',
+    'h4-line-height': '24px',
+    'h4-letter-spacing': '0.01em',
+    'h4-font-weight': '700',
+    // h5
+    'h5-font-size': '16px',
+    'h5-line-height': '22px',
+    'h5-letter-spacing': '0.02em',
+    'h5-font-weight': '700',
+    // h5 semi-bold
+    'h5s-font-size': '16px',
+    'h5s-line-height': '22px',
+    'h5s-letter-spacing': '0.02em',
+    'h5s-font-weight': '600',
+    // h5 medium
+    'h5m-font-size': '16px',
+    'h5m-line-height': '22px',
+    'h5m-letter-spacing': '0.02em',
+    'h5m-font-weight': '500',
+    // h6 (unused)
+    'h6-font-size': '14px',
+    'h6-line-height': '20px',
+    'h6-font-weight': '700',
+    // t1
+    't1-font-size': '18px',
+    't1-line-height': '24px',
+    't1-letter-spacing': '0',
+    't1-font-weight': '400',
+    // t2
+    't2-font-size': '16px',
+    't2-line-height': '22px',
+    't2-letter-spacing': '0.01em',
+    't2-font-weight': '400',
+    // t3
+    't3-font-size': '14px',
+    't3-line-height': '20px',
+    't3-letter-spacing': '0.02em',
+    't3-font-weight': '400',
+    // t3m
+    't3m-font-size': '14px',
+    't3m-line-height': '20px',
+    't3m-letter-spacing': '0.015em',
+    't3m-font-weight': '500',
+    // t4
+    't4-font-size': '12px',
+    't4-line-height': '18px',
+    't4-letter-spacing': '0.025em',
+    't4-font-weight': '400',
+    // t4m
+    't4m-font-size': '12px',
+    't4m-line-height': '18px',
+    't4m-letter-spacing': '0.02em',
+    't4m-font-weight': '500',
+    // p1
+    'p1-font-size': '18px',
+    'p1-line-height': '28px',
+    'p1-letter-spacing': '0',
+    'p1-font-weight': '400',
+    // p2
+    'p2-font-size': '16px',
+    'p2-line-height': '24px',
+    'p2-letter-spacing': '0.01em',
+    'p2-font-weight': '400',
+    // p3
+    'p3-font-size': '14px',
+    'p3-line-height': '22px',
+    'p3-letter-spacing': '0.02em',
+    'p3-font-weight': '400',
+    // p4
+    'p4-font-size': '12px',
+    'p4-line-height': '20px',
+    'p4-letter-spacing': '0.025em',
+    'p4-font-weight': '400',
+    // c1
+    'c1-font-size': '14px',
+    'c1-line-height': '20px',
+    'c1-letter-spacing': '0.015em',
+    'c1-font-weight': '500',
+    'c1-text-transform': 'uppercase',
+    // c2
+    'c2-font-size': '12px',
+    'c2-line-height': '18px',
+    'c2-letter-spacing': '0.02em',
+    'c2-font-weight': '500',
+    'c2-text-transform': 'uppercase',
+    // tag
+    'tag-font-size': '12px',
+    'tag-line-height': '12px',
+    'tag-letter-spacing': '0.02em',
+    'tag-font-weight': '500',
+    // strong
+    'strong-font-size': 'inherit',
+    'strong-line-height': 'inherit',
+    'strong-letter-spacing': 'inherit',
+    'strong-font-family': 'inherit',
+    'strong-font-style': 'inherit',
+    'strong-font-weight': 600,
+    // em
+    'em-font-size': 'inherit',
+    'em-line-height': 'inherit',
+    'em-letter-spacing': 'inherit',
+    'em-font-family': 'inherit',
+    'em-font-style': 'italic',
+    'em-font-weight': 'inherit',
+    // default
+    'default-font-size': 'var(--t3-font-size)',
+    'default-line-height': 'var(--t3-line-height)',
+    'default-letter-spacing': 'var(--t3-letter-spacing)',
+    'default-font-weight': 'var(--t3-font-weight)',
+    // scrollbar colors
+    'scrollbar-width': '1.5x',
+    'scrollbar-outline-width': '1ow',
+    'scrollbar-radius': '1.5r',
+    'scrollbar-thumb-color': 'rgba(var(--text-color-rgb), .5)',
+    'scrollbar-outline-color': 'var(--clear-color)',
+    'scrollbar-bg-color': 'var(--grey-light-color)',
+    'scrollbar-corner-color': 'var(--clear-color)',
+};
+// Map color tokens
+Object.keys(colors).forEach((name) => {
+    TOKENS[`${name}-color`] = color(name);
+    TOKENS[`${name}-color-rgb`] = colors[name];
+});
+export { TOKENS };
+
+        

package/es/utils/ResizeSensor.js

@@ -0,0 +1,320 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+// @ts-nocheck
+/**
+ * Iterate over each of the provided element(s).
+ *
+ * @param {HTMLElement|HTMLElement[]} elements
+ * @param {Function}                  callback
+ */
+function forEachElement(elements, callback) {
+    let elementsType = Object.prototype.toString.call(elements);
+    let isCollectionTyped = '[object Array]' === elementsType
+        || '[object NodeList]' === elementsType
+        || '[object HTMLCollection]' === elementsType
+        || '[object Object]' === elementsType
+        || ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
+        || ('undefined' !== typeof Elements && elements instanceof Elements); //mootools
+    let i = 0, j = elements.length;
+    if (isCollectionTyped) {
+        for (; i < j; i++) {
+            callback(elements[i]);
+        }
+    }
+    else {
+        callback(elements);
+    }
+}
+/**
+ * Get element size
+ * @param {HTMLElement} element
+ * @returns {Object} {width, height}
+ */
+function getElementSize(element) {
+    if (!element.getBoundingClientRect) {
+        return {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+        };
+    }
+    let rect = element.getBoundingClientRect();
+    return {
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+    };
+}
+/**
+ * Apply CSS styles to element.
+ *
+ * @param {HTMLElement} element
+ * @param {Object} style
+ */
+function setStyle(element, style) {
+    Object.keys(style).forEach(function (key) {
+        element.style[key] = style[key];
+    });
+}
+/**
+ * Class for dimension change detection.
+ *
+ * @param {Element|Element[]|Elements} element
+ * @param {Function} callback
+ *
+ * @constructor
+ */
+export let ResizeSensor = function (element, callback) {
+    // https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
+    // https://github.com/Semantic-Org/Semantic-UI/issues/3855
+    // https://github.com/marcj/css-element-queries/issues/257
+    let globalWindow = window;
+    // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
+    // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
+    // would generate too many unnecessary events.
+    let requestAnimationFrame = globalWindow.requestAnimationFrame
+        || globalWindow.mozRequestAnimationFrame
+        || globalWindow.webkitRequestAnimationFrame
+        || function (fn) {
+            return globalWindow.setTimeout(fn, 20);
+        };
+    let cancelAnimationFrame = globalWindow.cancelAnimationFrame
+        || globalWindow.mozCancelAnimationFrame
+        || globalWindow.webkitCancelAnimationFrame
+        || function (timer) {
+            globalWindow.clearTimeout(timer);
+        };
+    //Is used when checking in reset() only for invisible elements
+    let lastAnimationFrameForInvisibleCheck = 0;
+    /**
+     *
+     * @constructor
+     */
+    function EventQueue() {
+        let q = [];
+        this.add = function (ev) {
+            q.push(ev);
+        };
+        let i, j;
+        this.call = function (sizeInfo) {
+            for (i = 0, j = q.length; i < j; i++) {
+                q[i].call(this, sizeInfo);
+            }
+        };
+        this.remove = function (ev) {
+            let newQueue = [];
+            for (i = 0, j = q.length; i < j; i++) {
+                if (q[i] !== ev)
+                    newQueue.push(q[i]);
+            }
+            q = newQueue;
+        };
+        this.length = function () {
+            return q.length;
+        };
+    }
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Function}    resized
+     */
+    function attachResizeEvent(element, resized) {
+        if (!element)
+            return;
+        if (element.resizedAttached) {
+            element.resizedAttached.add(resized);
+            return;
+        }
+        element.resizedAttached = new EventQueue();
+        element.resizedAttached.add(resized);
+        element.resizeSensor = document.createElement('div');
+        element.resizeSensor.dir = 'ltr';
+        element.resizeSensor.className = 'resize-sensor';
+        let style = {
+            pointerEvents: 'none',
+            position: 'absolute',
+            left: '0px',
+            top: '0px',
+            right: '0px',
+            bottom: '0px',
+            overflow: 'hidden',
+            zIndex: '-1',
+            visibility: 'hidden',
+            maxWidth: '100%',
+        };
+        let styleChild = {
+            position: 'absolute',
+            left: '0px',
+            top: '0px',
+            transition: '0s',
+        };
+        setStyle(element.resizeSensor, style);
+        let expand = document.createElement('div');
+        expand.className = 'resize-sensor-expand';
+        setStyle(expand, style);
+        let expandChild = document.createElement('div');
+        setStyle(expandChild, styleChild);
+        expand.appendChild(expandChild);
+        let shrink = document.createElement('div');
+        shrink.className = 'resize-sensor-shrink';
+        setStyle(shrink, style);
+        let shrinkChild = document.createElement('div');
+        setStyle(shrinkChild, styleChild);
+        setStyle(shrinkChild, { width: '200%', height: '200%' });
+        shrink.appendChild(shrinkChild);
+        element.resizeSensor.appendChild(expand);
+        element.resizeSensor.appendChild(shrink);
+        element.appendChild(element.resizeSensor);
+        let computedStyle = window.getComputedStyle(element);
+        let position = computedStyle
+            ? computedStyle.getPropertyValue('position')
+            : null;
+        if ('absolute' !== position
+            && 'relative' !== position
+            && 'fixed' !== position
+            && 'sticky' !== position) {
+            element.style.position = 'relative';
+        }
+        let dirty = false;
+        //last request animation frame id used in onscroll event
+        let rafId = 0;
+        let size = getElementSize(element);
+        let lastWidth = 0;
+        let lastHeight = 0;
+        let initialHiddenCheck = true;
+        lastAnimationFrameForInvisibleCheck = 0;
+        let resetExpandShrink = function () {
+            let width = element.offsetWidth;
+            let height = element.offsetHeight;
+            expandChild.style.width = width + 10 + 'px';
+            expandChild.style.height = height + 10 + 'px';
+            expand.scrollLeft = width + 10;
+            expand.scrollTop = height + 10;
+            shrink.scrollLeft = width + 10;
+            shrink.scrollTop = height + 10;
+        };
+        let reset = function () {
+            // Check if element is hidden
+            if (initialHiddenCheck) {
+                let invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
+                if (invisible) {
+                    // Check in next frame
+                    if (!lastAnimationFrameForInvisibleCheck) {
+                        lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function () {
+                            lastAnimationFrameForInvisibleCheck = 0;
+                            reset();
+                        });
+                    }
+                    return;
+                }
+                else {
+                    // Stop checking
+                    initialHiddenCheck = false;
+                }
+            }
+            resetExpandShrink();
+        };
+        element.resizeSensor.resetSensor = reset;
+        let onResized = function () {
+            rafId = 0;
+            if (!dirty)
+                return;
+            lastWidth = size.width;
+            lastHeight = size.height;
+            if (element.resizedAttached) {
+                element.resizedAttached.call(size);
+            }
+        };
+        let onScroll = function () {
+            size = getElementSize(element);
+            dirty = size.width !== lastWidth || size.height !== lastHeight;
+            if (dirty && !rafId) {
+                rafId = requestAnimationFrame(onResized);
+            }
+            reset();
+        };
+        let addEvent = function (el, name, cb) {
+            if (el.attachEvent) {
+                el.attachEvent('on' + name, cb);
+            }
+            else {
+                el.addEventListener(name, cb);
+            }
+        };
+        addEvent(expand, 'scroll', onScroll);
+        addEvent(shrink, 'scroll', onScroll);
+        // Fix for custom Elements and invisible elements
+        lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function () {
+            lastAnimationFrameForInvisibleCheck = 0;
+            reset();
+        });
+    }
+    forEachElement(element, function (elem) {
+        attachResizeEvent(elem, callback);
+    });
+    this.detach = function (ev) {
+        // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
+        if (lastAnimationFrameForInvisibleCheck) {
+            cancelAnimationFrame(lastAnimationFrameForInvisibleCheck);
+            lastAnimationFrameForInvisibleCheck = 0;
+        }
+        ResizeSensor.detach(element, ev);
+    };
+    this.reset = function () {
+        //To prevent invoking element.resizeSensor.resetSensor if it's undefined
+        if (element.resizeSensor.resetSensor) {
+            element.resizeSensor.resetSensor();
+        }
+    };
+};
+ResizeSensor.reset = function (element) {
+    forEachElement(element, function (elem) {
+        //To prevent invoking element.resizeSensor.resetSensor if it's undefined
+        if (element.resizeSensor.resetSensor) {
+            elem.resizeSensor.resetSensor();
+        }
+    });
+};
+ResizeSensor.detach = function (element, ev) {
+    forEachElement(element, function (elem) {
+        if (!elem)
+            return;
+        if (elem.resizedAttached && typeof ev === 'function') {
+            elem.resizedAttached.remove(ev);
+            if (elem.resizedAttached.length())
+                return;
+        }
+        if (elem.resizeSensor) {
+            if (elem.contains(elem.resizeSensor)) {
+                elem.removeChild(elem.resizeSensor);
+            }
+            delete elem.resizeSensor;
+            delete elem.resizedAttached;
+        }
+    });
+};
+if (typeof MutationObserver !== 'undefined') {
+    let observer = new MutationObserver(function (mutations) {
+        for (let i in mutations) {
+            if (mutations.hasOwnProperty(i)) {
+                let items = mutations[i].addedNodes;
+                for (let j = 0; j < items.length; j++) {
+                    if (items[j].resizeSensor) {
+                        ResizeSensor.reset(items[j]);
+                    }
+                }
+            }
+        }
+    });
+    document.addEventListener('DOMContentLoaded', function (event) {
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
+
+        

package/es/utils/colors.js

@@ -0,0 +1,15 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export function color(name, opacity = 1) {
+    if (opacity !== 1) {
+        return `rgba(var(--${name}-color-rgb), ${opacity})`;
+    }
+    return `var(--${name}-color)`;
+}
+
+