Core: Add args feature

app/vue/src/client/preview/index.ts

@@ -68,6 +68,7 @@ const defaultContext: StoryContext = {
  name: 'unspecified',
  kind: 'unspecified',
  parameters: {},
+ args: {},
 };
 
 function decorateStory(

examples/official-storybook/stories/core/args.stories.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useArgs } from '@storybook/client-api';
+
+// eslint-disable-next-line react/prop-types
+const ArgUpdater = ({ args, updateArgs }) => {
+ const [argsInput, updateArgsInput] = useState(JSON.stringify(args));
+
+ return (
+ <div>
+ <h3>Hooks args:</h3>
+ <pre>{JSON.stringify(args)}</pre>
+ <form
+ onSubmit={e => {
+ e.preventDefault();
+ updateArgs(JSON.parse(argsInput));
+ }}
+ >
+ <textarea value={argsInput} onChange={e => updateArgsInput(e.target.value)} />
+ <br />
+ <button type="submit">Change</button>
+ </form>
+ </div>
+ );
+};
+
+export default {
+ title: 'Core/Args',
+ parameters: {
+ passArgsFirst: true,
+ },
+ decorators: [
+ story => {
+ const [args, updateArgs] = useArgs();
+
+ return (
+ <>
+ {story()}
+ <ArgUpdater args={args} updateArgs={updateArgs} />
+ </>
+ );
+ },
+ ],
+};
+
+export const PassedToStory = inputArgs => {
+ return (
+ <div>
+ <h3>Input args:</h3>
+ <pre>{JSON.stringify(inputArgs)}</pre>
+ </div>
+ );
+};
+
+PassedToStory.story = {
+ parameters: { argTypes: { name: { defaultValue: 'initial' } } },
+};
+
+PassedToStory.propTypes = {
+ args: PropTypes.shape({}).isRequired,
+};

examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot

