@webiny/app-admin 0.0.0-mt-1

package/components/OverlayLayout/OverlayLayout.js

@@ -0,0 +1,159 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+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 = ["onExited", "barLeft", "barMiddle", "barRight", "children", "style"];
+import * as React from "react";
+import { Transition } from "react-transition-group";
+import styled from "@emotion/styled";
+import { css } from "emotion";
+import { TopAppBarSecondary, TopAppBarSection } from "@webiny/ui/TopAppBar";
+import { IconButton } from "@webiny/ui/Button";
+import noop from "lodash/noop";
+import { ReactComponent as CloseIcon } from "@svgr/webpack!./icons/close.svg";
+import { OverlayView } from "../../ui/views/OverlayView";
+var OverlayLayoutWrapper = /*#__PURE__*/styled("div", {
+  target: "e1inqa580",
+  label: "OverlayLayoutWrapper"
+})({
+  position: "fixed",
+  width: "100%",
+  height: "100vh",
+  backgroundColor: "var(--mdc-theme-background)",
+
+  /**
+   * Has to be higher than 5 so it's above advanced settings dialog,
+   * and below 20, so the image editor & Dialogs can be displayed above.
+   */
+  zIndex: 18,
+  paddingTop: 65,
+  top: 0,
+  left: 0
+});
+var noScroll = /*#__PURE__*/css({
+  overflow: "hidden",
+  height: "100vh"
+}, "label:noScroll;");
+var defaultStyle = {
+  transform: "translateY(75vh)",
+  opacity: 0,
+  transitionProperty: "transform, opacity",
+  transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
+  transitionDuration: "225ms",
+  willChange: "opacity, transform"
+};
+var transitionStyles = {
+  entering: {
+    transform: "translateY(75vh)",
+    opacity: 0
+  },
+  entered: {
+    transform: "translateY(0px)",
+    opacity: 1
+  }
+};
+export var OverlayLayout = /*#__PURE__*/function (_React$Component) {
+  _inherits(OverlayLayout, _React$Component);
+
+  var _super = _createSuper(OverlayLayout);
+
+  function OverlayLayout(props) {
+    var _this;
+
+    _classCallCheck(this, OverlayLayout);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isVisible: true
+    });
+
+    document.body.classList.add(noScroll);
+    return _this;
+  }
+
+  _createClass(OverlayLayout, [{
+    key: "hideComponent",
+    value: function hideComponent() {
+      this.setState({
+        isVisible: false
+      });
+
+      if (OverlayView.openedViews === 0) {
+        document.body.classList.remove(noScroll);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (OverlayView.openedViews === 0) {
+        document.body.classList.remove(noScroll);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          onExited = _this$props.onExited,
+          barLeft = _this$props.barLeft,
+          barMiddle = _this$props.barMiddle,
+          barRight = _this$props.barRight,
+          children = _this$props.children,
+          style = _this$props.style,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+      return /*#__PURE__*/React.createElement(Transition, {
+        in: this.state.isVisible,
+        timeout: 100,
+        appear: true,
+        onExited: onExited
+      }, function (state) {
+        return /*#__PURE__*/React.createElement(OverlayLayoutWrapper, Object.assign({}, rest, {
+          style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), style), transitionStyles[state])
+        }), /*#__PURE__*/React.createElement(TopAppBarSecondary, {
+          fixed: true,
+          style: {
+            top: 0
+          }
+        }, /*#__PURE__*/React.createElement(TopAppBarSection, {
+          style: {
+            width: "33%"
+          },
+          alignStart: true
+        }, barLeft), /*#__PURE__*/React.createElement(TopAppBarSection, {
+          style: {
+            width: "33%"
+          }
+        }, barMiddle), /*#__PURE__*/React.createElement(TopAppBarSection, {
+          style: {
+            width: "33%"
+          },
+          alignEnd: true
+        }, barRight, /*#__PURE__*/React.createElement(IconButton, {
+          ripple: false,
+          onClick: function onClick() {
+            return _this2.hideComponent();
+          },
+          icon: /*#__PURE__*/React.createElement(CloseIcon, {
+            style: {
+              width: 24,
+              height: 24
+            }
+          })
+        }))), children);
+      });
+    }
+  }]);
+
+  return OverlayLayout;
+}(React.Component);
+
+_defineProperty(OverlayLayout, "defaultProps", {
+  onExited: noop
+});

