Skip to content

Commit

Permalink
Added storyshots addon
Browse files Browse the repository at this point in the history
  • Loading branch information
kotarella1110 committed Sep 7, 2018
1 parent 811f8a5 commit 90a8e0c
Show file tree
Hide file tree
Showing 6 changed files with 525 additions and 8 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@storybook/addon-links": "^3.4.8",
"@storybook/addon-notes": "^3.4.10",
"@storybook/addon-options": "^3.4.10",
"@storybook/addon-storyshots": "^3.4.10",
"@storybook/addon-viewport": "^3.4.10",
"@storybook/addons": "^3.4.8",
"@storybook/react": "^3.4.8",
Expand All @@ -44,6 +45,7 @@
"@types/storybook__addon-knobs": "^3.4.1",
"@types/storybook__addon-notes": "^3.3.3",
"@types/storybook__addon-options": "^3.2.2",
"@types/storybook__addon-storyshots": "^3.4.3",
"@types/storybook__react": "^3.0.9",
"babel-core": "^6.26.3",
"babel-runtime": "^6.26.0",
Expand Down
301 changes: 301 additions & 0 deletions src/App/__snapshots__/index.stories.storyshot
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots App Group|App Welcome to Storybook 1`] = `
<div>
<div
style={
Object {
"position": "relative",
"zIndex": 0,
}
}
>
<div
className="App"
>
<header
className="App-header"
>
<img
alt="logo"
className="App-logo"
/>
<h1
className="App-title"
>
Welcome to React
</h1>
</header>
<p
className="App-intro"
>
To get started, edit
<code>
src/App/index.tsx
</code>
and save to reload.
</p>
</div>
</div>
<button
onClick={[Function]}
style={
Object {
"background": "#28c",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
type="button"
>
Show Info
</button>
<div
style={
Object {
"background": "white",
"bottom": 0,
"display": "none",
"left": 0,
"overflow": "auto",
"padding": "0 40px",
"position": "fixed",
"right": 0,
"top": 0,
"zIndex": 99999,
}
}
>
<button
onClick={[Function]}
style={
Object {
"background": "#28c",
"border": "none",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"top": 0,
}
}
type="button"
>
×
</button>
<div>
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
"color": "#444",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
"fontWeight": 300,
"lineHeight": 1.45,
"marginBottom": "20px",
"marginTop": "20px",
"padding": "20px 40px 40px",
}
}
>
<div
style={
Object {
"borderBottom": "1px solid #eee",
"marginBottom": 10,
"paddingTop": 10,
}
}
>
<h1
style={
Object {
"fontSize": "35px",
"margin": 0,
"padding": 0,
}
}
>
App Group|App
</h1>
<h2
style={
Object {
"fontSize": "22px",
"fontWeight": 400,
"margin": "0 0 10px 0",
"padding": 0,
}
}
>
Welcome to Storybook
</h2>
</div>
<div
style={
Object {
"marginBottom": 0,
}
}
>
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
}
}
>
description or documentation about App component, supports markdown
</div>
<pre
className="language-js"
style={
Object {
"backgroundColor": "#fafafa",
"fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
"lineHeight": 1.5,
"overflowX": "scroll",
"padding": ".5rem",
}
}
>
<code
className="language-js"
style={
Object {
"backgroundColor": "#fafafa",
"fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
}
}
>
&lt;App /&gt;
</code>
</pre>
</div>
<div>
<h1
style={
Object {
"borderBottom": "1px solid #EEE",
"fontSize": "25px",
"margin": "20px 0 0 0",
"padding": "0 0 5px 0",
}
}
>
Story Source
</h1>
<pre
className="css-4akams"
>
<div>
<div
style={
Object {
"paddingLeft": 18,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;
App
</span>
<span />
<span
style={
Object {
"color": "#777",
}
}
>
/&gt;
</span>
</div>
</div>
<button
className="css-py33tc"
onClick={[Function]}
>
<div
className="css-kv47nt"
>
<div
style={
Object {
"marginBottom": 6,
}
}
>
Copied!
</div>
<div>
Copy
</div>
</div>
</button>
</pre>
</div>
<div>
<h1
style={
Object {
"borderBottom": "1px solid #EEE",
"fontSize": "25px",
"margin": "20px 0 0 0",
"padding": "0 0 5px 0",
}
}
>
Prop Types
</h1>
<div>
<h2
style={
Object {
"margin": "20px 0 0 0",
}
}
>
"
App
" Component
</h2>
<small>
No propTypes defined!
</small>
</div>
</div>
</div>
</div>
</div>
</div>
`;
4 changes: 2 additions & 2 deletions src/App/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import App from '../App';
storiesOf('App Group|App', module)
.addDecorator((story, context) =>
withInfo(`
description or documentation about my component, supports markdown
description or documentation about App component, supports markdown
~~~js
<App />
~~~
Expand All @@ -19,5 +19,5 @@ storiesOf('App Group|App', module)
.addDecorator(withKnobs)
.addWithJSX(
'Welcome to Storybook',
withNotes('Note about App component, supports markdown')(() => <App />)
withNotes('note about App component, supports markdown')(() => <App />)
);
7 changes: 7 additions & 0 deletions src/storyshots.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import initStoryshots, {
multiSnapshotWithOptions,
} from '@storybook/addon-storyshots';

initStoryshots({
test: multiSnapshotWithOptions({}),
});
3 changes: 2 additions & 1 deletion tslint.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
]
},
"rules": {
"prettier": true
"prettier": true,
"import-name": false
}
}
Loading

0 comments on commit 90a8e0c

Please sign in to comment.