chore: gatsby production builds

core/store/src/Store/Store.ts

@@ -30,7 +30,7 @@ export class Store implements StoryStore {
   private channel: BroadcastChannel | undefined;
   private observers: StoreObserver[];
   private moduleId: number;
-
+  private _firstStory: string | undefined;
   /**
    * create a store with options
    */
@@ -40,6 +40,7 @@ export class Store implements StoryStore {
     this.loadedStore = store;
     this.updateLocalStorage = updateLocalStorage;
     this.observers = [];
+    this.sortDocs();
     if (updateLocalStorage) {
       this.channel = new BroadcastChannel<MessageType>(UPDATE_STORY_MSG, {
         type: 'localstorage',
@@ -58,6 +59,40 @@ export class Store implements StoryStore {
       };
     }
   }
+
+  /**
+   * sort documents if a sortfunction is provided
+   */
+  sortDocs = () => {
+    if (this.loadedStore) {
+      const docs: string[] = Object.keys(this.loadedStore.docs || []);
+      const { options } = this.loadedStore.config || {};
+      if (options && options.storySort) {
+        this.loadedStore.docs = docs
+          .sort((a: string, b: string) => {
+            //@ts-ignore
+            const sort = options.storySort(a, b);
+            if (sort !== 0) {
+              return sort;
+            }
+            return docs.indexOf(a) - docs.indexOf(b);
+          })
+          .reduce(
+            //@ts-ignore
+            (acc, key) => ({ ...acc, [key]: this.loadedStore.docs[key] }),
+            {},
+          );
+      }
+      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];
+        }
+      }
+    }
+  };
   /**
    * add observer callback function
    */
