@webiny/app-admin 0.0.0-unstable.aa00eecd97 → 0.0.0-unstable.ac6ebf63c6

package/components/IconPicker/config/IconPackProvider.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+export const IconPackProvider = ({
+  name,
+  provider
+}) => {
+  const getId = useIdGenerator("iconPackProvider");
+  return /*#__PURE__*/React.createElement(Property, {
+    id: getId(name),
+    name: "iconPackProviders",
+    array: true
+  }, /*#__PURE__*/React.createElement(Property, {
+    id: getId(name, "name"),
+    name: "name",
+    value: name
+  }), /*#__PURE__*/React.createElement(Property, {
+    id: getId(name, "load"),
+    name: "load",
+    value: provider
+  }));
+};
+
+//# sourceMappingURL=IconPackProvider.js.map

package/components/IconPicker/config/IconPackProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Property","useIdGenerator","IconPackProvider","name","provider","getId","createElement","id","array","value"],"sources":["IconPackProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\nimport type { Icon } from \"~/components/IconPicker/types.js\";\n\nexport type IconPackProviderProps = {\n    name: string;\n    provider: () => Promise<Icon[]> | Icon[];\n};\n\nexport const IconPackProvider = ({ name, provider }: IconPackProviderProps) => {\n    const getId = useIdGenerator(\"iconPackProvider\");\n\n    return (\n        <Property id={getId(name)} name={\"iconPackProviders\"} array={true}>\n            <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n            <Property id={getId(name, \"load\")} name={\"load\"} value={provider} />\n        </Property>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,cAAc,QAAQ,0BAA0B;AAQnE,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAgC,CAAC,KAAK;EAC3E,MAAMC,KAAK,GAAGJ,cAAc,CAAC,kBAAkB,CAAC;EAEhD,oBACIF,KAAA,CAAAO,aAAA,CAACN,QAAQ;IAACO,EAAE,EAAEF,KAAK,CAACF,IAAI,CAAE;IAACA,IAAI,EAAE,mBAAoB;IAACK,KAAK,EAAE;EAAK,gBAC9DT,KAAA,CAAAO,aAAA,CAACN,QAAQ;IAACO,EAAE,EAAEF,KAAK,CAACF,IAAI,EAAE,MAAM,CAAE;IAACA,IAAI,EAAE,MAAO;IAACM,KAAK,EAAEN;EAAK,CAAE,CAAC,eAChEJ,KAAA,CAAAO,aAAA,CAACN,QAAQ;IAACO,EAAE,EAAEF,KAAK,CAACF,IAAI,EAAE,MAAM,CAAE;IAACA,IAAI,EAAE,MAAO;IAACM,KAAK,EAAEL;EAAS,CAAE,CAC7D,CAAC;AAEnB,CAAC","ignoreList":[]}

package/components/IconPicker/config/IconType.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export type IconTypeProps = {
+    name: string;
+    before?: string;
+    after?: string;
+    remove?: boolean;
+    children?: React.ReactNode;
+};
+interface IconTypeContext {
+    type: string;
+}
+declare const IconTypeContext: React.Context<IconTypeContext | undefined>;
+interface IconTypeProviderProps {
+    type: string;
+    children: React.ReactNode;
+}
+export declare const IconTypeProvider: ({ type, children }: IconTypeProviderProps) => React.JSX.Element;
+export declare function useIconType(): IconTypeContext;
+export interface IconType extends React.FC<IconTypeProps> {
+    Icon: typeof Icon;
+    Tab: typeof Tab;
+}
+export declare const IconType: IconType;
+export type IconProps = {
+    element: React.ReactElement;
+};
+export declare const Icon: ({ element }: IconProps) => React.JSX.Element;
+export type TabProps = {
+    element: React.ReactElement;
+};
+export declare const Tab: ({ element }: TabProps) => React.JSX.Element;
+export {};

