@webiny/app-admin 6.3.0 → 6.4.0-beta.0

package/components/IconPicker/IconRenderer.js

@@ -1,27 +1,19 @@
-import React from "react";
+import react from "react";
 import { toJS } from "mobx";
-import { makeDecoratable, createVoidComponent } from "@webiny/react-composition";
-export const IconRenderer = makeDecoratable("IconPickerIcon", createVoidComponent());
-const IconContext = /*#__PURE__*/React.createContext(undefined);
-export const IconProvider = ({
-  icon,
-  size = 32,
-  children
-}) => {
-  // I want to use the POJO via the context, to reduce the need of using `observer` HOC everywhere.
-  return /*#__PURE__*/React.createElement(IconContext.Provider, {
-    value: {
-      icon: toJS(icon),
-      size
-    }
-  }, children);
-};
-export function useIcon() {
-  const context = React.useContext(IconContext);
-  if (!context) {
-    throw Error(`Missing <IconProvider> in the component tree!`);
-  }
-  return context;
+import { createVoidComponent, makeDecoratable } from "@webiny/react-composition";
+const IconRenderer = makeDecoratable("IconPickerIcon", createVoidComponent());
+const IconContext = /*#__PURE__*/ react.createContext(void 0);
+const IconProvider = ({ icon, size = 32, children })=>/*#__PURE__*/ react.createElement(IconContext.Provider, {
+        value: {
+            icon: toJS(icon),
+            size
+        }
+    }, children);
+function useIcon() {
+    const context = react.useContext(IconContext);
+    if (!context) throw Error("Missing <IconProvider> in the component tree!");
+    return context;
 }
+export { IconProvider, IconRenderer, useIcon };
 
 //# sourceMappingURL=IconRenderer.js.map

package/components/IconPicker/IconRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","toJS","makeDecoratable","createVoidComponent","IconRenderer","IconContext","createContext","undefined","IconProvider","icon","size","children","createElement","Provider","value","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 type { Icon } from \"./types.js\";\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,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,MAAM;AAE3B,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,2BAA2B;AAIhF,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC,gBAAgB,EAAEC,mBAAmB,CAAC,CAAC,CAAC;AAOpF,MAAME,WAAW,gBAAGL,KAAK,CAACM,aAAa,CAA0BC,SAAS,CAAC;AAQ3E,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,IAAI,GAAG,EAAE;EAAEC;AAA4B,CAAC,KAAK;EAC9E;EACA,oBACIX,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACQ,QAAQ;IAACC,KAAK,EAAE;MAAEL,IAAI,EAAER,IAAI,CAACQ,IAAI,CAAC;MAAEC;IAAK;EAAE,GAAEC,QAA+B,CAAC;AAElG,CAAC;AAED,OAAO,SAASI,OAAOA,CAAA,EAA0C;EAC7D,MAAMC,OAAO,GAAGhB,KAAK,CAACiB,UAAU,CAACZ,WAAW,CAAC;EAC7C,IAAI,CAACW,OAAO,EAAE;IACV,MAAME,KAAK,CAAC,+CAA+C,CAAC;EAChE;EACA,OAAOF,OAAO;AAClB","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconRenderer.js","sources":["../../../src/components/IconPicker/IconRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { toJS } from \"mobx\";\n\nimport { makeDecoratable, createVoidComponent } from \"@webiny/react-composition\";\n\nimport type { Icon } from \"./types.js\";\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"],"names":["IconRenderer","makeDecoratable","createVoidComponent","IconContext","React","undefined","IconProvider","icon","size","children","toJS","useIcon","context","Error"],"mappings":";;;AAOO,MAAMA,eAAeC,gBAAgB,kBAAkBC;AAO9D,MAAMC,cAAc,WAAHA,GAAGC,MAAAA,aAAmB,CAA0BC;AAQ1D,MAAMC,eAAe,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAE,EAAEC,QAAQ,EAAqB,GAElE,WAAP,GACI,oBAACN,YAAY,QAAQ;QAAC,OAAO;YAAE,MAAMO,KAAKH;YAAOC;QAAK;OAAIC;AAI3D,SAASE;IACZ,MAAMC,UAAUR,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACS,SACD,MAAMC,MAAM;IAEhB,OAAOD;AACX"}

package/components/IconPicker/IconRepository.js

@@ -1,47 +1,48 @@
 import cloneDeep from "lodash/cloneDeep.js";
 import { makeAutoObservable, runInAction } from "mobx";
 import { Loading } from "./Loading.js";
