Allow setting project args/argTypes for v6 store

examples/official-storybook/preview.js

@@ -243,3 +243,6 @@ export const globalTypes = {
 };
 
 export const loaders = [async () => ({ globalValue: 1 })];
+
+export const argTypes = { color: { control: 'color' } };
+export const args = { color: 'red' };

lib/builder-webpack4/src/preview/virtualModuleEntry.template.js

@@ -3,19 +3,22 @@ import {
   addDecorator,
   addParameters,
   addLoader,
+  addArgs,
+  addArgTypes,
   addArgsEnhancer,
   addArgTypesEnhancer,
   setGlobalRender,
 } from '{{clientApi}}';
-import { logger } from '{{clientLogger}}';
 import * as config from '{{configFilename}}';
 
 Object.keys(config).forEach((key) => {
   const value = config[key];
   switch (key) {
-    case 'args':
+    case 'args': {
+      return addArgs(value);
+    }
     case 'argTypes': {
-      return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+      return addArgTypes(value);
     }
     case 'decorators': {
       return value.forEach((decorator) => addDecorator(decorator, false));

lib/builder-webpack5/src/preview/virtualModuleEntry.template.js

@@ -3,19 +3,22 @@ import {
   addDecorator,
   addParameters,
   addLoader,
+  addArgs,
+  addArgTypes,
   addArgsEnhancer,
   addArgTypesEnhancer,
   setGlobalRender,
 } from '{{clientApi}}';
-import { logger } from '{{clientLogger}}';
 import * as config from '{{configFilename}}';
 
 Object.keys(config).forEach((key) => {
   const value = config[key];
   switch (key) {
-    case 'args':
+    case 'args': {
+      return addArgs(value);
+    }
     case 'argTypes': {
-      return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+      return addArgTypes(value);
     }
     case 'decorators': {
       return value.forEach((decorator) => addDecorator(decorator, false));

lib/client-api/src/ClientApi.ts

@@ -3,6 +3,8 @@ import dedent from 'ts-dedent';
 import global from 'global';
 import { logger } from '@storybook/client-logger';
 import {
+  Args,
+  ArgTypes,
   AnyFramework,
   toId,
   DecoratorFunction,
@@ -103,6 +105,16 @@ export const addLoader = (loader: LoaderFunction<AnyFramework>, deprecationWarni
   singleton.addLoader(loader);
 };
 
+export const addArgs = (args: Args) => {
+  checkMethod('addArgs', false);
+  singleton.addArgs(args);
+};
+
+export const addArgTypes = (argTypes: ArgTypes) => {
+  checkMethod('addArgTypes', false);
+  singleton.addArgTypes(argTypes);
+};
+
 export const addArgsEnhancer = (enhancer: ArgsEnhancer<AnyFramework>) => {
   checkMethod('addArgsEnhancer', false);
   singleton.addArgsEnhancer(enhancer);
@@ -211,6 +223,20 @@ export class ClientApi<TFramework extends AnyFramework> {
     this.facade.projectAnnotations.loaders.push(loader);
   };
 
+  addArgs = (args: Args) => {
+    this.facade.projectAnnotations.args = {
+      ...this.facade.projectAnnotations.args,
+      ...args,
+    };
+  };
+
+  addArgTypes = (argTypes: ArgTypes) => {
+    this.facade.projectAnnotations.argTypes = {
+      ...this.facade.projectAnnotations.argTypes,
+      ...normalizeInputTypes(argTypes),
+    };
+  };
+
   addArgsEnhancer = (enhancer: ArgsEnhancer<TFramework>) => {
     this.facade.projectAnnotations.argsEnhancers.push(enhancer);
   };

lib/client-api/src/StoryStoreFacade.ts

@@ -49,6 +49,8 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
       parameters: {},
       argsEnhancers: [],
       argTypesEnhancers: [],
+      args: {},
+      argTypes: {},
     };
 
     this.stories = {};

lib/client-api/src/index.ts

@@ -3,6 +3,8 @@ import {
   addDecorator,
   addParameters,
   addLoader,
+  addArgs,
+  addArgTypes,
   addArgsEnhancer,
   addArgTypesEnhancer,
   setGlobalRender,
@@ -19,6 +21,8 @@ export {
   addArgTypesEnhancer,
   addDecorator,
   addLoader,
+  addArgs,
+  addArgTypes,
   addParameters,
   setGlobalRender,
   ClientApi,