@webiny/app-admin 0.0.0-mt-3 → 0.0.0-unstable.085ff6572f

package/styles/material.scss

@@ -1,4 +1,4 @@
-@use "~@material/theme/mixins" as themeMixins;
+@use "@material/theme/mixins" as themeMixins;
 
 // material variables
 $mdc-theme-primary: $webiny-theme-light-primary;
@@ -13,6 +13,7 @@ $mdc-theme-text-primary-on-background: $webiny-theme-light-text-primary-on-backg
 $mdc-theme-text-secondary-on-background: $webiny-theme-light-text-secondary-on-background;
 $mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
 $mdc-typography-font-family: $webiny-theme-typography-font-family;
+$mdc-typography-subtitle2-font-weight: $webiny-theme-typography-subtitle2-font-weight;
 
 @import "~material-components-web/material-components-web.scss";
 @import "material-theme-assignments.scss";
@@ -34,41 +35,9 @@ body {
   --mdc-theme-text-secondary-on-background: #{$mdc-theme-text-secondary-on-background};
   --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
   --mdc-theme-caret-down: #{$webiny-theme-light-caret-down};
+  --mdc-typography-font-family: #{$mdc-typography-font-family};
+  --mdc-typography-subtitle2-font-weight: #{$mdc-typography-subtitle2-font-weight};
 
   font-family: "Source Sans Pro";
 }
 
-body.dark-theme {
-  $mdc-theme-primary: $webiny-theme-dark-primary;
-  $mdc-theme-on-primary: $webiny-theme-dark-on-primary;
-  $mdc-theme-secondary: $webiny-theme-dark-secondary;
-  $mdc-theme-on-secondary: $webiny-theme-dark-on-secondary;
-  $mdc-theme-surface: $webiny-theme-dark-surface;
-  $mdc-theme-on-surface: $webiny-theme-dark-on-surface;
-  $mdc-theme-background: $webiny-theme-dark-background;
-  $mdc-theme-on-background: $webiny-theme-dark-on-background;
-  $mdc-theme-text-secondary-on-background: $webiny-theme-dark-text-secondary-on-background;
-  $mdc-theme-text-primary-on-background: $webiny-theme-dark-text-primary-on-background;
-  $mdc-theme-text-hint-on-dark: $webiny-theme-dark-text-hint-on-dark;
-
-  @include themeMixins.mdc-theme-prop("on-primary", $webiny-theme-dark-text-primary-on-background);
-
-  background-color: $mdc-theme-background;
-
-  // assign all the sass variables in css variables
-  --mdc-theme-primary: #{$mdc-theme-primary};
-  --mdc-theme-secondary: #{$mdc-theme-secondary};
-  --mdc-theme-background: #{$mdc-theme-background};
-  --mdc-theme-surface: #{$mdc-theme-surface};
-  --mdc-theme-on-primary: #{$mdc-theme-on-primary};
-  --mdc-theme-on-secondary: #{$mdc-theme-on-secondary};
-  --mdc-theme-on-surface: #{$mdc-theme-on-surface};
-  --mdc-theme-on-background: #{$mdc-theme-on-background};
-  --mdc-theme-text-primary-on-background: #{$mdc-theme-text-primary-on-background};
-  --mdc-theme-text-secondary-on-background: #{$mdc-theme-text-secondary-on-background};
-  --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
-  --mdc-theme-caret-down: #{$webiny-theme-dark-caret-down};
-
-  @import "~@material/textfield/mdc-text-field";
-  @import "material-theme-assignments.scss";
-}

package/styles/theme.scss

@@ -28,10 +28,10 @@ $webiny-theme-dark-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%
 
 // webiny typography
 $webiny-theme-typography-font-family: "Source Sans Pro" !default;
