@storybook/addon-controls 6.5.0-alpha.9 → 6.5.0-beta.2

package/README.md

@@ -48,7 +48,7 @@ If you are somehow tied to knobs or prefer the knobs interface, we are happy to
 
 ### How do I migrate from addon-knobs?
 
-If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/main/addons/knobs) you should consider migrating to Controls.
+If you're already using [Storybook Knobs](https://github.com/storybookjs/addon-knobs) you should consider migrating to Controls.
 
 You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).
 

package/dist/cjs/ControlsPanel.js

@@ -4,14 +4,12 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
-require("core-js/modules/es.string.iterator.js");
-
 require("core-js/modules/es.array.iterator.js");
 
+require("core-js/modules/es.string.iterator.js");
+
 require("core-js/modules/web.dom-collections.iterator.js");
 
 require("core-js/modules/es.array.slice.js");
@@ -20,11 +18,17 @@ require("core-js/modules/es.function.name.js");
 
 require("core-js/modules/es.array.from.js");
 
+require("core-js/modules/es.regexp.exec.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ControlsPanel = void 0;
 
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.object.values.js");
 
 require("core-js/modules/es.object.entries.js");
@@ -49,7 +53,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
@@ -60,6 +64,10 @@ var ControlsPanel = function ControlsPanel() {
       updateArgs = _useArgs2[1],
       resetArgs = _useArgs2[2];
 
+  var _useGlobals = (0, _api.useGlobals)(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 1),
+      globals = _useGlobals2[0];
+
   var rows = (0, _api.useArgTypes)();
   var isArgsStory = (0, _api.useParameter)('__isArgsStory', false);
 
@@ -97,6 +105,7 @@ var ControlsPanel = function ControlsPanel() {
     compact: !expanded && hasControls,
     rows: withPresetColors,
     args: args,
+    globals: globals,
     updateArgs: updateArgs,
     resetArgs: resetArgs,
     inAddonPanel: true,

package/dist/cjs/{register.js → manager.js}

@@ -2,6 +2,8 @@
 
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.object.values.js");
 
 var _react = _interopRequireDefault(require("react"));

package/dist/cjs/preset/checkDocsLoaded.js

@@ -1,23 +1,5 @@
 "use strict";
 
-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); }
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,20 +7,12 @@ exports.checkDocsLoaded = void 0;
 
 require("core-js/modules/es.array.join.js");
 
-require("core-js/modules/es.promise.js");
-
-require("core-js/modules/es.object.to-string.js");
-
 var _coreCommon = require("@storybook/core-common");
 
 var _path = _interopRequireDefault(require("path"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
-
 var checkDocsLoaded = function checkDocsLoaded(configDir) {
   (0, _coreCommon.checkAddonOrder)({
     before: {
@@ -51,9 +25,7 @@ var checkDocsLoaded = function checkDocsLoaded(configDir) {
     },
     configFile: _path.default.isAbsolute(configDir) ? _path.default.join(configDir, 'main') : _path.default.join(process.cwd(), configDir, 'main'),
     getConfig: function getConfig(configFile) {
-      return Promise.resolve("".concat(configFile)).then(function (s) {
-        return _interopRequireWildcard(require(s));
-      });
+      return (0, _coreCommon.serverRequire)(configFile);
     }
   });
 };

package/dist/esm/ControlsPanel.js

@@ -1,16 +1,18 @@
+import "core-js/modules/es.array.sort.js";
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.object.values.js";
 import "core-js/modules/es.object.entries.js";
 import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
 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/es.string.iterator.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.regexp.exec.js";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -20,12 +22,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React from 'react';
-import { useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
+import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
 import { ArgsTable, NoControlsWarning } from '@storybook/components';
 import { PARAM_KEY } from './constants';
 export var ControlsPanel = function ControlsPanel() {
@@ -35,6 +37,10 @@ export var ControlsPanel = function ControlsPanel() {
       updateArgs = _useArgs2[1],
       resetArgs = _useArgs2[2];
 
+  var _useGlobals = useGlobals(),
+      _useGlobals2 = _slicedToArray(_useGlobals, 1),
+      globals = _useGlobals2[0];
+
   var rows = useArgTypes();
   var isArgsStory = useParameter('__isArgsStory', false);
 
@@ -72,6 +78,7 @@ export var ControlsPanel = function ControlsPanel() {
     compact: !expanded && hasControls,
     rows: withPresetColors,
     args: args,
+    globals: globals,
     updateArgs: updateArgs,
     resetArgs: resetArgs,
     inAddonPanel: true,

package/dist/esm/{register.js → manager.js}

@@ -1,4 +1,5 @@
 import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { addons, types } from '@storybook/addons';

package/dist/esm/preset/checkDocsLoaded.js

@@ -1,7 +1,5 @@
 import "core-js/modules/es.array.join.js";
-import "core-js/modules/es.promise.js";
-import "core-js/modules/es.object.to-string.js";
-import { checkAddonOrder } from '@storybook/core-common';
+import { checkAddonOrder, serverRequire } from '@storybook/core-common';
 import path from 'path';
 export var checkDocsLoaded = function checkDocsLoaded(configDir) {
   checkAddonOrder({
@@ -15,7 +13,7 @@ export var checkDocsLoaded = function checkDocsLoaded(configDir) {
     },
     configFile: path.isAbsolute(configDir) ? path.join(configDir, 'main') : path.join(process.cwd(), configDir, 'main'),
     getConfig: function getConfig(configFile) {
-      return import(configFile);
+      return serverRequire(configFile);
     }
   });
 };

package/dist/modern/ControlsPanel.js

@@ -1,10 +1,11 @@
 import "core-js/modules/es.array.reduce.js";
 import React from 'react';
-import { useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
+import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
 import { ArgsTable, NoControlsWarning } from '@storybook/components';
 import { PARAM_KEY } from './constants';
 export const ControlsPanel = () => {
   const [args, updateArgs, resetArgs] = useArgs();
+  const [globals] = useGlobals();
   const rows = useArgTypes();
   const isArgsStory = useParameter('__isArgsStory', false);
   const {
@@ -34,6 +35,7 @@ export const ControlsPanel = () => {
     compact: !expanded && hasControls,
     rows: withPresetColors,
     args,
+    globals,
     updateArgs,
     resetArgs,
     inAddonPanel: true,

package/dist/modern/preset/checkDocsLoaded.js

@@ -1,4 +1,4 @@
-import { checkAddonOrder } from '@storybook/core-common';
+import { checkAddonOrder, serverRequire } from '@storybook/core-common';
 import path from 'path';
 export const checkDocsLoaded = configDir => {
   checkAddonOrder({
@@ -11,6 +11,6 @@ export const checkDocsLoaded = configDir => {
       inEssentials: true
     },
     configFile: path.isAbsolute(configDir) ? path.join(configDir, 'main') : path.join(process.cwd(), configDir, 'main'),
-    getConfig: configFile => import(configFile)
+    getConfig: configFile => serverRequire(configFile)
   });
 };

package/manager.js

@@ -0,0 +1 @@
+import './dist/esm/manager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "6.5.0-alpha.9",
+  "version": "6.5.0-beta.2",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -25,8 +25,8 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
+  "main": "dist/cjs/manager.js",
+  "module": "dist/esm/manager.js",
   "types": "dist/ts3.9/index.d.ts",
   "typesVersions": {
     "<3.8": {
@@ -45,22 +45,22 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.9",
-    "@storybook/api": "6.5.0-alpha.9",
-    "@storybook/client-logger": "6.5.0-alpha.9",
-    "@storybook/components": "6.5.0-alpha.9",
-    "@storybook/core-common": "6.5.0-alpha.9",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.9",
-    "@storybook/store": "6.5.0-alpha.9",
-    "@storybook/theming": "6.5.0-alpha.9",
+    "@storybook/addons": "6.5.0-beta.2",
+    "@storybook/api": "6.5.0-beta.2",
+    "@storybook/client-logger": "6.5.0-beta.2",
+    "@storybook/components": "6.5.0-beta.2",
+    "@storybook/core-common": "6.5.0-beta.2",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/node-logger": "6.5.0-beta.2",
+    "@storybook/store": "6.5.0-beta.2",
+    "@storybook/theming": "6.5.0-beta.2",
     "core-js": "^3.8.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -73,8 +73,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fb124ab94e8b5ed0920bc7954e6f6a70bf79c37a",
-  "sbmodern": "dist/modern/register.js",
+  "gitHead": "b42ccab2b3f9d4f1f8f862242a5e4af0d3306061",
+  "sbmodern": "dist/modern/manager.js",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

package/register.js

@@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);

package/preset.js

@@ -1,8 +0,0 @@
-function managerEntries(entry = [], options) {
-  // eslint-disable-next-line global-require
-  const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded');
-  checkDocsLoaded(options.configDir);
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = { managerEntries };