@webiny/app-admin 0.0.0-mt-1

package/components/RichTextEditor/tools/textColor/index.js

@@ -0,0 +1,232 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var COLOR_TOOL_CLASS = "cdx-text-color";
+
+var TextColorTool = /*#__PURE__*/function () {
+  function TextColorTool(_ref) {
+    var api = _ref.api,
+        config = _ref.config;
+
+    _classCallCheck(this, TextColorTool);
+
+    _defineProperty(this, "_state", void 0);
+
+    _defineProperty(this, "color", void 0);
+
+    _defineProperty(this, "api", void 0);
+
+    _defineProperty(this, "tag", void 0);
+
+    _defineProperty(this, "class", void 0);
+
+    _defineProperty(this, "colorPicker", void 0);
+
+    _defineProperty(this, "button", void 0);
+
+    _defineProperty(this, "config", void 0);
+
+    _defineProperty(this, "_CSS", void 0);
+
+    this.api = api;
+    this.button = null;
+    this._state = false;
+    this.tag = "SPAN";
+    this.color = "red";
+    this.class = COLOR_TOOL_CLASS;
+    this.config = config || {
+      themeColors: ["#44bd32"]
+    };
+    this._CSS = {
+      colorPicker: "ce-text-color-tool",
+      colorBox: "ce-text-color-tool__color-box",
+      colorBoxActive: "ce-text-color-tool__color-box--active"
+    };
+  }
+
+  _createClass(TextColorTool, [{
+    key: "state",
+    get: function get() {
+      return this._state;
+    },
+    set: function set(state) {
+      this._state = state;
+      this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
+    }
+    /**
+     * Render method must return HTML element of the button for Inline Toolbar.
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      this.button = document.createElement("button");
+      this.button.type = "button";
+      this.button.innerHTML = '<svg width="20" height="18"><path d="M10.458 12.04l2.919 1.686-.781 1.417-.984-.03-.974 1.687H8.674l1.49-2.583-.508-.775.802-1.401zm.546-.952l3.624-6.327a1.597 1.597 0 0 1 2.182-.59 1.632 1.632 0 0 1 .615 2.201l-3.519 6.391-2.902-1.675zm-7.73 3.467h3.465a1.123 1.123 0 1 1 0 2.247H3.273a1.123 1.123 0 1 1 0-2.247z"/></svg>';
+      this.button.classList.add(this.api.styles.inlineToolButton);
+      return this.button;
+    }
+    /**
+     * Input for the link
+     */
+
+  }, {
+    key: "renderActions",
+    value: function renderActions() {
+      var _this = this;
+
+      // Create action element
+      this.colorPicker = document.createElement("div"); // Add element properties
+
+      this.colorPicker.classList.add(this._CSS.colorPicker);
+      this.config.themeColors.forEach(function (color) {
+        // create element
+        var colorBox = document.createElement("button"); // add properties
+
+        colorBox.style.backgroundColor = color;
+        colorBox.classList.add(_this._CSS.colorBox);
+        colorBox.addEventListener("click", function () {
+          if (_this.color === color) {
+            // reset the color
+            _this.color = "unset";
+          } else {
+            // set color
+            _this.color = color;
+          }
+
+          _this.colorPicker.childNodes.forEach(function (node) {
+            if (node.classList.contains(_this._CSS.colorBoxActive)) {
+              // remove active class
+              node.classList.remove(_this._CSS.colorBoxActive);
+            }
+          }); // add active class
+
+
+          colorBox.classList.add(_this._CSS.colorBoxActive);
+        }); // save element
+
+        _this.colorPicker.appendChild(colorBox);
+      }); // Return element
+
+      return this.colorPicker;
+    }
+    /**
+     * Finally, when button is pressed Editor calls
+     * surround method of the tool with Range object as an argument.
+     * @param range
+     */
+
+  }, {
+    key: "surround",
+    value: function surround(range) {
+      if (this.state) {
+        this.unwrap(range);
+        return;
+      }
+
+      this.wrap(range);
+    }
+  }, {
+    key: "wrap",
+    value: function wrap(range) {
+      var selectedText = range.extractContents();
+      var mark = document.createElement(this.tag);
+      mark.classList.add(this.class);
+      mark.appendChild(selectedText);
+      range.insertNode(mark);
+      this.api.selection.expandToTag(mark);
+    }
+  }, {
+    key: "unwrap",
+    value: function unwrap(range) {
+      var mark = this.api.selection.findParentTag(this.tag, this.class);
+      var text = range.extractContents();
+      mark.remove();
+      range.insertNode(text);
+    }
+  }, {
+    key: "showActions",
+    value: function showActions(mark) {
+      var _this2 = this;
+
+      this.colorPicker.onclick = function () {
+        mark.style.color = _this2.color;
+      };
+
+      this.colorPicker.hidden = false;
+    }
+  }, {
+    key: "hideActions",
+    value: function hideActions() {
+      this.colorPicker.onchange = null;
+      this.colorPicker.hidden = true;
+    }
+    /**
+     * CheckState method of each Inline Tool is called by Editor with current `Selection`
+     * when user selects some text
+     */
+
+  }, {
+    key: "checkState",
+    value: function checkState() {
+      var mark = this.api.selection.findParentTag(this.tag);
+      this.state = !!mark;
+
+      if (this.state) {
+        this.showActions(mark);
+      } else {
+        this.hideActions();
+      }
+    }
+  }, {
+    key: "convertToHex",
+    value: function convertToHex(color) {
+      var rgb = color.match(/(\d+)/g);
+      var hexR = parseInt(rgb[0]).toString(16);
+      var hexG = parseInt(rgb[1]).toString(16);
+      var hexB = parseInt(rgb[2]).toString(16);
+      hexR = hexR.length === 1 ? "0" + hexR : hexR;
+      hexG = hexG.length === 1 ? "0" + hexG : hexG;
+      hexB = hexB.length === 1 ? "0" + hexB : hexB;
+      return "#" + hexR + hexG + hexB;
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.hideActions();
+    }
+  }], [{
+    key: "isInline",
+    get: function get() {
+      return true;
+    }
+    /**
+     * Sanitize method returns rules to let Editor know which HTML tags it should respect.
+     * @returns {object} sanitizer configuration.
+     * https://editorjs.io/sanitizer
+     */
+
+  }, {
+    key: "sanitize",
+    get: function get() {
+      // Block Tools are not connected with Inline ones,
+      // so markup added by Inline Tool will be removed on pasting or on saving.
+      // We need this config so that `class` & `style` attributes will remain intact for "span".
+      return {
+        span: function span(el) {
+          // Respect `class` and `style` attributes if this condition is meet.
+          if (el.classList.contains(COLOR_TOOL_CLASS)) {
+            return {
+              class: COLOR_TOOL_CLASS,
+              style: el.style
+            };
+          }
+        }
+      };
+    }
+  }]);
+
+  return TextColorTool;
+}();
+
+export default TextColorTool;

