@webiny/ui 0.0.0-mt-1

package/CodeEditor/README.md

@@ -0,0 +1,21 @@
+# CodeEditor
+
+### Additional information
+
+<a href="https://github.com/securingsincity/react-ace" target="_blank">https://github.com/securingsincity/react-ace</a>
+
+### Description
+
+`CodeEditor` is a wrapper around one of the most popular code editors called `Ace` editor. Have in mind that you still
+have to import `brace` as a dependency (after importing `CodeEditor`) for different code formats and editor types.
+
+### Import
+
+```js
+import brace from "brace";
+import { CodeEditor } from "@webiny/ui/CodeEditor";
+
+// Make sure to import this after CodeEditor. Check official docs for available modes and themes.
+import "brace/mode/json";
+import "brace/theme/github";
+```

package/CodeEditor/index.d.ts

@@ -0,0 +1 @@
+export * from "./CodeEditor";

package/CodeEditor/index.js

@@ -0,0 +1 @@
+export * from "./CodeEditor";

package/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { FormComponentProps } from "../types";
+declare type Props = FormComponentProps & {
+    label?: string;
+    disable?: boolean;
+    description?: string;
+};
+/**
+ * Use ColorPicker component to display a list of choices, once the handler is triggered.
+ */
+declare class ColorPicker extends React.Component<Props> {
+    state: {
+        showColorPicker: boolean;
+    };
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    handleClick: () => void;
+    handleClose: () => void;
+    handleChange: (color: any) => void;
+    render(): JSX.Element;
+}
+export { ColorPicker };

package/ColorPicker/ColorPicker.js

@@ -0,0 +1,140 @@
+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 { SketchPicker } from "react-color";
+import { css } from "emotion";
+import { FormElementMessage } from "../FormElementMessage";
+import classNames from "classnames";
+var classes = {
+  label: /*#__PURE__*/css({
+    marginBottom: "10px !important"
+  }, "label:label;"),
+  color: /*#__PURE__*/css({
+    width: "36px",
+    height: "14px",
+    borderRadius: "2px"
+  }, "label:color;"),
+  swatch: /*#__PURE__*/css({
+    padding: "5px",
+    background: "#fff",
+    borderRadius: "1px",
+    boxShadow: "0 0 0 1px rgba(0,0,0,.1)",
+    display: "inline-block",
+    cursor: "pointer"
+  }, "label:swatch;"),
+  // @ts-ignore
+  popover: /*#__PURE__*/css({
+    position: "absolute",
+    zIndex: "2"
+  }, "label:popover;"),
+  classNames: /*#__PURE__*/css({
+    position: "fixed",
+    top: "0px",
+    right: "0px",
+    bottom: "0px",
+    left: "0px"
+  }, "label:classNames;"),
+  disable: /*#__PURE__*/css({
+    opacity: 0.7,
+    pointerEvents: "none"
+  }, "label:disable;")
+};
+
+/**
+ * Use ColorPicker component to display a list of choices, once the handler is triggered.
+ */
+var ColorPicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(ColorPicker, _React$Component);
+
+  var _super = _createSuper(ColorPicker);
+
+  function ColorPicker() {
+    var _this;
+
+    _classCallCheck(this, ColorPicker);
+
+    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), "state", {
+      showColorPicker: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      _this.setState({
+        showColorPicker: !_this.state.showColorPicker
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
+      _this.setState({
+        showColorPicker: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (color) {
+      var onChange = _this.props.onChange;
+      onChange && onChange(color.hex);
+    });
+
+    return _this;
+  }
+
+  _createClass(ColorPicker, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          value = _this$props.value,
+          label = _this$props.label,
+          disable = _this$props.disable,
+          description = _this$props.description,
+          validation = _this$props.validation;
+      var backgroundColorStyle = null;
+
+      if (value) {
+        backgroundColorStyle = {
+          background: "".concat(value)
+        };
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(_defineProperty({}, classes.disable, disable))
+      }, label && /*#__PURE__*/React.createElement("div", {
+        className: classNames("mdc-text-field-helper-text mdc-text-field-helper-text--persistent", classes.label)
+      }, label), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: classes.swatch,
+        onClick: this.handleClick
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.color,
+        style: backgroundColorStyle
+      })), this.state.showColorPicker ? /*#__PURE__*/React.createElement("div", {
+        className: classes.popover
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.classNames,
+        onClick: this.handleClose
+      }), /*#__PURE__*/React.createElement(SketchPicker, {
+        color: value || "",
+        onChange: this.handleChange
+      })) : null), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+        error: true
+      }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+    }
+  }]);
+
+  return ColorPicker;
+}(React.Component);
+
+_defineProperty(ColorPicker, "defaultProps", {
+  validation: {
+    isValid: null
+  }
+});
+
+export { ColorPicker };

