move theme detection into SHowcaseStandalone

finos · Feb 6, 2024 · 8931ba4 · 8931ba4
1 parent ad9d671
commit 8931ba4
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 30 deletions.
diff --git a/vuu-ui/package.json b/vuu-ui/package.json
@@ -33,7 +33,7 @@
     "view-bundle": "node ./scripts/visualize-bundle.mjs",
     "type-defs": "node ./scripts/build-all-type-defs.mjs",
     "showcase": "cd showcase && npm run showcase",
-    "showcase:preview": "serve ./showcase/dist",
+    "showcase:preview": "serve ./showcase/dist -p 4173",
     "showcase:build": " cd showcase && node scripts/build.mjs",
     "test:cypress": "cypress run --component --browser chrome --headless",
     "test:cypress:local": "cypress open --component --browser chrome",

diff --git a/vuu-ui/showcase/package.json b/vuu-ui/showcase/package.json
@@ -5,10 +5,9 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "build": "vite build",
+    "build": "node ./scripts/build.mjs",
     "dev": "vite",
     "docs": "node ./scripts/build-docs.mjs",
-    "preview": "node ./scripts/preview.mjs",
     "showcase": "node ./scripts/showcase.mjs",
     "stories": "node ./scripts/parse-stories.mjs"
   },

diff --git a/vuu-ui/showcase/scripts/preview.mjs b/vuu-ui/showcase/scripts/preview.mjs
diff --git a/vuu-ui/showcase/src/index-standalone.tsx b/vuu-ui/showcase/src/index-standalone.tsx
@@ -1,16 +1,6 @@
 import { ShowcaseStandalone } from "@finos/vuu-showcase";
 import ReactDOM from "react-dom";
-import { getUrlParameter } from "@finos/vuu-utils";
-
-const theme = getUrlParameter("theme", "vuu");
 
 const root = document.getElementById("root") as HTMLDivElement;
 
-ReactDOM.render(
-  <ShowcaseStandalone
-    density="high"
-    theme={theme}
-    themeMode="light"
-  ></ShowcaseStandalone>,
-  root
-);
+ReactDOM.render(<ShowcaseStandalone />, root);
diff --git a/vuu-ui/tools/vuu-showcase/src/ShowcaseStandalone.tsx b/vuu-ui/tools/vuu-showcase/src/ShowcaseStandalone.tsx
@@ -1,6 +1,7 @@
 import {
   assertModuleExportsAtLeastOneComponent,
   Density,
+  getUrlParameter,
   ThemeMode,
   ThemeProvider,
 } from "@finos/vuu-utils";
@@ -11,7 +12,7 @@ import "./Showcase.css";
 
 export const ShowcaseStandalone = ({
   density = "high",
-  theme = "vuu",
+  theme: themeProp,
   themeMode = "light",
 }: {
   density?: Density;
@@ -21,6 +22,11 @@ export const ShowcaseStandalone = ({
   const [component, setComponent] = useState<ReactNode>(null);
   const [themeReady, setThemeReady] = useState(false);
 
+  const theme = useMemo(
+    () => themeProp ?? getUrlParameter("theme", "vuu"),
+    [themeProp]
+  );
+
   useMemo(() => {
     switch (theme) {
       case "vuu":