+$webiny-theme-typography-subtitle2-font-weight: 600 !default;
 
 // import required fonts
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
-//@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
 
 body {
   font-size: 16px;
@@ -41,3 +41,36 @@ a {
   color: var(--webiny-theme-color-primary, #ee896b);
   text-decoration: none;
 }
+
+// Default heading styles
+h1 {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+h2 {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+h3 {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+h6 {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+@import "@webiny/ui/styles.scss";

package/types.d.ts

@@ -1,10 +1,7 @@
 import React, { ReactElement } from "react";
 import { Plugin } from "@webiny/plugins/types";
 import { ApolloClient } from "apollo-client";
-import { ItemProps, MenuProps, SectionProps } from "./ui/views/NavigationView/legacyMenu";
-declare type RenderParams = {
-    content: React.ReactNode;
-};
+import { ItemProps, MenuProps, SectionProps } from "./plugins/MenuPlugin";
 export declare type AdminGlobalSearchPlugin = Plugin & {
     type: "admin-global-search";
     label: string;
@@ -18,10 +15,6 @@ export declare type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {
     type: "admin-global-search-prevent-hotkey";
     preventOpen(e: React.KeyboardEvent): boolean | void;
 };
-export declare type AdminDrawerFooterMenuPlugin = Plugin & {
-    type: "admin-drawer-footer-menu";
-    render(params: any): React.ReactElement;
-};
 /**
  * LEGACY TYPE. Only for backwards compatibility.
  */
@@ -30,19 +23,6 @@ export declare type AdminMenuLogoPlugin = Plugin & {
     type: "admin-menu-logo";
     render(): React.ReactElement;
 };
-export declare type AdminHeaderUserMenuPlugin = Plugin & {
-    type: "admin-header-user-menu";
-    render(): React.ReactElement;
-};
-export declare type AdminHeaderUserMenuHandlePlugin = Plugin & {
-    name: "admin-header-user-menu-handle";
-    type: "admin-header-user-menu-handle";
-    render(): React.ReactElement;
-};
-export declare type AdminHeaderUserMenuUserInfoPlugin = Plugin & {
-    type: "admin-header-user-menu-user-info";
-    render(): React.ReactElement;
-};
 /**
  * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.
  * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu
@@ -56,45 +36,65 @@ export declare type AdminMenuPlugin = Plugin & {
     }): React.ReactNode;
     order?: number;
 };
-/**
- * Enables adding custom header elements to the right side of the top bar.
- * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-header-right
- */
-export declare type AdminHeaderRightPlugin = Plugin & {
-    type: "admin-header-right";
-    render(params: RenderParams): React.ReactNode;
-};
+export interface AdminFileManagerFileTypePluginRenderParams {
+    file: FileItem;
+}
 export declare type AdminFileManagerFileTypePlugin = Plugin & {
     type: "admin-file-manager-file-type";
-    types?: string[];
-    render({ file }: {
-        file: any;
-    }): React.ReactNode;
+    types: string[];
+    render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;
     fileDetails?: {
-        actions: Array<React.FunctionComponent | React.Component>;
+        actions: Array<React.FC | React.Component>;
     };
 };
+export interface AdminInstallationPluginRenderParams {
+    onInstalled: () => Promise<void>;
+}
 export declare type AdminInstallationPlugin = Plugin & {
     type: "admin-installation";
     getInstalledVersion(params: {
         client: ApolloClient<object>;
-    }): Promise<string>;
+    }): Promise<string | null>;
     title: string;
     dependencies?: string[];
     secure: boolean;
-    render({ onInstalled }: {
-        onInstalled: any;
-    }): React.ReactNode;
-    upgrades?: {
-        version: string;
-        getComponent(): React.ComponentType<{
-            onInstalled: () => void;
-        }>;
-    }[];
+    render(params: AdminInstallationPluginRenderParams): React.ReactNode;
 };
 export declare type AdminAppPermissionRendererPlugin = Plugin & {
     type: "admin-app-permissions-renderer";
     system?: boolean;
     render(params: any): ReactElement;
 };
-export {};
+import { SecurityPermission } from "@webiny/app-security/types";
+/**
+ * Represents a file as we receive from the GraphQL API.
+ */
+export interface FileItem {
+    id: string;
+    name: string;
+    key: string;
+    src: string;
+    size: number;
+    type: string;
+    tags: string[];
+    aliases: string[];
+    createdOn: string;
+    savedOn: string;
+    createdBy: {
+        id: string;
+        displayName: string;
+    };
+    location: {
+        folderId: string;
+    };
+    meta?: {
+        private?: boolean;
+        width?: number;
+        height?: number;
+    };
+    extensions?: Record<string, any>;
+}
+export interface FileManagerSecurityPermission extends SecurityPermission {
+    rwd?: string;
+    own?: boolean;
+}

package/types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport { Plugin } from \"@webiny/plugins/types\";\nimport { ApolloClient } from \"apollo-client\";\nimport { ItemProps, MenuProps, SectionProps } from \"~/plugins/MenuPlugin\";\n\nexport type AdminGlobalSearchPlugin = Plugin & {\n    type: \"admin-global-search\";\n    label: string;\n    route: string;\n    search?: {\n        operator?: \"and\" | \"or\";\n        fields?: Array<string>;\n    };\n};\n\nexport type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {\n    type: \"admin-global-search-prevent-hotkey\";\n    preventOpen(e: React.KeyboardEvent): boolean | void;\n};\n\n/**\n * LEGACY TYPE. Only for backwards compatibility.\n */\nexport type AdminMenuLogoPlugin = Plugin & {\n    name: \"admin-menu-logo\";\n    type: \"admin-menu-logo\";\n    render(): React.ReactElement;\n};\n\n/**\n * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.\n * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu\n */\nexport type AdminMenuPlugin = Plugin & {\n    type: \"admin-menu\";\n    render(props: {\n        Menu: React.ComponentType<MenuProps>;\n        Section: React.ComponentType<SectionProps>;\n        Item: React.ComponentType<ItemProps>;\n    }): React.ReactNode;\n    order?: number;\n};\n\nexport interface AdminFileManagerFileTypePluginRenderParams {\n    file: FileItem;\n}\nexport type AdminFileManagerFileTypePlugin = Plugin & {\n    type: \"admin-file-manager-file-type\";\n    types: string[];\n    render(params: AdminFileManagerFileTypePluginRenderParams): React.ReactNode;\n    fileDetails?: {\n        actions: Array<React.FC | React.Component>;\n    };\n};\n\nexport interface AdminInstallationPluginRenderParams {\n    onInstalled: () => Promise<void>;\n}\nexport type AdminInstallationPlugin = Plugin & {\n    type: \"admin-installation\";\n    getInstalledVersion(params: { client: ApolloClient<object> }): Promise<string | null>;\n    title: string;\n    dependencies?: string[];\n    secure: boolean;\n    render(params: AdminInstallationPluginRenderParams): React.ReactNode;\n};\n\nexport type AdminAppPermissionRendererPlugin = Plugin & {\n    type: \"admin-app-permissions-renderer\";\n    system?: boolean;\n    render(params: any): ReactElement;\n};\n\nimport { SecurityPermission } from \"@webiny/app-security/types\";\n\n/**\n * Represents a file as we receive from the GraphQL API.\n */\nexport interface FileItem {\n    id: string;\n    name: string;\n    key: string;\n    src: string;\n    size: number;\n    type: string;\n    tags: string[];\n    aliases: string[];\n    createdOn: string;\n    savedOn: string;\n    createdBy: {\n        id: string;\n        displayName: string;\n    };\n    location: {\n        folderId: string;\n    };\n    meta?: {\n        private?: boolean;\n        width?: number;\n        height?: number;\n    };\n    extensions?: Record<string, any>;\n}\n\nexport interface FileManagerSecurityPermission extends SecurityPermission {\n    rwd?: string;\n    own?: boolean;\n}\n"],"mappings":""}

package/ui/UIElement.d.ts

@@ -1,2 +1,2 @@
-export type { UIElementConfig, ApplyFunction, ShouldRender } from "@webiny/ui-composer/UIElement";
+export type { UIElementConfig, ApplyFunction, ShouldRender, UiElementRenderProps } from "@webiny/ui-composer/UIElement";
 export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";

package/ui/UIElement.js

@@ -1 +1,18 @@
-export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UIElement", {
+  enumerable: true,
+  get: function get() {
+    return _UIElement.UIElement;
+  }
+});
+Object.defineProperty(exports, "UIElementPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _UIElement.UIElementPlugin;
+  }
+});
+var _UIElement = require("@webiny/ui-composer/UIElement");