package/ColorPicker/ColorPicker.stories.d.ts

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

package/ColorPicker/ColorPicker.stories.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandbox, StorySandboxCode, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../ColorPicker/README.md";
+import { Form } from "@webiny/form";
+import { withKnobs, boolean } from "@storybook/addon-knobs";
+import { ColorPicker } from "./ColorPicker";
+var story = storiesOf("Components/ColorPicker", module);
+story.addDecorator(withKnobs);
+story.add("usage", function () {
+  var disable = boolean("disable", false);
+  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: {
+      color: "#80ff00"
+    }
+  }, function (_ref) {
+    var Bind = _ref.Bind;
+    return /*#__PURE__*/React.createElement(Bind, {
+      name: "color"
+    }, /*#__PURE__*/React.createElement(ColorPicker, {
+      label: "Header background color",
+      disable: disable,
+      description: "A simple background color in the header section."
+    }));
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                       <Form>\n                        {({ Bind }) => (\n                            <Bind name=\"color\">\n                                <ColorPicker disable={".concat(disable, "} />\n                            </Bind>\n                        )}\n                    </Form>\n                    "))));
+}, {
+  info: {
+    propTables: [ColorPicker]
+  }
+});

package/ColorPicker/README.md

@@ -0,0 +1,11 @@
+# ColorPicker
+
+### Description
+
+`ColorPicker` component is used to pick a color, eg. for font or background color.
+
+### Import
+
+```js
+import { ColorPicker } from "@webiny/ui/ColorPicker";
+```

package/ColorPicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./ColorPicker";

package/ColorPicker/index.js

@@ -0,0 +1 @@
+export * from "./ColorPicker";

