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>

tests/__snapshots__/lucide.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<svg 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\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\\"></path></svg>"`;

tests/__snapshots__/replaceElement.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`combineClassNames should retuns a string of classNames 1`] = `"item1 item2 item3 item4 item5 item6 item7 item8 item9"`;

tests/icons/download.js

@@ -0,0 +1,21 @@
+const Download = [
+  "svg",
+  {
+    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"
+  },
+  [
+    ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
+    ["polyline", { points: "7 10 12 15 17 10" }],
+    ["line", { x1: "12", y1: "15", x2: "12", y2: "3" }]
+  ]
+];
+
+export default Download;

tests/icons/globe.js

@@ -0,0 +1,27 @@
+const Globe = [
+  "svg",
+  {
+    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"
+  },
+  [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["line", { x1: "2", y1: "12", x2: "22", y2: "12" }],
+    [
+      "path",
+      {
+        d:
+          "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
+      }
+    ]
+  ]
+];
+
+export default Globe;

tests/icons/index.js

@@ -0,0 +1,6 @@
+
+export { default as Download } from './download';
+export { default as Globe } from './globe';
+export { default as Menu } from './menu';
+export { default as Moon } from './moon';
+export { default as Volume2 } from './volume-2';

tests/icons/menu.js

@@ -0,0 +1,21 @@
+const Menu = [
+  "svg",
+  {
+    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"
+  },
+  [
+    ["line", { x1: "3", y1: "12", x2: "21", y2: "12" }],
+    ["line", { x1: "3", y1: "6", x2: "21", y2: "6" }],
+    ["line", { x1: "3", y1: "18", x2: "21", y2: "18" }]
+  ]
+];
+
+export default Menu;

tests/icons/moon.js

@@ -0,0 +1,17 @@
+const Moon = [
+  "svg",
+  {
+    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"
+  },
+  [["path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }]]
+];
+
+export default Moon;

tests/icons/volume-2.js

@@ -0,0 +1,23 @@
+const Volume2 = [
+  "svg",
+  {
+    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"
+  },
+  [
+    ["polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }],
+    [
+      "path",
+      { d: "M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" }
+    ]
+  ]
+];
+
+export default Volume2;

tests/lucide.spec.js

@@ -0,0 +1,59 @@
+import * as icons from './icons';
+import { createIcons } from '../src/lucide';
+import fs from 'fs';
+import path from 'path';
+import { minify } from 'html-minifier';
+
+const ICONS_DIR = path.resolve(__dirname, '../icons');
+
+const getOriginalSvg = (iconName) => {
+  const svgContent = fs.readFileSync(path.join(ICONS_DIR, `${iconName}.svg`), 'utf8');
+
+  return minify(svgContent, { collapseWhitespace: true, keepClosingSlash: true, });
+};
+
+describe('createIcons', () => {
+  it('should read elements from DOM and replace it with icons', () => {
+    document.body.innerHTML = `<i icon-name="volume-2"></i>`;
+
+    createIcons({icons});
+
+    const svg = getOriginalSvg('volume-2');
+    expect(document.body.innerHTML).toMatchSnapshot()
+  });
+
+  it('should customize the name attribute', () => {
+    document.body.innerHTML = `<i custom-name="volume-2"></i>`;
+
+    createIcons({
+      icons,
+      nameAttr: 'custom-name'
+    });
+
+    const hasSvg = !!document.querySelector('svg');
+
+    expect(hasSvg).toBeTruthy()
+  });
+
+  it('should add custom attributes', () => {
+    document.body.innerHTML = `<i icon-name="volume-2"></i>`;
+
+    const attrs = {
+      class: 'icon custom-class',
+      fill: 'black',
+    };
+
+    createIcons({ icons, attrs });
+
+    const element = document.querySelector('svg');
+    const attributes = element.getAttributeNames();
+
+    const attributesAndValues = attributes.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+
+      return acc;
+    },{})
+
+    expect(attributesAndValues).toEqual(expect.objectContaining(attrs));
+  });
+});

tests/replaceElement.spec.js

@@ -0,0 +1,62 @@
+import { getAttrs, getClassNames, combineClassNames } from '../src/replaceElement';
+
+describe('getAtts', () => {
+  it('should returns attrbrutes of an element', () => {
+    const element = {
+      attributes: [
+        {
+          name: 'class',
+          value: 'item1 item2 item4',
+        },
+        {
+          name: 'date-name',
+          value: 'volume',
+        },
+      ],
+    };
+
+    const attrs = getAttrs(element);
+
+    expect(attrs.class).toBe(element.attributes[0].value);
+  });
+});
+
+describe('getClassNames', () => {
+  it('should returns an array when giving class property of string', () => {
+    const elementAttrs = {
+      class: 'item1 item2 item3'
+    };
+
+    const attrs = getClassNames(elementAttrs);
+    expect(JSON.stringify(attrs)).toBe(JSON.stringify(['item1','item2','item3']));
+  });
+
+  it('should returns an array when givind class property with an array', () => {
+    const elementAttrs = {
+      class: ['item1','item2','item3']
+    };
+
+    const attrs = getClassNames(elementAttrs);
+    expect(JSON.stringify(attrs)).toBe(JSON.stringify(['item1','item2','item3']));
+  });
+});
+
+describe('combineClassNames', () => {
+  it('should retuns a string of classNames', () => {
+    const arrayOfClassnames = [
+      {
+        class: ['item1','item2','item3']
+      },
+      {
+        class: ['item4','item5','item6']
+      },
+      {
+        class: ['item7','item8','item9']
+      }
+    ];
+
+    const combinedClassNames = combineClassNames(arrayOfClassnames);
+
+    expect(combinedClassNames).toMatchSnapshot();
+  });
+});