@webiny/ui 0.0.0-mt-1

package/Checkbox/Checkbox.js

@@ -0,0 +1,76 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from "react";
+import { Checkbox as RmwcCheckbox } from "@rmwc/checkbox";
+import { FormElementMessage } from "../FormElementMessage";
+
+/**
+ * Single Checkbox component can be used to store simple boolean values.
+ *
+ * Grouping multiple Checkbox components with CheckboxGroup will allow to store an array of selected values.
+ * In that case, each Checkbox component must receive value and onChange callback via props.
+ */
+var Checkbox = /*#__PURE__*/function (_React$Component) {
+  _inherits(Checkbox, _React$Component);
+
+  var _super = _createSuper(Checkbox);
+
+  function Checkbox() {
+    var _this;
+
+    _classCallCheck(this, Checkbox);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (e) {
+      _this.props.onChange && _this.props.onChange(e.target.checked);
+    });
+
+    return _this;
+  }
+
+  _createClass(Checkbox, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          label = _this$props.label,
+          disabled = _this$props.disabled,
+          indeterminate = _this$props.indeterminate,
+          description = _this$props.description,
+          validation = _this$props.validation,
+          _onClick = _this$props.onClick;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RmwcCheckbox, {
+        indeterminate: indeterminate,
+        disabled: disabled,
+        checked: Boolean(value),
+        onChange: this.onChange,
+        onClick: function onClick() {
+          return typeof _onClick === "function" && _onClick(Boolean(value));
+        } // @ts-ignore Although the label is React.ReactNode internally, an error is still thrown.
+        ,
+        label: label
+      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return Checkbox;
+}(React.Component);
+
+_defineProperty(Checkbox, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+export default Checkbox;

package/Checkbox/Checkbox.stories.d.ts

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

package/Checkbox/Checkbox.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import readme from "./README_Checkbox.md";
+import { Form } from "@webiny/form";
+import Checkbox from "./Checkbox";
+var story = storiesOf("Components/Checkbox", module);
+story.addDecorator(withKnobs);
+story.add("usage - single", function () {
+  var disabled = boolean("Disabled", false);
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Simple checkbox with a label and description"
+  }, /*#__PURE__*/React.createElement(Form, null, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "rememberMe"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      label: "Remember me",
+      disabled: disabled,
+      description: "You won't be logged out after you leave the app."
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                    <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"rememberMe\">\n                                  <Checkbox\n                                    label={\"Remember me\"}\n                                    disabled={disabled}\n                                    description={\"You won't be logged out after you leave the app.\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [Checkbox]
+  }
+});

package/Checkbox/Checkbox.styles.d.ts

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

package/Checkbox/Checkbox.styles.js

@@ -0,0 +1,15 @@
+import { css } from "emotion";
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+
+var webinyCheckboxTitle = /*#__PURE__*/css({}, {
+  "&.mdc-text-field-helper-text": {
+    //paddingLeft: 10,
+    textTransform: "uppercase",
+    fontWeight: "bold",
+    marginBottom: "5px"
+  }
+}, "label:webinyCheckboxTitle;");
+export { webinyCheckboxTitle };

package/Checkbox/CheckboxGroup.d.ts

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

package/Checkbox/CheckboxGroup.js

@@ -0,0 +1,63 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import * as React from "react";
+import { webinyCheckboxTitle } from "./Checkbox.styles";
+import { FormElementMessage } from "../FormElementMessage";
+
+var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(CheckboxGroup, _React$Component);
+
+  var _super = _createSuper(CheckboxGroup);
+
+  function CheckboxGroup() {
+    _classCallCheck(this, CheckboxGroup);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(CheckboxGroup, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          description = _this$props.description,
+          label = _this$props.label,
+          _this$props$validatio = _this$props.validation,
+          validation = _this$props$validatio === void 0 ? {
+        isValid: null,
+        message: null
+      } : _this$props$validatio;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+        className: "mdc-text-field-helper-text mdc-text-field-helper-text--persistent " + webinyCheckboxTitle
+      }, label), this.props.children({
+        onChange: function onChange(value) {
+          return function () {
+            var values = Array.isArray(_this.props.value) ? _this.props.value : [];
+            var index = values.indexOf(value);
+
+            if (index > -1) {
+              values.splice(index, 1);
+            } else {
+              values.push(value);
+            }
+
+            _this.props.onChange && _this.props.onChange(values);
+          };
+        },
+        getValue: function getValue(id) {
+          var values = Array.isArray(_this.props.value) ? _this.props.value : [];
+          return values.includes(id);
+        }
+      }), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return CheckboxGroup;
+}(React.Component);
+
+export default CheckboxGroup;