package/ui/UIElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["UIElement.tsx"],"sourcesContent":["export type {\n    UIElementConfig,\n    ApplyFunction,\n    ShouldRender,\n    UiElementRenderProps\n} from \"@webiny/ui-composer/UIElement\";\n\nexport { UIElement, UIElementPlugin } from \"@webiny/ui-composer/UIElement\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAOA"}

package/ui/UILayout.js

@@ -1 +1,18 @@
-export { UILayout, UILayoutPlugin } from "@webiny/ui-composer/UILayout";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UILayout", {
+  enumerable: true,
+  get: function get() {
+    return _UILayout.UILayout;
+  }
+});
+Object.defineProperty(exports, "UILayoutPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _UILayout.UILayoutPlugin;
+  }
+});
+var _UILayout = require("@webiny/ui-composer/UILayout");

package/ui/UILayout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["UILayout.tsx"],"sourcesContent":["export { UILayout, UILayoutPlugin } from \"@webiny/ui-composer/UILayout\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA"}

package/ui/UIRenderer.js

@@ -1 +1,12 @@
-export { UIRenderer } from "@webiny/ui-composer/UIRenderer";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UIRenderer", {
+  enumerable: true,
+  get: function get() {
+    return _UIRenderer.UIRenderer;
+  }
+});
+var _UIRenderer = require("@webiny/ui-composer/UIRenderer");

