@webiny/app-admin 0.0.0-mt-1

package/components/FileManager/LeftSidebar.js

@@ -0,0 +1,95 @@
+import React from "react";
+import { useQuery } from "@apollo/react-hooks";
+import get from "lodash/get";
+import sortBy from "lodash/sortBy";
+import { css } from "emotion";
+import styled from "@emotion/styled";
+import { Icon } from "@webiny/ui/Icon";
+import { ReactComponent as TagIcon } from "@svgr/webpack!./icons/round-label-24px.svg";
+import { LIST_TAGS } from "./graphql";
+var style = {
+  leftDrawer: /*#__PURE__*/css({
+    float: "left",
+    display: "inline-block",
+    width: 250,
+    height: "100%",
+    backgroundColor: "var(--mdc-theme-surface)",
+    padding: 10
+  }, "label:leftDrawer;"),
+  noTagged: /*#__PURE__*/css({
+    paddingTop: 100,
+    textAlign: "center",
+    color: "var(--mdc-theme-on-surface)"
+  }, "label:noTagged;")
+};
+var TagList = /*#__PURE__*/styled("div", {
+  target: "e1tgxgqn0",
+  label: "TagList"
+})({
+  display: "flex",
+  flexDirection: "column"
+});
+var Tag = /*#__PURE__*/styled("div", {
+  target: "e1tgxgqn1",
+  label: "Tag"
+})({
+  display: "flex",
+  flexDirection: "row",
+  height: 40,
+  alignItems: "center",
+  cursor: "pointer",
+  paddingLeft: 15,
+  color: "var(--mdc-theme-on-surface)",
+  svg: {
+    color: "var(--mdc-theme-on-surface)",
+    marginRight: 10
+  },
+  "&:hover": {
+    backgroundColor: "var(--mdc-theme-background)"
+  },
+  "&.active": {
+    svg: {
+      color: "var(--mdc-theme-secondary)"
+    }
+  }
+});
+
+function LeftSidebar(_ref) {
+  var toggleTag = _ref.toggleTag,
+      tags = _ref.queryParams.tags;
+  var activeTags = Array.isArray(tags) ? tags : [];
+
+  var _useQuery = useQuery(LIST_TAGS),
+      data = _useQuery.data;
+
+  var list = get(data, "fileManager.listTags") || [];
+
+  if (list.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.leftDrawer,
+      "data-testid": "fm.left-drawer.empty-tag"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.noTagged
+    }, "Once you tag an image, the tag will be displayed here."));
+  } // Sort "tags" list in "ASC" order.
+
+
+  var tagList = sortBy(list);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.leftDrawer
+  }, /*#__PURE__*/React.createElement(TagList, {
+    "data-testid": "fm.left-drawer.tag-list"
+  }, tagList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      className: activeTags.includes(item) && "active",
+      key: item + index,
+      onClick: function onClick() {
+        return toggleTag(item);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(TagIcon, null)
+    }), " ", item);
+  })));
+}
+
+export default LeftSidebar;

package/components/FileManager/NoPermissionView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const NoPermissionView: () => JSX.Element;
+export default NoPermissionView;

package/components/FileManager/NoPermissionView.js

@@ -0,0 +1,70 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import React from "react";
+import { css } from "emotion";
+import { Icon } from "@webiny/ui/Icon";
+import { i18n } from "@webiny/app/i18n";
+import { ReactComponent as PermissionIcon } from "@svgr/webpack!./icons/privacy_tip-24px.svg";
+import { Typography } from "@webiny/ui/Typography";
+var t = i18n.ns("app-admin/file-manager/file-manager-view/no-permission");
+var styles = /*#__PURE__*/css({
+  margin: "0 auto",
+  paddingTop: 0,
+  height: "100%",
+  zIndex: 2,
+  width: "100%",
+  position: "absolute",
+  backgroundColor: "transparent",
+  "& .outer-container": {
+    textAlign: "center",
+    width: 300,
+    height: 300,
+    backgroundColor: "var(--mdc-theme-surface)",
+    borderRadius: "50%",
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translateX(-50%) translateY(-100%)",
+    "& .inner-container": {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      paddingTop: 35,
+      width: 300,
+      color: "var(--mdc-theme-on-surface)",
+      "svg.mdc-button__icon": {
+        width: 100,
+        display: "inline-block",
+        color: "var(--mdc-theme-on-surface)"
+      },
+      "& .title": {
+        marginTop: 8
+      },
+      "& .body": {
+        color: "var(--mdc-theme-text-secondary-on-background)"
+      }
+    }
+  }
+}, "label:styles;");
+
+var NoPermissionView = function NoPermissionView() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "outer-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "inner-container"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(PermissionIcon, null)
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "title",
+    use: "subtitle1"
+  }, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Permission needed"])))), /*#__PURE__*/React.createElement(Typography, {
+    className: "body",
+    use: "body2"
+  }, t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["You're missing required permission to access files. Please contact the administrator."])))))));
+};
+
+export default NoPermissionView;

