From 8d8c697f3b79ca3a589a28612cb3b928e57d21df Mon Sep 17 00:00:00 2001 From: Arturo Reuschenbach Puncernau Date: Mon, 27 Nov 2023 13:40:56 +0100 Subject: [PATCH] [icons-test] load dynamic of icons --- apps/exampleapp/esbuild.config.js | 18 +++ apps/exampleapp/package.json | 3 +- apps/exampleapp/src/components/AppContent.js | 5 + .../src/components/DynamicLoadIcon.jsx | 108 ++++++++++++++++++ package-lock.json | 10 +- 5 files changed, 139 insertions(+), 5 deletions(-) create mode 100644 apps/exampleapp/src/components/DynamicLoadIcon.jsx diff --git a/apps/exampleapp/esbuild.config.js b/apps/exampleapp/esbuild.config.js index 89494caed..3a81bef22 100644 --- a/apps/exampleapp/esbuild.config.js +++ b/apps/exampleapp/esbuild.config.js @@ -7,6 +7,7 @@ const { transform } = require("@svgr/core") const url = require("postcss-url") // this function generates app props based on package.json and propSecrets.json const appProps = require("../../helpers/appProps") +const path = require("path") if (!/.+\/.+\.js/.test(pkg.module)) throw new Error( @@ -42,6 +43,23 @@ const build = async () => { await fs.rm(outdir, { recursive: true, force: true }) await fs.mkdir(outdir, { recursive: true }) + // copy folder with fs.cpsync the material design icons to build folder + // we need to resolve the node package in node_modules + + const iconsPath = path.resolve( + path.dirname( + require.resolve("@material-design-icons/svg/filled/account_circle.svg") + ), + "../" + ) + + await fs.cp(`${iconsPath}/filled`, `${outdir}/svg/filled`, { + recursive: true, + }) + await fs.cp(`${iconsPath}/outlined`, `${outdir}/svg/outlined`, { + recursive: true, + }) + // build app let ctx = await esbuild.context({ bundle: true, diff --git a/apps/exampleapp/package.json b/apps/exampleapp/package.json index 9f27520ea..653c5fd50 100644 --- a/apps/exampleapp/package.json +++ b/apps/exampleapp/package.json @@ -41,7 +41,8 @@ "url-state-provider": "*", "util": "^0.12.4", "utils": "*", - "zustand": "4.3.7" + "zustand": "4.3.7", + "@material-design-icons/svg": "^0.14.4" }, "scripts": { "test": "jest", diff --git a/apps/exampleapp/src/components/AppContent.js b/apps/exampleapp/src/components/AppContent.js index a988068c7..d2b11140a 100644 --- a/apps/exampleapp/src/components/AppContent.js +++ b/apps/exampleapp/src/components/AppContent.js @@ -22,6 +22,7 @@ import ModalManager from "./ModalManager" import PanelManager from "./PanelManager" import Peaks from "./peaks/Peaks" import WelcomeView from "./WelcomeView" +import DynamicLoadIcon from "./DynamicLoadIcon" const AppContent = (props) => { const { setTabIndex, setCurrentModal } = useGlobalsActions() @@ -57,6 +58,7 @@ const AppContent = (props) => { Peaks Tab Two + Tab Three @@ -93,6 +95,9 @@ const AppContent = (props) => { + + + diff --git a/apps/exampleapp/src/components/DynamicLoadIcon.jsx b/apps/exampleapp/src/components/DynamicLoadIcon.jsx new file mode 100644 index 000000000..69ae1eebd --- /dev/null +++ b/apps/exampleapp/src/components/DynamicLoadIcon.jsx @@ -0,0 +1,108 @@ +import React, { useEffect, useRef, useState } from "react" +import { + Breadcrumb, + BreadcrumbItem, + Container, + Button, + MainTabs, + Tab, + TabList, + TabPanel, + Select, + SelectOption, + FormRow, + TextInput, +} from "juno-ui-components" + +// from camelcase to underscore +// https://stackoverflow.com/questions/4149276/javascript-camelcase-to-regular-form +const camelToSnake = (str) => + str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`) + +const MaterialIcon = ({ name, width, height }) => { + const ref = useRef() + + useEffect(() => { + if (!ref.current) return + + fetch(new URL(`./svg/filled/${name}.svg`, import.meta.url)) + .then((r) => { + return r.text() + }) + .then((text) => { + ref.current.innerHTML = text + ref.current.children[0].setAttribute("width", width) + ref.current.children[0].setAttribute("height", height) + ref.current.replaceWith(ref.current.children[0]) + }) + }, [ref.current, name, height, width]) + + return
+} + +const DynamicLoadIcon = () => { + const [iconComponent, setIconComponent] = useState(null) + const [iconAttributes, setIconAttributes] = useState({ + name: "account_circle", + width: 24, + height: 24, + alt: "", + title: "", + }) + const [svg, setSvg] = useState(null) + + return ( + <> + + + { + setIconAttributes({ ...iconAttributes, name: event.target.value }) + }} + /> + + + { + setIconAttributes({ + ...iconAttributes, + height: event.target.value, + }) + }} + /> + + + { + setIconAttributes({ + ...iconAttributes, + width: event.target.value, + }) + }} + /> + + + + + + + + + {/* {iconComponent && iconComponent} */} + + + ) +} + +export default DynamicLoadIcon diff --git a/package-lock.json b/package-lock.json index 8035e21a7..c3392a814 100644 --- a/package-lock.json +++ b/package-lock.json @@ -235,6 +235,7 @@ "@babel/core": "^7.20.2", "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", + "@material-design-icons/svg": "^0.14.4", "@svgr/core": "^7.0.0", "@svgr/plugin-jsx": "^7.0.0", "@tanstack/react-query": "4.28.0", @@ -293,7 +294,7 @@ } }, "apps/greenhouse": { - "version": "0.1.5", + "version": "0.1.8", "license": "MIT", "devDependencies": { "@babel/core": "^7.20.2", @@ -1583,7 +1584,7 @@ } }, "libs/juno-ui-components": { - "version": "2.6.8", + "version": "2.6.9", "license": "Apache-2.0", "devDependencies": { "@babel/plugin-transform-parameters": "^7.22.5", @@ -1792,7 +1793,7 @@ } }, "libs/url-state-router": { - "version": "1.0.1", + "version": "1.0.3", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.20.2", @@ -1819,6 +1820,7 @@ "url-state-provider": "*" }, "peerDependencies": { + "prop-types": "^15.8.1", "react": "18.2.0", "react-dom": "^18.2.0", "url-state-provider": "*" @@ -1981,7 +1983,7 @@ } }, "libs/utils": { - "version": "1.0.6", + "version": "1.1.2", "license": "Apache-2.0", "devDependencies": { "@babel/preset-env": "^7.20.2",