@storybook/react 6.5.0-alpha.5 → 6.5.0-alpha.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/client/docs/config.js +29 -0
- package/dist/cjs/client/docs/extractArgTypes.js +54 -0
- package/dist/cjs/client/docs/extractProps.js +77 -0
- package/dist/cjs/client/docs/jsxDecorator.js +277 -0
- package/dist/cjs/client/docs/lib/captions.js +18 -0
- package/dist/cjs/client/docs/lib/componentTypes.js +24 -0
- package/dist/cjs/client/docs/lib/defaultValues/createDefaultValue.js +81 -0
- package/dist/cjs/client/docs/lib/defaultValues/createFromRawDefaultProp.js +225 -0
- package/dist/cjs/client/docs/lib/defaultValues/generateArray.js +29 -0
- package/dist/cjs/client/docs/lib/defaultValues/generateObject.js +29 -0
- package/dist/cjs/client/docs/lib/defaultValues/index.js +37 -0
- package/dist/cjs/client/docs/lib/defaultValues/prettyIdentifier.js +34 -0
- package/dist/cjs/client/docs/lib/generateCode.js +89 -0
- package/dist/cjs/client/docs/lib/index.js +63 -0
- package/dist/cjs/client/docs/lib/inspection/acornParser.js +254 -0
- package/dist/cjs/client/docs/lib/inspection/index.js +37 -0
- package/dist/cjs/client/docs/lib/inspection/inspectValue.js +26 -0
- package/dist/cjs/client/docs/lib/inspection/types.js +19 -0
- package/dist/cjs/client/docs/lib/isHtmlTag.js +18 -0
- package/dist/cjs/client/docs/propTypes/createType.js +469 -0
- package/dist/cjs/client/docs/propTypes/generateFuncSignature.js +78 -0
- package/dist/cjs/client/docs/propTypes/handleProp.js +54 -0
- package/dist/cjs/client/docs/propTypes/rawDefaultPropResolvers.js +47 -0
- package/dist/cjs/client/docs/propTypes/sortProps.js +37 -0
- package/dist/cjs/client/docs/react-argtypes.stories.js +129 -0
- package/dist/cjs/client/docs/typeScript/handleProp.js +38 -0
- package/dist/cjs/client/index.js +16 -14
- package/dist/cjs/client/preview/config.js +1 -1
- package/dist/cjs/client/preview/index.js +1 -1
- package/dist/cjs/client/preview/render.js +11 -11
- package/dist/cjs/client/preview/types-6-0.js +5 -1
- package/dist/cjs/client/preview/types-6-3.js +2 -0
- package/dist/cjs/client/preview/types-7-0.js +5 -1
- package/dist/cjs/client/preview/types.js +5 -1
- package/dist/cjs/demo/Welcome.js +7 -3
- package/dist/cjs/server/{framework-preset-react-docgen.js → framework-preset-react-docs.js} +21 -11
- package/dist/cjs/server/framework-preset-react.js +2 -2
- package/dist/cjs/server/preset.js +2 -2
- package/dist/esm/client/docs/config.js +16 -0
- package/dist/esm/client/docs/extractArgTypes.js +39 -0
- package/dist/esm/client/docs/extractProps.js +54 -0
- package/dist/esm/client/docs/jsxDecorator.js +218 -0
- package/dist/esm/client/docs/lib/captions.js +6 -0
- package/dist/esm/client/docs/lib/componentTypes.js +9 -0
- package/dist/esm/client/docs/lib/defaultValues/createDefaultValue.js +67 -0
- package/dist/esm/client/docs/lib/defaultValues/createFromRawDefaultProp.js +191 -0
- package/dist/esm/client/docs/lib/defaultValues/generateArray.js +19 -0
- package/dist/esm/client/docs/lib/defaultValues/generateObject.js +19 -0
- package/dist/esm/client/docs/lib/defaultValues/index.js +2 -0
- package/dist/esm/client/docs/lib/defaultValues/prettyIdentifier.js +22 -0
- package/dist/esm/client/docs/lib/generateCode.js +68 -0
- package/dist/esm/client/docs/lib/index.js +4 -0
- package/dist/esm/client/docs/lib/inspection/acornParser.js +213 -0
- package/dist/esm/client/docs/lib/inspection/index.js +2 -0
- package/dist/esm/client/docs/lib/inspection/inspectValue.js +16 -0
- package/dist/esm/client/docs/lib/inspection/types.js +12 -0
- package/dist/esm/client/docs/lib/isHtmlTag.js +6 -0
- package/dist/esm/client/docs/propTypes/createType.js +449 -0
- package/dist/esm/client/docs/propTypes/generateFuncSignature.js +62 -0
- package/dist/esm/client/docs/propTypes/handleProp.js +39 -0
- package/dist/esm/client/docs/propTypes/rawDefaultPropResolvers.js +32 -0
- package/dist/esm/client/docs/propTypes/sortProps.js +24 -0
- package/dist/esm/client/docs/react-argtypes.stories.js +97 -0
- package/dist/esm/client/docs/typeScript/handleProp.js +27 -0
- package/dist/esm/client/preview/render.js +6 -6
- package/dist/esm/client/preview/types-6-0.js +1 -0
- package/dist/esm/client/preview/types-6-3.js +3 -1
- package/dist/esm/client/preview/types-7-0.js +1 -0
- package/dist/esm/client/preview/types.js +1 -0
- package/dist/esm/demo/Welcome.js +7 -4
- package/dist/{modern/server/framework-preset-react-docgen.js → esm/server/framework-preset-react-docs.js} +15 -11
- package/dist/esm/server/framework-preset-react.js +2 -2
- package/dist/esm/server/preset.js +1 -1
- package/dist/modern/client/docs/config.js +14 -0
- package/dist/modern/client/docs/extractArgTypes.js +38 -0
- package/dist/modern/client/docs/extractProps.js +42 -0
- package/dist/modern/client/docs/jsxDecorator.js +177 -0
- package/dist/modern/client/docs/lib/captions.js +6 -0
- package/dist/modern/client/docs/lib/componentTypes.js +2 -0
- package/dist/modern/client/docs/lib/defaultValues/createDefaultValue.js +72 -0
- package/dist/modern/client/docs/lib/defaultValues/createFromRawDefaultProp.js +181 -0
- package/dist/modern/client/docs/lib/defaultValues/generateArray.js +21 -0
- package/dist/modern/client/docs/lib/defaultValues/generateObject.js +21 -0
- package/dist/modern/client/docs/lib/defaultValues/index.js +2 -0
- package/dist/modern/client/docs/lib/defaultValues/prettyIdentifier.js +24 -0
- package/dist/modern/client/docs/lib/generateCode.js +59 -0
- package/dist/modern/client/docs/lib/index.js +4 -0
- package/dist/modern/client/docs/lib/inspection/acornParser.js +211 -0
- package/dist/modern/client/docs/lib/inspection/index.js +2 -0
- package/dist/modern/client/docs/lib/inspection/inspectValue.js +15 -0
- package/dist/modern/client/docs/lib/inspection/types.js +12 -0
- package/dist/modern/client/docs/lib/isHtmlTag.js +4 -0
- package/dist/modern/client/docs/propTypes/createType.js +446 -0
- package/dist/modern/client/docs/propTypes/generateFuncSignature.js +57 -0
- package/dist/modern/client/docs/propTypes/handleProp.js +39 -0
- package/dist/modern/client/docs/propTypes/rawDefaultPropResolvers.js +31 -0
- package/dist/modern/client/docs/propTypes/sortProps.js +14 -0
- package/dist/modern/client/docs/react-argtypes.stories.js +54 -0
- package/dist/modern/client/docs/typeScript/handleProp.js +28 -0
- package/dist/modern/client/preview/types-6-0.js +1 -0
- package/dist/modern/client/preview/types-6-3.js +3 -1
- package/dist/modern/client/preview/types-7-0.js +1 -0
- package/dist/modern/client/preview/types.js +1 -0
- package/dist/modern/demo/Welcome.js +10 -6
- package/dist/{esm/server/framework-preset-react-docgen.js → modern/server/framework-preset-react-docs.js} +15 -11
- package/dist/modern/server/framework-preset-react.js +2 -2
- package/dist/modern/server/preset.js +1 -1
- package/dist/ts3.4/client/docs/config.d.ts +13 -0
- package/dist/ts3.4/client/docs/extractArgTypes.d.ts +2 -0
- package/dist/ts3.4/client/docs/extractProps.d.ts +5 -0
- package/dist/ts3.4/client/docs/jsxDecorator.d.ts +23 -0
- package/dist/ts3.4/client/docs/lib/captions.d.ts +6 -0
- package/dist/ts3.4/client/docs/lib/componentTypes.d.ts +2 -0
- package/dist/ts3.4/client/docs/lib/defaultValues/createDefaultValue.d.ts +2 -0
- package/dist/ts3.4/client/docs/lib/defaultValues/createFromRawDefaultProp.d.ts +11 -0
- package/dist/ts3.4/client/docs/lib/defaultValues/generateArray.d.ts +3 -0
- package/dist/ts3.4/client/docs/lib/defaultValues/generateObject.d.ts +3 -0
- package/dist/ts3.4/client/docs/lib/defaultValues/index.d.ts +2 -0
- package/dist/ts3.4/client/docs/lib/defaultValues/prettyIdentifier.d.ts +4 -0
- package/dist/ts3.4/client/docs/lib/generateCode.d.ts +3 -0
- package/dist/ts3.4/client/docs/lib/index.d.ts +4 -0
- package/dist/ts3.4/client/docs/lib/inspection/acornParser.d.ts +7 -0
- package/dist/ts3.4/client/docs/lib/inspection/index.d.ts +2 -0
- package/dist/ts3.4/client/docs/lib/inspection/inspectValue.d.ts +2 -0
- package/dist/ts3.4/client/docs/lib/inspection/types.d.ts +50 -0
- package/dist/ts3.4/client/docs/lib/isHtmlTag.d.ts +1 -0
- package/dist/ts3.4/client/docs/propTypes/createType.d.ts +2 -0
- package/dist/ts3.4/client/docs/propTypes/generateFuncSignature.d.ts +4 -0
- package/dist/ts3.4/client/docs/propTypes/handleProp.d.ts +5 -0
- package/dist/ts3.4/client/docs/propTypes/rawDefaultPropResolvers.d.ts +1 -0
- package/dist/ts3.4/client/docs/propTypes/sortProps.d.ts +4 -0
- package/dist/ts3.4/client/docs/react-argtypes.stories.d.ts +1 -0
- package/dist/ts3.4/client/docs/typeScript/handleProp.d.ts +3 -0
- package/dist/ts3.4/server/framework-preset-react-docs.d.ts +6 -0
- package/dist/ts3.4/server/framework-preset-react.d.ts +1 -46
- package/dist/ts3.9/client/docs/config.d.ts +13 -0
- package/dist/ts3.9/client/docs/extractArgTypes.d.ts +2 -0
- package/dist/ts3.9/client/docs/extractProps.d.ts +5 -0
- package/dist/ts3.9/client/docs/jsxDecorator.d.ts +23 -0
- package/dist/ts3.9/client/docs/lib/captions.d.ts +6 -0
- package/dist/ts3.9/client/docs/lib/componentTypes.d.ts +2 -0
- package/dist/ts3.9/client/docs/lib/defaultValues/createDefaultValue.d.ts +2 -0
- package/dist/ts3.9/client/docs/lib/defaultValues/createFromRawDefaultProp.d.ts +11 -0
- package/dist/ts3.9/client/docs/lib/defaultValues/generateArray.d.ts +3 -0
- package/dist/ts3.9/client/docs/lib/defaultValues/generateObject.d.ts +3 -0
- package/dist/ts3.9/client/docs/lib/defaultValues/index.d.ts +2 -0
- package/dist/ts3.9/client/docs/lib/defaultValues/prettyIdentifier.d.ts +4 -0
- package/dist/ts3.9/client/docs/lib/generateCode.d.ts +3 -0
- package/dist/ts3.9/client/docs/lib/index.d.ts +4 -0
- package/dist/ts3.9/client/docs/lib/inspection/acornParser.d.ts +7 -0
- package/dist/ts3.9/client/docs/lib/inspection/index.d.ts +2 -0
- package/dist/ts3.9/client/docs/lib/inspection/inspectValue.d.ts +2 -0
- package/dist/ts3.9/client/docs/lib/inspection/types.d.ts +50 -0
- package/dist/ts3.9/client/docs/lib/isHtmlTag.d.ts +1 -0
- package/dist/ts3.9/client/docs/propTypes/createType.d.ts +2 -0
- package/dist/ts3.9/client/docs/propTypes/generateFuncSignature.d.ts +4 -0
- package/dist/ts3.9/client/docs/propTypes/handleProp.d.ts +5 -0
- package/dist/ts3.9/client/docs/propTypes/rawDefaultPropResolvers.d.ts +1 -0
- package/dist/ts3.9/client/docs/propTypes/sortProps.d.ts +4 -0
- package/dist/ts3.9/client/docs/react-argtypes.stories.d.ts +1 -0
- package/dist/ts3.9/client/docs/typeScript/handleProp.d.ts +3 -0
- package/dist/ts3.9/client/preview/types-6-0.d.ts +3 -3
- package/dist/ts3.9/client/preview/types-7-0.d.ts +2 -2
- package/dist/ts3.9/server/framework-preset-cra.d.ts +1 -1
- package/dist/ts3.9/server/framework-preset-react-docs.d.ts +6 -0
- package/dist/ts3.9/server/framework-preset-react.d.ts +1 -46
- package/dist/ts3.9/server/options.d.ts +1 -1
- package/dist/ts3.9/server/preset.d.ts +1 -1
- package/package.json +36 -14
- package/types/index.ts +1 -1
- package/dist/cjs/typings.d.js +0 -1
- package/dist/esm/typings.d.js +0 -0
- package/dist/modern/typings.d.js +0 -0
- package/dist/ts3.4/server/framework-preset-react-docgen.d.ts +0 -5
- package/dist/ts3.9/server/framework-preset-react-docgen.d.ts +0 -5
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export function generateFuncSignature(params, returns) {
|
|
2
|
+
const hasParams = params != null;
|
|
3
|
+
const hasReturns = returns != null;
|
|
4
|
+
|
|
5
|
+
if (!hasParams && !hasReturns) {
|
|
6
|
+
return '';
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const funcParts = [];
|
|
10
|
+
|
|
11
|
+
if (hasParams) {
|
|
12
|
+
const funcParams = params.map(x => {
|
|
13
|
+
const prettyName = x.getPrettyName();
|
|
14
|
+
const typeName = x.getTypeName();
|
|
15
|
+
|
|
16
|
+
if (typeName != null) {
|
|
17
|
+
return `${prettyName}: ${typeName}`;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return prettyName;
|
|
21
|
+
});
|
|
22
|
+
funcParts.push(`(${funcParams.join(', ')})`);
|
|
23
|
+
} else {
|
|
24
|
+
funcParts.push('()');
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
if (hasReturns) {
|
|
28
|
+
funcParts.push(`=> ${returns.getTypeName()}`);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return funcParts.join(' ');
|
|
32
|
+
}
|
|
33
|
+
export function generateShortFuncSignature(params, returns) {
|
|
34
|
+
const hasParams = params != null;
|
|
35
|
+
const hasReturns = returns != null;
|
|
36
|
+
|
|
37
|
+
if (!hasParams && !hasReturns) {
|
|
38
|
+
return '';
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const funcParts = [];
|
|
42
|
+
|
|
43
|
+
if (hasParams) {
|
|
44
|
+
funcParts.push('( ... )');
|
|
45
|
+
} else {
|
|
46
|
+
funcParts.push('()');
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
if (hasReturns) {
|
|
50
|
+
funcParts.push(`=> ${returns.getTypeName()}`);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return funcParts.join(' ');
|
|
54
|
+
}
|
|
55
|
+
export function toMultilineSignature(signature) {
|
|
56
|
+
return signature.replace(/,/g, ',\r\n');
|
|
57
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { createType } from './createType';
|
|
2
|
+
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
|
|
3
|
+
import { keepOriginalDefinitionOrder } from './sortProps';
|
|
4
|
+
import { rawDefaultPropTypeResolvers } from './rawDefaultPropResolvers';
|
|
5
|
+
export function enhancePropTypesProp(extractedProp, rawDefaultProp) {
|
|
6
|
+
const {
|
|
7
|
+
propDef
|
|
8
|
+
} = extractedProp;
|
|
9
|
+
const newtype = createType(extractedProp);
|
|
10
|
+
|
|
11
|
+
if (newtype != null) {
|
|
12
|
+
propDef.type = newtype;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const {
|
|
16
|
+
defaultValue
|
|
17
|
+
} = extractedProp.docgenInfo;
|
|
18
|
+
|
|
19
|
+
if (defaultValue != null && defaultValue.value != null) {
|
|
20
|
+
const newDefaultValue = createDefaultValue(defaultValue.value);
|
|
21
|
+
|
|
22
|
+
if (newDefaultValue != null) {
|
|
23
|
+
propDef.defaultValue = newDefaultValue;
|
|
24
|
+
}
|
|
25
|
+
} else if (rawDefaultProp != null) {
|
|
26
|
+
const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef, rawDefaultPropTypeResolvers);
|
|
27
|
+
|
|
28
|
+
if (newDefaultValue != null) {
|
|
29
|
+
propDef.defaultValue = newDefaultValue;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return propDef;
|
|
34
|
+
}
|
|
35
|
+
export function enhancePropTypesProps(extractedProps, component) {
|
|
36
|
+
const rawDefaultProps = component.defaultProps != null ? component.defaultProps : {};
|
|
37
|
+
const enhancedProps = extractedProps.map(x => enhancePropTypesProp(x, rawDefaultProps[x.propDef.name]));
|
|
38
|
+
return keepOriginalDefinitionOrder(enhancedProps, component);
|
|
39
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { createSummaryValue } from '@storybook/docs-tools';
|
|
2
|
+
import { extractFunctionName, createTypeResolvers } from '../lib/defaultValues';
|
|
3
|
+
import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../lib';
|
|
4
|
+
import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from '../lib/defaultValues/prettyIdentifier';
|
|
5
|
+
import { inspectValue } from '../lib/inspection';
|
|
6
|
+
|
|
7
|
+
const funcResolver = (rawDefaultProp, {
|
|
8
|
+
name,
|
|
9
|
+
type
|
|
10
|
+
}) => {
|
|
11
|
+
const isElement = type.summary === 'element' || type.summary === 'elementType';
|
|
12
|
+
const funcName = extractFunctionName(rawDefaultProp, name);
|
|
13
|
+
|
|
14
|
+
if (funcName != null) {
|
|
15
|
+
// Try to display the name of the component. The body of the component is omitted since the code has been transpiled.
|
|
16
|
+
if (isElement) {
|
|
17
|
+
return createSummaryValue(getPrettyElementIdentifier(funcName));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const {
|
|
21
|
+
hasParams
|
|
22
|
+
} = inspectValue(rawDefaultProp.toString()).inferredType;
|
|
23
|
+
return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const rawDefaultPropTypeResolvers = createTypeResolvers({
|
|
30
|
+
function: funcResolver
|
|
31
|
+
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component.
|
|
2
|
+
// This function re-order them by their original definition order.
|
|
3
|
+
export function keepOriginalDefinitionOrder(extractedProps, component) {
|
|
4
|
+
// eslint-disable-next-line react/forbid-foreign-prop-types
|
|
5
|
+
const {
|
|
6
|
+
propTypes
|
|
7
|
+
} = component;
|
|
8
|
+
|
|
9
|
+
if (propTypes != null) {
|
|
10
|
+
return Object.keys(propTypes).map(x => extractedProps.find(y => y.name === x)).filter(x => x);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return extractedProps;
|
|
14
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import mapValues from 'lodash/mapValues';
|
|
3
|
+
import { ArgsTable } from '@storybook/components';
|
|
4
|
+
import { inferControls } from '@storybook/store';
|
|
5
|
+
import { storiesOf } from '..';
|
|
6
|
+
import { extractArgTypes } from './extractArgTypes'; // FIXME
|
|
7
|
+
|
|
8
|
+
const argsTableProps = component => {
|
|
9
|
+
const argTypes = extractArgTypes(component);
|
|
10
|
+
const parameters = {
|
|
11
|
+
__isArgsStory: true
|
|
12
|
+
};
|
|
13
|
+
const rows = inferControls({
|
|
14
|
+
argTypes,
|
|
15
|
+
parameters
|
|
16
|
+
});
|
|
17
|
+
return {
|
|
18
|
+
rows
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const ArgsStory = ({
|
|
23
|
+
component
|
|
24
|
+
}) => {
|
|
25
|
+
const {
|
|
26
|
+
rows
|
|
27
|
+
} = argsTableProps(component);
|
|
28
|
+
const initialArgs = mapValues(rows, argType => argType.defaultValue);
|
|
29
|
+
const [args, setArgs] = useState(initialArgs);
|
|
30
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("b", null, "NOTE:"), " these stories are to help visualise the snapshot tests in", ' ', /*#__PURE__*/React.createElement("code", null, "./react-properties.test.js"), "."), /*#__PURE__*/React.createElement(ArgsTable, {
|
|
31
|
+
rows: rows,
|
|
32
|
+
args: args,
|
|
33
|
+
updateArgs: val => setArgs(Object.assign({}, args, val))
|
|
34
|
+
}), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "arg name"), /*#__PURE__*/React.createElement("th", null, "argType"))), /*#__PURE__*/React.createElement("tbody", null, Object.entries(args).map(([key, val]) => /*#__PURE__*/React.createElement("tr", {
|
|
35
|
+
key: key
|
|
36
|
+
}, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, key)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(rows[key]))))))));
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const issuesFixtures = ['js-class-component', 'js-function-component', 'js-function-component-inline-defaults', 'js-function-component-inline-defaults-no-propTypes', 'ts-function-component', 'ts-function-component-inline-defaults', '9399-js-proptypes-shape', '8663-js-styled-components', '9626-js-default-values', '9668-js-proptypes-no-jsdoc', '8143-ts-react-fc-generics', '8143-ts-imported-types', '8279-js-styled-docgen', '8140-js-prop-types-oneof', '9023-js-hoc', '8740-ts-multi-props', '9556-ts-react-default-exports', '9592-ts-styled-props', '9591-ts-import-types', '9721-ts-deprecated-jsdoc', '9827-ts-default-values', '9586-js-react-memo', '9575-ts-camel-case', '9493-ts-display-name', '8894-9511-ts-forward-ref', '9465-ts-type-props', '8428-js-static-prop-types', '9764-ts-extend-props', '9922-ts-component-props'];
|
|
40
|
+
const issuesStories = storiesOf('ArgTypes/Issues', module);
|
|
41
|
+
issuesFixtures.forEach(fixture => {
|
|
42
|
+
// eslint-disable-next-line import/no-dynamic-require, global-require
|
|
43
|
+
const {
|
|
44
|
+
component
|
|
45
|
+
} = require(`./__testfixtures__/${fixture}/input`);
|
|
46
|
+
|
|
47
|
+
issuesStories.add(fixture, () => /*#__PURE__*/React.createElement(ArgsStory, {
|
|
48
|
+
component: component
|
|
49
|
+
}), {
|
|
50
|
+
chromatic: {
|
|
51
|
+
disable: true
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
});
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
|
|
2
|
+
export function enhanceTypeScriptProp(extractedProp, rawDefaultProp) {
|
|
3
|
+
const {
|
|
4
|
+
propDef
|
|
5
|
+
} = extractedProp;
|
|
6
|
+
const {
|
|
7
|
+
defaultValue
|
|
8
|
+
} = extractedProp.docgenInfo;
|
|
9
|
+
|
|
10
|
+
if (defaultValue != null && defaultValue.value != null) {
|
|
11
|
+
const newDefaultValue = createDefaultValue(defaultValue.value);
|
|
12
|
+
|
|
13
|
+
if (newDefaultValue != null) {
|
|
14
|
+
propDef.defaultValue = newDefaultValue;
|
|
15
|
+
}
|
|
16
|
+
} else if (rawDefaultProp != null) {
|
|
17
|
+
const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef);
|
|
18
|
+
|
|
19
|
+
if (newDefaultValue != null) {
|
|
20
|
+
propDef.defaultValue = newDefaultValue;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return propDef;
|
|
25
|
+
}
|
|
26
|
+
export function enhanceTypeScriptProps(extractedProps) {
|
|
27
|
+
return extractedProps.map(prop => enhanceTypeScriptProp(prop));
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
const _excluded = ["children"],
|
|
2
|
+
_excluded2 = ["children", "href", "target", "rel"],
|
|
3
|
+
_excluded3 = ["children", "onClick"];
|
|
4
|
+
|
|
1
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
2
6
|
|
|
3
7
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -14,11 +18,11 @@ const Main = props => /*#__PURE__*/React.createElement("article", _extends({}, p
|
|
|
14
18
|
}
|
|
15
19
|
}));
|
|
16
20
|
|
|
17
|
-
const Title =
|
|
21
|
+
const Title = _ref => {
|
|
18
22
|
let {
|
|
19
23
|
children
|
|
20
24
|
} = _ref,
|
|
21
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
25
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
22
26
|
|
|
23
27
|
return /*#__PURE__*/React.createElement("h1", props, children);
|
|
24
28
|
};
|
|
@@ -41,14 +45,14 @@ const InlineCode = props => /*#__PURE__*/React.createElement("code", _extends({}
|
|
|
41
45
|
}
|
|
42
46
|
}));
|
|
43
47
|
|
|
44
|
-
const Link =
|
|
48
|
+
const Link = _ref2 => {
|
|
45
49
|
let {
|
|
46
50
|
children,
|
|
47
51
|
href,
|
|
48
52
|
target,
|
|
49
53
|
rel
|
|
50
54
|
} = _ref2,
|
|
51
|
-
props = _objectWithoutPropertiesLoose(_ref2,
|
|
55
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
52
56
|
|
|
53
57
|
return /*#__PURE__*/React.createElement("a", _extends({
|
|
54
58
|
href: href
|
|
@@ -64,12 +68,12 @@ const Link = (_ref2) => {
|
|
|
64
68
|
}), children);
|
|
65
69
|
};
|
|
66
70
|
|
|
67
|
-
const NavButton =
|
|
71
|
+
const NavButton = _ref3 => {
|
|
68
72
|
let {
|
|
69
73
|
children,
|
|
70
74
|
onClick
|
|
71
75
|
} = _ref3,
|
|
72
|
-
props = _objectWithoutPropertiesLoose(_ref3,
|
|
76
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
|
|
73
77
|
|
|
74
78
|
return /*#__PURE__*/React.createElement("button", _extends({}, props, {
|
|
75
79
|
type: "button",
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
2
|
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
4
|
|
|
5
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
|
|
7
7
|
import "core-js/modules/es.promise.js";
|
|
8
|
+
import { findDistEsm } from '@storybook/core-common';
|
|
8
9
|
import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var typescriptOptions = await presets.apply('typescript', {});
|
|
10
|
+
import { hasDocsOrControls } from '@storybook/docs-tools';
|
|
11
|
+
export async function babel(config, options) {
|
|
12
|
+
if (!hasDocsOrControls(options)) return config;
|
|
13
|
+
var typescriptOptions = await options.presets.apply('typescript', {});
|
|
13
14
|
var reactDocgen = typescriptOptions.reactDocgen;
|
|
14
15
|
|
|
15
16
|
if (typeof reactDocgen !== 'string') {
|
|
@@ -25,10 +26,9 @@ export async function babel(config, {
|
|
|
25
26
|
}]
|
|
26
27
|
});
|
|
27
28
|
}
|
|
28
|
-
export async function webpackFinal(config, {
|
|
29
|
-
|
|
30
|
-
})
|
|
31
|
-
var typescriptOptions = await presets.apply('typescript', {});
|
|
29
|
+
export async function webpackFinal(config, options) {
|
|
30
|
+
if (!hasDocsOrControls(options)) return config;
|
|
31
|
+
var typescriptOptions = await options.presets.apply('typescript', {});
|
|
32
32
|
var reactDocgen = typescriptOptions.reactDocgen,
|
|
33
33
|
reactDocgenTypescriptOptions = typescriptOptions.reactDocgenTypescriptOptions;
|
|
34
34
|
|
|
@@ -42,4 +42,8 @@ export async function webpackFinal(config, {
|
|
|
42
42
|
savePropValueAsString: true
|
|
43
43
|
}))]
|
|
44
44
|
});
|
|
45
|
-
}
|
|
45
|
+
}
|
|
46
|
+
export var config = function (entry = [], options) {
|
|
47
|
+
if (!hasDocsOrControls(options)) return entry;
|
|
48
|
+
return [...entry, findDistEsm(__dirname, 'client/docs/config')];
|
|
49
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
2
|
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
4
|
|
|
5
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
|
|
@@ -2,4 +2,4 @@ import { findDistEsm } from '@storybook/core-common';
|
|
|
2
2
|
export var config = function (entries = []) {
|
|
3
3
|
return [...entries, findDistEsm(__dirname, 'client/preview/config')];
|
|
4
4
|
};
|
|
5
|
-
export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-
|
|
5
|
+
export var addons = [require.resolve('./framework-preset-react'), require.resolve('./framework-preset-cra'), require.resolve('./framework-preset-react-docs')];
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { PartialStoryFn } from '@storybook/csf';
|
|
2
|
+
import { extractComponentDescription } from '@storybook/docs-tools';
|
|
3
|
+
import { ReactFramework } from '..';
|
|
4
|
+
export declare const parameters: {
|
|
5
|
+
docs: {
|
|
6
|
+
inlineStories: boolean;
|
|
7
|
+
prepareForInline: (storyFn: PartialStoryFn<ReactFramework>) => import("../preview/types").StoryFnReactReturnType;
|
|
8
|
+
extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
|
|
9
|
+
extractComponentDescription: typeof extractComponentDescription;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export declare const decorators: ((storyFn: PartialStoryFn<ReactFramework, import("@storybook/csf").Args>, context: import("@storybook/csf").StoryContext<ReactFramework, import("@storybook/csf").Args>) => import("../preview/types").StoryFnReactReturnType)[];
|
|
13
|
+
export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/addons").Parameters | import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args>)[];
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
2
|
+
import { Options } from 'react-element-to-jsx-string';
|
|
3
|
+
import { StoryContext, PartialStoryFn } from '@storybook/csf';
|
|
4
|
+
import { ReactFramework } from '..';
|
|
5
|
+
declare type JSXOptions = Options & {
|
|
6
|
+
/** How many wrappers to skip when rendering the jsx */
|
|
7
|
+
skip?: number;
|
|
8
|
+
/** Whether to show the function in the jsx tab */
|
|
9
|
+
showFunctions?: boolean;
|
|
10
|
+
/** Whether to format HTML or Vue markup */
|
|
11
|
+
enableBeautify?: boolean;
|
|
12
|
+
/** Override the display name used for a component */
|
|
13
|
+
displayName?: string | Options['displayName'];
|
|
14
|
+
/** Deprecated: A function ran after the story is rendered */
|
|
15
|
+
onBeforeRender?(dom: string): string;
|
|
16
|
+
/** A function ran after a story is rendered (prefer this over `onBeforeRender`) */
|
|
17
|
+
transformSource?(dom: string, context?: StoryContext<ReactFramework>): string;
|
|
18
|
+
};
|
|
19
|
+
/** Apply the users parameters and render the jsx for a story */
|
|
20
|
+
export declare const renderJsx: (code: React.ReactElement, options: JSXOptions) => string;
|
|
21
|
+
export declare const skipJsxRender: (context: StoryContext<ReactFramework>) => any;
|
|
22
|
+
export declare const jsxDecorator: (storyFn: PartialStoryFn<ReactFramework>, context: StoryContext<ReactFramework>) => import("../preview/types").StoryFnReactReturnType;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const CUSTOM_CAPTION = "custom";
|
|
2
|
+
export declare const OBJECT_CAPTION = "object";
|
|
3
|
+
export declare const ARRAY_CAPTION = "array";
|
|
4
|
+
export declare const CLASS_CAPTION = "class";
|
|
5
|
+
export declare const FUNCTION_CAPTION = "func";
|
|
6
|
+
export declare const ELEMENT_CAPTION = "element";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PropDef, PropDefaultValue } from '@storybook/docs-tools';
|
|
2
|
+
export declare type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue;
|
|
3
|
+
export interface TypeResolvers {
|
|
4
|
+
string: TypeResolver;
|
|
5
|
+
object: TypeResolver;
|
|
6
|
+
function: TypeResolver;
|
|
7
|
+
default: TypeResolver;
|
|
8
|
+
}
|
|
9
|
+
export declare function extractFunctionName(func: Function, propName: string): string;
|
|
10
|
+
export declare function createTypeResolvers(customResolvers?: Partial<TypeResolvers>): TypeResolvers;
|
|
11
|
+
export declare function createDefaultValueFromRawDefaultProp(rawDefaultProp: any, propDef: PropDef, typeResolvers?: TypeResolvers): PropDefaultValue;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { InspectionIdentifiableInferedType } from '../inspection';
|
|
2
|
+
export declare function getPrettyIdentifier(inferredType: InspectionIdentifiableInferedType): string;
|
|
3
|
+
export declare function getPrettyFuncIdentifier(identifier: string, hasArguments: boolean): string;
|
|
4
|
+
export declare function getPrettyElementIdentifier(identifier: string): string;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export declare enum InspectionType {
|
|
2
|
+
IDENTIFIER = "Identifier",
|
|
3
|
+
LITERAL = "Literal",
|
|
4
|
+
OBJECT = "Object",
|
|
5
|
+
ARRAY = "Array",
|
|
6
|
+
FUNCTION = "Function",
|
|
7
|
+
CLASS = "Class",
|
|
8
|
+
ELEMENT = "Element",
|
|
9
|
+
UNKNOWN = "Unknown"
|
|
10
|
+
}
|
|
11
|
+
export interface InspectionInferedType {
|
|
12
|
+
type: InspectionType;
|
|
13
|
+
}
|
|
14
|
+
export interface InspectionIdentifier extends InspectionInferedType {
|
|
15
|
+
type: InspectionType.IDENTIFIER;
|
|
16
|
+
identifier: string;
|
|
17
|
+
}
|
|
18
|
+
export interface InspectionLiteral extends InspectionInferedType {
|
|
19
|
+
type: InspectionType.LITERAL;
|
|
20
|
+
}
|
|
21
|
+
export interface InspectionObject extends InspectionInferedType {
|
|
22
|
+
type: InspectionType.OBJECT;
|
|
23
|
+
depth: number;
|
|
24
|
+
}
|
|
25
|
+
export interface InspectionArray extends InspectionInferedType {
|
|
26
|
+
type: InspectionType.ARRAY;
|
|
27
|
+
depth: number;
|
|
28
|
+
}
|
|
29
|
+
export interface InspectionClass extends InspectionInferedType {
|
|
30
|
+
type: InspectionType.CLASS;
|
|
31
|
+
identifier: string;
|
|
32
|
+
}
|
|
33
|
+
export interface InspectionFunction extends InspectionInferedType {
|
|
34
|
+
type: InspectionType.FUNCTION;
|
|
35
|
+
identifier?: string;
|
|
36
|
+
params: any[];
|
|
37
|
+
hasParams: boolean;
|
|
38
|
+
}
|
|
39
|
+
export interface InspectionElement extends InspectionInferedType {
|
|
40
|
+
type: InspectionType.ELEMENT;
|
|
41
|
+
identifier?: string;
|
|
42
|
+
}
|
|
43
|
+
export interface InspectionUnknown extends InspectionInferedType {
|
|
44
|
+
type: InspectionType.UNKNOWN;
|
|
45
|
+
}
|
|
46
|
+
export declare type InspectionIdentifiableInferedType = InspectionIdentifier | InspectionClass | InspectionFunction | InspectionElement;
|
|
47
|
+
export interface InspectionResult {
|
|
48
|
+
inferredType: InspectionInferedType;
|
|
49
|
+
ast?: any;
|
|
50
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function isHtmlTag(tagName: string): boolean;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ExtractedJsDocParam, ExtractedJsDocReturns } from '@storybook/docs-tools';
|
|
2
|
+
export declare function generateFuncSignature(params: ExtractedJsDocParam[], returns: ExtractedJsDocReturns): string;
|
|
3
|
+
export declare function generateShortFuncSignature(params: ExtractedJsDocParam[], returns: ExtractedJsDocReturns): string;
|
|
4
|
+
export declare function toMultilineSignature(signature: string): string;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { PropDef, ExtractedProp } from '@storybook/docs-tools';
|
|
2
|
+
declare type Component = any;
|
|
3
|
+
export declare function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef;
|
|
4
|
+
export declare function enhancePropTypesProps(extractedProps: ExtractedProp[], component: Component): PropDef[];
|
|
5
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const rawDefaultPropTypeResolvers: import("../lib/defaultValues").TypeResolvers;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { StorybookConfig, Options } from '@storybook/core-common';
|
|
2
|
+
import { TransformOptions } from '@babel/core';
|
|
3
|
+
import { Configuration } from 'webpack';
|
|
4
|
+
export declare function babel(config: TransformOptions, options: Options): Promise<TransformOptions>;
|
|
5
|
+
export declare function webpackFinal(config: Configuration, options: Options): Promise<Configuration>;
|
|
6
|
+
export declare const config: StorybookConfig['config'];
|