@lumx/core 3.0.7-alpha.3 → 3.0.7-alpha.4

package/src/scss/lumx.scss

@@ -1,69 +0,0 @@
-/** 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

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

package/style-dictionary/README.md

@@ -1,19 +0,0 @@
-# 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

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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);
-    });
-}