integrate with TreeTable, generate treeSource in cli

vuu-ui/packages/vuu-data-local/src/tree-data-source/TreeDataSource.ts

@@ -114,6 +114,8 @@ export class TreeDataSource extends BaseDataSource {
       };
     }
 
+    console.log({ selectedKeyValues });
+
     if (this.#status !== "initialising") {
       //TODO check if subscription details are still the same
       return;

vuu-ui/packages/vuu-ui-controls/src/split-button/SplitButton.css

@@ -104,7 +104,7 @@
 
 .vuuSplitButton-cta {
   --split-background: var(--background, var(--salt-actionable-accented-bold-background));
-  --split-background-active: var(--salt-actionable-accented-bold-background-active;
+  --split-background-active: var(--salt-actionable-accented-bold-background-active);
   --split-color-active: var(--salt-actionable-bold-foreground-active);
 }
 .vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {

vuu-ui/showcase/showcase.config.json

@@ -3,5 +3,5 @@
     "port": 3100
   },
   "version": "1.0.0",
-  "exhibits": "./src/examples"
+  "exhibitsPath": "./src/examples"
 }

vuu-ui/tools/showcase-cli/README.md

@@ -2,7 +2,7 @@
 
 ## startup sequence
 
-#### cli.mjs
+#### cli.js
 
 - load index.html from templates
 - get config file from input args, default to 'showcase.config.json'
@@ -25,3 +25,20 @@
 
 - integrate into vuu cli, using stricli. Parameter parsing will happen there
 - use jumpgen to monitor file system for new/edited exhibits in dev mode
+
+## Running
+
+run npm script from showcase
+
+showcase config file `showcase.config.json` defines following
+
+- http-server
+  - port
+- version
+- exhibits ' ./src/examples'
+
+```
+npm run showcase-cli
+```
+
+runs showcase-cli/cli.js

vuu-ui/tools/showcase-cli/cli/buildPackageTree.ts

@@ -1,9 +1,11 @@
 import fs from "fs";
 import path from "path";
 
-const OUT = "./src/generated/stories.json";
+export interface ExhibitsJson {
+  [key: string]: string | ExhibitsJson;
+}
 
-export const buildPackageTree = (dir: string, tree = {}) => {
+export const buildPackageTree = (dir: string, tree = {}): ExhibitsJson => {
   fs.readdirSync(dir).forEach((fileName) => {
     const filePath = path.join(dir, fileName);
     if (fs.lstatSync(filePath).isDirectory()) {

vuu-ui/tools/showcase-cli/cli.js → vuu-ui/tools/showcase-cli/cli/cli.js

@@ -2,16 +2,11 @@
 
 import fs from "fs";
 import path from "path";
-import {
-  copyFiles,
-  createFolder,
-  readJson,
-  writeFile,
-} from "./cli/cli-utils.ts";
-import indexHtml from "./templates/index.html.ts";
+import { copyFiles, createFolder, readJson, writeFile } from "./cli-utils.ts";
+import indexHtml from "../templates/index.html.ts";
 import { fileURLToPath } from "url";
-import start from "./cli/main.ts";
-import { buildPackageTree } from "./cli/buildPackageTree";
+import prepare from "./prepare.ts";
+import start from "./main.ts";
 
 /** Parse the command line */
 var args = process.argv.slice(2);
@@ -37,36 +32,36 @@ if (args.length === 0) {
   }
 }
 
-const distFolder = path.resolve(fileURLToPath(import.meta.url), "../dist");
+const distFolder = path.resolve(fileURLToPath(import.meta.url), "../../dist");
 
 if (!fs.existsSync(".showcase")) {
   createFolder(".showcase");
-  // DOn't do this until we create importmaps
+  // Don't do this until we create importmaps
   await writeFile(indexHtml, "./.showcase/index.html");
 } else {
   console.log(".showcase folder present and correct");
 }
 
 // TODO check whether dist files already present in .showcase
 if (fs.existsSync(distFolder)) {
+  console.log(`copy dist files from dist folder ${distFolder} to .showcase `);
   copyFiles(distFolder, "./.showcase");
+} else {
+  console.log(`no dist folder ${distFolder}`);
 }
 
 const config = readJson(configFilePath);
 
-//TODO use type validator to check config file
-const { exhibits } = config;
-if (!fs.existsSync(exhibits)) {
-  console.log("Error: Exhibits location doesn't exist. Given: ", exhibits);
-  process.exit();
-}
+const [exhibitsJson, treeSourceJson] = await prepare(config);
 
-const stories = buildPackageTree(exhibits);
 await writeFile(
-  `export default ${JSON.stringify(stories, null, 2)};`,
+  `export default ${JSON.stringify(exhibitsJson, null, 2)};`,
   "./.showcase/exhibits.js",
 );
 
-console.log(JSON.stringify(stories, null, 2));
+await writeFile(
+  `export default ${JSON.stringify(treeSourceJson, null, 2)};`,
+  "./.showcase/treeSourceJson.js",
+);
 
-start(config);
+start(config, exhibitsJson, treeSourceJson);

vuu-ui/tools/showcase-cli/cli/main.ts

@@ -8,12 +8,6 @@ export type ShowcaseConfig = {
 };
 
 export default async (config: ShowcaseConfig) => {
-  // fs.writeFile(OUT, JSON.stringify(stories, null, 2), (err) => {
-  //   if (err) {
-  //     console.log(err);
-  //   }
-  // });
-
   const server = await createServer({
     build: {
       manifest: true,

vuu-ui/tools/showcase-cli/cli/prepare.ts

@@ -0,0 +1,24 @@
+import fs from "fs";
+import { buildPackageTree, ExhibitsJson } from "./buildPackageTree.ts";
+import { writeFile } from "./cli-utils.ts";
+import { treeSourceFromFileSystem } from "./treeSourceFromFileSystem.ts";
+import { TreeSourceNode } from "@finos/vuu-utils";
+
+export default async (config): Promise<[ExhibitsJson, TreeSourceNode[]]> => {
+  console.log("prepare");
+
+  //TODO use type validator to check config file
+  const { exhibitsPath } = config;
+  if (!fs.existsSync(exhibitsPath)) {
+    console.log(
+      "Error: Exhibits location doesn't exist. Given: ",
+      exhibitsPath,
+    );
+    process.exit();
+  }
+
+  const exhibits = buildPackageTree(exhibitsPath);
+  const treeSource = treeSourceFromFileSystem(exhibits);
+
+  return [exhibits, treeSource];
+};

vuu-ui/tools/showcase-cli/cli/treeSourceFromFileSystem.ts

@@ -0,0 +1,46 @@
+import type { Module, TreeSourceNode } from "@finos/vuu-utils";
+import { ExhibitsJson } from "./buildPackageTree";
+
+export type VuuExample = {
+  (props?: any): JSX.Element;
+  displaySequence: number;
+};
+
+export type ExamplesModule = Module<VuuExample>;
+
+const getFileType = (filePath: string) => {
+  const pos = filePath.lastIndexOf(".");
+  if (pos === -1) {
+    throw Error(`file path ${filePath} has no file type suffix`);
+  }
+  return filePath.slice(pos + 1);
+};
+
+export const treeSourceFromFileSystem = (
+  exhibits: ExhibitsJson,
+  prefix = "",
+  icon = "folder",
+): TreeSourceNode[] => {
+  const entries = Object.entries(exhibits);
+  return entries.map<TreeSourceNode>(([label, nestedExhibits]) => {
+    const id = `${prefix}${label}`;
+    // TODO how can we know when a potential docs node has docs
+    // console.log(`id=${id}`);
+    if (typeof nestedExhibits === "string") {
+      const fileType = getFileType(nestedExhibits);
+      return {
+        fileType,
+        id,
+        icon: "rings",
+        label,
+        loaded: false,
+      };
+    }
+    return {
+      id,
+      icon,
+      label,
+      childNodes: treeSourceFromFileSystem(nestedExhibits, `${id}/`, "box"),
+    };
+  });
+};

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

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "bin": "./cli.js",
+  "bin": "./cli/cli.js",
   "scripts": {
     "build": "node ./scripts/build.mjs"
   },

vuu-ui/tools/showcase-cli/scripts/build.mjs

@@ -11,7 +11,7 @@ import { build } from "../../../scripts/esbuild.mjs";
 // TODO use a separate build call for each theme, without bundling
 // const themes = ["./src/themes/salt-theme.ts", "./src/themes/vuu-theme.ts"];
 
-const entryPoints = ["src/main.ts"];
+const entryPoints = ["showcase-ui/main.ts"];
 
 const outdir = "dist";