handoff-app 0.4.2 → 0.4.3

package/Changelog.md

@@ -6,6 +6,35 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.3] - 2023-04-19
+
+Continuing incremental improvement over the 0.4.0 release. This release fixes
+a couple of small build inconsistencies, improves debug mode when running the
+build and fetch, and
+
+### Improvements
+
+- Errors in the webpack execution will now cause the fetch script to halt and
+  bubble up into the error handling.
+- Running build/fetch with `-- --debug` will now send the error trace from the
+  webpack when building a preview. This is especially useful when there is an error
+  either in the template or scss maps.
+- Running build/fetch with `-- --fast` will execute the script but if there is
+  already a built temp directory, it will use the built dir rather than recreating
+  it. This speeds up runtime significantly. If this option is supplied but the
+  temp dir does not yet exist, it will be created.
+
+### Bugfixes
+
+- The transformer stand alone pipelines weren't working. This release fixes that
+  so executing `npm run transform:preview` or
+  `node node_modules/handoff-app/scripts/fetch.js preview` will properly execute
+  just a single portion of the pipeline rather than the whole pipeline.
+- The default component guidelines were not rendering the `<ul>` wrapper for the
+  subsequent lists.
+- The bootstrap 5.2 scss mapping had an error that caused the carrot and icon
+  on error and disabled state select boxes to display incorrectly.
+
 ## [0.4.2] - 2023-04-16
 
 When 0.4.0 was released, we found a structural problem with the way
@@ -13,7 +42,7 @@ integrations were published into projects. 0.4.1 resolved a couple of issues,
 but a couple of significant new pieces of code were required to fully resolve
 the issue.
 
-The resolution is fixing paths so that they work properly when running the 
+The resolution is fixing paths so that they work properly when running the
 handoff source as well as running handoff in a project.
 
 ### Bugfixes

package/docs/components/alert.md

@@ -11,17 +11,15 @@ Make it clear what this alert does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with alerts
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with alerts
 

package/docs/components/button.md

@@ -1,19 +1,19 @@
 ---
 title: Buttons
-description: Buttons allow users to take actions and make choices, with a single click. 
+description: Buttons allow users to take actions and make choices, with a single click.
 image: component-button
 metaTitle: 'Buttons | Handoff Design System'
 metaDescription: 'Buttons allow users to take actions and make choices, with a single click.'
 ---
+
 ### Accessibility
 
 Make it clear what this button does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - Make it clear what this button does for the user.
 - Use at most two buttons in one group.
@@ -21,9 +21,8 @@ Make it clear what this button does for the user.
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - Use more than two words for call to action.
 - First letter of each sentence defaults to a capital letter.

package/docs/components/checkbox.md

@@ -12,17 +12,15 @@ Make it clear what this checkboxes does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with checkboxes
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with checkboxes
 

package/docs/components/input.md

@@ -13,17 +13,15 @@ Make it clear what this input does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with inputs
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with inputs
 

package/docs/components/modal.md

@@ -14,17 +14,15 @@ Make it clear what this modal does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with modals
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with modals
 

package/docs/components/pagination.md

@@ -12,17 +12,15 @@ Make it clear what this pagination widget does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with pagination
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with pagination
 

package/docs/components/radio.md

@@ -11,17 +11,15 @@ Make it clear what this radio widget does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with radio
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with radio
 

package/docs/components/select.md

@@ -13,17 +13,15 @@ Make it clear what this select widget does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with select
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with select
 

package/docs/components/switch.md

@@ -12,17 +12,15 @@ Make it clear what this switch widget does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with switches
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with switches
 

package/docs/components/tooltip.md

@@ -11,17 +11,15 @@ Make it clear what this tooltip widget does for the user.
 
 <div className="c-do-dont">
   <div className="c-do-dont__do">
-    <p>
-      <Icon name="check" className="" /> DO
-    </p>
+
+<Icon name="check" className="" /> DO
 
 - What to do with tooltips
 
   </div>
   <div className="c-do-dont__dont">
-    <p>
-    <Icon name="x" className="" /> DON&apos;T
-    </p>
+
+<Icon name="x" className="" /> DON&apos;T
 
 - What not to do with tooltips
 

