@webiny/app-file-manager 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/components/Header/Actions.js

@@ -0,0 +1,99 @@
+import React, { useCallback } from "react";
+import { Button, IconButton, Tooltip } from "@webiny/admin-ui";
+import { useCreateDialog } from "@webiny/app-aco";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as FileUploadIcon } from "@webiny/icons/file_upload.svg";
+import { ReactComponent as GridIcon } from "@webiny/icons/grid_on.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/format_list_bulleted.svg";
+import { useFileManagerView } from "../../modules/FileManagerRenderer/FileManagerViewProvider";
+import { useFileManagerApi } from "../../modules/FileManagerApiProvider/FileManagerApiContext";
+import { FiltersToggle } from "@webiny/app-admin";
+const FileAction = ({
+  browseFiles
+}) => {
+  const view = useFileManagerView();
+  const fileManager = useFileManagerApi();
+  const renderUploadFileAction = useCallback(({
+    browseFiles
+  }) => {
+    if (!fileManager.canCreate) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: browseFiles,
+      size: "md",
+      text: "Upload",
+      icon: /*#__PURE__*/React.createElement(FileUploadIcon, null)
+    });
+  }, [fileManager.canCreate]);
+  if (view.hasOnSelectCallback && view.selected.length > 0) {
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: () => view.onChange(view.selected),
+      size: "md",
+      text: `Select ${view.multiple && `(${view.selected.length})`}`
+    });
+  }
+  return renderUploadFileAction({
+    browseFiles
+  });
+};
+const FolderAction = () => {
+  const view = useFileManagerView();
+  const {
+    showDialog: showCreateFolderDialog
+  } = useCreateDialog();
+  const onCreateFolder = useCallback(() => {
+    showCreateFolderDialog({
+      currentParentId: view.folderId
+    });
+  }, [view.folderId]);
+  return /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    size: "md",
+    onClick: onCreateFolder,
+    text: "New Folder",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null),
+    "data-testid": "file-manager.create-folder-button"
+  });
+};
+const LayoutSwitchAction = () => {
+  const view = useFileManagerView();
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    side: "bottom",
+    content: view.listTable ? "Switch to Grid" : "Switch to Table",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "ghost",
+      size: "md",
+      icon: view.listTable ? /*#__PURE__*/React.createElement(GridIcon, null) : /*#__PURE__*/React.createElement(TableIcon, null),
+      onClick: () => view.setListTable(!view.listTable)
+    })
+  });
+};
+const ToggleFiltersAction = () => {
+  const view = useFileManagerView();
+  const toggleFilters = () => {
+    if (view.showingFilters) {
+      view.hideFilters();
+    } else {
+      view.showFilters();
+    }
+  };
+  return /*#__PURE__*/React.createElement(FiltersToggle, {
+    onFiltersToggle: toggleFilters,
+    showingFilters: view.showingFilters,
+    "data-testid": "fm.list-entries.toggle-filters"
+  });
+};
+export const Actions = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-h-full wby-flex wby-gap-sm wby-items-center wby-justify-end"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-xs"
+  }, /*#__PURE__*/React.createElement(ToggleFiltersAction, null), /*#__PURE__*/React.createElement(LayoutSwitchAction, null)), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-xs"
+  }, /*#__PURE__*/React.createElement(FileAction, {
+    browseFiles: props.browseFiles
+  }), /*#__PURE__*/React.createElement(FolderAction, null)));
+};
+
+//# sourceMappingURL=Actions.js.map

