@storybook/react 7.0.0-alpha.4 → 7.0.0-alpha.41
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/chunk-WO7CMEGS.mjs +1 -0
- package/dist/config.d.ts +23 -0
- package/dist/config.js +3 -0
- package/dist/config.mjs +3 -0
- package/dist/index.d.ts +185 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +1 -0
- package/dist/types-7e2d88a6.d.ts +10 -0
- package/package.json +47 -19
- package/preview.js +1 -1
- package/LICENSE +0 -21
- package/dist/cjs/config.js +0 -43
- package/dist/cjs/docs/config.js +0 -25
- package/dist/cjs/docs/extractArgTypes.js +0 -47
- package/dist/cjs/docs/extractProps.js +0 -57
- package/dist/cjs/docs/jsxDecorator.js +0 -210
- package/dist/cjs/docs/lib/captions.js +0 -18
- package/dist/cjs/docs/lib/componentTypes.js +0 -14
- package/dist/cjs/docs/lib/defaultValues/createDefaultValue.js +0 -86
- package/dist/cjs/docs/lib/defaultValues/createFromRawDefaultProp.js +0 -206
- package/dist/cjs/docs/lib/defaultValues/generateArray.js +0 -31
- package/dist/cjs/docs/lib/defaultValues/generateObject.js +0 -31
- package/dist/cjs/docs/lib/defaultValues/index.js +0 -31
- package/dist/cjs/docs/lib/defaultValues/prettyIdentifier.js +0 -38
- package/dist/cjs/docs/lib/generateCode.js +0 -74
- package/dist/cjs/docs/lib/index.js +0 -57
- package/dist/cjs/docs/lib/inspection/acornParser.js +0 -230
- package/dist/cjs/docs/lib/inspection/index.js +0 -31
- package/dist/cjs/docs/lib/inspection/inspectValue.js +0 -24
- package/dist/cjs/docs/lib/inspection/types.js +0 -19
- package/dist/cjs/docs/lib/isHtmlTag.js +0 -14
- package/dist/cjs/docs/propTypes/createType.js +0 -458
- package/dist/cjs/docs/propTypes/generateFuncSignature.js +0 -68
- package/dist/cjs/docs/propTypes/handleProp.js +0 -52
- package/dist/cjs/docs/propTypes/rawDefaultPropResolvers.js +0 -43
- package/dist/cjs/docs/propTypes/sortProps.js +0 -21
- package/dist/cjs/docs/react-argtypes.stories.js +0 -67
- package/dist/cjs/docs/typeScript/handleProp.js +0 -38
- package/dist/cjs/index.js +0 -98
- package/dist/cjs/preview/config.js +0 -19
- package/dist/cjs/preview/globals.js +0 -13
- package/dist/cjs/preview/index.js +0 -44
- package/dist/cjs/preview/render.js +0 -165
- package/dist/cjs/preview/types-6-0.js +0 -5
- package/dist/cjs/preview/types-6-3.js +0 -18
- package/dist/cjs/preview/types-7-0.js +0 -5
- package/dist/cjs/preview/types.js +0 -5
- package/dist/cjs/testing/index.js +0 -113
- package/dist/esm/config.js +0 -6
- package/dist/esm/docs/config.js +0 -12
- package/dist/esm/docs/extractArgTypes.js +0 -37
- package/dist/esm/docs/extractProps.js +0 -42
- package/dist/esm/docs/jsxDecorator.js +0 -170
- package/dist/esm/docs/lib/captions.js +0 -6
- package/dist/esm/docs/lib/componentTypes.js +0 -2
- package/dist/esm/docs/lib/defaultValues/createDefaultValue.js +0 -72
- package/dist/esm/docs/lib/defaultValues/createFromRawDefaultProp.js +0 -183
- package/dist/esm/docs/lib/defaultValues/generateArray.js +0 -21
- package/dist/esm/docs/lib/defaultValues/generateObject.js +0 -21
- package/dist/esm/docs/lib/defaultValues/index.js +0 -2
- package/dist/esm/docs/lib/defaultValues/prettyIdentifier.js +0 -26
- package/dist/esm/docs/lib/generateCode.js +0 -59
- package/dist/esm/docs/lib/index.js +0 -4
- package/dist/esm/docs/lib/inspection/acornParser.js +0 -211
- package/dist/esm/docs/lib/inspection/index.js +0 -2
- package/dist/esm/docs/lib/inspection/inspectValue.js +0 -15
- package/dist/esm/docs/lib/inspection/types.js +0 -12
- package/dist/esm/docs/lib/isHtmlTag.js +0 -4
- package/dist/esm/docs/propTypes/createType.js +0 -447
- package/dist/esm/docs/propTypes/generateFuncSignature.js +0 -57
- package/dist/esm/docs/propTypes/handleProp.js +0 -39
- package/dist/esm/docs/propTypes/rawDefaultPropResolvers.js +0 -31
- package/dist/esm/docs/propTypes/sortProps.js +0 -14
- package/dist/esm/docs/react-argtypes.stories.js +0 -54
- package/dist/esm/docs/typeScript/handleProp.js +0 -28
- package/dist/esm/index.js +0 -5
- package/dist/esm/preview/config.js +0 -1
- package/dist/esm/preview/globals.js +0 -8
- package/dist/esm/preview/index.js +0 -21
- package/dist/esm/preview/render.js +0 -141
- package/dist/esm/preview/types-6-0.js +0 -1
- package/dist/esm/preview/types-6-3.js +0 -10
- package/dist/esm/preview/types-7-0.js +0 -1
- package/dist/esm/preview/types.js +0 -1
- package/dist/esm/testing/index.js +0 -97
- package/dist/types/config.d.ts +0 -10
- package/dist/types/docs/config.d.ts +0 -10
- package/dist/types/docs/extractArgTypes.d.ts +0 -2
- package/dist/types/docs/extractProps.d.ts +0 -9
- package/dist/types/docs/jsxDecorator.d.ts +0 -23
- package/dist/types/docs/lib/captions.d.ts +0 -6
- package/dist/types/docs/lib/componentTypes.d.ts +0 -2
- package/dist/types/docs/lib/defaultValues/createDefaultValue.d.ts +0 -2
- package/dist/types/docs/lib/defaultValues/createFromRawDefaultProp.d.ts +0 -11
- package/dist/types/docs/lib/defaultValues/generateArray.d.ts +0 -3
- package/dist/types/docs/lib/defaultValues/generateObject.d.ts +0 -3
- package/dist/types/docs/lib/defaultValues/index.d.ts +0 -2
- package/dist/types/docs/lib/defaultValues/prettyIdentifier.d.ts +0 -4
- package/dist/types/docs/lib/generateCode.d.ts +0 -3
- package/dist/types/docs/lib/index.d.ts +0 -4
- package/dist/types/docs/lib/inspection/acornParser.d.ts +0 -7
- package/dist/types/docs/lib/inspection/index.d.ts +0 -2
- package/dist/types/docs/lib/inspection/inspectValue.d.ts +0 -2
- package/dist/types/docs/lib/inspection/types.d.ts +0 -50
- package/dist/types/docs/lib/isHtmlTag.d.ts +0 -1
- package/dist/types/docs/propTypes/createType.d.ts +0 -2
- package/dist/types/docs/propTypes/generateFuncSignature.d.ts +0 -4
- package/dist/types/docs/propTypes/handleProp.d.ts +0 -5
- package/dist/types/docs/propTypes/rawDefaultPropResolvers.d.ts +0 -1
- package/dist/types/docs/propTypes/sortProps.d.ts +0 -4
- package/dist/types/docs/react-argtypes.stories.d.ts +0 -1
- package/dist/types/docs/typeScript/handleProp.d.ts +0 -3
- package/dist/types/index.d.ts +0 -4
- package/dist/types/preview/config.d.ts +0 -1
- package/dist/types/preview/globals.d.ts +0 -1
- package/dist/types/preview/index.d.ts +0 -25
- package/dist/types/preview/render.d.ts +0 -5
- package/dist/types/preview/types-6-0.d.ts +0 -35
- package/dist/types/preview/types-6-3.d.ts +0 -40
- package/dist/types/preview/types-7-0.d.ts +0 -21
- package/dist/types/preview/types.d.ts +0 -16
- package/dist/types/testing/index.d.ts +0 -84
|
@@ -1,57 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
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
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
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(Boolean);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
return extractedProps;
|
|
14
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
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
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
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
|
-
}
|
package/dist/esm/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { render, renderToDOM } from './render';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/* eslint-disable prefer-destructuring */
|
|
2
|
-
import { start } from '@storybook/core-client';
|
|
3
|
-
import './globals';
|
|
4
|
-
import { renderToDOM, render } from './render';
|
|
5
|
-
const framework = 'react';
|
|
6
|
-
const api = start(renderToDOM, {
|
|
7
|
-
render
|
|
8
|
-
});
|
|
9
|
-
export const storiesOf = (kind, m) => {
|
|
10
|
-
return api.clientApi.storiesOf(kind, m).addParameters({
|
|
11
|
-
framework
|
|
12
|
-
});
|
|
13
|
-
};
|
|
14
|
-
export const configure = (...args) => api.configure(framework, ...args);
|
|
15
|
-
export const addDecorator = api.clientApi.addDecorator;
|
|
16
|
-
export const addParameters = api.clientApi.addParameters;
|
|
17
|
-
export const clearDecorators = api.clientApi.clearDecorators;
|
|
18
|
-
export const setAddon = api.clientApi.setAddon;
|
|
19
|
-
export const forceReRender = api.forceReRender;
|
|
20
|
-
export const getStorybook = api.clientApi.getStorybook;
|
|
21
|
-
export const raw = api.clientApi.raw;
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import global from 'global';
|
|
2
|
-
import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
|
|
3
|
-
import ReactDOM, { version as reactDomVersion } from 'react-dom';
|
|
4
|
-
const {
|
|
5
|
-
FRAMEWORK_OPTIONS
|
|
6
|
-
} = global; // A map of all rendered React 18 nodes
|
|
7
|
-
|
|
8
|
-
const nodes = new Map();
|
|
9
|
-
export const render = (args, context) => {
|
|
10
|
-
const {
|
|
11
|
-
id,
|
|
12
|
-
component: Component
|
|
13
|
-
} = context;
|
|
14
|
-
|
|
15
|
-
if (!Component) {
|
|
16
|
-
throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return /*#__PURE__*/React.createElement(Component, args);
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const renderElement = async (node, el) => {
|
|
23
|
-
// Create Root Element conditionally for new React 18 Root Api
|
|
24
|
-
const root = await getReactRoot(el);
|
|
25
|
-
return new Promise(resolve => {
|
|
26
|
-
if (root) {
|
|
27
|
-
root.render(node);
|
|
28
|
-
setTimeout(() => {
|
|
29
|
-
resolve(null);
|
|
30
|
-
}, 0);
|
|
31
|
-
} else {
|
|
32
|
-
ReactDOM.render(node, el, () => resolve(null));
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const canUseNewReactRootApi = reactDomVersion && (reactDomVersion.startsWith('18') || reactDomVersion.startsWith('0.0.0'));
|
|
38
|
-
const shouldUseNewRootApi = FRAMEWORK_OPTIONS?.legacyRootApi !== true;
|
|
39
|
-
const isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
|
|
40
|
-
|
|
41
|
-
const unmountElement = el => {
|
|
42
|
-
const root = nodes.get(el);
|
|
43
|
-
|
|
44
|
-
if (root && isUsingNewReactRootApi) {
|
|
45
|
-
root.unmount();
|
|
46
|
-
nodes.delete(el);
|
|
47
|
-
} else {
|
|
48
|
-
ReactDOM.unmountComponentAtNode(el);
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const getReactRoot = async el => {
|
|
53
|
-
if (!isUsingNewReactRootApi) {
|
|
54
|
-
return null;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
let root = nodes.get(el);
|
|
58
|
-
|
|
59
|
-
if (!root) {
|
|
60
|
-
// eslint-disable-next-line import/no-unresolved
|
|
61
|
-
const reactDomClient = (await import('react-dom/client')).default;
|
|
62
|
-
root = reactDomClient.createRoot(el);
|
|
63
|
-
nodes.set(el, root);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
return root;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
class ErrorBoundary extends ReactComponent {
|
|
70
|
-
constructor(...args) {
|
|
71
|
-
super(...args);
|
|
72
|
-
this.state = {
|
|
73
|
-
hasError: false
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
static getDerivedStateFromError() {
|
|
78
|
-
return {
|
|
79
|
-
hasError: true
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
componentDidMount() {
|
|
84
|
-
const {
|
|
85
|
-
hasError
|
|
86
|
-
} = this.state;
|
|
87
|
-
const {
|
|
88
|
-
showMain
|
|
89
|
-
} = this.props;
|
|
90
|
-
|
|
91
|
-
if (!hasError) {
|
|
92
|
-
showMain();
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
componentDidCatch(err) {
|
|
97
|
-
const {
|
|
98
|
-
showException
|
|
99
|
-
} = this.props; // message partially duplicates stack, strip it
|
|
100
|
-
|
|
101
|
-
showException(err);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
render() {
|
|
105
|
-
const {
|
|
106
|
-
hasError
|
|
107
|
-
} = this.state;
|
|
108
|
-
const {
|
|
109
|
-
children
|
|
110
|
-
} = this.props;
|
|
111
|
-
return hasError ? null : children;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
|
|
117
|
-
export async function renderToDOM({
|
|
118
|
-
storyContext,
|
|
119
|
-
unboundStoryFn,
|
|
120
|
-
showMain,
|
|
121
|
-
showException,
|
|
122
|
-
forceRemount
|
|
123
|
-
}, domElement) {
|
|
124
|
-
const Story = unboundStoryFn;
|
|
125
|
-
const content = /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
126
|
-
showMain: showMain,
|
|
127
|
-
showException: showException
|
|
128
|
-
}, /*#__PURE__*/React.createElement(Story, storyContext)); // For React 15, StrictMode & Fragment doesn't exists.
|
|
129
|
-
|
|
130
|
-
const element = Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, content) : content; // In most cases, we need to unmount the existing set of components in the DOM node.
|
|
131
|
-
// Otherwise, React may not recreate instances for every story run.
|
|
132
|
-
// This could leads to issues like below:
|
|
133
|
-
// https://github.com/storybookjs/react-storybook/issues/81
|
|
134
|
-
// (This is not the case when we change args or globals to the story however)
|
|
135
|
-
|
|
136
|
-
if (forceRemount) {
|
|
137
|
-
unmountElement(domElement);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
await renderElement(element, domElement);
|
|
141
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { composeStory as originalComposeStory, composeStories as originalComposeStories, setProjectAnnotations as originalSetProjectAnnotations } from '@storybook/store';
|
|
2
|
-
import { once } from '@storybook/client-logger';
|
|
3
|
-
import { render } from '../preview/render';
|
|
4
|
-
|
|
5
|
-
/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
|
|
6
|
-
*
|
|
7
|
-
* It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
|
|
8
|
-
*
|
|
9
|
-
* Example:
|
|
10
|
-
*```jsx
|
|
11
|
-
* // setup.js (for jest)
|
|
12
|
-
* import { setProjectAnnotations } from '@storybook/react';
|
|
13
|
-
* import * as projectAnnotations from './.storybook/preview';
|
|
14
|
-
*
|
|
15
|
-
* setProjectAnnotations(projectAnnotations);
|
|
16
|
-
*```
|
|
17
|
-
*
|
|
18
|
-
* @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
|
|
19
|
-
*/
|
|
20
|
-
export function setProjectAnnotations(projectAnnotations) {
|
|
21
|
-
originalSetProjectAnnotations(projectAnnotations);
|
|
22
|
-
}
|
|
23
|
-
/** Preserved for users migrating from `@storybook/testing-react`.
|
|
24
|
-
*
|
|
25
|
-
* @deprecated Use setProjectAnnotations instead
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
export function setGlobalConfig(projectAnnotations) {
|
|
29
|
-
once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
|
|
30
|
-
setProjectAnnotations(projectAnnotations);
|
|
31
|
-
} // This will not be necessary once we have auto preset loading
|
|
32
|
-
|
|
33
|
-
const defaultProjectAnnotations = {
|
|
34
|
-
render
|
|
35
|
-
};
|
|
36
|
-
/**
|
|
37
|
-
* Function that will receive a story along with meta (e.g. a default export from a .stories file)
|
|
38
|
-
* and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
|
|
39
|
-
* and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
* It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
|
|
43
|
-
*
|
|
44
|
-
* Example:
|
|
45
|
-
*```jsx
|
|
46
|
-
* import { render } from '@testing-library/react';
|
|
47
|
-
* import { composeStory } from '@storybook/react';
|
|
48
|
-
* import Meta, { Primary as PrimaryStory } from './Button.stories';
|
|
49
|
-
*
|
|
50
|
-
* const Primary = composeStory(PrimaryStory, Meta);
|
|
51
|
-
*
|
|
52
|
-
* test('renders primary button with Hello World', () => {
|
|
53
|
-
* const { getByText } = render(<Primary>Hello world</Primary>);
|
|
54
|
-
* expect(getByText(/Hello world/i)).not.toBeNull();
|
|
55
|
-
* });
|
|
56
|
-
*```
|
|
57
|
-
*
|
|
58
|
-
* @param story
|
|
59
|
-
* @param componentAnnotations - e.g. (import Meta from './Button.stories')
|
|
60
|
-
* @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
|
|
61
|
-
* @param [exportsName] - in case your story does not contain a name and you want it to have a name.
|
|
62
|
-
*/
|
|
63
|
-
|
|
64
|
-
export function composeStory(story, componentAnnotations, projectAnnotations, exportsName) {
|
|
65
|
-
return originalComposeStory(story, componentAnnotations, projectAnnotations, defaultProjectAnnotations, exportsName);
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
|
|
69
|
-
* and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
|
|
70
|
-
* and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
* It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
|
|
74
|
-
*
|
|
75
|
-
* Example:
|
|
76
|
-
*```jsx
|
|
77
|
-
* import { render } from '@testing-library/react';
|
|
78
|
-
* import { composeStories } from '@storybook/react';
|
|
79
|
-
* import * as stories from './Button.stories';
|
|
80
|
-
*
|
|
81
|
-
* const { Primary, Secondary } = composeStories(stories);
|
|
82
|
-
*
|
|
83
|
-
* test('renders primary button with Hello World', () => {
|
|
84
|
-
* const { getByText } = render(<Primary>Hello world</Primary>);
|
|
85
|
-
* expect(getByText(/Hello world/i)).not.toBeNull();
|
|
86
|
-
* });
|
|
87
|
-
*```
|
|
88
|
-
*
|
|
89
|
-
* @param csfExports - e.g. (import * as stories from './Button.stories')
|
|
90
|
-
* @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
|
|
91
|
-
*/
|
|
92
|
-
|
|
93
|
-
export function composeStories(csfExports, projectAnnotations) {
|
|
94
|
-
// @ts-ignore
|
|
95
|
-
const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
|
|
96
|
-
return composedStories;
|
|
97
|
-
}
|
package/dist/types/config.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export declare const parameters: {
|
|
2
|
-
docs: {
|
|
3
|
-
inlineStories: boolean;
|
|
4
|
-
extractArgTypes: import("lib/docs-tools/dist/types").ArgTypesExtractor;
|
|
5
|
-
extractComponentDescription: typeof import("lib/docs-tools/dist/types").extractComponentDescription;
|
|
6
|
-
};
|
|
7
|
-
framework: string;
|
|
8
|
-
};
|
|
9
|
-
export { decorators, argTypesEnhancers } from './docs/config';
|
|
10
|
-
export * from './preview/config';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { extractComponentDescription } from '@storybook/docs-tools';
|
|
2
|
-
export declare const parameters: {
|
|
3
|
-
docs: {
|
|
4
|
-
inlineStories: boolean;
|
|
5
|
-
extractArgTypes: import("@storybook/docs-tools").ArgTypesExtractor;
|
|
6
|
-
extractComponentDescription: typeof extractComponentDescription;
|
|
7
|
-
};
|
|
8
|
-
};
|
|
9
|
-
export declare const decorators: ((storyFn: import("@storybook/csf").PartialStoryFn<import("..").ReactFramework, import("@storybook/csf").Args>, context: import("@storybook/csf").StoryContext<import("..").ReactFramework, import("@storybook/csf").Args>) => import("../preview/types").StoryFnReactReturnType)[];
|
|
10
|
-
export declare const argTypesEnhancers: (<TFramework extends import("@storybook/csf").AnyFramework>(context: import("@storybook/csf").StoryContextForEnhancers<TFramework, import("@storybook/csf").Args>) => import("@storybook/csf").StrictArgTypes<import("@storybook/csf").Args> | import("lib/addons/dist/types").Parameters)[];
|
|
@@ -1,23 +0,0 @@
|
|
|
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 | null;
|
|
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 {};
|
|
@@ -1,6 +0,0 @@
|
|
|
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";
|
|
@@ -1,11 +0,0 @@
|
|
|
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 | null;
|
|
10
|
-
export declare function createTypeResolvers(customResolvers?: Partial<TypeResolvers>): TypeResolvers;
|
|
11
|
-
export declare function createDefaultValueFromRawDefaultProp(rawDefaultProp: any, propDef: PropDef, typeResolvers?: TypeResolvers): PropDefaultValue | null;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { InspectionIdentifiableInferedType } from '../inspection';
|
|
2
|
-
export declare function getPrettyFuncIdentifier(identifier: string, hasArguments: boolean): string;
|
|
3
|
-
export declare function getPrettyElementIdentifier(identifier: string): string;
|
|
4
|
-
export declare function getPrettyIdentifier(inferredType: InspectionIdentifiableInferedType): string;
|