Skip to content

Commit

Permalink
feat: app components for standalone
Browse files Browse the repository at this point in the history
  • Loading branch information
atanasster committed May 29, 2020
1 parent 84d5f64 commit 195b01b
Show file tree
Hide file tree
Showing 44 changed files with 1,384 additions and 223 deletions.
18 changes: 18 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
- [@component-controls/blocks](#component-controlsblocks)
- [@component-controls/components](#component-controlscomponents)
- [@component-controls/editors](#component-controlseditors)
- [@component-controls/app-components](#component-controlsapp-components)
- [Props info](#props-info)
- [@component-controls/react-docgen-info](#component-controlsreact-docgen-info)
- [@component-controls/react-docgen-typescript-info](#component-controlsreact-docgen-typescript-info)
Expand Down Expand Up @@ -312,6 +313,23 @@ Some of the guiding design goals for this library:

<!-- END-PACKAGE-SECTION -->

<package-section file="./ui/app-components/README.md" section="overview" />

<!-- START-PACKAGE-SECTION -->

## [@component-controls/app-components](https://github.com/ccontrols/component-controls/blob/master/ui/app-components)

Standalone application components.

Application components to create standaline user interface for component-controls.

Third-party libraries used in no particular order:

- [theme-ui](https://theme-ui.com) as the theming and components foundation.
- [octicons](https://octicons.github.com) for icons used in the components.

<!-- END-PACKAGE-SECTION -->

# Props info

The props-info packages are designed to solidify prop tables extraction for components. Every props-info package must export a props extractor factory that is initialized with the options for the specific library and returns a function that can parse a file and extract prop tables.
Expand Down
4 changes: 2 additions & 2 deletions core/store/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ $ npm install @component-controls/store --save-dev

Store class used to query the stories and exchange information between processes

_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L28)_
_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L27)_



Expand All @@ -47,7 +47,7 @@ _defined in [@component-controls/store/src/Store/Store.ts](https://github.com/cc

## StoreOptions

_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L15)_
_defined in [@component-controls/store/src/Store/Store.ts](https://github.com/ccontrols/component-controls/tree/master/core/store/src/Store/Store.ts#L14)_



Expand Down
4 changes: 2 additions & 2 deletions core/webpack-compile/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $ npm install @component-controls/webpack-compile --save-dev
compile the stories with webpack
returns the stories store object

_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L9)_
_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L8)_

**function** compile(`__namedParameters`\*: **configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**webPack**: [Configuration](#configuration)): Promise&lt;[CompileResults](#compileresults)>;

Expand All @@ -56,7 +56,7 @@ _defined in [@component-controls/webpack-compile/src/index.ts](https://github.co
compile the stories with webpack and launch watching for changes
returns the stories store object

_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L26)_
_defined in [@component-controls/webpack-compile/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-compile/src/index.ts#L25)_

**function** watch(`__namedParameters`\*: **configPath**: string**presets**: string | [RuleOptions](#ruleoptions)\[]**watchOptions**: [WatchOptions](#watchoptions)**webPack**: [Configuration](#configuration)): Promise&lt;[CompileResults](#compileresults)>;

Expand Down
1 change: 1 addition & 0 deletions examples/storybook-6-no-docs/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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-components/src/**/*.stories.(js|jsx|tsx|mdx)',
'../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)',
'../../../core/specification/src/stories/**/*.stories.(js|jsx|tsx|mdx)',
'../../../plugins/axe-plugin/src/stories/**/*.stories.(js|jsx|tsx|mdx)',
Expand Down
2 changes: 1 addition & 1 deletion examples/storybook-6-no-docs/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
addDecorator(story => (
<ThemeProvider>{story()}</ThemeProvider>
));
const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'Plugins']
const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins']
addParameters({
dependencies: { hideEmpty: true },
options: {
Expand Down
7 changes: 0 additions & 7 deletions examples/storybook-6-no-docs/stories/mdx.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,6 @@ import { customStory as customStoryDeconstructedProps } from '../../stories/src/
</Playground>


<Playground description="story from external file">
<Story name='mdx-external-story'>
{customStory()}
</Story>
</Playground>


<Playground description="story from external file with props">
<Story name='mdx-external-story-props' controls={{ text: { type: 'text', value: 'hello'}}} >
{props => customStoryProps(props)}
Expand Down
1 change: 1 addition & 0 deletions examples/storybook-6/.storybook/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -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-components/src/**/*.stories.(js|jsx|tsx|mdx)',
'../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)',
'../../../ui/blocks/src/**/*.stories.(js|jsx|tsx|mdx)',
'../../../plugins/axe-plugin/src/stories/**/*.stories.(js|jsx|tsx|mdx)',
Expand Down
2 changes: 1 addition & 1 deletion examples/storybook-6/.storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
addDecorator(story => (
<ThemeProvider>{story()}</ThemeProvider>
));
const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'Plugins']
const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'App components', 'Plugins']
addParameters({
dependencies: { hideEmpty: true },
options: {
Expand Down
1 change: 1 addition & 0 deletions integrations/gatsby-theme-stories/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist
79 changes: 66 additions & 13 deletions integrations/gatsby-theme-stories/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@
- [Examples](#examples)
- [Simple page](#simple-page)
- [API](#api)
- [<ins>AxeAllyBlock</ins>](#insaxeallyblockins)
- [<ins>Store</ins>](#insstoreins)
- [<ins>Header</ins>](#insheaderins)
- [<ins>Layout</ins>](#inslayoutins)
- [<ins>SEO</ins>](#insseoins)
- [<ins>Sidebar</ins>](#inssidebarins)
- [<ins>pages</ins>](#inspagesins)
- [<ins>StoryPage</ins>](#insstorypageins)

# In action

Expand Down Expand Up @@ -113,22 +119,69 @@ export default {

<!-- START-REACT-DOCGEN-TYPESCRIPT -->

## <ins>AxeAllyBlock</ins>
## <ins>Store</ins>

Story block container that displays displays the [axe](https://github.com/dequelabs/axe-core) ally test results
Store class used to query the stories and exchange information between processes

_AxeAllyBlock [source code](https:/github.com/ccontrols/component-controls/tree/master/plugins/axe-plugin/src/index.tsx)_
_Store [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/index.ts)_

## <ins>Header</ins>

_Header [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/Header.tsx)_

### properties

| Name | Type | Description |
| ------- | -------- | ----------- |
| `title` | _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_ | |

## <ins>SEO</ins>

_SEO [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/SEO.tsx)_

### properties

| Name | Type | Description |
| ------------- | -------- | ----------- |
| `title` | _string_ | |
| `description` | _string_ | |
| `pathname` | _string_ | |
| `image` | _string_ | |

## <ins>Sidebar</ins>

_Sidebar [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/components/Sidebar.tsx)_

### properties

| Name | Type | Description |
| --------- | -------- | ----------- |
| `storyId` | _string_ | |

## <ins>pages</ins>

_pages [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/pages/index.tsx)_

## <ins>StoryPage</ins>

_StoryPage [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx)_

### properties

| Name | Type | Description |
| ------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `axeOptions` | _Spec_ | |
| `id` | _string_ | id of the story optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `name` | _string_ | alternatively you can use the name of a story to load from an external file |
| `title` | _string_ | optional section title for the block. |
| `description` | _string_ | optional markdown description. |
| `collapsible` | _boolean_ | if false, will nothave a collapsible frame. |
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |
| Name | Type | Description |
| -------------- | ---------------------------------------------------------------- | ----------- |
| `pathContext*` | _{ title: string; loadedStore: StoriesStore; storyId: string; }_ | |

<!-- END-REACT-DOCGEN-TYPESCRIPT -->
1 change: 1 addition & 0 deletions integrations/gatsby-theme-stories/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
},
"license": "MIT",
"dependencies": {
"@component-controls/app-components": "^1.1.0",
"@component-controls/components": "^1.1.0",
"@component-controls/blocks": "^1.1.0",
"@component-controls/loader": "^1.1.0",
Expand Down
79 changes: 0 additions & 79 deletions integrations/gatsby-theme-stories/src/components/ColorMode.tsx

This file was deleted.

50 changes: 26 additions & 24 deletions integrations/gatsby-theme-stories/src/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,43 @@
/** @jsx jsx */
import { FC } from 'react';
import { jsx, useColorMode, Heading } from 'theme-ui';
import { FC, useContext } from 'react';
import { jsx, Heading } from 'theme-ui';
import { Flex } from '@theme-ui/components';
import { ColorMode } from './ColorMode';
import { ColorMode, SidebarContext } from '@component-controls/app-components';

interface HeaderProps {
title?: string;
}
export const Header: FC<HeaderProps> = ({ title }) => {
const [colorMode, setColorMode] = useColorMode();
const isDark = colorMode === `dark`;
const toggleColorMode = (e: any) => {
e.preventDefault();
setColorMode(isDark ? `light` : `dark`);
};
const { SidebarToggle } = useContext(SidebarContext);

return (
<header sx={{ px: 3, py: 1 }}>
<Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
<Heading>{title}</Heading>
<ColorMode isDark={isDark} toggle={toggleColorMode} />
</Flex>
<div
<header sx={{ px: 3 }}>
<Flex
sx={{
boxSizing: `border-box`,
display: `flex`,
variant: `dividers.bottom`,
py: 3,
flexDirection: 'row',
alignItems: `center`,
justifyContent: `space-between`,
mt: 3,
color: `secondary`,
a: { color: `secondary`, ':hover': { color: `heading` } },
flexFlow: `wrap`,
}}
>
links
</div>
<Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
<SidebarToggle />
<Heading sx={{ pl: 2 }}>{title}</Heading>
</Flex>
<Flex
sx={{
boxSizing: `border-box`,
variant: `dividers.bottom`,
justifyContent: `space-between`,
color: `secondary`,
a: { color: `secondary`, ':hover': { color: `accent` } },
flexFlow: `wrap`,
}}
>
<a>links</a>
</Flex>
<ColorMode />
</Flex>
</header>
);
};
Loading

0 comments on commit 195b01b

Please sign in to comment.