Skip to content

Commit

Permalink
Merge pull request storybookjs#3403 from storybooks/dd/docgen2
Browse files Browse the repository at this point in the history 
upgrade docgen to 2.0rc
  • Loading branch information
@danielduan
danielduan authored Apr 12, 2018
2 parents 8c2f644 + 5f7c5fd commit 58f505a
Show file tree
Hide file tree
Showing 5 changed files with 355 additions and 4 deletions.
2 changes: 1 addition & 1 deletion app/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"airbnb-js-shims": "^1.4.1",
"babel-loader": "^7.1.4",
"babel-plugin-macros": "^2.2.0",
"babel-plugin-react-docgen": "^1.9.0",
"babel-plugin-react-docgen": "^2.0.0-rc.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
Expand Down
28 changes: 28 additions & 0 deletions examples/official-storybook/components/NamedExportButton.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
import BaseButton from './BaseButton';

const NamedExportButton = props => (
<div>
<BaseButton {...props} />
</div>
);

NamedExportButton.defaultProps = {
disabled: false,
onClick: () => {},
style: {},
};

NamedExportButton.propTypes = {
/** Boolean indicating whether the button should render as disabled */
disabled: PropTypes.bool,
/** button label. */
label: PropTypes.string.isRequired,
/** onClick handler */
onClick: PropTypes.func,
/** Custom styles */
style: PropTypes.shape({}),
};

export { NamedExportButton };
316 changes: 316 additions & 0 deletions examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4464,3 +4464,319 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
</div>
</div>
`;

exports[`Storyshots Addons|Info.React Docgen Comments from named export component declaration 1`] = `
<div>
<div
style="position:relative;z-index:0"
>
<div>
<button>
Button
</button>
</div>
</div>
<button
style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
type="button"
>
Show Info
</button>
<div
style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
>
<button
style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
type="button"
>
×
</button>
<div>
<div
style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
>
<div
style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
>
<h1
style="margin:0;padding:0;font-size:35px"
>
Addons|Info.React Docgen
</h1>
<h2
style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
>
Comments from named export component declaration
</h2>
</div>
<div
style="margin-bottom:0"
>
<div
style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
>
Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading
</div>
</div>
<div>
<h1
style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
>
Story Source
</h1>
<pre
class="css-4akams"
>
<div>
<div
style="padding-left:18px;padding-right:3px"
>
<span
style="color:#777"
>
&lt;NamedExportButton
</span>
<span>
<span>

<span>
onClick
</span>
<span>
=
<span>
<span>
{
<span
style="color:#170"
>
clicked()
</span>
}
</span>
</span>
</span>
</span>
<span>

<span>
label
</span>
<span>
=
<span>
"
<span
style="color:#22a;word-break:break-word"
>
Button
</span>
"
</span>
</span>

</span>
</span>
<span
style="color:#777"
>
/&gt;
</span>
</div>
</div>
<button
class="css-gydez8"
>
<div
class="css-kv47nt"
>
<div
style="margin-bottom:6px"
>
Copied!
</div>
<div>
Copy
</div>
</div>
</button>
</pre>
</div>
<div>
<h1
style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
>
Prop Types
</h1>
<div>
<h2
style="margin:20px 0 0 0"
>
"NamedExportButton" Component
</h2>
<table
class="css-1ytzlk7"
>
<thead>
<tr>
<th
class="css-d52hbj"
>
property
</th>
<th
class="css-d52hbj"
>
propType
</th>
<th
class="css-d52hbj"
>
required
</th>
<th
class="css-d52hbj"
>
default
</th>
<th
class="css-d52hbj"
>
description
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="css-1ygfcef"
>
disabled
</td>
<td
class="css-1ygfcef"
>
<span />
</td>
<td
class="css-d52hbj"
>
-
</td>
<td
class="css-d52hbj"
>
<span>
{
<span
style="color:#a11"
>
false
</span>
}
</span>
</td>
<td
class="css-d52hbj"
/>
</tr>
<tr>
<td
class="css-1ygfcef"
>
label
</td>
<td
class="css-1ygfcef"
>
<span />
</td>
<td
class="css-d52hbj"
>
yes
</td>
<td
class="css-d52hbj"
>
-
</td>
<td
class="css-d52hbj"
/>
</tr>
<tr>
<td
class="css-1ygfcef"
>
onClick
</td>
<td
class="css-1ygfcef"
>
<span />
</td>
<td
class="css-d52hbj"
>
-
</td>
<td
class="css-d52hbj"
>
<span>
{
<span
style="color:#170"
>
onClick()
</span>
}
</span>
</td>
<td
class="css-d52hbj"
/>
</tr>
<tr>
<td
class="css-1ygfcef"
>
style
</td>
<td
class="css-1ygfcef"
>
<span />
</td>
<td
class="css-d52hbj"
>
-
</td>
<td
class="css-d52hbj"
>
<span>
{
<span
style="color:#666"
>
{}
</span>
}
</span>
</td>
<td
class="css-d52hbj"
/>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
`;
7 changes: 7 additions & 0 deletions examples/official-storybook/stories/addon-info.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { action } from '@storybook/addon-actions';
import DocgenButton from '../components/DocgenButton';
import FlowTypeButton from '../components/FlowTypeButton';
import BaseButton from '../components/BaseButton';
import { NamedExportButton } from '../components/NamedExportButton';
import TableComponent from '../components/TableComponent';

storiesOf('Addons|Info.React Docgen', module)
Expand All @@ -26,6 +27,12 @@ storiesOf('Addons|Info.React Docgen', module)
withInfo(
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
)(() => <BaseButton onClick={action('clicked')} label="Button" />)
)
.add(
'Comments from named export component declaration',
withInfo(
'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
)(() => <NamedExportButton onClick={action('clicked')} label="Button" />)
);

const markdownDescription = `
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1501,9 +1501,9 @@ babel-plugin-minify-type-constructors@^0.4.0:
dependencies:
babel-helper-is-void-0 "^0.4.0"

babel-plugin-react-docgen@^1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-1.9.0.tgz#2e79aeed2f93b53a172398f93324fdcf9f02e01f"
babel-plugin-react-docgen@^2.0.0-rc.0:
version "2.0.0-rc.0"
resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-2.0.0-rc.0.tgz#e3561de1f1a16037306ec5131456fe625b7736f8"
dependencies:
babel-types "^6.24.1"
lodash "^4.17.0"
Expand Down

0 comments on commit 58f505a

Please sign in to comment.