@webiny/app-admin 5.41.4 → 5.42.0-beta.1

package/components/IconPicker/IconPickerPresenter.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconPickerPresenter = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var IconPickerPresenter = exports.IconPickerPresenter = /*#__PURE__*/function () {
+  function IconPickerPresenter(repository, size) {
+    (0, _classCallCheck2.default)(this, IconPickerPresenter);
+    (0, _defineProperty2.default)(this, "selectedIcon", null);
+    (0, _defineProperty2.default)(this, "filter", "");
+    (0, _defineProperty2.default)(this, "activeTab", 0);
+    (0, _defineProperty2.default)(this, "isMenuOpened", false);
+    this.repository = repository;
+    this.size = size;
+    (0, _mobx.makeAutoObservable)(this);
+  }
+  return (0, _createClass2.default)(IconPickerPresenter, [{
+    key: "load",
+    value: async function load() {
+      var icon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (icon?.value) {
+        this.selectedIcon = icon;
+      }
+      await this.repository.loadIcons();
+      if (icon && !icon?.value) {
+        this.detectSelectedIcon(icon);
+      }
+    }
+  }, {
+    key: "vm",
+    get: function get() {
+      return {
+        activeTab: this.activeTab,
+        isMenuOpened: this.isMenuOpened,
+        isLoading: this.repository.getLoading().isLoading,
+        icons: this.getFilteredIcons(),
+        iconTypes: this.repository.getIconTypes(),
+        // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.
+        selectedIcon: (0, _mobx.toJS)(this.selectedIcon),
+        filter: this.filter,
+        size: this.size
+      };
+    }
+  }, {
+    key: "addIcon",
+    value: function addIcon(icon) {
+      this.repository.addIcon(icon);
+    }
+  }, {
+    key: "closeMenu",
+    value: function closeMenu() {
+      this.isMenuOpened = false;
+    }
+  }, {
+    key: "openMenu",
+    value: function openMenu() {
+      this.isMenuOpened = true;
+      this.resetActiveTab();
+    }
+  }, {
+    key: "setActiveTab",
+    value: function setActiveTab(index) {
+      this.activeTab = index;
+    }
+  }, {
+    key: "setIcon",
+    value: function setIcon(icon) {
+      this.selectedIcon = icon;
+    }
+  }, {
+    key: "setFilter",
+    value: function setFilter(value) {
+      this.filter = value;
+    }
+  }, {
+    key: "getFilteredIcons",
+    value: function getFilteredIcons() {
+      var _this = this;
+      var hyphenUnderscoreRegex = /[-_]/g;
+      var icons = this.repository.getIcons();
+      return icons.filter(function (icon) {
+        return icon.name.replace(hyphenUnderscoreRegex, " ").toLowerCase().includes(_this.filter.toLowerCase());
+      });
+    }
+  }, {
+    key: "getActiveTabByType",
+    value: function getActiveTabByType(type) {
+      var iconTypes = this.repository.getIconTypes();
+      var index = iconTypes.findIndex(function (iconsByType) {
+        return iconsByType.name === type;
+      });
+      return index !== -1 ? index : 0;
+    }
+  }, {
+    key: "resetActiveTab",
+    value: function resetActiveTab() {
+      this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : 0);
+    }
+  }, {
+    key: "detectSelectedIcon",
+    value: function detectSelectedIcon(icon) {
+      var iconByName = this.repository.getIcons().find(function (x) {
+        return x.name === icon.name && icon.type === x.type;
+      });
+      if (iconByName) {
+        this.selectedIcon = iconByName;
+      }
+    }
+  }]);
+}();
+
+//# sourceMappingURL=IconPickerPresenter.js.map

