@storybook/addon-backgrounds 7.0.0-alpha.10 → 7.0.0-alpha.13
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/containers/BackgroundSelector.js +3 -1
- package/dist/cjs/containers/GridSelector.js +4 -2
- package/dist/cjs/decorators/withBackground.js +3 -1
- package/dist/cjs/decorators/withGrid.js +6 -4
- package/dist/cjs/helpers/index.js +2 -2
- package/dist/esm/decorators/withGrid.js +1 -1
- package/dist/esm/helpers/index.js +1 -1
- package/package.json +12 -8
|
@@ -60,9 +60,11 @@ const DEFAULT_BACKGROUNDS_CONFIG = {
|
|
|
60
60
|
values: []
|
|
61
61
|
};
|
|
62
62
|
const BackgroundSelector = /*#__PURE__*/(0, _react.memo)(() => {
|
|
63
|
+
var _globals$BACKGROUNDS_;
|
|
64
|
+
|
|
63
65
|
const backgroundsConfig = (0, _api.useParameter)(_constants.PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
|
|
64
66
|
const [globals, updateGlobals] = (0, _api.useGlobals)();
|
|
65
|
-
const globalsBackgroundColor = globals[_constants.PARAM_KEY]
|
|
67
|
+
const globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
|
|
66
68
|
const selectedBackgroundColor = (0, _react.useMemo)(() => {
|
|
67
69
|
return (0, _helpers.getBackgroundColorByName)(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
|
|
68
70
|
}, [backgroundsConfig, globalsBackgroundColor]);
|
|
@@ -18,6 +18,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
|
|
19
19
|
|
|
20
20
|
const GridSelector = /*#__PURE__*/(0, _react.memo)(() => {
|
|
21
|
+
var _globals$BACKGROUNDS_;
|
|
22
|
+
|
|
21
23
|
const [globals, updateGlobals] = (0, _api.useGlobals)();
|
|
22
24
|
const {
|
|
23
25
|
grid
|
|
@@ -27,11 +29,11 @@ const GridSelector = /*#__PURE__*/(0, _react.memo)(() => {
|
|
|
27
29
|
}
|
|
28
30
|
});
|
|
29
31
|
|
|
30
|
-
if (grid
|
|
32
|
+
if (grid !== null && grid !== void 0 && grid.disable) {
|
|
31
33
|
return null;
|
|
32
34
|
}
|
|
33
35
|
|
|
34
|
-
const isActive = globals[_constants.PARAM_KEY]
|
|
36
|
+
const isActive = ((_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) || false;
|
|
35
37
|
return /*#__PURE__*/_react.default.createElement(_components.IconButton, {
|
|
36
38
|
key: "background",
|
|
37
39
|
active: isActive,
|
|
@@ -12,11 +12,13 @@ var _constants = require("../constants");
|
|
|
12
12
|
var _helpers = require("../helpers");
|
|
13
13
|
|
|
14
14
|
const withBackground = (StoryFn, context) => {
|
|
15
|
+
var _globals$BACKGROUNDS_;
|
|
16
|
+
|
|
15
17
|
const {
|
|
16
18
|
globals,
|
|
17
19
|
parameters
|
|
18
20
|
} = context;
|
|
19
|
-
const globalsBackgroundColor = globals[_constants.PARAM_KEY]
|
|
21
|
+
const globalsBackgroundColor = (_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.value;
|
|
20
22
|
const backgroundsConfig = parameters[_constants.PARAM_KEY];
|
|
21
23
|
const selectedBackgroundColor = (0, _addons.useMemo)(() => {
|
|
22
24
|
if (backgroundsConfig.disable) {
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.withGrid = void 0;
|
|
7
7
|
|
|
8
|
-
var _tsDedent =
|
|
8
|
+
var _tsDedent = require("ts-dedent");
|
|
9
9
|
|
|
10
10
|
var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
|
|
11
11
|
|
|
@@ -17,7 +17,7 @@ var _constants = require("../constants");
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const deprecatedCellSizeWarning = (0, _utilDeprecate.default)(() => {}, (0, _tsDedent.
|
|
20
|
+
const deprecatedCellSizeWarning = (0, _utilDeprecate.default)(() => {}, (0, _tsDedent.dedent)`
|
|
21
21
|
Backgrounds Addon: The cell size parameter has been changed.
|
|
22
22
|
|
|
23
23
|
- parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
|
|
@@ -25,12 +25,14 @@ const deprecatedCellSizeWarning = (0, _utilDeprecate.default)(() => {}, (0, _tsD
|
|
|
25
25
|
`);
|
|
26
26
|
|
|
27
27
|
const withGrid = (StoryFn, context) => {
|
|
28
|
+
var _globals$BACKGROUNDS_, _parameters$grid;
|
|
29
|
+
|
|
28
30
|
const {
|
|
29
31
|
globals,
|
|
30
32
|
parameters
|
|
31
33
|
} = context;
|
|
32
34
|
const gridParameters = parameters[_constants.PARAM_KEY].grid;
|
|
33
|
-
const isActive = globals[_constants.PARAM_KEY]
|
|
35
|
+
const isActive = ((_globals$BACKGROUNDS_ = globals[_constants.PARAM_KEY]) === null || _globals$BACKGROUNDS_ === void 0 ? void 0 : _globals$BACKGROUNDS_.grid) === true && gridParameters.disable !== true;
|
|
34
36
|
const {
|
|
35
37
|
cellAmount,
|
|
36
38
|
cellSize,
|
|
@@ -39,7 +41,7 @@ const withGrid = (StoryFn, context) => {
|
|
|
39
41
|
const isInDocs = context.viewMode === 'docs';
|
|
40
42
|
let gridSize;
|
|
41
43
|
|
|
42
|
-
if (parameters.grid
|
|
44
|
+
if ((_parameters$grid = parameters.grid) !== null && _parameters$grid !== void 0 && _parameters$grid.cellSize) {
|
|
43
45
|
gridSize = parameters.grid.cellSize;
|
|
44
46
|
deprecatedCellSizeWarning();
|
|
45
47
|
} else {
|
|
@@ -7,7 +7,7 @@ exports.isReduceMotionEnabled = exports.getBackgroundColorByName = exports.clear
|
|
|
7
7
|
|
|
8
8
|
var _global = _interopRequireDefault(require("global"));
|
|
9
9
|
|
|
10
|
-
var _tsDedent =
|
|
10
|
+
var _tsDedent = require("ts-dedent");
|
|
11
11
|
|
|
12
12
|
var _clientLogger = require("@storybook/client-logger");
|
|
13
13
|
|
|
@@ -43,7 +43,7 @@ const getBackgroundColorByName = (currentSelectedValue, backgrounds = [], defaul
|
|
|
43
43
|
if (defaultName) {
|
|
44
44
|
const availableColors = backgrounds.map(background => background.name).join(', ');
|
|
45
45
|
|
|
46
|
-
_clientLogger.logger.warn((0, _tsDedent.
|
|
46
|
+
_clientLogger.logger.warn((0, _tsDedent.dedent)`
|
|
47
47
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
48
48
|
These are the available colors for your story based on your configuration:
|
|
49
49
|
${availableColors}.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.13",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -35,22 +35,26 @@
|
|
|
35
35
|
"*.d.ts"
|
|
36
36
|
],
|
|
37
37
|
"scripts": {
|
|
38
|
+
"check": "tsc --noEmit",
|
|
38
39
|
"prepare": "node ../../scripts/prepare.js"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|
|
41
|
-
"@storybook/addons": "7.0.0-alpha.
|
|
42
|
-
"@storybook/api": "7.0.0-alpha.
|
|
43
|
-
"@storybook/client-logger": "7.0.0-alpha.
|
|
44
|
-
"@storybook/components": "7.0.0-alpha.
|
|
45
|
-
"@storybook/core-events": "7.0.0-alpha.
|
|
42
|
+
"@storybook/addons": "7.0.0-alpha.13",
|
|
43
|
+
"@storybook/api": "7.0.0-alpha.13",
|
|
44
|
+
"@storybook/client-logger": "7.0.0-alpha.13",
|
|
45
|
+
"@storybook/components": "7.0.0-alpha.13",
|
|
46
|
+
"@storybook/core-events": "7.0.0-alpha.13",
|
|
46
47
|
"@storybook/csf": "0.0.2--canary.4566f4d.1",
|
|
47
|
-
"@storybook/theming": "7.0.0-alpha.
|
|
48
|
+
"@storybook/theming": "7.0.0-alpha.13",
|
|
48
49
|
"core-js": "^3.8.2",
|
|
49
50
|
"global": "^4.4.0",
|
|
50
51
|
"memoizerific": "^1.11.3",
|
|
51
52
|
"ts-dedent": "^2.0.0",
|
|
52
53
|
"util-deprecate": "^1.0.2"
|
|
53
54
|
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"typescript": "~4.6.3"
|
|
57
|
+
},
|
|
54
58
|
"peerDependencies": {
|
|
55
59
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
56
60
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
@@ -66,7 +70,7 @@
|
|
|
66
70
|
"publishConfig": {
|
|
67
71
|
"access": "public"
|
|
68
72
|
},
|
|
69
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "9ac4d2e0a05eb945713a0e6689abc3b12359e181",
|
|
70
74
|
"storybook": {
|
|
71
75
|
"displayName": "Backgrounds",
|
|
72
76
|
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|