package/components/OverlayLayout/icons/close.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<path d="M18.3,5.71L18.3,5.71c-0.39-0.39-1.02-0.39-1.41,0L12,10.59L7.11,5.7c-0.39-0.39-1.02-0.39-1.41,0l0,0
+		c-0.39,0.39-0.39,1.02,0,1.41L10.59,12L5.7,16.89c-0.39,0.39-0.39,1.02,0,1.41h0c0.39,0.39,1.02,0.39,1.41,0L12,13.41l4.89,4.89
+		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L13.41,12l4.89-4.89C18.68,6.73,18.68,6.09,18.3,5.71z"/>
+</g>
+</svg>

package/components/OverlayLayout/icons/navigate_before.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_2">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_6">
+	</g>
+	<path d="M14.91,6.71L14.91,6.71c-0.39-0.39-1.02-0.39-1.41,0l-4.59,4.59c-0.39,0.39-0.39,1.02,0,1.41l4.59,4.59
+		c0.39,0.39,1.02,0.39,1.41,0l0,0c0.39-0.39,0.39-1.02,0-1.41L11.03,12l3.88-3.88C15.29,7.73,15.29,7.09,14.91,6.71z"/>
+</g>
+</svg>

package/components/OverlayLayout/index.d.ts

@@ -0,0 +1 @@
+export { OverlayLayout } from "./OverlayLayout";

package/components/OverlayLayout/index.js

@@ -0,0 +1 @@
+export { OverlayLayout } from "./OverlayLayout";

package/components/Permissions/Permissions.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BindComponentRenderProp } from "@webiny/form";
+declare type Props = BindComponentRenderProp & {
+    id: string;
+};
+export declare const Permissions: ({ id, value, onChange }: Props) => JSX.Element;
+export {};

package/components/Permissions/Permissions.js

@@ -0,0 +1,37 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { useMemo } from "react";
+import { Accordion } from "@webiny/ui/Accordion";
+import { plugins } from "@webiny/plugins";
+export var Permissions = function Permissions(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      onChange = _ref.onChange;
+
+  var _useMemo = useMemo(function () {
+    return plugins.byType("admin-app-permissions-renderer").reduce(function (acc, plugin) {
+      if (plugin.system === true) {
+        acc.systemPlugins.push(plugin);
+      } else {
+        acc.permissionPlugins.push(plugin);
+      }
+
+      return acc;
+    }, {
+      systemPlugins: [],
+      permissionPlugins: []
+    });
+  }, []),
+      systemPlugins = _useMemo.systemPlugins,
+      permissionPlugins = _useMemo.permissionPlugins;
+
+  return /*#__PURE__*/React.createElement(Accordion, {
+    elevation: 0
+  }, [].concat(_toConsumableArray(systemPlugins), _toConsumableArray(permissionPlugins)).map(function (pl) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: pl.name + "." + id
+    }, pl.render({
+      value: value,
+      onChange: onChange
+    }));
+  }));
+};

package/components/Permissions/StyledComponents.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const flexClass: string;
+export declare const gridNoPaddingClass: string;
+export declare const PermissionInfo: ({ title }: {
+    title: any;
+}) => JSX.Element;

package/components/Permissions/StyledComponents.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { css } from "emotion";
+import { Typography } from "@webiny/ui/Typography";
+export var flexClass = /*#__PURE__*/css({
+  display: "flex",
+  alignItems: "center",
+  height: "100%"
+}, "label:flexClass;");
+export var gridNoPaddingClass = /*#__PURE__*/css({
+  padding: "0px !important"
+}, "label:gridNoPaddingClass;");
+export var PermissionInfo = function PermissionInfo(_ref) {
+  var title = _ref.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: flexClass
+  }, /*#__PURE__*/React.createElement(Typography, {
+    use: "subtitle2"
+  }, title));
+};

package/components/Permissions/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./StyledComponents";
+export { Permissions } from "./Permissions";

package/components/Permissions/index.js

@@ -0,0 +1,2 @@
+export * from "./StyledComponents";
+export { Permissions } from "./Permissions";

