@webiny/app-aco 5.35.2 → 5.36.0-beta.0

package/components/FolderTree/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FolderTree = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useFolders2 = require("../../hooks/useFolders");
+var _ButtonCreate = require("./ButtonCreate");
+var _Empty = require("./Empty");
+var _Loader = require("./Loader");
+var _List = require("./List");
+var _Title = require("./Title");
+var _ = require("./..");
+var _styled = require("./styled");
+var FolderTree = function FolderTree(_ref) {
+  var type = _ref.type,
+    title = _ref.title,
+    focusedFolderId = _ref.focusedFolderId,
+    hiddenFolderIds = _ref.hiddenFolderIds,
+    enableActions = _ref.enableActions,
+    enableCreate = _ref.enableCreate,
+    onFolderClick = _ref.onFolderClick,
+    onTitleClick = _ref.onTitleClick;
+  var _useFolders = (0, _useFolders2.useFolders)(type),
+    folders = _useFolders.folders;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    createDialogOpen = _useState2[0],
+    setCreateDialogOpen = _useState2[1];
+
+  // Little CSS trick here: since the folder title has absolute position, user can drag a folder over it and move it to root folder.
+  // While we are moving folders around we disable any title pointer event.
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var renderList = function renderList() {
+    if (!folders) {
+      return /*#__PURE__*/_react.default.createElement(_Loader.Loader, null);
+    }
+    if (folders.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_List.List, {
+        type: type,
+        folders: folders,
+        onFolderClick: onFolderClick,
+        focusedFolderId: focusedFolderId,
+        hiddenFolderIds: hiddenFolderIds,
+        enableActions: enableActions,
+        onDragStart: function onDragStart() {
+          return setIsDragging(true);
+        },
+        onDragEnd: function onDragEnd() {
+          return setIsDragging(false);
+        }
+      }), enableCreate && /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
+        onClick: function onClick() {
+          return setCreateDialogOpen(true);
+        }
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Empty.Empty, null), /*#__PURE__*/_react.default.createElement(_ButtonCreate.CreateButton, {
+      onClick: function onClick() {
+        return setCreateDialogOpen(true);
+      }
+    }));
+  };
+  return /*#__PURE__*/_react.default.createElement(_styled.Container, null, /*#__PURE__*/_react.default.createElement(_Title.Title, {
+    title: title,
+    onClick: onTitleClick,
+    isDragging: isDragging
+  }), renderList(), enableCreate && /*#__PURE__*/_react.default.createElement(_.FolderDialogCreate, {
+    type: type,
+    open: createDialogOpen,
+    onClose: function onClose() {
+      return setCreateDialogOpen(false);
+    },
+    currentParentId: undefined
+  }));
+};
+exports.FolderTree = FolderTree;