package/components/Header/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Button","IconButton","Tooltip","useCreateDialog","ReactComponent","AddIcon","FileUploadIcon","GridIcon","TableIcon","useFileManagerView","useFileManagerApi","FiltersToggle","FileAction","browseFiles","view","fileManager","renderUploadFileAction","canCreate","createElement","onClick","size","text","icon","hasOnSelectCallback","selected","length","onChange","multiple","FolderAction","showDialog","showCreateFolderDialog","onCreateFolder","currentParentId","folderId","variant","LayoutSwitchAction","side","content","listTable","trigger","setListTable","ToggleFiltersAction","toggleFilters","showingFilters","hideFilters","showFilters","onFiltersToggle","Actions","props","className"],"sources":["Actions.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { Button, type ButtonProps, IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { useCreateDialog } from \"@webiny/app-aco\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as FileUploadIcon } from \"@webiny/icons/file_upload.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_on.svg\";\nimport { ReactComponent as TableIcon } from \"@webiny/icons/format_list_bulleted.svg\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider\";\nimport { useFileManagerApi } from \"~/modules/FileManagerApiProvider/FileManagerApiContext\";\nimport type { BrowseFilesHandler, HeaderProps } from \"~/components/Header/Header\";\nimport { FiltersToggle } from \"@webiny/app-admin\";\n\ntype ActionsProps = Pick<HeaderProps, \"browseFiles\">;\n\nconst FileAction = ({ browseFiles }: ActionsProps) => {\n    const view = useFileManagerView();\n    const fileManager = useFileManagerApi();\n\n    const renderUploadFileAction = useCallback(\n        ({ browseFiles }: BrowseFilesHandler) => {\n            if (!fileManager.canCreate) {\n                return null;\n            }\n            return (\n                <Button\n                    onClick={browseFiles as ButtonProps[\"onClick\"]}\n                    size={\"md\"}\n                    text={\"Upload\"}\n                    icon={<FileUploadIcon />}\n                />\n            );\n        },\n        [fileManager.canCreate]\n    );\n\n    if (view.hasOnSelectCallback && view.selected.length > 0) {\n        return (\n            <Button\n                onClick={() => view.onChange(view.selected)}\n                size={\"md\"}\n                text={`Select ${view.multiple && `(${view.selected.length})`}`}\n            />\n        );\n    }\n\n    return renderUploadFileAction({\n        browseFiles\n    } as BrowseFilesHandler);\n};\n\nconst FolderAction = () => {\n    const view = useFileManagerView();\n    const { showDialog: showCreateFolderDialog } = useCreateDialog();\n\n    const onCreateFolder = useCallback(() => {\n        showCreateFolderDialog({ currentParentId: view.folderId });\n    }, [view.folderId]);\n\n    return (\n        <Button\n            variant={\"secondary\"}\n            size={\"md\"}\n            onClick={onCreateFolder}\n            text={\"New Folder\"}\n            icon={<AddIcon />}\n            data-testid={\"file-manager.create-folder-button\"}\n        />\n    );\n};\n\nconst LayoutSwitchAction = () => {\n    const view = useFileManagerView();\n\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            content={view.listTable ? \"Switch to Grid\" : \"Switch to Table\"}\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    size={\"md\"}\n                    icon={view.listTable ? <GridIcon /> : <TableIcon />}\n                    onClick={() => view.setListTable(!view.listTable)}\n                />\n            }\n        />\n    );\n};\n\nconst ToggleFiltersAction = () => {\n    const view = useFileManagerView();\n\n    const toggleFilters = () => {\n        if (view.showingFilters) {\n            view.hideFilters();\n        } else {\n            view.showFilters();\n        }\n    };\n\n    return (\n        <FiltersToggle\n            onFiltersToggle={toggleFilters}\n            showingFilters={view.showingFilters}\n            data-testid=\"fm.list-entries.toggle-filters\"\n        />\n    );\n};\n\nexport const Actions = (props: ActionsProps) => {\n    return (\n        <div className={\"wby-h-full wby-flex wby-gap-sm wby-items-center wby-justify-end\"}>\n            <div className={\"wby-flex wby-gap-xs\"}>\n                <ToggleFiltersAction />\n                <LayoutSwitchAction />\n            </div>\n            <div className={\"wby-flex wby-gap-xs\"}>\n                <FileAction browseFiles={props.browseFiles} />\n                <FolderAction />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/components/Header/Header.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { FilesRenderChildren } from "react-butterfiles";
+export interface BrowseFilesHandler {
+    browseFiles: FilesRenderChildren["browseFiles"];
+}
+export interface HeaderProps {
+    browseFiles: BrowseFilesHandler["browseFiles"];
+}
+export declare const Header: (props: HeaderProps) => React.JSX.Element;

package/components/Header/Header.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Grid, Separator } from "@webiny/admin-ui";
+import { Actions } from "./Actions";
+import { Title } from "./Title";
+export const Header = props => {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "wby-pl-lg wby-pr-md wby-py-sm-extra"
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Title, null)), /*#__PURE__*/React.createElement(Grid.Column, {
+    span: 6
+  }, /*#__PURE__*/React.createElement(Actions, {
+    browseFiles: props.browseFiles
+  })))), /*#__PURE__*/React.createElement(Separator, null));
+};
+
+//# sourceMappingURL=Header.js.map

