feat: blogging and pages support

ccontrols · Jun 8, 2020 · 5aa62e5 · 5aa62e5
1 parent c284170
commit 5aa62e5
Show file tree

Hide file tree

Showing 37 changed files with 362 additions and 185 deletions.
diff --git a/core/loader/src/store.ts b/core/loader/src/store.ts
@@ -2,6 +2,7 @@ import {
   StoryComponents,
   StoryPackages,
   Configuration,
+  StoriesDoc,
 } from '@component-controls/specification';
 import { LoadingDocStore } from '@component-controls/instrument';
 export interface LoadingStore {
@@ -23,12 +24,30 @@ export interface LoadingStore {
   stores: (Partial<Pick<LoadingDocStore, 'stories' | 'doc'>> & {
     filePath: string;
   })[];
+  getDocs: () => StoriesDoc[];
+  getBlogs: () => StoriesDoc[];
 }
-export const store: LoadingStore = {
-  stores: [],
-  components: {},
-  packages: {},
-};
+
+class Store implements LoadingStore {
+  stores: LoadingStore['stores'] = [];
+  components: LoadingStore['components'] = {};
+  packages: LoadingStore['packages'] = {};
+  config: LoadingStore['config'] = {};
+  getDocs = () =>
+    this.stores
+      .filter(
+        store =>
+          store?.doc &&
+          (store.doc?.type === undefined || store.doc?.type === 'story'),
+      )
+      .map(store => store.doc as StoriesDoc);
+  getBlogs = () =>
+    this.stores
+      .filter(store => store?.doc && store.doc?.type === 'blog')
+      .map(store => store.doc as StoriesDoc);
+}
+
+export const store = new Store();
 
 export const reserveStories = (filePaths: string[]) => {
   if (store.stores.length === 0) {

diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts
@@ -62,7 +62,23 @@ export interface Configuration {
     /**
      * base url path for API documentation pages. Default is "docs/"
      */
-    basePath?: string;
+    docsPath?: string;
+
+    /**
+     * Label for docs menu. Default is Docs
+     */
+    docsLabel?: string;
+
+    /**
+     * base url path for blogs pages. Default is "blogs/"
+     */
+    blogsPath?: string;
+
+    /**
+     * Label for blog menu. Default is Blog
+     */
+    blogsLabel?: string;
+
     /**
      * story sorting function
      */

diff --git a/core/specification/src/stories.ts b/core/specification/src/stories.ts
@@ -159,7 +159,10 @@ export interface StoriesDoc {
    * title of the groups of stories contained in the doc file. used to generate story ids
    */
   title: string;
-
+  /**
+   * document type - blogs a and stories. By default - storie
+   */
+  type?: 'story' | 'blog' | 'page';
   /**
    * list of stories contained in the file/groups
    */

diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts
@@ -1,4 +1,9 @@
-import { StoriesStore, Configuration } from '@component-controls/specification';
+import {
+  StoriesStore,
+  StoryDocs,
+  StoriesDoc,
+  Configuration,
+} from '@component-controls/specification';
 import { BroadcastChannel } from 'broadcast-channel';
 import {
   StoreObserver,
@@ -30,6 +35,9 @@ export class Store implements StoryStore {
   private channel: BroadcastChannel | undefined;
   private observers: StoreObserver[];
   private moduleId: number;
+  private _docs: StoryDocs = {};
+  private _blogs: StoryDocs = {};
+
   private _firstStory: string | undefined;
   private _firstDoc: string | undefined;
   /**
@@ -41,7 +49,7 @@ export class Store implements StoryStore {
     this.loadedStore = store;
     this.updateLocalStorage = updateLocalStorage;
     this.observers = [];
-    this.sortDocs();
+    this.initDocs();
     if (updateLocalStorage) {
       this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
         type: 'localstorage',
@@ -62,9 +70,10 @@ export class Store implements StoryStore {
   }
 
   /**
-   * sort documents if a sortfunction is provided
+   * sort documents if a sortfunction is provided.
+   * separate docs and blogs
    */
-  sortDocs = () => {
+  initDocs = () => {
     if (this.loadedStore) {
       const docs: string[] = Object.keys(this.loadedStore.docs || []);
       const { options } = this.loadedStore.config || {};
@@ -96,6 +105,28 @@ export class Store implements StoryStore {
         //point to first story of first doc
         this._firstStory = doc.stories?.[0];
       }
+      if (this.loadedStore.docs) {
+        this._docs = Object.keys(this.loadedStore.docs).reduce(
+          (acc: StoryDocs, key: string) => {
+            const doc: StoriesDoc | undefined = this.loadedStore?.docs[key];
+            if (doc && (doc.type === undefined || doc.type === 'story')) {
+              return { ...acc, [key]: doc };
+            }
+            return acc;
+          },
+          {},
+        );
+        this._blogs = Object.keys(this.loadedStore.docs).reduce(
+          (acc: StoryDocs, key: string) => {
+            const doc: StoriesDoc | undefined = this.loadedStore?.docs[key];
+            if (doc && doc.type === 'blog') {
+              return { ...acc, [key]: doc };
+            }
+            return acc;
+          },
+          {},
+        );
+      }
     }
   };
   /**
@@ -157,10 +188,9 @@ export class Store implements StoryStore {
   /**
    * returns all the documentation files
    */
-  getDocs = () => {
-    const store = this.getStore();
-    return store ? store.docs : undefined;
-  };
+  getDocs = () => this._docs;
+
+  getBlogs = () => this._blogs;
 
   get config(): Configuration | undefined {
     return this.loadedStore?.config;
@@ -174,8 +204,8 @@ export class Store implements StoryStore {
 
   getDocPath = (name: string): string => {
     const doc = this.getStoryDoc(name);
-    const basePath = this.config?.options?.basePath || '';
-    return doc ? doc.route || `/${basePath}${name.toLowerCase()}/` : '';
+    const docsPath = this.config?.options?.docsPath || '';
+    return doc ? doc.route || `/${docsPath}${name.toLowerCase()}/` : '';
   };
 
   getStoryPath = (storyId: string): string => {
@@ -184,9 +214,9 @@ export class Store implements StoryStore {
       return '';
     }
     const doc = this.getStoryDoc(story?.doc || '');
-    const basePath = this.config?.options?.basePath || '';
+    const docsPath = this.config?.options?.docsPath || '';
     return doc
-      ? doc.route || `/${basePath}${doc.title.toLowerCase()}/#${story.id}`
+      ? doc.route || `/${docsPath}${doc.title.toLowerCase()}/#${story.id}`
       : '';
   };
 

diff --git a/core/store/src/types.ts b/core/store/src/types.ts
@@ -16,7 +16,8 @@ export interface StoryStore {
   getStore: () => StoriesStore | undefined;
   getStory: (storyId: string) => Story | undefined;
   getStoryDoc: (name: string) => StoryDocs | undefined;
-  getDocs: () => StoryDocs | undefined;
+  getDocs: () => StoryDocs;
+  getBlogs: () => StoryDocs;
   config: Configuration | undefined;
   firstStory: string | undefined;
   firstDoc: string | undefined;
@@ -51,6 +52,9 @@ export const defaultConfig: Configuration = {
       'Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.',
     siteLanguage: 'en',
     author: '@component-controls',
-    basePath: 'docs/',
+    docsPath: 'docs/',
+    docsLabel: 'Docs',
+    blogsPath: 'blogs/',
+    blogsLabel: 'Blog',
   },
 };
diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -32,7 +32,7 @@ export const react: Configuration = {
         ],
       },
       {
-        test: /\.(stories|story).mdx$/,
+        test: /\.mdx$/,
         exclude: [/node_modules/],
         use: [
           {
@@ -44,27 +44,20 @@ export const react: Configuration = {
               ],
             },
           },
-        ],
-      },
-      {
-        test: /\.mdx$/,
-        exclude: /\.(stories|story).mdx$/,
-        use: [
           {
-            loader: 'babel-loader',
+            loader: '@component-controls/loader/loader',
             options: {
-              presets: [
-                [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
-              ],
+              mdx: {
+                transformMDX: true,
+              },
             },
           },
         ],
       },
       {
-        test: /\.(story|stories).(js|jsx|ts|tsx|mdx)$/,
+        test: /\.(story|stories).(js|jsx|ts|tsx)$/,
         loader: '@component-controls/loader/loader',
         exclude: [/node_modules/],
-        enforce: 'pre',
         options: {
           mdx: {
             transformMDX: true,

diff --git a/examples/gatsby/.config/main.js b/examples/gatsby/.config/main.js
@@ -1,6 +1,7 @@
 module.exports = {
   stories: [
-    '../../stories/src/**/*.stories.(js|jsx|tsx|mdx)',
+    '../../stories/src/blogs/*.mdx',
+    '../../stories/src/stories/*.stories.(js|jsx|tsx|mdx)',
     '../src/stories/*.stories.(js|jsx|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)',
   ],

diff --git a/examples/gatsby/.config/runtime.js b/examples/gatsby/.config/runtime.js
@@ -9,7 +9,7 @@ module.exports = {
     siteDescription: `Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.`,
     siteLanguage: `en`,
     author: `@atanasster`,
-    basePath: 'docs/',
+    docsPath: 'docs/',
 
     storySort: (a, b) => {
       const aDoc = a.split('/')[0];

diff --git a/examples/stories/src/blogs/custom-docs-pages.mdx b/examples/stories/src/blogs/custom-docs-pages.mdx
@@ -0,0 +1,11 @@
+---
+title: Custom documentation pages for storybookjs
+type: blog
+---
+
+
+# Overview
+
+[@component-controls/storybook-custom-docs](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs) makes it possible to add an unlimited number of custom documentation pages to storybook.
+
+![integrated in storybook](https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/images/component-controls.gif)
diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import { jsx } from 'theme-ui';
 import { Global } from '@emotion/core';
 import { ThemeProvider } from '@component-controls/components';
@@ -9,23 +9,24 @@ import {
   LinkContextProvider,
 } from '@component-controls/app-components';
 import { BlockContextProvider } from '@component-controls/blocks';
-import { Store } from '@component-controls/store';
+import { loadStoryStore, Store } from '@component-controls/store';
+const bundle = require('@component-controls/webpack-compile/bundle');
 import { GatsbyLink } from './GatsbyLink';
-import { PagesConfig } from './types';
 
 interface LayoutProps {
-  title?: string;
-  storyStore: Store;
-  docTitle: string;
-  pages: PagesConfig;
+  docId: string;
 }
 
-export const Layout: FC<LayoutProps> = ({
-  pages: pagesFn,
-  title,
-  storyStore,
-  docTitle,
-}) => {
+export const Layout: FC<LayoutProps> = ({ docId, children }) => {
+  const storyStore = useMemo(
+    () =>
+      new Store({
+        store: loadStoryStore(bundle),
+        updateLocalStorage: false,
+      }),
+    [],
+  );
+
   return (
     <ThemeProvider>
       <Global
@@ -35,10 +36,10 @@ export const Layout: FC<LayoutProps> = ({
           },
         })}
       />
-      <BlockContextProvider docId={docTitle} store={storyStore}>
+      <BlockContextProvider docId={docId} store={storyStore}>
         <SidebarContextProvider>
           <LinkContextProvider linkClass={GatsbyLink}>
-            <App title={title} pagesFn={pagesFn} />
+            <App title={docId}>{children}</App>
           </LinkContextProvider>
         </SidebarContextProvider>
       </BlockContextProvider>