@storybook/addon-controls 6.5.9 → 7.0.0-alpha.2
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 +23 -81
- 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 +24 -70
- package/dist/esm/constants.js +2 -2
- package/dist/esm/manager.js +11 -15
- package/dist/esm/preset/checkDocsLoaded.js +2 -5
- package/dist/{ts3.9 → types}/ControlsPanel.d.ts +0 -0
- package/dist/{ts3.9 → types}/constants.d.ts +0 -0
- package/dist/{ts3.9 → types}/index.d.ts +0 -0
- package/dist/{ts3.9 → types}/manager.d.ts +0 -0
- package/dist/{ts3.9 → types}/preset/checkDocsLoaded.d.ts +0 -0
- package/package.json +11 -19
- package/dist/modern/ControlsPanel.js +0 -44
- package/dist/modern/constants.js +0 -2
- package/dist/modern/index.js +0 -1
- package/dist/modern/manager.js +0 -32
- package/dist/modern/preset/checkDocsLoaded.js +0 -16
- package/dist/ts3.4/ControlsPanel.d.ts +0 -2
- package/dist/ts3.4/constants.d.ts +0 -2
- package/dist/ts3.4/index.d.ts +0 -1
- package/dist/ts3.4/manager.d.ts +0 -1
- package/dist/ts3.4/preset/checkDocsLoaded.d.ts +0 -1
|
@@ -1,40 +1,10 @@
|
|
|
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");
|
|
@@ -45,56 +15,28 @@ 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
|
-
resetArgs = _useArgs2[2];
|
|
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) {
|
|
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 === null || arg === void 0 ? void 0 : arg.control);
|
|
33
|
+
const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
|
34
|
+
const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
|
|
89
35
|
var _arg$control, _arg$control2;
|
|
90
36
|
|
|
91
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
92
|
-
key = _ref2[0],
|
|
93
|
-
arg = _ref2[1];
|
|
94
|
-
|
|
95
37
|
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, {
|
|
96
38
|
control: Object.assign({}, arg.control, {
|
|
97
|
-
presetColors
|
|
39
|
+
presetColors
|
|
98
40
|
})
|
|
99
41
|
});
|
|
100
42
|
return acc;
|
|
@@ -104,12 +46,12 @@ var ControlsPanel = function ControlsPanel() {
|
|
|
104
46
|
// resets state when switching stories
|
|
105
47
|
compact: !expanded && hasControls,
|
|
106
48
|
rows: withPresetColors,
|
|
107
|
-
args
|
|
108
|
-
globals
|
|
109
|
-
updateArgs
|
|
110
|
-
resetArgs
|
|
49
|
+
args,
|
|
50
|
+
globals,
|
|
51
|
+
updateArgs,
|
|
52
|
+
resetArgs,
|
|
111
53
|
inAddonPanel: true,
|
|
112
|
-
sort
|
|
54
|
+
sort
|
|
113
55
|
}));
|
|
114
56
|
};
|
|
115
57
|
|
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 === null || argType === void 0 ? void 0 : 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,73 +1,27 @@
|
|
|
1
|
-
import "core-js/modules/es.array.sort.js";
|
|
2
|
-
import "core-js/modules/es.object.to-string.js";
|
|
3
|
-
import "core-js/modules/es.object.values.js";
|
|
4
|
-
import "core-js/modules/es.object.entries.js";
|
|
5
|
-
import "core-js/modules/es.object.assign.js";
|
|
6
|
-
import "core-js/modules/es.symbol.js";
|
|
7
|
-
import "core-js/modules/es.symbol.description.js";
|
|
8
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
9
|
-
import "core-js/modules/es.array.iterator.js";
|
|
10
|
-
import "core-js/modules/es.string.iterator.js";
|
|
11
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
12
|
-
import "core-js/modules/es.array.slice.js";
|
|
13
|
-
import "core-js/modules/es.function.name.js";
|
|
14
|
-
import "core-js/modules/es.array.from.js";
|
|
15
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
16
|
-
|
|
17
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
18
|
-
|
|
19
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
20
|
-
|
|
21
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
22
|
-
|
|
23
|
-
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; }
|
|
24
|
-
|
|
25
|
-
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; }
|
|
26
|
-
|
|
27
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
28
|
-
|
|
29
1
|
import React from 'react';
|
|
30
2
|
import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
|
|
31
3
|
import { ArgsTable, NoControlsWarning } from '@storybook/components';
|
|
32
4
|
import { PARAM_KEY } from './constants';
|
|
33
|
-
export
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
_useParameter$hideNoC = _useParameter.hideNoControlsWarning,
|
|
52
|
-
hideNoControlsWarning = _useParameter$hideNoC === void 0 ? false : _useParameter$hideNoC;
|
|
53
|
-
|
|
54
|
-
var _useStorybookState = useStorybookState(),
|
|
55
|
-
path = _useStorybookState.path;
|
|
56
|
-
|
|
57
|
-
var hasControls = Object.values(rows).some(function (arg) {
|
|
58
|
-
return arg === null || arg === void 0 ? void 0 : arg.control;
|
|
59
|
-
});
|
|
60
|
-
var showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
|
61
|
-
var withPresetColors = Object.entries(rows).reduce(function (acc, _ref) {
|
|
62
|
-
var _arg$control, _arg$control2;
|
|
63
|
-
|
|
64
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
65
|
-
key = _ref2[0],
|
|
66
|
-
arg = _ref2[1];
|
|
67
|
-
|
|
68
|
-
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, {
|
|
5
|
+
export const ControlsPanel = () => {
|
|
6
|
+
const [args, updateArgs, resetArgs] = useArgs();
|
|
7
|
+
const [globals] = useGlobals();
|
|
8
|
+
const rows = useArgTypes();
|
|
9
|
+
const isArgsStory = useParameter('__isArgsStory', false);
|
|
10
|
+
const {
|
|
11
|
+
expanded,
|
|
12
|
+
sort,
|
|
13
|
+
presetColors,
|
|
14
|
+
hideNoControlsWarning = false
|
|
15
|
+
} = useParameter(PARAM_KEY, {});
|
|
16
|
+
const {
|
|
17
|
+
path
|
|
18
|
+
} = useStorybookState();
|
|
19
|
+
const hasControls = Object.values(rows).some(arg => arg?.control);
|
|
20
|
+
const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
|
21
|
+
const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
|
|
22
|
+
if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;else acc[key] = Object.assign({}, arg, {
|
|
69
23
|
control: Object.assign({}, arg.control, {
|
|
70
|
-
presetColors
|
|
24
|
+
presetColors
|
|
71
25
|
})
|
|
72
26
|
});
|
|
73
27
|
return acc;
|
|
@@ -77,11 +31,11 @@ export var ControlsPanel = function ControlsPanel() {
|
|
|
77
31
|
// resets state when switching stories
|
|
78
32
|
compact: !expanded && hasControls,
|
|
79
33
|
rows: withPresetColors,
|
|
80
|
-
args
|
|
81
|
-
globals
|
|
82
|
-
updateArgs
|
|
83
|
-
resetArgs
|
|
34
|
+
args,
|
|
35
|
+
globals,
|
|
36
|
+
updateArgs,
|
|
37
|
+
resetArgs,
|
|
84
38
|
inAddonPanel: true,
|
|
85
|
-
sort
|
|
39
|
+
sort
|
|
86
40
|
}));
|
|
87
41
|
};
|
package/dist/esm/constants.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export const ADDON_ID = 'addon-controls';
|
|
2
|
+
export const PARAM_KEY = 'controls';
|
package/dist/esm/manager.js
CHANGED
|
@@ -1,28 +1,24 @@
|
|
|
1
|
-
import "core-js/modules/es.array.filter.js";
|
|
2
|
-
import "core-js/modules/es.object.to-string.js";
|
|
3
|
-
import "core-js/modules/es.object.values.js";
|
|
4
1
|
import React from 'react';
|
|
5
2
|
import { addons, types } from '@storybook/addons';
|
|
6
3
|
import { AddonPanel } from '@storybook/components';
|
|
7
4
|
import { useArgTypes } from '@storybook/api';
|
|
8
5
|
import { ControlsPanel } from './ControlsPanel';
|
|
9
6
|
import { ADDON_ID, PARAM_KEY } from './constants';
|
|
10
|
-
addons.register(ADDON_ID,
|
|
7
|
+
addons.register(ADDON_ID, api => {
|
|
11
8
|
addons.addPanel(ADDON_ID, {
|
|
12
|
-
title
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
var suffix = controlsCount === 0 ? '' : " (".concat(controlsCount, ")");
|
|
18
|
-
return "Controls".concat(suffix);
|
|
9
|
+
title() {
|
|
10
|
+
const rows = useArgTypes();
|
|
11
|
+
const controlsCount = Object.values(rows).filter(argType => argType?.control).length;
|
|
12
|
+
const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
|
|
13
|
+
return `Controls${suffix}`;
|
|
19
14
|
},
|
|
15
|
+
|
|
20
16
|
type: types.PANEL,
|
|
21
17
|
paramKey: PARAM_KEY,
|
|
22
|
-
render:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
render: ({
|
|
19
|
+
key,
|
|
20
|
+
active
|
|
21
|
+
}) => {
|
|
26
22
|
if (!active || !api.getCurrentStoryData()) {
|
|
27
23
|
return null;
|
|
28
24
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import "core-js/modules/es.array.join.js";
|
|
2
1
|
import { checkAddonOrder, serverRequire } from '@storybook/core-common';
|
|
3
2
|
import path from 'path';
|
|
4
|
-
export
|
|
3
|
+
export const checkDocsLoaded = configDir => {
|
|
5
4
|
checkAddonOrder({
|
|
6
5
|
before: {
|
|
7
6
|
name: '@storybook/addon-docs',
|
|
@@ -12,8 +11,6 @@ export var checkDocsLoaded = function checkDocsLoaded(configDir) {
|
|
|
12
11
|
inEssentials: true
|
|
13
12
|
},
|
|
14
13
|
configFile: path.isAbsolute(configDir) ? path.join(configDir, 'main') : path.join(process.cwd(), configDir, 'main'),
|
|
15
|
-
getConfig:
|
|
16
|
-
return serverRequire(configFile);
|
|
17
|
-
}
|
|
14
|
+
getConfig: configFile => serverRequire(configFile)
|
|
18
15
|
});
|
|
19
16
|
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-controls",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.0-alpha.2",
|
|
4
4
|
"description": "Interact with component inputs dynamically in the Storybook UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -27,14 +27,7 @@
|
|
|
27
27
|
"license": "MIT",
|
|
28
28
|
"main": "dist/cjs/manager.js",
|
|
29
29
|
"module": "dist/esm/manager.js",
|
|
30
|
-
"types": "dist/
|
|
31
|
-
"typesVersions": {
|
|
32
|
-
"<3.8": {
|
|
33
|
-
"dist/ts3.9/*": [
|
|
34
|
-
"dist/ts3.4/*"
|
|
35
|
-
]
|
|
36
|
-
}
|
|
37
|
-
},
|
|
30
|
+
"types": "dist/types/index.d.ts",
|
|
38
31
|
"files": [
|
|
39
32
|
"dist/**/*",
|
|
40
33
|
"README.md",
|
|
@@ -45,15 +38,15 @@
|
|
|
45
38
|
"prepare": "node ../../scripts/prepare.js"
|
|
46
39
|
},
|
|
47
40
|
"dependencies": {
|
|
48
|
-
"@storybook/addons": "
|
|
49
|
-
"@storybook/api": "
|
|
50
|
-
"@storybook/client-logger": "
|
|
51
|
-
"@storybook/components": "
|
|
52
|
-
"@storybook/core-common": "
|
|
41
|
+
"@storybook/addons": "7.0.0-alpha.2",
|
|
42
|
+
"@storybook/api": "7.0.0-alpha.2",
|
|
43
|
+
"@storybook/client-logger": "7.0.0-alpha.2",
|
|
44
|
+
"@storybook/components": "7.0.0-alpha.2",
|
|
45
|
+
"@storybook/core-common": "7.0.0-alpha.2",
|
|
53
46
|
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
|
54
|
-
"@storybook/node-logger": "
|
|
55
|
-
"@storybook/store": "
|
|
56
|
-
"@storybook/theming": "
|
|
47
|
+
"@storybook/node-logger": "7.0.0-alpha.2",
|
|
48
|
+
"@storybook/store": "7.0.0-alpha.2",
|
|
49
|
+
"@storybook/theming": "7.0.0-alpha.2",
|
|
57
50
|
"core-js": "^3.8.2",
|
|
58
51
|
"lodash": "^4.17.21",
|
|
59
52
|
"ts-dedent": "^2.0.0"
|
|
@@ -73,8 +66,7 @@
|
|
|
73
66
|
"publishConfig": {
|
|
74
67
|
"access": "public"
|
|
75
68
|
},
|
|
76
|
-
"gitHead": "
|
|
77
|
-
"sbmodern": "dist/modern/manager.js",
|
|
69
|
+
"gitHead": "44920e2b6bd51981bac5124743c29fb9f5517e44",
|
|
78
70
|
"storybook": {
|
|
79
71
|
"displayName": "Controls",
|
|
80
72
|
"icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import "core-js/modules/es.array.reduce.js";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
|
|
4
|
-
import { ArgsTable, NoControlsWarning } from '@storybook/components';
|
|
5
|
-
import { PARAM_KEY } from './constants';
|
|
6
|
-
export const ControlsPanel = () => {
|
|
7
|
-
const [args, updateArgs, resetArgs] = useArgs();
|
|
8
|
-
const [globals] = useGlobals();
|
|
9
|
-
const rows = useArgTypes();
|
|
10
|
-
const isArgsStory = useParameter('__isArgsStory', false);
|
|
11
|
-
const {
|
|
12
|
-
expanded,
|
|
13
|
-
sort,
|
|
14
|
-
presetColors,
|
|
15
|
-
hideNoControlsWarning = false
|
|
16
|
-
} = useParameter(PARAM_KEY, {});
|
|
17
|
-
const {
|
|
18
|
-
path
|
|
19
|
-
} = useStorybookState();
|
|
20
|
-
const hasControls = Object.values(rows).some(arg => arg === null || arg === void 0 ? void 0 : arg.control);
|
|
21
|
-
const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
|
|
22
|
-
const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => {
|
|
23
|
-
var _arg$control, _arg$control2;
|
|
24
|
-
|
|
25
|
-
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, {
|
|
26
|
-
control: Object.assign({}, arg.control, {
|
|
27
|
-
presetColors
|
|
28
|
-
})
|
|
29
|
-
});
|
|
30
|
-
return acc;
|
|
31
|
-
}, {});
|
|
32
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, showWarning && /*#__PURE__*/React.createElement(NoControlsWarning, null), /*#__PURE__*/React.createElement(ArgsTable, {
|
|
33
|
-
key: path,
|
|
34
|
-
// resets state when switching stories
|
|
35
|
-
compact: !expanded && hasControls,
|
|
36
|
-
rows: withPresetColors,
|
|
37
|
-
args,
|
|
38
|
-
globals,
|
|
39
|
-
updateArgs,
|
|
40
|
-
resetArgs,
|
|
41
|
-
inAddonPanel: true,
|
|
42
|
-
sort
|
|
43
|
-
}));
|
|
44
|
-
};
|
package/dist/modern/constants.js
DELETED
package/dist/modern/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { PARAM_KEY } from './constants';
|
package/dist/modern/manager.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { addons, types } from '@storybook/addons';
|
|
3
|
-
import { AddonPanel } from '@storybook/components';
|
|
4
|
-
import { useArgTypes } from '@storybook/api';
|
|
5
|
-
import { ControlsPanel } from './ControlsPanel';
|
|
6
|
-
import { ADDON_ID, PARAM_KEY } from './constants';
|
|
7
|
-
addons.register(ADDON_ID, api => {
|
|
8
|
-
addons.addPanel(ADDON_ID, {
|
|
9
|
-
title() {
|
|
10
|
-
const rows = useArgTypes();
|
|
11
|
-
const controlsCount = Object.values(rows).filter(argType => argType === null || argType === void 0 ? void 0 : argType.control).length;
|
|
12
|
-
const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
|
|
13
|
-
return `Controls${suffix}`;
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
type: types.PANEL,
|
|
17
|
-
paramKey: PARAM_KEY,
|
|
18
|
-
render: ({
|
|
19
|
-
key,
|
|
20
|
-
active
|
|
21
|
-
}) => {
|
|
22
|
-
if (!active || !api.getCurrentStoryData()) {
|
|
23
|
-
return null;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
return /*#__PURE__*/React.createElement(AddonPanel, {
|
|
27
|
-
key: key,
|
|
28
|
-
active: active
|
|
29
|
-
}, /*#__PURE__*/React.createElement(ControlsPanel, null));
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
});
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { checkAddonOrder, serverRequire } from '@storybook/core-common';
|
|
2
|
-
import path from 'path';
|
|
3
|
-
export const checkDocsLoaded = configDir => {
|
|
4
|
-
checkAddonOrder({
|
|
5
|
-
before: {
|
|
6
|
-
name: '@storybook/addon-docs',
|
|
7
|
-
inEssentials: true
|
|
8
|
-
},
|
|
9
|
-
after: {
|
|
10
|
-
name: '@storybook/addon-controls',
|
|
11
|
-
inEssentials: true
|
|
12
|
-
},
|
|
13
|
-
configFile: path.isAbsolute(configDir) ? path.join(configDir, 'main') : path.join(process.cwd(), configDir, 'main'),
|
|
14
|
-
getConfig: configFile => serverRequire(configFile)
|
|
15
|
-
});
|
|
16
|
-
};
|
package/dist/ts3.4/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { PARAM_KEY } from './constants';
|
package/dist/ts3.4/manager.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const checkDocsLoaded: (configDir: string) => void;
|