package/components/RichTextEditor/tools/textColor/styles.scss

@@ -0,0 +1,21 @@
+.ce-text-color-tool {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  gap: 16px 16px;
+  padding: 16px;
+  border-top: 1px solid #eee;
+}
+.ce-text-color-tool__color-box {
+  width: 42px;
+  height: 30px;
+  padding: 8px 12px;
+  margin: 0;
+  border: none;
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+  cursor: pointer;
+}
+.ce-text-color-tool__color-box--active {
+  border: 1px solid #616161;
+}

package/components/RichTextEditor/tools/utils.d.ts

@@ -0,0 +1,19 @@
+export declare enum TextAlign {
+    START = "start",
+    END = "end",
+    CENTER = "center"
+}
+export declare type Alignment = {
+    name: TextAlign;
+    svg: string;
+};
+export declare const ALIGNMENT_ICONS: {
+    start: string;
+    end: string;
+    center: string;
+    justify: string;
+};
+export declare const ALIGNMENTS: {
+    name: TextAlign;
+    svg: string;
+}[];

package/components/RichTextEditor/tools/utils.js

@@ -0,0 +1,24 @@
+export var TextAlign;
+
+(function (TextAlign) {
+  TextAlign["START"] = "start";
+  TextAlign["END"] = "end";
+  TextAlign["CENTER"] = "center";
+})(TextAlign || (TextAlign = {}));
+
+export var ALIGNMENT_ICONS = {
+  start: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\n' + '  <path fill="none" d="M0 0h24v24H0V0z"/>\n' + "  <g>\n" + '    <path fill="currentColor" d="M14 15H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zm0-8H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zM4 13h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/>\n' + "  </g>\n" + "</svg>",
+  end: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\n' + '  <path fill="none" d="M0 0h24v24H0V0z"/>\n' + "  <g>\n" + '    <path fill="currentColor" d="M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zm-6-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm6-4h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/>\n' + "  </g>\n" + "</svg>",
+  center: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\n' + '  <path fill="none" d="M0 0h24v24H0V0z"/>\n' + "  <g>\n" + '    <path fill="currentColor" d="M7 16c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zm-3 5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm3-5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/>\n' + "  </g>\n" + "</svg>",
+  justify: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\n' + '  <path fill="none" d="M0 0h24v24H0V0z"/>\n' + "  <g>\n" + '    <path fill="currentColor" d="M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/>\n' + "  </g>\n" + "</svg>"
+};
+export var ALIGNMENTS = [{
+  name: TextAlign.START,
+  svg: ALIGNMENT_ICONS.start
+}, {
+  name: TextAlign.CENTER,
+  svg: ALIGNMENT_ICONS.center
+}, {
+  name: TextAlign.END,
+  svg: ALIGNMENT_ICONS.end
+}];

