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

Addon-docs: Simplify argType inference

Browse Source
This commit is contained in:
Michael Shilman 2020-06-24 10:08:12 +08:00
parent f39cc687c4
commit 2a5b70e0a6
2 changed files with 3 additions and 20 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%" /> <img src="https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-args-reflow-slider.png" width="80%" />
</center> </center>
**Note:** If you add an `ArgType` that is not part of the component, Storybook will _only_ use your argTypes definitions. **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`.
If you want to merge new controls with the existing component properties, you must enable this parameter:
```jsx
docs: { forceExtractedArgTypes: true },
```
#### Angular #### Angular

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

@ -1,6 +1,5 @@
import mapValues from 'lodash/mapValues'; import mapValues from 'lodash/mapValues';
import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api'; import { ArgTypesEnhancer, combineParameters } from '@storybook/client-api';
import { ArgTypes } from '@storybook/api';
import { inferArgTypes } from './inferArgTypes'; import { inferArgTypes } from './inferArgTypes';
import { inferControls } from './inferControls'; import { inferControls } from './inferControls';
import { normalizeArgTypes } from './normalizeArgTypes'; import { normalizeArgTypes } from './normalizeArgTypes';
@ -14,23 +13,12 @@ const isSubset = (kind: string, subset: object, superset: object) => {
export const enhanceArgTypes: ArgTypesEnhancer = (context) => { export const enhanceArgTypes: ArgTypesEnhancer = (context) => {
const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters; const { component, argTypes: userArgTypes = {}, docs = {}, args = {} } = context.parameters;
const { extractArgTypes, forceExtractedArgTypes = false } = docs; const { extractArgTypes } = docs;
const normalizedArgTypes = normalizeArgTypes(userArgTypes); const normalizedArgTypes = normalizeArgTypes(userArgTypes);
const namedArgTypes = mapValues(normalizedArgTypes, (val, key) => ({ name: key, ...val })); const namedArgTypes = mapValues(normalizedArgTypes, (val, key) => ({ name: key, ...val }));
const inferredArgTypes = inferArgTypes(args); const inferredArgTypes = inferArgTypes(args);
let extractedArgTypes: ArgTypes = extractArgTypes && component ? extractArgTypes(component) : {}; const extractedArgTypes = 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 withArgTypes = combineParameters(inferredArgTypes, extractedArgTypes, namedArgTypes); const withArgTypes = combineParameters(inferredArgTypes, extractedArgTypes, namedArgTypes);
if (context.storyFn.length === 0) { if (context.storyFn.length === 0) {