package/components/FolderTree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FolderTree","type","title","focusedFolderId","hiddenFolderIds","enableActions","enableCreate","onFolderClick","onTitleClick","useFolders","folders","useState","createDialogOpen","setCreateDialogOpen","isDragging","setIsDragging","renderList","length","undefined"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { NodeModel } from \"@minoru/react-dnd-treeview\";\n\nimport { useFolders } from \"~/hooks/useFolders\";\n\nimport { CreateButton } from \"./ButtonCreate\";\nimport { Empty } from \"./Empty\";\nimport { Loader } from \"./Loader\";\nimport { List } from \"./List\";\nimport { Title } from \"./Title\";\nimport { FolderDialogCreate } from \"~/components\";\n\nimport { Container } from \"./styled\";\n\nimport { DndItemData } from \"~/types\";\n\ntype FolderTreeProps = {\n    type: string;\n    title: string;\n    onFolderClick: (data: NodeModel<DndItemData>[\"data\"]) => void;\n    enableCreate?: boolean;\n    enableActions?: boolean;\n    onTitleClick?: (event: React.MouseEvent<HTMLElement>) => void;\n    focusedFolderId?: string;\n    hiddenFolderIds?: string[];\n};\n\nexport const FolderTree: React.VFC<FolderTreeProps> = ({\n    type,\n    title,\n    focusedFolderId,\n    hiddenFolderIds,\n    enableActions,\n    enableCreate,\n    onFolderClick,\n    onTitleClick\n}) => {\n    const { folders } = useFolders(type);\n    const [createDialogOpen, setCreateDialogOpen] = useState<boolean>(false);\n\n    // Little CSS trick here: since the folder title has absolute position, user can drag a folder over it and move it to root folder.\n    // While we are moving folders around we disable any title pointer event.\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n\n    const renderList = () => {\n        if (!folders) {\n            return <Loader />;\n        }\n\n        if (folders.length > 0) {\n            return (\n                <>\n                    <List\n                        type={type}\n                        folders={folders}\n                        onFolderClick={onFolderClick}\n                        focusedFolderId={focusedFolderId}\n                        hiddenFolderIds={hiddenFolderIds}\n                        enableActions={enableActions}\n                        onDragStart={() => setIsDragging(true)}\n                        onDragEnd={() => setIsDragging(false)}\n                    />\n                    {enableCreate && <CreateButton onClick={() => setCreateDialogOpen(true)} />}\n                </>\n            );\n        }\n\n        return (\n            <>\n                <Empty />\n                <CreateButton onClick={() => setCreateDialogOpen(true)} />\n            </>\n        );\n    };\n\n    return (\n        <Container>\n            <Title title={title} onClick={onTitleClick} isDragging={isDragging} />\n            {renderList()}\n            {enableCreate && (\n                <FolderDialogCreate\n                    type={type}\n                    open={createDialogOpen}\n                    onClose={() => setCreateDialogOpen(false)}\n                    currentParentId={undefined}\n                />\n            )}\n        </Container>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAIA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAeO,IAAMA,UAAsC,GAAG,SAAzCA,UAAsC,OAS7C;EAAA,IARFC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IACfC,aAAa,QAAbA,aAAa;IACbC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;IACbC,YAAY,QAAZA,YAAY;EAEZ,kBAAoB,IAAAC,uBAAU,EAACR,IAAI,CAAC;IAA5BS,OAAO,eAAPA,OAAO;EACf,gBAAgD,IAAAC,eAAQ,EAAU,KAAK,CAAC;IAAA;IAAjEC,gBAAgB;IAAEC,mBAAmB;;EAE5C;EACA;EACA,iBAAoC,IAAAF,eAAQ,EAAU,KAAK,CAAC;IAAA;IAArDG,UAAU;IAAEC,aAAa;EAEhC,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACrB,IAAI,CAACN,OAAO,EAAE;MACV,oBAAO,6BAAC,cAAM,OAAG;IACrB;IAEA,IAAIA,OAAO,CAACO,MAAM,GAAG,CAAC,EAAE;MACpB,oBACI,yEACI,6BAAC,UAAI;QACD,IAAI,EAAEhB,IAAK;QACX,OAAO,EAAES,OAAQ;QACjB,aAAa,EAAEH,aAAc;QAC7B,eAAe,EAAEJ,eAAgB;QACjC,eAAe,EAAEC,eAAgB;QACjC,aAAa,EAAEC,aAAc;QAC7B,WAAW,EAAE;UAAA,OAAMU,aAAa,CAAC,IAAI,CAAC;QAAA,CAAC;QACvC,SAAS,EAAE;UAAA,OAAMA,aAAa,CAAC,KAAK,CAAC;QAAA;MAAC,EACxC,EACDT,YAAY,iBAAI,6BAAC,0BAAY;QAAC,OAAO,EAAE;UAAA,OAAMO,mBAAmB,CAAC,IAAI,CAAC;QAAA;MAAC,EAAG,CAC5E;IAEX;IAEA,oBACI,yEACI,6BAAC,YAAK,OAAG,eACT,6BAAC,0BAAY;MAAC,OAAO,EAAE;QAAA,OAAMA,mBAAmB,CAAC,IAAI,CAAC;MAAA;IAAC,EAAG,CAC3D;EAEX,CAAC;EAED,oBACI,6BAAC,iBAAS,qBACN,6BAAC,YAAK;IAAC,KAAK,EAAEX,KAAM;IAAC,OAAO,EAAEM,YAAa;IAAC,UAAU,EAAEM;EAAW,EAAG,EACrEE,UAAU,EAAE,EACZV,YAAY,iBACT,6BAAC,oBAAkB;IACf,IAAI,EAAEL,IAAK;IACX,IAAI,EAAEW,gBAAiB;IACvB,OAAO,EAAE;MAAA,OAAMC,mBAAmB,CAAC,KAAK,CAAC;IAAA,CAAC;IAC1C,eAAe,EAAEK;EAAU,EAElC,CACO;AAEpB,CAAC;AAAC"}

