@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/Radio/README.md

@@ -0,0 +1,17 @@
+# Group
+
+### Design
+
+<a href="https://material.io/design/components/selection-controls.html#radio-buttons" target="_blank">https://material.io/design/components/selection-controls.html#radio-buttons</a>
+
+### Description
+
+Wrap `Radio` components with `RadioGroup` to create a set of options.
+Each `Radio` component must receive `value` and `onChange` callback via props.
+
+### Import
+To use, import base `Radio` component.
+
+```js
+import { Radio, RadioGroup } from "@webiny/ui/Radio";
+```

package/Radio/Radio.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="web" />
+import React from "react";
+import { FormComponentProps } from "../types";
+declare type Props = FormComponentProps & {
+    label?: React.ReactNode;
+    disabled?: boolean;
+    description?: string;
+};
+/**
+ * Wrap Radio components with RadioGroup to create a set of options.
+ * Each Radio component must receive value and onChange callback via props.
+ */
+declare class Radio extends React.Component<Props> {
+    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    render(): JSX.Element;
+}
+export default Radio;

package/Radio/Radio.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _radio = require("@rmwc/radio");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+/**
+ * Wrap Radio components with RadioGroup to create a set of options.
+ * Each Radio component must receive value and onChange callback via props.
+ */
+var Radio = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Radio, _React$Component);
+
+  var _super = (0, _createSuper2.default)(Radio);
+
+  function Radio() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Radio);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
+      _this.props.onChange && _this.props.onChange(e.target.checked);
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(Radio, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          label = _this$props.label,
+          disabled = _this$props.disabled,
+          description = _this$props.description,
+          validation = _this$props.validation;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_radio.Radio, {
+        disabled: disabled,
+        checked: Boolean(value),
+        onChange: this.onChange // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
+        ,
+        label: label
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+        error: true
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    }
+  }]);
+  return Radio;
+}(_react.default.Component);
+
+var _default = Radio;
+exports.default = _default;

package/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Radio","e","props","onChange","target","checked","value","label","disabled","description","validation","validationIsValid","isValid","validationMessage","message","Boolean","React","Component"],"sources":["Radio.tsx"],"sourcesContent":["import React from \"react\";\nimport { Radio as RmwcRadio } from \"@rmwc/radio\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ntype Props = FormComponentProps & {\n    // Component label.\n    label?: React.ReactNode;\n\n    // Is radio disabled?\n    disabled?: boolean;\n\n    // Description beneath the radio.\n    description?: string;\n};\n\n/**\n * Wrap Radio components with RadioGroup to create a set of options.\n * Each Radio component must receive value and onChange callback via props.\n */\nclass Radio extends React.Component<Props> {\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        this.props.onChange && this.props.onChange((e.target as any).checked);\n    };\n\n    public override render() {\n        const { value, label, disabled, description, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                <RmwcRadio\n                    disabled={disabled}\n                    checked={Boolean(value)}\n                    onChange={this.onChange}\n                    // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.\n                    label={label}\n                />\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AAaA;AACA;AACA;AACA;IACMA,K;;;;;;;;;;;;;;;2FACS,UAACC,CAAD,EAA+C;MACtD,MAAKC,KAAL,CAAWC,QAAX,IAAuB,MAAKD,KAAL,CAAWC,QAAX,CAAqBF,CAAC,CAACG,MAAH,CAAkBC,OAAtC,CAAvB;IACH,C;;;;;;WAED,kBAAyB;MACrB,kBAA4D,KAAKH,KAAjE;MAAA,IAAQI,KAAR,eAAQA,KAAR;MAAA,IAAeC,KAAf,eAAeA,KAAf;MAAA,IAAsBC,QAAtB,eAAsBA,QAAtB;MAAA,IAAgCC,WAAhC,eAAgCA,WAAhC;MAAA,IAA6CC,UAA7C,eAA6CA,UAA7C;;MAEA,WAAmEA,UAAU,IAAI,EAAjF;MAAA,IAAiBC,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,YAAD;QACI,QAAQ,EAAEN,QADd;QAEI,OAAO,EAAEO,OAAO,CAACT,KAAD,CAFpB;QAGI,QAAQ,EAAE,KAAKH,QAHnB,CAII;QAJJ;QAKI,KAAK,EAAEI;MALX,EADJ,EAQKI,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CATR,EAYKF,iBAAiB,KAAK,KAAtB,IAA+BF,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAbR,CADJ;IAkBH;;;EA5BeO,cAAA,CAAMC,S;;eA+BXjB,K"}