package/ui/UIRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["UIRenderer.tsx"],"sourcesContent":["export { UIRenderer } from \"@webiny/ui-composer/UIRenderer\";\nexport type { UIRenderParams, RenderNext } from \"@webiny/ui-composer/UIRenderer\";\n"],"mappings":";;;;;;;;;;;AAAA"}

package/ui/UIView.d.ts

@@ -1,2 +1,2 @@
-export type { ApplyFunction, UIElementWrapperProps, UIElementWrapper } from "@webiny/ui-composer/UIView";
+export type { ApplyFunction, UIElementWrapperProps, UIElementWrapper, UIViewProps } from "@webiny/ui-composer/UIView";
 export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";

package/ui/UIView.js

@@ -1 +1,24 @@
-export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UIView", {
+  enumerable: true,
+  get: function get() {
+    return _UIView.UIView;
+  }
+});
+Object.defineProperty(exports, "UIViewComponent", {
+  enumerable: true,
+  get: function get() {
+    return _UIView.UIViewComponent;
+  }
+});
+Object.defineProperty(exports, "UIViewPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _UIView.UIViewPlugin;
+  }
+});
+var _UIView = require("@webiny/ui-composer/UIView");

package/ui/UIView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["UIView.tsx"],"sourcesContent":["export type {\n    ApplyFunction,\n    UIElementWrapperProps,\n    UIElementWrapper,\n    UIViewProps\n} from \"@webiny/ui-composer/UIView\";\nexport { UIView, UIViewComponent, UIViewPlugin } from \"@webiny/ui-composer/UIView\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAMA"}

package/ui/elements/AccordionElement.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { UIElement, UIElementConfig } from "../UIElement";
+import { UIElement, UIElementConfig, UiElementRenderProps } from "../UIElement";
 interface GetterWithProps<TProps, T> {
     (props: TProps): T;
 }
@@ -11,17 +11,17 @@ interface Item<TProps = any> extends UIElementConfig {
     open?: boolean | GetterWithProps<TProps, boolean>;
 }
 export declare class AccordionItemElement extends UIElement<Item> {
-    constructor(id: any, config: Item);
+    constructor(id: string, config: Item);
     setTitle(title: string): void;
     setDescription(description: string): void;
-    render(props: any): JSX.Element;
+    render(props: UiElementRenderProps): React.ReactNode;
 }
 interface Config extends UIElementConfig {
     items: Item[];
 }
 export declare class AccordionElement extends UIElement<Config> {
-    constructor(id: any, config: Config);
+    constructor(id: string, config: Config);
     getAccordionItemElement(id: string): AccordionItemElement;
-    render(props: any): JSX.Element;
+    render(props: UiElementRenderProps): React.ReactNode;
 }
 export {};

package/ui/elements/AccordionElement.js

@@ -1,26 +1,29 @@
-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);
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionItemElement = exports.AccordionElement = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _react = _interopRequireDefault(require("react"));
+var _UIElement3 = require("../UIElement");
+var _Accordion = require("@webiny/ui/Accordion");
+var _excluded = ["open"];
+var AccordionItemElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(AccordionItemElement, _UIElement);
+  var _super = (0, _createSuper2.default)(AccordionItemElement);
   function AccordionItemElement(id, config) {
-    _classCallCheck(this, AccordionItemElement);
-
+    (0, _classCallCheck2.default)(this, AccordionItemElement);
     return _super.call(this, id, config);
   }
