@madgex/fert 1.7.1 → 2.0.0

package/bin/commands/build-tasks/build-tokens-v5.js

@@ -0,0 +1,98 @@
+const StyleDictionaryPackage = require('style-dictionary');
+const Path = require('path');
+const fs = require('fs/promises');
+const {
+  registerTransforms,
+} = require('@madgex/design-system-v5/tasks/registerTransforms');
+const colorTransforms = require('@madgex/design-system-v5/tasks/colorTransforms');
+const { ensureTrailingSlash, exists } = require('../../utils');
+const { log } = require('../../utils/logging');
+const { TMP_DIR } = require('../../../constants');
+
+const dsTokensPath = Path.dirname(
+  require.resolve('@madgex/design-system-v5/src/tokens/_config.js')
+);
+
+// eslint-disable-next-line no-unused-vars
+const createTempBrandFile = async (dir = './') => {
+  // Generate unique name to bust style dict cache
+  const timestamp = Date.now();
+  const tmpBrandFile = Path.join(TMP_DIR, `/fert/brand-${timestamp}-v5.json`);
+  const dirPath = Path.dirname(tmpBrandFile);
+
+  if (!(await exists(dirPath))) {
+    await fs.mkdir(dirPath, { recursive: true });
+  }
+
+  return tmpBrandFile;
+};
+
+// Style Dictionary is noisy and annoying, this suppresses its output
+async function runSilently(fn) {
+  const originalLog = console.log;
+  console.log = () => {};
+  await fn();
+  console.log = originalLog;
+}
+
+module.exports = async function buildCssFromTokensV5(srcTokensPath, buildPath) {
+  srcTokensPath = ensureTrailingSlash(Path.resolve(srcTokensPath));
+  buildPath = ensureTrailingSlash(Path.resolve(buildPath));
+
+  const brandFile = Path.join(srcTokensPath, 'brand.json');
+
+  if (!(await exists(buildPath))) {
+    await fs.mkdir(buildPath, { recursive: true });
+  }
+
+  // Fetch the file so we can transform the colours in style dictionary
+  const brandObj = JSON.parse(
+    await fs.readFile(brandFile, { encoding: 'utf8' })
+  );
+  const tmpBrandFile = await createTempBrandFile(srcTokensPath);
+
+  await fs.writeFile(
+    Path.join(tmpBrandFile),
+    JSON.stringify(colorTransforms(brandObj))
+  );
+
+  // TODO - Investigate whether we can retrieve from DS instead of redefining
+  // e.g. const { registerTransforms } = require('@madgex/design-system/tasks/registerTransforms');
+  const transforms = [
+    'attribute/cti',
+    'name/cti/kebab',
+    'color/css',
+    'css/rawData',
+  ];
+  const prefix = 'mds';
+
+  // TODO - Investigate whether we can retrieve from DS instead of redefining
+  const styleDictionaryConfig = {
+    include: [Path.join(dsTokensPath, '*.json')],
+    source: [tmpBrandFile],
+    platforms: {
+      'scss-variables': {
+        transforms,
+        prefix,
+        buildPath: Path.join(buildPath, 'scss/'),
+        files: [
+          {
+            destination: 'index.scss',
+            format: 'scss/map-deep',
+          },
+        ],
+      },
+    },
+  };
+
+  // Use StyleDictionary to build a tokens SCSS file
+  const StyleDictionary = StyleDictionaryPackage.extend(styleDictionaryConfig);
+
+  await registerTransforms(StyleDictionary);
+  await runSilently(StyleDictionary.buildAllPlatforms.bind(StyleDictionary));
+
+  // clean-up temp SD file
+  await fs.unlink(tmpBrandFile);
+
+  log.success('Token build complete (SCSS).');
+};

package/bin/commands/build-tasks/build-tokens.js

@@ -3,8 +3,8 @@ const Path = require('path');
 const fs = require('fs/promises');
 const {
   registerTransforms,
-} = require('@madgex/design-system/tasks/registerTransforms');
-const colorTransforms = require('@madgex/design-system/tasks/colorTransforms');
+} = require('@madgex/design-system/tasks/registerTransforms.js');
+const colorTransforms = require('@madgex/design-system/tasks/colorTransforms.js');
 const { ensureTrailingSlash, exists } = require('../../utils');
 const { log } = require('../../utils/logging');
 const { TMP_DIR } = require('../../../constants');