package/components/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RichTextEditorProps } from "@webiny/ui/RichTextEditor";
+export declare const RichTextEditor: (props: RichTextEditorProps) => JSX.Element;

package/components/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import React from "react";
+import { RichTextEditor as UiRichTextEditor } from "@webiny/ui/RichTextEditor";
+import { FileManager } from "../FileManager";
+export var RichTextEditor = function RichTextEditor(props) {
+  return /*#__PURE__*/React.createElement(FileManager, null, function (_ref) {
+    var showFileManager = _ref.showFileManager;
+    return /*#__PURE__*/React.createElement(UiRichTextEditor, Object.assign({}, props, {
+      placeholder: props.placeholder || "Click here to type",
+      context: _objectSpread(_objectSpread({}, props.context), {}, {
+        showFileManager: showFileManager
+      })
+    }));
+  });
+};

package/components/RichTextEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { RichTextEditor } from "./RichTextEditor";
+export { createPropsFromConfig } from "@webiny/ui/RichTextEditor";

package/components/RichTextEditor/index.js

@@ -0,0 +1,2 @@
+export { RichTextEditor } from "./RichTextEditor";
+export { createPropsFromConfig } from "@webiny/ui/RichTextEditor";

package/components/RichTextEditor/styles.scss

@@ -0,0 +1,64 @@
+.codex-editor {
+  /**
+  * The context menu of the rich text editor is getting obscured if directly below is another rich text editor.
+  * This change help us fix that visual issue.
+  */
+  z-index: unset;
+
+  .codex-editor__redactor {
+    padding-bottom: 0 !important;
+  }
+
+  .ce-delimiter {
+    line-height: 1.6em;
+    width: 100%;
+    text-align: center;
+  }
+
+  .ce-delimiter:before {
+    display: inline-block;
+    content: "***";
+    font-size: 30px;
+    line-height: 65px;
+    height: 30px;
+    letter-spacing: 0.2em;
+  }
+
+  // Reset default styles
+  .ce-block__content:focus {
+    outline: none;
+  }
+  *:focus {
+    outline: none;
+  }
+  .ce-block__content {
+    max-width: 100% !important;
+  }
+
+  // Reset drop target styles for block
+  .ce-block--drop-target .ce-block__content:before {
+    content: none !important;
+  }
+  .ce-block--drop-target .ce-block__content:after {
+    content: none !important;
+  }
+
+  // Reset Toolbar style
+  .ce-toolbar__content {
+    max-width: 92%;
+  }
+}
+
+@media (min-width: 651px) {
+  .codex-editor--narrow .codex-editor__redactor {
+    margin-right: 0 !important;
+  }
+
+  .codex-editor--narrow .ce-toolbar__plus {
+    left: -35px !important;
+  }
+
+  .codex-editor--narrow .ce-toolbar__actions {
+    right: -30px !important;
+  }
+}

package/components/RichTextEditor/tools/header/index.d.ts

