GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 14:11:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into docs/refactor-prop-def

Browse Source
This commit is contained in:
Michael Shilman 2019-11-14 10:13:36 +08:00
commit 87cddfe06c
171 changed files with 1340 additions and 905 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.babelrc.js
View File

@ -72,6 +72,11 @@ module.exports = {
test: withTests,
},
},
{
test: './app/react-native',
presets: ['module:metro-react-native-babel-preset'],
plugins: ['babel-plugin-macros', ['emotion', { sourceMap: true, autoLabel: true }]],
},
{
test: [
'./lib/node-logger',

67
CHANGELOG.md
View File

@ -1,3 +1,70 @@
## 5.3.0-alpha.44 (November 13, 2019)
### Features
* React-native: Add theming to ondevice-addons ([#8738](https://github.com/storybookjs/storybook/pull/8738))
### Bug Fixes
* UI: Store layout state in sessionStorage ([#8786](https://github.com/storybookjs/storybook/pull/8786))
* Core: Use `stable` package to ensure story sorting is stable ([#8795](https://github.com/storybookjs/storybook/pull/8795))
### Maintenance
* Svelte: Migrate @storybook/svelte to Typescript ([#8770](https://github.com/storybookjs/storybook/pull/8770))
## 5.3.0-alpha.43 (November 11, 2019)
### Bug Fixes
* Source-loader: Warn if applied to non-stories file ([#8773](https://github.com/storybookjs/storybook/pull/8773))
### Maintenance
* Presets / Addon-docs: Cleanup framework-specific presets ([#8782](https://github.com/storybookjs/storybook/pull/8782))
* Add @babel/runtime to workspace ([#8774](https://github.com/storybookjs/storybook/pull/8774))
## 5.2.6 (November 9, 2019)
### Bug Fixes
* Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764))
* Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745))
* UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625))
* Addon-docs: Fix code style inside LI ([#8708](https://github.com/storybookjs/storybook/pull/8708))
* Remove min-height CSS rule from DocsPage wrapper ([#8366](https://github.com/storybookjs/storybook/pull/8366))
* Core: Revert webpack rebuild changes in node_modules ([#8657](https://github.com/storybookjs/storybook/pull/8657))
* Addon-notes: Add key to render function ([#8633](https://github.com/storybookjs/storybook/pull/8633))
* Addon-docs: Fix story scroll-to heuristics ([#8629](https://github.com/storybookjs/storybook/pull/8629))
* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
* Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
* Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
* Ondevice-knobs: Fix peer dep ([#8644](https://github.com/storybookjs/storybook/pull/8644))
## 5.3.0-alpha.42 (November 9, 2019)
### Bug Fixes
* Addon-info: Remove jsnext:main ([#8764](https://github.com/storybookjs/storybook/pull/8764))
* Addon-info: Fix "The prop 'children' is marked as required in 'Td'" ([#8745](https://github.com/storybookjs/storybook/pull/8745))
### Maintenance
* React-native: Update compilation target - it was compiled for old browsers ([#8698](https://github.com/storybookjs/storybook/pull/8698))
## 5.3.0-alpha.41 (November 7, 2019)
### Features
* Addon-docs: Render array of shape properly in props table ([#8707](https://github.com/storybookjs/storybook/pull/8707))
* Addon-docs: Render params description in props table, support @ignore ([#8702](https://github.com/storybookjs/storybook/pull/8702))
### Bug Fixes
* Addon-docs: Fix "Cannot read property 'props'" ([#8731](https://github.com/storybookjs/storybook/pull/8731))
* UI: Fix unmount components on Canvas/Docs tab switch ([#8625](https://github.com/storybookjs/storybook/pull/8625))
* Angular: Fix loading baseConfig if no angular.json found ([#8727](https://github.com/storybookjs/storybook/pull/8727))
## 5.3.0-alpha.40 (November 6, 2019)
### Features

4
CONTRIBUTING.md
View File

@ -327,9 +327,7 @@ First we are going to install storybook, then we are going to link `@storybook/r
You should now have a working storybook dev environment up and running.
> TODO: update this section (is already incorrect)
Save and go to `http://localhost:9009` (or wherever storybook is running)
Save and go to `http://localhost:9011` (or wherever storybook is running)
If you don't see the changes rerun `yarn storybook` again in your sandbox app

5
MIGRATION.md
View File

@ -5,6 +5,7 @@
- [Create React App preset](#create-react-app-preset)
- [Description doc block](#description-doc-block)
- [React Native Async Storage](#react-native-async-storage)
- [Unified docs preset](#unified-docs-preset)
- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
- [Source-loader](#source-loader)
- [Default viewports](#default-viewports)
@ -108,6 +109,10 @@ getStorybookUI({
});
```
### Unified docs preset
Addon-docs configuration gets simpler in 5.3. In 5.2, each framework had its own preset, e.g. `@storybook/addon-docs/react/preset`. Starting in 5.3, everybody should use `@storybook/addon-docs/preset`.
## From version 5.1.x to 5.2.x
### Source-loader

1
addons/a11y/README.md
View File

@ -56,7 +56,6 @@ import { withA11y } from '@storybook/addon-a11y';
addDecorator(withA11y)
addParameters({
a11y: {
// ... axe options
element: '#root', // optional selector which element to inspect
config: {}, // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)

14
addons/a11y/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "a11y addon for storybook",
"keywords": [
"a11y",
@ -33,12 +33,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"axe-core": "^3.3.2",
"core-js": "^3.0.1",
"global": "^4.3.2",

10
addons/a11y/src/components/A11YPanel.test.js
View File

@ -63,7 +63,7 @@ function ThemedA11YPanel(props) {
}
describe('A11YPanel', () => {
it('should register STORY_RENDERED and RESULT updater on mount', () => {
it('should register STORY_RENDERED, RESULT and ERROR updater on mount', () => {
// given
const api = createApi();
expect(api.on).not.toHaveBeenCalled();
@ -72,9 +72,10 @@ describe('A11YPanel', () => {
mount(<ThemedA11YPanel api={api} />);
// then
expect(api.on.mock.calls.length).toBe(2);
expect(api.on.mock.calls.length).toBe(3);
expect(api.on.mock.calls[0][0]).toBe(STORY_RENDERED);
expect(api.on.mock.calls[1][0]).toBe(EVENTS.RESULT);
expect(api.on.mock.calls[2][0]).toBe(EVENTS.ERROR);
});
it('should request a run on tab activation', () => {
@ -93,7 +94,7 @@ describe('A11YPanel', () => {
expect(wrapper.find(ScrollArea).length).toBe(0);
});
it('should deregister STORY_RENDERED and RESULT updater on unmount', () => {
it('should deregister STORY_RENDERED, RESULT and ERROR updater on unmount', () => {
// given
const api = createApi();
const wrapper = mount(<ThemedA11YPanel api={api} />);
@ -103,9 +104,10 @@ describe('A11YPanel', () => {
wrapper.unmount();
// then
expect(api.off.mock.calls.length).toBe(2);
expect(api.off.mock.calls.length).toBe(3);
expect(api.off.mock.calls[0][0]).toBe(STORY_RENDERED);
expect(api.off.mock.calls[1][0]).toBe(EVENTS.RESULT);
expect(api.off.mock.calls[2][0]).toBe(EVENTS.ERROR);
});
it('should update run result', () => {

54
addons/a11y/src/components/A11YPanel.tsx
View File

@ -46,26 +46,35 @@ const Incomplete = styled.span<{}>(({ theme }) => ({
color: theme.color.warning,
}));
const centeredStyle = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
};
const Loader = styled(({ className }) => (
<div className={className}>
<Icon inline icon="sync" status="running" /> Please wait while the accessibility scan is running
...
</div>
))({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
});
))(centeredStyle);
Loader.displayName = 'Loader';
interface A11YPanelState {
status: string;
interface A11YPanelNormalState {
status: 'ready' | 'ran' | 'running';
passes: Result[];
violations: Result[];
incomplete: Result[];
}
interface A11YPanelErrorState {
status: 'error';
error: unknown;
}
type A11YPanelState = A11YPanelNormalState | A11YPanelErrorState;
interface A11YPanelProps {
active: boolean;
api: API;
@ -84,6 +93,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
api.on(STORY_RENDERED, this.request);
api.on(EVENTS.RESULT, this.onUpdate);
api.on(EVENTS.ERROR, this.onError);
}
componentDidUpdate(prevProps: A11YPanelProps) {
@ -101,6 +111,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
const { api } = this.props;
api.off(STORY_RENDERED, this.request);
api.off(EVENTS.RESULT, this.onUpdate);
api.off(EVENTS.ERROR, this.onError);
}
onUpdate = ({ passes, violations, incomplete }: AxeResults) => {
@ -124,6 +135,13 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
);
};
onError = (error: unknown) => {
this.setState({
status: 'error',
error,
});
};
request = () => {
const { api, active } = this.props;
@ -142,8 +160,22 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
};
render() {
const { passes, violations, incomplete, status } = this.state;
const { active } = this.props;
if (!active) return null;
// eslint-disable-next-line react/destructuring-assignment
if (this.state.status === 'error') {
const { error } = this.state;
return (
<div style={centeredStyle}>
The accessibility scan encountered an error.
<br />
{error}
</div>
);
}
const { passes, violations, incomplete, status } = this.state;
let actionTitle;
if (status === 'ready') {
@ -162,7 +194,7 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
);
}
return active ? (
return (
<Fragment>
<Provider store={store}>
{status === 'running' ? (
@ -218,6 +250,6 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
/>
</Provider>
</Fragment>
) : null;
);
}
}

8
addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
View File

@ -177,6 +177,10 @@ exports[`A11YPanel should render report 1`] = `
"storybook/a11y/result",
[Function],
],
Array [
"storybook/a11y/error",
[Function],
],
],
"results": Array [
Object {
@ -187,6 +191,10 @@ exports[`A11YPanel should render report 1`] = `
"type": "return",
"value": undefined,
},
Object {
"type": "return",
"value": undefined,
},
],
},
}

3
addons/a11y/src/constants.ts
View File

@ -6,5 +6,6 @@ export const ADD_ELEMENT = 'ADD_ELEMENT';
export const CLEAR_ELEMENTS = 'CLEAR_ELEMENTS';
const RESULT = `${ADDON_ID}/result`;
const REQUEST = `${ADDON_ID}/request`;
const ERROR = `${ADDON_ID}/error`;
export const EVENTS = { RESULT, REQUEST };
export const EVENTS = { RESULT, REQUEST, ERROR };

13
addons/a11y/src/index.ts
View File

@ -39,7 +39,8 @@ const run = (element: ElementContext, config: Spec, options: RunOptions) => {
restoreScroll: true,
} as RunOptions) // cast to RunOptions is necessary because axe types are not up to date
)
.then(report);
.then(report)
.catch(error => addons.getChannel().emit(EVENTS.ERROR, String(error)));
});
};
@ -47,12 +48,20 @@ if (module && module.hot && module.hot.decline) {
module.hot.decline();
}
let storedDefaultSetup: Setup | null = null;
export const withA11y = makeDecorator({
name: 'withA11Y',
parameterName: PARAM_KEY,
wrapper: (getStory, context, { parameters }) => {
if (parameters) {
setup = parameters as Setup;
if (storedDefaultSetup === null) {
storedDefaultSetup = { ...setup };
}
Object.assign(setup, parameters as Setup);
} else if (storedDefaultSetup !== null) {
Object.assign(setup, storedDefaultSetup);
storedDefaultSetup = null;
}
addons.getChannel().on(EVENTS.REQUEST, () => run(setup.element, setup.config, setup.options));

14
addons/actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Action Logger addon for storybook",
"keywords": [
"storybook"
@ -28,12 +28,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1",
"global": "^4.3.2",

14
addons/backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "A storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -32,12 +32,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"memoizerific": "^1.11.3",
"react": "^16.8.3",

4
addons/centered/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-centered",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook decorator to center components",
"keywords": [
"addon",
@ -29,7 +29,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"

10
addons/contexts/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-contexts",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook Addon Contexts",
"keywords": [
"preact",
@ -27,10 +27,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0"

10
addons/cssresources/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-cssresources",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "A storybook addon to switch between css resources at runtime for your story",
"keywords": [
"addon",
@ -32,10 +32,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3"

14
addons/design-assets/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-design-assets",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
@ -34,12 +34,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

4
addons/docs/README.md
View File

@ -109,11 +109,9 @@ yarn add -D react react-is babel-loader
Then add the following to your `.storybook/presets.js` exports:
```js
module.exports = ['@storybook/addon-docs/react/preset'];
module.exports = ['@storybook/addon-docs/preset'];
```
If you're not using `react`, replace it with your framework of choice corresponding to the Storybook package name, e.g. `angular` for `@storybook/angular` etc.
**Configure.** If you're migrating from an earlier version of Storybook and want to use `MDX`, you need to upgrade your Storybook config:
```js

4
addons/docs/angular/README.md
View File

@ -25,7 +25,7 @@ yarn add -D @storybook/addon-docs@next
Then add the following to your `.storybook/presets.js` exports:
```js
module.exports = ['@storybook/addon-docs/angular/preset'];
module.exports = ['@storybook/addon-docs/preset'];
```
## DocsPage
@ -104,7 +104,7 @@ configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), modul
Finally, you can create MDX files like this:
```md
import { Meta, Story, Props } from '@storybook/docs/blocks';
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { AppComponent } from './app.component';
<Meta title='App Component' component={AppComponent} />

1
addons/docs/angular/config.js vendored
View File

@ -1 +0,0 @@
module.exports = require('../dist/frameworks/angular/config');

2
addons/docs/docs/recipes.md
View File

@ -66,7 +66,7 @@ import { SomeComponent } from 'path/to/SomeComponent';
I can define a story with the function imported from CSF:
<Story name="basic">{stories.basic}</Story>
<Story name="basic">{stories.basic()}</Story>
And I can also embed arbitrary markdown & JSX in this file.

17
addons/docs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Superior documentation for your components",
"keywords": [
"addon",
@ -44,12 +44,12 @@
"@mdx-js/loader": "^1.1.0",
"@mdx-js/mdx": "^1.1.0",
"@mdx-js/react": "^1.0.27",
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/router": "5.3.0-alpha.40",
"@storybook/source-loader": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/router": "5.3.0-alpha.44",
"@storybook/source-loader": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"acorn": "^7.1.0",
"acorn-jsx": "^5.1.0",
"acorn-walk": "^7.0.0",
@ -62,7 +62,8 @@
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"storybook-addon-vue-info": "^1.2.1",
"ts-dedent": "^1.1.0"
"ts-dedent": "^1.1.0",
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"@types/doctrine": "^0.0.3",

1
addons/docs/preset.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/preset');

0
addons/docs/src/frameworks/common/config.js → addons/docs/src/frameworks/common/config.ts
View File

30
addons/docs/src/frameworks/common/makePreset.ts
View File

@ -1,25 +1,17 @@
import fs from 'fs';
import * as common from './preset';
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import * as common from '../../preset';
const makePreset = (framework: string) => {
const docsConfig = [`${__dirname}/config.js`];
const frameworkConfig = `${__dirname}/../../../dist/frameworks/${framework}/config.js`;
if (fs.existsSync(frameworkConfig)) {
docsConfig.push(frameworkConfig);
}
function config(entry: any[] = []) {
return [...docsConfig, ...entry];
}
deprecate(
() => {},
dedent`
Framework-specific presets are no longer-needed as of Storybook 5.3 and will be removed in 6.0.
const configureJSX = framework !== 'react';
const webpack = (webpackConfig: any, options: any) =>
common.webpack(webpackConfig, { configureJSX, ...options });
return {
...common,
webpack,
config,
};
Please use '@storybook/addon-docs/preset' instead of '@storybook/addon-docs/${framework}/preset'.
`
)();
return common;
};
export default makePreset;

22
addons/docs/src/frameworks/common/preset.ts
View File

@ -20,7 +20,11 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
const { module = {} } = webpackConfig;
// it will reuse babel options that are already in use in storybook
// also, these babel options are chained with other presets.
const { babelOptions, configureJSX, sourceLoaderOptions = {} } = options;
const {
babelOptions,
configureJSX = options.framework !== 'react', // if not user-specified
sourceLoaderOptions = {},
} = options;
// set `sourceLoaderOptions` to `null` to disable for manual configuration
const sourceLoader = sourceLoaderOptions
@ -34,7 +38,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
]
: [];
return {
const result = {
...webpackConfig,
module: {
...module,
@ -72,8 +76,20 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
],
},
};
return result;
}
export function addons(entry: any[] = []) {
export function addons(entry: any[] = [], options: any) {
return [...entry, require.resolve('../../register')];
}
export function config(entry: any[] = [], options: any = {}) {
const { framework } = options;
const docsConfig = [require.resolve('./config')];
try {
docsConfig.push(require.resolve(`../${framework}/config`));
} catch (err) {
// there is no custom config for the user's framework, do nothing
}
return [...docsConfig, ...entry];
}

8
addons/docs/src/frameworks/vue/preset.ts Normal file
View File

@ -0,0 +1,8 @@
export function webpack(webpackConfig: any = {}, options: any = {}) {
webpackConfig.module.rules.push({
test: /\.vue$/,
loader: 'storybook-addon-vue-info/loader',
enforce: 'post',
});
return webpackConfig;
}

57
addons/docs/src/preset.ts Normal file
View File

@ -0,0 +1,57 @@
import * as commonPreset from './frameworks/common/preset';
// Map a framework to a preset file that gets executed
type Preset = any;
type FrameworkPresetMapper = (framework: string) => string | void;
const PRESET_METHODS = [
'babel',
'babelDefault',
'managerBabel',
'webpack',
'webpackFinal',
'managerWebpack',
'addons',
'entries',
'config',
];
function getFrameworkPreset(frameworkPresetFile: string): Preset {
// eslint-disable-next-line import/no-dynamic-require, global-require
return require(frameworkPresetFile);
}
// Create a composite preset that applies the base preset &
// appends any framework-specific extensions as needed
function withFrameworkExtensions(basePreset: Preset, mapper: FrameworkPresetMapper): Preset {
const extended: Preset = {};
PRESET_METHODS.forEach(method => {
extended[method] = (existing: any, options: any) => {
let updated = existing;
const baseMethod = basePreset[method];
if (baseMethod) {
updated = baseMethod(updated, options);
}
const frameworkPresetFile = mapper(options.framework);
if (frameworkPresetFile) {
const frameworkPreset = getFrameworkPreset(frameworkPresetFile);
const frameworkMethod = frameworkPreset[method];
if (frameworkMethod) updated = frameworkMethod(updated, options);
}
return updated;
};
});
return extended;
}
module.exports = withFrameworkExtensions(commonPreset, framework => {
try {
return require.resolve(`./frameworks/${framework}/preset`);
} catch (err) {
// there is no custom config for the user's framework, do nothing
return null;
}
});

1
addons/docs/src/typings.d.ts vendored
View File

@ -1,5 +1,6 @@
declare module '@mdx-js/react';
declare module '@storybook/addon-docs/mdx-compiler-plugin';
declare module '@storybook/addon-docs/blocks';
declare module 'global';
declare module 'react-is';
declare module '@egoist/vue-to-react';

2
addons/docs/vue/README.md
View File

@ -25,7 +25,7 @@ yarn add -D @storybook/addon-docs@next
Then add the following to your `.storybook/presets.js` exports:
```js
module.exports = ['@storybook/addon-docs/vue/preset'];
module.exports = ['@storybook/addon-docs/preset'];
```
## DocsPage

17
addons/docs/vue/preset.js
View File

@ -1,16 +1 @@
const commonExports = require('../dist/frameworks/common/makePreset').default('vue');
const webpack = (webpackConfig, options) => {
const config = commonExports.webpack(webpackConfig, options);
config.module.rules.push({
test: /\.vue$/,
loader: 'storybook-addon-vue-info/loader',
enforce: 'post',
});
return config;
};
module.exports = {
...commonExports,
webpack,
};
module.exports = require('../dist/frameworks/common/makePreset').default('vue');

12
addons/events/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-events",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Add events to your Storybook stories.",
"keywords": [
"addon",
@ -31,11 +31,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"format-json": "^1.0.3",
"lodash": "^4.17.15",

6
addons/google-analytics/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-google-analytics",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook addon for google analytics",
"keywords": [
"addon",
@ -20,8 +20,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react-ga": "^2.5.7"

6
addons/graphql/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-graphql",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook addon to display the GraphiQL IDE",
"keywords": [
"addon",
@ -29,8 +29,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"graphiql": "^0.16.0",

11
addons/info/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-info",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "A Storybook addon to show additional information for your stories.",
"keywords": [
"addon",
@ -24,15 +24,14 @@
"*.d.ts"
],
"main": "dist/index.js",
"jsnext:main": "src/index.js",
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"marksy": "^7.0.0",

3
addons/info/src/components/PropTable/components/Td.js
View File

@ -12,12 +12,13 @@ Td.propTypes = {
PropTypes.element,
PropTypes.arrayOf(PropTypes.node),
PropTypes.arrayOf(PropTypes.element),
]).isRequired,
]),
isMonospace: PropTypes.bool,
};
Td.defaultProps = {
isMonospace: false,
children: null,
};
export default Td;

12
addons/jest/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
@ -35,11 +35,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"react": "^16.8.3",

94
addons/knobs/README.md
View File

@ -3,9 +3,9 @@
Storybook Addon Knobs allow you to edit props dynamically using the Storybook UI.
You can also use Knobs as a dynamic variable inside stories in [Storybook](https://storybook.js.org).
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md).
This is how Knobs look like:
This is what Knobs looks like:
[![Storybook Knobs Demo](docs/storybook-knobs-example.png)](https://storybooks-official.netlify.com/?knob-Dollars=12.5&knob-Name=Storyteller&knob-Years%20in%20NY=9&knob-background=%23ffff00&knob-Age=70&knob-Items%5B0%5D=Laptop&knob-Items%5B1%5D=Book&knob-Items%5B2%5D=Whiskey&knob-Other%20Fruit=lime&knob-Birthday=1484870400000&knob-Nice=true&knob-Styles=%7B%22border%22%3A%223px%20solid%20%23ff00ff%22%2C%22padding%22%3A%2210px%22%7D&knob-Fruit=apple&selectedKind=Addons%7CKnobs.withKnobs&selectedStory=tweaks%20static%20values&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs)
@ -13,7 +13,7 @@ This is how Knobs look like:
## Getting Started
First of all, you need to install knobs into your project as a dev dependency.
First of all, you need to install Knobs into your project as a dev dependency.
```sh
yarn add @storybook/addon-knobs --dev
@ -25,34 +25,35 @@ Then, configure it as an addon by adding it to your `addons.js` file (located in
import '@storybook/addon-knobs/register';
```
Now, write your stories with knobs.
Now, write your stories with Knobs.
### With React
```js
import { storiesOf } from '@storybook/react';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
const stories = storiesOf('Storybook Knobs', module);
import React from "react";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
export default {
title: "Storybook Knobs",
decorators: [withKnobs]
};
// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);
// Knobs for React props
stories.add('with a button', () => (
<button disabled={boolean('Disabled', false)} >
{text('Label', 'Hello Storybook')}
export const withAButton = () => (
<button disabled={boolean("Disabled", false)}>
{text("Label", "Hello Storybook")}
</button>
));
);
// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
const name = text('Name', 'Arunoda Susiripala');
const age = number('Age', 89);
export const asDynamicVariables = () => {
const name = text("Name", "Arunoda Susiripala");
const age = number("Age", 89);
const content = `I am ${name} and I'm ${age} years old.`;
return (<div>{content}</div>);
});
return <div>{content}</div>;
};
```
### With Vue.js
@ -130,7 +131,7 @@ stories.add('with a button', () => ({
```
Categorize your knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
Categorize your Knobs by assigning them a `groupId`. When a `groupId` exists, tabs will appear in the Knobs storybook panel to filter between the groups. Knobs without a `groupId` are automatically categorized into the `ALL` group.
```js
// Knob assigned a groupId.
stories.add('as dynamic variables', () => {
@ -148,7 +149,7 @@ You can see your Knobs in a Storybook panel as shown below.
## Available Knobs
These are the knobs available for you to use. You can import these Knobs from the `@storybook/addon-knobs` module.
These are the Knobs available for you to use. You can import these Knobs from the `@storybook/addon-knobs` module.
Here's how to import the **text** Knob.
```js
@ -198,7 +199,7 @@ const groupId = 'GROUP-ID1';
const value = number(label, defaultValue);
```
For use with `groupId`, pass the default `options` as the third argument
For use with `groupId`, pass the default `options` as the third argument.
```
const value = number(label, defaultValue, {}, groupId);
```
@ -269,7 +270,7 @@ const value = array(label, defaultValue);
```
> While editing values inside the knob, you will need to use a separator.
> By default it's a comma, but this can be override by passing a separator variable.
> By default it is a comma, but this can be overridden by passing a separator variable.
>
> ```js
> import { array } from '@storybook/addon-knobs';
@ -287,7 +288,7 @@ const value = array(label, defaultValue, ',', groupId);
### select
Allows you to get a value from a select box from the user.
It allows you to get a value from a select box from the user.
```js
import { select } from '@storybook/addon-knobs';
@ -306,12 +307,41 @@ const groupId = 'GROUP-ID1';
const value = select(label, options, defaultValue, groupId);
```
> You can also provide options as an array like this: `['red', 'blue', 'yellow']`
Options can also be an array:
```js
import { select } from '@storybook/addon-knobs';
const label = 'Cats';
const options = ['linus', 'eleanor', 'lover']
const defaultValue = 'eleanor';
const groupId = 'GROUP-ID2';
const value = select(label, options, defaultValue, groupId);
```
Options can also be an array OF objects:
```js
const label = 'Dogs';
const arrayOfObjects = [
{
label: 'Sparky',
dogParent: 'Matthew',
location: 'Austin',
},
{
label: 'Juniper',
dogParent: 'Joshua',
location: 'Austin',
},
];
const defaultValue = arrayOfObjects[0];
const groupId = 'GROUP-ID3';
const value = select(label, options, defaultValue, groupId);
```
### radio buttons
Allows you to get a value from a list of radio buttons from the user.
It allows you to get a value from a list of radio buttons from the user.
```js
import { radios } from '@storybook/addon-knobs';
@ -359,7 +389,7 @@ const value = options(label, valuesObj, defaultValue, optionsObj, groupId);
### files
Allows you to get a value from a file input from the user.
It allows you to get a value from a file input from the user.
```js
import { files } from '@storybook/addon-knobs';
@ -377,7 +407,7 @@ const value = files(label, accept, defaultValue, groupId);
### date
Allow you to get date (and time) from the user.
Allows you to get date (and time) from the user.
```js
import { date } from '@storybook/addon-knobs';
@ -389,7 +419,7 @@ const groupId = 'GROUP-ID1';
const value = date(label, defaultValue, groupId);
```
> Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`
> Note: the default value must not change - e.g., do not do `date('Label', new Date())` or `date('Label')`.
The `date` knob returns the selected date as stringified Unix timestamp (e.g. `"1510913096516"`).
If your component needs the date in a different form you can wrap the `date` function:
@ -403,7 +433,7 @@ function myDateKnob(name, defaultValue) {
### button
Allows you to include a button and associated handler.
It allows you to include a button and associated handler.
```js
import { button } from '@storybook/addon-knobs';
@ -415,8 +445,8 @@ const groupId = 'GROUP-ID1';
button(label, handler, groupId);
```
Button knobs cause the story to re-render after the handler fires, you can prevent
this by having the handler return false.
Button knobs cause the story to re-render after the handler fires.
You can prevent this by having the handler return `false`.
### withKnobs options
@ -441,7 +471,7 @@ stories.add('story name', () => ..., {
## Typescript
If you are using typescript, make sure you have the type definitions installed for the following libs:
If you are using Typescript, make sure you have the type definitions installed for the following libs:
- node
- react

14
addons/knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-knobs",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook Addon Prop Editor Component",
"keywords": [
"addon",
@ -29,12 +29,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"@types/react-color": "^3.0.1",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",

22
addons/knobs/src/components/types/Select.tsx
View File

@ -30,15 +30,23 @@ const SelectType: FunctionComponent<SelectTypeProps> & {
deserialize: typeof deserialize;
} = ({ knob, onChange }) => {
const { options } = knob;
const entries = Array.isArray(options)
? options.reduce<Record<PropertyKey, SelectTypeKnobValue>>((acc, k) => ({ ...acc, [k]: k }), {})
: (options as Record<PropertyKey, SelectTypeKnobValue>);
const selectedKey = Object.keys(entries).find(k => {
if (Array.isArray(knob.value)) {
return JSON.stringify(entries[k]) === JSON.stringify(knob.value);
const callbackReduceArrayOptions = (acc: any, option: any, i: number) => {
if (typeof option !== 'object') return { ...acc, [option]: option };
const label = option.label || option.key || i;
return { ...acc, [label]: option };
};
const entries = Array.isArray(options) ? options.reduce(callbackReduceArrayOptions, {}) : options;
const selectedKey = Object.keys(entries).find(key => {
const { value: knobVal } = knob;
const entryVal = entries[key];
if (Array.isArray(knobVal)) {
return JSON.stringify(entryVal) === JSON.stringify(knobVal);
}
return entries[k] === knob.value;
return entryVal === knobVal;
});
return (

10
addons/links/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Story Links addon for storybook",
"keywords": [
"addon",
@ -29,10 +29,10 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/router": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/router": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"prop-types": "^15.7.2",

4
addons/notes/README.md
View File

@ -95,12 +95,12 @@ storiesOf('Component', module).add('With Markdown', () => <Component />, {
## Giphy
When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `gif` of the gif prop is used to search and return the first result returned by Giphy.
When using Markdown, you can also embed gifs from Giphy into your Markdown. Currently, the value `cheese` of the query prop is used to search and return the first result returned by Giphy.
```md
# Title
<Giphy gif='cheese' />
<Giphy query='cheese' />
```
## Multiple Notes Sections

16
addons/notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-notes",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
@ -30,13 +30,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/router": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/router": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"markdown-to-jsx": "^6.10.3",

8
addons/ondevice-actions/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-actions",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Action Logger addon for react-native storybook",
"keywords": [
"storybook"
@ -26,13 +26,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"fast-deep-equal": "^2.0.1"
},
"devDependencies": {
"@storybook/addon-actions": "5.3.0-alpha.40"
"@storybook/addon-actions": "5.3.0-alpha.44"
},
"peerDependencies": {
"@storybook/addon-actions": "*",

8
addons/ondevice-backgrounds/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-backgrounds",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "A react-native storybook addon to show different backgrounds for your preview",
"keywords": [
"addon",
@ -31,9 +31,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"prop-types": "^15.7.2"
},

7
addons/ondevice-knobs/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-knobs",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Display storybook story knobs on your deviced.",
"keywords": [
"addon",
@ -27,8 +27,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@emotion/native": "^10.0.14",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"deep-equal": "^1.0.1",
"prop-types": "^15.7.2",

15
addons/ondevice-knobs/src/GroupTabs.js
View File

@ -1,6 +1,12 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { ScrollView, Text, TouchableOpacity } from 'react-native';
import styled from '@emotion/native';
const Label = styled.Text(({ theme, active }) => ({
color: active ? theme.buttonActiveTextColor : theme.buttonTextColor,
fontSize: 17,
}));
class GroupTabs extends Component {
renderTab(name, group) {
@ -21,14 +27,7 @@ class GroupTabs extends Component {
key={name}
onPress={() => onGroupSelect(name)}
>
<Text
style={{
color: selectedGroup === name ? 'black' : '#ccc',
fontSize: 17,
}}
>
{title}
</Text>
<Label active={selectedGroup === name}>{title}</Label>
</TouchableOpacity>
);
}

21
addons/ondevice-knobs/src/PropField.js
View File

@ -1,27 +1,24 @@
import PropTypes from 'prop-types';
import { View, Text } from 'react-native';
import React from 'react';
import styled from '@emotion/native';
import TypeMap from './types';
const InvalidType = () => <Text style={{ margin: 10 }}>Invalid Type</Text>;
const Label = styled.Text(({ theme }) => ({
marginLeft: 10,
fontSize: 14,
color: theme.labelColor,
fontWeight: 'bold',
}));
const PropField = ({ onChange, onPress, knob }) => {
const InputType = TypeMap[knob.type] || InvalidType;
return (
<View>
{!knob.hideLabel ? (
<Text
style={{
marginLeft: 10,
fontSize: 14,
color: 'rgb(68, 68, 68)',
fontWeight: 'bold',
}}
>
{`${knob.label || knob.name}`}
</Text>
) : null}
{!knob.hideLabel ? <Label>{`${knob.label || knob.name}`}</Label> : null}
<InputType knob={knob} onChange={onChange} onPress={onPress} />
</View>
);

36
addons/ondevice-knobs/src/panel.js
View File

@ -1,8 +1,9 @@
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import { SELECT_STORY, FORCE_RE_RENDER } from '@storybook/core-events';
import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs';
import styled from '@emotion/native';
import GroupTabs from './GroupTabs';
import PropForm from './PropForm';
@ -10,6 +11,20 @@ const getTimestamp = () => +new Date();
const DEFAULT_GROUP_ID = 'Other';
const Touchable = styled.TouchableOpacity(({ theme }) => ({
borderRadius: 2,
borderWidth: 1,
borderColor: theme.borderColor,
padding: 4,
margin: 10,
justifyContent: 'center',
alignItems: 'center',
}));
const ResetButton = styled.Text(({ theme }) => ({
color: theme.buttonTextColor,
}));
export default class Panel extends React.Component {
constructor(props) {
super(props);
@ -152,7 +167,7 @@ export default class Panel extends React.Component {
}
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, paddingTop: 10 }}>
{groupIds.length > 0 && (
<GroupTabs groups={groups} onGroupSelect={this.onGroupSelect} selectedGroup={groupId} />
)}
@ -163,20 +178,9 @@ export default class Panel extends React.Component {
onFieldClick={this.handleClick}
/>
</View>
<TouchableOpacity
style={{
borderRadius: 2,
borderWidth: 1,
borderColor: '#f7f4f4',
padding: 4,
margin: 10,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={this.reset}
>
<Text>RESET</Text>
</TouchableOpacity>
<Touchable onPress={this.reset}>
<ResetButton>RESET</ResetButton>
</Touchable>
</View>
);
}

22
addons/ondevice-knobs/src/types/Array.js
View File

@ -1,7 +1,16 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from '@emotion/native';
import { TextInput } from 'react-native';
const Input = styled.TextInput(({ theme }) => ({
borderWidth: 1,
borderColor: theme.borderColor,
borderRadius: 2,
fontSize: 13,
padding: 5,
margin: 10,
color: theme.labelColor,
}));
function formatArray(value, separator) {
if (value === '') {
@ -11,19 +20,10 @@ function formatArray(value, separator) {
}
const ArrayType = ({ knob, onChange }) => (
<TextInput
<Input
id={knob.name}
underlineColorAndroid="transparent"
autoCapitalize="none"
style={{
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
fontSize: 13,
padding: 5,
margin: 10,
color: '#555',
}}
value={knob.value.join(knob.separator)}
onChangeText={e => onChange(formatArray(e, knob.separator))}
/>

10
addons/ondevice-knobs/src/types/Button.js
View File

@ -1,10 +1,16 @@
import PropTypes from 'prop-types';
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { TouchableOpacity } from 'react-native';
import styled from '@emotion/native';
const Label = styled.Text(({ theme }) => ({
fontSize: 17,
color: theme.labelColor,
}));
const ButtonType = ({ knob, onPress }) => (
<TouchableOpacity style={{ margin: 10 }} onPress={() => onPress(knob)}>
<Text style={{ fontSize: 17, color: '#007aff' }}>{knob.name}</Text>
<Label>{knob.name}</Label>
</TouchableOpacity>
);

21
addons/ondevice-knobs/src/types/Color.js
View File

@ -2,6 +2,17 @@ import PropTypes from 'prop-types';
import React from 'react';
import { Text, Modal, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { ColorPicker, fromHsv } from 'react-native-color-picker';
import styled from '@emotion/native';
const Touchable = styled.TouchableOpacity(({ theme, color }) => ({
borderColor: theme.borderColor,
width: 30,
height: 20,
borderRadius: 2,
borderWidth: 1,
margin: 10,
backgroundColor: color,
}));
class ColorType extends React.Component {
constructor(props) {
@ -32,17 +43,9 @@ class ColorType extends React.Component {
render() {
const { knob } = this.props;
const { displayColorPicker } = this.state;
const colorStyle = {
borderColor: 'rgb(247, 244, 244)',
width: 30,
height: 20,
borderRadius: 2,
margin: 10,
backgroundColor: knob.value,
};
return (
<View>
<TouchableOpacity style={colorStyle} onPress={this.openColorPicker} />
<Touchable color={knob.value} onPress={this.openColorPicker} />
<Modal
supportedOrientations={['portrait', 'landscape']}
transparent

39
addons/ondevice-knobs/src/types/Date.js
View File

@ -1,7 +1,20 @@
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { View } from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import styled from '@emotion/native';
const Touchable = styled.TouchableOpacity(({ theme }) => ({
borderColor: theme.borderColor,
borderWidth: 1,
borderRadius: 2,
padding: 5,
}));
const Label = styled.Text(({ theme }) => ({
fontSize: 13,
color: theme.labelColor,
}));
// TODO seconds support
class DateType extends PureComponent {
@ -49,29 +62,17 @@ class DateType extends PureComponent {
return (
<View style={{ margin: 10 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity
<Touchable onPress={this.showDatePicker}>
<Label>{dateString}</Label>
</Touchable>
<Touchable
style={{
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
padding: 5,
}}
onPress={this.showDatePicker}
>
<Text style={{ fontSize: 13, color: '#555' }}>{dateString}</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
padding: 5,
marginLeft: 5,
}}
onPress={this.showTimePicker}
>
<Text style={{ fontSize: 13, color: '#555' }}>{timeString}</Text>
</TouchableOpacity>
<Label>{timeString}</Label>
</Touchable>
</View>
<DateTimePicker
date={d}

22
addons/ondevice-knobs/src/types/Number.js
View File

@ -1,6 +1,16 @@
import PropTypes from 'prop-types';
import React from 'react';
import { TextInput, View, Slider } from 'react-native';
import { View, Slider } from 'react-native';
import styled from '@emotion/native';
const Input = styled.TextInput(({ theme }) => ({
borderWidth: 1,
borderColor: theme.borderColor,
borderRadius: 2,
fontSize: 13,
padding: 5,
color: theme.labelColor,
}));
class NumberType extends React.Component {
constructor(props) {
@ -29,15 +39,7 @@ class NumberType extends React.Component {
const { knob } = this.props;
return (
<TextInput
style={{
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
fontSize: 13,
padding: 5,
color: '#555',
}}
<Input
autoCapitalize="none"
underlineColorAndroid="transparent"
value={(knob.value || '').toString()}

14
addons/ondevice-knobs/src/types/Object.js
View File

@ -1,17 +1,17 @@
import PropTypes from 'prop-types';
import React from 'react';
import { TextInput } from 'react-native';
import deepEqual from 'deep-equal';
import styled from '@emotion/native';
const styles = {
const Input = styled.TextInput(({ theme }) => ({
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
fontSize: 13,
padding: 5,
margin: 10,
color: '#555',
};
borderColor: theme.borderColor,
color: theme.labelColor,
}));
class ObjectType extends React.Component {
constructor(...args) {
@ -70,9 +70,9 @@ class ObjectType extends React.Component {
}
return (
<TextInput
<Input
id={knob.name}
style={{ ...styles, ...extraStyle }}
style={extraStyle}
value={jsonString}
onChangeText={this.handleChange}
multiline

22
addons/ondevice-knobs/src/types/Select.js
View File

@ -1,9 +1,19 @@
/* eslint no-underscore-dangle: 0 */
import PropTypes from 'prop-types';
import { View, TextInput } from 'react-native';
import { View } from 'react-native';
import React from 'react';
import ModalPicker from 'react-native-modal-selector';
import styled from '@emotion/native';
const Input = styled.TextInput(({ theme }) => ({
borderWidth: 1,
borderRadius: 2,
padding: 5,
margin: 10,
borderColor: theme.borderColor,
color: theme.labelColor,
}));
class SelectType extends React.Component {
getOptions = ({ options }) => {
@ -30,15 +40,7 @@ class SelectType extends React.Component {
onChange={option => onChange(option.key)}
animationType="none"
>
<TextInput
style={{
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
padding: 5,
color: '#555',
margin: 10,
}}
<Input
editable={false}
value={selected}
autoCapitalize="none"

23
addons/ondevice-knobs/src/types/Text.js
View File

@ -1,18 +1,19 @@
import PropTypes from 'prop-types';
import React from 'react';
import { TextInput } from 'react-native';
import styled from '@emotion/native';
const Input = styled.TextInput(({ theme }) => ({
borderWidth: 1,
borderColor: theme.borderColor,
borderRadius: 2,
fontSize: 13,
padding: 5,
margin: 10,
color: theme.labelColor,
}));
const TextType = ({ knob, onChange }) => (
<TextInput
style={{
borderWidth: 1,
borderColor: '#f7f4f4',
borderRadius: 2,
fontSize: 13,
padding: 5,
margin: 10,
color: '#555',
}}
<Input
id={knob.name}
value={knob.value}
onChangeText={onChange}

13
addons/ondevice-notes/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-ondevice-notes",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Write notes for your react-native Storybook stories.",
"keywords": [
"addon",
@ -27,11 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@emotion/core": "^10.0.20",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"prop-types": "^15.7.2",
"react-native-simple-markdown": "^1.1.0"

9
addons/ondevice-notes/src/components/Notes.tsx
View File

@ -3,6 +3,7 @@ import { View } from 'react-native';
import Markdown from 'react-native-simple-markdown';
import { AddonStore } from '@storybook/addons';
import { API } from '@storybook/api';
import { ThemeContext } from '@emotion/core';
export const PARAM_KEY = `notes`;
@ -30,7 +31,13 @@ export const Notes = ({ active, api }: NotesProps) => {
return (
<View style={{ padding: 10, flex: 1 }}>
<Markdown>{textAfterFormatted}</Markdown>
<ThemeContext.Consumer>
{theme => (
<Markdown styles={{ text: { color: (theme as any).labelColor } }}>
{textAfterFormatted}
</Markdown>
)}
</ThemeContext.Consumer>
</View>
);
};

4
addons/options/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-options",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Options addon for storybook",
"keywords": [
"addon",
@ -29,7 +29,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"util-deprecate": "^1.0.2"
},

14
addons/queryparams/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-queryparams",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "parameter addon for storybook",
"keywords": [
"addon",
@ -30,12 +30,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"qs": "^6.6.0",

10
addons/storyshots/storyshots-core/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
"keywords": [
"addon",
@ -33,8 +33,8 @@
},
"dependencies": {
"@jest/transform": "^24.9.0",
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"@types/glob": "^7.1.1",
"@types/jest": "^24.0.16",
"@types/jest-specific-snapshot": "^0.5.3",
@ -47,8 +47,8 @@
"ts-dedent": "^1.1.0"
},
"devDependencies": {
"@storybook/addon-docs": "5.3.0-alpha.40",
"@storybook/react": "5.3.0-alpha.40",
"@storybook/addon-docs": "5.3.0-alpha.44",
"@storybook/react": "5.3.0-alpha.44",
"babel-loader": "^8.0.6",
"enzyme-to-json": "^3.4.1",
"jest-emotion": "^10.0.17",

6
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
@ -29,8 +29,8 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/node-logger": "5.3.0-alpha.40",
"@storybook/router": "5.3.0-alpha.40",
"@storybook/node-logger": "5.3.0-alpha.44",
"@storybook/router": "5.3.0-alpha.44",
"@types/jest-image-snapshot": "^2.8.0",
"@types/puppeteer-core": "^1.9.0",
"core-js": "^3.0.1",

12
addons/storysource/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Stories addon for storybook",
"keywords": [
"addon",
@ -28,11 +28,11 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/router": "5.3.0-alpha.40",
"@storybook/source-loader": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/router": "5.3.0-alpha.44",
"@storybook/source-loader": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"loader-utils": "^1.2.3",

14
addons/viewport/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook addon to change the viewport size to mobile",
"keywords": [
"addon",
@ -28,12 +28,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/components": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/theming": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/components": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/theming": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"memoizerific": "^1.11.3",

8
app/angular/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,9 +33,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/node-logger": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"@storybook/node-logger": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^3.0.1",
"global": "^4.3.2",

1
app/angular/src/server/options.ts
View File

@ -3,6 +3,7 @@ const packageJson = require('../../package.json');
export default {
packageJson,
framework: 'angular',
frameworkPresets: [
require.resolve('./framework-preset-angular.js'),
require.resolve('./framework-preset-angular-cli.js'),

4
app/ember/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
"bugs": {
@ -31,7 +31,7 @@
},
"dependencies": {
"@ember/test-helpers": "^1.5.0",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3",

1
app/ember/src/server/options.js
View File

@ -2,5 +2,6 @@ import packageJson from '../../package.json';
export default {
packageJson,
framework: 'ember',
frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
};

6
app/html/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/html",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"@types/webpack-env": "^1.13.9",
"core-js": "^3.0.1",
"global": "^4.3.2",

1
app/html/src/server/options.ts
View File

@ -3,5 +3,6 @@ const packageJson = require('../../package.json');
export default {
packageJson,
framework: 'html',
frameworkPresets: [require.resolve('./framework-preset-html.js')],
};

6
app/marko/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/marko",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,8 +33,8 @@
},
"dependencies": {
"@marko/webpack": "^2.0.0",
"@storybook/client-logger": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/client-logger": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3",

1
app/marko/src/server/options.js
View File

@ -2,5 +2,6 @@ import packageJson from '../../package.json';
export default {
packageJson,
framework: 'marko',
frameworkPresets: [require.resolve('./framework-preset-marko.js')],
};

6
app/mithril/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/mithril",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
"keywords": [
"storybook"
@ -35,8 +35,8 @@
"dependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"@types/mithril": "^2.0.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

1
app/mithril/src/server/options.ts
View File

@ -2,5 +2,6 @@ import packageJson from '../../package.json';
export default {
packageJson,
framework: 'mithril',
frameworkPresets: [require.resolve('./framework-preset-mithril.js')],
};

4
app/polymer/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/polymer",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -32,7 +32,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.44",
"@webcomponents/webcomponentsjs": "^1.2.0",
"core-js": "^3.0.1",
"global": "^4.3.2",

1
app/polymer/src/server/options.js
View File

@ -2,5 +2,6 @@ import packageJson from '../../package.json';
export default {
packageJson,
framework: 'polymer',
frameworkPresets: [require.resolve('./framework-preset-polymer.js')],
};

6
app/preact/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@ -34,8 +34,8 @@
},
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"@types/webpack-env": "^1.13.9",
"core-js": "^3.0.1",
"global": "^4.3.2",

1
app/preact/src/server/options.ts
View File

@ -2,5 +2,6 @@ const packageJson = require('../../package.json');
export default {
packageJson,
framework: 'preact',
frameworkPresets: [require.resolve('./framework-preset-preact.js')],
};

4
app/rax/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/rax",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Rax: Develop Rax Component in isolation.",
"keywords": [
"rax",
@ -33,7 +33,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.44",
"babel-preset-rax": "^1.0.0-beta.0",
"core-js": "^3.0.1",
"driver-dom": "^2.0.0",

1
app/rax/src/server/options.js
View File

@ -2,5 +2,6 @@ import packageJson from '../../package.json';
export default {
packageJson,
framework: 'rax',
frameworkPresets: [require.resolve('./framework-preset-rax.js')],
};

14
app/react-native-server/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-server",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -31,12 +31,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/api": "5.3.0-alpha.40",
"@storybook/channel-websocket": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/ui": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/api": "5.3.0-alpha.44",
"@storybook/channel-websocket": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"@storybook/ui": "5.3.0-alpha.44",
"commander": "^3.0.2",
"core-js": "^3.0.1",
"global": "^4.3.2",

1
app/react-native-server/src/server/options.js vendored
View File

@ -7,6 +7,7 @@ function extendOptions(options, extendServer) {
return {
...options,
framework: 'react-native',
extendServer,
packageJson,
mode: 'dev',

12
app/react-native/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react-native",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "A better way to develop React Native Components for your app",
"keywords": [
"react",
@ -31,11 +31,11 @@
"dependencies": {
"@emotion/core": "^10.0.20",
"@emotion/native": "^10.0.14",
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/channel-websocket": "5.3.0-alpha.40",
"@storybook/channels": "5.3.0-alpha.40",
"@storybook/client-api": "5.3.0-alpha.40",
"@storybook/core-events": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/channel-websocket": "5.3.0-alpha.44",
"@storybook/channels": "5.3.0-alpha.44",
"@storybook/client-api": "5.3.0-alpha.44",
"@storybook/core-events": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"emotion-theming": "^10.0.19",
"react-native-swipe-gestures": "^1.0.4"

8
app/react/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/react",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -36,9 +36,9 @@
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@storybook/addons": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.40",
"@storybook/node-logger": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"@storybook/node-logger": "5.3.0-alpha.44",
"@svgr/webpack": "^4.0.3",
"@types/webpack-env": "^1.13.7",
"babel-plugin-add-react-displayname": "^0.0.5",

1
app/react/src/server/options.ts
View File

@ -2,6 +2,7 @@ const packageJson = require('../../package.json');
export default {
packageJson,
framework: 'react',
frameworkPresets: [
require.resolve('./framework-preset-react.js'),
require.resolve('./framework-preset-cra.js'),

4
app/riot/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/riot",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -33,7 +33,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.3.0-alpha.40",
"@storybook/core": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"raw-loader": "^3.1.0",

1
app/riot/src/server/options.js
View File

@ -2,5 +2,6 @@ import packageJson from '../../package.json';
export default {
packageJson,
framework: 'riot',
frameworkPresets: [require.resolve('./framework-preset-riot.js')],
};

6
app/svelte/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
"version": "5.3.0-alpha.40",
"version": "5.3.0-alpha.44",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@ -23,6 +23,7 @@
"*.d.ts"
],
"main": "dist/client/index.js",
"types": "dist/client/index.d.ts",
"bin": {
"build-storybook": "./bin/build.js",
"start-storybook": "./bin/index.js",
@ -32,7 +33,8 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/core": "5.3.0-alpha.40",
"@storybook/addons": "5.3.0-alpha.44",
"@storybook/core": "5.3.0-alpha.44",
"core-js": "^3.0.1",
"global": "^4.3.2",
"regenerator-runtime": "^0.13.3",

0
app/svelte/src/client/index.js → app/svelte/src/client/index.ts
View File

0
app/svelte/src/client/preview/globals.js → app/svelte/src/client/preview/globals.ts
View File

5
app/svelte/src/client/preview/index.js → app/svelte/src/client/preview/index.ts
View File

@ -15,7 +15,8 @@ export const {
} = clientApi;
const framework = 'svelte';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const configure = (...args) => coreConfigure(...args, framework);
export const storiesOf = (...args: any) =>
clientApi.storiesOf(...args).addParameters({ framework });
export const configure = (...args: any) => coreConfigure(...args, framework);
export { forceReRender };

13
app/svelte/src/client/preview/render.js → app/svelte/src/client/preview/render.ts
View File

@ -1,19 +1,21 @@
import { document } from 'global';
import dedent from 'ts-dedent';
import { MountViewArgs, RenderMainArgs } from './types';
let previousComponent = null;
type Component = any;
let previousComponent: Component = null;
function cleanUpPreviousStory() {
if (!previousComponent) {
return;
}
previousComponent.$destroy();
previousComponent = null;
}
function mountView({ Component, target, props, on, Wrapper, WrapperData }) {
let component;
function mountView({ Component, target, props, on, Wrapper, WrapperData }: MountViewArgs) {
let component: Component;
if (Wrapper) {
const fragment = document.createDocumentFragment();
@ -47,8 +49,7 @@ export default function render({
selectedStory,
showMain,
showError,
// showException,
}) {
}: RenderMainArgs) {
const {
/** @type {SvelteComponent} */
Component,

33
app/svelte/src/client/preview/types.ts Normal file
View File

@ -0,0 +1,33 @@
import { StoryFn } from '@storybook/addons';
export interface ShowErrorArgs {
title: string;
description: string;
}
export interface RenderMainArgs {
storyFn: StoryFn<any>;
selectedKind: string;
selectedStory: string;
showMain: () => void;
showError: (args: ShowErrorArgs) => void;
}
export interface MountViewArgs {
Component: any;
target: any;
props: MountProps;
on: any;
Wrapper: any;
WrapperData: any;
}
interface MountProps {
rounded: boolean;
text: string;
}
interface WrapperData {
innerStyle: string;
style: string;
}

0
app/svelte/src/server/build.js → app/svelte/src/server/build.ts
View File

4
app/svelte/src/server/framework-preset-svelte.js → app/svelte/src/server/framework-preset-svelte.ts
View File

@ -1,4 +1,6 @@
export function webpack(config) {
import { Configuration } from 'webpack'; // eslint-disable-line
export function webpack(config: Configuration) {
return {
...config,
module: {

0
app/svelte/src/server/index.js → app/svelte/src/server/index.ts
View File

3
app/svelte/src/server/options.js → app/svelte/src/server/options.ts
View File

@ -1,6 +1,7 @@
import packageJson from '../../package.json';
const packageJson = require('../../package.json');
export default {
packageJson,
framework: 'svelte',
frameworkPresets: [require.resolve('./framework-preset-svelte.js')],
};

2
app/svelte/src/typings.d.ts vendored Normal file
View File

@ -0,0 +1,2 @@
declare module '@storybook/core/*';
declare module 'global';

14
app/svelte/tsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env"],
"resolveJsonModule": true
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/*.test.*"
]
}

Some files were not shown because too many files have changed in this diff Show More