From da80909f28644b8e86fbac5eb7b47e787fc800dc Mon Sep 17 00:00:00 2001
From: Austin Andrews <admin@templarian.com>
Date: Fri, 15 Sep 2023 00:23:57 -0500
Subject: [PATCH 1/3] example modal js package fix

---
 .../components/IconUsageExamples/ExampleHomeAssistant.tsx  | 2 ++
 client/components/IconUsageExamples/ExampleReact.tsx       | 7 +++++--
 client/components/IconUsageExamples/ExampleVue.tsx         | 6 ++++--
 client/components/IconUsageExamples/ExampleWebfont.tsx     | 2 ++
 client/components/IconUsageExamples/IconUsageExamples.tsx  | 5 ++++-
 client/components/IconView/IconView.tsx                    | 1 +
 client/config.js                                           | 3 +++
 client/interfaces/icons.ts                                 | 1 +
 8 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/client/components/IconUsageExamples/ExampleHomeAssistant.tsx b/client/components/IconUsageExamples/ExampleHomeAssistant.tsx
index 9a6d790..75c4d51 100644
--- a/client/components/IconUsageExamples/ExampleHomeAssistant.tsx
+++ b/client/components/IconUsageExamples/ExampleHomeAssistant.tsx
@@ -8,9 +8,11 @@ import Link from '@/components/Link/Link';
 import Code from '@/components/CodeHighlighter/CodeHighlighter';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 interface ExampleHomeAssistantProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }
diff --git a/client/components/IconUsageExamples/ExampleReact.tsx b/client/components/IconUsageExamples/ExampleReact.tsx
index f27a24f..1db03e9 100644
--- a/client/components/IconUsageExamples/ExampleReact.tsx
+++ b/client/components/IconUsageExamples/ExampleReact.tsx
@@ -11,13 +11,16 @@ import kebabToPascal from '@/utils/helpers/kebabToPascal';
 
 import classes from './IconUsageExamples.module.scss';
 
+import { IconLibrary } from '@/interfaces/icons';
+
 interface ExampleReactProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }
 
