Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

Commit

Permalink
Merge pull request #12 from marc-rutkowski/develop
Browse files Browse the repository at this point in the history
Support storybook 3.2.11
  • Loading branch information
marc-rutkowski committed Sep 28, 2017
2 parents ed2c915 + e2fe87a commit bcada27
Show file tree
Hide file tree
Showing 24 changed files with 2,587 additions and 2,133 deletions.
4 changes: 2 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"presets": ["es2015", "react", "stage-0"],
"plugins": [ "transform-flow-strip-types" ]
"presets": ["env", "react", "stage-0"],
"plugins": ["transform-flow-strip-types"]
}
12 changes: 12 additions & 0 deletions .storybook/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"presets": ["env", "react", "stage-0"],
"plugins": [
[
"babel-plugin-react-docgen",
{
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
"resolver": "findAllExportedComponentDefinitions"
}
]
]
}
6 changes: 3 additions & 3 deletions .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '@storybook/addons';
import '../src/register';
import '@storybook/addons'
import '../src/register'
// in your project replace to:
// import 'storybook-addon-props/register'

import '@storybook/addon-actions/register';
import '@storybook/addon-actions/register'
File renamed without changes.
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
#3.0.3
- Update to latest Storybook version
- Support Markdown into story description

#3.0.2
Updated to support storybook 3
+ use external prop-types package
+ prettier all files

#2.1.2
- Better serialization for Immutable data struct.
- Display required props name with bold font weight
Expand Down
47 changes: 34 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
# React Storybook Props addon

This addon provides two new panels for the [Storybook](getstorybook.io) UI.
> Display Props and Story documentation/source into Storybook UI panels.
### Status

