@cube-dev/ui-kit 0.9.4 → 0.9.7

package/cjs/utils/renderStyles.js

@@ -0,0 +1,132 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderStyles = exports.isSelector = void 0;
+const responsive_1 = require("./responsive");
+const styles_1 = require("../styles");
+function isSelector(key) {
+    return key.startsWith('&') || key.startsWith('.') || key.match(/^[A-Z]/);
+}
+exports.isSelector = isSelector;
+function getSelector(key) {
+    if (key.startsWith('&')) {
+        return key.slice(1);
+    }
+    if (key.startsWith('.')) {
+        return ` ${key}`;
+    }
+    if (key.match(/^[A-Z]/)) {
+        return ` [data-element="${key}"]`;
+    }
+    return null;
+}
+/** Props level cache for `renderStyles` function. */
+let STYLE_CACHE = {};
+/** Current size of the cache. */
+let STYLE_CACHE_COUNT = 0;
+/** Cache limit. */
+const CACHE_LIMIT = 1000;
+/**
+ * Render style props to complete Styled Components CSS.
+ * @param styles - Complete style props.
+ * @param responsive - A list of responsive zones
+ * @param {string} [suffix]
+ * @return {string}
+ */
+function renderStyles(styles, responsive, suffix) {
+    const zones = responsive;
+    const responsiveStyles = Array.from(Array(zones.length)).map(() => '');
+    const cacheKey = JSON.stringify({ s: styles, r: responsive, suffix });
+    let rawStyles = '';
+    const handlerQueue = [];
+    if (!STYLE_CACHE[cacheKey]) {
+        STYLE_CACHE_COUNT++;
+        // clear cache if size is more that the limit
+        if (STYLE_CACHE_COUNT > CACHE_LIMIT) {
+            STYLE_CACHE_COUNT = 0;
+            STYLE_CACHE = {};
+        }
+        const keys = Object.keys(styles);
+        const selectorKeys = keys.filter((key) => isSelector(key));
+        let innerStyles = '';
+        if (selectorKeys.length) {
+            selectorKeys.forEach((key) => {
+                const addSuffix = getSelector(key);
+                innerStyles += renderStyles(styles[key], responsive, addSuffix);
+            });
+        }
+        keys.forEach((styleName) => {
+            if (isSelector(styleName))
+                return;
+            let handlers = styles_1.STYLE_HANDLER_MAP[styleName];
+            if (!handlers) {
+                handlers = styles_1.STYLE_HANDLER_MAP[styleName] = [(0, styles_1.createStyle)(styleName)];
+            }
+            handlers.forEach((STYLE) => {
+                if (handlerQueue.find((queueItem) => queueItem.handler === STYLE))
+                    return;
+                let isResponsive = false;
+                const lookupStyles = STYLE.__lookupStyles;
+                const filteredStyleMap = lookupStyles.reduce((map, name) => {
+                    map[name] = styles[name];
+                    if (Array.isArray(map[name])) {
+                        if (map[name].length === 0) {
+                            delete map[name];
+                        }
+                        else {
+                            if (map[name].length === 1) {
+                                map[name] = map[name][0];
+                            }
+                            isResponsive = true;
+                        }
+                    }
+                    return map;
+                }, {});
+                handlerQueue.push({
+                    handler: STYLE,
+                    styleMap: filteredStyleMap,
+                    isResponsive,
+                });
+            });
+        });
+        handlerQueue.forEach(({ handler, styleMap, isResponsive }) => {
+            const lookupStyles = handler.__lookupStyles;
+            if (isResponsive) {
+                const valueMap = lookupStyles.reduce((map, style) => {
+                    map[style] = (0, responsive_1.normalizeStyleZones)(styleMap[style], zones.length);
+                    return map;
+                }, {});
+                const propsByPoint = zones.map((zone, i) => {
+                    const pointProps = {};
+                    lookupStyles.forEach((style) => {
+                        if (valueMap != null && valueMap[style] != null) {
+                            pointProps[style] = valueMap[style][i];
+                        }
+                    });
+                    return pointProps;
+                });
+                const rulesByPoint = propsByPoint.map((props) => handler(props, suffix));
+                rulesByPoint.forEach((rules, i) => {
+                    responsiveStyles[i] += rules || '';
+                });
+            }
+            else {
+                rawStyles
+                    += handler(styleMap, suffix) || '';
+            }
+        });
+        STYLE_CACHE[cacheKey] = `outline: none;\n&[hidden]{display: none !important;}${rawStyles}${responsive && responsive.length
+            ? (0, responsive_1.mediaWrapper)(responsiveStyles, zones)
+            : ''}${innerStyles}`;
+    }
+    return STYLE_CACHE[cacheKey];
+}
+exports.renderStyles = renderStyles;
+
+        

package/cjs/utils/responsive.js

@@ -0,0 +1,72 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeStyleZones = exports.pointsToZones = exports.mediaWrapper = void 0;
+function mediaWrapper(cssRules, points) {
+    return points
+        .filter((point) => point.mediaQuery)
+        .map((point, i) => `@media ${point.mediaQuery} {${cssRules[i]}}`)
+        .join('\n');
+}
+exports.mediaWrapper = mediaWrapper;
+const zonesCache = {};
+function pointsToZones(points) {
+    const cacheKey = points.join('|');
+    if (!zonesCache[cacheKey]) {
+        const zones = [];
+        points.forEach((point, i) => {
+            const zone = {};
+            if (i) {
+                zone.max = points[i - 1] - 1;
+            }
+            zone.min = point;
+            zones.push(zone);
+        });
+        zones.push({
+            max: points[points.length - 1] - 1,
+        });
+        zones.forEach((zone) => {
+            const queries = [];
+            if (zone.min) {
+                queries.push(`(min-width: ${zone.min}px)`);
+            }
+            if (zone.max) {
+                queries.push(`(max-width: ${zone.max}px)`);
+            }
+            zone.mediaQuery = queries.join(' and ');
+        });
+        zonesCache[cacheKey] = zones;
+    }
+    return zonesCache[cacheKey];
+}
+exports.pointsToZones = pointsToZones;
+// export function getResponsiveValue(values, zoneNumber) {
+//   for (let i = zoneNumber; i >= 0; i--) {
+//     if (values[i] != null)
+//   }
+// }
+function normalizeStyleZones(value, zoneNumber) {
+    if (value == null)
+        return value;
+    const arr = Array.from(Array(zoneNumber));
+    if (typeof value === 'string')
+        return arr.map(() => value);
+    if (Array.isArray(value)) {
+        let prevValue = null;
+        for (let i = 0; i < arr.length; i++) {
+            arr[i] = value[i] == null ? prevValue : value[i];
+            prevValue = arr[i];
+        }
+        return arr;
+    }
+    return [];
+}
+exports.normalizeStyleZones = normalizeStyleZones;
+
+        

package/cjs/utils/string.js

@@ -0,0 +1,16 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toSnakeCase = void 0;
+function toSnakeCase(str) {
+    return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
+}
+exports.toSnakeCase = toSnakeCase;
+
+