package/components/FolderTree/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/FolderTree/styled.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var Container = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Container",
+  target: "e3yen9i0"
+})("position:relative;margin:0;& .treeRoot{box-sizing:border-box;padding:36px 0 0;min-width:200px;}& .dropTarget{background:var(--mdc-theme-on-background);}& .draggingSource{opacity:0.5;}& .placeholderContainer{position:relative;}");
+exports.Container = Container;

package/components/FolderTree/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Container","styled"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const Container = styled(\"div\")`\n    position: relative;\n    margin: 0;\n\n    & .treeRoot {\n        box-sizing: border-box;\n        padding: 36px 0 0;\n        min-width: 200px;\n    }\n\n    & .dropTarget {\n        background: var(--mdc-theme-on-background);\n    }\n\n    & .draggingSource {\n        opacity: 0.5;\n    }\n\n    & .placeholderContainer {\n        position: relative;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,SAAS,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,wOAqBpC;AAAC"}

package/components/TagList/Empty.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare type EmptyProps = {
+    disclaimer?: string;
+};
+export declare const Empty: React.VFC<EmptyProps>;
+export {};

package/components/TagList/Empty.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Empty = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("@webiny/app/i18n");
+var _Typography = require("@webiny/ui/Typography");
+var _styled = require("./styled");
+var _templateObject;
+var t = _i18n.i18n.ns("app-aco/tag-list/empty");
+var Empty = function Empty(_ref) {
+  var _ref$disclaimer = _ref.disclaimer,
+    disclaimer = _ref$disclaimer === void 0 ? t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["No tags found..."]))) : _ref$disclaimer;
+  return /*#__PURE__*/_react.default.createElement(_styled.EmptyContainer, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2"
+  }, disclaimer));
+};
+exports.Empty = Empty;

package/components/TagList/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","Empty","disclaimer"],"sources":["Empty.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nimport { EmptyContainer } from \"./styled\";\n\nconst t = i18n.ns(\"app-aco/tag-list/empty\");\n\ntype EmptyProps = {\n    disclaimer?: string;\n};\n\nexport const Empty: React.VFC<EmptyProps> = ({ disclaimer = t`No tags found...` }) => {\n    return (\n        <EmptyContainer>\n            <Typography use={\"body2\"}>{disclaimer}</Typography>\n        </EmptyContainer>\n    );\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AAEA;AAA0C;AAE1C,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,wBAAwB,CAAC;AAMpC,IAAMC,KAA4B,GAAG,SAA/BA,KAA4B,OAA6C;EAAA,2BAAvCC,UAAU;IAAVA,UAAU,gCAAGJ,CAAC;EACzD,oBACI,6BAAC,sBAAc,qBACX,6BAAC,sBAAU;IAAC,GAAG,EAAE;EAAQ,GAAEI,UAAU,CAAc,CACtC;AAEzB,CAAC;AAAC"}

package/components/TagList/Loader.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Loader: React.VFC;

