From d2748e20f78d61f7f38c63ce85c4a50e97b22966 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 20 Dec 2021 14:50:02 +1100 Subject: [PATCH 1/2] Allow setting project arg(Type)s for v6 store --- examples/official-storybook/preview.js | 3 +++ .../preview/virtualModuleEntry.template.js | 8 ++++-- .../preview/virtualModuleEntry.template.js | 8 ++++-- lib/client-api/src/ClientApi.ts | 26 +++++++++++++++++++ lib/client-api/src/StoryStoreFacade.ts | 2 ++ lib/client-api/src/index.ts | 4 +++ 6 files changed, 47 insertions(+), 4 deletions(-) diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js index c2131c0ebc93..638d31b1af82 100644 --- a/examples/official-storybook/preview.js +++ b/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' }; diff --git a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js index cd9e191534da..9c737c712c00 100644 --- a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js @@ -3,6 +3,8 @@ import { addDecorator, addParameters, addLoader, + addArgs, + addArgTypes, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender, @@ -13,9 +15,11 @@ 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)); diff --git a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js index cd9e191534da..9c737c712c00 100644 --- a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js @@ -3,6 +3,8 @@ import { addDecorator, addParameters, addLoader, + addArgs, + addArgTypes, addArgsEnhancer, addArgTypesEnhancer, setGlobalRender, @@ -13,9 +15,11 @@ 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)); diff --git a/lib/client-api/src/ClientApi.ts b/lib/client-api/src/ClientApi.ts index 964a1c7e68ef..bcd0d321c816 100644 --- a/lib/client-api/src/ClientApi.ts +++ b/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, 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) => { checkMethod('addArgsEnhancer', false); singleton.addArgsEnhancer(enhancer); @@ -211,6 +223,20 @@ export class ClientApi { 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) => { this.facade.projectAnnotations.argsEnhancers.push(enhancer); }; diff --git a/lib/client-api/src/StoryStoreFacade.ts b/lib/client-api/src/StoryStoreFacade.ts index 2a27797acb98..1a3b5bacec5d 100644 --- a/lib/client-api/src/StoryStoreFacade.ts +++ b/lib/client-api/src/StoryStoreFacade.ts @@ -49,6 +49,8 @@ export class StoryStoreFacade { parameters: {}, argsEnhancers: [], argTypesEnhancers: [], + args: {}, + argTypes: {}, }; this.stories = {}; diff --git a/lib/client-api/src/index.ts b/lib/client-api/src/index.ts index 6d1e77ef7370..e1b780cc2d6b 100644 --- a/lib/client-api/src/index.ts +++ b/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, From 0c63303ba88b1fedf25e83aa24fc6d95b1e007ed Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 6 Jan 2022 01:04:02 +0800 Subject: [PATCH 2/2] Fix deepscan --- lib/builder-webpack4/src/preview/virtualModuleEntry.template.js | 1 - lib/builder-webpack5/src/preview/virtualModuleEntry.template.js | 1 - 2 files changed, 2 deletions(-) diff --git a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js index 9c737c712c00..c02aa235a0ad 100644 --- a/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js @@ -9,7 +9,6 @@ import { addArgTypesEnhancer, setGlobalRender, } from '{{clientApi}}'; -import { logger } from '{{clientLogger}}'; import * as config from '{{configFilename}}'; Object.keys(config).forEach((key) => { diff --git a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js index 9c737c712c00..c02aa235a0ad 100644 --- a/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js +++ b/lib/builder-webpack5/src/preview/virtualModuleEntry.template.js @@ -9,7 +9,6 @@ import { addArgTypesEnhancer, setGlobalRender, } from '{{clientApi}}'; -import { logger } from '{{clientLogger}}'; import * as config from '{{configFilename}}'; Object.keys(config).forEach((key) => {