This repo is intented to be deprecated when this [PR](https://github.com/storybooks/storybook/pull/1501) will be finally merged. But if you want to try it...

### Purpose

The addon provides two new panels for the [Storybook](https://storybook.js.org) UI.

- **Props**. Shows component properties (extracted by [Storybook](https://voice.kadira.io/component-metadata-react-storybook-ac0b218a2203#.tuzb01kb6) using [react-docgen](https://github.com/reactjs/react-docgen))

![snap1](./docs/snap1.png)
Expand All @@ -9,7 +18,7 @@ This addon provides two new panels for the [Storybook](getstorybook.io) UI.

![snap2](./docs/snap2.png)

Visible information are similar to [Storybook Info](https://github.com/storybooks/react-storybook-addon-info) addon, but doesn't alter the output of the story into the preview area. This provides a better usage for the Storyshots feature because snapshot will only contains the rendered story.
Visible information are similar to [Storybook Info](https://github.com/storybooks/storybook/tree/master/addons/info) addon, but doesn't alter the output of the story into the preview area. This provides a better usage for the [Storyshots](https://github.com/storybooks/storybook/tree/master/addons/storyshots) feature because snapshots will only contains the rendered stories.

### Install

Expand All @@ -21,14 +30,34 @@ or (using Yarn) :

### Usage

#### Register addon into the *.storybook/addons.js* file ([view doc](https://getstorybook.io/docs/react-storybook/addons/using-addons))
#### Add a custom `.storybook/.babelrc` file

```json
{
"presets": ["env", "react", "stage-0"],
"plugins": [
[
"babel-plugin-react-docgen",
{
"DOC_GEN_COLLECTION_NAME": "STORYBOOK_REACT_CLASSES",
"resolver": "findAllExportedComponentDefinitions"
}
]
]
}
```

The custom balel config is used to set a different resolver for the `babel-plugin-react-docgen`.
This is necessary to avoid warnings about files with multiple React component exports.

#### Register addon into the `.storybook/addons.js` file ([view doc](https://storybook.js.org/addons/using-addons/))

```js
import '@storybook/addons';
import 'storybook-addon-props/register';
```

#### Set addon into the *.storybook/config.js* file
#### Set addon into the `.storybook/config.js` file

```js
import { configure, setAddon } from '@storybook/react';
Expand Down Expand Up @@ -66,7 +95,7 @@ For another example, have a look at [this file](example/Button.stories.js).
| ------------- | :--------------------------------------- |
| `storyName` | Name of the story (appears into the Left Panel) |
| `component` | The main component of the story |
| `description` | A string displayed into the Story panel |
| `description` | A string displayed into the Story panel (Markdown supported here!) |
| `storyFn` | The story rendering function |

#### Options
Expand Down Expand Up @@ -155,12 +184,4 @@ the *Props* panel will show something like this:

View complete example: [component code](example/UserDetails.js) and [story](example/UserDetails.stories.js).

### Status

The creation of this addon was initially motivated by this [issue](https://github.com/storybooks/react-storybook-addon-info/issues/67) on react-storybook-addon-info repo.

Since then, @7rulnik provides a [good example](https://github.com/storybooks/storyshots/issues/78#issuecomment-278123759) on how to disable/mock react-storybook-addon-info (or other addons & decorators) when running Jest with Storyshots.

Additionaly I just want to try to create my own NPM module (good experience!)

This is really not a top quality code (no tests...), but I think it do the job, and I'm using it on a project for one of my clients. So I will continue to improve it to match the project needs. And of course try to fix things if I'll get some feedback about it...
27 changes: 13 additions & 14 deletions example/Button.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import React from 'react'
import PropTypes from 'prop-types'

const buttonStyles = {
border: '1px solid #eee',
Expand All @@ -8,30 +9,28 @@ const buttonStyles = {
fontSize: 15,
padding: '3px 10px',
margin: 10,
};
}

/** A simple Button */
const Button = ({ children, onClick }) =>
const Button = ({ children, onClick }) => (
<button style={buttonStyles} onClick={onClick}>
{children}
</button>;
</button>
)

Button.propTypes = {
/** Button content */
children: React.PropTypes.node.isRequired,
children: PropTypes.node.isRequired,
/** Click handler */
onClick: React.PropTypes.func,
onClick: PropTypes.func,
/** testOneOf */
testOneOf: React.PropTypes.oneOf(['default', 'positive']),
testOneOf: PropTypes.oneOf(['default', 'positive']),
/** testOneOfType */
testOneOfType: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string,
]),
};
testOneOfType: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}

Button.defaultProps = {
children: 'OK',
};
}

export default Button;
export default Button
14 changes: 8 additions & 6 deletions example/Button.stories.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import Button from './Button';
import Button from './Button'

storiesOf('Button', module)
.addWithDoc(
Expand All @@ -14,12 +14,14 @@ storiesOf('Button', module)
.addWithDoc(
'with some emoji',
Button,
'It should render a button with emoji',
`It should render a button with emoji
It should also support some *markdown* **formatting**
`,
() => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
)
.addWithDoc(
'with a label and an icon',
Button,
'It should render a button with a label and an emoji',
() => <Button onClick={action('clicked')}>Settings ⚙️</Button>
);
)
13 changes: 7 additions & 6 deletions example/H1.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react';
import React from 'react'
import PropTypes from 'prop-types'

const style = {
fontSize: '2em',
marginBottom: '0.25em',
};
}

/** Simple header */
const H1 = ({ children }) => <h1 style={style}>{children}</h1>;
const H1 = ({ children }) => <h1 style={style}>{children}</h1>
H1.propTypes = {
/** Header content */
children: React.PropTypes.node.isRequired,
};
children: PropTypes.node.isRequired,
}

export default H1;
export default H1
15 changes: 9 additions & 6 deletions example/H1.stories.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import React from 'react'
import { storiesOf } from '@storybook/react'

import H1 from './H1';
import H1 from './H1'

storiesOf(
'H1',
module
).addWithDoc('with label', H1, 'It should render a header with a label', () =>
<H1>Header text</H1>
);
).addWithDoc(
'with label',
H1,
'The PROPS pane should display props extracted from functional component',
() => <H1>Header text</H1>
)
22 changes: 11 additions & 11 deletions example/UserDetails.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/* @flow */
import React from 'react';
import React from 'react'

export type User = {
id: number,
name: string,
country?: string,
};
}

type Props = {
/** User info */
Expand All @@ -18,29 +18,29 @@ type Props = {
func?: (value: string) => void,
/** Optional array of users */
friends?: Array<User>,
/** immutable data*/
imm?: object,
};
/** immutable data */
imm?: any,
}

/** Render user details */
class UserDetails extends React.Component {
props: Props;
class UserDetails extends React.Component<Props> {
props: Props

static defaultProps = {
option: 'foo',
};
}

render() {
const { user, num, option } = this.props;
const { user, num, option } = this.props
return (
<div>
<p>Id: {user.id}</p>
<p>Name: {user.name}</p>
<p>Num: {num}</p>
{option && <p>Option: {option}</p>}
</div>
);
)
}
}

export default UserDetails;
export default UserDetails
25 changes: 13 additions & 12 deletions example/UserDetails.stories.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
/* @flow */
import React from 'react';
// $FlowFixMe
import { storiesOf } from '@storybook/react';
import { fromJS } from 'immutable';
import React from 'react'
import { storiesOf } from '@storybook/react'
import { fromJS } from 'immutable'

import UserDetails from './UserDetails';
import type { User } from './UserDetails';
import UserDetails from './UserDetails'
import type { User } from './UserDetails'

const user: User = {
id: 1,
name: 'Joe',
};
}

const imm = fromJS({
test: 'abc',
});
})

storiesOf(
'UserDetails',
module
).addWithDoc('default', UserDetails, 'It should render given user info', () =>
<UserDetails user={user} num={42} imm={imm} />
);
).addWithDoc(
'default',
UserDetails,
'It should display props info extracted from [Flow](https://flow.org/) annotations',
() => <UserDetails user={user} num={42} imm={imm} />
)
14 changes: 10 additions & 4 deletions example/__snapshots__/storyshots.test.js.snap
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots Button with a label and an icon 1`] = `
<button
onClick={[Function]}
Expand All @@ -11,7 +13,8 @@ exports[`Storyshots Button with a label and an icon 1`] = `
"margin": 10,
"padding": "3px 10px",
}
}>
}
>
Settings ⚙️
</button>
`;
Expand All @@ -29,7 +32,8 @@ exports[`Storyshots Button with label 1`] = `
"margin": 10,
"padding": "3px 10px",
}
}>
}
>
Hello Button
</button>
`;
Expand All @@ -47,7 +51,8 @@ exports[`Storyshots Button with some emoji 1`] = `
"margin": 10,
"padding": "3px 10px",
}
}>
}
>
😀 😎 👍 💯
</button>
`;
Expand All @@ -59,7 +64,8 @@ exports[`Storyshots H1 with label 1`] = `
"fontSize": "2em",
"marginBottom": "0.25em",
}
}>
}
>
Header text
</h1>
`;
Expand Down
Loading

0 comments on commit bcada27

Please sign in to comment.