-export class IconRepository {
-  icons = [];
-  constructor(iconTypes, iconPackProviders) {
-    this.iconTypes = iconTypes;
-    this.loading = new Loading(true);
-    this.iconPackProviders = iconPackProviders;
-    makeAutoObservable(this);
-  }
-  async loadIcons() {
-    if (this.icons.length > 0) {
-      return;
+class IconRepository {
+    constructor(iconTypes, iconPackProviders){
+        this.icons = [];
+        this.iconTypes = iconTypes;
+        this.loading = new Loading(true);
+        this.iconPackProviders = iconPackProviders;
+        makeAutoObservable(this);
+    }
+    async loadIcons() {
+        if (this.icons.length > 0) return;
+        const icons = await this.runWithLoading(async ()=>{
+            const icons = await Promise.all(this.iconPackProviders.map((provider)=>provider.getIcons()));
+            return icons.flat();
+        });
+        const iconTypes = this.iconTypes.map((iconType)=>iconType.name);
+        runInAction(()=>{
+            this.icons = icons.filter((icon)=>iconTypes.includes(icon.type));
+        });
+    }
+    getIcons() {
+        return cloneDeep(this.icons);
+    }
+    addIcon(icon) {
+        this.icons = [
+            ...this.icons,
+            icon
+        ];
+    }
+    getIconTypes() {
+        return this.iconTypes;
+    }
+    getLoading() {
+        return {
+            isLoading: this.loading.isLoading,
+            loadingLabel: this.loading.loadingLabel,
+            message: this.loading.feedback
+        };
+    }
+    async runWithLoading(action, loadingLabel, successMessage, failureMessage) {
+        return await this.loading.runCallbackWithLoading(action, loadingLabel, successMessage, failureMessage);
     }
-    const icons = await this.runWithLoading(async () => {
-      const icons = await Promise.all(this.iconPackProviders.map(provider => provider.getIcons()));
-      return icons.flat();
-    });
-    const iconTypes = this.iconTypes.map(iconType => iconType.name);
-    runInAction(() => {
-      // Make sure we only work with known icon types.
-      this.icons = icons.filter(icon => iconTypes.includes(icon.type));
-    });
-  }
-  getIcons() {
-    return cloneDeep(this.icons);
-  }
-  addIcon(icon) {
-    this.icons = [...this.icons, icon];
-  }
-  getIconTypes() {
-    return this.iconTypes;
-  }
-  getLoading() {
-    return {
-      isLoading: this.loading.isLoading,
-      loadingLabel: this.loading.loadingLabel,
-      message: this.loading.feedback
-    };
-  }
-  async runWithLoading(action, loadingLabel, successMessage, failureMessage) {
-    return await this.loading.runCallbackWithLoading(action, loadingLabel, successMessage, failureMessage);
-  }
 }
+export { IconRepository };
 
 //# sourceMappingURL=IconRepository.js.map

package/components/IconPicker/IconRepository.js.map

@@ -1 +1 @@
-{"version":3,"names":["cloneDeep","makeAutoObservable","runInAction","Loading","IconRepository","icons","constructor","iconTypes","iconPackProviders","loading","loadIcons","length","runWithLoading","Promise","all","map","provider","getIcons","flat","iconType","name","filter","icon","includes","type","addIcon","getIconTypes","getLoading","isLoading","loadingLabel","message","feedback","action","successMessage","failureMessage","runCallbackWithLoading"],"sources":["IconRepository.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep.js\";\nimport { makeAutoObservable, runInAction } from \"mobx\";\n\nimport { Loading } from \"./Loading.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\nimport type { Icon } from \"./types.js\";\n\nexport class IconRepository {\n    private readonly iconPackProviders: IconPackProvider[];\n    private readonly iconTypes: IconType[];\n    private loading: Loading;\n    private icons: Icon[] = [];\n\n    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        this.iconTypes = iconTypes;\n        this.loading = new Loading(true);\n        this.iconPackProviders = iconPackProviders;\n        makeAutoObservable(this);\n    }\n\n    async loadIcons() {\n        if (this.icons.length > 0) {\n            return;\n        }\n\n        const icons = await this.runWithLoading(async () => {\n            const icons = await Promise.all(\n                this.iconPackProviders.map(provider => provider.getIcons())\n            );\n            return icons.flat();\n        });\n\n        const iconTypes = this.iconTypes.map(iconType => iconType.name);\n\n        runInAction(() => {\n            // Make sure we only work with known icon types.\n            this.icons = icons.filter(icon => iconTypes.includes(icon.type));\n        });\n    }\n\n    getIcons() {\n        return cloneDeep(this.icons);\n    }\n\n    addIcon(icon: Icon) {\n        this.icons = [...this.icons, icon];\n    }\n\n    getIconTypes() {\n        return this.iconTypes;\n    }\n\n    getLoading() {\n        return {\n            isLoading: this.loading.isLoading,\n            loadingLabel: this.loading.loadingLabel,\n            message: this.loading.feedback\n        };\n    }\n\n    private async runWithLoading<T>(\n        action: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ) {\n        return await this.loading.runCallbackWithLoading(\n            action,\n            loadingLabel,\n            successMessage,\n            failureMessage\n        );\n    }\n}\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,qBAAqB;AAC3C,SAASC,kBAAkB,EAAEC,WAAW,QAAQ,MAAM;AAEtD,SAASC,OAAO;AAIhB,OAAO,MAAMC,cAAc,CAAC;EAIhBC,KAAK,GAAW,EAAE;EAE1BC,WAAWA,CAACC,SAAqB,EAAEC,iBAAqC,EAAE;IACtE,IAAI,CAACD,SAAS,GAAGA,SAAS;IAC1B,IAAI,CAACE,OAAO,GAAG,IAAIN,OAAO,CAAC,IAAI,CAAC;IAChC,IAAI,CAACK,iBAAiB,GAAGA,iBAAiB;IAC1CP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,MAAMS,SAASA,CAAA,EAAG;IACd,IAAI,IAAI,CAACL,KAAK,CAACM,MAAM,GAAG,CAAC,EAAE;MACvB;IACJ;IAEA,MAAMN,KAAK,GAAG,MAAM,IAAI,CAACO,cAAc,CAAC,YAAY;MAChD,MAAMP,KAAK,GAAG,MAAMQ,OAAO,CAACC,GAAG,CAC3B,IAAI,CAACN,iBAAiB,CAACO,GAAG,CAACC,QAAQ,IAAIA,QAAQ,CAACC,QAAQ,CAAC,CAAC,CAC9D,CAAC;MACD,OAAOZ,KAAK,CAACa,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAMX,SAAS,GAAG,IAAI,CAACA,SAAS,CAACQ,GAAG,CAACI,QAAQ,IAAIA,QAAQ,CAACC,IAAI,CAAC;IAE/DlB,WAAW,CAAC,MAAM;MACd;MACA,IAAI,CAACG,KAAK,GAAGA,KAAK,CAACgB,MAAM,CAACC,IAAI,IAAIf,SAAS,CAACgB,QAAQ,CAACD,IAAI,CAACE,IAAI,CAAC,CAAC;IACpE,CAAC,CAAC;EACN;EAEAP,QAAQA,CAAA,EAAG;IACP,OAAOjB,SAAS,CAAC,IAAI,CAACK,KAAK,CAAC;EAChC;EAEAoB,OAAOA,CAACH,IAAU,EAAE;IAChB,IAAI,CAACjB,KAAK,GAAG,CAAC,GAAG,IAAI,CAACA,KAAK,EAAEiB,IAAI,CAAC;EACtC;EAEAI,YAAYA,CAAA,EAAG;IACX,OAAO,IAAI,CAACnB,SAAS;EACzB;EAEAoB,UAAUA,CAAA,EAAG;IACT,OAAO;MACHC,SAAS,EAAE,IAAI,CAACnB,OAAO,CAACmB,SAAS;MACjCC,YAAY,EAAE,IAAI,CAACpB,OAAO,CAACoB,YAAY;MACvCC,OAAO,EAAE,IAAI,CAACrB,OAAO,CAACsB;IAC1B,CAAC;EACL;EAEA,MAAcnB,cAAcA,CACxBoB,MAAwB,EACxBH,YAAqB,EACrBI,cAAuB,EACvBC,cAAuB,EACzB;IACE,OAAO,MAAM,IAAI,CAACzB,OAAO,CAAC0B,sBAAsB,CAC5CH,MAAM,EACNH,YAAY,EACZI,cAAc,EACdC,cACJ,CAAC;EACL;AACJ","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconRepository.js","sources":["../../../src/components/IconPicker/IconRepository.ts"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep.js\";\nimport { makeAutoObservable, runInAction } from \"mobx\";\n\nimport { Loading } from \"./Loading.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\nimport type { Icon } from \"./types.js\";\n\nexport class IconRepository {\n    private readonly iconPackProviders: IconPackProvider[];\n    private readonly iconTypes: IconType[];\n    private loading: Loading;\n    private icons: Icon[] = [];\n\n    constructor(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        this.iconTypes = iconTypes;\n        this.loading = new Loading(true);\n        this.iconPackProviders = iconPackProviders;\n        makeAutoObservable(this);\n    }\n\n    async loadIcons() {\n        if (this.icons.length > 0) {\n            return;\n        }\n\n        const icons = await this.runWithLoading(async () => {\n            const icons = await Promise.all(\n                this.iconPackProviders.map(provider => provider.getIcons())\n            );\n            return icons.flat();\n        });\n\n        const iconTypes = this.iconTypes.map(iconType => iconType.name);\n\n        runInAction(() => {\n            // Make sure we only work with known icon types.\n            this.icons = icons.filter(icon => iconTypes.includes(icon.type));\n        });\n    }\n\n    getIcons() {\n        return cloneDeep(this.icons);\n    }\n\n    addIcon(icon: Icon) {\n        this.icons = [...this.icons, icon];\n    }\n\n    getIconTypes() {\n        return this.iconTypes;\n    }\n\n    getLoading() {\n        return {\n            isLoading: this.loading.isLoading,\n            loadingLabel: this.loading.loadingLabel,\n            message: this.loading.feedback\n        };\n    }\n\n    private async runWithLoading<T>(\n        action: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ) {\n        return await this.loading.runCallbackWithLoading(\n            action,\n            loadingLabel,\n            successMessage,\n            failureMessage\n        );\n    }\n}\n"],"names":["IconRepository","iconTypes","iconPackProviders","Loading","makeAutoObservable","icons","Promise","provider","iconType","runInAction","icon","cloneDeep","action","loadingLabel","successMessage","failureMessage"],"mappings":";;;AAOO,MAAMA;IAMT,YAAYC,SAAqB,EAAEC,iBAAqC,CAAE;aAFlE,KAAK,GAAW,EAAE;QAGtB,IAAI,CAAC,SAAS,GAAGD;QACjB,IAAI,CAAC,OAAO,GAAG,IAAIE,QAAQ;QAC3B,IAAI,CAAC,iBAAiB,GAAGD;QACzBE,mBAAmB,IAAI;IAC3B;IAEA,MAAM,YAAY;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GACpB;QAGJ,MAAMC,QAAQ,MAAM,IAAI,CAAC,cAAc,CAAC;YACpC,MAAMA,QAAQ,MAAMC,QAAQ,GAAG,CAC3B,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAACC,CAAAA,WAAYA,SAAS,QAAQ;YAE5D,OAAOF,MAAM,IAAI;QACrB;QAEA,MAAMJ,YAAY,IAAI,CAAC,SAAS,CAAC,GAAG,CAACO,CAAAA,WAAYA,SAAS,IAAI;QAE9DC,YAAY;YAER,IAAI,CAAC,KAAK,GAAGJ,MAAM,MAAM,CAACK,CAAAA,OAAQT,UAAU,QAAQ,CAACS,KAAK,IAAI;QAClE;IACJ;IAEA,WAAW;QACP,OAAOC,UAAU,IAAI,CAAC,KAAK;IAC/B;IAEA,QAAQD,IAAU,EAAE;QAChB,IAAI,CAAC,KAAK,GAAG;eAAI,IAAI,CAAC,KAAK;YAAEA;SAAK;IACtC;IAEA,eAAe;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,aAAa;QACT,OAAO;YACH,WAAW,IAAI,CAAC,OAAO,CAAC,SAAS;YACjC,cAAc,IAAI,CAAC,OAAO,CAAC,YAAY;YACvC,SAAS,IAAI,CAAC,OAAO,CAAC,QAAQ;QAClC;IACJ;IAEA,MAAc,eACVE,MAAwB,EACxBC,YAAqB,EACrBC,cAAuB,EACvBC,cAAuB,EACzB;QACE,OAAO,MAAM,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAC5CH,QACAC,cACAC,gBACAC;IAER;AACJ"}

package/components/IconPicker/IconRepository.test.js

@@ -1,67 +1,60 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { IconRepository } from "./IconRepository.js";
-const mockIconTypes = [{
-  name: "icon"
-}, {
-  name: "emoji"
-}, {
-  name: "custom"
-}];
-const 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"
-}];
-const mockIconPackProviders = [{
-  name: "mock_icons",
-  getIcons: async () => {
-    return mockIcons;
-  }
-}];
-describe("IconRepository", () => {
-  const 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"
-  };
-  it("should create an IconRepository and load icons and iconTypes", async () => {
-    // create repository
-    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
-
-    // repository should get the expected iconTypes array
-    expect(repository.getIconTypes()).toEqual(mockIconTypes);
-
-    // getIcons should return empty array
-    expect(repository.getIcons()).toEqual([]);
-
-    // load icons
-    await repository.loadIcons();
-
-    // getIcons should return the expected icons array
-    expect(repository.getIcons()).toEqual(mockIcons);
-  });
-  it("should create an IconRepository and add icon", () => {
-    // create repository
-    const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
-
-    // getIcons should return empty array
-    expect(repository.getIcons()).toEqual([]);
-
-    // add icon
-    repository.addIcon(icon);
-
-    // getIcons should return the expected icons array
-    expect(repository.getIcons()).toEqual([icon]);
-  });
+const mockIconTypes = [
+    {
+        name: "icon"
+    },
+    {
+        name: "emoji"
+    },
+    {
+        name: "custom"
+    }
+];
+const 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"
+    }
+];
+const mockIconPackProviders = [
+    {
+        name: "mock_icons",
+        getIcons: async ()=>mockIcons
+    }
+];
+describe("IconRepository", ()=>{
+    const 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"
+    };
+    it("should create an IconRepository and load icons and iconTypes", async ()=>{
+        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+        expect(repository.getIconTypes()).toEqual(mockIconTypes);
+        expect(repository.getIcons()).toEqual([]);
+        await repository.loadIcons();
+        expect(repository.getIcons()).toEqual(mockIcons);
+    });
+    it("should create an IconRepository and add icon", ()=>{
+        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);
+        expect(repository.getIcons()).toEqual([]);
+        repository.addIcon(icon);
+        expect(repository.getIcons()).toEqual([
+            icon
+        ]);
+    });
 });
 
 //# sourceMappingURL=IconRepository.test.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["describe","it","expect","IconRepository","mockIconTypes","name","mockIcons","type","value","category","skinToneSupport","mockIconPackProviders","getIcons","icon","color","repository","getIconTypes","toEqual","loadIcons","addIcon"],"sources":["IconRepository.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { IconRepository } from \"./IconRepository.js\";\nimport type { Icon } from \"./types.js\";\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(\"IconRepository\", () => {\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    it(\"should create an IconRepository and load icons and iconTypes\", async () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // repository should get the expected iconTypes array\n        expect(repository.getIconTypes()).toEqual(mockIconTypes);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // load icons\n        await repository.loadIcons();\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual(mockIcons);\n    });\n\n    it(\"should create an IconRepository and add icon\", () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // add icon\n        repository.addIcon(icon);\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual([icon]);\n    });\n});\n"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,cAAc;AAGvB,MAAMC,aAAa,GAAG,CAAC;EAAEC,IAAI,EAAE;AAAO,CAAC,EAAE;EAAEA,IAAI,EAAE;AAAQ,CAAC,EAAE;EAAEA,IAAI,EAAE;AAAS,CAAC,CAAC;AAE/E,MAAMC,SAAiB,GAAG,CACtB;EACIC,IAAI,EAAE,OAAO;EACbF,IAAI,EAAE,WAAW;EACjBG,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAE,eAAe;EACzBC,eAAe,EAAE;AACrB,CAAC,EACD;EACIH,IAAI,EAAE,MAAM;EACZF,IAAI,EAAE,sBAAsB;EAC5BG,KAAK,EAAE,inBAAinB;EACxnBC,QAAQ,EAAE;AACd,CAAC,CACJ;AAED,MAAME,qBAAqB,GAAG,CAC1B;EACIN,IAAI,EAAE,YAAY;EAClBO,QAAQ,EAAE,MAAAA,CAAA,KAAY;IAClB,OAAON,SAAS;EACpB;AACJ,CAAC,CACJ;AAEDN,QAAQ,CAAC,gBAAgB,EAAE,MAAM;EAC7B,MAAMa,IAAU,GAAG;IACfN,IAAI,EAAE,MAAM;IACZF,IAAI,EAAE,gBAAgB;IACtBG,KAAK,EAAE,wQAAwQ;IAC/QC,QAAQ,EAAE,UAAU;IACpBK,KAAK,EAAE;EACX,CAAC;EAEDb,EAAE,CAAC,8DAA8D,EAAE,YAAY;IAC3E;IACA,MAAMc,UAAU,GAAG,IAAIZ,cAAc,CAACC,aAAa,EAAEO,qBAAqB,CAAC;;IAE3E;IACAT,MAAM,CAACa,UAAU,CAACC,YAAY,CAAC,CAAC,CAAC,CAACC,OAAO,CAACb,aAAa,CAAC;;IAExD;IACAF,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAAC,EAAE,CAAC;;IAEzC;IACA,MAAMF,UAAU,CAACG,SAAS,CAAC,CAAC;;IAE5B;IACAhB,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAACX,SAAS,CAAC;EACpD,CAAC,CAAC;EAEFL,EAAE,CAAC,8CAA8C,EAAE,MAAM;IACrD;IACA,MAAMc,UAAU,GAAG,IAAIZ,cAAc,CAACC,aAAa,EAAEO,qBAAqB,CAAC;;IAE3E;IACAT,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAAC,EAAE,CAAC;;IAEzC;IACAF,UAAU,CAACI,OAAO,CAACN,IAAI,CAAC;;IAExB;IACAX,MAAM,CAACa,UAAU,CAACH,QAAQ,CAAC,CAAC,CAAC,CAACK,OAAO,CAAC,CAACJ,IAAI,CAAC,CAAC;EACjD,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconRepository.test.js","sources":["../../../src/components/IconPicker/IconRepository.test.ts"],"sourcesContent":["import { describe, it, expect } from \"vitest\";\nimport { IconRepository } from \"./IconRepository.js\";\nimport type { Icon } from \"./types.js\";\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(\"IconRepository\", () => {\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    it(\"should create an IconRepository and load icons and iconTypes\", async () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // repository should get the expected iconTypes array\n        expect(repository.getIconTypes()).toEqual(mockIconTypes);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // load icons\n        await repository.loadIcons();\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual(mockIcons);\n    });\n\n    it(\"should create an IconRepository and add icon\", () => {\n        // create repository\n        const repository = new IconRepository(mockIconTypes, mockIconPackProviders);\n\n        // getIcons should return empty array\n        expect(repository.getIcons()).toEqual([]);\n\n        // add icon\n        repository.addIcon(icon);\n\n        // getIcons should return the expected icons array\n        expect(repository.getIcons()).toEqual([icon]);\n    });\n});\n"],"names":["mockIconTypes","mockIcons","mockIconPackProviders","describe","icon","it","repository","IconRepository","expect"],"mappings":";;AAIA,MAAMA,gBAAgB;IAAC;QAAE,MAAM;IAAO;IAAG;QAAE,MAAM;IAAQ;IAAG;QAAE,MAAM;IAAS;CAAE;AAE/E,MAAMC,YAAoB;IACtB;QACI,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;QACV,iBAAiB;IACrB;IACA;QACI,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;IACd;CACH;AAED,MAAMC,wBAAwB;IAC1B;QACI,MAAM;QACN,UAAU,UACCD;IAEf;CACH;AAEDE,SAAS,kBAAkB;IACvB,MAAMC,OAAa;QACf,MAAM;QACN,MAAM;QACN,OAAO;QACP,UAAU;QACV,OAAO;IACX;IAEAC,GAAG,gEAAgE;QAE/D,MAAMC,aAAa,IAAIC,eAAeP,eAAeE;QAGrDM,OAAOF,WAAW,YAAY,IAAI,OAAO,CAACN;QAG1CQ,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAAC,EAAE;QAGxC,MAAMA,WAAW,SAAS;QAG1BE,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAACL;IAC1C;IAEAI,GAAG,gDAAgD;QAE/C,MAAMC,aAAa,IAAIC,eAAeP,eAAeE;QAGrDM,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAAC,EAAE;QAGxCA,WAAW,OAAO,CAACF;QAGnBI,OAAOF,WAAW,QAAQ,IAAI,OAAO,CAAC;YAACF;SAAK;IAChD;AACJ"}

