@storybook/react 6.5.0-alpha.9 → 6.5.0-beta.0

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

@@ -0,0 +1,211 @@
+import { Parser } from 'acorn';
+import jsx from 'acorn-jsx';
+import * as acornWalk from 'acorn-walk';
+import { InspectionType } from './types';
+const ACORN_WALK_VISITORS = Object.assign({}, acornWalk.base, {
+  JSXElement: () => {}
+});
+const 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(x => x.type === 'ObjectExpression' || x.type === 'ArrayExpression');
+}
+
+function calculateNodeDepth(node) {
+  const depths = [];
+  acornWalk.ancestor( // @ts-ignore
+  node, {
+    ObjectExpression(_, ancestors) {
+      depths.push(filterAncestors(ancestors).length);
+    },
+
+    ArrayExpression(_, ancestors) {
+      depths.push(filterAncestors(ancestors).length);
+    }
+
+  }, ACORN_WALK_VISITORS);
+  return Math.max(...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) {
+  let 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(node) {
+      innerJsxElementNode = node;
+    }
+
+  }, ACORN_WALK_VISITORS);
+  const isJsx = innerJsxElementNode != null;
+  const inferredType = {
+    type: isJsx ? InspectionType.ELEMENT : InspectionType.FUNCTION,
+    params: funcNode.params,
+    hasParams: funcNode.params.length !== 0
+  };
+  const identifierName = extractIdentifierName(funcNode.id);
+
+  if (identifierName != null) {
+    inferredType.identifier = identifierName;
+  }
+
+  return {
+    inferredType,
+    ast: funcNode
+  };
+}
+
+function parseClass(classNode) {
+  let 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(node) {
+      innerJsxElementNode = node;
+    }
+
+  }, ACORN_WALK_VISITORS);
+  const inferredType = {
+    type: innerJsxElementNode != null ? InspectionType.ELEMENT : InspectionType.CLASS,
+    identifier: extractIdentifierName(classNode.id)
+  };
+  return {
+    inferredType,
+    ast: classNode
+  };
+}
+
+function parseJsxElement(jsxElementNode) {
+  const inferredType = {
+    type: InspectionType.ELEMENT
+  };
+  const identifierName = extractIdentifierName(jsxElementNode.openingElement.name);
+
+  if (identifierName != null) {
+    inferredType.identifier = identifierName;
+  }
+
+  return {
+    inferredType,
+    ast: jsxElementNode
+  };
+}
+
+function parseCall(callNode) {
+  const identifierNode = callNode.callee.type === 'MemberExpression' ? callNode.callee.property : callNode.callee;
+  const 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) {
+  const ast = acornParser.parse(`(${value})`);
+  let parsingResult = {
+    inferredType: {
+      type: InspectionType.UNKNOWN
+    },
+    ast
+  };
+
+  if (ast.body[0] != null) {
+    const rootNode = ast.body[0];
+
+    switch (rootNode.type) {
+      case 'ExpressionStatement':
+        {
+          const expressionResult = parseExpression(rootNode.expression);
+
+          if (expressionResult != null) {
+            parsingResult = expressionResult;
+          }
+
+          break;
+        }
+
+      default:
+        break;
+    }
+  }
+
+  return parsingResult;
+}

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

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

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

@@ -0,0 +1,15 @@
+import { parse } from './acornParser';
+import { InspectionType } from './types';
+export function inspectValue(value) {
+  try {
+    const parsingResult = parse(value);
+    return Object.assign({}, parsingResult);
+  } catch (e) {// do nothing.
+  }
+
+  return {
+    inferredType: {
+      type: InspectionType.UNKNOWN
+    }
+  };
+}

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

@@ -0,0 +1,12 @@
+export let 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/modern/client/docs/lib/isHtmlTag.js

@@ -0,0 +1,4 @@
+import htmlTags from 'html-tags';
+export function isHtmlTag(tagName) {
+  return htmlTags.includes(tagName.toLowerCase());
+}

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;
+}