package/components/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Grid","Separator","Actions","Title","Header","props","createElement","className","Column","span","browseFiles"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FilesRenderChildren } from \"react-butterfiles\";\nimport { Grid, Separator } from \"@webiny/admin-ui\";\n\nimport { Actions } from \"./Actions\";\nimport { Title } from \"./Title\";\n\nexport interface BrowseFilesHandler {\n    browseFiles: FilesRenderChildren[\"browseFiles\"];\n}\n\nexport interface HeaderProps {\n    browseFiles: BrowseFilesHandler[\"browseFiles\"];\n}\n\nexport const Header = (props: HeaderProps) => {\n    return (\n        <div>\n            <div className={\"wby-pl-lg wby-pr-md wby-py-sm-extra\"}>\n                <Grid>\n                    <Grid.Column span={6}>\n                        <Title />\n                    </Grid.Column>\n                    <Grid.Column span={6}>\n                        <Actions browseFiles={props.browseFiles} />\n                    </Grid.Column>\n                </Grid>\n            </div>\n            <Separator />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,IAAI,EAAEC,SAAS,QAAQ,kBAAkB;AAElD,SAASC,OAAO;AAChB,SAASC,KAAK;AAUd,OAAO,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EAC1C,oBACIN,KAAA,CAAAO,aAAA,2BACIP,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAE;EAAsC,gBAClDR,KAAA,CAAAO,aAAA,CAACN,IAAI,qBACDD,KAAA,CAAAO,aAAA,CAACN,IAAI,CAACQ,MAAM;IAACC,IAAI,EAAE;EAAE,gBACjBV,KAAA,CAAAO,aAAA,CAACH,KAAK,MAAE,CACC,CAAC,eACdJ,KAAA,CAAAO,aAAA,CAACN,IAAI,CAACQ,MAAM;IAACC,IAAI,EAAE;EAAE,gBACjBV,KAAA,CAAAO,aAAA,CAACJ,OAAO;IAACQ,WAAW,EAAEL,KAAK,CAACK;EAAY,CAAE,CACjC,CACX,CACL,CAAC,eACNX,KAAA,CAAAO,aAAA,CAACL,SAAS,MAAE,CACX,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Header/Title.d.ts

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

package/components/Header/Title.js

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import { Heading, Icon, IconButton, Skeleton, Switch } from "@webiny/admin-ui";
+import { ReactComponent as HomeIcon } from "@webiny/icons/home.svg";
+import { ReactComponent as FolderIcon } from "@webiny/icons/folder.svg";
+import { ReactComponent as MoreVerticalIcon } from "@webiny/icons/more_vert.svg";
+import { useFileManagerView } from "../../modules/FileManagerRenderer/FileManagerViewProvider";
+import { FolderProvider, useAcoConfig } from "@webiny/app-aco";
+import { OptionsMenu } from "@webiny/app-admin";
+export const Title = () => {
+  const {
+    isRootFolder,
+    listTitle,
+    displaySubFolders,
+    setDisplaySubFolders,
+    currentFolder,
+    folders
+  } = useFileManagerView();
+  const {
+    folder: folderConfig
+  } = useAcoConfig();
+  const icon = useMemo(() => {
+    return isRootFolder ? /*#__PURE__*/React.createElement(HomeIcon, null) : /*#__PURE__*/React.createElement(FolderIcon, null);
+  }, [isRootFolder]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, listTitle && /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-xs wby-items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-gap-sm wby-items-center wby-truncate"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    label: listTitle,
+    size: "md",
+    color: "neutral-strong"
+  }), /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    as: "h1",
+    className: "wby-truncate"
+  }, listTitle)), currentFolder && /*#__PURE__*/React.createElement(FolderProvider, {
+    folder: currentFolder
+  }, /*#__PURE__*/React.createElement(OptionsMenu, {
+    actions: folderConfig.actions,
+    "data-testid": "folder.title.menu-action",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(MoreVerticalIcon, null),
+      size: "sm",
+      iconSize: "lg",
+      variant: "ghost",
+      disabled: isRootFolder
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-nowrap"
+  }, /*#__PURE__*/React.createElement(Switch, {
+    label: "Display subfolders",
+    labelPosition: "end",
+    onChange: setDisplaySubFolders,
+    checked: displaySubFolders,
+    disabled: folders.length === 0
+  }))) || /*#__PURE__*/React.createElement(Skeleton, {
+    size: "xl"
+  }));
+};
+
+//# sourceMappingURL=Title.js.map

