@storybook/react 6.4.0-alpha.34 → 6.4.0-alpha.38

package/dist/cjs/client/preview/config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "render", {
+  enumerable: true,
+  get: function get() {
+    return _render.render;
+  }
+});
+Object.defineProperty(exports, "renderToDOM", {
+  enumerable: true,
+  get: function get() {
+    return _render.renderToDOM;
+  }
+});
+exports.parameters = void 0;
+
+var _render = require("./render");
+
+var parameters = {
+  framework: 'react'
+};
+exports.parameters = parameters;

package/dist/cjs/client/preview/index.js

@@ -7,27 +7,17 @@ exports.raw = exports.getStorybook = exports.forceReRender = exports.setAddon =
 
 require("core-js/modules/es.array.concat.js");
 
-var _react = _interopRequireDefault(require("react"));
-
 var _client = require("@storybook/core/client");
 
 require("./globals");
 
-var _render = _interopRequireDefault(require("./render"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _render = require("./render");
 
 /* eslint-disable prefer-destructuring */
 var framework = 'react';
-
-var globalRender = function globalRender(args, _ref) {
-  var parameters = _ref.parameters;
-  var Component = parameters.component;
-  return /*#__PURE__*/_react.default.createElement(Component, args);
-};
-
-var api = (0, _client.start)(_render.default);
-api.clientApi.globalRender = globalRender;
+var api = (0, _client.start)(_render.renderToDOM, {
+  render: _render.render
+});
 
 var storiesOf = function storiesOf(kind, m) {
   return api.clientApi.storiesOf(kind, m).addParameters({

package/dist/cjs/client/preview/render.js

@@ -25,7 +25,8 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = renderMain;
+exports.renderToDOM = renderToDOM;
+exports.render = void 0;
 
 require("regenerator-runtime/runtime.js");
 
@@ -47,10 +48,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -71,18 +68,52 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var document = _global.default.document,
-    FRAMEWORK_OPTIONS = _global.default.FRAMEWORK_OPTIONS;
-var rootEl = document ? document.getElementById('root') : null;
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var FRAMEWORK_OPTIONS = _global.default.FRAMEWORK_OPTIONS;
 
-var render = function render(node, el) {
-  return new Promise(function (resolve) {
-    _reactDom.default.render(node, el, resolve);
-  });
+var render = function render(args, _ref) {
+  var id = _ref.id,
+      Component = _ref.component;
+
+  if (!Component) {
+    throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(Component, args);
 };
 
-var ErrorBoundary = /*#__PURE__*/function (_Component) {
-  _inherits(ErrorBoundary, _Component);
+exports.render = render;
+
+var renderElement = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", new Promise(function (resolve) {
+              _reactDom.default.render(node, el, function () {
+                return resolve(null);
+              });
+            }));
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function renderElement(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
+  _inherits(ErrorBoundary, _ReactComponent);
 
   var _super = _createSuper(ErrorBoundary);
 
@@ -140,43 +171,43 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
 
 var Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? _react.StrictMode : _react.Fragment;
 
-function renderMain(_x) {
-  return _renderMain.apply(this, arguments);
+function renderToDOM(_x3, _x4) {
+  return _renderToDOM.apply(this, arguments);
 }
 
-function _renderMain() {
-  _renderMain = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
-    var storyContext, unboundStoryFn, showMain, showException, forceRender, Story, content, element;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+function _renderToDOM() {
+  _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref3, domElement) {
+    var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
-        switch (_context.prev = _context.next) {
+        switch (_context2.prev = _context2.next) {
           case 0:
-            storyContext = _ref.storyContext, unboundStoryFn = _ref.unboundStoryFn, showMain = _ref.showMain, showException = _ref.showException, forceRender = _ref.forceRender;
+            storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
             Story = unboundStoryFn;
             content = /*#__PURE__*/_react.default.createElement(ErrorBoundary, {
               showMain: showMain,
               showException: showException
             }, /*#__PURE__*/_react.default.createElement(Story, storyContext)); // For React 15, StrictMode & Fragment doesn't exists.
 
-            element = Wrapper ? /*#__PURE__*/_react.default.createElement(Wrapper, null, content) : content; // We need to unmount the existing set of components in the DOM node.
+            element = Wrapper ? /*#__PURE__*/_react.default.createElement(Wrapper, null, content) : content; // In most cases, we need to unmount the existing set of components in the DOM node.
             // Otherwise, React may not recreate instances for every story run.
             // This could leads to issues like below:
             // https://github.com/storybookjs/react-storybook/issues/81
-            // But forceRender means that it's the same story, so we want too keep the state in that case.
+            // (This is not the case when we change args or globals to the story however)
 
-            if (!forceRender) {
-              _reactDom.default.unmountComponentAtNode(rootEl);
+            if (forceRemount) {
+              _reactDom.default.unmountComponentAtNode(domElement);
             }
 
-            _context.next = 7;
-            return render(element, rootEl);
+            _context2.next = 7;
+            return renderElement(element, domElement);
 
           case 7:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
       }
-    }, _callee);
+    }, _callee2);
   }));
-  return _renderMain.apply(this, arguments);
+  return _renderToDOM.apply(this, arguments);
 }

package/dist/esm/client/preview/config.js

@@ -0,0 +1,4 @@
+export { render, renderToDOM } from './render';
+export var parameters = {
+  framework: 'react'
+};

package/dist/esm/client/preview/index.js

@@ -1,20 +1,13 @@
 import "core-js/modules/es.array.concat.js";
 
 /* eslint-disable prefer-destructuring */
-import React from 'react';
 import { start } from '@storybook/core/client';
 import './globals';
-import render from './render';
+import { renderToDOM, render } from './render';
 var framework = 'react';
-
-var globalRender = function globalRender(args, _ref) {
-  var parameters = _ref.parameters;
-  var Component = parameters.component;
-  return /*#__PURE__*/React.createElement(Component, args);
-};
-
-var api = start(render);
-api.clientApi.globalRender = globalRender;
+var api = start(renderToDOM, {
+  render: render
+});
 export var storiesOf = function storiesOf(kind, m) {
   return api.clientApi.storiesOf(kind, m).addParameters({
     framework: framework

package/dist/esm/client/preview/render.js

@@ -1,11 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-import "regenerator-runtime/runtime.js";
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -26,6 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+import "regenerator-runtime/runtime.js";
 import "core-js/modules/es.promise.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.array.concat.js";
@@ -37,21 +32,53 @@ import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 import global from 'global';
-import React, { Component, StrictMode, Fragment } from 'react';
+import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
 import ReactDOM from 'react-dom';
-var document = global.document,
-    FRAMEWORK_OPTIONS = global.FRAMEWORK_OPTIONS;
-var rootEl = document ? document.getElementById('root') : null;
-
-var render = function render(node, el) {
-  return new Promise(function (resolve) {
-    ReactDOM.render(node, el, resolve);
-  });
+var FRAMEWORK_OPTIONS = global.FRAMEWORK_OPTIONS;
+export var render = function render(args, _ref) {
+  var id = _ref.id,
+      Component = _ref.component;
+
+  if (!Component) {
+    throw new Error("Unable to render story ".concat(id, " as the component annotation is missing from the default export"));
+  }
+
+  return /*#__PURE__*/React.createElement(Component, args);
 };
 
-var ErrorBoundary = /*#__PURE__*/function (_Component) {
-  _inherits(ErrorBoundary, _Component);
+var renderElement = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(node, el) {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", new Promise(function (resolve) {
+              ReactDOM.render(node, el, function () {
+                return resolve(null);
+              });
+            }));
+
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function renderElement(_x, _x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
+var ErrorBoundary = /*#__PURE__*/function (_ReactComponent) {
+  _inherits(ErrorBoundary, _ReactComponent);
 
   var _super = _createSuper(ErrorBoundary);
 
@@ -105,46 +132,46 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
   }]);
 
   return ErrorBoundary;
-}(Component);
+}(ReactComponent);
 
 var Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? StrictMode : Fragment;
-export default function renderMain(_x) {
-  return _renderMain.apply(this, arguments);
+export function renderToDOM(_x3, _x4) {
+  return _renderToDOM.apply(this, arguments);
 }
 
-function _renderMain() {
-  _renderMain = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref) {
-    var storyContext, unboundStoryFn, showMain, showException, forceRender, Story, content, element;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+function _renderToDOM() {
+  _renderToDOM = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_ref3, domElement) {
+    var storyContext, unboundStoryFn, showMain, showException, forceRemount, Story, content, element;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
-        switch (_context.prev = _context.next) {
+        switch (_context2.prev = _context2.next) {
           case 0:
-            storyContext = _ref.storyContext, unboundStoryFn = _ref.unboundStoryFn, showMain = _ref.showMain, showException = _ref.showException, forceRender = _ref.forceRender;
+            storyContext = _ref3.storyContext, unboundStoryFn = _ref3.unboundStoryFn, showMain = _ref3.showMain, showException = _ref3.showException, forceRemount = _ref3.forceRemount;
             Story = unboundStoryFn;
             content = /*#__PURE__*/React.createElement(ErrorBoundary, {
               showMain: showMain,
               showException: showException
             }, /*#__PURE__*/React.createElement(Story, storyContext)); // For React 15, StrictMode & Fragment doesn't exists.
 
-            element = Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, content) : content; // We need to unmount the existing set of components in the DOM node.
+            element = Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, content) : content; // In most cases, we need to unmount the existing set of components in the DOM node.
             // Otherwise, React may not recreate instances for every story run.
             // This could leads to issues like below:
             // https://github.com/storybookjs/react-storybook/issues/81
-            // But forceRender means that it's the same story, so we want too keep the state in that case.
+            // (This is not the case when we change args or globals to the story however)
 
-            if (!forceRender) {
-              ReactDOM.unmountComponentAtNode(rootEl);
+            if (forceRemount) {
+              ReactDOM.unmountComponentAtNode(domElement);
             }
 
-            _context.next = 7;
-            return render(element, rootEl);
+            _context2.next = 7;
+            return renderElement(element, domElement);
 
           case 7:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
       }
-    }, _callee);
+    }, _callee2);
   }));