package/components/IconPicker/IconPickerPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobx","require","IconPickerPresenter","exports","repository","size","_classCallCheck2","default","_defineProperty2","makeAutoObservable","_createClass2","key","value","load","icon","arguments","length","undefined","selectedIcon","loadIcons","detectSelectedIcon","get","activeTab","isMenuOpened","isLoading","getLoading","icons","getFilteredIcons","iconTypes","getIconTypes","toJS","filter","addIcon","closeMenu","openMenu","resetActiveTab","setActiveTab","index","setIcon","setFilter","_this","hyphenUnderscoreRegex","getIcons","name","replace","toLowerCase","includes","getActiveTabByType","type","findIndex","iconsByType","iconByName","find","x"],"sources":["IconPickerPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\n\nimport { IconRepository } from \"./IconRepository\";\nimport { Icon } from \"./types\";\nimport { IconType } from \"./config\";\n\nexport interface IconPickerPresenterInterface {\n    load(icon: Icon): Promise<void>;\n    setIcon(icon: Icon): void;\n    addIcon(icon: Icon): void;\n    setFilter(value: string): void;\n    setActiveTab(index: number): void;\n    openMenu(): void;\n    closeMenu(): void;\n    get vm(): {\n        isLoading: boolean;\n        activeTab: number;\n        isMenuOpened: boolean;\n        icons: Icon[];\n        iconTypes: IconType[];\n        selectedIcon: Icon | null;\n        filter: string;\n        size?: string;\n    };\n}\n\nexport class IconPickerPresenter implements IconPickerPresenterInterface {\n    private repository: IconRepository;\n    private selectedIcon: Icon | null = null;\n    private filter = \"\";\n    private activeTab = 0;\n    private isMenuOpened = false;\n    private size: string | undefined;\n\n    constructor(repository: IconRepository, size?: string) {\n        this.repository = repository;\n        this.size = size;\n        makeAutoObservable(this);\n    }\n\n    async load(icon: Icon | null = null) {\n        if (icon?.value) {\n            this.selectedIcon = icon;\n        }\n\n        await this.repository.loadIcons();\n\n        if (icon && !icon?.value) {\n            this.detectSelectedIcon(icon);\n        }\n    }\n\n    get vm() {\n        return {\n            activeTab: this.activeTab,\n            isMenuOpened: this.isMenuOpened,\n            isLoading: this.repository.getLoading().isLoading,\n            icons: this.getFilteredIcons(),\n            iconTypes: this.repository.getIconTypes(),\n            // `toJS` will unwrap an observable into a POJO. This will make it simple to use in child components.\n            selectedIcon: toJS(this.selectedIcon),\n            filter: this.filter,\n            size: this.size\n        };\n    }\n\n    addIcon(icon: Icon) {\n        this.repository.addIcon(icon);\n    }\n\n    closeMenu(): void {\n        this.isMenuOpened = false;\n    }\n\n    openMenu(): void {\n        this.isMenuOpened = true;\n        this.resetActiveTab();\n    }\n\n    setActiveTab(index: number) {\n        this.activeTab = index;\n    }\n\n    setIcon(icon: Icon | null) {\n        this.selectedIcon = icon;\n    }\n\n    setFilter(value: string) {\n        this.filter = value;\n    }\n\n    private getFilteredIcons() {\n        const hyphenUnderscoreRegex = /[-_]/g;\n        const icons = this.repository.getIcons();\n\n        return icons.filter(icon =>\n            icon.name\n                .replace(hyphenUnderscoreRegex, \" \")\n                .toLowerCase()\n                .includes(this.filter.toLowerCase())\n        );\n    }\n\n    private getActiveTabByType(type: string) {\n        const iconTypes = this.repository.getIconTypes();\n        const index = iconTypes.findIndex(iconsByType => iconsByType.name === type);\n\n        return index !== -1 ? index : 0;\n    }\n\n    private resetActiveTab() {\n        this.setActiveTab(this.selectedIcon ? this.getActiveTabByType(this.selectedIcon.type) : 0);\n    }\n\n    private detectSelectedIcon(icon: Icon) {\n        const iconByName = this.repository\n            .getIcons()\n            .find(x => x.name === icon.name && icon.type === x.type);\n\n        if (iconByName) {\n            this.selectedIcon = iconByName;\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconPickerPresenter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/IconPicker/IconPickerPresenter.test.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _IconPickerPresenter = require("./IconPickerPresenter");
+var _IconRepository = require("./IconRepository");
+var mockIconTypes = [{
+  name: "icon"
+}, {
+  name: "emoji"
+}, {
+  name: "custom"
+}];
+var mockIcons = [{
+  type: "emoji",
+  name: "thumbs_up",
+  value: "👍",
+  category: "People & Body",
+  skinToneSupport: true
+}, {
+  type: "icon",
+  name: "regular_address-book",
+  value: '<path fill="currentColor" d="M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z"/>',
+  category: "Business"
+}];
+var mockIconPackProviders = [{
+  name: "mock_icons",
+  getIcons: async function getIcons() {
+    return mockIcons;
+  }
+}];
+describe("IconPickerPresenter", function () {
+  var icon = {
+    type: "icon",
+    name: "solid_bullseye",
+    value: '<path fill="currentColor" d="M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z"/>',
+    category: "Business",
+    color: "#282fe6"
+  };
+  var presenter;
+  beforeEach(function () {
+    var repository = new _IconRepository.IconRepository(mockIconTypes, mockIconPackProviders);
+    presenter = new _IconPickerPresenter.IconPickerPresenter(repository);
+  });
+  it("should create an IconPickerPresenter with the `vm` definition", async function () {
+    // let's load icons and set a predefined `selectedIcon`
+    await presenter.load(icon);
+
+    // `vm` should have the expected `selectedIcon` definition
+    expect(presenter.vm.selectedIcon).toEqual(icon);
+
+    // `vm` should have the expected `icons` definition
+    expect(presenter.vm.icons).toEqual(mockIcons);
+  });
+  it("should be able to select an icon", async function () {
+    // let's load icons
+    await presenter.load();
+
+    // should be able to set the icon
+    presenter.setIcon(presenter.vm.icons[0]);
+
+    // `vm` should have the expected `selectedIcon` value
+    expect(presenter.vm.selectedIcon).toEqual(presenter.vm.icons[0]);
+  });
+  it("should be able to add an icon", async function () {
+    // let's load icons
+    await presenter.load();
+
+    // should be able to set the icon
+    presenter.addIcon(icon);
+
+    // `vm` should have three icons
+    expect(presenter.vm.icons.length).toBe(3);
+
+    // `vm` should have the expected `icons` value
+    expect(presenter.vm.icons).toEqual([].concat(mockIcons, [icon]));
+  });
+  it("should be able to filter icons by name", async function () {
+    // let's load icons
+    await presenter.load();
+
+    // should be able to set the filter
+    presenter.setFilter("book");
+
+    // `vm` should have only one icon
+    expect(presenter.vm.icons.length).toBe(1);
+
+    // `vm` should have filtered icon
+    expect(presenter.vm.icons[0]).toEqual(mockIcons[1]);
+  });
+  it("should be able to set active tab on menu open", async function () {
+    // let's load icons and set a predefined `selectedIcon`
+    await presenter.load(mockIcons[0]);
+
+    // default `isMenuOpened` should be false
+    expect(presenter.vm.isMenuOpened).toBe(false);
+
+    // default `activeTab` should be 0
+    expect(presenter.vm.activeTab).toBe(0);
+
+    // should be able to set `isMenuOpened`
+    // should be able to set `activeTab` based on `selectedIcon` type
+    presenter.openMenu();
+
+    // `vm` should have the expected `isMenuOpened` value
+    expect(presenter.vm.isMenuOpened).toBe(true);
+
+    // `vm` should have the expected `activeTab` value
+    expect(presenter.vm.activeTab).toBe(1);
+  });
+});
+
+//# sourceMappingURL=IconPickerPresenter.test.js.map

