GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

FIX parameter merging

Browse Source
This commit is contained in:
Norbert de Langen 2018-12-29 19:06:03 +01:00
parent 0b70afd1df
commit 552d64b908
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
10 changed files with 248 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
View File

@ -80,6 +80,36 @@ exports[`Storyshots Addons|A11y/Button Label 1`] = `
</button>
`;
exports[`Storyshots Addons|A11y/Form With label 1`] = `
<label
class="css-1n4tt73-Wrapper evz11jd0"
>
<span
class="css-1e2pl7n-Label evz11jd1"
>
<span>
Testing the a11y addon
</span>
</span>
<input
class="css-yli1rb-Input e1iqivjq0"
id="1"
/>
</label>
`;
exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
<label
class="css-1n4tt73-Wrapper evz11jd0"
>
<input
class="css-yli1rb-Input e1iqivjq0"
id="1"
placeholder="Testing the a11y addon"
/>
</label>
`;
exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
<label
class="css-1n4tt73-Wrapper evz11jd0"

29
examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
View File

@ -5743,6 +5743,35 @@ exports[`Storyshots Addons|Info/Parameters Overwrite the text parameter with mar
class="css-a1xhq0-Td-TD e1fg2ikb5"
/>
</tr>
<tr
class="css-rss5jh-TBodyTR e1fg2ikb4"
>
<td
class="css-v0hv6k-Td-TD-TDName e1fg2ikb6"
>
label
</td>
<td
class="css-yv1lmn-Td-TD-TDType e1fg2ikb7"
>
<span>
string
</span>
</td>
<td
class="css-6qgefz-Td-TD e1fg2ikb5"
>
yes
</td>
<td
class="css-6qgefz-Td-TD e1fg2ikb5"
>
-
</td>
<td
class="css-a1xhq0-Td-TD e1fg2ikb5"
/>
</tr>
<tr
class="css-rss5jh-TBodyTR e1fg2ikb4"
>

358
examples/official-storybook/stories/__snapshots__/core.stories.storyshot
View File

