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

Merge pull request #11284 from storybookjs/fix/simplify-argtypes-inference

Browse Source 
Addon-docs: Simplify argType inference
This commit is contained in:
Michael Shilman 2020-06-24 11:08:38 +08:00 committed by GitHub
commit b0fb4550e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
addons/controls/README.md
View File

@ -247,12 +247,7 @@ This generates the following UI with a custom range slider:
<img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" />
</center>
**Note:** If you add an `ArgType` that is not part of the component, Storybook will _only_ use your argTypes definitions.
If you want to merge new controls with the existing component properties, you must enable this parameter:
```jsx
docs: { forceExtractedArgTypes: true },
```
**Note:** If you set a `component` for your stories, these `argTypes` will always be added automatically. If you ONLY want to use custom `argTypes`, don't set a `component`. You can still show metadata about your component by adding it to `subcomponents`.
#### Angular

8
addons/docs/src/frameworks/common/enhanceArgTypes.test.ts
View File

@ -308,6 +308,14 @@ describe('enhanceArgTypes', () => {
"type": {
"name": "number"
}
},
"foo": {
"control": {
"type": "number"
},
"type": {
"name": "number"
}
}
}
`);

23
addons/docs/src/frameworks/common/enhanceArgTypes.ts
View File

@ -1,36 +1,17 @@
import mapValues from 'lodash/mapValues';
import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api';
import { ArgTypes } from '@storybook/api';
import { inferArgTypes } from './inferArgTypes';
import { inferControls } from './inferControls';
import { normalizeArgTypes } from './normalizeArgTypes';
const isSubset = (kind: string, subset: object, superset: object) => {
const keys = Object.keys(subset);
// eslint-disable-next-line no-prototype-builtins
const overlap = keys.filter((key) => superset.hasOwnProperty(key));
return overlap.length === keys.length;
};
export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters;
const { extractArgTypes, forceExtractedArgTypes = false } = docs;
const { extractArgTypes } = docs;
const normalizedArgTypes = normalizeArgTypes(userArgTypes);
const namedArgTypes = mapValues(normalizedArgTypes, (val, key) => ({ name: key, ...val }));
const inferredArgTypes = inferArgTypes(args);
let extractedArgTypes: ArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
if (
!forceExtractedArgTypes &&
((Object.keys(normalizedArgTypes).length > 0 &&
!isSubset(context.kind, normalizedArgTypes, extractedArgTypes)) ||
(Object.keys(inferredArgTypes).length > 0 &&
!isSubset(context.kind, inferredArgTypes, extractedArgTypes)))
) {
extractedArgTypes = {};
}
const extractedArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
const withArgTypes = combineParameters(inferredArgTypes, extractedArgTypes, namedArgTypes);
if (context.storyFn.length === 0) {