@@ -63,6 +63,7 @@ module.exports = async function buildCssFromTokens(srcTokensPath, buildPath) {
     'name/cti/kebab',
     'color/css',
     'css/rawData',
+    'custom/pxToRem',
   ];
   const prefix = 'mds';
 
@@ -71,17 +72,6 @@ module.exports = async function buildCssFromTokens(srcTokensPath, buildPath) {
     include: [Path.join(dsTokensPath, '*.json')],
     source: [tmpBrandFile],
     platforms: {
-      'scss-variables': {
-        transforms,
-        prefix,
-        buildPath: Path.join(buildPath, 'scss/'),
-        files: [
-          {
-            destination: 'index.scss',
-            format: 'scss/map-deep',
-          },
-        ],
-      },
       'css-variables': {
         transforms,
         prefix,
@@ -90,6 +80,7 @@ module.exports = async function buildCssFromTokens(srcTokensPath, buildPath) {
           {
             destination: `variables.css`,
             format: 'css/variables',
+            filter: 'removePrivate',
           },
         ],
       },
@@ -101,6 +92,7 @@ module.exports = async function buildCssFromTokens(srcTokensPath, buildPath) {
           {
             destination: `variables.json`,
             format: 'json/nested',
+            filter: 'removePrivate',
           },
         ],
       },
@@ -110,11 +102,12 @@ module.exports = async function buildCssFromTokens(srcTokensPath, buildPath) {
   // Use StyleDictionary to build a tokens SCSS file
   const StyleDictionary = StyleDictionaryPackage.extend(styleDictionaryConfig);
 
-  await registerTransforms(StyleDictionary);
+  const tokenBaseFontSize = brandObj?.font?.size?.base; // will default to 16px if undefined
+  await registerTransforms(StyleDictionary, tokenBaseFontSize);
   await runSilently(StyleDictionary.buildAllPlatforms.bind(StyleDictionary));
 
   // clean-up temp SD file
   await fs.unlink(tmpBrandFile);
 
-  log.success('Token build complete.');
+  log.success('Token build complete (CSS & JSON).');
 };

package/bin/commands/build-tasks/bundle-ds-css.js

@@ -25,7 +25,7 @@ module.exports = async (viteConfig) => {
         scss: {
           additionalData: `
           @import "../../public/tokens/scss/index.scss";
-          @import "@madgex/design-system/src/scss/import.scss";
+          @import "@madgex/design-system-v5/src/scss/import.scss";
           `, // all scss processed files gets this injected at the top
         },
       },

package/bin/commands/build.js

@@ -4,6 +4,7 @@ const { resolveConfig } = require('../utils');
 const { log } = require('../utils/logging');
 const bundleEntry = require('./build-tasks/bundle-entry');
 const buildCssFromTokens = require('./build-tasks/build-tokens');
+const buildCssFromTokensV5 = require('./build-tasks/build-tokens-v5');
 const buildExternalAssets = require('./build-tasks/build-external-assets');
 
 module.exports = async (root, options = {}) => {
@@ -37,6 +38,7 @@ exports.buildTokens = async (fertConfig, options = {}) => {
   const tokenDist = path.join(workingDir, `/public/tokens/`);
 
   buildCssFromTokens(workingDir, tokenDist);
+  buildCssFromTokensV5(workingDir, tokenDist);
 };
 
 exports.bundleEntry = bundleEntry;

package/bin/commands/publish.js

@@ -25,7 +25,7 @@ module.exports = async (root, options) => {
 
   const templateCtx = {
     env: options.target === 'prod' ? 'job' : 'jb.dev',
-    Environement_Name: options.target === 'prod' ? 'production' : 'dev',
+    Environment_Name: options.target === 'prod' ? 'production' : 'dev',
     fertConfig,
   };
 

package/constants.js

@@ -22,7 +22,7 @@ module.exports = {
   REMOTE_UPLOAD_BASE:
     '/api/assets/jobseekers-frontend/{fertConfig.clientPropertyId}',
   AWS_PARAM_NAME:
-    '/{Environement_Name}/jobboard/kong/internal/consumer-key/jobseekers-frontend_{fertConfig.client.rootClientPropertyId}',
+    '/{Environment_Name}/jobboard/kong/internal/consumer-key/jobseekers-frontend_{fertConfig.client.rootClientPropertyId}',
   INVALIDATION_PATH: `/{fertConfig.client.rootClientPropertyId}/jobseekers-frontend/{fertConfig.clientPropertyId}/*`,
   ASSET_STORE_USER_GUID: 'a386d4b6-f2df-4b80-ad1f-0349e23f530b',
   TEMPLATES: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/fert",
-  "version": "1.7.1",
+  "version": "2.0.0",
   "description": "Tool to help build the V6 branding",
   "bin": {
     "fert": "./bin/cli.js"
@@ -30,7 +30,8 @@
     "@hapi/inert": "^7.1.0",
     "@hapi/vision": "^7.0.3",
     "@hapipal/toys": "^4.0.0",
-    "@madgex/design-system": "*",
+    "@madgex/design-system": "^6.1.1",
+    "@madgex/design-system-v5": "npm:@madgex/design-system@^5.0.0",
     "@private/header-footer-podlet-server": "github:wiley/madgex-header-footer-podlet",
     "axios": "^1.6.2",
     "cac": "^6.7.14",

package/repo-templates/template-basic/src/css/styles.scss

@@ -1,4 +1,3 @@
-@import "../../public/tokens/scss/index.scss";
 @import "@madgex/design-system/src/scss/import.scss";
 
 // TODO SCSS Skeleton

package/repo-templates/template-bigworkbag/src/css/styles.scss

@@ -1,5 +1,4 @@
 @import "./reset.scss";
-@import "../../public/tokens/scss/index.scss";
 @import "@madgex/design-system/src/scss/import.scss";
 @import "./variables.scss";
 @import "./breakpoints.scss";

package/server/index.js

@@ -62,7 +62,7 @@ exports.devServer = async ({ start, fertConfig = {} } = {}) => {
 
   server.views(require('./view-manager')(server));
 
-  // Mocked logged in
+  // mocked logged in
   Toys.auth.strategy(server, 'mock-user', (request, h) => {
     if (Object.prototype.hasOwnProperty.call(request.query, 'loggedin')) {
       const user = {

package/server/plugins/hapi-vite.js

@@ -33,16 +33,6 @@ module.exports = {
               input: options.entry,
             },
           },
-          css: {
-            preprocessorOptions: {
-              scss: {
-                additionalData: `
-                @import "../../public/tokens/scss/index.scss";
-                @import "@madgex/design-system/src/scss/import.scss";
-                `, // all scss processed files gets this injected at the top
-              },
-            },
-          },
         });
 
         await server.app.viteServer.listen();

package/server/routes/public.js

@@ -26,4 +26,11 @@ module.exports = [
       file: './public/favicon.ico',
     },
   },
+  {
+    method: 'get',
+    path: '/design-system.css',
+    handler: {
+      file: require.resolve('@madgex/design-system/index.css'),
+    },
+  },
 ];

package/server/templates/furniture.njk

@@ -4,20 +4,18 @@
         <meta charset="utf-8"/>
         <title>{{ title | default('Frontend Rollout Tool') }}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-
+        <link rel="stylesheet" href="/public/tokens/css-vars/variables.css">
+        <link rel="stylesheet" href="/design-system.css">
         {%- for link in fertConfig.externalAssets.links %}
             <link {%- for key, value in link %} {{ key }}="{{ value }}" {%- endfor %}/>
         {%- endfor -%}
-
         {%- for script in fertConfig.externalAssets.scripts %}
             <script {%- for key, value in script %} {{ key }}="{{ value }}" {%- endfor %}></script>
         {%- endfor -%}
-
     </head>
     <body {%- if auth.isAuthenticated %} class="is-signed-in" {% endif %}>
         <section class="layout">
             <div id="site-container" class="mds-site-container">
-
                 {%- if podletResponse.statusCode === 200 -%}
                     {{ podletResponse.result.headerHtml | safe }}
                 {%- else -%}
@@ -26,26 +24,21 @@
                         <pre>{{ podletResponse.result | dump(2) | safe }}</pre>
                     </div>
                 {%- endif %}
-
                 <main class="mds-main mds-padding-top-b5" role="main" id="main">
                     <div class="mds-wrapper">
                         {% block main %}Page does not override main block{% endblock %}
                     </div>
                 </main>
-
                 {% if podletResponse.statusCode === 200 -%}
                     {{ podletResponse.result.footerHtml | safe }}
                 {%- endif %}
-
             </div>
         </section>
-
         {% if isFertDevelopment %}
             <!-- development only - vite client/HMR & fert entry script -->
             {{ viteClientScript | safe }}
             {{ fertEntryScript | safe }}
         {%- endif %}
-
         {# Adding leaderboard placeholder to help with styling #}
         <script type="text/javascript">
             document.onreadystatechange = () => {