add generating icon svg name, if it dont exist

alfa-laboratory · Nov 16, 2020 · 3b5b792 · 3b5b792
1 parent 2d9bcaa
commit 3b5b792
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -9,6 +9,8 @@
         "clean": "rimraf dist"
     },
     "devDependencies": {
+        "@types/camelcase": "^5.2.0",
+        "@types/decamelize": "^3.0.3",
         "@types/react": "^16.9.35",
         "@types/react-dom": "^16.9.8",
         "arui-presets-lint": "^4.2.0",
@@ -47,7 +49,9 @@
         "@alfalab/icons": "^1.79.0",
         "@types/react-highlight": "^0.12.2",
         "@types/react-modal": "^3.10.6",
+        "camelcase": "^6.2.0",
         "classnames": "^2.2.6",
+        "decamelize": "^4.0.0",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-highlight": "^0.12.0",

diff --git a/src/components/IconList.tsx b/src/components/IconList.tsx
@@ -3,6 +3,7 @@ import { useVirtual } from 'react-virtual';
 import json from '@alfalab/icons/search.json';
 import Modal, { Styles } from 'react-modal';
 import Highlight from 'react-highlight';
+import decamelize from 'decamelize';
 import { CopyLineMIcon, CheckmarkHeavyMIcon } from '@alfalab/icons/glyph/dist';
 
 import 'highlight.js/styles/tomorrow-night.css';
@@ -44,6 +45,14 @@ const modalStyles: Styles = {
     },
 };
 
+const PACKAGE_ALIAS: { [key: string]: string } = {
+    classic: 'icon',
+};
+
+export const getPackageName = (iconPrefix: string) => PACKAGE_ALIAS[iconPrefix] || iconPrefix;
+
+const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
+
 export const IconList: FC<IconListProps> = ({ icons, value, packages }) => {
     // @ts-ignore
     const result: SearchResult = {};
@@ -83,7 +92,36 @@ export const IconList: FC<IconListProps> = ({ icons, value, packages }) => {
                 const searchValue = value.toLowerCase();
                 const iconName = Icon.toLowerCase();
                 // @ts-ignore
-                const iconInfo = json[packageName] && json[packageName][Icon];
+                let iconInfo = json[packageName] && json[packageName][Icon];
+
+                if (!iconInfo) {
+                    console.log('no icon info')
+                    const arr = decamelize(Icon.replace(/Icon$/, '')).split('_');
+
+                    let lastElem = arr[arr.length - 1];
+
+                    let color = '';
+                    let name = '';
+                    let size = '';
+
+                    if (sizes.includes(lastElem)) {
+                        size = lastElem;
+                        name = arr.slice(0, arr.length - 1).join('-');
+                    } else {
+                        color = lastElem;
+                        size = arr[arr.length - 2];
+                        name = arr.slice(0, arr.length - 2).join('-');
+                    }
+
+                    const svgIconName = `${getPackageName(packageName)}_${name}_${size}${
+                        color ? `_${color}` : ''
+                    }`;
+
+                    iconInfo = { svgIconName };
+
+                    // @ts-ignore
+                    json[packageName][Icon] = iconInfo;
+                }
 
                 const iconDescription =
                     iconInfo && iconInfo.figmaDescription

diff --git a/yarn.lock b/yarn.lock
@@ -1031,11 +1031,25 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/camelcase@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@types/camelcase/-/camelcase-5.2.0.tgz#5c139f8618a126827129587cce9ee904f9a79863"
+  integrity sha512-zhHaryYYUUsJ1h6Rq4hisPkljY7c2bkC5PFYQbom5fyKloGJEDK+wdsw2L4hnBwXr4plGjW6D/UVJBbNbOzVpQ==
+  dependencies:
+    camelcase "*"
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/decamelize@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/decamelize/-/decamelize-3.0.3.tgz#1731fead0b603b73ca9ba6e2d576387bc46e1b99"
+  integrity sha512-/3tNtOiXzhfd29p1mzvimDrxE4Wpw2GYFtpC7WRyk+wwa3T920nlU9pW5517up2rUFhr8OXi0ZlbkVeypgGLQA==
+  dependencies:
+    decamelize "*"
+
 "@types/[email protected]":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -1998,6 +2012,11 @@ camelcase-keys@^6.2.2:
     map-obj "^4.0.0"
     quick-lru "^4.0.1"
 
+camelcase@*, camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -2687,6 +2706,11 @@ decamelize-keys@^1.0.0, decamelize-keys@^1.1.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
+decamelize@*, decamelize@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
+  integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
+
 decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"