package/components/Header/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Heading","Icon","IconButton","Skeleton","Switch","ReactComponent","HomeIcon","FolderIcon","MoreVerticalIcon","useFileManagerView","FolderProvider","useAcoConfig","OptionsMenu","Title","isRootFolder","listTitle","displaySubFolders","setDisplaySubFolders","currentFolder","folders","folder","folderConfig","icon","createElement","Fragment","className","label","size","color","level","as","actions","trigger","iconSize","variant","disabled","labelPosition","onChange","checked","length"],"sources":["Title.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { Heading, Icon, IconButton, Skeleton, Switch } from \"@webiny/admin-ui\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as MoreVerticalIcon } from \"@webiny/icons/more_vert.svg\";\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider\";\nimport { FolderProvider, useAcoConfig } from \"@webiny/app-aco\";\nimport { OptionsMenu } from \"@webiny/app-admin\";\n\nexport const Title = () => {\n    const {\n        isRootFolder,\n        listTitle,\n        displaySubFolders,\n        setDisplaySubFolders,\n        currentFolder,\n        folders\n    } = useFileManagerView();\n    const { folder: folderConfig } = useAcoConfig();\n\n    const icon = useMemo(() => {\n        return isRootFolder ? <HomeIcon /> : <FolderIcon />;\n    }, [isRootFolder]);\n\n    return (\n        <>\n            {(listTitle && (\n                <div className={\"wby-flex wby-gap-xs wby-items-center\"}>\n                    <div className={\"wby-flex wby-gap-sm wby-items-center wby-truncate\"}>\n                        <Icon icon={icon} label={listTitle} size={\"md\"} color={\"neutral-strong\"} />\n                        <Heading level={4} as={\"h1\"} className={\"wby-truncate\"}>\n                            {listTitle}\n                        </Heading>\n                    </div>\n                    {currentFolder && (\n                        <FolderProvider folder={currentFolder}>\n                            <OptionsMenu\n                                actions={folderConfig.actions}\n                                data-testid={\"folder.title.menu-action\"}\n                                trigger={\n                                    <IconButton\n                                        icon={<MoreVerticalIcon />}\n                                        size={\"sm\"}\n                                        iconSize={\"lg\"}\n                                        variant={\"ghost\"}\n                                        disabled={isRootFolder}\n                                    />\n                                }\n                            />\n                        </FolderProvider>\n                    )}\n                    <div className={\"wby-flex wby-flex-nowrap\"}>\n                        <Switch\n                            label={\"Display subfolders\"}\n                            labelPosition={\"end\"}\n                            onChange={setDisplaySubFolders}\n                            checked={displaySubFolders}\n                            disabled={folders.length === 0}\n                        />\n                    </div>\n                </div>\n            )) || <Skeleton size={\"xl\"} />}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,OAAO,EAAEC,IAAI,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,kBAAkB;AAC9E,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,UAAU,QAAQ,0BAA0B;AACvE,SAASF,cAAc,IAAIG,gBAAgB,QAAQ,6BAA6B;AAChF,SAASC,kBAAkB;AAC3B,SAASC,cAAc,EAAEC,YAAY,QAAQ,iBAAiB;AAC9D,SAASC,WAAW,QAAQ,mBAAmB;AAE/C,OAAO,MAAMC,KAAK,GAAGA,CAAA,KAAM;EACvB,MAAM;IACFC,YAAY;IACZC,SAAS;IACTC,iBAAiB;IACjBC,oBAAoB;IACpBC,aAAa;IACbC;EACJ,CAAC,GAAGV,kBAAkB,CAAC,CAAC;EACxB,MAAM;IAAEW,MAAM,EAAEC;EAAa,CAAC,GAAGV,YAAY,CAAC,CAAC;EAE/C,MAAMW,IAAI,GAAGvB,OAAO,CAAC,MAAM;IACvB,OAAOe,YAAY,gBAAGhB,KAAA,CAAAyB,aAAA,CAACjB,QAAQ,MAAE,CAAC,gBAAGR,KAAA,CAAAyB,aAAA,CAAChB,UAAU,MAAE,CAAC;EACvD,CAAC,EAAE,CAACO,YAAY,CAAC,CAAC;EAElB,oBACIhB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,QACMT,SAAS,iBACPjB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAE;EAAuC,gBACnD3B,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAE;EAAoD,gBAChE3B,KAAA,CAAAyB,aAAA,CAACtB,IAAI;IAACqB,IAAI,EAAEA,IAAK;IAACI,KAAK,EAAEX,SAAU;IAACY,IAAI,EAAE,IAAK;IAACC,KAAK,EAAE;EAAiB,CAAE,CAAC,eAC3E9B,KAAA,CAAAyB,aAAA,CAACvB,OAAO;IAAC6B,KAAK,EAAE,CAAE;IAACC,EAAE,EAAE,IAAK;IAACL,SAAS,EAAE;EAAe,GAClDV,SACI,CACR,CAAC,EACLG,aAAa,iBACVpB,KAAA,CAAAyB,aAAA,CAACb,cAAc;IAACU,MAAM,EAAEF;EAAc,gBAClCpB,KAAA,CAAAyB,aAAA,CAACX,WAAW;IACRmB,OAAO,EAAEV,YAAY,CAACU,OAAQ;IAC9B,eAAa,0BAA2B;IACxCC,OAAO,eACHlC,KAAA,CAAAyB,aAAA,CAACrB,UAAU;MACPoB,IAAI,eAAExB,KAAA,CAAAyB,aAAA,CAACf,gBAAgB,MAAE,CAAE;MAC3BmB,IAAI,EAAE,IAAK;MACXM,QAAQ,EAAE,IAAK;MACfC,OAAO,EAAE,OAAQ;MACjBC,QAAQ,EAAErB;IAAa,CAC1B;EACJ,CACJ,CACW,CACnB,eACDhB,KAAA,CAAAyB,aAAA;IAAKE,SAAS,EAAE;EAA2B,gBACvC3B,KAAA,CAAAyB,aAAA,CAACnB,MAAM;IACHsB,KAAK,EAAE,oBAAqB;IAC5BU,aAAa,EAAE,KAAM;IACrBC,QAAQ,EAAEpB,oBAAqB;IAC/BqB,OAAO,EAAEtB,iBAAkB;IAC3BmB,QAAQ,EAAEhB,OAAO,CAACoB,MAAM,KAAK;EAAE,CAClC,CACA,CACJ,CACR,iBAAKzC,KAAA,CAAAyB,aAAA,CAACpB,QAAQ;IAACwB,IAAI,EAAE;EAAK,CAAE,CAC/B,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/Header/index.d.ts

