Allow setting global args in SB 6.5+ (#399)

examples/react-ts/.storybook/preview.ts

@@ -7,3 +7,7 @@ export const parameters = {
     },
   },
 };
+
+export const argTypes = { globalArg: { options: ['A', 'B'], control: 'select' } };
+
+export const args = { globalArg: 'A' };

examples/react-ts/README.md

@@ -1,3 +1,5 @@
 # React TypesScript
 
 This example demonstrates storybook in a React v16 project using TypeScript.
+
+It also uses the v7 story store, and demonstrates the use of global args.

examples/react/.storybook/preview.js

@@ -7,3 +7,7 @@ export const parameters = {
     },
   },
 };
+
+export const argTypes = { globalArg: { options: ['A', 'B'], control: 'select' } };
+
+export const args = { globalArg: 'A' };

examples/react/README.md

@@ -3,3 +3,5 @@
 This example demonstrates storybook in a React v16 project.
 
 It uses autotitle for some stories, but without a configuration object, a `titlePrefix` cannot be defined.
+
+This example also demonstrates global arg configuration in a v6 story store project.

packages/builder-vite/codegen-iframe-script.ts

@@ -22,28 +22,44 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
     // is loaded. That way our client-apis can assume the existence of the API+store
     import { configure } from '${frameworkImportPath}';
 
-    import {
+    import * as clientApi from "@storybook/client-api";
+    import { logger } from '@storybook/client-logger';
+    ${absoluteFilesToImport(configEntries, 'config')}
+    import * as preview from '${virtualPreviewFile}';
+    import { configStories } from '${virtualStoriesFile}';
+
+    const {
       addDecorator,
       addParameters,
       addLoader,
       addArgTypesEnhancer,
       addArgsEnhancer,
-      setGlobalRender
-    } from '@storybook/client-api';
-    import { logger } from '@storybook/client-logger';
-    ${absoluteFilesToImport(configEntries, 'config')}
-    import * as preview from '${virtualPreviewFile}';
-    import { configStories } from '${virtualStoriesFile}';
+      setGlobalRender,
+    } = clientApi;
 
     const configs = [${importArray('config', configEntries.length).concat('preview.default').join(',')}].filter(Boolean)
 
     configs.forEach(config => {
       Object.keys(config).forEach((key) => {
         const value = config[key];
         switch (key) {
-          case 'args':
+          case 'args': {
+            if (typeof clientApi.addArgs !== "undefined") {
+              return clientApi.addArgs(value);
+            } else {
+              return logger.warn(
+                "Could not add global args. Please open an issue in storybookjs/builder-vite."
+              );
+            }
+          }
           case 'argTypes': {
-            return logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
+            if (typeof clientApi.addArgTypes !== "undefined") {
+              return clientApi.addArgTypes(value);
+            } else {
+              return logger.warn(
+                "Could not add global argTypes. Please open an issue in storybookjs/builder-vite."
+              );
+            }
           }
           case 'decorators': {
             return value.forEach((decorator) => addDecorator(decorator, false));