package/components/IconPicker/config/IconType.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Property, useIdGenerator } from "@webiny/react-properties";
+import { IconRenderer, useIcon } from "../IconRenderer.js";
+import { IconPickerTabRenderer } from "../IconPickerTab.js";
+const IconTypeContext = /*#__PURE__*/React.createContext(undefined);
+export const IconTypeProvider = ({
+  type,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(IconTypeContext.Provider, {
+    value: {
+      type
+    }
+  }, children);
+};
+export function useIconType() {
+  const context = React.useContext(IconTypeContext);
+  if (!context) {
+    throw Error(`Missing <IconTypeProvider> in the component tree!`);
+  }
+  return context;
+}
+export const IconType = ({
+  name,
+  before = undefined,
+  after = undefined,
+  remove = false,
+  children
+}) => {
+  const getId = useIdGenerator("iconType");
+  const placeBefore = before !== undefined ? getId(before) : undefined;
+  const placeAfter = after !== undefined ? getId(after) : undefined;
+  return /*#__PURE__*/React.createElement(IconTypeProvider, {
+    type: name
+  }, /*#__PURE__*/React.createElement(Property, {
+    id: getId(name),
+    name: "iconTypes",
+    before: placeBefore,
+    after: placeAfter,
+    remove: remove,
+    array: true
+  }, /*#__PURE__*/React.createElement(Property, {
+    id: getId(name, "name"),
+    name: "name",
+    value: name
+  }), children));
+};
+export const Icon = ({
+  element
+}) => {
+  const {
+    type: configType
+  } = useIconType();
+  const IconDecorator = IconRenderer.createDecorator(Original => {
+    return function IconRenderer() {
+      const {
+        icon
+      } = useIcon();
+      if (icon.type !== configType) {
+        return /*#__PURE__*/React.createElement(Original, null);
+      }
+      return element;
+    };
+  });
+  return /*#__PURE__*/React.createElement(IconDecorator, null);
+};
+export const Tab = ({
+  element
+}) => {
+  const {
+    type: configType
+  } = useIconType();
+  const IconPickerTabDecorator = IconPickerTabRenderer.createDecorator(Original => {
+    return function IconPickerTabRenderer() {
+      const {
+        type
+      } = useIconType();
+      if (type !== configType) {
+        return /*#__PURE__*/React.createElement(Original, null);
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, element);
+    };
+  });
+  return /*#__PURE__*/React.createElement(IconPickerTabDecorator, null);
+};
+IconType.Icon = Icon;
+IconType.Tab = Tab;
+
+//# sourceMappingURL=IconType.js.map

package/components/IconPicker/config/IconType.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Property","useIdGenerator","IconRenderer","useIcon","IconPickerTabRenderer","IconTypeContext","createContext","undefined","IconTypeProvider","type","children","createElement","Provider","value","useIconType","context","useContext","Error","IconType","name","before","after","remove","getId","placeBefore","placeAfter","id","array","Icon","element","configType","IconDecorator","createDecorator","Original","icon","Tab","IconPickerTabDecorator","Fragment"],"sources":["IconType.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Property, useIdGenerator } from \"@webiny/react-properties\";\n\nimport { IconRenderer, useIcon } from \"../IconRenderer.js\";\nimport { IconPickerTabRenderer } from \"../IconPickerTab.js\";\n\nexport type IconTypeProps = {\n    name: string;\n    before?: string;\n    after?: string;\n    remove?: boolean;\n    children?: React.ReactNode;\n};\n\ninterface IconTypeContext {\n    type: string;\n}\n\nconst IconTypeContext = React.createContext<IconTypeContext | undefined>(undefined);\n\ninterface IconTypeProviderProps {\n    type: string;\n    children: React.ReactNode;\n}\n\nexport const IconTypeProvider = ({ type, children }: IconTypeProviderProps) => {\n    return <IconTypeContext.Provider value={{ type }}>{children}</IconTypeContext.Provider>;\n};\n\nexport function useIconType() {\n    const context = React.useContext(IconTypeContext);\n    if (!context) {\n        throw Error(`Missing <IconTypeProvider> in the component tree!`);\n    }\n    return context;\n}\n\nexport interface IconType extends React.FC<IconTypeProps> {\n    Icon: typeof Icon;\n    Tab: typeof Tab;\n}\n\nexport const IconType: IconType = ({\n    name,\n    before = undefined,\n    after = undefined,\n    remove = false,\n    children\n}) => {\n    const getId = useIdGenerator(\"iconType\");\n\n    const placeBefore = before !== undefined ? getId(before) : undefined;\n    const placeAfter = after !== undefined ? getId(after) : undefined;\n\n    return (\n        <IconTypeProvider type={name}>\n            <Property\n                id={getId(name)}\n                name={\"iconTypes\"}\n                before={placeBefore}\n                after={placeAfter}\n                remove={remove}\n                array={true}\n            >\n                <Property id={getId(name, \"name\")} name={\"name\"} value={name} />\n                {children}\n            </Property>\n        </IconTypeProvider>\n    );\n};\n\nexport type IconProps = {\n    element: React.ReactElement;\n};\n\nexport const Icon = ({ element }: IconProps) => {\n    const { type: configType } = useIconType();\n\n    const IconDecorator = IconRenderer.createDecorator(Original => {\n        return function IconRenderer() {\n            const { icon } = useIcon();\n\n            if (icon.type !== configType) {\n                return <Original />;\n            }\n\n            return element;\n        };\n    });\n\n    return <IconDecorator />;\n};\n\nexport type TabProps = {\n    element: React.ReactElement;\n};\n\nexport const Tab = ({ element }: TabProps) => {\n    const { type: configType } = useIconType();\n\n    const IconPickerTabDecorator = IconPickerTabRenderer.createDecorator(Original => {\n        return function IconPickerTabRenderer() {\n            const { type } = useIconType();\n\n            if (type !== configType) {\n                return <Original />;\n            }\n\n            return <>{element}</>;\n        };\n    });\n\n    return <IconPickerTabDecorator />;\n};\n\nIconType.Icon = Icon;\nIconType.Tab = Tab;\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/config/index.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { IconType } from "./IconType.js";
+import type { Icon } from "../types.js";
+export declare const IconPickerConfig: (({ priority, children }: import("@webiny/react-properties").ConfigProps) => React.JSX.Element) & {
+    IconPack: ({ name, provider }: import("./IconPackProvider.js").IconPackProviderProps) => React.JSX.Element;
+    IconType: IconType;
+};
+export declare const IconPickerWithConfig: ({ onProperties, children }: import("@webiny/react-properties").WithConfigProps) => React.JSX.Element;
+export declare const IconPickerConfigProvider: import("@webiny/app").Decorator<import("@webiny/app").GenericComponent<import("@webiny/app").ChildrenProps>>;
+export interface IconPackLoader {
+    (): Promise<Icon[]>;
+}
+interface IconTypeInterface {
+    name: string;
+}
+export type { IconTypeInterface as IconType };
+export interface IconPackProviderInterface {
+    name: string;
+    getIcons(): Promise<Icon[]>;
+}
+declare class IconPackProvider implements IconPackProviderInterface {
+    readonly name: string;
+    private readonly loader;
+    constructor(name: string, loader: IconPackLoader);
+    getIcons(): Promise<Icon[]>;
+}
+export declare function useIconPickerConfig(): {
+    iconTypes: IconTypeInterface[];
+    iconPackProviders: IconPackProvider[];
+};
+export declare const DefaultIcons: () => React.JSX.Element;

