example modal js package fix (#92)

Pictogrammers · Sep 15, 2023 · 8f208e2 · 8f208e2
2 parents 764c31a + 723125f
commit 8f208e2
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -79,6 +79,7 @@ module.exports = {
         gridSize: 24,
         id: 'mdi',
         image: 'images/libraries/mdi.svg',
+        jsPackage: '@mdi/js',
         name: 'Material Design Icons',
         package: '@mdi/svg',
         packageId: '38EF63D0-4744-11E4-B3CF-842B2B6CFE1B',
@@ -93,6 +94,7 @@ module.exports = {
         gridSize: 24,
         id: 'mdil',
         image: 'images/libraries/mdil.svg',
+        jsPackage: '@mdi/light-js',
         name: 'Material Design Icons Light',
         package: '@mdi/light-svg',
         packageId: '531A9B44-1962-11E5-89CC-842B2B6CFE1B',
@@ -106,6 +108,7 @@ module.exports = {
         gridSize: 22,
         id: 'memory',
         image: 'images/libraries/memory.svg',
+        jsPackage: '@pictogrammers/memory',
         name: 'Memory Icons',
         package: '@pictogrammers/memory-svg',
         packageId: '2764ae46-20c1-11ed-8ca4-1209440c2141',

diff --git 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;