feat: display by kind

core/store/src/Store/Store.ts

@@ -106,6 +106,15 @@ export class Store implements StoryStore {
     return store ? store.stories[storyId] : undefined;
   };
 
+  /**
+   s* given a story file title (kind) return a story kind from the store
+   */
+
+  getStoryKind = (name: string) => {
+    const store = this.getStore();
+    return store ? store.kinds[name] : undefined;
+  };
+
   /**
    * modify story properties, for example controls values.
    * will notify all installed store observers of the changed story.

core/store/src/types.ts

@@ -1,4 +1,8 @@
-import { StoriesStore, Story } from '@component-controls/specification';
+import {
+  StoriesStore,
+  Story,
+  StoryKinds,
+} from '@component-controls/specification';
 
 /**
  * store on change observer.
@@ -10,6 +14,7 @@ export type StoreObserver = (storyId?: string, propName?: string) => void;
 export interface StoryStore {
   getStore: () => StoriesStore | undefined;
   getStory: (storyId: string) => Story | undefined;
+  getStoryKind: (name: string) => StoryKinds | undefined;
   updateStoryProp: (
     storyId: string,
     propName: string,

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

@@ -21,6 +21,7 @@ interface LayoutProps {
   title?: string;
   storyStore: Store;
   storyId: string;
+  kindPath: string;
   pages: PagesConfig;
 }
 
@@ -29,6 +30,7 @@ export const Layout: FC<LayoutProps> = ({
   title,
   storyStore,
   storyId,
+  kindPath,
 }) => {
   const pages = pagesFn ? pagesFn('') : null;
   return (
@@ -44,7 +46,7 @@ export const Layout: FC<LayoutProps> = ({
       <SidebarContextProvider>
         <Header title={title}></Header>
         <Flex sx={{ flexDirection: 'row' }}>
-          <Sidebar storyId={storyId} />
+          <Sidebar kindPath={kindPath} />
           <Container>
             <Tabs fontSize={16}>
               {pages && pages.length > 1 && (

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

@@ -3,7 +3,7 @@ import { FC, useState, useMemo, useContext } from 'react';
 import { jsx, Input, LinkProps, Box, Theme } from 'theme-ui';
 
 import { graphql, useStaticQuery, Link as GatsbyLink } from 'gatsby';
-import { Story } from '@component-controls/specification';
+import { StoriesKind } from '@component-controls/specification';
 import {
   Sidebar as AppSidebar,
   ColorMode,
@@ -24,25 +24,22 @@ const Link: FC<LinkProps> = props => (
     sx={{
       color: 'inherit',
       '&.active': {
-        backgroundColor: 'accent',
+        borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`,
         color: 'white',
       },
       ':hover': {
-        backgroundColor: 'accent',
+        backgroundColor: 'shadow',
       },
     }}
   />
 );
 export interface SidebarProps {
-  storyId?: string;
-}
-
-interface ConsolidateKinds {
-  [kind: string]: Story[];
+  kindPath?: string;
 }
 
 const createMenuItem = (
   levels: string[],
+  allLevels: string[],
   parent?: MenuItems,
   item?: MenuItem,
 ): MenuItem => {
@@ -55,56 +52,49 @@ const createMenuItem = (
   };
   const sibling = parent && parent.find(i => i.id === newItem.id);
   if (parent && !sibling) {
-    newItem.items = [];
+    if (levels.length > 1) {
+      newItem.items = [];
+    } else {
+      newItem.id = allLevels.join('/');
+      //@ts-ignore
+      newItem.to = `/docs/${allLevels.join('/')}`;
+    }
     parent.push(newItem);
   }
   return createMenuItem(
     levels.slice(1),
+    levels,
     sibling ? sibling.items : newItem.items,
     newItem,
   );
 };
-export const Sidebar: FC<SidebarProps> = ({ storyId }) => {
+export const Sidebar: FC<SidebarProps> = ({ kindPath }) => {
   const { siteTitle } = useSiteMetadata();
   const { SidebarClose, responsive } = useContext(SidebarContext);
   const data = useStaticQuery(graphql`
     query {
-      allStory {
+      allStoryKind {
         edges {
           node {
-            id
-            kind
-            name
+            title
           }
         }
       }
     }
   `);
-  const stories = data.allStory.edges;
+  const kinds = data.allStoryKind.edges;
 
   const menuItems = useMemo(() => {
-    const kinds: ConsolidateKinds = stories.reduce(
-      (acc: ConsolidateKinds, { node }: { node: Required<Story> }) => {
-        if (acc[node.kind]) {
-          return { ...acc, [node.kind]: [...acc[node.kind], node] };
-        }
-        return { ...acc, [node.kind]: [node] };
+    const menuItems = kinds.reduce(
+      (acc: MenuItems, { node: kind }: { node: StoriesKind }) => {
+        const levels = kind.title.split('/');
+        createMenuItem(levels, levels, acc);
+        return acc;
       },
-      {},
+      [],
     );
-    const menuItems = Object.keys(kinds).reduce((acc: MenuItems, key) => {
-      const stories = kinds[key];
-      const levels = key.split('/');
-      const kind = createMenuItem(levels, acc);
-      kind.items = stories.map(story => ({
-        id: story.id,
-        label: story.name,
-        to: `/stories/${story.id}`,
-      }));
-      return acc;
-    }, []);
     return menuItems;
-  }, [stories]);
+  }, [kinds]);
 
   const [search, setSearch] = useState<string | undefined>(undefined);
   return (
@@ -129,7 +119,7 @@ export const Sidebar: FC<SidebarProps> = ({ storyId }) => {
         </Box>
         <Navmenu
           buttonClass={Link}
-          activeItem={{ id: storyId }}
+          activeItem={{ id: kindPath }}
           search={search}
           items={menuItems}
         />

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

@@ -58,29 +58,26 @@ exports.sourceNodes = async function sourceNodes(
 
 exports.createPages = async ({ graphql, actions }: CreatePagesArgs) => {
   const stories = await graphql<{
-    allStory: any;
+    allStoryKind: any;
   }>(`
     query {
-      allStory {
+      allStoryKind {
         edges {
           node {
-            id
-            kind
-            name
+            title
           }
         }
       }
     }
   `);
   const { createPage } = actions;
   if (stories.data) {
-    stories.data.allStory.edges.forEach(({ node }: any) => {
+    stories.data.allStoryKind.edges.forEach(({ node }: any) => {
       createPage({
-        path: `stories/${node.id}`,
+        path: `/docs/${node.title}`,
         component: require.resolve(`../src/templates/StoryPage.tsx`),
         context: {
-          title: node.name,
-          storyId: node.id,
+          kind: node.title,
         },
       });
     });

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

@@ -1,20 +1,18 @@
 import React, { FC, useMemo } from 'react';
-
-import { StoriesStore } from '@component-controls/specification';
 import { loadStoryStore, Store } from '@component-controls/store';
-import * as bundle from '@component-controls/webpack-compile/bundle';
+const bundle = require('@component-controls/webpack-compile/bundle');
 
 import { Layout } from '../components/Layout';
 import { pages } from '../config/pages';
 
 interface SitePageProps {
   pathContext: {
     title: string;
-    storyId: string;
+    kind: string;
   };
 }
 
-const SitePage: FC<SitePageProps> = ({ pathContext: { title, storyId } }) => {
+const SitePage: FC<SitePageProps> = ({ pathContext: { kind } }) => {
   const storyStore = useMemo(
     () =>
       new Store({
@@ -23,11 +21,13 @@ const SitePage: FC<SitePageProps> = ({ pathContext: { title, storyId } }) => {
       }),
     [],
   );
+  const docFile = storyStore.getStoryKind(kind);
   return (
     <Layout
-      title={title}
+      title={kind}
       storyStore={storyStore}
-      storyId={storyId}
+      kindPath={kind}
+      storyId={docFile?.stories?.[0] || ''}
       pages={pages}
     />
   );

ui/app-components/package.json

@@ -34,7 +34,6 @@
     "@primer/octicons-react": "^9.6.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "react-simple-resizer": "^2.1.0",
     "theme-ui": "^0.3.1",
     "@theme-ui/match-media": "^0.3.1"
   },

ui/app-components/src/Navmenu/Navmenu.tsx

@@ -274,7 +274,7 @@ export const Navmenu: FC<NavMenuProps> = ({
     if (activeItem && activeItem.id === id) {
       background = 'active';
     }
-    const isActiveParent = items && hasActiveChidlren(item, activeItem);
+    const isActiveParent = hasActiveChidlren(item, activeItem);
     const content = (
       <Flex
         sx={{

ui/app-components/src/index.ts

@@ -2,5 +2,4 @@ export * from './ColorMode';
 export * from './Header';
 export * from './Keyboard';
 export * from './Navmenu';
-export * from './Resizer';
 export * from './Sidebar';