package/components/SearchUI.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type SearchProps = {
+    value: string;
+    onChange: (value: string) => void;
+    inputPlaceholder?: string;
+};
+declare const Search: ({ value, onChange, inputPlaceholder }: SearchProps) => JSX.Element;
+export default Search;

package/components/SearchUI.js

@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "@emotion/styled";
+import InputField from "./SimpleUI/InputField";
+import { ReactComponent as SearchIcon } from "@svgr/webpack!../assets/icons/search-24px.svg";
+var SearchWrapper = /*#__PURE__*/styled("div", {
+  target: "epa3kz70",
+  label: "SearchWrapper"
+})({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  position: "relative",
+  "& .search__icon": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    paddingLeft: "0.25rem",
+    color: "var(--mdc-theme-text-secondary-on-background)"
+  },
+  "& .search__input": {
+    width: "100%",
+    padding: "0.5rem 0.5rem 0.5rem 2.25rem",
+    outline: "none",
+    border: "none",
+    color: "var(--mdc-theme-text-primary-on-background)",
+    "&:focus": {
+      outline: "none"
+    },
+    "&::placeholder": {
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      color: "var(--mdc-theme-text-secondary-on-background)"
+    }
+  }
+});
+
+var Search = function Search(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      _ref$inputPlaceholder = _ref.inputPlaceholder,
+      inputPlaceholder = _ref$inputPlaceholder === void 0 ? "Search..." : _ref$inputPlaceholder;
+  return /*#__PURE__*/React.createElement(SearchWrapper, {
+    "data-testid": "default-data-list.search"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "search__icon"
+  }, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(InputField, {
+    className: "search__input",
+    placeholder: inputPlaceholder,
+    value: value,
+    onChange: onChange,
+    autoComplete: "off"
+  }));
+};
+
+export default Search;

package/components/SimpleForm/SimpleForm.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+declare const title: string;
+declare const icon: string;
+export declare const SimpleForm: (props: {
+    children: React.ReactNode;
+    "data-testid"?: string;
+    noElevation?: boolean;
+    className?: string;
+}) => JSX.Element;
+export declare const SimpleFormHeader: (props: {
+    title: React.ReactNode;
+    icon?: React.ReactElement<any>;
+    children?: React.ReactNode;
+}) => JSX.Element;
+export declare const SimpleFormFooter: (props: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const SimpleFormContent: (props: {
+    children: any;
+}) => any;
+export {};

package/components/SimpleForm/SimpleForm.js

@@ -0,0 +1,75 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import { css } from "emotion";
+import classNames from "classnames";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Typography } from "@webiny/ui/Typography";
+import { Elevation } from "@webiny/ui/Elevation";
+import { Icon } from "@webiny/ui/Icon";
+var SimpleFormContainer = /*#__PURE__*/styled("div", {
+  target: "ep5jo8l0",
+  label: "SimpleFormContainer"
+})({
+  position: "relative",
+  margin: "17px 50px"
+});
+var header = /*#__PURE__*/css({
+  borderBottom: "1px solid var(--mdc-theme-on-background)",
+  color: "var(--mdc-theme-text-primary-on-background)"
+}, "label:header;");
+var title = /*#__PURE__*/css({
+  display: "flex",
+  alignItems: "center"
+}, "label:title;");
+var actions = /*#__PURE__*/css({
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "center"
+}, "label:actions;");
+var icon = /*#__PURE__*/css({
+  marginRight: 15,
+  color: "var(--mdc-theme-text-primary-on-background)"
+}, "label:icon;");
+var footer = /*#__PURE__*/css({
+  borderTop: "1px solid var(--mdc-theme-on-background)",
+  color: "var(--mdc-theme-text-primary-on-background)",
+  textAlign: "right",
+  "&.mdc-layout-grid": {
+    padding: 25 // "25px 50px"
+
+  }
+}, "label:footer;");
+export var SimpleForm = function SimpleForm(props) {
+  return /*#__PURE__*/React.createElement(SimpleFormContainer, {
+    className: classNames("webiny-data-list", props.className),
+    "data-testid": props["data-testid"]
+  }, props.noElevation ? props.children : /*#__PURE__*/React.createElement(Elevation, {
+    z: 1
+  }, props.children));
+};
+export var SimpleFormHeader = function SimpleFormHeader(props) {
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: header
+  }, /*#__PURE__*/React.createElement(Cell, {
+    span: props.children ? 6 : 12,
+    className: title
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, props.icon && /*#__PURE__*/React.createElement(Icon, {
+    className: icon,
+    icon: props.icon
+  }), /*#__PURE__*/React.createElement(Typography, {
+    use: "headline5"
+  }, props.title))), props.children && /*#__PURE__*/React.createElement(Cell, {
+    span: 6,
+    className: actions
+  }, props.children));
+};
+export var SimpleFormFooter = function SimpleFormFooter(props) {
+  return /*#__PURE__*/React.createElement(Grid, {
+    className: footer
+  }, /*#__PURE__*/React.createElement(Cell, {
+    span: 12
+  }, props.children));
+};
+export var SimpleFormContent = function SimpleFormContent(props) {
+  return props.children;
+};