@@ -0,0 +1 @@
+export * from "./Header";

package/components/Header/index.js

@@ -0,0 +1,3 @@
+export * from "./Header";
+
+//# sourceMappingURL=index.js.map

package/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Header\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/ImageEditor/ImageEditor.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import type { ImageEditorTool, ToolbarTool } from "./toolbar/types";
+interface RenderPropArgs {
+    render: () => React.ReactNode;
+    getCanvasDataUrl: () => string;
+    activeTool: ImageEditorTool | null;
+    applyActiveTool: () => Promise<void>;
+    cancelActiveTool: () => Promise<void>;
+}
+interface ImageEditorPropsPropsOptions {
+    autoEnable: boolean;
+}
+interface ImageEditorProps {
+    src: string;
+    tools: ToolbarTool[];
+    options?: {
+        flip: ImageEditorPropsPropsOptions;
+        filter: ImageEditorPropsPropsOptions;
+        crop: ImageEditorPropsPropsOptions;
+        rotate: ImageEditorPropsPropsOptions;
+    };
+    onToolActivate?: () => void;
+    onToolDeactivate?: () => void;
+    children?: (props: RenderPropArgs) => React.ReactNode;
+}
+interface ImageEditorState {
+    tool: ImageEditorTool | null;
+    src: string;
+}
+declare class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
+    static defaultProps: Partial<ImageEditorProps>;
+    state: ImageEditorState;
+    canvas: React.RefObject<HTMLCanvasElement>;
+    image?: HTMLImageElement;
+    componentDidMount(): void;
+    private readonly updateCanvas;
+    private readonly activateTool;
+    private readonly deactivateTool;
+    readonly getCanvasDataUrl: () => string;
+    private readonly applyActiveTool;
+    private readonly cancelActiveTool;
+    private readonly getToolOptions;
+    render(): React.ReactNode;
+}
+export { ImageEditor };

package/components/ImageEditor/ImageEditor.js

