Skip to content

Commit

Permalink
feat: added StorySource addon panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 25, 2020
1 parent 9baf531 commit 7087bb6
Show file tree
Hide file tree
Showing 11 changed files with 106 additions and 52 deletions.
34 changes: 18 additions & 16 deletions core/specification/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@
- [CodeLocation](#codelocation)
- [CodePosition](#codeposition)
- [Repository](#repository)
- [StoryArguments](#storyarguments-1)
- [StoryRenderFn](#storyrenderfn-1)
- [StoryArguments](#storyarguments-1)
- [ComponentControl](#componentcontrol-1)
- [TypeValue](#typevalue-1)

Expand Down Expand Up @@ -107,7 +107,7 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co

map of stories. The id is compatible with CSF story ids

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L139)_
_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L144)_

`id`\*: string: [Story](#story)

Expand All @@ -117,7 +117,7 @@ a group of stories. Usually multiple stories are in one csf file
and the 'group' is the default export
in the case of MDX stories, the kind is crated using a <Meta /> tag

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L148)_
_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L153)_

`name`\*: string: any

Expand All @@ -129,6 +129,7 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co
| `component` | string \| object | id for component associated with the stories file |
| `components*` | \[name: string]: string | lookup into the global store.components since multiple components of the same name can be used example: \['Button']: 'c:/myapp/Button.tsx' |
| `controls` | [ComponentControls](#componentcontrols) | object of key/value pairs specifying the controls for the stories file this will apply to all the stories in the file |
| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorators (or wrappers) |
| `excludeStories` | string\[] \| [RegExp](#regexp) | list of stories to exclude from the stories file can also use regexp match |
| `fileName` | string | file name of the file of stories |
| `includeStories` | string\[] \| [RegExp](#regexp) | list of stories to include in the stories file can also use regexp match |
Expand All @@ -143,7 +144,7 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co

store of stories information in memory after the loader is applied

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L252)_
_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L262)_



Expand All @@ -170,6 +171,7 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co
| `arguments` | [StoryArguments](#storyarguments) | arguments pass to a CSF story eg \`export const story = props => <Story {...props} />;\` |
| `component` | string \| object | id for component associated with the story |
| `controls` | [ComponentControls](#componentcontrols) | object of key/value pairs specifying the controls for the story |
| `decorators` | [StoryRenderFn](#storyrenderfn)\[] | story decorators (or wrappers) |
| `id` | string | csf id of the story |
| `kind` | string | title of the file/group of stories |
| `loc` | [CodeLocation](#codelocation) | location in the source file of the story definition |
Expand Down Expand Up @@ -201,15 +203,15 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co

list of components used in stories

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L231)_
_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L241)_

`fileName`\*: string: [StoryComponent](#storycomponent)

## StoryKinds

list of story files, or groups

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L238)_
_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L248)_

`title`\*: string: [StoriesKind](#storieskind)

Expand All @@ -226,7 +228,7 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co

list of stories

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L245)_
_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L255)_

`id`\*: string: [Story](#story)

Expand Down Expand Up @@ -727,15 +729,6 @@ _defined in [@component-controls/specification/src/utility.ts](https://github.co
| `issues` | string | link for filing issues with the project |
| `name` | string | package name |

## StoryArguments

list of story arguments. Each argument can be a deconstructed argument of itself
the first argument are the control 'values'

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L54)_

[StoryArgument](#storyargument)\[]

## StoryRenderFn

story render function
Expand All @@ -752,6 +745,15 @@ _defined in [@component-controls/specification/src/stories.ts](https://github.co
| `context` | any | |
| `returns` | any | |

## StoryArguments

list of story arguments. Each argument can be a deconstructed argument of itself
the first argument are the control 'values'

_defined in [@component-controls/specification/src/stories.ts](https://github.com/ccontrols/component-controls/tree/master/core/specification/src/stories.ts#L54)_

[StoryArgument](#storyargument)\[]

## ComponentControl

ComponentControl is a either an object of property settings
Expand Down
1 change: 1 addition & 0 deletions examples/storybook-6/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ module.exports = {
options: {
controlsPanel: true,
propsPanel: true,
storySourcePanel: true,
}
}
],
Expand Down
54 changes: 29 additions & 25 deletions integrations/storybook/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,8 @@ The list of available controls and their documented properties is available [her
Smart Controls use a story component's properties table type information to generate automatically controls for the story.

There are 2 requirements for a story to use smart controls:
1\. The story needs to have a component assigned, and this component needs to have a valid properties table (it can be typescript, or prop-types or any other format supported by component-controls props-info extensions).
2\. The story needs to accept "some" parameters / internally detected within the source loaders / enabling the story to use the passed control values.
1. The story needs to have a component assigned, and this component needs to have a valid properties table (it can be typescript, or prop-types or any other format supported by component-controls props-info extensions).
2. The story needs to accept "some" parameters / internally detected within the source loaders / enabling the story to use the passed control values.

A screenshot of smart controls in action.

Expand Down Expand Up @@ -388,16 +388,17 @@ _defined in [@component-controls/storybook/src/types.ts](https://github.com/ccon

### properties

| Name | Type | Description |
| --------------- | ----------------------- | -------------------------------------------------------------------- |
| `controlsPanel` | boolean | whether to display the controls table as an addon panel in storybook |
| `pages` | string\[] | additional custom documentation pages |
| `propsPanel` | boolean | whether to display the props table as an addon panel in storybook |
| `webpack` | [RuleTypes](#ruletypes) | options that will be passed to the instrumenter. |
| Name | Type | Description |
| ------------------ | ----------------------- | ----------------------------------------------------------------------- |
| `controlsPanel` | boolean | whether to display the controls table as an addon panel in storybook |
| `pages` | string\[] | additional custom documentation pages |
| `propsPanel` | boolean | whether to display the props table as an addon panel in storybook |
| `storySourcePanel` | boolean | whether to display the StorySource block as an addon panel in storybook |
| `webpack` | [RuleTypes](#ruletypes) | options that will be passed to the instrumenter. |

## defaultRules

_defined in [@component-controls/storybook/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/types.ts#L25)_
_defined in [@component-controls/storybook/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/types.ts#L30)_



Expand All @@ -407,13 +408,14 @@ _defined in [@component-controls/storybook/src/types.ts](https://github.com/ccon

The `component-controls` block components ahev been designed from the ground up to be able to be placed either on documentation pages or in addon tabs.

You can turn on and off various panels:
You can turn on and off the available panels:

{
name: '@component-controls/storybook',
options: {
controlsPanel: true,
propsPanel: true,
storySourcePanel: true,
}
}

Expand Down Expand Up @@ -680,27 +682,29 @@ _PageContextContainer [source code](https:/github.com/ccontrols/component-contro

### properties

| Name | Type | Description |
| ------------ | ----------------------- | --------------------------------------------- |
| `storyId` | _string_ | story to display in the page |
| `dark` | _boolean_ | dark/light theme for the page |
| `components` | _MDXProviderComponents_ | components to customize the markdown display. |
| `theme` | _Theme_ | optional custom theme |
| `mockStore` | _StoryStore_ | mock store for tests |
| Name | Type | Description |
| ------------ | ----------------------- | -------------------------------------------------------------------------------------- |
| `storyId` | _string_ | story to display in the page |
| `dark` | _boolean_ | dark/light theme for the page |
| `options` | _any_ | global options passed from container those are global parameters as well as decorators |
| `components` | _MDXProviderComponents_ | components to customize the markdown display. |
| `theme` | _Theme_ | optional custom theme |
| `mockStore` | _StoryStore_ | mock store for tests |

## <ins>DocsContainer</ins>

_DocsContainer [source code](https:/github.com/ccontrols/component-controls/tree/master/integrations/storybook/src/docs-page/DocsContainer.tsx)_

### properties

| Name | Type | Description |
| ------------ | ----------------------- | --------------------------------------------- |
| `storyId` | _string_ | story to display in the page |
| `dark` | _boolean_ | dark/light theme for the page |
| `components` | _MDXProviderComponents_ | components to customize the markdown display. |
| `theme` | _Theme_ | optional custom theme |
| `mockStore` | _StoryStore_ | mock store for tests |
| `active` | _boolean_ | |
| Name | Type | Description |
| ------------ | ----------------------- | -------------------------------------------------------------------------------------- |
| `storyId` | _string_ | story to display in the page |
| `dark` | _boolean_ | dark/light theme for the page |
| `options` | _any_ | global options passed from container those are global parameters as well as decorators |
| `components` | _MDXProviderComponents_ | components to customize the markdown display. |
| `theme` | _Theme_ | optional custom theme |
| `mockStore` | _StoryStore_ | mock store for tests |
| `active` | _boolean_ | |

<!-- END-REACT-DOCGEN-TYPESCRIPT -->
1 change: 1 addition & 0 deletions integrations/storybook/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export default config({
'./src/config.tsx',
'./src/register-controls-panel.tsx',
'./src/register-props-panel.tsx',
'./src/register-storysource-panel.tsx',
'./src//docs-page/full-page.tsx',
],
});
9 changes: 9 additions & 0 deletions integrations/storybook/src/panel/StorySourcePanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import { StorySource } from '@component-controls/blocks';
import { AddonPanel, AddonPanelProps } from './AddonPanel';

export const StorySourcePanel: React.FC<AddonPanelProps> = props => (
<AddonPanel {...props}>
<StorySource id="." />
</AddonPanel>
);
1 change: 1 addition & 0 deletions integrations/storybook/src/panel/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export const CONTROLS_PANEL_ID = 'controls/panels/controls';
export const STORYSOURCE_PANEL_ID = 'controls/panels/storysource';
export const PROPS_PANEL_ID = 'controls/panels/props';
10 changes: 8 additions & 2 deletions integrations/storybook/src/preset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,20 @@ module.exports = {
},
managerEntries: (entry: any[] = [], options: PresetOptions = {}) => {
const result = [...entry];
const { controlsPanel = true, propsPanel = false } = options;
const {
controlsPanel = true,
propsPanel = false,
storySourcePanel = false,
} = options;
if (controlsPanel) {
result.push(require.resolve('./register-controls-panel'));
}
if (propsPanel) {
result.push(require.resolve('./register-props-panel'));
}

if (storySourcePanel) {
result.push(require.resolve('./register-storysource-panel'));
}
return result;
},
webpackFinal: (config: any = {}, options: PresetOptions = {}) => {
Expand Down
14 changes: 14 additions & 0 deletions integrations/storybook/src/register-storysource-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/* eslint-disable react/display-name */
import * as React from 'react';
import addons from '@storybook/addons';
import { StorySourcePanel } from './panel/StorySourcePanel';
import { STORYSOURCE_PANEL_ID } from './panel/constants';

addons.register(STORYSOURCE_PANEL_ID, api => {
addons.addPanel(`${STORYSOURCE_PANEL_ID}_panel`, {
title: 'Story source',
render: ({ active, key }) => (
<StorySourcePanel key={key} active={active} api={api} />
),
});
});
5 changes: 5 additions & 0 deletions integrations/storybook/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ export interface PresetOptions {
*/
propsPanel?: boolean;

/**
* whether to display the StorySource block as an addon panel in storybook
*/
storySourcePanel?: boolean;

/**
* additional custom documentation pages
*/
Expand Down
14 changes: 12 additions & 2 deletions misc/storybook-custom-docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
- [API](#api)
- [getContext](#getcontext)
- [getCurrentStoryId](#getcurrentstoryid)
- [getGlobalOptions](#getglobaloptions)
- [useStoryId](#usestoryid)
- [CustomPageDef](#custompagedef)
- [CustomPageRenderFnParams](#custompagerenderfnparams)
Expand Down Expand Up @@ -138,15 +139,24 @@ _defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://gi

function returning the current story id

_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L42)_
_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L57)_

**function** getCurrentStoryId(): string | undefined;

## getGlobalOptions

function returning the global options
parameters and decorators

_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L43)_

**function** getGlobalOptions(): any;

## useStoryId

React hook hook that tracks the changes to the current story and returns it's id

_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L57)_
_defined in [@component-controls/storybook-custom-docs/src/index.tsx](https://github.com/ccontrols/component-controls/tree/master/misc/storybook-custom-docs/src/index.tsx#L75)_

**function** useStoryId(): string;

Expand Down
Loading

0 comments on commit 7087bb6

Please sign in to comment.