package/components/TagList/Loader.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loader = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Skeleton = require("@webiny/ui/Skeleton");
+var _styled = require("./styled");
+var Loader = function Loader() {
+  return /*#__PURE__*/_react.default.createElement(_styled.LoaderContainer, null, /*#__PURE__*/_react.default.createElement(_Skeleton.Skeleton, {
+    count: 4,
+    inline: true,
+    height: "100%",
+    wrapper: _styled.SkeletonWrapper
+  }));
+};
+exports.Loader = Loader;

package/components/TagList/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Loader","SkeletonWrapper"],"sources":["Loader.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Skeleton } from \"@webiny/ui/Skeleton\";\n\nimport { LoaderContainer, SkeletonWrapper } from \"./styled\";\n\nexport const Loader: React.VFC = () => {\n    return (\n        <LoaderContainer>\n            <Skeleton count={4} inline={true} height={\"100%\"} wrapper={SkeletonWrapper} />\n        </LoaderContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAEA;AAEO,IAAMA,MAAiB,GAAG,SAApBA,MAAiB,GAAS;EACnC,oBACI,6BAAC,uBAAe,qBACZ,6BAAC,kBAAQ;IAAC,KAAK,EAAE,CAAE;IAAC,MAAM,EAAE,IAAK;IAAC,MAAM,EAAE,MAAO;IAAC,OAAO,EAAEC;EAAgB,EAAG,CAChE;AAE1B,CAAC;AAAC"}

package/components/TagList/Tag.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TagItem } from "../../types";
+declare type TagProps = {
+    tagItem: TagItem;
+    active: boolean;
+    onTagClick: (tagItem: TagItem) => void;
+};
+export declare const Tag: React.VFC<TagProps>;
+export {};

package/components/TagList/Tag.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _label = require("@material-design-icons/svg/outlined/label.svg");
+var _label2 = require("@material-design-icons/svg/round/label.svg");
+var _Typography = require("@webiny/ui/Typography");
+var _styled = require("./styled");
+var Tag = function Tag(_ref) {
+  var tagItem = _ref.tagItem,
+    active = _ref.active,
+    onTagClick = _ref.onTagClick;
+  return /*#__PURE__*/_react.default.createElement(_styled.TagContainer, {
+    onClick: function onClick() {
+      return onTagClick(tagItem);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_styled.Icon, {
+    active: active
+  }, active ? /*#__PURE__*/_react.default.createElement(_label2.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_label.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
+    use: "body2",
+    tag: "div"
+  }, tagItem.tag));
+};
+exports.Tag = Tag;

package/components/TagList/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tag","tagItem","active","onTagClick","tag"],"sources":["Tag.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as TagIconOutlined } from \"@material-design-icons/svg/outlined/label.svg\";\nimport { ReactComponent as TagIconRound } from \"@material-design-icons/svg/round/label.svg\";\nimport { Typography } from \"@webiny/ui/Typography\";\n\nimport { TagContainer, Icon } from \"./styled\";\nimport { TagItem } from \"~/types\";\n\ntype TagProps = {\n    tagItem: TagItem;\n    active: boolean;\n    onTagClick: (tagItem: TagItem) => void;\n};\n\nexport const Tag: React.VFC<TagProps> = ({ tagItem, active, onTagClick }) => {\n    return (\n        <TagContainer onClick={() => onTagClick(tagItem)}>\n            <Icon active={active}>{active ? <TagIconRound /> : <TagIconOutlined />}</Icon>\n            <Typography use={\"body2\"} tag={\"div\"}>\n                {tagItem.tag}\n            </Typography>\n        </TagContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AAEA;AASO,IAAMA,GAAwB,GAAG,SAA3BA,GAAwB,OAAwC;EAAA,IAAlCC,OAAO,QAAPA,OAAO;IAAEC,MAAM,QAANA,MAAM;IAAEC,UAAU,QAAVA,UAAU;EAClE,oBACI,6BAAC,oBAAY;IAAC,OAAO,EAAE;MAAA,OAAMA,UAAU,CAACF,OAAO,CAAC;IAAA;EAAC,gBAC7C,6BAAC,YAAI;IAAC,MAAM,EAAEC;EAAO,GAAEA,MAAM,gBAAG,6BAAC,sBAAY,OAAG,gBAAG,6BAAC,qBAAe,OAAG,CAAQ,eAC9E,6BAAC,sBAAU;IAAC,GAAG,EAAE,OAAQ;IAAC,GAAG,EAAE;EAAM,GAChCD,OAAO,CAACG,GAAG,CACH,CACF;AAEvB,CAAC;AAAC"}

