@webiny/app-admin 0.0.0-mt-1

package/ui/elements/AccordionElement.js

@@ -0,0 +1,86 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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";
+var _excluded = ["open"];
+import React from "react";
+import { UIElement } from "../UIElement";
+import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
+export var AccordionItemElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(AccordionItemElement, _UIElement);
+
+  var _super = _createSuper(AccordionItemElement);
+
+  function AccordionItemElement(id, config) {
+    _classCallCheck(this, AccordionItemElement);
+
+    return _super.call(this, id, config);
+  }
+
+  _createClass(AccordionItemElement, [{
+    key: "setTitle",
+    value: function setTitle(title) {
+      this.config.title = title;
+    }
+  }, {
+    key: "setDescription",
+    value: function setDescription(description) {
+      this.config.description = description;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this$config = this.config,
+          open = _this$config.open,
+          rest = _objectWithoutProperties(_this$config, _excluded);
+
+      var isOpened = typeof open === "function" ? open(props) : open;
+      return /*#__PURE__*/React.createElement(AccordionItem, Object.assign({
+        open: isOpened
+      }, rest), _get(_getPrototypeOf(AccordionItemElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return AccordionItemElement;
+}(UIElement);
+export var AccordionElement = /*#__PURE__*/function (_UIElement2) {
+  _inherits(AccordionElement, _UIElement2);
+
+  var _super2 = _createSuper(AccordionElement);
+
+  function AccordionElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, AccordionElement);
+
+    _this = _super2.call(this, id, config);
+
+    _this.useGrid(false);
+
+    _this.config.items.forEach(function (item) {
+      _this.addElement(new AccordionItemElement(item.id, item));
+    });
+
+    return _this;
+  }
+
+  _createClass(AccordionElement, [{
+    key: "getAccordionItemElement",
+    value: function getAccordionItemElement(id) {
+      return this.getElement(id);
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      // @ts-ignore
+      return /*#__PURE__*/React.createElement(Accordion, {
+        elevation: 0
+      }, _get(_getPrototypeOf(AccordionElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return AccordionElement;
+}(UIElement);

package/ui/elements/ButtonElement.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../UIElement";
+export declare type ButtonElementType = "default" | "primary" | "secondary";
+export interface ButtonOnClick<TRenderProps = any> {
+    (props: TRenderProps): void;
+}
+interface GetterWithProps<TProps, TReturn> {
+    (props: TProps): TReturn;
+}
+export interface ButtonElementConfig<TRenderProps> extends UIElementConfig {
+    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;
+    label: string | GetterWithProps<TRenderProps, string>;
+    onClick: ButtonOnClick<TRenderProps>;
+}
+export declare class ButtonElement<TRenderProps = any> extends UIElement<ButtonElementConfig<TRenderProps>> {
+    setLabel<TProps extends TRenderProps = TRenderProps>(label: string | GetterWithProps<TProps, string>): void;
+    getLabel(props?: any): string;
+    setType(type: ButtonElementType): void;
+    getType(props?: any): ButtonElementType;
+    setOnClick(onClick: ButtonOnClick<TRenderProps>): void;
+    getOnClick(): ButtonOnClick<TRenderProps>;
+    render(props: any): React.ReactElement;
+}
+export {};

package/ui/elements/ButtonElement.js

@@ -0,0 +1,78 @@
+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 { ButtonDefault, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
+import { UIElement } from "../UIElement";
+var BUTTONS = {
+  default: ButtonDefault,
+  primary: ButtonPrimary,
+  secondary: ButtonSecondary
+};
+export var ButtonElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(ButtonElement, _UIElement);
+
+  var _super = _createSuper(ButtonElement);
+
+  function ButtonElement() {
+    _classCallCheck(this, ButtonElement);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ButtonElement, [{
+    key: "setLabel",
+    value: function setLabel(label) {
+      this.config.label = label;
+    }
+  }, {
+    key: "getLabel",
+    value: function getLabel(props) {
+      if (typeof this.config.label === "function") {
+        return this.config.label(props);
+      }
+
+      return this.config.label;
+    }
+  }, {
+    key: "setType",
+    value: function setType(type) {
+      this.config.type = type;
+    }
+  }, {
+    key: "getType",
+    value: function getType(props) {
+      if (typeof this.config.type === "function") {
+        return this.config.type(props);
+      }
+
+      return this.config.type;
+    }
+  }, {
+    key: "setOnClick",
+    value: function setOnClick(onClick) {
+      this.config.onClick = onClick;
+    }
+  }, {
+    key: "getOnClick",
+    value: function getOnClick() {
+      return this.config.onClick;
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var Component = BUTTONS[this.getType(props)];
+
+      var _onClick = this.getOnClick();
+
+      return /*#__PURE__*/React.createElement(Component, {
+        onClick: function onClick() {
+          return _onClick(props);
+        }
+      }, this.getLabel(props));
+    }
+  }]);
+
+  return ButtonElement;
+}(UIElement);

package/ui/elements/ButtonGroupElement.d.ts

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

package/ui/elements/ButtonGroupElement.js

@@ -0,0 +1,48 @@
+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 { UIElement } from "../UIElement";
+import styled from "@emotion/styled";
+var ButtonGroup = /*#__PURE__*/styled("div", {
+  target: "eztnaqv0",
+  label: "ButtonGroup"
+})({
+  display: "flex",
+  height: "100%",
+  width: "100%",
+  alignItems: "center",
+  justifyContent: "center",
+  "> button": {
+    marginRight: 15
+  }
+});
+export var ButtonGroupElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(ButtonGroupElement, _UIElement);
+
+  var _super = _createSuper(ButtonGroupElement);
+
+  function ButtonGroupElement(id) {
+    var _this;
+
+    _classCallCheck(this, ButtonGroupElement);
+
+    _this = _super.call(this, id);
+
+    _this.useGrid(false);
+
+    return _this;
+  }
+
+  _createClass(ButtonGroupElement, [{
+    key: "render",
+    value: function render(props) {
+      return /*#__PURE__*/React.createElement(ButtonGroup, null, _get(_getPrototypeOf(ButtonGroupElement.prototype), "render", this).call(this, props));
+    }
+  }]);
+
+  return ButtonGroupElement;
+}(UIElement);

package/ui/elements/GenericElement.d.ts

@@ -0,0 +1 @@
+export * from "@webiny/ui-composer/elements/GenericElement";

package/ui/elements/GenericElement.js

@@ -0,0 +1 @@
+export * from "@webiny/ui-composer/elements/GenericElement";

package/ui/elements/LabelElement.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../UIElement";
+export interface LabelElementConfig extends UIElementConfig {
+    text: string;
+}
+/**
+ * !GOOD FIRST ISSUE!
+ * Add support for `text` config and `setText` setter to accept functions.
+ * See example in ButtonElement: packages/app-admin/src/ui/elements/ButtonElement.tsx
+ */
+export declare class LabelElement extends UIElement<LabelElementConfig> {
+    constructor(id: string, config: LabelElementConfig);
+    getText(): string;
+    setText(text: string): void;
+    render(): React.ReactNode;
+}

package/ui/elements/LabelElement.js

@@ -0,0 +1,47 @@
+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 { UIElement } from "../UIElement";
+
+/**
+ * !GOOD FIRST ISSUE!
+ * Add support for `text` config and `setText` setter to accept functions.
+ * See example in ButtonElement: packages/app-admin/src/ui/elements/ButtonElement.tsx
+ */
+export var LabelElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(LabelElement, _UIElement);
+
+  var _super = _createSuper(LabelElement);
+
+  function LabelElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, LabelElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(LabelElement);
+
+    return _this;
+  }
+
+  _createClass(LabelElement, [{
+    key: "getText",
+    value: function getText() {
+      return this.config.text;
+    }
+  }, {
+    key: "setText",
+    value: function setText(text) {
+      this.config.text = text;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.config.text;
+    }
+  }]);
+
+  return LabelElement;
+}(UIElement);

package/ui/elements/NavigationMenuElement.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../UIElement";
+export interface NavigationMenuElementConfig extends UIElementConfig {
+    label: React.ReactNode;
+    icon?: React.ReactElement;
+    path?: string;
+    onClick?: Function;
+    testId?: string;
+    rel?: string;
+    target?: string;
+}
+export declare enum TAGS {
+    UTILS = "utils",
+    APP = "app"
+}
+export declare class NavigationMenuElement<TConfig extends NavigationMenuElementConfig = NavigationMenuElementConfig> extends UIElement<TConfig> {
+    private _isExpanded;
+    private _sorters;
+    constructor(id: string, config: TConfig);
+    addElement<TElement extends UIElement = UIElement>(element: TElement): TElement;
+    addSorter(sorter: Function): void;
+    get isExpanded(): boolean;
+    setIcon(icon: React.ReactElement): void;
+    setLabel(label: string): void;
+    setPath(path: string): void;
+    expandElement(): void;
+    collapseElement(): void;
+    toggleElement(): void;
+    private loadState;
+    private storeState;
+    private runSorters;
+}

package/ui/elements/NavigationMenuElement.js

@@ -0,0 +1,158 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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 _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { default as localStorage } from "store";
+import { UIElement } from "../UIElement";
+var LOCAL_STORAGE_KEY = "webiny_apps_menu_sections";
+export var TAGS;
+
+(function (TAGS) {
+  TAGS["UTILS"] = "utils";
+  TAGS["APP"] = "app";
+})(TAGS || (TAGS = {}));
+
+export var NavigationMenuElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(NavigationMenuElement, _UIElement);
+
+  var _super = _createSuper(NavigationMenuElement);
+
+  function NavigationMenuElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, NavigationMenuElement);
+
+    _this = _super.call(this, id, config);
+
+    _defineProperty(_assertThisInitialized(_this), "_isExpanded", false);
+
+    _defineProperty(_assertThisInitialized(_this), "_sorters", []);
+
+    _this.useGrid(false);
+
+    var state = _this.loadState();
+
+    _this._isExpanded = state.includes(_this.id);
+
+    _this.addSorter(function (a, b) {
+      if (a.hasTag(TAGS.APP) && b.hasTag(TAGS.UTILS)) {
+        return -1;
+      }
+
+      if (a.hasTag(TAGS.UTILS) && b.hasTag(TAGS.APP)) {
+        return 1;
+      }
+
+      return a.config.label.localeCompare(b.config.label);
+    }); // Apply plugins
+
+
+    _this.applyPlugins(NavigationMenuElement);
+
+    return _this;
+  }
+
+  _createClass(NavigationMenuElement, [{
+    key: "addElement",
+    value: function addElement(element) {
+      _get(_getPrototypeOf(NavigationMenuElement.prototype), "addElement", this).call(this, element);
+
+      this.runSorters();
+      return element;
+    }
+  }, {
+    key: "addSorter",
+    value: function addSorter(sorter) {
+      this._sorters.push(sorter);
+    }
+  }, {
+    key: "isExpanded",
+    get: function get() {
+      return this._isExpanded;
+    }
+  }, {
+    key: "setIcon",
+    value: function setIcon(icon) {
+      this.config.icon = icon;
+    }
+  }, {
+    key: "setLabel",
+    value: function setLabel(label) {
+      this.config.label = label;
+    }
+  }, {
+    key: "setPath",
+    value: function setPath(path) {
+      this.config.path = path;
+    }
+  }, {
+    key: "expandElement",
+    value: function expandElement() {
+      this._isExpanded = true;
+      var state = this.loadState();
+
+      if (!state.includes(this.id)) {
+        state.push(this.id);
+      }
+
+      this.storeState(state);
+      this.getView().refresh();
+    }
+  }, {
+    key: "collapseElement",
+    value: function collapseElement() {
+      this._isExpanded = false;
+      var state = this.loadState();
+
+      if (state.includes(this.id)) {
+        state.splice(state.indexOf(this.id), 1);
+      }
+
+      this.storeState(state);
+      this.getView().refresh();
+    }
+  }, {
+    key: "toggleElement",
+    value: function toggleElement() {
+      if (this._isExpanded) {
+        this.collapseElement();
+      } else {
+        this.expandElement();
+      }
+    }
+  }, {
+    key: "loadState",
+    value: function loadState() {
+      return (localStorage.get(LOCAL_STORAGE_KEY) || "").split(",").filter(Boolean);
+    }
+  }, {
+    key: "storeState",
+    value: function storeState(state) {
+      localStorage.set(LOCAL_STORAGE_KEY, state.join(","));
+    }
+  }, {
+    key: "runSorters",
+    value: function runSorters() {
+      var _iterator = _createForOfIteratorHelper(this._sorters),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var sorter = _step.value;
+          this.getLayout().sort(sorter);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }]);
+
+  return NavigationMenuElement;
+}(UIElement);

package/ui/elements/PanelElement.d.ts

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

package/ui/elements/PanelElement.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 PanelElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(PanelElement, _UIElement);
+
+  var _super = _createSuper(PanelElement);
+
+  function PanelElement() {
+    _classCallCheck(this, PanelElement);
+
+    return _super.apply(this, arguments);
+  }
+
+  return PanelElement;
+}(UIElement);

package/ui/elements/PlaceholderElement.d.ts

@@ -0,0 +1,5 @@
+import { UIElement } from "../UIElement";
+export declare class PlaceholderElement extends UIElement {
+    render(): any;
+    remove(): void;
+}

package/ui/elements/PlaceholderElement.js

@@ -0,0 +1,30 @@
+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 { UIElement } from "../UIElement";
+export var PlaceholderElement = /*#__PURE__*/function (_UIElement) {
+  _inherits(PlaceholderElement, _UIElement);
+
+  var _super = _createSuper(PlaceholderElement);
+
+  function PlaceholderElement() {
+    _classCallCheck(this, PlaceholderElement);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(PlaceholderElement, [{
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }, {
+    key: "remove",
+    value: function remove() {
+      return;
+    }
+  }]);
+
+  return PlaceholderElement;
+}(UIElement);

package/ui/elements/SmallButtonElement.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ButtonElement, ButtonElementConfig } from "./ButtonElement";
+export declare class SmallButtonElement<TRenderProps = any> extends ButtonElement<TRenderProps> {
+    constructor(id: string, config: ButtonElementConfig<TRenderProps>);
+    render(props: any): React.ReactElement;
+}

package/ui/elements/SmallButtonElement.js

@@ -0,0 +1,47 @@
+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 { ButtonDefault, ButtonPrimary, ButtonSecondary } from "@webiny/ui/Button";
+import { ButtonElement } from "./ButtonElement";
+var BUTTONS = {
+  default: ButtonDefault,
+  primary: ButtonPrimary,
+  secondary: ButtonSecondary
+};
+export var SmallButtonElement = /*#__PURE__*/function (_ButtonElement) {
+  _inherits(SmallButtonElement, _ButtonElement);
+
+  var _super = _createSuper(SmallButtonElement);
+
+  function SmallButtonElement(id, config) {
+    var _this;
+
+    _classCallCheck(this, SmallButtonElement);
+
+    _this = _super.call(this, id, config);
+
+    _this.applyPlugins(SmallButtonElement);
+
+    return _this;
+  }
+
+  _createClass(SmallButtonElement, [{
+    key: "render",
+    value: function render(props) {
+      var Component = BUTTONS[this.getType()];
+
+      var _onClick = this.getOnClick();
+
+      return /*#__PURE__*/React.createElement(Component, {
+        small: true,
+        onClick: function onClick() {
+          return _onClick(props);
+        }
+      }, this.getLabel());
+    }
+  }]);
+
+  return SmallButtonElement;
+}(ButtonElement);

package/ui/elements/TypographyElement.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../UIElement";
+export declare type TypographyT = "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "button" | "overline";
+interface TypographyElementConfig extends UIElementConfig {
+    typography: TypographyT;
+}
+export declare class TypographyElement extends UIElement<TypographyElementConfig> {
+    constructor(id: string, config: TypographyElementConfig);
+    getTypography(): import("@rmwc/typography").TypographyT;
+    setTypography(typography: TypographyT): void;
+    render(props: any): React.ReactNode;
+}
+export {};