feat: stories and documentation for ui/app

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.
 
+<package-section file="./ui/app/README.md" section="overview" />
+
+<!-- START-PACKAGE-SECTION -->
+
+## [@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.
+
+<!-- END-PACKAGE-SECTION -->
+
 <package-section file="./ui/pages/README.md" section="overview" />
 
 <!-- START-PACKAGE-SECTION -->

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;
 

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 {

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) {

examples/gatsby/.config/main.js → 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: {

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`,

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)',

examples/storybook-6-no-docs/.storybook/preview.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
 addDecorator(story => (
   <ThemeProvider>{story()}</ThemeProvider>
 ));
-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: {

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)',

examples/storybook-6/.storybook/preview.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
 addDecorator(story => (
   <ThemeProvider>{story()}</ThemeProvider>
 ));
-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: {

integrations/gatsby-theme-stories/README.md

@@ -7,12 +7,13 @@
     -   [Configure](#configure)
 -   [API](#api)
     -   [<ins>Store</ins>](#insstoreins)
-    -   [<ins>Header</ins>](#insheaderins)
+    -   [<ins>GatsbyLink</ins>](#insgatsbylinkins)
     -   [<ins>Layout</ins>](#inslayoutins)
-    -   [<ins>SEO</ins>](#insseoins)
-    -   [<ins>Sidebar</ins>](#inssidebarins)
     -   [<ins>pages</ins>](#inspagesins)
-    -   [<ins>StoryPage</ins>](#insstorypageins)
+    -   [<ins>CategoryList</ins>](#inscategorylistins)
+    -   [<ins>CategoryPage</ins>](#inscategorypageins)
+    -   [<ins>DocPage</ins>](#insdocpageins)
+    -   [<ins>PageList</ins>](#inspagelistins)
 
 # In action
 
@@ -68,65 +69,69 @@ 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)_
 
-## <ins>Header</ins>
+## <ins>GatsbyLink</ins>
 
-_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&lt;HTMLAnchorElement>_ |             |
+| `to`  | _string_                                                                     |             |
 
 ## <ins>Layout</ins>
 
 _Layout [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/Layout.tsx)_
 
 ### properties
 
-| Name          | Type          | Description |
-| ------------- | ------------- | ----------- |
-| `title`       | _string_      |             |
-| `storyStore*` | _Store_       |             |
-| `storyId`     | _string_      |             |
-| `docTitle*`   | _string_      |             |
-| `pages*`      | _PagesConfig_ |             |
+| Name    | Type     | Description |
+| ------- | -------- | ----------- |
+| `docId` | _string_ |             |
 
-## <ins>SEO</ins>
+## <ins>pages</ins>
+
+_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)_
+## <ins>CategoryList</ins>
+
+_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; }_ |             |
 
-## <ins>Sidebar</ins>
+## <ins>CategoryPage</ins>
 
-_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; }_ |             |
 
-## <ins>pages</ins>
+## <ins>DocPage</ins>
 
-_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; }_ |             |
 
-## <ins>StoryPage</ins>
+## <ins>PageList</ins>
 
-_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; }_ |             |
 
 <!-- END-REACT-DOCGEN-TYPESCRIPT -->

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>_ |                                                                             |
 
 ## <ins>PageContextContainer</ins>
 
 _PageContextContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/docs-page/DocsContainer.tsx)_
 
-### properties
-
-| Name    | Type    | Description |
-| ------- | ------- | ----------- |
-| `theme` | _Theme_ |             |
-
 ## <ins>DocsContainer</ins>
 
 _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_ |             |
 
 <!-- END-REACT-DOCGEN-TYPESCRIPT -->

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)
     -   [<ins>AxeAllyBlock</ins>](#insaxeallyblockins)
     -   [<ins>isSelected</ins>](#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 (
-    <DocsContainer context={context}><Story id={storyId}/></DocsContainer>
-  )
-}
-export default {
-  key: 'docs-page',
-  title: 'Docs Page',
-  render: ({ active, storyId }) => {
-    return active ? <Page storyId={storyId} /> : null;  
-  } 
-}
-```
-
 # API
 
 <react-docgen-typescript path="./src" exclude="AllyDashboard.tsx,BaseAllyBlock.tsx,HighlightSelector.tsx,NodesTable.tsx,ResultsTable.tsx,SelectionContext.tsx" />

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 position={position}>header</Header>
-);
-
-overview.story = {
-  controls: {
-    position: {
-      type: 'options',
-      options: ['fixed', 'absolute', 'sticky', 'static', 'relative'],
-    },
-  },
-};
+export const overview = () => <Header>header</Header>;

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 href="/">link to home</Link>;