@storybook/react 7.0.0-alpha.3 → 7.0.0-alpha.30

package/dist/esm/docs/jsxDecorator.js

@@ -1,170 +0,0 @@
-const _excluded = ["mdxType", "originalType", "children"];
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-/* eslint-disable no-underscore-dangle */
-import React, { createElement } from 'react';
-import reactElementToJSXString from 'react-element-to-jsx-string';
-import dedent from 'ts-dedent';
-import deprecate from 'util-deprecate';
-import { addons, useEffect } from '@storybook/addons';
-import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools';
-import { logger } from '@storybook/client-logger';
-import { isMemo, isForwardRef } from './lib';
-
-/** Run the user supplied onBeforeRender function if it exists */
-const applyBeforeRender = (domString, options) => {
-  if (typeof options.onBeforeRender !== 'function') {
-    return domString;
-  }
-
-  const deprecatedOnBeforeRender = deprecate(options.onBeforeRender, dedent`
-      StoryFn.parameters.jsx.onBeforeRender was deprecated.
-      Prefer StoryFn.parameters.jsx.transformSource instead.
-      See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-onbeforerender for details.
-    `);
-  return deprecatedOnBeforeRender(domString);
-};
-/** Run the user supplied transformSource function if it exists */
-
-
-const applyTransformSource = (domString, options, context) => {
-  if (typeof options.transformSource !== 'function') {
-    return domString;
-  }
-
-  return options.transformSource(domString, context);
-};
-/** Apply the users parameters and render the jsx for a story */
-
-
-export const renderJsx = (code, options) => {
-  if (typeof code === 'undefined') {
-    logger.warn('Too many skip or undefined component');
-    return null;
-  }
-
-  let renderedJSX = code;
-  const Type = renderedJSX.type;
-
-  for (let i = 0; i < options.skip; i += 1) {
-    if (typeof renderedJSX === 'undefined') {
-      logger.warn('Cannot skip undefined element');
-      return null;
-    }
-
-    if (React.Children.count(renderedJSX) > 1) {
-      logger.warn('Trying to skip an array of elements');
-      return null;
-    }
-
-    if (typeof renderedJSX.props.children === 'undefined') {
-      logger.warn('Not enough children to skip elements.');
-
-      if (typeof renderedJSX.type === 'function' && renderedJSX.type.name === '') {
-        renderedJSX = /*#__PURE__*/React.createElement(Type, renderedJSX.props);
-      }
-    } else if (typeof renderedJSX.props.children === 'function') {
-      renderedJSX = renderedJSX.props.children();
-    } else {
-      renderedJSX = renderedJSX.props.children;
-    }
-  }
-
-  const displayNameDefaults = typeof options.displayName === 'string' ? {
-    showFunctions: true,
-    displayName: () => options.displayName
-  } : {
-    // To get exotic component names resolving properly
-    displayName: el => el.type.displayName || getDocgenSection(el.type, 'displayName') || (el.type.name !== '_default' ? el.type.name : null) || (typeof el.type === 'function' ? 'No Display Name' : null) || (isForwardRef(el.type) ? el.type.render.name : null) || (isMemo(el.type) ? el.type.type.name : null) || el.type
-  };
-  const filterDefaults = {
-    filterProps: (value, key) => value !== undefined
-  };
-  const opts = Object.assign({}, displayNameDefaults, filterDefaults, options);
-  const result = React.Children.map(code, c => {
-    // @ts-ignore FIXME: workaround react-element-to-jsx-string
-    const child = typeof c === 'number' ? c.toString() : c;
-    let string = applyBeforeRender(reactElementToJSXString(child, opts), options);
-
-    if (string.indexOf('&quot;') > -1) {
-      const matches = string.match(/\S+=\\"([^"]*)\\"/g);
-
-      if (matches) {
-        matches.forEach(match => {
-          string = string.replace(match, match.replace(/&quot;/g, "'"));
-        });
-      }
-    }
-
-    return string;
-  }).join('\n');
-  return result.replace(/function\s+noRefCheck\(\)\s+\{\}/, '() => {}');
-};
-const defaultOpts = {
-  skip: 0,
-  showFunctions: false,
-  enableBeautify: true,
-  showDefaultProps: false
-};
-export const skipJsxRender = context => {
-  const sourceParams = context?.parameters.docs?.source;
-  const isArgsStory = context?.parameters.__isArgsStory; // always render if the user forces it
-
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    return false;
-  } // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-
-
-  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
-};
-
-const isMdx = node => node.type?.displayName === 'MDXCreateElement' && !!node.props?.mdxType;
-
-const mdxToJsx = node => {
-  if (!isMdx(node)) return node;
-
-  const _node$props = node.props,
-        {
-    originalType,
-    children
-  } = _node$props,
-        rest = _objectWithoutPropertiesLoose(_node$props, _excluded);
-
-  let jsxChildren = [];
-
-  if (children) {
-    const array = Array.isArray(children) ? children : [children];
-    jsxChildren = array.map(mdxToJsx);
-  }
-
-  return /*#__PURE__*/createElement(originalType, rest, ...jsxChildren);
-};
-
-export const jsxDecorator = (storyFn, context) => {
-  const channel = addons.getChannel();
-  const skip = skipJsxRender(context);
-  const story = storyFn();
-  let jsx = '';
-  useEffect(() => {
-    if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
-  }); // We only need to render JSX if the source block is actually going to
-  // consume it. Otherwise it's just slowing us down.
-
-  if (skip) {
-    return story;
-  }
-
-  const options = Object.assign({}, defaultOpts, context?.parameters.jsx || {}); // Exclude decorators from source code snippet by default
-
-  const storyJsx = context?.parameters.docs?.source?.excludeDecorators ? context.originalStoryFn(context.args, context) : story;
-  const sourceJsx = mdxToJsx(storyJsx);
-  const rendered = renderJsx(sourceJsx, options);
-
-  if (rendered) {
-    jsx = applyTransformSource(rendered, options, context);
-  }
-
-  return story;
-};