package/components/SimpleForm/index.d.ts

@@ -0,0 +1 @@
+export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";

package/components/SimpleForm/index.js

@@ -0,0 +1 @@
+export { SimpleForm, SimpleFormHeader, SimpleFormFooter, SimpleFormContent } from "./SimpleForm";

package/components/SimpleUI/InputField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare type InputBoxProps = {
+    value?: string | number;
+    onChange?: (value: any) => void;
+    defaultValue?: string | number;
+    [key: string]: any;
+};
+declare const _default: React.MemoExoticComponent<({ className, value, onChange, label, description, validation, defaultValue, ...props }: InputBoxProps) => JSX.Element>;
+export default _default;

package/components/SimpleUI/InputField.js

@@ -0,0 +1,97 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "value", "onChange", "label", "description", "validation", "defaultValue"];
+import React from "react";
+import { css } from "emotion";
+import classNames from "classnames";
+import omit from "lodash/omit";
+import { Typography } from "@webiny/ui/Typography";
+import { FormElementMessage } from "@webiny/ui/FormElementMessage";
+var inputStyle = /*#__PURE__*/css({
+  boxSizing: "border-box",
+  border: "1px solid var(--mdc-theme-on-background)",
+  width: "100%",
+  height: "100%",
+  padding: "4px 8px",
+  textAlign: "left",
+  minHeight: 32,
+  backgroundColor: "var(--mdc-theme-surface)",
+  transition: "150ms all ease-in-out",
+  "&:focus:not(:disabled)": {
+    backgroundColor: "var(--mdc-theme-on-background)"
+  },
+  "&:hover:not(:disabled)": {
+    backgroundColor: "var(--mdc-theme-on-background)"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  "&.text-center": {
+    textAlign: "center",
+    padding: 4
+  },
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  }
+}, "label:inputStyle;");
+var labelStyle = /*#__PURE__*/css({
+  marginBottom: 8,
+  padding: "0px 8px",
+  "& span": {
+    color: "var(--mdc-theme-text-primary-on-background)"
+  }
+}, "label:labelStyle;");
+
+var getValue = function getValue(_ref) {
+  var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      type = _ref.type;
+
+  if (type === "number") {
+    return isNaN(value) ? defaultValue : value;
+  }
+
+  return value || defaultValue;
+};
+
+var InputField = function InputField(_ref2) {
+  var className = _ref2.className,
+      value = _ref2.value,
+      _onChange = _ref2.onChange,
+      label = _ref2.label,
+      description = _ref2.description,
+      _ref2$validation = _ref2.validation,
+      validation = _ref2$validation === void 0 ? {
+    isValid: true
+  } : _ref2$validation,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? "" : _ref2$defaultValue,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement("div", {
+    className: labelStyle
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle2"
+  }, label)), /*#__PURE__*/React.createElement("input", Object.assign({
+    className: classNames(inputStyle, className),
+    value: getValue({
+      value: value,
+      type: props.type,
+      defaultValue: defaultValue
+    }),
+    onChange: function onChange(_ref3) {
+      var value = _ref3.target.value;
+
+      _onChange(value.toLowerCase());
+    }
+  }, omit(props, "validate"))), validation.isValid === false && /*#__PURE__*/React.createElement(FormElementMessage, {
+    error: true
+  }, validation.message), validation.isValid !== false && description && /*#__PURE__*/React.createElement(FormElementMessage, null, description));
+};
+
+export default /*#__PURE__*/React.memo(InputField);

package/components/SingleImageUpload.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { FormComponentProps } from "@webiny/ui/types";
+declare type SingleImageUploadProps = FormComponentProps & {
+    accept?: string[];
+    label?: string;
+    disabled?: boolean;
+    description?: React.ReactNode;
+    className?: string;
+    maxSize?: number | string;
+    multipleMaxCount?: number;
+    multipleMaxSize?: number | string;
+    onChange?: Function;
+    imagePreviewProps?: any;
+    round?: boolean;
+    onChangePick?: string[];
+};
+export default class SingleImageUpload extends React.Component<SingleImageUploadProps> {
+    static defaultProps: {
+        validation: {
+            isValid: any;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};