package/components/TagList/TagList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ListTagsWhereQueryVariables, TagItem } from "../../types";
+declare type TagListProps = {
+    type: string;
+    initialWhere?: ListTagsWhereQueryVariables & {
+        AND?: ListTagsWhereQueryVariables;
+        OR?: ListTagsWhereQueryVariables;
+    };
+    tagsModifier?: (tags: TagItem[]) => TagItem[];
+    onTagClick: (tag: TagItem) => void;
+    emptyDisclaimer: string;
+};
+export declare const TagList: React.VFC<TagListProps>;
+export {};

package/components/TagList/TagList.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagList = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _Loader = require("./Loader");
+var _Empty = require("./Empty");
+var _Tag = require("./Tag");
+var TagList = function TagList(_ref) {
+  var type = _ref.type,
+    initialWhere = _ref.initialWhere,
+    _onTagClick = _ref.onTagClick,
+    emptyDisclaimer = _ref.emptyDisclaimer,
+    tagsModifier = _ref.tagsModifier;
+  var _useTags = (0, _hooks.useTags)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+      type: type
+    }, initialWhere), {}, {
+      tagsModifier: tagsModifier
+    })),
+    tags = _useTags.tags,
+    loading = _useTags.loading;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeTags = _useState2[0],
+    setActiveTags = _useState2[1];
+  var toggleTag = (0, _react.useCallback)(function (tag) {
+    var finalTags = Array.isArray(activeTags) ? (0, _toConsumableArray2.default)(activeTags) : [];
+    if (finalTags.find(function (item) {
+      return tag === item;
+    })) {
+      finalTags.splice(finalTags.indexOf(tag), 1);
+    } else {
+      finalTags.push(tag);
+    }
+    setActiveTags(finalTags);
+  }, [activeTags]);
+  if (!tags.length && (loading.INIT || loading.LIST)) {
+    return /*#__PURE__*/_react.default.createElement(_Loader.Loader, null);
+  }
+  if (tags.length > 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags.map(function (tagItem, index) {
+      return /*#__PURE__*/_react.default.createElement(_Tag.Tag, {
+        key: "tag-".concat(index),
+        tagItem: tagItem,
+        active: activeTags.includes(tagItem.tag),
+        onTagClick: function onTagClick(tagItem) {
+          toggleTag(tagItem.tag);
+          _onTagClick(tagItem);
+        }
+      });
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_Empty.Empty, {
+    disclaimer: emptyDisclaimer
+  });
+};
+exports.TagList = TagList;

package/components/TagList/TagList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TagList","type","initialWhere","onTagClick","emptyDisclaimer","tagsModifier","useTags","tags","loading","useState","activeTags","setActiveTags","toggleTag","useCallback","tag","finalTags","Array","isArray","find","item","splice","indexOf","push","length","INIT","LIST","map","tagItem","index","includes"],"sources":["TagList.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport { useTags } from \"~/hooks\";\n\nimport { Loader } from \"./Loader\";\nimport { Empty } from \"./Empty\";\nimport { Tag } from \"./Tag\";\n\nimport { ListTagsWhereQueryVariables, TagItem } from \"~/types\";\n\ntype TagListProps = {\n    type: string;\n    initialWhere?: ListTagsWhereQueryVariables & {\n        AND?: ListTagsWhereQueryVariables;\n        OR?: ListTagsWhereQueryVariables;\n    };\n    tagsModifier?: (tags: TagItem[]) => TagItem[];\n    onTagClick: (tag: TagItem) => void;\n    emptyDisclaimer: string;\n};\n\nexport const TagList: React.VFC<TagListProps> = ({\n    type,\n    initialWhere,\n    onTagClick,\n    emptyDisclaimer,\n    tagsModifier\n}) => {\n    const { tags, loading } = useTags({ type, ...initialWhere, tagsModifier });\n    const [activeTags, setActiveTags] = useState<TagItem[\"tag\"][]>([]);\n\n    const toggleTag = useCallback(\n        (tag: TagItem[\"tag\"]) => {\n            const finalTags = Array.isArray(activeTags) ? [...activeTags] : [];\n\n            if (finalTags.find(item => tag === item)) {\n                finalTags.splice(finalTags.indexOf(tag), 1);\n            } else {\n                finalTags.push(tag);\n            }\n\n            setActiveTags(finalTags);\n        },\n        [activeTags]\n    );\n\n    if (!tags.length && (loading.INIT || loading.LIST)) {\n        return <Loader />;\n    }\n\n    if (tags.length > 0) {\n        return (\n            <>\n                {tags.map((tagItem, index) => (\n                    <Tag\n                        key={`tag-${index}`}\n                        tagItem={tagItem}\n                        active={activeTags.includes(tagItem.tag)}\n                        onTagClick={tagItem => {\n                            toggleTag(tagItem.tag);\n                            onTagClick(tagItem);\n                        }}\n                    />\n                ))}\n            </>\n        );\n    }\n\n    return <Empty disclaimer={emptyDisclaimer} />;\n};\n"],"mappings":";;;;;;;;;;;AAAA;AAEA;AAEA;AACA;AACA;AAeO,IAAMA,OAAgC,GAAG,SAAnCA,OAAgC,OAMvC;EAAA,IALFC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,WAAU,QAAVA,UAAU;IACVC,eAAe,QAAfA,eAAe;IACfC,YAAY,QAAZA,YAAY;EAEZ,eAA0B,IAAAC,cAAO;MAAGL,IAAI,EAAJA;IAAI,GAAKC,YAAY;MAAEG,YAAY,EAAZA;IAAY,GAAG;IAAlEE,IAAI,YAAJA,IAAI;IAAEC,OAAO,YAAPA,OAAO;EACrB,gBAAoC,IAAAC,eAAQ,EAAmB,EAAE,CAAC;IAAA;IAA3DC,UAAU;IAAEC,aAAa;EAEhC,IAAMC,SAAS,GAAG,IAAAC,kBAAW,EACzB,UAACC,GAAmB,EAAK;IACrB,IAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACP,UAAU,CAAC,oCAAOA,UAAU,IAAI,EAAE;IAElE,IAAIK,SAAS,CAACG,IAAI,CAAC,UAAAC,IAAI;MAAA,OAAIL,GAAG,KAAKK,IAAI;IAAA,EAAC,EAAE;MACtCJ,SAAS,CAACK,MAAM,CAACL,SAAS,CAACM,OAAO,CAACP,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/C,CAAC,MAAM;MACHC,SAAS,CAACO,IAAI,CAACR,GAAG,CAAC;IACvB;IAEAH,aAAa,CAACI,SAAS,CAAC;EAC5B,CAAC,EACD,CAACL,UAAU,CAAC,CACf;EAED,IAAI,CAACH,IAAI,CAACgB,MAAM,KAAKf,OAAO,CAACgB,IAAI,IAAIhB,OAAO,CAACiB,IAAI,CAAC,EAAE;IAChD,oBAAO,6BAAC,cAAM,OAAG;EACrB;EAEA,IAAIlB,IAAI,CAACgB,MAAM,GAAG,CAAC,EAAE;IACjB,oBACI,4DACKhB,IAAI,CAACmB,GAAG,CAAC,UAACC,OAAO,EAAEC,KAAK;MAAA,oBACrB,6BAAC,QAAG;QACA,GAAG,gBAASA,KAAK,CAAG;QACpB,OAAO,EAAED,OAAQ;QACjB,MAAM,EAAEjB,UAAU,CAACmB,QAAQ,CAACF,OAAO,CAACb,GAAG,CAAE;QACzC,UAAU,EAAE,oBAAAa,OAAO,EAAI;UACnBf,SAAS,CAACe,OAAO,CAACb,GAAG,CAAC;UACtBX,WAAU,CAACwB,OAAO,CAAC;QACvB;MAAE,EACJ;IAAA,CACL,CAAC,CACH;EAEX;EAEA,oBAAO,6BAAC,YAAK;IAAC,UAAU,EAAEvB;EAAgB,EAAG;AACjD,CAAC;AAAC"}

