From fe899230a3f5fc72d05c4af05468b998a8e4b6c1 Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 7 Aug 2020 15:45:29 +0300 Subject: [PATCH] feat: add collapseSingle option to pages --- core/core/README.md | 180 +++++++++++------- core/core/src/configuration.ts | 22 ++- core/core/src/document-utils.ts | 3 +- core/store/src/create-pages/pages-paths.ts | 2 +- .../tests/__snapshots__/draft.test.ts.snap | 5 +- .../example-stories.test.ts.snap | 5 +- .../react-typescript.test.ts.snap | 5 +- examples/gatsby/.config/runtime.tsx | 3 + examples/nextjs/.config/runtime.tsx | 3 + integrations/nextjs-plugin/README.md | 35 ---- integrations/storybook/README.md | 1 + plugins/axe-plugin/README.md | 8 +- props-info/react-docgen/README.md | 2 +- ui/app/src/Sidebar/Sidebar.tsx | 28 ++- ui/blocks/README.md | 53 +++++- ui/components/README.md | 2 +- 16 files changed, 225 insertions(+), 132 deletions(-) diff --git a/core/core/README.md b/core/core/README.md index e1eba7feb..50ba611a1 100644 --- a/core/core/README.md +++ b/core/core/README.md @@ -68,6 +68,7 @@ - [PagesConfiguration](#pagesconfiguration) - [PagesOnlyRoutes](#pagesonlyroutes) - [RunConfiguration](#runconfiguration) + - [SideNavConfiguration](#sidenavconfiguration) - [WebpackConfig](#webpackconfig) - [WebpackConfigFn](#webpackconfigfn) - [defaultBuildConfig](#defaultbuildconfig) @@ -89,17 +90,20 @@ - [PagesConfiguration](#pagesconfiguration-1) - [WebpackConfig](#webpackconfig-1) - [PagesOnlyRoutes](#pagesonlyroutes-1) + - [SideNavConfiguration](#sidenavconfiguration-1) - [PageTabs](#pagetabs-1) - [PageConfiguration](#pageconfiguration-1) - [BuildConfiguration](#buildconfiguration-1) - [WebpackConfigFn](#webpackconfigfn-1) - [DocType](#doctype-2) + - [SideNavConfiguration](#sidenavconfiguration-2) - [PageTabs](#pagetabs-2) - [WebpackConfig](#webpackconfig-2) - [PagesOnlyRoutes](#pagesonlyroutes-2) - [WebpackConfigFn](#webpackconfigfn-2) - [DocType](#doctype-3) - [PageConfiguration](#pageconfiguration-2) + - [SideNavConfiguration](#sidenavconfiguration-3) - [PageTabs](#pagetabs-3) # Overview @@ -1003,7 +1007,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L149)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L160)_ @@ -1047,7 +1051,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## ToolbarConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L134)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L145)_ @@ -1063,7 +1067,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L106)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L117)_ page types that are considered as categories fields as well @@ -1097,20 +1101,20 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PageConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L61)_ ### properties -| Name | Type | Description | -| ----------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| `basePath` | string | base url path for the page | -| `container` | [ComponentType](#componenttype) \| null | page container react component | -| `indexHome` | boolean | whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page. | -| `label` | string | label - used for menu labels | -| `storyPaths` | boolean | if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. | -| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | -| `topMenu` | boolean | whether to add to the top navigation menu | -| `PageLayoutProps` | [PageLayoutProps](#pagelayoutprops) | | +| Name | Type | Description | +| ----------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| `basePath` | string | base url path for the page | +| `container` | [ComponentType](#componenttype) \| null | page container react component | +| `indexHome` | boolean | whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page. | +| `label` | string | label - used for menu labels | +| `sideNav` | [SideNavConfiguration](#sidenavconfiguration) | side navigation configuration | +| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | +| `topMenu` | boolean | whether to add to the top navigation menu | +| `PageLayoutProps` | [PageLayoutProps](#pagelayoutprops) | | ## PageTabs @@ -1120,7 +1124,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PagesConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L87)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L98)_ Record< @@ -1134,7 +1138,7 @@ Record< ## PagesOnlyRoutes -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L95)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L106)_ Record< @@ -1144,16 +1148,16 @@ Record< ### properties -| Name | Type | Description | -| ------ | ---------------------------------------------------------------------------- | ----------- | -| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath' \| 'storyPaths'> | | -| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | +| Name | Type | Description | +| ------ | ------------------------------------------------------------------------- | ----------- | +| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath' \| 'sideNav'> | | +| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | > ## RunConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L232)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L243)_ ### properties @@ -1162,15 +1166,27 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c | `RunOnlyConfiguration` | [RunOnlyConfiguration](#runonlyconfiguration) | | | `Omit` | Omit<[BuildConfiguration](#buildconfiguration), 'pages'> | | +## SideNavConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ + +if a single story in the document, and storyPaths is true= will only generate a single menu item for the doc itself + +**collapseSingle**: boolean + +if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. + +**storyPaths**: boolean + ## WebpackConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L93)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L104)_ [WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) ## WebpackConfigFn -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L89)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L100)_ **function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); @@ -1184,7 +1200,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## defaultBuildConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L272)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L283)_ @@ -1197,7 +1213,7 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## defaultRunConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L235)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L246)_ @@ -1239,7 +1255,7 @@ Record<string, ## RunConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L232)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L243)_ ### properties @@ -1396,7 +1412,7 @@ string ## PagesConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L87)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L98)_ Record< @@ -1410,13 +1426,13 @@ Record< ## WebpackConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L93)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L104)_ [WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) ## PagesOnlyRoutes -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L95)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L106)_ Record< @@ -1426,13 +1442,25 @@ Record< ### properties -| Name | Type | Description | -| ------ | ---------------------------------------------------------------------------- | ----------- | -| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath' \| 'storyPaths'> | | -| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | +| Name | Type | Description | +| ------ | ------------------------------------------------------------------------- | ----------- | +| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath' \| 'sideNav'> | | +| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | > +## SideNavConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ + +if a single story in the document, and storyPaths is true= will only generate a single menu item for the doc itself + +**collapseSingle**: boolean + +if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. + +**storyPaths**: boolean + ## PageTabs _defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L28)_ @@ -1441,27 +1469,27 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PageConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L61)_ ### properties -| Name | Type | Description | -| ----------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| `basePath` | string | base url path for the page | -| `container` | [ComponentType](#componenttype) \| null | page container react component | -| `indexHome` | boolean | whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page. | -| `label` | string | label - used for menu labels | -| `storyPaths` | boolean | if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. | -| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | -| `topMenu` | boolean | whether to add to the top navigation menu | -| `PageLayoutProps` | [PageLayoutProps](#pagelayoutprops) | | +| Name | Type | Description | +| ----------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| `basePath` | string | base url path for the page | +| `container` | [ComponentType](#componenttype) \| null | page container react component | +| `indexHome` | boolean | whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page. | +| `label` | string | label - used for menu labels | +| `sideNav` | [SideNavConfiguration](#sidenavconfiguration) | side navigation configuration | +| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | +| `topMenu` | boolean | whether to add to the top navigation menu | +| `PageLayoutProps` | [PageLayoutProps](#pagelayoutprops) | | ## BuildConfiguration global configuration used at build time stored in a file named main.js/main.ts -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L106)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L117)_ page types that are considered as categories fields as well @@ -1489,7 +1517,7 @@ custom webpack configuration setup. One or the other will be used ## WebpackConfigFn -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L89)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L100)_ **function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); @@ -1507,6 +1535,18 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c 'story' | 'blog' | 'page' | 'tags' | 'author' | string +## SideNavConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ + +if a single story in the document, and storyPaths is true= will only generate a single menu item for the doc itself + +**collapseSingle**: boolean + +if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. + +**storyPaths**: boolean + ## PageTabs _defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L28)_ @@ -1515,13 +1555,13 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## WebpackConfig -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L93)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L104)_ [WebpackConfiguration](#webpackconfiguration) \| [WebpackConfigFn](#webpackconfigfn) ## PagesOnlyRoutes -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L95)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L106)_ Record< @@ -1531,16 +1571,16 @@ Record< ### properties -| Name | Type | Description | -| ------ | ---------------------------------------------------------------------------- | ----------- | -| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath' \| 'storyPaths'> | | -| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | +| Name | Type | Description | +| ------ | ------------------------------------------------------------------------- | ----------- | +| `Pick` | Pick<[PageConfiguration](#pageconfiguration), 'basePath' \| 'sideNav'> | | +| `tabs` | Pick<[TabConfiguration](#tabconfiguration), 'route'>\[] | | > ## WebpackConfigFn -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L89)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L100)_ **function** (`config`\*: [WebpackConfiguration](#webpackconfiguration), `options`: any): [WebpackConfiguration](#webpackconfiguration); @@ -1560,20 +1600,32 @@ _defined in [@component-controls/core/src/configuration.ts](https://github.com/c ## PageConfiguration -_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L61)_ ### properties -| Name | Type | Description | -| ----------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| `basePath` | string | base url path for the page | -| `container` | [ComponentType](#componenttype) \| null | page container react component | -| `indexHome` | boolean | whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page. | -| `label` | string | label - used for menu labels | -| `storyPaths` | boolean | if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. | -| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | -| `topMenu` | boolean | whether to add to the top navigation menu | -| `PageLayoutProps` | [PageLayoutProps](#pagelayoutprops) | | +| Name | Type | Description | +| ----------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| `basePath` | string | base url path for the page | +| `container` | [ComponentType](#componenttype) \| null | page container react component | +| `indexHome` | boolean | whether to have an index home page for the doc type. if false, will show the first document of the doc type as the home page. | +| `label` | string | label - used for menu labels | +| `sideNav` | [SideNavConfiguration](#sidenavconfiguration) | side navigation configuration | +| `tabs` | [PageTabs](#pagetabs) | tabs configuration for story-type pages | +| `topMenu` | boolean | whether to add to the top navigation menu | +| `PageLayoutProps` | [PageLayoutProps](#pagelayoutprops) | | + +## SideNavConfiguration + +_defined in [@component-controls/core/src/configuration.ts](https://github.com/ccontrols/component-controls/tree/master/core/core/src/configuration.ts#L50)_ + +if a single story in the document, and storyPaths is true= will only generate a single menu item for the doc itself + +**collapseSingle**: boolean + +if true, generate story-based paths. This is for documents with a navSidebar that would allow selection of specific stories. + +**storyPaths**: boolean ## PageTabs diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts index 78a02e139..42c5ccf0a 100644 --- a/core/core/src/configuration.ts +++ b/core/core/src/configuration.ts @@ -47,6 +47,17 @@ 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 @@ -54,9 +65,9 @@ export type PageConfiguration = { 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 & { + Pick & { tabs?: Pick[]; } >; @@ -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: { diff --git a/core/core/src/document-utils.ts b/core/core/src/document-utils.ts index bdc3eb260..a6ad9157f 100644 --- a/core/core/src/document-utils.ts +++ b/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); } diff --git a/core/store/src/create-pages/pages-paths.ts b/core/store/src/create-pages/pages-paths.ts index b2301d908..b4330e03c 100644 --- a/core/store/src/create-pages/pages-paths.ts +++ b/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) => { diff --git a/core/webpack-compile/tests/__snapshots__/draft.test.ts.snap b/core/webpack-compile/tests/__snapshots__/draft.test.ts.snap index 700ac7b23..1dadcf81c 100644 --- a/core/webpack-compile/tests/__snapshots__/draft.test.ts.snap +++ b/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", diff --git a/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap b/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap index 68b78d6d0..4a238ccec 100644 --- a/core/webpack-compile/tests/__snapshots__/example-stories.test.ts.snap +++ b/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", diff --git a/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap b/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap index 4e5bbfa74..d18aa4854 100644 --- a/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap +++ b/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", diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx index 1024c48ef..1a6a83346 100644 --- a/examples/gatsby/.config/runtime.tsx +++ b/examples/gatsby/.config/runtime.tsx @@ -21,6 +21,9 @@ const config: RunOnlyConfiguration = { pages: { story: { label: 'API', + sideNav: { + collapseSingle: false, + }, }, tutorial: { label: 'Tutorial', diff --git a/examples/nextjs/.config/runtime.tsx b/examples/nextjs/.config/runtime.tsx index 949a41901..1d1cfa310 100644 --- a/examples/nextjs/.config/runtime.tsx +++ b/examples/nextjs/.config/runtime.tsx @@ -21,6 +21,9 @@ const config: RunOnlyConfiguration = { pages: { story: { label: 'API', + sideNav: { + collapseSingle: false, + }, }, tutorial: { label: 'Tutorial', diff --git a/integrations/nextjs-plugin/README.md b/integrations/nextjs-plugin/README.md index 3c0c4fbc0..2d135a270 100644 --- a/integrations/nextjs-plugin/README.md +++ b/integrations/nextjs-plugin/README.md @@ -3,8 +3,6 @@ - [In action](#in-action) - [Overview](#overview) - [API](#api) - - [build](#insbuildins) - - [\_\_type](#ins__typeins) - [getHomePagesPaths](#insgethomepagespathsins) - [getDocPagesPaths](#insgetdocpagespathsins) - [Layout](#inslayoutins) @@ -29,39 +27,6 @@ Next.js plugin for documenting your projects with component controls -## build - -_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 | - -## \_\_type - -_\_\_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<string, Document>_ | list of documents (pages) | -| `stories*` | _Record<string, Story>_ | list of stories | -| `components*` | _Record<string, Component>_ | list of components used in stories and documents | -| `packages*` | _Record<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 | - ## getHomePagesPaths _getHomePagesPaths [source code](https://github.com/ccontrols/component-controls/tree/master/integrations/nextjs-plugin/src/page-links.ts)_ diff --git a/integrations/storybook/README.md b/integrations/storybook/README.md index ed49e0f80..7d4ad3064 100644 --- a/integrations/storybook/README.md +++ b/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. | diff --git a/plugins/axe-plugin/README.md b/plugins/axe-plugin/README.md index cfa4c94f8..5db684046 100644 --- a/plugins/axe-plugin/README.md +++ b/plugins/axe-plugin/README.md @@ -9,9 +9,9 @@ - [AxeAllyBlock](#insaxeallyblockins) - [AxeContextProvider](#insaxecontextproviderins) - [SelectionContextProvider](#insselectioncontextproviderins) - - [useIsTagSelected](#insistagselectedins) + - [useIsTagSelected](#insuseistagselectedins) - [isSelected](#insisselectedins) - - [useIsTagSelected](#insistagselectedins-1) + - [useIsTagSelected](#insuseistagselectedins-1) - [overview](#insoverviewins) # In action @@ -102,7 +102,7 @@ _SelectionContextProvider [source code](https://github.com/ccontrols/component-c ## useIsTagSelected -_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)_ ## isSelected @@ -110,7 +110,7 @@ _isSelected [source code](https://github.com/ccontrols/component-controls/tree/m ## useIsTagSelected -_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)_ ## overview diff --git a/props-info/react-docgen/README.md b/props-info/react-docgen/README.md index 93d8e729a..45bc6817a 100644 --- a/props-info/react-docgen/README.md +++ b/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 diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx index 96ceee75a..f399189b8 100644 --- a/ui/app/src/Sidebar/Sidebar.tsx +++ b/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,7 +50,7 @@ const createMenuItem = ( doc: Document, type: DocType, levels: string[], - storyPaths: boolean, + page: PageConfiguration, activeTab?: string, parent?: MenuItems, item?: MenuItem, @@ -57,6 +58,7 @@ const createMenuItem = ( 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 = ; + newItem.icon = ; //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 = ({ 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(undefined); const actions: ActionItems = [...sidebar]; diff --git a/ui/blocks/README.md b/ui/blocks/README.md index dc0451f42..456f4a1d3 100644 --- a/ui/blocks/README.md +++ b/ui/blocks/README.md @@ -16,7 +16,9 @@ - [PageContainer](#inspagecontainerins) - [PageTypeTag](#inspagetypetagins) - [Pagination](#inspaginationins) + - [BasePlayground](#insbaseplaygroundins) - [Playground](#insplaygroundins) + - [StoryPlayground](#insstoryplaygroundins) - [PropsTable](#inspropstableins) - [useControlsActions](#insusecontrolsactionsins) - [Search](#inssearchins) @@ -258,6 +260,30 @@ displays automatic pagination to the next/previous document of this same type. _Pagination [source code](https://github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Pagination/Pagination.tsx)_ +## BasePlayground + +_BasePlayground [source code](https://github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Playground/BasePlayground.tsx)_ + +### properties + +| Name | Type | Description | +| ------------- | -------------------- | --------------------------------------------------------------------------------------------------------------- | +| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. | +| `dark` | _boolean_ | whether to use the dark theme for the story source component. | +| `title` | _string_ | optional section title for the block. | +| `description` | _string_ | optional markdown description. | +| `id` | _string_ | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. | +| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. | +| `sxStyle` | _ThemeUIStyleObject_ | theme-ui styling object for Block Box | +| `data-testid` | _string_ | testing id | +| `openTab` | _any_ | by default, which tab to have open. | +| `visibleTabs` | _boolean_ | if true, the tabs on the panels will be visible | +| `background` | _BackgroundType_ | background pattern type | +| `direction` | _DirectionType_ | direction type | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `plain` | _boolean_ | if plain, skip the border and spacing around the children | +| `story` | _Story_ | | + ## Playground Component to display a live playground of component examples. Has custom actions for zooming, switch direction, review story source and configuration. @@ -283,6 +309,30 @@ _Playground [source code](https://github.com/ccontrols/component-controls/tree/m | `actions` | _ActionItem\[]_ | optional actions provided to the component | | `plain` | _boolean_ | if plain, skip the border and spacing around the children | +## StoryPlayground + +_StoryPlayground [source code](https://github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Playground/StoryPlayground.tsx)_ + +### properties + +| Name | Type | Description | +| ------------- | -------------------- | --------------------------------------------------------------------------------------------------------------- | +| `storyProps` | _any_ | | +| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. | +| `dark` | _boolean_ | whether to use the dark theme for the story source component. | +| `title` | _string_ | optional section title for the block. | +| `description` | _string_ | optional markdown description. | +| `id` | _string_ | optional id to be used for the block if no id is provided, one will be calculated automatically from the title. | +| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. | +| `sxStyle` | _ThemeUIStyleObject_ | theme-ui styling object for Block Box | +| `data-testid` | _string_ | testing id | +| `openTab` | _any_ | by default, which tab to have open. | +| `visibleTabs` | _boolean_ | if true, the tabs on the panels will be visible | +| `background` | _BackgroundType_ | background pattern type | +| `direction` | _DirectionType_ | direction type | +| `actions` | _ActionItem\[]_ | optional actions provided to the component | +| `plain` | _boolean_ | if plain, skip the border and spacing around the children | + ## PropsTable Displays the component's properties as well as configurable controls to interact with the component. @@ -339,7 +389,7 @@ _Search [source code](https://github.com/ccontrols/component-controls/tree/maste | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | `onSelect` | _(item: Document) => void_ | on select a search item. | | `children` | _string \| number \| boolean \| {} \| ((props: SearchBoxCallbackProps<Document>) => ReactNode) \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... 1 more ... \| (new (props: any) => Component<...>)>) \| (new (props: any) => Component<...>)> \| ... 8 more ... \| (((props: SearchBoxCallbackProps<...>) ..._ | children is a render prop to allow custom rendering of items, one at a time | -| `popoverProps` | _Pick<Partial<TooltipTriggerProps>, "closeOnOutOfBoundaries" \| "defaultTooltipShown" \| "delayHide" \| "delayShow" \| "followCursor" \| "getTooltipRef" \| ... 9 more ... \| "tooltip">_ | customize the popover | +| `popoverProps` | _Pick<Partial<TooltipTriggerProps>, "closeOnReferenceHidden" \| "defaultTooltipShown" \| "delayHide" \| "delayShow" \| "followCursor" \| "getTooltipRef" \| ... 9 more ... \| "tooltip">_ | customize the popover | ## Stories @@ -354,6 +404,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. | diff --git a/ui/components/README.md b/ui/components/README.md index 4234e5407..15a59d21f 100644 --- a/ui/components/README.md +++ b/ui/components/README.md @@ -334,7 +334,7 @@ _SearchInput [source code](https://github.com/ccontrols/component-controls/tree/ | `onSearch*` | _(search: string) => void \| Promise<void>_ | callback on change of search input. user can retrieve items in this callback | | `onSelect` | _(item: ItemType) => void_ | on select a search item. | | `items*` | _ItemType\[]_ | items array | -| `popoverProps` | _Pick<Partial<TooltipTriggerProps>, "closeOnOutOfBoundaries" \| "defaultTooltipShown" \| "delayHide" \| "delayShow" \| "followCursor" \| "getTooltipRef" \| ... 9 more ... \| "tooltip">_ | customize the popover | +| `popoverProps` | _Pick<Partial<TooltipTriggerProps>, "closeOnReferenceHidden" \| "defaultTooltipShown" \| "delayHide" \| "delayShow" \| "followCursor" \| "getTooltipRef" \| ... 9 more ... \| "tooltip">_ | customize the popover | | `as` | _ElementType<any>_ | | | `variant` | _string_ | |