package/components/IconPicker/IconPickerPresenter.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_IconPickerPresenter","require","_IconRepository","mockIconTypes","name","mockIcons","type","value","category","skinToneSupport","mockIconPackProviders","getIcons","describe","icon","color","presenter","beforeEach","repository","IconRepository","IconPickerPresenter","it","load","expect","vm","selectedIcon","toEqual","icons","setIcon","addIcon","length","toBe","concat","setFilter","isMenuOpened","activeTab","openMenu"],"sources":["IconPickerPresenter.test.ts"],"sourcesContent":["import { IconPickerPresenter } from \"./IconPickerPresenter\";\nimport { IconRepository } from \"./IconRepository\";\nimport { Icon } from \"./types\";\n\nconst mockIconTypes = [{ name: \"icon\" }, { name: \"emoji\" }, { name: \"custom\" }];\n\nconst mockIcons: Icon[] = [\n    {\n        type: \"emoji\",\n        name: \"thumbs_up\",\n        value: \"👍\",\n        category: \"People & Body\",\n        skinToneSupport: true\n    },\n    {\n        type: \"icon\",\n        name: \"regular_address-book\",\n        value: '<path fill=\"currentColor\" d=\"M384 48c8.8 0 16 7.2 16 16v384c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h288zM96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm144 256a64 64 0 1 0 0-128a64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80h-64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z\"/>',\n        category: \"Business\"\n    }\n];\n\nconst mockIconPackProviders = [\n    {\n        name: \"mock_icons\",\n        getIcons: async () => {\n            return mockIcons;\n        }\n    }\n];\n\ndescribe(\"IconPickerPresenter\", () => {\n    const icon: Icon = {\n        type: \"icon\",\n        name: \"solid_bullseye\",\n        value: '<path fill=\"currentColor\" d=\"M448 256a192 192 0 1 0-384 0a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0zm256 80a80 80 0 1 0 0-160a80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288a144 144 0 1 1 0-288zm-32 144a32 32 0 1 1 64 0a32 32 0 1 1-64 0z\"/>',\n        category: \"Business\",\n        color: \"#282fe6\"\n    };\n\n    let presenter: IconPickerPresenter;\n\n    beforeEach(() => {\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n        presenter = new IconPickerPresenter(repository);\n    });\n\n    it(\"should create an IconPickerPresenter with the `vm` definition\", async () => {\n        // let's load icons and set a predefined `selectedIcon`\n        await presenter.load(icon);\n\n        // `vm` should have the expected `selectedIcon` definition\n        expect(presenter.vm.selectedIcon).toEqual(icon);\n\n        // `vm` should have the expected `icons` definition\n        expect(presenter.vm.icons).toEqual(mockIcons);\n    });\n\n    it(\"should be able to select an icon\", async () => {\n        // let's load icons\n        await presenter.load();\n\n        // should be able to set the icon\n        presenter.setIcon(presenter.vm.icons[0]);\n\n        // `vm` should have the expected `selectedIcon` value\n        expect(presenter.vm.selectedIcon).toEqual(presenter.vm.icons[0]);\n    });\n\n    it(\"should be able to add an icon\", async () => {\n        // let's load icons\n        await presenter.load();\n\n        // should be able to set the icon\n        presenter.addIcon(icon);\n\n        // `vm` should have three icons\n        expect(presenter.vm.icons.length).toBe(3);\n\n        // `vm` should have the expected `icons` value\n        expect(presenter.vm.icons).toEqual([...mockIcons, icon]);\n    });\n\n    it(\"should be able to filter icons by name\", async () => {\n        // let's load icons\n        await presenter.load();\n\n        // should be able to set the filter\n        presenter.setFilter(\"book\");\n\n        // `vm` should have only one icon\n        expect(presenter.vm.icons.length).toBe(1);\n\n        // `vm` should have filtered icon\n        expect(presenter.vm.icons[0]).toEqual(mockIcons[1]);\n    });\n\n    it(\"should be able to set active tab on menu open\", async () => {\n        // let's load icons and set a predefined `selectedIcon`\n        await presenter.load(mockIcons[0]);\n\n        // default `isMenuOpened` should be false\n        expect(presenter.vm.isMenuOpened).toBe(false);\n\n        // default `activeTab` should be 0\n        expect(presenter.vm.activeTab).toBe(0);\n\n        // should be able to set `isMenuOpened`\n        // should be able to set `activeTab` based on `selectedIcon` type\n        presenter.openMenu();\n\n        // `vm` should have the expected `isMenuOpened` value\n        expect(presenter.vm.isMenuOpened).toBe(true);\n\n        // `vm` should have the expected `activeTab` value\n        expect(presenter.vm.activeTab).toBe(1);\n    });\n});\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconPickerPresenterProvider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { IconPickerPresenterInterface } from "./IconPickerPresenter";
+interface IconPickerPresenterProviderProps {
+    presenter: IconPickerPresenterInterface;
+    children: React.ReactNode;
+}
+export declare const IconPickerPresenterProvider: ({ presenter, children }: IconPickerPresenterProviderProps) => React.JSX.Element;
+export declare function useIconPicker(): IconPickerPresenterInterface;
+export {};