package/components/TagList/index.d.ts

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

package/components/TagList/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TagList = require("./TagList");
+Object.keys(_TagList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TagList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TagList[key];
+    }
+  });
+});

package/components/TagList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./TagList\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/components/TagList/styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
+export declare const TagContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare type IconProps = {
+    active: boolean;
+};
+export declare const Icon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const EmptyContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LoaderContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkeletonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/components/TagList/styled.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TagContainer = exports.SkeletonWrapper = exports.LoaderContainer = exports.Icon = exports.EmptyContainer = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var TagContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "TagContainer",
+  target: "e1dl4pto0"
+})("display:flex;flex-direction:row;align-items:center;cursor:pointer;padding:4px 8px;color:var(--mdc-theme-on-surface);&:hover{background:var(--mdc-theme-background);}");
+exports.TagContainer = TagContainer;
+var Icon = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "Icon",
+  target: "e1dl4pto1"
+})("display:flex;align-items:center;justify-content:center;height:20px;width:20px;cursor:pointer;padding-right:4px;fill:", function (props) {
+  return props.active ? "var(--mdc-theme-secondary)" : "var(--mdc-theme-text-secondary-on-background)";
+}, ";");
+exports.Icon = Icon;
+var EmptyContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "EmptyContainer",
+  target: "e1dl4pto2"
+})("padding:8px 12px 8px;color:var(--webiny-theme-color-text-secondary);fill:currentColor;");
+exports.EmptyContainer = EmptyContainer;
+var LoaderContainer = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "LoaderContainer",
+  target: "e1dl4pto3"
+})("padding:8px 4px;");
+exports.LoaderContainer = LoaderContainer;
+var SkeletonWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "SkeletonWrapper",
+  target: "e1dl4pto4"
+})("width:85%;margin:0 8px 8px;height:24px;&:last-of-type{margin-bottom:0;}");
+exports.SkeletonWrapper = SkeletonWrapper;

