WIP: IconByName Refactor POC

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.0",
+  "version": "independant",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/common-lib/src/components/IconByName.js

@@ -47,7 +47,7 @@ import EmotionSadLineIcon from 'remixicon-react/EmotionSadLineIcon'
 import EmotionNormalLineIcon from 'remixicon-react/EmotionNormalLineIcon'
 import RefreshLineIcon from 'remixicon-react/RefreshLineIcon'
 import UserStarLineIcon from 'remixicon-react/UserStarLineIcon'
-import BookMarkLineIcon from 'remixicon-react/BookMarkLineIcon'
+import BookMarkLineIcon from 'remixicon-react/BookmarkLineIcon'
 import SearchEyeLineIcon from 'remixicon-react/SearchEyeLineIcon'
 import StarLineIcon from 'remixicon-react/StarLineIcon'
 import SpyLineIcon from 'remixicon-react/SpyLineIcon'

packages/common-lib/src/components/IconByNameCopy.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { IconButton as IconButtonCustom, Stack } from 'native-base'
+
+function IconButton({ icon, isDisabled, prefix, ...props }) {
+  if (!isDisabled) {
+    return <IconButtonCustom {...props} icon={icon} />
+  } else {
+    return <Stack {...props}>{icon}</Stack>
+  }
+}
+
+const loadComponent = (name) => {
+  const Component = React.lazy(() => import(`remixicon-react/${name}`))
+  return Component
+}
+
+export default function IconByNameCopy({ _icon, ...props }) {
+  const Icon = loadComponent(componentNumber)
+  return <IconButton {...props} icon={<Icon {...(_icon ? _icon : {})} />} />
+}

packages/common-lib/src/index.tsx

@@ -14,6 +14,7 @@ import Header from './components/layout/Header'
 import Footer from './components/layout/Footer'
 import Layout from './components/layout/Layout'
 import IconByName from './components/IconByName'
+import IconByNameCopy from './components/IconByNameCopy'
 import Widget from './components/Widget'
 import Collapsible from './components/Collapsible'
 import Menu, { SubMenu } from './components/Menu'
@@ -44,6 +45,7 @@ export {
   Footer,
   Layout,
   IconByName,
+  IconByNameCopy,
   FilterButton,
   Widget,
   Collapsible,

packages/profile/src/pages/Profile.js

@@ -16,6 +16,7 @@ import {
   calendar,
   capture,
   IconByName,
+  IconByNameCopy,
   Layout,
   Menu,
   telemetryFactory,
@@ -138,8 +139,8 @@ export default function Profile({ footerLinks, appName }) {
                   </Text>
                 </VStack>
                 <HStack>
-                  <IconByName color="white" name="CameraLineIcon" />
-                  <IconByName color="white" name="ShareLineIcon" />
+                  <IconByNameCopy color="white" name="CameraLineIcon" />
+                  <IconByNameCopy color="white" name="ShareLineIcon" />
                 </HStack>
               </HStack>
             </Box>

yarn.lock

@@ -7381,6 +7381,11 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^3.7.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.8.0.tgz#c6c14c457b9dc3ce7f1514a59e9b262afd6f1a94"
+  integrity sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg==
+
 check-types@^11.1.1:
   version "11.1.2"
   resolved "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz"
@@ -16395,6 +16400,11 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-chartjs-2@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d"
+  integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==
+
 react-colorful@^5.1.2:
   version "5.5.1"
   resolved "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz"