Fixed build specific bugs

analyticsrc.json

@@ -1,4 +1,5 @@
 {
-	"apiKey": "lkdjlkfsd<:)(*Jk9klj",
-	"trackEvents": ["click"]
-}
+  "apiKey": "lkdjlkfsd<:)(*Jk9klj",
+  "trackEvents": ["click"],
+  "hostProjectName": "@armco/armory-react-components"
+}

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.21",
       "license": "ISC",
       "dependencies": {
-        "@armco/analytics": "^0.0.11",
+        "@armco/analytics": "^0.2.2",
         "@armco/armory-react-components": "^0.0.20",
         "@popperjs/core": "^2.11.8",
         "@reduxjs/toolkit": "^1.8.1",
@@ -89,9 +89,9 @@
       }
     },
     "node_modules/@armco/analytics": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@armco/analytics/-/analytics-0.0.11.tgz",
-      "integrity": "sha512-cAVBzFKoPUt8Dt6p/FtTUwA9d9m7YPAQjF3CB5VQ+Umy8mr1+9X/2d+a04SZJ6KA25qqldmIplc1bNSWANDGfA==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@armco/analytics/-/analytics-0.2.2.tgz",
+      "integrity": "sha512-dnzL1TQVx35RoCJGf5LKH1Rf/VqGmQTsoZY0niicdzXhPQk/qA2V8X/q0iIJMZgwQ3CO35437zxKx/QWV3xaVQ==",
       "dependencies": {
         "jet-logger": "^1.3.1",
         "jquery": "^3.7.0",
@@ -22022,9 +22022,9 @@
       }
     },
     "@armco/analytics": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@armco/analytics/-/analytics-0.0.11.tgz",
