@lumx/core 3.0.7 → 3.1.0

package/src/scss/lumx.scss

@@ -0,0 +1,69 @@
+/** LUMX THEME */
+
+@import "~sass-mq";
+@import "../css/design-tokens";
+
+// TODO: remove in next major version
+@import "../css/retro-compat-v2";
+@import "./design-tokens";
+
+// TODO: remove in next major version
+@import "./retro-compat-v2";
+@import "./core";
+@import "./components";
+@import "./core/base/normalize";
+@import "./core/base/index";
+@import "./core/base/helpers";
+@import "./core/spacing/index";
+@import "./core/color/index";
+@import "./core/typography/index";
+@import "./components/avatar/index";
+@import "./components/badge/index";
+@import "./components/button/index";
+@import "./components/checkbox/index";
+@import "./components/chip/index";
+@import "./components/comment-block/index";
+@import "./components/date-picker/index";
+@import "./components/dialog/index";
+@import "./components/divider/index";
+@import "./components/drag-handle/index";
+@import "./components/dropdown/index";
+@import "./components/expansion-panel/index";
+@import "./components/flag/index";
+@import "./components/flex-box/index";
+@import "./components/generic-block/index";
+@import "./components/grid/index";
+@import "./components/grid-column/index";
+@import "./components/icon/index";
+@import "./components/image-block/index";
+@import "./components/inline-list/index";
+@import "./components/input-helper/index";
+@import "./components/input-label/index";
+@import "./components/lightbox/index";
+@import "./components/link/index";
+@import "./components/link-preview/index";
+@import "./components/list/index";
+@import "./components/message/index";
+@import "./components/mosaic/index";
+@import "./components/notification/index";
+@import "./components/notification-block/index";
+@import "./components/popover/index";
+@import "./components/post-block/index";
+@import "./components/progress/index";
+@import "./components/progress-tracker/index";
+@import "./components/radio-button/index";
+@import "./components/select/index";
+@import "./components/side-navigation/index";
+@import "./components/skeleton/index";
+@import "./components/slideshow/index";
+@import "./components/slider/index";
+@import "./components/switch/index";
+@import "./components/table/index";
+@import "./components/tabs/index";
+@import "./components/text/index";
+@import "./components/text-field/index";
+@import "./components/thumbnail/index";
+@import "./components/toolbar/index";
+@import "./components/tooltip/index";
+@import "./components/uploader/index";
+@import "./components/user-block/index";

package/style-dictionary/.eslintignore

@@ -0,0 +1 @@
+**

package/style-dictionary/README.md