package/components/IconPicker/config/index.js

@@ -0,0 +1,45 @@
+import React, { useMemo } from "react";
+import { createConfigurableComponent } from "@webiny/react-properties";
+import { IconPackProvider as IconPack } from "./IconPackProvider.js";
+import { IconType } from "./IconType.js";
+import { SimpleIconPlugin } from "../plugins/iconsPlugin.js";
+import { EmojiPlugin } from "../plugins/emojisPlugin.js";
+import { CustomIconPlugin } from "../plugins/customPlugin.js";
+import { createProvider } from "@webiny/app";
+import { Emojis } from "./Emojis.js";
+import { FontAwesomeIcons } from "./FontAwesomeIcons.js";
+const base = createConfigurableComponent("IconPicker");
+export const IconPickerConfig = Object.assign(base.Config, {
+  IconPack,
+  IconType
+});
+export const IconPickerWithConfig = base.WithConfig;
+export const IconPickerConfigProvider = createProvider(Original => {
+  return function IconPickerConfigProvider({
+    children
+  }) {
+    return /*#__PURE__*/React.createElement(IconPickerWithConfig, null, /*#__PURE__*/React.createElement(Original, null, children));
+  };
+});
+class IconPackProvider {
+  constructor(name, loader) {
+    this.name = name;
+    this.loader = loader;
+  }
+  getIcons() {
+    return this.loader();
+  }
+}
+export function useIconPickerConfig() {
+  const config = base.useConfig();
+  const iconPackProviders = config.iconPackProviders || [];
+  return useMemo(() => ({
+    iconTypes: config.iconTypes || [],
+    iconPackProviders: iconPackProviders.map(provider => new IconPackProvider(provider.name, provider.load))
+  }), [config]);
+}
+export const DefaultIcons = () => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleIconPlugin, null), /*#__PURE__*/React.createElement(EmojiPlugin, null), /*#__PURE__*/React.createElement(CustomIconPlugin, null), /*#__PURE__*/React.createElement(Emojis, null), /*#__PURE__*/React.createElement(FontAwesomeIcons, null));
+};
+
+//# sourceMappingURL=index.js.map

