Feat(icons): Introduce package for jobs-icons (refs #DS-291)

packages/icons/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/icons/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 LMC s.r.o.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/icons/README.md

@@ -0,0 +1,73 @@
+# @lmc-eu/jobs-icons
+
+> Icons of Jobs Design System.
+
+## Install
+
+
+```shell
+yarn add @lmc-eu/jobs-icons
+```
+
+or
+
+```shell
+npm install --save @lmc-eu/jobs-icons
+```
+
+## Usage
+
+### SVG files
+
+You can use SVG files directly from `@lmc-eu/jobs-icons/svg` directory by importing them or copying them to your app structure.
+
+### React
+
+You can import SVG files directly from `@lmc-eu/jobs-icons/svg` directory in React components using a library like [React SVGR](https://react-svgr.com/).
+
+Example configuration for Webpack:
+
+```js
+rules.unshift({
+  test: /\.svg$/,
+  enforce: 'pre',
+  use: ['@svgr/webpack'],
+});
+```
+
+```jsx
+import Warning from '@lmc-eu/jobs-icons/svg/warning.svg';
+
+<Warning />;
+```
+
+Or you can import React components directly from `@lmc-eu/jobs-icons/react`.
+
+⚠️ Beware of naming, as all React component does, they are named using **PascalCase** and `Icon` suffix.
+
+```jsx
+import { WarningIcon } from '@lmc-eu/jobs-icons/react';
+// or
+import WarningIcon from '@lmc-eu/jobs-icons/react/WarningIcon';
+
+<WarningIcon />;
+```
+
+### Icons paths
+
+Alternatively you can use an `icons` object which consists of an icon name and SVG content. Thus you can fabricate your icon yourself.
+
+```jsx
+import icons from '@lmc-eu/jobs-icons/icons';
+
+export const Icon = ({ name, , size }) => {
+  return (
+    <svg
+      fill="currentColor"
+      width={size}
+      height={size}
+      dangerouslySetInnerHTML={{ __html: icons[name] }}
+    />
+  );
+};
+```

packages/icons/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lmc-eu/jobs-icons",
+  "version": "0.1.0",
+  "description": "Icons for Jobs Design System",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lmc-eu/jobs-design-system.git",
+    "directory": "packages/icons"
+  },
+  "scripts": {
+    "prepare:react": "node ./scripts/prepareSvgReact.js",
+    "build:svg": "node ./scripts/buildSvg.js",
+    "build:clean": "shx rm -rf dist",
+    "build:prepare": "shx mkdir -p dist/svg dist/react dist/.tmp-svg",
+    "build:copy": "shx cp -r package.json README.md dist/",
+    "build:react": "svg2react-icon --typescript --no-sub-dir ./dist/.tmp-svg ./dist/react",
+    "build:react:clean": "shx rm -rf dist/react/**.d.ts dist/react/**.js.map dist/.tmp-svg",
+    "build:const": "node ./scripts/buildConstants.js",
+    "prebuild": "npm-run-all build:clean build:prepare",
+    "build": "npm-run-all build:svg prepare:react build:react build:const",
+    "postbuild": "npm-run-all build:react:clean build:copy"
+  },
+  "devDependencies": {
+    "jsdom": "^20.0.0",
+    "npm-run-all": "4.1.5",
+    "shx": "0.3.4",
+    "svg2react-icon": "^3.1.178"
+  }
+}

packages/icons/scripts/buildConstants.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const jsdom = require('jsdom');
+
+const svgSrcDir = path.resolve(__dirname, `../dist/svg`);
+const distFile = path.resolve(__dirname, `../dist/icons.js`);
+
+const buildContants = (srcDir, file) => {
+  fs.readdir(srcDir, (err, files) => {
+    const svgs = files.filter((el) => path.extname(el) === '.svg');
+
+    if (svgs.length > 0) {
+      const icons = {};
+      let distContent = 'const icons = ';
+
+      svgs.forEach((svg) => {
+        const iconName = svg.replace('.svg', '');
+        const svgPath = path.join(srcDir, svg);
+        const svgFile = fs.readFileSync(svgPath, 'utf8');
+        const dom = new jsdom.JSDOM(svgFile);
+        const svgContent = dom.window.document.querySelector('svg').innerHTML.replaceAll('\n', '');
+
+        icons[iconName] = svgContent;
+      });
+
+      distContent += JSON.stringify(icons, null, 2);
+      distContent += ';';
+      distContent += `\n\nexport default icons;`;
+
+      fs.writeFileSync(file, distContent);
+    }
+  });
+};
+
+buildContants(svgSrcDir, distFile);

packages/icons/scripts/buildSvg.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+const svgSrcDir = path.resolve(__dirname, `../src/svg`);
+const svgDistDir = path.resolve(__dirname, `../dist/svg`);
+
+const normalizeAndCopySvg = (srcDir, distDir) => {
+  fs.readdir(srcDir, (err, files) => {
+    const svgs = files.filter((el) => path.extname(el) === '.svg');
+    if (svgs.length > 0) {
+      let sprite = '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">\n';
+      const spriteDistFile = path.join(distDir, 'sprite.svg');
+
+      svgs.forEach((svg) => {
+        const svgPath = path.join(srcDir, svg);
+        const svgDistPath = path.join(distDir, svg);
+        const svgContent = fs.readFileSync(svgPath, 'utf8');
+        const svgContentFixed = svgContent.replace(/fill="#\w+"/g, 'fill="currentColor"');
+        const svgSpriteContent = svgContentFixed
+          .replace(/<svg.*(viewBox="(\d+\s){3}\d+").*>/, `<symbol id="${svg.slice(0, -4)}" $1>`)
+          .replace(/<\/svg>/g, '</symbol>');
+        sprite += svgSpriteContent;
+        fs.writeFileSync(path.join(svgDistPath), svgContentFixed);
+      });
+
+      sprite += '</svg>';
+
+      fs.writeFileSync(spriteDistFile, sprite);
+    }
+  });
+};
+
+normalizeAndCopySvg(svgSrcDir, svgDistDir);

packages/icons/scripts/prepareSvgReact.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+const svgDistDir = path.resolve(__dirname, `../dist/svg`);
+const tmpDistDir = path.resolve(__dirname, `../dist/.tmp-svg`);
+
+const toPascalCase = (string) =>
+  string
+    .replace('.svg', '')
+    .replace(/\w+/g, (word) => {
+      return word[0].toUpperCase() + word.slice(1).toLowerCase();
+    })
+    .replace('-', '');
+
+const prepareSvgForReactComponent = (srcDir, distDir) => {
+  fs.readdir(srcDir, (err, files) => {
+    const svgs = files.filter((el) => path.extname(el) === '.svg');
+    if (svgs.length > 0) {
+      svgs.forEach((svg) => {
+        const svgPath = path.join(srcDir, svg);
+        const svgDistPath = path.join(distDir, `${toPascalCase(svg)}Icon.svg`);
+
+        fs.copyFile(svgPath, svgDistPath, () => {});
+      });
+    }
+  });
+};
+
+prepareSvgForReactComponent(svgDistDir, tmpDistDir);