package/dist/esm/docs/lib/captions.js

@@ -1,6 +0,0 @@
-export const CUSTOM_CAPTION = 'custom';
-export const OBJECT_CAPTION = 'object';
-export const ARRAY_CAPTION = 'array';
-export const CLASS_CAPTION = 'class';
-export const FUNCTION_CAPTION = 'func';
-export const ELEMENT_CAPTION = 'element';

package/dist/esm/docs/lib/componentTypes.js

@@ -1,2 +0,0 @@
-export const isMemo = component => component.$$typeof === Symbol.for('react.memo');
-export const isForwardRef = component => component.$$typeof === Symbol.for('react.forward_ref');

package/dist/esm/docs/lib/defaultValues/createDefaultValue.js

@@ -1,72 +0,0 @@
-import { createSummaryValue, isTooLongForDefaultValueSummary } from '@storybook/docs-tools';
-import { FUNCTION_CAPTION, ELEMENT_CAPTION } from '../captions';
-import { InspectionType, inspectValue } from '../inspection';
-import { isHtmlTag } from '../isHtmlTag';
-import { generateCode } from '../generateCode';
-import { generateObject } from './generateObject';
-import { generateArray } from './generateArray';
-import { getPrettyIdentifier } from './prettyIdentifier';
-
-function generateFunc({
-  inferredType,
-  ast
-}) {
-  const {
-    identifier
-  } = inferredType;
-
-  if (identifier != null) {
-    return createSummaryValue(getPrettyIdentifier(inferredType), generateCode(ast));
-  }
-
-  const prettyCaption = generateCode(ast, true);
-  return !isTooLongForDefaultValueSummary(prettyCaption) ? createSummaryValue(prettyCaption) : createSummaryValue(FUNCTION_CAPTION, generateCode(ast));
-} // All elements are JSX elements.
-// JSX elements are not supported by escodegen.
-
-
-function generateElement(defaultValue, inspectionResult) {
-  const {
-    inferredType
-  } = inspectionResult;
-  const {
-    identifier
-  } = inferredType;
-
-  if (identifier != null) {
-    if (!isHtmlTag(identifier)) {
-      const prettyIdentifier = getPrettyIdentifier(inferredType);
-      return createSummaryValue(prettyIdentifier, defaultValue);
-    }
-  }
-
-  return !isTooLongForDefaultValueSummary(defaultValue) ? createSummaryValue(defaultValue) : createSummaryValue(ELEMENT_CAPTION, defaultValue);
-}
-
-export function createDefaultValue(defaultValue) {
-  try {
-    const inspectionResult = inspectValue(defaultValue);
-
-    switch (inspectionResult.inferredType.type) {
-      case InspectionType.OBJECT:
-        return generateObject(inspectionResult);
-
-      case InspectionType.FUNCTION:
-        return generateFunc(inspectionResult);
-
-      case InspectionType.ELEMENT:
-        return generateElement(defaultValue, inspectionResult);
-
-      case InspectionType.ARRAY:
-        return generateArray(inspectionResult);
-
-      default:
-        return null;
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(e);
-  }
-
-  return null;
-}

package/dist/esm/docs/lib/defaultValues/createFromRawDefaultProp.js

@@ -1,182 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-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/esm/docs/lib/defaultValues/generateArray.js

@@ -1,21 +0,0 @@
-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/esm/docs/lib/defaultValues/generateObject.js

@@ -1,21 +0,0 @@
-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/esm/docs/lib/defaultValues/index.js

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

package/dist/esm/docs/lib/defaultValues/prettyIdentifier.js

@@ -1,24 +0,0 @@
-import { InspectionType } from '../inspection';
-export function getPrettyFuncIdentifier(identifier, hasArguments) {
-  return hasArguments ? `${identifier}( ... )` : `${identifier}()`;
-}
-export function getPrettyElementIdentifier(identifier) {
-  return `<${identifier} />`;
-}
-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;
-  }
-}

package/dist/esm/docs/lib/generateCode.js

@@ -1,59 +0,0 @@
-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/esm/docs/lib/index.js

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