package/components/IconPicker/config/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","createConfigurableComponent","IconPackProvider","IconPack","IconType","SimpleIconPlugin","EmojiPlugin","CustomIconPlugin","createProvider","Emojis","FontAwesomeIcons","base","IconPickerConfig","Object","assign","Config","IconPickerWithConfig","WithConfig","IconPickerConfigProvider","Original","children","createElement","constructor","name","loader","getIcons","useIconPickerConfig","config","useConfig","iconPackProviders","iconTypes","map","provider","load","DefaultIcons","Fragment"],"sources":["index.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { createConfigurableComponent } from \"@webiny/react-properties\";\nimport { IconPackProvider as IconPack } from \"./IconPackProvider.js\";\nimport { IconType } from \"./IconType.js\";\nimport { SimpleIconPlugin } from \"../plugins/iconsPlugin.js\";\nimport { EmojiPlugin } from \"../plugins/emojisPlugin.js\";\nimport { CustomIconPlugin } from \"../plugins/customPlugin.js\";\nimport type { Icon } from \"../types.js\";\nimport { createProvider } from \"@webiny/app\";\nimport { Emojis } from \"./Emojis.js\";\nimport { FontAwesomeIcons } from \"./FontAwesomeIcons.js\";\n\nconst base = createConfigurableComponent<IconPickerConfig>(\"IconPicker\");\n\nexport const IconPickerConfig = Object.assign(base.Config, { IconPack, IconType });\nexport const IconPickerWithConfig = base.WithConfig;\n\nexport const IconPickerConfigProvider = createProvider(Original => {\n    return function IconPickerConfigProvider({ children }) {\n        return (\n            <IconPickerWithConfig>\n                <Original>{children}</Original>\n            </IconPickerWithConfig>\n        );\n    };\n});\n\nexport interface IconPackLoader {\n    (): Promise<Icon[]>;\n}\n\ninterface IconTypeInterface {\n    name: string;\n}\n\nexport type { IconTypeInterface as IconType };\n\ninterface IconPickerConfig {\n    iconTypes: IconTypeInterface[];\n    iconPackProviders: {\n        name: string;\n        load: IconPackLoader;\n    }[];\n}\n\nexport interface IconPackProviderInterface {\n    name: string;\n    getIcons(): Promise<Icon[]>;\n}\n\nclass IconPackProvider implements IconPackProviderInterface {\n    public readonly name: string;\n    private readonly loader: IconPackLoader;\n\n    constructor(name: string, loader: IconPackLoader) {\n        this.name = name;\n        this.loader = loader;\n    }\n\n    getIcons(): Promise<Icon[]> {\n        return this.loader();\n    }\n}\n\nexport function useIconPickerConfig() {\n    const config = base.useConfig();\n\n    const iconPackProviders = config.iconPackProviders || [];\n\n    return useMemo(\n        () => ({\n            iconTypes: config.iconTypes || [],\n            iconPackProviders: iconPackProviders.map(\n                provider => new IconPackProvider(provider.name, provider.load)\n            )\n        }),\n        [config]\n    );\n}\n\nexport const DefaultIcons = () => {\n    return (\n        <>\n            <SimpleIconPlugin />\n            <EmojiPlugin />\n            <CustomIconPlugin />\n            <Emojis />\n            <FontAwesomeIcons />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,2BAA2B,QAAQ,0BAA0B;AACtE,SAASC,gBAAgB,IAAIC,QAAQ;AACrC,SAASC,QAAQ;AACjB,SAASC,gBAAgB;AACzB,SAASC,WAAW;AACpB,SAASC,gBAAgB;AAEzB,SAASC,cAAc,QAAQ,aAAa;AAC5C,SAASC,MAAM;AACf,SAASC,gBAAgB;AAEzB,MAAMC,IAAI,GAAGV,2BAA2B,CAAmB,YAAY,CAAC;AAExE,OAAO,MAAMW,gBAAgB,GAAGC,MAAM,CAACC,MAAM,CAACH,IAAI,CAACI,MAAM,EAAE;EAAEZ,QAAQ;EAAEC;AAAS,CAAC,CAAC;AAClF,OAAO,MAAMY,oBAAoB,GAAGL,IAAI,CAACM,UAAU;AAEnD,OAAO,MAAMC,wBAAwB,GAAGV,cAAc,CAACW,QAAQ,IAAI;EAC/D,OAAO,SAASD,wBAAwBA,CAAC;IAAEE;EAAS,CAAC,EAAE;IACnD,oBACIrB,KAAA,CAAAsB,aAAA,CAACL,oBAAoB,qBACjBjB,KAAA,CAAAsB,aAAA,CAACF,QAAQ,QAAEC,QAAmB,CACZ,CAAC;EAE/B,CAAC;AACL,CAAC,CAAC;AAyBF,MAAMlB,gBAAgB,CAAsC;EAIxDoB,WAAWA,CAACC,IAAY,EAAEC,MAAsB,EAAE;IAC9C,IAAI,CAACD,IAAI,GAAGA,IAAI;IAChB,IAAI,CAACC,MAAM,GAAGA,MAAM;EACxB;EAEAC,QAAQA,CAAA,EAAoB;IACxB,OAAO,IAAI,CAACD,MAAM,CAAC,CAAC;EACxB;AACJ;AAEA,OAAO,SAASE,mBAAmBA,CAAA,EAAG;EAClC,MAAMC,MAAM,GAAGhB,IAAI,CAACiB,SAAS,CAAC,CAAC;EAE/B,MAAMC,iBAAiB,GAAGF,MAAM,CAACE,iBAAiB,IAAI,EAAE;EAExD,OAAO7B,OAAO,CACV,OAAO;IACH8B,SAAS,EAAEH,MAAM,CAACG,SAAS,IAAI,EAAE;IACjCD,iBAAiB,EAAEA,iBAAiB,CAACE,GAAG,CACpCC,QAAQ,IAAI,IAAI9B,gBAAgB,CAAC8B,QAAQ,CAACT,IAAI,EAAES,QAAQ,CAACC,IAAI,CACjE;EACJ,CAAC,CAAC,EACF,CAACN,MAAM,CACX,CAAC;AACL;AAEA,OAAO,MAAMO,YAAY,GAAGA,CAAA,KAAM;EAC9B,oBACInC,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAoC,QAAA,qBACIpC,KAAA,CAAAsB,aAAA,CAAChB,gBAAgB,MAAE,CAAC,eACpBN,KAAA,CAAAsB,aAAA,CAACf,WAAW,MAAE,CAAC,eACfP,KAAA,CAAAsB,aAAA,CAACd,gBAAgB,MAAE,CAAC,eACpBR,KAAA,CAAAsB,aAAA,CAACZ,MAAM,MAAE,CAAC,eACVV,KAAA,CAAAsB,aAAA,CAACX,gBAAgB,MAAE,CACrB,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/IconPicker/defaultIcon.d.ts

@@ -0,0 +1,6 @@
+export declare const defaultIcon: {
+    type: string;
+    name: string;
+    value: string;
+    width: number;
+};

package/components/IconPicker/defaultIcon.js

@@ -0,0 +1,8 @@
+export const defaultIcon = {
+  type: "icon",
+  name: "regular_star",
+  value: '<path fill="currentColor" d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3l153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4L459.8 484c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6l68.6-141.3C270.4 5.2 278.7 0 287.9 0zm0 79l-52.5 108.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9l85.9 85.1c5.5 5.5 8.1 13.3 6.8 21l-20.3 119.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2l-20.2-119.6c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1l-118.3-17.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/>',
+  width: 576
+};
+
+//# sourceMappingURL=defaultIcon.js.map