@@ -0,0 +1,19 @@
+# Style dictionary
+
+This folder contains the [style dictionary](https://amzn.github.io/style-dictionary/) for the LumX Design System.
+
+## Directory structure
+
+```
+- properties  =>  style dictionary properties
+- config      =>  build configs (export to SCSS, to TS, etc.)
+- index.js    =>  main build script
+```
+
+## Generate code (SCSS, JS, etc.) from the style dictionary
+
+To generate everything, simply run:
+
+```sh
+yarn generate:design-tokens
+```

package/style-dictionary/config/_run.js

@@ -0,0 +1,12 @@
+const resolveStructureAlias = require('./utils/_resolve-structure-alias');
+const StyleDictionary = require('style-dictionary');
+
+const [config] = process.argv.slice(2);
+if (config) {
+    // Load style dictionary config.
+    const dictionary = StyleDictionary.extend(require(`./${config}`)());
+    resolveStructureAlias(dictionary.properties);
+
+    // Build.
+    dictionary.buildAllPlatforms();
+}

package/style-dictionary/config/_transform-group.js

@@ -0,0 +1,16 @@
+const StyleDictionary = require("style-dictionary");
+
+/**
+ * Transform group:
+ */
+const name = "transform-group-custom";
+StyleDictionary.registerTransformGroup({
+    name,
+    transforms: [
+        require("./utils/_lumx-variables"),
+        require("./utils/_color-attributes"),
+        require("./utils/_color-rgba-value"),
+        require("./utils/_css-prefer-variable")
+    ]
+});
+module.exports = name;

package/style-dictionary/config/gen-css-variables.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const transformGroup = require('./_transform-group');
+
+module.exports = () => {
+    const baseDir = `${__dirname}/../`;
+    const buildPath = `${path.resolve(baseDir, `../src/css/`)}/`;
+
+    return {
+        source: [`${baseDir}/properties/**/*.json`],
+        platforms: {
+            css: {
+                transformGroup,
+                buildPath,
+                files: [
+                    {
+                        format: 'css/variables',
+                        destination: 'design-tokens.css',
+                        mapName: 'lumx-design-tokens',
+                    },
+                ],
+                actions: [require('./utils/_prettier-scss')({ buildPath })],
+            },
+        },
+    };
+};

package/style-dictionary/config/gen-scss-variables.js

@@ -0,0 +1,65 @@
+const StyleDictionary = require('style-dictionary');
+const path = require('path');
+const _ = require('lodash');
+const transformGroup = require('./_transform-group');
+
+/**
+ * SCSS generator
+ * Inspired by https://raw.githubusercontent.com/amzn/style-dictionary/9d867ef3ad72cf68557434ce1a28ba996a5ac467/lib/common/templates/scss/map-deep.template
+ */
+const format = 'scss/custom-map-deep';
+StyleDictionary.registerFormat({
+    name: format,
+    formatter(dictionary, depth = 0) {
+        // List SCSS variables.
+        const scssVariables = dictionary.allProperties
+            .map(({ name, value, comment }) => `$${name}: ${value} !default;${comment ? ` // ${comment}` : ''}`)
+            .join('\n');
+
+        // Build SCSS map (from SCSS variable values).
+        function processProperties(prop) {
+            const indent = '  '.repeat(depth + 1);
+            if (prop.hasOwnProperty('value')) {
+                return `$${prop.name}`;
+            } else {
+                const subProps = Object.keys(prop)
+                    .filter(key => !key.startsWith('$') &&_.isPlainObject(prop[key]))
+                    .map((key) => `${indent}'${key}': ${processProperties(prop[key], depth + 1)}`)
+                    .join(',\n');
+                return `(\n${subProps}\n${'  '.repeat(depth)})`;
+            }
+        }
+        const scssMapName = this.mapName || 'tokens';
+        const scssMap = `$${scssMapName}: ${processProperties(dictionary.properties)} !default;`;
+
+        return `
+            ${require('./utils/_genHeader')()}
+
+            ${scssVariables}
+
+            ${scssMap}
+        `;
+    },
+});
+
+module.exports = () => {
+    const baseDir = `${__dirname}/../`;
+    const buildPath = `${path.resolve(baseDir, `../src/scss/`)}/`;
+    return {
+        source: [`${baseDir}/properties/**/*.json`],
+        platforms: {
+            scss: {
+                transformGroup,
+                buildPath,
+                files: [
+                    {
+                        destination: '_design-tokens.scss',
+                        format,
+                        mapName: 'lumx-design-tokens',
+                    },
+                ],
+                actions: [require('./utils/_prettier-scss')({ buildPath })],
+            },
+        },
+    };
+};

package/style-dictionary/config/gen-ts-variables.js

@@ -0,0 +1,52 @@
+const StyleDictionary = require('style-dictionary');
+const path = require('path');
+const pickFieldsInTree = require('./utils/_pickFieldsInTree');
+const transformGroup = require('./_transform-group');
+
+/**
+ * Typescript generator:
+ */
+const format = 'typescript/map-deep';
+StyleDictionary.registerFormat({
+    name: format,
+    formatter(dictionary) {
+        const properties = this.pickFields
+            ? pickFieldsInTree(dictionary.properties, this.pickFields)
+            : dictionary.properties;
+        return `
+            ${require('./utils/_genHeader')()}
+
+            export const DESIGN_TOKENS = ${JSON.stringify(properties)}
+        `;
+    },
+});
+
+module.exports = () => {
+    const baseDir = `${__dirname}/../`;
+    const buildPath = `${path.resolve(baseDir, `../src/js/constants/`)}/`;
+
+    return {
+        source: [`${baseDir}/properties/**/*.json`],
+        platforms: {
+            ts: {
+                transformGroup,
+                buildPath,
+                files: [
+                    {
+                        format,
+                        destination: 'design-tokens.ts',
+                        pickFields: [
+                            'version',
+                            'comment',
+                            'value',
+                            'attributes.hex',
+                            'attributes.rgb',
+                            '$aliasedFrom'
+                        ],
+                    },
+                ],
+                actions: [require('./utils/_prettier-ts')({ buildPath })],
+            },
+        },
+    };
+};

package/style-dictionary/config/utils/_color-attributes.js

@@ -0,0 +1,24 @@
+const StyleDictionary = require("style-dictionary");
+const tinycolor2 = require("tinycolor2");
+
+/**
+ * Color value transform to RGBA object with added opacity if provided.
+ */
+const name = "color/attributes";
+
+StyleDictionary.registerTransform({
+    name,
+    type: "attribute",
+    matcher: (prop) => /\bcolor\b/.exec(prop.name),
+    transformer: ({ value, attributes = {}, opacity = 1 }) => {
+        const color = tinycolor2(value);
+        if (!color.getFormat() || color.getFormat() === "name") {
+            // Skip if format "name" or undefined.
+            return attributes;
+        }
+
+        const colorWithAlpha = color.setAlpha(opacity);
+        return { ...attributes, rgb: colorWithAlpha.toRgb(), hex: colorWithAlpha.toHex() };
+    }
+});
+module.exports = name;

package/style-dictionary/config/utils/_color-rgba-value.js

@@ -0,0 +1,22 @@
+const StyleDictionary = require("style-dictionary");
+const tinycolor2 = require("tinycolor2");
+
+/**
+ * Color value transform to RGBA object with added opacity if provided.
+ */
+const name = "color/rgba-value";
+
+StyleDictionary.registerTransform({
+    name,
+    type: "value",
+    matcher: (prop) => /\bcolor\b/.exec(prop.name),
+    transformer: ({ value, attributes = {} }) => {
+        const color = tinycolor2(attributes.rgb);
+        if (!color.getFormat() || color.getFormat() === "name") {
+            // Skip if format "name" or undefined.
+            return value;
+        }
+        return color.toRgbString();
+    }
+});
+module.exports = name;

package/style-dictionary/config/utils/_css-prefer-variable.js

@@ -0,0 +1,24 @@
+const StyleDictionary = require("style-dictionary");
+
+const name = "css/prefer-variable";
+
+StyleDictionary.registerTransform({
+    name,
+    type: "value",
+    matcher: (prop) => prop.preferCSSVariable,
+    transformer: (prop, config) => {
+        const extension = config.files[0].destination.replace(/.*\./, '');
+        let name;
+        if ((prop[`$config.${extension}`] || {}).aliasEquivalentCSSVariable) {
+            // Keep original prop name.
+            name = prop.name;
+        } else if (prop.$aliasedFrom) {
+            // Use the prop name for the original prop.
+            name = ('lumx.'+prop.$aliasedFrom).replace(/\./g, '-');
+        }
+
+        if (!name) return prop.value;
+        return`var(--${name})`;
+    }
+});
+module.exports = name;

package/style-dictionary/config/utils/_genHeader.js

@@ -0,0 +1,3 @@
+module.exports = function () {
+    return `/**\n * Do not edit directly\n * Generated on ${new Date().toUTCString()}\n */`;
+}

package/style-dictionary/config/utils/_lumx-variables.js

@@ -0,0 +1,12 @@
+const StyleDictionary = require('style-dictionary');
+
+/**
+ * Transform variable names.
+ */
+const name = 'name/lumx-variables';
+StyleDictionary.registerTransform({
+    name,
+    type: 'name',
+    transformer: (prop) => `lumx-${prop.path.join('-')}`,
+});
+module.exports = name;

package/style-dictionary/config/utils/_pickFieldsInTree.js

@@ -0,0 +1,22 @@
+const _ = require('lodash');
+const fp = require('lodash/fp');
+
+module.exports = function pickFieldsInTree(object, fields) {
+    if (!_.isPlainObject(object)) return null;
+
+    const values = fields.map((field) => _.get(object, field));
+    if (values.filter(Boolean).length > 0) {
+        return values.reduce((acc, value, index) => {
+            if (value) return _.set(acc, fields[index], value);
+            return acc;
+        }, {});
+    }
+
+    return fp.flow(
+        Object.entries,
+        fp.filter(([, value]) => _.isPlainObject(value)),
+        fp.map(([key, value]) => [key, pickFieldsInTree(value, fields)]),
+        fp.filter(([, value]) => !_.isEmpty(value)),
+        Object.fromEntries,
+    )(object);
+};

package/style-dictionary/config/utils/_prettier-scss.js

@@ -0,0 +1,13 @@
+const StyleDictionary = require('style-dictionary');
+const execSync = require('child_process').execSync;
+const path = require('path');
+const bin = path.resolve(__dirname, '../../../../../node_modules/.bin');
+
+module.exports = function ({ buildPath }) {
+    const name = 'prettier/style';
+    StyleDictionary.registerAction({
+        name,
+        do: () => execSync(`${bin}/prettier --write '${path.resolve(buildPath)}/**'`),
+    });
+    return name;
+};

package/style-dictionary/config/utils/_prettier-ts.js

@@ -0,0 +1,13 @@
+const StyleDictionary = require('style-dictionary');
+const execSync = require('child_process').execSync;
+const path = require('path');
+const bin = path.resolve(__dirname, '../../../../../node_modules/.bin');
+
+module.exports = function ({ buildPath }) {
+    const name = 'prettier/ts';
+    StyleDictionary.registerAction({
+        name,
+        do: () => execSync(`${bin}/eslint --fix '${path.resolve(buildPath)}'`),
+    });
+    return name;
+};

package/style-dictionary/config/utils/_resolve-structure-alias.js

@@ -0,0 +1,76 @@
+const _ = require("lodash");
+const RGX = /^{([^}]+)}$/;
+
+// Returns the string path matching the regexp or null if invalid.
+const asAliasPath = (maybePath) => _.get(_.isString(maybePath) && maybePath.match(RGX), [1], null);
+
+function getNested(tree, path) {
+    function recur(node, path) {
+        if (!path || !node) return undefined;
+        const [first, ...rest] = path.split(".");
+        const value = node[first];
+        if (rest.length === 0 || !value) return value;
+        const aliasPath = asAliasPath(value);
+        if (aliasPath) return recur(recur(tree, aliasPath), rest.join("."));
+        if (_.isPlainObject(value)) return recur(value, rest.join("."));
+        return value;
+    }
+
+    return recur(tree, path);
+}
+
+function copyPropsRecursively(node, props) {
+    if (_.isPlainObject(node)) {
+        if ('value' in node) {
+            Object.assign(node, props);
+        } else {
+            for (let value of Object.values(node)) {
+                copyPropsRecursively(value, props)
+            }
+        }
+    }
+}
+
+/**
+ * Style dictionary does not resolve alias in the property tree, only in property object (= object with a value key).
+ *
+ * By default
+ * This works : `{ "color": { "value": "{theme.baseColor}", "attr": "{foo.bar}" }}`
+ * This does not : `{ "color": "{foo.bar}" }`
+ *
+ * This function resolve the second use case.
+ */
+module.exports = function(tree) {
+    function resolveAliasInNode(node) {
+        // Skip if not object.
+        if (!_.isPlainObject(node)) return;
+
+        // Resolve alias (if any).
+        for (const [key, value] of Object.entries(node)) {
+            let aliasPath = asAliasPath(value);
+            let aliasValue = getNested(tree, aliasPath);
+            if (typeof aliasValue === "object" && "value" in aliasValue) {
+                aliasValue = Object.fromEntries(Object.entries(aliasValue).filter(([key]) => !key.startsWith('$config') && key !== "version" && key !== "comment"));
+            }
+            if (key === "$extend") {
+                if (typeof aliasValue !== "object") {
+                    throw new Error("Can't $extend a value that is not an object.");
+                }
+                delete node["$extend"];
+                const baseProps = _.cloneDeep(node);
+                Object.assign(node, _.cloneDeep(aliasValue));
+                copyPropsRecursively(node, baseProps);
+            } else if (aliasValue) {
+                node[key] = aliasValue;
+                if (typeof aliasValue === "object" && "value" in aliasValue) {
+                    node[key]["$aliasedFrom"] = aliasPath;
+                }
+            } else if (_.isPlainObject(value)) {
+                resolveAliasInNode(value);
+            }
+        }
+    }
+
+    resolveAliasInNode(tree);
+    resolveAliasInNode(tree);
+};

package/style-dictionary/index.js

@@ -0,0 +1,11 @@
+const exec = require('child_process').exec;
+
+const CONFIGS = ['gen-scss-variables', 'gen-ts-variables', 'gen-css-variables'];
+
+// For each config
+for (const config of CONFIGS) {
+    exec(`yarn node '${__dirname}/config/_run' '${config}'`, (error, stdout, stderr) => {
+        console.error(stderr);
+        console.log(stdout);
+    });
+}