package/components/TagList/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TagContainer","styled","Icon","props","active","EmptyContainer","LoaderContainer","SkeletonWrapper"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const TagContainer = styled(\"div\")`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    cursor: pointer;\n    padding: 4px 8px;\n    color: var(--mdc-theme-on-surface);\n\n    &:hover {\n        background: var(--mdc-theme-background);\n    }\n`;\n\ntype IconProps = {\n    active: boolean;\n};\n\nexport const Icon = styled(\"div\")<IconProps>`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 20px;\n    width: 20px;\n    cursor: pointer;\n    padding-right: 4px;\n    fill: ${props =>\n        props.active\n            ? \"var(--mdc-theme-secondary)\"\n            : \"var(--mdc-theme-text-secondary-on-background)\"};\n`;\n\nexport const EmptyContainer = styled(\"div\")`\n    padding: 8px 12px 8px;\n    color: var(--webiny-theme-color-text-secondary);\n    fill: currentColor;\n`;\n\nexport const LoaderContainer = styled(\"div\")`\n    padding: 8px 4px;\n`;\n\nexport const SkeletonWrapper = styled(\"div\")`\n    width: 85%;\n    margin: 0 8px 8px;\n    height: 24px;\n\n    &:last-of-type {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":";;;;;;;AAAA;AAEO,IAAMA,YAAY,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,0KAWvC;AAAC;AAMK,IAAMC,IAAI,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,2HAQpB,UAAAE,KAAK;EAAA,OACTA,KAAK,CAACC,MAAM,GACN,4BAA4B,GAC5B,+CAA+C;AAAA,OAC5D;AAAC;AAEK,IAAMC,cAAc,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,4FAIzC;AAAC;AAEK,IAAMK,eAAe,oBAAGL,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,sBAE1C;AAAC;AAEK,IAAMM,eAAe,oBAAGN,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,6EAQ1C;AAAC"}

