@storybook/react 6.5.0-alpha.45 → 6.5.0-alpha.48

package/dist/modern/client/docs/propTypes/createType.js

@@ -0,0 +1,446 @@
+import "core-js/modules/es.array.reduce.js";
+import { createSummaryValue, isTooLongForTypeSummary } from '@storybook/docs-tools';
+import { generateFuncSignature, generateShortFuncSignature, toMultilineSignature } from './generateFuncSignature';
+import { OBJECT_CAPTION, ARRAY_CAPTION, CLASS_CAPTION, FUNCTION_CAPTION, ELEMENT_CAPTION, CUSTOM_CAPTION, isHtmlTag, generateObjectCode, generateCode } from '../lib';
+import { InspectionType, inspectValue } from '../lib/inspection';
+const MAX_FUNC_LENGTH = 150;
+var PropTypesType;
+
+(function (PropTypesType) {
+  PropTypesType["CUSTOM"] = "custom";
+  PropTypesType["ANY"] = "any";
+  PropTypesType["FUNC"] = "func";
+  PropTypesType["SHAPE"] = "shape";
+  PropTypesType["OBJECT"] = "object";
+  PropTypesType["INSTANCEOF"] = "instanceOf";
+  PropTypesType["OBJECTOF"] = "objectOf";
+  PropTypesType["UNION"] = "union";
+  PropTypesType["ENUM"] = "enum";
+  PropTypesType["ARRAYOF"] = "arrayOf";
+  PropTypesType["ELEMENT"] = "element";
+  PropTypesType["ELEMENTTYPE"] = "elementType";
+  PropTypesType["NODE"] = "node";
+})(PropTypesType || (PropTypesType = {}));
+
+function createTypeDef({
+  name,
+  short,
+  compact,
+  full,
+  inferredType
+}) {
+  return {
+    name,
+    short,
+    compact,
+    full: full != null ? full : short,
+    inferredType
+  };
+}
+
+function cleanPropTypes(value) {
+  return value.replace(/PropTypes./g, '').replace(/.isRequired/g, '');
+}
+
+function splitIntoLines(value) {
+  return value.split(/\r?\n/);
+}
+
+function prettyObject(ast, compact = false) {
+  return cleanPropTypes(generateObjectCode(ast, compact));
+}
+
+function prettyArray(ast, compact = false) {
+  return cleanPropTypes(generateCode(ast, compact));
+}
+
+function getCaptionForInspectionType(type) {
+  switch (type) {
+    case InspectionType.OBJECT:
+      return OBJECT_CAPTION;
+
+    case InspectionType.ARRAY:
+      return ARRAY_CAPTION;
+
+    case InspectionType.CLASS:
+      return CLASS_CAPTION;
+
+    case InspectionType.FUNCTION:
+      return FUNCTION_CAPTION;
+
+    case InspectionType.ELEMENT:
+      return ELEMENT_CAPTION;
+
+    default:
+      return CUSTOM_CAPTION;
+  }
+}
+
+function generateTypeFromString(value, originalTypeName) {
+  const {
+    inferredType,
+    ast
+  } = inspectValue(value);
+  const {
+    type
+  } = inferredType;
+  let short;
+  let compact;
+  let full;
+
+  switch (type) {
+    case InspectionType.IDENTIFIER:
+    case InspectionType.LITERAL:
+      short = value;
+      compact = value;
+      break;
+
+    case InspectionType.OBJECT:
+      {
+        const {
+          depth
+        } = inferredType;
+        short = OBJECT_CAPTION;
+        compact = depth === 1 ? prettyObject(ast, true) : null;
+        full = prettyObject(ast);
+        break;
+      }
+
+    case InspectionType.ELEMENT:
+      {
+        const {
+          identifier
+        } = inferredType;
+        short = identifier != null && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
+        compact = splitIntoLines(value).length === 1 ? value : null;
+        full = value;
+        break;
+      }
+
+    case InspectionType.ARRAY:
+      {
+        const {
+          depth
+        } = inferredType;
+        short = ARRAY_CAPTION;
+        compact = depth <= 2 ? prettyArray(ast, true) : null;
+        full = prettyArray(ast);
+        break;
+      }
+
+    default:
+      short = getCaptionForInspectionType(type);
+      compact = splitIntoLines(value).length === 1 ? value : null;
+      full = value;
+      break;
+  }
+
+  return createTypeDef({
+    name: originalTypeName,
+    short,
+    compact,
+    full,
+    inferredType: type
+  });
+}
+
+function generateCustom({
+  raw
+}) {
+  if (raw != null) {
+    return generateTypeFromString(raw, PropTypesType.CUSTOM);
+  }
+
+  return createTypeDef({
+    name: PropTypesType.CUSTOM,
+    short: CUSTOM_CAPTION,
+    compact: CUSTOM_CAPTION
+  });
+}
+
+function generateFunc(extractedProp) {
+  const {
+    jsDocTags
+  } = extractedProp;
+
+  if (jsDocTags != null) {
+    if (jsDocTags.params != null || jsDocTags.returns != null) {
+      return createTypeDef({
+        name: PropTypesType.FUNC,
+        short: generateShortFuncSignature(jsDocTags.params, jsDocTags.returns),
+        compact: null,
+        full: generateFuncSignature(jsDocTags.params, jsDocTags.returns)
+      });
+    }
+  }
+
+  return createTypeDef({
+    name: PropTypesType.FUNC,
+    short: FUNCTION_CAPTION,
+    compact: FUNCTION_CAPTION
+  });
+}
+
+function generateShape(type, extractedProp) {
+  const fields = Object.keys(type.value).map(key => `${key}: ${generateType(type.value[key], extractedProp).full}`).join(', ');
+  const {
+    inferredType,
+    ast
+  } = inspectValue(`{ ${fields} }`);
+  const {
+    depth
+  } = inferredType;
+  return createTypeDef({
+    name: PropTypesType.SHAPE,
+    short: OBJECT_CAPTION,
+    compact: depth === 1 && ast ? prettyObject(ast, true) : null,
+    full: ast ? prettyObject(ast) : null
+  });
+}
+
+function objectOf(of) {
+  return `objectOf(${of})`;
+}
+
+function generateObjectOf(type, extractedProp) {
+  const {
+    short,
+    compact,
+    full
+  } = generateType(type.value, extractedProp);
+  return createTypeDef({
+    name: PropTypesType.OBJECTOF,
+    short: objectOf(short),
+    compact: compact != null ? objectOf(compact) : null,
+    full: objectOf(full)
+  });
+}
+
+function generateUnion(type, extractedProp) {
+  if (Array.isArray(type.value)) {
+    const values = type.value.reduce((acc, v) => {
+      const {
+        short,
+        compact,
+        full
+      } = generateType(v, extractedProp);
+      acc.short.push(short);
+      acc.compact.push(compact);
+      acc.full.push(full);
+      return acc;
+    }, {
+      short: [],
+      compact: [],
+      full: []
+    });
+    return createTypeDef({
+      name: PropTypesType.UNION,
+      short: values.short.join(' | '),
+      compact: values.compact.every(x => x != null) ? values.compact.join(' | ') : null,
+      full: values.full.join(' | ')
+    });
+  }
+
+  return createTypeDef({
+    name: PropTypesType.UNION,
+    short: type.value,
+    compact: null
+  });
+}
+
+function generateEnumValue({
+  value,
+  computed
+}) {
+  return computed ? generateTypeFromString(value, 'enumvalue') : createTypeDef({
+    name: 'enumvalue',
+    short: value,
+    compact: value
+  });
+}
+
+function generateEnum(type) {
+  if (Array.isArray(type.value)) {
+    const values = type.value.reduce((acc, v) => {
+      const {
+        short,
+        compact,
+        full
+      } = generateEnumValue(v);
+      acc.short.push(short);
+      acc.compact.push(compact);
+      acc.full.push(full);
+      return acc;
+    }, {
+      short: [],
+      compact: [],
+      full: []
+    });
+    return createTypeDef({
+      name: PropTypesType.ENUM,
+      short: values.short.join(' | '),
+      compact: values.compact.every(x => x != null) ? values.compact.join(' | ') : null,
+      full: values.full.join(' | ')
+    });
+  }
+
+  return createTypeDef({
+    name: PropTypesType.ENUM,
+    short: type.value,
+    compact: type.value
+  });
+}
+
+function braceAfter(of) {
+  return `${of}[]`;
+}
+
+function braceAround(of) {
+  return `[${of}]`;
+}
+
+function createArrayOfObjectTypeDef(short, compact, full) {
+  return createTypeDef({
+    name: PropTypesType.ARRAYOF,
+    short: braceAfter(short),
+    compact: compact != null ? braceAround(compact) : null,
+    full: braceAround(full)
+  });
+}
+
+function generateArray(type, extractedProp) {
+  const {
+    name,
+    short,
+    compact,
+    full,
+    inferredType
+  } = generateType(type.value, extractedProp);
+
+  if (name === PropTypesType.CUSTOM) {
+    if (inferredType === InspectionType.OBJECT) {
+      return createArrayOfObjectTypeDef(short, compact, full);
+    }
+  } else if (name === PropTypesType.SHAPE) {
+    return createArrayOfObjectTypeDef(short, compact, full);
+  }
+
+  return createTypeDef({
+    name: PropTypesType.ARRAYOF,
+    short: braceAfter(short),
+    compact: braceAfter(short)
+  });
+}
+
+function generateType(type, extractedProp) {
+  try {
+    switch (type.name) {
+      case PropTypesType.CUSTOM:
+        return generateCustom(type);
+
+      case PropTypesType.FUNC:
+        return generateFunc(extractedProp);
+
+      case PropTypesType.SHAPE:
+        return generateShape(type, extractedProp);
+
+      case PropTypesType.INSTANCEOF:
+        return createTypeDef({
+          name: PropTypesType.INSTANCEOF,
+          short: type.value,
+          compact: type.value
+        });
+
+      case PropTypesType.OBJECTOF:
+        return generateObjectOf(type, extractedProp);
+
+      case PropTypesType.UNION:
+        return generateUnion(type, extractedProp);
+
+      case PropTypesType.ENUM:
+        return generateEnum(type);
+
+      case PropTypesType.ARRAYOF:
+        return generateArray(type, extractedProp);
+
+      default:
+        return createTypeDef({
+          name: type.name,
+          short: type.name,
+          compact: type.name
+        });
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+
+  return createTypeDef({
+    name: 'unknown',
+    short: 'unknown',
+    compact: 'unknown'
+  });
+}
+
+export function createType(extractedProp) {
+  const {
+    type
+  } = extractedProp.docgenInfo; // A type could be null if a defaultProp has been provided without a type definition.
+
+  if (type == null) {
+    return null;
+  }
+
+  try {
+    switch (type.name) {
+      case PropTypesType.CUSTOM:
+      case PropTypesType.SHAPE:
+      case PropTypesType.INSTANCEOF:
+      case PropTypesType.OBJECTOF:
+      case PropTypesType.UNION:
+      case PropTypesType.ENUM:
+      case PropTypesType.ARRAYOF:
+        {
+          const {
+            short,
+            compact,
+            full
+          } = generateType(type, extractedProp);
+
+          if (compact != null) {
+            if (!isTooLongForTypeSummary(compact)) {
+              return createSummaryValue(compact);
+            }
+          }
+
+          return createSummaryValue(short, full);
+        }
+
+      case PropTypesType.FUNC:
+        {
+          const {
+            short,
+            full
+          } = generateType(type, extractedProp);
+          let summary = short;
+          let detail;
+
+          if (full.length < MAX_FUNC_LENGTH) {
+            summary = full;
+          } else {
+            detail = toMultilineSignature(full);
+          }
+
+          return createSummaryValue(summary, detail);
+        }
+
+      default:
+        return null;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+
+  return null;
+}

package/dist/modern/client/docs/propTypes/generateFuncSignature.js

@@ -0,0 +1,57 @@
+export function generateFuncSignature(params, returns) {
+  const hasParams = params != null;
+  const hasReturns = returns != null;
+
+  if (!hasParams && !hasReturns) {
+    return '';
+  }
+
+  const funcParts = [];
+
+  if (hasParams) {
+    const funcParams = params.map(x => {
+      const prettyName = x.getPrettyName();
+      const typeName = x.getTypeName();
+
+      if (typeName != null) {
+        return `${prettyName}: ${typeName}`;
+      }
+
+      return prettyName;
+    });
+    funcParts.push(`(${funcParams.join(', ')})`);
+  } else {
+    funcParts.push('()');
+  }
+
+  if (hasReturns) {
+    funcParts.push(`=> ${returns.getTypeName()}`);
+  }
+
+  return funcParts.join(' ');
+}
+export function generateShortFuncSignature(params, returns) {
+  const hasParams = params != null;
+  const hasReturns = returns != null;
+
+  if (!hasParams && !hasReturns) {
+    return '';
+  }
+
+  const funcParts = [];
+
+  if (hasParams) {
+    funcParts.push('( ... )');
+  } else {
+    funcParts.push('()');
+  }
+
+  if (hasReturns) {
+    funcParts.push(`=> ${returns.getTypeName()}`);
+  }
+
+  return funcParts.join(' ');
+}
+export function toMultilineSignature(signature) {
+  return signature.replace(/,/g, ',\r\n');
+}

package/dist/modern/client/docs/propTypes/handleProp.js

@@ -0,0 +1,39 @@
+import { createType } from './createType';
+import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
+import { keepOriginalDefinitionOrder } from './sortProps';
+import { rawDefaultPropTypeResolvers } from './rawDefaultPropResolvers';
+export function enhancePropTypesProp(extractedProp, rawDefaultProp) {
+  const {
+    propDef
+  } = extractedProp;
+  const newtype = createType(extractedProp);
+
+  if (newtype != null) {
+    propDef.type = newtype;
+  }
+
+  const {
+    defaultValue
+  } = extractedProp.docgenInfo;
+
+  if (defaultValue != null && defaultValue.value != null) {
+    const newDefaultValue = createDefaultValue(defaultValue.value);
+
+    if (newDefaultValue != null) {
+      propDef.defaultValue = newDefaultValue;
+    }
+  } else if (rawDefaultProp != null) {
+    const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef, rawDefaultPropTypeResolvers);
+
+    if (newDefaultValue != null) {
+      propDef.defaultValue = newDefaultValue;
+    }
+  }
+
+  return propDef;
+}
+export function enhancePropTypesProps(extractedProps, component) {
+  const rawDefaultProps = component.defaultProps != null ? component.defaultProps : {};
+  const enhancedProps = extractedProps.map(x => enhancePropTypesProp(x, rawDefaultProps[x.propDef.name]));
+  return keepOriginalDefinitionOrder(enhancedProps, component);
+}

package/dist/modern/client/docs/propTypes/rawDefaultPropResolvers.js

@@ -0,0 +1,31 @@
+import { createSummaryValue } from '@storybook/docs-tools';
+import { extractFunctionName, createTypeResolvers } from '../lib/defaultValues';
+import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../lib';
+import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from '../lib/defaultValues/prettyIdentifier';
+import { inspectValue } from '../lib/inspection';
+
+const funcResolver = (rawDefaultProp, {
+  name,
+  type
+}) => {
+  const isElement = type.summary === 'element' || type.summary === 'elementType';
+  const funcName = extractFunctionName(rawDefaultProp, name);
+
+  if (funcName != null) {
+    // Try to display the name of the component. The body of the component is omitted since the code has been transpiled.
+    if (isElement) {
+      return createSummaryValue(getPrettyElementIdentifier(funcName));
+    }
+
+    const {
+      hasParams
+    } = inspectValue(rawDefaultProp.toString()).inferredType;
+    return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
+  }
+
+  return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
+};
+
+export const rawDefaultPropTypeResolvers = createTypeResolvers({
+  function: funcResolver
+});

package/dist/modern/client/docs/propTypes/sortProps.js

@@ -0,0 +1,14 @@
+// react-docgen doesn't returned the props in the order they were defined in the "propTypes" object of the component.
+// This function re-order them by their original definition order.
+export function keepOriginalDefinitionOrder(extractedProps, component) {
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  const {
+    propTypes
+  } = component;
+
+  if (propTypes != null) {
+    return Object.keys(propTypes).map(x => extractedProps.find(y => y.name === x)).filter(x => x);
+  }
+
+  return extractedProps;
+}

package/dist/modern/client/docs/react-argtypes.stories.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import mapValues from 'lodash/mapValues';
+import { ArgsTable } from '@storybook/components';
+import { inferControls } from '@storybook/store';
+import { storiesOf } from '..';
+import { extractArgTypes } from './extractArgTypes'; // FIXME
+
+const argsTableProps = component => {
+  const argTypes = extractArgTypes(component);
+  const parameters = {
+    __isArgsStory: true
+  };
+  const rows = inferControls({
+    argTypes,
+    parameters
+  });
+  return {
+    rows
+  };
+};
+
+const ArgsStory = ({
+  component
+}) => {
+  const {
+    rows
+  } = argsTableProps(component);
+  const initialArgs = mapValues(rows, argType => argType.defaultValue);
+  const [args, setArgs] = useState(initialArgs);
+  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, {
+    rows: rows,
+    args: args,
+    updateArgs: val => setArgs(Object.assign({}, args, val))
+  }), /*#__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", {
+    key: key
+  }, /*#__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]))))))));
+};
+
+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'];
+const issuesStories = storiesOf('ArgTypes/Issues', module);
+issuesFixtures.forEach(fixture => {
+  // eslint-disable-next-line import/no-dynamic-require, global-require
+  const {
+    component
+  } = require(`./__testfixtures__/${fixture}/input`);
+
+  issuesStories.add(fixture, () => /*#__PURE__*/React.createElement(ArgsStory, {
+    component: component
+  }), {
+    chromatic: {
+      disable: true
+    }
+  });
+});

package/dist/modern/client/docs/typeScript/handleProp.js

@@ -0,0 +1,28 @@
+import { createDefaultValue, createDefaultValueFromRawDefaultProp } from '../lib/defaultValues';
+export function enhanceTypeScriptProp(extractedProp, rawDefaultProp) {
+  const {
+    propDef
+  } = extractedProp;
+  const {
+    defaultValue
+  } = extractedProp.docgenInfo;
+
+  if (defaultValue != null && defaultValue.value != null) {
+    const newDefaultValue = createDefaultValue(defaultValue.value);
+
+    if (newDefaultValue != null) {
+      propDef.defaultValue = newDefaultValue;
+    }
+  } else if (rawDefaultProp != null) {
+    const newDefaultValue = createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef);
+
+    if (newDefaultValue != null) {
+      propDef.defaultValue = newDefaultValue;
+    }
+  }
+
+  return propDef;
+}
+export function enhanceTypeScriptProps(extractedProps) {
+  return extractedProps.map(prop => enhanceTypeScriptProp(prop));
+}