package/Radio/Radio.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+declare const webinyRadioTitle: string;
+export { webinyRadioTitle };

package/Radio/Radio.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.webinyRadioTitle = void 0;
+
+var _emotion = require("emotion");
+
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+var webinyRadioTitle = /*#__PURE__*/(0, _emotion.css)({}, {
+  "&.mdc-text-field-helper-text": {
+    paddingLeft: 10,
+    //textTransform: "uppercase",
+    //fontWeight: "bold",
+    marginBottom: "5px"
+  }
+}, "label:webinyRadioTitle;");
+exports.webinyRadioTitle = webinyRadioTitle;

package/Radio/Radio.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["webinyRadioTitle","css","paddingLeft","marginBottom"],"sources":["Radio.styles.ts"],"sourcesContent":["import { css } from \"emotion\";\n\n/**\n * Controls the helper text below the checkbox.\n * @type {string}\n */\nconst webinyRadioTitle = css(\n    {},\n    {\n        \"&.mdc-text-field-helper-text\": {\n            paddingLeft: 10,\n            //textTransform: \"uppercase\",\n            //fontWeight: \"bold\",\n            marginBottom: \"5px\"\n        }\n    }\n);\n\nexport { webinyRadioTitle };\n"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA,IAAMA,gBAAgB,gBAAG,IAAAC,YAAA,EACrB,EADqB,EAErB;EACI,gCAAgC;IAC5BC,WAAW,EAAE,EADe;IAE5B;IACA;IACAC,YAAY,EAAE;EAJc;AADpC,CAFqB,4BAAzB"}

package/Radio/RadioGroup.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FormComponentProps } from "../types";
+interface RadioGroupRenderParams {
+    onChange: (id: string | number) => () => void;
+    getValue: (id: string | number) => boolean;
+}
+declare type Props = FormComponentProps & {
+    label?: string;
+    description?: string;
+    children: (props: RadioGroupRenderParams) => React.ReactNode;
+};
+declare class RadioGroup extends React.Component<Props> {
+    render(): JSX.Element;
+}
+export default RadioGroup;

package/Radio/RadioGroup.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Radio = require("./Radio.styles");
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var RadioGroup = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(RadioGroup, _React$Component);
+
+  var _super = (0, _createSuper2.default)(RadioGroup);
+
+  function RadioGroup() {
+    (0, _classCallCheck2.default)(this, RadioGroup);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(RadioGroup, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          description = _this$props.description,
+          label = _this$props.label,
+          validation = _this$props.validation;
+
+      var _ref = validation || {},
+          validationIsValid = _ref.isValid,
+          validationMessage = _ref.message;
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label && /*#__PURE__*/_react.default.createElement("div", {
+        className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " + _Radio.webinyRadioTitle
+      }, label), this.props.children({
+        onChange: function onChange(value) {
+          return function () {
+            return _this.props.onChange && _this.props.onChange(value);
+          };
+        },
+        getValue: function getValue(id) {
+          return _this.props.value === id;
+        }
+      }), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+        error: true
+      }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    }
+  }]);
+  return RadioGroup;
+}(_react.default.Component);
+
+var _default = RadioGroup;
+exports.default = _default;

