wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
88 lines • 5.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Code = exports.List = exports.NumberInput = exports.Input = exports.Toggle = exports.Preview = exports.Option = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var prop_types_1 = tslib_1.__importDefault(require("prop-types"));
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var Layout_1 = require("../../ui/Layout");
var input_1 = tslib_1.__importDefault(require("../../ui/input"));
var toggle_switch_1 = tslib_1.__importDefault(require("../../ui/toggle-switch"));
var TextButton_1 = tslib_1.__importDefault(require("../../TextButton"));
var heading_1 = tslib_1.__importDefault(require("../../ui/heading"));
var ComponentSource_1 = tslib_1.__importDefault(require("../../ComponentSource"));
var list_1 = tslib_1.__importDefault(require("./list"));
exports.List = list_1.default;
var option_1 = tslib_1.__importDefault(require("./option"));
exports.Option = option_1.default;
var styles_scss_1 = tslib_1.__importDefault(require("./styles.scss"));
var Preview = function (_a) {
var _b;
var children = _a.children, isRtl = _a.isRtl, onToggleRtl = _a.onToggleRtl, isDarkBackground = _a.isDarkBackground, onToggleBackground = _a.onToggleBackground, onRemountComponent = _a.onRemountComponent;
return (react_1.default.createElement(Layout_1.Cell, { span: 6 },
react_1.default.createElement("div", { className: styles_scss_1.default.title },
react_1.default.createElement(heading_1.default, null, "Preview"),
react_1.default.createElement("div", { className: styles_scss_1.default.previewControls },
react_1.default.createElement("div", { className: styles_scss_1.default.previewControl },
react_1.default.createElement(TextButton_1.default, { size: "small", onClick: onRemountComponent }, "Remount Component")),
react_1.default.createElement("div", { className: styles_scss_1.default.previewControl },
"Imitate RTL:\u00A0",
react_1.default.createElement(toggle_switch_1.default, { size: "small", checked: isRtl, onChange: onToggleRtl })),
react_1.default.createElement("div", { className: styles_scss_1.default.previewControl },
"Dark Background:\u00A0",
react_1.default.createElement(toggle_switch_1.default, { size: "small", checked: isDarkBackground, onChange: onToggleBackground })))),
react_1.default.createElement("div", tslib_1.__assign({}, tslib_1.__assign({ className: (0, classnames_1.default)(styles_scss_1.default.preview, (_b = {
rtl: isRtl
},
_b[styles_scss_1.default.darkPreview] = isDarkBackground,
_b)) }, (isRtl ? { dir: 'rtl' } : {}))), children)));
};
exports.Preview = Preview;
Preview.propTypes = {
children: prop_types_1.default.node,
isRtl: prop_types_1.default.bool,
isDarkBackground: prop_types_1.default.bool,
onToggleRtl: prop_types_1.default.func,
onToggleBackground: prop_types_1.default.func,
onRemountComponent: prop_types_1.default.func,
};
var Toggle = function (_a) {
var value = _a.value, onChange = _a.onChange;
return (react_1.default.createElement(toggle_switch_1.default, { checked: value, onChange: onChange }));
};
exports.Toggle = Toggle;
Toggle.propTypes = {
value: prop_types_1.default.bool,
onChange: prop_types_1.default.func,
};
var createInput = function (_a) {
var _b = _a.type, type = _b === void 0 ? 'string' : _b, property = _a.property;
return function (_a) {
var inputValue = _a.value, onChange = _a.onChange, defaultValue = _a.defaultValue, props = tslib_1.__rest(_a, ["value", "onChange", "defaultValue"]);
return (react_1.default.createElement(input_1.default, tslib_1.__assign({ value: inputValue, onChange: function (_a) {
var target = _a.target;
return onChange(target[property]);
}, placeholder: defaultValue, type: type }, props)));
};
};
var Input = createInput({ type: 'string', property: 'value' });
exports.Input = Input;
var NumberInput = createInput({ type: 'number', property: 'valueAsNumber' });
exports.NumberInput = NumberInput;
Input.propTypes = NumberInput.propTypes = {
value: prop_types_1.default.string,
defaultValue: prop_types_1.default.string,
onChange: prop_types_1.default.func,
};
var Code = function (_a) {
var component = _a.component;
return (react_1.default.createElement(Layout_1.Cell, null,
react_1.default.createElement("div", { className: styles_scss_1.default.title },
react_1.default.createElement(heading_1.default, null, "Code")),
react_1.default.createElement(ComponentSource_1.default, { component: component })));
};
exports.Code = Code;
Code.propTypes = {
component: prop_types_1.default.node.isRequired,
};
//# sourceMappingURL=index.js.map