@storybook/react 6.5.0-alpha.46 → 6.5.0-alpha.49

package/dist/modern/client/docs/lib/defaultValues/createFromRawDefaultProp.js

@@ -0,0 +1,181 @@
+import isPlainObject from 'lodash/isPlainObject';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString'; // @ts-ignore
+
+import reactElementToJSXString from 'react-element-to-jsx-string';
+import { createSummaryValue, isTooLongForDefaultValueSummary } from '@storybook/docs-tools';
+import { inspectValue } 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';
+
+function isReactElement(element) {
+  return element.$$typeof != null;
+}
+
+export function extractFunctionName(func, propName) {
+  const {
+    name
+  } = func; // Comparison with the prop name is to discard inferred function names.
+
+  if (name !== '' && name !== 'anonymous' && name !== propName) {
+    return name;
+  }
+
+  return null;
+}
+
+const stringResolver = rawDefaultProp => {
+  return createSummaryValue(JSON.stringify(rawDefaultProp));
+};
+
+function generateReactObject(rawDefaultProp) {
+  const {
+    type
+  } = rawDefaultProp;
+  const {
+    displayName
+  } = type;
+  const jsx = reactElementToJSXString(rawDefaultProp, {});
+
+  if (displayName != null) {
+    const prettyIdentifier = getPrettyElementIdentifier(displayName);
+    return createSummaryValue(prettyIdentifier, jsx);
+  }
+
+  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 = rawDefaultProp => {
+  if (isReactElement(rawDefaultProp) && rawDefaultProp.type != null) {
+    return generateReactObject(rawDefaultProp);
+  }
+
+  if (isPlainObject(rawDefaultProp)) {
+    const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
+    return generateObject(inspectionResult);
+  }
+
+  if (Array.isArray(rawDefaultProp)) {
+    const inspectionResult = inspectValue(JSON.stringify(rawDefaultProp));
+    return generateArray(inspectionResult);
+  }
+
+  return createSummaryValue(OBJECT_CAPTION);
+};
+
+const functionResolver = (rawDefaultProp, propDef) => {
+  let isElement = false;
+  let inspectionResult; // Try to display the name of the component. The body of the component is omitted since the code has been transpiled.
+
+  if (isFunction(rawDefaultProp.render)) {
+    isElement = true;
+  } else if (rawDefaultProp.prototype != null && isFunction(rawDefaultProp.prototype.render)) {
+    isElement = true;
+  } else {
+    let innerElement;
+
+    try {
+      inspectionResult = inspectValue(rawDefaultProp.toString());
+      const {
+        hasParams,
+        params
+      } = inspectionResult.inferredType;
+
+      if (hasParams) {
+        // It might be a functional component accepting props.
+        if (params.length === 1 && params[0].type === 'ObjectPattern') {
+          innerElement = rawDefaultProp({});
+        }
+      } else {
+        innerElement = rawDefaultProp();
+      }
+
+      if (innerElement != null) {
+        if (isReactElement(innerElement)) {
+          isElement = true;
+        }
+      }
+    } catch (e) {// do nothing.
+    }
+  }
+
+  const funcName = extractFunctionName(rawDefaultProp, propDef.name);
+
+  if (funcName != null) {
+    if (isElement) {
+      return createSummaryValue(getPrettyElementIdentifier(funcName));
+    }
+
+    if (inspectionResult != null) {
+      inspectionResult = inspectValue(rawDefaultProp.toString());
+    }
+
+    const {
+      hasParams
+    } = inspectionResult.inferredType;
+    return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
+  }
+
+  return createSummaryValue(isElement ? ELEMENT_CAPTION : FUNCTION_CAPTION);
+};
+
+const defaultResolver = rawDefaultProp => {
+  return createSummaryValue(rawDefaultProp.toString());
+};
+
+const DEFAULT_TYPE_RESOLVERS = {
+  string: stringResolver,
+  object: objectResolver,
+  function: functionResolver,
+  default: defaultResolver
+};
+export function createTypeResolvers(customResolvers = {}) {
+  return Object.assign({}, DEFAULT_TYPE_RESOLVERS, customResolvers);
+} // 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 might not be available.
+//   - Identifiers might not be "prettified" for all the types.
+
+export function createDefaultValueFromRawDefaultProp(rawDefaultProp, propDef, typeResolvers = DEFAULT_TYPE_RESOLVERS) {
+  try {
+    // Keep the extra () otherwise it will fail for functions.
+    switch (typeof rawDefaultProp) {
+      case 'string':
+        return typeResolvers.string(rawDefaultProp, propDef);
+
+      case 'object':
+        return typeResolvers.object(rawDefaultProp, propDef);
+
+      case 'function':
+        {
+          return typeResolvers.function(rawDefaultProp, propDef);
+        }
+
+      default:
+        return typeResolvers.default(rawDefaultProp, propDef);
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+
+  return null;
+}

package/dist/modern/client/docs/lib/defaultValues/generateArray.js

@@ -0,0 +1,21 @@
+import { createSummaryValue, isTooLongForDefaultValueSummary } from '@storybook/docs-tools';
+import { ARRAY_CAPTION } from '../captions';
+import { generateArrayCode } from '../generateCode';
+export function generateArray({
+  inferredType,
+  ast
+}) {
+  const {
+    depth
+  } = inferredType;
+
+  if (depth <= 2) {
+    const compactArray = generateArrayCode(ast, true);
+
+    if (!isTooLongForDefaultValueSummary(compactArray)) {
+      return createSummaryValue(compactArray);
+    }
+  }
+
+  return createSummaryValue(ARRAY_CAPTION, generateArrayCode(ast));
+}

package/dist/modern/client/docs/lib/defaultValues/generateObject.js

@@ -0,0 +1,21 @@
+import { createSummaryValue, isTooLongForDefaultValueSummary } from '@storybook/docs-tools';
+import { OBJECT_CAPTION } from '../captions';
+import { generateObjectCode } from '../generateCode';
+export function generateObject({
+  inferredType,
+  ast
+}) {
+  const {
+    depth
+  } = inferredType;
+
+  if (depth === 1) {
+    const compactObject = generateObjectCode(ast, true);
+
+    if (!isTooLongForDefaultValueSummary(compactObject)) {
+      return createSummaryValue(compactObject);
+    }
+  }
+
+  return createSummaryValue(OBJECT_CAPTION, generateObjectCode(ast));
+}

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

@@ -0,0 +1,2 @@
+export * from './createDefaultValue';
+export * from './createFromRawDefaultProp';

package/dist/modern/client/docs/lib/defaultValues/prettyIdentifier.js

@@ -0,0 +1,24 @@
+import { InspectionType } from '../inspection';
+export function getPrettyIdentifier(inferredType) {
+  const {
+    type,
+    identifier
+  } = inferredType;
+
+  switch (type) {
+    case InspectionType.FUNCTION:
+      return getPrettyFuncIdentifier(identifier, inferredType.hasParams);
+
+    case InspectionType.ELEMENT:
+      return getPrettyElementIdentifier(identifier);
+
+    default:
+      return identifier;
+  }
+}
+export function getPrettyFuncIdentifier(identifier, hasArguments) {
+  return hasArguments ? `${identifier}( ... )` : `${identifier}()`;
+}
+export function getPrettyElementIdentifier(identifier) {
+  return `<${identifier} />`;
+}

package/dist/modern/client/docs/lib/generateCode.js

@@ -0,0 +1,59 @@
+import { generate } from 'escodegen';
+import dedent from 'ts-dedent';
+const BASIC_OPTIONS = {
+  format: {
+    indent: {
+      style: '  '
+    },
+    semicolons: false
+  }
+};
+const COMPACT_OPTIONS = Object.assign({}, BASIC_OPTIONS, {
+  format: {
+    newline: ''
+  }
+});
+const PRETTY_OPTIONS = Object.assign({}, BASIC_OPTIONS);
+export function generateCode(ast, compact = false) {
+  return generate(ast, compact ? COMPACT_OPTIONS : PRETTY_OPTIONS);
+}
+export function generateObjectCode(ast, compact = false) {
+  return !compact ? generateCode(ast) : generateCompactObjectCode(ast);
+}
+
+function generateCompactObjectCode(ast) {
+  let result = generateCode(ast, true); // Cannot get escodegen to add a space before the last } with the compact mode settings.
+  // Fix it until a better solution is found.
+
+  if (!result.endsWith(' }')) {
+    result = `${result.slice(0, -1)} }`;
+  }
+
+  return result;
+}
+
+export function generateArrayCode(ast, compact = false) {
+  return !compact ? generateMultilineArrayCode(ast) : generateCompactArrayCode(ast);
+}
+
+function generateMultilineArrayCode(ast) {
+  let result = generateCode(ast); // escodegen add extra spacing before the closing bracket of a multiple line array with a nested object.
+  // Fix it until a better solution is found.
+
+  if (result.endsWith('  }]')) {
+    result = dedent(result);
+  }
+
+  return result;
+}
+
+function generateCompactArrayCode(ast) {
+  let result = generateCode(ast, true); // escodegen add extra an extra before the opening bracket of a compact array that contains primitive values.
+  // Fix it until a better solution is found.
+
+  if (result.startsWith('[    ')) {
+    result = result.replace('[    ', '[');
+  }
+
+  return result;
+}

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

@@ -0,0 +1,4 @@
+export * from './captions';
+export * from './isHtmlTag';
+export * from './generateCode';
+export * from './componentTypes';

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