@@ -0,0 +1,218 @@
+import React from "react";
+import { Button } from "@webiny/admin-ui";
+import { flip, filter, crop, rotate } from "./toolbar";
+/**
+ * Package load-script does not have types.
+ */
+// @ts-expect-error
+import loadScript from "load-script";
+const toolbar = {
+  flip,
+  filter,
+  crop,
+  rotate
+};
+const initScripts = () => {
+  return new Promise(resolve => {
+    // @ts-expect-error
+    if (window.Caman) {
+      return resolve();
+    }
+    return loadScript("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
+  });
+};
+class ImageEditor extends React.Component {
+  static defaultProps = {
+    tools: ["crop", "flip", "rotate", "filter"]
+  };
+  state = {
+    tool: null,
+    src: ""
+  };
+  canvas = /*#__PURE__*/React.createRef();
+  componentDidMount() {
+    initScripts().then(() => {
+      this.updateCanvas();
+      setTimeout(() => {
+        const {
+          options
+        } = this.props;
+        if (!options || typeof options !== "object") {
+          return;
+        }
+        for (const key in options) {
+          const option = options[key];
+          if (option.autoEnable === true) {
+            const tool = toolbar[key];
+            tool && this.activateTool(tool);
+            break;
+          }
+        }
+      }, 250);
+    });
+  }
+  updateCanvas = () => {
+    const {
+      src
+    } = this.props;
+    this.image = new window.Image();
+    const canvas = this.canvas.current;
+    if (canvas) {
+      this.image.onload = () => {
+        if (this.image) {
+          canvas.width = this.image.width;
+          canvas.height = this.image.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(this.image, 0, 0);
+        }
+      };
+      this.image.src = src;
+    }
+  };
+  activateTool = tool => {
+    if (typeof tool === "string") {
+      tool = toolbar[tool];
+    }
+    this.setState({
+      tool
+    }, () => {
+      const tt = tool;
+      typeof tt.onActivate === "function" && tt.onActivate({
+        canvas: this.canvas,
+        options: this.getToolOptions(tt)
+      });
+    });
+  };
+  deactivateTool = () => {
+    this.setState({
+      tool: null
+    });
+  };
+  getCanvasDataUrl = () => {
+    const canvas = this.canvas.current;
+    if (canvas) {
+      const {
+        src
+      } = this.props;
+      if (src.startsWith("data:image/jpeg;")) {
+        return canvas.toDataURL("image/jpeg", 1.0);
+      }
+      return canvas.toDataURL();
+    }
+    return "";
+  };
+  applyActiveTool = async () => {
+    const {
+      tool
+    } = this.state;
+    if (!tool) {
+      return;
+    }
+    if (tool.apply) {
+      await tool.apply({
+        canvas: this.canvas
+      });
+    }
+    this.deactivateTool();
+  };
+  cancelActiveTool = async () => {
+    const {
+      tool
+    } = this.state;
+    if (!tool) {
+      return;
+    }
+    if (tool.cancel) {
+      await tool.cancel({
+        canvas: this.canvas
+      });
+    }
+    this.deactivateTool();
+  };
+  getToolOptions = tool => {
+    const {
+      options
+    } = this.props;
+    if (!options || typeof options !== "object") {
+      return {};
+    }
+    return options[tool.name] || {};
+  };
+  render() {
+    const {
+      src,
+      tools,
+      children
+    } = this.props;
+    const {
+      tool
+    } = this.state;
+    const editor = /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full wby-h-full wby-flex wby-flex-col wby-gap-md wby-overflow-hidden"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-items-center wby-w-full"
+    }, tools.map(key => {
+      const tool = toolbar[key];
+      if (!tool) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: this.state.tool ? "wby-opacity-50 wby-cursor wby-pointer-events-none" : ""
+      }, tool.icon({
+        activateTool: () => this.activateTool(tool)
+      }));
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, tool ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
+      options: this.getToolOptions(tool),
+      image: this.image,
+      canvas: this.canvas
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-gap-sm wby-mt-sm"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      text: "Cancel",
+      "data-testid": "button-cancel",
+      onClick: () => {
+        this.cancelActiveTool();
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      text: "Apply",
+      "data-testid": "button-apply",
+      onClick: () => {
+        this.applyActiveTool();
+      }
+    }))) : /*#__PURE__*/React.createElement("div", {
+      className: "wby-text-center"
+    }, "Select a tool to start working on your image.")), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-items-center wby-w-full wby-bg-neutral-dimmed wby-rounded-md wby-overflow-hidden",
+      style: {
+        height: "calc(100vh - 256px)"
+      }
+    }, /*#__PURE__*/React.createElement("canvas", {
+      key: src,
+      id: "canvas",
+      style: {
+        maxWidth: "100%",
+        maxHeight: "100%"
+      },
+      ref: this.canvas
+    })));
+    if (typeof children === "function") {
+      return children({
+        render: () => editor,
+        // canvas: this.canvas,
+        getCanvasDataUrl: this.getCanvasDataUrl,
+        activeTool: this.state.tool,
+        applyActiveTool: this.applyActiveTool,
+        cancelActiveTool: this.cancelActiveTool
+      });
+    }
+    return editor;
+  }
+}
+export { ImageEditor };
+
+//# sourceMappingURL=ImageEditor.js.map

