Completely break story generation, then fix it again

web/html/src/build/plugins/generate-stories-plugin.js

@@ -48,48 +48,22 @@ module.exports = class GenerateStoriesPlugin {
     }
 
     const files = await fs.readdir(webHtmlSrc, { recursive: true });
-    const stories = files
+    const storyFilePaths = files
       .filter(
         (item) => !item.startsWith("node_modules") && (item.endsWith(".stories.ts") || item.endsWith(".stories.tsx"))
       )
       .sort();
 
-    const storyGroups = stories.reduce((result, item) => {
+    const stories = storyFilePaths.map((filePath) => {
+      const safeName = this.wordify(filePath);
       // We use the parent directory name as the group name
-      const groupName = path.dirname(item).split("/").pop();
-      result[groupName] ??= [];
-      result[groupName].push(item);
-      return result;
-    }, {});
-
-    const imports = [];
-    const exports = [];
-
-    Object.entries(storyGroups).forEach(([groupName, stories]) => {
-      const groupExports = [];
-
-      stories.forEach((item) => {
-        const safeName = this.wordify(item);
-
-        imports.push(`import ${safeName} from "${item}";`);
-        imports.push(`import ${safeName}_raw from "${item}?raw";`);
-
-        groupExports.push(`{
-          title: "${path.basename(item)}",
-          story: ${safeName},
-          raw: ${safeName}_raw
-        }`);
-      });
-
-      exports.push(`{
-        title: "${groupName}",
-        stories: [${groupExports.join(", ")}],
-      }`);
+      const groupName = path.dirname(filePath).split("/").pop() ?? "Unknown";
+      return storyTemplate(filePath, safeName, groupName);
     });
 
-    const output = template(imports, exports);
+    const output = fileTemplate(stories.join(""));
     await fs.writeFile(this.outputFile, output, "utf-8");
-    console.log(`GenerateStoriesPlugin: wrote ${stories.length} stories to ${this.outputFile}`);
+    console.log(`GenerateStoriesPlugin: wrote ${storyFilePaths.length} stories to ${this.outputFile}`);
     callback();
   }
 
@@ -98,16 +72,28 @@ module.exports = class GenerateStoriesPlugin {
   }
 };
 
-const template = (imports, exports) =>
-  `
+const storyTemplate = (filePath, safeName, groupName) =>
+`
+import ${safeName}_component from "${filePath}";
+import ${safeName}_raw from "${filePath}?raw";
+
+export const ${safeName} = {
+  path: "${filePath}",
+  title: "${path.basename(filePath)}",
+  groupName: "${groupName}",
+  component: ${safeName}_component,
+  raw: ${safeName}_raw,
+};
+`;
+
+const fileTemplate = (content) =>
+`
 /**
  * NB! This is a generated file!
  * Any changes you make here will be lost.
  * See: web/html/src/build/plugins/generate-stories-plugin.js
  */
 
 /* eslint-disable */
-${imports.join("\n")}
-
-export default [${exports.join(", ")}];
+${content}
 `.trim();

web/html/src/build/webpack.config.js

@@ -124,6 +124,11 @@ module.exports = (env, argv) => {
       publicPath: "/",
       hashFunction: "md5",
     },
+    // context: __dirname,
+    node: {
+      __filename: true,
+      __dirname: true,
+    },
     devtool: isProductionMode ? "source-map" : "eval-source-map",
     module: {
       rules: [

web/html/src/manager/storybook/stories.ts

@@ -0,0 +1,5 @@
+import * as generatedStories from "./stories.generated";
+
+const storyGroups = Object.groupBy(Object.values(generatedStories), (item) => item.groupName);
+
+export default Object.entries(storyGroups).map(([title, stories]) => ({ title, stories }));

web/html/src/manager/storybook/storybook.tsx

@@ -1,21 +1,24 @@
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 
 import debugUtils from "core/debugUtils";
 
 import { Button } from "components/buttons";
 import { IconTag } from "components/icontag";
 
 import { StoryRow } from "./layout";
-import storyGroups from "./stories.generated";
+import stories from "./stories";
 import styles from "./storybook.module.less";
 
 const STORAGE_KEY = "storybook-show-code";
 
+
+
 export const Storybook = () => {
   const [_hash, setHash] = useState(window.location.hash);
   const hash = _hash.replace(/^#/, "");
-  const normalize = (input: string) => input.replaceAll(" ", "-").toLowerCase();
-  const activeTabHash = normalize(hash) || normalize(storyGroups[0].title);
+  const normalize = (input: string = "") => input.replaceAll(" ", "-").toLowerCase();
+
+  const activeTabHash = normalize(hash) || normalize(stories[0]?.title);
 
   const [, _invalidate] = useState(0);
   const invalidate = () => _invalidate((ii) => ii + 1);
@@ -73,7 +76,7 @@ export const Storybook = () => {
 
       <div className="spacewalk-content-nav">
         <ul className="nav nav-tabs">
-          {storyGroups
+          {stories
             .sort((a, b) => a.title.localeCompare(b.title))
             .map((item) => {
               const tabHash = normalize(item.title);
@@ -86,23 +89,23 @@ export const Storybook = () => {
         </ul>
       </div>
 
-      {storyGroups.map((group, index) => (
-        <div key={`${normalize(group.title)}_${index}`}>
-          {normalize(group.title) === activeTabHash && group.stories.map((item, index) => (
-            <>
-              <p key={`title-${index}`}>
+      {stories.map((group) => (
+        <div key={`${group.title}`}>
+          {normalize(group.title) === activeTabHash && group.stories?.map((item) => (
+            <Fragment key={`${group.title}-${item.title}`}>
+              <p>
                 <code>{item.title}</code>
               </p>
-              <div key={`body-${index}`} className={styles.story}>
-                <div><item.story /></div>
+              <div className={styles.story}>
+                <div>{item.component ? <item.component /> : null}</div>
                 {showCode ? (
                   <pre>
                     <code>{item.raw}</code>
                   </pre>
                 ) : null}
               </div>
-              <hr key={`hr-${index}`} />
-            </>
+              <hr />
+            </Fragment>
           ))}
         </div>
       ))}

web/html/src/object.d.ts

@@ -0,0 +1,24 @@
+// See https://stackoverflow.com/a/77724124/1470607
+interface ObjectConstructor {
+  /**
+   * Groups members of an iterable according to the return value of the passed callback.
+   * @param items An iterable.
+   * @param keySelector A callback which will be invoked for each item in items.
+   */
+  groupBy<K extends PropertyKey, T>(
+      items: Iterable<T>,
+      keySelector: (item: T, index: number) => K,
+  ): Partial<Record<K, T[]>>;
+}
+
+interface MapConstructor {
+  /**
+   * Groups members of an iterable according to the return value of the passed callback.
+   * @param items An iterable.
+   * @param keySelector A callback which will be invoked for each item in items.
+   */
+  groupBy<K, T>(
+      items: Iterable<T>,
+      keySelector: (item: T, index: number) => K,
+  ): Map<K, T[]>;
+}

web/html/src/tsconfig.json

@@ -10,7 +10,8 @@
     "utils/**/*.tsx",
     "global.d.ts",
     "imports.d.ts",
-    "lib.es5.d.ts"
+    "lib.es5.d.ts",
+    "object.d.ts"
   ],
   "exclude": ["**/node_modules", "**/\\.*/"],
   "compilerOptions": {