package/Checkbox/CheckboxGroup.stories.d.ts

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

package/Checkbox/CheckboxGroup.stories.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import readme from "./README_CheckboxGroup.md";
+import { Form } from "@webiny/form";
+import { Checkbox, CheckboxGroup } from ".";
+var story = storiesOf("Components/Checkbox", module);
+story.addDecorator(withKnobs);
+story.add("usage - group", function () {
+  var disabled = boolean("Disabled", false);
+  var options = [{
+    id: "apple",
+    name: "Apple"
+  }, {
+    id: "pear",
+    name: "Pear"
+  }, {
+    id: "orange",
+    name: "Orange"
+  }];
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Simple checkbox with label and description"
+  }, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      fruits: ["pear"]
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "fruits"
+    }, /*#__PURE__*/React.createElement(CheckboxGroup, {
+      label: "Fruits selection",
+      description: "Choose only fruits you like."
+    }, function (_ref2) {
+      var onChange = _ref2.onChange,
+          getValue = _ref2.getValue;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, options.map(function (_ref3) {
+        var id = _ref3.id,
+            name = _ref3.name;
+        return /*#__PURE__*/React.createElement(Checkbox, {
+          disabled: disabled,
+          key: id,
+          label: name,
+          value: getValue(id),
+          onChange: onChange(id)
+        });
+      }));
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                     <Form data={{fruits: ['pear']}}>\n                        {({ Bind }) => (\n                            <Bind name=\"fruits\">\n                                <CheckboxGroup\n                                    label=\"Fruits selection\"\n                                    description={\"Choose only fruits you like.\"}\n                                >\n                                    {({ onChange, getValue }) => (\n                                        <React.Fragment>\n                                            {options.map(({id, name}) => (\n                                                <Checkbox\n                                                    disabled={disabled}\n                                                    key={id}\n                                                    label={name}\n                                                    value={getValue(id)}\n                                                    onChange={onChange(id)}\n                                                />\n                                            ))}\n                                        </React.Fragment>\n                                    )}\n                                </CheckboxGroup>\n                            </Bind>\n                        )}\n                    </Form>\n                    ")));
+}, {
+  info: {
+    propTables: [CheckboxGroup]
+  }
+});

package/Checkbox/README_Checkbox.md

@@ -0,0 +1,15 @@
+# Checkbox
+
+### Design
+
+<a href="https://material.io/design/components/selection-controls.html#checkboxes" target="_blank">https://material.io/design/components/selection-controls.html#checkboxes</a>
+
+### Description
+
+Single `Checkbox` component can be used to store simple boolean values.
+
+### Import
+
+```js
+import { Checkbox } from "@webiny/ui/Checkbox";
+```

package/Checkbox/README_CheckboxGroup.md

@@ -0,0 +1,19 @@
+# Group
+
+### Design
+
+<a href="https://material.io/design/components/selection-controls.html#checkboxes" target="_blank">https://material.io/design/components/selection-controls.html#checkboxes</a>
+
+### Description
+
+Unlike single `Checkbox` which is used to store simple boolean values, grouping multiple `Checkbox` components
+with `CheckboxGroup` will allow you to store an array of selected values.
+
+Each `Checkbox` component must receive `value` and `onChange` callback via props.
+
+### Import
+To use, import base `Checkbox` component.
+
+```js
+import { CheckboxGroup, Checkbox } from "@webiny/ui/Checkbox";
+```

package/Checkbox/index.d.ts

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

package/Checkbox/index.js

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

package/Chips/Chip.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { ChipProps as RmwcChipProps } from "@rmwc/chip";
+export declare type ChipProps = RmwcChipProps & {
+    /**
+     * Chip content
+     */
+    children?: React.ReactNode;
+};
+export declare const Chip: (props: ChipProps) => JSX.Element;

package/Chips/Chip.js

@@ -0,0 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import * as React from "react";
+import { Chip as RmwcChip } from "@rmwc/chip";
+export var Chip = function Chip(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RmwcChip, rest, children);
+};

