wix-storybook-utils
Version:
Utilities for automated component documentation within Storybook
79 lines • 3.79 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Cell } from '../../ui/Layout';
import UIInput from '../../ui/input';
import ToggleSwitch from '../../ui/toggle-switch';
import TextButton from '../../TextButton';
import Heading from '../../ui/heading';
import ComponentSource from '../../ComponentSource';
import List from './list';
import Option from './option';
import styles from './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.createElement(Cell, { span: 6 },
React.createElement("div", { className: styles.title },
React.createElement(Heading, null, "Preview"),
React.createElement("div", { className: styles.previewControls },
React.createElement("div", { className: styles.previewControl },
React.createElement(TextButton, { size: "small", onClick: onRemountComponent }, "Remount Component")),
React.createElement("div", { className: styles.previewControl },
"Imitate RTL:\u00A0",
React.createElement(ToggleSwitch, { size: "small", checked: isRtl, onChange: onToggleRtl })),
React.createElement("div", { className: styles.previewControl },
"Dark Background:\u00A0",
React.createElement(ToggleSwitch, { size: "small", checked: isDarkBackground, onChange: onToggleBackground })))),
React.createElement("div", __assign({}, __assign({ className: classnames(styles.preview, (_b = {
rtl: isRtl
},
_b[styles.darkPreview] = isDarkBackground,
_b)) }, (isRtl ? { dir: 'rtl' } : {}))), children)));
};
Preview.propTypes = {
children: PropTypes.node,
isRtl: PropTypes.bool,
isDarkBackground: PropTypes.bool,
onToggleRtl: PropTypes.func,
onToggleBackground: PropTypes.func,
onRemountComponent: PropTypes.func,
};
var Toggle = function (_a) {
var value = _a.value, onChange = _a.onChange;
return (React.createElement(ToggleSwitch, { checked: value, onChange: onChange }));
};
Toggle.propTypes = {
value: PropTypes.bool,
onChange: PropTypes.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 = __rest(_a, ["value", "onChange", "defaultValue"]);
return (React.createElement(UIInput, __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' });
var NumberInput = createInput({ type: 'number', property: 'valueAsNumber' });
Input.propTypes = NumberInput.propTypes = {
value: PropTypes.string,
defaultValue: PropTypes.string,
onChange: PropTypes.func,
};
var Code = function (_a) {
var component = _a.component;
return (React.createElement(Cell, null,
React.createElement("div", { className: styles.title },
React.createElement(Heading, null, "Code")),
React.createElement(ComponentSource, { component: component })));
};
Code.propTypes = {
component: PropTypes.node.isRequired,
};
export { Option, Preview, Toggle, Input, NumberInput, List, Code };
//# sourceMappingURL=index.js.map