@madgex/design-system 9.3.1 → 10.0.0

package/style-dictionary/index.js

@@ -0,0 +1,215 @@
+const fs = require('node:fs/promises');
+const path = require('node:path');
+const { glob } = require('glob');
+const { writeTransformedFileBrandColorLightnessTokens } = require('./color-transforms');
+
+const defaultDistDir = path.resolve(__dirname, '../dist/_tokens/');
+/**
+ * Base Style Dictionary Config which includes our base tokens.
+ * @type {import('style-dictionary').Config}
+ */
+const baseConfig = Object.freeze({
+  log: {
+    verbosity: 'verbose',
+  },
+  // This include path needs to be in posix because combineJSON util inside style dictionary only accepts that
+  include: [path.posix.resolve(__dirname, '../src/tokens/*.json')],
+  hooks: {
+    transforms: {
+      /**
+       * escape when we need to pass through the token value without transformation.
+       *
+       * Try not to use this.
+       *
+       * @example
+       * ```json
+       * {
+       *   "myStrangeItem": {
+       *     "$value": "special-new-css-value",
+       *     "$type": "raw"
+       *   }
+       * }
+       */
+      'css/rawData': {
+        type: 'value',
+        filter: (token) => token.type === 'raw',
+        transform: (token) => token.rawData,
+      },
+    },
+  },
+  /**
+   * various outputs
+   *
+   * transforms match the `type` on each token, built in transforms: https://styledictionary.com/reference/hooks/transforms/predefined/
+   *
+   *
+   */
+  platforms: {
+    /**
+     * Primary CSS Variables render
+     */
+    'css-variables': {
+      transforms: ['name/kebab', 'color/css', 'css/rawData'],
+      buildPath: path.join(defaultDistDir, 'css/'),
+      prefix: 'mds',
+      files: [
+        {
+          destination: 'variables.css',
+          format: 'css/variables',
+          filter: 'removePrivate',
+        },
+      ],
+    },
+    /**
+     * used to render another scss source file! Constants for use in main DS scss build
+     */
+    'scss-variables': {
+      transforms: ['name/kebab'],
+      buildPath: `${path.resolve(__dirname, '../src/scss/constants/')}/`,
+      prefix: 'constant',
+      files: [
+        {
+          destination: '_sd-tokens.scss',
+          format: 'scss/map-deep',
+          options: {
+            themeable: false,
+          },
+          filter(token) {
+            // only keep "private" tokens aka constants
+            return !!(token && token.private);
+          },
+        },
+      ],
+    },
+    /**
+     * used by:
+     *
+     * #### 'template-renderer'
+     * https://github.com/wiley/madgex-template-renderer/blob/e5eb868e6b789a8d751efc98768672d877196fa5/lib/services/dataUtils.js#L101
+     *
+     * #### display-image-render-api
+     * https://github.com/wiley/madgex-display-image-render-api/blob/27e6e219400a98a41f39861c8b362a0849888ea3/lib/services/templates.js#L157
+     */
+    'json-variables': {
+      // transformGroup: 'js',
+      transforms: ['name/kebab', 'color/css'],
+      buildPath: path.join(defaultDistDir, 'json/'),
+      files: [
+        {
+          destination: 'variables.json',
+          format: 'json/nested',
+          // https://github.com/amzn/style-dictionary/blob/f2395f3d4638e1fa57a86bd821b28e2f043067c4/lib/common/filters.js#L28
+          filter: 'removePrivate',
+        },
+      ],
+    },
+    /**
+     * used by Jack's Chrome Extension
+     */
+    'json-variables-flat': {
+      // transformGroup: 'js',
+      transforms: ['name/kebab', 'color/css'],
+      buildPath: path.join(defaultDistDir, 'json/'),
+      files: [
+        {
+          destination: 'variables-flat.json',
+          format: 'json/flat',
+          // https://github.com/amzn/style-dictionary/blob/f2395f3d4638e1fa57a86bd821b28e2f043067c4/lib/common/filters.js#L28
+          filter: 'removePrivate',
+        },
+      ],
+    },
+    /**
+     * only used for fractal docs visualisation of tokens
+     */
+    'js-module': {
+      transforms: ['name/pascal'],
+      buildPath: path.join(defaultDistDir, 'js/'),
+      prefix: 'mds',
+      files: [
+        {
+          destination: '_tokens-module.js',
+          format: 'javascript/module',
+        },
+      ],
+    },
+  },
+});
+
+/**
+ *
+ * Create an instance of Style Dictionary with base Design System tokens already loaded.
+ *
+ * Supplied `source` paths will have brand color transformation applied
+ *
+ * existing Design System `platforms` which can be overriden (e.g. override buildPath)
+ *
+ * - 'css-variables'
+ * - 'scss-variables'
+ * - 'json-variables'
+ * - 'json-variables-flat'
+ * - 'js-module'
+ *
+ * @param {import('style-dictionary').Config} incomingConfig
+ * @param {import('style-dictionary').PlatformConfig} incomingConfig.platforms
+ * @param {Array<string>} incomingConfig.source
+ *
+ * @returns {{styleDictionary:import('style-dictionary').default, cleanTempFiles: Function}} Style Dictionary Config
+ *
+ * @example
+ * ```javascript
+ * // frontend-rollout-tool only wants to build 2 platforms to specific directories
+ * const { styleDictionary, cleanTempFiles } = await createStyleDictionary({
+ *  // override platform defaults, like buildPath
+ *   platforms: {
+ *     'css-variables': { buildPath: Path.join(buildPath, 'css-vars/') },
+ *     'json-variables': { buildPath: Path.join(buildPath, 'json/') },
+ *   },
+ *   source: [Path.join(srcTokensPath, 'brand.json')]
+ * })
+ * await styleDictionary.buildPlatform('css-variables');
+ * await styleDictionary.buildPlatform('json-variables');
+ * await cleanTempFiles();
+ *
+ * ///////////////////////////////
+ *
+ * // Design System wants to build all platforms to default directories
+ * const { styleDictionary, cleanTempFiles } = await createStyleDictionary();
+ * await styleDictionary.buildAllPlatforms();
+ * await cleanTempFiles();
+ * ```
+ */
+async function createStyleDictionary(incomingConfig = {}) {
+  const StyleDictionaryPackage = (await import('style-dictionary')).default;
+
+  // create Style Dictionary instance using base tokens, includes all our all platforms
+  let styleDictionary = new StyleDictionaryPackage(baseConfig);
+
+  // if source was supplied (e.g. by frontend-rollout-tool brand.json), make sure brand lightness is generated
+  const transformedSource = [];
+  // use `glob` on `source` as this is what style-dictionary uses, keep api compatability
+  const sourceFilePaths = await glob(incomingConfig?.source || []);
+
+  for (const sourceFilePath of sourceFilePaths) {
+    // forced to write new source files to disk (required for style-dictionary, unfortunately)
+    const newSourceFilePath = await writeTransformedFileBrandColorLightnessTokens(sourceFilePath);
+    transformedSource.push(newSourceFilePath);
+  }
+
+  const cleanTempFiles = async () => {
+    for (const sourceFilePath of sourceFilePaths) {
+      try {
+        await fs.unlink(sourceFilePath);
+      } catch (error) {
+        console.warn('couldnt clean temp file ', sourceFilePath);
+      }
+    }
+  };
+  // merged incomingConfig & transformed incomingConfig.source to our base styleDictionary
+  styleDictionary = await styleDictionary.extend({ ...incomingConfig, source: transformedSource });
+
+  await styleDictionary.hasInitialized;
+  return { styleDictionary, cleanTempFiles };
+}
+
+module.exports.createStyleDictionary = createStyleDictionary;

