@esri/calcite-ui-icons 3.28.9 → 3.29.1-next.0

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();

package/bin/optimize.js

@@ -1,68 +0,0 @@
-const fs = require('fs-extra');
-const glob = require('glob-promise');
-const SVGO = require('svgo');
-const progress = require('cli-progress');
-
-let options = {
-  plugins: [
-    {cleanupIDs: {remove: false}},
-    {removeStyleElement: true},
-    {removeUselessDefs: true},
-    {removeUselessStrokeAndFill: false},
-    {removeHiddenElems: true},
-    {removeEmptyText: true},
-    {convertShapeToPath: { convertArcs: true }},
-    {convertPathData: { noSpaceAfterFlags: false }},
-    {removeEmptyAttrs: true},
-    {removeEmptyContainers: true},
-    {mergePaths: false},
-    {removeTitle: true},
-    {removeDesc: true},
-    {removeDimensions: true},
-    {removeAttrs: {attrs: ['class', '(stroke)']}}
-  ],
-  multipass: true
-};
-
-/**
- * Reads an icon file off disk and optimizes it, saving to same location
- * @param {string[]}           filePaths  array of relative file paths
- * @param {SVGO}               svgo       SVGO instance with correct options
- * @param {SingleBar}          bar        progress bar instance
- * @return {Promise}
- */
-function optimizeIcons (filePaths, svgo, bar) {
-  var num = 0;
-  return Promise.all(filePaths.map((path) => {
-    return fs.readFile(path, 'utf-8')
-      .then((svg) => svgo.optimize(svg, { path }))
-      .then((result) => {
-        num++;
-        bar.update(num);
-        return fs.writeFile(path, result.data, 'utf-8');
-      });
-  }));
-}
-
-/**
- * Optimize a set of icons
- * @param {string}   files       Glob pattern for icons source
- * @param {boolean}  remove      Remove id attributes from output
- * @return {Promise}             Formatted object with all icon metadata
- */
-module.exports = function (files, remove) {
-  if (!files) {
-    return Promise.resolve(true);
-  }
-  options.plugins[0] = {cleanupIDs: { remove }};
-  svgo = new SVGO(options);
-  return glob(files).then((iconPaths) => {
-    const format = "  \x1b[32m {bar} {percentage}% | {value}/{total} \x1b[0m";
-    const bar = new progress.SingleBar({ format }, progress.Presets.shades_classic);
-    bar.start(iconPaths.length, 0);
-    return optimizeIcons(iconPaths, svgo, bar).then(() => {
-      bar.stop();
-      console.log("");
-    });
-  });
-}

package/bin/path-data.js

@@ -1,136 +0,0 @@
-const camelCase = require('camelcase');
-const fs = require('fs-extra');
-const glob = require('glob-promise');
-const path = require('path');
-const util = require('util');
-const svgson = util.promisify(require('svgson'));
-const version = require('../package.json').version;
-
-/**
- * Gets all important information about an icon.
- * @param {string} svg - Path to icon file.
- * @return {object} - Formatted object with all icon metadata
- */
-function formatSVG (svg) {
-  let file = path.basename(svg.file);
-  let filled = file.indexOf('-f.svg') > -1;
-  return {
-    file,
-    filled,
-    paths: getPaths(svg.contents),
-    size: getSize(file),
-    variant: getVariant(file, filled)
-  };
-}
-
-/**
- * Find the path(s) from an icon's svgson data
- * @param {object} svg - Object as returned from svgson.
- * @return {array} - Array of paths
- */
-function getPaths (svg) {
-  const bbPaths = ['M0 0h16v16H0z', 'M0 0h24v24H0z', 'M0 0h32v32H0z'];
-  return svg.childs
-    .filter(child => child.name === 'path' && bbPaths.indexOf(child.attrs.d) === -1) // filter out bounding box paths
-    .map(child => ({ opacity: child.attrs.opacity, d: child.attrs.d }));
-}
-
-/**
- * Find the base icon name
- * @param {string} name - Icon filename
- * @param {boolean} filled - Icon filename
- * @return {array} - Icon filename without size, fill, or file extension
- */
-function getVariant (name, filled) {
-  var noF = name.replace('-f.svg', '.svg');
-  return noF.substring(0, noF.length - 7) + (filled ? "-f" : "");
-}
-
-/**
- * Find an icon's size
- * @param {string} name - Icon filename
- * @return {integer} - 16, 24, 36
- */
-function getSize(name) {
-  var noF = name.replace('-f.svg', '.svg');
-  return parseInt(noF.substring(noF.length - 4, noF.length - 6), 10);
-}
-
-/**
- * Read an icon from disc and get data as json
- * @param {string} fileName - Icon filename (full path)
- * @return {Promise} - Promise resolving to object which includes name and svgson data
- */
-function readSVG (fileName) {
-  return new Promise(function(resolve, reject) {
-    fs.readFile(fileName, 'utf-8').then(function (svg) {
-      svgson(svg, {}, function (contents) {
-        resolve({file: fileName, contents});
-      });
-    });
-  });
-}
-
-module.exports = function generatePathFile () {
-  let banner = '// File generated automatically by path-data.js, do not edit directly\n';
-  let jsFile = `${banner}`;
-  let tsFile = `
-${banner}
-interface CalciteMultiPathEntry {
-  d: string;
-  opacity?: string;
-}
-export type CalciteIconPath = string | CalciteMultiPathEntry[];
-`;
-  return glob('icons/*.svg')
-    .then(filePaths => Promise.all(filePaths.map(readSVG)))
-    .then(files => files.map(formatSVG))
-    .then(files => {
-      let icons = {};
-      let keywords = JSON.parse(fs.readFileSync('docs/keywords.json', 'utf-8'));
-      files.forEach(file => {
-        // add to json file
-        icons[file.variant] = icons[file.variant] || keywords[file.variant] || { alias: [], category: "", release: "" };
-        var icon = icons[file.variant];
-        const firstPath = file.paths[0] || { d: "" }; // back up for "blank" icon
-        const paths = file.paths.length > 1 ? file.paths : firstPath.d;
-        icon[file.size] = paths;
-        var base = file.variant.substring(0, file.variant.length - 2);
-        // make sure filled variants get the keywords from their standard counterpart
-        if (file.filled && !icon.release) {
-          const variantKeywords = keywords[base];
-          if (variantKeywords) {
-            icon.alias = variantKeywords.alias;
-            icon.category = variantKeywords.category;
-            icon.release = variantKeywords.release;
-          }
-        }
-        // add to ts and js files
-        const variant = file.variant.match(/^\d/) ? `i${file.variant}`: file.variant;
-        const camelCaseName = camelCase(`${file.filled ? base: variant }-${file.size}${ file.filled ? "-f" : ""}`);
-        jsFile += `export {${camelCaseName}} from "./js/${camelCaseName}.js";\n`;
-
-        let contents, tsContents;
-        if (typeof paths === "string") {
-          tsFile += `export const ${camelCaseName}: string;\n`;
-          contents = `export const ${camelCaseName} = "${paths}";\n`;
-          tsContents = `export const ${camelCaseName}: string;\n`;
-        } else {
-          icon.multiPath = true;
-          tsFile += `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
-          contents = `export const ${camelCaseName} = ${JSON.stringify(paths)};\n`;
-          tsContents = `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
-        }
-
-        fs.writeFile(`js/${camelCaseName}.js`, contents, 'utf8');
-        fs.writeFile(`js/${camelCaseName}.d.ts`, tsContents, 'utf8');
-        fs.writeFile(`js/${camelCaseName}.json`, JSON.stringify(paths), 'utf8');
-      });
-      let promises = [
-        fs.writeFile('docs/icons.json', JSON.stringify({ version, icons }), 'utf8'),
-        fs.writeFile('index.d.ts', tsFile, 'utf8'),
-        fs.writeFile('index.js', jsFile, 'utf8')
-      ];
-      return Promise.all(promises);
-    });
-};

