fix: stories routes for selection

ccontrols · Jul 1, 2020 · fae0387 · fae0387
1 parent dc1aa8e
commit fae0387
Show file tree

Hide file tree

Showing 28 changed files with 162 additions and 104 deletions.
diff --git a/core/core/package.json b/core/core/package.json
@@ -31,6 +31,7 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/components": "^1.6.0",
+    "@storybook/csf": "^0.0.1",
     "deepmerge": "^4.2.2",
     "escape-html": "^1.0.3",
     "faker": "^4.1.0",

diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -45,6 +45,12 @@ export interface PageConfiguration {
    */
   fullPage?: boolean;
 
+  /**
+   * whether to have an index home page for the page type.
+   * if false, will show the first document of the page type as the home page.
+   */
+  indexHome?: boolean;
+
   /**
    * whether to add navigation sidebars to the page
    */
@@ -215,6 +221,7 @@ export const defaultRunConfig: RunConfiguration = {
       label: 'Blog',
       sidebars: false,
       topMenu: true,
+      indexHome: true,
     },
     author: {
       label: 'Authors',

diff --git a/core/core/src/stories.ts b/core/core/src/stories.ts
@@ -1,3 +1,4 @@
+import { toId, storyNameFromExport } from '@storybook/csf';
 import { CodeLocation, PackageInfo, StoryRenderFn } from './utility';
 import { StoryComponent } from './components';
 import { ComponentControls } from './controls';
@@ -345,6 +346,8 @@ export interface StoriesStore {
   packages: StoryPackages;
 }
 
+export const strToId = (str: string) => str.replace(/\W/g, '-').toLowerCase();
+
 export const getDocPath = (
   pageType: PageType,
   doc?: Document,
@@ -355,23 +358,28 @@ export const getDocPath = (
   const { basePath = '' } = pagesConfig?.[pageType] || {};
   const route = doc
     ? doc.route ||
-      `/${basePath}${
-        activeTab ? `${activeTab}/` : ''
-      }${doc.title?.toLowerCase()}/`
-    : `/${basePath}${activeTab ? `${activeTab}/` : ''}${name}/`;
+      `/${basePath}${activeTab ? `${activeTab}/` : ''}${strToId(doc.title)}/`
+    : `/${basePath}${activeTab ? `${activeTab}/` : ''}${strToId(name)}/`;
   return route;
 };
 
 export const getStoryPath = (
-  story?: Story,
+  storyId?: string,
   doc?: Document,
   pagesConfig?: PagesOnlyRoutes,
   activeTab?: string,
 ): string => {
-  if (!story) {
-    return '';
+  const pageType = doc?.type || defPageType;
+  if (!storyId) {
+    return getDocPath(pageType, doc, pagesConfig, undefined, activeTab);
   }
 
-  const docsPath = getDocPath('story', doc, pagesConfig, undefined, activeTab);
-  return `${docsPath}#${story.id}`;
+  const { basePath = '' } = pagesConfig?.[pageType] || {};
+  const route = `/${basePath}${activeTab ? `${activeTab}/` : ''}`;
+  return `${route}${storyId || ''}`;
 };
+
+export const docStoryToId = (docId: string, storyId: string) =>
+  toId(docId, storyNameFromExport(storyId));
+
+export { storyNameFromExport };
diff --git a/core/loader/package.json b/core/loader/package.json
@@ -38,7 +38,6 @@
     "@component-controls/config": "^1.6.0",
     "@component-controls/core": "^1.6.0",
     "@component-controls/instrument": "^1.6.0",
-    "@storybook/csf": "^0.0.1",
     "chalk": "^4.0.0",
     "js-string-escape": "^1.0.1",
     "loader-utils": "^1.2.3",

diff --git a/core/loader/src/store.ts b/core/loader/src/store.ts
@@ -7,6 +7,7 @@ import {
   defPageType,
   Pages,
   PageType,
+  docStoryToId,
 } from '@component-controls/core';
 import { LoadingDocStore } from '@component-controls/instrument';
 
@@ -54,7 +55,19 @@ class Store implements LoadingStore {
         }
         return false;
       })
-      .map(store => store.doc as Document);
+      .map(
+        store =>
+          ({
+            ...store.doc,
+            stories:
+              store.doc && store.stories
+                ? Object.keys(store.stories).map(id =>
+                    //@ts-ignore
+                    docStoryToId(store.doc.title, id),
+                  )
+                : undefined,
+          } as Document),
+      );
   getUniquesByField = (field: string) => {
     return this.stores.reduce((acc: { [key: string]: number }, store) => {
       if (store?.doc) {

diff --git a/core/store/package.json b/core/store/package.json
@@ -38,7 +38,6 @@
   "dependencies": {
     "@component-controls/core": "^1.6.0",
     "@component-controls/loader": "^1.6.0",
-    "@storybook/csf": "^0.0.1",
     "broadcast-channel": "^3.1.0",
     "typescript": "^3.8.3"
   },

diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts
@@ -340,7 +340,7 @@ export class Store implements StoryStore {
       return '';
     }
     const doc = this.getStoryDoc(story?.doc || '');
-    return getStoryPath(story, doc, this.config?.pages, activeTab);
+    return getStoryPath(story.id, doc, this.config?.pages, activeTab);
   };
 
   /**

diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts
@@ -6,9 +6,10 @@ import {
   deepMergeArrays,
   deepMerge,
   defaultRunConfig,
+  docStoryToId,
+  storyNameFromExport,
 } from '@component-controls/core';
 import { LoadingStore } from '@component-controls/loader';
-import { toId, storyNameFromExport } from '@storybook/csf';
 import { addSmartControls } from './smart-controls';
 
 let storyStore: StoriesStore | undefined = undefined;
@@ -79,7 +80,7 @@ export const loadStoryStore = (
                 story.controls = deepMerge(smartControls, story.controls || {});
               }
               if (doc.title && story.id) {
-                const id = toId(doc.title, storyNameFromExport(story.id));
+                const id = docStoryToId(doc.title, story.id);
                 if (!doc.stories) {
                   doc.stories = [];
                 }

diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -9,12 +9,19 @@ import { GatsbyLink } from './GatsbyLink';
 
 interface LayoutProps {
   docId?: string;
+  storyId?: string;
   type?: PageType;
 }
 
-export const Layout: FC<LayoutProps> = ({ docId, type, children }) => {
+export const Layout: FC<LayoutProps> = ({ docId, storyId, type, children }) => {
   return (
-    <AppContext docId={docId} store={bundle} linkClass={GatsbyLink} type={type}>
+    <AppContext
+      docId={docId}
+      storyId={storyId}
+      store={bundle}
+      linkClass={GatsbyLink}
+      type={type}
+    >
       {children}
     </AppContext>
   );

diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts
@@ -1,5 +1,6 @@
 import {
   getDocPath,
+  getStoryPath,
   PageType,
   TabConfiguration,
 } from '@component-controls/core';
@@ -24,21 +25,6 @@ exports.createPages = async (
     presets: defaultPresets,
     configPath: options.configPath,
   };
-  const pageTemplates: Record<PageType, string> = {
-    story: require.resolve(`../src/templates/DocPage.tsx`),
-    blog: require.resolve(`../src/templates/DocPage.tsx`),
-    page: require.resolve(`../src/templates/DocPage.tsx`),
-    tags: require.resolve(`../src/templates/CategoryPage.tsx`),
-    author: require.resolve(`../src/templates/CategoryPage.tsx`),
-  };
-  const listTemplates: Record<PageType, string> = {
-    story: require.resolve(`../src/templates/DocPage.tsx`),
-    page: require.resolve(`../src/templates/DocPage.tsx`),
-    blog: require.resolve(`../src/templates/PageList.tsx`),
-    tags: require.resolve(`../src/templates/CategoryList.tsx`),
-    author: require.resolve(`../src/templates/CategoryList.tsx`),
-  };
-
   const { store } =
     process.env.NODE_ENV === 'development'
       ? await watch(config)
@@ -57,20 +43,24 @@ exports.createPages = async (
           tabs.forEach((tab, tabIndex) => {
             const route = tabIndex > 0 ? tab.route : undefined;
             docs.forEach(doc => {
-              createPage({
-                path: getDocPath(
-                  pageType,
+              const stories = doc.stories?.length ? doc.stories : [undefined];
+              stories.forEach((storyId?: string) => {
+                const url = getStoryPath(
+                  storyId,
                   doc,
                   store.buildConfig?.pages,
-                  undefined,
                   route,
-                ),
-                component: pageTemplates[pageType] || pageTemplates['story'],
-                context: {
-                  type: pageType,
-                  activeTab: route,
-                  doc: doc.title,
-                },
+                );
+                createPage({
+                  path: url,
+                  component: require.resolve(`../src/templates/DocPage.tsx`),
+                  context: {
+                    type: pageType,
+                    activeTab: route,
+                    docId: doc.title,
+                    storyId,
+                  },
+                });
               });
             });
           });
@@ -80,10 +70,10 @@ exports.createPages = async (
             );
             createPage({
               path: `/${page.basePath}`,
-              component: listTemplates[pageType] || listTemplates['story'],
+              component: require.resolve(`../src/templates/DocHome.tsx`),
               context: {
                 type: pageType,
-                doc: docsPage?.title,
+                docId: docsPage?.title,
               },
             });
           }
@@ -101,21 +91,21 @@ exports.createPages = async (
               store.buildConfig?.pages,
               tag,
             ),
-            component: pageTemplates[catName as PageType],
+            component: require.resolve(`../src/templates/CategoryPage.tsx`),
             context: {
               type: catName as PageType,
               category: tag,
-              doc: null,
+              docId: null,
             },
           });
         });
         if (catKeys.length) {
           createPage({
             path: `/${catPage.basePath}`,
-            component: listTemplates[catName as PageType],
+            component: require.resolve(`../src/templates/CategoryList.tsx`),
             context: {
               type: catName,
-              doc: null,
+              docId: null,
             },
           });
         }
@@ -124,9 +114,9 @@ exports.createPages = async (
     const homePage = store.stores.find(s => s.doc?.route === '/');
     createPage({
       path: `/`,
-      component: pageTemplates['page'],
+      component: require.resolve(`../src/templates/DocPage.tsx`),
       context: {
-        doc: homePage?.doc?.title,
+        docId: homePage?.doc?.title,
         type: homePage?.doc?.type,
       },
     });

diff --git a/integrations/gatsby-theme-stories/src/templates/CategoryList.tsx b/integrations/gatsby-theme-stories/src/templates/CategoryList.tsx
@@ -7,15 +7,15 @@ import { Layout } from '../components/Layout';
 interface CategoryListProps {
   pathContext: {
     type: PageType;
-    doc: string;
+    docId: string;
   };
 }
 
 const CategroryListTemplate: FC<CategoryListProps> = ({
-  pathContext: { type, doc },
+  pathContext: { type, docId },
 }) => {
   return (
-    <Layout type={type} docId={doc}>
+    <Layout type={type} docId={docId}>
       <CategoryList type={type} />
     </Layout>
   );

diff --git a/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx b/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx
@@ -8,14 +8,14 @@ interface CategoryPageProps {
   pathContext: {
     type: PageType;
     category: string;
-    doc: string;
+    docId?: string;
   };
 }
 
 const CategoryPageTemplate: FC<CategoryPageProps> = ({
-  pathContext: { type, category, doc },
+  pathContext: { type, category, docId },
 }) => (
-  <Layout type={type} docId={doc}>
+  <Layout type={type} docId={docId}>
     <CategoryPage type={type} category={category} />
   </Layout>
 );

diff --git a/integrations/gatsby-theme-stories/src/templates/DocHome.tsx b/integrations/gatsby-theme-stories/src/templates/DocHome.tsx
@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+
+import { PageType, defPageType } from '@component-controls/core';
+import { DocumentHomePage } from '@component-controls/app';
+import { Layout } from '../components/Layout';
+
+interface PageListProps {
+  pathContext: {
+    type: PageType;
+    docId?: string;
+  };
+}
+
+const DocHomeTemplate: FC<PageListProps> = ({
+  pathContext: { type = defPageType, docId },
+}) => {
+  return (
+    <Layout docId={docId} type={type}>
+      <DocumentHomePage type={type} />
+    </Layout>
+  );
+};
+
+export default DocHomeTemplate;
diff --git a/integrations/gatsby-theme-stories/src/templates/DocPage.tsx b/integrations/gatsby-theme-stories/src/templates/DocPage.tsx
@@ -5,17 +5,18 @@ import { Layout } from '../components/Layout';
 
 interface DocPageProps {
   pathContext: {
-    doc: string;
+    docId?: string;
+    storyId?: string;
     type: PageType;
     activeTab?: string;
   };
 }
 
 const DocPageTemplate: FC<DocPageProps> = ({
-  pathContext: { doc, type, activeTab },
+  pathContext: { docId, storyId, type, activeTab },
 }) => {
   return (
-    <Layout docId={doc} type={type}>
+    <Layout docId={docId} storyId={storyId} type={type}>
       <DocPage activeTab={activeTab} type={type} />
     </Layout>
   );