feat: added page container wrapper, pagination

core/core/package.json

@@ -33,6 +33,7 @@
     "deepmerge": "^4.2.2",
     "escape-html": "^1.0.3",
     "faker": "^4.1.0",
+    "react": "^16.13.1",
     "typescript": "^3.8.3"
   },
   "devDependencies": {
@@ -43,6 +44,9 @@
     "jest": "^24.9.0",
     "webpack": "^4.43.0"
   },
+  "peerDependencies": {
+    "react": "^16.13.1"
+  },
   "publishConfig": {
     "access": "public"
   },

core/core/src/configuration.ts

@@ -1,4 +1,5 @@
 import { Configuration as WebpackConfiguration } from 'webpack';
+import { ComponentType } from 'react';
 import { StoryRenderFn } from './utility';
 
 export type PageType = 'story' | 'blog' | 'page' | 'tags' | 'author';
@@ -128,6 +129,11 @@ export interface RunOnlyConfiguration {
    * story sorting function
    */
   storySort?: (a: string, b: string) => number;
+
+  /**
+   * page container react component
+   */
+  container?: ComponentType;
 }
 
 export type RunConfiguration = RunOnlyConfiguration &

core/core/src/stories.ts

@@ -258,9 +258,14 @@ export interface StoriesDoc {
   sidebars?: boolean;
 
   /**
-   *  optional date the document was created
+   *  optional date the document was created. If not assigned, the instrumentation process will use birthtime
    */
-  date?: string;
+  date?: Date;
+
+  /**
+   *  optional date the document was last modified. If not assigned, the instrumentation process will use mtime
+   */
+  dateModified?: Date;
 
   /**
    *  comma-separated list of document tags, used for search
@@ -276,10 +281,14 @@ export interface StoriesDoc {
    * document author
    */
   author?: string;
-
-  [name: string]: any;
 }
 
+export const dateToLocalString = (date?: Date): string =>
+  date
+    ? new Date(date).toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+      })
+    : '';
 /**
  * list of components used in stories
  */

core/instrument/src/index.ts

@@ -1,4 +1,5 @@
 import * as parser from '@babel/parser';
+import * as fs from 'fs';
 import mdx from '@mdx-js/mdx';
 import matter from 'gray-matter';
 import { File } from '@babel/types';
@@ -102,6 +103,9 @@ const parseSource = async (
       store.packages[storyPackage.fileHash] = storyPackage;
       doc.package = storyPackage.fileHash;
     }