package/Radio/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RadioGroup","props","description","label","validation","validationIsValid","isValid","validationMessage","message","webinyRadioTitle","children","onChange","value","getValue","id","React","Component"],"sources":["RadioGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { webinyRadioTitle } from \"./Radio.styles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface RadioGroupRenderParams {\n    onChange: (id: string | number) => () => void;\n    getValue: (id: string | number) => boolean;\n}\n\ntype Props = FormComponentProps & {\n    // Form element's label.\n    label?: string;\n\n    // Form element's description.\n    description?: string;\n\n    // An array of Radio components.\n    children: (props: RadioGroupRenderParams) => React.ReactNode;\n};\n\nclass RadioGroup extends React.Component<Props> {\n    public override render() {\n        const { description, label, validation } = this.props;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <React.Fragment>\n                {label && (\n                    <div\n                        className={\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent \" +\n                            webinyRadioTitle\n                        }\n                    >\n                        {label}\n                    </div>\n                )}\n\n                {this.props.children({\n                    onChange: value => () => this.props.onChange && this.props.onChange(value),\n                    getValue: id => this.props.value === id\n                })}\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </React.Fragment>\n        );\n    }\n}\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;IAkBMA,U;;;;;;;;;;;;WACF,kBAAyB;MAAA;;MACrB,kBAA2C,KAAKC,KAAhD;MAAA,IAAQC,WAAR,eAAQA,WAAR;MAAA,IAAqBC,KAArB,eAAqBA,KAArB;MAAA,IAA4BC,UAA5B,eAA4BA,UAA5B;;MAEA,WAAmEA,UAAU,IAAI,EAAjF;MAAA,IAAiBC,iBAAjB,QAAQC,OAAR;MAAA,IAA6CC,iBAA7C,QAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,QACKL,KAAK,iBACF;QACI,SAAS,EACL,uEACAM;MAHR,GAMKN,KANL,CAFR,EAYK,KAAKF,KAAL,CAAWS,QAAX,CAAoB;QACjBC,QAAQ,EAAE,kBAAAC,KAAK;UAAA,OAAI;YAAA,OAAM,KAAI,CAACX,KAAL,CAAWU,QAAX,IAAuB,KAAI,CAACV,KAAL,CAAWU,QAAX,CAAoBC,KAApB,CAA7B;UAAA,CAAJ;QAAA,CADE;QAEjBC,QAAQ,EAAE,kBAAAC,EAAE;UAAA,OAAI,KAAI,CAACb,KAAL,CAAWW,KAAX,KAAqBE,EAAzB;QAAA;MAFK,CAApB,CAZL,EAiBKT,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CAlBR,EAqBKF,iBAAiB,KAAK,KAAtB,IAA+BH,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CAtBR,CADJ;IA2BH;;;EAjCoBa,cAAA,CAAMC,S;;eAoChBhB,U"}

package/Radio/RadioGroup.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/Radio/RadioGroup.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _form = require("@webiny/form");
+
+var _ = require(".");
+
+var story = (0, _react2.storiesOf)("Components/Radio", module);
+story.addDecorator(_addonKnobs.withKnobs);
+story.add("usage", function () {
+  var disabled = (0, _addonKnobs.boolean)("Disabled", false);
+  var options = [{
+    id: "apple",
+    name: "Apple"
+  }, {
+    id: "pear",
+    name: "Pear"
+  }, {
+    id: "orange",
+    name: "Orange"
+  }];
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, {
+    title: "Simple radio with label and description"
+  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
+    data: {
+      fruits: "pear"
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/_react.default.createElement(Bind, {
+      name: "fruits"
+    }, /*#__PURE__*/_react.default.createElement(_.RadioGroup, {
+      label: "Fruit selection",
+      description: "Choose fruit you like the most."
+    }, function (_ref2) {
+      var onChange = _ref2.onChange,
+          getValue = _ref2.getValue;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(function (_ref3) {
+        var id = _ref3.id,
+            name = _ref3.name;
+        return /*#__PURE__*/_react.default.createElement(_.Radio, {
+          disabled: disabled,
+          key: id,
+          label: name,
+          value: getValue(id),
+          onChange: onChange(id)
+        });
+      }));
+    }));
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <RadioGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Radio\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </RadioGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [_.Radio, _.RadioGroup]
+  }
+});