package/components/IconPicker/defaultIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defaultIcon","type","name","value","width"],"sources":["defaultIcon.ts"],"sourcesContent":["export const defaultIcon = {\n    type: \"icon\",\n    name: \"regular_star\",\n    value: '<path fill=\"currentColor\" d=\"M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3l153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4L459.8 484c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6l68.6-141.3C270.4 5.2 278.7 0 287.9 0zm0 79l-52.5 108.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9l85.9 85.1c5.5 5.5 8.1 13.3 6.8 21l-20.3 119.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2l-20.2-119.6c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1l-118.3-17.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z\"/>',\n    width: 576\n};\n"],"mappings":"AAAA,OAAO,MAAMA,WAAW,GAAG;EACvBC,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE,cAAc;EACpBC,KAAK,EAAE,+mBAA+mB;EACtnBC,KAAK,EAAE;AACX,CAAC","ignoreList":[]}

package/components/IconPicker/index.d.ts

@@ -0,0 +1,7 @@
+export { IconPicker } from "./IconPicker.js";
+export { IconPickerConfig } from "./config/index.js";
+export { useIcon } from "./IconRenderer.js";
+export { useIconPicker } from "./IconPickerPresenterProvider.js";
+export { useIconType } from "./config/IconType.js";
+export { defaultIcon } from "./defaultIcon.js";
+export type { Icon } from "./types.js";

package/components/IconPicker/index.js

@@ -0,0 +1,8 @@
+export { IconPicker } from "./IconPicker.js";
+export { IconPickerConfig } from "./config/index.js";
+export { useIcon } from "./IconRenderer.js";
+export { useIconPicker } from "./IconPickerPresenterProvider.js";
+export { useIconType } from "./config/IconType.js";
+export { defaultIcon } from "./defaultIcon.js";
+
+//# sourceMappingURL=index.js.map

package/components/IconPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IconPicker","IconPickerConfig","useIcon","useIconPicker","useIconType","defaultIcon"],"sources":["index.tsx"],"sourcesContent":["export { IconPicker } from \"./IconPicker.js\";\nexport { IconPickerConfig } from \"./config/index.js\";\nexport { useIcon } from \"./IconRenderer.js\";\nexport { useIconPicker } from \"./IconPickerPresenterProvider.js\";\nexport { useIconType } from \"./config/IconType.js\";\nexport { defaultIcon } from \"./defaultIcon.js\";\nexport type { Icon } from \"./types.js\";\n"],"mappings":"AAAA,SAASA,UAAU;AACnB,SAASC,gBAAgB;AACzB,SAASC,OAAO;AAChB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,WAAW","ignoreList":[]}

package/components/IconPicker/plugins/customPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CustomIconPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/customPlugin.js

@@ -0,0 +1,127 @@
+import React from "react";
+import { useApolloClient } from "@apollo/react-hooks";
+import { observer } from "mobx-react-lite";
+import { Button } from "@webiny/admin-ui";
+import { FileManager } from "../../../base/ui/FileManager.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { useIcon } from "../index.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
+import { LIST_CUSTOM_ICONS } from "./graphql.js";
+/**
+ * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
+ * This is crucial for serializing component rendering into a string value as plain HTML,
+ * which is necessary for usage in the website application. Please use inline styles here
+ * to ensure proper serialization.
+ */
+
+const CustomIcon = () => {
+  const {
+    icon,
+    size
+  } = useIcon();
+  return /*#__PURE__*/React.createElement("img", {
+    width: size,
+    height: size,
+    src: icon.value,
+    alt: icon.name,
+    style: {
+      verticalAlign: "middle"
+    }
+  });
+};
+const IconFilePicker = ({
+  onUpload,
+  onChange
+}) => {
+  return /*#__PURE__*/React.createElement(FileManager, {
+    onUploadCompletion: ([file]) => {
+      onUpload(file);
+    },
+    onChange: onChange,
+    scope: "scope:iconPicker",
+    accept: ["image/svg+xml"],
+    render: ({
+      showFileManager
+    }) => /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      text: "Browse",
+      onClick: () => {
+        showFileManager();
+      }
+    })
+  });
+};
+const CustomIconTab = observer(() => {
+  const presenter = useIconPicker();
+  const onIconSelect = icon => {
+    presenter.setIcon(icon);
+    presenter.closeMenu();
+  };
+  const onIconFileSelect = file => {
+    presenter.setIcon({
+      type: "custom",
+      name: file.name,
+      value: file.src
+    });
+    presenter.closeMenu();
+  };
+  const onIconFileUpload = file => {
+    const icon = {
+      type: "custom",
+      name: file.name,
+      value: file.src
+    };
+    presenter.addIcon(icon);
+    presenter.setIcon(icon);
+    presenter.closeMenu();
+  };
+  return /*#__PURE__*/React.createElement(IconPickerTab, {
+    value: "custom",
+    label: "Custom",
+    onChange: onIconSelect,
+    actions: /*#__PURE__*/React.createElement(IconFilePicker, {
+      onChange: onIconFileSelect,
+      onUpload: onIconFileUpload
+    })
+  });
+});
+export const CustomIconPlugin = () => {
+  const client = useApolloClient();
+  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconPack, {
+    name: "custom",
+    provider: async () => {
+      const {
+        data: response
+      } = await client.query({
+        query: LIST_CUSTOM_ICONS,
+        variables: {
+          limit: 10000
+        }
+      });
+      if (!response) {
+        throw new Error("Network error while listing custom icons.");
+      }
+      const {
+        data,
+        error
+      } = response.fileManager.listFiles;
+      if (!data) {
+        throw new Error(error?.message || "Could not fetch custom icons.");
+      }
+      return data.map(customIcon => ({
+        type: "custom",
+        name: customIcon.name,
+        value: customIcon.src
+      }));
+    }
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
+    name: "custom"
+  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
+    element: /*#__PURE__*/React.createElement(CustomIcon, null)
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
+    element: /*#__PURE__*/React.createElement(CustomIconTab, null)
+  })));
+};
+
+//# sourceMappingURL=customPlugin.js.map

