diff --git a/analyticsrc.json b/analyticsrc.json index fe00cae..39ab0e5 100644 --- a/analyticsrc.json +++ b/analyticsrc.json @@ -1,4 +1,5 @@ { - "apiKey": "lkdjlkfsd<:)(*Jk9klj", - "trackEvents": ["click"] -} \ No newline at end of file + "apiKey": "lkdjlkfsd<:)(*Jk9klj", + "trackEvents": ["click"], + "hostProjectName": "@armco/armory-react-components" +} diff --git a/package-lock.json b/package-lock.json index 880bef6..1b837ad 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 160b306..846b72a 100644 --- a/package.json +++ b/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", diff --git a/src/app/Router.tsx b/src/app/Router.tsx index 21cb8e4..330fabc 100644 --- a/src/app/Router.tsx +++ b/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 {} diff --git a/src/app/components/Editor/Editor.tsx b/src/app/components/Editor/Editor.tsx index a755e90..55d0cc5 100755 --- a/src/app/components/Editor/Editor.tsx +++ b/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 ? (
{ !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) diff --git a/src/app/types/route.d.ts b/src/app/types/route.d.ts index eaac2a7..0bb3aef 100644 --- a/src/app/types/route.d.ts +++ b/src/app/types/route.d.ts @@ -3,4 +3,5 @@ interface RouteConfig { class: string element: string | JSX.Element | any children?: Array + hierarchy?: string } diff --git a/src/app/utils/helper.tsx b/src/app/utils/helper.tsx index 8bb6faa..67d5146 100644 --- a/src/app/utils/helper.tsx +++ b/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 = 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 = + 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, + 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) + } } } diff --git a/src/index.tsx b/src/index.tsx index b6da607..3621485 100644 --- a/src/index.tsx +++ b/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( diff --git a/vite.config.ts b/vite.config.ts index 4d19c3a..b522027 100644 --- a/vite.config.ts +++ b/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,