package/components/ImageEditor/ImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","flip","filter","crop","rotate","loadScript","toolbar","initScripts","Promise","resolve","window","Caman","ImageEditor","Component","defaultProps","tools","state","tool","src","canvas","createRef","componentDidMount","then","updateCanvas","setTimeout","options","props","key","option","autoEnable","activateTool","image","Image","current","onload","width","height","ctx","getContext","drawImage","setState","tt","onActivate","getToolOptions","deactivateTool","getCanvasDataUrl","startsWith","toDataURL","applyActiveTool","apply","cancelActiveTool","cancel","name","render","children","editor","createElement","className","map","icon","Fragment","renderForm","variant","text","onClick","style","id","maxWidth","maxHeight","ref","activeTool"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport type { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\n/**\n * Package load-script does not have types.\n */\n// @ts-expect-error\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-expect-error\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: () => React.ReactNode;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: () => void;\n    onToolDeactivate?: () => void;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <div\n                className={\n                    \"wby-w-full wby-h-full wby-flex wby-flex-col wby-gap-md wby-overflow-hidden\"\n                }\n            >\n                <div className={\"wby-flex wby-justify-center wby-items-center wby-w-full\"}>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div\n                                key={key}\n                                className={\n                                    this.state.tool\n                                        ? \"wby-opacity-50 wby-cursor wby-pointer-events-none\"\n                                        : \"\"\n                                }\n                            >\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </div>\n                <div className={\"wby-w-full\"}>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <div className={\"wby-flex wby-justify-center wby-gap-sm wby-mt-sm\"}>\n                                <Button\n                                    variant={\"secondary\"}\n                                    text={\"Cancel\"}\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                />\n                                <Button\n                                    variant={\"primary\"}\n                                    text={\"Apply\"}\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                />\n                            </div>\n                        </>\n                    ) : (\n                        <div className={\"wby-text-center\"}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </div>\n                <div\n                    className={\n                        \"wby-flex wby-justify-center wby-items-center wby-w-full wby-bg-neutral-dimmed wby-rounded-md wby-overflow-hidden\"\n                    }\n                    style={{ height: \"calc(100vh - 256px)\" }}\n                >\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </div>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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","ignoreList":[]}

package/components/ImageEditor/ImageEditorDialog.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface ImageEditorDialogProps {
+    dialogZIndex?: number;
+    onClose?: () => void;
+    open?: boolean;
+    /**
+     * We would need to drill down a lot to give correct options.
+     * TODO: figure out some other way.
+     */
+    options?: any;
+    src?: string;
+    onAccept: (src: string) => void;
+    "data-testid"?: string;
+}
+export declare const ImageEditorDialog: (props: ImageEditorDialogProps) => React.JSX.Element;
+export {};

package/components/ImageEditor/ImageEditorDialog.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { ImageEditor } from "./ImageEditor";
+import { Dialog, OverlayLoader } from "@webiny/admin-ui";
+export const ImageEditorDialog = props => {
+  const {
+    src,
+    options,
+    onAccept,
+    onClose,
+    open,
+    dialogZIndex,
+    ...dialogProps
+  } = props;
+  const imageEditor = /*#__PURE__*/React.createRef();
+  const [isSaving, setIsSaving] = useState(false);
+  const onSave = async () => {
+    try {
+      setIsSaving(true);
+      const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : "";
+      await onAccept(url);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    style: {
+      zIndex: dialogZIndex
+    },
+    title: "Edit Image",
+    size: "full",
+    open: open,
+    onClose: onClose
+  }, dialogProps, {
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelButton, null), /*#__PURE__*/React.createElement(Dialog.ConfirmButton, {
+      text: "Save",
+      "data-testid": "dialog-accept",
+      onClick: onSave,
+      disabled: isSaving
+    }))
+  }), isSaving && /*#__PURE__*/React.createElement(OverlayLoader, {
+    text: "Creating a new version of the image"
+  }), /*#__PURE__*/React.createElement(ImageEditor, {
+    ref: imageEditor,
+    src: src,
+    options: options
+  }, ({
+    render
+  }) => render()));
+};
+
+//# sourceMappingURL=ImageEditorDialog.js.map

