Skip to content

Commit

Permalink
Merge pull request #2177 from storybooks/dd/cra-reorg
Browse files Browse the repository at this point in the history 
#1750 CRA Example cleanup - knobs and notes
  • Loading branch information
@danielduan
danielduan committed Oct 30, 2017
2 parents 25583c9 + 9f3f044 commit 2d0e4ac
Show file tree
Hide file tree
Showing 7 changed files with 323 additions and 356 deletions.
14 changes: 14 additions & 0 deletions addons/notes/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,17 @@ import Component from './Component';
storiesOf('Component', module)
.add('with some emoji', withNotes('A very simple component')(() => <Component></Component>));
```

### Deprecated API
This API is slated for removal in 4.0

```js
import { WithNotes } from '@storybook/addon-notes';

storiesOf('Addon Notes', module)
.add('using deprecated API', () => (
<WithNotes notes="Hello">
<BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
</WithNotes>
));
```
1 change: 1 addition & 0 deletions examples/cra-kitchen-sink/.storybook/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ setAddon(infoAddon);
// put welcome screen at the top of the list so it's the first one displayed
require('../src/stories/welcome');

// automatically import all story js files that end with *.stories.js
const req = require.context('../src/stories', true, /\.stories\.js$/)
function loadStories() {
req.keys().forEach((filename) => req(filename))
Expand Down
343 changes: 133 additions & 210 deletions examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4321,6 +4321,139 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
</div>
`;

exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
<div>
<p>
Hit the knob load button and it should trigger an async load after a short delay
</p>
<p>
No items loaded
</p>
</div>
`;

exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
<div
style={
Object {
"backgroundColor": "#ffff00",
"border": "3px solid #ff00ff",
"padding": "10px",
}
}
>
<p>
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
</p>
<p>
My birthday is:
January 20, 2017
</p>
<p>
My wallet contains: $
12.50
</p>
<p>
In my backpack, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
<hr />
<p>
PS. My shirt pocket contains:
</p>
</div>
`;

exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
<div>
<p>
Hit the knob load button and it should trigger an async load after a short delay
</p>
<p>
No items loaded
</p>
</div>
`;

exports[`Storyshots Addon Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
<div
style={
Object {
"backgroundColor": "#ffff00",
"border": "3px solid #ff00ff",
"padding": "10px",
}
}
>
<p>
If you are encountering performance issues with state updating too often, use withKnobsOptions to debounce changes.
</p>
<p>
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
</p>
<p>
My birthday is:
January 20, 2017
</p>
<p>
My wallet contains: $
12.50
</p>
<p>
In my backpack, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
<hr />
<p>
PS. My shirt pocket contains:
</p>
</div>
`;

exports[`Storyshots Addon Notes using deprecated API 1`] = `
<button
disabled={false}
onClick={[Function]}
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots Addon Notes withNotes 1`] = `
<button
disabled={false}
onClick={[Function]}
>
Button with notes - check the notes panel for details
</button>
`;

exports[`Storyshots App full app 1`] = `
<div
className="App"
Expand Down Expand Up @@ -4751,54 +4884,6 @@ exports[`Storyshots Button addons composition 1`] = `
</div>
`;

exports[`Storyshots Button with knobs 1`] = `
<div
style={
Object {
"backgroundColor": "#ffff00",
"border": "3px solid #ff00ff",
"padding": "10px",
}
}
>
<p>
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
</p>
<p>
My birthday is:
January 20, 2017
</p>
<p>
My wallet contains: $
12.50
</p>
<p>
In my backpack, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
<hr />
<p>
PS. My shirt pocket contains:
</p>
<li>
No items!
</li>
</div>
`;

exports[`Storyshots Button with new info 1`] = `
<div>
<div
Expand Down Expand Up @@ -5923,70 +6008,6 @@ exports[`Storyshots Button with text 1`] = `
</button>
`;

exports[`Storyshots Cells.Molecules.Atoms with some emoji2 1`] = `
<button
className="css-1yjiefr"
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots Cells.Molecules.Atoms with text2 1`] = `
<button
className="css-1yjiefr"
>
Hello Button
</button>
`;

exports[`Storyshots Cells/Molecules with some emoji 1`] = `
<button
className="css-1yjiefr"
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots Cells/Molecules with text 1`] = `
<button
className="css-1yjiefr"
>
Hello Button
</button>
`;

exports[`Storyshots Cells/Molecules.Atoms/simple with some emoji 1`] = `
<button
className="css-1yjiefr"
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots Cells/Molecules.Atoms/simple with text 1`] = `
<button
className="css-1yjiefr"
>
Hello Button
</button>
`;

exports[`Storyshots Cells/Molecules/Atoms.more with some emoji2 1`] = `
<button
className="css-1yjiefr"
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = `
<button
className="css-1yjiefr"
>
Hello Button
</button>
`;

exports[`Storyshots Navigation Menu link 1`] = `
<div
className="css-t9df35"
Expand Down Expand Up @@ -6165,101 +6186,3 @@ exports[`Storyshots WithEvents Logger 1`] = `
<dl />
</div>
`;

exports[`Storyshots component.Button first 1`] = `
<button>
first button
</button>
`;

exports[`Storyshots component.Button second 1`] = `
<button>
first second
</button>
`;

exports[`Storyshots component.base.Link first 1`] = `
<a>
first link
</a>
`;

exports[`Storyshots component.base.Link second 1`] = `
<a>
second link
</a>
`;

exports[`Storyshots component.base.Span first 1`] = `
<span>
first span
</span>
`;

exports[`Storyshots component.base.Span second 1`] = `
<span>
second span
</span>
`;

exports[`Storyshots component.common.Div first 1`] = `
<div>
first div
</div>
`;

exports[`Storyshots component.common.Div second 1`] = `
<div>
second div
</div>
`;

exports[`Storyshots component.common.Table first 1`] = `
<table>
<tr>
<td>
first table
</td>
</tr>
</table>
`;

exports[`Storyshots component.common.Table second 1`] = `
<table>
<tr>
<td>
first table
</td>
</tr>
</table>
`;

exports[`Storyshots withNotes with a button and some emoji 1`] = `
<button
className="css-1yjiefr"
onClick={[Function]}
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots withNotes with old API 1`] = `
<button
className="css-1yjiefr"
onClick={[Function]}
>
😀 😎 👍 💯
</button>
`;

exports[`Storyshots withNotes with some emoji 1`] = `
<p>
🤔😳😯😮
</p>
`;

exports[`Storyshots withNotes with some text 1`] = `
<div>
Hello guys
</div>
`;

0 comments on commit 2d0e4ac

Please sign in to comment.