package/components/FileManager/NoResults.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DropFilesHere(): JSX.Element;

package/components/FileManager/NoResults.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { css } from "emotion";
+var styles = /*#__PURE__*/css({
+  padding: "100px 0px",
+  textAlign: "center",
+  position: "absolute",
+  width: "100%"
+}, "label:styles;");
+export default function DropFilesHere() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles
+  }, /*#__PURE__*/React.createElement("div", null, "No results found."));
+}

package/components/FileManager/getFileTypePlugin.d.ts

@@ -0,0 +1 @@
+export default function getFileTypePlugin(file: any): any;

package/components/FileManager/getFileTypePlugin.js

@@ -0,0 +1,27 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import invariant from "invariant";
+import minimatch from "minimatch";
+import { plugins } from "@webiny/plugins";
+import { FileManagerFileTypePlugin } from "../../plugins/FileManagerFileTypePlugin";
+export default function getFileTypePlugin(file) {
+  if (!file) {
+    return null;
+  }
+
+  var fileTypePlugins = [].concat(_toConsumableArray(plugins.byType("admin-file-manager-file-type")), _toConsumableArray(plugins.byType(FileManagerFileTypePlugin.type)));
+  var plugin = null;
+
+  for (var i = 0; i < fileTypePlugins.length; i++) {
+    // We don't want to include the global wildcard in this check.
+    var types = fileTypePlugins[i].types;
+
+    if (types.find(function (t) {
+      return minimatch(file.type, t);
+    })) {
+      plugin = fileTypePlugins[i];
+    }
+  }
+
+  invariant(plugin, "Missing plugin to handle \"".concat(file.type, "\"!"));
+  return plugin;
+}

package/components/FileManager/getFileUploader.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => (file: File, options: import("@webiny/app/types").UploadOptions) => Promise<any>;
+export default _default;

package/components/FileManager/getFileUploader.js

@@ -0,0 +1,10 @@
+import { plugins } from "@webiny/plugins";
+export default (function () {
+  var fileStoragePlugin = plugins.byName("app-file-manager-storage");
+
+  if (!fileStoragePlugin) {
+    throw Error('Missing plugin: "app-file-manager-storage".');
+  }
+
+  return fileStoragePlugin.upload;
+});

package/components/FileManager/graphql.d.ts

@@ -0,0 +1,6 @@
+export declare const LIST_FILES: import("graphql").DocumentNode;
+export declare const LIST_TAGS: import("graphql").DocumentNode;
+export declare const CREATE_FILE: import("graphql").DocumentNode;
+export declare const UPDATE_FILE: import("graphql").DocumentNode;
+export declare const DELETE_FILE: import("graphql").DocumentNode;
+export declare const GET_FILE_SETTINGS: import("graphql").DocumentNode;

