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

refactor(addon-controls): improve argTypes filter

Browse Source
This commit is contained in:
Yann Braga 2021-01-22 18:12:49 +01:00
parent 83dbebaee0
commit 09bc787a63
2 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
examples/official-storybook/stories/addon-controls.stories.tsx
View File

@ -50,3 +50,46 @@ CyclicArgs.args = {
CyclicArgs.parameters = {
chromatic: { disable: true },
};
export const FilteredWithInclude = Template.bind({});
FilteredWithInclude.parameters = {
controls: {
include: ['Children'],
},
};
export const FilteredWithIncludeRegex = Template.bind({});
FilteredWithIncludeRegex.args = {
helloWorld: 1,
helloPlanet: 1,
byeWorld: 1,
};
FilteredWithIncludeRegex.parameters = {
controls: {
include: /hello*/,
},
};
export const FilteredWithExclude = Template.bind({});
FilteredWithExclude.args = {
helloWorld: 1,
helloPlanet: 1,
byeWorld: 1,
};
FilteredWithExclude.parameters = {
controls: {
exclude: ['helloPlanet', 'helloWorld'],
},
};
export const FilteredWithExcludeRegex = Template.bind({});
FilteredWithExcludeRegex.args = {
helloWorld: 1,
helloPlanet: 1,
byeWorld: 1,
};
FilteredWithExcludeRegex.parameters = {
controls: {
exclude: /hello*/,
},
};

34
lib/client-api/src/inferControls.ts
View File

@ -2,11 +2,7 @@ import mapValues from 'lodash/mapValues';
import { ArgType } from '@storybook/addons';
import { SBEnumType, ArgTypesEnhancer } from './types';
import { combineParameters } from './parameters';
type ControlsConfig = {
include?: string[];
exclude?: string[];
};
import { filterArgTypes } from './filterArgTypes';
const inferControl = (argType: ArgType): any => {
const { type } = argType;
@ -47,36 +43,16 @@ const inferControl = (argType: ArgType): any => {
}
};
const includeExcludeCheck = (key: string, { include, exclude }: ControlsConfig) => {
if (include && exclude) {
throw new Error(
`Addon-controls: found both "include" and "exclude" keys in parameter. You should use only one of them.`
);
}
if (include && include.length) {
return include.indexOf(key) !== -1;
}
if (exclude && exclude.length) {
return exclude.indexOf(key) === -1;
}
return true;
};
export const inferControls: ArgTypesEnhancer = (context) => {
const { __isArgsStory, argTypes, controls: controlsConfig } = context.parameters;
const { __isArgsStory, argTypes, controls: controlsConfig = {} } = context.parameters;
if (!__isArgsStory) return argTypes;
let filteredArgTypes = argTypes;
if (controlsConfig.include || controlsConfig.exclude) {
filteredArgTypes = argTypes.filter((name: string) => includeExcludeCheck(name, controlsConfig));
}
const filteredArgTypes = filterArgTypes(argTypes, controlsConfig.include, controlsConfig.exclude);
const withControls = mapValues(filteredArgTypes, (argType, name) => {
const withControls = mapValues(filteredArgTypes, (argType) => {
const control = argType && argType.type && inferControl(argType);
return control ? { control } : undefined;
});
return combineParameters(withControls, filteredArgTypes);
};