package/Chips/ChipIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ChipIconProps as RmwcChipIconProps } from "@rmwc/chip";
+export declare type ChipIconProps = RmwcChipIconProps;
+export declare const ChipIcon: (props: ChipIconProps) => JSX.Element;

package/Chips/ChipIcon.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { ChipIcon as RmwcChipIcon } from "@rmwc/chip";
+import { chipIconWrapper } from "./styles";
+export var ChipIcon = function ChipIcon(props) {
+  return /*#__PURE__*/React.createElement(RmwcChipIcon, Object.assign({
+    className: chipIconWrapper
+  }, props));
+};

package/Chips/Chips.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { Chip } from "./Chip";
+export declare type ChipsProps = {
+    /**
+     * Chips to show
+     */
+    children?: React.ReactElement<typeof Chip> | React.ReactElement<typeof Chip>[];
+    /**
+     * Is chip disabled?
+     */
+    disabled?: boolean;
+    /**
+     * CSS class name
+     */
+    className?: string;
+    /**
+     * Style object.
+     */
+    style?: React.CSSProperties;
+};
+export declare const Chips: (props: ChipsProps) => JSX.Element;

package/Chips/Chips.js

@@ -0,0 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "disabled"];
+import * as React from "react";
+import classNames from "classnames";
+import { ChipSet } from "@rmwc/chip";
+import { chipIconWrapper, disabledChips } from "./styles";
+export var Chips = function Chips(props) {
+  var children = props.children,
+      className = props.className,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ChipSet, Object.assign({}, rest, {
+    className: classNames(className, chipIconWrapper, _defineProperty({}, disabledChips, disabled))
+  }), children));
+};

package/Chips/Chips.stories.d.ts

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

package/Chips/Chips.stories.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./README.md";
+import { ReactComponent as BaselineDoneIcon } from "@svgr/webpack!./icons/baseline-done-24px.svg";
+import { ReactComponent as BaselineEmailIcon } from "@svgr/webpack!./icons/baseline-email-24px.svg";
+import { Chip, ChipIcon, Chips } from "./index";
+var story = storiesOf("Components/Chips", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, {
+    title: "Simple chips with a label and description"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Chips, null, /*#__PURE__*/React.createElement(Chip, {
+    selected: true
+  }, "Cookies"), /*#__PURE__*/React.createElement(Chip, null, "Pizza"), /*#__PURE__*/React.createElement(Chip, null, "Icecream")), /*#__PURE__*/React.createElement(Chips, null, /*#__PURE__*/React.createElement(Chip, null, /*#__PURE__*/React.createElement(ChipIcon, {
+    leading: true,
+    icon: /*#__PURE__*/React.createElement(BaselineEmailIcon, null)
+  }), "Cookies"), /*#__PURE__*/React.createElement(Chip, null, "Cookies", /*#__PURE__*/React.createElement(ChipIcon, {
+    trailing: true,
+    icon: /*#__PURE__*/React.createElement(BaselineDoneIcon, null)
+  }))))), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                         <div>\n                            <Chips>\n                                <Chip selected>\n                                    Cookies\n                                </Chip>\n                                <Chip>\n                                    Pizza\n                                </Chip>\n                                <Chip>\n                                    Icecream\n                                </Chip>\n                            </Chips>\n                            <Chips>\n                                <Chip>\n                                    <ChipIcon leading icon={<BaselineEmailIcon />} />\n                                    Cookies\n                                    <ChipIcon trailing icon={<BaselineDoneIcon />} />\n                                </Chip>\n                            </Chips>\n                        </div>\n                    ")));
+}, {
+  info: {
+    propTables: [Chip, ChipIcon, Chips]
+  }
+});

package/Chips/README.md

@@ -0,0 +1,15 @@
+# Chips
+
+### Design
+
+<a href="https://material.io/design/components/chips.html" target="_blank">https://material.io/design/components/chips.html</a>
+
+### Description
+
+`Chips` allow users to enter information, make selections, filter content, or trigger actions.
+
+### Import
+
+```js
+import { Chips, Chip, ChipText, ChipIcon } from "@webiny/ui/Chips";
+```

package/Chips/icons/baseline-done-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0z"/>
+    <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+</svg>

package/Chips/icons/baseline-email-24px.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+</svg>