package/components/IconPicker/plugins/customPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useApolloClient","observer","Button","FileManager","IconPickerTab","useIcon","useIconPicker","IconPickerConfig","LIST_CUSTOM_ICONS","CustomIcon","icon","size","createElement","width","height","src","value","alt","name","style","verticalAlign","IconFilePicker","onUpload","onChange","onUploadCompletion","file","scope","accept","render","showFileManager","variant","text","onClick","CustomIconTab","presenter","onIconSelect","setIcon","closeMenu","onIconFileSelect","type","onIconFileUpload","addIcon","label","actions","CustomIconPlugin","client","IconPack","provider","data","response","query","variables","limit","Error","error","fileManager","listFiles","message","map","customIcon","IconType","Icon","element","Tab"],"sources":["customPlugin.tsx"],"sourcesContent":["import React from \"react\";\nimport { useApolloClient } from \"@apollo/react-hooks\";\nimport { observer } from \"mobx-react-lite\";\nimport { Button } from \"@webiny/admin-ui\";\nimport type { FileManagerFileItem } from \"~/base/ui/FileManager.js\";\nimport { FileManager } from \"~/base/ui/FileManager.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { useIcon } from \"../index.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { ListCustomIconsQueryResponse } from \"./graphql.js\";\nimport { LIST_CUSTOM_ICONS } from \"./graphql.js\";\nimport type { Icon } from \"../types.js\";\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\nconst CustomIcon = () => {\n    const { icon, size } = useIcon<Icon>();\n\n    return (\n        <img\n            width={size}\n            height={size}\n            src={icon.value}\n            alt={icon.name}\n            style={{\n                verticalAlign: \"middle\"\n            }}\n        />\n    );\n};\n\ninterface IconFilePickerProps {\n    onUpload: (file: FileManagerFileItem) => void;\n    onChange: (file: FileManagerFileItem) => void;\n}\n\nconst IconFilePicker = ({ onUpload, onChange }: IconFilePickerProps) => {\n    return (\n        <FileManager\n            onUploadCompletion={([file]) => {\n                onUpload(file);\n            }}\n            onChange={onChange}\n            scope=\"scope:iconPicker\"\n            accept={[\"image/svg+xml\"]}\n            render={({ showFileManager }) => (\n                <Button\n                    variant={\"primary\"}\n                    text={\"Browse\"}\n                    onClick={() => {\n                        showFileManager();\n                    }}\n                />\n            )}\n        ></FileManager>\n    );\n};\n\nconst CustomIconTab = observer(() => {\n    const presenter = useIconPicker();\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const onIconFileSelect = (file: FileManagerFileItem) => {\n        presenter.setIcon({\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        });\n        presenter.closeMenu();\n    };\n\n    const onIconFileUpload = (file: FileManagerFileItem) => {\n        const icon = {\n            type: \"custom\",\n            name: file.name,\n            value: file.src\n        };\n\n        presenter.addIcon(icon);\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    return (\n        <IconPickerTab\n            value={\"custom\"}\n            label={\"Custom\"}\n            onChange={onIconSelect}\n            actions={<IconFilePicker onChange={onIconFileSelect} onUpload={onIconFileUpload} />}\n        />\n    );\n});\n\nexport const CustomIconPlugin = () => {\n    const client = useApolloClient();\n\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconPack\n                name=\"custom\"\n                provider={async () => {\n                    const { data: response } = await client.query<ListCustomIconsQueryResponse>({\n                        query: LIST_CUSTOM_ICONS,\n                        variables: {\n                            limit: 10000\n                        }\n                    });\n\n                    if (!response) {\n                        throw new Error(\"Network error while listing custom icons.\");\n                    }\n\n                    const { data, error } = response.fileManager.listFiles;\n\n                    if (!data) {\n                        throw new Error(error?.message || \"Could not fetch custom icons.\");\n                    }\n\n                    return data.map(customIcon => ({\n                        type: \"custom\",\n                        name: customIcon.name,\n                        value: customIcon.src\n                    }));\n                }}\n            />\n            <IconPickerConfig.IconType name={\"custom\"}>\n                <IconPickerConfig.IconType.Icon element={<CustomIcon />} />\n                <IconPickerConfig.IconType.Tab element={<CustomIconTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/plugins/emojisPlugin.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const EmojiPlugin: () => React.JSX.Element;