package/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Dialogs";
-export * from "./Tree";
+export * from "./FolderGrid";
+export * from "./FolderTree";
+export * from "./TagList";

package/components/index.js

@@ -14,14 +14,36 @@ Object.keys(_Dialogs).forEach(function (key) {
     }
   });
 });
-var _Tree = require("./Tree");
-Object.keys(_Tree).forEach(function (key) {
+var _FolderGrid = require("./FolderGrid");
+Object.keys(_FolderGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Tree[key]) return;
+  if (key in exports && exports[key] === _FolderGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Tree[key];
+      return _FolderGrid[key];
+    }
+  });
+});
+var _FolderTree = require("./FolderTree");
+Object.keys(_FolderTree).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FolderTree[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FolderTree[key];
+    }
+  });
+});
+var _TagList = require("./TagList");
+Object.keys(_TagList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TagList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _TagList[key];
     }
   });
 });

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Dialogs\";\nexport * from \"./Tree\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./Dialogs\";\nexport * from \"./FolderGrid\";\nexport * from \"./FolderTree\";\nexport * from \"./TagList\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/contexts/records.d.ts

@@ -1,7 +1,8 @@
 import React, { ReactNode } from "react";
-import { SearchRecordItem, ListMeta, Loading, LoadingActions, Meta, ListDbSort } from "../types";
+import { SearchRecordItem, ListMeta, Loading, LoadingActions, Meta, ListDbSort, TagItem, ListSearchRecordsWhereQueryVariables, ListTagsWhereQueryVariables } from "../types";
 interface SearchRecordsContext {
-    records: SearchRecordItem[];
+    records: Record<string, SearchRecordItem[]>;
+    tags: Record<string, TagItem[]>;
     loading: Loading<LoadingActions>;
     meta: Meta<ListMeta>;
     listRecords: (params: {
@@ -10,11 +11,23 @@ interface SearchRecordsContext {
         limit?: number;
         after?: string;
         sort?: ListDbSort;
+        search?: string;
+        createdBy?: string;
+        tags_in?: string[];
+        tags_startsWith?: string;
+        tags_not_startsWith?: string;
+        AND?: ListSearchRecordsWhereQueryVariables[];
+        OR?: ListSearchRecordsWhereQueryVariables[];
     }) => Promise<SearchRecordItem[]>;
     getRecord: (id: string) => Promise<SearchRecordItem>;
     createRecord: (record: Omit<SearchRecordItem, "id">) => Promise<SearchRecordItem>;
     updateRecord: (record: SearchRecordItem, contextFolderId?: string) => Promise<SearchRecordItem>;
     deleteRecord(record: SearchRecordItem): Promise<true>;
+    listTags: (params: ListTagsWhereQueryVariables & {
+        type: string;
+        AND?: [ListTagsWhereQueryVariables];
+        OR?: [ListTagsWhereQueryVariables];
+    }) => Promise<TagItem[]>;
 }
 export declare const SearchRecordsContext: React.Context<SearchRecordsContext | undefined>;
 interface Props {