@storybook/react 6.5.9 → 7.0.0-alpha.2

package/README.md

@@ -1,47 +1 @@
-# Storybook for React
-
-Storybook for React is a UI development environment for your React components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-react-app
-npx sb init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
----
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/react/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
-
-Here are some featured storybooks that you can reference to see how Storybook works:
-
-- [Demo of Storybook Design System](https://storybook.js.org/design-system) - [source](https://github.com/storybookjs/design-system)
-
-## Create React App
-
-Support for [Create React App](https://create-react-app.dev/) is handled by [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app).
-
-This preset enables support for all Create React App features, including Sass/SCSS and TypeScript.
-
-If you're working on an app that was initialized manually (i.e., without the use of Create React App), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project.
-
-## Typescript
-
-`@storybook/react` is now exporting its own types to use with Typescript.
-You don't need to have `@types/storybook__react` installed anymore if it was your case.
-But you probably also need to use types from `@types/node @types/react`.
-
-## Docs
-
-- [Basics](https://storybook.js.org/docs/react/get-started/introduction)
-- [Configurations](https://storybook.js.org/docs/react/configure/overview)
-- [Addons](https://storybook.js.org/docs/react/configure/storybook-addons)
+# Storybook React renderer

package/dist/cjs/config.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  parameters: true,
+  decorators: true,
+  argTypesEnhancers: true
+};
+Object.defineProperty(exports, "argTypesEnhancers", {
+  enumerable: true,
+  get: function () {
+    return _config.argTypesEnhancers;
+  }
+});
+Object.defineProperty(exports, "decorators", {
+  enumerable: true,
+  get: function () {
+    return _config.decorators;
+  }
+});
+exports.parameters = void 0;
+
+var _config = require("./docs/config");
+
+var _config2 = require("./preview/config");
+
+Object.keys(_config2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _config2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _config2[key];
+    }
+  });
+});
+const parameters = Object.assign({
+  framework: 'react'
+}, _config.parameters);
+exports.parameters = parameters;

package/dist/cjs/{client/docs → docs}/config.js

@@ -11,19 +11,15 @@ var _extractArgTypes = require("./extractArgTypes");
 
 var _jsxDecorator = require("./jsxDecorator");
 
