Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for vue in addon-notes #1278

Merged
merged 4 commits into from
Jun 14, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions addons/notes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,11 @@ import '@storybook/addon-notes/register';
Then write your stories like this:

```js
import React from 'react';

import { storiesOf } from '@storybook/react';
import { WithNotes } from '@storybook/addon-notes';
import { withNotes } from '@storybook/addon-notes';

import Component from './Component';

storiesOf('Component', module)
.add('with some emoji', () => (
<WithNotes notes={'A very simple component'}>
<Component></Component>
</WithNotes>
));
.add('with some emoji', withNotes({ notes: 'A very simple component'})(() => <Component></Component>));
```
22 changes: 10 additions & 12 deletions addons/notes/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
"description": "Write notes for your Storybook stories.",
"keywords": [
"addon",
"react",
"storybook"
"storybook",
"notes"
],
"license": "MIT",
"main": "dist/index.js",
Expand All @@ -21,18 +21,16 @@
"dependencies": {
"@storybook/addons": "^3.1.2",
"babel-runtime": "^6.23.0",
"prop-types": "^15.5.10"
"util-deprecate": "^1.0.2"
},
"devDependencies": {
"git-url-parse": "^6.2.2",
"react": "^15.5.4",
"react-addons-test-utils": "^15.5.1",
"react-dom": "^15.5.4"
"prop-types": "^15.5.10",
"react": "^15.5.4"
},
"peerDependencies": {
"react": "*"
},
"optionalDependencies": {
"@types/react": "^15.0.24"
"peerDependencies": {
"react": "*"
},
"optionalDependencies": {
"@types/react": "^15.0.24"
}
}
36 changes: 17 additions & 19 deletions addons/notes/src/index.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
import React from 'react';
import PropTypes from 'prop-types';
import deprecate from 'util-deprecate';
import addons from '@storybook/addons';
import { WithNotes as ReactWithNotes } from './react';

export class WithNotes extends React.Component {
render() {
const { children, notes } = this.props;
const channel = addons.getChannel();
export const withNotes = ({ notes }) => {
const channel = addons.getChannel();

// send the notes to the channel.
return getStory => () => {
// send the notes to the channel before the story is rendered
channel.emit('storybook/notes/add_notes', notes);
// return children elements.
return children;
}
}

WithNotes.propTypes = {
children: PropTypes.node,
notes: PropTypes.string,
};
WithNotes.defaultProps = {
children: null,
notes: '',
return getStory();
};
};

Object.defineProperty(exports, 'WithNotes', {
configurable: true,
enumerable: true,
get: deprecate(
() => ReactWithNotes,
'@storybook/addon-notes WithNotes Component is deprecated, use withNotes() instead. See https://github.com/storybooks/storybook/tree/master/addons/notes'
),
});
24 changes: 24 additions & 0 deletions addons/notes/src/react.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import addons from '@storybook/addons';

export class WithNotes extends React.Component {
render() {
const { children, notes } = this.props;
const channel = addons.getChannel();

// send the notes to the channel.
channel.emit('storybook/notes/add_notes', notes);
// return children elements.
return children;
}
}

WithNotes.propTypes = {
children: PropTypes.node,
notes: PropTypes.string,
};
WithNotes.defaultProps = {
children: null,
notes: '',
};
13 changes: 1 addition & 12 deletions app/vue/src/client/preview/client_api.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,25 +59,14 @@ export default class ClientApi {
throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
}

let component = getStory;
if (typeof getStory === 'function') {
component = getStory();
}

if (typeof component === 'string') {
component = { template: component };
} else if (typeof component === 'function') {
component = { render: component };
}

// Wrap the getStory function with each decorator. The first
// decorator will wrap the story function. The second will
// wrap the first decorator and so on.
const decorators = [...localDecorators, ...this._globalDecorators];

const fn = decorators.reduce(
(decorated, decorator) => context => decorator(() => decorated(context), context),
component
getStory
);

// Add the fully decorated getStory function.
Expand Down
20 changes: 14 additions & 6 deletions app/vue/src/client/preview/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,20 @@ export function renderMain(data, storyStore) {
// ReactDOM.unmountComponentAtNode(rootEl);
}

// const context = {
// kind: selectedKind,
// story: selectedStory,
// };
const context = {
kind: selectedKind,
story: selectedStory,
};

// const element = story(context);
const element = story(context);


let component = element;
if (typeof component === 'string') {
component = { template: component };
} else if (typeof component === 'function') {
component = { render: component };
}

// if (!element) {
// const error = {
Expand All @@ -112,7 +120,7 @@ export function renderMain(data, storyStore) {
// }

// ReactDOM.render(element, rootEl);
app.renderStory(story);
app.renderStory(component);
return null;
}

Expand Down
1 change: 1 addition & 0 deletions examples/cra-storybook/.storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-events/register';
import '@storybook/addon-notes/register';
1 change: 1 addition & 0 deletions examples/cra-storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@storybook/addon-actions": "^3.0.0",
"@storybook/addon-links": "^3.0.0",
"@storybook/addon-events": "^3.0.0",
"@storybook/addon-notes": "^3.0.0",
"@storybook/addons": "^3.0.0",
"@storybook/react": "^3.0.0",
"react-scripts": "1.0.1"
Expand Down
16 changes: 16 additions & 0 deletions examples/cra-storybook/src/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import EventEmiter from 'eventemitter3';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withNotes, WithNotes } from '@storybook/addon-notes';
import { linkTo } from '@storybook/addon-links';
import WithEvents from '@storybook/addon-events';

