mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 16:51:09 +08:00
Merge branch 'next' into preview-hooks
# Conflicts: # addons/actions/package.json # addons/events/package.json # examples/dev-kits/package.json # examples/html-kitchen-sink/package.json
This commit is contained in:
Norbert de Langen
commit
3d138f2021
@ -50,6 +50,17 @@ jobs:
|
||||
- run:
|
||||
name: Run chromatic on the pre-built storybook
|
||||
command: yarn chromatic -- -d ./storybook-static
|
||||
packtracker:
|
||||
<<: *defaults
|
||||
steps:
|
||||
- checkout
|
||||
- attach_workspace:
|
||||
at: .
|
||||
- run:
|
||||
name: Report webpack stats for manager of official storybook
|
||||
command: |
|
||||
cd examples/official-storybook
|
||||
yarn packtracker
|
||||
examples:
|
||||
<<: *defaults
|
||||
steps:
|
||||
@ -350,6 +361,9 @@ workflows:
|
||||
- smoke-tests:
|
||||
requires:
|
||||
- build
|
||||
- packtracker:
|
||||
requires:
|
||||
- build
|
||||
- native-smoke-tests:
|
||||
requires:
|
||||
- build
|
||||
|
||||
2
.github/automention.yml
vendored
2
.github/automention.yml
vendored
@ -11,7 +11,7 @@
|
||||
'api: addons': ['ndelangen']
|
||||
'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
|
||||
'addon: contexts': ['leoyli']
|
||||
'addon: docs': ['shilman', 'elevatebart']
|
||||
'addon: docs': ['shilman', 'elevatebart', 'jeroenreumkens']
|
||||
'addon: info': ['shilman', 'elevatebart']
|
||||
'addon: knobs': ['leoyli', 'Armanio']
|
||||
'addon: storysource': ['igor-dv', 'libetl']
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -27,3 +27,5 @@ lib/**/dll
|
||||
.expo/packager-info.json
|
||||
scripts/storage
|
||||
htpasswd
|
||||
/false
|
||||
storybook-out
|
||||
|
||||
@ -34,7 +34,15 @@ This Code of Conduct applies both within project spaces and in public spaces whe
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at ndelangen@me.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members:
|
||||
|
||||
Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
|
||||
Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
|
||||
Tom Coleman ~ @tmeasday - `tom@thesnail.org`
|
||||
Michael Shilman ~ @shilman - `michael@lab80.co`
|
||||
Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`
|
||||
|
||||
The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@ To test your project against the current latest version of storybook, you can cl
|
||||
```sh
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn install
|
||||
yarn bootstrap
|
||||
```
|
||||
|
||||
@ -139,7 +138,6 @@ A good way to do that is using the example `cra-kitchen-sink` app embedded in th
|
||||
# Download and build this repository:
|
||||
git clone https://github.com/storybookjs/storybook.git
|
||||
cd storybook
|
||||
yarn install
|
||||
yarn bootstrap --core
|
||||
|
||||
# make changes to try and reproduce the problem, such as adding components + stories
|
||||
@ -251,8 +249,6 @@ If an issue is a `bug`, and it doesn't have a clear reproduction that you have p
|
||||
|
||||
## Development Guide
|
||||
|
||||
> If you want to work on a UI feature, refer to the [Storybook UI](https://github.com/storybookjs/storybook/tree/master/lib/ui) page.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
Please have the **_latest_** stable versions of the following on your machine
|
||||
|
||||
13
MIGRATION.md
13
MIGRATION.md
@ -3,6 +3,7 @@
|
||||
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
|
||||
- [React native server](#react-native-server)
|
||||
- [Angular 7](#angular-7)
|
||||
- [CoreJS 3](#corejs-3)
|
||||
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
|
||||
- [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
|
||||
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
|
||||
@ -101,6 +102,18 @@ You should now be able to run Storybook and Angular 7 without any errors.
|
||||
|
||||
Reference issue: [https://github.com/angular/angular-cli/issues/13954](https://github.com/angular/angular-cli/issues/13954)
|
||||
|
||||
### CoreJS 3
|
||||
|
||||
Following the rest of the JS ecosystem, Storybook 5.1 upgrades [CoreJS](https://github.com/zloirock/core-js) 2 to 3, which is a breaking change.
|
||||
|
||||
This upgrade is problematic because many apps/libraries still rely on CoreJS 2, and many users get corejs-related errors due to bad resolution. To address this, we're using [corejs-upgrade-webpack-plugin](https://github.com/ndelangen/corejs-upgrade-webpack-plugin), which attempts to automatically upgrade code to CoreJS 3.
|
||||
|
||||
After a few iterations, this approach seems to be working. However, there are a few exceptions:
|
||||
|
||||
- If your app uses `babel-polyfill`, try to remove it
|
||||
|
||||
We'll update this section as we find more problem cases. If you have a `core-js` problem, please file an issue (preferably with a repro), and we'll do our best to get you sorted.
|
||||
|
||||
## From version 5.0.1 to 5.0.2
|
||||
|
||||
### Deprecate webpack extend mode
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -26,19 +26,19 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"axe-core": "^3.2.2",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"react-redux": "^7.0.2",
|
||||
"react-sizeme": "^2.5.2",
|
||||
"redux": "^4.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -21,18 +21,18 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/client-api": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"global": "^4.3.2",
|
||||
"polished": "^3.3.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"react-inspector": "^3.0.2",
|
||||
"uuid": "^3.3.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { action } from '../..';
|
||||
// import { configureActions } from '../..';
|
||||
import { action, configureActions } from '../..';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
@ -29,67 +28,66 @@ describe('Action', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: This functionality is removed, unsure if to add back or remove
|
||||
// describe('Depth config', () => {
|
||||
// it('with global depth configuration', () => {
|
||||
// const channel = createChannel();
|
||||
describe('Depth config', () => {
|
||||
it('with global depth configuration', () => {
|
||||
const channel = createChannel();
|
||||
|
||||
// const depth = 1;
|
||||
const depth = 1;
|
||||
|
||||
// configureActions({
|
||||
// depth,
|
||||
// });
|
||||
configureActions({
|
||||
depth,
|
||||
});
|
||||
|
||||
// action('test-action')({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: 'foo',
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
action('test-action')({
|
||||
root: {
|
||||
one: {
|
||||
two: 'foo',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// expect(getChannelData(channel)[0]).toEqual({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: 'foo',
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
expect(getChannelData(channel)[0]).toEqual({
|
||||
root: {
|
||||
one: {
|
||||
two: 'foo',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// it('per action depth option overrides global config', () => {
|
||||
// const channel = createChannel();
|
||||
it('per action depth option overrides global config', () => {
|
||||
const channel = createChannel();
|
||||
|
||||
// configureActions({
|
||||
// depth: 1,
|
||||
// });
|
||||
configureActions({
|
||||
depth: 1,
|
||||
});
|
||||
|
||||
// action('test-action', { depth: 3 })({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: {
|
||||
// three: {
|
||||
// four: {
|
||||
// five: 'foo',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
action('test-action', { depth: 3 })({
|
||||
root: {
|
||||
one: {
|
||||
two: {
|
||||
three: {
|
||||
four: {
|
||||
five: 'foo',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// expect(getChannelData(channel)[0]).toEqual({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: {
|
||||
// three: {
|
||||
// four: {
|
||||
// five: 'foo',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
expect(getChannelData(channel)[0]).toEqual({
|
||||
root: {
|
||||
one: {
|
||||
two: {
|
||||
three: {
|
||||
four: {
|
||||
five: 'foo',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,9 +2,11 @@ import uuid from 'uuid/v1';
|
||||
import { addons } from '@storybook/addons';
|
||||
import { EVENT_ID } from '../constants';
|
||||
import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
|
||||
import { config } from './configureActions';
|
||||
|
||||
export function action(name: string, options: ActionOptions = {}): HandlerFunction {
|
||||
const actionOptions = {
|
||||
...config,
|
||||
...options,
|
||||
};
|
||||
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
import { action } from './action';
|
||||
import { ActionOptions, ActionsMap } from '../models';
|
||||
import { config } from './configureActions';
|
||||
|
||||
export function actions(...args: any[]): ActionsMap {
|
||||
let options: ActionOptions = {};
|
||||
let options: ActionOptions = config;
|
||||
const names = args;
|
||||
// last argument can be options
|
||||
if (names.length !== 1 && typeof args[args.length - 1] !== 'string') {
|
||||
options = names.pop();
|
||||
options = {
|
||||
...config,
|
||||
...names.pop(),
|
||||
};
|
||||
}
|
||||
|
||||
let namesObject = names[0];
|
||||
|
||||
@ -51,6 +51,8 @@ addParameters({
|
||||
{ name: 'facebook', value: '#3b5998' },
|
||||
],
|
||||
});
|
||||
|
||||
// should be before configure()
|
||||
```
|
||||
|
||||
If you want to override backgrounds for a single story or group of stories, pass the `backgrounds` parameter:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,15 +25,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"memoizerific": "^1.11.3",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-contexts",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook Addon Contexts",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -28,10 +28,11 @@
|
||||
"dev:check-types": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1"
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"global": "*",
|
||||
|
||||
@ -47,5 +47,7 @@ export const ToolBarControl: ToolBarControl = ({
|
||||
},
|
||||
};
|
||||
|
||||
return icon && list.length && !options.disable ? <ToolBarMenu icon={icon} {...props} /> : null;
|
||||
return Array.isArray(list) && list.length && !options.disable ? (
|
||||
<ToolBarMenu icon={icon} {...props} />
|
||||
) : null;
|
||||
};
|
||||
|
||||
@ -53,4 +53,51 @@ describe('Tests on addon-contexts component: ToolBarMenu', () => {
|
||||
</lifecycle(WithTooltipPure)>
|
||||
`);
|
||||
});
|
||||
|
||||
it('should render TabButton with title if the icon is given', () => {
|
||||
// given
|
||||
const someProps = {
|
||||
title: 'Some Context',
|
||||
active: true,
|
||||
expanded: false,
|
||||
setExpanded: jest.fn,
|
||||
optionsProps: {
|
||||
activeName: 'A',
|
||||
list: ['A', 'B'],
|
||||
onSelectOption: jest.fn,
|
||||
},
|
||||
};
|
||||
|
||||
// when
|
||||
const result = shallow(<ToolBarMenu {...someProps} />);
|
||||
|
||||
// then
|
||||
expect(result).toMatchInlineSnapshot(`
|
||||
<lifecycle(WithTooltipPure)
|
||||
closeOnClick={true}
|
||||
onVisibilityChange={[Function]}
|
||||
placement="top"
|
||||
tooltip={
|
||||
<ToolBarMenuOptions
|
||||
activeName="A"
|
||||
list={
|
||||
Array [
|
||||
"A",
|
||||
"B",
|
||||
]
|
||||
}
|
||||
onSelectOption={[Function]}
|
||||
/>
|
||||
}
|
||||
tooltipShown={false}
|
||||
trigger="click"
|
||||
>
|
||||
<TabButton
|
||||
active={true}
|
||||
>
|
||||
Some Context
|
||||
</TabButton>
|
||||
</lifecycle(WithTooltipPure)>
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { ComponentProps } from 'react';
|
||||
import { Icons, IconButton, WithTooltip } from '@storybook/components';
|
||||
import { Icons, IconButton, WithTooltip, TabButton } from '@storybook/components';
|
||||
import { ToolBarMenuOptions } from './ToolBarMenuOptions';
|
||||
import { ContextNode, FCNoChildren } from '../../shared/types.d';
|
||||
|
||||
type ToolBarMenu = FCNoChildren<{
|
||||
icon: ComponentProps<typeof Icons>['icon'];
|
||||
icon?: ComponentProps<typeof Icons>['icon'] | '' | void;
|
||||
title: ContextNode['title'];
|
||||
active: boolean;
|
||||
expanded: boolean;
|
||||
@ -28,8 +28,12 @@ export const ToolBarMenu: ToolBarMenu = ({
|
||||
onVisibilityChange={setExpanded}
|
||||
tooltip={<ToolBarMenuOptions {...optionsProps} />}
|
||||
>
|
||||
<IconButton active={active} title={title}>
|
||||
<Icons icon={icon} />
|
||||
</IconButton>
|
||||
{icon ? (
|
||||
<IconButton active={active} title={title}>
|
||||
<Icons icon={icon} />
|
||||
</IconButton>
|
||||
) : (
|
||||
<TabButton active={active}>{title}</TabButton>
|
||||
)}
|
||||
</WithTooltip>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,13 +25,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4"
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-design-assets",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Design asset preview for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -27,16 +27,16 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"use-image": "^1.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
3
addons/docs/README.md
Normal file
3
addons/docs/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
# Storybook Docs
|
||||
|
||||
Living documentation for your components.
|
||||
39
addons/docs/package.json
Normal file
39
addons/docs/package.json
Normal file
@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "@storybook/addon-docs",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Superior documentation for your components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"notes",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/docs"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/util-deprecate": "^1.0.0",
|
||||
"@types/webpack-env": "^1.13.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
1
addons/docs/register.js
Normal file
1
addons/docs/register.js
Normal file
@ -0,0 +1 @@
|
||||
require('./dist/register.js');
|
||||
0
addons/docs/src/public_api.ts
Normal file
0
addons/docs/src/public_api.ts
Normal file
12
addons/docs/src/register.ts
Normal file
12
addons/docs/src/register.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import addons, { types } from '@storybook/addons';
|
||||
import { ADDON_ID, PANEL_ID } from './shared';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
addons.add(PANEL_ID, {
|
||||
type: types.TAB,
|
||||
title: 'Docs',
|
||||
route: ({ storyId }) => `/docs/${storyId}`,
|
||||
match: ({ viewMode }) => viewMode === 'docs',
|
||||
render: () => null,
|
||||
});
|
||||
});
|
||||
3
addons/docs/src/shared.ts
Normal file
3
addons/docs/src/shared.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export const ADDON_ID = 'storybook/docs';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = `docs`;
|
||||
9
addons/docs/tsconfig.json
Normal file
9
addons/docs/tsconfig.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["src/**.test.ts"]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,14 +24,15 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/client-api": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"format-json": "^1.0.3",
|
||||
"lodash": "^4.17.11",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-textarea-autosize": "^7.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
|
||||
import { styled } from '@storybook/theming';
|
||||
import json from 'format-json';
|
||||
@ -133,14 +134,14 @@ class Item extends Component {
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps = ({ payload }, { prevPayload }) => {
|
||||
if (payload !== prevPayload) {
|
||||
if (!isEqual(payload, prevPayload)) {
|
||||
const payloadString = json.plain(payload);
|
||||
|
||||
const refinedPayload = getJSONFromString(payloadString);
|
||||
return {
|
||||
failed: false,
|
||||
payload: getJSONFromString(payloadString),
|
||||
payload: refinedPayload,
|
||||
payloadString,
|
||||
prevPayload,
|
||||
prevPayload: refinedPayload,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.7"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -17,13 +17,13 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"jsnext:main": "src/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"graphiql": "^0.13.0",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import style from './style';
|
||||
import { style } from './style';
|
||||
|
||||
export default function FullScreen({ children }) {
|
||||
export const FullScreen: FunctionComponent = ({ children }) => {
|
||||
return <div style={style.wrapper}>{children}</div>;
|
||||
}
|
||||
};
|
||||
|
||||
FullScreen.defaultProps = { children: null };
|
||||
FullScreen.propTypes = { children: PropTypes.node };
|
||||
@ -1,6 +1,6 @@
|
||||
export default {
|
||||
export const style = {
|
||||
wrapper: {
|
||||
position: 'absolute',
|
||||
position: 'absolute' as const,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
@ -1,36 +1,21 @@
|
||||
import { fetch } from 'global';
|
||||
import React from 'react';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import GraphiQL from 'graphiql';
|
||||
import 'graphiql/graphiql.css';
|
||||
|
||||
import { Consumer } from '@storybook/api';
|
||||
import { Consumer, Combo } from '@storybook/api';
|
||||
|
||||
import { PARAM_KEY } from '.';
|
||||
import { reIndentQuery, getDefaultFetcher } from './shared';
|
||||
|
||||
const FETCH_OPTIONS = {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
};
|
||||
|
||||
function getDefaultFetcher(url) {
|
||||
return params => {
|
||||
const body = JSON.stringify(params);
|
||||
const options = Object.assign({ body }, FETCH_OPTIONS);
|
||||
return fetch(url, options).then(res => res.json());
|
||||
};
|
||||
interface GQLProps {
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
function reIndentQuery(query) {
|
||||
const lines = query.split('\n');
|
||||
const spaces = lines[lines.length - 1].length - 1;
|
||||
return lines.map((l, i) => (i === 0 ? l : l.slice(spaces))).join('\n');
|
||||
}
|
||||
|
||||
const GQL = ({ active }) => {
|
||||
const GQL: FunctionComponent<GQLProps> = ({ active }) => {
|
||||
return active ? (
|
||||
<Consumer>
|
||||
{({ api, state }) => {
|
||||
{({ api, state }: Combo) => {
|
||||
const story = state.storiesHash[state.storyId];
|
||||
const parameters = story ? api.getParameters(story.id, PARAM_KEY) : null;
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import GraphiQL from 'graphiql';
|
||||
import { fetch } from 'global';
|
||||
import 'graphiql/graphiql.css';
|
||||
|
||||
import FullScreen from './components/FullScreen';
|
||||
|
||||
const FETCH_OPTIONS = {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
};
|
||||
|
||||
function getDefautlFetcher(url) {
|
||||
return params => {
|
||||
const body = JSON.stringify(params);
|
||||
const options = Object.assign({ body }, FETCH_OPTIONS);
|
||||
return fetch(url, options).then(res => res.json());
|
||||
};
|
||||
}
|
||||
|
||||
function reIndentQuery(query) {
|
||||
const lines = query.split('\n');
|
||||
const spaces = lines[lines.length - 1].length - 1;
|
||||
return lines.map((l, i) => (i === 0 ? l : l.slice(spaces))).join('\n');
|
||||
}
|
||||
|
||||
export function setupGraphiQL(config) {
|
||||
return (_query, variables = '{}') => {
|
||||
const query = reIndentQuery(_query);
|
||||
const fetcher = config.fetcher || getDefautlFetcher(config.url);
|
||||
return () => (
|
||||
<FullScreen>
|
||||
<GraphiQL query={query} variables={variables} fetcher={fetcher} />
|
||||
</FullScreen>
|
||||
);
|
||||
};
|
||||
}
|
||||
31
addons/graphql/src/preview.tsx
Normal file
31
addons/graphql/src/preview.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import GraphiQL from 'graphiql';
|
||||
|
||||
import 'graphiql/graphiql.css';
|
||||
|
||||
import { FullScreen } from './components/FullScreen';
|
||||
import { reIndentQuery, getDefaultFetcher } from './shared';
|
||||
|
||||
export interface FetcherParams {
|
||||
query: string;
|
||||
variables?: string;
|
||||
operationName?: string;
|
||||
}
|
||||
|
||||
export interface SetupGraphiQLConfig {
|
||||
url: string;
|
||||
fetcher?: (params: FetcherParams) => Promise<any>;
|
||||
}
|
||||
|
||||
export const setupGraphiQL = (config: SetupGraphiQLConfig) => (
|
||||
_query: string,
|
||||
variables = '{}'
|
||||
) => {
|
||||
const query = reIndentQuery(_query);
|
||||
const fetcher = config.fetcher || getDefaultFetcher(config.url);
|
||||
return () => (
|
||||
<FullScreen>
|
||||
<GraphiQL query={query} variables={variables} fetcher={fetcher} />
|
||||
</FullScreen>
|
||||
);
|
||||
};
|
||||
@ -3,7 +3,7 @@ import { addons, types } from '@storybook/addons';
|
||||
import GQL from './manager';
|
||||
import { ADDON_ID } from '.';
|
||||
|
||||
export function register() {
|
||||
export const register = () => {
|
||||
addons.register(ADDON_ID, () => {
|
||||
addons.add(ADDON_ID, {
|
||||
title: 'GraphiQL',
|
||||
@ -13,4 +13,4 @@ export function register() {
|
||||
render: GQL,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
22
addons/graphql/src/shared.ts
Normal file
22
addons/graphql/src/shared.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { fetch } from 'global';
|
||||
|
||||
import { FetcherParams } from './preview';
|
||||
|
||||
const FETCH_OPTIONS = {
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
};
|
||||
|
||||
export const getDefaultFetcher = (url: string) => {
|
||||
return (params: FetcherParams) => {
|
||||
const body = JSON.stringify(params);
|
||||
const options = Object.assign({ body }, FETCH_OPTIONS);
|
||||
return fetch(url, options).then((res: any) => res.json());
|
||||
};
|
||||
};
|
||||
|
||||
export const reIndentQuery = (query: string) => {
|
||||
const lines = query.trim().split('\n');
|
||||
const spaces = lines[lines.length - 1].length - 1;
|
||||
return lines.map((l, i) => (i === 0 ? l : l.slice(spaces))).join('\n');
|
||||
};
|
||||
7
addons/graphql/src/typings.d.ts
vendored
Normal file
7
addons/graphql/src/typings.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
declare module 'global';
|
||||
|
||||
// There are no types for graphiql
|
||||
declare module 'graphiql' {
|
||||
const GraphiQL: any;
|
||||
export default GraphiQL;
|
||||
}
|
||||
13
addons/graphql/tsconfig.json
Normal file
13
addons/graphql/tsconfig.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
@ -23,7 +23,11 @@ It is possible to add `info` by default to all or a subsection of stories by usi
|
||||
It is important to declare this decorator as **the first decorator**, otherwise it won't work well.
|
||||
|
||||
```js
|
||||
addDecorator(withInfo); // Globally in your .storybook/config.js.
|
||||
// Globally in your .storybook/config.js.
|
||||
import { addDecorator } from '@storybook/react';
|
||||
import { withInfo } from '@storybook/addon-info';
|
||||
|
||||
addDecorator(withInfo);
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,24 +22,25 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"jsx-to-string": "^1.4.0",
|
||||
"marksy": "^7.0.0",
|
||||
"nested-object-assign": "^1.0.3",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"react-addons-create-fragment": "^15.6.2",
|
||||
"react-element-to-jsx-string": "^14.0.2",
|
||||
"react-is": "^16.8.4",
|
||||
"react-is": "^16.8.3",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-test-renderer": "^16.8.4"
|
||||
"react-test-renderer": "^16.8.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,179 +0,0 @@
|
||||
import React from 'react';
|
||||
import { isForwardRef } from 'react-is';
|
||||
import PropTypes from 'prop-types';
|
||||
import Props from './Props';
|
||||
import { getDisplayName } from '../react-utils';
|
||||
|
||||
const stylesheet = {
|
||||
containerStyle: {},
|
||||
tagStyle: {
|
||||
color: '#444',
|
||||
},
|
||||
};
|
||||
|
||||
function getData(element) {
|
||||
const data = {
|
||||
name: null,
|
||||
text: null,
|
||||
children: null,
|
||||
};
|
||||
|
||||
if (element === null) {
|
||||
return data;
|
||||
}
|
||||
|
||||
if (typeof element === 'string') {
|
||||
data.text = element;
|
||||
return data;
|
||||
}
|
||||
|
||||
if (typeof element === 'number') {
|
||||
data.text = String.toString(element);
|
||||
return data;
|
||||
}
|
||||
|
||||
data.children = element.props.children;
|
||||
data.name = getDisplayName(element.type);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export default function Node(props) {
|
||||
const {
|
||||
node,
|
||||
depth,
|
||||
maxPropsIntoLine,
|
||||
maxPropObjectKeys,
|
||||
maxPropArrayLength,
|
||||
maxPropStringLength,
|
||||
} = props;
|
||||
const { tagStyle, containerStyle } = stylesheet;
|
||||
|
||||
const leftPad = {
|
||||
paddingLeft: 3 + (depth + 1) * 15,
|
||||
paddingRight: 3,
|
||||
};
|
||||
|
||||
// Keep a copy so that further mutations to containerStyle don't impact us:
|
||||
const containerStyleCopy = Object.assign({}, containerStyle, leftPad);
|
||||
|
||||
const { name, text, children } = getData(node);
|
||||
|
||||
// Just text
|
||||
if (!name) {
|
||||
return (
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>{text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isForwardRef(node) && !node.type.displayName) {
|
||||
const childElement = node.type.render(node.props);
|
||||
return (
|
||||
<div>
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
<
|
||||
{`ForwardRef`}
|
||||
</span>
|
||||
<Props
|
||||
node={node}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
<span style={tagStyle}>></span>
|
||||
</div>
|
||||
<Node
|
||||
node={childElement}
|
||||
depth={depth + 1}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
</
|
||||
{`ForwardRef`}
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Single-line tag
|
||||
if (!children) {
|
||||
return (
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
<
|
||||
{name}
|
||||
</span>
|
||||
<Props
|
||||
node={node}
|
||||
singleLine
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
<span style={tagStyle}>/></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// tag with children
|
||||
return (
|
||||
<div>
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
<
|
||||
{name}
|
||||
</span>
|
||||
<Props
|
||||
node={node}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
<span style={tagStyle}>></span>
|
||||
</div>
|
||||
{React.Children.map(children, childElement => (
|
||||
<Node
|
||||
node={childElement}
|
||||
depth={depth + 1}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
))}
|
||||
<div style={containerStyleCopy}>
|
||||
<span style={tagStyle}>
|
||||
</
|
||||
{name}
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Node.defaultProps = {
|
||||
node: null,
|
||||
depth: 0,
|
||||
};
|
||||
|
||||
Node.propTypes = {
|
||||
node: PropTypes.node,
|
||||
depth: PropTypes.number,
|
||||
maxPropsIntoLine: PropTypes.number.isRequired,
|
||||
maxPropObjectKeys: PropTypes.number.isRequired,
|
||||
maxPropArrayLength: PropTypes.number.isRequired,
|
||||
maxPropStringLength: PropTypes.number.isRequired,
|
||||
};
|
||||
@ -1,14 +1,14 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import React, { Component, createElement } from 'react';
|
||||
import React, { Fragment, Component, createElement } from 'react';
|
||||
import { isForwardRef } from 'react-is';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import PropTypes from 'prop-types';
|
||||
import global from 'global';
|
||||
|
||||
import marksy from 'marksy';
|
||||
import Node from './Node';
|
||||
import { Pre } from './markdown';
|
||||
import jsxToString from 'react-element-to-jsx-string';
|
||||
import { Code } from './markdown';
|
||||
import { getDisplayName, getType } from '../react-utils';
|
||||
|
||||
global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
|
||||
@ -37,10 +37,9 @@ const stylesheetBase = {
|
||||
position: 'fixed',
|
||||
background: 'white',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: '0 40px',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
overflow: 'auto',
|
||||
zIndex: 99999,
|
||||
},
|
||||
@ -54,12 +53,9 @@ const stylesheetBase = {
|
||||
fontWeight: 300,
|
||||
lineHeight: 1.45,
|
||||
fontSize: '15px',
|
||||
border: '1px solid #eee',
|
||||
padding: '20px 40px 40px',
|
||||
borderRadius: '2px',
|
||||
backgroundColor: '#fff',
|
||||
marginTop: '20px',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
infoContent: {
|
||||
marginBottom: 0,
|
||||
@ -133,7 +129,7 @@ class Story extends Component {
|
||||
const { stylesheet } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Fragment>
|
||||
{this._renderInlineHeader()}
|
||||
{this._renderStory()}
|
||||
<div style={stylesheet.infoPage}>
|
||||
@ -144,7 +140,7 @@ class Story extends Component {
|
||||
{this._getPropTables()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@ -187,7 +183,7 @@ class Story extends Component {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Fragment>
|
||||
<div style={stylesheet.children}>{children}</div>
|
||||
<button
|
||||
type="button"
|
||||
@ -197,26 +193,28 @@ class Story extends Component {
|
||||
>
|
||||
Show Info
|
||||
</button>
|
||||
<div style={infoStyle} className="info__overlay">
|
||||
<button
|
||||
type="button"
|
||||
style={buttonStyle}
|
||||
onClick={closeOverlay}
|
||||
className="info__close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div style={stylesheet.infoPage}>
|
||||
<div style={stylesheet.infoBody}>
|
||||
{this._getInfoHeader()}
|
||||
{this._getInfoContent()}
|
||||
{this._getComponentDescription()}
|
||||
{this._getSourceCode()}
|
||||
{this._getPropTables()}
|
||||
{open ? (
|
||||
<div style={infoStyle} className="info__overlay">
|
||||
<button
|
||||
type="button"
|
||||
style={buttonStyle}
|
||||
onClick={closeOverlay}
|
||||
className="info__close-button"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div style={stylesheet.infoPage}>
|
||||
<div style={stylesheet.infoBody}>
|
||||
{this._getInfoHeader()}
|
||||
{this._getInfoContent()}
|
||||
{this._getComponentDescription()}
|
||||
{this._getSourceCode()}
|
||||
{this._getPropTables()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@ -260,7 +258,8 @@ class Story extends Component {
|
||||
padding = matches[0].length;
|
||||
}
|
||||
const source = lines.map(s => s.slice(padding)).join('\n');
|
||||
return <div style={stylesheet.infoContent}>{this.marksy(source).tree}</div>;
|
||||
|
||||
return <Fragment>{this.marksy(source).tree}</Fragment>;
|
||||
}
|
||||
|
||||
_getComponentDescription() {
|
||||
@ -275,7 +274,7 @@ class Story extends Component {
|
||||
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
|
||||
if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
|
||||
const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
|
||||
retDiv = <div>{this.marksy(componentDescription).tree}</div>;
|
||||
retDiv = <Fragment>{this.marksy(componentDescription).tree}</Fragment>;
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -284,14 +283,7 @@ class Story extends Component {
|
||||
}
|
||||
|
||||
_getSourceCode() {
|
||||
const {
|
||||
showSource,
|
||||
maxPropsIntoLine,
|
||||
maxPropObjectKeys,
|
||||
maxPropArrayLength,
|
||||
maxPropStringLength,
|
||||
children,
|
||||
} = this.props;
|
||||
const { showSource, children } = this.props;
|
||||
const { stylesheet } = this.state;
|
||||
|
||||
if (!showSource) {
|
||||
@ -299,22 +291,10 @@ class Story extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Fragment>
|
||||
<h1 style={stylesheet.source.h1}>Story Source</h1>
|
||||
<Pre>
|
||||
{React.Children.map(children, (root, idx) => (
|
||||
<Node
|
||||
key={idx} // eslint-disable-line react/no-array-index-key
|
||||
node={root}
|
||||
depth={0}
|
||||
maxPropsIntoLine={maxPropsIntoLine}
|
||||
maxPropObjectKeys={maxPropObjectKeys}
|
||||
maxPropArrayLength={maxPropArrayLength}
|
||||
maxPropStringLength={maxPropStringLength}
|
||||
/>
|
||||
))}
|
||||
</Pre>
|
||||
</div>
|
||||
<Code code={jsxToString(children)} language="jsx" format={false} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@ -404,16 +384,15 @@ class Story extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Fragment>
|
||||
<h1 style={stylesheet.source.h1}>Prop Types</h1>
|
||||
{propTables}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { showInline } = this.props;
|
||||
// <ThemeProvider theme={stylesheet}></ThemeProvider>
|
||||
return showInline ? this._renderInline() : this._renderOverlay();
|
||||
}
|
||||
}
|
||||
@ -437,7 +416,6 @@ Story.propTypes = {
|
||||
styles: PropTypes.func.isRequired,
|
||||
children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
components: PropTypes.shape({}),
|
||||
maxPropsIntoLine: PropTypes.number.isRequired,
|
||||
maxPropObjectKeys: PropTypes.number.isRequired,
|
||||
maxPropArrayLength: PropTypes.number.isRequired,
|
||||
maxPropStringLength: PropTypes.number.isRequired,
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { SyntaxHighlighter } from '@storybook/components';
|
||||
import { ThemeProvider, convert } from '@storybook/theming';
|
||||
|
||||
const Code = ({ language, code }) => (
|
||||
<SyntaxHighlighter bordered copyable language={language}>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
const Code = ({ code, language = 'plaintext', ...rest }) => (
|
||||
<ThemeProvider theme={convert()}>
|
||||
<SyntaxHighlighter bordered copyable language={language} {...rest}>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</ThemeProvider>
|
||||
);
|
||||
Code.propTypes = {
|
||||
language: PropTypes.string.isRequired,
|
||||
|
||||
@ -5,35 +5,21 @@ const defaultProps = { children: null };
|
||||
const propTypes = { children: PropTypes.node };
|
||||
|
||||
export function P({ children }) {
|
||||
const style = {
|
||||
fontSize: '15px',
|
||||
};
|
||||
|
||||
// <P> is oftentimes used as a parent element of
|
||||
// <a> and <pre> elements, which is why <div>
|
||||
// is used as the outputted element when parsing
|
||||
// marksy content rather than <p>.
|
||||
return <div style={style}>{children}</div>;
|
||||
return <p>{children}</p>;
|
||||
}
|
||||
|
||||
P.defaultProps = defaultProps;
|
||||
P.propTypes = propTypes;
|
||||
|
||||
export function LI({ children }) {
|
||||
const style = {
|
||||
fontSize: '15px',
|
||||
};
|
||||
return <li style={style}>{children}</li>;
|
||||
return <li>{children}</li>;
|
||||
}
|
||||
|
||||
LI.defaultProps = defaultProps;
|
||||
LI.propTypes = propTypes;
|
||||
|
||||
export function UL({ children }) {
|
||||
const style = {
|
||||
fontSize: '15px',
|
||||
};
|
||||
return <ul style={style}>{children}</ul>;
|
||||
return <ul>{children}</ul>;
|
||||
}
|
||||
|
||||
UL.defaultProps = defaultProps;
|
||||
|
||||
@ -33,7 +33,9 @@ const storybookReactClassMock = {
|
||||
# Awesome test component description
|
||||
## with markdown support
|
||||
**bold** *cursive*
|
||||
`,
|
||||
\`\`\`js
|
||||
a;
|
||||
\`\`\``,
|
||||
name: 'TestComponent',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,14 +28,14 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.8.4",
|
||||
"react": "^16.8.3",
|
||||
"upath": "^1.1.0",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,11 +22,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/client-api": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.0.1",
|
||||
"escape-html": "^1.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,9 +22,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/router": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -58,6 +58,27 @@ storiesOf('MyButton', module).add(
|
||||
);
|
||||
```
|
||||
|
||||
### With Angular
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
|
||||
import { ButtonComponent } from './button.component';
|
||||
|
||||
storiesOf('Button', module).add(
|
||||
'with some emoji',
|
||||
() => ({
|
||||
component: ButtonComponent,
|
||||
props: {
|
||||
text: '😀 😎 👍 💯'
|
||||
}
|
||||
}),
|
||||
{
|
||||
notes: 'A very simple example of addon notes',
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Using Markdown
|
||||
|
||||
Using Markdown in your notes is supported, Storybook will load Markdown as raw by default.
|
||||
@ -81,3 +102,18 @@ When using Markdown, you can also embed gifs from Giphy into your Markdown. Curr
|
||||
|
||||
<Giphy gif='cheese' />
|
||||
```
|
||||
|
||||
## Multiple Notes Sections
|
||||
|
||||
If you need to display different notes for different consumers of your storybook (e.g design, developers), you can configure multiple notes pages. The following will render a tab with unique notes for both `Introduction` and `Design`.
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import Component from './Component';
|
||||
import intro from './intro.md';
|
||||
import design from './design.md';
|
||||
|
||||
storiesOf('Component', module).add('With Markdown', () => <Component />, {
|
||||
notes: { Introduction: intro, 'Design Notes': design },
|
||||
});
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,13 +23,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/router": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"markdown-to-jsx": "^6.9.3",
|
||||
|
||||
@ -9,6 +9,8 @@ import {
|
||||
Placeholder,
|
||||
DocumentFormatting,
|
||||
Link,
|
||||
TabWrapper,
|
||||
TabsState,
|
||||
} from '@storybook/components';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import Giphy from './giphy';
|
||||
@ -31,14 +33,14 @@ interface Props {
|
||||
api: API;
|
||||
}
|
||||
|
||||
function read(param: Parameters | undefined): string | undefined {
|
||||
function read(param: Parameters | undefined): Record<string, string> | string | undefined {
|
||||
if (!param) {
|
||||
return undefined;
|
||||
}
|
||||
if (typeof param === 'string') {
|
||||
return param;
|
||||
}
|
||||
if ('disabled' in param) {
|
||||
if ('disable' in param) {
|
||||
return undefined;
|
||||
}
|
||||
if ('text' in param) {
|
||||
@ -47,6 +49,9 @@ function read(param: Parameters | undefined): string | undefined {
|
||||
if ('markdown' in param) {
|
||||
return param.markdown;
|
||||
}
|
||||
if (typeof param === 'object') {
|
||||
return param;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@ -110,7 +115,10 @@ interface Overrides {
|
||||
}
|
||||
type Options = typeof defaultOptions & Overrides;
|
||||
|
||||
const mapper = ({ state, api }: Combo): { value?: string; options: Options } => {
|
||||
const mapper = ({
|
||||
state,
|
||||
api,
|
||||
}: Combo): { value?: string | Record<string, string>; options: Options } => {
|
||||
const extraElements = Object.entries(api.getElements(types.NOTES_ELEMENT)).reduce(
|
||||
(acc, [k, v]) => ({ ...acc, [k]: v.render }),
|
||||
{}
|
||||
@ -133,29 +141,66 @@ const NotesPanel = ({ active }: Props) => {
|
||||
|
||||
return (
|
||||
<Consumer filter={mapper}>
|
||||
{({ options, value }: { options: Options; value?: string }) => {
|
||||
return value ? (
|
||||
<Panel className="addon-notes-container">
|
||||
<DocumentFormatting>
|
||||
<Markdown options={options}>{formatter(value)}</Markdown>
|
||||
</DocumentFormatting>
|
||||
</Panel>
|
||||
) : (
|
||||
<Placeholder>
|
||||
<Fragment>No notes yet</Fragment>
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
|
||||
target="_blank"
|
||||
withArrow
|
||||
secondary
|
||||
cancel={false}
|
||||
>
|
||||
document components in Markdown
|
||||
</Link>
|
||||
</Fragment>
|
||||
</Placeholder>
|
||||
{({ options, value }: { options: Options; value?: string | Record<string, string> }) => {
|
||||
if (!value) {
|
||||
return (
|
||||
<Placeholder>
|
||||
<Fragment>No notes yet</Fragment>
|
||||
<Fragment>
|
||||
Learn how to{' '}
|
||||
<Link
|
||||
href="https://github.com/storybookjs/storybook/tree/master/addons/notes"
|
||||
target="_blank"
|
||||
withArrow
|
||||
secondary
|
||||
cancel={false}
|
||||
>
|
||||
document components in Markdown
|
||||
</Link>
|
||||
</Fragment>
|
||||
</Placeholder>
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof value === 'string' || Object.keys(value).length === 1) {
|
||||
const md = typeof value === 'object' ? Object.values(value)[0] : value;
|
||||
|
||||
return (
|
||||
<Panel className="addon-notes-container">
|
||||
<DocumentFormatting>
|
||||
<Markdown options={options}>{formatter(md)}</Markdown>
|
||||
</DocumentFormatting>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
const groups: { title: string; render: (props: { active: boolean }) => void }[] = [];
|
||||
|
||||
Object.entries(value).forEach(([title, docs]) => {
|
||||
groups.push({
|
||||
title,
|
||||
render: ({ active: isActive }) => (
|
||||
<TabWrapper key={title} active={isActive}>
|
||||
<Panel>
|
||||
<DocumentFormatting>
|
||||
<Markdown options={options}>{formatter(docs)}</Markdown>
|
||||
</DocumentFormatting>
|
||||
</Panel>
|
||||
</TabWrapper>
|
||||
),
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="addon-notes-container">
|
||||
<TabsState>
|
||||
{groups.map(group => (
|
||||
<div id={group.title} key={group.title} title={group.title}>
|
||||
{group.render}
|
||||
</div>
|
||||
))}
|
||||
</TabsState>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Consumer>
|
||||
|
||||
@ -11,5 +11,11 @@ interface MarkdownParameter {
|
||||
interface DisabledParameter {
|
||||
disable: boolean;
|
||||
}
|
||||
type TabsParameter = Record<string, string>;
|
||||
|
||||
export type Parameters = string | TextParameter | MarkdownParameter | DisabledParameter;
|
||||
export type Parameters =
|
||||
| string
|
||||
| TextParameter
|
||||
| MarkdownParameter
|
||||
| DisabledParameter
|
||||
| TabsParameter;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-actions",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Action Logger addon for react-native storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -19,13 +19,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"core-js": "^2.5.7",
|
||||
"fast-deep-equal": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "5.1.1"
|
||||
"@storybook/addon-actions": "5.2.0-alpha.23"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-actions": "*",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "A react-native storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,8 +21,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
@ -32,7 +32,7 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "5.1.0-rc.0",
|
||||
"@storybook/addon-knobs": "5.2.0-alpha.23",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Write notes for your react-native Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,7 +22,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
32
addons/queryparams/README.md
Normal file
32
addons/queryparams/README.md
Normal file
@ -0,0 +1,32 @@
|
||||
# storybook-addon-queryparams
|
||||
|
||||
This storybook addon can be helpful if your components need special query parameters to work the way you want them.
|
||||
|
||||
## Getting started
|
||||
|
||||
First, install the addon.
|
||||
|
||||
```sh
|
||||
$ yarn add @storybook/addon-queryparams --dev
|
||||
```
|
||||
|
||||
import the `withQuery` decorator so the url will be changed before rendering stories.
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import { storiesOf, addDecorator } from '@storybook/react';
|
||||
import { withQuery } from '@storybook/addon-queryparams';
|
||||
|
||||
storiesOf('button', module)
|
||||
.addDecorator(withQuery)
|
||||
.addParameters({
|
||||
query: {
|
||||
mock: true,
|
||||
}
|
||||
})
|
||||
.add('Prints the document.search', () => (
|
||||
<div>
|
||||
This is the current document.search: {document.search}, it includes `mock`!
|
||||
</div>
|
||||
));
|
||||
```
|
||||
44
addons/queryparams/package.json
Normal file
44
addons/queryparams/package.json
Normal file
@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "@storybook/addon-queryparams",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "parameter addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook",
|
||||
"query"
|
||||
],
|
||||
"homepage": "https://github.com/storybooks/storybook#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybooks/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/storybooks/storybook.git",
|
||||
"directory": "addons/addon-queryparams"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.5",
|
||||
"global": "^4.3.2",
|
||||
"qs": "^6.6.0",
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/common-tags": "^1.8.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
3
addons/queryparams/src/constants.ts
Executable file
3
addons/queryparams/src/constants.ts
Executable file
@ -0,0 +1,3 @@
|
||||
export const ADDON_ID = 'storybook/queryparams';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = `query`;
|
||||
30
addons/queryparams/src/index.ts
Normal file
30
addons/queryparams/src/index.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { document, history } from 'global';
|
||||
import qs from 'qs';
|
||||
|
||||
import { makeDecorator, StoryContext, StoryGetter } from '@storybook/addons';
|
||||
|
||||
import { PARAM_KEY } from './constants';
|
||||
|
||||
export const withQuery = makeDecorator({
|
||||
name: 'withQuery',
|
||||
parameterName: PARAM_KEY,
|
||||
wrapper: (getStory: StoryGetter, context: StoryContext, { parameters }) => {
|
||||
const { location } = document;
|
||||
const currentQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
|
||||
const additionalQuery =
|
||||
typeof parameters === 'string'
|
||||
? qs.parse(parameters, { ignoreQueryPrefix: true })
|
||||
: parameters;
|
||||
|
||||
const newQuery = qs.stringify(Object.assign({}, currentQuery, additionalQuery));
|
||||
const newLocation = location.href.replace(location.search, `?${newQuery}`);
|
||||
|
||||
history.replaceState({}, document.title, newLocation);
|
||||
|
||||
return getStory(context);
|
||||
},
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
2
addons/queryparams/src/typings.d.ts
vendored
Normal file
2
addons/queryparams/src/typings.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
declare module 'global';
|
||||
declare module 'react-sizeme';
|
||||
13
addons/queryparams/tsconfig.json
Normal file
13
addons/queryparams/tsconfig.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,7 +25,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
@ -36,7 +36,7 @@
|
||||
"devDependencies": {
|
||||
"enzyme-to-json": "^3.3.5",
|
||||
"jest-emotion": "^10.0.10",
|
||||
"react": "^16.8.4"
|
||||
"react": "^16.8.3"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,15 +22,18 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"@storybook/node-logger": "5.2.0-alpha.23",
|
||||
"@storybook/router": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"jest-image-snapshot": "^2.8.2",
|
||||
"puppeteer": "^1.12.2",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "5.1.0-rc.0"
|
||||
"@storybook/addon-storyshots": "5.2.0-alpha.23",
|
||||
"puppeteer": "^1.12.2"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,10 +22,10 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/router": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/router": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.2.3",
|
||||
|
||||
@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
|
||||
import { Link } from '@storybook/router';
|
||||
import { SyntaxHighlighter } from '@storybook/components';
|
||||
|
||||
import { createElement } from 'react-syntax-highlighter';
|
||||
import createElement from 'react-syntax-highlighter/create-element';
|
||||
import { EVENT_ID } from './events';
|
||||
|
||||
const StyledStoryLink = styled(Link)(({ theme }) => ({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,11 +21,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/client-logger": "5.1.1",
|
||||
"@storybook/components": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/theming": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/client-logger": "5.2.0-alpha.23",
|
||||
"@storybook/components": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/theming": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,8 +26,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/node-logger": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"@storybook/node-logger": "5.2.0-alpha.23",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^3.0.1",
|
||||
"fork-ts-checker-webpack-plugin": "^1.3.4",
|
||||
@ -36,7 +36,7 @@
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^6.0.1",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.32.2"
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular-devkit/core": "^0.6.1 || >=7.0.0",
|
||||
|
||||
1
app/angular/src/client/index.js
vendored
1
app/angular/src/client/index.js
vendored
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
export { moduleMetadata } from './preview/angular/decorators';
|
||||
|
||||
7
app/angular/src/client/preview/index.js
vendored
7
app/angular/src/client/preview/index.js
vendored
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'angular';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -24,7 +24,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.5.0",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'ember';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'html';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,7 +26,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'marko';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,7 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'mithril';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,13 +25,13 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"webpack": "^4.32.2"
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"lit-html": "^1.0.0",
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'polymer';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -27,7 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.3.0",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -7,4 +7,5 @@ export {
|
||||
getStorybook,
|
||||
forceReRender,
|
||||
raw,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
|
||||
import './globals';
|
||||
import render from './render';
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render);
|
||||
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
|
||||
|
||||
export const {
|
||||
storiesOf,
|
||||
setAddon,
|
||||
addDecorator,
|
||||
addParameters,
|
||||
@ -15,5 +14,9 @@ export const {
|
||||
raw,
|
||||
} = clientApi;
|
||||
|
||||
const framework = 'preact';
|
||||
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
|
||||
export const load = (...args) => coreLoad(...args, framework);
|
||||
|
||||
export const { configure } = configApi;
|
||||
export { forceReRender };
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/rax",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for Rax: Develop Rax Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook",
|
||||
@ -28,7 +28,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-preset-rax": "^1.0.0-beta.0",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.6.2",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native-server",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -24,18 +24,19 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/api": "5.1.1",
|
||||
"@storybook/channel-websocket": "5.1.1",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/ui": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/api": "5.2.0-alpha.23",
|
||||
"@storybook/channel-websocket": "5.2.0-alpha.23",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"@storybook/ui": "5.2.0-alpha.23",
|
||||
"commander": "^2.19.0",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.8.4",
|
||||
"react-dom": "^16.8.3",
|
||||
"uuid": "^3.3.2",
|
||||
"webpack": "^4.23.1",
|
||||
"webpack": "^4.33.0",
|
||||
"ws": "^6.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -23,11 +23,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/native": "^10.0.10",
|
||||
"@storybook/addons": "5.1.1",
|
||||
"@storybook/channel-websocket": "5.1.1",
|
||||
"@storybook/channels": "5.1.1",
|
||||
"@storybook/client-api": "5.1.1",
|
||||
"@storybook/core-events": "5.1.1",
|
||||
"@storybook/addons": "5.2.0-alpha.23",
|
||||
"@storybook/channel-websocket": "5.2.0-alpha.23",
|
||||
"@storybook/channels": "5.2.0-alpha.23",
|
||||
"@storybook/client-api": "5.2.0-alpha.23",
|
||||
"@storybook/core-events": "5.2.0-alpha.23",
|
||||
"core-js": "^3.0.1",
|
||||
"react-native-swipe-gestures": "^1.0.3",
|
||||
"rn-host-detect": "^1.1.5"
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@ import Preview from './preview';
|
||||
|
||||
const preview = new Preview();
|
||||
|
||||
export const storiesOf = preview.api().storiesOf.bind(preview);
|
||||
const rawStoriesOf = preview.api().storiesOf.bind(preview);
|
||||
export const setAddon = preview.api().setAddon.bind(preview);
|
||||
export const addDecorator = preview.api().addDecorator.bind(preview);
|
||||
export const addParameters = preview.api().addParameters.bind(preview);
|
||||
@ -11,3 +11,6 @@ export const configure = preview.configure;
|
||||
export const getStorybook = preview.api().getStorybook.bind(preview);
|
||||
export const getStorybookUI = preview.getStorybookUI;
|
||||
export const raw = preview.api().raw.bind(preview);
|
||||
|
||||
export const storiesOf = (...args: any[]) =>
|
||||
rawStoriesOf(...args).addParameters({ framework: 'react-native' });
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "5.1.1",
|
||||
"version": "5.2.0-alpha.23",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,9 +29,10 @@
|
||||
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@storybook/core": "5.1.1",
|
||||
"@storybook/node-logger": "5.1.1",
|
||||
"@storybook/core": "5.2.0-alpha.23",
|
||||
"@storybook/node-logger": "5.2.0-alpha.23",
|
||||
"@svgr/webpack": "^4.0.3",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-named-asset-import": "^0.3.1",
|
||||
"babel-plugin-react-docgen": "^3.0.0",
|
||||
"babel-preset-react-app": "^9.0.0",
|
||||
@ -44,7 +45,7 @@
|
||||
"react-dev-utils": "^9.0.0",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"semver": "^6.0.0",
|
||||
"webpack": "^4.28.0"
|
||||
"webpack": "^4.33.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-loader": "^7.0.0 || ^8.0.0",
|
||||
|
||||
@ -7,6 +7,7 @@ export {
|
||||
getStorybook,
|
||||
raw,
|
||||
forceReRender,
|
||||
load,
|
||||
} from './preview';
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user