-
-  _createClass(AccordionItemElement, [{
+  (0, _createClass2.default)(AccordionItemElement, [{
     key: "setTitle",
     value: function setTitle(title) {
       this.config.title = title;
@@ -34,40 +37,31 @@ export var AccordionItemElement = /*#__PURE__*/function (_UIElement) {
     key: "render",
     value: function render(props) {
       var _this$config = this.config,
-          open = _this$config.open,
-          rest = _objectWithoutProperties(_this$config, _excluded);
-
+        open = _this$config.open,
+        rest = (0, _objectWithoutProperties2.default)(_this$config, _excluded);
       var isOpened = typeof open === "function" ? open(props) : open;
-      return /*#__PURE__*/React.createElement(AccordionItem, Object.assign({
+      return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, Object.assign({
         open: isOpened
-      }, rest), _get(_getPrototypeOf(AccordionItemElement.prototype), "render", this).call(this, props));
+      }, rest), (0, _get2.default)((0, _getPrototypeOf2.default)(AccordionItemElement.prototype), "render", this).call(this, props));
     }
   }]);
-
   return AccordionItemElement;
-}(UIElement);
-export var AccordionElement = /*#__PURE__*/function (_UIElement2) {
-  _inherits(AccordionElement, _UIElement2);
-
-  var _super2 = _createSuper(AccordionElement);
-
+}(_UIElement3.UIElement);
+exports.AccordionItemElement = AccordionItemElement;
+var AccordionElement = /*#__PURE__*/function (_UIElement2) {
+  (0, _inherits2.default)(AccordionElement, _UIElement2);
+  var _super2 = (0, _createSuper2.default)(AccordionElement);
   function AccordionElement(id, config) {
     var _this;
-
-    _classCallCheck(this, AccordionElement);
-
+    (0, _classCallCheck2.default)(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, [{
+  (0, _createClass2.default)(AccordionElement, [{
     key: "getAccordionItemElement",
     value: function getAccordionItemElement(id) {
       return this.getElement(id);
@@ -75,12 +69,16 @@ export var AccordionElement = /*#__PURE__*/function (_UIElement2) {
   }, {
     key: "render",
     value: function render(props) {
+      /**
+       * Figure out correct way to have props.children typed.
+       * TODO @ts-refactor
+       */
       // @ts-ignore
-      return /*#__PURE__*/React.createElement(Accordion, {
+      return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, {
         elevation: 0
-      }, _get(_getPrototypeOf(AccordionElement.prototype), "render", this).call(this, props));
+      }, (0, _get2.default)((0, _getPrototypeOf2.default)(AccordionElement.prototype), "render", this).call(this, props));
     }
   }]);
-
   return AccordionElement;
-}(UIElement);
+}(_UIElement3.UIElement);
+exports.AccordionElement = AccordionElement;

package/ui/elements/AccordionElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AccordionItemElement","id","config","title","description","props","open","rest","isOpened","UIElement","AccordionElement","useGrid","items","forEach","item","addElement","getElement"],"sources":["AccordionElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { UIElement, UIElementConfig, UiElementRenderProps } from \"~/ui/UIElement\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\n\ninterface GetterWithProps<TProps, T> {\n    (props: TProps): T;\n}\n\ninterface Item<TProps = any> extends UIElementConfig {\n    id: string;\n    title: string;\n    description: string;\n    icon: React.ReactElement;\n    open?: boolean | GetterWithProps<TProps, boolean>;\n}\n\nexport class AccordionItemElement extends UIElement<Item> {\n    public constructor(id: string, config: Item) {\n        super(id, config);\n    }\n\n    public setTitle(title: string): void {\n        this.config.title = title;\n    }\n\n    public setDescription(description: string): void {\n        this.config.description = description;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        const { open, ...rest } = this.config;\n        const isOpened = typeof open === \"function\" ? open(props) : open;\n        return (\n            <AccordionItem open={isOpened} {...rest}>\n                {super.render(props)}\n            </AccordionItem>\n        );\n    }\n}\n\ninterface Config extends UIElementConfig {\n    items: Item[];\n}\n\nexport class AccordionElement extends UIElement<Config> {\n    public constructor(id: string, config: Config) {\n        super(id, config);\n\n        this.useGrid(false);\n\n        this.config.items.forEach(item => {\n            this.addElement(new AccordionItemElement(item.id, item));\n        });\n    }\n\n    public getAccordionItemElement(id: string): AccordionItemElement {\n        return this.getElement(id) as AccordionItemElement;\n    }\n\n    public override render(props: UiElementRenderProps): React.ReactNode {\n        /**\n         * Figure out correct way to have props.children typed.\n         * TODO @ts-refactor\n         */\n        // @ts-ignore\n        return <Accordion elevation={0}>{super.render(props)}</Accordion>;\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AAAgE;AAAA,IAcnDA,oBAAoB;EAAA;EAAA;EAC7B,8BAAmBC,EAAU,EAAEC,MAAY,EAAE;IAAA;IAAA,yBACnCD,EAAE,EAAEC,MAAM;EACpB;EAAC;IAAA;IAAA,OAED,kBAAgBC,KAAa,EAAQ;MACjC,IAAI,CAACD,MAAM,CAACC,KAAK,GAAGA,KAAK;IAC7B;EAAC;IAAA;IAAA,OAED,wBAAsBC,WAAmB,EAAQ;MAC7C,IAAI,CAACF,MAAM,CAACE,WAAW,GAAGA,WAAW;IACzC;EAAC;IAAA;IAAA,OAED,gBAAuBC,KAA2B,EAAmB;MACjE,mBAA0B,IAAI,CAACH,MAAM;QAA7BI,IAAI,gBAAJA,IAAI;QAAKC,IAAI;MACrB,IAAMC,QAAQ,GAAG,OAAOF,IAAI,KAAK,UAAU,GAAGA,IAAI,CAACD,KAAK,CAAC,GAAGC,IAAI;MAChE,oBACI,6BAAC,wBAAa;QAAC,IAAI,EAAEE;MAAS,GAAKD,IAAI,gHACrBF,KAAK,EACP;IAExB;EAAC;EAAA;AAAA,EArBqCI,qBAAS;AAAA;AAAA,IA4BtCC,gBAAgB;EAAA;EAAA;EACzB,0BAAmBT,EAAU,EAAEC,MAAc,EAAE;IAAA;IAAA;IAC3C,2BAAMD,EAAE,EAAEC,MAAM;IAEhB,MAAKS,OAAO,CAAC,KAAK,CAAC;IAEnB,MAAKT,MAAM,CAACU,KAAK,CAACC,OAAO,CAAC,UAAAC,IAAI,EAAI;MAC9B,MAAKC,UAAU,CAAC,IAAIf,oBAAoB,CAACc,IAAI,CAACb,EAAE,EAAEa,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;IAAC;EACP;EAAC;IAAA;IAAA,OAED,iCAA+Bb,EAAU,EAAwB;MAC7D,OAAO,IAAI,CAACe,UAAU,CAACf,EAAE,CAAC;IAC9B;EAAC;IAAA;IAAA,OAED,gBAAuBI,KAA2B,EAAmB;MACjE;AACR;AACA;AACA;MACQ;MACA,oBAAO,6BAAC,oBAAS;QAAC,SAAS,EAAE;MAAE,4GAAeA,KAAK,EAAc;IACrE;EAAC;EAAA;AAAA,EAtBiCI,qBAAS;AAAA"}

package/ui/elements/ButtonElement.d.ts

@@ -14,11 +14,11 @@ export interface ButtonElementConfig<TRenderProps> extends UIElementConfig {
 }
 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;
+    getLabel(props?: TRenderProps): string;
     setType(type: ButtonElementType): void;
-    getType(props?: any): ButtonElementType;
+    getType(props?: TRenderProps): ButtonElementType;
     setOnClick(onClick: ButtonOnClick<TRenderProps>): void;
     getOnClick(): ButtonOnClick<TRenderProps>;
-    render(props: any): React.ReactElement;
+    render(props: TRenderProps): React.ReactElement;
 }
 export {};

package/ui/elements/ButtonElement.js

@@ -1,38 +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 { UIElement } from "../UIElement";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonElement = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _kebabCase2 = _interopRequireDefault(require("lodash/kebabCase"));
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("@webiny/ui/Button");
+var _UIElement2 = require("../UIElement");
 var BUTTONS = {
-  default: ButtonDefault,
-  primary: ButtonPrimary,
-  secondary: ButtonSecondary
+  default: _Button.ButtonDefault,
+  primary: _Button.ButtonPrimary,
+  secondary: _Button.ButtonSecondary
 };
-export var ButtonElement = /*#__PURE__*/function (_UIElement) {
-  _inherits(ButtonElement, _UIElement);
-
-  var _super = _createSuper(ButtonElement);
-
+var ButtonElement = /*#__PURE__*/function (_UIElement) {
+  (0, _inherits2.default)(ButtonElement, _UIElement);
+  var _super = (0, _createSuper2.default)(ButtonElement);
   function ButtonElement() {
-    _classCallCheck(this, ButtonElement);
-
+    (0, _classCallCheck2.default)(this, ButtonElement);
     return _super.apply(this, arguments);
   }
-
-  _createClass(ButtonElement, [{
+  (0, _createClass2.default)(ButtonElement, [{
     key: "setLabel",
     value: function setLabel(label) {
+      /**
+       * TODO @ts-refactor
+       * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'
+       */
+      // @ts-ignore
       this.config.label = label;
     }
   }, {
     key: "getLabel",
     value: function getLabel(props) {
       if (typeof this.config.label === "function") {
+        // TODO @ts-refactor find out correct types to pass
         return this.config.label(props);
       }
-
       return this.config.label;
     }
   }, {
@@ -44,9 +53,9 @@ export var ButtonElement = /*#__PURE__*/function (_UIElement) {
     key: "getType",
     value: function getType(props) {
       if (typeof this.config.type === "function") {
+        // TODO @ts-refactor find out correct types to pass
         return this.config.type(props);
       }
-
       return this.config.type;
     }
   }, {
@@ -63,16 +72,15 @@ export var ButtonElement = /*#__PURE__*/function (_UIElement) {
     key: "render",
     value: function render(props) {
       var Component = BUTTONS[this.getType(props)];
-
       var _onClick = this.getOnClick();
-
-      return /*#__PURE__*/React.createElement(Component, {
+      return /*#__PURE__*/_react.default.createElement(Component, {
         onClick: function onClick() {
           return _onClick(props);
-        }
+        },
+        "data-testid": "button-element-".concat((0, _kebabCase2.default)(this.getLabel(props)))
       }, this.getLabel(props));
     }
   }]);
-
   return ButtonElement;
-}(UIElement);
+}(_UIElement2.UIElement);
+exports.ButtonElement = ButtonElement;

package/ui/elements/ButtonElement.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BUTTONS","default","ButtonDefault","primary","ButtonPrimary","secondary","ButtonSecondary","ButtonElement","label","config","props","type","onClick","Component","getType","getOnClick","getLabel","UIElement"],"sources":["ButtonElement.tsx"],"sourcesContent":["import React from \"react\";\nimport { ButtonDefault, ButtonPrimary, ButtonSecondary } from \"@webiny/ui/Button\";\nimport { UIElement, UIElementConfig } from \"../UIElement\";\nimport { kebabCase } from \"lodash\";\n\nexport type ButtonElementType = \"default\" | \"primary\" | \"secondary\";\n\nexport interface ButtonOnClick<TRenderProps = any> {\n    (props: TRenderProps): void;\n}\n\ninterface GetterWithProps<TProps, TReturn> {\n    (props: TProps): TReturn;\n}\n\nexport interface ButtonElementConfig<TRenderProps> extends UIElementConfig {\n    type: ButtonElementType | GetterWithProps<TRenderProps, ButtonElementType>;\n    label: string | GetterWithProps<TRenderProps, string>;\n    onClick: ButtonOnClick<TRenderProps>;\n}\n\nconst BUTTONS = {\n    default: ButtonDefault,\n    primary: ButtonPrimary,\n    secondary: ButtonSecondary\n};\n\nexport class ButtonElement<TRenderProps = any> extends UIElement<\n    ButtonElementConfig<TRenderProps>\n> {\n    public setLabel<TProps extends TRenderProps = TRenderProps>(\n        label: string | GetterWithProps<TProps, string>\n    ): void {\n        /**\n         * TODO @ts-refactor\n         * 'TProps' could be instantiated with an arbitrary type which could be unrelated to 'TRenderProps'\n         */\n        // @ts-ignore\n        this.config.label = label;\n    }\n\n    public getLabel(props?: TRenderProps): string {\n        if (typeof this.config.label === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.label(props as TRenderProps);\n        }\n        return this.config.label;\n    }\n\n    public setType(type: ButtonElementType): void {\n        this.config.type = type;\n    }\n\n    public getType(props?: TRenderProps): ButtonElementType {\n        if (typeof this.config.type === \"function\") {\n            // TODO @ts-refactor find out correct types to pass\n            return this.config.type(props as TRenderProps);\n        }\n        return this.config.type;\n    }\n\n    public setOnClick(onClick: ButtonOnClick<TRenderProps>): void {\n        this.config.onClick = onClick;\n    }\n\n    public getOnClick() {\n        return this.config.onClick;\n    }\n\n    public override render(props: TRenderProps): React.ReactElement {\n        const Component = BUTTONS[this.getType(props)];\n        const onClick = this.getOnClick();\n\n        return (\n            <Component\n                onClick={() => onClick(props)}\n                data-testid={`button-element-${kebabCase(this.getLabel(props))}`}\n            >\n                {this.getLabel(props)}\n            </Component>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AAmBA,IAAMA,OAAO,GAAG;EACZC,OAAO,EAAEC,qBAAa;EACtBC,OAAO,EAAEC,qBAAa;EACtBC,SAAS,EAAEC;AACf,CAAC;AAAC,IAEWC,aAAa;EAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA,OAGtB,kBACIC,KAA+C,EAC3C;MACJ;AACR;AACA;AACA;MACQ;MACA,IAAI,CAACC,MAAM,CAACD,KAAK,GAAGA,KAAK;IAC7B;EAAC;IAAA;IAAA,OAED,kBAAgBE,KAAoB,EAAU;MAC1C,IAAI,OAAO,IAAI,CAACD,MAAM,CAACD,KAAK,KAAK,UAAU,EAAE;QACzC;QACA,OAAO,IAAI,CAACC,MAAM,CAACD,KAAK,CAACE,KAAK,CAAiB;MACnD;MACA,OAAO,IAAI,CAACD,MAAM,CAACD,KAAK;IAC5B;EAAC;IAAA;IAAA,OAED,iBAAeG,IAAuB,EAAQ;MAC1C,IAAI,CAACF,MAAM,CAACE,IAAI,GAAGA,IAAI;IAC3B;EAAC;IAAA;IAAA,OAED,iBAAeD,KAAoB,EAAqB;MACpD,IAAI,OAAO,IAAI,CAACD,MAAM,CAACE,IAAI,KAAK,UAAU,EAAE;QACxC;QACA,OAAO,IAAI,CAACF,MAAM,CAACE,IAAI,CAACD,KAAK,CAAiB;MAClD;MACA,OAAO,IAAI,CAACD,MAAM,CAACE,IAAI;IAC3B;EAAC;IAAA;IAAA,OAED,oBAAkBC,OAAoC,EAAQ;MAC1D,IAAI,CAACH,MAAM,CAACG,OAAO,GAAGA,OAAO;IACjC;EAAC;IAAA;IAAA,OAED,sBAAoB;MAChB,OAAO,IAAI,CAACH,MAAM,CAACG,OAAO;IAC9B;EAAC;IAAA;IAAA,OAED,gBAAuBF,KAAmB,EAAsB;MAC5D,IAAMG,SAAS,GAAGb,OAAO,CAAC,IAAI,CAACc,OAAO,CAACJ,KAAK,CAAC,CAAC;MAC9C,IAAME,QAAO,GAAG,IAAI,CAACG,UAAU,EAAE;MAEjC,oBACI,6BAAC,SAAS;QACN,OAAO,EAAE;UAAA,OAAMH,QAAO,CAACF,KAAK,CAAC;QAAA,CAAC;QAC9B,wCAA+B,yBAAU,IAAI,CAACM,QAAQ,CAACN,KAAK,CAAC,CAAC;MAAG,GAEhE,IAAI,CAACM,QAAQ,CAACN,KAAK,CAAC,CACb;IAEpB;EAAC;EAAA;AAAA,EAtDkDO,qBAAS;AAAA"}