package/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+interface ChildrenRenderProp {
+    showConfirmation: (onAccept?: Function, onCancel?: Function) => any;
+}
+interface ConfirmationCallbacks {
+    onAccept: Function;
+    onCancel: Function;
+}
+declare type Props = {
+    title?: React.ReactNode;
+    message?: React.ReactNode;
+    loading?: React.ReactNode;
+    "data-testid"?: string;
+    children: (props: ChildrenRenderProp) => React.ReactNode;
+    disableConfirm?: boolean;
+    style?: React.CSSProperties;
+};
+declare type State = {
+    show: boolean;
+    loading: boolean;
+};
+/**
+ * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.
+ */
+declare class ConfirmationDialog extends React.Component<Props, State> {
+    static defaultProps: {
+        title: string;
+        message: string;
+        loading: JSX.Element;
+    };
+    __isMounted: boolean;
+    callbacks: ConfirmationCallbacks;
+    state: {
+        show: boolean;
+        loading: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    showConfirmation: (onAccept?: Function, onCancel?: Function) => void;
+    hideConfirmation: () => void;
+    onAccept: () => Promise<void>;
+    onCancel: () => Promise<void>;
+    render(): JSX.Element;
+}
+export { ConfirmationDialog };

package/ConfirmationDialog/ConfirmationDialog.js

@@ -0,0 +1,164 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from "react";
+import noop from "lodash/noop";
+import { Dialog, DialogButton, DialogCancel, DialogActions, DialogTitle, DialogContent } from "./../Dialog";
+import { CircularProgress } from "../Progress";
+
+/**
+ * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.
+ */
+var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
+  _inherits(ConfirmationDialog, _React$Component);
+
+  var _super = _createSuper(ConfirmationDialog);
+
+  function ConfirmationDialog() {
+    var _this;
+
+    _classCallCheck(this, ConfirmationDialog);
+
+    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), "__isMounted", false);
+
+    _defineProperty(_assertThisInitialized(_this), "callbacks", {
+      onAccept: noop,
+      onCancel: noop
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      show: false,
+      loading: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "showConfirmation", function (onAccept, onCancel) {
+      _this.callbacks = {
+        onAccept: onAccept,
+        onCancel: onCancel
+      };
+
+      _this.setState({
+        show: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hideConfirmation", function () {
+      _this.setState({
+        show: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onAccept", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var onAccept;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              onAccept = _this.callbacks.onAccept;
+
+              if (!(typeof onAccept === "function")) {
+                _context.next = 6;
+                break;
+              }
+
+              _this.setState({
+                loading: true
+              });
+
+              _context.next = 5;
+              return onAccept();
+
+            case 5:
+              if (_this.__isMounted) {
+                _this.setState({
+                  loading: false,
+                  show: false
+                });
+              }
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+
+    _defineProperty(_assertThisInitialized(_this), "onCancel", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var onCancel;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              onCancel = _this.callbacks.onCancel;
+
+              if (!(typeof onCancel === "function")) {
+                _context2.next = 4;
+                break;
+              }
+
+              _context2.next = 4;
+              return onCancel();
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+
+    return _this;
+  }
+
+  _createClass(ConfirmationDialog, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.__isMounted = true;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.__isMounted = false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog, {
+        style: this.props.style,
+        open: this.state.show,
+        onClose: this.hideConfirmation,
+        "data-testid": this.props["data-testid"]
+      }, this.state.loading ? this.props.loading : null, /*#__PURE__*/React.createElement(DialogTitle, null, this.props.title), /*#__PURE__*/React.createElement(DialogContent, null, this.props.message), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, {
+        onClick: this.onCancel
+      }, "Cancel"), /*#__PURE__*/React.createElement(DialogButton, {
+        "data-testid": "confirmationdialog-confirm-action",
+        onClick: this.onAccept,
+        disabled: this.props.disableConfirm
+      }, "Confirm"))), this.props.children({
+        showConfirmation: this.showConfirmation
+      }));
+    }
+  }]);
+
+  return ConfirmationDialog;
+}(React.Component);
+
+_defineProperty(ConfirmationDialog, "defaultProps", {
+  title: "Confirmation",
+  message: "Are you sure you want to continue?",
+  loading: /*#__PURE__*/React.createElement(CircularProgress, null)
+});
+
+export { ConfirmationDialog };

package/ConfirmationDialog/ConfirmationDialog.stories.d.ts

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

package/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { Story, StoryReadme, StorySandboxCode, StorySandbox, StorySandboxExample } from "@webiny/storybook-utils/Story";
+import readme from "./../ConfirmationDialog/README.md";
+import { ButtonPrimary } from "./../Button";
+import { ConfirmationDialog } from "./ConfirmationDialog";
+var story = storiesOf("Components/ConfirmationDialog", module);
+story.add("usage", function () {
+  return /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement(StoryReadme, null, readme), /*#__PURE__*/React.createElement(StorySandbox, {
+    title: "Icon with and without ConfirmationDialog"
+  }, /*#__PURE__*/React.createElement(StorySandboxExample, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
+    title: "Pay Invoice",
+    message: "Are you sure you want pay this invoice?"
+  }, function (_ref) {
+    var showConfirmation = _ref.showConfirmation;
+    return /*#__PURE__*/React.createElement(ButtonPrimary, {
+      onClick: function onClick() {
+        showConfirmation(function () {
+          return console.log("Confirm");
+        }, function () {
+          return console.log("Cancel");
+        });
+      }
+    }, "Pay Invoice");
+  })), /*#__PURE__*/React.createElement(StorySandboxCode, null, "\n                     <ConfirmationDialog\n                        title=\"Pay Invoice\"\n                        message=\"Are you sure you want pay this invoice?\"\n                    >\n                        {({ showConfirmation }) => {\n                            return (\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        showConfirmation(\n                                            () => console.log(\"Confirm\"),\n                                            () => console.log(\"Cancel\")\n                                        );\n                                    }}\n                                >\n                                    Pay Invoice\n                                </ButtonPrimary>\n                            );\n                        }}\n                    </ConfirmationDialog>\n                    ")));
+}, {
+  info: {
+    propTables: [ConfirmationDialog]
+  }
+});

package/ConfirmationDialog/README.md

