feat(sketch): add support for generating icon ranges (#5711)

* chore: check-in

* fix(icons): update svg assets

Each svg asset was rendering with an extra path which was causing the number to
be "punched out" when we combined paths. This diff goes through and removes them
from the corresponding svg assets.

* fix(pictograms): update build script

* feat(sketch): add support for generating icon ranges

This patch adds support for building icons in the [32, 24] range and the [20,
16] range. In addition, it addresses some common icon rendering bugs by taking
advantage of the new asset extension from `icon-build-helpers`. We now render
icons in Sketch directly from the asset source instead of from the generated
source.

* docs(sketch): add JSDoc to shared icon commands

* chore(sketch): add generated folder to clean task

* chore(sketch): fix eslint violations

* Update packages/sketch/src/commands/icons/sync.js

* Update packages/sketch/src/commands/icons/sync.js

* chore(icons,pictograms): update ci-check and scaffold scripts

* fix(icons): update generate command to omit deprecated icons

* fix(icons): update redo and undo to include background

* fix(sketch): remove transparent layers from symbol artboard

packages/icon-build-helpers/src/metadata/extensions/assets.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright IBM Corp. 2020, 2020
+ *
+ * This assets code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this assets tree.
+ */
+
+'use strict';
+
+const fs = require('fs-extra');
+const path = require('path');
+
+/**
+ * Provide source and filepath asset information for a given icon
+ * @type {Extension}
+ */
+const assets = {
+  name: 'assets',
+  computed: true,
+  extend(metadata, _data, registry, { input }) {
+    for (const entry of metadata.icons) {
+      const icon = registry.get(entry.name);
+      entry.assets = icon.assets.map(({ size, filepath }) => {
+        return {
+          size,
+          filepath: path.relative(input, filepath),
+          source: fs.readFileSync(filepath, 'utf8'),
+        };
+      });
+    }
+  },
+};
+
+module.exports = assets;

packages/icon-build-helpers/src/metadata/extensions/index.js

@@ -7,6 +7,7 @@
 
 'use strict';
 
+const assets = require('./assets');
 const categories = require('./categories');
 const deprecated = require('./deprecated');
 const icons = require('./icons');
@@ -25,6 +26,7 @@ const pictograms = require('./pictograms');
  */
 
 module.exports = {
+  assets,
   categories,
   deprecated,
   icons,

packages/icon-build-helpers/src/metadata/index.js

@@ -19,17 +19,17 @@ const validate = require('./validate');
  * Validate the given extensions against the assets found in a directory
  * @param {object} options
  * @param {Adapter} [options.adapter] The adapter to use to load the extensions
- * @param {string} options.directory
+ * @param {string} options.input The directory of source files
  * @param {Array<Extension>} [options.extensions] The extensions to load
  * @returns {Promise<void>}
  */
 async function check({
   adapter = adapters.yml,
-  directory,
+  input,
   extensions = [Extensions.icons],
 }) {
-  const registry = await Registry.create(path.join(directory, 'svg'));
-  const loaded = await Storage.load(adapter, directory, extensions);
+  const registry = await Registry.create(path.join(input, 'svg'));
+  const loaded = await Storage.load(adapter, input, extensions);
   validate(registry, loaded);
 }
 
@@ -38,27 +38,32 @@ async function check({
  * extensions
  * @param {object} options
  * @param {Adapter} [options.adapter] The adapter to use to load the extensions
- * @param {string} options.directory
+ * @param {string} options.input The directory of source files
+ * @param {string} [options.output] The directory for the built metadata
  * @param {Array<Extension>} [options.extensions] The extensions to load
  * @returns {Promise<void>}
  */
 async function build({
   adapter = adapters.yml,
-  directory,
   extensions = [Extensions.icons],
+  input,
+  output = input,
 }) {
-  const registry = await Registry.create(path.join(directory, 'svg'));
-  const loaded = await Storage.load(adapter, directory, extensions);
+  const registry = await Registry.create(path.join(input, 'svg'));
+  const loaded = await Storage.load(adapter, input, extensions);
   validate(registry, loaded);
 
-  const metadataFilePath = path.join(directory, 'metadata.json');
+  const metadataFilePath = path.join(output, 'metadata.json');
   const metadata = {};
+  const context = {
+    input,
+  };
 
   // For each extension, extend the icon metadata with the given loaded data
   // for the extension
   for (const { data, extend } of loaded) {
     if (extend) {
-      extend(metadata, data, registry);
+      extend(metadata, data, registry, context);
     }
   }
 
@@ -75,17 +80,19 @@ async function build({
  * metadata information
  * @param {object} options
  * @param {Adapter} [options.adapter] The adapter to use to write data
- * @param {string} options.directory
+ * @param {string} options.input The directory of source files
+ * @param {string} [options.output] The directory for the built metadata
  * @param {Array<Extension>} [options.extensions]
  * @returns {Promise<void>}
  */
 async function scaffold({
   adapter = adapters.yml,
-  directory,
+  input,
+  output = input,
   extensions = [Extensions.icons],
 }) {
-  const registry = await Registry.create(path.join(directory, 'svg'));
-  const [icons] = await Storage.load(adapter, directory, extensions);
+  const registry = await Registry.create(path.join(input, 'svg'));
+  const [icons] = await Storage.load(adapter, input, extensions);
 
   for (const item of registry.values()) {
     const match = icons.data.find(icon => item.id === icon.name);
@@ -100,7 +107,7 @@ async function scaffold({
     }
   }
 
-  await Storage.save(adapter, directory, [icons]);
+  await Storage.save(adapter, output, [icons]);
 }
 
 module.exports = {

packages/icons/tasks/build.js

@@ -18,7 +18,7 @@ async function build() {
   });
 
   await Metadata.build({
-    directory: path.resolve(__dirname, '../'),
+    input: path.resolve(__dirname, '../'),
     extensions: [
       Metadata.extensions.icons,
       Metadata.extensions.moduleName,

packages/icons/tasks/ci-check.js

@@ -12,7 +12,7 @@ const path = require('path');
 
 async function check() {
   await Metadata.check({
-    directory: path.resolve(__dirname, '../'),
+    input: path.resolve(__dirname, '../'),
     extensions: [
       Metadata.extensions.icons,
       Metadata.extensions.moduleName,

packages/icons/tasks/scaffold.js

@@ -12,7 +12,7 @@ const path = require('path');
 
 async function scaffold() {
   await Metadata.scaffold({
-    directory: path.resolve(__dirname, '../'),
+    input: path.resolve(__dirname, '../'),
   });
 }
 

packages/pictograms/tasks/build.js

@@ -18,7 +18,7 @@ async function build() {
   });
 
   await Metadata.build({
-    directory: path.resolve(__dirname, '../'),
+    input: path.resolve(__dirname, '../'),
     extensions: [
       Metadata.extensions.pictograms,
       Metadata.extensions.moduleName,

packages/pictograms/tasks/ci-check.js

@@ -12,7 +12,7 @@ const path = require('path');
 
 async function check() {
   await Metadata.check({
-    directory: path.resolve(__dirname, '../'),
+    input: path.resolve(__dirname, '../'),
     extensions: [
       Metadata.extensions.pictograms,
       Metadata.extensions.moduleName,

packages/pictograms/tasks/scaffold.js

@@ -12,7 +12,7 @@ const path = require('path');
 
 async function scaffold() {
   await Metadata.scaffold({
-    directory: path.resolve(__dirname, '../'),
+    input: path.resolve(__dirname, '../'),
     extensions: [Metadata.extensions.pictograms],
   });
 }

packages/sketch/.gitignore

@@ -1 +1,2 @@
 *.sketchplugin
+generated