package/components/IconPicker/IconPickerPresenterProvider.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconPickerPresenterProvider = void 0;
+exports.useIconPicker = useIconPicker;
+var _react = _interopRequireDefault(require("react"));
+var IconPickerPresenterContext = /*#__PURE__*/_react.default.createContext(undefined);
+var IconPickerPresenterProvider = exports.IconPickerPresenterProvider = function IconPickerPresenterProvider(_ref) {
+  var presenter = _ref.presenter,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(IconPickerPresenterContext.Provider, {
+    value: presenter
+  }, children);
+};
+function useIconPicker() {
+  var context = _react.default.useContext(IconPickerPresenterContext);
+  if (!context) {
+    throw Error("Missing <IconPickerPresenterProvider> in the component tree!");
+  }
+  return context;
+}
+
+//# sourceMappingURL=IconPickerPresenterProvider.js.map

package/components/IconPicker/IconPickerPresenterProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","IconPickerPresenterContext","React","createContext","undefined","IconPickerPresenterProvider","exports","_ref","presenter","children","default","createElement","Provider","value","useIconPicker","context","useContext","Error"],"sources":["IconPickerPresenterProvider.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { IconPickerPresenterInterface } from \"./IconPickerPresenter\";\n\ninterface IconPickerPresenterProviderProps {\n    presenter: IconPickerPresenterInterface;\n    children: React.ReactNode;\n}\n\nconst IconPickerPresenterContext = React.createContext<IconPickerPresenterInterface | undefined>(\n    undefined\n);\n\nexport const IconPickerPresenterProvider = ({\n    presenter,\n    children\n}: IconPickerPresenterProviderProps) => {\n    return (\n        <IconPickerPresenterContext.Provider value={presenter}>\n            {children}\n        </IconPickerPresenterContext.Provider>\n    );\n};\n\nexport function useIconPicker() {\n    const context = React.useContext(IconPickerPresenterContext);\n    if (!context) {\n        throw Error(`Missing <IconPickerPresenterProvider> in the component tree!`);\n    }\n    return context;\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AASA,IAAMC,0BAA0B,gBAAGC,cAAK,CAACC,aAAa,CAClDC,SACJ,CAAC;AAEM,IAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,SAA9BA,2BAA2BA,CAAAE,IAAA,EAGA;EAAA,IAFpCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAER,oBACIX,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACV,0BAA0B,CAACW,QAAQ;IAACC,KAAK,EAAEL;EAAU,GACjDC,QACgC,CAAC;AAE9C,CAAC;AAEM,SAASK,aAAaA,CAAA,EAAG;EAC5B,IAAMC,OAAO,GAAGb,cAAK,CAACc,UAAU,CAACf,0BAA0B,CAAC;EAC5D,IAAI,CAACc,OAAO,EAAE;IACV,MAAME,KAAK,+DAA+D,CAAC;EAC/E;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}

