@ljcl/storybook-addon-cssprops
Version:
Interact with css custom properties dynamically in the Storybook UI
171 lines (170 loc) • 8.27 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CssPropsTable = void 0;
var React = require("react");
var blocks_1 = require("@storybook/blocks");
var useInjectCustomProperties_1 = require("../hooks/useInjectCustomProperties");
var useLocalStorage_1 = require("../hooks/useLocalStorage");
var constants_1 = require("../../constants");
var reduceCssPropertyItemGroupToValue = function (customProperties) {
var newParams = {};
Object.keys(customProperties).forEach(function (key) {
newParams[key] = customProperties[key].value;
});
return newParams;
};
var detectControlType = function (value) {
return CSS.supports("color", value) ? "color" : "text";
};
var formatForArgsTable = function (_a) {
var customProperties = _a.customProperties, presetColors = _a.presetColors, storyId = _a.storyId, initialCustomProperties = _a.initialCustomProperties;
return Object.keys(customProperties).reduce(function (previousValue, currentValue) {
var _a;
var customProperty = customProperties[currentValue];
var initialCustomProperty = ((_a = initialCustomProperties === null || initialCustomProperties === void 0 ? void 0 : initialCustomProperties[storyId]) === null || _a === void 0 ? void 0 : _a[currentValue]) || undefined;
var description = customProperty.description || "";
var value = customProperties[currentValue].value;
previousValue[currentValue] = {
name: "--".concat(currentValue),
description: description,
category: "",
key: currentValue,
control: {
type: customProperty.control || detectControlType(value),
value: value,
presetColors: presetColors,
},
table: {
category: customProperty.category,
subcategory: customProperty.subcategory,
type: "CSS Custom Property",
defaultValue: {
summary: initialCustomProperty,
},
},
};
return previousValue;
}, {});
};
var mergeCustomPropertiesWithStoredPropertiesAndFormatForArgsTable = function (_a) {
var customProperties = _a.customProperties, _b = _a.storageProperties, storageProperties = _b === void 0 ? {} : _b, initialCustomProperties = _a.initialCustomProperties, storyId = _a.storyId, presetColors = _a.presetColors;
var updatedCustomProperties = __assign({}, customProperties);
Object.keys(customProperties).forEach(function (key) {
if (storageProperties[key]) {
updatedCustomProperties[key].value = storageProperties[key];
}
});
return formatForArgsTable({
customProperties: updatedCustomProperties,
initialCustomProperties: initialCustomProperties,
storyId: storyId,
presetColors: presetColors,
});
};
var CssPropsTable = function (_a) {
var _b, _c;
var _d;
var _e = _a.customProperties, customProperties = _e === void 0 ? {} : _e, presetColors = _a.presetColors, _f = _a.storyId, storyId = _f === void 0 ? "unknown-story" : _f, inAddonPanel = _a.inAddonPanel;
var customPropertyValues = reduceCssPropertyItemGroupToValue(customProperties);
var _g = (0, useLocalStorage_1.useLocalStorage)({
key: constants_1.ADDON_ID,
defaultValue: {
customProperties: (_b = {}, _b[storyId] = customPropertyValues, _b),
initialCustomProperties: (_c = {}, _c[storyId] = customPropertyValues, _c),
},
}), storedProperties = _g[0], setStoredProperties = _g[1];
React.useEffect(function () {
var _a, _b, _c;
if (storedProperties && !("initialCustomProperties" in storedProperties)) {
setStoredProperties({
customProperties: (_a = {}, _a[storyId] = customPropertyValues, _a),
initialCustomProperties: (_b = {}, _b[storyId] = customPropertyValues, _b),
});
}
if (!storedProperties.initialCustomProperties[storyId]) {
setStoredProperties({
customProperties: storedProperties.customProperties,
initialCustomProperties: __assign(__assign({}, storedProperties.initialCustomProperties), (_c = {}, _c[storyId] = customPropertyValues, _c)),
});
}
}, [customPropertyValues, setStoredProperties, storedProperties, storyId]);
React.useEffect(function () {
var _a, _b;
if (!storedProperties.initialCustomProperties[storyId]) {
setStoredProperties({
customProperties: __assign(__assign({}, storedProperties.customProperties), (_a = {}, _a[storyId] = customPropertyValues, _a)),
initialCustomProperties: __assign(__assign({}, storedProperties.initialCustomProperties), (_b = {}, _b[storyId] = customPropertyValues, _b)),
});
}
}, [
customPropertyValues,
setStoredProperties,
storedProperties.customProperties,
storedProperties.initialCustomProperties,
storyId,
]);
var _h = React.useState(formatForArgsTable({
customProperties: customProperties,
presetColors: presetColors,
storyId: storyId,
initialCustomProperties: storedProperties.initialCustomProperties,
})), rows = _h[0], setRows = _h[1];
var handleUpdateStorage = function (args) {
var _a;
var newProperties = {};
Object.keys(args).forEach(function (key) {
newProperties[key] = args[key];
});
var mergedProperties = __assign(__assign({}, storedProperties.customProperties[storyId]), newProperties);
setStoredProperties(__assign(__assign({}, storedProperties), { customProperties: __assign(__assign({}, storedProperties.customProperties), (_a = {}, _a[storyId] = mergedProperties, _a)) }));
var newRows = mergeCustomPropertiesWithStoredPropertiesAndFormatForArgsTable({
customProperties: customProperties,
storageProperties: mergedProperties,
initialCustomProperties: storedProperties.initialCustomProperties,
storyId: storyId,
presetColors: presetColors,
});
setRows(newRows);
};
(0, useInjectCustomProperties_1.useInjectCustomProperties)((_d = storedProperties.customProperties) === null || _d === void 0 ? void 0 : _d[storyId]);
var handleResetProps = function () {
var _a;
setStoredProperties({
customProperties: __assign(__assign({}, storedProperties.customProperties), (_a = {}, _a[storyId] = storedProperties.initialCustomProperties[storyId], _a)),
initialCustomProperties: storedProperties.initialCustomProperties,
});
window.location.reload();
};
React.useEffect(function () {
var newRows = mergeCustomPropertiesWithStoredPropertiesAndFormatForArgsTable({
customProperties: customProperties,
storageProperties: storedProperties.customProperties[storyId],
initialCustomProperties: storedProperties.initialCustomProperties,
storyId: storyId,
presetColors: presetColors,
});
setRows(newRows);
}, [customProperties, presetColors, storedProperties, storyId]);
var _j = React.useState(storyId), stateStoryId = _j[0], setStateStoryId = _j[1];
React.useEffect(function () {
setStateStoryId(storyId);
}, [storyId]);
return (React.createElement(blocks_1.PureArgsTable, { key: stateStoryId, inAddonPanel: inAddonPanel, resetArgs: handleResetProps, rows: rows, updateArgs: function (arg) {
var _a;
var name = Object.keys(arg)[0];
var value = arg[name];
handleUpdateStorage((_a = {}, _a[name] = value, _a));
} }));
};
exports.CssPropsTable = CssPropsTable;