package/Radio/RadioGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","addDecorator","withKnobs","add","disabled","boolean","options","id","name","readme","fruits","Bind","onChange","getValue","map","info","propTables","Radio","RadioGroup"],"sources":["RadioGroup.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport { withKnobs, boolean } from \"@storybook/addon-knobs\";\nimport readme from \"./README.md\";\n\nimport { Form } from \"@webiny/form\";\nimport { Radio, RadioGroup } from \".\";\n\nconst story = storiesOf(\"Components/Radio\", module);\nstory.addDecorator(withKnobs);\n\nstory.add(\n    \"usage\",\n    () => {\n        const disabled = boolean(\"Disabled\", false);\n\n        const options = [\n            { id: \"apple\", name: \"Apple\" },\n            { id: \"pear\", name: \"Pear\" },\n            { id: \"orange\", name: \"Orange\" }\n        ];\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample title={\"Simple radio with label and description\"}>\n                        <Form data={{ fruits: \"pear\" }}>\n                            {({ Bind }) => (\n                                <Bind name=\"fruits\">\n                                    <RadioGroup\n                                        label=\"Fruit selection\"\n                                        description={\"Choose fruit you like the most.\"}\n                                    >\n                                        {({ onChange, getValue }) => (\n                                            <React.Fragment>\n                                                {options.map(({ id, name }) => (\n                                                    <Radio\n                                                        disabled={disabled}\n                                                        key={id}\n                                                        label={name}\n                                                        value={getValue(id)}\n                                                        onChange={onChange(id)}\n                                                    />\n                                                ))}\n                                            </React.Fragment>\n                                        )}\n                                    </RadioGroup>\n                                </Bind>\n                            )}\n                        </Form>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <RadioGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Radio\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </RadioGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [Radio, RadioGroup] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,kBAAV,EAA8BC,MAA9B,CAAd;AACAF,KAAK,CAACG,YAAN,CAAmBC,qBAAnB;AAEAJ,KAAK,CAACK,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,mBAAA,EAAQ,UAAR,EAAoB,KAApB,CAAjB;EAEA,IAAMC,OAAO,GAAG,CACZ;IAAEC,EAAE,EAAE,OAAN;IAAeC,IAAI,EAAE;EAArB,CADY,EAEZ;IAAED,EAAE,EAAE,MAAN;IAAcC,IAAI,EAAE;EAApB,CAFY,EAGZ;IAAED,EAAE,EAAE,QAAN;IAAgBC,IAAI,EAAE;EAAtB,CAHY,CAAhB;EAMA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD;IAAqB,KAAK,EAAE;EAA5B,gBACI,6BAAC,UAAD;IAAM,IAAI,EAAE;MAAEC,MAAM,EAAE;IAAV;EAAZ,GACK;IAAA,IAAGC,IAAH,QAAGA,IAAH;IAAA,oBACG,6BAAC,IAAD;MAAM,IAAI,EAAC;IAAX,gBACI,6BAAC,YAAD;MACI,KAAK,EAAC,iBADV;MAEI,WAAW,EAAE;IAFjB,GAIK;MAAA,IAAGC,QAAH,SAAGA,QAAH;MAAA,IAAaC,QAAb,SAAaA,QAAb;MAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKP,OAAO,CAACQ,GAAR,CAAY;QAAA,IAAGP,EAAH,SAAGA,EAAH;QAAA,IAAOC,IAAP,SAAOA,IAAP;QAAA,oBACT,6BAAC,OAAD;UACI,QAAQ,EAAEJ,QADd;UAEI,GAAG,EAAEG,EAFT;UAGI,KAAK,EAAEC,IAHX;UAII,KAAK,EAAEK,QAAQ,CAACN,EAAD,CAJnB;UAKI,QAAQ,EAAEK,QAAQ,CAACL,EAAD;QALtB,EADS;MAAA,CAAZ,CADL,CADH;IAAA,CAJL,CADJ,CADH;EAAA,CADL,CADJ,CADJ,eA2BI,6BAAC,uBAAD,i1CA3BJ,CAFJ,CADJ;AA6DH,CAxEL,EAyEI;EAAEQ,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,OAAD,EAAQC,YAAR;EAAd;AAAR,CAzEJ"}

