feat(lite/stories): allow to organize stories in subdirectories (#6992)

@xen-orchestra/lite/src/components/component-story/StoryMenu.vue

@@ -2,32 +2,80 @@
   <RouterLink :to="{ name: 'story' }">
     <UiTitle type="h4">Stories</UiTitle>
   </RouterLink>
-  <ul class="links">
-    <li v-for="route in routes" :key="route.name">
-      <RouterLink class="link" :to="route">
-        {{ route.meta.storyTitle }}
-      </RouterLink>
-    </li>
-  </ul>
+  <StoryMenuTree
+    :tree="tree"
+    @toggle-directory="toggleDirectory"
+    :opened-directories="openedDirectories"
+  />
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from "vue-router";
+import StoryMenuTree from "@/components/component-story/StoryMenuTree.vue";
 import UiTitle from "@/components/ui/UiTitle.vue";
+import { type RouteRecordNormalized, useRoute, useRouter } from "vue-router";
+import { ref } from "vue";
 
 const { getRoutes } = useRouter();
 
 const routes = getRoutes().filter((route) => route.meta.isStory);
-</script>
 
-<style lang="postcss" scoped>
-.links {
-  padding: 1rem;
+export type StoryTree = Map<
+  string,
+  { path: string; directory: string; children: StoryTree }
+>;
+
+function createTree(routes: RouteRecordNormalized[]) {
+  const tree: StoryTree = new Map();
+
+  for (const route of routes) {
+    const parts = route.path.slice(7).split("/");
+    let currentNode = tree;
+    let currentPath = "";
+
+    for (const part of parts) {
+      currentPath = currentPath ? `${currentPath}/${part}` : part;
+      if (!currentNode.has(part)) {
+        currentNode.set(part, {
+          children: new Map(),
+          path: route.path,
+          directory: currentPath,
+        });
+      }
+      currentNode = currentNode.get(part)!.children;
+    }
+  }
+
+  return tree;
 }
-.link {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  text-decoration: none;
-  font-size: 1.6rem;
-}
-</style>
+
+const tree = createTree(routes);
+
+const currentRoute = useRoute();
+
+const getDefaultOpenedDirectories = (): Set<string> => {
+  if (!currentRoute.meta.isStory) {
+    return new Set<string>();
+  }
+
+  const openedDirectories = new Set<string>();
+  const parts = currentRoute.path.split("/");
+  let currentPath = "";
+
+  for (const part of parts) {
+    currentPath = currentPath ? `${currentPath}/${part}` : part;
+    openedDirectories.add(currentPath);
+  }
+
+  return openedDirectories;
+};
+
+const openedDirectories = ref(getDefaultOpenedDirectories());
+
+const toggleDirectory = (directory: string) => {
+  if (openedDirectories.value.has(directory)) {
+    openedDirectories.value.delete(directory);
+  } else {
+    openedDirectories.value.add(directory);
+  }
+};
+</script>

@xen-orchestra/lite/src/components/component-story/StoryMenuTree.vue

@@ -0,0 +1,83 @@
+<template>
+  <ul class="story-menu-tree">
+    <li v-for="[key, node] in tree" :key="key">
+      <span
+        v-if="node.children.size > 0"
+        class="directory"
+        @click="emit('toggle-directory', node.directory)"
+      >
+        <UiIcon
+          :icon="isOpen(node.directory) ? faFolderOpen : faFolderClosed"
+        />
+        {{ formatName(key) }}
+      </span>
+      <RouterLink v-else :to="node.path" class="link">
+        <UiIcon :icon="faFile" />
+        {{ formatName(key) }}
+      </RouterLink>
+
+      <StoryMenuTree
+        v-if="isOpen(node.directory)"
+        :tree="node.children"
+        @toggle-directory="emit('toggle-directory', $event)"
+        :opened-directories="openedDirectories"
+      />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import type { StoryTree } from "@/components/component-story/StoryMenu.vue";
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import {
+  faFile,
+  faFolderClosed,
+  faFolderOpen,
+} from "@fortawesome/free-regular-svg-icons";
+
+const props = defineProps<{
+  tree: StoryTree;
+  openedDirectories: Set<string>;
+}>();
+
+const emit = defineEmits<{
+  (event: "toggle-directory", directory: string): void;
+}>();
+
+const isOpen = (directory: string) => props.openedDirectories.has(directory);
+
+const formatName = (name: string) => {
+  const parts = name.split("-");
+  return parts.map((part) => part[0].toUpperCase() + part.slice(1)).join(" ");
+};
+</script>
+
+<style lang="postcss" scoped>
+.story-menu-tree {
+  padding-left: 1rem;
+
+  .story-menu-tree {
+    padding-left: 2.2rem;
+  }
+}
+
+.directory {
+  font-weight: 500;
+}
+
+.link {
+  padding: 0.5rem 0;
+}
+
+.directory {
+  padding: 0.5rem 0;
+}
+
+.link,
+.directory {
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 1.6rem;
+  display: inline-block;
+}
+</style>

@xen-orchestra/lite/src/router/story.ts

@@ -1,21 +1,21 @@
 import type { RouteRecordRaw } from "vue-router";
 
-const componentLoaders = import.meta.glob("@/stories/*.story.vue");
-const docLoaders = import.meta.glob("@/stories/*.story.md", { as: "raw" });
+const componentLoaders = import.meta.glob("@/stories/**/*.story.vue");
+const docLoaders = import.meta.glob("@/stories/**/*.story.md", { as: "raw" });
 
 const children: RouteRecordRaw[] = Object.entries(componentLoaders).map(
   ([path, componentLoader]) => {
-    const basename = path.replace(/^\/src\/stories\/(.*)\.story.vue$/, "$1");
+    const basePath = path.replace(/^\/src\/stories\/(.*)\.story.vue$/, "$1");
     const docPath = path.replace(/\.vue$/, ".md");
-    const routeName = `story-${basename}`;
+    const routeName = `story-${basePath}`;
 
     return {
       name: routeName,
-      path: basename,
+      path: basePath,
       component: componentLoader,
       meta: {
         isStory: true,
-        storyTitle: basenameToStoryTitle(basename),
+        storyTitle: basePathToStoryTitle(basePath),
         storyMdLoader: docLoaders[docPath],
       },
     };
@@ -46,8 +46,10 @@ export default {
  *  Basename: `my-component`
  *  Page title: `My Component`
  */
-function basenameToStoryTitle(basename: string) {
-  return basename
+function basePathToStoryTitle(basePath: string) {
+  return basePath
+    .split("/")
+    .pop()!
     .split("-")
     .map((s) => `${s.charAt(0).toUpperCase()}${s.substring(1)}`)
     .join(" ");

@xen-orchestra/lite/src/stories/tab-bar/router-tab.story.vue

@@ -18,8 +18,8 @@
 import RouterTab from "@/components/RouterTab.vue";
 import ComponentStory from "@/components/component-story/ComponentStory.vue";
 import UiTabBar from "@/components/ui/UiTabBar.vue";
-import { prop, setting, slot } from "@/libs/story/story-param.js";
-import { text } from "@/libs/story/story-widget.js";
+import { prop, setting, slot } from "@/libs/story/story-param";
+import { text } from "@/libs/story/story-widget";
 </script>
 
 <style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/tab-bar/ui-tab-bar.story.vue

@@ -18,7 +18,7 @@
 import ComponentStory from "@/components/component-story/ComponentStory.vue";
 import UiTab from "@/components/ui/UiTab.vue";
 import UiTabBar from "@/components/ui/UiTabBar.vue";
-import { prop, slot } from "@/libs/story/story-param.js";
+import { prop, slot } from "@/libs/story/story-param";
 </script>
 
 <style lang="postcss" scoped></style>

@xen-orchestra/lite/src/stories/tab-bar/ui-tab.story.vue

@@ -19,8 +19,8 @@
 import ComponentStory from "@/components/component-story/ComponentStory.vue";
 import UiTab from "@/components/ui/UiTab.vue";
 import UiTabBar from "@/components/ui/UiTabBar.vue";
-import { prop, setting, slot } from "@/libs/story/story-param.js";
-import { text } from "@/libs/story/story-widget.js";
+import { prop, setting, slot } from "@/libs/story/story-param";
+import { text } from "@/libs/story/story-widget";
 </script>
 
 <style lang="postcss" scoped></style>