@ -1,358 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core|Events Force re-render 1`] = `
<button
class="css-1pzmux7-Button e1lk8yn73"
>
Clicked: 0
</button>
`;
exports[`Storyshots Core|Parameters adds data to storyFn 1`] = `
<pre>
[
{
"kind": "Core|Parameters",
"name": "adds data to storyFn",
"parameters": {
"fileName": "/Users/dev/Projects/GitHub/storybook/core/examples/official-storybook/stories/core.stories.js",
"a11y": {},
"options": {
"name": "Custom Storybook",
"hierarchySeparator": {},
"hierarchyRootSeparator": "|",
"selectedPanel": "storybook/actions/panel",
"selectedPanel": "storybook/background/panel",
"panel": "storybook/actions/panel",
"showPanel": false
},
"viewports": {
"iphone5": {
"name": "iPhone 5",
"styles": {
"height": "568px",
"width": "320px"
},
"type": "mobile"
},
"iphone6": {
"name": "iPhone 6",
"styles": {
"height": "667px",
"width": "375px"
},
"type": "mobile"
},
"iphone6p": {
"name": "iPhone 6 Plus",
"styles": {
"height": "736px",
"width": "414px"
},
"type": "mobile"
},
"iphone8p": {
"name": "iPhone 8 Plus",
"styles": {
"height": "736px",
"width": "414px"
},
"type": "mobile"
},
"iphonex": {
"name": "iPhone X",
"styles": {
"height": "812px",
"width": "375px"
},
"type": "mobile"
},
"iphonexr": {
"name": "iPhone XR",
"styles": {
"height": "896px",
"width": "414px"
},
"type": "mobile"
},
"iphonexsmax": {
"name": "iPhone Xs Max",
"styles": {
"height": "896px",
"width": "414px"
},
"type": "mobile"
},
"ipad": {
"name": "iPad",
"styles": {
"height": "1024px",
"width": "768px"
},
"type": "tablet"
},
"ipad10p": {
"name": "iPad Pro 10.5-in",
"styles": {
"height": "1112px",
"width": "834px"
},
"type": "tablet"
},
"ipad12p": {
"name": "iPad Pro 12.9-in",
"styles": {
"height": "1366px",
"width": "1024px"
},
"type": "tablet"
},
"galaxys5": {
"name": "Galaxy S5",
"styles": {
"height": "640px",
"width": "360px"
},
"type": "mobile"
},
"galaxys9": {
"name": "Galaxy S9",
"styles": {
"height": "1480px",
"width": "720px"
},
"type": "mobile"
},
"nexus5x": {
"name": "Nexus 5X",
"styles": {
"height": "660px",
"width": "412px"
},
"type": "mobile"
},
"nexus6p": {
"name": "Nexus 6P",
"styles": {
"height": "732px",
"width": "412px"
},
"type": "mobile"
},
"pixel": {
"name": "Pixel",
"styles": {
"height": "960px",
"width": "540px"
},
"type": "mobile"
},
"pixelxl": {
"name": "Pixel XL",
"styles": {
"height": "1280px",
"width": "720px"
},
"type": "mobile"
},
"kindleFire2": {
"name": "Kindle Fire 2",
"styles": {
"width": "600px",
"height": "963px"
},
"type": "tablet"
},
"kindleFireHD": {
"name": "Kindle Fire HD",
"styles": {
"width": "533px",
"height": "801px"
},
"type": "tablet"
}
},
"globalParameter": "globalParameter",
"chapterParameter": "chapterParameter",
"storyParameter": "storyParameter"
},
"id": "Core-Parameters-addsDataToStoryFn",
"depth": 2,
"path": "Core-Parameters-addsDataToStoryFn",
"options": {},
"decoratorParameter": "decoratorParameter"
}
]
</pre>
`;
exports[`Storyshots Core|Parameters passed to story 1`] = `
Array [
<p>
Parameters are
</p>,
<pre>
{
"a11y": {},
"options": {
"name": "Custom Storybook",
"hierarchySeparator": {},
"hierarchyRootSeparator": "|",
"selectedPanel": "storybook/actions/panel",
"selectedPanel": "storybook/background/panel",
"panel": "storybook/actions/panel",
"showPanel": false
},
"viewports": {
"iphone5": {
"name": "iPhone 5",
"styles": {
"height": "568px",
"width": "320px"
},
"type": "mobile"
},
"iphone6": {
"name": "iPhone 6",
"styles": {
"height": "667px",
"width": "375px"
},
"type": "mobile"
},
"iphone6p": {
"name": "iPhone 6 Plus",
"styles": {
"height": "736px",
"width": "414px"
},
"type": "mobile"
},
"iphone8p": {
"name": "iPhone 8 Plus",
"styles": {
"height": "736px",
"width": "414px"
},
"type": "mobile"
},
"iphonex": {
"name": "iPhone X",
"styles": {
"height": "812px",
"width": "375px"
},
"type": "mobile"
},
"iphonexr": {
"name": "iPhone XR",
"styles": {
"height": "896px",
"width": "414px"
},
"type": "mobile"
},
"iphonexsmax": {
"name": "iPhone Xs Max",
"styles": {
"height": "896px",
"width": "414px"
},
"type": "mobile"
},
"ipad": {
"name": "iPad",
"styles": {
"height": "1024px",
"width": "768px"
},
"type": "tablet"
},
"ipad10p": {
"name": "iPad Pro 10.5-in",
"styles": {
"height": "1112px",
"width": "834px"
},
"type": "tablet"
},
"ipad12p": {
"name": "iPad Pro 12.9-in",
"styles": {
"height": "1366px",
"width": "1024px"
},
"type": "tablet"
},
"galaxys5": {
"name": "Galaxy S5",
"styles": {
"height": "640px",
"width": "360px"
},
"type": "mobile"
},
"galaxys9": {
"name": "Galaxy S9",
"styles": {
"height": "1480px",
"width": "720px"
},
"type": "mobile"
},
"nexus5x": {
"name": "Nexus 5X",
"styles": {
"height": "660px",
"width": "412px"
},
"type": "mobile"
},
"nexus6p": {
"name": "Nexus 6P",
"styles": {
"height": "732px",
"width": "412px"
},
"type": "mobile"
},
"pixel": {
"name": "Pixel",
"styles": {
"height": "960px",
"width": "540px"
},
"type": "mobile"
},
"pixelxl": {
"name": "Pixel XL",
"styles": {
"height": "1280px",
"width": "720px"
},
"type": "mobile"
},
"kindleFire2": {
"name": "Kindle Fire 2",
"styles": {
"width": "600px",
"height": "963px"
},
"type": "tablet"
},
"kindleFireHD": {
"name": "Kindle Fire HD",
"styles": {
"width": "533px",
"height": "801px"
},
"type": "tablet"
}
},
"globalParameter": "globalParameter",
"chapterParameter": "chapterParameter",
"storyParameter": "storyParameter"
}
</pre>,
]
`;

10
examples/official-storybook/stories/addon-a11y.stories.js
View File

@ -42,9 +42,15 @@ storiesOf('Addons|A11y/Form', module)
</Form.Field>
))
.add('With label', () => (
<Form.Field label={<Form.Label content={text} id="1" />} input={<Form.Input id="1" />} />
<Form.Field label={text}>
<Form.Input id="1" />
</Form.Field>
))
.add('With placeholder', () => <Form.Field input={<Form.Input id="1" placeholder={text} />} />);
.add('With placeholder', () => (
<Form.Field label="">
<Form.Input id="1" placeholder={text} />
</Form.Field>
));
storiesOf('Addons|A11y/Image', module)
.addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })

6
examples/official-storybook/stories/addon-cssresources.stories.js
View File

@ -15,6 +15,9 @@ storiesOf('Addons|Cssresources', module)
picked: false,
},
],
options: {
selectedPanel: 'storybook/cssresources/panel',
},
})
.add('Primary Large Button', () => (
<button type="button" className="btn btn-lg btn-primary">
@ -36,6 +39,9 @@ storiesOf('Addons|Cssresources', module)
picked: false,
},
],
options: {
selectedPanel: 'storybook/cssresources/panel',
},
})
.add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);

10
examples/official-storybook/stories/addon-events.stories.js
View File

@ -68,11 +68,21 @@ const events = [
];
storiesOf('Addons|Events', module)
.addParameters({
options: {
selectedPanel: 'storybook/events/panel',
},
})
.addDecorator(withEvents({ emit, events }))
.add('Logger', () => <Logger emitter={emitter} />);
const WithEvents = withEvents;
storiesOf('Addons|Events.deprecated', module)
.addParameters({
options: {
selectedPanel: 'storybook/events/panel',
},
})
.addDecorator(story => (
<WithEvents emit={emit} events={events}>
{story()}

9
examples/official-storybook/stories/core/parameters.stories.js
View File

@ -17,12 +17,7 @@ export default {
// Given we sort of control the props, should we export a prop type?
export const passed = ({
// eslint-disable-next-line react/prop-types
parameters: { globalParameter, chapterParameter, decoratorParameter, storyParameter },
}) => (
<div>
Parameters are{' '}
{JSON.stringify({ globalParameter, chapterParameter, decoratorParameter, storyParameter })}
</div>
);
parameters,
}) => <pre>Parameters are {JSON.stringify(parameters, null, 2)}</pre>;
passed.title = 'passed to story';
passed.parameters = { storyParameter: 'storyParameter' };

163
examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View File

@ -11,7 +11,164 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
`;
exports[`Storyshots Core|Parameters passed to story 1`] = `
<div>
Parameters are {"globalParameter":"globalParameter","chapterParameter":"chapterParameter","decoratorParameter":"decoratorParameter","storyParameter":"storyParameter"}
</div>
<pre>
Parameters are {
"a11y": {},
"options": {
"name": "Storybook",
"hierarchySeparator": {},
"hierarchyRootSeparator": "|"
},
"viewports": {
"iphone5": {
"name": "iPhone 5",
"styles": {
"height": "568px",
"width": "320px"
},
"type": "mobile"
},
"iphone6": {
"name": "iPhone 6",
"styles": {
"height": "667px",
"width": "375px"
},
"type": "mobile"
},
"iphone6p": {
"name": "iPhone 6 Plus",
"styles": {
"height": "736px",
"width": "414px"
},
"type": "mobile"
},
"iphone8p": {
"name": "iPhone 8 Plus",
"styles": {
"height": "736px",
"width": "414px"
},
"type": "mobile"
},
"iphonex": {
"name": "iPhone X",
"styles": {
"height": "812px",
"width": "375px"
},
"type": "mobile"
},
"iphonexr": {
"name": "iPhone XR",
"styles": {
"height": "896px",
"width": "414px"
},
"type": "mobile"
},
"iphonexsmax": {
"name": "iPhone Xs Max",
"styles": {
"height": "896px",
"width": "414px"
},
"type": "mobile"
},
"ipad": {
"name": "iPad",
"styles": {
"height": "1024px",
"width": "768px"
},
"type": "tablet"
},
"ipad10p": {
"name": "iPad Pro 10.5-in",
"styles": {
"height": "1112px",
"width": "834px"
},
"type": "tablet"
},
"ipad12p": {
"name": "iPad Pro 12.9-in",
"styles": {
"height": "1366px",
"width": "1024px"
},
"type": "tablet"
},
"galaxys5": {
"name": "Galaxy S5",
"styles": {
"height": "640px",
"width": "360px"
},
"type": "mobile"
},
"galaxys9": {
"name": "Galaxy S9",
"styles": {
"height": "1480px",
"width": "720px"
},
"type": "mobile"
},
"nexus5x": {
"name": "Nexus 5X",
"styles": {
"height": "660px",
"width": "412px"
},
"type": "mobile"
},
"nexus6p": {
"name": "Nexus 6P",
"styles": {
"height": "732px",
"width": "412px"
},
"type": "mobile"
},
"pixel": {
"name": "Pixel",
"styles": {
"height": "960px",
"width": "540px"
},
"type": "mobile"
},
"pixelxl": {
"name": "Pixel XL",
"styles": {
"height": "1280px",
"width": "720px"
},
"type": "mobile"
},
"kindleFire2": {
"name": "Kindle Fire 2",
"styles": {
"width": "600px",
"height": "963px"
},
"type": "tablet"
},
"kindleFireHD": {
"name": "Kindle Fire HD",
"styles": {
"width": "533px",
"height": "801px"
},
"type": "tablet"
}
},
"globalParameter": "globalParameter",
"chapterParameter": "chapterParameter",
"storyParameter": "storyParameter",
"decoratorParameter": "decoratorParameter"
}
</pre>
`;

5
lib/core/src/client/preview/client_api.js
View File

@ -12,7 +12,7 @@ import subscriptionsStore from './subscriptions_store';
// merge with concatenating arrays, but no duplicates
const merge = (a, b) =>
mergeWith(a, b, (objValue, srcValue) => {
mergeWith({}, a, b, (objValue, srcValue) => {
if (Array.isArray(srcValue) && Array.isArray(objValue)) {
srcValue.forEach(s => {
const existing = objValue.find(o => o === s || isEqual(o, s));
@ -24,8 +24,7 @@ const merge = (a, b) =>
return objValue;
}
if (Array.isArray(objValue)) {
// eslint-disable-next-line no-console
console.log('the types mismatch, picking', objValue);
logger.log('the types mismatch, picking', objValue);
return objValue;
}
return undefined;

2
lib/core/src/client/preview/start.js
View File

@ -131,7 +131,7 @@ export default function start(render, { decorateStory } = {}) {
document.documentElement.scrollTop = 0;
}
if (!forceRender) {
if (!forceRender && previousKind && previousStory) {
addons.getChannel().emit(Events.STORY_CHANGED, id);
}