package/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from "./Radio";
+export { default as RadioGroup } from "./RadioGroup";

package/Radio/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function get() {
+    return _Radio.default;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function get() {
+    return _RadioGroup.default;
+  }
+});
+
+var _Radio = _interopRequireDefault(require("./Radio"));
+
+var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));

package/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as Radio } from \"./Radio\";\nexport { default as RadioGroup } from \"./RadioGroup\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}

package/RichTextEditor/README.md

@@ -0,0 +1,10 @@
+# RichTextEditor
+
+### Description
+https://editorjs.io
+
+### Import
+
+```js
+import { RichTextEditor } from "@webiny/ui/RichTextEditor";
+```

package/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { OutputBlockData, OutputData, SanitizerConfig, ToolSettings } from "@editorjs/editorjs";
+import { FormComponentProps } from "@webiny/form";
+export interface OnReadyParams {
+    editor: any;
+    initialData: OutputData;
+}
+export declare type RichTextEditorValue = OutputBlockData[];
+export interface RichTextEditorProps {
+    autofocus?: boolean;
+    context?: {
+        [key: string]: any;
+    };
+    logLevel?: string;
+    minHeight?: number;
+    onChange?: (data: RichTextEditorValue) => void;
+    onReady?: (params: OnReadyParams) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    sanitizer?: SanitizerConfig;
+    tools?: {
+        [toolName: string]: ToolSettings;
+    };
+    value?: RichTextEditorValue;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    validation?: FormComponentProps["validation"];
+    className?: string;
+}
+export declare const RichTextEditor: React.FC<RichTextEditorProps>;

package/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RichTextEditor = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _shortid = _interopRequireDefault(require("shortid"));
+
+var _editorjs = _interopRequireDefault(require("@editorjs/editorjs"));
+
+var _FormElementMessage = require("../FormElementMessage");
+
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["value", "context", "onReady"];
+var classes = {
+  wrapper: /*#__PURE__*/(0, _emotion.css)({
+    backgroundColor: "var(--mdc-theme-background)",
+    padding: "20px 16px 6px"
+  }, "label:wrapper;"),
+  label: /*#__PURE__*/(0, _emotion.css)({
+    marginBottom: "10px !important"
+  }, "label:label;"),
+  disable: /*#__PURE__*/(0, _emotion.css)({
+    opacity: 0.7,
+    pointerEvents: "none"
+  }, "label:disable;")
+};
+
+var RichTextEditor = function RichTextEditor(props) {
+  var elementId = (0, _react.useRef)("rte-" + _shortid.default.generate());
+  var editorRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var value = props.value,
+        context = props.context,
+        _onReady = props.onReady,
+        nativeProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    var initialData = value ? {
+      blocks: value
+    } : {
+      blocks: []
+    };
+    editorRef.current = new _editorjs.default((0, _objectSpread2.default)((0, _objectSpread2.default)({}, nativeProps), {}, {
+      holder: elementId.current,
+      logLevel: "ERROR",
+      data: initialData,
+      onChange: function () {
+        var _onChange = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+          var _yield$editorRef$curr, data;
+
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  if (editorRef.current) {
+                    _context.next = 2;
+                    break;
+                  }
+
+                  return _context.abrupt("return");
+
+                case 2:
+                  _context.next = 4;
+                  return editorRef.current.save();
+
+                case 4:
+                  _yield$editorRef$curr = _context.sent;
+                  data = _yield$editorRef$curr.blocks;
+
+                  if (props.onChange) {
+                    _context.next = 8;
+                    break;
+                  }
+
+                  return _context.abrupt("return");
+
+                case 8:
+                  props.onChange(data);
+
+                case 9:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function onChange() {
+          return _onChange.apply(this, arguments);
+        }
+
+        return onChange;
+      }(),
+      onReady: function onReady() {
+        if (typeof _onReady !== "function") {
+          return;
+        }
+
+        _onReady({
+          editor: editorRef.current,
+          initialData: initialData
+        });
+      },
+      tools: Object.keys(props.tools || {}).reduce(function (tools, name) {
+        var tool = props.tools ? props.tools[name] : null;
+
+        if (!tool) {
+          return tools;
+        }
+
+        tools[name] = tool;
+
+        if (!tool.config) {
+          tool.config = {
+            context: context
+          };
+        } else if (typeof tool.config === "function") {
+          tool.config = tool.config();
+        } else {
+          tool.config = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tool.config), {}, {
+            context: context
+          });
+        }
+
+        return tools;
+      }, {})
+    }));
+    return function () {
+      if (!editorRef.current || typeof editorRef.current.destroy !== "function") {
+        return;
+      }
+
+      editorRef.current.destroy();
+    };
+  }, []);
+  var label = props.label,
+      description = props.description,
+      disabled = props.disabled,
+      validation = props.validation,
+      className = props.className;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(classes.wrapper, className, (0, _defineProperty2.default)({}, classes.disable, disabled))
+  }, label && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    id: elementId.current
+  })), validation && validation.isValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
+    error: true
+  }, validation.message), validation && validation.isValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+};
+
+exports.RichTextEditor = RichTextEditor;