@@ -56,6 +56,7 @@ exports[`Storyshots Custom/Decorator for Vue With Data 1`] = `
  "framework": "vue",
  "__id": "custom-decorator-for-vue--with-data"
  },
+ "args": {},
  "customContext": 52
 }
  </pre>

lib/addons/src/hooks.ts

@@ -1,8 +1,13 @@
 import window from 'global';
 import { logger } from '@storybook/client-logger';
-import { FORCE_RE_RENDER, STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';
+import {
+ FORCE_RE_RENDER,
+ STORY_RENDERED,
+ DOCS_RENDERED,
+ UPDATE_STORY_ARGS,
+} from '@storybook/core-events';
 import { addons } from './index';
-import { StoryGetter, StoryContext } from './types';
+import { StoryGetter, StoryContext, Args } from './types';
 
 interface StoryStore {
  fromId: (
@@ -409,3 +414,16 @@ export function useParameter<S>(parameterKey: string, defaultValue?: S): S | und
  }
  return undefined;
 }
+
+/* Returns current value of story args */
+export function useArgs(): [Args, (newArgs: Args) => void] {
+ const channel = addons.getChannel();
+ const { id: storyId, args } = useStoryContext();
+
+ const updateArgs = useCallback(
+ (newArgs: Args) => channel.emit(UPDATE_STORY_ARGS, storyId, newArgs),
+ [channel, storyId]
+ );
+
+ return [args, updateArgs];
+}

lib/addons/src/types.ts

@@ -27,6 +27,12 @@ export interface Parameters {
  [key: string]: any;
 }
 
+// This is duplicated in @storybook/api because there is no common place to put types (manager/preview)
+// We cannot import from @storybook/api here because it will lead to manager code (i.e. emotion) imported in the preview
+export interface Args {
+ [key: string]: any;
+}
+
 export interface StoryIdentifier {
  id: StoryId;
  kind: StoryKind;
@@ -36,6 +42,7 @@ export interface StoryIdentifier {
 export interface StoryContext extends StoryIdentifier {
  [key: string]: any;
  parameters: Parameters;
+ args: Args;
  hooks?: HooksContext;
 }
 
@@ -68,7 +75,10 @@ export interface OptionsParameter extends Object {
 }
 
 export type StoryGetter = (context: StoryContext) => any;
-export type StoryFn<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
+
+export type LegacyStoryFn<ReturnType = unknown> = (p?: StoryContext) => ReturnType;
+export type ArgsStoryFn<ReturnType = unknown> = (a?: Args, p?: StoryContext) => ReturnType;
+export type StoryFn<ReturnType = unknown> = LegacyStoryFn<ReturnType> | ArgsStoryFn<ReturnType>;
 
 export type StoryWrapper = (
  getStory: StoryGetter,

lib/api/src/index.tsx

@@ -119,6 +119,10 @@ interface Children {
  children: ReactNode | ((props: Combo) => ReactNode);
 }
 
+export interface Args {
+ [key: string]: any;
+}
+
 type StatePartial = Partial<State>;
 
 export type ManagerProviderProps = Children & RouterData & ProviderData & DocsModeData;
@@ -423,3 +427,13 @@ export function useStoryState<S>(defaultState?: S) {
  const { storyId } = useStorybookState();
  return useSharedState<S>(`story-state-${storyId}`, defaultState);
 }
+
+export function useArgs(): [Args, (newArgs: Args) => void] {
+ const {
+ api: { getCurrentStoryData, updateStoryArgs },
+ } = useStorybookApi();
+
+ const { id, args } = getCurrentStoryData();
+
+ return [args, (newArgs: Args) => updateStoryArgs(id, newArgs)];
+}

lib/api/src/lib/stories.ts

@@ -1,6 +1,8 @@
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 import { sanitize, parseKind } from '@storybook/csf';
+
+import { Args } from '../index';
 import merge from './merge';
 import { Provider } from '../init-provider-api';
 
@@ -58,6 +60,7 @@ export interface Story {
  docsOnly?: boolean;
  [k: string]: any;
  };
+ args: Args;
 }
 
 export interface StoryInput {

lib/api/src/modules/stories.ts

@@ -1,5 +1,6 @@
 import { DOCS_MODE } from 'global';
 import { toId, sanitize } from '@storybook/csf';
+import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED } from '@storybook/core-events';
 
 import {
  transformStoriesRawToStoriesHash,
@@ -11,7 +12,7 @@ import {
  isStory,
 } from '../lib/stories';
 
-import { Module } from '../index';
+import { Module, API, Args } from '../index';
 
 type Direction = -1 | 1;
 type ParameterName = string;
@@ -46,6 +47,8 @@ const initStoriesApi = ({
  storyId: initialStoryId,
  viewMode: initialViewMode,
 }: Module) => {
+ let fullApi: API;
+
  const getData = (storyId: StoryId) => {
  const { storiesHash } = store.getState();
 
@@ -235,6 +238,24 @@ const initStoriesApi = ({
  }
  };
 
+ const storyArgsChanged = (id: StoryId, args: Args) => {
+ const { storiesHash } = store.getState();
+ (storiesHash[id] as Story).args = args;
+ store.setState({ storiesHash });
+ };
+
+ const updateStoryArgs = (id: StoryId, newArgs: Args) => {
+ if (!fullApi) throw new Error('Cannot set story args until api has been initialized');
+
+ fullApi.emit(UPDATE_STORY_ARGS, id, newArgs);
+ };
+
+ function init({ api: inputFullApi }: { api: API }) {
+ fullApi = inputFullApi;
+
+ fullApi.on(STORY_ARGS_UPDATED, (id: StoryId, args: Args) => storyArgsChanged(id, args));
+ }
+
  return {
  api: {
  storyId: toId,
@@ -246,13 +267,15 @@ const initStoriesApi = ({
  getData,
  getParameters,
  getCurrentParameter,
+ updateStoryArgs,
  },
  state: {
  storiesHash: {},
  storyId: initialStoryId,
  viewMode: initialViewMode,
  storiesConfigured: false,
  },
+ init,
  };
 };
 export default initStoriesApi;