diff --git a/README.md b/README.md index df43cc7b9..b4024ba33 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ - [@component-controls/store](#component-controlsstore) - [@component-controls/config](#component-controlsconfig) - [UI packages](#ui-packages) + - [@component-controls/app](#component-controlsapp) - [@component-controls/pages](#component-controlspages) - [@component-controls/blocks](#component-controlsblocks) - [@component-controls/components](#component-controlscomponents) @@ -242,6 +243,26 @@ Configration file utilities. Uses the [glob](https://www.npmjs.com/package/glob) The UI libraries are built around [theme-ui](https://theme-ui.com) and are designed to abstract the user interface level of components. + + + + +## [@component-controls/app](https://github.com/ccontrols/component-controls/blob/master/ui/app) + +Component controls standalone application. + +Components to create `@component-controls` standalone application, that are connected to the store of documents. + +Some of the design goals: + +- Portability between different build systems ie - Gatsby, CRA, Vercel. +- Create a true CMS-type user-interface, allowing for different document types ie. "stories", "blogs", "articles". +- Category pages for "tags", "authors". +- Fully customizable Home page. +- Responsive user/interface, with sidebars transforming into popouts for small screen resolutions. + + + diff --git a/core/config/README.md b/core/config/README.md index 461ea4f76..baa16f164 100644 --- a/core/config/README.md +++ b/core/config/README.md @@ -35,7 +35,7 @@ $ npm install @component-controls/config --save-dev ## ConfigrationResult -_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L16)_ +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L10)_ @@ -55,7 +55,7 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro ## optionsFileNames -_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L15)_ +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L9)_ @@ -64,7 +64,7 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro find the story files out of a configuration file using glob for the regex file search -_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L80)_ +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L74)_ **function** extractStories(`__namedParameters`\*: **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string): string\[] | undefined; @@ -81,7 +81,7 @@ return the configration folder from command-line parameters command line accepts -c/ -config parameter for config path the config file is assumed named main.js/main.ts -_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L27)_ +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L21)_ **function** getConfigurationArg(`args`\*: string\[]): string | undefined; @@ -96,7 +96,7 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro given a base project folder and a configuration folder, returns the configuration file -_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L48)_ +_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L42)_ **function** loadConfiguration(`baseFolder`\*: string, `configFolder`: string, `args`: string\[]): [ConfigrationResult](#configrationresult) | undefined; diff --git a/core/config/src/index.ts b/core/config/src/index.ts index acce7313e..ce3a5a84b 100644 --- a/core/config/src/index.ts +++ b/core/config/src/index.ts @@ -4,13 +4,7 @@ import { sync as globSync } from 'glob'; import yargs from 'yargs'; import { BuildConfiguration } from '@component-controls/specification'; -export const buildConfigFileNames = [ - 'build.js', - 'build.json', - 'main.js', - 'main.json', - 'main.ts', -]; +export const buildConfigFileNames = ['buildtime.js', 'build.js', 'main.js']; export const optionsFileNames = ['runtime.js', 'options.js']; export interface ConfigrationResult { diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts index e4d4396e0..1759ba717 100644 --- a/core/store/src/serialization/load-store.ts +++ b/core/store/src/serialization/load-store.ts @@ -26,8 +26,8 @@ export const loadStoryStore = ( stores, packages: loadedPackages, components: loadedComponents, - config, - buildConfig, + config = {}, + buildConfig = {}, } = newStore; if (stores) { diff --git a/examples/gatsby/.config/main.js b/examples/gatsby/.config/buildtime.js similarity index 84% rename from examples/gatsby/.config/main.js rename to examples/gatsby/.config/buildtime.js index 155ab3896..c944a2492 100644 --- a/examples/gatsby/.config/main.js +++ b/examples/gatsby/.config/buildtime.js @@ -5,6 +5,8 @@ module.exports = { '../../stories/src/blogs/*.mdx', '../../stories/src/stories/*.stories.(js|jsx|tsx|mdx)', '../src/stories/*.stories.(js|jsx|tsx|mdx)', + '../../../ui/app-components/src/**/*.stories.(js|jsx|tsx|mdx)', + '../../../ui/app/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)', ], pages: { diff --git a/examples/gatsby/.config/runtime.js b/examples/gatsby/.config/runtime.js index 65f0034ff..14ece78b4 100644 --- a/examples/gatsby/.config/runtime.js +++ b/examples/gatsby/.config/runtime.js @@ -1,4 +1,4 @@ -const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins']; +const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins'] module.exports = { siteTitle: `Component controls`, diff --git a/examples/storybook-6-no-docs/.storybook/main.js b/examples/storybook-6-no-docs/.storybook/main.js index 1d0f4507f..3f78a6604 100644 --- a/examples/storybook-6-no-docs/.storybook/main.js +++ b/examples/storybook-6-no-docs/.storybook/main.js @@ -28,6 +28,7 @@ module.exports = { stories: [ '../../../ui/editors/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)', + '../../../ui/app/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/app-components/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../core/specification/src/stories/**/*.stories.(js|jsx|tsx|mdx)', diff --git a/examples/storybook-6-no-docs/.storybook/preview.js b/examples/storybook-6-no-docs/.storybook/preview.js index cdc932b73..57edc56e9 100644 --- a/examples/storybook-6-no-docs/.storybook/preview.js +++ b/examples/storybook-6-no-docs/.storybook/preview.js @@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook'; addDecorator(story => ( {story()} )); -const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins'] +const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins'] addParameters({ dependencies: { hideEmpty: true }, options: { diff --git a/examples/storybook-6/.storybook/main.js b/examples/storybook-6/.storybook/main.js index 71f4b2909..d523014ed 100644 --- a/examples/storybook-6/.storybook/main.js +++ b/examples/storybook-6/.storybook/main.js @@ -5,6 +5,7 @@ module.exports = { stories: [ '../../../core/specification/src/stories/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/editors/src/**/*.stories.(js|jsx|tsx|mdx)', + '../../../ui/app/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/app-components/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)', '../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)', diff --git a/examples/storybook-6/.storybook/preview.js b/examples/storybook-6/.storybook/preview.js index cdc932b73..57edc56e9 100644 --- a/examples/storybook-6/.storybook/preview.js +++ b/examples/storybook-6/.storybook/preview.js @@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook'; addDecorator(story => ( {story()} )); -const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins'] +const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins'] addParameters({ dependencies: { hideEmpty: true }, options: { diff --git a/integrations/gatsby-theme-stories/README.md b/integrations/gatsby-theme-stories/README.md index ec03483dc..b51fab4f3 100644 --- a/integrations/gatsby-theme-stories/README.md +++ b/integrations/gatsby-theme-stories/README.md @@ -7,12 +7,13 @@ - [Configure](#configure) - [API](#api) - [Store](#insstoreins) - - [Header](#insheaderins) + - [GatsbyLink](#insgatsbylinkins) - [Layout](#inslayoutins) - - [SEO](#insseoins) - - [Sidebar](#inssidebarins) - [pages](#inspagesins) - - [StoryPage](#insstorypageins) + - [CategoryList](#inscategorylistins) + - [CategoryPage](#inscategorypageins) + - [DocPage](#insdocpageins) + - [PageList](#inspagelistins) # In action @@ -68,15 +69,16 @@ Store class used to query the stories and exchange information between processes _Store [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/index.ts)_ -## Header +## GatsbyLink -_Header [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/Header.tsx)_ +_GatsbyLink [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx)_ ### properties -| Name | Type | Description | -| ------- | -------- | ----------- | -| `title` | _string_ | | +| Name | Type | Description | +| ----- | ---------------------------------------------------------------------------- | ----------- | +| `ref` | _((instance: HTMLAnchorElement) => void) \| RefObject<HTMLAnchorElement>_ | | +| `to` | _string_ | | ## Layout @@ -84,49 +86,52 @@ _Layout [source code](https:/github.com/ccontrols/component-controls/tree/master ### properties -| Name | Type | Description | -| ------------- | ------------- | ----------- | -| `title` | _string_ | | -| `storyStore*` | _Store_ | | -| `storyId` | _string_ | | -| `docTitle*` | _string_ | | -| `pages*` | _PagesConfig_ | | +| Name | Type | Description | +| ------- | -------- | ----------- | +| `docId` | _string_ | | -## SEO +## pages + +_pages [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/config/pages.tsx)_ -_SEO [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/SEO.tsx)_ +## CategoryList + +_CategoryList [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/CategoryList.tsx)_ ### properties -| Name | Type | Description | -| ------------- | -------- | ----------- | -| `title` | _string_ | | -| `description` | _string_ | | -| `pathname` | _string_ | | -| `image` | _string_ | | +| Name | Type | Description | +| -------------- | --------------------- | ----------- | +| `pathContext*` | _{ type: PageType; }_ | | -## Sidebar +## CategoryPage -_Sidebar [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/Sidebar.tsx)_ +_CategoryPage [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/CategoryPage.tsx)_ ### properties -| Name | Type | Description | -| --------- | -------- | ----------- | -| `docPath` | _string_ | | +| Name | Type | Description | +| -------------- | --------------------------------------- | ----------- | +| `pathContext*` | _{ type: PageType; category: string; }_ | | -## pages +## DocPage -_pages [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/config/pages.tsx)_ +_DocPage [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/DocPage.tsx)_ + +### properties + +| Name | Type | Description | +| -------------- | ---------------------------------- | ----------- | +| `pathContext*` | _{ doc: string; type: PageType; }_ | | -## StoryPage +## PageList -_StoryPage [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx)_ +_PageList [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/PageList.tsx)_ ### properties -| Name | Type | Description | -| -------------- | --------------------------------- | ----------- | -| `pathContext*` | _{ title: string; doc: string; }_ | | +| Name | Type | Description | +| -------------- | --------------------- | ----------- | +| `pathContext*` | _{ type: PageType; }_ | | diff --git a/integrations/storybook/README.md b/integrations/storybook/README.md index bd73143ac..0b77c6238 100644 --- a/integrations/storybook/README.md +++ b/integrations/storybook/README.md @@ -702,19 +702,12 @@ _Title [source code](https:/github.com/ccontrols/component-controls/tree/master/ | `id` | _string_ | id of the story | | `name` | _string_ | alternatively you can use the name of a story to load from an external file | | `children` | _ReactNode_ | text to be displayed in the component. | -| `sxStyle` | _SystemStyleObject_ | theme-ui styling object | | `ref` | _((instance: HTMLHeadingElement) => void) \| RefObject<HTMLHeadingElement>_ | | ## PageContextContainer _PageContextContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/docs-page/DocsContainer.tsx)_ -### properties - -| Name | Type | Description | -| ------- | ------- | ----------- | -| `theme` | _Theme_ | | - ## DocsContainer _DocsContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/docs-page/DocsContainer.tsx)_ @@ -723,7 +716,6 @@ _DocsContainer [source code](https:/github.com/ccontrols/component-controls/tree | Name | Type | Description | | -------- | --------- | ----------- | -| `theme` | _Theme_ | | | `active` | _boolean_ | | diff --git a/plugins/axe-plugin/README.md b/plugins/axe-plugin/README.md index 9a24355e4..27640dde1 100644 --- a/plugins/axe-plugin/README.md +++ b/plugins/axe-plugin/README.md @@ -5,9 +5,6 @@ - [Getting Started](#getting-started) - [Install](#install) - [Configure](#configure) - - [Pages format](#pages-format) - - [Examples](#examples) - - [Simple page](#simple-page) - [API](#api) - [AxeAllyBlock](#insaxeallyblockins) - [isSelected](#insisselectedins) @@ -67,49 +64,6 @@ export const TestingCustomePage= () => ( ``` -## Pages format - -The page definition files need to have a default export with the following fields - -```js -import React from 'react'; -export default { - // key used for navigation - key: string, - // title of the tab - title: string, - // react render function. - // active boolean - if the tab custom page is active - // storyId as a string - // Return an object that can be rendered from ReactDOM.render - render: ({ active, storyId }) => Element, -} -``` - -## Examples - -### Simple page - -```js -import React from 'react'; -import { DocsContainer, Story} from '@storybook/addon-docs/blocks'; -import { useContext, } from '@component-controls/storybook-custom-docs'; - -const Page = () => { - const context = useContext(); - return ( - - ) -} -export default { - key: 'docs-page', - title: 'Docs Page', - render: ({ active, storyId }) => { - return active ? : null; - } -} -``` - # API diff --git a/ui/app-components/src/Header/Header.stories.tsx b/ui/app-components/src/Header/Header.stories.tsx index 770ed44e3..4525a3371 100644 --- a/ui/app-components/src/Header/Header.stories.tsx +++ b/ui/app-components/src/Header/Header.stories.tsx @@ -1,20 +1,9 @@ import React from 'react'; -import { Header, HeaderProps } from '.'; +import { Header } from '.'; export default { title: 'App components/Header', component: Header, }; -export const overview = ({ position }: HeaderProps) => ( -
header
-); - -overview.story = { - controls: { - position: { - type: 'options', - options: ['fixed', 'absolute', 'sticky', 'static', 'relative'], - }, - }, -}; +export const overview = () =>
header
; diff --git a/ui/app-components/src/Link/Link.stories.tsx b/ui/app-components/src/Link/Link.stories.tsx new file mode 100644 index 000000000..0941cd213 --- /dev/null +++ b/ui/app-components/src/Link/Link.stories.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { Link } from '.'; + +export default { + title: 'App components/Link', + component: Link, +}; + +export const overview = () => link to home; diff --git a/ui/app/README.md b/ui/app/README.md index fb52cef57..0847251cb 100644 --- a/ui/app/README.md +++ b/ui/app/README.md @@ -7,7 +7,6 @@ - [CategoryList](#inscategorylistins) - [CategoryListItem](#inscategorylistitemins) - [CategoryPage](#inscategorypageins) - - [BasePage](#insbasepageins) - [DocPage](#insdocpageins) - [DocumentsList](#insdocumentslistins) - [DocumentsListItem](#insdocumentslistitemins) @@ -19,13 +18,21 @@ - [PageList](#inspagelistins) - [SEO](#insseoins) - [SideContext](#inssidecontextins) - - [SidebarBase](#inssidebarbaseins) - [Sidebar](#inssidebarins) + - [SidebarsPage](#inssidebarspageins) - [TagsList](#instagslistins) # Overview -Component controls standalone application. +Components to create `@component-controls` standalone application, that are connected to the store of documents. + +Some of the design goals: + +- Portability between different build systems ie - Gatsby, CRA, Vercel. +- Create a true CMS-type user-interface, allowing for different document types ie. "stories", "blogs", "articles". +- Category pages for "tags", "authors". +- Fully customizable Home page. +- Responsive user/interface, with sidebars transforming into popouts for small screen resolutions. # List of components @@ -35,13 +42,15 @@ Component controls standalone application. ## App +application container component. adds SEO, SkipLinks, Header and Footer. + _App [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/App/App.tsx)_ ### properties | Name | Type | Description | | ------- | -------- | ----------- | -| `title` | _string_ | | +| `title` | _string_ | page title | ## AppContext @@ -57,25 +66,29 @@ _AppContext [source code](https:/github.com/ccontrols/component-controls/tree/ma ## CategoryList +displays page of categories + _CategoryList [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/CategoryList/CategoryList.tsx)_ ### properties | Name | Type | Description | | ------- | ---------- | ----------- | -| `type*` | _PageType_ | | +| `type*` | _PageType_ | page type | ## CategoryListItem +category list item displays the unique categories with a link, and the count of docs for each + _CategoryListItem [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/CategoryList/CategoryListItem.tsx)_ ### properties -| Name | Type | Description | -| -------- | -------- | ----------- | -| `link*` | _string_ | | -| `name*` | _string_ | | -| `count*` | _number_ | | +| Name | Type | Description | +| -------- | -------- | ----------------------------------- | +| `link*` | _string_ | link url | +| `name*` | _string_ | category name | +| `count*` | _number_ | how many documents of this category | ## CategoryPage @@ -88,63 +101,57 @@ _CategoryPage [source code](https:/github.com/ccontrols/component-controls/tree/ | `type*` | _PageType_ | | | `category*` | _any_ | | -## BasePage - -_BasePage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/DocPage/DocPage.tsx)_ - -### properties - -| Name | Type | Description | -| ---------- | ------------- | ----------- | -| `pagesFn*` | _PagesConfig_ | | -| `type` | _PageType_ | | - ## DocPage +documentation page for current document. +will check if the page has a layout with sidebars or if the page is standalone. + _DocPage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/DocPage/DocPage.tsx)_ ### properties -| Name | Type | Description | -| ---------- | ------------- | ----------- | -| `pagesFn*` | _PagesConfig_ | | -| `type` | _PageType_ | | +| Name | Type | Description | +| --------- | ------------------------------------- | ------------ | +| `pagesFn` | _(viewMode: string) => PageConfig\[]_ | custom pages | +| `type` | _PageType_ | page type | ## DocumentsList +displays a list of the provided document pages + _DocumentsList [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/DocumentsList/DocumentsList.tsx)_ ### properties -| Name | Type | Description | -| -------- | ------- | ----------- | -| `pages*` | _Pages_ | | +| Name | Type | Description | +| -------- | ------- | ---------------------- | +| `pages*` | _Pages_ | list of document pages | ## DocumentsListItem +displays a single doument item + _DocumentsListItem [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/DocumentsList/DocumentsListItem.tsx)_ ### properties -| Name | Type | Description | -| -------- | ------------------ | ----------- | -| `link*` | _string_ | | -| `page*` | _StoriesDoc_ | | -| `config` | _RunConfiguration_ | | +| Name | Type | Description | +| -------- | ------------------ | -------------------------- | +| `link*` | _string_ | link to the document | +| `page*` | _StoriesDoc_ | document to be displayed | +| `config` | _RunConfiguration_ | store configuration object | ## Footer +application footer component + _Footer [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/Footer/Footer.tsx)_ ## Header -_Header [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/Header/Header.tsx)_ +application header component -### properties - -| Name | Type | Description | -| ------- | -------- | ----------- | -| `title` | _string_ | | +_Header [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/Header/Header.tsx)_ ## DocLink @@ -186,6 +193,8 @@ _StoryLink [source code](https:/github.com/ccontrols/component-controls/tree/mas ## PageList +list of documents for a specific page type + _PageList [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/PageList/PageList.tsx)_ ### properties @@ -217,9 +226,11 @@ _SideContext [source code](https:/github.com/ccontrols/component-controls/tree/m | --------- | ------------------------------ | ----------- | | `pageRef` | _RefObject<HTMLDivElement>_ | | -## SidebarBase +## Sidebar + +application sidebar component -_SidebarBase [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/Sidebar/Sidebar.tsx)_ +_Sidebar [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/Sidebar/Sidebar.tsx)_ ### properties @@ -228,25 +239,29 @@ _SidebarBase [source code](https:/github.com/ccontrols/component-controls/tree/m | `title` | _ReactNode_ | title element | | `type` | _PageType_ | page type | -## Sidebar +## SidebarsPage -_Sidebar [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/Sidebar/Sidebar.tsx)_ +document page - rendering with sidebars and tabs for multiple document views + +_SidebarsPage [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/SidebarsPage/SidebarsPage.tsx)_ ### properties -| Name | Type | Description | -| ------- | ----------- | ------------- | -| `title` | _ReactNode_ | title element | -| `type` | _PageType_ | page type | +| Name | Type | Description | +| --------- | ------------------------------------- | ------------ | +| `pagesFn` | _(viewMode: string) => PageConfig\[]_ | custom pages | +| `type*` | _PageType_ | page type | ## TagsList +row of tags with link to their page + _TagsList [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/app/src/TagsList/TagsList.tsx)_ ### properties -| Name | Type | Description | -| ------ | ----------- | ----------- | -| `tags` | _string\[]_ | | +| Name | Type | Description | +| ------ | ----------- | ------------------------ | +| `tags` | _string\[]_ | string list of tag names | diff --git a/ui/app/src/App/App.stories.tsx b/ui/app/src/App/App.stories.tsx new file mode 100644 index 000000000..8e8e579b0 --- /dev/null +++ b/ui/app/src/App/App.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { ThemeProvider } from '@component-controls/components'; +import { MockContext } from '@component-controls/blocks'; +import { App } from './App'; + +export default { + title: 'Application/App', + component: App, +}; + +export const overview = () => ( + + + + + +); diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx index d5161a6c5..2b5a72b0c 100644 --- a/ui/app/src/App/App.tsx +++ b/ui/app/src/App/App.tsx @@ -11,8 +11,16 @@ import { Header } from '../Header'; import { Footer } from '../Footer'; export interface AppProps { + /** + * page title + */ title?: string; } + +/** + * application container component. adds SEO, SkipLinks, Header and Footer. + * + */ export const App: FC = ({ title, children }) => { const { doc } = useStoryContext({ id: '.' }); const items: SkiLinksItemProps[] = [ diff --git a/ui/app/src/CategoryList/CategoryList.stories.tsx b/ui/app/src/CategoryList/CategoryList.stories.tsx new file mode 100644 index 000000000..e4ade5c7c --- /dev/null +++ b/ui/app/src/CategoryList/CategoryList.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { ThemeProvider } from '@component-controls/components'; +import { MockContext } from '@component-controls/blocks'; +import { CategoryList } from './CategoryList'; + +export default { + title: 'Application/CategoryList', + component: CategoryList, +}; + +export const overview = () => ( + + + + + +); diff --git a/ui/app/src/CategoryList/CategoryList.tsx b/ui/app/src/CategoryList/CategoryList.tsx index e0b16489c..86b423dc4 100644 --- a/ui/app/src/CategoryList/CategoryList.tsx +++ b/ui/app/src/CategoryList/CategoryList.tsx @@ -7,8 +7,15 @@ import { PageContainer, BlockContext } from '@component-controls/blocks'; import { CategoryListItem } from './CategoryListItem'; export interface CategoryListProps { + /** + * page type + */ type: PageType; } + +/** + * displays page of categories + */ export const CategoryList: FC = ({ type }) => { const { storeProvider } = useContext(BlockContext); const categories = storeProvider?.getUniquesByCategory(type) || []; diff --git a/ui/app/src/CategoryList/CategoryListItem.tsx b/ui/app/src/CategoryList/CategoryListItem.tsx index 0aed82976..ca4452c42 100644 --- a/ui/app/src/CategoryList/CategoryListItem.tsx +++ b/ui/app/src/CategoryList/CategoryListItem.tsx @@ -5,10 +5,23 @@ import { Subtitle } from '@component-controls/components'; import { Link } from '@component-controls/app-components'; export interface CategoryListItemProps { + /** + * link url + */ link: string; + /** + * category name + */ name: string; + /** + * how many documents of this category + */ count: number; } + +/** + * category list item displays the unique categories with a link, and the count of docs for each + */ export const CategoryListItem: FC = ({ name, count, diff --git a/ui/app/src/CategoryPage/CategoryPage.stories.tsx b/ui/app/src/CategoryPage/CategoryPage.stories.tsx new file mode 100644 index 000000000..77241fdda --- /dev/null +++ b/ui/app/src/CategoryPage/CategoryPage.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { ThemeProvider } from '@component-controls/components'; +import { MockContext } from '@component-controls/blocks'; +import { CategoryPage } from './CategoryPage'; + +export default { + title: 'Application/CategoryPage', + component: CategoryPage, +}; + +export const overview = () => ( + + + + + +); diff --git a/ui/app/src/DocPage/DocPage.stories.tsx b/ui/app/src/DocPage/DocPage.stories.tsx new file mode 100644 index 000000000..a078d90ed --- /dev/null +++ b/ui/app/src/DocPage/DocPage.stories.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { MockContext } from '@component-controls/blocks'; +import { DocPage } from './DocPage'; + +export default { + title: 'Application/DocPage', + component: DocPage, +}; + +export const overview = () => ( + + + +); diff --git a/ui/app/src/DocPage/DocPage.tsx b/ui/app/src/DocPage/DocPage.tsx index d6fef111c..febad12ac 100644 --- a/ui/app/src/DocPage/DocPage.tsx +++ b/ui/app/src/DocPage/DocPage.tsx @@ -1,78 +1,19 @@ /** @jsx jsx */ -import { FC, ReactNode, useRef, useContext } from 'react'; -import { jsx, Box, Flex } from 'theme-ui'; -import * as qs from 'qs'; -import { PageType } from '@component-controls/specification'; -import { Tabs, Tab, TabList, TabPanel } from '@component-controls/components'; +import { FC, useContext } from 'react'; +import { jsx } from 'theme-ui'; import { PageContainer, BlockContext } from '@component-controls/blocks'; - -import { SideContext } from '../SideContext'; -import { Sidebar } from '../Sidebar'; -export interface PageConfig { - key: string; - title: string; - render: () => ReactNode; -} +import { + SidebarsPage, + DocPageProps, + PageConfig, +} from '../SidebarsPage/SidebarsPage'; export type PagesConfig = (route: string) => PageConfig[]; -export interface DocPageProps { - pagesFn: PagesConfig; - type: PageType; -} -export const BasePage: FC = ({ pagesFn, type }) => { - const pages = typeof pagesFn === 'function' ? pagesFn('') : []; - const pageRef = useRef(null); - const params = - typeof window !== 'undefined' - ? qs.parse(window.location.search.substring(1)) - : {}; - const tabIndex = Math.max( - pages.findIndex(page => page.key === params['view']), - 0, - ); - return ( - - - - { - const key = pages[index]?.key; - if (key) { - const params = qs.parse(window.location.search.substring(1)); - params['view'] = key; - const newHREF = `${window.location.origin}${ - window.location.pathname - }?${qs.stringify(params)}${window.location.hash}`; - window.location.href = newHREF; - return false; - } - return true; - }} - > - {pages && pages.length > 1 && ( - - {pages.map(page => ( - {page.title} - ))} - - )} - - - {pages && - pages.map(page => ( - {page.render()} - ))} - - - - - - ); -}; - +/** + * documentation page for current document. + * will check if the page has a layout with sidebars or if the page is standalone. + */ export const DocPage: FC = ({ type = 'story', ...props }) => { const { storeProvider, docId } = useContext(BlockContext); const doc = docId ? storeProvider.getStoryDoc(docId) : undefined; @@ -91,5 +32,5 @@ export const DocPage: FC = ({ type = 'story', ...props }) => { /> ); } - return ; + return ; }; diff --git a/ui/app/src/DocumentsList/DocumentsList.stories.tsx b/ui/app/src/DocumentsList/DocumentsList.stories.tsx new file mode 100644 index 000000000..df3cfeee2 --- /dev/null +++ b/ui/app/src/DocumentsList/DocumentsList.stories.tsx @@ -0,0 +1,23 @@ +import React, { useContext } from 'react'; +import { ThemeProvider } from '@component-controls/components'; +import { MockContext, BlockContext } from '@component-controls/blocks'; +import { DocumentsList } from './DocumentsList'; + +export default { + title: 'Application/DocumentsList', + component: DocumentsList, +}; + +const MockList = () => { + const { storeProvider } = useContext(BlockContext); + const pages = storeProvider.getDocs(); + return ; +}; + +export const overview = () => ( + + + + + +); diff --git a/ui/app/src/DocumentsList/DocumentsList.tsx b/ui/app/src/DocumentsList/DocumentsList.tsx index c02192f7a..6e85cb99a 100644 --- a/ui/app/src/DocumentsList/DocumentsList.tsx +++ b/ui/app/src/DocumentsList/DocumentsList.tsx @@ -4,8 +4,15 @@ import { BlockContext } from '@component-controls/blocks'; import { DocumentsListItem } from './DocumentsListItem'; export interface DocumentsListProps { + /** + * list of document pages + */ pages: Pages; } + +/** + * displays a list of the provided document pages + */ export const DocumentsList: FC = ({ pages }) => { const { storeProvider } = useContext(BlockContext); return ( diff --git a/ui/app/src/DocumentsList/DocumentsListItem.tsx b/ui/app/src/DocumentsList/DocumentsListItem.tsx index b997a2e35..36003a9df 100644 --- a/ui/app/src/DocumentsList/DocumentsListItem.tsx +++ b/ui/app/src/DocumentsList/DocumentsListItem.tsx @@ -4,28 +4,59 @@ import { jsx, Box, Text } from 'theme-ui'; import { StoriesDoc, getDocPath, + defPageType, RunConfiguration, } from '@component-controls/specification'; -import { Subtitle, Markdown } from '@component-controls/components'; +import { Subtitle, Markdown, Tag } from '@component-controls/components'; import { Link } from '@component-controls/app-components'; import { TagsList } from '../TagsList'; export interface PageListItemProps { + /** + * link to the document + */ link: string; + + /** + * document to be displayed + */ page: StoriesDoc; + /** + * store configuration object + */ config?: RunConfiguration; } + +/** + * displays a single doument item + */ export const DocumentsListItem: FC = ({ page, link, config, }) => { - const { tags = [], date } = page; + const { tags = [], date, type = defPageType } = page; return ( - - {page.title} - + + + {page.title} + + {type && ( + + + {type} + + + )} + {page.description && {page.description}} diff --git a/ui/app/src/Footer/Footer.stories.tsx b/ui/app/src/Footer/Footer.stories.tsx new file mode 100644 index 000000000..6842a32f1 --- /dev/null +++ b/ui/app/src/Footer/Footer.stories.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { ThemeProvider } from '@component-controls/components'; +import { MockContext } from '@component-controls/blocks'; +import { Footer } from './Footer'; + +export default { + title: 'Application/Footer', + component: Footer, +}; + +export const overview = () => ( + + +