-  return _renderMain.apply(this, arguments);
+  return _renderToDOM.apply(this, arguments);
 }

package/dist/modern/client/preview/config.js

@@ -0,0 +1,4 @@
+export { render, renderToDOM } from './render';
+export const parameters = {
+  framework: 'react'
+};

package/dist/modern/client/preview/index.js

@@ -1,19 +1,11 @@
 /* eslint-disable prefer-destructuring */
-import React from 'react';
 import { start } from '@storybook/core/client';
 import './globals';
-import render from './render';
+import { renderToDOM, render } from './render';
 const framework = 'react';
-
-const globalRender = (args, {
-  parameters
-}) => {
-  const Component = parameters.component;
-  return /*#__PURE__*/React.createElement(Component, args);
-};
-
-const api = start(render);
-api.clientApi.globalRender = globalRender;
+const api = start(renderToDOM, {
+  render
+});
 export const storiesOf = (kind, m) => {
   return api.clientApi.storiesOf(kind, m).addParameters({
     framework

package/dist/modern/client/preview/render.js

@@ -1,17 +1,25 @@
 import global from 'global';
-import React, { Component, StrictMode, Fragment } from 'react';
+import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
 import ReactDOM from 'react-dom';
 const {
-  document,
   FRAMEWORK_OPTIONS
 } = global;
-const rootEl = document ? document.getElementById('root') : null;
+export const render = (args, {
+  id,
+  component: Component
+}) => {
+  if (!Component) {
+    throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
+  }
+
+  return /*#__PURE__*/React.createElement(Component, args);
+};
 
-const render = (node, el) => new Promise(resolve => {
-  ReactDOM.render(node, el, resolve);
+const renderElement = async (node, el) => new Promise(resolve => {
+  ReactDOM.render(node, el, () => resolve(null));
 });
 
-class ErrorBoundary extends Component {
+class ErrorBoundary extends ReactComponent {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -59,28 +67,28 @@ class ErrorBoundary extends Component {
 }
 
 const Wrapper = FRAMEWORK_OPTIONS !== null && FRAMEWORK_OPTIONS !== void 0 && FRAMEWORK_OPTIONS.strictMode ? StrictMode : Fragment;
-export default async function renderMain({
+export async function renderToDOM({
   storyContext,
   unboundStoryFn,
   showMain,
   showException,
-  forceRender
-}) {
+  forceRemount
+}, domElement) {
   const Story = unboundStoryFn;
   const content = /*#__PURE__*/React.createElement(ErrorBoundary, {
     showMain: showMain,
     showException: showException
   }, /*#__PURE__*/React.createElement(Story, storyContext)); // For React 15, StrictMode & Fragment doesn't exists.
 
-  const element = Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, content) : content; // We need to unmount the existing set of components in the DOM node.
+  const element = Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, content) : content; // In most cases, we need to unmount the existing set of components in the DOM node.
   // Otherwise, React may not recreate instances for every story run.
   // This could leads to issues like below:
   // https://github.com/storybookjs/react-storybook/issues/81
-  // But forceRender means that it's the same story, so we want too keep the state in that case.
+  // (This is not the case when we change args or globals to the story however)
 
-  if (!forceRender) {
-    ReactDOM.unmountComponentAtNode(rootEl);
+  if (forceRemount) {
+    ReactDOM.unmountComponentAtNode(domElement);
   }
 
-  await render(element, rootEl);
+  await renderElement(element, domElement);
 }

package/dist/ts3.4/client/preview/config.d.ts

@@ -0,0 +1,4 @@
+export { render, renderToDOM } from './render';
+export declare const parameters: {
+    framework: string;
+};

package/dist/ts3.4/client/preview/index.d.ts

@@ -2,8 +2,9 @@
 /// <reference types="node" />
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
-import { IStorybookSection, StoryFnReactReturnType } from './types';
-interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
+import { IStorybookSection } from './types';
+import { ReactFramework } from './types-6-0';
+interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
     setAddon(addon: any): void;
     configure(loader: Loadable, module: NodeModule): void;
     getStorybook(): IStorybookSection[];

package/dist/ts3.4/client/preview/render.d.ts

@@ -1,2 +1,5 @@
-import { RenderContext } from './types';
-export default function renderMain({ storyContext, unboundStoryFn, showMain, showException, forceRender, }: RenderContext): Promise<void>;
+import { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
+import { ReactFramework } from './types-6-0';
+export declare const render: ArgsStoryFn<ReactFramework>;
+export declare function renderToDOM({ storyContext, unboundStoryFn, showMain, showException, forceRemount, }: RenderContext<ReactFramework>, domElement: HTMLElement): Promise<void>;

package/dist/ts3.4/client/preview/types-6-0.d.ts

@@ -1,18 +1,20 @@
 import { ComponentType } from 'react';
-import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { Args, ComponentAnnotations, StoryAnnotationsOrFn } from '@storybook/csf';
 import { StoryFnReactReturnType } from './types';
-export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type ReactComponent = ComponentType<any>;
-declare type ReactReturnType = StoryFnReactReturnType;
+export { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+export declare type ReactFramework = {
+    component: ComponentType<any>;
+    storyResult: StoryFnReactReturnType;
+};
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export declare type Meta<Args = DefaultArgs> = BaseMeta<ReactComponent> & Annotations<Args, ReactReturnType>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<ReactFramework, TArgs>;
 /**
  * Story function that represents a component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type Story<Args = DefaultArgs> = BaseStory<Args, ReactReturnType> & Annotations<Args, ReactReturnType>;
+export declare type Story<TArgs = Args> = StoryAnnotationsOrFn<ReactFramework, TArgs>;

package/dist/ts3.4/client/preview/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-export { RenderContext } from '@storybook/client-api';
-export { StoryContext } from '@storybook/addons';
+export { RenderContext } from '@storybook/store';
+export { StoryContext } from '@storybook/csf';
 export interface ShowErrorArgs {
     title: string;
     description: string;
@@ -8,7 +8,7 @@ export interface ShowErrorArgs {
 export declare type StoryFnReactReturnType = ReactElement<unknown>;
 export interface IStorybookStory {
     name: string;
-    render: () => any;
+    render: (context: any) => any;
 }
 export interface IStorybookSection {
     kind: string;

package/dist/ts3.9/client/preview/config.d.ts

@@ -0,0 +1,4 @@
+export { render, renderToDOM } from './render';
+export declare const parameters: {
+    framework: string;
+};

package/dist/ts3.9/client/preview/index.d.ts

@@ -2,8 +2,9 @@
 /// <reference types="node" />
 import { ClientStoryApi, Loadable } from '@storybook/addons';
 import './globals';
-import { IStorybookSection, StoryFnReactReturnType } from './types';
-interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
+import { IStorybookSection } from './types';
+import { ReactFramework } from './types-6-0';
+interface ClientApi extends ClientStoryApi<ReactFramework['storyResult']> {
     setAddon(addon: any): void;
     configure(loader: Loadable, module: NodeModule): void;
     getStorybook(): IStorybookSection[];

package/dist/ts3.9/client/preview/render.d.ts

@@ -1,2 +1,5 @@
-import { RenderContext } from './types';
-export default function renderMain({ storyContext, unboundStoryFn, showMain, showException, forceRender, }: RenderContext): Promise<void>;
+import { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
+import { ReactFramework } from './types-6-0';
+export declare const render: ArgsStoryFn<ReactFramework>;
+export declare function renderToDOM({ storyContext, unboundStoryFn, showMain, showException, forceRemount, }: RenderContext<ReactFramework>, domElement: HTMLElement): Promise<void>;

package/dist/ts3.9/client/preview/types-6-0.d.ts

@@ -1,18 +1,20 @@
 import { ComponentType } from 'react';
-import { Args as DefaultArgs, Annotations, BaseMeta, BaseStory } from '@storybook/addons';
+import { Args, ComponentAnnotations, StoryAnnotationsOrFn } from '@storybook/csf';
 import { StoryFnReactReturnType } from './types';
-export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type ReactComponent = ComponentType<any>;
-declare type ReactReturnType = StoryFnReactReturnType;
+export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
+export declare type ReactFramework = {
+    component: ComponentType<any>;
+    storyResult: StoryFnReactReturnType;
+};
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export declare type Meta<Args = DefaultArgs> = BaseMeta<ReactComponent> & Annotations<Args, ReactReturnType>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<ReactFramework, TArgs>;
 /**
  * Story function that represents a component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type Story<Args = DefaultArgs> = BaseStory<Args, ReactReturnType> & Annotations<Args, ReactReturnType>;
+export declare type Story<TArgs = Args> = StoryAnnotationsOrFn<ReactFramework, TArgs>;

package/dist/ts3.9/client/preview/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-export type { RenderContext } from '@storybook/client-api';
-export type { StoryContext } from '@storybook/addons';
+export type { RenderContext } from '@storybook/store';
+export type { StoryContext } from '@storybook/csf';
 export interface ShowErrorArgs {
     title: string;
     description: string;
@@ -8,7 +8,7 @@ export interface ShowErrorArgs {
 export declare type StoryFnReactReturnType = ReactElement<unknown>;
 export interface IStorybookStory {
     name: string;
-    render: () => any;
+    render: (context: any) => any;
 }
 export interface IStorybookSection {
     kind: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "6.4.0-alpha.34",
+  "version": "6.4.0-alpha.38",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -49,12 +49,14 @@
     "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.2",
-    "@storybook/addons": "6.4.0-alpha.34",
-    "@storybook/core": "6.4.0-alpha.34",
-    "@storybook/core-common": "6.4.0-alpha.34",
-    "@storybook/node-logger": "6.4.0-alpha.34",
+    "@storybook/addons": "6.4.0-alpha.38",
+    "@storybook/core": "6.4.0-alpha.38",
+    "@storybook/core-common": "6.4.0-alpha.38",
+    "@storybook/csf": "0.0.2--canary.68887a1.0",
+    "@storybook/node-logger": "6.4.0-alpha.38",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
     "@storybook/semver": "^7.3.2",
+    "@storybook/store": "6.4.0-alpha.38",
     "@types/webpack-env": "^1.16.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
@@ -71,7 +73,7 @@
     "webpack": "4"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.4.0-alpha.34",
+    "@storybook/client-api": "6.4.0-alpha.38",
     "@types/node": "^14.14.20",
     "@types/prompts": "^2.0.9"
   },
@@ -94,6 +96,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ccd25210cd159e42110b700b0562e951bb9b3a57",
+  "gitHead": "14b9d19e7e9e3de84729ce0c7989efa372c6987c",
   "sbmodern": "dist/modern/client/index.js"
 }

package/preset.js

@@ -0,0 +1,7 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./dist/esm/client/preview/config')];
+}
+
+module.exports = {
+  config,
+};