package/figma-exporter/dist/declarations/src/utils/preview.d.ts

@@ -1 +1 @@
-export declare const buildClientFiles: () => void;
+export declare const buildClientFiles: () => Promise<string>;

package/figma-exporter/dist/figma-exporter.cjs.dev.js

@@ -5191,37 +5191,59 @@ async function previewTransformer(documentationObject$1) {
   };
 }
 
-const buildClientFiles = () => {
-  webpack__default["default"]({
-    mode: 'production',
-    entry: path__default["default"].resolve(__dirname, '../../templates/main.js'),
-    resolve: {
-      modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
-    },
-    output: {
-      path: path__default["default"].resolve(__dirname, '../../public/components'),
-      filename: 'bundle.js'
-    },
-    module: {
-      rules: [{
-        test: /\.s[ac]ss$/i,
-        use: [
-        // Creates `style` nodes from JS strings
-        'style-loader',
-        // Translates CSS into CommonJS
-        'css-loader',
-        // Compiles Sass to CSS
-        'sass-loader']
-      }]
-    }
-  }, (err, stats) => {
-    if (err || stats?.hasErrors()) {
-      // ...
-      console.log(chalk__default["default"].red('Client styles failed'));
-      throw err;
-    }
-    console.log(chalk__default["default"].green('Client Styles Built'));
-    // Done processing
+const buildClientFiles = async () => {
+  return new Promise((resolve, reject) => {
+    const compile = webpack__default["default"]({
+      mode: 'production',
+      entry: path__default["default"].resolve(__dirname, '../../templates/main.js'),
+      resolve: {
+        modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
+      },
+      output: {
+        path: path__default["default"].resolve(__dirname, '../../public/components'),
+        filename: 'bundle.js'
+      },
+      module: {
+        rules: [{
+          test: /\.s[ac]ss$/i,
+          use: [
+          // Creates `style` nodes from JS strings
+          'style-loader',
+          // Translates CSS into CommonJS
+          'css-loader',
+          // Compiles Sass to CSS
+          'sass-loader']
+        }]
+      }
+    });
+    compile.run((err, stats) => {
+      if (err) {
+        let error = "Errors encountered trying to build preview styles.\n";
+        if (process.argv.indexOf('--debug') > 0) {
+          error += err.stack || err;
+        }
+        return reject(error);
+      }
+      if (stats) {
+        if (stats.hasErrors()) {
+          let buildErrors = stats.compilation.errors?.map(err => err.message);
+          let error = "Errors encountered trying to build preview styles.\n";
+          if (process.argv.indexOf('--debug') > 0) {
+            error += buildErrors;
+          }
+          return reject(error);
+        }
+        if (stats.hasWarnings()) {
+          let buildWarnings = stats.compilation.warnings?.map(err => err.message);
+          let error = "Warnings encountered when building preview styles.\n";
+          if (process.argv.indexOf('--debug') > 0) {
+            error += buildWarnings;
+            console.error(chalk__default["default"].yellow(error));
+          }
+        }
+      }
+      return resolve("Preview template styles built");
+    });
   });
 };
 
@@ -9889,7 +9911,10 @@ const buildPreview = async documentationObject => {
   if (Object.keys(documentationObject.components).filter(name => documentationObject.components[name].length > 0).length > 0) {
     await Promise.all([previewTransformer(documentationObject).then(out => fs__namespace.writeJSON(previewFilePath, out, {
       spaces: 2
-    })), buildClientFiles()]);
+    }))]);
+    await buildClientFiles().then(value => chalk__default["default"].green(console.log(value))).catch(error => {
+      throw new Error(error);
+    });
   } else {
     console.log(chalk__default["default"].red('Skipping preview generation'));
   }

package/figma-exporter/dist/figma-exporter.cjs.prod.js

@@ -5191,37 +5191,59 @@ async function previewTransformer(documentationObject$1) {
   };
 }
 
