@storybook/react 6.5.0-alpha.5 → 6.5.0-alpha.50

package/dist/esm/client/docs/lib/inspection/acornParser.js

@@ -0,0 +1,213 @@
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import { Parser } from 'acorn';
+import jsx from 'acorn-jsx';
+import * as acornWalk from 'acorn-walk';
+import { InspectionType } from './types';
+var ACORN_WALK_VISITORS = Object.assign({}, acornWalk.base, {
+  JSXElement: function JSXElement() {}
+});
+var acornParser = Parser.extend(jsx()); // Cannot use "estree.Identifier" type because this function also support "JSXIdentifier".
+
+function extractIdentifierName(identifierNode) {
+  return identifierNode != null ? identifierNode.name : null;
+}
+
+function filterAncestors(ancestors) {
+  return ancestors.filter(function (x) {
+    return x.type === 'ObjectExpression' || x.type === 'ArrayExpression';
+  });
+}
+
+function calculateNodeDepth(node) {
+  var depths = [];
+  acornWalk.ancestor( // @ts-ignore
+  node, {
+    ObjectExpression: function ObjectExpression(_, ancestors) {
+      depths.push(filterAncestors(ancestors).length);
+    },
+    ArrayExpression: function ArrayExpression(_, ancestors) {
+      depths.push(filterAncestors(ancestors).length);
+    }
+  }, ACORN_WALK_VISITORS);
+  return Math.max.apply(Math, depths);
+}
+
+function parseIdentifier(identifierNode) {
+  return {
+    inferredType: {
+      type: InspectionType.IDENTIFIER,
+      identifier: extractIdentifierName(identifierNode)
+    },
+    ast: identifierNode
+  };
+}
+
+function parseLiteral(literalNode) {
+  return {
+    inferredType: {
+      type: InspectionType.LITERAL
+    },
+    ast: literalNode
+  };
+}
+
+function parseFunction(funcNode) {
+  var innerJsxElementNode; // If there is at least a JSXElement in the body of the function, then it's a React component.
+
+  acornWalk.simple( // @ts-ignore
+  funcNode.body, {
+    JSXElement: function JSXElement(node) {
+      innerJsxElementNode = node;
+    }
+  }, ACORN_WALK_VISITORS);
+  var isJsx = innerJsxElementNode != null;
+  var inferredType = {
+    type: isJsx ? InspectionType.ELEMENT : InspectionType.FUNCTION,
+    params: funcNode.params,
+    hasParams: funcNode.params.length !== 0
+  };
+  var identifierName = extractIdentifierName(funcNode.id);
+
+  if (identifierName != null) {
+    inferredType.identifier = identifierName;
+  }
+
+  return {
+    inferredType: inferredType,
+    ast: funcNode
+  };
+}
+
+function parseClass(classNode) {
+  var innerJsxElementNode; // If there is at least a JSXElement in the body of the class, then it's a React component.
+
+  acornWalk.simple( // @ts-ignore
+  classNode.body, {
+    JSXElement: function JSXElement(node) {
+      innerJsxElementNode = node;
+    }
+  }, ACORN_WALK_VISITORS);
+  var inferredType = {
+    type: innerJsxElementNode != null ? InspectionType.ELEMENT : InspectionType.CLASS,
+    identifier: extractIdentifierName(classNode.id)
+  };
+  return {
+    inferredType: inferredType,
+    ast: classNode
+  };
+}
+
+function parseJsxElement(jsxElementNode) {
+  var inferredType = {
+    type: InspectionType.ELEMENT
+  };
+  var identifierName = extractIdentifierName(jsxElementNode.openingElement.name);
+
+  if (identifierName != null) {
+    inferredType.identifier = identifierName;
+  }
+
+  return {
+    inferredType: inferredType,
+    ast: jsxElementNode
+  };
+}
+
+function parseCall(callNode) {
+  var identifierNode = callNode.callee.type === 'MemberExpression' ? callNode.callee.property : callNode.callee;
+  var identifierName = extractIdentifierName(identifierNode);
+
+  if (identifierName === 'shape') {
+    return parseObject(callNode.arguments[0]);
+  }
+
+  return null;
+}
+
+function parseObject(objectNode) {
+  return {
+    inferredType: {
+      type: InspectionType.OBJECT,
+      depth: calculateNodeDepth(objectNode)
+    },
+    ast: objectNode
+  };
+}
+
+function parseArray(arrayNode) {
+  return {
+    inferredType: {
+      type: InspectionType.ARRAY,
+      depth: calculateNodeDepth(arrayNode)
+    },
+    ast: arrayNode
+  };
+} // Cannot set "expression" type to "estree.Expression" because the type doesn't include JSX.
+
+
+function parseExpression(expression) {
+  switch (expression.type) {
+    case 'Identifier':
+      return parseIdentifier(expression);
+
+    case 'Literal':
+      return parseLiteral(expression);
+
+    case 'FunctionExpression':
+    case 'ArrowFunctionExpression':
+      return parseFunction(expression);
+
+    case 'ClassExpression':
+      return parseClass(expression);
+
+    case 'JSXElement':
+      return parseJsxElement(expression);
+
+    case 'CallExpression':
+      return parseCall(expression);
+
+    case 'ObjectExpression':
+      return parseObject(expression);
+
+    case 'ArrayExpression':
+      return parseArray(expression);
+
+    default:
+      return null;
+  }
+}
+
+export function parse(value) {
+  var ast = acornParser.parse("(".concat(value, ")"));
+  var parsingResult = {
+    inferredType: {
+      type: InspectionType.UNKNOWN
+    },
+    ast: ast
+  };
+
+  if (ast.body[0] != null) {
+    var rootNode = ast.body[0];
+
+    switch (rootNode.type) {
+      case 'ExpressionStatement':
+        {
+          var expressionResult = parseExpression(rootNode.expression);
+
+          if (expressionResult != null) {
+            parsingResult = expressionResult;
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+  }
+
+  return parsingResult;
+}

package/dist/esm/client/docs/lib/inspection/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './inspectValue';

package/dist/esm/client/docs/lib/inspection/inspectValue.js

@@ -0,0 +1,16 @@
+import "core-js/modules/es.object.assign.js";
+import { parse } from './acornParser';
+import { InspectionType } from './types';
+export function inspectValue(value) {
+  try {
+    var parsingResult = parse(value);
+    return Object.assign({}, parsingResult);
+  } catch (e) {// do nothing.
+  }
+
+  return {
+    inferredType: {
+      type: InspectionType.UNKNOWN
+    }
+  };
+}

package/dist/esm/client/docs/lib/inspection/types.js

@@ -0,0 +1,12 @@
+export var InspectionType;
+
+(function (InspectionType) {
+  InspectionType["IDENTIFIER"] = "Identifier";
+  InspectionType["LITERAL"] = "Literal";
+  InspectionType["OBJECT"] = "Object";
+  InspectionType["ARRAY"] = "Array";
+  InspectionType["FUNCTION"] = "Function";
+  InspectionType["CLASS"] = "Class";
+  InspectionType["ELEMENT"] = "Element";
+  InspectionType["UNKNOWN"] = "Unknown";
+})(InspectionType || (InspectionType = {}));

package/dist/esm/client/docs/lib/isHtmlTag.js

@@ -0,0 +1,6 @@
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import htmlTags from 'html-tags';
+export function isHtmlTag(tagName) {
+  return htmlTags.includes(tagName.toLowerCase());
+}

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

@@ -0,0 +1,449 @@
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.to-string.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';
+var 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(_ref) {
+  var name = _ref.name,
+      short = _ref.short,
+      compact = _ref.compact,
+      full = _ref.full,
+      inferredType = _ref.inferredType;
+  return {
+    name: name,
+    short: short,
+    compact: compact,
+    full: full != null ? full : short,
+    inferredType: inferredType
+  };
+}
+
+function cleanPropTypes(value) {
+  return value.replace(/PropTypes./g, '').replace(/.isRequired/g, '');
+}
+
+function splitIntoLines(value) {
+  return value.split(/\r?\n/);
+}
+
+function prettyObject(ast) {
+  var compact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return cleanPropTypes(generateObjectCode(ast, compact));
+}
+
+function prettyArray(ast) {
+  var compact = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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) {
+  var _inspectValue = inspectValue(value),
+      inferredType = _inspectValue.inferredType,
+      ast = _inspectValue.ast;
+
+  var type = inferredType.type;
+  var short;
+  var compact;
+  var full;
+
+  switch (type) {
+    case InspectionType.IDENTIFIER:
+    case InspectionType.LITERAL:
+      short = value;
+      compact = value;
+      break;
+
+    case InspectionType.OBJECT:
+      {
+        var _ref2 = inferredType,
+            depth = _ref2.depth;
+        short = OBJECT_CAPTION;
+        compact = depth === 1 ? prettyObject(ast, true) : null;
+        full = prettyObject(ast);
+        break;
+      }
+
+    case InspectionType.ELEMENT:
+      {
+        var _ref3 = inferredType,
+            identifier = _ref3.identifier;
+        short = identifier != null && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
+        compact = splitIntoLines(value).length === 1 ? value : null;
+        full = value;
+        break;
+      }
+
+    case InspectionType.ARRAY:
+      {
+        var _ref4 = inferredType,
+            _depth = _ref4.depth;
+        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: short,
+    compact: compact,
+    full: full,
+    inferredType: type
+  });
+}
+
+function generateCustom(_ref5) {
+  var raw = _ref5.raw;
+
+  if (raw != null) {
+    return generateTypeFromString(raw, PropTypesType.CUSTOM);
+  }
+
+  return createTypeDef({
+    name: PropTypesType.CUSTOM,
+    short: CUSTOM_CAPTION,
+    compact: CUSTOM_CAPTION
+  });
+}
+
+function generateFunc(extractedProp) {
+  var jsDocTags = extractedProp.jsDocTags;
+
+  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) {
+  var fields = Object.keys(type.value).map(function (key) {
+    return "".concat(key, ": ").concat(generateType(type.value[key], extractedProp).full);
+  }).join(', ');
+
+  var _inspectValue2 = inspectValue("{ ".concat(fields, " }")),
+      inferredType = _inspectValue2.inferredType,
+      ast = _inspectValue2.ast;
+
+  var _ref6 = inferredType,
+      depth = _ref6.depth;
+  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(".concat(of, ")");
+}
+
+function generateObjectOf(type, extractedProp) {
+  var _generateType = generateType(type.value, extractedProp),
+      short = _generateType.short,
+      compact = _generateType.compact,
+      full = _generateType.full;
+
+  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)) {
+    var values = type.value.reduce(function (acc, v) {
+      var _generateType2 = generateType(v, extractedProp),
+          short = _generateType2.short,
+          compact = _generateType2.compact,
+          full = _generateType2.full;
+
+      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(function (x) {
+        return x != null;
+      }) ? values.compact.join(' | ') : null,
+      full: values.full.join(' | ')
+    });
+  }
+
+  return createTypeDef({
+    name: PropTypesType.UNION,
+    short: type.value,
+    compact: null
+  });
+}
+
+function generateEnumValue(_ref7) {
+  var value = _ref7.value,
+      computed = _ref7.computed;
+  return computed ? generateTypeFromString(value, 'enumvalue') : createTypeDef({
+    name: 'enumvalue',
+    short: value,
+    compact: value
+  });
+}
+
+function generateEnum(type) {
+  if (Array.isArray(type.value)) {
+    var values = type.value.reduce(function (acc, v) {
+      var _generateEnumValue = generateEnumValue(v),
+          short = _generateEnumValue.short,
+          compact = _generateEnumValue.compact,
+          full = _generateEnumValue.full;
+
+      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(function (x) {
+        return 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 "".concat(of, "[]");
+}
+
+function braceAround(of) {
+  return "[".concat(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) {
+  var _generateType3 = generateType(type.value, extractedProp),
+      name = _generateType3.name,
+      short = _generateType3.short,
+      compact = _generateType3.compact,
+      full = _generateType3.full,
+      inferredType = _generateType3.inferredType;
+
+  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) {
+  var type = extractedProp.docgenInfo.type; // 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:
+        {
+          var _generateType4 = generateType(type, extractedProp),
+              short = _generateType4.short,
+              compact = _generateType4.compact,
+              full = _generateType4.full;
+
+          if (compact != null) {
+            if (!isTooLongForTypeSummary(compact)) {
+              return createSummaryValue(compact);
+            }
+          }
+
+          return createSummaryValue(short, full);
+        }
+
+      case PropTypesType.FUNC:
+        {
+          var _generateType5 = generateType(type, extractedProp),
+              _short = _generateType5.short,
+              _full = _generateType5.full;
+
+          var summary = _short;
+          var 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;
+}