-      "integrity": "sha512-cAVBzFKoPUt8Dt6p/FtTUwA9d9m7YPAQjF3CB5VQ+Umy8mr1+9X/2d+a04SZJ6KA25qqldmIplc1bNSWANDGfA==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@armco/analytics/-/analytics-0.2.2.tgz",
+      "integrity": "sha512-dnzL1TQVx35RoCJGf5LKH1Rf/VqGmQTsoZY0niicdzXhPQk/qA2V8X/q0iIJMZgwQ3CO35437zxKx/QWV3xaVQ==",
       "requires": {
         "jet-logger": "^1.3.1",
         "jquery": "^3.7.0",

package.json

@@ -28,7 +28,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@armco/analytics": "^0.0.11",
+    "@armco/analytics": "^0.2.2",
     "@armco/armory-react-components": "^0.0.20",
     "@popperjs/core": "^2.11.8",
     "@reduxjs/toolkit": "^1.8.1",

src/app/Router.tsx

@@ -7,7 +7,7 @@ import { Alert } from "./components"
 import Helper from "./utils/helper"
 import ROUTES from "./routes"
 
-Helper.populateComponentsInRoutes(ROUTES, "../pages/")
+Helper.populatePagesInRoutes(ROUTES)
 
 interface RouterProps {}
 

src/app/components/Editor/Editor.tsx

@@ -12,11 +12,11 @@ interface FrameContentDefinition {
   component: JSX.ElementType
   props?: {
     [key: string]:
-    | string
-    | number
-    | boolean
-    | { [key: string]: any }
-    | undefined
+      | string
+      | number
+      | boolean
+      | { [key: string]: any }
+      | undefined
   }
   data: { [key: string]: any }
   hierarchy: string
@@ -35,8 +35,9 @@ const FrameContent = (
   const SelectedComponent = component
   return SelectedComponent ? (
     <div
-      className={`ar-Editor__frame__main h-100 w-100 flex-center${background ? " background" : ""
-        }`}
+      className={`ar-Editor__frame__main h-100 w-100 flex-center${
+        background ? " background" : ""
+      }`}
       style={{
         // @ts-ignore
         backgroundImage: background ? `url(${images[background]})` : "",
@@ -112,11 +113,11 @@ const Editor = (): JSX.Element | string => {
           !selectedComponentDefinition ||
           selectedComponentDefinition.componentName !== componentName ||
           JSON.stringify(selectedComponentDefinition.props) !==
-          JSON.stringify(props)
+            JSON.stringify(props)
         ) {
           const SelectedComponent = Helper.importComponent(
             componentName,
-            `../components/${hierarchy}/`,
+            hierarchy?.toLowerCase(),
           )
           setSelectedComponentDefinition({
             componentName,
@@ -132,7 +133,11 @@ const Editor = (): JSX.Element | string => {
   }, [location])
 
   useEffect(() => {
-    if (contentRef && selectedComponentDefinition) {
+    if (
+      contentRef &&
+      selectedComponentDefinition &&
+      process.env.NODE_ENV !== "production"
+    ) {
       Helper.injectComponentStyleInFrame(
         selectedComponentDefinition.data as ComponentDescription,
         selectedComponentDefinition.hierarchy,
@@ -147,7 +152,10 @@ const Editor = (): JSX.Element | string => {
         contentRef?.contentWindow?.document.getElementsByTagName("link")
       if (!bsLink || bsLink.length === 0) {
         if (process.env.NODE_ENV === "production") {
-          Helper.injectLinkInFrame("/assets/index-40c9bed9.css", contentRef)
+          Helper.injectLinkInFrame(
+            ["index", "ComponentsViewerPage"],
+            contentRef,
+          )
         } else {
           Helper.injectBootstrapInFrame(contentRef)
           Helper.injectVariablesInFrame(contentRef)

src/app/types/route.d.ts

@@ -3,4 +3,5 @@ interface RouteConfig {
   class: string
   element: string | JSX.Element | any
   children?: Array<RouteConfig>
+  hierarchy?: string
 }

src/app/utils/helper.tsx

@@ -1,19 +1,38 @@
 import { lazy } from "react"
 
 class Helper {
-  static populateComponentsInRoutes(routes: RouteConfig[], path: string) {
+  static populatePagesInRoutes(routes: RouteConfig[]) {
     routes &&
       routes.forEach((route) => {
         if (typeof route.element === "string") {
           const elementName = route.element
           const Component: JSX.ElementType = lazy(() =>
-            import(`${path}${elementName}`).catch(
+            import(`../pages/${elementName}/${elementName}.tsx`).catch(
               () => import(`../components/molecules/Component_404`),
             ),
           )
           route.element = <Component />
           if (route.children) {
-            Helper.populateComponentsInRoutes(route.children, path)
+            Helper.populateComponentsInRoutes(route.children)
+          }
+        }
+      })
+  }
+
+  static populateComponentsInRoutes(routes: RouteConfig[]) {
+    routes &&
+      routes.forEach((route) => {
+        const hierarchy = route.hierarchy
+        if (typeof route.element === "string") {
+          const elementName = route.element
+          const Component: JSX.ElementType = lazy(() =>
+            import(
+              `../components/${hierarchy}/${elementName}/${elementName}.tsx`
+            ).catch(() => import(`../components/molecules/Component_404`)),
+          )
+          route.element = <Component />
+          if (route.children) {
+            Helper.populateComponentsInRoutes(route.children)
           }
         }
       })
@@ -190,9 +209,9 @@ class Helper {
     return searchList
   }
 
-  static importComponent(name: string, path: string) {
+  static importComponent(name: string, hierarchy: string) {
     return lazy(() =>
-      import(`${path}${name}`).catch(
+      import(`../components/${hierarchy}/${name}/${name}.tsx`).catch(
         () => import(`../components/molecules/Component_404`),
       ),
     )
@@ -296,12 +315,28 @@ class Helper {
     frame?.contentWindow?.document?.head.appendChild(style)
   }
 
-  static injectLinkInFrame(link: string, frame: HTMLIFrameElement | null) {
-    const cssLink = document.createElement("link")
-    cssLink.href = link
-    cssLink.rel = "stylesheet"
-    cssLink.type = "text/css"
-    frame?.contentWindow?.document?.head.appendChild(cssLink)
+  static injectLinkInFrame(
+    link: string | Array<string>,
+    frame: HTMLIFrameElement | null,
+  ) {
+    if (Array.isArray(link)) {
+      const links = document.querySelectorAll("link[rel='stylesheet']")
+      link.forEach((item: string) => {
+        Array.from(links).forEach((selectedLink) => {
+          const cssUrl = selectedLink.getAttribute("href")
+          if (cssUrl && cssUrl.startsWith(`/assets/${item}`)) {
+            const clone = selectedLink.cloneNode(true)
+            frame?.contentWindow?.document?.head.appendChild(clone)
+          }
+        })
+      })
+    } else {
+      const cssLink = document.createElement("link")
+      cssLink.href = link
+      cssLink.rel = "stylesheet"
+      cssLink.type = "text/css"
+      frame?.contentWindow?.document?.head.appendChild(cssLink)
+    }
   }
 }
 

src/index.tsx

@@ -5,10 +5,12 @@ import { Provider } from "react-redux"
 import { store } from "./app/store"
 import Router from "./app/Router"
 import { ErrorBoundary } from "./app/components"
-import "@armco/analytics"
+import { init } from "@armco/analytics"
+import CONFIG from "../analyticsrc.json"
 import "./app/static/styles/_global.scss"
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
+init && init(CONFIG)
 
 root.render(
   <React.StrictMode>

vite.config.ts

@@ -7,13 +7,13 @@ import { visualizer } from "rollup-plugin-visualizer"
 export default defineConfig({
   plugins: [
     react(),
-    visualizer({
-      template: "treemap", // or sunburst
-      open: true,
-      gzipSize: true,
-      brotliSize: true,
-      filename: "analyse.html", // will be saved in project's root
-    }),
+    // visualizer({
+    //   template: "treemap", // or sunburst
+    //   open: true,
+    //   gzipSize: true,
+    //   brotliSize: true,
+    //   filename: "analyse.html", // will be saved in project's root
+    // }),
   ],
   server: {
     open: true,