@storybook/addon-controls 7.0.0-alpha.2 → 7.0.0-alpha.23

package/README.md

@@ -4,7 +4,7 @@
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/controls/docs/media/addon-controls-hero.gif)
+![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif)
 
 ## Installation
 
@@ -210,4 +210,4 @@ export const Template = (args) => <Button {...args} />
 </Story>
 ```
 
-For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx).
+For more info, see a full [Controls example in MDX for Vue](https://raw.githubusercontent.com/storybookjs/storybook/next/code/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx).

package/dist/chunk-MVAPMMAC.mjs

@@ -0,0 +1 @@
+var s="addon-controls",t="controls";export{s as a,t as b};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const PARAM_KEY: "controls";
+
+export { PARAM_KEY };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var e=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var x=(t,o)=>{for(var n in o)c(t,n,{get:o[n],enumerable:!0})},D=(t,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of e(o))!p.call(t,s)&&s!==n&&c(t,s,{get:()=>o[s],enumerable:!(r=a(o,s))||r.enumerable});return t};var _=t=>D(c({},"__esModule",{value:!0}),t);var d={};x(d,{PARAM_KEY:()=>A});module.exports=_(d);var A="controls";0&&(module.exports={PARAM_KEY});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{b as o}from"./chunk-MVAPMMAC.mjs";export{o as PARAM_KEY};

package/dist/manager.d.ts

@@ -0,0 +1 @@
+

package/dist/manager.js

@@ -0,0 +1 @@
+"use strict";var T=Object.create;var b=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var k=(o,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of j(r))!Y.call(o,s)&&s!==t&&b(o,s,{get:()=>r[s],enumerable:!(i=W(r,s))||i.enumerable});return o};var y=(o,r,t)=>(t=o!=null?T(M(o)):{},k(r||!o||!o.__esModule?b(t,"default",{value:o,enumerable:!0}):t,o));var a=y(require("react")),c=require("@storybook/addons"),x=require("@storybook/components"),D=require("@storybook/api");var p=y(require("react")),e=require("@storybook/api"),A=require("@storybook/blocks");var u="addon-controls",m="controls";var h=()=>{let[o,r,t]=(0,e.useArgs)(),[i]=(0,e.useGlobals)(),s=(0,e.useArgTypes)(),S=(0,e.useParameter)("__isArgsStory",!1),{expanded:_,sort:N,presetColors:w,hideNoControlsWarning:O=!1}=(0,e.useParameter)(m,{}),{path:E}=(0,e.useStorybookState)(),d=Object.values(s).some(l=>l==null?void 0:l.control),I=!(d&&S)&&!O,K=Object.entries(s).reduce((l,[f,n])=>{var C,P;return((C=n==null?void 0:n.control)==null?void 0:C.type)!=="color"||((P=n==null?void 0:n.control)==null?void 0:P.presetColors)?l[f]=n:l[f]={...n,control:{...n.control,presetColors:w}},l},{});return p.default.createElement(p.default.Fragment,null,I&&p.default.createElement(A.NoControlsWarning,null),p.default.createElement(A.PureArgsTable,{...{key:E,compact:!_&&d,rows:K,args:o,globals:i,updateArgs:r,resetArgs:t,inAddonPanel:!0,sort:N}}))};c.addons.register(u,o=>{c.addons.addPanel(u,{title(){let r=(0,D.useArgTypes)(),t=Object.values(r).filter(s=>s==null?void 0:s.control).length;return`Controls${t===0?"":` (${t})`}`},type:c.types.PANEL,paramKey:m,render:({key:r,active:t})=>!t||!o.getCurrentStoryData()?null:a.default.createElement(x.AddonPanel,{key:r,active:t},a.default.createElement(h,null))})});

package/dist/manager.mjs

@@ -0,0 +1 @@
+import{a as i,b as n}from"./chunk-MVAPMMAC.mjs";import f from"react";import{addons as d,types as j}from"@storybook/addons";import{AddonPanel as E}from"@storybook/components";import{useArgTypes as I}from"@storybook/api";import l from"react";import{useArgs as x,useGlobals as N,useArgTypes as _,useParameter as A,useStorybookState as D}from"@storybook/api";import{PureArgsTable as O,NoControlsWarning as W}from"@storybook/blocks";var c=()=>{let[a,r,o]=x(),[p]=N(),s=_(),C=A("__isArgsStory",!1),{expanded:P,sort:g,presetColors:y,hideNoControlsWarning:b=!1}=A(n,{}),{path:T}=D(),m=Object.values(s).some(e=>e?.control),h=!(m&&C)&&!b,S=Object.entries(s).reduce((e,[u,t])=>(t?.control?.type!=="color"||t?.control?.presetColors?e[u]=t:e[u]={...t,control:{...t.control,presetColors:y}},e),{});return l.createElement(l.Fragment,null,h&&l.createElement(W,null),l.createElement(O,{...{key:T,compact:!P&&m,rows:S,args:a,globals:p,updateArgs:r,resetArgs:o,inAddonPanel:!0,sort:g}}))};d.register(i,a=>{d.addPanel(i,{title(){let r=I(),o=Object.values(r).filter(s=>s?.control).length;return`Controls${o===0?"":` (${o})`}`},type:j.PANEL,paramKey:n,render:({key:r,active:o})=>!o||!a.getCurrentStoryData()?null:f.createElement(E,{key:r,active:o},f.createElement(c,null))})});

package/manager.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.2",
+  "version": "7.0.0-alpha.23",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -25,9 +25,27 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/manager.js",
-  "module": "dist/esm/manager.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./register.js": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -35,18 +53,20 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "tsc --noEmit",
+    "prepare": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.2",
-    "@storybook/api": "7.0.0-alpha.2",
-    "@storybook/client-logger": "7.0.0-alpha.2",
-    "@storybook/components": "7.0.0-alpha.2",
-    "@storybook/core-common": "7.0.0-alpha.2",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/node-logger": "7.0.0-alpha.2",
-    "@storybook/store": "7.0.0-alpha.2",
-    "@storybook/theming": "7.0.0-alpha.2",
+    "@storybook/addons": "7.0.0-alpha.23",
+    "@storybook/api": "7.0.0-alpha.23",
+    "@storybook/blocks": "7.0.0-alpha.23",
+    "@storybook/client-logger": "7.0.0-alpha.23",
+    "@storybook/components": "7.0.0-alpha.23",
+    "@storybook/core-common": "7.0.0-alpha.23",
+    "@storybook/csf": "0.0.2--canary.0899bb7.0",
+    "@storybook/node-logger": "7.0.0-alpha.23",
+    "@storybook/store": "7.0.0-alpha.23",
+    "@storybook/theming": "7.0.0-alpha.23",
     "core-js": "^3.8.2",
     "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
@@ -66,7 +86,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "44920e2b6bd51981bac5124743c29fb9f5517e44",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx"
+    ],
+    "platform": "browser"
+  },
+  "gitHead": "0900e20acfbc12551c6a3f788b8de5dd6af5f80a",
   "storybook": {
     "displayName": "Controls",
     "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/cjs/ControlsPanel.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ControlsPanel = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _api = require("@storybook/api");
-
-var _components = require("@storybook/components");
-
-var _constants = require("./constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ControlsPanel = () => {
-  const [args, updateArgs, resetArgs] = (0, _api.useArgs)();
-  const [globals] = (0, _api.useGlobals)();
-  const rows = (0, _api.useArgTypes)();
-  const isArgsStory = (0, _api.useParameter)('__isArgsStory', false);
-  const {
-    expanded,
-    sort,
-    presetColors,
-    hideNoControlsWarning = false
-  } = (0, _api.useParameter)(_constants.PARAM_KEY, {});
-  const {
-    path
-  } = (0, _api.useStorybookState)();
-  const hasControls = Object.values(rows).some(arg => arg === null || arg === void 0 ? void 0 : arg.control);
-  const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
-  const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
-    var _arg$control, _arg$control2;
-
-    if ((arg === null || arg === void 0 ? void 0 : (_arg$control = arg.control) === null || _arg$control === void 0 ? void 0 : _arg$control.type) !== 'color' || arg !== null && arg !== void 0 && (_arg$control2 = arg.control) !== null && _arg$control2 !== void 0 && _arg$control2.presetColors) acc[key] = arg;else acc[key] = Object.assign({}, arg, {
-      control: Object.assign({}, arg.control, {
-        presetColors
-      })
-    });
-    return acc;
-  }, {});
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showWarning && /*#__PURE__*/_react.default.createElement(_components.NoControlsWarning, null), /*#__PURE__*/_react.default.createElement(_components.ArgsTable, {
-    key: path,
-    // resets state when switching stories
-    compact: !expanded && hasControls,
-    rows: withPresetColors,
-    args,
-    globals,
-    updateArgs,
-    resetArgs,
-    inAddonPanel: true,
-    sort
-  }));
-};
-
-exports.ControlsPanel = ControlsPanel;

package/dist/cjs/constants.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PARAM_KEY = exports.ADDON_ID = void 0;
-const ADDON_ID = 'addon-controls';
-exports.ADDON_ID = ADDON_ID;
-const PARAM_KEY = 'controls';
-exports.PARAM_KEY = PARAM_KEY;

package/dist/cjs/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "PARAM_KEY", {
-  enumerable: true,
-  get: function () {
-    return _constants.PARAM_KEY;
-  }
-});
-
-var _constants = require("./constants");

package/dist/cjs/manager.js

@@ -1,42 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addons = require("@storybook/addons");
-
-var _components = require("@storybook/components");
-
-var _api = require("@storybook/api");
-
-var _ControlsPanel = require("./ControlsPanel");
-
-var _constants = require("./constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-_addons.addons.register(_constants.ADDON_ID, api => {
-  _addons.addons.addPanel(_constants.ADDON_ID, {
-    title() {
-      const rows = (0, _api.useArgTypes)();
-      const controlsCount = Object.values(rows).filter(argType => argType === null || argType === void 0 ? void 0 : argType.control).length;
-      const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
-      return `Controls${suffix}`;
-    },
-
-    type: _addons.types.PANEL,
-    paramKey: _constants.PARAM_KEY,
-    render: ({
-      key,
-      active
-    }) => {
-      if (!active || !api.getCurrentStoryData()) {
-        return null;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_components.AddonPanel, {
-        key: key,
-        active: active
-      }, /*#__PURE__*/_react.default.createElement(_ControlsPanel.ControlsPanel, null));
-    }
-  });
-});

package/dist/cjs/preset/checkDocsLoaded.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.checkDocsLoaded = void 0;
-
-var _coreCommon = require("@storybook/core-common");
-
-var _path = _interopRequireDefault(require("path"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const checkDocsLoaded = configDir => {
-  (0, _coreCommon.checkAddonOrder)({
-    before: {
-      name: '@storybook/addon-docs',
-      inEssentials: true
-    },
-    after: {
-      name: '@storybook/addon-controls',
-      inEssentials: true
-    },
-    configFile: _path.default.isAbsolute(configDir) ? _path.default.join(configDir, 'main') : _path.default.join(process.cwd(), configDir, 'main'),
-    getConfig: configFile => (0, _coreCommon.serverRequire)(configFile)
-  });
-};
-
-exports.checkDocsLoaded = checkDocsLoaded;

package/dist/esm/ControlsPanel.js

@@ -1,41 +0,0 @@
-import React from 'react';
-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 {
-    expanded,
-    sort,
-    presetColors,
-    hideNoControlsWarning = false
-  } = useParameter(PARAM_KEY, {});
-  const {
-    path
-  } = useStorybookState();
-  const hasControls = Object.values(rows).some(arg => arg?.control);
-  const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
-  const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
-    if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;else acc[key] = Object.assign({}, arg, {
-      control: Object.assign({}, arg.control, {
-        presetColors
-      })
-    });
-    return acc;
-  }, {});
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showWarning && /*#__PURE__*/React.createElement(NoControlsWarning, null), /*#__PURE__*/React.createElement(ArgsTable, {
-    key: path,
-    // resets state when switching stories
-    compact: !expanded && hasControls,
-    rows: withPresetColors,
-    args,
-    globals,
-    updateArgs,
-    resetArgs,
-    inAddonPanel: true,
-    sort
-  }));
-};

package/dist/esm/constants.js

@@ -1,2 +0,0 @@
-export const ADDON_ID = 'addon-controls';
-export const PARAM_KEY = 'controls';

package/dist/esm/index.js

@@ -1 +0,0 @@
-export { PARAM_KEY } from './constants';

package/dist/esm/manager.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { addons, types } from '@storybook/addons';
-import { AddonPanel } from '@storybook/components';
-import { useArgTypes } from '@storybook/api';
-import { ControlsPanel } from './ControlsPanel';
-import { ADDON_ID, PARAM_KEY } from './constants';
-addons.register(ADDON_ID, api => {
-  addons.addPanel(ADDON_ID, {
-    title() {
-      const rows = useArgTypes();
-      const controlsCount = Object.values(rows).filter(argType => argType?.control).length;
-      const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
-      return `Controls${suffix}`;
-    },
-
-    type: types.PANEL,
-    paramKey: PARAM_KEY,
-    render: ({
-      key,
-      active
-    }) => {
-      if (!active || !api.getCurrentStoryData()) {
-        return null;
-      }
-
-      return /*#__PURE__*/React.createElement(AddonPanel, {
-        key: key,
-        active: active
-      }, /*#__PURE__*/React.createElement(ControlsPanel, null));
-    }
-  });
-});

package/dist/esm/preset/checkDocsLoaded.js

@@ -1,16 +0,0 @@
-import { checkAddonOrder, serverRequire } from '@storybook/core-common';
-import path from 'path';
-export const checkDocsLoaded = configDir => {
-  checkAddonOrder({
-    before: {
-      name: '@storybook/addon-docs',
-      inEssentials: true
-    },
-    after: {
-      name: '@storybook/addon-controls',
-      inEssentials: true
-    },
-    configFile: path.isAbsolute(configDir) ? path.join(configDir, 'main') : path.join(process.cwd(), configDir, 'main'),
-    getConfig: configFile => serverRequire(configFile)
-  });
-};

package/dist/types/ControlsPanel.d.ts

@@ -1,2 +0,0 @@
-import { FC } from 'react';
-export declare const ControlsPanel: FC;

package/dist/types/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const ADDON_ID: "addon-controls";
-export declare const PARAM_KEY: "controls";

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export { PARAM_KEY } from './constants';

package/dist/types/manager.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/preset/checkDocsLoaded.d.ts

@@ -1 +0,0 @@
-export declare const checkDocsLoaded: (configDir: string) => void;