package/components/IconPicker/IconRepositoryFactory.js

@@ -1,17 +1,21 @@
 import { IconRepository } from "./IconRepository.js";
 class IconRepositoryFactory {
-  cache = new Map();
-  getRepository(iconTypes, iconPackProviders) {
-    const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);
-    if (!this.cache.has(cacheKey)) {
-      this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));
+    getRepository(iconTypes, iconPackProviders) {
+        const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);
+        if (!this.cache.has(cacheKey)) this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));
+        return this.cache.get(cacheKey);
+    }
+    getCacheKey(iconTypes, iconPackProviders) {
+        return [
+            ...iconTypes.map((iconType)=>iconType.name).sort(),
+            ...iconPackProviders.map((provider)=>provider.name).sort()
+        ].join("#");
+    }
+    constructor(){
+        this.cache = new Map();
     }
-    return this.cache.get(cacheKey);
-  }
-  getCacheKey(iconTypes, iconPackProviders) {
-    return [...iconTypes.map(iconType => iconType.name).sort(), ...iconPackProviders.map(provider => provider.name).sort()].join("#");
-  }
 }
-export const iconRepositoryFactory = new IconRepositoryFactory();
+const iconRepositoryFactory = new IconRepositoryFactory();
+export { iconRepositoryFactory };
 
 //# sourceMappingURL=IconRepositoryFactory.js.map

