Featherity Npm package, reorganize scripting. (#52)

* New setup for new NPM package

* Add build scripts for dist

* Add introduction readme

* Refactor names

* update package.json

* remove log

* rename variable

* Factoring

* Improve optimize script

* Add eslint config

* Eslint fixes

* rename import

* Move packeges

* Setup rollup and build progress

* Refactor scripts

* fix lint error

* remove lint disabler

* Bring back old libraries

* add indentation

* reset packages directory

* remove vscode setting files

* 0.1.0-alpha.0

* new version

* 0.1.0-alpha.1

* Fix build process

* Add create element to the entry file

* update version number

* publish new alhpa version

* fixing bugs

* Add jest and tests

* replace with XML createElement

* set new version

* Fix svg generation

* Add tests for main library

* Update docs

* Adjust tests and selectors

* update the spec

* Update README.md

* Update README.md

* Update README.md

* update version

* Update README.md

* Move function to helpers file

* rename license, package and readme

* Fix build files

* rename packages

Co-authored-by: Eric Fennis <eric.fennis@endurance.com>

scripts/render/default-attrs.json

@@ -0,0 +1,11 @@
+{
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": 24,
+  "height": 24,
+  "viewBox": "0 0 24 24",
+  "fill": "none",
+  "stroke": "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}

scripts/render/processSvg.js

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import Svgo from 'svgo';
+import cheerio from 'cheerio';
+import { format } from 'prettier';
+
+import DEFAULT_ATTRS from './default-attrs.json';
+
+/**
+ * Process SVG string.
+ * @param {string} svg - An SVG string.
+ * @param {Promise<string>}
+ */
+function processSvg(svg) {
+  return (
+    optimize(svg)
+      .then(setAttrs)
+      .then(format)
+      // remove semicolon inserted by prettier
+      // because prettier thinks it's formatting JSX not HTML
+      .then(svg => svg.replace(/;/g, ''))
+  );
+}
+
+/**
+ * Optimize SVG with `svgo`.
+ * @param {string} svg - An SVG string.
+ * @returns {Promise<string>}
+ */
+function optimize(svg) {
+  const svgo = new Svgo({
+    plugins: [
+      { convertShapeToPath: false },
+      { mergePaths: false },
+      { removeAttrs: { attrs: '(fill|stroke.*)' } },
+      { removeTitle: true },
+    ],
+  });
+
+  return new Promise(resolve => {
+    svgo.optimize(svg, ({ data }) => resolve(data));
+  });
+}
+
+/**
+ * Set default attibutes on SVG.
+ * @param {string} svg - An SVG string.
+ * @returns {string}
+ */
+function setAttrs(svg) {
+  const $ = cheerio.load(svg);
+
+  Object.keys(DEFAULT_ATTRS).forEach(key => $('svg').attr(key, DEFAULT_ATTRS[key]));
+
+  return $('body').html();
+}
+
+export default processSvg;

scripts/render/renderIconNodes.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { parseDOM } from 'htmlparser2';
+import DEFAULT_ATTRS from './default-attrs.json';
+
+export default iconsObject => {
+  const iconNodes = {};
+
+  Object.keys(iconsObject).forEach(icon => {
+    const svgString = iconsObject[icon];
+    const dom = parseDOM(svgString);
+
+    const children = dom.map(element => [
+      element.name,
+      {
+        ...element.attribs,
+      },
+    ]);
+
+    iconNodes[icon] = [
+      'svg',
+      {
+        ...DEFAULT_ATTRS,
+      },
+      children,
+    ];
+  });
+
+  return iconNodes;
+};

scripts/render/renderIconsObject.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import path from 'path';
+import cheerio from 'cheerio';
+import { minify } from 'html-minifier';
+import { readSvg } from '../helpers';
+
+/**
+ * Get contents between opening and closing `<svg>` tags.
+ * @param {string} svg
+ * @returns {string}
+ */
+function getSvgContents(svg) {
+  const $ = cheerio.load(svg);
+
+  return minify($('svg').html(), { collapseWhitespace: true });
+}
+
+/**
+ * Build an object in the format: `{ <name>: <contents> }`.
+ * @param {string[]} svgFiles - A list of filenames.
+ * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
+ * @returns {Object}
+ */
+export default (svgFiles, iconsDirectory) =>
+  svgFiles
+    .map(svgFile => {
+      const name = path.basename(svgFile, '.svg');
+      const svg = readSvg(svgFile, iconsDirectory);
+      const contents = getSvgContents(svg);
+      return { name, contents };
+    })
+    .reduce((icons, icon) => {
+      icons[icon.name] = icon.contents;
+      return icons;
+    }, {});