diff --git a/app/vue/src/client/preview/index.ts b/app/vue/src/client/preview/index.ts index 4e515081a915..09b69690dbcd 100644 --- a/app/vue/src/client/preview/index.ts +++ b/app/vue/src/client/preview/index.ts @@ -69,6 +69,7 @@ const defaultContext: StoryContext = { kind: 'unspecified', parameters: {}, args: {}, + globalArgs: {}, }; function decorateStory( diff --git a/examples/dev-kits/manager.js b/examples/dev-kits/manager.js index cf2f252bacec..7254179364b3 100644 --- a/examples/dev-kits/manager.js +++ b/examples/dev-kits/manager.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { useState } from 'react'; import { PropTypes } from 'prop-types'; import { Button } from '@storybook/react/demo'; import { addons } from '@storybook/addons'; -import { useAddonState, useStoryState } from '@storybook/api'; +import { useAddonState, useStoryState, useGlobalArgs } from '@storybook/api'; import { themes } from '@storybook/theming'; import { AddonPanel } from '@storybook/components'; @@ -59,3 +59,37 @@ addons.addPanel('useAddonState', { title: 'useAddonState', render: StatePanel, }); + +const GlobalArgsPanel = ({ active, key }) => { + const [globalArgs, updateGlobalArgs] = useGlobalArgs(); + const [globalArgsInput, updateGlobalArgsInput] = useState(JSON.stringify(globalArgs)); + return ( + +
+

Global Args

+ +
{ + e.preventDefault(); + updateGlobalArgs(JSON.parse(globalArgsInput)); + }} + > +