package/components/FileManager/graphql.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+import gql from "graphql-tag";
+var FILE_FIELDS =
+/* GraphQL */
+"\n    {\n        __typename\n        id\n        name\n        key\n        src\n        size\n        type\n        tags\n        createdOn\n        createdBy {\n            id\n        }\n    }\n";
+var ERROR_FIELDS =
+/* GraphQL */
+"\n    {\n        code\n        message\n        data\n    }\n";
+export var LIST_FILES = gql(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n     query ListFiles($types: [String], $tags: [String], $limit: Int, $search: String, $after: String) {\n        fileManager {\n            listFiles(types: $types, limit: $limit, search: $search, tags: $tags, after: $after) {\n                data ", "\n                meta {\n                    cursor\n                    totalCount\n                }\n            }\n        }\n    }\n"])), FILE_FIELDS);
+export var LIST_TAGS = gql(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    query ListTags {\n        fileManager {\n            listTags\n        }\n    }\n"])));
+export var CREATE_FILE = gql(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    mutation CreateFile($data: FileInput!) {\n        fileManager {\n            createFile(data: $data) {\n                error ", "\n                data ", "\n            }\n        }\n    }\n"])), ERROR_FIELDS, FILE_FIELDS);
+export var UPDATE_FILE = gql(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    mutation UpdateFile($id: ID!, $data: FileInput!) {\n        fileManager {\n            updateFile(id: $id, data: $data) {\n                data {\n                    id\n                    src\n                    name\n                    tags\n                }\n                error ", "\n            }\n        }\n    }\n"])), ERROR_FIELDS);
+export var DELETE_FILE = gql(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    mutation deleteFile($id: ID!) {\n        fileManager {\n            deleteFile(id: $id) {\n                data\n                error ", "\n            }\n        }\n    }\n"])), ERROR_FIELDS);
+export var GET_FILE_SETTINGS = gql(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    query getSettings {\n        fileManager {\n            getSettings {\n                data {\n                    uploadMinFileSize\n                    uploadMaxFileSize\n                }\n                error ", "\n            }\n        }\n    }\n"])), ERROR_FIELDS);

package/components/FileManager/icons/content_copy-black-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><g><rect fill="none" height="24" width="24"/></g><g><path d="M15,20H5V7c0-0.55-0.45-1-1-1h0C3.45,6,3,6.45,3,7v13c0,1.1,0.9,2,2,2h10c0.55,0,1-0.45,1-1v0C16,20.45,15.55,20,15,20z M20,16V4c0-1.1-0.9-2-2-2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9C19.1,18,20,17.1,20,16z M18,16H9V4h9V16z"/></g></svg>

package/components/FileManager/icons/delete.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_5">
+	</g>
+	<path fill="currentColor" d="M6,19c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9c0-1.1-0.9-2-2-2H8C6.9,7,6,7.9,6,9V19z M18,4h-2.5l-0.71-0.71
+		C14.61,3.11,14.35,3,14.09,3H9.91C9.65,3,9.39,3.11,9.21,3.29L8.5,4H6C5.45,4,5,4.45,5,5v0c0,0.55,0.45,1,1,1h12c0.55,0,1-0.45,1-1
+		v0C19,4.45,18.55,4,18,4z"/>
+</g>
+</svg>

package/components/FileManager/icons/privacy_tip-24px.svg

@@ -0,0 +1,10 @@
+<svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+>
+    <g>
+        <rect fill="none" height="24" width="24" y="0"/>
+        <path d="M4.19,4.47C3.47,4.79,3,5.51,3,6.3V11c0,5.55,3.84,10.74,9,12c5.16-1.26,9-6.45,9-12V6.3c0-0.79-0.47-1.51-1.19-1.83 l-7-3.11c-0.52-0.23-1.11-0.23-1.62,0L4.19,4.47z M12,7L12,7c0.55,0,1,0.45,1,1v0c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v0 C11,7.45,11.45,7,12,7z M12,11L12,11c0.55,0,1,0.45,1,1v4c0,0.55-0.45,1-1,1h0c-0.55,0-1-0.45-1-1v-4C11,11.45,11.45,11,12,11z"/>
+    </g>
+</svg>

package/components/FileManager/icons/round-check_box-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.29 13.29c-.39.39-1.02.39-1.41 0L5.71 12.7c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-7.58 7.59z"/>
+</svg>

package/components/FileManager/icons/round-check_box_outline_blank-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+</svg>

package/components/FileManager/icons/round-cloud_download-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-4.65 4.65c-.2.2-.51.2-.71 0L7 13h3V9h4v4h3z"/>
+</svg>

package/components/FileManager/icons/round-cloud_upload-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l4.65-4.65c.2-.2.51-.2.71 0L17 13h-3z"/>
+</svg>

package/components/FileManager/icons/round-description-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M14.59 2.59c-.38-.38-.89-.59-1.42-.59H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8.83c0-.53-.21-1.04-.59-1.41l-4.82-4.83zM15 18H9c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm0-4H9c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm-2-6V3.5L18.5 9H14c-.55 0-1-.45-1-1z"/>
+</svg>

package/components/FileManager/icons/round-edit-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/components/FileManager/icons/round-info-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"/>
+</svg>

package/components/FileManager/icons/round-label-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84l3.96-5.58c.25-.35.25-.81 0-1.16l-3.96-5.58z"/>
+</svg>

package/components/FileManager/icons/round-more_vert-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path fill="currentColor" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+</svg>

package/components/FileManager/icons/round-search-24px.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Header_x2F_BG" display="none">
+	<rect x="-358" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"/>
+</g>
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
+	</g>
+	<path fill="none" d="M0,0h24v24H0V0z"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_5" display="none">
+	</g>
+	<path fill="currentColor" d="M15.5,14h-0.79l-0.28-0.27c1.2-1.4,1.82-3.31,1.48-5.34c-0.47-2.78-2.79-5-5.59-5.34c-4.23-0.52-7.79,3.04-7.27,7.27
+		c0.34,2.8,2.56,5.12,5.34,5.59c2.03,0.34,3.94-0.28,5.34-1.48L14,14.71v0.79l4.25,4.25c0.41,0.41,1.08,0.41,1.49,0l0,0
+		c0.41-0.41,0.41-1.08,0-1.49L15.5,14z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14z"/>
+</g>
+</svg>

package/components/FileManager/outputFileSelectionError.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (errors: any) => string;
+export default _default;

package/components/FileManager/outputFileSelectionError.js

@@ -0,0 +1,39 @@
+import bytes from "bytes";
+export default (function (errors) {
+  if (errors.length > 1) {
+    var error = errors.find(function (error) {
+      return error.type === "multipleMaxCountExceeded";
+    });
+
+    if (error) {
+      return "Cannot upload more than ".concat(error.multipleMaxCount, " files at once.");
+    }
+
+    error = errors.find(function (error) {
+      return error.type === "multipleMaxSizeExceeded";
+    });
+
+    if (error) {
+      return "Cannot upload more than ".concat(bytes.format(error.multipleMaxSize), " at once.");
+    }
+
+    return "Multiple invalid files selected.";
+  }
+
+  switch (errors[0].type) {
+    case "unsupportedFileType":
+      return "Unsupported file type.";
+
+    case "maxSizeExceeded":
+      return "Max size exceeded.";
+
+    case "multipleMaxCountExceeded":
+      return "Multiple max files exceeded.";
+
+    case "multipleMaxSizeExceeded":
+      return "Multiple max size exceeded.";
+
+    case "multipleNotAllowed":
+      return "Only one file allowed.";
+  }
+});

package/components/FileManager.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+declare type FileManagerProps = {
+    onChange?: Function;
+    onChangePick?: string[];
+    images?: boolean;
+    multiple?: boolean;
+    accept?: Array<string>;
+    children: ({ showFileManager: Function }: {
+        showFileManager: any;
+    }) => React.ReactNode;
+    maxSize?: number | string;
+    multipleMaxCount?: number;
+    multipleMaxSize?: number | string;
+    onClose?: Function;
+    onUploadCompletion?: Function;
+};
+export declare function FileManager({ children, ...rest }: FileManagerProps): JSX.Element;
+export {};

package/components/FileManager.js

@@ -0,0 +1,133 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children"];
+import * as React from "react";
+import ReactDOM from "react-dom";
+import FileManagerView from "./FileManager/FileManagerView";
+import pick from "lodash/pick";
+import { FileManagerProvider } from "./FileManager/FileManagerContext";
+var useState = React.useState,
+    useRef = React.useRef,
+    useCallback = React.useCallback,
+    useEffect = React.useEffect;
+
+var FileManagerPortal = /*#__PURE__*/function (_React$Component) {
+  _inherits(FileManagerPortal, _React$Component);
+
+  var _super = _createSuper(FileManagerPortal);
+
+  function FileManagerPortal(props) {
+    var _this;
+
+    _classCallCheck(this, FileManagerPortal);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "container", void 0);
+
+    if (!window) {
+      return _possibleConstructorReturn(_this);
+    }
+
+    _this.container = window.document.getElementById("file-manager-container");
+
+    if (!_this.container) {
+      _this.container = document.createElement("div");
+
+      _this.container.setAttribute("id", "file-manager-container");
+
+      var container = _this.container;
+      document.body && document.body.appendChild(container);
+    }
+
+    return _this;
+  }
+
+  _createClass(FileManagerPortal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onChange = _this$props.onChange,
+          onClose = _this$props.onClose,
+          accept = _this$props.accept,
+          onChangePick = _this$props.onChangePick,
+          multiple = _this$props.multiple,
+          images = _this$props.images,
+          maxSize = _this$props.maxSize,
+          multipleMaxCount = _this$props.multipleMaxCount,
+          multipleMaxSize = _this$props.multipleMaxSize,
+          onUploadCompletion = _this$props.onUploadCompletion;
+      var container = this.container;
+
+      var handleFileOnChange = function handleFileOnChange(files) {
+        var fields = Array.isArray(onChangePick) ? onChangePick : ["id", "name", "key", "src", "size", "type"];
+
+        if (Array.isArray(files)) {
+          onChange(files.map(function (file) {
+            return pick(file, fields);
+          }));
+        } else {
+          onChange(pick(files, fields));
+        }
+      };
+
+      var props = {
+        onChange: typeof onChange === "function" ? handleFileOnChange : undefined,
+        onClose: onClose,
+        accept: accept,
+        multiple: multiple,
+        maxSize: maxSize,
+        multipleMaxCount: multipleMaxCount,
+        multipleMaxSize: multipleMaxSize,
+        onUploadCompletion: onUploadCompletion
+      };
+
+      if (images) {
+        props.accept = ["image/jpg", "image/jpeg", "image/tiff", "image/gif", "image/png", "image/webp", "image/bmp", "image/svg+xml"];
+      } // Let's pass "permanent" / "persistent" / "temporary" flags as "mode" prop instead.
+
+
+      return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(FileManagerProvider, props, /*#__PURE__*/React.createElement(FileManagerView, props)), container);
+    }
+  }]);
+
+  return FileManagerPortal;
+}(React.Component);
+
+export function FileManager(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var onChangeRef = useRef(rest.onChange);
+  useEffect(function () {
+    onChangeRef.current = rest.onChange;
+  }, [rest.onChange]);
+  var showFileManager = useCallback(function (onChange) {
+    if (typeof onChange === "function") {
+      onChangeRef.current = onChange;
+    }
+
+    setShow(true);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, show && /*#__PURE__*/React.createElement(FileManagerPortal, Object.assign({
+    onClose: function onClose() {
+      return setShow(false);
+    }
+  }, rest, {
+    onChange: onChangeRef.current
+  })), children({
+    showFileManager: showFileManager
+  }));
+}

package/components/FloatingActionButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const FloatingActionButton: (props: any) => JSX.Element;
+export { FloatingActionButton };

package/components/FloatingActionButton.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ButtonFloating } from "@webiny/ui/Button";
+import { ReactComponent as AddIcon } from "@svgr/webpack!../assets/icons/round-add-24px.svg"; // Set "styles" inline, since no customizations are possible / needed here.
+
+var FloatingActionButton = function FloatingActionButton(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 20,
+      right: 20
+    }
+  }, /*#__PURE__*/React.createElement(ButtonFloating, Object.assign({}, props, {
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  })));
+};
+
+export { FloatingActionButton };