@@ -0,0 +1,11 @@
+# ConfirmationDialog
+
+### Description
+
+`ConfirmationDialog` component is used to represent interactive surfaces.
+
+### Import
+
+```js
+import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
+```

package/ConfirmationDialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ConfirmationDialog";
+export * from "./withConfirmation";

package/ConfirmationDialog/index.js

@@ -0,0 +1,2 @@
+export * from "./ConfirmationDialog";
+export * from "./withConfirmation";

package/ConfirmationDialog/withConfirmation.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare type ConfirmationProps = {
+    title?: React.ReactNode;
+    message?: React.ReactNode;
+};
+declare type WithConfirmationParams = (props: any) => ConfirmationProps;
+export declare type WithConfirmationProps = {
+    showConfirmation: (confirm: Function, cancel: Function) => void;
+};
+export declare const withConfirmation: (dialogProps: WithConfirmationParams) => Function;
+export {};

package/ConfirmationDialog/withConfirmation.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ConfirmationDialog } from "./ConfirmationDialog";
+export var withConfirmation = function withConfirmation(dialogProps) {
+  return function (Component) {
+    return function withConfirmationRender(ownProps) {
+      var props = typeof dialogProps === "function" ? dialogProps(ownProps) : dialogProps;
+      return /*#__PURE__*/React.createElement(ConfirmationDialog, props, function (_ref) {
+        var showConfirmation = _ref.showConfirmation;
+        return /*#__PURE__*/React.createElement(Component, Object.assign({}, ownProps, {
+          showConfirmation: showConfirmation
+        }));
+      });
+    };
+  };
+};

package/Dialog/Dialog.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { DialogProps as RmwcDialogProps, DialogOnCloseEventT, DialogContentProps as RmwcDialogContentProps, DialogTitleProps as RmwcDialogTitleProps, DialogActionsProps as RmwcDialogActionsProps, DialogButtonProps as RmwcDialogButtonProps } from "@rmwc/dialog";
+export declare type DialogOnClose = (event: DialogOnCloseEventT) => void;
+export declare type DialogProps = RmwcDialogProps & {
+    children: any;
+    className?: string;
+    style?: React.CSSProperties;
+    open?: boolean;
+    onClose?: (evt: DialogOnCloseEventT) => void;
+    preventOutsideDismiss?: boolean;
+};
+export declare class Dialog extends React.Component<DialogProps> {
+    container?: Element;
+    constructor(props: any);
+    render(): React.ReactPortal;
+}
+export declare type DialogTitleProps = RmwcDialogTitleProps & {
+    /**
+     * Title text.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+};
+/**
+ * Dialog's header, which can accept DialogHeaderTitle component or any other set of components.
+ */
+export declare const DialogTitle: (props: DialogTitleProps) => JSX.Element;
+export declare type DialogContentProps = RmwcDialogContentProps & {
+    /**
+     * Dialog content.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    className?: string;
+};
+/**
+ * A simple component for showing dialog's body.
+ */
+export declare const DialogContent: (props: DialogContentProps) => JSX.Element;
+export declare type DialogActionsProps = RmwcDialogActionsProps & {
+    /**
+     * Action buttons.
+     */
+    children: React.ReactNode[] | React.ReactNode;
+    style?: React.CSSProperties;
+};
+/**
+ * Can be used to show accept and cancel buttons.
+ */
+export declare const DialogActions: (props: DialogActionsProps) => JSX.Element;
+declare type DialogButtonProps = RmwcDialogButtonProps & {
+    /**
+     * Callback to execute then button is clicked.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    className?: string;
+};
+/**
+ * Use this to show a simple button.
+ */
+export declare const DialogButton: (props: DialogButtonProps) => JSX.Element;
+declare type DialogCancelProps = RmwcDialogButtonProps & {
+    /**
+     * Children elements.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback to execute then button is clicked.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+};
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+export declare const DialogCancel: (props: DialogCancelProps) => JSX.Element;
+declare type DialogAcceptProps = RmwcDialogButtonProps & {
+    /**
+     * Children elements.
+     */
+    children: React.ReactNode;
+    /**
+     * Callback to execute then button is clicked.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+};
+/**
+ * Use this to close the dialog without taking any additional action.
+ */
+export declare const DialogAccept: (props: DialogAcceptProps) => JSX.Element;
+export {};