Merge pull request #1376 from finos/showcase-theme-loading

fix dynamic theme loading in showcase
finos · Jun 5, 2024 · 5ef2edf · 5ef2edf
2 parents b1a0a7a + f97e511
commit 5ef2edf
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 54 deletions.
diff --git a/vuu-ui/package-lock.json b/vuu-ui/package-lock.json
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -13,8 +13,7 @@
     "sample-apps/**",
     "showcase",
     "tools/esbuild-plugin-inline-css",
-    "tools/vuu-showcase",
-    "themes/**"
+    "tools/vuu-showcase"
   ],
   "scripts": {
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
@@ -89,7 +88,7 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "happy-dom": "^12.10.3",
-    "open": "10.0.0",
+    "open": "^10.0.0",
     "prettier": "2.8.4",
     "rollup": "^4.14.1",
     "rollup-plugin-esbuild": "^6.1.1",

diff --git a/vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx b/vuu-ui/packages/vuu-data-react/src/hooks/useVuuMenuActions.tsx
@@ -4,8 +4,6 @@ import {
   DataSourceVisualLinkCreatedMessage,
   MenuActionHandler,
   MenuBuilder,
-  MenuRpcResponse,
-  RpcResponse,
   RpcResponseHandler,
 } from "@finos/vuu-data-types";
 import { useDialogContext, type MenuActionClosePopup } from "@finos/vuu-popups";

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/useLayoutManager.tsx
@@ -183,10 +183,15 @@ export const LayoutManagementProvider = ({
 
   const saveLayout = useCallback(
     (metadata: LayoutMetadataDto) => {
-      const layoutToSave = resolveJSONPath(
-        applicationJSONRef.current.layout,
-        "#main-tabs.ACTIVE_CHILD"
-      );
+      let layoutToSave: LayoutJSON | undefined;
+      try {
+        layoutToSave = resolveJSONPath(
+          applicationJSONRef.current.layout,
+          "#main-tabs.ACTIVE_CHILD"
+        );
+      } catch (e) {
+        // ignore, code below will handle
+      }
 
       if (layoutToSave && isLayoutJSON(layoutToSave)) {
         persistenceManager

diff --git a/...ce-management/PersistenceManager.test.tsx → ...ent/PersistenceManager.deprecatedTest.tsx b/...ce-management/PersistenceManager.test.tsx → ...ent/PersistenceManager.deprecatedTest.tsx
@@ -168,7 +168,7 @@ describe("LayoutManagementProvider", () => {
       );
     });
 
-    it("doesn't call createLayout, triggers error notification and logs error when layout path can't be resolved ", () => {
+    it.only("doesn't call createLayout, triggers error notification and logs error when layout path can't be resolved ", () => {
       const { result } = renderHook(() => useLayoutManager(), { wrapper });
       const notify = useNotifications();
 

diff --git a/vuu-ui/showcase/index.html b/vuu-ui/showcase/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Vite Showcase</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/vuu-ui/showcase/scripts/build.mjs b/vuu-ui/showcase/scripts/build.mjs
@@ -46,6 +46,7 @@ const HTML_TEMPLATE = `
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <base href="/" />
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@@ -68,6 +69,11 @@ const { name: projectName } = readPackageJson();
 const esbuildConfig = {
   entryPoints,
   env: "production",
+  external: [
+    "./themes/salt-theme.ts",
+    "./themes/vuu-theme.ts",
+    "./themes/tar-theme.ts",
+  ],
   name: "showcase",
   plugins: [cssInlinePlugin],
   outdir,

diff --git a/vuu-ui/tools/vuu-showcase/package.json b/vuu-ui/tools/vuu-showcase/package.json
@@ -15,6 +15,7 @@
     "@finos/vuu-theme": "0.0.26",
     "@finos/vuu-ui-controls": "0.0.26",
     "@finos/vuu-utils": "0.0.26",
+    "@fontsource/open-sans": "^4.5.13",
     "@salt-ds/core": "1.27.1",
     "@salt-ds/theme": "1.13.1"
   },
@@ -23,5 +24,6 @@
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
     "react-router-dom": "^6.2.1"
-  }
+  },
+  "sideEffects": false
 }
diff --git a/vuu-ui/tools/vuu-showcase/src/App.tsx b/vuu-ui/tools/vuu-showcase/src/App.tsx
@@ -8,10 +8,10 @@ import {
   ToggleButton,
   ToggleButtonGroup,
 } from "@salt-ds/core";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { IFrame } from "./components";
-import { byDisplaySequence, ExamplesModule } from "./showcase-utils";
+import { byDisplaySequence, ExamplesModule, loadTheme } from "./showcase-utils";
 
 import { ThemeSwitch } from "@finos/vuu-shell";
 
@@ -43,7 +43,6 @@ const sourceFromImports = (
         childNodes: sourceFromImports(stories, `${id}/`, "box"),
       };
     });
-// LIF00219931962
 export interface AppProps {
   stories: ExamplesModule;
 }
@@ -73,6 +72,14 @@ const availableDensity: DensityDescriptor[] = [
 
 export const App = ({ stories }: AppProps) => {
   const navigate = useNavigate();
+  const [themeReady, setThemeReady] = useState(false);
+
+  useEffect(() => {
+    loadTheme("vuu-theme").then(() => {
+      setThemeReady(true);
+    });
+  }, []);
+
   // // TODO cache source in localStorage
   const source = useMemo(() => sourceFromImports(stories), [stories]);
   const { pathname } = useLocation();
@@ -113,7 +120,7 @@ export const App = ({ stories }: AppProps) => {
     }
   }, []);
 
-  return (
+  return themeReady ? (
     <SaltProvider density="high" theme="vuu-theme" mode="light">
       <Flexbox
         style={{ flexDirection: "column", width: "100vw", height: "100vh" }}
@@ -197,5 +204,5 @@ export const App = ({ stories }: AppProps) => {
         </Flexbox>
       </Flexbox>
     </SaltProvider>
-  );
+  ) : null;
 };
diff --git a/vuu-ui/tools/vuu-showcase/src/Showcase.tsx b/vuu-ui/tools/vuu-showcase/src/Showcase.tsx
@@ -1,6 +1,3 @@
-// The Showcase chrome is always rendered with Vuu styling, hence we always need the Vuu theme
-import "./themes/vuu-theme";
-
 import "./Showcase.css";
 
 import { BrowserRouter, Route, Routes } from "react-router-dom";

diff --git a/vuu-ui/tools/vuu-showcase/src/ShowcaseStandalone.tsx b/vuu-ui/tools/vuu-showcase/src/ShowcaseStandalone.tsx
@@ -2,12 +2,16 @@ import {
   assertModuleExportsAtLeastOneComponent,
   Density,
   getUrlParameter,
-  importCSS,
   ThemeMode,
 } from "@finos/vuu-utils";
 import { SaltProvider } from "@salt-ds/core";
 import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import { getComponent, pathToExample, VuuExample } from "./showcase-utils";
+import {
+  getComponent,
+  loadTheme,
+  pathToExample,
+  VuuExample,
+} from "./showcase-utils";
 
 import "./Showcase.css";
 
@@ -19,7 +23,7 @@ const asThemeMode = (input: string | undefined): ThemeMode => {
   }
 };
 
-const themeIsInstalled = (theme = "no-theme") => {
+const themeIsInstalled = (theme = "no-theme"): theme is string => {
   return ["salt-theme", "vuu-theme", "tar-theme"].includes(theme);
 };
 
@@ -31,9 +35,6 @@ const asDensity = (input: string | undefined): Density => {
   }
 };
 
-type Environment = "development" | "production";
-const env = process.env.NODE_ENV as Environment;
-
 // The theme is passed as a queryString parameter in the url
 // themeMode and density are passed via the url hash, so can be
 // changed without refreshing the page
@@ -43,7 +44,7 @@ export const ShowcaseStandalone = () => {
   const themeModeRef = useRef<ThemeMode>("light");
 
   const [component, setComponent] = useState<ReactNode>(null);
-  const [themeReady, setThemeReady] = useState(false);
+  const [themeReady, setThemeReady] = useState(true);
 
   // We only need this once as entire page will refresh if theme changes
   const theme = useMemo(() => getUrlParameter("theme", "vuu-theme"), []);
@@ -67,20 +68,9 @@ export const ShowcaseStandalone = () => {
 
   useMemo(() => {
     if (themeIsInstalled(theme)) {
-      if (env === "development") {
-        import(`./themes/${theme}.ts`).then(() => {
-          setThemeReady(true);
-        });
-      } else {
-        // For deployment, we build the theme to a single css file
-        importCSS(`/themes/${theme}.css`).then((styleSheet) => {
-          document.adoptedStyleSheets = [
-            ...document.adoptedStyleSheets,
-            styleSheet,
-          ];
-          setThemeReady(true);
-        });
-      }
+      loadTheme(theme).then(() => {
+        setThemeReady(true);
+      });
     }
   }, [theme]);
 

diff --git a/vuu-ui/tools/vuu-showcase/src/index.ts b/vuu-ui/tools/vuu-showcase/src/index.ts
@@ -1,4 +1,4 @@
 export * from "./Showcase";
 export * from "./ShowcaseStandalone";
-
+export { loadTheme } from "./showcase-utils";
 export type { ExamplesModule, VuuExample } from "./showcase-utils";
diff --git a/vuu-ui/tools/vuu-showcase/src/showcase-utils.ts b/vuu-ui/tools/vuu-showcase/src/showcase-utils.ts
@@ -1,4 +1,4 @@
-import { isModule, Module, ReactComponent } from "@finos/vuu-utils";
+import { importCSS, isModule, Module, ReactComponent } from "@finos/vuu-utils";
 
 type Environment = "development" | "production";
 export const env = process.env.NODE_ENV as Environment;
@@ -76,3 +76,21 @@ export const getComponent = <T = ReactComponent>(
     return importedEntity.default as T;
   }
 };
+
+export const loadTheme = (themeName: string): Promise<void> =>
+  new Promise((resolve) => {
+    console.log(`load theme ${themeName} ${env}`);
+    if (env === "development") {
+      import(`./themes/${themeName}.ts`).then(() => {
+        resolve();
+      });
+    } else {
+      importCSS(`/themes/${themeName}.css`).then((styleSheet) => {
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          styleSheet,
+        ];
+        resolve();
+      });
+    }
+  });
diff --git a/vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts b/vuu-ui/tools/vuu-showcase/src/themes/salt-theme.ts
@@ -0,0 +1,14 @@
+import "@salt-ds/theme/index.css";
+
+import "@fontsource/open-sans/300.css";
+import "@fontsource/open-sans/300-italic.css";
+import "@fontsource/open-sans/400.css";
+import "@fontsource/open-sans/400-italic.css";
+import "@fontsource/open-sans/500.css";
+import "@fontsource/open-sans/500-italic.css";
+import "@fontsource/open-sans/600.css";
+import "@fontsource/open-sans/600-italic.css";
+import "@fontsource/open-sans/700.css";
+import "@fontsource/open-sans/700-italic.css";
+import "@fontsource/open-sans/800.css";
+import "@fontsource/open-sans/800-italic.css";