@@ -0,0 +1,228 @@
+import { API } from "@editorjs/editorjs";
+import { TextAlign, Alignment } from "../utils";
+declare type Typography = {
+    [key: string]: {
+        label: string;
+        component: string;
+        className: string;
+    };
+};
+declare type HeaderData = {
+    text: string;
+    level: any;
+    textAlign: TextAlign;
+};
+declare type HeaderConfig = {
+    levels: number[];
+    typography: Typography;
+};
+interface HeaderArgs {
+    data: HeaderData;
+    config: HeaderConfig;
+    api: any;
+    readOnly: boolean;
+}
+declare class Header {
+    api: API;
+    readOnly: boolean;
+    settingsButtons: any[];
+    _CSS: any;
+    _settings: any;
+    _data: any;
+    _element: any;
+    alignments: Alignment[];
+    typography: Typography;
+    /**
+     * Render plugin`s main Element and fill it with saved data
+     *
+     * @param {{data: HeaderData, config: HeaderConfig, api: object}}
+     *   data — previously saved data
+     *   config - user config for Tool
+     *   api - Editor.js API
+     *   readOnly - read only mode flag
+     */
+    constructor({ data, config, api, readOnly }: HeaderArgs);
+    /**
+     * Normalize input data
+     *
+     * @param {HeaderData} data - saved data to process
+     *
+     * @returns {HeaderData}
+     * @private
+     */
+    normalizeData(data: any): any;
+    /**
+     * Return Tool's view
+     *
+     * @returns {HTMLHeadingElement}
+     * @public
+     */
+    render(): any;
+    /**
+     * Create Block's settings block
+     *
+     * @returns {HTMLElement}
+     */
+    renderSettings(): HTMLElement;
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {number} level - level to set
+     */
+    setLevel(level: any): void;
+    /**
+     * Callback for Block's settings buttons
+     *
+     * @param {number} alignment - level to set
+     */
+    setAlignment(alignment: any): void;
+    /**
+     * Method that specified how to merge two Text blocks.
+     * Called by Editor.js by backspace at the beginning of the Block
+     *
+     * @param {HeaderData} data - saved data to merger with current block
+     * @public
+     */
+    merge(data: any): void;
+    /**
+     * Validate Text block data:
+     * - check for emptiness
+     *
+     * @param {HeaderData} blockData — data received after saving
+     * @returns {boolean} false if saved data is not correct, otherwise true
+     * @public
+     */
+    validate(blockData: any): boolean;
+    /**
+     * Extract Tool's data from the view
+     *
+     * @param {HTMLHeadingElement} toolsContent - Text tools rendered view
+     * @returns {HeaderData} - saved data
+     * @public
+     */
+    save(toolsContent: any): {
+        text: any;
+        level: number;
+        textAlign: TextAlign.START;
+        className: any;
+    };
+    /**
+     * Extract textAlign from className
+     *
+     * @param {string} className - heading element className
+     * @returns {TextAlign} textAlign
+     */
+    getTextAlign(className: any): TextAlign.START;
+    /**
+     * Allow Header to be converted to/from other blocks
+     */
+    static get conversionConfig(): {
+        export: string;
+        import: string;
+    };
+    /**
+     * Sanitizer Rules
+     */
+    static get sanitize(): {
+        level: boolean;
+        text: {};
+    };
+    /**
+     * Returns true to notify core that read-only is supported
+     *
+     * @returns {boolean}
+     */
+    static get isReadOnlySupported(): boolean;
+    /**
+     * Get current Tools`s data
+     *
+     * @returns {HeaderData} Current data
+     * @private
+     */
+    get data(): any;
+    /**
+     * Store data in plugin:
+     * - at the this._data property
+     * - at the HTML
+     *
+     * @param {HeaderData} data — data to set
+     * @private
+     */
+    set data(data: any);
+    /**
+     * Get tag for target level
+     * By default returns second-leveled header
+     *
+     * @returns {HTMLElement}
+     */
+    getTag(): HTMLElement;
+    /**
+     * Get current level
+     *
+     * @returns {level}
+     */
+    get currentLevel(): {
+        number: number;
+        tag: string;
+        svg: string;
+    };
+    /**
+     * Get current alignment
+     *
+     * @returns {alignment}
+     */
+    get currentAlignment(): Alignment;
+    /**
+     * Return default level
+     *
+     * @returns {level}
+     */
+    get defaultLevel(): {
+        number: number;
+        tag: string;
+        svg: string;
+    };
+    /**
+     * @typedef {object} level
+     * @property {number} number - level number
+     * @property {string} tag - tag corresponds with level number
+     * @property {string} svg - icon
+     */
+    /**
+     * Available header levels
+     *
+     * @returns {level[]}
+     */
+    get levels(): {
+        number: number;
+        tag: string;
+        svg: string;
+    }[];
+    /**
+     * Handle H1-H6 tags on paste to substitute it with header Tool
+     *
+     * @param {PasteEvent} event - event with pasted content
+     */
+    onPaste(event: any): void;
+    /**
+     * Used by Editor.js paste handling API.
+     * Provides configuration to handle H1-H6 tags.
+     *
+     * @returns {{handler: (function(HTMLElement): {text: string}), tags: string[]}}
+     */
+    static get pasteConfig(): {
+        tags: string[];
+    };
+    /**
+     * Get Tool toolbox settings
+     * icon - Tool icon's SVG
+     * title - title to show in toolbox
+     *
+     * @returns {{icon: string, title: string}}
+     */
+    static get toolbox(): {
+        icon: string;
+        title: string;
+    };
+}
+export default Header;