package/components/IconPicker/IconRepositoryFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["IconRepository","IconRepositoryFactory","cache","Map","getRepository","iconTypes","iconPackProviders","cacheKey","getCacheKey","has","set","get","map","iconType","name","sort","provider","join","iconRepositoryFactory"],"sources":["IconRepositoryFactory.ts"],"sourcesContent":["import { IconRepository } from \"./IconRepository.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\n\nclass IconRepositoryFactory {\n    private cache: Map<string, IconRepository> = new Map();\n\n    getRepository(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);\n\n        if (!this.cache.has(cacheKey)) {\n            this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));\n        }\n\n        return this.cache.get(cacheKey) as IconRepository;\n    }\n\n    private getCacheKey(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        return [\n            ...iconTypes.map(iconType => iconType.name).sort(),\n            ...iconPackProviders.map(provider => provider.name).sort()\n        ].join(\"#\");\n    }\n}\n\nexport const iconRepositoryFactory = new IconRepositoryFactory();\n"],"mappings":"AAAA,SAASA,cAAc;AAGvB,MAAMC,qBAAqB,CAAC;EAChBC,KAAK,GAAgC,IAAIC,GAAG,CAAC,CAAC;EAEtDC,aAAaA,CAACC,SAAqB,EAAEC,iBAAqC,EAAE;IACxE,MAAMC,QAAQ,GAAG,IAAI,CAACC,WAAW,CAACH,SAAS,EAAEC,iBAAiB,CAAC;IAE/D,IAAI,CAAC,IAAI,CAACJ,KAAK,CAACO,GAAG,CAACF,QAAQ,CAAC,EAAE;MAC3B,IAAI,CAACL,KAAK,CAACQ,GAAG,CAACH,QAAQ,EAAE,IAAIP,cAAc,CAACK,SAAS,EAAEC,iBAAiB,CAAC,CAAC;IAC9E;IAEA,OAAO,IAAI,CAACJ,KAAK,CAACS,GAAG,CAACJ,QAAQ,CAAC;EACnC;EAEQC,WAAWA,CAACH,SAAqB,EAAEC,iBAAqC,EAAE;IAC9E,OAAO,CACH,GAAGD,SAAS,CAACO,GAAG,CAACC,QAAQ,IAAIA,QAAQ,CAACC,IAAI,CAAC,CAACC,IAAI,CAAC,CAAC,EAClD,GAAGT,iBAAiB,CAACM,GAAG,CAACI,QAAQ,IAAIA,QAAQ,CAACF,IAAI,CAAC,CAACC,IAAI,CAAC,CAAC,CAC7D,CAACE,IAAI,CAAC,GAAG,CAAC;EACf;AACJ;AAEA,OAAO,MAAMC,qBAAqB,GAAG,IAAIjB,qBAAqB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/IconRepositoryFactory.js","sources":["../../../src/components/IconPicker/IconRepositoryFactory.ts"],"sourcesContent":["import { IconRepository } from \"./IconRepository.js\";\nimport type { IconPackProviderInterface as IconPackProvider, IconType } from \"./config/index.js\";\n\nclass IconRepositoryFactory {\n    private cache: Map<string, IconRepository> = new Map();\n\n    getRepository(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        const cacheKey = this.getCacheKey(iconTypes, iconPackProviders);\n\n        if (!this.cache.has(cacheKey)) {\n            this.cache.set(cacheKey, new IconRepository(iconTypes, iconPackProviders));\n        }\n\n        return this.cache.get(cacheKey) as IconRepository;\n    }\n\n    private getCacheKey(iconTypes: IconType[], iconPackProviders: IconPackProvider[]) {\n        return [\n            ...iconTypes.map(iconType => iconType.name).sort(),\n            ...iconPackProviders.map(provider => provider.name).sort()\n        ].join(\"#\");\n    }\n}\n\nexport const iconRepositoryFactory = new IconRepositoryFactory();\n"],"names":["IconRepositoryFactory","iconTypes","iconPackProviders","cacheKey","IconRepository","iconType","provider","Map","iconRepositoryFactory"],"mappings":";AAGA,MAAMA;IAGF,cAAcC,SAAqB,EAAEC,iBAAqC,EAAE;QACxE,MAAMC,WAAW,IAAI,CAAC,WAAW,CAACF,WAAWC;QAE7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC,WAChB,IAAI,CAAC,KAAK,CAAC,GAAG,CAACA,UAAU,IAAIC,eAAeH,WAAWC;QAG3D,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC;IAC1B;IAEQ,YAAYF,SAAqB,EAAEC,iBAAqC,EAAE;QAC9E,OAAO;eACAD,UAAU,GAAG,CAACI,CAAAA,WAAYA,SAAS,IAAI,EAAE,IAAI;eAC7CH,kBAAkB,GAAG,CAACI,CAAAA,WAAYA,SAAS,IAAI,EAAE,IAAI;SAC3D,CAAC,IAAI,CAAC;IACX;;aAjBQ,KAAK,GAAgC,IAAIC;;AAkBrD;AAEO,MAAMC,wBAAwB,IAAIR"}