package/tasks/tokens.js

@@ -1,32 +1,14 @@
-const path = require('path');
-const fs = require('fs');
-const { promisify } = require('util');
-const StyleDictionaryPackage = require('style-dictionary');
-const { registerTransforms } = require('./registerTransforms');
-const transformTokens = require('./colorTransforms');
-
-const readFileAsync = promisify(fs.readFile);
-const writeFileAsync = promisify(fs.writeFile);
-
-async function transformBaseTokens(filePath) {
-  const baseTokens = await readFileAsync(filePath, { encoding: 'utf8' });
-  const transformed = JSON.stringify(transformTokens(JSON.parse(baseTokens)), null, '  ')
-    // Add a space after every key, before the `:`
-    .replace(/: "(?:[^"]+|\\")*",?$/gm, ' $&');
-
-  return writeFileAsync(filePath, transformed);
-}
+const { createStyleDictionary } = require('../style-dictionary');
 
+/**
+ * build tokens via style-dictionary
+ *
+ */
 async function tokens() {
-  try {
-    await transformBaseTokens(path.resolve(__dirname, '../src/tokens/color.json'));
-    const StyleDictionary = StyleDictionaryPackage.extend(path.resolve(__dirname, '../src/tokens/_config'));
+  const { styleDictionary, cleanTempFiles } = await createStyleDictionary();
 
-    await registerTransforms(StyleDictionary);
-    await StyleDictionary.buildAllPlatforms();
-  } catch (e) {
-    console.error(e);
-  }
+  await styleDictionary.buildAllPlatforms();
+  await cleanTempFiles();
 }
 
 exports.tokens = tokens;