mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
Merge remote-tracking branch 'origin/tech/overhaul-ui' into tech/overhaul-ui-new-storyId
This commit is contained in:
Tom Coleman
commit
673f0150af
@ -10,6 +10,7 @@ lib/cli/test
|
||||
*.bundle.js
|
||||
*.js.map
|
||||
*.ts
|
||||
*.tsx
|
||||
|
||||
!.remarkrc.js
|
||||
!.babelrc.js
|
||||
|
||||
14
.eslintrc.js
14
.eslintrc.js
@ -71,6 +71,7 @@ module.exports = {
|
||||
allowBind: true,
|
||||
},
|
||||
],
|
||||
'jsx-a11y/accessible-emoji': ignore,
|
||||
'jsx-a11y/label-has-associated-control': [
|
||||
warn,
|
||||
{
|
||||
@ -85,7 +86,7 @@ module.exports = {
|
||||
'jsx-a11y/anchor-is-valid': [
|
||||
error,
|
||||
{
|
||||
components: ['RoutedLink', 'LinkTo', 'Link'],
|
||||
components: ['A', 'LinkTo', 'Link'],
|
||||
specialLink: ['overrideParams', 'kind', 'story', 'to'],
|
||||
},
|
||||
],
|
||||
@ -96,15 +97,16 @@ module.exports = {
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/__tests__/**', '**/*.test.js/**', '**/*.stories.js'],
|
||||
files: [
|
||||
'**/__tests__/**',
|
||||
'**/*.test.js/**',
|
||||
'**/*.stories.js',
|
||||
'**/storyshots/**/stories/**',
|
||||
],
|
||||
rules: {
|
||||
'import/no-extraneous-dependencies': ignore,
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/react-native*/**', '**/REACT_NATIVE*/**', '**/crna*/**'],
|
||||
rules: { 'jsx-a11y/accessible-emoji': ignore },
|
||||
},
|
||||
{ files: '**/.storybook/config.js', rules: { 'global-require': ignore } },
|
||||
],
|
||||
};
|
||||
|
||||
61
CHANGELOG.md
61
CHANGELOG.md
@ -1,3 +1,64 @@
|
||||
|
||||
## 4.1.4 (December 25, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Core: Load Symbol polyfill before any other code ([#5082](https://github.com/storybooks/storybook/pull/5082))
|
||||
* React: Fix error with new CRA Webpack config ([#5074](https://github.com/storybooks/storybook/pull/5074))
|
||||
|
||||
## 4.2.0-alpha.7 (December 25, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React: Fix error with new CRA Webpack config ([#5074](https://github.com/storybooks/storybook/pull/5074))
|
||||
* Core: Load Symbol polyfill before any other code ([#5082](https://github.com/storybooks/storybook/pull/5082))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Bump eslint-plugin-jest from 21.27.2 to 22.1.2 ([#5089](https://github.com/storybooks/storybook/pull/5089))
|
||||
* Bump react-color from 2.14.1 to 2.17.0 ([#5083](https://github.com/storybooks/storybook/pull/5083))
|
||||
* Bump @angular-devkit/build-angular from 0.10.7 to 0.11.4 ([#5084](https://github.com/storybooks/storybook/pull/5084))
|
||||
* Bump ts-loader from 5.3.1 to 5.3.2 ([#5085](https://github.com/storybooks/storybook/pull/5085))
|
||||
* Bump loader-utils from 1.1.0 to 1.2.0 ([#5086](https://github.com/storybooks/storybook/pull/5086))
|
||||
* Bump protractor from 5.4.1 to 5.4.2 ([#5087](https://github.com/storybooks/storybook/pull/5087))
|
||||
* Bump ember-cli from 3.5.1 to 3.6.0 ([#5088](https://github.com/storybooks/storybook/pull/5088))
|
||||
* Bump tslint from 5.11.0 to 5.12.0 ([#5090](https://github.com/storybooks/storybook/pull/5090))
|
||||
* Bump react-dom from 16.6.3 to 16.7.0 ([#5071](https://github.com/storybooks/storybook/pull/5071))
|
||||
|
||||
## 4.1.3 (December 20, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* React: remove unnecessary dependencies, fix aliasing ([#5047](https://github.com/storybooks/storybook/pull/5047))
|
||||
* React: alias to react & react-dom ([#5016](https://github.com/storybooks/storybook/pull/5016))
|
||||
* Addon-knobs: Fix color picker display ([#5010](https://github.com/storybooks/storybook/pull/5010))
|
||||
|
||||
## 4.2.0-alpha.6 (December 20, 2018)
|
||||
|
||||
### Features
|
||||
|
||||
* React-Native: Change on-device layout to absolute position ([#4962](https://github.com/storybooks/storybook/pull/4962))
|
||||
* Addon-Info: add css classes for style overrides ([#4589](https://github.com/storybooks/storybook/pull/4589))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* Addon-Info: Display description when story name matches component ([#4863](https://github.com/storybooks/storybook/pull/4863))
|
||||
* React-Native: Disable warning if story is not set in async storage ([#5068](https://github.com/storybooks/storybook/pull/5068))
|
||||
* React-Native: Fixed isUIHidden param ([#5067](https://github.com/storybooks/storybook/pull/5067))
|
||||
* Vue: Fix reloading and story decoration ([#5057](https://github.com/storybooks/storybook/pull/5057))
|
||||
|
||||
### Maintenance
|
||||
|
||||
* TypeScript: migrate @storybook/channels to typescript ([#4977](https://github.com/storybooks/storybook/pull/4977))
|
||||
|
||||
### Dependency Upgrades
|
||||
|
||||
* Bump babel-plugin-macros from 2.4.2 to 2.4.3 ([#5060](https://github.com/storybooks/storybook/pull/5060))
|
||||
* Bump @babel/core from 7.2.0 to 7.2.2 ([#5059](https://github.com/storybooks/storybook/pull/5059))
|
||||
* Bump ember-cli-htmlbars-inline-precompile from 1.0.5 to 2.1.0 ([#5064](https://github.com/storybooks/storybook/pull/5064))
|
||||
* Bump react-test-renderer from 16.6.3 to 16.7.0 ([#5063](https://github.com/storybooks/storybook/pull/5063))
|
||||
* Bump autoprefixer from 9.4.2 to 9.4.3 ([#5061](https://github.com/storybooks/storybook/pull/5061))
|
||||
|
||||
## 4.2.0-alpha.5 (December 19, 2018)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
@ -228,8 +228,8 @@ Also read on if you're using `addon-knobs`: we advise an update to your code for
|
||||
|
||||
This affects you if you don't use babel in your project. You may need to add `babel-core` as dev dependency:
|
||||
|
||||
```
|
||||
npm install --save-dev babel-core
|
||||
```sh
|
||||
yarn add babel-core --dev
|
||||
```
|
||||
|
||||
This was done to support different major versions of babel.
|
||||
@ -261,7 +261,7 @@ In the case of Angular: `import { ... } from '@storybook/addon-knobs/angular';`
|
||||
TypeScript users: we've moved the rest of our addons type definitions into [DefinitelyTyped](http://definitelytyped.org/). Starting in 3.2.0 make sure to use the right addons types:
|
||||
|
||||
```sh
|
||||
npm install @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --save-dev
|
||||
yarn add @types/storybook__addon-notes @types/storybook__addon-options @types/storybook__addon-knobs @types/storybook__addon-links --dev
|
||||
```
|
||||
|
||||
See also [TypeScript definitions in 3.1.x](#moved-typescript-definitions).
|
||||
@ -294,7 +294,7 @@ It's not beautiful, but we'll be adding a more convenient/idiomatic way of using
|
||||
TypeScript users: we are in the process of moving our typescript definitions into [DefinitelyTyped](http://definitelytyped.org/). If you're using TypeScript, starting in 3.1.0 you need to make sure your type definitions are installed:
|
||||
|
||||
```sh
|
||||
npm install @types/node @types/react @types/storybook__react --save-dev
|
||||
yarn add @types/node @types/react @types/storybook__react --dev
|
||||
```
|
||||
|
||||
### Deprecated head.html
|
||||
|
||||
57
WORKLOG.md
57
WORKLOG.md
@ -1,57 +0,0 @@
|
||||
@ndelangen
|
||||
TODO:
|
||||
- [x] FIX navigate by keyboard shortcut
|
||||
- [x] FIX addon-storysource click navigate
|
||||
- [x] FIX addon-links
|
||||
- [x] FIX addon-actions
|
||||
- [ ] FIX when reloading page selected story should stay (this happens when there's a mismatch between hierarchySeparators)
|
||||
|
||||
- [ ] INVESTIGATE if addon-storysource can use router directly over state method
|
||||
- [ ] DISCUSS moving router into a separate package
|
||||
|
||||
- [ ] TEST other examples (vue with it's different `decorateStory`)
|
||||
|
||||
- [x] FIX HMR - stick with story in url
|
||||
- [x] FIX HMR - HMR in ejected iframe
|
||||
- [ ] FIX HMR - keep state of explorer
|
||||
|
||||
- [x] FIX http://localhost:9011/?path=/components/Core-Errors-storyErrors (should error)
|
||||
- [ ] FIX https://deploy-preview-4086--storybooks-official.netlify.com/?selectedKind=Addons%7Ca11y&selectedStory=Invalid%20contrast&full=0&addons=1&stories=1&panelRight=0&addonPanel=%40storybook%2Faddon-a11y%2Fpanel (should redirect correctly)
|
||||
|
||||
- [x] OPTIMIZE double selectStory event
|
||||
- [x] OPTIMIZE selectStory event at fullscreen switch
|
||||
- [ ] unify SET_CURRENT_STORY & SELECT_STORY
|
||||
|
||||
- [x] FIX eslint
|
||||
- [ ] ADD unit tests
|
||||
|
||||
- [x] REMOVE zoom level text & ADD reset button
|
||||
- [x] REMOVE grid-lines or move into addons / toggle
|
||||
- [x] FIX refresh when toggle panel or nav
|
||||
- [ ] FIX main is weird when entry page is settings after switching to components
|
||||
- [x] FIX delay in resizing panels because of transition
|
||||
|
||||
- [ ] ADD postMessage to ejected iframe
|
||||
|
||||
- [x] REMOVE toNested
|
||||
- [ ] ADD explorer hover over items
|
||||
- [ ] ADD support for rootSeparators in explorer
|
||||
- [ ] ADD auto-open of selection in explorer
|
||||
- [ ] ADD explorer empty message
|
||||
- [ ] ADD highlighting of the search results
|
||||
- [ ] TRY - when you click on a group, maybe select first renderable child - in an option?
|
||||
|
||||
- [ ] ADD fetching of data for version notification
|
||||
- [ ] ADD storage of version info in localStorage
|
||||
|
||||
Dom's changes
|
||||
- [x] ADD tools/hotkeys button
|
||||
- [x] ADD UI to go fullscreen and toggle panels
|
||||
- [ ] CHANGE styles of explorer
|
||||
- [ ] CHANGE styles of notifications
|
||||
- [x] CHANGE styles of main (preview+panel)
|
||||
- [ ] CHANGE toolbar
|
||||
- [ ] ADD shortcut for toggle toolbar
|
||||
- [ ] ADD shortcut for zoom
|
||||
- [ ] ADD shortcut for toggle grid
|
||||
- [ ] ADD tools to TabsBar
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-a11y",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "a11y addon for storybook",
|
||||
"keywords": [
|
||||
"a11y",
|
||||
@ -26,10 +26,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/client-logger": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/client-logger": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"axe-core": "^3.1.2",
|
||||
"core-js": "^2.5.7",
|
||||
"react": "^16.7.0-alpha.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-actions",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Action Logger addon for storybook",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -22,9 +22,9 @@
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.2",
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"emotion-theming": "^10.0.2",
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
|
||||
@ -1,90 +1,95 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { action, configureActions } from '../..';
|
||||
import { action } from '../..';
|
||||
// import { configureActions } from '../..';
|
||||
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
const getChannelData = channel =>
|
||||
channel.emit.mock.calls[channel.emit.mock.calls.length - 1][1].data;
|
||||
|
||||
describe('Action', () => {
|
||||
const createChannel = () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
return channel;
|
||||
};
|
||||
const getChannelData = channel => channel.emit.mock.calls[0][1].data.args;
|
||||
|
||||
describe('Action', () => {
|
||||
it('with one argument', () => {
|
||||
const channel = createChannel();
|
||||
|
||||
action('test-action')('one');
|
||||
|
||||
expect(getChannelData(channel).args[0]).toEqual('"one"');
|
||||
expect(getChannelData(channel)[0]).toEqual('one');
|
||||
});
|
||||
|
||||
it('with multiple arguments', () => {
|
||||
const channel = createChannel();
|
||||
|
||||
action('test-action')('one', 'two', 'three');
|
||||
|
||||
expect(getChannelData(channel).args).toEqual(['"one"', '"two"', '"three"']);
|
||||
});
|
||||
|
||||
it('with global depth configuration', () => {
|
||||
const depth = 1;
|
||||
|
||||
configureActions({
|
||||
depth,
|
||||
});
|
||||
|
||||
action('test-action')({
|
||||
root: {
|
||||
one: {
|
||||
two: 'foo',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(getChannelData(channel).args[0]).toEqual(
|
||||
JSON.stringify({
|
||||
'$___storybook.objectName': 'Object',
|
||||
root: {
|
||||
'$___storybook.objectName': 'Object',
|
||||
one: {
|
||||
'$___storybook.objectName': 'Object',
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('per action depth option overrides global config', () => {
|
||||
configureActions({
|
||||
depth: 1,
|
||||
});
|
||||
|
||||
action('test-action', { depth: 3 })({
|
||||
root: {
|
||||
one: {
|
||||
two: {
|
||||
three: {
|
||||
four: {
|
||||
five: 'foo',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(getChannelData(channel).args[0]).toEqual(
|
||||
JSON.stringify({
|
||||
'$___storybook.objectName': 'Object',
|
||||
root: {
|
||||
'$___storybook.objectName': 'Object',
|
||||
one: {
|
||||
'$___storybook.objectName': 'Object',
|
||||
two: {
|
||||
'$___storybook.objectName': 'Object',
|
||||
three: {
|
||||
'$___storybook.objectName': 'Object',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
expect(getChannelData(channel)).toEqual(['one', 'two', 'three']);
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: This functionality is removed, unsure if to add back or remove
|
||||
// describe('Depth config', () => {
|
||||
// it('with global depth configuration', () => {
|
||||
// const channel = createChannel();
|
||||
|
||||
// const depth = 1;
|
||||
|
||||
// configureActions({
|
||||
// depth,
|
||||
// });
|
||||
|
||||
// action('test-action')({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: 'foo',
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
|
||||
// expect(getChannelData(channel)[0]).toEqual({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: 'foo',
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
|
||||
// it('per action depth option overrides global config', () => {
|
||||
// const channel = createChannel();
|
||||
|
||||
// configureActions({
|
||||
// depth: 1,
|
||||
// });
|
||||
|
||||
// action('test-action', { depth: 3 })({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: {
|
||||
// three: {
|
||||
// four: {
|
||||
// five: 'foo',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
|
||||
// expect(getChannelData(channel)[0]).toEqual({
|
||||
// root: {
|
||||
// one: {
|
||||
// two: {
|
||||
// three: {
|
||||
// four: {
|
||||
// five: 'foo',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
|
||||
@ -1,111 +0,0 @@
|
||||
import addons from '@storybook/addons';
|
||||
import uuid from 'uuid/v1';
|
||||
import { action } from '..';
|
||||
|
||||
jest.mock('uuid/v1');
|
||||
jest.mock('@storybook/addons');
|
||||
|
||||
describe('preview', () => {
|
||||
describe('action()', () => {
|
||||
it('should use a uuid for action ids', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
const uuidGenerator = (function* uuidGenerator() {
|
||||
yield '42';
|
||||
yield '24';
|
||||
})();
|
||||
uuid.mockImplementation(() => uuidGenerator.next().value);
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
const fn = action('foo');
|
||||
|
||||
fn();
|
||||
fn();
|
||||
expect(channel.emit).toHaveBeenCalledTimes(2);
|
||||
expect(channel.emit.mock.calls[0][1].id).toBe('42');
|
||||
expect(channel.emit.mock.calls[1][1].id).toBe('24');
|
||||
});
|
||||
it('should be able to handle cyclic object without hanging', () => {
|
||||
const cyclicObject = {
|
||||
propertyA: {
|
||||
innerPropertyA: {},
|
||||
},
|
||||
propertyB: 'b',
|
||||
};
|
||||
cyclicObject.propertyA.innerPropertyA = cyclicObject;
|
||||
|
||||
expect(() => JSON.stringify(cyclicObject)).toThrow();
|
||||
expect(() => action('foo')(cyclicObject)).not.toThrow();
|
||||
});
|
||||
|
||||
it('should be able to handle non plain object', () => {
|
||||
function A(val) {
|
||||
this.a = val;
|
||||
}
|
||||
|
||||
const a = new A('b');
|
||||
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
action('foo')(a);
|
||||
|
||||
expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({
|
||||
'$___storybook.objectName': 'A',
|
||||
a: 'b',
|
||||
});
|
||||
});
|
||||
|
||||
it('should be able to handle non plain cyclic object', () => {
|
||||
function A() {}
|
||||
const a = new A();
|
||||
a.a = a;
|
||||
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
action('foo')(a);
|
||||
|
||||
expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({
|
||||
'$___storybook.objectName': 'A',
|
||||
'$___storybook.isCyclic': true,
|
||||
a: {
|
||||
$ref: '$',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('should be able to emit primitive value type:', () => {
|
||||
[true, false, null, 10, 'a'].forEach(value => {
|
||||
it(`${typeof value} value ${JSON.stringify(value)}`, () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
action('foo')(value);
|
||||
|
||||
expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toBe(value);
|
||||
});
|
||||
});
|
||||
|
||||
// it('undefined value', () => {
|
||||
// const channel = { emit: jest.fn() };
|
||||
// addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
// action('foo')(undefined);
|
||||
|
||||
// expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({
|
||||
// [undefinedType.KEY]: true,
|
||||
// });
|
||||
// });
|
||||
|
||||
// it('symbol value', () => {
|
||||
// const channel = { emit: jest.fn() };
|
||||
// addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
// action('foo')(Symbol('A Symbol'));
|
||||
|
||||
// expect(JSON.parse(channel.emit.mock.calls[0][1].data.args[0])).toEqual({
|
||||
// [symbolType.KEY]: 'A Symbol',
|
||||
// });
|
||||
// });
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-backgrounds",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -26,10 +26,10 @@
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.2",
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/client-logger": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/client-logger": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"eventemitter3": "^3.1.0",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export const ADDON_ID = 'storybook/background';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = 'backgrounds';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
import React from 'react';
|
||||
import addons, { types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
import { ADDON_ID } from './constants';
|
||||
import Tool from './Tool';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
const channel = addons.getChannel();
|
||||
|
||||
addons.add(PANEL_ID, {
|
||||
addons.add(ADDON_ID, {
|
||||
type: types.TOOL,
|
||||
render: () => <Tool channel={channel} api={api} />,
|
||||
render: () => <Tool api={api} />,
|
||||
});
|
||||
});
|
||||
|
||||
@ -7,7 +7,7 @@ Storybook Centered Decorator can be used to center components inside the preview
|
||||
### Usage
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-centered --save-dev
|
||||
yarn add @storybook/addon-centered --dev
|
||||
```
|
||||
|
||||
#### As a decorator
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-cssresources",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "A storybook addon to switch between css resources at runtime for your story",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -25,9 +25,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-events",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Add events to your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,8 +24,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"format-json": "^1.0.3",
|
||||
"prop-types": "^15.6.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-google-analytics",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook addon for google analytics",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,8 +20,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"react-ga": "^2.5.3"
|
||||
|
||||
@ -11,7 +11,7 @@ Storybook GraphQL Addon can be used to display the GraphiQL IDE with example que
|
||||
First, install the addon
|
||||
|
||||
```sh
|
||||
npm install -D @storybook/addon-graphql
|
||||
yarn add @storybook/addon-graphql --dev
|
||||
```
|
||||
|
||||
Import the `setupGraphiQL` function and use it to create the graphiql helper with a base url.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-graphql",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook addon to display the GraphiQL IDE",
|
||||
"keywords": [
|
||||
"addon",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-info",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "A Storybook addon to show additional information for your stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,9 +22,9 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/client-logger": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/client-logger": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"marksy": "^6.1.0",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -230,7 +230,7 @@ class Story extends Component {
|
||||
return (
|
||||
<div style={stylesheet.header.body}>
|
||||
<h1 style={stylesheet.header.h1}>{context.kind}</h1>
|
||||
<h2 style={stylesheet.header.h2}>{context.story}</h2>
|
||||
<h2 style={stylesheet.header.h2}>{context.name}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -263,12 +263,16 @@ class Story extends Component {
|
||||
}
|
||||
|
||||
_getComponentDescription() {
|
||||
const { context } = this.props;
|
||||
const {
|
||||
context: { kind, story },
|
||||
} = this.props;
|
||||
let retDiv = null;
|
||||
|
||||
const validMatches = [kind, story];
|
||||
|
||||
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
|
||||
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
|
||||
if (STORYBOOK_REACT_CLASSES[key].name === context.kind) {
|
||||
if (validMatches.includes(STORYBOOK_REACT_CLASSES[key].name)) {
|
||||
const componentDescription = STORYBOOK_REACT_CLASSES[key].docgenInfo.description;
|
||||
retDiv = <div>{this.marksy(componentDescription).tree}</div>;
|
||||
}
|
||||
@ -401,7 +405,7 @@ Story.displayName = 'Story';
|
||||
Story.propTypes = {
|
||||
context: PropTypes.shape({
|
||||
kind: PropTypes.string,
|
||||
story: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
}),
|
||||
info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
||||
propTables: PropTypes.arrayOf(PropTypes.func),
|
||||
|
||||
@ -1,57 +1,10 @@
|
||||
import { Prism } from 'global';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { SyntaxHighlighter } from '@storybook/components';
|
||||
|
||||
export class Code extends React.Component {
|
||||
componentDidMount() {
|
||||
this.highlight();
|
||||
}
|
||||
const Code = ({ props }) => <SyntaxHighlighter bordered copyable {...props} />;
|
||||
|
||||
componentDidUpdate() {
|
||||
this.highlight();
|
||||
}
|
||||
|
||||
highlight() {
|
||||
if (typeof Prism !== 'undefined') {
|
||||
Prism.highlightAll();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { language, code } = this.props;
|
||||
const codeStyle = {
|
||||
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
|
||||
backgroundColor: '#fafafa',
|
||||
};
|
||||
|
||||
const preStyle = {
|
||||
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
|
||||
backgroundColor: '#fafafa',
|
||||
padding: '.5rem',
|
||||
lineHeight: 1.5,
|
||||
overflowX: 'scroll',
|
||||
};
|
||||
|
||||
const className = language ? `language-${language}` : '';
|
||||
|
||||
return (
|
||||
<pre style={preStyle} className={className}>
|
||||
<code style={codeStyle} className={className}>
|
||||
{code}
|
||||
</code>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Code.propTypes = {
|
||||
language: PropTypes.string,
|
||||
code: PropTypes.node,
|
||||
};
|
||||
Code.defaultProps = {
|
||||
language: null,
|
||||
code: null,
|
||||
};
|
||||
export { Code };
|
||||
|
||||
export function Blockquote({ children }) {
|
||||
const style = {
|
||||
|
||||
@ -78,7 +78,7 @@ describe('addon Info', () => {
|
||||
mount(<Info />);
|
||||
});
|
||||
|
||||
it('should render component description', () => {
|
||||
it('should render component description if story kind matches component', () => {
|
||||
const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
|
||||
Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
|
||||
|
||||
@ -92,4 +92,19 @@ describe('addon Info', () => {
|
||||
|
||||
Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
|
||||
});
|
||||
|
||||
it('should render component description if story name matches component', () => {
|
||||
const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
|
||||
Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
|
||||
|
||||
const Info = () =>
|
||||
withInfo({ inline: true, propTables: false })(storyFn, {
|
||||
kind: 'Test Components',
|
||||
story: 'TestComponent',
|
||||
});
|
||||
|
||||
expect(mount(<Info />)).toMatchSnapshot();
|
||||
|
||||
Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
|
||||
});
|
||||
});
|
||||
|
||||
@ -12,7 +12,7 @@ Brings Jest results in storybook.
|
||||
|
||||
### Install
|
||||
|
||||
`npm install --save-dev @storybook/addon-jest`
|
||||
`yarn add --save-dev @storybook/addon-jest --dev`
|
||||
|
||||
or
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-jest",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "React storybook addon that show component jest report",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -28,8 +28,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
|
||||
@ -16,7 +16,7 @@ This is how Knobs look like:
|
||||
First of all, you need to install knobs into your project as a dev dependency.
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-knobs --save-dev
|
||||
yarn add @storybook/addon-knobs --dev
|
||||
```
|
||||
|
||||
Then, configure it as an addon by adding it to your `addons.js` file (located in the Storybook config directory).
|
||||
@ -418,4 +418,10 @@ If you are using typescript, make sure you have the type definitions installed f
|
||||
- node
|
||||
- react
|
||||
|
||||
You can install them using `npm install -save @types/node @types/react`, assuming you are using Typescript >2.0.
|
||||
You can install them using:
|
||||
*assuming you are using Typescript >2.0.*
|
||||
|
||||
```sh
|
||||
yarn add @types/node @types/react --dev
|
||||
```
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-knobs",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook Addon Prop Editor Component",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,9 +23,9 @@
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.2",
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^2.5.7",
|
||||
"escape-html": "^1.0.3",
|
||||
@ -33,10 +33,9 @@
|
||||
"global": "^4.3.2",
|
||||
"prop-types": "^15.6.2",
|
||||
"qs": "^6.5.2",
|
||||
"react": "^16.7.0-alpha.2",
|
||||
"react-color": "^2.14.1",
|
||||
"react-color": "^2.17.0",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-select": "^2.1.0",
|
||||
"react-select": "^2.1.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Field } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
import TypeMap from './types';
|
||||
|
||||
const Form = styled.form({
|
||||
boxSizing: 'border-box',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
const InvalidType = () => <span>Invalid Type</span>;
|
||||
|
||||
export default class PropForm extends Component {
|
||||
@ -33,9 +26,9 @@ export default class PropForm extends Component {
|
||||
const InputType = TypeMap[knob.type] || InvalidType;
|
||||
|
||||
return (
|
||||
<Field key={knob.name} label={!knob.hideLabel && `${knob.name}`}>
|
||||
<Form.Field key={knob.name} label={!knob.hideLabel && `${knob.name}`}>
|
||||
<InputType knob={knob} onChange={changeHandler} onClick={onFieldClick} />
|
||||
</Field>
|
||||
</Form.Field>
|
||||
);
|
||||
})}
|
||||
</Form>
|
||||
|
||||
@ -51,7 +51,7 @@ describe('Options', () => {
|
||||
|
||||
firstInput.simulate('change');
|
||||
|
||||
expect(mockOn).toBeCalled();
|
||||
expect(mockOn).toHaveBeenCalled();
|
||||
expect(wrapper.props().knob.defaultValue).toEqual(['#0ff', '#f00']);
|
||||
});
|
||||
});
|
||||
@ -92,7 +92,7 @@ describe('Options', () => {
|
||||
|
||||
it('updates on change event', () => {
|
||||
firstInput.simulate('change');
|
||||
expect(mockOn).toBeCalled();
|
||||
expect(mockOn).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -124,7 +124,7 @@ describe('Options', () => {
|
||||
selectInput.simulate('keyDown', { key: 'Enter', keyCode: 13 });
|
||||
|
||||
// selectInput.simulate('change');
|
||||
expect(mockOn).toBeCalled();
|
||||
expect(mockOn).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,23 +1,33 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { STORY_CHANGED } from '@storybook/core-events';
|
||||
import Panel from '../Panel';
|
||||
import { CHANGE, SET } from '../../shared';
|
||||
|
||||
const createTestChannel = () => ({
|
||||
on: jest.fn(),
|
||||
emit: jest.fn(),
|
||||
});
|
||||
const createTestApi = () => ({
|
||||
on: jest.fn(),
|
||||
emit: jest.fn(),
|
||||
});
|
||||
|
||||
describe('Panel', () => {
|
||||
it('should subscribe to setKnobs event of channel', () => {
|
||||
const testChannel = { on: jest.fn() };
|
||||
const testApi = { onStory: jest.fn() };
|
||||
const testChannel = createTestChannel();
|
||||
const testApi = createTestApi();
|
||||
shallow(<Panel channel={testChannel} api={testApi} active />);
|
||||
expect(testChannel.on).toHaveBeenCalledWith(SET, jasmine.any(Function));
|
||||
expect(testChannel.on).toHaveBeenCalledWith(SET, expect.any(Function));
|
||||
});
|
||||
|
||||
it('should subscribe to onStory event', () => {
|
||||
const testChannel = { on: jest.fn() };
|
||||
const testApi = { onStory: jest.fn() };
|
||||
it('should subscribe to STORY_CHANGE event', () => {
|
||||
const testChannel = createTestChannel();
|
||||
const testApi = createTestApi();
|
||||
shallow(<Panel channel={testChannel} api={testApi} active />);
|
||||
|
||||
expect(testApi.onStory).toHaveBeenCalled();
|
||||
expect(testChannel.on).toHaveBeenCalledWith(SET, jasmine.any(Function));
|
||||
expect(testApi.on.mock.calls).toContainEqual([STORY_CHANGED, expect.any(Function)]);
|
||||
expect(testChannel.on).toHaveBeenCalledWith(SET, expect.any(Function));
|
||||
});
|
||||
|
||||
describe('setKnobs handler', () => {
|
||||
@ -37,6 +47,9 @@ describe('Panel', () => {
|
||||
};
|
||||
|
||||
const testApi = {
|
||||
on: (e, handler) => {
|
||||
handlers[e] = handler;
|
||||
},
|
||||
getQueryParam: key => testQueryParams[key],
|
||||
setQueryParams: jest.fn(),
|
||||
onStory: jest.fn(),
|
||||
@ -84,9 +97,11 @@ describe('Panel', () => {
|
||||
};
|
||||
|
||||
const testApi = {
|
||||
on: (e, handler) => {
|
||||
handlers[e] = handler;
|
||||
},
|
||||
getQueryParam: key => testQueryParams[key],
|
||||
setQueryParams: jest.fn(),
|
||||
onStory: jest.fn(),
|
||||
};
|
||||
|
||||
const wrapper = shallow(<Panel channel={testChannel} api={testApi} active />);
|
||||
@ -128,7 +143,7 @@ describe('Panel', () => {
|
||||
const testApi = {
|
||||
getQueryParam: jest.fn(),
|
||||
setQueryParams: jest.fn(),
|
||||
onStory: jest.fn(),
|
||||
on: jest.fn(),
|
||||
};
|
||||
|
||||
const wrapper = shallow(<Panel channel={testChannel} api={testApi} active />);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { Textarea } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
function formatArray(value, separator) {
|
||||
if (value === '') {
|
||||
@ -29,7 +29,7 @@ class ArrayType extends React.Component {
|
||||
const { knob } = this.props;
|
||||
const value = knob.value.join(knob.separator);
|
||||
|
||||
return <Textarea id={knob.name} value={value} onChange={this.handleChange} size="flex" />;
|
||||
return <Form.Textarea id={knob.name} value={value} onChange={this.handleChange} size="flex" />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const ButtonType = ({ knob, onClick }) => (
|
||||
<Button type="button" onClick={() => onClick(knob)}>
|
||||
<Form.Button type="button" onClick={() => onClick(knob)}>
|
||||
{knob.name}
|
||||
</Button>
|
||||
</Form.Button>
|
||||
);
|
||||
|
||||
ButtonType.propTypes = {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from '@emotion/styled';
|
||||
import { Input } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const FlexSpaced = styled.div({
|
||||
flex: 1,
|
||||
@ -9,11 +9,11 @@ const FlexSpaced = styled.div({
|
||||
'& > *': {
|
||||
marginLeft: 10,
|
||||
},
|
||||
'& > *:first-of-type': {
|
||||
'& > *:nth-child(0)': {
|
||||
marginLeft: 0,
|
||||
},
|
||||
});
|
||||
const FlexInput = styled(Input)({ flex: 1 });
|
||||
const FlexInput = styled(Form.Input)({ flex: 1 });
|
||||
|
||||
const formatDate = date => {
|
||||
const year = `000${date.getFullYear()}`.slice(-4);
|
||||
|
||||
@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Input } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const FileInput = styled(Input)({
|
||||
const FileInput = styled(Form.Input)({
|
||||
paddingTop: 4,
|
||||
});
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import React from 'react';
|
||||
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Input } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const base = {
|
||||
boxSizing: 'border-box',
|
||||
@ -69,7 +69,7 @@ class NumberType extends React.Component {
|
||||
<RangeLabel>{`${knob.value} / ${knob.max}`}</RangeLabel>
|
||||
</RangeWrapper>
|
||||
) : (
|
||||
<Input
|
||||
<Form.Input
|
||||
value={knob.value}
|
||||
type="number"
|
||||
min={knob.min}
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import deepEqual from 'fast-deep-equal';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { Textarea } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
class ObjectType extends Component {
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
@ -47,7 +47,7 @@ class ObjectType extends Component {
|
||||
const { value, failed } = this.state;
|
||||
|
||||
return (
|
||||
<Textarea
|
||||
<Form.Textarea
|
||||
valid={failed ? 'error' : null}
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Select } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
const SelectType = ({ knob, onChange }) => {
|
||||
const { options } = knob;
|
||||
@ -12,7 +12,7 @@ const SelectType = ({ knob, onChange }) => {
|
||||
const selectedKey = Object.keys(entries).find(k => entries[k] === knob.value);
|
||||
|
||||
return (
|
||||
<Select
|
||||
<Form.Select
|
||||
value={selectedKey}
|
||||
onChange={e => {
|
||||
onChange(entries[e.target.value]);
|
||||
@ -24,7 +24,7 @@ const SelectType = ({ knob, onChange }) => {
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Select>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { Textarea } from '@storybook/components';
|
||||
import { Form } from '@storybook/components';
|
||||
|
||||
class TextType extends React.Component {
|
||||
shouldComponentUpdate(nextProps) {
|
||||
@ -20,7 +20,9 @@ class TextType extends React.Component {
|
||||
render() {
|
||||
const { knob } = this.props;
|
||||
|
||||
return <Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />;
|
||||
return (
|
||||
<Form.Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,31 +1,3 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
import {
|
||||
knob,
|
||||
text,
|
||||
boolean,
|
||||
number,
|
||||
color,
|
||||
object,
|
||||
array,
|
||||
date,
|
||||
select,
|
||||
files,
|
||||
button,
|
||||
withKnobs as commonWithKnobs,
|
||||
withKnobsOptions as commonWithKnobsOptions,
|
||||
} from '.';
|
||||
import { knob, text, boolean, number, color, object, array, date, select, files, button } from '.';
|
||||
|
||||
export { knob, text, boolean, number, color, object, array, date, select, files, button };
|
||||
|
||||
export const selectV2 = deprecate(select, 'selectV2 has been renamed to select');
|
||||
|
||||
export const withKnobs = deprecate(
|
||||
commonWithKnobs,
|
||||
"addon-knobs: framework-specific imports are deprecated, just use `import {withKnobs} from '@storybook/addon-knobs`"
|
||||
);
|
||||
|
||||
export const withKnobsOptions = deprecate(
|
||||
commonWithKnobsOptions,
|
||||
"addon-knobs: framework-specific imports are deprecated, just use `import {withKnobsOptions} from '@storybook/addon-knobs`"
|
||||
);
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import deprecate from 'util-deprecate';
|
||||
import addons, { makeDecorator } from '@storybook/addons';
|
||||
|
||||
import { SET_OPTIONS } from './shared';
|
||||
@ -101,11 +100,6 @@ export const withKnobs = makeDecorator({
|
||||
},
|
||||
});
|
||||
|
||||
export const withKnobsOptions = deprecate(
|
||||
withKnobs,
|
||||
'withKnobsOptions is deprecated. Instead, you can pass options into withKnobs(options) directly, or use the knobs parameter.'
|
||||
);
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-links",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Story Links addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,9 +21,9 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import addons from '@storybook/addons';
|
||||
import { SELECT_STORY } from '@storybook/core-events';
|
||||
import { linkTo, hrefTo } from './preview';
|
||||
import EVENTS from './constants';
|
||||
|
||||
@ -9,7 +10,11 @@ export const mockChannel = () => {
|
||||
return {
|
||||
emit(id, payload) {
|
||||
if (id === EVENTS.REQUEST) {
|
||||
cb(`?selectedKind=${payload.kind}&selectedStory=${payload.story}`);
|
||||
cb(
|
||||
Object.values(payload)
|
||||
.map(item => item.toString().toLowerCase())
|
||||
.join('-')
|
||||
);
|
||||
}
|
||||
},
|
||||
on(id, callback) {
|
||||
@ -31,12 +36,12 @@ describe('preview', () => {
|
||||
const channel = { emit: jest.fn() };
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const handler = linkTo('kind', 'story');
|
||||
const handler = linkTo('kind', 'name');
|
||||
handler();
|
||||
|
||||
expect(channel.emit).toHaveBeenCalledWith(EVENTS.NAVIGATE, {
|
||||
expect(channel.emit).toHaveBeenCalledWith(SELECT_STORY, {
|
||||
kind: 'kind',
|
||||
story: 'story',
|
||||
story: 'name',
|
||||
});
|
||||
});
|
||||
|
||||
@ -45,12 +50,15 @@ describe('preview', () => {
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const handler = linkTo((a, b) => a + b, (a, b) => b + a);
|
||||
handler('foo', 'bar');
|
||||
handler('kind', 'name');
|
||||
|
||||
expect(channel.emit).toHaveBeenCalledWith(EVENTS.NAVIGATE, {
|
||||
kind: 'foobar',
|
||||
story: 'barfoo',
|
||||
});
|
||||
expect(channel.emit.mock.calls).toContainEqual([
|
||||
SELECT_STORY,
|
||||
{
|
||||
kind: 'kindname',
|
||||
story: 'namekind',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@ -59,8 +67,8 @@ describe('preview', () => {
|
||||
const channel = mockChannel();
|
||||
addons.getChannel.mockReturnValue(channel);
|
||||
|
||||
const href = await hrefTo('kind', 'story');
|
||||
expect(href).toBe('?selectedKind=kind&selectedStory=story');
|
||||
const href = await hrefTo('kind', 'name');
|
||||
expect(href).toContain('?id=kind-name');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LinkTo render should render a link 1`] = `
|
||||
<RoutedLink
|
||||
href="http://localhost/?id=?selectedKind=foo&selectedStory=undefined"
|
||||
<Link
|
||||
cancel={true}
|
||||
href="http://localhost/?id=foo-bar"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
`;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { RoutedLink } from '@storybook/components';
|
||||
import { Typography } from '@storybook/components';
|
||||
import { navigate, hrefTo } from '../../preview';
|
||||
|
||||
export default class LinkTo extends PureComponent {
|
||||
@ -38,7 +38,7 @@ export default class LinkTo extends PureComponent {
|
||||
const { kind, story, ...rest } = this.props;
|
||||
const { href } = this.state;
|
||||
|
||||
return <RoutedLink href={href} onClick={this.handleClick} {...rest} />;
|
||||
return <Typography.Link cancel href={href} onClick={this.handleClick} {...rest} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import addons from '@storybook/addons';
|
||||
|
||||
import EVENTS from '../../constants';
|
||||
import { SELECT_STORY } from '@storybook/core-events';
|
||||
import { mockChannel } from '../../preview.test';
|
||||
import LinkTo from './link';
|
||||
|
||||
@ -31,10 +31,13 @@ describe('LinkTo', () => {
|
||||
|
||||
const wrapper = shallow(<LinkTo kind="foo" story="bar" />);
|
||||
wrapper.simulate('click');
|
||||
expect(channel.emit).toHaveBeenCalledWith(EVENTS.NAVIGATE, {
|
||||
kind: 'foo',
|
||||
story: 'bar',
|
||||
});
|
||||
expect(channel.emit.mock.calls).toContainEqual([
|
||||
SELECT_STORY,
|
||||
{
|
||||
kind: 'foo',
|
||||
story: 'bar',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-notes",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,15 +18,14 @@
|
||||
"license": "MIT",
|
||||
"main": "dist/public_api.js",
|
||||
"types": "dist/public_api.d.ts",
|
||||
"jsnext:main": "src/public_api.ts",
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"markdown-to-jsx": "^6.7.4",
|
||||
"prop-types": "^15.6.2",
|
||||
"util-deprecate": "^1.0.2"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import { makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
|
||||
import deprecate from 'util-deprecate';
|
||||
|
||||
// todo resolve any after @storybook/addons and @storybook/channels are migrated to TypeScript
|
||||
@ -9,7 +9,7 @@ export const withNotes = makeDecorator({
|
||||
allowDeprecatedUsage: true,
|
||||
|
||||
wrapper: deprecate(
|
||||
(getStory: (context: any) => any, context: any, { options, parameters }: any) => {
|
||||
(getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
|
||||
const storyOptions = parameters || options;
|
||||
|
||||
const { text, markdown } =
|
||||
|
||||
1
addons/notes/src/typings.d.ts
vendored
1
addons/notes/src/typings.d.ts
vendored
@ -1,5 +1,4 @@
|
||||
// todo the following packages need definition files or a TS migration
|
||||
declare module '@storybook/addons';
|
||||
declare module '@storybook/components';
|
||||
declare module '@storybook/core-events';
|
||||
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-backgrounds",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "A storybook addon to show different backgrounds for your preview",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -23,7 +23,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
|
||||
@ -18,7 +18,7 @@ Refer to its documentation to understand how to use knobs**
|
||||
First of all, you need to install knobs into your project.
|
||||
|
||||
```sh
|
||||
npm install @storybook/addon-ondevice-knobs
|
||||
yarn add @storybook/addon-ondevice-knobs --dev
|
||||
```
|
||||
|
||||
Then create a file called `rn-addons.js` in your storybook config.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-knobs",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Display storybook story knobs on your deviced.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"deep-equal": "^1.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
@ -30,7 +30,7 @@
|
||||
"react-native-switch": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-knobs": "4.2.0-alpha.5",
|
||||
"@storybook/addon-knobs": "4.2.0-alpha.7",
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-ondevice-notes",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Write notes for your Storybook stories.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -18,7 +18,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-native-simple-markdown": "^1.1.0"
|
||||
|
||||
@ -11,7 +11,7 @@ The Options addon can be used to (re-)configure the [Storybook](https://storyboo
|
||||
First, install the addon
|
||||
|
||||
```sh
|
||||
npm install -D @storybook/addon-options
|
||||
yarn add @storybook/addon-options --dev
|
||||
```
|
||||
|
||||
Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
|
||||
@ -97,7 +97,7 @@ addParameters({
|
||||
* id to select an addon panel
|
||||
* @type {String}
|
||||
*/
|
||||
selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
|
||||
selectedPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
|
||||
/**
|
||||
* enable/disable shortcuts
|
||||
* @type {Boolean}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-options",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Options addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -20,7 +20,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"util-deprecate": "^1.0.2"
|
||||
},
|
||||
|
||||
@ -13,7 +13,7 @@ To use StoryShots, you must use your existing Storybook stories as the input for
|
||||
Add the following module into your app.
|
||||
|
||||
```sh
|
||||
npm install --save-dev @storybook/addon-storyshots
|
||||
yarn add @storybook/addon-storyshots --dev
|
||||
```
|
||||
|
||||
## Configure your app for Jest
|
||||
@ -59,7 +59,7 @@ You can do this with a Babel [plugin](https://github.com/smrq/babel-plugin-requi
|
||||
First, install it:
|
||||
|
||||
```sh
|
||||
npm install --save-dev babel-plugin-require-context-hook
|
||||
yarn add babel-plugin-require-context-hook --dev
|
||||
```
|
||||
|
||||
Next, it needs to be registered and loaded before each test. To register it, create a file with the following register function `.jest/register-context.js`:
|
||||
@ -93,7 +93,7 @@ The plugin is only added to the test environment otherwise it could replace webp
|
||||
First, install it:
|
||||
|
||||
```sh
|
||||
npm install --save-dev require-context.macro
|
||||
yarn add require-context.macro --dev
|
||||
```
|
||||
|
||||
Now, inside of your Storybook config file, simply import the macro and run it in place of `require.context`, like so:
|
||||
@ -110,7 +110,7 @@ StoryShots addon for React is dependent on [react-test-renderer](https://github.
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
```sh
|
||||
npm install --save-dev react-test-renderer
|
||||
yarn add react-test-renderer --dev
|
||||
```
|
||||
|
||||
### Configure Jest for Angular
|
||||
@ -118,7 +118,7 @@ StoryShots addon for Angular is dependent on [jest-preset-angular](https://githu
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
```sh
|
||||
npm install --save-dev jest-preset-angular
|
||||
yarn add jest-preset-angular
|
||||
```
|
||||
|
||||
If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
|
||||
@ -139,9 +139,9 @@ module.exports = {
|
||||
StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
```sh
|
||||
npm install --save-dev jest-vue-preprocessor
|
||||
```
|
||||
```sh
|
||||
yarn add jest-vue-preprocessor
|
||||
```
|
||||
|
||||
If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
|
||||
Anyway you can add these lines to your jest config:
|
||||
@ -162,9 +162,9 @@ module.exports = {
|
||||
StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but
|
||||
[doesn't](#deps-issue) install it, so you need to install it separately.
|
||||
|
||||
```sh
|
||||
npm install --save-dev preact-render-to-json
|
||||
```
|
||||
```sh
|
||||
yarn add preact-render-to-json --dev
|
||||
```
|
||||
|
||||
### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
|
||||
Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them.
|
||||
@ -325,7 +325,7 @@ initStoryshots({
|
||||
}) => {
|
||||
const converter = new Stories2SnapsConverter();
|
||||
const snapshotFilename = converter.getSnapshotFileName(context);
|
||||
const storyElement = story.render(context);
|
||||
const storyElement = story.render();
|
||||
|
||||
// mount the story
|
||||
const tree = mount(storyElement);
|
||||
@ -612,7 +612,7 @@ import toJson from 'enzyme-to-json';
|
||||
initStoryshots({
|
||||
test: ({ story, context }) => {
|
||||
const snapshotFileName = getSnapshotFileName(context);
|
||||
const storyElement = story.render(context);
|
||||
const storyElement = story.render();
|
||||
const shallowTree = shallow(storyElement);
|
||||
|
||||
if (snapshotFileName) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -24,7 +24,7 @@
|
||||
"storybook": "start-storybook -p 6006"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"glob": "^7.1.3",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -17,6 +17,8 @@ function callTestMethodGlobals(testMethod) {
|
||||
});
|
||||
}
|
||||
|
||||
const isDisabled = parameter => parameter === false || (parameter && parameter.disabled === true);
|
||||
|
||||
function testStorySnapshots(options = {}) {
|
||||
if (typeof describe !== 'function') {
|
||||
throw new Error('testStorySnapshots is intended only to be used inside jest');
|
||||
@ -46,11 +48,11 @@ function testStorySnapshots(options = {}) {
|
||||
.filter(({ name }) => (storyNameRegex ? name.match(storyNameRegex) : true))
|
||||
.filter(({ kind }) => (storyKindRegex ? kind.match(storyKindRegex) : true))
|
||||
.reduce((acc, item) => {
|
||||
const { kind, story: render, parameters = {} } = item;
|
||||
const { kind, story: render, parameters } = item;
|
||||
const existing = acc.find(i => i.kind === kind);
|
||||
const { fileName } = item.parameters;
|
||||
|
||||
if (parameters.storyshots !== false) {
|
||||
if (!isDisabled(parameters.storyshots)) {
|
||||
if (existing) {
|
||||
existing.children.push({ ...item, render, fileName });
|
||||
} else {
|
||||
|
||||
@ -11,7 +11,7 @@ import { document } from 'global';
|
||||
* If we don't render to HTML, we will get a snapshot of the raw story
|
||||
* i.e. ({ Component, data }).
|
||||
*/
|
||||
function getRenderedTree(story, context) {
|
||||
function getRenderedTree(story) {
|
||||
const { Component, data } = story.render();
|
||||
|
||||
// We need to create a target to mount onto.
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import Vue from 'vue';
|
||||
|
||||
function getRenderedTree(story, context) {
|
||||
const storyElement = story.render();
|
||||
function getRenderedTree(story) {
|
||||
const component = story.render();
|
||||
|
||||
const Constructor = Vue.extend(storyElement);
|
||||
const vm = new Constructor().$mount();
|
||||
const vm = new Vue({
|
||||
render(h) {
|
||||
return h(component);
|
||||
},
|
||||
});
|
||||
|
||||
return vm.$el;
|
||||
return vm.$mount().$el;
|
||||
}
|
||||
|
||||
export default getRenderedTree;
|
||||
|
||||
@ -3,9 +3,9 @@ import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from
|
||||
|
||||
class AnotherStories2SnapsConverter extends Stories2SnapsConverter {
|
||||
getSnapshotFileName(context) {
|
||||
const { fileName, kind, story } = context;
|
||||
const { dir, name } = path.parse(fileName);
|
||||
const uniqueName = `${name}@${kind.replace(/ /g, '-_-')}@${story.replace(/ /g, '-_-')}`;
|
||||
const { fileName, kind, name } = context;
|
||||
const { dir, name: filename } = path.parse(fileName);
|
||||
const uniqueName = `${filename}@${kind.replace(/ /g, '-_-')}@${name.replace(/ /g, '-_-')}`;
|
||||
const { snapshotsDirName, snapshotExtension } = this.options;
|
||||
|
||||
return path.format({
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
|
||||
Add the following module into your app.
|
||||
|
||||
```sh
|
||||
npm install --save-dev @storybook/addon-storyshots-puppeteer
|
||||
```sh
|
||||
yarn add @storybook/addon-storyshots-puppeteer --dev
|
||||
```
|
||||
|
||||
## Configure Storyshots for image snapshots
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storyshots-puppeteer",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Image snappshots addition to StoryShots base on puppeteer",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,14 +21,14 @@
|
||||
"prepare": "node ../../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/node-logger": "4.2.0-alpha.5",
|
||||
"@storybook/node-logger": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"jest-image-snapshot": "^2.6.0",
|
||||
"puppeteer": "^1.9.0",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@storybook/addon-storyshots": "4.2.0-alpha.5"
|
||||
"@storybook/addon-storyshots": "4.2.0-alpha.7"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
@ -11,7 +11,7 @@ This addon is used to show stories source in the addon panel.
|
||||
First, install the addon
|
||||
|
||||
```sh
|
||||
npm install -D @storybook/addon-storysource
|
||||
yarn add @storybook/addon-storysource --dev
|
||||
```
|
||||
|
||||
Add this line to your `addons.js` file
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-storysource",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Stories addon for storybook",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -21,11 +21,11 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"estraverse": "^4.2.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"loader-utils": "^1.2.1",
|
||||
"prettier": "^1.14.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-syntax-highlighter": "^8.0.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { RoutedLink, SyntaxHighlighter } from '@storybook/components';
|
||||
import { Typography, SyntaxHighlighter } from '@storybook/components';
|
||||
|
||||
import { createElement } from 'react-syntax-highlighter';
|
||||
import { EVENT_ID } from './events';
|
||||
@ -107,14 +107,14 @@ export default class StoryPanel extends Component {
|
||||
const url = `/?selectedKind=${selectedKind}&selectedStory=${selectedStory}`;
|
||||
|
||||
return (
|
||||
<RoutedLink
|
||||
<Typography.Link
|
||||
href={url}
|
||||
key={storyKey}
|
||||
onClick={() => this.clickOnStory(selectedKind, selectedStory)}
|
||||
style={styles.story}
|
||||
>
|
||||
{story}
|
||||
</RoutedLink>
|
||||
</Typography.Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export const ADDON_ID = 'storybook/stories';
|
||||
export const ADDON_ID = 'storybook/storysource';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const EVENT_ID = `${ADDON_ID}/story-event`;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/addon-viewport",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook addon to change the viewport size to mobile",
|
||||
"keywords": [
|
||||
"addon",
|
||||
@ -22,10 +22,10 @@
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.2",
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/components": "4.2.0-alpha.5",
|
||||
"@storybook/client-logger": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/components": "4.2.0-alpha.7",
|
||||
"@storybook/client-logger": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"memoizerific": "^1.11.3",
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export const ADDON_ID = 'storybook/viewport';
|
||||
export const PANEL_ID = `${ADDON_ID}/panel`;
|
||||
export const PARAM_KEY = 'viewports';
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import addons, { types } from '@storybook/addons';
|
||||
|
||||
import { ADDON_ID, PANEL_ID } from './constants';
|
||||
import { ADDON_ID } from './constants';
|
||||
|
||||
import Tool from './Tool';
|
||||
|
||||
addons.register(ADDON_ID, api => {
|
||||
const channel = addons.getChannel();
|
||||
addons.add(PANEL_ID, {
|
||||
addons.add(ADDON_ID, {
|
||||
type: types.TOOL,
|
||||
title: 'viewport / media-queries',
|
||||
render: () => <Tool channel={channel} api={api} />,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/angular",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,8 +25,8 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/node-logger": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"@storybook/node-logger": "4.2.0-alpha.7",
|
||||
"angular2-template-loader": "^0.6.2",
|
||||
"core-js": "^2.5.7",
|
||||
"fork-ts-checker-webpack-plugin": "^0.5.2",
|
||||
@ -35,7 +35,7 @@
|
||||
"react-dom": "^16.7.0-alpha.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"sass-loader": "^7.1.0",
|
||||
"ts-loader": "^5.2.2",
|
||||
"ts-loader": "^5.3.2",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0",
|
||||
"webpack": "^4.23.1"
|
||||
},
|
||||
|
||||
1
app/angular/src/server/options.js
vendored
1
app/angular/src/server/options.js
vendored
@ -2,7 +2,6 @@ import packageJson from '../../package.json';
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
defaultConfigName: 'angular-cli',
|
||||
frameworkPresets: [
|
||||
require.resolve('./framework-preset-angular.js'),
|
||||
require.resolve('./framework-preset-angular-cli.js'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/ember",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
|
||||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
|
||||
"bugs": {
|
||||
@ -23,7 +23,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ember/test-helpers": "^1.0.0",
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -2,6 +2,5 @@ import packageJson from '../../package.json';
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
defaultConfigName: 'ember-cli',
|
||||
frameworkPresets: [require.resolve('./framework-preset-babel-ember.js')],
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/html",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/marko",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/mithril",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Mithril: Develop Mithril Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,7 +26,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.2.0",
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/polymer",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"@webcomponents/webcomponentsjs": "^1.2.0",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/preact",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Preact: Develop Preact Component in isolation.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -26,12 +26,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/plugin-transform-react-jsx": "^7.2.0",
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
"react": "^16.6.0",
|
||||
"react-dom": "^16.6.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"regenerator-runtime": "^0.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
First, install the `@storybook/react-native` module
|
||||
|
||||
```sh
|
||||
npm install @storybook/react-native
|
||||
yarn add @storybook/react-native --dev
|
||||
```
|
||||
|
||||
Create a new directory called `storybook` in your project root and create an entry file (index.js) as given below.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react-native",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "A better way to develop React Native Components for your app",
|
||||
"keywords": [
|
||||
"react",
|
||||
@ -25,12 +25,12 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/channel-websocket": "4.2.0-alpha.5",
|
||||
"@storybook/channels": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core-events": "4.2.0-alpha.5",
|
||||
"@storybook/ui": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/channel-websocket": "4.2.0-alpha.7",
|
||||
"@storybook/channels": "4.2.0-alpha.7",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"@storybook/core-events": "4.2.0-alpha.7",
|
||||
"@storybook/ui": "4.2.0-alpha.7",
|
||||
"babel-loader": "^8.0.4",
|
||||
"babel-plugin-macros": "^2.4.3",
|
||||
"babel-plugin-syntax-async-functions": "^6.13.0",
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Keyboard,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
SafeAreaView,
|
||||
Animated,
|
||||
TouchableOpacity,
|
||||
} from 'react-native';
|
||||
import { Keyboard, KeyboardAvoidingView, Platform, Animated, TouchableOpacity } from 'react-native';
|
||||
import Events from '@storybook/core-events';
|
||||
|
||||
import StoryListView from '../StoryListView';
|
||||
@ -150,49 +143,48 @@ export default class OnDeviceUI extends PureComponent {
|
||||
];
|
||||
|
||||
return (
|
||||
<SafeAreaView style={style.flex}>
|
||||
<KeyboardAvoidingView
|
||||
enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
|
||||
behavior={IS_IOS ? 'padding' : null}
|
||||
keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
|
||||
style={style.flex}
|
||||
<KeyboardAvoidingView
|
||||
enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
|
||||
behavior={IS_IOS ? 'padding' : null}
|
||||
keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
|
||||
style={style.flex}
|
||||
>
|
||||
<AbsolutePositionedKeyboardAwareView
|
||||
onLayout={this.onLayout}
|
||||
previewHeight={previewHeight}
|
||||
previewWidth={previewWidth}
|
||||
>
|
||||
<AbsolutePositionedKeyboardAwareView
|
||||
onLayout={this.onLayout}
|
||||
previewHeight={previewHeight}
|
||||
previewWidth={previewWidth}
|
||||
>
|
||||
<Animated.View style={previewWrapperStyles}>
|
||||
<Animated.View style={previewStyles}>
|
||||
<TouchableOpacity
|
||||
accessible={false}
|
||||
style={style.flex}
|
||||
disabled={tabOpen === PREVIEW}
|
||||
onPress={this.handleOpenPreview}
|
||||
>
|
||||
<StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
<Animated.View style={previewWrapperStyles}>
|
||||
<Animated.View style={previewStyles}>
|
||||
<TouchableOpacity
|
||||
accessible={false}
|
||||
style={style.flex}
|
||||
disabled={tabOpen === PREVIEW}
|
||||
onPress={this.handleOpenPreview}
|
||||
>
|
||||
<StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
<Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
|
||||
<StoryListView
|
||||
stories={stories}
|
||||
events={events}
|
||||
selectedKind={selection.kind}
|
||||
selectedStory={selection.story}
|
||||
/>
|
||||
</Panel>
|
||||
<Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
|
||||
<Addons />
|
||||
</Panel>
|
||||
</AbsolutePositionedKeyboardAwareView>
|
||||
<Navigation
|
||||
tabOpen={tabOpen}
|
||||
onChangeTab={this.handleToggleTab}
|
||||
initialUiVisible={!isUIHidden}
|
||||
/>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
</Animated.View>
|
||||
<Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
|
||||
<StoryListView
|
||||
stories={stories}
|
||||
events={events}
|
||||
selectedKind={selection.kind}
|
||||
selectedStory={selection.story}
|
||||
/>
|
||||
</Panel>
|
||||
<Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
|
||||
<Addons />
|
||||
</Panel>
|
||||
</AbsolutePositionedKeyboardAwareView>
|
||||
|
||||
<Navigation
|
||||
tabOpen={tabOpen}
|
||||
onChangeTab={this.handleToggleTab}
|
||||
initialUiVisible={!isUIHidden}
|
||||
/>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { View, SafeAreaView, StyleSheet } from 'react-native';
|
||||
import GestureRecognizer from 'react-native-swipe-gestures';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
@ -11,6 +11,15 @@ const SWIPE_CONFIG = {
|
||||
directionalOffsetThreshold: 80,
|
||||
};
|
||||
|
||||
const style = StyleSheet.create({
|
||||
wrapper: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default class Navigation extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -44,17 +53,21 @@ export default class Navigation extends PureComponent {
|
||||
const { isUIVisible } = this.state;
|
||||
|
||||
return (
|
||||
<View>
|
||||
{isUIVisible && (
|
||||
<GestureRecognizer
|
||||
onSwipeLeft={this.handleSwipeLeft}
|
||||
onSwipeRight={this.handleSwipeRight}
|
||||
config={SWIPE_CONFIG}
|
||||
>
|
||||
<Bar index={tabOpen} onPress={onChangeTab} />
|
||||
</GestureRecognizer>
|
||||
)}
|
||||
<VisibilityButton onPress={this.handleToggleUI} />
|
||||
<View style={style.wrapper}>
|
||||
<SafeAreaView>
|
||||
{isUIVisible && (
|
||||
<GestureRecognizer
|
||||
onSwipeLeft={this.handleSwipeLeft}
|
||||
onSwipeRight={this.handleSwipeRight}
|
||||
config={SWIPE_CONFIG}
|
||||
>
|
||||
<Bar index={tabOpen} onPress={onChangeTab} />
|
||||
</GestureRecognizer>
|
||||
)}
|
||||
<View>
|
||||
<VisibilityButton onPress={this.handleToggleUI} />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ export default class VisibilityButton extends PureComponent {
|
||||
style={style.hideButton}
|
||||
hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
|
||||
>
|
||||
<Text style={[style.hideButtonText]}>□</Text>
|
||||
<Text style={style.hideButtonText}>□</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ export default {
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
bottom: 12,
|
||||
zIndex: 100,
|
||||
},
|
||||
previewMinimized: {
|
||||
borderWidth: 1,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { SectionList, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
||||
import { SectionList, Text, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
|
||||
import Events from '@storybook/core-events';
|
||||
import style from './style';
|
||||
|
||||
@ -116,7 +116,7 @@ export default class StoryListView extends Component {
|
||||
const { data } = this.state;
|
||||
|
||||
return (
|
||||
<View style={style.flex}>
|
||||
<SafeAreaView style={style.flex}>
|
||||
<TextInput
|
||||
clearButtonMode="while-editing"
|
||||
disableFullscreenUI
|
||||
@ -127,7 +127,7 @@ export default class StoryListView extends Component {
|
||||
/>
|
||||
<SectionList
|
||||
testID="Storybook.ListView"
|
||||
style={style.flex}
|
||||
style={style.sectionList}
|
||||
renderItem={({ item }) => (
|
||||
<ListItem
|
||||
title={item.name}
|
||||
@ -143,7 +143,7 @@ export default class StoryListView extends Component {
|
||||
sections={data}
|
||||
stickySectionHeadersEnabled={false}
|
||||
/>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,6 +10,10 @@ export default {
|
||||
flex: {
|
||||
flex: 1,
|
||||
},
|
||||
sectionList: {
|
||||
flex: 1,
|
||||
marginBottom: 40,
|
||||
},
|
||||
header: {
|
||||
paddingVertical: 5,
|
||||
},
|
||||
|
||||
4
app/react-native/src/preview/index.js
vendored
4
app/react-native/src/preview/index.js
vendored
@ -114,7 +114,7 @@ export default class Preview {
|
||||
stories={preview._stories}
|
||||
events={channel}
|
||||
url={webUrl}
|
||||
isUIOpen={params.isUIOpen}
|
||||
isUIHidden={params.isUIHidden}
|
||||
tabOpen={params.tabOpen}
|
||||
getInitialStory={
|
||||
setInitialStory
|
||||
@ -198,14 +198,12 @@ export default class Preview {
|
||||
|
||||
_checkStory(selection) {
|
||||
if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) {
|
||||
console.warn('invalid storybook selection'); // eslint-disable-line no-console
|
||||
return null;
|
||||
}
|
||||
|
||||
const story = this._getStory(selection);
|
||||
|
||||
if (story.storyFn === null) {
|
||||
console.warn('invalid storybook selection'); // eslint-disable-line no-console
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/react",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -29,10 +29,10 @@
|
||||
"@babel/preset-flow": "^7.0.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@emotion/styled": "^10.0.2",
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/node-logger": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"@storybook/node-logger": "4.2.0-alpha.7",
|
||||
"@svgr/webpack": "^4.0.3",
|
||||
"babel-plugin-named-asset-import": "^0.2.3",
|
||||
"babel-plugin-named-asset-import": "^0.3.0",
|
||||
"babel-plugin-react-docgen": "^2.0.0",
|
||||
"babel-preset-react-app": "^6.1.0",
|
||||
"common-tags": "^1.8.0",
|
||||
|
||||
@ -82,12 +82,12 @@ export function getCraWebpackConfig(mode) {
|
||||
const pathToReactScripts = getReactScriptsPath();
|
||||
|
||||
const craWebpackConfig =
|
||||
mode === 'production' ? 'config/webpack.config.prod' : 'config/webpack.config.dev';
|
||||
mode === 'production' ? 'config/webpack.config.prod.js' : 'config/webpack.config.dev.js';
|
||||
|
||||
let pathToWebpackConfig = require.resolve(path.join(pathToReactScripts, craWebpackConfig));
|
||||
let pathToWebpackConfig = path.join(pathToReactScripts, craWebpackConfig);
|
||||
|
||||
if (!fs.existsSync(pathToWebpackConfig)) {
|
||||
pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config');
|
||||
pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config.js');
|
||||
}
|
||||
|
||||
// eslint-disable-next-line import/no-dynamic-require,global-require
|
||||
|
||||
@ -2,7 +2,6 @@ import packageJson from '../../package.json';
|
||||
|
||||
export default {
|
||||
packageJson,
|
||||
defaultConfigName: 'create-react-app',
|
||||
frameworkPresets: [
|
||||
require.resolve('./framework-preset-react.js'),
|
||||
require.resolve('./framework-preset-cra.js'),
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/riot",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -24,7 +24,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/svelte",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -29,3 +29,20 @@ You can also build a [static version](https://storybook.js.org/basics/exporting-
|
||||
## Vue Notes
|
||||
|
||||
- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/config.js`.
|
||||
|
||||
## Known Limitations
|
||||
|
||||
In Storybook story and decorator components you can not access the Vue instance
|
||||
in factory functions for default prop values:
|
||||
|
||||
```js
|
||||
{
|
||||
props: {
|
||||
foo: {
|
||||
default() {
|
||||
return this.bar; // does not work!
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@storybook/vue",
|
||||
"version": "4.2.0-alpha.5",
|
||||
"version": "4.2.0-alpha.7",
|
||||
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
@ -25,7 +25,7 @@
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/core": "4.2.0-alpha.5",
|
||||
"@storybook/core": "4.2.0-alpha.7",
|
||||
"common-tags": "^1.8.0",
|
||||
"core-js": "^2.5.7",
|
||||
"global": "^4.3.2",
|
||||
|
||||
@ -1,30 +1,74 @@
|
||||
import { start } from '@storybook/core/client';
|
||||
import Vue from 'vue';
|
||||
|
||||
import './globals';
|
||||
import render from './render';
|
||||
import render, { VALUES } from './render';
|
||||
import { extractProps } from './util';
|
||||
|
||||
const createWrapperComponent = Target => ({
|
||||
functional: true,
|
||||
render(h, c) {
|
||||
return h(Target, c.data, c.children);
|
||||
},
|
||||
});
|
||||
const decorateStory = (getStory, decorators) =>
|
||||
decorators.reduce(
|
||||
(decorated, decorator) => context => {
|
||||
const story = () => decorated(context);
|
||||
let decoratedStory = decorator(story, context);
|
||||
export const WRAPS = 'STORYBOOK_WRAPS';
|
||||
|
||||
if (typeof decoratedStory === 'string') {
|
||||
decoratedStory = { template: decoratedStory };
|
||||
function prepare(rawStory, innerStory) {
|
||||
let story = rawStory;
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
if (!story._isVue) {
|
||||
if (typeof story === 'string') {
|
||||
story = { template: story };
|
||||
}
|
||||
if (innerStory) {
|
||||
story.components = { ...(story.components || {}), story: innerStory };
|
||||
}
|
||||
story = Vue.extend(story);
|
||||
} else if (story.options[WRAPS]) {
|
||||
return story;
|
||||
}
|
||||
|
||||
return Vue.extend({
|
||||
[WRAPS]: story,
|
||||
[VALUES]: { ...(innerStory ? innerStory.options[VALUES] : {}), ...extractProps(story) },
|
||||
functional: true,
|
||||
render(h, { data, parent, children }) {
|
||||
return h(
|
||||
story,
|
||||
{
|
||||
...data,
|
||||
props: { ...(data.props || {}), ...parent.$root[VALUES] },
|
||||
},
|
||||
children
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function decorateStory(getStory, decorators) {
|
||||
return decorators.reduce(
|
||||
(decorated, decorator) => (context = {}) => {
|
||||
let story;
|
||||
|
||||
const decoratedStory = decorator((p = {}) => {
|
||||
story = decorated(
|
||||
Object.assign(
|
||||
context,
|
||||
p,
|
||||
{ parameters: Object.assign(context.parameters || {}, p.parameters) },
|
||||
{ options: Object.assign(context.options || {}, p.options) }
|
||||
)
|
||||
);
|
||||
return story;
|
||||
}, context);
|
||||
|
||||
if (!story) {
|
||||
story = decorated(context);
|
||||
}
|
||||
|
||||
decoratedStory.components = decoratedStory.components || {};
|
||||
decoratedStory.components.story = createWrapperComponent(story());
|
||||
return decoratedStory;
|
||||
if (decoratedStory === story) {
|
||||
return story;
|
||||
}
|
||||
|
||||
return prepare(decoratedStory, story);
|
||||
},
|
||||
getStory
|
||||
context => prepare(getStory(context))
|
||||
);
|
||||
}
|
||||
|
||||
const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
|
||||
|
||||
|
||||
@ -1,27 +1,21 @@
|
||||
import { stripIndents } from 'common-tags';
|
||||
import Vue from 'vue';
|
||||
|
||||
let root = null;
|
||||
export const COMPONENT = 'STORYBOOK_COMPONENT';
|
||||
export const VALUES = 'STORYBOOK_VALUES';
|
||||
|
||||
function getComponentProxy(component) {
|
||||
return Object.entries(component.props || {})
|
||||
.map(([name, def]) => ({ [name]: def.default }))
|
||||
.reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
|
||||
}
|
||||
|
||||
function renderRoot(component, proxy) {
|
||||
root = new Vue({
|
||||
el: '#root',
|
||||
beforeCreate() {
|
||||
this.proxy = proxy;
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const props = this.proxy;
|
||||
return h('div', { attrs: { id: 'root' } }, [h(component, { props })]);
|
||||
},
|
||||
});
|
||||
}
|
||||
const root = new Vue({
|
||||
data() {
|
||||
return {
|
||||
[COMPONENT]: undefined,
|
||||
[VALUES]: {},
|
||||
};
|
||||
},
|
||||
render(h) {
|
||||
const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
|
||||
return h('div', { attrs: { id: 'root' } }, children);
|
||||
},
|
||||
});
|
||||
|
||||
export default function render({
|
||||
story,
|
||||
@ -49,15 +43,14 @@ export default function render({
|
||||
|
||||
showMain();
|
||||
|
||||
const proxy = getComponentProxy(component);
|
||||
|
||||
// at component creation || refresh by HMR
|
||||
if (!root || !forceRender) {
|
||||
if (root) root.$destroy();
|
||||
if (!root[COMPONENT] || !forceRender) {
|
||||
root[COMPONENT] = component;
|
||||
}
|
||||
|
||||
renderRoot(component, proxy);
|
||||
} else {
|
||||
root.proxy = proxy;
|
||||
root.$forceUpdate();
|
||||
root[VALUES] = component.options[VALUES];
|
||||
|
||||
if (!root.$el) {
|
||||
root.$mount('#root');
|
||||
}
|
||||
}
|
||||
|
||||
20
app/vue/src/client/preview/util.js
Normal file
20
app/vue/src/client/preview/util.js
Normal file
@ -0,0 +1,20 @@
|
||||
function getType(fn) {
|
||||
const match = fn && fn.toString().match(/^\s*function (\w+)/);
|
||||
return match ? match[1] : '';
|
||||
}
|
||||
|
||||
// https://github.com/vuejs/vue/blob/dev/src/core/util/props.js#L92
|
||||
function resolveDefault({ type, default: def }) {
|
||||
if (typeof def === 'function' && getType(type) !== 'Function') {
|
||||
// known limitation: we dont have the component instance to pass
|
||||
return def.call();
|
||||
}
|
||||
|
||||
return def;
|
||||
}
|
||||
|
||||
export function extractProps(component) {
|
||||
return Object.entries(component.options.props || {})
|
||||
.map(([name, prop]) => ({ [name]: resolveDefault(prop) }))
|
||||
.reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
|
||||
}
|
||||
@ -19,12 +19,12 @@
|
||||
"prepare": "npm run snyk-protect"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addon-actions": "4.2.0-alpha.5",
|
||||
"@storybook/addon-links": "4.2.0-alpha.5",
|
||||
"@storybook/addons": "4.2.0-alpha.5",
|
||||
"@storybook/react": "4.2.0-alpha.5",
|
||||
"@storybook/addon-actions": "4.2.0-alpha.7",
|
||||
"@storybook/addon-links": "4.2.0-alpha.7",
|
||||
"@storybook/addons": "4.2.0-alpha.7",
|
||||
"@storybook/react": "4.2.0-alpha.7",
|
||||
"babel-loader": "^6.4.1",
|
||||
"bootstrap": "^4.1.3",
|
||||
"bootstrap": "^4.2.1",
|
||||
"common-tags": "^1.8.0",
|
||||
"gatsby": "^1.9.279",
|
||||
"gatsby-link": "^1.6.45",
|
||||
@ -47,7 +47,7 @@
|
||||
"react-router": "^4.3.1",
|
||||
"react-stack-grid": "^0.7.1",
|
||||
"sitemap": "^2.1.0",
|
||||
"snyk": "^1.117.1"
|
||||
"snyk": "^1.118.2"
|
||||
},
|
||||
"snyk": true
|
||||
}
|
||||
|
||||
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