package/components/IconPicker/Loading.js

@@ -1,50 +1,51 @@
 import { makeAutoObservable } from "mobx";
-export class Loading {
-  constructor(isLoading = false) {
-    this._isLoading = isLoading;
-    this._loadingLabel = "";
-    this._feedback = "";
-    this._success = false;
-    makeAutoObservable(this);
-  }
-  startLoading(label) {
-    this._isLoading = true;
-    this._loadingLabel = label || "";
-    this._feedback = "";
-    this._success = false;
-  }
-  stopLoadingWithSuccess(message) {
-    this._isLoading = false;
-    this._loadingLabel = "";
-    this._feedback = message || "";
-    this._success = true;
-  }
-  stopLoadingWithError(message) {
-    this._isLoading = false;
-    this._loadingLabel = "";
-    this._feedback = message || "";
-    this._success = false;
-  }
-  get isLoading() {
-    return this._isLoading;
-  }
-  get loadingLabel() {
-    return this._loadingLabel;
-  }
-  get feedback() {
-    return this._feedback;
-  }
-  async runCallbackWithLoading(callback, loadingLabel, successMessage, failureMessage) {
-    try {
-      this.startLoading(loadingLabel);
-      const result = await callback();
-      this.stopLoadingWithSuccess(successMessage);
-      return result;
-    } catch (e) {
-      this.stopLoadingWithError(e.message || failureMessage);
-      throw e;
-    }
-  }
+class Loading {
+    constructor(isLoading = false){
+        this._isLoading = isLoading;
+        this._loadingLabel = "";
+        this._feedback = "";
+        this._success = false;
+        makeAutoObservable(this);
+    }
+    startLoading(label) {
+        this._isLoading = true;
+        this._loadingLabel = label || "";
+        this._feedback = "";
+        this._success = false;
+    }
+    stopLoadingWithSuccess(message) {
+        this._isLoading = false;
+        this._loadingLabel = "";
+        this._feedback = message || "";
+        this._success = true;
+    }
+    stopLoadingWithError(message) {
+        this._isLoading = false;
+        this._loadingLabel = "";
+        this._feedback = message || "";
+        this._success = false;
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get loadingLabel() {
+        return this._loadingLabel;
+    }
+    get feedback() {
+        return this._feedback;
+    }
+    async runCallbackWithLoading(callback, loadingLabel, successMessage, failureMessage) {
+        try {
+            this.startLoading(loadingLabel);
+            const result = await callback();
+            this.stopLoadingWithSuccess(successMessage);
+            return result;
+        } catch (e) {
+            this.stopLoadingWithError(e.message || failureMessage);
+            throw e;
+        }
+    }
 }
+export { Loading };
 
 //# sourceMappingURL=Loading.js.map

package/components/IconPicker/Loading.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","Loading","constructor","isLoading","_isLoading","_loadingLabel","_feedback","_success","startLoading","label","stopLoadingWithSuccess","message","stopLoadingWithError","loadingLabel","feedback","runCallbackWithLoading","callback","successMessage","failureMessage","result","e"],"sources":["Loading.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\n\nexport class Loading {\n    private _isLoading: boolean;\n    private _loadingLabel: string;\n    private _feedback: string;\n    private _success: boolean;\n\n    constructor(isLoading = false) {\n        this._isLoading = isLoading;\n        this._loadingLabel = \"\";\n        this._feedback = \"\";\n        this._success = false;\n        makeAutoObservable(this);\n    }\n\n    startLoading(label?: string) {\n        this._isLoading = true;\n        this._loadingLabel = label || \"\";\n        this._feedback = \"\";\n        this._success = false;\n    }\n\n    stopLoadingWithSuccess(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = true;\n    }\n\n    stopLoadingWithError(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = false;\n    }\n\n    get isLoading() {\n        return this._isLoading;\n    }\n\n    get loadingLabel() {\n        return this._loadingLabel;\n    }\n\n    get feedback() {\n        return this._feedback;\n    }\n\n    async runCallbackWithLoading<T>(\n        callback: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ): Promise<T> {\n        try {\n            this.startLoading(loadingLabel);\n            const result = await callback();\n            this.stopLoadingWithSuccess(successMessage);\n            return result;\n        } catch (e) {\n            this.stopLoadingWithError(e.message || failureMessage);\n            throw e;\n        }\n    }\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,OAAO,MAAMC,OAAO,CAAC;EAMjBC,WAAWA,CAACC,SAAS,GAAG,KAAK,EAAE;IAC3B,IAAI,CAACC,UAAU,GAAGD,SAAS;IAC3B,IAAI,CAACE,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,QAAQ,GAAG,KAAK;IACrBP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAQ,YAAYA,CAACC,KAAc,EAAE;IACzB,IAAI,CAACL,UAAU,GAAG,IAAI;IACtB,IAAI,CAACC,aAAa,GAAGI,KAAK,IAAI,EAAE;IAChC,IAAI,CAACH,SAAS,GAAG,EAAE;IACnB,IAAI,CAACC,QAAQ,GAAG,KAAK;EACzB;EAEAG,sBAAsBA,CAACC,OAAgB,EAAE;IACrC,IAAI,CAACP,UAAU,GAAG,KAAK;IACvB,IAAI,CAACC,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAGK,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACJ,QAAQ,GAAG,IAAI;EACxB;EAEAK,oBAAoBA,CAACD,OAAgB,EAAE;IACnC,IAAI,CAACP,UAAU,GAAG,KAAK;IACvB,IAAI,CAACC,aAAa,GAAG,EAAE;IACvB,IAAI,CAACC,SAAS,GAAGK,OAAO,IAAI,EAAE;IAC9B,IAAI,CAACJ,QAAQ,GAAG,KAAK;EACzB;EAEA,IAAIJ,SAASA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACC,UAAU;EAC1B;EAEA,IAAIS,YAAYA,CAAA,EAAG;IACf,OAAO,IAAI,CAACR,aAAa;EAC7B;EAEA,IAAIS,QAAQA,CAAA,EAAG;IACX,OAAO,IAAI,CAACR,SAAS;EACzB;EAEA,MAAMS,sBAAsBA,CACxBC,QAA0B,EAC1BH,YAAqB,EACrBI,cAAuB,EACvBC,cAAuB,EACb;IACV,IAAI;MACA,IAAI,CAACV,YAAY,CAACK,YAAY,CAAC;MAC/B,MAAMM,MAAM,GAAG,MAAMH,QAAQ,CAAC,CAAC;MAC/B,IAAI,CAACN,sBAAsB,CAACO,cAAc,CAAC;MAC3C,OAAOE,MAAM;IACjB,CAAC,CAAC,OAAOC,CAAC,EAAE;MACR,IAAI,CAACR,oBAAoB,CAACQ,CAAC,CAACT,OAAO,IAAIO,cAAc,CAAC;MACtD,MAAME,CAAC;IACX;EACJ;AACJ","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/Loading.js","sources":["../../../src/components/IconPicker/Loading.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\n\nexport class Loading {\n    private _isLoading: boolean;\n    private _loadingLabel: string;\n    private _feedback: string;\n    private _success: boolean;\n\n    constructor(isLoading = false) {\n        this._isLoading = isLoading;\n        this._loadingLabel = \"\";\n        this._feedback = \"\";\n        this._success = false;\n        makeAutoObservable(this);\n    }\n\n    startLoading(label?: string) {\n        this._isLoading = true;\n        this._loadingLabel = label || \"\";\n        this._feedback = \"\";\n        this._success = false;\n    }\n\n    stopLoadingWithSuccess(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = true;\n    }\n\n    stopLoadingWithError(message?: string) {\n        this._isLoading = false;\n        this._loadingLabel = \"\";\n        this._feedback = message || \"\";\n        this._success = false;\n    }\n\n    get isLoading() {\n        return this._isLoading;\n    }\n\n    get loadingLabel() {\n        return this._loadingLabel;\n    }\n\n    get feedback() {\n        return this._feedback;\n    }\n\n    async runCallbackWithLoading<T>(\n        callback: () => Promise<T>,\n        loadingLabel?: string,\n        successMessage?: string,\n        failureMessage?: string\n    ): Promise<T> {\n        try {\n            this.startLoading(loadingLabel);\n            const result = await callback();\n            this.stopLoadingWithSuccess(successMessage);\n            return result;\n        } catch (e) {\n            this.stopLoadingWithError(e.message || failureMessage);\n            throw e;\n        }\n    }\n}\n"],"names":["Loading","isLoading","makeAutoObservable","label","message","callback","loadingLabel","successMessage","failureMessage","result","e"],"mappings":";AAEO,MAAMA;IAMT,YAAYC,YAAY,KAAK,CAAE;QAC3B,IAAI,CAAC,UAAU,GAAGA;QAClB,IAAI,CAAC,aAAa,GAAG;QACrB,IAAI,CAAC,SAAS,GAAG;QACjB,IAAI,CAAC,QAAQ,GAAG;QAChBC,mBAAmB,IAAI;IAC3B;IAEA,aAAaC,KAAc,EAAE;QACzB,IAAI,CAAC,UAAU,GAAG;QAClB,IAAI,CAAC,aAAa,GAAGA,SAAS;QAC9B,IAAI,CAAC,SAAS,GAAG;QACjB,IAAI,CAAC,QAAQ,GAAG;IACpB;IAEA,uBAAuBC,OAAgB,EAAE;QACrC,IAAI,CAAC,UAAU,GAAG;QAClB,IAAI,CAAC,aAAa,GAAG;QACrB,IAAI,CAAC,SAAS,GAAGA,WAAW;QAC5B,IAAI,CAAC,QAAQ,GAAG;IACpB;IAEA,qBAAqBA,OAAgB,EAAE;QACnC,IAAI,CAAC,UAAU,GAAG;QAClB,IAAI,CAAC,aAAa,GAAG;QACrB,IAAI,CAAC,SAAS,GAAGA,WAAW;QAC5B,IAAI,CAAC,QAAQ,GAAG;IACpB;IAEA,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,UAAU;IAC1B;IAEA,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,aAAa;IAC7B;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,MAAM,uBACFC,QAA0B,EAC1BC,YAAqB,EACrBC,cAAuB,EACvBC,cAAuB,EACb;QACV,IAAI;YACA,IAAI,CAAC,YAAY,CAACF;YAClB,MAAMG,SAAS,MAAMJ;YACrB,IAAI,CAAC,sBAAsB,CAACE;YAC5B,OAAOE;QACX,EAAE,OAAOC,GAAG;YACR,IAAI,CAAC,oBAAoB,CAACA,EAAE,OAAO,IAAIF;YACvC,MAAME;QACV;IACJ;AACJ"}

package/components/IconPicker/components/IconPickerCell.js

@@ -1,27 +1,25 @@
-import React from "react";
+import react from "react";
 import { cn, cva } from "@webiny/admin-ui";
 import { IconProvider, IconRenderer } from "../IconRenderer.js";
-const iconPickerCellVariants = cva(["flex justify-center items-center", "rounded-md cursor-pointer size-xl p-xs", "hover:bg-neutral-dimmed transition-all duration-500 ease-out"], {
-  variants: {
-    isActive: {
-      true: "bg-neutral-dimmed"
+const iconPickerCellVariants = cva([
+    "flex justify-center items-center",
+    "rounded-md cursor-pointer size-xl p-xs",
+    "hover:bg-neutral-dimmed transition-all duration-500 ease-out"
+], {
+    variants: {
+        isActive: {
+            true: "bg-neutral-dimmed"
+        }
     }
-  }
 });
-const IconPickerCell = ({
-  isActive,
-  icon,
-  onIconClick
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(iconPickerCellVariants({
-      isActive
-    })),
-    onClick: () => onIconClick(icon)
-  }, /*#__PURE__*/React.createElement(IconProvider, {
-    icon: icon
-  }, /*#__PURE__*/React.createElement(IconRenderer, null)));
-};
+const IconPickerCell = ({ isActive, icon, onIconClick })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn(iconPickerCellVariants({
+            isActive
+        })),
+        onClick: ()=>onIconClick(icon)
+    }, /*#__PURE__*/ react.createElement(IconProvider, {
+        icon: icon
+    }, /*#__PURE__*/ react.createElement(IconRenderer, null)));
 export { IconPickerCell };
 
 //# sourceMappingURL=IconPickerCell.js.map

package/components/IconPicker/components/IconPickerCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","IconProvider","IconRenderer","iconPickerCellVariants","variants","isActive","true","IconPickerCell","icon","onIconClick","createElement","className","onClick"],"sources":["IconPickerCell.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"@webiny/admin-ui\";\nimport type { Icon } from \"~/components/IconPicker/index.js\";\nimport { IconProvider, IconRenderer } from \"~/components/IconPicker/IconRenderer.js\";\n\nconst iconPickerCellVariants = cva(\n    [\n        \"flex justify-center items-center\",\n        \"rounded-md cursor-pointer size-xl p-xs\",\n        \"hover:bg-neutral-dimmed transition-all duration-500 ease-out\"\n    ],\n    {\n        variants: {\n            isActive: {\n                true: \"bg-neutral-dimmed\"\n            }\n        }\n    }\n);\n\ninterface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {\n    icon: Icon;\n    onIconClick: (icon: Icon) => void;\n}\n\nconst IconPickerCell = ({ isActive, icon, onIconClick }: IconPickerCellProps) => {\n    return (\n        <div className={cn(iconPickerCellVariants({ isActive }))} onClick={() => onIconClick(icon)}>\n            <IconProvider icon={icon}>\n                <IconRenderer />\n            </IconProvider>\n        </div>\n    );\n};\n\nexport { IconPickerCell, type IconPickerCellProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,QAA2B,kBAAkB;AAE7D,SAASC,YAAY,EAAEC,YAAY;AAEnC,MAAMC,sBAAsB,GAAGH,GAAG,CAC9B,CACI,kCAAkC,EAClC,wCAAwC,EACxC,8DAA8D,CACjE,EACD;EACII,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAOD,MAAMC,cAAc,GAAGA,CAAC;EAAEF,QAAQ;EAAEG,IAAI;EAAEC;AAAiC,CAAC,KAAK;EAC7E,oBACIX,KAAA,CAAAY,aAAA;IAAKC,SAAS,EAAEZ,EAAE,CAACI,sBAAsB,CAAC;MAAEE;IAAS,CAAC,CAAC,CAAE;IAACO,OAAO,EAAEA,CAAA,KAAMH,WAAW,CAACD,IAAI;EAAE,gBACvFV,KAAA,CAAAY,aAAA,CAACT,YAAY;IAACO,IAAI,EAAEA;EAAK,gBACrBV,KAAA,CAAAY,aAAA,CAACR,YAAY,MAAE,CACL,CACb,CAAC;AAEd,CAAC;AAED,SAASK,cAAc","ignoreList":[]}
+{"version":3,"file":"components/IconPicker/components/IconPickerCell.js","sources":["../../../../src/components/IconPicker/components/IconPickerCell.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, type VariantProps } from \"@webiny/admin-ui\";\nimport type { Icon } from \"~/components/IconPicker/index.js\";\nimport { IconProvider, IconRenderer } from \"~/components/IconPicker/IconRenderer.js\";\n\nconst iconPickerCellVariants = cva(\n    [\n        \"flex justify-center items-center\",\n        \"rounded-md cursor-pointer size-xl p-xs\",\n        \"hover:bg-neutral-dimmed transition-all duration-500 ease-out\"\n    ],\n    {\n        variants: {\n            isActive: {\n                true: \"bg-neutral-dimmed\"\n            }\n        }\n    }\n);\n\ninterface IconPickerCellProps extends VariantProps<typeof iconPickerCellVariants> {\n    icon: Icon;\n    onIconClick: (icon: Icon) => void;\n}\n\nconst IconPickerCell = ({ isActive, icon, onIconClick }: IconPickerCellProps) => {\n    return (\n        <div className={cn(iconPickerCellVariants({ isActive }))} onClick={() => onIconClick(icon)}>\n            <IconProvider icon={icon}>\n                <IconRenderer />\n            </IconProvider>\n        </div>\n    );\n};\n\nexport { IconPickerCell, type IconPickerCellProps };\n"],"names":["iconPickerCellVariants","cva","IconPickerCell","isActive","icon","onIconClick","cn","IconProvider","IconRenderer"],"mappings":";;;AAKA,MAAMA,yBAAyBC,IAC3B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,UAAU;YACN,MAAM;QACV;IACJ;AACJ;AAQJ,MAAMC,iBAAiB,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,WAAW,EAAuB,GACjE,WAAP,GACI,oBAAC;QAAI,WAAWC,GAAGN,uBAAuB;YAAEG;QAAS;QAAK,SAAS,IAAME,YAAYD;qBACjF,oBAACG,cAAYA;QAAC,MAAMH;qBAChB,oBAACI,cAAYA"}