@webiny/app-admin 0.0.0-mt-1

package/ui/views/AdminView/HeaderElement.js

@@ -0,0 +1,111 @@
+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 React from "react";
+import { UIElement } from "../../UIElement";
+import { TopAppBarPrimary, TopAppBarTitle } from "@webiny/ui/TopAppBar";
+import { GenericElement } from "../../elements/GenericElement";
+import { PlaceholderElement } from "../../elements/PlaceholderElement";
+import { HeaderSectionLeftElement } from "./HeaderSectionLeftElement";
+import { HeaderSectionCenterElement } from "./HeaderSectionCenterElement";
+import { HeaderSectionRightElement } from "./HeaderSectionRightElement";
+import Hamburger from "./components/Hamburger";
+import { UIRenderer } from "../../UIRenderer";
+var ElementID;
+
+(function (ElementID) {
+  ElementID["MenuButton"] = "headerMenuButton";
+  ElementID["Logo"] = "headerLogo";
+})(ElementID || (ElementID = {}));
+
+var HeaderElementRenderer = /*#__PURE__*/function (_UIRenderer) {
+  _inherits(HeaderElementRenderer, _UIRenderer);
+
+  var _super = _createSuper(HeaderElementRenderer);
+
+  function HeaderElementRenderer() {
+    _classCallCheck(this, HeaderElementRenderer);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(HeaderElementRenderer, [{
+    key: "render",
+    value: function render(_ref) {
+      var next = _ref.next;
+      return /*#__PURE__*/React.createElement(TopAppBarPrimary, {
+        fixed: true
+      }, next());
+    }
+  }]);
+
+  return HeaderElementRenderer;
+}(UIRenderer);
+
+export var HeaderElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(HeaderElement, _UIElement);
+
+  var _super2 = _createSuper(HeaderElement);
+
+  function HeaderElement(id) {
+    var _this;
+
+    _classCallCheck(this, HeaderElement);
+
+    _this = _super2.call(this, id);
+
+    _this.useGrid(false);
+
+    var leftSection = _this.addElement(new HeaderSectionLeftElement("headerLeft"));
+
+    leftSection.addElement(new PlaceholderElement(ElementID.MenuButton));
+    leftSection.addElement(new PlaceholderElement(ElementID.Logo));
+
+    _this.addElement(new HeaderSectionCenterElement("headerCenter"));
+
+    _this.addElement(new HeaderSectionRightElement("headerRight"));
+
+    _this.addRenderer(new HeaderElementRenderer());
+
+    _this.setMenuButton( /*#__PURE__*/React.createElement(Hamburger, null));
+
+    _this.applyPlugins(HeaderElement);
+
+    return _this;
+  }
+
+  _createClass(HeaderElement, [{
+    key: "getLeftSection",
+    value: function getLeftSection() {
+      return this.getElement("headerLeft");
+    }
+  }, {
+    key: "getCenterSection",
+    value: function getCenterSection() {
+      return this.getElement("headerCenter");
+    }
+  }, {
+    key: "getRightSection",
+    value: function getRightSection() {
+      return this.getElement("headerRight");
+    }
+  }, {
+    key: "setLogo",
+    value: function setLogo(logo) {
+      // TODO: extract into a `LogoElement` class
+      this.getElement(ElementID.Logo).replaceWith(new GenericElement(ElementID.Logo, function () {
+        return /*#__PURE__*/React.createElement(TopAppBarTitle, null, logo);
+      }));
+    }
+  }, {
+    key: "setMenuButton",
+    value: function setMenuButton(menuButton) {
+      this.getElement(ElementID.MenuButton).replaceWith(new GenericElement(ElementID.MenuButton, function () {
+        return menuButton;
+      }));
+    }
+  }]);
+
+  return HeaderElement;
+}(UIElement);

package/ui/views/AdminView/HeaderSectionCenterElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { UIElement } from "../../UIElement";
+export declare class HeaderSectionCenterElement extends UIElement {
+    constructor(id: string);
+    render(props: any): React.ReactNode;
+}