package/RichTextEditor/RichTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classes","wrapper","css","backgroundColor","padding","label","marginBottom","disable","opacity","pointerEvents","RichTextEditor","props","elementId","useRef","shortid","generate","editorRef","useEffect","value","context","onReady","nativeProps","initialData","blocks","current","EditorJS","holder","logLevel","data","onChange","save","editor","tools","Object","keys","reduce","name","tool","config","destroy","description","disabled","validation","className","classNames","isValid","message"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\nimport shortid from \"shortid\";\nimport EditorJS from \"@editorjs/editorjs\";\nimport {\n    LogLevels,\n    OutputBlockData,\n    OutputData,\n    SanitizerConfig,\n    ToolSettings\n} from \"@editorjs/editorjs\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { css } from \"emotion\";\nimport classNames from \"classnames\";\nimport { FormComponentProps } from \"@webiny/form\";\n\nconst classes = {\n    wrapper: css({\n        backgroundColor: \"var(--mdc-theme-background)\",\n        padding: \"20px 16px 6px\"\n    }),\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface EditorJSType {\n    destroy?: () => void;\n    save: () => Promise<any>;\n}\n\nexport interface OnReadyParams {\n    editor: any;\n    initialData: OutputData;\n}\n\nexport type RichTextEditorValue = OutputBlockData[];\n\nexport interface RichTextEditorProps {\n    autofocus?: boolean;\n    context?: { [key: string]: any };\n    logLevel?: string;\n    minHeight?: number;\n    onChange?: (data: RichTextEditorValue) => void;\n    onReady?: (params: OnReadyParams) => void;\n    placeholder?: string;\n    readOnly?: boolean;\n    sanitizer?: SanitizerConfig;\n    tools?: {\n        [toolName: string]: ToolSettings;\n    };\n    value?: RichTextEditorValue;\n    label?: string;\n    description?: string;\n    disabled?: boolean;\n    validation?: FormComponentProps[\"validation\"];\n    className?: string;\n}\n\nexport const RichTextEditor: React.FC<RichTextEditorProps> = props => {\n    const elementId = useRef(\"rte-\" + shortid.generate());\n    const editorRef = useRef<EditorJSType>();\n\n    useEffect(() => {\n        const { value, context, onReady, ...nativeProps } = props;\n        const initialData = value ? { blocks: value } : { blocks: [] };\n\n        editorRef.current = new EditorJS({\n            ...nativeProps,\n            holder: elementId.current,\n            logLevel: \"ERROR\" as LogLevels.ERROR,\n            data: initialData,\n            onChange: async () => {\n                if (!editorRef.current) {\n                    return;\n                }\n                const { blocks: data } = await editorRef.current.save();\n                if (!props.onChange) {\n                    return;\n                }\n                props.onChange(data);\n            },\n            onReady() {\n                if (typeof onReady !== \"function\") {\n                    return;\n                }\n                onReady({ editor: editorRef.current, initialData });\n            },\n            tools: Object.keys(props.tools || {}).reduce((tools, name) => {\n                const tool = props.tools ? props.tools[name] : null;\n                if (!tool) {\n                    return tools;\n                }\n                tools[name] = tool;\n                if (!tool.config) {\n                    tool.config = { context };\n                } else if (typeof tool.config === \"function\") {\n                    tool.config = tool.config();\n                } else {\n                    tool.config = { ...tool.config, context };\n                }\n                return tools;\n            }, {} as Record<string, ToolSettings>)\n        });\n\n        return () => {\n            if (!editorRef.current || typeof editorRef.current.destroy !== \"function\") {\n                return;\n            }\n\n            editorRef.current.destroy();\n        };\n    }, []);\n\n    const { label, description, disabled, validation, className } = props;\n\n    return (\n        <Fragment>\n            <div\n                className={classNames(classes.wrapper, className, { [classes.disable]: disabled })}\n            >\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n                <div id={elementId.current} />\n            </div>\n            {validation && validation.isValid === false && (\n                <FormElementMessage error>{validation.message}</FormElementMessage>\n            )}\n            {validation && validation.isValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </Fragment>\n    );\n};\n"],"mappings":"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"}

