move showcase ui to tools/vyy-showcase

vuu-ui/package.json

@@ -11,7 +11,8 @@
   "workspaces": [
     "packages/**",
     "sample-apps/**",
-    "showcase"
+    "showcase",
+    "tools/vuu-showcase"
   ],
   "scripts": {
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",

vuu-ui/showcase/package.json

@@ -21,6 +21,7 @@
     "@finos/vuu-data-ag-grid": "0.0.26",
     "@finos/vuu-filters": "0.0.26",
     "@finos/vuu-layout": "0.0.26",
+    "@finos/vuu-showcase": "0.0.1",
     "@finos/vuu-theme": "0.0.26",
     "@finos/vuu-utils": "0.0.26",
     "@salt-ds/core": "1.13.2",

vuu-ui/showcase/src/index-main.tsx

@@ -1,11 +1,5 @@
 import ReactDOM from "react-dom";
-import { Showcase } from "./Showcase";
-import type { ExamplesModule } from "./showcase-utils";
-
-// The Showcase chrome is always rendered with Vuu styling, hence we always need the Vuu theme
-import "./themes/vuu";
-
-import "./index.css";
+import { type ExamplesModule, Showcase } from "@finos/vuu-showcase";
 
 const root = document.getElementById("root") as HTMLDivElement;
 

vuu-ui/showcase/src/index-standalone.tsx

@@ -1,31 +1,16 @@
-import { ShowcaseStandalone } from "./ShowcaseStandalone";
+import { ShowcaseStandalone } from "@finos/vuu-showcase";
 import ReactDOM from "react-dom";
 import { getUrlParameter } from "@finos/vuu-utils";
 
-import "./index.css";
-
 const theme = getUrlParameter("theme", "vuu");
 
-switch (theme) {
-  case "vuu":
-    import("./themes/vuu").then(renderApp);
-    break;
-  case "salt":
-    import("./themes/salt").then(renderApp);
-    break;
-  default:
-    renderApp();
-}
-
-function renderApp() {
-  const root = document.getElementById("root") as HTMLDivElement;
+const root = document.getElementById("root") as HTMLDivElement;
 
-  ReactDOM.render(
-    <ShowcaseStandalone
-      density="high"
-      theme={theme}
-      themeMode="light"
-    ></ShowcaseStandalone>,
-    root
-  );
-}
+ReactDOM.render(
+  <ShowcaseStandalone
+    density="high"
+    theme={theme}
+    themeMode="light"
+  ></ShowcaseStandalone>,
+  root
+);

vuu-ui/tools/vuu-showcase/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@finos/vuu-showcase",
+  "version": "0.0.1",
+  "author": "heswell",
+  "main": "src/index.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
+  "devDependencies": {},
+  "dependencies": {
+    "@finos/vuu-icons": "0.0.26",
+    "@finos/vuu-layout": "0.0.26",
+    "@finos/vuu-theme": "0.0.26",
+    "@finos/vuu-ui-controls": "0.0.26",
+    "@finos/vuu-utils": "0.0.26",
+    "@salt-ds/core": "1.13.2",
+    "@salt-ds/theme": "1.7.1"
+  },
+  "peerDependencies": {
+    "clsx": "^2.0.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2",
+    "react-router-dom": "^6.2.1"
+  }
+}

vuu-ui/showcase/src/App.tsx → vuu-ui/tools/vuu-showcase/src/App.tsx

@@ -20,7 +20,7 @@ const sourceFromImports = (
     .map<TreeSourceNode>(([label, stories]) => {
       const id = `${prefix}${label}`;
       // TODO how can we know when a potential docs node has docs
-      console.log(`id=${id}`);
+      // console.log(`id=${id}`);
       if (typeof stories === "function") {
         return {
           id,

vuu-ui/showcase/src/Showcase.tsx → vuu-ui/tools/vuu-showcase/src/Showcase.tsx

@@ -1,5 +1,7 @@
-import "@finos/vuu-icons/index.css";
-import "@finos/vuu-theme/index.css";
+// The Showcase chrome is always rendered with Vuu styling, hence we always need the Vuu theme
+import "./themes/vuu";
+
+import "./Showcase.css";
 
 import { AppRoutes } from "./AppRoutes";
 import { ExamplesModule } from "./showcase-utils";

vuu-ui/showcase/src/ShowcaseStandalone.tsx → vuu-ui/tools/vuu-showcase/src/ShowcaseStandalone.tsx

@@ -7,6 +7,8 @@ import {
 import { ReactNode, useMemo, useState } from "react";
 import { getComponent, pathToExample, VuuExample } from "./showcase-utils";
 
+import "./Showcase.css";
+
 export const ShowcaseStandalone = ({
   density = "high",
   theme = "vuu",
@@ -17,8 +19,29 @@ export const ShowcaseStandalone = ({
   themeMode?: ThemeMode;
 }) => {
   const [component, setComponent] = useState<ReactNode>(null);
+  const [themeReady, setThemeReady] = useState(false);
+
+  useMemo(() => {
+    switch (theme) {
+      case "vuu":
+        console.log("load vuu theme");
+        import("./themes/vuu").then(() => {
+          setThemeReady(true);
+        });
+        break;
+      case "salt":
+        import("./themes/salt").then(() => {
+          setThemeReady(true);
+        });
+        break;
+      default:
+        console.log(`no theme needed`);
+    }
+  }, []);
+
   useMemo(async () => {
     const url = new URL(document.location.href);
+    console.log(`url pathnasme ${url.pathname}`);
     const [targetPaths, exampleName] = pathToExample(url.pathname.slice(1));
     console.log({
       pathname: url.pathname,
@@ -30,6 +53,7 @@ export const ShowcaseStandalone = ({
     const path = [exampleName];
     for (const importPath of targetPaths) {
       try {
+        console.log(`importPath ${importPath}`);
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         targetExamples = await import(/* @vite-ignore */ importPath);
@@ -63,14 +87,18 @@ export const ShowcaseStandalone = ({
     }
   }, []);
 
-  return (
-    <ThemeProvider
-      applyThemeClasses
-      theme={theme}
-      density={density}
-      themeMode={themeMode}
-    >
-      <div className="vuuShowcase-StandaloneRoot">{component}</div>
-    </ThemeProvider>
-  );
+  if (themeReady || theme === "no-theme") {
+    return (
+      <ThemeProvider
+        applyThemeClasses
+        theme={theme}
+        density={density}
+        themeMode={themeMode}
+      >
+        <div className="vuuShowcase-StandaloneRoot">{component}</div>
+      </ThemeProvider>
+    );
+  } else {
+    return null;
+  }
 };

vuu-ui/tools/vuu-showcase/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./Showcase";
+export * from "./ShowcaseStandalone";
+
+export type { ExamplesModule } from "./showcase-utils";

vuu-ui/showcase/src/showcase-utils.ts → vuu-ui/tools/vuu-showcase/src/showcase-utils.ts

@@ -44,11 +44,12 @@ export const pathToExample = (path: string): [string[], string] => {
   if (exampleName === "") {
     return [[], ""];
   } else {
+    const root = env === "development" ? "/src" : "";
     return [
       [
-        `./examples/${importPath}/${exampleName}${suffix}`,
-        `./examples/${importPath}.examples${suffix}`,
-        `./examples/${importPath}/index${suffix}`,
+        `${root}/examples/${importPath}/${exampleName}${suffix}`,
+        `${root}/examples/${importPath}.examples${suffix}`,
+        `${root}/examples/${importPath}/index${suffix}`,
       ],
       exampleName,
     ];