package/components/ImageEditor/ImageEditorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ImageEditor","Dialog","OverlayLoader","ImageEditorDialog","props","src","options","onAccept","onClose","open","dialogZIndex","dialogProps","imageEditor","createRef","isSaving","setIsSaving","onSave","url","current","getCanvasDataUrl","e","console","log","createElement","Object","assign","style","zIndex","title","size","actions","Fragment","CancelButton","ConfirmButton","text","onClick","disabled","ref","render"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ImageEditor } from \"./ImageEditor\";\nimport { Dialog, OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface ImageEditorDialogProps {\n    dialogZIndex?: number;\n    onClose?: () => void;\n    open?: boolean;\n    /**\n     * We would need to drill down a lot to give correct options.\n     * TODO: figure out some other way.\n     */\n    options?: any;\n    src?: string;\n    onAccept: (src: string) => void;\n    \"data-testid\"?: string;\n}\n\nexport const ImageEditorDialog = (props: ImageEditorDialogProps) => {\n    const { src, options, onAccept, onClose, open, dialogZIndex, ...dialogProps } = props;\n    const imageEditor = React.createRef<ImageEditor>();\n    const [isSaving, setIsSaving] = useState(false);\n\n    const onSave = async () => {\n        try {\n            setIsSaving(true);\n            const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : \"\";\n            await onAccept(url);\n        } catch (e) {\n            console.log(e);\n        } finally {\n            setIsSaving(false);\n        }\n    };\n\n    return (\n        <Dialog\n            style={{ zIndex: dialogZIndex }}\n            title={\"Edit Image\"}\n            size={\"full\"}\n            open={open}\n            onClose={onClose}\n            {...dialogProps}\n            actions={\n                <>\n                    <Dialog.CancelButton />\n                    <Dialog.ConfirmButton\n                        text={\"Save\"}\n                        data-testid=\"dialog-accept\"\n                        onClick={onSave}\n                        disabled={isSaving}\n                    />\n                </>\n            }\n        >\n            {isSaving && <OverlayLoader text={\"Creating a new version of the image\"} />}\n            <ImageEditor ref={imageEditor} src={src} options={options}>\n                {({ render }) => render()}\n            </ImageEditor>\n        </Dialog>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,WAAW;AACpB,SAASC,MAAM,EAAEC,aAAa,QAAQ,kBAAkB;AAgBxD,OAAO,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EAChE,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,IAAI;IAAEC,YAAY;IAAE,GAAGC;EAAY,CAAC,GAAGP,KAAK;EACrF,MAAMQ,WAAW,gBAAGd,KAAK,CAACe,SAAS,CAAc,CAAC;EAClD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAMiB,MAAM,GAAG,MAAAA,CAAA,KAAY;IACvB,IAAI;MACAD,WAAW,CAAC,IAAI,CAAC;MACjB,MAAME,GAAG,GAAGL,WAAW,CAACM,OAAO,GAAGN,WAAW,CAACM,OAAO,CAACC,gBAAgB,CAAC,CAAC,GAAG,EAAE;MAC7E,MAAMZ,QAAQ,CAACU,GAAG,CAAC;IACvB,CAAC,CAAC,OAAOG,CAAC,EAAE;MACRC,OAAO,CAACC,GAAG,CAACF,CAAC,CAAC;IAClB,CAAC,SAAS;MACNL,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ,CAAC;EAED,oBACIjB,KAAA,CAAAyB,aAAA,CAACtB,MAAM,EAAAuB,MAAA,CAAAC,MAAA;IACHC,KAAK,EAAE;MAAEC,MAAM,EAAEjB;IAAa,CAAE;IAChCkB,KAAK,EAAE,YAAa;IACpBC,IAAI,EAAE,MAAO;IACbpB,IAAI,EAAEA,IAAK;IACXD,OAAO,EAAEA;EAAQ,GACbG,WAAW;IACfmB,OAAO,eACHhC,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAAiC,QAAA,qBACIjC,KAAA,CAAAyB,aAAA,CAACtB,MAAM,CAAC+B,YAAY,MAAE,CAAC,eACvBlC,KAAA,CAAAyB,aAAA,CAACtB,MAAM,CAACgC,aAAa;MACjBC,IAAI,EAAE,MAAO;MACb,eAAY,eAAe;MAC3BC,OAAO,EAAEnB,MAAO;MAChBoB,QAAQ,EAAEtB;IAAS,CACtB,CACH;EACL,IAEAA,QAAQ,iBAAIhB,KAAA,CAAAyB,aAAA,CAACrB,aAAa;IAACgC,IAAI,EAAE;EAAsC,CAAE,CAAC,eAC3EpC,KAAA,CAAAyB,aAAA,CAACvB,WAAW;IAACqC,GAAG,EAAEzB,WAAY;IAACP,GAAG,EAAEA,GAAI;IAACC,OAAO,EAAEA;EAAQ,GACrD,CAAC;IAAEgC;EAAO,CAAC,KAAKA,MAAM,CAAC,CACf,CACT,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ImageEditor/index.d.ts

@@ -0,0 +1 @@
+export * from "./ImageEditor";

package/components/ImageEditor/index.js

@@ -0,0 +1,3 @@
+export * from "./ImageEditor";
+
+//# sourceMappingURL=index.js.map

package/components/ImageEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/ImageEditor/toolbar/crop.d.ts

@@ -0,0 +1,4 @@
+import type { ImageEditorTool } from "./types";
+import "cropperjs/dist/cropper.css";
+declare const tool: ImageEditorTool;
+export default tool;