package/ui/views/AdminView/HeaderSectionCenterElement.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { css } from "emotion";
+import { UIElement } from "../../UIElement";
+import { TopAppBarSection } from "@webiny/ui/TopAppBar";
+var middleBar = /*#__PURE__*/css({
+  width: "50%"
+}, "label:middleBar;");
+export var HeaderSectionCenterElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(HeaderSectionCenterElement, _UIElement);
+
+  var _super = _createSuper(HeaderSectionCenterElement);
+
+  function HeaderSectionCenterElement(id) {
+    var _this;
+
+    _classCallCheck(this, HeaderSectionCenterElement);
+
+    _this = _super.call(this, id);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(HeaderSectionCenterElement, [{
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(TopAppBarSection, {
+        className: middleBar,
+        alignEnd: true
+      }, _get(_getPrototypeOf(HeaderSectionCenterElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return HeaderSectionCenterElement;
+}(UIElement);

package/ui/views/AdminView/HeaderSectionLeftElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { UIElement } from "../../UIElement";
+export declare class HeaderSectionLeftElement extends UIElement {
+    constructor(id: string);
+    render(props: any): React.ReactNode;
+}

package/ui/views/AdminView/HeaderSectionLeftElement.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { css } from "emotion";
+import { UIElement } from "../../UIElement";
+import { TopAppBarSection } from "@webiny/ui/TopAppBar";
+var edgeBars = /*#__PURE__*/css({
+  width: "25%"
+}, "label:edgeBars;");
+export var HeaderSectionLeftElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(HeaderSectionLeftElement, _UIElement);
+
+  var _super = _createSuper(HeaderSectionLeftElement);
+
+  function HeaderSectionLeftElement(id) {
+    var _this;
+
+    _classCallCheck(this, HeaderSectionLeftElement);
+
+    _this = _super.call(this, id);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(HeaderSectionLeftElement, [{
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(TopAppBarSection, {
+        className: edgeBars,
+        alignStart: true
+      }, _get(_getPrototypeOf(HeaderSectionLeftElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return HeaderSectionLeftElement;
+}(UIElement);

package/ui/views/AdminView/HeaderSectionRightElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { UIElement } from "../../UIElement";
+export declare class HeaderSectionRightElement extends UIElement {
+    constructor(id: string);
+    render(props: any): React.ReactNode;
+}

package/ui/views/AdminView/HeaderSectionRightElement.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import { css } from "emotion";
+import { UIElement } from "../../UIElement";
+import { TopAppBarSection } from "@webiny/ui/TopAppBar";
+var edgeBars = /*#__PURE__*/css({
+  width: "25%"
+}, "label:edgeBars;");
+export var HeaderSectionRightElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(HeaderSectionRightElement, _UIElement);
+
+  var _super = _createSuper(HeaderSectionRightElement);
+
+  function HeaderSectionRightElement(id) {
+    var _this;
+
+    _classCallCheck(this, HeaderSectionRightElement);
+
+    _this = _super.call(this, id);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(HeaderSectionRightElement, [{
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(TopAppBarSection, {
+        className: edgeBars,
+        alignEnd: true
+      }, _get(_getPrototypeOf(HeaderSectionRightElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return HeaderSectionRightElement;
+}(UIElement);

package/ui/views/AdminView/components/Dialog.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DialogContainer: React.FC;

package/ui/views/AdminView/components/Dialog.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _get from "lodash/get";
+import React, { useCallback } from "react";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { Dialog, DialogAccept, DialogTitle, DialogActions, DialogContent } from "@webiny/ui/Dialog";
+export var DialogContainer = function DialogContainer() {
+  var ui = useUi();
+
+  var message = _get(ui, "dialog.message");
+
+  var _get2 = _get(ui, "dialog.options", {}),
+      dataTestId = _get2.dataTestId,
+      title = _get2.title,
+      _get2$actions = _get2.actions,
+      actions = _get2$actions === void 0 ? {
+    cancel: null,
+    accept: {
+      label: "OK"
+    }
+  } : _get2$actions,
+      style = _get2.style;
+
+  var hideDialog = useCallback(function () {
+    ui.setState(function (ui) {
+      return _objectSpread(_objectSpread({}, ui), {}, {
+        dialog: null
+      });
+    });
+  }, [ui]);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    open: !!message,
+    onClose: hideDialog,
+    "data-testid": dataTestId,
+    style: style
+  }, title && /*#__PURE__*/React.createElement(DialogTitle, null, title), /*#__PURE__*/React.createElement(DialogContent, null, message), /*#__PURE__*/React.createElement(DialogActions, null, actions.cancel && /*#__PURE__*/React.createElement(DialogAccept, {
+    onClick: actions.cancel.onClick
+  }, actions.cancel.label), actions.accept && /*#__PURE__*/React.createElement(DialogAccept, {
+    onClick: actions.accept.onClick
+  }, actions.accept.label)));
+};

package/ui/views/AdminView/components/Hamburger.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Hamburger: () => JSX.Element;
+export default Hamburger;

package/ui/views/AdminView/components/Hamburger.js

@@ -0,0 +1,25 @@
+import React, { useCallback } from "react";
+import { get, set } from "dot-prop-immutable";
+import { useUi } from "@webiny/app/hooks/useUi";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as MenuIcon } from "@svgr/webpack!../../../../assets/icons/baseline-menu-24px.svg";
+
+var Hamburger = function Hamburger() {
+  var ui = useUi();
+  var toggleMenu = useCallback(function () {
+    ui.setState(function (ui) {
+      return set(ui, "appsMenu.show", !(get(ui, "appsMenu.show") || false));
+    });
+  }, [ui]);
+  return /*#__PURE__*/React.createElement(IconButton, {
+    icon: /*#__PURE__*/React.createElement(MenuIcon, {
+      style: {
+        color: "white"
+      }
+    }),
+    onClick: toggleMenu,
+    "data-testid": "apps-menu"
+  });
+};
+
+export default Hamburger;

package/ui/views/AdminView/components/Snackbar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SnackbarMain: () => JSX.Element;
+export default SnackbarMain;

package/ui/views/AdminView/components/Snackbar.js

@@ -0,0 +1,28 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _get from "lodash/get";
+import React, { useCallback } from "react";
+import { Snackbar } from "@webiny/ui/Snackbar";
+import { useUi } from "@webiny/app/hooks/useUi";
+
+var SnackbarMain = function SnackbarMain() {
+  var ui = useUi();
+
+  var message = _get(ui, "snackbar.message");
+
+  var options = _get(ui, "snackbar.options", {});
+
+  var hideSnackbar = useCallback(function () {
+    ui.setState(function (ui) {
+      return _objectSpread(_objectSpread({}, ui), {}, {
+        snackbar: null
+      });
+    });
+  }, [ui]);
+  return /*#__PURE__*/React.createElement(Snackbar, Object.assign({
+    open: !!message,
+    onClose: hideSnackbar,
+    message: message
+  }, options));
+};
+
+export default SnackbarMain;

package/ui/views/AdminView.d.ts

@@ -0,0 +1,12 @@
+import { UIView } from "../UIView";
+import { UIElement } from "../UIElement";
+import { HeaderElement } from "./AdminView/HeaderElement";
+import { ContentElement } from "./AdminView/ContentElement";
+export declare class AdminView extends UIView {
+    private _title;
+    constructor();
+    setTitle(title: string): void;
+    setContentElement(element: UIElement): void;
+    getHeaderElement(): HeaderElement;
+    getContentElement(): ContentElement;
+}

package/ui/views/AdminView.js

@@ -0,0 +1,90 @@
+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 React from "react";
+import Helmet from "react-helmet";
+import { UIView } from "../UIView";
+import { GenericElement } from "../elements/GenericElement";
+import { ViewElement } from "../elements/ViewElement";
+import { HeaderElement } from "./AdminView/HeaderElement";
+import { ContentElement } from "./AdminView/ContentElement";
+import { NavigationView } from "./NavigationView";
+import Snackbar from "./AdminView/components/Snackbar";
+import { DialogContainer } from "./AdminView/components/Dialog";
+export var AdminView = /*#__PURE__*/function (_UIView) {
+  _inherits(AdminView, _UIView);
+
+  var _super = _createSuper(AdminView);
+
+  function AdminView() {
+    var _this;
+
+    _classCallCheck(this, AdminView);
+
+    _this = _super.call(this, "AdminView");
+
+    _defineProperty(_assertThisInitialized(_this), "_title", void 0);
+
+    _this.useGrid(false);
+
+    _this.addElement(new GenericElement("helmet", function () {
+      return _this._title ? /*#__PURE__*/React.createElement(Helmet, {
+        title: _this._title
+      }) : null;
+    }));
+
+    _this.addElement(new HeaderElement("header"));
+
+    _this.addElement(new ContentElement("content"));
+
+    _this.addElement(new ViewElement("navigation", {
+      view: new NavigationView()
+    }));
+
+    _this.addElement(new GenericElement("snackbarContainer", function () {
+      return /*#__PURE__*/React.createElement(Snackbar, null);
+    }));
+
+    _this.addElement(new GenericElement("dialogContainer", function () {
+      return /*#__PURE__*/React.createElement(DialogContainer, null);
+    })); // Apply plugins
+
+
+    _this.applyPlugins(AdminView);
+
+    return _this;
+  }
+
+  _createClass(AdminView, [{
+    key: "setTitle",
+    value: function setTitle(title) {
+      this._title = title;
+    }
+  }, {
+    key: "setContentElement",
+    value: function setContentElement(element) {
+      var content = this.getContentElement(); // Remove previous content
+
+      content.getChildren().forEach(function (el) {
+        return el.remove();
+      }); // Add new content
+
+      content.addElement(element);
+    }
+  }, {
+    key: "getHeaderElement",
+    value: function getHeaderElement() {
+      return this.getElement("header");
+    }
+  }, {
+    key: "getContentElement",
+    value: function getContentElement() {
+      return this.getElement("content");
+    }
+  }]);
+
+  return AdminView;
+}(UIView);

package/ui/views/FormView/FormContainerElement.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { UIElement, UIElementConfig } from "../../UIElement";
+interface FormContainerConfig extends UIElementConfig {
+    testId?: string;
+    noElevation?: boolean;
+    className?: string;
+}
+export declare class FormContainerElement extends UIElement<FormContainerConfig> {
+    constructor(id: string, config: FormContainerConfig);
+    render(props: any): JSX.Element;
+}
+export {};

package/ui/views/FormView/FormContainerElement.js

@@ -0,0 +1,51 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import classNames from "classnames";
+import styled from "@emotion/styled";
+import { Elevation } from "@webiny/ui/Elevation";
+import { UIElement } from "../../UIElement";
+var FormContainerWrapper = /*#__PURE__*/styled("div", {
+  target: "eyimbyl0",
+  label: "FormContainerWrapper"
+})({
+  position: "relative",
+  margin: "17px 50px"
+});
+export var FormContainerElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(FormContainerElement, _UIElement);
+
+  var _super = _createSuper(FormContainerElement);
+
+  function FormContainerElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, FormContainerElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(FormContainerElement, [{
+    key: "render",
+    value: function render(props) {
+      var children = _get(_getPrototypeOf(FormContainerElement.prototype), "render", this).call(this, props);
+
+      return /*#__PURE__*/React.createElement(FormContainerWrapper, {
+        className: classNames("webiny-data-list", this.config.className),
+        "data-testid": this.config.testId
+      }, this.config.noElevation ? children : /*#__PURE__*/React.createElement(Elevation, {
+        z: 1
+      }, children));
+    }
+  }]);
+
+  return FormContainerElement;
+}(UIElement);

package/ui/views/FormView/FormContentElement.d.ts

@@ -0,0 +1,3 @@
+import { UIElement } from "../../UIElement";
+export declare class FormContentElement extends UIElement {
+}

package/ui/views/FormView/FormContentElement.js

@@ -0,0 +1,17 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import { UIElement } from "../../UIElement";
+export var FormContentElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(FormContentElement, _UIElement);
+
+  var _super = _createSuper(FormContentElement);
+
+  function FormContentElement() {
+    _classCallCheck(this, FormContentElement);
+
+    return _super.apply(this, arguments);
+  }
+
+  return FormContentElement;
+}(UIElement);

package/ui/views/FormView/FormFooterElement.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { UIElement } from "../../UIElement";
+export declare class FormFooterElement extends UIElement {
+    constructor(id: any);
+    render(props: any): JSX.Element;
+}

package/ui/views/FormView/FormFooterElement.js

@@ -0,0 +1,49 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import React from "react";
+import styled from "@emotion/styled";
+import { UIElement } from "../../UIElement";
+var ButtonWrapper = /*#__PURE__*/styled("div", {
+  target: "es96np90",
+  label: "ButtonWrapper"
+})({
+  display: "flex",
+  justifyContent: "space-between",
+  borderTop: "1px solid var(--mdc-theme-on-background)",
+  color: "var(--mdc-theme-text-primary-on-background)",
+  textAlign: "right",
+  padding: 25,
+  ">:last-child": {
+    marginLeft: "auto"
+  }
+});
+export var FormFooterElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(FormFooterElement, _UIElement);
+
+  var _super = _createSuper(FormFooterElement);
+
+  function FormFooterElement(id) {
+    var _this;
+
+    _classCallCheck(this, FormFooterElement);
+
+    _this = _super.call(this, id);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(FormFooterElement, [{
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(ButtonWrapper, null, _get(_getPrototypeOf(FormFooterElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return FormFooterElement;
+}(UIElement);

package/ui/views/FormView/FormHeaderElement.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../../UIElement";
+import { FormElementRenderProps } from "../../elements/form/FormElement";
+interface FormHeaderConfig extends UIElementConfig {
+    getTitle(props: FormElementRenderProps): string;
+    icon?: React.ReactElement;
+}
+export declare class FormHeaderElement extends UIElement<FormHeaderConfig> {
+    constructor(id: any, config: FormHeaderConfig);
+    setIcon(icon: React.ReactElement): void;
+    addAction(element: UIElement): void;
+    render(props: any): any;
+}
+export {};