@@ -125,6 +160,10 @@ export class Store implements StoryStore {
   get config(): Configuration | undefined {
     return this.loadedStore?.config;
   }
+  get firstStory(): string | undefined {
+    return this._firstStory;
+  }
+
   /**
    * modify story properties, for example controls values.
    * will notify all installed store observers of the changed story.

core/store/src/types.ts

@@ -18,6 +18,7 @@ export interface StoryStore {
   getStoryDoc: (name: string) => StoryDocs | undefined;
   getDocs: () => StoryDocs | undefined;
   config: Configuration | undefined;
+  firstStory: string | undefined;
   updateStoryProp: (
     storyId: string,
     propName: string,

core/webpack-configs/src/react/index.ts

@@ -1,6 +1,7 @@
 import { Configuration } from 'webpack';
 
 export const react: Configuration = {
+  performance: { hints: false },
   module: {
     rules: [
       {

examples/storybook-6-no-docs/package.json

@@ -16,8 +16,8 @@
     "babel-preset-react-app": "^9.0.0",
     "cross-env": "^5.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "typescript": "^3.8.3"
   },
   "devDependencies": {

examples/storybook-6/package.json

@@ -19,8 +19,8 @@
     "babel-preset-react-app": "^9.0.0",
     "cross-env": "^5.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "typescript": "^3.8.3"
   },
   "devDependencies": {

integrations/gatsby-theme-stories/src/components/Header.tsx

@@ -39,7 +39,7 @@ export const Header: FC<HeaderProps> = () => {
           <GatsbyLink to="/">
             <Text sx={{ px: 2 }}>Home</Text>
           </GatsbyLink>
-          <GatsbyLink to="/docs">
+          <GatsbyLink to="/docs/">
             <Text sx={{ px: 2 }}>Docs</Text>
           </GatsbyLink>
         </Flex>

integrations/gatsby-theme-stories/src/components/Layout.tsx

@@ -15,7 +15,7 @@ import { PagesConfig } from './types';
 interface LayoutProps {
   title?: string;
   storyStore: Store;
-  storyId: string;
+  storyId?: string;
   docPath: string;
   pages: PagesConfig;
 }
@@ -27,6 +27,7 @@ export const Layout: FC<LayoutProps> = ({
   storyId,
   docPath,
 }) => {
+  const story = storyId || storyStore?.firstStory;
   return (
     <ThemeProvider>
       <Global
@@ -40,7 +41,7 @@ export const Layout: FC<LayoutProps> = ({
       <SidebarContextProvider>
         <Header title={title}></Header>
         <Flex sx={{ flexDirection: 'row' }}>
-          <BlockContextProvider storyId={storyId} store={storyStore}>
+          <BlockContextProvider storyId={story} store={storyStore}>
             <Sidebar docPath={docPath} />
             <Page pagesFn={pagesFn} />
           </BlockContextProvider>

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -3,68 +3,47 @@ import {
   watch,
   CompileProps,
 } from '@component-controls/webpack-compile';
-import { NodePluginArgs, NodeInput, CreatePagesArgs } from 'gatsby';
+import { CreatePagesArgs } from 'gatsby';
 import { LoaderOptions } from './types';
 
 const defaultPresets = ['react', 'react-docgen-typescript'];
 
-exports.sourceNodes = async function sourceNodes(
-  { actions, createContentDigest, createNodeId }: NodePluginArgs,
+exports.createPages = async (
+  { actions }: CreatePagesArgs,
   options: LoaderOptions,
-) {
-  const { createNode } = actions;
+) => {
+  const { createPage } = actions;
   const config: CompileProps = {
     webPack: options.webpack,
     presets: defaultPresets,
     configPath: options.configPath,
   };
-  const { store } = true ? await watch(config) : await compile(config);
-
+  const { store } =
+    process.env.NODE_ENV === 'development'
+      ? await watch(config)
+      : await compile(config);
   if (store) {
     store.stores.forEach(s => {
-      //@ts-ignore
       const doc = s.doc;
-
-      const docMetadata: NodeInput = {
-        id: createNodeId(`storyDoc-${doc?.title}`),
-        children: [],
-        internal: {
-          type: 'storyDoc',
-          content: JSON.stringify(doc),
-          contentDigest: createContentDigest(doc),
-        },
-      };
-
-      const nodeDoc = Object.assign({}, doc, docMetadata);
-      createNode(nodeDoc);
-    });
-  }
-};
-
-exports.createPages = async ({ graphql, actions }: CreatePagesArgs) => {
-  const stories = await graphql<{
-    allStoryDoc: any;
-  }>(`
-    query {
-      allStoryDoc {
-        edges {
-          node {
-            title
-          }
-        }
+      if (doc) {
+        createPage({
+          path: `/docs/${doc.title.toLowerCase()}`,
+          component: require.resolve(`../src/templates/StoryPage.tsx`),
+          context: {
+            doc: doc.title,
+          },
+        });
       }
-    }
-  `);
-  const { createPage } = actions;
-  if (stories.data) {
-    stories.data.allStoryDoc.edges.forEach(({ node }: any) => {
-      createPage({
-        path: `/docs/${node.title}`,
-        component: require.resolve(`../src/templates/StoryPage.tsx`),
-        context: {
-          doc: node.title,
-        },
-      });
+    });
+    createPage({
+      path: `/`,
+      component: require.resolve(`../src/templates/StoryPage.tsx`),
+      context: {},
+    });
+    createPage({
+      path: `/docs/`,
+      component: require.resolve(`../src/templates/StoryPage.tsx`),
+      context: {},
     });
   }
 };

integrations/gatsby-theme-stories/src/templates/StoryPage.tsx

@@ -27,7 +27,7 @@ const SitePage: FC<SitePageProps> = ({ pathContext: { doc } }) => {
       title={doc}
       storyStore={storyStore}
       docPath={doc}
-      storyId={docFile?.stories?.[0] || ''}
+      storyId={docFile?.stories?.[0] || undefined}
       pages={pages}
     />
   );

misc/storybook-custom-docs/package.json

@@ -35,8 +35,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "@storybook/addons": "next",
@@ -51,8 +51,8 @@
     "@storybook/api": "*",
     "@storybook/client-api": "*",
     "@storybook/core-events": "*",
-    "react": "*",
-    "react-dom": "*"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "publishConfig": {
     "access": "public"

ui/app-components/package.json

@@ -32,8 +32,8 @@
   "dependencies": {
     "@component-controls/components": "^1.2.0",
     "@primer/octicons-react": "^9.6.0",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "theme-ui": "^0.3.1",
     "@theme-ui/match-media": "^0.3.1"
   },
@@ -46,8 +46,8 @@
   },
   "peerDependencies": {
     "@primer/octicons-react": "*",
-    "react": "*",
-    "react-dom": "*",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "theme-ui": "*"
   },
   "publishConfig": {

ui/app-components/src/Sidebar/SidebarContext.tsx

@@ -31,13 +31,12 @@ export const SidebarContextProvider: FC<SidebarContextProviderProps> = ({
   const [collapsed, setCollapsed] = React.useState<boolean | undefined>(
     undefined,
   );
-  const size: number = useBreakpointIndex();
+  const size: number = useBreakpointIndex({ defaultIndex: 2 });
   useEffect(() => {
     if (collapsible) {
       setCollapsed(size <= 1);
     }
   }, [size, collapsible]);
-
   const SidebarToggle: FC<SidebarToggleProps> = ({ icon, ...rest }) => {
     return collapsible ? (
       <Button

ui/app/package.json

@@ -34,8 +34,8 @@
     "@component-controls/blocks": "^1.2.0",
     "@component-controls/specification": "^1.2.0",
     "qs": "^6.9.4",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "theme-ui": "^0.3.1",
     "@theme-ui/match-media": "^0.3.1"
   },
@@ -48,8 +48,8 @@
     "jest": "^24.9.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "theme-ui": "*"
   },
   "publishConfig": {

ui/app/src/Page/Page.tsx

@@ -17,7 +17,7 @@ export interface PageProps {
   pagesFn: PagesConfig;
 }
 export const Page: FC<PageProps> = ({ pagesFn }) => {
-  const pages = pagesFn('');
+  const pages = typeof pagesFn === 'function' ? pagesFn('') : [];
   const pageRef = useRef<HTMLDivElement>(null);
   const params =
     typeof window !== 'undefined'

ui/app/src/Sidebar/Sidebar.tsx

@@ -49,7 +49,7 @@ const createMenuItem = (
     } else {
       newItem.id = allLevels.join('/');
       //@ts-ignore
-      newItem.to = `/docs/${allLevels.join('/')}`;
+      newItem.to = `/docs/${allLevels.join('/').toLowerCase()}/`;
     }
     parent.push(newItem);
   }
@@ -65,21 +65,8 @@ export const Sidebar: FC<SidebarProps> = ({ docPath, buttonClass, title }) => {
   const { storeProvider } = useContext(BlockContext);
   const menuItems = useMemo(() => {
     if (storeProvider) {
-      const { options } = storeProvider.config || {};
-
       const docs: string[] = Object.keys(storeProvider.getDocs() || []);
-      const sortedDocs =
-        options && options.storySort
-          ? docs.sort((a: string, b: string) => {
-              //@ts-ignore
-              const sort = options.storySort(a, b);
-              if (sort !== 0) {
-                return sort;
-              }
-              return docs.indexOf(a) - docs.indexOf(b);
-            })
-          : docs;
-      const menuItems = sortedDocs.reduce((acc: MenuItems, doc: string) => {
+      const menuItems = docs.reduce((acc: MenuItems, doc: string) => {
         const levels = doc.split('/');
         createMenuItem(levels, levels, acc);
         return acc;

ui/blocks/package.json

@@ -41,8 +41,8 @@
     "copy-to-clipboard": "^3.2.1",
     "global": "^4.3.2",
     "js-string-escape": "^1.0.1",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-table": "^7.0.0",
     "recoil": "^0.0.7",
     "stringify-object": "^3.3.0",
@@ -60,8 +60,8 @@
   },
   "peerDependencies": {
     "@primer/octicons-react": "*",
-    "react": "*",
-    "react-dom": "*",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-table": "*",
     "theme-ui": "*"
   },