fix: navigate to first doc page if none

ccontrols · Jun 6, 2020 · acadb8f · acadb8f
1 parent 1508a1c
commit acadb8f
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -78,11 +78,13 @@ There are many developments that have contributed to the creation of `component-
 
 # Showcase sites
 
--   [Storybook 6](https://components-storybook-6.netlify.app/)
+-   [Gatsby](https://component-controls-gatsby.netlify.app)
 
 -   [Storybook 6 without addon-docs](https://components-storybook-6-no-docs.netlify.app/?path=/story/storybook-starter--overview)
 
--   [Custom docs pages](https://custom-pages-storybook-6.netlify.app)
+-   [Storybook 6](https://components-storybook-6.netlify.app/)
+
+-   [Storybook custom docs pages](https://custom-pages-storybook-6.netlify.app)
 
 # Integrations
 

diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts
@@ -31,6 +31,7 @@ export class Store implements StoryStore {
   private observers: StoreObserver[];
   private moduleId: number;
   private _firstStory: string | undefined;
+  private _firstDoc: string | undefined;
   /**
    * create a store with options
    */
@@ -83,13 +84,17 @@ export class Store implements StoryStore {
             {},
           );
       }
+
       const sortedDocs = Object.keys(this.loadedStore.docs);
-      if (this.loadedStore.docs && sortedDocs.length > 0) {
-        const firstDoc = this.loadedStore.docs[sortedDocs[0]];
-        if (firstDoc.stories && firstDoc.stories.length) {
-          //point tot first story of first doc
-          this._firstStory = firstDoc.stories[0];
-        }
+      this._firstDoc = sortedDocs.find(name => {
+        //@ts-ignore
+        const doc = this.loadedStore.docs[name];
+        return doc.stories && doc.stories.length;
+      });
+      if (this._firstDoc) {
+        const doc = this.loadedStore.docs[this._firstDoc];
+        //point to first story of first doc
+        this._firstStory = doc.stories?.[0];
       }
     }
   };
@@ -163,6 +168,9 @@ export class Store implements StoryStore {
   get firstStory(): string | undefined {
     return this._firstStory;
   }
+  get firstDoc(): string | undefined {
+    return this._firstDoc;
+  }
 
   /**
    * modify story properties, for example controls values.

diff --git a/core/store/src/types.ts b/core/store/src/types.ts
@@ -19,6 +19,7 @@ export interface StoryStore {
   getDocs: () => StoryDocs | undefined;
   config: Configuration | undefined;
   firstStory: string | undefined;
+  firstDoc: string | undefined;
   updateStoryProp: (
     storyId: string,
     propName: string,

diff --git a/integrations/gatsby-theme-stories/src/components/Header.tsx b/integrations/gatsby-theme-stories/src/components/Header.tsx
diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -16,7 +16,6 @@ import { PagesConfig } from './types';
 interface LayoutProps {
   title?: string;
   storyStore: Store;
-  storyId?: string;
   docTitle: string;
   pages: PagesConfig;
 }
@@ -25,10 +24,8 @@ export const Layout: FC<LayoutProps> = ({
   pages: pagesFn,
   title,
   storyStore,
-  storyId,
   docTitle,
 }) => {
-  const story = storyId || storyStore?.firstStory;
   return (
     <ThemeProvider>
       <Global
@@ -38,7 +35,7 @@ export const Layout: FC<LayoutProps> = ({
           },
         })}
       />
-      <BlockContextProvider storyId={story} docId={docTitle} store={storyStore}>
+      <BlockContextProvider docId={docTitle} store={storyStore}>
         <SidebarContextProvider>
           <LinkContextProvider linkClass={GatsbyLink}>
             <App title={title} pagesFn={pagesFn} />

diff --git a/ui/blocks/src/context/block/BlockContext.tsx b/ui/blocks/src/context/block/BlockContext.tsx
@@ -57,21 +57,22 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
   store,
   options,
 }) => {
+  const pageId = storyId || docId ? docId : store.firstDoc;
   return (
     <ErrorBoundary>
       <RecoilRoot>
         <BlockContext.Provider
           value={{
             storyId,
-            docId,
+            docId: pageId,
             storeProvider: store,
             options,
           }}
         >
           <BlockDataContextProvider
             store={store}
             storyId={storyId}
-            docId={docId}
+            docId={pageId}
           >
             <BlockControlsContextProvider store={store}>
               {children}