@storybook/addon-controls 7.0.0-alpha.1 → 7.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ControlsPanel.js +26 -86
- package/dist/cjs/constants.js +2 -2
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/manager.js +11 -18
- package/dist/cjs/preset/checkDocsLoaded.js +2 -6
- package/dist/esm/ControlsPanel.js +1 -1
- package/package.json +11 -10
|
@@ -1,115 +1,55 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
require("core-js/modules/es.symbol.js");
|
|
4
|
-
|
|
5
|
-
require("core-js/modules/es.symbol.description.js");
|
|
6
|
-
|
|
7
|
-
require("core-js/modules/es.symbol.iterator.js");
|
|
8
|
-
|
|
9
|
-
require("core-js/modules/es.array.iterator.js");
|
|
10
|
-
|
|
11
|
-
require("core-js/modules/es.string.iterator.js");
|
|
12
|
-
|
|
13
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
|
14
|
-
|
|
15
|
-
require("core-js/modules/es.array.slice.js");
|
|
16
|
-
|
|
17
|
-
require("core-js/modules/es.function.name.js");
|
|
18
|
-
|
|
19
|
-
require("core-js/modules/es.array.from.js");
|
|
20
|
-
|
|
21
|
-
require("core-js/modules/es.regexp.exec.js");
|
|
22
|
-
|
|
23
3
|
Object.defineProperty(exports, "__esModule", {
|
|
24
4
|
value: true
|
|
25
5
|
});
|
|
26
6
|
exports.ControlsPanel = void 0;
|
|
27
7
|
|
|
28
|
-
require("core-js/modules/es.array.sort.js");
|
|
29
|
-
|
|
30
|
-
require("core-js/modules/es.object.to-string.js");
|
|
31
|
-
|
|
32
|
-
require("core-js/modules/es.object.values.js");
|
|
33
|
-
|
|
34
|
-
require("core-js/modules/es.object.entries.js");
|
|
35
|
-
|
|
36
|
-
require("core-js/modules/es.object.assign.js");
|
|
37
|
-
|
|
38
8
|
var _react = _interopRequireDefault(require("react"));
|
|
39
9
|
|
|
40
10
|
var _api = require("@storybook/api");
|
|
41
11
|
|
|
42
|
-
var
|
|
12
|
+
var _blocks = require("@storybook/blocks");
|
|
43
13
|
|
|
44
14
|
var _constants = require("./constants");
|
|
45
15
|
|
|
46
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
47
17
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
var _useGlobals = (0, _api.useGlobals)(),
|
|
68
|
-
_useGlobals2 = _slicedToArray(_useGlobals, 1),
|
|
69
|
-
globals = _useGlobals2[0];
|
|
70
|
-
|
|
71
|
-
var rows = (0, _api.useArgTypes)();
|
|
72
|
-
var isArgsStory = (0, _api.useParameter)('__isArgsStory', false);
|
|
73
|
-
|
|
74
|
-
var _useParameter = (0, _api.useParameter)(_constants.PARAM_KEY, {}),
|
|
75
|
-
expanded = _useParameter.expanded,
|
|
76
|
-
sort = _useParameter.sort,
|
|
77
|
-
presetColors = _useParameter.presetColors,
|
|
78
|
-
_useParameter$hideNoC = _useParameter.hideNoControlsWarning,
|
|
79
|
-
hideNoControlsWarning = _useParameter$hideNoC === void 0 ? false : _useParameter$hideNoC;
|
|
80
|
-
|
|
81
|
-
var _useStorybookState = (0, _api.useStorybookState)(),
|
|
82
|
-
path = _useStorybookState.path;
|
|
83
|
-
|
|
84
|
-
var hasControls = Object.values(rows).some(function (arg) {
|
|
85
|
-
return arg === null || arg === void 0 ? void 0 : arg.control;
|
|
86
|
-
});
|
|
87
|
-
var showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
|
88
|
-
var withPresetColors = Object.entries(rows).reduce(function (acc, _ref) {
|
|
89
|
-
var _arg$control, _arg$control2;
|
|
90
|
-
|
|
91
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
92
|
-
key = _ref2[0],
|
|
93
|
-
arg = _ref2[1];
|
|
94
|
-
|
|
95
|
-
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, {
|
|
18
|
+
const ControlsPanel = () => {
|
|
19
|
+
const [args, updateArgs, resetArgs] = (0, _api.useArgs)();
|
|
20
|
+
const [globals] = (0, _api.useGlobals)();
|
|
21
|
+
const rows = (0, _api.useArgTypes)();
|
|
22
|
+
const isArgsStory = (0, _api.useParameter)('__isArgsStory', false);
|
|
23
|
+
const {
|
|
24
|
+
expanded,
|
|
25
|
+
sort,
|
|
26
|
+
presetColors,
|
|
27
|
+
hideNoControlsWarning = false
|
|
28
|
+
} = (0, _api.useParameter)(_constants.PARAM_KEY, {});
|
|
29
|
+
const {
|
|
30
|
+
path
|
|
31
|
+
} = (0, _api.useStorybookState)();
|
|
32
|
+
const hasControls = Object.values(rows).some(arg => arg?.control);
|
|
33
|
+
const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
|
34
|
+
const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
|
|
35
|
+
if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;else acc[key] = Object.assign({}, arg, {
|
|
96
36
|
control: Object.assign({}, arg.control, {
|
|
97
|
-
presetColors
|
|
37
|
+
presetColors
|
|
98
38
|
})
|
|
99
39
|
});
|
|
100
40
|
return acc;
|
|
101
41
|
}, {});
|
|
102
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showWarning && /*#__PURE__*/_react.default.createElement(
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showWarning && /*#__PURE__*/_react.default.createElement(_blocks.NoControlsWarning, null), /*#__PURE__*/_react.default.createElement(_blocks.PureArgsTable, {
|
|
103
43
|
key: path,
|
|
104
44
|
// resets state when switching stories
|
|
105
45
|
compact: !expanded && hasControls,
|
|
106
46
|
rows: withPresetColors,
|
|
107
|
-
args
|
|
108
|
-
globals
|
|
109
|
-
updateArgs
|
|
110
|
-
resetArgs
|
|
47
|
+
args,
|
|
48
|
+
globals,
|
|
49
|
+
updateArgs,
|
|
50
|
+
resetArgs,
|
|
111
51
|
inAddonPanel: true,
|
|
112
|
-
sort
|
|
52
|
+
sort
|
|
113
53
|
}));
|
|
114
54
|
};
|
|
115
55
|
|
package/dist/cjs/constants.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.PARAM_KEY = exports.ADDON_ID = void 0;
|
|
7
|
-
|
|
7
|
+
const ADDON_ID = 'addon-controls';
|
|
8
8
|
exports.ADDON_ID = ADDON_ID;
|
|
9
|
-
|
|
9
|
+
const PARAM_KEY = 'controls';
|
|
10
10
|
exports.PARAM_KEY = PARAM_KEY;
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/manager.js
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
require("core-js/modules/es.array.filter.js");
|
|
4
|
-
|
|
5
|
-
require("core-js/modules/es.object.to-string.js");
|
|
6
|
-
|
|
7
|
-
require("core-js/modules/es.object.values.js");
|
|
8
|
-
|
|
9
3
|
var _react = _interopRequireDefault(require("react"));
|
|
10
4
|
|
|
11
5
|
var _addons = require("@storybook/addons");
|
|
@@ -20,22 +14,21 @@ var _constants = require("./constants");
|
|
|
20
14
|
|
|
21
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
16
|
|
|
23
|
-
_addons.addons.register(_constants.ADDON_ID,
|
|
17
|
+
_addons.addons.register(_constants.ADDON_ID, api => {
|
|
24
18
|
_addons.addons.addPanel(_constants.ADDON_ID, {
|
|
25
|
-
title
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
var suffix = controlsCount === 0 ? '' : " (".concat(controlsCount, ")");
|
|
31
|
-
return "Controls".concat(suffix);
|
|
19
|
+
title() {
|
|
20
|
+
const rows = (0, _api.useArgTypes)();
|
|
21
|
+
const controlsCount = Object.values(rows).filter(argType => argType?.control).length;
|
|
22
|
+
const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
|
|
23
|
+
return `Controls${suffix}`;
|
|
32
24
|
},
|
|
25
|
+
|
|
33
26
|
type: _addons.types.PANEL,
|
|
34
27
|
paramKey: _constants.PARAM_KEY,
|
|
35
|
-
render:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
render: ({
|
|
29
|
+
key,
|
|
30
|
+
active
|
|
31
|
+
}) => {
|
|
39
32
|
if (!active || !api.getCurrentStoryData()) {
|
|
40
33
|
return null;
|
|
41
34
|
}
|
|
@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.checkDocsLoaded = void 0;
|
|
7
7
|
|
|
8
|
-
require("core-js/modules/es.array.join.js");
|
|
9
|
-
|
|
10
8
|
var _coreCommon = require("@storybook/core-common");
|
|
11
9
|
|
|
12
10
|
var _path = _interopRequireDefault(require("path"));
|
|
13
11
|
|
|
14
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
13
|
|
|
16
|
-
|
|
14
|
+
const checkDocsLoaded = configDir => {
|
|
17
15
|
(0, _coreCommon.checkAddonOrder)({
|
|
18
16
|
before: {
|
|
19
17
|
name: '@storybook/addon-docs',
|
|
@@ -24,9 +22,7 @@ var checkDocsLoaded = function checkDocsLoaded(configDir) {
|
|
|
24
22
|
inEssentials: true
|
|
25
23
|
},
|
|
26
24
|
configFile: _path.default.isAbsolute(configDir) ? _path.default.join(configDir, 'main') : _path.default.join(process.cwd(), configDir, 'main'),
|
|
27
|
-
getConfig:
|
|
28
|
-
return (0, _coreCommon.serverRequire)(configFile);
|
|
29
|
-
}
|
|
25
|
+
getConfig: configFile => (0, _coreCommon.serverRequire)(configFile)
|
|
30
26
|
});
|
|
31
27
|
};
|
|
32
28
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
|
|
3
|
-
import { ArgsTable, NoControlsWarning } from '@storybook/
|
|
3
|
+
import { PureArgsTable as ArgsTable, NoControlsWarning } from '@storybook/blocks';
|
|
4
4
|
import { PARAM_KEY } from './constants';
|
|
5
5
|
export const ControlsPanel = () => {
|
|
6
6
|
const [args, updateArgs, resetArgs] = useArgs();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-controls",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.10",
|
|
4
4
|
"description": "Interact with component inputs dynamically in the Storybook UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -38,15 +38,16 @@
|
|
|
38
38
|
"prepare": "node ../../scripts/prepare.js"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@storybook/addons": "7.0.0-alpha.
|
|
42
|
-
"@storybook/api": "7.0.0-alpha.
|
|
43
|
-
"@storybook/
|
|
44
|
-
"@storybook/
|
|
45
|
-
"@storybook/
|
|
41
|
+
"@storybook/addons": "7.0.0-alpha.10",
|
|
42
|
+
"@storybook/api": "7.0.0-alpha.10",
|
|
43
|
+
"@storybook/blocks": "7.0.0-alpha.10",
|
|
44
|
+
"@storybook/client-logger": "7.0.0-alpha.10",
|
|
45
|
+
"@storybook/components": "7.0.0-alpha.10",
|
|
46
|
+
"@storybook/core-common": "7.0.0-alpha.10",
|
|
46
47
|
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
|
47
|
-
"@storybook/node-logger": "7.0.0-alpha.
|
|
48
|
-
"@storybook/store": "7.0.0-alpha.
|
|
49
|
-
"@storybook/theming": "7.0.0-alpha.
|
|
48
|
+
"@storybook/node-logger": "7.0.0-alpha.10",
|
|
49
|
+
"@storybook/store": "7.0.0-alpha.10",
|
|
50
|
+
"@storybook/theming": "7.0.0-alpha.10",
|
|
50
51
|
"core-js": "^3.8.2",
|
|
51
52
|
"lodash": "^4.17.21",
|
|
52
53
|
"ts-dedent": "^2.0.0"
|
|
@@ -66,7 +67,7 @@
|
|
|
66
67
|
"publishConfig": {
|
|
67
68
|
"access": "public"
|
|
68
69
|
},
|
|
69
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "b13dd8fb52819d73d4983148af8ffc5d683e8b75",
|
|
70
71
|
"storybook": {
|
|
71
72
|
"displayName": "Controls",
|
|
72
73
|
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|