package/components/IconPicker/plugins/emojisPlugin.js

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { cn, PopoverPrimitive } from "@webiny/admin-ui";
+import { useIcon } from "../index.js";
+import { IconPickerTab } from "../IconPickerTab.js";
+import { IconProvider } from "../IconRenderer.js";
+import { useIconPicker } from "../IconPickerPresenterProvider.js";
+import { IconPickerConfig } from "../config/index.js";
+const SKIN_TONES = ["", "\u{1f3fb}", "\u{1f3fc}", "\u{1f3fd}", "\u{1f3fe}", "\u{1f3ff}"];
+const SkinToneSelectWrapper = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center")
+  }, props.children);
+};
+
+/**
+ * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.
+ * This is crucial for serializing component rendering into a string value as plain HTML,
+ * which is necessary for usage in the website application. Please use inline styles here
+ * to ensure proper serialization.
+ */
+
+const Emoji = () => {
+  const {
+    icon,
+    size
+  } = useIcon();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "inline-block",
+      width: `${size}px`,
+      height: `${size}px`,
+      fontSize: `${size * 4 / 5}px`,
+      lineHeight: `${size}px`,
+      color: "black"
+    }
+  }, icon.skinTone ? icon.value + icon.skinTone : icon.value);
+};
+const SkinToneSelect = ({
+  icon,
+  hasSkinToneSupport,
+  onChange
+}) => {
+  const [open, setOpen] = useState(false);
+  if (!icon || !isEmoji(icon)) {
+    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null);
+  }
+  if (!hasSkinToneSupport) {
+    return /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
+      icon: icon,
+      size: 24
+    }, /*#__PURE__*/React.createElement(Emoji, null)));
+  }
+  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
+    open: open,
+    onOpenChange: open => setOpen(open)
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
+    className: "outline-none"
+  }, /*#__PURE__*/React.createElement(SkinToneSelectWrapper, null, /*#__PURE__*/React.createElement(IconProvider, {
+    icon: icon,
+    size: 24
+  }, /*#__PURE__*/React.createElement(Emoji, null)))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, null, /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-base grid gap-xs p-xs text-center"
+  }, SKIN_TONES.map((skinTone, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    onClick: () => {
+      onChange(skinTone);
+    },
+    className: "cursor-pointer"
+  }, /*#__PURE__*/React.createElement(IconProvider, {
+    icon: {
+      ...icon,
+      skinTone
+    },
+    size: 24
+  }, /*#__PURE__*/React.createElement(Emoji, null)))))));
+};
+
+/**
+ * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
+ */
+const isEmoji = icon => {
+  if (!icon) {
+    return false;
+  }
+  return icon.type === "emoji";
+};
+const EmojiTab = observer(() => {
+  const presenter = useIconPicker();
+  const {
+    selectedIcon
+  } = presenter.vm;
+  const onSkinToneChange = skinTone => {
+    if (isEmoji(selectedIcon)) {
+      presenter.setIcon({
+        ...selectedIcon,
+        skinTone
+      });
+    }
+  };
+  const onIconSelect = icon => {
+    presenter.setIcon(icon);
+    presenter.closeMenu();
+  };
+  const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;
+  return /*#__PURE__*/React.createElement(IconPickerTab, {
+    value: "emoji",
+    label: "Emojis",
+    onChange: onIconSelect,
+    actions: /*#__PURE__*/React.createElement(SkinToneSelect, {
+      icon: selectedIcon,
+      hasSkinToneSupport: hasSkinToneSupport,
+      onChange: onSkinToneChange
+    })
+  });
+});
+export const EmojiPlugin = () => {
+  return /*#__PURE__*/React.createElement(IconPickerConfig, null, /*#__PURE__*/React.createElement(IconPickerConfig.IconType, {
+    name: "emoji"
+  }, /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Icon, {
+    element: /*#__PURE__*/React.createElement(Emoji, null)
+  }), /*#__PURE__*/React.createElement(IconPickerConfig.IconType.Tab, {
+    element: /*#__PURE__*/React.createElement(EmojiTab, null)
+  })));
+};
+
+//# sourceMappingURL=emojisPlugin.js.map