+    const stats = fs.statSync(filePath);
+    doc.dateModified = doc.dateModified || stats.mtime;
+    doc.date = doc.date || stats.birthtime;
   }
   for (const key of Object.keys(store.stories)) {
     const story: Story = store.stories[key];

core/loader/src/loader.ts

@@ -1,8 +1,7 @@
 import * as fs from 'fs';
-import * as path from 'path';
 import * as chalk from 'chalk';
 import { getOptions } from 'loader-utils';
-import { loader } from 'webpack';
+
 import {
   InstrumentOptions,
   parseStories,
@@ -12,7 +11,6 @@ import { addStoriesDoc } from './store';
 
 module.exports.pitch = async function() {
   const options: InstrumentOptions = getOptions(this) || {};
-  const context = this as loader.LoaderContext;
   const filePath = this.resource;
   const source = fs.readFileSync(filePath, 'utf8');
   const { transformed, ...store } = await parseStories(
@@ -21,8 +19,6 @@ module.exports.pitch = async function() {
     options,
   );
   if (store) {
-    const relPath = path.relative(context.rootContext, filePath);
-    const moduleId = relPath.startsWith('.') ? relPath : `./${relPath}`;
     if (store.doc) {
       console.log(chalk.bgRgb(244, 147, 66)('@loaded: '), filePath);
       addStoriesDoc(filePath, {
@@ -32,7 +28,6 @@ module.exports.pitch = async function() {
         doc: {
           ...store.doc,
           fileName: filePath,
-          moduleId: moduleId,
         },
       });
     }

core/loader/src/store.ts

@@ -58,6 +58,7 @@ class Store implements LoadingStore {
   getUniquesByField = (field: string) => {
     return this.stores.reduce((acc: { [key: string]: number }, store) => {
       if (store?.doc) {
+        //@ts-ignore
         const value = store.doc[field];
         const values = Array.isArray(value) ? value : [value];
         values.forEach(v => {

core/store/src/Store/Store.ts

@@ -196,13 +196,40 @@ export class Store implements StoryStore {
     }
     return [];
   };
+  getPrevPage = (
+    type: PageType | undefined,
+    docId: string,
+  ): StoriesDoc | undefined => {
+    if (docId) {
+      const pages = this.getPageList(type);
+      const index = pages.findIndex(p => p.title === docId);
+      if (index > 0) {
+        return pages[index - 1];
+      }
+    }
+    return undefined;
+  };
+  getNextPage = (
+    type: PageType | undefined,
+    docId: string,
+  ): StoriesDoc | undefined => {
+    if (docId) {
+      const pages = this.getPageList(type);
+      const index = pages.findIndex(p => p.title === docId);
+      if (index >= 0 && index < pages.length - 1) {
+        return pages[index + 1];
+      }
+    }
+    return undefined;
+  };
 
   getPagesByCategory = (category: string, value?: any): Pages => {
     if (this.loadedStore?.docs) {
       const docs = this.loadedStore?.docs;
       return Object.keys(docs)
         .filter(key => {
           const doc = docs[key];
+          //@ts-ignore
           const cateValue = doc[category];
           if (value === undefined) {
             return cateValue !== undefined;
@@ -221,6 +248,7 @@ export class Store implements StoryStore {
         this._categoryItems[category] = Object.keys(docs).reduce(
           (acc: { [key: string]: number }, key) => {
             const doc = docs[key];
+            //@ts-ignore
             const value = doc[category];
             const values = Array.isArray(value) ? value : [value];
             values.forEach(v => {

core/store/src/serialization/load-store.ts

@@ -49,7 +49,6 @@ export const loadStoryStore = (
               source,
               component,
               fileName,
-              repository,
               components,
               excludeStories,
               includeStories,

core/store/src/types.ts

@@ -21,6 +21,14 @@ export interface StoryStore {
   getDocs: () => Pages;
   getBlogs: () => Pages;
   getPageList: (type: PageType) => Pages;
+  getPrevPage: (
+    type: PageType | undefined,
+    docId: string,
+  ) => StoriesDoc | undefined;
+  getNextPage: (
+    type: PageType | undefined,
+    docId: string,
+  ) => StoriesDoc | undefined;
   getPagesByCategory: (category: string, value?: any) => Pages;
   getUniquesByCategory: (category: string) => { [key: string]: number };
   config: RunConfiguration | undefined;

examples/gatsby/.config/runtime.js

@@ -1,6 +1,8 @@
+import { Container } from "@component-controls/app";
 const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
 
 module.exports = {
+  container: Container,
   siteTitle: `Component controls`,
   siteTitleAlt: `Component controls - https://github.com/ccontrols/component-controls`,
   siteHeadline: `Component controls gatsby`,

examples/stories/src/blogs/custom-docs-pages.mdx

@@ -1,7 +1,7 @@
 ---
 title: Custom documentation pages for storybookjs
 type: blog
-date: 2019-11-07
+date: 2020-04-27
 author: atanasster
 description: Storybookjs plugin that overcomes some "docs page" storybook architecture flaws to display multiple documentation pages.
 tags:

ui/app/src/App/App.tsx

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import { FC, Fragment } from 'react';
+import { FC, Fragment, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { SkipLinks, SkiLinksItemProps } from '@component-controls/components';
-import { useStoryContext } from '@component-controls/blocks';
+import { BlockContext } from '@component-controls/blocks';
 import { SEO } from '../SEO';
 import { Header } from '../Header';
 import { Footer } from '../Footer';
@@ -19,7 +19,8 @@ export interface AppProps {
  *
  */
 export const App: FC<AppProps> = ({ title, children }) => {
-  const { doc } = useStoryContext({ id: '.' });
+  const { storeProvider, docId } = useContext(BlockContext);
+  const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
   const items: SkiLinksItemProps[] = [
     {
       target: 'content',
@@ -43,6 +44,7 @@ export const App: FC<AppProps> = ({ title, children }) => {
       <SkipLinks items={items} />
       <Box variant="app">
         <Header />
+
         {children}
         <Footer />
       </Box>

ui/app/src/CategoryList/CategoryList.tsx

@@ -3,7 +3,8 @@ import { FC, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { PageType } from '@component-controls/core';
 import { Title } from '@component-controls/components';
-import { PageContainer, BlockContext } from '@component-controls/blocks';
+import { BlockContext } from '@component-controls/blocks';
+import { PageContainer } from '../PageContainer';
 import { CategoryListItem } from './CategoryListItem';
 
 export interface CategoryListProps {

ui/app/src/CategoryPage/CategoryPage.tsx

@@ -3,7 +3,8 @@ import { FC, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { PageType } from '@component-controls/core';
 import { Title, Link } from '@component-controls/components';
-import { PageContainer, BlockContext } from '@component-controls/blocks';
+import { BlockContext } from '@component-controls/blocks';
+import { PageContainer } from '../PageContainer';
 import { DocumentsList } from '../DocumentsList';
 
 export interface CategoryPageProps {

ui/app/src/Container/Container.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { MockContext } from '@component-controls/blocks';
+import { Container } from './Container';
+
+export default {
+  title: 'Application/Container',
+  component: Container,
+};
+
+export const overview = () => (
+  <MockContext storyId="id-of-story">
+    <Container />
+  </MockContext>
+);

ui/app/src/Container/Container.tsx

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx, Box } from 'theme-ui';
+import { FC } from 'react';
+import {
+  Pagination,
+  Container as BlocksContainer,
+} from '@component-controls/blocks';
+
+export const Container: FC = ({ children }) => {
+  return (
+    <Box variant="container.container">
+      <BlocksContainer>
+        {children}
+        <Box variant="container.pagination">
+          <Pagination />
+        </Box>
+      </BlocksContainer>
+    </Box>
+  );
+};

ui/app/src/Container/index.ts

@@ -0,0 +1 @@
+export * from './Container';

ui/app/src/DocPage/DocPage.tsx

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import { FC, useContext } from 'react';
 import { jsx } from 'theme-ui';
-import { PageContainer, BlockContext } from '@component-controls/blocks';
+import { BlockContext } from '@component-controls/blocks';
+import { PageContainer } from '../PageContainer';
 import { SidebarsPage, DocPageProps, PageConfig } from '../SidebarsPage';
 import { PageType } from '@component-controls/core';
 

ui/app/src/DocumentsList/DocumentsListItem.tsx

@@ -6,6 +6,7 @@ import {
   getDocPath,
   defPageType,
   RunConfiguration,
+  dateToLocalString,
 } from '@component-controls/core';
 import { Subtitle, Markdown, Tag, Link } from '@component-controls/components';
 import { TagsList } from '../TagsList';
@@ -60,9 +61,9 @@ export const DocumentsListItem: FC<PageListItemProps> = ({
       <Box variant="documentlistitem.info.container">
         <Box variant="documentlistitem.info.inner">
           {date ? (
-            <Box variant="documentlistitem.info.date">
-              {new Date(date).toDateString()}
-            </Box>
+            <Box variant="documentlistitem.info.date">{`created: ${dateToLocalString(
+              date,
+            )}`}</Box>
           ) : (
             ''
           )}

ui/app/src/PageContainer/PageContainer.tsx

@@ -0,0 +1,16 @@
+import React, { FC, useContext, forwardRef } from 'react';
+import {
+  BlockContext,
+  PageContainer as BlockPageContainer,
+  PageContainerProps,
+} from '@component-controls/blocks';
+import { Container as DefaultContainer } from '../Container';
+
+export const PageContainer: FC<Omit<
+  PageContainerProps,
+  'wrapper'
+>> = forwardRef((props, ref: React.Ref<HTMLDivElement>) => {
+  const { storeProvider } = useContext(BlockContext);
+  const { container = DefaultContainer } = storeProvider.config || {};
+  return <BlockPageContainer ref={ref} wrapper={container} {...props} />;
+});

ui/app/src/PageContainer/index.ts

@@ -0,0 +1 @@
+export * from './PageContainer';

ui/app/src/PageList/PageList.tsx

@@ -3,7 +3,8 @@ import { FC, useContext } from 'react';
 import { jsx } from 'theme-ui';
 import { PageType } from '@component-controls/core';
 import { Title } from '@component-controls/components';
-import { PageContainer, BlockContext } from '@component-controls/blocks';
+import { BlockContext } from '@component-controls/blocks';
+import { PageContainer } from '../PageContainer';
 import { DocumentsList } from '../DocumentsList';
 
 export interface PageListProps {

ui/app/src/Sidebar/Sidebar.tsx

@@ -88,9 +88,7 @@ export const Sidebar: FC<SidebarProps> = ({
       const menuItems = docs.reduce((acc: MenuItems, doc: StoriesDoc) => {
         const { title } = doc;
         const levels = title.split('/');
-        if (doc.menu !== false) {
-          createMenuItem(storeProvider, doc, type, levels, acc);
-        }
+        createMenuItem(storeProvider, doc, type, levels, acc);
         return acc;
       }, []);
       return menuItems;

ui/app/src/SidebarsPage/SidebarsMDXPage.tsx

@@ -2,8 +2,7 @@
 import { FC } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { PageType } from '@component-controls/core';
-import { PageContainer } from '@component-controls/blocks';
-
+import { PageContainer } from '../PageContainer';
 import { Sidebar } from '../Sidebar';
 
 export interface SidebarsMDXPageProps {

ui/app/src/SidebarsPage/SidebarsStoryPage.tsx

@@ -4,8 +4,7 @@ import { jsx, Box } from 'theme-ui';
 import * as qs from 'qs';
 import { PageType } from '@component-controls/core';
 import { Tabs, Tab, TabList, TabPanel } from '@component-controls/components';
-import { PageContainer } from '@component-controls/blocks';
-
+import { PageContainer } from '../PageContainer';
 import { SideContext } from '../SideContext';
 import { Sidebar } from '../Sidebar';