Core: Add args feature

app/react/package.json

@@ -57,7 +57,7 @@
     "webpack": "^4.33.0"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.0.0-alpha.15",
+    "@storybook/client-api": "6.0.0-alpha.20",
     "@types/mini-css-extract-plugin": "^0.9.0",
     "@types/node": "^13.5.3",
     "@types/webpack": "^4.41.0"

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,
+  CHANGE_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(CHANGE_STORY_ARGS, storyId, newArgs),
+    [channel, storyId]
+  );
+
+  return [args, updateArgs];
+}

lib/addons/src/types.ts

@@ -1,3 +1,4 @@
+import { Args } from '@storybook/api';
 import { HooksContext } from './hooks';
 import { Addon } from './index';
 
@@ -27,6 +28,8 @@ export interface Parameters {
   [key: string]: any;
 }
 
+export { Args };
+
 export interface StoryIdentifier {
   id: StoryId;
   kind: StoryKind;
@@ -36,6 +39,7 @@ export interface StoryIdentifier {
 export interface StoryContext extends StoryIdentifier {
   [key: string]: any;
   parameters: Parameters;
+  args: Args;
   hooks?: HooksContext;
 }
 
@@ -68,7 +72,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() {
+  const {
+    api: { getCurrentStoryData, setStoryArgs },
+  } = useStorybookApi();
+
+  const { id, args } = getCurrentStoryData();
+
+  return [args, (newArgs: Args) => setStoryArgs(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';
 
 export type StoryId = string;
@@ -57,6 +59,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 { CHANGE_STORY_ARGS, STORY_ARGS_CHANGED } 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;
@@ -45,6 +46,8 @@ const initStoriesApi = ({
   storyId: initialStoryId,
   viewMode: initialViewMode,
 }: Module) => {
+  let fullApi: API;
+
   const getData = (storyId: StoryId) => {
     const { storiesHash } = store.getState();
 
@@ -233,6 +236,24 @@ const initStoriesApi = ({
     }
   };
 
+  const storyArgsChanged = (id: StoryId, args: Args) => {
+    const { storiesHash } = store.getState();
+    (storiesHash[id] as Story).args = args;
+    store.setState({ storiesHash });
+  };
+
+  const setStoryArgs = (id: StoryId, newArgs: Args) => {
+    if (!fullApi) throw new Error('Cannot set story args until api has been initialized');
+
+    fullApi.emit(CHANGE_STORY_ARGS, id, newArgs);
+  };
+
+  function init({ api: inputFullApi }: { api: API }) {
+    fullApi = inputFullApi;
+
+    fullApi.on(STORY_ARGS_CHANGED, (id: StoryId, args: Args) => storyArgsChanged(id, args));
+  }
+
   return {
     api: {
       storyId: toId,
@@ -244,13 +265,15 @@ const initStoriesApi = ({
       getData,
       getParameters,
       getCurrentParameter,
+      setStoryArgs,
     },
     state: {
       storiesHash: {},
       storyId: initialStoryId,
       viewMode: initialViewMode,
       storiesConfigured: false,
     },
+    init,
   };
 };
 export default initStoriesApi;