fixup! feat(workspace-plugin): implement stories-map generator to gen…

…erate all v9 stories metadata
microsoft · Jan 8, 2025 · 5f35f5f · 5f35f5f
1 parent e3bcac4
commit 5f35f5f
Showing 1 changed file with 104 additions and 30 deletions.
diff --git a/tools/workspace-plugin/src/generators/stories-map/generator.ts b/tools/workspace-plugin/src/generators/stories-map/generator.ts
@@ -8,65 +8,103 @@ type StoriesMetadata = Array<{
   title: string;
   storyFilePath: string;
   project: ProjectConfiguration;
+  group:
+    | {
+        name: string;
+        children: string[];
+        githubLabel: string;
+      }
+    | undefined;
 }>;
 
+type AggregatedList = { [group_name: string]: Array<{ children: string[]; project: string }> };
+
 export async function storiesMapGenerator(tree: Tree, _options: StoriesMapGeneratorSchema) {
   const stories = getStoriesMetadata(tree);
   writeJson(tree, '/stories-map.json', stories);
 
   const list = generateIssuesOptionList(tree, stories);
 
-  console.log(
-    JSON.stringify(
-      list,
-      (key, value) => {
-        if (value instanceof Set) {
-          return Array.from(value);
-        }
-        return value;
-      },
-      2,
-    ),
-  );
+  writeJson(tree, '/stories-list.json', list);
+
+  const githubIssueOptions = createOptions(list);
+
+  console.log(githubIssueOptions);
 
   await formatFiles(tree);
 }
 
 export default storiesMapGenerator;
 
-function generateIssuesOptionList(tree: Tree, metadata: StoriesMetadata) {
-  const set = new Set<string>();
-  const groups: Record<string, { [secondaryGroup: string]: Set<{ project: string; root: string }> }> = {};
+function createOptions(groups: AggregatedList) {
+  const list: string[] = [];
+  const components = { stable: [] as string[], preview: [] as string[], compat: [] as string[] };
 
-  for (const entry of metadata) {
-    if (entry.title.startsWith('Concepts')) {
+  for (const [group, content] of Object.entries(groups)) {
+    if (group === 'Utilities') {
+      list.push(group);
+      continue;
+    }
+    if (group === 'Icons') {
+      list.push(group);
       continue;
     }
-    if (entry.project.name?.includes('react-charts')) {
+    if (group === 'Motion') {
+      list.push(group);
       continue;
     }
-    if (entry.project.tags?.includes('tools')) {
+    if (group === 'Theme') {
+      list.push(`${group}/Tokens`);
       continue;
     }
-    if (entry.project.projectType === 'application' && entry.project.name !== 'public-docsite-v9') {
+    if (group === 'Migration Shims') {
+      const item = unique(content.map(val => val.children[0])).map(val => `${group} ${val}`);
+      list.push(...item);
       continue;
     }
-    const titleTree = entry.title.split('/');
+    if (group === 'Components') {
+      const item = unique(content.map(val => val.children[0]))
+        .sort()
+        .map(val => `${val}`);
+      components.stable.push(...item);
+      continue;
+    }
+    if (group === 'Compat Components') {
+      const item = unique(content.map(val => val.children[0]))
+        .sort()
+        .map(val => `${val} (Compat)`);
+      components.compat.push(...item);
+      continue;
+    }
+    if (group === 'Preview Components') {
+      const item = unique(content.map(val => val.children[0]))
+        .sort()
+        .map(val => `${val} (Preview)`);
+      components.preview.push(...item);
+      continue;
+    }
+  }
 
-    const mainGroup = titleTree[0];
-    const secondaryGroup = titleTree[1];
+  list.unshift(...components.stable, ...components.preview, ...components.compat);
+  list.push('Other...');
 
-    if (!groups[mainGroup]) {
-      groups[mainGroup] = {};
+  return list;
+}
+
+function generateIssuesOptionList(tree: Tree, metadata: StoriesMetadata) {
+  const groups: AggregatedList = {};
+
+  for (const entry of metadata) {
+    if (!entry.group) {
+      continue;
     }
-    if (!groups[mainGroup][secondaryGroup]) {
-      groups[mainGroup][secondaryGroup] = new Set();
+    if (!groups[entry.group.name]) {
+      groups[entry.group.name] = [];
     }
-
-    groups[mainGroup][secondaryGroup].add({ project: entry.project.name!, root: entry.project.root });
+    groups[entry.group.name].push({ project: entry.project.name!, children: unique(entry.group.children) });
   }
 
-  return { set, groups };
+  return groups;
 }
 
 function getStoriesMetadata(tree: Tree) {
@@ -96,6 +134,7 @@ function getStoriesMetadata(tree: Tree) {
           title,
           storyFilePath: filePath,
           project: config,
+          group: getStoryGroup(tree, { title, project: config }),
         });
       }
     });
@@ -149,3 +188,38 @@ function getStoryTitle(source: string, type: 'tsx' | 'ts' | 'mdx') {
     return match ? match[1] : null;
   }
 }
+
+function getStoryGroup(
+  tree: Tree,
+  entry: {
+    title: string;
+    project: ProjectConfiguration;
+  },
+) {
+  if (entry.title.startsWith('Concepts')) {
+    return;
+  }
+  if (entry.project.name?.includes('react-charts')) {
+    return;
+  }
+  if (entry.project.tags?.includes('tools')) {
+    return;
+  }
+  if (entry.project.projectType === 'application' && entry.project.name !== 'public-docsite-v9') {
+    return;
+  }
+
+  const titleTree = entry.title.split('/');
+  const mainGroup = titleTree[0];
+  const secondaryGroup = titleTree[1];
+
+  return {
+    name: mainGroup,
+    children: titleTree.slice(1),
+    githubLabel: secondaryGroup,
+  };
+}
+
+function unique(arr: string[]) {
+  return Array.from(new Set(arr));
+}