-var parameters = {
+const parameters = {
   docs: {
     inlineStories: true,
-    // NOTE: that the result is a react element. Hooks support is provided by the outer code.
-    prepareForInline: function prepareForInline(storyFn) {
-      return storyFn();
-    },
     extractArgTypes: _extractArgTypes.extractArgTypes,
     extractComponentDescription: _docsTools.extractComponentDescription
   }
 };
 exports.parameters = parameters;
-var decorators = [_jsxDecorator.jsxDecorator];
+const decorators = [_jsxDecorator.jsxDecorator];
 exports.decorators = decorators;
-var argTypesEnhancers = [_docsTools.enhanceArgTypes];
+const argTypesEnhancers = [_docsTools.enhanceArgTypes];
 exports.argTypesEnhancers = argTypesEnhancers;

package/dist/cjs/docs/extractArgTypes.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractArgTypes = void 0;
+
+var _extractProps = require("./extractProps");
+
+const extractArgTypes = component => {
+  if (component) {
+    const {
+      rows
+    } = (0, _extractProps.extractProps)(component);
+
+    if (rows) {
+      return rows.reduce((acc, row) => {
+        const {
+          name,
+          description,
+          type,
+          sbType,
+          defaultValue: defaultSummary,
+          jsDocTags,
+          required
+        } = row;
+        acc[name] = {
+          name,
+          description,
+          type: Object.assign({
+            required
+          }, sbType),
+          table: {
+            type,
+            jsDocTags,
+            defaultValue: defaultSummary
+          }
+        };
+        return acc;
+      }, {});
+    }
+  }
+
+  return null;
+};
+
+exports.extractArgTypes = extractArgTypes;

package/dist/cjs/{client/docs → docs}/extractProps.js

@@ -5,22 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractProps = void 0;
 
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.map.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.array.map.js");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _docsTools = require("@storybook/docs-tools");
@@ -33,22 +17,22 @@ var _lib = require("./lib");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var propTypesMap = new Map();
-Object.keys(_propTypes.default).forEach(function (typeName) {
+const propTypesMap = new Map();
+Object.keys(_propTypes.default).forEach(typeName => {
   // @ts-ignore
-  var type = _propTypes.default[typeName];
+  const type = _propTypes.default[typeName];
   propTypesMap.set(type, typeName);
   propTypesMap.set(type.isRequired, typeName);
 });
 
 function getPropDefs(component, section) {
-  var processedComponent = component; // eslint-disable-next-line react/forbid-foreign-prop-types
+  let processedComponent = component; // eslint-disable-next-line react/forbid-foreign-prop-types
 
   if (!(0, _docsTools.hasDocgen)(component) && !component.propTypes && (0, _lib.isMemo)(component)) {
     processedComponent = component.type;
   }
 
-  var extractedProps = (0, _docsTools.extractComponentProps)(processedComponent, section);
+  const extractedProps = (0, _docsTools.extractComponentProps)(processedComponent, section);
 
   if (extractedProps.length === 0) {
     return [];
@@ -62,16 +46,12 @@ function getPropDefs(component, section) {
       return (0, _handleProp2.enhanceTypeScriptProps)(extractedProps);
 
     default:
-      return extractedProps.map(function (x) {
-        return x.propDef;
-      });
+      return extractedProps.map(x => x.propDef);
   }
 }
 
-var extractProps = function extractProps(component) {
-  return {
-    rows: getPropDefs(component, 'props')
-  };
-};
+const extractProps = component => ({
+  rows: getPropDefs(component, 'props')
+});
 
 exports.extractProps = extractProps;

package/dist/cjs/docs/jsxDecorator.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.skipJsxRender = exports.renderJsx = exports.jsxDecorator = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactElementToJsxString = _interopRequireDefault(require("react-element-to-jsx-string"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
+
+var _addons = require("@storybook/addons");
+
+var _docsTools = require("@storybook/docs-tools");
+
+var _clientLogger = require("@storybook/client-logger");
+
+var _lib = require("./lib");
+
+const _excluded = ["mdxType", "originalType", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+/** Run the user supplied onBeforeRender function if it exists */
+const applyBeforeRender = (domString, options) => {
+  if (typeof options.onBeforeRender !== 'function') {
+    return domString;
+  }
+
+  const deprecatedOnBeforeRender = (0, _utilDeprecate.default)(options.onBeforeRender, (0, _tsDedent.default)`
+      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 */
+
+
+const renderJsx = (code, options) => {
+  if (typeof code === 'undefined') {
+    _clientLogger.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') {
+      _clientLogger.logger.warn('Cannot skip undefined element');
+
+      return null;
+    }
+
+    if (_react.default.Children.count(renderedJSX) > 1) {
+      _clientLogger.logger.warn('Trying to skip an array of elements');
+
+      return null;
+    }
+
+    if (typeof renderedJSX.props.children === 'undefined') {
+      _clientLogger.logger.warn('Not enough children to skip elements.');
+
+      if (typeof renderedJSX.type === 'function' && renderedJSX.type.name === '') {
+        renderedJSX = /*#__PURE__*/_react.default.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 || (0, _docsTools.getDocgenSection)(el.type, 'displayName') || (el.type.name !== '_default' ? el.type.name : null) || (typeof el.type === 'function' ? 'No Display Name' : null) || ((0, _lib.isForwardRef)(el.type) ? el.type.render.name : null) || ((0, _lib.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.default.Children.map(code, c => {
+    // @ts-ignore FIXME: workaround react-element-to-jsx-string
+    const child = typeof c === 'number' ? c.toString() : c;
+    let string = applyBeforeRender((0, _reactElementToJsxString.default)(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+\{\}/, '() => {}');
+};
+
+exports.renderJsx = renderJsx;
+const defaultOpts = {
+  skip: 0,
+  showFunctions: false,
+  enableBeautify: true,
+  showDefaultProps: false
+};
+
+const skipJsxRender = context => {
+  var _context$parameters$d;
+
+  const sourceParams = context === null || context === void 0 ? void 0 : (_context$parameters$d = context.parameters.docs) === null || _context$parameters$d === void 0 ? void 0 : _context$parameters$d.source;
+  const isArgsStory = context === null || context === void 0 ? void 0 : context.parameters.__isArgsStory; // always render if the user forces it
+
+  if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.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 === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === _docsTools.SourceType.CODE;
+};
+
+exports.skipJsxRender = skipJsxRender;
+
+const isMdx = node => {
+  var _node$type, _node$props;
+
+  return ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.displayName) === 'MDXCreateElement' && !!((_node$props = node.props) !== null && _node$props !== void 0 && _node$props.mdxType);
+};
+
+const mdxToJsx = node => {
+  if (!isMdx(node)) return node;
+
+  const _node$props2 = node.props,
+        {
+    originalType,
+    children
+  } = _node$props2,
+        rest = _objectWithoutPropertiesLoose(_node$props2, _excluded);
+
+  let jsxChildren = [];
+
+  if (children) {
+    const array = Array.isArray(children) ? children : [children];
+    jsxChildren = array.map(mdxToJsx);
+  }
+
+  return /*#__PURE__*/(0, _react.createElement)(originalType, rest, ...jsxChildren);
+};
+
+const jsxDecorator = (storyFn, context) => {
+  var _context$parameters$d2, _context$parameters$d3;
+
+  const channel = _addons.addons.getChannel();
+
+  const skip = skipJsxRender(context);
+  const story = storyFn();
+  let jsx = '';
+  (0, _addons.useEffect)(() => {
+    if (!skip) channel.emit(_docsTools.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 === null || context === void 0 ? void 0 : context.parameters.jsx) || {}); // Exclude decorators from source code snippet by default
+
+  const storyJsx = context !== null && context !== void 0 && (_context$parameters$d2 = context.parameters.docs) !== null && _context$parameters$d2 !== void 0 && (_context$parameters$d3 = _context$parameters$d2.source) !== null && _context$parameters$d3 !== void 0 && _context$parameters$d3.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;
+};
+
+exports.jsxDecorator = jsxDecorator;

package/dist/cjs/{client/docs → docs}/lib/captions.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OBJECT_CAPTION = exports.FUNCTION_CAPTION = exports.ELEMENT_CAPTION = exports.CUSTOM_CAPTION = exports.CLASS_CAPTION = exports.ARRAY_CAPTION = void 0;
-var CUSTOM_CAPTION = 'custom';
+const CUSTOM_CAPTION = 'custom';
 exports.CUSTOM_CAPTION = CUSTOM_CAPTION;
-var OBJECT_CAPTION = 'object';
+const OBJECT_CAPTION = 'object';
 exports.OBJECT_CAPTION = OBJECT_CAPTION;
-var ARRAY_CAPTION = 'array';
+const ARRAY_CAPTION = 'array';
 exports.ARRAY_CAPTION = ARRAY_CAPTION;
-var CLASS_CAPTION = 'class';
+const CLASS_CAPTION = 'class';
 exports.CLASS_CAPTION = CLASS_CAPTION;
-var FUNCTION_CAPTION = 'func';
+const FUNCTION_CAPTION = 'func';
 exports.FUNCTION_CAPTION = FUNCTION_CAPTION;
-var ELEMENT_CAPTION = 'element';
+const ELEMENT_CAPTION = 'element';
 exports.ELEMENT_CAPTION = ELEMENT_CAPTION;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMemo = exports.isForwardRef = void 0;
+
+const isMemo = component => component.$$typeof === Symbol.for('react.memo');
+
+exports.isMemo = isMemo;
+
+const isForwardRef = component => component.$$typeof === Symbol.for('react.forward_ref');
+
+exports.isForwardRef = isForwardRef;

package/dist/cjs/{client/docs → docs}/lib/defaultValues/createDefaultValue.js

@@ -21,30 +21,35 @@ var _generateArray = require("./generateArray");
 
 var _prettyIdentifier = require("./prettyIdentifier");
 
-function generateFunc(_ref) {
-  var inferredType = _ref.inferredType,
-      ast = _ref.ast;
-  var _ref2 = inferredType,
-      identifier = _ref2.identifier;
+function generateFunc({
+  inferredType,
+  ast
+}) {
+  const {
+    identifier
+  } = inferredType;
 
   if (identifier != null) {
     return (0, _docsTools.createSummaryValue)((0, _prettyIdentifier.getPrettyIdentifier)(inferredType), (0, _generateCode.generateCode)(ast));
   }
 
-  var prettyCaption = (0, _generateCode.generateCode)(ast, true);
+  const prettyCaption = (0, _generateCode.generateCode)(ast, true);
   return !(0, _docsTools.isTooLongForDefaultValueSummary)(prettyCaption) ? (0, _docsTools.createSummaryValue)(prettyCaption) : (0, _docsTools.createSummaryValue)(_captions.FUNCTION_CAPTION, (0, _generateCode.generateCode)(ast));
 } // All elements are JSX elements.
 // JSX elements are not supported by escodegen.
 
 
 function generateElement(defaultValue, inspectionResult) {
-  var inferredType = inspectionResult.inferredType;
-  var _ref3 = inferredType,
-      identifier = _ref3.identifier;
+  const {
+    inferredType
+  } = inspectionResult;
+  const {
+    identifier
+  } = inferredType;
 
   if (identifier != null) {
     if (!(0, _isHtmlTag.isHtmlTag)(identifier)) {
-      var prettyIdentifier = (0, _prettyIdentifier.getPrettyIdentifier)(inferredType);
+      const prettyIdentifier = (0, _prettyIdentifier.getPrettyIdentifier)(inferredType);
       return (0, _docsTools.createSummaryValue)(prettyIdentifier, defaultValue);
     }
   }
@@ -54,7 +59,7 @@ function generateElement(defaultValue, inspectionResult) {
 
 function createDefaultValue(defaultValue) {
   try {
-    var inspectionResult = (0, _inspection.inspectValue)(defaultValue);
+    const inspectionResult = (0, _inspection.inspectValue)(defaultValue);
 
     switch (inspectionResult.inferredType.type) {
       case _inspection.InspectionType.OBJECT: