@aws-amplify/ui 6.0.17 → 6.2.0

package/dist/esm/theme/createTheme/utils.mjs

@@ -0,0 +1,236 @@
+import kebabCase from 'lodash/kebabCase.js';
+import '@aws-amplify/core/internals/utils';
+import '../../utils/setUserAgent/constants.mjs';
+import { isObject, has, isString } from '../../utils/utils.mjs';
+
+const CSS_VARIABLE_PREFIX = 'amplify';
+/**
+ * This will take an object like:
+ * {paddingTop:'20px',color:'{colors.font.primary}'}
+ * and turn it into a CSS string:
+ * `padding-top:20px; color: var(--colors-font-primary);`
+ */
+function propsToString(props) {
+    return Object.entries(props)
+        .map(([key, value]) => {
+        const _value = isDesignToken(value)
+            ? value.toString()
+            : // @ts-ignore
+                cssValue({ value });
+        return `${kebabCase(key)}:${_value}; `;
+    })
+        .join(' ');
+}
+function cssNameTransform({ path = [] }) {
+    return `${kebabCase([CSS_VARIABLE_PREFIX, ...path].join(' '))}`;
+}
+// Important: these properties should not be altered in
+// order to maintain the expected order of the CSS `box-shadow` property
+const SHADOW_PROPERTIES = [
+    'offsetX',
+    'offsetY',
+    'blurRadius',
+    'spreadRadius',
+    'color',
+];
+/**
+ * Will take a design token in a theme and return its value as CSS
+ *
+ * @param token
+ * @returns
+ */
+function cssValue(token) {
+    const { value } = token;
+    if (isString(value)) {
+        return referenceValue(value);
+    }
+    if (isShadowTokenObject(value)) {
+        return SHADOW_PROPERTIES.map((property) => {
+            return referenceValue(
+            // lookup property against `token` first for custom non-nested value, then lookup
+            // property against `value` for design token value
+            isShadowTokenObject(token) ? token[property] : value[property]);
+        }).join(' ');
+    }
+    return value;
+}
+/**
+ * Helper function to test if something is a design token or not.
+ * Used in the React component style props.
+ *
+ * @param value - thing to test if it is a design token or not
+ * @returns boolean
+ */
+function isDesignToken(value) {
+    return isObject(value) && has(value, 'value');
+}
+function isShadowTokenObject(value) {
+    return isObject(value) && has(value, 'offsetX');
+}
+/**
+ * Function that sees if a string contains a design token reference
+ * and if so will turn that into a CSS variable.
+ *
+ * @param {string} value
+ * @returns string
+ */
+function referenceValue(value) {
+    if (!value)
+        return '';
+    if (usesReference(value)) {
+        const path = value.replace(/\{|\}/g, '').replace('.value', '').split('.');
+        return `var(--${cssNameTransform({ path })})`;
+    }
+    return value;
+}
+/**
+ * This will take a design token and add some data to it for it
+ * to be used in JS/CSS. It will create its CSS var name and update
+ * the value to use a CSS var if it is a reference. It will also
+ * add a `.toString()` method to make it easier to use in JS.
+ *
+ * We should see if there is a way to share this logic with style dictionary...
+ */
+const setupToken = ({ token, path }) => {
+    const name = `--${cssNameTransform({ path })}`;
+    const { value: original } = token;
+    const value = cssValue(token);
+    return { name, original, path, value, toString: () => `var(${name})` };
+};
+/**
+ * Recursive function that will walk down the token object
+ * and perform the setupToken function on each token.
+ * Similar to what Style Dictionary does.
+ */
+function setupTokens({ tokens, path = [], setupToken, }) {
+    if (has(tokens, 'value')) {
+        return setupToken({ token: tokens, path });
+    }
+    const output = {};
+    for (const name in tokens) {
+        if (has(tokens, name)) {
+            const value = tokens[name];
+            const nextTokens = isObject(value) ? value : { value };
+            output[name] = setupTokens({
+                tokens: nextTokens,
+                path: path.concat(name),
+                setupToken,
+            });
+        }
+    }
+    return output;
+}
+// Internal Style Dictionary methods
+// copied from amzn/style-dictionary with the owner's permission
+/**
+ * Takes an plain javascript object and will make a flat array of all the leaf nodes.
+ * A leaf node in this context has a 'value' property. Potentially refactor this to
+ * be more generic.
+ * @private
+ * @param  {Object} properties - The plain object you want flattened into an array.
+ * @param  {Array} [to_ret=[]] - Properties array. This function is recursive therefore this is what gets passed along.
+ * @return {Array}
+ */
+function flattenProperties(properties, to_ret) {
+    to_ret = to_ret || [];
+    for (var name in properties) {
+        if (has(properties, name)) {
+            if (isObject(properties[name]) && 'value' in properties[name]) {
+                to_ret.push(properties[name]);
+            }
+            else if (isObject(properties[name])) {
+                flattenProperties(properties[name], to_ret);
+            }
+        }
+    }
+    return to_ret;
+}
+/**
+ * Performs an deep extend on the objects, from right to left.
+ * @private
+ * @param {Object[]} objects - An array of JS objects
+ * @param {Function} collision - A function to be called when a merge collision happens.
+ * @param {string[]} path - (for internal use) An array of strings which is the current path down the object when this is called recursively.
+ * @returns {Object}
+ */
+function deepExtend(objects, collision, path) {
+    if (objects == null)
+        return {};
+    var src, copyIsArray, copy, name, options, clone, target = objects[0] || {}, i = 1, length = objects.length;
+    path = path || [];
+    // Handle case when target is a string or something (possible in deep copy)
+    if (typeof target !== 'object') {
+        target = {};
+    }
+    for (; i < length; i++) {
+        // Only deal with non-null/undefined values
+        if ((options = objects[i]) != null) {
+            // Extend the base object
+            for (name in options) {
+                if (!has(options, name))
+                    continue;
+                if (name === '__proto__')
+                    continue;
+                src = target[name];
+                copy = options[name];
+                // Prevent never-ending loop
+                if (target === copy) {
+                    continue;
+                }
+                // Recurse if we're merging plain objects or arrays
+                if (copy && (isObject(copy) || (copyIsArray = Array.isArray(copy)))) {
+                    if (copyIsArray) {
+                        copyIsArray = false;
+                        clone = src && Array.isArray(src) ? src : [];
+                    }
+                    else {
+                        clone = src && isObject(src) ? src : {};
+                    }
+                    var nextPath = path.slice(0);
+                    nextPath.push(name);
+                    // Never move original objects, clone them
+                    target[name] = deepExtend([clone, copy], collision, nextPath);
+                    // Don't bring in undefined values
+                }
+                else if (copy !== undefined) {
+                    if (src != null && typeof collision == 'function') {
+                        collision({ target: target, copy: options, path: path, key: name });
+                    }
+                    target[name] = copy;
+                }
+            }
+        }
+    }
+    return target;
+}
+/**
+ * Checks if the value uses a value reference.
+ * @param {string} value
+ * @returns {boolean} - True, if the value uses a value reference
+ */
+function usesReference(value) {
+    const regex = new RegExp('\\{([^}]+)\\}', 'g');
+    if (typeof value === 'string') {
+        return regex.test(value);
+    }
+    if (typeof value === 'object') {
+        let hasReference = false;
+        // iterate over each property in the object,
+        // if any element passes the regex test,
+        // the whole thing should be true
+        for (const key in value) {
+            if (has(value, key)) {
+                const element = value[key];
+                let reference = usesReference(element);
+                if (reference) {
+                    hasReference = true;
+                    break;
+                }
+            }
+        }
+        return hasReference;
+    }
+    return false;
+}
+
+export { CSS_VARIABLE_PREFIX, cssNameTransform, cssValue, deepExtend, flattenProperties, isDesignToken, isShadowTokenObject, propsToString, referenceValue, setupToken, setupTokens, usesReference };

package/dist/esm/utils/humanFileSize.mjs

@@ -0,0 +1,29 @@
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+function humanFileSize(bytes, si = false, dp = 1) {
+    const thresh = si ? 1000 : 1024;
+    if (Math.abs(bytes) < thresh) {
+        return `${bytes} B`;
+    }
+    const units = si
+        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    let unit = -1;
+    const range = 10 ** dp;
+    do {
+        bytes /= thresh;
+        ++unit;
+    } while (Math.round(Math.abs(bytes) * range) / range >= thresh &&
+        unit < units.length - 1);
+    return bytes.toFixed(dp) + ' ' + units[unit];
+}
+
+export { humanFileSize };

package/dist/esm/utils/utils.mjs

@@ -223,5 +223,25 @@ function groupLog(groupName, ...events) {
         console.log(groupName);
     }
 }
+/**
+ * Splits an object into 2 objects based on a predicate
+ *
+ * @param {object} obj an object to split into two
+ * @param {function} predicate function to determin where an element should go
+ * @returns
+ */
+function splitObject(obj, predicate) {
+    const left = {};
+    const right = {};
+    Object.entries(obj).forEach(([key, value]) => {
+        if (predicate(key)) {
+            left[key] = value;
+        }
+        else {
+            right[key] = value;
+        }
+    });
+    return [left, right];
+}
 
-export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, templateJoin };
+export { areEmptyArrays, areEmptyObjects, capitalize, classNameModifier, classNameModifierByFlag, groupLog, has, isEmpty, isEmptyObject, isFunction, isMap, isNil, isObject, isSet, isString, isTypedFunction, isUndefined, noop, sanitizeNamespaceImport, splitObject, templateJoin };