package/components/IconPicker/IconPickerTab.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { Icon } from "./types";
+export declare const IconPickerTabRenderer: (() => null) & {
+    original: () => null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (() => null) & {
+        original: () => null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(() => null) & {
+        original: () => null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface CellDecorator {
+    (cell: React.ReactElement): React.ReactElement;
+}
+export interface IconPickerTabProps {
+    label: string;
+    onChange: (icon: Icon) => void;
+    actions?: React.ReactElement;
+    cellDecorator?: CellDecorator;
+}
+export declare const IconPickerTab: ({ label, actions, onChange, cellDecorator }: IconPickerTabProps) => React.JSX.Element;
+export {};

package/components/IconPicker/IconPickerTab.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconPickerTabRenderer = exports.IconPickerTab = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactVirtualized = require("react-virtualized");
+var _groupBy = _interopRequireDefault(require("lodash/groupBy"));
+var _Tabs = require("@webiny/ui/Tabs");
+var _Typography = require("@webiny/ui/Typography");
+var _DelayedOnChange = require("@webiny/ui/DelayedOnChange");
+var _Input = require("@webiny/ui/Input");
+var _reactComposition = require("@webiny/react-composition");
+var _IconRenderer = require("./IconRenderer");
+var _IconPicker = require("./IconPicker.styles");
+var _IconPickerPresenterProvider = require("./IconPickerPresenterProvider");
+var _IconType = require("./config/IconType");
+var _types = require("./types");
+var _excluded = ["key"];
+var COLUMN_COUNT = 8;
+var IconPickerTabRenderer = exports.IconPickerTabRenderer = (0, _reactComposition.makeDecoratable)("IconPickerTabRenderer", function () {
+  return null;
+});
+var getRows = function getRows(icons, size) {
+  // Group the icons by their category.
+  var groupedObjects = (0, _groupBy.default)(icons, "category");
+  var rows = [];
+
+  // Iterate over each category in the grouped icons.
+  for (var key in groupedObjects) {
+    // Skip any group where the key is `undefined` (these icons will be handled separately).
+    if (key !== "undefined") {
+      var rowIcons = groupedObjects[key];
+
+      // Add a row for the category name.
+      rows.push({
+        type: "category-name",
+        name: key
+      });
+
+      // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.
+      while (rowIcons.length) {
+        rows.push({
+          type: "icons",
+          icons: rowIcons.splice(0, size === _types.ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+        });
+      }
+    }
+  }
+
+  // Handle icons that don't have a category (key is `undefined`).
+  if (groupedObjects.undefined) {
+    var _rowIcons = groupedObjects.undefined;
+
+    // Add a row for the `Uncategorized` category name.
+    rows.push({
+      type: "category-name",
+      name: "Uncategorized"
+    });
+
+    // Split these icons into groups of COLUMN_COUNT and add them as rows.
+    while (_rowIcons.length) {
+      rows.push({
+        type: "icons",
+        icons: _rowIcons.splice(0, size === _types.ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)
+      });
+    }
+  }
+  return rows;
+};
+var useIconTypeRows = function useIconTypeRows(type) {
+  var presenter = (0, _IconPickerPresenterProvider.useIconPicker)();
+  var icons = presenter.vm.icons.filter(function (icon) {
+    return icon.type === type;
+  });
+  var rows = getRows(icons, presenter.vm.size);
+  return {
+    isEmpty: rows.length === 0,
+    rows: rows,
+    rowCount: rows.length
+  };
+};
+var RowRenderer = function RowRenderer(_ref) {
+  var row = _ref.row,
+    style = _ref.style,
+    cellDecorator = _ref.cellDecorator,
+    onIconClick = _ref.onIconClick;
+  var presenter = (0, _IconPickerPresenterProvider.useIconPicker)();
+  var value = presenter.vm.selectedIcon;
+  if (row.type === "category-name") {
+    return /*#__PURE__*/_react.default.createElement(_IconPicker.Row, {
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(_IconPicker.CategoryLabel, null, row.name));
+  }
+  return /*#__PURE__*/_react.default.createElement(_IconPicker.Row, {
+    style: style
+  }, row.icons.map(function (item, itemKey) {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: itemKey
+    }, cellDecorator(/*#__PURE__*/_react.default.createElement(_IconPicker.Cell, {
+      key: itemKey,
+      isActive: item.name === value?.name,
+      onClick: function onClick() {
+        return onIconClick(item);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconProvider, {
+      icon: item
+    }, /*#__PURE__*/_react.default.createElement(_IconRenderer.IconRenderer, null)))));
+  }));
+};
+var noopDecorator = function noopDecorator(cell) {
+  return cell;
+};
+var IconPickerTab = exports.IconPickerTab = function IconPickerTab(_ref2) {
+  var label = _ref2.label,
+    actions = _ref2.actions,
+    onChange = _ref2.onChange,
+    _ref2$cellDecorator = _ref2.cellDecorator,
+    cellDecorator = _ref2$cellDecorator === void 0 ? noopDecorator : _ref2$cellDecorator;
+  var _useIconType = (0, _IconType.useIconType)(),
+    type = _useIconType.type;
+  var _useIconTypeRows = useIconTypeRows(type),
+    isEmpty = _useIconTypeRows.isEmpty,
+    rowCount = _useIconTypeRows.rowCount,
+    rows = _useIconTypeRows.rows;
+  var presenter = (0, _IconPickerPresenterProvider.useIconPicker)();
+  var size = presenter.vm.size;
+  return /*#__PURE__*/_react.default.createElement(_Tabs.Tab, {
+    label: label
+  }, /*#__PURE__*/_react.default.createElement(_IconPicker.TabContentWrapper, {
+    size: size
+  }, /*#__PURE__*/_react.default.createElement(_IconPicker.InputsWrapper, null, /*#__PURE__*/_react.default.createElement(_DelayedOnChange.DelayedOnChange, {
+    value: presenter.vm.filter,
+    onChange: function onChange(value) {
+      return presenter.setFilter(value);
+    }
+  }, function (_ref3) {
+    var value = _ref3.value,
+      onChange = _ref3.onChange;
+    return /*#__PURE__*/_react.default.createElement(_Input.Input, {
+      value: value,
+      onChange: onChange,
+      placeholder: "Search icons..."
+    });
+  }), actions ? actions : null), /*#__PURE__*/_react.default.createElement(_IconPicker.ListWrapper, null, isEmpty ? /*#__PURE__*/_react.default.createElement(_IconPicker.NoResultsWrapper, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body1"
+  }, "No results found.")) : /*#__PURE__*/_react.default.createElement(_reactVirtualized.List, {
+    rowRenderer: function rowRenderer(_ref4) {
+      var key = _ref4.key,
+        props = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
+      return /*#__PURE__*/_react.default.createElement(RowRenderer, Object.assign({
+        key: key,
+        row: rows[props.index],
+        cellDecorator: cellDecorator,
+        onIconClick: onChange
+      }, props));
+    },
+    height: size === _types.ICON_PICKER_SIZE.SMALL ? 250 : 320,
+    rowCount: rowCount,
+    rowHeight: 40,
+    width: size === _types.ICON_PICKER_SIZE.SMALL ? 255 : 340
+  }))));
+};
+
+//# sourceMappingURL=IconPickerTab.js.map

package/components/IconPicker/IconPickerTab.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactVirtualized","_groupBy","_interopRequireDefault","_Tabs","_Typography","_DelayedOnChange","_Input","_reactComposition","_IconRenderer","_IconPicker","_IconPickerPresenterProvider","_IconType","_types","_excluded","COLUMN_COUNT","IconPickerTabRenderer","exports","makeDecoratable","getRows","icons","size","groupedObjects","groupBy","rows","key","rowIcons","push","type","name","length","splice","ICON_PICKER_SIZE","SMALL","undefined","useIconTypeRows","presenter","useIconPicker","vm","filter","icon","isEmpty","rowCount","RowRenderer","_ref","row","style","cellDecorator","onIconClick","value","selectedIcon","default","createElement","Row","CategoryLabel","map","item","itemKey","Fragment","Cell","isActive","onClick","IconProvider","IconRenderer","noopDecorator","cell","IconPickerTab","_ref2","label","actions","onChange","_ref2$cellDecorator","_useIconType","useIconType","_useIconTypeRows","Tab","TabContentWrapper","InputsWrapper","DelayedOnChange","setFilter","_ref3","Input","placeholder","ListWrapper","NoResultsWrapper","Typography","use","List","rowRenderer","_ref4","props","_objectWithoutProperties2","Object","assign","index","height","rowHeight","width"],"sources":["IconPickerTab.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { List } from \"react-virtualized\";\nimport groupBy from \"lodash/groupBy\";\n\nimport { Tab } from \"@webiny/ui/Tabs\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { DelayedOnChange } from \"@webiny/ui/DelayedOnChange\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\n\nimport { IconProvider, IconRenderer } from \"./IconRenderer\";\nimport {\n    Row,\n    Cell,\n    CategoryLabel,\n    TabContentWrapper,\n    ListWrapper,\n    NoResultsWrapper,\n    InputsWrapper\n} from \"./IconPicker.styles\";\nimport { useIconPicker } from \"./IconPickerPresenterProvider\";\nimport { useIconType } from \"./config/IconType\";\nimport { Icon, IconPickerGridRow, ICON_PICKER_SIZE } from \"./types\";\n\nconst COLUMN_COUNT = 8;\n\nexport const IconPickerTabRenderer = makeDecoratable(\"IconPickerTabRenderer\", () => null);\n\nconst getRows = (icons: Icon[], size?: string) => {\n    // Group the icons by their category.\n    const groupedObjects = groupBy(icons, \"category\");\n    const rows: IconPickerGridRow[] = [];\n\n    // Iterate over each category in the grouped icons.\n    for (const key in groupedObjects) {\n        // Skip any group where the key is `undefined` (these icons will be handled separately).\n        if (key !== \"undefined\") {\n            const rowIcons = groupedObjects[key];\n\n            // Add a row for the category name.\n            rows.push({ type: \"category-name\", name: key });\n\n            // Split the icons in this category into groups of COLUMN_COUNT and add them as rows.\n            while (rowIcons.length) {\n                rows.push({\n                    type: \"icons\",\n                    icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n                });\n            }\n        }\n    }\n\n    // Handle icons that don't have a category (key is `undefined`).\n    if (groupedObjects.undefined) {\n        const rowIcons = groupedObjects.undefined;\n\n        // Add a row for the `Uncategorized` category name.\n        rows.push({ type: \"category-name\", name: \"Uncategorized\" });\n\n        // Split these icons into groups of COLUMN_COUNT and add them as rows.\n        while (rowIcons.length) {\n            rows.push({\n                type: \"icons\",\n                icons: rowIcons.splice(0, size === ICON_PICKER_SIZE.SMALL ? 6 : COLUMN_COUNT)\n            });\n        }\n    }\n\n    return rows;\n};\n\nconst useIconTypeRows = (type: string) => {\n    const presenter = useIconPicker();\n    const icons = presenter.vm.icons.filter(icon => icon.type === type);\n    const rows = getRows(icons, presenter.vm.size);\n\n    return {\n        isEmpty: rows.length === 0,\n        rows,\n        rowCount: rows.length\n    };\n};\n\ninterface RenderRowProps {\n    onIconClick: (icon: Icon) => void;\n    style: Record<string, any>;\n    row: IconPickerGridRow;\n    cellDecorator: CellDecorator;\n}\n\nconst RowRenderer = ({ row, style, cellDecorator, onIconClick }: RenderRowProps) => {\n    const presenter = useIconPicker();\n    const value = presenter.vm.selectedIcon;\n\n    if (row.type === \"category-name\") {\n        return (\n            <Row style={style}>\n                <CategoryLabel>{row.name}</CategoryLabel>\n            </Row>\n        );\n    }\n\n    return (\n        <Row style={style}>\n            {row.icons.map((item, itemKey) => (\n                <Fragment key={itemKey}>\n                    {cellDecorator(\n                        <Cell\n                            key={itemKey}\n                            isActive={item.name === value?.name}\n                            onClick={() => onIconClick(item)}\n                        >\n                            <IconProvider icon={item}>\n                                <IconRenderer />\n                            </IconProvider>\n                        </Cell>\n                    )}\n                </Fragment>\n            ))}\n        </Row>\n    );\n};\n\ninterface CellDecorator {\n    (cell: React.ReactElement): React.ReactElement;\n}\n\nconst noopDecorator: CellDecorator = cell => cell;\n\nexport interface IconPickerTabProps {\n    label: string;\n    onChange: (icon: Icon) => void;\n    actions?: React.ReactElement;\n    cellDecorator?: CellDecorator;\n}\n\nexport const IconPickerTab = ({\n    label,\n    actions,\n    onChange,\n    cellDecorator = noopDecorator\n}: IconPickerTabProps) => {\n    const { type } = useIconType();\n    const { isEmpty, rowCount, rows } = useIconTypeRows(type);\n    const presenter = useIconPicker();\n    const size = presenter.vm.size;\n\n    return (\n        <Tab label={label}>\n            <TabContentWrapper size={size}>\n                <InputsWrapper>\n                    <DelayedOnChange\n                        value={presenter.vm.filter}\n                        onChange={value => presenter.setFilter(value)}\n                    >\n                        {({ value, onChange }) => (\n                            <Input\n                                value={value}\n                                onChange={onChange}\n                                placeholder={\"Search icons...\"}\n                            />\n                        )}\n                    </DelayedOnChange>\n                    {actions ? actions : null}\n                </InputsWrapper>\n                <ListWrapper>\n                    {isEmpty ? (\n                        <NoResultsWrapper>\n                            <Typography use=\"body1\">No results found.</Typography>\n                        </NoResultsWrapper>\n                    ) : (\n                        <List\n                            rowRenderer={({ key, ...props }) => (\n                                <RowRenderer\n                                    key={key}\n                                    row={rows[props.index]}\n                                    cellDecorator={cellDecorator}\n                                    onIconClick={onChange}\n                                    {...props}\n                                />\n                            )}\n                            height={size === ICON_PICKER_SIZE.SMALL ? 250 : 320}\n                            rowCount={rowCount}\n                            rowHeight={40}\n                            width={size === ICON_PICKER_SIZE.SMALL ? 255 : 340}\n                        />\n                    )}\n                </ListWrapper>\n            </TabContentWrapper>\n        </Tab>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/IconRenderer.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import { Icon } from "./types";
+export declare const IconRenderer: ((props: unknown) => JSX.Element | null) & {
+    original: (props: unknown) => JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: unknown) => JSX.Element | null) & {
+        original: (props: unknown) => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: unknown) => JSX.Element | null) & {
+        original: (props: unknown) => JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+interface IconContext<T extends Icon = Icon> {
+    icon: T;
+    size: number;
+}
+declare const IconContext: React.Context<IconContext<Icon> | undefined>;
+interface IconProviderProps {
+    icon: Icon;
+    size?: number;
+    children: React.ReactNode;
+}
+export declare const IconProvider: ({ icon, size, children }: IconProviderProps) => React.JSX.Element;
+export declare function useIcon<T extends Icon = Icon>(): IconContext<T>;
+export {};

package/components/IconPicker/IconRenderer.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconRenderer = exports.IconProvider = void 0;
+exports.useIcon = useIcon;
+var _react = _interopRequireDefault(require("react"));
+var _mobx = require("mobx");
+var _reactComposition = require("@webiny/react-composition");
+var IconRenderer = exports.IconRenderer = (0, _reactComposition.makeDecoratable)("IconPickerIcon", (0, _reactComposition.createVoidComponent)());
+var IconContext = /*#__PURE__*/_react.default.createContext(undefined);
+var IconProvider = exports.IconProvider = function IconProvider(_ref) {
+  var icon = _ref.icon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    children = _ref.children;
+  // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.
+  return /*#__PURE__*/_react.default.createElement(IconContext.Provider, {
+    value: {
+      icon: (0, _mobx.toJS)(icon),
+      size: size
+    }
+  }, children);
+};
+function useIcon() {
+  var context = _react.default.useContext(IconContext);
+  if (!context) {
+    throw Error("Missing <IconProvider> in the component tree!");
+  }
+  return context;
+}
+
+//# sourceMappingURL=IconRenderer.js.map

package/components/IconPicker/IconRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobx","_reactComposition","IconRenderer","exports","makeDecoratable","createVoidComponent","IconContext","React","createContext","undefined","IconProvider","_ref","icon","_ref$size","size","children","default","createElement","Provider","value","toJS","useIcon","context","useContext","Error"],"sources":["IconRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { toJS } from \"mobx\";\n\nimport { makeDecoratable, createVoidComponent } from \"@webiny/react-composition\";\n\nimport { Icon } from \"./types\";\n\nexport const IconRenderer = makeDecoratable(\"IconPickerIcon\", createVoidComponent());\n\ninterface IconContext<T extends Icon = Icon> {\n    icon: T;\n    size: number;\n}\n\nconst IconContext = React.createContext<IconContext | undefined>(undefined);\n\ninterface IconProviderProps {\n    icon: Icon;\n    size?: number;\n    children: React.ReactNode;\n}\n\nexport const IconProvider = ({ icon, size = 32, children }: IconProviderProps) => {\n    // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.\n    return (\n        <IconContext.Provider value={{ icon: toJS(icon), size }}>{children}</IconContext.Provider>\n    );\n};\n\nexport function useIcon<T extends Icon = Icon>(): IconContext<T> {\n    const context = React.useContext(IconContext);\n    if (!context) {\n        throw Error(`Missing <IconProvider> in the component tree!`);\n    }\n    return context as IconContext<T>;\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AAIO,IAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,iCAAe,EAAC,gBAAgB,EAAE,IAAAC,qCAAmB,EAAC,CAAC,CAAC;AAOpF,IAAMC,WAAW,gBAAGC,cAAK,CAACC,aAAa,CAA0BC,SAAS,CAAC;AAQpE,IAAMC,YAAY,GAAAP,OAAA,CAAAO,YAAA,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAAyD;EAAA,IAAnDC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAAC,SAAA,GAAAF,IAAA,CAAEG,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IAAEE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;EACpD;EACA,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACX,WAAW,CAACY,QAAQ;IAACC,KAAK,EAAE;MAAEP,IAAI,EAAE,IAAAQ,UAAI,EAACR,IAAI,CAAC;MAAEE,IAAI,EAAJA;IAAK;EAAE,GAAEC,QAA+B,CAAC;AAElG,CAAC;AAEM,SAASM,OAAOA,CAAA,EAA0C;EAC7D,IAAMC,OAAO,GAAGf,cAAK,CAACgB,UAAU,CAACjB,WAAW,CAAC;EAC7C,IAAI,CAACgB,OAAO,EAAE;IACV,MAAME,KAAK,gDAAgD,CAAC;EAChE;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}

package/components/IconPicker/IconRepository.d.ts

@@ -0,0 +1,19 @@
+import { IconPackProviderInterface as IconPackProvider, IconType } from "./config";
+import { Icon } from "./types";
+export declare class IconRepository {
+    private readonly iconPackProviders;
+    private readonly iconTypes;
+    private loading;
+    private icons;
+    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]);
+    loadIcons(): Promise<void>;
+    getIcons(): Icon[];
+    addIcon(icon: Icon): void;
+    getIconTypes(): IconType[];
+    getLoading(): {
+        isLoading: boolean;
+        loadingLabel: string;
+        message: string;
+    };
+    private runWithLoading;
+}