-const buildClientFiles = () => {
-  webpack__default["default"]({
-    mode: 'production',
-    entry: path__default["default"].resolve(__dirname, '../../templates/main.js'),
-    resolve: {
-      modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
-    },
-    output: {
-      path: path__default["default"].resolve(__dirname, '../../public/components'),
-      filename: 'bundle.js'
-    },
-    module: {
-      rules: [{
-        test: /\.s[ac]ss$/i,
-        use: [
-        // Creates `style` nodes from JS strings
-        'style-loader',
-        // Translates CSS into CommonJS
-        'css-loader',
-        // Compiles Sass to CSS
-        'sass-loader']
-      }]
-    }
-  }, (err, stats) => {
-    if (err || stats?.hasErrors()) {
-      // ...
-      console.log(chalk__default["default"].red('Client styles failed'));
-      throw err;
-    }
-    console.log(chalk__default["default"].green('Client Styles Built'));
-    // Done processing
+const buildClientFiles = async () => {
+  return new Promise((resolve, reject) => {
+    const compile = webpack__default["default"]({
+      mode: 'production',
+      entry: path__default["default"].resolve(__dirname, '../../templates/main.js'),
+      resolve: {
+        modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
+      },
+      output: {
+        path: path__default["default"].resolve(__dirname, '../../public/components'),
+        filename: 'bundle.js'
+      },
+      module: {
+        rules: [{
+          test: /\.s[ac]ss$/i,
+          use: [
+          // Creates `style` nodes from JS strings
+          'style-loader',
+          // Translates CSS into CommonJS
+          'css-loader',
+          // Compiles Sass to CSS
+          'sass-loader']
+        }]
+      }
+    });
+    compile.run((err, stats) => {
+      if (err) {
+        let error = "Errors encountered trying to build preview styles.\n";
+        if (process.argv.indexOf('--debug') > 0) {
+          error += err.stack || err;
+        }
+        return reject(error);
+      }
+      if (stats) {
+        if (stats.hasErrors()) {
+          let buildErrors = stats.compilation.errors?.map(err => err.message);
+          let error = "Errors encountered trying to build preview styles.\n";
+          if (process.argv.indexOf('--debug') > 0) {
+            error += buildErrors;
+          }
+          return reject(error);
+        }
+        if (stats.hasWarnings()) {
+          let buildWarnings = stats.compilation.warnings?.map(err => err.message);
+          let error = "Warnings encountered when building preview styles.\n";
+          if (process.argv.indexOf('--debug') > 0) {
+            error += buildWarnings;
+            console.error(chalk__default["default"].yellow(error));
+          }
+        }
+      }
+      return resolve("Preview template styles built");
+    });
   });
 };
 
@@ -9889,7 +9911,10 @@ const buildPreview = async documentationObject => {
   if (Object.keys(documentationObject.components).filter(name => documentationObject.components[name].length > 0).length > 0) {
     await Promise.all([previewTransformer(documentationObject).then(out => fs__namespace.writeJSON(previewFilePath, out, {
       spaces: 2
-    })), buildClientFiles()]);
+    }))]);
+    await buildClientFiles().then(value => chalk__default["default"].green(console.log(value))).catch(error => {
+      throw new Error(error);
+    });
   } else {
     console.log(chalk__default["default"].red('Skipping preview generation'));
   }

package/figma-exporter/src/index.ts

@@ -75,8 +75,10 @@ const buildPreview = async (documentationObject: DocumentationObject) => {
   if (Object.keys(documentationObject.components).filter((name) => documentationObject.components[name].length > 0).length > 0) {
     await Promise.all([
       previewTransformer(documentationObject).then((out) => fs.writeJSON(previewFilePath, out, { spaces: 2 })),
-      buildClientFiles(),
     ]);
+    await buildClientFiles()
+      .then((value) => chalk.green(console.log(value)))
+      .catch((error) => { throw new Error(error) });
   } else {
     console.log(chalk.red('Skipping preview generation'));
   }
@@ -160,13 +162,13 @@ const entirePipeline = async () => {
     fs.writeJSON(changelogFilePath, changelog, { spaces: 2 }),
     ...(!process.env.CREATE_ASSETS_ZIP_FILES || process.env.CREATE_ASSETS_ZIP_FILES !== 'false'
       ? [
-          zipAssets(documentationObject.assets.icons, fs.createWriteStream(iconsZipFilePath)).then((writeStream) =>
-            stream.promises.finished(writeStream)
-          ),
-          zipAssets(documentationObject.assets.logos, fs.createWriteStream(logosZipFilePath)).then((writeStream) =>
-            stream.promises.finished(writeStream)
-          ),
-        ]
+        zipAssets(documentationObject.assets.icons, fs.createWriteStream(iconsZipFilePath)).then((writeStream) =>
+          stream.promises.finished(writeStream)
+        ),
+        zipAssets(documentationObject.assets.logos, fs.createWriteStream(logosZipFilePath)).then((writeStream) =>
+          stream.promises.finished(writeStream)
+        ),
+      ]
       : []),
   ]);
   await buildCustomFonts(documentationObject);

