feat: add collapseSingle option to pages

core/core/src/configuration.ts

@@ -47,16 +47,27 @@ export interface PageLayoutProps {
    */
   fullPage?: boolean;
 }
+export type SideNavConfiguration = {
+  /**
+   * if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories.
+   */
+  storyPaths?: boolean;
+
+  /**
+   * if a single story in the document, and storyPaths is true= will only generate a single menu item for the doc itself
+   */
+  collapseSingle?: boolean;
+};
 export type PageConfiguration = {
   /**
    * base url path for the page
    */
   basePath?: string;
 
   /**
-   * if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories.
+   * side navigation configuration
    */
-  storyPaths?: boolean;
+  sideNav?: SideNavConfiguration;
 
   /**
    * label - used for menu labels
@@ -94,7 +105,7 @@ type WebpackConfig = WebpackConfiguration | WebpackConfigFn;
 
 export type PagesOnlyRoutes = Record<
   DocType,
-  Pick<PageConfiguration, 'basePath' | 'storyPaths'> & {
+  Pick<PageConfiguration, 'basePath' | 'sideNav'> & {
     tabs?: Pick<TabConfiguration, 'route'>[];
   }
 >;
@@ -274,7 +285,10 @@ export const defaultBuildConfig: BuildConfiguration = {
   pages: {
     story: {
       basePath: 'docs/',
-      storyPaths: true,
+      sideNav: {
+        storyPaths: true,
+        collapseSingle: true,
+      },
       tabs: [{ route: 'page' }, { route: 'test' }],
     },
     blog: {

core/core/src/document-utils.ts

@@ -24,7 +24,8 @@ export const getDocPath = (
   name: string = '',
   activeTab?: string,
 ): string => {
-  const { basePath = '', storyPaths } = pagesConfig?.[docType] || {};
+  const { basePath = '', sideNav = {} } = pagesConfig?.[docType] || {};
+  const { storyPaths } = sideNav;
   if (storyPaths && doc && doc.stories && doc.stories.length > 0) {
     return getStoryPath(doc.stories[0], doc, pagesConfig, activeTab);
   }

core/store/src/create-pages/pages-paths.ts

@@ -146,7 +146,7 @@ export const getDocPages = (store: Store): DocPagesPath[] => {
         docs.forEach(doc => {
           if (doc.route !== '/') {
             const stories =
-              page.storyPaths && doc.stories?.length
+              page.sideNav?.storyPaths && doc.stories?.length
                 ? doc.stories
                 : [undefined];
             stories.forEach((storyId?: string) => {

core/webpack-compile/tests/__snapshots__/draft.test.ts.snap

@@ -19,7 +19,10 @@ Object {
       },
       "story": Object {
         "basePath": "docs/",
-        "storyPaths": true,
+        "sideNav": Object {
+          "collapseSingle": true,
+          "storyPaths": true,
+        },
         "tabs": Array [
           Object {
             "route": "page",

core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap

@@ -19,7 +19,10 @@ Object {
       },
       "story": Object {
         "basePath": "docs/",
-        "storyPaths": true,
+        "sideNav": Object {
+          "collapseSingle": true,
+          "storyPaths": true,
+        },
         "tabs": Array [
           Object {
             "route": "page",

core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap

@@ -19,7 +19,10 @@ Object {
       },
       "story": Object {
         "basePath": "docs/",
-        "storyPaths": true,
+        "sideNav": Object {
+          "collapseSingle": true,
+          "storyPaths": true,
+        },
         "tabs": Array [
           Object {
             "route": "page",

examples/gatsby/.config/runtime.tsx

@@ -21,6 +21,9 @@ const config: RunOnlyConfiguration = {
   pages: {
     story: {
       label: 'API',
+      sideNav: {
+        collapseSingle: false,
+      },
     },
     tutorial: {
       label: 'Tutorial',

examples/nextjs/.config/runtime.tsx

@@ -21,6 +21,9 @@ const config: RunOnlyConfiguration = {
   pages: {
     story: {
       label: 'API',
+      sideNav: {
+        collapseSingle: false,
+      },
     },
     tutorial: {
       label: 'Tutorial',

integrations/nextjs-plugin/README.md

@@ -3,8 +3,6 @@
 -   [In action](#in-action)
 -   [Overview](#overview)
 -   [API](#api)
-    -   [<ins>build</ins>](#insbuildins)
-    -   [<ins>\_\_type</ins>](#ins__typeins)
     -   [<ins>getHomePagesPaths</ins>](#insgethomepagespathsins)
     -   [<ins>getDocPagesPaths</ins>](#insgetdocpagespathsins)
     -   [<ins>Layout</ins>](#inslayoutins)
@@ -29,39 +27,6 @@ Next.js plugin for documenting your projects with component controls
 
 <!-- START-REACT-DOCGEN-TYPESCRIPT -->
 
-## <ins>build</ins>
-
-_build [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/build.ts)_
-
-### properties
-
-| Name           | Type            | Description                                                           |
-| -------------- | --------------- | --------------------------------------------------------------------- |
-| `webPack`      | _Configuration_ | webpack configuration object                                          |
-| `presets`      | _RuleTypes_     | a list of webpack configuration presets from webpack-configs packages |
-| `configPath`   | _string_        | path to the configuration file e.g : '.storybook'                     |
-| `distFolder`   | _string_        | public output folder for the bundle                                   |
-| `bundleName`   | _string_        | public file name the bundle, by default 'component-controls.js'       |
-| `staticFolder` | _string_        | public output folder for the assets like images                       |
-
-## <ins>\_\_type</ins>
-
-_\_\_type [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/page-links.ts)_
-
-### properties
-
-| Name              | Type                                | Description                                                                                     |
-| ----------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `error`           | _string_                            | build-time error string                                                                         |
-| `config*`         | _RunConfiguration_                  | global configuration for config file                                                            |
-| `docs*`           | _Record&lt;string, Document>_       | list of documents (pages)                                                                       |
-| `stories*`        | _Record&lt;string, Story>_          | list of stories                                                                                 |
-| `components*`     | _Record&lt;string, Component>_      | list of components used in stories and documents                                                |
-| `packages*`       | _Record&lt;string, PackageInfo>_    | list of package.json files and their data used by the components and the stories of the project |
-| `addObserver*`    | _(observer: StoreObserver) => void_ | storybook integration notifiers                                                                 |
-| `removeObserver*` | _(observer: StoreObserver) => void_ |                                                                                                 |
-| `updateStory*`    | _(story: Story) => void_            | update store, for example controls or state                                                     |
-
 ## <ins>getHomePagesPaths</ins>
 
 _getHomePagesPaths [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/page-links.ts)_

integrations/storybook/README.md

@@ -270,6 +270,7 @@ _Stories [source code](https://github.com/ccontrols/component-controls/tree/mast
 | `dark`        | _boolean_            | whether to display the dark theme storysource code component whether to use the dark theme for the story source component. |
 | `id`          | _string_             | optional id to be used for the block if no id is provided, one will be calculated automatically from the title.            |
 | `name`        | _string_             |                                                                                                                            |
+| `storyProps`  | _any_                |                                                                                                                            |
 | `scale`       | _number_             | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.                               |
 | `title`       | _string_             | optional section title for the block.                                                                                      |
 | `description` | _string_             | optional markdown description.                                                                                             |

plugins/axe-plugin/README.md

@@ -9,9 +9,9 @@
     -   [<ins>AxeAllyBlock</ins>](#insaxeallyblockins)
     -   [<ins>AxeContextProvider</ins>](#insaxecontextproviderins)
     -   [<ins>SelectionContextProvider</ins>](#insselectioncontextproviderins)
-    -   [<ins>useIsTagSelected</ins>](#insistagselectedins)
+    -   [<ins>useIsTagSelected</ins>](#insuseistagselectedins)
     -   [<ins>isSelected</ins>](#insisselectedins)
-    -   [<ins>useIsTagSelected</ins>](#insistagselectedins-1)
+    -   [<ins>useIsTagSelected</ins>](#insuseistagselectedins-1)
     -   [<ins>overview</ins>](#insoverviewins)
 
 # In action
@@ -102,15 +102,15 @@ _SelectionContextProvider [source code](https://github.com/ccontrols/component-c
 
 ## <ins>useIsTagSelected</ins>
 
-_isTagSelected [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/axe-plugin/src/state/context.tsx)_
+_useIsTagSelected [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/axe-plugin/src/state/context.tsx)_
 
 ## <ins>isSelected</ins>
 
 _isSelected [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/axe-plugin/src/state/recoil.tsx)_
 
 ## <ins>useIsTagSelected</ins>
 
-_isTagSelected [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/axe-plugin/src/state/recoil.tsx)_
+_useIsTagSelected [source code](https://github.com/ccontrols/component-controls/tree/master/plugins/axe-plugin/src/state/recoil.tsx)_
 
 ## <ins>overview</ins>
 

props-info/react-docgen/README.md

@@ -194,7 +194,7 @@ _defined in [@component-controls/react-docgen-info/src/types.ts](https://github.
 
 _defined in [@babel/parser/typings/babel-parser.d.ts](https://github.com/babel/babel/tree/master/packages/babel-parser)_
 
-'asyncGenerators' | 'bigInt' | 'classPrivateMethods' | 'classPrivateProperties' | 'classProperties' | 'decorators' | 'decorators-legacy' | 'doExpressions' | 'dynamicImport' | 'estree' | 'exportDefaultFrom' | 'exportNamespaceFrom' | 'flow' | 'flowComments' | 'functionBind' | 'functionSent' | 'importMeta' | 'jsx' | 'logicalAssignment' | 'moduleAttributes' | 'nullishCoalescingOperator' | 'numericSeparator' | 'objectRestSpread' | 'optionalCatchBinding' | 'optionalChaining' | 'partialApplication' | 'pipelineOperator' | 'placeholders' | 'privateIn' | 'throwExpressions' | 'topLevelAwait' | 'typescript' | 'v8intrinsic' | [ParserPluginWithOptions](#parserpluginwithoptions)
+'asyncGenerators' | 'bigInt' | 'classPrivateMethods' | 'classPrivateProperties' | 'classProperties' | 'decimal' | 'decorators' | 'decorators-legacy' | 'doExpressions' | 'dynamicImport' | 'estree' | 'exportDefaultFrom' | 'exportNamespaceFrom' | 'flow' | 'flowComments' | 'functionBind' | 'functionSent' | 'importMeta' | 'jsx' | 'logicalAssignment' | 'moduleAttributes' | 'nullishCoalescingOperator' | 'numericSeparator' | 'objectRestSpread' | 'optionalCatchBinding' | 'optionalChaining' | 'partialApplication' | 'pipelineOperator' | 'placeholders' | 'privateIn' | 'throwExpressions' | 'topLevelAwait' | 'typescript' | 'v8intrinsic' | [ParserPluginWithOptions](#parserpluginwithoptions)
 
 ## ParserPluginWithOptions
 

ui/app/src/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { FC, useState, useMemo, useContext } from 'react';
 import { jsx, Input, Box, Heading } from 'theme-ui';
-import { NoteIcon, BookIcon, FileIcon } from '@primer/octicons-react';
+import { NoteIcon, BookIcon } from '@primer/octicons-react';
 import {
   useStore,
   useCurrentDocument,
@@ -29,6 +29,7 @@ import {
   Store,
   getStoryPath,
   getDocPath,
+  PageConfiguration,
 } from '@component-controls/core';
 
 export interface SidebarProps {
@@ -49,14 +50,15 @@ const createMenuItem = (
   doc: Document,
   type: DocType,
   levels: string[],
-  storyPaths: boolean,
+  page: PageConfiguration,
   activeTab?: string,
   parent?: MenuItems,
   item?: MenuItem,
 ): MenuItem => {
   if (levels.length < 1) {
     return item || {};
   }
+  const { storyPaths, collapseSingle } = page?.sideNav || {};
   const storyPath = (storyId: string, activeTab?: string): string => {
     const story = store.stories[storyId];
     if (!story) {
@@ -86,7 +88,7 @@ const createMenuItem = (
       newItem.id = doc.title;
 
       if (storyPaths && doc.stories && doc.stories.length) {
-        if (doc.stories.length >= 1) {
+        if (doc.stories.length > 1 || !collapseSingle) {
           // multiple stories - each with a link
           newItem.items = doc.stories.map(storyId => {
             const story = store.stories[storyId];
@@ -98,7 +100,7 @@ const createMenuItem = (
             };
           });
         } else {
-          newItem.icon = <FileIcon verticalAlign="middle" />;
+          newItem.icon = <NoteIcon verticalAlign="middle" />;
           //only one story -direct link to it
           newItem.href = storyPath(doc.stories[0], activeTab);
         }
@@ -116,7 +118,7 @@ const createMenuItem = (
     doc,
     type,
     levels.slice(1),
-    storyPaths,
+    page,
     activeTab,
     sibling ? sibling.items : newItem.items,
     newItem,
@@ -138,29 +140,21 @@ export const Sidebar: FC<SidebarProps> = ({
 
   const config = useConfig() || {};
   const { pages, sidebar = [] } = config;
-  const { label = '', storyPaths = false } = pages?.[type] || {};
+  const page: PageConfiguration = pages?.[type] || {};
+  const { label = '' } = page;
   const docs: Pages = useDocByType(type);
   const menuItems = useMemo(() => {
     if (store) {
       const menuItems = docs.reduce((acc: MenuItems, doc: Document) => {
         const { title } = doc;
         const levels = title.split('/');
-        createMenuItem(
-          store,
-          config,
-          doc,
-          type,
-          levels,
-          storyPaths,
-          activeTab,
-          acc,
-        );
+        createMenuItem(store, config, doc, type, levels, page, activeTab, acc);
         return acc;
       }, []);
       return menuItems;
     }
     return [];
-  }, [type, activeTab, store, config, storyPaths, docs]);
+  }, [type, activeTab, store, config, page, docs]);
   const [search, setSearch] = useState<string | undefined>(undefined);
   const actions: ActionItems = [...sidebar];