GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 23:01:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'core/ingestion' of github.com:storybookjs/storybook into core/ingestion

Browse Source
This commit is contained in:
Norbert de Langen 2020-03-13 12:20:45 +01:00
commit 60e684a612
15 changed files with 313 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.teamcity/patches/templates/Common.kts vendored
View File

@ -1,17 +0,0 @@
package patches.templates
import jetbrains.buildServer.configs.kotlin.v2019_2.*
import jetbrains.buildServer.configs.kotlin.v2019_2.ui.*
/*
This patch script was generated by TeamCity on settings change in UI.
To apply the patch, change the template with id = 'Common'
accordingly, and delete the patch script.
*/
changeTemplate(RelativeId("Common")) {
requirements {
add {
doesNotContain("system.agent.name", "tiny", "RQ_1")
}
}
}

207
.teamcity/settings.kts vendored
View File

@ -43,8 +43,6 @@ project {
buildType(TestWorkflow)
buildType(Build)
buildType(Chromatic)
buildType(Packtracker)
buildType(E2E)
buildType(SmokeTests)
buildType(Frontpage)
@ -54,13 +52,10 @@ project {
buildType(Coverage)
subProject(ExamplesProject)
subProject(ChromaticProject)
buildTypesOrderIds = arrayListOf(
RelativeId("TestWorkflow"),
RelativeId("Build"),
RelativeId("Packtracker"),
RelativeId("Chromatic"),
RelativeId("E2E"),
RelativeId("SmokeTests"),
RelativeId("Frontpage"),
@ -97,7 +92,7 @@ object Common: Template({
features {
commitStatusPublisher {
id = "BUILD_EXT_1"
id = "Commit status publisher"
publisher = github {
githubUrl = "https://api.github.com"
authType = personalToken {
@ -110,12 +105,13 @@ object Common: Template({
id = "swabra"
verbose = true
paths = """
-:.cache
-:node_modules
-:**/node_modules
""".trimIndent()
}
pullRequests {
id = "BUILD_EXT_2"
id = "Pull requests"
provider = github {
authType = vcsRoot()
filterAuthorRole = PullRequests.GitHubRoleFilter.EVERYBODY
@ -149,41 +145,6 @@ object Build : BuildType({
""".trimIndent()
})
object Packtracker : BuildType({
name = "Packtracker"
description = "Report webpack stats for manager of official storybook"
dependencies {
dependency(Build) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "dist.tar.gz!** => ."
}
}
}
steps {
script {
workingDir = "examples/official-storybook"
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn packtracker
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
params {
param("env.PT_BRANCH", "%teamcity.build.branch%")
}
})
object ExamplesProject : Project({
name = "Examples"
@ -242,6 +203,8 @@ object Examples1 : BuildType({
params {
param("env.CIRCLE_NODE_INDEX", "0")
}
disableSettings("Commit status publisher")
})
object Examples2 : BuildType({
@ -251,6 +214,8 @@ object Examples2 : BuildType({
params {
param("env.CIRCLE_NODE_INDEX", "1")
}
disableSettings("Commit status publisher")
})
object Examples3 : BuildType({
@ -260,6 +225,8 @@ object Examples3 : BuildType({
params {
param("env.CIRCLE_NODE_INDEX", "2")
}
disableSettings("Commit status publisher")
})
object Examples4 : BuildType({
@ -269,6 +236,8 @@ object Examples4 : BuildType({
params {
param("env.CIRCLE_NODE_INDEX", "3")
}
disableSettings("Commit status publisher")
})
object Examples5 : BuildType({
@ -278,6 +247,8 @@ object Examples5 : BuildType({
params {
param("env.CIRCLE_NODE_INDEX", "4")
}
disableSettings("Commit status publisher")
})
object AggregateExamples : BuildType({
@ -329,156 +300,6 @@ object AggregateExamples : BuildType({
artifactRules = "built-storybooks => built-storybooks.tar.gz"
})
object ChromaticProject : Project({
name = "Chromatic"
buildType(Chromatic1)
buildType(Chromatic2)
buildType(Chromatic3)
buildType(Chromatic4)
})
object Chromatic1 : BuildType({
name = "Chromatic 1"
dependencies {
dependency(AggregateExamples) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --app-code="tl92yzsj6w"
yarn chromatic --storybook-build-dir="built-storybooks/cra-kitchen-sink" --app-code="tg55gajmdt"
yarn chromatic --storybook-build-dir="built-storybooks/cra-react15" --app-code="gxk7iqej3wt"
yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-essentials" --app-code="b311ypk6of"
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
})
object Chromatic2 : BuildType({
name = "Chromatic 2"
dependencies {
dependency(AggregateExamples) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn chromatic --storybook-build-dir="built-storybooks/cra-ts-kitchen-sink" --app-code="19whyj1tlac"
yarn chromatic --storybook-build-dir="built-storybooks/dev-kits" --app-code="7yykp9ifdxx"
yarn chromatic --storybook-build-dir="built-storybooks/ember-cli" --app-code="19z23qxndju"
yarn chromatic --storybook-build-dir="built-storybooks/html-kitchen-sink" --app-code="e8zolxoyg8o"
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
})
object Chromatic3 : BuildType({
name = "Chromatic 3"
dependencies {
dependency(AggregateExamples) {
snapshot {
onDependencyFailure = FailureAction.IGNORE
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn chromatic --storybook-build-dir="built-storybooks/marko-cli" --app-code="qaegx64axu"
yarn chromatic --storybook-build-dir="built-storybooks/mithril-kitchen-sink" --app-code="8adgm46jzk8"
yarn chromatic --storybook-build-dir="built-storybooks/preact-kitchen-sink" --app-code="ls0ikhnwqt"
yarn chromatic --storybook-build-dir="built-storybooks/rax-kitchen-sink" --app-code="4co6vptx8qo"
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
})
object Chromatic4 : BuildType({
name = "Chromatic 4"
dependencies {
dependency(AggregateExamples) {
snapshot {
onDependencyFailure = FailureAction.CANCEL
}
artifacts {
artifactRules = "built-storybooks.tar.gz!** => built-storybooks"
}
}
}
steps {
script {
scriptContent = """
#!/bin/bash
set -e -x
yarn install
yarn chromatic --storybook-build-dir="built-storybooks/riot-kitchen-sink" --app-code="g2dp3lnr34a"
yarn chromatic --storybook-build-dir="built-storybooks/svelte-kitchen-sink" --app-code="8ob73wgl995"
yarn chromatic --storybook-build-dir="built-storybooks/vue-kitchen-sink" --app-code="cyxj0e38bqj"
yarn chromatic --storybook-build-dir="built-storybooks/web-components-kitchen-sink" --app-code="npm5gsofwkf"
""".trimIndent()
dockerImage = "node:10"
dockerImagePlatform = ScriptBuildStep.ImagePlatform.Linux
}
}
})
object Chromatic : BuildType({
name = "Chromatic"
type = Type.COMPOSITE
dependencies {
snapshot(Chromatic1) {}
snapshot(Chromatic2) {}
snapshot(Chromatic3) {}
snapshot(Chromatic4) {}
}
})
object E2E : BuildType({
name = "E2E"
@ -772,8 +593,6 @@ object TestWorkflow : BuildType({
maxRunningBuilds = 2
dependencies {
snapshot(Chromatic) {}
snapshot(Packtracker) {}
snapshot(E2E) {}
snapshot(SmokeTests) {}
snapshot(Lint) {}

85
addons/actions/README.md
View File

@ -18,10 +18,45 @@ Then, add following content to `.storybook/main.js`
```js
module.exports = {
addons: ['@storybook/addon-actions']
}
addons: ['@storybook/addon-actions'],
};
```
## Actions args
Starting in SB6.0, we recommend using story parameters to specify actions which get passed into your story as [Args](https://docs.google.com/document/d/1Mhp1UFRCKCsN8pjlfPdz8ZdisgjNXeMXpXvGoALjxYM/edit?usp=sharing) (passed as the first argument when `passArgsFirst` is set to `true`).
The first option is to specify `argTypes` for your story with an `action` field. Take the following example:
```js
import Button from './button';
export default {
title: 'Button',
argTypes: { onClick: { action: 'clicked' } },
};
export const Basic = ({ onClick }) => <Button onClick={onClick}>Hello World!</Button>;
```
Alternatively, suppose you have a naming convention, like `onX` for event handlers. The following configuration automatically creates actions for each `onX` `argType` (which you can either specify manually or generate automatically using [Storybook Docs](https://www.npmjs.com/package/@storybook/addon-docs).
```js
import Button from './button';
export default {
title: 'Button',
component: Button,
parameters: { actions: { argTypesRegex: '^on.*' } },
};
export const Basic = ({ onClick }) => <Button onClick={onClick}>Hello World!</Button>;
```
> **NOTE:** If you're generating `argTypes` in using another addon (like Docs, which is the common behavior) you'll need to make sure that the actions addon loads **AFTER** the other addon. You can do this by listing it later in the `addons` registration code in `.storybook/main.js`.
## Manually-specified actions
Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/storybookjs/storybook-addon-actions/issues/29#issuecomment-288274794)_
@ -35,9 +70,7 @@ export default {
component: Button,
};
export const defaultView = () => (
<Button onClick={action('button-click')}>Hello World!</Button>
);
export const defaultView = () => <Button onClick={action('button-click')}>Hello World!</Button>;
```
## Multiple actions
@ -59,13 +92,9 @@ const eventsFromNames = actions('onClick', 'onMouseOver');
// This will lead to { onClick: action('clicked'), ... }
const eventsFromObject = actions({ onClick: 'clicked', onMouseOver: 'hovered' });
export const first = () => (
<Button {...eventsFromNames}>Hello World!</Button>
);
export const first = () => <Button {...eventsFromNames}>Hello World!</Button>;
export const second = () => (
<Button {...eventsFromObject}>Hello World!</Button>
);
export const second = () => <Button {...eventsFromObject}>Hello World!</Button>;
```
## Action Decorators
@ -85,22 +114,16 @@ export default {
const firstArg = decorate([args => args.slice(0, 1)]);
export const first = () => (
<Button onClick={firstArg.action('button-click')}>Hello World!</Button>
);
export const first = () => <Button onClick={firstArg.action('button-click')}>Hello World!</Button>;
```
## Configuration
Arguments which are passed to the action call will have to be serialized while be "transferred"
over the channel.
Arguments which are passed to the action call will have to be serialized while be "transferred" over the channel.
This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible
to configure a maximum depth.
This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible to configure a maximum depth.
The action logger, by default, will log all actions fired during the lifetime of the story. After a while
this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should
be logged.
The action logger, by default, will log all actions fired during the lifetime of the story. After a while this can make the storybook laggy. As a workaround, you can configure an upper limit to how many actions should be logged.
To apply the configuration globally use the `configureActions` function in your `preview.js` file.
@ -115,6 +138,7 @@ configureActions({
```
To apply the configuration per action use:
```js
action('my-action', {
depth: 5,
@ -123,16 +147,15 @@ action('my-action', {
### Available Options
|Name|Type|Description|Default|
|---|---|---|---|
|`depth`|Number|Configures the transferred depth of any logged objects.|`10`|
|`clearOnStoryChange`|Boolean|Flag whether to clear the action logger when switching away from the current story.|`true`|
|`limit`|Number|Limits the number of items logged in the action logger|`50`|
| Name | Type | Description | Default |
| -------------------- | ------- | ----------------------------------------------------------------------------------- | ------- |
| `depth` | Number | Configures the transferred depth of any logged objects. | `10` |
| `clearOnStoryChange` | Boolean | Flag whether to clear the action logger when switching away from the current story. | `true` |
| `limit` | Number | Limits the number of items logged in the action logger | `50` |
## withActions decorator
You can define action handles in a declarative way using `withActions` decorators. It accepts the same arguments as [`actions`](#multiple-actions)
Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
You can define action handles in a declarative way using `withActions` decorators. It accepts the same arguments as [`actions`](#multiple-actions). Keys have `'<eventName> <selector>'` format, e.g. `'click .btn'`. Selector is optional. This can be used with any framework but is especially useful for `@storybook/html`.
```js
import { withActions } from '@storybook/addon-actions';
@ -140,10 +163,8 @@ import Button from './button';
export default {
title: 'Button',
decorators: [withActions('mouseover', 'click .btn')]
decorators: [withActions('mouseover', 'click .btn')],
};
export const first = () => (
<Button className="btn">Hello World!</Button>
);
export const first = () => <Button className="btn">Hello World!</Button>;
```

1
addons/actions/preset.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./dist/preset');

67
addons/actions/src/preset/addArgs.test.ts Normal file
View File

@ -0,0 +1,67 @@
import { StoryContext } from '@storybook/addons';
import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgs';
describe('actions parameter enhancers', () => {
describe('actions.argTypesRegex parameter', () => {
const baseParameters = {
argTypes: { onClick: {}, onFocus: {}, somethingElse: {} },
actions: { argTypesRegex: '^on.*' },
};
it('should add actions that match a pattern', () => {
const parameters = baseParameters;
const { args } = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onFocus']);
});
it('should prioritize pre-existing args', () => {
const parameters = {
...baseParameters,
args: { onClick: 'pre-existing arg' },
};
const { args } = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onFocus']);
expect(args.onClick).toEqual('pre-existing arg');
});
it('should do nothing if actions are disabled', () => {
const parameters = {
...baseParameters,
actions: { ...baseParameters.actions, disable: true },
};
const result = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
expect(result).toBeFalsy();
});
});
describe('argTypes.action parameter', () => {
const baseParameters = {
argTypes: {
onClick: { action: 'clicked!' },
onBlur: { action: 'blurred!' },
},
};
it('should add actions based on action.args', () => {
const parameters = baseParameters;
const { args } = addActionsFromArgTypes({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onBlur']);
});
it('should prioritize pre-existing args', () => {
const parameters = {
...baseParameters,
args: { onClick: 'pre-existing arg' },
};
const { args } = addActionsFromArgTypes({ parameters } as StoryContext);
expect(Object.keys(args)).toEqual(['onClick', 'onBlur']);
expect(args.onClick).toEqual('pre-existing arg');
});
it('should do nothing if actions are disabled', () => {
const parameters = { ...baseParameters, actions: { disable: true } };
const result = addActionsFromArgTypes({ parameters } as StoryContext);
expect(result).toBeFalsy();
});
});
});

57
addons/actions/src/preset/addArgs.ts Normal file
View File

@ -0,0 +1,57 @@
import { ParameterEnhancer, combineParameters } from '@storybook/client-api';
import { Args, ArgType } from '@storybook/addons';
import { action } from '../index';
// interface ActionsParameter {
// disable?: boolean;
// argTypesRegex?: RegExp;
// }
/**
* Automatically add action args for argTypes whose name
* matches a regex, such as `^on.*` for react-style `onClick` etc.
*/
export const inferActionsFromArgTypesRegex: ParameterEnhancer = context => {
const { args, actions, argTypes } = context.parameters;
if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
return null;
}
const argTypesRegex = new RegExp(actions.argTypesRegex);
const actionArgs = Object.keys(argTypes).reduce((acc, name) => {
if (argTypesRegex.test(name)) {
acc[name] = action(name);
}
return acc;
}, {} as Args);
return {
args: combineParameters(actionArgs, args),
};
};
/**
* Add action args for list of strings.
*/
export const addActionsFromArgTypes: ParameterEnhancer = context => {
const { args, argTypes, actions } = context.parameters;
if (actions?.disable || !argTypes) {
return null;
}
const actionArgs = Object.keys(argTypes).reduce((acc, argName) => {
const argType: ArgType = argTypes[argName];
if (argType.action) {
const message = typeof argType.action === 'string' ? argType.action : argName;
acc[argName] = action(message);
}
return acc;
}, {} as Args);
return {
args: combineParameters(actionArgs, args),
};
};
export const parameterEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];

7
addons/actions/src/preset/index.ts Normal file
View File

@ -0,0 +1,7 @@
export function managerEntries(entry: any[] = [], options: any) {
return [...entry, require.resolve('../../register')];
}
export function config(entry: any[] = []) {
return [...entry, require.resolve('./addArgs')];
}

10
addons/actions/tsconfig.json
View File

@ -2,12 +2,8 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env"]
"types": ["webpack-env", "jest"]
},
"include": [
"src/**/*"
],
"exclude": [
"src/__tests__/**/*"
]
"include": ["src/**/*"],
"exclude": ["src/__tests__/**/*", "src/**/*.test.ts"]
}

12
examples/official-storybook/preview.js
View File

@ -57,4 +57,16 @@ addParameters({
export const parameters = {
exportedParameter: 'exportedParameter',
args: { invalid1: 'will warn' },
};
export const args = { invalid2: 'will warn' };
export const globalArgs = {
foo: 'fooValue',
};
export const globalArgTypes = {
foo: { defaultValue: 'fooDefaultValue' },
bar: { defaultValue: 'barDefaultValue' },
};

27
examples/official-storybook/stories/addon-actions.stories.js
View File

@ -1,3 +1,4 @@
/* eslint-disable react/prop-types */
import { window, File } from 'global';
import React, { Fragment } from 'react';
import { action, actions, configureActions, decorate } from '@storybook/addon-actions';
@ -10,12 +11,38 @@ const pickNative = decorate([args => [args[0].nativeEvent]]);
export default {
title: 'Addons/Actions',
parameters: {
passArgsFirst: true,
options: {
selectedPanel: 'storybook/actions/panel',
},
},
};
export const ArgTypesExample = ({ onClick, onFocus }) => (
<Button {...{ onClick, onFocus }}>Hello World</Button>
);
ArgTypesExample.story = {
argTypes: {
onClick: { action: 'clicked!' },
onFocus: { action: true },
},
};
export const ArgTypesRegexExample = (args, context) => {
const { someFunction, onClick, onFocus } = args;
return (
<Button onMouseOver={someFunction} {...{ onClick, onFocus }}>
Hello World
</Button>
);
};
ArgTypesRegexExample.story = {
parameters: { actions: { argTypesRegex: '^on.*' } },
argTypes: { someFunction: {}, onClick: {}, onFocus: {} },
};
export const BasicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
BasicExample.story = {

11
lib/addons/src/types.ts
View File

@ -33,6 +33,17 @@ export interface Args {
[key: string]: any;
}
export interface ArgType {
name?: string;
description?: string;
defaultValue?: any;
[key: string]: any;
}
export interface ArgTypes {
[key: string]: ArgType;
}
export interface StoryIdentifier {
id: StoryId;
kind: StoryKind;

2
lib/client-api/src/index.ts
View File

@ -1,5 +1,6 @@
import ClientApi, { addDecorator, addParameters, addParameterEnhancer } from './client_api';
import { defaultDecorateStory } from './decorators';
import { combineParameters } from './parameters';
import StoryStore from './story_store';
import ConfigApi from './config_api';
import pathToId from './pathToId';
@ -15,6 +16,7 @@ export {
addDecorator,
addParameters,
addParameterEnhancer,
combineParameters,
StoryStore,
ConfigApi,
defaultDecorateStory,

20
lib/client-api/src/story_store.test.ts
View File

@ -216,6 +216,26 @@ describe('preview.story_store', () => {
});
});
it('is initialized to the default values stored in parameters.globalArgsTypes on the first story', () => {
const store = new StoryStore({ channel });
addStoryToStore(store, 'a', '1', () => 0, {
globalArgs: {
arg1: 'arg1',
arg2: 2,
},
globalArgTypes: {
arg2: { defaultValue: 'arg2' },
arg3: { defaultValue: { complex: { object: ['type'] } } },
},
});
store.finishConfiguring();
expect(store.getRawStory('a', '1').globalArgs).toEqual({
arg1: 'arg1',
arg2: 2,
arg3: { complex: { object: ['type'] } },
});
});
it('on HMR it sensibly re-initializes with memory', () => {
const store = new StoryStore({ channel });
addons.setChannel(channel);

37
lib/client-api/src/story_store.ts
View File

@ -53,6 +53,18 @@ const includeStory = (story: StoreItem, options: StoryOptions = { includeDocsOnl
return !isStoryDocsOnly(story.parameters);
};
const checkGlobalArgs = (parameters: Parameters) => {
const { globalArgs, globalArgTypes } = parameters;
if (globalArgs || globalArgTypes) {
throw new Error(
`Global args/argTypes can only be set globally: ${JSON.stringify({
globalArgs,
globalArgTypes,
})}`
);
}
};
type AllowUnsafeOption = { allowUnsafe?: boolean };
const toExtracted = <T>(obj: T) =>
@ -138,9 +150,19 @@ export default class StoryStore {
const storyIds = Object.keys(this._stories);
if (storyIds.length) {
const {
parameters: { globalArgs },
parameters: { globalArgs: initialGlobalArgs, globalArgTypes },
} = this.fromId(storyIds[0]);
const defaultGlobalArgs: Args = globalArgTypes
? Object.entries(globalArgTypes as Record<string, { defaultValue: any }>).reduce(
(acc, [arg, { defaultValue }]) => {
if (defaultValue) acc[arg] = defaultValue;
return acc;
},
{} as Args
)
: {};
// To deal with HMR, we consider the previous value of global args, and:
// 1. Remove any keys that are not in the new parameter
// 2. Preference any keys that were already set
@ -151,12 +173,20 @@ export default class StoryStore {
return acc;
},
globalArgs
{ ...defaultGlobalArgs, ...initialGlobalArgs }
);
}
}
addGlobalMetadata({ parameters, decorators }: StoryMetadata) {
if (parameters) {
const { args, argTypes } = parameters;
if (args || argTypes)
logger.warn(
'Found args/argTypes in global parameters.',
JSON.stringify({ args, argTypes })
);
}
const globalParameters = this._globalMetadata.parameters;
this._globalMetadata.parameters = combineParameters(globalParameters, parameters);
@ -180,6 +210,7 @@ export default class StoryStore {
addKindMetadata(kind: string, { parameters, decorators }: StoryMetadata) {
this.ensureKind(kind);
if (parameters) checkGlobalArgs(parameters);
this._kinds[kind].parameters = combineParameters(this._kinds[kind].parameters, parameters);
this._kinds[kind].decorators.push(...decorators);
@ -213,6 +244,8 @@ export default class StoryStore {
'Cannot add a story when not configuring, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-store-immutable-outside-of-configuration'
);
if (storyParameters) checkGlobalArgs(storyParameters);
const { _stories } = this;
if (_stories[id]) {

8
lib/core/src/server/preview/iframe-webpack.config.js
View File

@ -54,13 +54,15 @@ export default ({
const configFilename = match[1];
virtualModuleMapping[entryFilename] = `
import { addDecorator, addParameters, addParameterEnhancer } from '@storybook/client-api';
import { logger } from '@storybook/client-logger';
const { decorators, parameters,parameterEnhancers } = require(${JSON.stringify(
const { decorators, parameters, parameterEnhancers, globalArgs, globalArgTypes, args, argTypes } = require(${JSON.stringify(
configFilename
)});
if(args || argTypes) logger.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify({ args, argTypes }));
if (decorators) decorators.forEach(decorator => addDecorator(decorator));
if (parameters) addParameters(parameters);
if (parameters || globalArgs || globalArgTypes) addParameters({ ...parameters, globalArgs, globalArgTypes });
if (parameterEnhancers) parameterEnhancers.forEach(enhancer => addParameterEnhancer(enhancer));
`;
}