Expand Down Expand Up @@ -88,3 +89,18 @@ storiesOf('WithEvents', module)
</WithEvents>
)
.add('Logger', () => <Logger emiter={emiter} />);

storiesOf('withNotes', module)
.add('with some text', withNotes({ notes: 'Hello guys' })(() => <div>Hello copain</div>))
.add('with some emoji', withNotes({ notes: 'My notes on emojies' })(() => <p>🤔😳😯😮</p>))
.add(
'with a button and some emoji',
withNotes({ notes: 'My notes on a button with emojies' })(() =>
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
)
)
.add('with old API', () =>
<WithNotes notes="Hello">
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
</WithNotes>
);
2 changes: 2 additions & 0 deletions examples/vue/.storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-notes/register';

1 change: 1 addition & 0 deletions examples/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@storybook/addon-actions": "^3.0.0",
"@storybook/addon-links": "^3.0.0",
"@storybook/addons": "^3.0.0",
"@storybook/addon-notes": "^3.0.0",
"vue-hot-reload-api": "^2.1.0",
"vue-style-loader": "^3.0.1",
"vue-loader": "^12.2.1"
Expand Down
54 changes: 38 additions & 16 deletions examples/vue/src/stories/index.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import React from 'react';
import Vue from 'vue';
import Vuex from 'vuex';
import { storiesOf } from '@storybook/vue';

import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { withNotes } from '@storybook/addon-notes';

import MyButton from './Button.vue';

// This does not work. We need to Vue.use or Vue.component is called before mount the root Vue
// Vue.use(Vuex);
// Vue.component('my-button', MyButton);

storiesOf('Button', module)
// Works if Vue.component is called in the config.js in .storybook
.add('rounded markup only', '<my-button :rounded="true">rounded markup only</my-button>')
.add('story as a function template', () => '<my-button :rounded="true">story as a function template</my-button>')
.add('story as a function renderer', () => (h) => h('div', ['story as a function renderer']))
.add('story as a function component with template', () => ({
Expand All @@ -22,7 +21,7 @@ storiesOf('Button', module)
.add('story as a function component with renderer', () => ({
render: (h) => h('my-button', { props : { rounded: true }}, ['story as a function component with renderer']),
}))
.add('with vuex', {
.add('with vuex',() => ({
components: { MyButton },
template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
store: new Vuex.Store({
Expand All @@ -39,8 +38,8 @@ storiesOf('Button', module)
this.$store.commit('increment');
},
},
})
.add('with text', {
}))
.add('with text', () => ({
// need to register local component until we can make sur Vue.componennt si called before mounting the root Vue
components: { MyButton },
template: '<my-button :handle-click="log">with text: {{ count }}</my-button>',
Expand All @@ -54,24 +53,47 @@ storiesOf('Button', module)
this.action(this.count);
}
}
})
}));

storiesOf('Other', module)
.add('button with emoji', '<button>😑😐😶🙄</button>')
.add('p with emoji', '<p>🤔😳😯😮</p>')
.add('colorful', {
.add('button with emoji', () => '<button>😑😐😶🙄</button>')
.add('p with emoji', () => '<p>🤔😳😯😮</p>')
.add('colorful', () => ({
render(h) {
return h(MyButton, { props: { color: 'pink' } }, ['colorful']);
}
})
.add('rounded', {
}))
.add('rounded', () => ({
components: { MyButton },
template: '<my-button :rounded="true">rounded</my-button>'
})
.add('not rounded', {
}))
.add('not rounded', () => ({
components: { MyButton },
template: '<my-button :rounded="false" :handle-click="action">not rounded</my-button>',
methods: {
action: linkTo('Button')
}
})
}))


storiesOf('Addon Notes', module)
.add('with some emoji', withNotes({notes: 'My notes on emojies'})(() => '<p>🤔😳😯😮</p>'))
.add('with some button', withNotes({ notes: 'My notes on some button' })(() => ({
components: { MyButton },
template: '<my-button :rounded="true">rounded</my-button>'
})))
.add('with some color', withNotes({ notes: 'Some notes on some colored component' })(() => ({
render(h) {
return h(MyButton, { props: { color: 'pink' } }, ['colorful']);
}
})))
.add('with some text', withNotes({ notes: 'My notes on some text' })(() => ({
template: '<div>Text</div>'
})
))
.add('with some long text', withNotes({ notes: 'My notes on some long text' })(
() => '<div>A looooooooonnnnnnnggggggggggggg text</div>'
))
.add('with some bold text', withNotes({ notes: 'My notes on some bold text' })(() => ({
render: h => h('div', [h('strong', ['A very long text to display'])])
})));