package/bin/server.js

@@ -1,41 +0,0 @@
-#!/usr/bin/env node
-const build = require('./build');
-const pathData = require('./path-data');
-const optimize = require('./optimize');
-const debounce = require('debounce');
-const bs = require('browser-sync').create();
-const options = {
-  awaitWriteFinish: true,
-  ignoreInitial: true
-};
-
-console.log('🗜  optimizing icons... \n')
-
-build()
-  .then(() => {
-    bs.init({
-      server: './docs',
-      notify: false,
-      ui: false,
-      port: 8080
-    });
-    bs.watch('icons/*.svg', options, onChange);
-    bs.watch('docs/keywords.json', options, onChange);
-
-    function onChange (event, file) {
-      if (event === 'add') {
-        console.log('🗜  new icon detected, optimizing... \n');
-        optimize(file, true).then(() => {});
-      } else {
-        update();
-      }
-    }
-
-    const update = debounce(function () {
-      pathData()
-        .then(() => {
-          console.log('✨  path file updated');
-          bs.reload();
-        });
-    }, 300);
-  });

package/bin/templates/imageset.json

@@ -1,29 +0,0 @@
-{
-    "images": [
-      {
-        "idiom": "universal"
-      },
-      {
-        "scale": "1x",
-        "idiom": "universal",
-        "filename": "${NAME}@1x.png"
-      },
-      {
-        "scale": "2x",
-        "idiom": "universal",
-        "filename": "${NAME}@2x.png"
-      },
-      {
-        "scale": "3x",
-        "idiom": "universal",
-        "filename": "${NAME}@3x.png"
-      }
-    ],
-    "properties": {
-      "template-rendering-intent" : "template"
-    },
-    "info": {
-      "version": 1,
-      "author": "xcode"
-    }
-  }

package/bin/templates/xcassets.json

@@ -1,6 +0,0 @@
-{
-    "info" : {
-      "version" : 1,
-      "author" : "xcode"
-    }
-}

package/bower.json

@@ -1,27 +0,0 @@
-{
-  "name": "calcite-ui-icons",
-  "authors": [
-    "Julio Ochoa <jochoa@esri.com>",
-    "Paul Pederson <PPederson@esri.com>",
-    "John Griffith <jgriffith@esri.com>",
-    "Katelyn Seitz <kseitz@esri.com>"
-  ],
-  "description": "A collection of UI icons created by Esri for web based applications.",
-  "main": "",
-  "keywords": [
-    "esri",
-    "arcgis",
-    "apps",
-    "icons",
-    "svg"
-  ],
-  "license": "SEE LICENSE IN README.md",
-  "private": false,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ]
-}