package/Chips/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Chips";
+export * from "./Chip";
+export * from "./ChipIcon";

package/Chips/index.js

@@ -0,0 +1,3 @@
+export * from "./Chips";
+export * from "./Chip";
+export * from "./ChipIcon";

package/Chips/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const chipIconWrapper: string;
+export declare const disabledChips: string;

package/Chips/styles.js

@@ -0,0 +1,17 @@
+import { css } from "emotion";
+export var chipIconWrapper = /*#__PURE__*/css({
+  ".mdc-chip__icon": {
+    svg: {
+      width: 18,
+      height: 18,
+      "&.mdc-chip__icon--trailing": {
+        boxSizing: "border-box",
+        display: "flex"
+      }
+    }
+  }
+}, "label:chipIconWrapper;");
+export var disabledChips = /*#__PURE__*/css({
+  opacity: 0.75,
+  pointerEvents: "none"
+}, "label:disabledChips;");

package/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+import "brace/theme/github";
+import "brace/theme/twilight";
+declare type Props = FormComponentProps & {
+    mode: string;
+    theme: string;
+    description?: React.ReactNode;
+};
+/**
+ * CodeEditor component can be used to store simple boolean values.
+ */
+declare class CodeEditor extends React.Component<Props> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    onChange: (value: string) => void;
+    render(): JSX.Element;
+}
+export { CodeEditor };

package/CodeEditor/CodeEditor.js

@@ -0,0 +1,88 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["value", "description", "validation", "theme"];
+import * as React from "react";
+import { css } from "emotion";
+import AceEditor from "react-ace";
+import "brace/theme/github";
+import "brace/theme/twilight";
+import { FormElementMessage } from "../FormElementMessage";
+/**
+ * Controls the helper text below the checkbox.
+ * @type {string}
+ */
+
+var webinyCheckboxHelperText = /*#__PURE__*/css({}, {
+  "&.mdc-text-field-helper-text": {
+    paddingTop: 5
+  }
+}, "label:webinyCheckboxHelperText;");
+
+/**
+ * CodeEditor component can be used to store simple boolean values.
+ */
+var CodeEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(CodeEditor, _React$Component);
+
+  var _super = _createSuper(CodeEditor);
+
+  function CodeEditor() {
+    var _this;
+
+    _classCallCheck(this, CodeEditor);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
+      _this.props.onChange && _this.props.onChange(value);
+    });
+
+    return _this;
+  }
+
+  _createClass(CodeEditor, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          description = _this$props.description,
+          validation = _this$props.validation,
+          _this$props$theme = _this$props.theme,
+          theme = _this$props$theme === void 0 ? "github" : _this$props$theme,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AceEditor, Object.assign({
+        value: value ? String(value) : "",
+        theme: theme,
+        onChange: this.onChange
+      }, rest, {
+        width: "100%",
+        className: "mdc-text-field"
+      })), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true,
+        className: webinyCheckboxHelperText
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, {
+        className: webinyCheckboxHelperText
+      }, description));
+    }
+  }]);
+
+  return CodeEditor;
+}(React.Component);
+
+_defineProperty(CodeEditor, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+export { CodeEditor };

package/CodeEditor/CodeEditor.stories.d.ts

@@ -0,0 +1,2 @@
+import "brace/mode/json";
+import "brace/theme/github";

package/CodeEditor/CodeEditor.stories.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import { withKnobs, text } from "@storybook/addon-knobs";
+import readme from "./README.md";
+import { Form } from "@webiny/form";
+import { CodeEditor } from "./CodeEditor";
+import "brace/mode/json";
+import "brace/theme/github";
+var story = storiesOf("Components/CodeEditor", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var description = text("description", "Type your code here and see it in action.");
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, null, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(Form, {
+    data: {
+      data: "{\"foo\": \"bar\"}"
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "data"
+    }, /*#__PURE__*/React.createElement(CodeEditor, {
+      mode: "json",
+      theme: "github",
+      description: description
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                        <Form data={{ data: `{\"foo\": \"bar\"}` }}>\n                        {({ Bind }) => (\n                            <Bind name=\"data\">\n                                 <CodeEditor\n                                    mode=\"json\"\n                                    theme=\"github\"\n                                    description={\"".concat(description, "\"}\n                                />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
+}, {
+  info: {
+    propTables: [CodeEditor]
+  }
+});