package/figma-exporter/src/utils/preview.ts

@@ -2,47 +2,70 @@ import webpack from 'webpack';
 import path from 'path';
 import chalk from 'chalk';
 
-export const buildClientFiles = () => {
-  webpack(
-    {
-      mode: 'production',
-      entry: path.resolve(__dirname, '../../templates/main.js'),
-      resolve: {
-        modules: [
-          path.resolve(__dirname, '../..'),
-          path.resolve(__dirname, '../../..'),
-          path.resolve(__dirname, '../../node_modules'),
-          path.resolve(__dirname, '../../../../node_modules'),
-        ],
-      },
-      output: {
-        path: path.resolve(__dirname, '../../public/components'),
-        filename: 'bundle.js',
-      },
-      module: {
-        rules: [
-          {
-            test: /\.s[ac]ss$/i,
-            use: [
-              // Creates `style` nodes from JS strings
-              'style-loader',
-              // Translates CSS into CommonJS
-              'css-loader',
-              // Compiles Sass to CSS
-              'sass-loader',
-            ],
-          },
-        ],
-      },
-    },
-    (err, stats) => {
-      if (err || stats?.hasErrors()) {
-        // ...
-        console.log(chalk.red('Client styles failed'));
-        throw err;
+export const buildClientFiles = async (): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const compile = webpack(
+      {
+        mode: 'production',
+        entry: path.resolve(__dirname, '../../templates/main.js'),
+        resolve: {
+          modules: [
+            path.resolve(__dirname, '../..'),
+            path.resolve(__dirname, '../../..'),
+            path.resolve(__dirname, '../../node_modules'),
+            path.resolve(__dirname, '../../../../node_modules'),
+          ],
+        },
+        output: {
+          path: path.resolve(__dirname, '../../public/components'),
+          filename: 'bundle.js',
+        },
+        module: {
+          rules: [
+            {
+              test: /\.s[ac]ss$/i,
+              use: [
+                // Creates `style` nodes from JS strings
+                'style-loader',
+                // Translates CSS into CommonJS
+                'css-loader',
+                // Compiles Sass to CSS
+                'sass-loader',
+              ],
+            },
+          ],
+        },
       }
-      console.log(chalk.green('Client Styles Built'));
-      // Done processing
-    }
-  );
+    );
+    compile.run((err, stats) => {
+      if (err) {
+        let error = "Errors encountered trying to build preview styles.\n";
+        if (process.argv.indexOf('--debug') > 0) {
+          error += err.stack || err;
+        }
+        return reject(error);
+      }
+
+      if (stats) {
+        if (stats.hasErrors()) {
+          let buildErrors = stats.compilation.errors?.map((err) => err.message);
+          let error = "Errors encountered trying to build preview styles.\n";
+          if (process.argv.indexOf('--debug') > 0) {
+            error += buildErrors;
+          }
+          return reject(error);
+        }
+
+        if (stats.hasWarnings()) {
+          let buildWarnings = stats.compilation.warnings?.map((err) => err.message);
+          let error = "Warnings encountered when building preview styles.\n";
+          if (process.argv.indexOf('--debug') > 0) {
+            error += buildWarnings;
+            console.error(chalk.yellow(error));
+          }
+        }
+      }
+      return resolve("Preview template styles built");
+    });
+  });
 };