diff --git a/app/vue/src/client/preview/index.js b/app/vue/src/client/preview/index.js index 71d6fbe03b74..b8342932c8f6 100644 --- a/app/vue/src/client/preview/index.js +++ b/app/vue/src/client/preview/index.js @@ -46,13 +46,18 @@ function decorateStory(getStory, decorators) { const decoratedStory = decorator((p = {}) => { story = decorated( - Object.assign( - context, - p, - { parameters: Object.assign(context.parameters || {}, p.parameters) }, - { options: Object.assign(context.options || {}, p.options) } - ) + p + ? { + ...context, + ...p, + parameters: { + ...context.parameters, + ...p.parameters, + }, + } + : context ); + return story; }, context); diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js index d32c78d74277..1f9551856faa 100644 --- a/examples/official-storybook/stories/core/parameters.stories.js +++ b/examples/official-storybook/stories/core/parameters.stories.js @@ -1,7 +1,11 @@ +/* eslint-disable react/prop-types */ import React from 'react'; -// We would need to add this in config.js idomatically however that would make this file a bit confusing +// We would need to add this in config.js idiomatically however that would make this file a bit confusing import { addParameters } from '@storybook/react'; +import { addDecorator } from '@storybook/react/dist/client/preview'; + +addDecorator(fn => fn({ customStoryContext: 52, parameters: { customParameter: 42 } })); addParameters({ globalParameter: 'globalParameter' }); @@ -15,10 +19,9 @@ export default { // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples? // Given we sort of control the props, should we export a prop type? -export const passed = ({ - // eslint-disable-next-line react/prop-types - parameters: { options, ...parameters }, -}) =>
Parameters are {JSON.stringify(parameters, null, 2)}
; +export const passed = ({ parameters: { options, ...parameters }, ...rest }) => ( +
StoryContext: {JSON.stringify({ ...rest, parameters }, null, 2)}
+); passed.story = { name: 'passed to story', parameters: { storyParameter: 'storyParameter' }, diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap index 228495f79c6f..589366792ca5 100644 --- a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap +++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap @@ -327,6 +327,38 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = ` `; +exports[`Storyshots Custom|Decorator for Vue withData 1`] = ` +
+
+
+      {
+  "id": "custom-decorator-for-vue--withdata",
+  "kind": "Custom|Decorator for Vue",
+  "name": "withData",
+  "story": "withData",
+  "customContext": 52,
+  "parameters": {
+    "options": {
+      "hierarchyRootSeparator": {},
+      "hierarchySeparator": {},
+      "docs": {
+        "iframeHeight": "60px"
+      }
+    },
+    "globalParameter": "globalParameter",
+    "framework": "vue",
+    "customParameter": 42
+  }
+}
+    
+
+
+`; + exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `