@esri/calcite-ui-icons 3.29.0 → 3.30.0

package/lib/spriter/cli.js

@@ -33,8 +33,7 @@ function getConfig() {
     try {
       const configFileContents = fs.readFileSync(input);
       input = JSON.parse(configFileContents).input;
-    }
-    catch (error) {
+    } catch (error) {
       process.stderr.write(`config - could not read input: ${error}`);
       process.exit(1);
     }
@@ -46,22 +45,22 @@ function getConfig() {
 }
 
 spriter(getConfig())
-  .then(summary => {
+  .then((summary) => {
     const { ellapsed, spritesheets } = summary;
 
     process.stdout.write(
-  `Success!
+      `Success!
 
 Generated ${spritesheets.length} spritesheets in ${ellapsed} ms:
 
-${spritesheets.map(spritesheet => `* ${spritesheet.output} (${spritesheet.icons.length} icons)`).join("\n")}
+${spritesheets.map((spritesheet) => `* ${spritesheet.output} (${spritesheet.icons.length} icons)`).join("\n")}
 
-`);
+`,
+    );
 
     process.exit(0);
   })
-  .catch(err => {
+  .catch((err) => {
     process.stderr.write(`Fail! ${err}`);
     process.exit(1);
   });
-

package/lib/spriter/index.js

@@ -17,8 +17,8 @@ const SIZES = [16, 24, 32];
 const OUTLINE = "outline";
 const FILL = "fill";
 
-const isDir = file => fs.lstatSync(`${ICONS}/${file}`).isDirectory();
-const readSVG = icon => readFile(`${ICONS}/${icon.fileName}`, { encoding: "utf-8" });
+const isDir = (file) => fs.lstatSync(`${ICONS}/${file}`).isDirectory();
+const readSVG = (icon) => readFile(`${ICONS}/${icon.fileName}`, { encoding: "utf-8" });
 const has = (haystack, needle) => haystack.indexOf(needle) > -1;
 
 /**
@@ -97,14 +97,13 @@ const has = (haystack, needle) => haystack.indexOf(needle) > -1;
  * @return {ThenPromise<T>} - Promise that resolves when directory creation is ensured.
  */
 function ensureDir(dir) {
-  return mkDir(dir)
-    .catch(error => {
-      const triedToCreateExisting = error.code === "EEXIST";
+  return mkDir(dir).catch((error) => {
+    const triedToCreateExisting = error.code === "EEXIST";
 
-      if (!triedToCreateExisting) {
-        throw error;
-      }
-    });
+    if (!triedToCreateExisting) {
+      throw error;
+    }
+  });
 }
 
 /**
@@ -117,13 +116,14 @@ function ensureDir(dir) {
 function getRequestedIcons(input) {
   const iconsPerSize = {};
 
-  SIZES.forEach(size => iconsPerSize[size] = []);
+  SIZES.forEach((size) => (iconsPerSize[size] = []));
 
-  input.forEach(icon => {
+  input.forEach((icon) => {
     const { name, sizes = SIZES[0], style = OUTLINE } = icon;
 
-    sizes.filter(size => has(SIZES, size))
-      .forEach(size => {
+    sizes
+      .filter((size) => has(SIZES, size))
+      .forEach((size) => {
         const fillPart = style === FILL ? "-f" : "";
         const fileName = `${name}-${size}${fillPart}.svg`;
 
@@ -142,10 +142,9 @@ function getRequestedIcons(input) {
  * @return {ThenPromise<ExportInfo>} - Promise that resolves with export info.
  */
 function generateExportInfo(requested) {
-
   const processRequested = (icons) => {
-    SIZES.forEach(size => {
-      requested[size].forEach(icon => {
+    SIZES.forEach((size) => {
+      requested[size].forEach((icon) => {
         if (!has(icons, icon.fileName)) {
           return;
         }
@@ -154,15 +153,15 @@ function generateExportInfo(requested) {
           name: icon.name,
           style: icon.style,
           size,
-          fileName: icon.fileName
+          fileName: icon.fileName,
         });
       });
     });
   };
 
   const processAll = (icons) => {
-    icons.forEach(icon => {
-      SIZES.forEach(size => {
+    icons.forEach((icon) => {
+      SIZES.forEach((size) => {
         const fileMatchesSize = icon.indexOf(`-${size}`) > -1;
 
         if (!fileMatchesSize) {
@@ -176,19 +175,19 @@ function generateExportInfo(requested) {
           name,
           style: filled ? FILL : OUTLINE,
           size,
-          fileName: icon
+          fileName: icon,
         });
       });
     });
   };
 
-  const includeAll = SIZES.every(size => requested[size].length === 0);
+  const includeAll = SIZES.every((size) => requested[size].length === 0);
 
   const exportInfo = {};
-  SIZES.forEach(size => exportInfo[size] = []);
+  SIZES.forEach((size) => (exportInfo[size] = []));
 
   return readDir(ICONS)
-    .then(icons => {
+    .then((icons) => {
       if (includeAll) {
         processAll(icons);
         return;
@@ -207,14 +206,13 @@ function generateExportInfo(requested) {
  * @return {ThenPromise<string>} - Promise that resolves with symbol element text content.
  */
 function svgToSymbol(icon) {
-  return readSVG(icon)
-    .then(svgContent => {
-      const svgContentCapturingPattern = /^\s*\<svg[^>]*>(.+)\<\/svg>\s*$/;
-      const [, innerContent] = svgContentCapturingPattern.exec(svgContent);
-      const { size } = icon;
+  return readSVG(icon).then((svgContent) => {
+    const svgContentCapturingPattern = /^\s*\<svg[^>]*>(.+)\<\/svg>\s*$/;
+    const [, innerContent] = svgContentCapturingPattern.exec(svgContent);
+    const { size } = icon;
 
-      return `<symbol id="${icon.name}-${size}" viewbox="0 0 ${size} ${size}">${innerContent}</symbol>`;
-    });
+    return `<symbol id="${icon.name}-${size}" viewbox="0 0 ${size} ${size}">${innerContent}</symbol>`;
+  });
 }
 
 /**
@@ -229,8 +227,8 @@ function svgToSymbol(icon) {
  */
 function createSpritesheet({ icons, output, size }) {
   return Promise.all(icons.map(svgToSymbol))
-    .then(symbols => `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join("")}</svg>`)
-    .then(content => writeFile(`${output}/${`${NAME}-${size}.svg`}`, content));
+    .then((symbols) => `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join("")}</svg>`)
+    .then((content) => writeFile(`${output}/${`${NAME}-${size}.svg`}`, content));
 }
 
 /**
@@ -241,7 +239,6 @@ function createSpritesheet({ icons, output, size }) {
  * @return {ThenPromise<ExportSummary>} - Promise that resolves with export summary.
  */
 function spriter(config) {
-
   const startTime = process.hrtime();
   const { input = [], output = "./output" } = config;
 
@@ -249,7 +246,7 @@ function spriter(config) {
     .then(() => generateExportInfo(getRequestedIcons(input)))
     .then((exportInfo) =>
       Promise.all(
-        SIZES.map(size => {
+        SIZES.map((size) => {
           const icons = exportInfo[size];
 
           if (icons.length === 0) {
@@ -257,19 +254,19 @@ function spriter(config) {
           }
 
           return createSpritesheet({ icons, output, size });
-        })
-        )
-        .then(() => exportInfo))
-    .then(exportInfo => {
+        }),
+      ).then(() => exportInfo),
+    )
+    .then((exportInfo) => {
       const endTime = process.hrtime(startTime);
 
       const nanoToMillis = 1000000;
       const ellapsed = endTime[1] / nanoToMillis;
 
-      const spritesheets = Object.keys(exportInfo).map(size => {
+      const spritesheets = Object.keys(exportInfo).map((size) => {
         return {
           output: `${output}/${NAME}-${size}.svg`,
-          icons: exportInfo[size]
+          icons: exportInfo[size],
         };
       });
 

package/package.json

@@ -1,18 +1,8 @@
 {
-  "bin": {
-    "spriter": "bin/spriter.js"
-  },
   "name": "@esri/calcite-ui-icons",
-  "version": "3.29.0",
+  "version": "3.30.0",
   "private": false,
   "description": "A collection of UI SVG icons created by Esri for applications.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Esri/calcite-ui-icons.git"
-  },
-  "main": "index.js",
-  "js-next:main": "index.js",
-  "module": "index.js",
   "keywords": [
     "esri",
     "arcgis",
@@ -20,47 +10,65 @@
     "icons",
     "svg"
   ],
-  "contributors": [
-    {
-      "name": "Paul Pederson",
-      "email": "<ppederson@esri.com>"
-    },
-    {
-      "name": "Skye Seitz",
-      "email": "<sseitz@esri.com>"
-    }
-  ],
-  "license": "SEE LICENSE IN README.md",
+  "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
-    "url": "https://github.com/Esri/calcite-ui-icons/issues"
+    "url": "https://github.com/Esri/calcite-design-system/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Esri/calcite-design-system.git",
+    "directory": "packages/calcite-ui-icons"
+  },
+  "license": "SEE LICENSE.md",
+  "main": "index.js",
+  "module": "index.js",
+  "bin": {
+    "spriter": "bin/spriter.js"
   },
-  "homepage": "https://github.com/Esri/calcite-ui-icons#readme",
+  "files": [
+    "icons/",
+    "js/",
+    "lib/",
+    "bin/sprinter.js",
+    "docs/icons.json",
+    "docs/keywords.json",
+    "index.d.ts",
+    "index.js",
+    "sprite-16.svg",
+    "sprite-24.svg",
+    "sprite-32.svg"
+  ],
   "scripts": {
-    "spriter": "node bin/spriter.js",
+    "build": "npm run copy-assets && npm run buildsprite-16 && npm run buildsprite-24 && npm run buildsprite-32 && npm run optimize",
     "buildsprite-16": "svgstore -o sprite-16.svg icons/*-16*.svg",
     "buildsprite-24": "svgstore -o sprite-24.svg icons/*-24*.svg",
     "buildsprite-32": "svgstore -o sprite-32.svg icons/*-32*.svg",
-    "optimize": "node bin/cli.js",
-    "start": "npm run buildsprite-16 && npm run buildsprite-24 && npm run buildsprite-32 && npm run optimize",
-    "server": "node bin/server.js",
+    "convert-all-desktop-multi": "node bin/convert-mobile.js -o \"../desktop-output\" -i \"16\" -s 16 && node bin/convert-mobile.js -o \"../desktop-output\" -s 24 && node bin/convert-mobile.js -o \"../desktop-output\" -s 32 && node bin/convert-mobile.js -o \"../desktop-output\" -s 64",
+    "convert-all-desktop:size": "node bin/convert-mobile.js -o \"../desktop-output\" -i \"16\" -s",
     "convert-all-ios": "node bin/convert-mobile.js -o \"../mobile-output\" -p \"ios\" -i \"24\"",
     "convert-all-ios:size": "node bin/convert-mobile.js -o \"../mobile-output\" -p \"ios\" -s",
-    "convert-all-desktop:size": "node bin/convert-mobile.js -o \"../desktop-output\" -i \"16\" -s",
-    "convert-all-desktop-multi": "node bin/convert-mobile.js -o \"../desktop-output\" -i \"16\" -s 16 && node bin/convert-mobile.js -o \"../desktop-output\" -s 24 && node bin/convert-mobile.js -o \"../desktop-output\" -s 32 && node bin/convert-mobile.js -o \"../desktop-output\" -s 64"
+    "copy-assets": "cpy \"../../node_modules/calcite-web/dist/js/calcite-web.min.js\" \"../../node_modules/calcite-web/dist/css/calcite-web.min.css\" \"./docs/resources\" --flat",
+    "optimize": "node bin/cli.js",
+    "spriter": "node bin/spriter.js",
+    "start": "npm run copy-assets && node bin/server.js"
   },
   "devDependencies": {
     "browser-sync": "^2.24.7",
+    "calcite-web": "github:esri/calcite-web#v1.1.0",
     "camelcase": "^5.3.1",
-    "cli-progress": "^3.1.0",
-    "debounce": "^1.2.0",
+    "cli-progress": "^3.12.0",
+    "debounce": "^2.1.0",
     "fs-extra": "^7.0.0",
-    "glob": "^7.1.4",
-    "glob-promise": "^3.4.0",
+    "glob": "^11.0.0",
     "promise": "~8.0.1",
+    "svg2img": "1.0.0-beta.2",
     "svgo": "^1.3.0",
     "svgson": "^2.1.1",
     "svgstore-cli": "^1.3.1",
-    "svg2img": "^0.6.1",
-    "yargs": "^15.1.0"
-  }
+    "yargs": "^17.7.2"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "gitHead": "1768b960533de6c7d06d3ede80d126badccf0596"
 }

package/.github/workflows/npm-release.yml

@@ -1,20 +0,0 @@
-name: NPM Release
-on:
-  release:
-    types: [published]
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          ref: master
-      - uses: actions/setup-node@v3
-        with:
-          node-version: lts/*
-          registry-url: "https://registry.npmjs.org"
-      - run: npm i
-      - run: npm start
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CONTRIBUTE.md

@@ -1,29 +0,0 @@
-# Contributing to calcite-ui-icons
-
-The creative lab is the main contributor as they provide the various icons used by the different apps.
-
-#### Bugs
-
-Create an issue that describes clearly the issue and the reproducible steps.
-
-#### Pull Requests
-
-If you feel the urge to contribute, submit your updates with pull request.
-
-## Running the Doc Site
-
-First install all dependencies:
-
-```
-npm install
-```
-
-Next, run the server:
-
-```
-npm run server
-```
-
-This will optimize the icons, create a JSON file with all the icon path data, and start up a development server with live reload capabilities.
-
-This task also watches for changes and rebuilds the JSON file whenever icons are added or edited, automatically reloading your browser to display changes as they come in.

package/bin/build.js

@@ -1,24 +0,0 @@
-const optimize = require('./optimize');
-const generatePathFile = require('./path-data');
-
-module.exports = function () {
-  return optimize('*.svg')
-    .then(() => optimize('icons/*.svg', true))
-    .catch((error) => {
-      console.error('🚨  Error while optimizing icons');
-      throw error;
-    })
-    .then(() => {
-      console.log('✨ icons optimized successfully');
-      return generatePathFile();
-    })
-    .catch((error) => {
-      console.error('🚨  Error while generating icons.json');
-      console.error(error);
-      throw error;
-    })
-    .then((files) => {
-      console.log('✨ path file generated at ./docs/icons.json');
-      return files;
-    });
-}

package/bin/cli.js

@@ -1,6 +0,0 @@
-#!/usr/bin/env node
-const build = require('./build');
-console.log('🗜  optimizing icons... \n');
-build(true)
-  .then(() => process.exit(0))
-  .catch(() => process.exit(1));

package/bin/convert-mobile.js

@@ -1,218 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const svg2img = require('svg2img');
-const path = require('path');
-const yargs = require('yargs');
-
-const options = yargs
-  .usage('Usage: -n <name of icon, omit if doing bulk>, \n-s <output size, defaults to 24>, \n-o <output path (defaults to ./output)>, \n-p <target platform (e.g. ios) \n-i <16, 24, 32, omit for 16>')
-  .option('n', { alias: 'name', describe: 'name of icon, without -32.svg; omit to convert all icons', type: 'string', demandOption: false })
-  .option('o', { alias: 'outputDir', describe: 'output path, relative to this script', type: 'string', demandOption: false })
-  .option('p', { alias: 'outputPlatform', describe: 'target platform, valid options are: ios', type: 'string', demandOption: false })
-  .option('i', { alias: 'inSize', describe: 'source svg variant, defaults to 16', type: 'string', demandOption: false })
-  .option('s', { alias: 'outSize', describe: 'size of output image', type: 'string', demandOption: false})
-  .argv;
-
-/**
- * Converts a single svg to png, with given width & height values. The function will automatically append '.png'
- * @param {string} svgFilePath - filepath to icon .svg
- * @param {int} width - width of output file
- * @param {int} height - height of output file
- * @param {string} outputBasePath - base directory in which to store output
- * @param {string} outputName - name of output png image, excluding '.png'
- * @param {string} outputSuffix - suffix appended to output file name (ex, '@2x')
- */
-function convertSingleIconToPng(svgFilePath, width, height, outputBasePath, outputName, outputSuffix=null) {
-  // make sure output base path exists
-  if (!fs.existsSync(outputBasePath)) {
-    fs.mkdirSync(outputBasePath, {
-      recursive: true
-    });
-  }
-  // concatenate real output path
-  let real_output_path = path.join(outputBasePath, outputName);
-  if (outputSuffix) {
-    real_output_path += outputSuffix
-  }
-  real_output_path += '.png'
-  // convert and save the image
-  svg2img(svgFilePath, { 'width': width, 'height': height }, function (error, buffer) {
-    if (error){
-      console.log(error);
-      process.exit(1);
-    }
-    fs.writeFileSync(real_output_path, buffer);
-  });
-}
-
-/**
- * Creates an ImageSet (including Contents.json file) for an icon
- * @param {string} svgFilePath - filepath to icon .svg
- * @param {int} width - width of output file @1x
- * @param {int} height - height of output file @1x
- * @param {string} outputBasePath - base directory in which to store output
- * @param {string} outputName - name of output png image, excluding '.png'
- */
-function convertIconToXcodeImageSet(svgFilePath, width, height, outputBasePath, outputName) {
-  const outputImagesetPath = path.join(outputBasePath, outputName + '.imageset');
-
-  // Create images at 3 sizes
-  convertSingleIconToPng(svgFilePath, width, height, outputImagesetPath, outputName, '@1x');
-  convertSingleIconToPng(svgFilePath, width * 2, height * 2, outputImagesetPath, outputName, '@2x');
-  convertSingleIconToPng(svgFilePath, width * 3, height * 3, outputImagesetPath, outputName, '@3x');
-
-  // read template
-  const imagesetTemplatePath = path.join(__dirname, 'templates', 'imageset.json');
-  // create Contents.json for asset catalog asset
-  fs.readFile(imagesetTemplatePath, 'utf8', function (error, buffer) {
-    if (error) {
-      console.log(error);
-      process.exit(1);
-    }
-    const contentsJsonBuffer = buffer.replace(/\$\{NAME\}/g, outputName);
-    const contentsJsonOutputPath = path.join(outputImagesetPath, 'Contents.json');
-    fs.writeFileSync(contentsJsonOutputPath, contentsJsonBuffer)
-  });
-}
-
-/**
- * Indexes all calcite icons contained in directory at path
- * @param {string} baseIconPath - path to calcite .svg icons directory
- */
-async function indexCalciteIcons(baseIconPath) {
-  return new Promise(resolve => {
-    var iconIndex = {};
-    fs.readdir(baseIconPath, function (error, files) {
-      if (error) {
-        console.log(error);
-        process.exit(1);
-      }
-      files.forEach(function (file) {
-        // strip all files of file size information, catalog in an index
-        var base_name = path.basename(file);
-        base_name = base_name.replace('.svg', '');
-        var size = undefined;
-        if (base_name.includes('-16')) {
-          base_name = base_name.replace('-16', '');
-          size = 16;
-        }
-        else if (base_name.includes('-24')) {
-          base_name = base_name.replace('-24', '');
-          size = 24;
-        }
-        else if (base_name.includes('-32')) {
-          base_name = base_name.replace('-32', '');
-          size = 32;
-        }
-        if (!iconIndex[base_name]) {
-          iconIndex[base_name] = {}
-        }
-        iconIndex[base_name][size] = path.join(baseIconPath, file);
-      });
-      resolve(iconIndex);
-    });
-  });
-}
-
-/**
- * Indexes all calcite icons contained in directory at path
- * @param {string} xcAssetsBaseDirectory - path where to derive calcite.xcassets
- */
-async function createCalciteXCAssets(xcAssetsBaseDirectory) {
-  return new Promise(resolve => {
-    // Put in .xcassets folder
-    var directory = path.join(xcAssetsBaseDirectory, 'calcite.xcassets');
-    // Make sure dir exists
-    if (!fs.existsSync(directory)) {
-      fs.mkdirSync(directory, {
-        recursive: true
-      });
-    }
-    // read contents.json template
-    let template_path = path.join(__dirname, 'templates', 'xcassets.json');
-    // write out file
-    fs.readFile(template_path, 'utf8', function (error, buffer) {
-      if (error) {
-        console.log(error);
-        process.exit(1);
-      }
-      const contents_output_path = path.join(directory, 'Contents.json');
-      fs.writeFile(contents_output_path, buffer, function (error) {
-        resolve(directory);
-      });
-    });
-  });
-}
-
-async function main() {
-  // index all calcite icons
-  let iconIndex = await indexCalciteIcons('./icons/');
-  // establish output root path
-  var outputRoot = path.join(__dirname, 'output')
-  if (options.outputDir) {
-    outputRoot = path.join(__dirname, options.outputDir);
-  }
-  // establish input size
-  var inputSize = 24;
-  if (options.inSize === '16'){
-    inputSize = 16;
-  } else if (options.inSize === '24'){
-    inputSize = 24;
-  } else if (options.inSize === '32'){
-    inputSize = 32;
-  } else if (options.outSize) {
-    let size = parseInt(options.outSize);
-    if (size < 24) {
-      inputSize = 16;
-    } else if (size < 32) {
-      inputSize = 24;
-    } else if (size >= 32) {
-      inputSize = 32;
-    }
-  }
-  // establish output size (in pixels)
-  var outputSize = 24;
-  if (options.outSize) {
-    let size = parseInt(options.outSize);
-    if (size) {
-      outputSize = size;
-    }
-  }
-  // ensure icon name is valid, checking index
-  if (options.name) {
-    if (!(options.name in iconIndex)) {
-      console.log("Invalid icon name " + options.name);
-      process.exit(1);
-    }
-  }
-  // build xcassets if output for iOS
-  if (options.outputPlatform === 'ios') {
-    let xcAssetsDirectory = await createCalciteXCAssets(outputRoot);
-    if (options.name) {
-      let name = options.name;
-      let file = iconIndex[name][inputSize];
-      convertIconToXcodeImageSet(file, outputSize, outputSize, xcAssetsDirectory, name);
-    }
-    else {
-      for (let key in iconIndex) {
-        let file = iconIndex[key][inputSize];
-        convertIconToXcodeImageSet(file, outputSize, outputSize, xcAssetsDirectory, key)
-      }
-    }
-  } else { // platform is not ios, render plain png
-    if (options.name) {
-      let name = options.name;
-      let file = iconIndex[name][inputSize];
-      convertSingleIconToPng(file, outputSize, outputSize, outputRoot, name, undefined);
-    }
-    else {
-      for (let key in iconIndex) {
-        let file = iconIndex[key][inputSize];
-        convertSingleIconToPng(file, outputSize, outputSize, outputRoot, key, undefined);
-      }
-    }
-  }
-}
-
-main();