package/components/MultiImageUpload.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare type Props = any;
+export default function MultiImageUpload({ imagePreviewProps, ...multiImageUploadProps }: Props): JSX.Element;
+export {};

package/components/MultiImageUpload.js

@@ -0,0 +1,20 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["imagePreviewProps"];
+import * as React from "react";
+import { Image } from "@webiny/app/components/Image";
+import { MultiImageUpload as UiMultiImageUpload } from "@webiny/ui/ImageUpload"; // TODO: @adrian define props type
+
+export default function MultiImageUpload(_ref) {
+  var imagePreviewProps = _ref.imagePreviewProps,
+      multiImageUploadProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(UiMultiImageUpload, Object.assign({
+    renderImagePreview: function renderImagePreview(renderImageProps) {
+      return /*#__PURE__*/React.createElement(Image, Object.assign({
+        transform: {
+          width: 300
+        }
+      }, imagePreviewProps, renderImageProps));
+    }
+  }, multiImageUploadProps));
+}

package/components/OverlayLayout/OverlayLayout.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+declare type OverlayLayoutProps = {
+    barMiddle?: React.ReactNode;
+    barLeft?: React.ReactNode;
+    barRight?: React.ReactNode;
+    children: React.ReactNode;
+    onExited?: Function;
+    style?: React.CSSProperties;
+};
+declare type State = {
+    isVisible: boolean;
+};
+export declare class OverlayLayout extends React.Component<OverlayLayoutProps, State> {
+    constructor(props: any);
+    static defaultProps: {
+        onExited: any;
+    };
+    state: {
+        isVisible: boolean;
+    };
+    hideComponent(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export {};