package/RichTextEditor/RichTextEditor.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/RichTextEditor/RichTextEditor.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Story = require("@webiny/storybook-utils/Story");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = require("./index");
+
+var story = (0, _react2.storiesOf)("Components/RichTextEditor", module);
+story.add("usage", function () {
+  var onChange = (0, _react.useCallback)(function (data) {
+    console.log(data);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_index.RichTextEditor, {
+    value: undefined,
+    onChange: onChange
+  })), /*#__PURE__*/_react.default.createElement(_Story.StorySandboxCode, null, "\n                        import { RichTextEditor } from \"..\";\n\n                        <RichTextEditor/>\n                    ")));
+}, {
+  info: {
+    propTables: [_index.RichTextEditor]
+  }
+});

package/RichTextEditor/RichTextEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","storiesOf","module","add","onChange","useCallback","data","console","log","readme","undefined","info","propTables","RichTextEditor"],"sources":["RichTextEditor.stories.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { storiesOf } from \"@storybook/react\";\n\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./README.md\";\n\nimport { RichTextEditor } from \"./index\";\n\nconst story = storiesOf(\"Components/RichTextEditor\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        const onChange = useCallback(data => {\n            console.log(data);\n        }, []);\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox>\n                    <StorySandboxExample>\n                        <RichTextEditor value={undefined} onChange={onChange} />\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                        import { RichTextEditor } from \"..\";\n\n                        <RichTextEditor/>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [RichTextEditor] } }\n);\n"],"mappings":";;;;;;AAAA;;AACA;;AAEA;;AAOA;;AAEA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,2BAAV,EAAuCC,MAAvC,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,QAAQ,GAAG,IAAAC,kBAAA,EAAY,UAAAC,IAAI,EAAI;IACjCC,OAAO,CAACC,GAAR,CAAYF,IAAZ;EACH,CAFgB,EAEd,EAFc,CAAjB;EAIA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcG,eAAd,CADJ,eAEI,6BAAC,mBAAD,qBACI,6BAAC,0BAAD,qBACI,6BAAC,qBAAD;IAAgB,KAAK,EAAEC,SAAvB;IAAkC,QAAQ,EAAEN;EAA5C,EADJ,CADJ,eAII,6BAAC,uBAAD,8IAJJ,CAFJ,CADJ;AAiBH,CAxBL,EAyBI;EAAEO,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,qBAAD;EAAd;AAAR,CAzBJ"}