-const ExampleReact: FunctionComponent<ExampleReactProps> = ({ iconName, library, visible }) => {
+const ExampleReact: FunctionComponent<ExampleReactProps> = ({ iconName, library, libraryInfo, visible }) => {
   const jsName = `${library}${kebabToPascal(iconName)}`;
 
   return (
@@ -30,7 +33,7 @@ const ExampleReact: FunctionComponent<ExampleReactProps> = ({ iconName, library,
     >
       <Code className={cx('language-jsx', classes.code)} displayAsBlock>{
 `import Icon from '@mdi/react';
-import { ${jsName} } from '@${library}/js';
+import { ${jsName} } from '@${libraryInfo.jsPackage}';
 
 <Icon path={${jsName}} size={1} />`
       }</Code>
diff --git a/client/components/IconUsageExamples/ExampleVue.tsx b/client/components/IconUsageExamples/ExampleVue.tsx
index 089909a..d65d86d 100644
--- a/client/components/IconUsageExamples/ExampleVue.tsx
+++ b/client/components/IconUsageExamples/ExampleVue.tsx
@@ -10,14 +10,16 @@ import Code from '@/components/CodeHighlighter/CodeHighlighter';
 import kebabToPascal from '@/utils/helpers/kebabToPascal';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 interface ExampleVueProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }
 
-const ExampleVue: FunctionComponent<ExampleVueProps> = ({ iconName, library, visible }) => {
+const ExampleVue: FunctionComponent<ExampleVueProps> = ({ iconName, library, libraryInfo, visible }) => {
   const jsName = `${library}${kebabToPascal(iconName)}`;
 
   return (
@@ -35,7 +37,7 @@ const ExampleVue: FunctionComponent<ExampleVueProps> = ({ iconName, library, vis
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { ${jsName} } from '@${library}/js';
+import { ${jsName} } from '@${libraryInfo.jsPackage}';
 
 export default {
   name: "my-component",
diff --git a/client/components/IconUsageExamples/ExampleWebfont.tsx b/client/components/IconUsageExamples/ExampleWebfont.tsx
index 3f7d4c2..e78544e 100644
--- a/client/components/IconUsageExamples/ExampleWebfont.tsx
+++ b/client/components/IconUsageExamples/ExampleWebfont.tsx
@@ -9,9 +9,11 @@ import Link from '@/components/Link/Link';
 import Code from '@/components/CodeHighlighter/CodeHighlighter';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 interface ExampleWebfontProps {
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
   visible: boolean;
 }
diff --git a/client/components/IconUsageExamples/IconUsageExamples.tsx b/client/components/IconUsageExamples/IconUsageExamples.tsx
index a743f53..a56722b 100644
--- a/client/components/IconUsageExamples/IconUsageExamples.tsx
+++ b/client/components/IconUsageExamples/IconUsageExamples.tsx
@@ -8,6 +8,7 @@ import ExampleWebfont from './ExampleWebfont';
 import ExampleHomeAssistant from './ExampleHomeAssistant';
 
 import classes from './IconUsageExamples.module.scss';
+import { IconLibrary } from '@/interfaces/icons';
 
 const exampleTypesDef = {
   'home-assistant': {
@@ -31,10 +32,11 @@ const exampleTypesDef = {
 interface IconUsageExamplesProps {
   exampleTypes: string[];
   library: string;
+  libraryInfo: IconLibrary;
   iconName: string;
 }
 
-const IconUsageExamples: FunctionComponent<IconUsageExamplesProps> = ({ exampleTypes = [], iconName, library }) => {
+const IconUsageExamples: FunctionComponent<IconUsageExamplesProps> = ({ exampleTypes = [], iconName, library, libraryInfo }) => {
   const [ activeExample, setActiveExample ] = useState(0);
 
   if (!exampleTypes.length) {
@@ -68,6 +70,7 @@ const IconUsageExamples: FunctionComponent<IconUsageExamplesProps> = ({ exampleT
           <ExampleComponent
             key={`panel-${type}`}
             library={library}
+            libraryInfo={libraryInfo}
             iconName={iconName}
             visible={activeExample === i}
           />
diff --git a/client/components/IconView/IconView.tsx b/client/components/IconView/IconView.tsx
index 598174b..3ec5aae 100644
--- a/client/components/IconView/IconView.tsx
+++ b/client/components/IconView/IconView.tsx
@@ -243,6 +243,7 @@ const IconView: FunctionComponent<IconViewProps> = ({ closeOnMoreInfo, icon, lib
                 <IconUsageExamples
                   exampleTypes={exampleTypes}
                   library={libraryInfo.id}
+                  libraryInfo={libraryInfo}
                   iconName={icon.n}
                 />
               </div>
diff --git a/client/config.js b/client/config.js
index eaa36d2..7bb379f 100644
--- a/client/config.js
+++ b/client/config.js
@@ -81,6 +81,7 @@ module.exports = {
         image: 'images/libraries/mdi.svg',
         name: 'Material Design Icons',
         package: '@mdi/svg',
+        jsPackage: '@mdi/js',
         packageId: '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B',
         shortName: 'MDI',
         version: getLibraryVersion('@mdi/svg')
@@ -95,6 +96,7 @@ module.exports = {
         image: 'images/libraries/mdil.svg',
         name: 'Material Design Icons Light',
         package: '@mdi/light-svg',
+        jsPackage: '@mdi/light-js',
         packageId: '531A9B44-1962-11E5-89CC-842B2B6CFE1B',
         shortName: 'MDI Light',
         version: getLibraryVersion('@mdi/light-svg')
@@ -108,6 +110,7 @@ module.exports = {
         image: 'images/libraries/memory.svg',
         name: 'Memory Icons',
         package: '@pictogrammers/memory-svg',
+        jsPackage: '@pictogrammers/memory',
         packageId: '2764ae46-20c1-11ed-8ca4-1209440c2141',
         shortName: 'Memory',
         version: getLibraryVersion('@pictogrammers/memory-svg')
diff --git a/client/interfaces/icons.ts b/client/interfaces/icons.ts
index 2a5058d..ea23954 100644
--- a/client/interfaces/icons.ts
+++ b/client/interfaces/icons.ts
@@ -16,6 +16,7 @@ export interface IconLibrary {
   image: string;
   name: string;
   package: string;
+  jsPackage: string;
   packageId: string;
   shortName: string;
   unreleased?: boolean;

From e4fcfdda3dc3c867c0f9c690b6fc993be75a68aa Mon Sep 17 00:00:00 2001
From: Austin Andrews <admin@templarian.com>
Date: Fri, 15 Sep 2023 00:30:10 -0500
Subject: [PATCH 2/3] fix lint

---
 client/config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/config.js b/client/config.js
index 7bb379f..77a4d44 100644
--- a/client/config.js
+++ b/client/config.js
@@ -80,8 +80,8 @@ module.exports = {
         id: 'mdi',
         image: 'images/libraries/mdi.svg',
         name: 'Material Design Icons',
-        package: '@mdi/svg',
         jsPackage: '@mdi/js',
+        package: '@mdi/svg',
         packageId: '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B',
         shortName: 'MDI',
         version: getLibraryVersion('@mdi/svg')
@@ -95,8 +95,8 @@ module.exports = {
         id: 'mdil',
         image: 'images/libraries/mdil.svg',
         name: 'Material Design Icons Light',
-        package: '@mdi/light-svg',
         jsPackage: '@mdi/light-js',
+        package: '@mdi/light-svg',
         packageId: '531A9B44-1962-11E5-89CC-842B2B6CFE1B',
         shortName: 'MDI Light',
         version: getLibraryVersion('@mdi/light-svg')
@@ -109,8 +109,8 @@ module.exports = {
         id: 'memory',
         image: 'images/libraries/memory.svg',
         name: 'Memory Icons',
-        package: '@pictogrammers/memory-svg',
         jsPackage: '@pictogrammers/memory',
+        package: '@pictogrammers/memory-svg',
         packageId: '2764ae46-20c1-11ed-8ca4-1209440c2141',
         shortName: 'Memory',
         version: getLibraryVersion('@pictogrammers/memory-svg')

From 723125f712c27c8c8e6eea881067bb6e2ec01f85 Mon Sep 17 00:00:00 2001
From: Austin Andrews <admin@templarian.com>
Date: Fri, 15 Sep 2023 00:33:39 -0500
Subject: [PATCH 3/3] fix lint

---
 client/config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/config.js b/client/config.js
index 77a4d44..c5e82ab 100644
--- a/client/config.js
+++ b/client/config.js
@@ -79,8 +79,8 @@ module.exports = {
         gridSize: 24,
         id: 'mdi',
         image: 'images/libraries/mdi.svg',
-        name: 'Material Design Icons',
         jsPackage: '@mdi/js',
+        name: 'Material Design Icons',
         package: '@mdi/svg',
         packageId: '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B',
         shortName: 'MDI',
@@ -94,8 +94,8 @@ module.exports = {
         gridSize: 24,
         id: 'mdil',
         image: 'images/libraries/mdil.svg',
-        name: 'Material Design Icons Light',
         jsPackage: '@mdi/light-js',
+        name: 'Material Design Icons Light',
         package: '@mdi/light-svg',
         packageId: '531A9B44-1962-11E5-89CC-842B2B6CFE1B',
         shortName: 'MDI Light',
@@ -108,8 +108,8 @@ module.exports = {
         gridSize: 22,
         id: 'memory',
         image: 'images/libraries/memory.svg',
-        name: 'Memory Icons',
         jsPackage: '@pictogrammers/memory',
+        name: 'Memory Icons',
         package: '@pictogrammers/memory-svg',
         packageId: '2764ae46-20c1-11ed-8ca4-1209440c2141',
         shortName: 'Memory',