package/components/IconPicker/plugins/emojisPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","observer","cn","PopoverPrimitive","useIcon","IconPickerTab","IconProvider","useIconPicker","IconPickerConfig","SKIN_TONES","SkinToneSelectWrapper","props","createElement","className","children","Emoji","icon","size","style","display","width","height","fontSize","lineHeight","color","skinTone","value","SkinToneSelect","hasSkinToneSupport","onChange","open","setOpen","isEmoji","onOpenChange","Trigger","Content","map","index","key","onClick","type","EmojiTab","presenter","selectedIcon","vm","onSkinToneChange","setIcon","onIconSelect","closeMenu","skinToneSupport","label","actions","EmojiPlugin","IconType","name","Icon","element","Tab"],"sources":["emojisPlugin.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { cn, PopoverPrimitive } from \"@webiny/admin-ui\";\nimport { useIcon } from \"../index.js\";\nimport { IconPickerTab } from \"../IconPickerTab.js\";\nimport { IconProvider } from \"../IconRenderer.js\";\nimport { useIconPicker } from \"../IconPickerPresenterProvider.js\";\nimport { IconPickerConfig } from \"../config/index.js\";\nimport type { Icon } from \"../types.js\";\n\nconst SKIN_TONES = [\"\", \"\\u{1f3fb}\", \"\\u{1f3fc}\", \"\\u{1f3fd}\", \"\\u{1f3fe}\", \"\\u{1f3ff}\"];\n\nconst SkinToneSelectWrapper = (props: React.HTMLAttributes<HTMLDivElement>) => {\n    return (\n        <div\n            className={cn(\n                \"size-xl rounded-sm pointer border-solid border-sm border-neutral-muted flex justify-center items-center text-center\"\n            )}\n        >\n            {props.children}\n        </div>\n    );\n};\n\n/**\n * NOTE: Avoid using `@emotion/styled` in icon renderer components across all plugins.\n * This is crucial for serializing component rendering into a string value as plain HTML,\n * which is necessary for usage in the website application. Please use inline styles here\n * to ensure proper serialization.\n */\n\ninterface Emoji extends Icon {\n    skinTone: string;\n    skinToneSupport: boolean;\n}\n\nconst Emoji = () => {\n    const { icon, size } = useIcon<Emoji>();\n\n    return (\n        <div\n            style={{\n                display: \"inline-block\",\n                width: `${size}px`,\n                height: `${size}px`,\n                fontSize: `${(size * 4) / 5}px`,\n                lineHeight: `${size}px`,\n                color: \"black\"\n            }}\n        >\n            {icon.skinTone ? icon.value + icon.skinTone : icon.value}\n        </div>\n    );\n};\n\ninterface SkinToneSelectProps {\n    icon: Icon | null;\n    hasSkinToneSupport: boolean;\n    onChange: (skinTone: string) => void;\n}\n\nconst SkinToneSelect = ({ icon, hasSkinToneSupport, onChange }: SkinToneSelectProps) => {\n    const [open, setOpen] = useState(false);\n\n    if (!icon || !isEmoji(icon)) {\n        return <SkinToneSelectWrapper />;\n    }\n\n    if (!hasSkinToneSupport) {\n        return (\n            <SkinToneSelectWrapper>\n                <IconProvider icon={icon} size={24}>\n                    <Emoji />\n                </IconProvider>\n            </SkinToneSelectWrapper>\n        );\n    }\n\n    return (\n        <PopoverPrimitive open={open} onOpenChange={open => setOpen(open)}>\n            <PopoverPrimitive.Trigger className={\"outline-none\"}>\n                <SkinToneSelectWrapper>\n                    <IconProvider icon={icon} size={24}>\n                        <Emoji />\n                    </IconProvider>\n                </SkinToneSelectWrapper>\n            </PopoverPrimitive.Trigger>\n            <PopoverPrimitive.Content>\n                <div className={\"bg-neutral-base grid gap-xs p-xs text-center\"}>\n                    {SKIN_TONES.map((skinTone, index) => (\n                        <div\n                            key={index}\n                            onClick={() => {\n                                onChange(skinTone);\n                            }}\n                            className={\"cursor-pointer\"}\n                        >\n                            <IconProvider icon={{ ...icon, skinTone }} size={24}>\n                                <Emoji />\n                            </IconProvider>\n                        </div>\n                    ))}\n                </div>\n            </PopoverPrimitive.Content>\n        </PopoverPrimitive>\n    );\n};\n\n/**\n * @see https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates\n */\nconst isEmoji = (icon: Icon | null): icon is Emoji => {\n    if (!icon) {\n        return false;\n    }\n    return icon.type === \"emoji\";\n};\n\nconst EmojiTab = observer(() => {\n    const presenter = useIconPicker();\n    const { selectedIcon } = presenter.vm;\n\n    const onSkinToneChange = (skinTone: string) => {\n        if (isEmoji(selectedIcon)) {\n            presenter.setIcon({ ...selectedIcon, skinTone });\n        }\n    };\n\n    const onIconSelect = (icon: Icon) => {\n        presenter.setIcon(icon);\n        presenter.closeMenu();\n    };\n\n    const hasSkinToneSupport = isEmoji(selectedIcon) ? selectedIcon.skinToneSupport : false;\n\n    return (\n        <IconPickerTab\n            value={\"emoji\"}\n            label={\"Emojis\"}\n            onChange={onIconSelect}\n            actions={\n                <SkinToneSelect\n                    icon={selectedIcon}\n                    hasSkinToneSupport={hasSkinToneSupport}\n                    onChange={onSkinToneChange}\n                />\n            }\n        />\n    );\n});\n\nexport const EmojiPlugin = () => {\n    return (\n        <IconPickerConfig>\n            <IconPickerConfig.IconType name={\"emoji\"}>\n                <IconPickerConfig.IconType.Icon element={<Emoji />} />\n                <IconPickerConfig.IconType.Tab element={<EmojiTab />} />\n            </IconPickerConfig.IconType>\n        </IconPickerConfig>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/IconPicker/plugins/graphql.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ###########################
+ * List Custom Icons Query Response
+ */
+export interface ListCustomIconsQueryResponse {
+    fileManager: {
+        listFiles: {
+            data: [{
+                name: string;
+                src: string;
+            }] | null;
+            error: {
+                message: string;
+                data: Record<string, any>;
+                code: string;
+            } | null;
+        };
+    };
+}
+export declare const LIST_CUSTOM_ICONS: import("graphql").DocumentNode;