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

Added tests for default value create from raw defaultProp

Browse Source
This commit is contained in:
patrick.lafrance 2019-11-25 17:40:22 -05:00
parent 425c13d499
commit ed22662bf2
10 changed files with 839 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
addons/docs/package.json
View File

@ -63,6 +63,7 @@
"js-string-escape": "^1.0.1",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"react-element-to-jsx-string": "^14.1.0",
"ts-dedent": "^1.1.0",
"util-deprecate": "^1.0.2",
"vue-docgen-api": "^3.26.0",

47
addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts
View File

@ -1,11 +1,13 @@
import { PropDefaultValue, PropDef } from '@storybook/components';
import { isNil, isPlainObject, isArray, isFunction } from 'lodash';
import { createSummaryValue } from '../../../../lib';
import { isNil, isPlainObject, isArray, isFunction, isString } from 'lodash';
import reactElementToJSXString from 'react-element-to-jsx-string';
import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
import { inspectValue, InspectionFunction } from '../inspection';
import { generateObject } from './generateObject';
import { generateArray } from './generateArray';
import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from './prettyIdentifier';
import { OBJECT_CAPTION, FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
import { isHtmlTag } from '../isHtmlTag';
export type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue;
@ -35,16 +37,36 @@ const stringResolver: TypeResolver = rawDefaultProp => {
return createSummaryValue(rawDefaultProp);
};
const objectResolver: TypeResolver = rawDefaultProp => {
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
// The body of a React component object could be reconstructured from React metadata props on objects.
if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) {
const { displayName } = rawDefaultProp.type;
function generateReactObject(rawDefaultProp: any) {
const { type } = rawDefaultProp;
const { displayName } = type;
// When the displayName is null, it indicate that it is an HTML element.
return !isNil(displayName)
? createSummaryValue(getPrettyElementIdentifier(displayName))
: createSummaryValue(ELEMENT_CAPTION);
const jsx = reactElementToJSXString(rawDefaultProp);
if (!isNil(displayName)) {
const prettyIdentifier = getPrettyElementIdentifier(displayName);
return createSummaryValue(prettyIdentifier, prettyIdentifier !== jsx ? jsx : undefined);
}
if (isString(type)) {
// This is an HTML element.
if (isHtmlTag(type)) {
const jsxCompact = reactElementToJSXString(rawDefaultProp, { tabStop: 0 });
const jsxSummary = jsxCompact.replace(/\r?\n|\r/g, '');
if (!isTooLongForDefaultValueSummary(jsxSummary)) {
return createSummaryValue(jsxSummary);
}
}
}
return createSummaryValue(ELEMENT_CAPTION, jsx);
}
const objectResolver: TypeResolver = rawDefaultProp => {
if (isReactElement(rawDefaultProp) && !isNil(rawDefaultProp.type)) {
return generateReactObject(rawDefaultProp);
}
if (isPlainObject(rawDefaultProp)) {
@ -66,6 +88,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
let isElement = false;
let inspectionResult;
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
if (isFunction(rawDefaultProp.render)) {
isElement = true;
} else if (!isNil(rawDefaultProp.prototype) && isFunction(rawDefaultProp.prototype.render)) {
@ -135,7 +158,7 @@ export function createTypeResolvers(customResolvers: Partial<TypeResolvers> = {}
// When react-docgen cannot provide a defaultValue we take it from the raw defaultProp.
// It works fine for types that are not transpiled. For the types that are transpiled, we can only provide partial support.
// This means that:
// - The detail will not be available.
// - The detail might not be available.
// - Identifiers might not be "prettified" for all the types.
export function createDefaultValueFromRawDefaultProp(
rawDefaultProp: any,

309
addons/docs/src/frameworks/react/propTypes/handleProp.test.ts → addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
View File

@ -2,12 +2,17 @@
import { PropDef } from '@storybook/components';
import PropTypes from 'prop-types';
import React from 'react';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
import { enhancePropTypesProp, enhancePropTypesProps } from './handleProp';
const DOCGEN_SECTION = 'props';
function ReactComponent() {
return <div>React Component!</div>;
}
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
@ -42,8 +47,12 @@ function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} })
return component;
}
function extractPropDef(component: Component): PropDef {
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
function createDefaultValue(defaultValue: string): DocgenPropDefaultValue {
return { value: defaultValue };
}
function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
return enhancePropTypesProp(extractComponentProps(component, DOCGEN_SECTION)[0], rawDefaultProp);
}
describe('enhancePropTypesProp', () => {
@ -917,20 +926,23 @@ describe('enhancePropTypesProp', () => {
});
describe('defaultValue', () => {
function createTestComponent(defaultValue: string): Component {
function createTestComponent(
defaultValue: DocgenPropDefaultValue,
typeName = 'anything-is-fine'
): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
type: { name: 'anything-is-fine' },
defaultValue: { value: defaultValue },
type: { name: typeName },
defaultValue,
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar' }");
const component = createTestComponent(createDefaultValue("{ foo: 'foo', bar: 'bar' }"));
const { defaultValue } = extractPropDef(component);
@ -941,7 +953,9 @@ describe('enhancePropTypesProp', () => {
});
it('should support long object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar', another: 'another' }");
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: 'bar', another: 'another' }")
);
const { defaultValue } = extractPropDef(component);
@ -957,7 +971,9 @@ describe('enhancePropTypesProp', () => {
});
it('should not have deep object in summary', () => {
const component = createTestComponent("{ foo: 'foo', bar: { hey: 'ho' } }");
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }")
);
const { defaultValue } = extractPropDef(component);
@ -965,7 +981,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short function', () => {
const component = createTestComponent('() => {}');
const component = createTestComponent(createDefaultValue('() => {}'));
const { defaultValue } = extractPropDef(component);
@ -975,7 +991,9 @@ describe('enhancePropTypesProp', () => {
it('should support long function', () => {
const component = createTestComponent(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
createDefaultValue(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
)
);
const { defaultValue } = extractPropDef(component);
@ -992,7 +1010,9 @@ describe('enhancePropTypesProp', () => {
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent('function concat(a, b) {\n return a + b;\n}');
const component = createTestComponent(
createDefaultValue('function concat(a, b) {\n return a + b;\n}')
);
const { defaultValue } = extractPropDef(component);
@ -1006,7 +1026,9 @@ describe('enhancePropTypesProp', () => {
});
it('should use the name of function when available', () => {
const component = createTestComponent('function hello() {\n return "hello";\n}');
const component = createTestComponent(
createDefaultValue('function hello() {\n return "hello";\n}')
);
const { defaultValue } = extractPropDef(component);
@ -1020,7 +1042,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short element', () => {
const component = createTestComponent('<div>Hey!</div>');
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
@ -1030,23 +1052,33 @@ describe('enhancePropTypesProp', () => {
it('should support long element', () => {
const component = createTestComponent(
'() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
createDefaultValue(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBe(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
);
});
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
}`;
it('should support element with props', () => {
const component = createTestComponent(createDefaultValue('<Component className="toto" />'));
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<Component />');
expect(defaultValue.detail).toBe('<Component className="toto" />');
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
createDefaultValue(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
)
);
const { defaultValue } = extractPropDef(component);
@ -1061,7 +1093,7 @@ describe('enhancePropTypesProp', () => {
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent('<div>Hey!</div>');
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
@ -1069,7 +1101,7 @@ describe('enhancePropTypesProp', () => {
});
it('should support short array', () => {
const component = createTestComponent('[1]');
const component = createTestComponent(createDefaultValue('[1]'));
const { defaultValue } = extractPropDef(component);
@ -1079,7 +1111,9 @@ describe('enhancePropTypesProp', () => {
it('should support long array', () => {
const component = createTestComponent(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
createDefaultValue(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
)
);
const { defaultValue } = extractPropDef(component);
@ -1099,12 +1133,239 @@ describe('enhancePropTypesProp', () => {
});
it('should not have deep array in summary', () => {
const component = createTestComponent('[[[1]]]');
const component = createTestComponent(createDefaultValue('[[[1]]]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
describe('fromRawDefaultProp', () => {
[
{ type: 'string', defaultProp: 'foo' },
{ type: 'number', defaultProp: 1 },
{ type: 'boolean', defaultProp: true },
{ type: 'symbol', defaultProp: Symbol('hey!') },
].forEach(x => {
it(`should support ${x.type}`, () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, x.defaultProp);
expect(defaultValue.summary).toBe(x.defaultProp.toString());
expect(defaultValue.detail).toBeUndefined();
});
});
it('should support array of primitives', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [1, 2, 3]);
expect(defaultValue.summary).toBe('[1, 2, 3]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar' });
expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support anonymous function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, () => 'hey!');
expect(defaultValue.summary).toBe('func');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function hello() {
return 'world!';
});
expect(defaultValue.summary).toBe('hello()');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function with params', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
return a + b;
});
expect(defaultValue.summary).toBe('add( ... )');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element', () => {
const component = createTestComponent(null);
const defaultProp = <ReactComponent />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element with props', () => {
const component = createTestComponent(null);
// @ts-ignore
const defaultProp = <ReactComponent className="toto" />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
});
it('should support short HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
expect(defaultValue.summary).toBe('<div>HTML element</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(
component,
<div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `<div>
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
['element', 'elementType'].forEach(x => {
it(`should support inlined React class component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(
component,
class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
}
);
expect(defaultValue.summary).toBe('<InlinedClassComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, () => {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
foo,
}: {
foo: string;
}) {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
});
});
});
});

2
addons/docs/src/frameworks/react/propTypes/handleProp.ts
View File

@ -16,7 +16,7 @@ export function enhancePropTypesProp(extractedProp: ExtractedProp, rawDefaultPro
}
const { defaultValue } = extractedProp.docgenInfo;
if (!isNil(defaultValue)) {
if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
const newDefaultValue = createDefaultValue(defaultValue.value);
if (!isNil(newDefaultValue)) {

1
addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts
View File

@ -13,6 +13,7 @@ const funcResolver: TypeResolver = (rawDefaultProp, { name, type }) => {
const funcName = extractFunctionName(rawDefaultProp, name);
if (!isNil(funcName)) {
// Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
if (isElement) {
return createSummaryValue(getPrettyElementIdentifier(funcName));
}

239
addons/docs/src/frameworks/react/typeScript/handleProp.test.ts
View File

@ -1,239 +0,0 @@
/* eslint-disable no-underscore-dangle */
import { PropDef } from '@storybook/components';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo } from '../../../lib/docgen';
import { enhanceTypeScriptProp } from './handleProp';
const DOCGEN_SECTION = 'props';
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
...docgenInfo,
},
};
}
function createDocgenProp({
name,
tsType,
...others
}: Partial<DocgenInfo> & { name: string }): Record<string, any> {
return {
[name]: {
tsType,
required: false,
...others,
},
};
}
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
// @ts-ignore
component.__docgenInfo = createDocgenSection(docgenInfo);
return component;
}
function extractPropDef(component: Component): PropDef {
return enhanceTypeScriptProp(extractComponentProps(component, DOCGEN_SECTION)[0]);
}
describe('enhanceTypeScriptProp', () => {
describe('defaultValue', () => {
function createTestComponent(defaultValue: string): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
tsType: { name: 'anything-is-fine' },
defaultValue: { value: defaultValue },
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar' }");
const { defaultValue } = extractPropDef(component);
const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent("{ foo: 'foo', bar: 'bar', another: 'another' }");
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
foo: 'foo',
bar: 'bar',
another: 'another'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent("{ foo: 'foo', bar: { hey: 'ho' } }");
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
});
it('should support short function', () => {
const component = createTestComponent('() => {}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('() => {}');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long function', () => {
const component = createTestComponent(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('func');
const expectedDetail = `(foo, bar) => {
const concat = foo + bar;
const append = concat + ' hey!';
return append
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent('function concat(a, b) {\n return a + b;\n}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('concat( ... )');
const expectedDetail = `function concat(a, b) {
return a + b
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available', () => {
const component = createTestComponent('function hello() {\n return "hello";\n}');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('hello()');
const expectedDetail = `function hello() {
return 'hello'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short element', () => {
const component = createTestComponent('<div>Hey!</div>');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<div>Hey!</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long element', () => {
const component = createTestComponent(
'() => {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `() => {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
const expectedDetail = `function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent('<div>Hey!</div>');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).not.toBe('<div />');
});
it('should support short array', () => {
const component = createTestComponent('[1]');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('[1]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long array', () => {
const component = createTestComponent(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
thing: {
id: 2,
func: () => {
},
arr: []
}
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep array in summary', () => {
const component = createTestComponent('[[[1]]]');
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
});
});

497
addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx Normal file
View File

@ -0,0 +1,497 @@
/* eslint-disable no-underscore-dangle */
import { PropDef } from '@storybook/components';
import React from 'react';
import { Component } from '../../../blocks/shared';
import { extractComponentProps, DocgenInfo, DocgenPropDefaultValue } from '../../../lib/docgen';
import { enhanceTypeScriptProp } from './handleProp';
const DOCGEN_SECTION = 'props';
function ReactComponent() {
return <div>React Component!</div>;
}
function createDocgenSection(docgenInfo: DocgenInfo): Record<string, any> {
return {
[DOCGEN_SECTION]: {
...docgenInfo,
},
};
}
function createDocgenProp({
name,
tsType,
...others
}: Partial<DocgenInfo> & { name: string }): Record<string, any> {
return {
[name]: {
tsType,
required: false,
...others,
},
};
}
// eslint-disable-next-line react/forbid-foreign-prop-types
function createComponent({ propTypes = {}, defaultProps = {}, docgenInfo = {} }): Component {
const component = () => {};
component.propTypes = propTypes;
component.defaultProps = defaultProps;
// @ts-ignore
component.__docgenInfo = createDocgenSection(docgenInfo);
return component;
}
function createDefaultValue(defaultValue: string): DocgenPropDefaultValue {
return { value: defaultValue };
}
function extractPropDef(component: Component, rawDefaultProp?: any): PropDef {
return enhanceTypeScriptProp(extractComponentProps(component, DOCGEN_SECTION)[0], rawDefaultProp);
}
describe('enhanceTypeScriptProp', () => {
describe('defaultValue', () => {
function createTestComponent(defaultValue: DocgenPropDefaultValue): Component {
return createComponent({
docgenInfo: {
...createDocgenProp({
name: 'prop',
tsType: { name: 'anything-is-fine' },
defaultValue,
}),
},
});
}
it('should support short object', () => {
const component = createTestComponent(createDefaultValue("{ foo: 'foo', bar: 'bar' }"));
const { defaultValue } = extractPropDef(component);
const expectedSummary = "{ foo: 'foo', bar: 'bar' }";
expect(defaultValue.summary.replace(/\s/g, '')).toBe(expectedSummary.replace(/\s/g, ''));
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: 'bar', another: 'another' }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
foo: 'foo',
bar: 'bar',
another: 'another'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep object in summary', () => {
const component = createTestComponent(
createDefaultValue("{ foo: 'foo', bar: { hey: 'ho' } }")
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('object');
});
it('should support short function', () => {
const component = createTestComponent(createDefaultValue('() => {}'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('() => {}');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long function', () => {
const component = createTestComponent(
createDefaultValue(
'(foo, bar) => {\n const concat = foo + bar;\n const append = concat + " hey!";\n \n return append;\n}'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('func');
const expectedDetail = `(foo, bar) => {
const concat = foo + bar;
const append = concat + ' hey!';
return append
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available and indicate that args are present', () => {
const component = createTestComponent(
createDefaultValue('function concat(a, b) {\n return a + b;\n}')
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('concat( ... )');
const expectedDetail = `function concat(a, b) {
return a + b
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should use the name of function when available', () => {
const component = createTestComponent(
createDefaultValue('function hello() {\n return "hello";\n}')
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('hello()');
const expectedDetail = `function hello() {
return 'hello'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short element', () => {
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<div>Hey!</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long element', () => {
const component = createTestComponent(
createDefaultValue(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBe(
'<div>Hey! Hey! Hey!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>'
);
});
it('should support element with props', () => {
const component = createTestComponent(createDefaultValue('<Component className="toto" />'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<Component />');
expect(defaultValue.detail).toBe('<Component className="toto" />');
});
it("should use the name of the React component when it's available", () => {
const component = createTestComponent(
createDefaultValue(
'function InlinedFunctionalComponent() {\n return <div>Inlined FunctionnalComponent!</div>;\n}'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
const expectedDetail = `function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not use the name of an HTML element', () => {
const component = createTestComponent(createDefaultValue('<div>Hey!</div>'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).not.toBe('<div />');
});
it('should support short array', () => {
const component = createTestComponent(createDefaultValue('[1]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('[1]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long array', () => {
const component = createTestComponent(
createDefaultValue(
'[\n {\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n },\n]'
)
);
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
thing: {
id: 2,
func: () => {
},
arr: []
}
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should not have deep array in summary', () => {
const component = createTestComponent(createDefaultValue('[[[1]]]'));
const { defaultValue } = extractPropDef(component);
expect(defaultValue.summary).toBe('array');
});
describe('fromRawDefaultProp', () => {
[
{ type: 'string', defaultProp: 'foo' },
{ type: 'number', defaultProp: 1 },
{ type: 'boolean', defaultProp: true },
{ type: 'symbol', defaultProp: Symbol('hey!') },
].forEach(x => {
it(`should support ${x.type}`, () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, x.defaultProp);
expect(defaultValue.summary).toBe(x.defaultProp.toString());
expect(defaultValue.detail).toBeUndefined();
});
});
it('should support array of primitives', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [1, 2, 3]);
expect(defaultValue.summary).toBe('[1, 2, 3]');
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar' }]);
expect(defaultValue.summary).toBe("[{ 'foo': 'bar' }]");
expect(defaultValue.detail).toBeUndefined();
});
it('should support array of long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, [{ foo: 'bar', bar: 'foo', hey: 'ho' }]);
expect(defaultValue.summary).toBe('array');
const expectedDetail = `[{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}]`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support short object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar' });
expect(defaultValue.summary).toBe("{ 'foo': 'bar' }");
expect(defaultValue.detail).toBeUndefined();
});
it('should support long object', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, { foo: 'bar', bar: 'foo', hey: 'ho' });
expect(defaultValue.summary).toBe('object');
const expectedDetail = `{
'foo': 'bar',
'bar': 'foo',
'hey': 'ho'
}`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
it('should support anonymous function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, () => 'hey!');
expect(defaultValue.summary).toBe('func');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function hello() {
return 'world!';
});
expect(defaultValue.summary).toBe('hello()');
expect(defaultValue.detail).toBeUndefined();
});
it('should support named function with params', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, function add(a: number, b: number) {
return a + b;
});
expect(defaultValue.summary).toBe('add( ... )');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element', () => {
const component = createTestComponent(null);
const defaultProp = <ReactComponent />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it('should support React element with props', () => {
const component = createTestComponent(null);
// @ts-ignore
const defaultProp = <ReactComponent className="toto" />;
// Simulate babel-plugin-add-react-displayname.
defaultProp.type.displayName = 'ReactComponent';
const { defaultValue } = extractPropDef(component, defaultProp);
expect(defaultValue.summary).toBe('<ReactComponent />');
expect(defaultValue.detail).toBe('<ReactComponent className="toto" />');
});
it('should support short HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(component, <div>HTML element</div>);
expect(defaultValue.summary).toBe('<div>HTML element</div>');
expect(defaultValue.detail).toBeUndefined();
});
it('should support long HTML element', () => {
const component = createTestComponent(null);
const { defaultValue } = extractPropDef(
component,
<div>HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
);
expect(defaultValue.summary).toBe('element');
const expectedDetail = `<div>
HTML element!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>`;
expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
});
['element', 'elementType'].forEach(x => {
it(`should support inlined React class component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(
component,
class InlinedClassComponent extends React.PureComponent {
render() {
return <div>Inlined ClassComponent!</div>;
}
}
);
expect(defaultValue.summary).toBe('<InlinedClassComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, () => {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined anonymous React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, ({ foo }: { foo: string }) => {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('element');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
return <div>Inlined FunctionnalComponent!</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
it(`should support inlined named React functional component with props for ${x}`, () => {
const component = createTestComponent(null, x);
const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent({
foo,
}: {
foo: string;
}) {
return <div>{foo}</div>;
});
expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
expect(defaultValue.detail).toBeUndefined();
});
});
});
});
});

12
addons/docs/src/frameworks/react/typeScript/handleProp.ts
View File

@ -1,14 +1,20 @@
import { isNil } from 'lodash';
import { PropDef } from '@storybook/components';
import { ExtractedProp } from '../../../lib/docgen';
import { createDefaultValue } from '../lib/defaultValues';
import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
export function enhanceTypeScriptProp(extractedProp: ExtractedProp): PropDef {
export function enhanceTypeScriptProp(extractedProp: ExtractedProp, rawDefaultProp?: any): PropDef {
const { propDef } = extractedProp;
const { defaultValue } = extractedProp.docgenInfo;
if (!isNil(defaultValue)) {
if (!isNil(defaultValue) && !isNil(defaultValue.value)) {
const newDefaultValue = createDefaultValue(defaultValue.value);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}
} else if (!isNil(rawDefaultProp)) {
const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef);
if (!isNil(newDefaultValue)) {
propDef.defaultValue = newDefaultValue;
}

10
examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
View File

@ -45,6 +45,7 @@ const SOME_INLINE_PROP_TYPES = {
foo: PropTypes.string,
}),
inlineArray: PropTypes.arrayOf(PropTypes.number),
inlineArrayOfObjects: PropTypes.arrayOf({ foo: PropTypes.string }),
inlineFunctionalElement: PropTypes.element,
inlineFunctionalElementInline: PropTypes.element,
inlineFunctionalElementInlineReturningNull: PropTypes.element,
@ -64,6 +65,13 @@ const SOME_INLINE_DEFAULT_PROPS = {
inlineNumber: 10,
inlineObj: { foo: 'bar' },
inlineArray: [1, 2, 3],
inlineArrayOfObjects: [
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
{ foo: 'bar' },
],
inlineFunctionalElement: <FunctionalComponent />,
inlineFunctionalElementInline: () => {
return <div>Inlined FunctionnalComponent!</div>;
@ -370,7 +378,7 @@ PropTypesProps.defaultProps = {
},
symbol: Symbol('Default symbol'),
node: <div>Hello!</div>,
functionalElement: <FunctionalComponent />,
functionalElement: <FunctionalComponent className="toto" />,
functionalElementInline: () => {
return <div>Inlined FunctionnalComponent!</div>;
},

1
lib/components/src/typography/shared.tsx
View File

@ -20,6 +20,7 @@ export const headerCommon = ({ theme }: { theme: Theme }): CSSObject => ({
});
export const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({
lineHeight: 1,
margin: '0 2px',
padding: '0 5px',
whiteSpace: 'nowrap',