cozy-bar 17.0.0 → 18.0.0

package/README.md

@@ -93,10 +93,12 @@ You also need to disable the internal store onto the `BarComponent` with the pro
 
 Search and AI assistant is now proposed by the cozy-bar. To enable it, you need to : 
 
-1. Add the data proxy in your app
+1. Setup the search
 
-- cozy-dataproxy-lib must be installed in your app
-- DataProxyProvider must be added before BarProvider in your app
+In the app using the cozy-bar :
+- cozy-dataproxy-lib must be installed
+- DataProxyProvider must be added before BarProvider
+- If you want to use the AI assistant, you need to add [the following permissions](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-search#prerequisite-for-ai-components)
 
 2. Enable the search
 
@@ -106,7 +108,7 @@ Search and AI assistant is now proposed by the cozy-bar. To enable it, you need
 
 3. Add the routes
 
-These routes allow to display the AI assistant.
+These routes allow to display the search and AI assistant dialogs.
 
 ```jsx
 import { BarRoutes } from 'cozy-bar'
@@ -115,7 +117,7 @@ import { BarRoutes } from 'cozy-bar'
   // Your routes
   // ...
 
-  {...BarRoutes}
+  {BarRoutes.map(BarRoute => BarRoute)}
 </Routes>
 ```
 

package/dist/components/Apps/ButtonCozyHome.js

@@ -17,12 +17,18 @@ var _cozyDeviceHelper = require("cozy-device-helper");
 
 var _cozyIntent = require("cozy-intent");
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _IconCozyHome = _interopRequireDefault(require("./IconCozyHome"));
 
 var ButtonCozyHome = function ButtonCozyHome(_ref) {
   var homeHref = _ref.homeHref,
       isInvertedTheme = _ref.isInvertedTheme;
   var webviewIntent = (0, _cozyIntent.useWebviewIntent)();
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
   if ((0, _cozyDeviceHelper.isFlagshipApp)() || (0, _cozyFlags.default)('flagship.debug')) return /*#__PURE__*/_react.default.createElement("a", {
     onClick: function onClick() {
       webviewIntent.call('backToHome');
@@ -31,6 +37,7 @@ var ButtonCozyHome = function ButtonCozyHome(_ref) {
     "data-testid": "buttonCozyHome"
   }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
     className: "coz-nav-apps-btns-home-svg",
+    isMobile: isMobile,
     isInvertedTheme: isInvertedTheme
   }));
 
@@ -40,6 +47,7 @@ var ButtonCozyHome = function ButtonCozyHome(_ref) {
       className: "coz-nav-apps-btns-home"
     }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
       className: "coz-nav-apps-btns-home-svg",
+      isMobile: isMobile,
       isInvertedTheme: isInvertedTheme
     }));
   }
@@ -48,6 +56,7 @@ var ButtonCozyHome = function ButtonCozyHome(_ref) {
     className: "coz-nav-apps-btns-home"
   }, /*#__PURE__*/_react.default.createElement(_IconCozyHome.default, {
     className: "coz-nav-apps-btns-home-svg",
+    isMobile: isMobile,
     isInvertedTheme: isInvertedTheme
   }));
 };

package/dist/components/Apps/ButtonCozyHome.spec.jsx

@@ -3,6 +3,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { ButtonCozyHome } from './ButtonCozyHome'
 import { isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
+import { BarLike } from 'test/lib/BarLike'
 
 jest.mock('cozy-device-helper')
 jest.mock('cozy-intent', () => ({
@@ -19,7 +20,11 @@ describe('ButtonCozyHome', () => {
     // We need to use a testid because
     // - the a tag has no text to query it (just an icon)
     // - an "a" tag without href is not seen as a link by queryByRole
-    const { getByTestId } = render(<ButtonCozyHome />)
+    const { getByTestId } = render(
+      <BarLike>
+        <ButtonCozyHome />
+      </BarLike>
+    )
     const linkElement = getByTestId('buttonCozyHome')
 
     fireEvent.click(linkElement)
@@ -30,7 +35,11 @@ describe('ButtonCozyHome', () => {
   it('renders a link with homeHref for non-flagship apps with homeHref', () => {
     isFlagshipApp.mockReturnValue(false)
 
-    const { queryByRole } = render(<ButtonCozyHome homeHref="/home" />)
+    const { queryByRole } = render(
+      <BarLike>
+        <ButtonCozyHome homeHref="/home" />
+      </BarLike>
+    )
     const linkElement = queryByRole('link')
 
     expect(linkElement).toHaveAttribute('href', '/home')
@@ -39,7 +48,11 @@ describe('ButtonCozyHome', () => {
   it('renders a span without href for non-flagship apps without homeHref', () => {
     isFlagshipApp.mockReturnValue(false)
 
-    const { queryByRole } = render(<ButtonCozyHome />)
+    const { queryByRole } = render(
+      <BarLike>
+        <ButtonCozyHome />
+      </BarLike>
+    )
     const linkElement = queryByRole('link')
 
     expect(linkElement).toBeNull()

package/dist/components/Apps/IconCozyHome.js

@@ -17,6 +17,12 @@ var _AppIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/AppIcon"
 
 var _stack = _interopRequireDefault(require("../../lib/stack"));
 
+var _isTwakeTheme = require("cozy-ui/transpiled/react/helpers/isTwakeTheme");
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _TwakeWorkplace = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/TwakeWorkplace"));
+
 /* Generated with node_modules/.bin/svgr src/assets/sprites/icon-cozy-home.svg  */
 function SvgIconCozyHome(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
@@ -39,8 +45,17 @@ function SvgIconCozyHome(props) {
 
 var IconCozyHome = function IconCozyHome(_ref) {
   var className = _ref.className,
+      isMobile = _ref.isMobile,
       isInvertedTheme = _ref.isInvertedTheme;
 
+  if ((0, _isTwakeTheme.isTwakeTheme)()) {
+    return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _TwakeWorkplace.default,
+      size: isMobile ? 28 : 32,
+      className: isMobile ? 'u-ml-half' : undefined
+    });
+  }
+
   var fetchIcon = function fetchIcon() {
     if (isInvertedTheme) {
       return "".concat(_stack.default.get.cozyURL(), "/assets/images/icon-cozy-home-inverted.svg");

package/dist/components/AppsMenu/AppsMenuContent.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppsMenuContent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("react-redux");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _AppItem = _interopRequireDefault(require("./components/AppItem"));
+
+var _AppItemPlaceholder = _interopRequireDefault(require("./components/AppItemPlaceholder"));
+
+var _useI18n2 = _interopRequireDefault(require("../useI18n"));
+
+var _reducers = require("../../lib/reducers");
+
+var styles = {
+  "apps-menu-grid": "apps-menu-grid",
+  "apps-menu-grid-item-wrapper": "apps-menu-grid-item-wrapper",
+  "apps-menu-grid-item": "apps-menu-grid-item"
+};
+
+var sorter = function sorter(fn) {
+  return function (itemA, itemB) {
+    return fn(itemA) > fn(itemB);
+  };
+};
+
+var AppsMenuContent = function AppsMenuContent(_ref) {
+  var isFetchingApps = _ref.isFetchingApps,
+      apps = _ref.apps,
+      homeApp = _ref.homeApp;
+
+  var _useI18n = (0, _useI18n2.default)(),
+      t = _useI18n.t;
+
+  var translateAppWithLocales = translateApp(t);
+
+  if (!isFetchingApps && (!apps || !apps.length)) {
+    return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      className: "u-mh-half",
+      color: "error"
+    }, t('no_apps'));
+  }
+
+  if (isFetchingApps) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: styles['apps-menu-grid']
+    }, /*#__PURE__*/_react.default.createElement(_AppItemPlaceholder.default, {
+      key: "1"
+    }), /*#__PURE__*/_react.default.createElement(_AppItemPlaceholder.default, {
+      key: "2"
+    }), /*#__PURE__*/_react.default.createElement(_AppItemPlaceholder.default, {
+      key: "3"
+    }));
+  }
+
+  var homeSlug = homeApp && homeApp.slug;
+  var displayedApps = apps.filter(function (app) {
+    return app.slug !== homeSlug;
+  }).sort(sorter(translateAppWithLocales));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: styles['apps-menu-grid']
+  }, displayedApps.map(function (app, index) {
+    return /*#__PURE__*/_react.default.createElement(_AppItem.default, {
+      key: index,
+      app: app
+    });
+  }));
+};
+
+exports.AppsMenuContent = AppsMenuContent;
+AppsMenuContent.propTypes = {
+  apps: _propTypes.default.array,
+  isFetchingApps: _propTypes.default.bool.isRequired,
+  homeApp: _propTypes.default.shape({
+    isCurrentApp: _propTypes.default.bool,
+    slug: _propTypes.default.string,
+    href: _propTypes.default.string
+  }),
+  className: _propTypes.default.string
+};
+
+var translateApp = function translateApp(t) {
+  return function (app) {
+    var namePrefix = app.namePrefix ? t("".concat(app.slug, ".namePrefix"), {
+      _: app.namePrefix
+    }) : null;
+    var name = t("".concat(app.slug, ".name"), {
+      _: app.name
+    });
+    return namePrefix ? "".concat(namePrefix, " ").concat(name) : "".concat(name);
+  };
+};
+
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    isFetchingApps: (0, _reducers.isFetchingApps)(state),
+    apps: (0, _reducers.getApps)(state),
+    homeApp: (0, _reducers.getHomeApp)(state)
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps)(AppsMenuContent);
+
+exports.default = _default;

package/dist/components/AppsMenu/components/AppItem.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _cozyClient = require("cozy-client");
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _AppIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/AppIcon"));
+
+var _AppLinker = _interopRequireDefault(require("cozy-ui/transpiled/react/AppLinker"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _proptypes = require("../../../proptypes");
+
+var _stack = _interopRequireDefault(require("../../../lib/stack"));
+
+var styles = {
+  "apps-menu-grid": "apps-menu-grid",
+  "apps-menu-grid-item-wrapper": "apps-menu-grid-item-wrapper",
+  "apps-menu-grid-item": "apps-menu-grid-item"
+};
+var getAppDisplayName = (0, _get.default)(_cozyClient.models, 'applications.getAppDisplayName', function (app) {
+  return app.namePrefix && app.namePrefix.toLowerCase() !== 'cozy' ? "".concat(app.namePrefix, " ").concat(app.name) : app.name;
+});
+
+var AppItem = function AppItem(_ref) {
+  var app = _ref.app;
+  var appName = getAppDisplayName(app);
+  return /*#__PURE__*/_react.default.createElement(_AppLinker.default, {
+    href: app.href || '',
+    app: app
+  }, function (_ref2) {
+    var onClick = _ref2.onClick,
+        href = _ref2.href;
+    return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      height: "auto",
+      component: "a",
+      variant: "text",
+      href: href,
+      title: appName,
+      onClick: onClick,
+      className: (0, _classnames.default)(styles['apps-menu-grid-item-wrapper'], 'u-bdrs-5'),
+      label: /*#__PURE__*/_react.default.createElement("div", {
+        className: styles['apps-menu-grid-item']
+      }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, (0, _extends2.default)({
+        app: app,
+        key: app.slug
+      }, _stack.default.get.iconProps())), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        variant: "caption",
+        noWrap: true,
+        className: "u-mt-half"
+      }, appName))
+    });
+  });
+};
+
+exports.AppItem = AppItem;
+AppItem.propTypes = {
+  app: _proptypes.appShape.isRequired
+};
+var _default = AppItem;
+exports.default = _default;

package/dist/components/AppsMenu/components/AppItemPlaceholder.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AppItemPlaceholder = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Skeleton = _interopRequireDefault(require("cozy-ui/transpiled/react/Skeleton"));
+
+var AppItemPlaceholder = function AppItemPlaceholder() {
+  return /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+    variant: "rect",
+    width: 48,
+    height: 48,
+    className: "u-m-1 u-bdrs-5"
+  });
+};
+
+exports.AppItemPlaceholder = AppItemPlaceholder;
+var _default = AppItemPlaceholder;
+exports.default = _default;

package/dist/components/AppsMenu/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AppsMenuContent = _interopRequireDefault(require("./AppsMenuContent"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _Menu = _interopRequireDefault(require("cozy-ui/transpiled/react/Menu"));
+
+var _Mosaic = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Mosaic"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
+
+var AppsMenu = function AppsMenu() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var buttonRef = (0, _react.useRef)();
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var toggleMenu = function toggleMenu() {
+    setOpen(!isOpen);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    ref: buttonRef,
+    onClick: toggleMenu,
+    className: "u-p-half"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Mosaic.default,
+    size: "18"
+  })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.Dialog, {
+    open: isOpen,
+    size: "small",
+    onClose: toggleMenu,
+    content: /*#__PURE__*/_react.default.createElement(_AppsMenuContent.default, null)
+  }) : /*#__PURE__*/_react.default.createElement(_Menu.default, {
+    open: isOpen,
+    anchorEl: buttonRef.current,
+    container: buttonRef.current,
+    getContentAnchorEl: null,
+    onClose: toggleMenu,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: -10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_AppsMenuContent.default, null)));
+};
+
+var _default = AppsMenu;
+exports.default = _default;

package/dist/components/Bar.js

@@ -23,10 +23,14 @@ var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
+var _AppTitle = _interopRequireDefault(require("cozy-ui/transpiled/react/AppTitle"));
+
 var _cozyDeviceHelper = require("cozy-device-helper");
 
 var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
 
+var _isTwakeTheme = require("cozy-ui/transpiled/react/helpers/isTwakeTheme");
+
 var _ButtonCozyHome = require("./Apps/ButtonCozyHome");
 
 var _Banner = _interopRequireDefault(require("./Banner"));
@@ -37,6 +41,12 @@ var _Settings = _interopRequireDefault(require("./Settings"));
 
 var _Apps = _interopRequireDefault(require("./Apps"));
 
+var _AppsMenu = _interopRequireDefault(require("./AppsMenu"));
+
+var _UserMenu = _interopRequireDefault(require("./UserMenu"));
+
+var _HelpLink = _interopRequireDefault(require("./HelpLink"));
+
 var _reducers = require("../lib/reducers");
 
 var _useI18n2 = _interopRequireDefault(require("./useI18n"));
@@ -45,6 +55,8 @@ var _cozyClient = require("cozy-client");
 
 var _cozySearch = require("cozy-search");
 
+var _SearchButton = _interopRequireDefault(require("./Search/SearchButton"));
+
 /* Generated with node_modules/.bin/svgr src/assets/sprites/icon-apps.svg */
 function SvgIconApps(props) {
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
@@ -74,7 +86,8 @@ var Bar = function Bar(_ref) {
       appNamePrefix = _ref.appNamePrefix,
       appSlug = _ref.appSlug,
       iconPath = _ref.iconPath,
-      hasFetchedApps = _ref.hasFetchedApps;
+      hasFetchedApps = _ref.hasFetchedApps,
+      homeApp = _ref.homeApp;
   var client = (0, _cozyClient.useClient)();
 
   var _useI18n = (0, _useI18n2.default)(),
@@ -88,7 +101,7 @@ var Bar = function Bar(_ref) {
       drawerVisible = _useState2[0],
       setDrawerVisible = _useState2[1];
 
-  var showDrawerAndBurger = !isPublic && isMobile;
+  var showDrawerAndBurger = !isPublic && isMobile && !(0, _isTwakeTheme.isTwakeTheme)();
   var showSettings = !isPublic && !isMobile;
   var fetchInitialData = (0, _react.useCallback)(function () {
     if (!isPublic) {
@@ -123,7 +136,7 @@ var Bar = function Bar(_ref) {
   };
 
   var renderCenter = function renderCenter() {
-    return /*#__PURE__*/_react.default.createElement(_Apps.default, {
+    return (0, _isTwakeTheme.isTwakeTheme)() ? null : /*#__PURE__*/_react.default.createElement(_Apps.default, {
       appName: appName,
       appNamePrefix: appNamePrefix,
       appSlug: appSlug,
@@ -138,6 +151,24 @@ var Bar = function Bar(_ref) {
       return /*#__PURE__*/_react.default.createElement(_ButtonCozyHome.ButtonCozyHome, {
         isInvertedTheme: isInvertedTheme
       });
+    }
+
+    if ((0, _isTwakeTheme.isTwakeTheme)()) {
+      var homeHref = !isPublic && homeApp && homeApp.href;
+
+      if (isMobile) {
+        return /*#__PURE__*/_react.default.createElement(_ButtonCozyHome.ButtonCozyHome, {
+          homeHref: homeHref
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ButtonCozyHome.ButtonCozyHome, {
+        homeHref: homeHref
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "coz-nav-apps-btns-sep u-mr-half"
+      }), /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+        slug: appSlug
+      }));
     } // data-tutorial attribute allows to be targeted in an application tutorial
 
 
@@ -162,6 +193,16 @@ var Bar = function Bar(_ref) {
     }) : null;
   };
 
+  var renderTwakeRight = function renderTwakeRight() {
+    // Special case because search on Drive still rely on old search UI
+    // that modifies the cozy-bar
+    // Can be removed when https://github.com/cozy/cozy-drive/pull/3320 is merged
+    if (appSlug === 'drive' && isMobile && barSearch) return null;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HelpLink.default, null), /*#__PURE__*/_react.default.createElement(_AppsMenu.default, null), /*#__PURE__*/_react.default.createElement(_UserMenu.default, {
+      onLogOut: onLogOut
+    }));
+  };
+
   var renderSearch = function renderSearch() {
     return searchOptions.enabled && !isMobile ? /*#__PURE__*/_react.default.createElement("div", {
       className: "u-flex-grow u-mh-2"
@@ -183,7 +224,7 @@ var Bar = function Bar(_ref) {
     className: "coz-bar-container"
   }, barLeft || renderLeft(), barCenter || renderCenter(), /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex-grow"
-  }, barSearch || renderSearch()), barRight || renderRight(), showDrawerAndBurger ? /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+  }, barSearch || renderSearch()), searchOptions.enabled && isMobile ? /*#__PURE__*/_react.default.createElement(_SearchButton.default, null) : null, (0, _isTwakeTheme.isTwakeTheme)() ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, barRight, renderTwakeRight()) : barRight || renderRight(), showDrawerAndBurger ? /*#__PURE__*/_react.default.createElement(_Drawer.default, {
     visible: drawerVisible,
     onClose: toggleDrawer,
     drawerListener: function drawerListener() {
@@ -209,7 +250,8 @@ Bar.propTypes = {
 
 var mapStateToProps = function mapStateToProps(state) {
   return {
-    hasFetchedApps: (0, _reducers.hasFetched)(state)
+    hasFetchedApps: (0, _reducers.hasFetched)(state),
+    homeApp: (0, _reducers.getHomeApp)(state)
   };
 };
 

package/dist/components/BarRoutes.js

@@ -21,5 +21,9 @@ var BarRoutes = [/*#__PURE__*/_react.default.createElement(_reactRouterDom.Route
   element: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cozyClient.RealTimeQueries, {
     doctype: "io.cozy.ai.chat.conversations"
   }), /*#__PURE__*/_react.default.createElement(_cozySearch.AssistantDialog, null))
+}), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+  key: "search",
+  path: "search",
+  element: /*#__PURE__*/_react.default.createElement(_cozySearch.SearchDialog, null)
 })];
 exports.BarRoutes = BarRoutes;

package/dist/components/HelpLink/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _HelpOutlined = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/HelpOutlined"));
+
+var openHelpLink = function openHelpLink() {
+  window.open('https://support.cozy.io/', '_blank', 'noopener, noreferrer');
+};
+
+var HelpLink = function HelpLink() {
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: openHelpLink,
+    className: "u-p-half"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _HelpOutlined.default,
+    size: "18"
+  }));
+};
+
+var _default = HelpLink;
+exports.default = _default;

package/dist/components/Search/SearchButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Magnifier = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Magnifier"));
+
+var SearchButton = function SearchButton() {
+  var navigate = (0, _reactRouterDom.useNavigate)();
+
+  var _useLocation = (0, _reactRouterDom.useLocation)(),
+      pathname = _useLocation.pathname;
+
+  var goToSearch = (0, _react.useCallback)(function () {
+    navigate("/search?returnPath=".concat(pathname));
+  }, [navigate, pathname]);
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: goToSearch
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Magnifier.default
+  }));
+};
+
+var _default = SearchButton;
+exports.default = _default;

package/dist/components/UserMenu/UserMenuContent.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UserMenuContent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
+
+var _cozyIntent = require("cozy-intent");
+
+var _cozyClient = require("cozy-client");
+
+var _instance = require("cozy-client/dist/models/instance");
+
+var _List = _interopRequireDefault(require("cozy-ui/transpiled/react/List"));
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _PersonAdd = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/PersonAdd"));
+
+var _FromUser = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FromUser"));
+
+var _Logout = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Logout"));
+
+var _Cloud = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Cloud"));
+
+var _Company = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Company"));
+
+var _Right = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Right"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _useI18n2 = _interopRequireDefault(require("../useI18n"));
+
+var _AvatarMyself = _interopRequireDefault(require("./components/AvatarMyself"));
+
+var _helpers = require("./helpers");
+
+var styles = {
+  "user-menu-content": "user-menu-content",
+  "user-menu-content-add-account": "user-menu-content-add-account"
+};
+
+var UserMenuContent = function UserMenuContent(_ref) {
+  var onLogOut = _ref.onLogOut,
+      instance = _ref.instance,
+      diskUsage = _ref.diskUsage;
+  var webviewIntent = (0, _cozyIntent.useWebviewIntent)();
+  var client = (0, _cozyClient.useClient)();
+
+  var _useI18n = (0, _useI18n2.default)(),
+      t = _useI18n.t;
+
+  var _instance$data = instance.data,
+      public_name = _instance$data.public_name,
+      email = _instance$data.email;
+
+  var _makeDiskInfos = (0, _instance.makeDiskInfos)(diskUsage.data.used, diskUsage.data.quota),
+      humanDiskQuota = _makeDiskInfos.humanDiskQuota,
+      humanDiskUsage = _makeDiskInfos.humanDiskUsage;
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(styles['user-menu-content'], 'u-flex u-flex-column')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-flex u-flex-column u-flex-items-center u-mt-half"
+  }, /*#__PURE__*/_react.default.createElement(_AvatarMyself.default, {
+    className: "u-mb-half"
+  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "h4"
+  }, public_name), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body2"
+  }, email), (0, _cozyFlags.default)('cozy.b2b.enabled') && /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    label: t('userMenu.addAccount'),
+    variant: "secondary",
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: _PersonAdd.default
+    }),
+    className: (0, _classnames.default)(styles['user-menu-content-add-account'], 'u-mt-1')
+  })), /*#__PURE__*/_react.default.createElement(_List.default, {
+    className: "u-pb-0"
+  }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    size: "small",
+    onClick: function onClick() {
+      return (0, _helpers.openProfileLink)({
+        client: client
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _FromUser.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('userMenu.manageProfile')
+  })), (0, _cozyFlags.default)('cozy.b2b.enabled') && /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Company.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('userMenu.createBusinessAccount')
+  })), /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    size: "small",
+    onClick: function onClick() {
+      return (0, _helpers.openStorageLink)({
+        client: client
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Cloud.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('userMenu.storage'),
+    secondary: t('userMenu.storageAvailable', humanDiskQuota - humanDiskUsage)
+  }), /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Right.default
+  }))), /*#__PURE__*/_react.default.createElement(_Divider.default, {
+    component: "li",
+    variant: "inset"
+  }), /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    size: "small",
+    onClick: function onClick() {
+      return (0, _helpers.logOut)({
+        client: client,
+        webviewIntent: webviewIntent,
+        onLogOut: onLogOut
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _Logout.default
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    primary: t('userMenu.logOut')
+  }))));
+};
+
+exports.UserMenuContent = UserMenuContent;
+var _default = UserMenuContent;
+exports.default = _default;

package/dist/components/UserMenu/components/AvatarMyself.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cozyClient = require("cozy-client");
+
+var _Avatar = _interopRequireDefault(require("cozy-ui/transpiled/react/Avatar"));
+
+var _Skeleton = _interopRequireDefault(require("cozy-ui/transpiled/react/Skeleton"));
+
+var _queries = require("../../../lib/queries");
+
+var getInitials = _cozyClient.models.contact.getInitials;
+
+var AvatarMyself = function AvatarMyself(_ref) {
+  var className = _ref.className,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size;
+  var myselfQuery = (0, _queries.buildMyselfQuery)();
+
+  var _useQuery = (0, _cozyClient.useQuery)(myselfQuery.definition, myselfQuery.options),
+      fetchStatus = _useQuery.fetchStatus,
+      data = _useQuery.data;
+
+  if (fetchStatus !== 'loaded') {
+    return /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+      variant: "circle",
+      width: 32,
+      height: 32
+    });
+  }
+
+  var me = data[0];
+
+  if (me) {
+    var initials = getInitials(me);
+    return /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      className: className,
+      size: size
+    }, initials);
+  }
+};
+
+var _default = AvatarMyself;
+exports.default = _default;

package/dist/components/UserMenu/helpers.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.logOut = exports.openStorageLink = exports.openProfileLink = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _cozyClient = require("cozy-client");
+
+var _cozyDeviceHelper = require("cozy-device-helper");
+
+var getSettingsLink = function getSettingsLink(_ref) {
+  var client = _ref.client,
+      hash = _ref.hash;
+  return (0, _cozyClient.generateWebLink)({
+    cozyUrl: client.getStackClient().uri,
+    slug: 'settings',
+    hash: hash,
+    subDomainType: client.getInstanceOptions().subdomain
+  });
+};
+
+var openProfileLink = function openProfileLink(_ref2) {
+  var client = _ref2.client;
+  var link = getSettingsLink({
+    client: client,
+    hash: 'profile'
+  });
+  window.open(link, '_self');
+};
+
+exports.openProfileLink = openProfileLink;
+
+var openStorageLink = function openStorageLink(_ref3) {
+  var client = _ref3.client;
+  var link = getSettingsLink({
+    client: client,
+    hash: 'storage'
+  });
+  window.open(link, '_self');
+};
+
+exports.openStorageLink = openStorageLink;
+
+var logOut = /*#__PURE__*/function () {
+  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref4) {
+    var client, webviewIntent, onLogOut, res;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            client = _ref4.client, webviewIntent = _ref4.webviewIntent, onLogOut = _ref4.onLogOut;
+
+            if (!(onLogOut && typeof onLogOut === 'function')) {
+              _context.next = 8;
+              break;
+            }
+
+            res = onLogOut();
+
+            if (!(res instanceof Promise)) {
+              _context.next = 6;
+              break;
+            }
+
+            _context.next = 6;
+            return res;
+
+          case 6:
+            _context.next = 11;
+            break;
+
+          case 8:
+            _context.next = 10;
+            return client.logout();
+
+          case 10:
+            return _context.abrupt("return", (0, _cozyDeviceHelper.isFlagshipApp)() && webviewIntent ? webviewIntent.call('logout') : window.location.reload());
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function logOut(_x) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+
+exports.logOut = logOut;

package/dist/components/UserMenu/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Menu = _interopRequireDefault(require("cozy-ui/transpiled/react/Menu"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
+
+var _cozyClient = require("cozy-client");
+
+var _UserMenuContent = _interopRequireDefault(require("./UserMenuContent"));
+
+var _AvatarMyself = _interopRequireDefault(require("./components/AvatarMyself"));
+
+var UserMenu = function UserMenu(_ref) {
+  var onLogOut = _ref.onLogOut;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1];
+
+  var buttonRef = (0, _react.useRef)();
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useInstanceInfo = (0, _cozyClient.useInstanceInfo)(),
+      isLoaded = _useInstanceInfo.isLoaded,
+      instance = _useInstanceInfo.instance,
+      diskUsage = _useInstanceInfo.diskUsage;
+
+  var toggleMenu = function toggleMenu() {
+    setOpen(!isOpen);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("nav", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    ref: buttonRef,
+    onClick: toggleMenu,
+    disabled: !isLoaded,
+    className: "u-p-0 u-ml-half"
+  }, /*#__PURE__*/_react.default.createElement(_AvatarMyself.default, {
+    size: isMobile ? 's' : 'm'
+  })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.Dialog, {
+    open: isOpen,
+    size: "small",
+    onClose: toggleMenu,
+    content: /*#__PURE__*/_react.default.createElement(_UserMenuContent.default, {
+      onLogOut: onLogOut,
+      instance: instance,
+      diskUsage: diskUsage
+    })
+  }) : /*#__PURE__*/_react.default.createElement(_Menu.default, {
+    open: isOpen,
+    anchorEl: buttonRef.current,
+    container: buttonRef.current,
+    getContentAnchorEl: null,
+    onClose: toggleMenu,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: -10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_UserMenuContent.default, {
+    onLogOut: onLogOut,
+    instance: instance,
+    diskUsage: diskUsage
+  })));
+};
+
+var _default = UserMenu;
+exports.default = _default;

package/dist/index.js

@@ -82,5 +82,5 @@ var _BarProvider = _interopRequireDefault(require("./components/BarProvider"));
 var _reducers = require("./lib/reducers");
 
 /* global __VERSION__ */
-var version = "\"17.0.0\"";
+var version = "\"18.0.0\"";
 exports.version = version;

package/dist/lib/queries.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildMyselfQuery = void 0;
+
+var _cozyClient = require("cozy-client");
+
+var buildMyselfQuery = function buildMyselfQuery() {
+  return {
+    definition: (0, _cozyClient.Q)('io.cozy.contacts').where({
+      me: true
+    }),
+    options: {
+      as: 'io.cozy.contacts/myself'
+    }
+  };
+};
+
+exports.buildMyselfQuery = buildMyselfQuery;

package/dist/locales/en.json

@@ -49,5 +49,13 @@
     "moved": {
       "description": "The Cozy has been moved to a new address"
     }
+  },
+  "userMenu": {
+    "addAccount": "Add account",
+    "manageProfile": "Manage profile",
+    "createBusinessAccount": "Create business account",
+    "storage": "Storage",
+    "storageAvailable": "%{smart_count} GB available",
+    "logOut": "Log out"
   }
 }

package/dist/locales/fr.json

@@ -49,5 +49,13 @@
     "moved": {
       "description": "Ce Cozy a été déplacé vers une nouvelle adresse"
     }
+  },
+  "userMenu": {
+    "addAccount": "Ajouter un compte",
+    "manageProfile": "Gérer mon profil",
+    "createBusinessAccount": "Créer un compte entreprise",
+    "storage": "Stockage",
+    "storageAvailable": "%{smart_count} Go disponible",
+    "logOut": "Se déconnecter"
   }
 }

package/dist/styles/apps-menu.styl

@@ -0,0 +1,20 @@
+.apps-menu-grid
+    display: flex
+    flex-wrap: wrap
+    width: 100%
+    box-sizing: border-box
+    padding-left: 0.5rem
+    padding-right: 0.5rem
+  
+.apps-menu-grid-item-wrapper
+    width: 33%
+    aspect-ratio: 1
+
+.apps-menu-grid-item
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    text-decoration: none
+    width: 60%
+    min-width: 48px

package/dist/styles/user-menu.styl

@@ -0,0 +1,10 @@
+@require 'settings/breakpoints'
+
+.user-menu-content
+    width: 320px
+    
+    +small-screen()
+        width: auto
+
+.user-menu-content-add-account
+    width: calc(100% - 32px)

package/dist/stylesheet.css

@@ -1,3 +1,39 @@
+/*  imported from apps-menu.styl  */
+
+.apps-menu-grid {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.apps-menu-grid-item-wrapper {
+  width: 33%;
+  aspect-ratio: 1;
+}
+.apps-menu-grid-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  width: 60%;
+  min-width: 48px;
+}
+/*  imported from user-menu.styl  */
+
+.user-menu-content {
+  width: 320px;
+}
+@media (max-width: 48rem) {
+  .user-menu-content {
+    width: auto;
+  }
+}
+.user-menu-content-add-account {
+  width: calc(100% - 32px);
+}
 /*  imported from index.styl  */
 
 [role=banner] .coz-sep-flex {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-bar",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "description": "cozy-bar.js library, a small lib provided by cozy-stack to inject the Cozy-bar component into each app",
   "main": "dist/index.js",
   "author": "Cozy Cloud <contact@cozycloud.cc> (https://cozy.io/)",
@@ -41,7 +41,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-define": "^2.0.0",
     "babel-preset-cozy-app": "^1.9.0",
-    "cozy-client": "^51.1.0",
+    "cozy-client": "^52.1.0",
     "cozy-dataproxy-lib": "^4.1.0",
     "cozy-device-helper": "2.6.0",
     "cozy-flags": "^4.6.1",
@@ -49,7 +49,7 @@
     "cozy-interapp": "0.4.9",
     "cozy-logger": "1.9.1",
     "cozy-realtime": "^4.0.5",
-    "cozy-ui": "^111.12.0",
+    "cozy-ui": "^121.8.0",
     "eslint-config-cozy-app": "2.0.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "24.9.0",
@@ -61,7 +61,7 @@
     "stylus": "0.57.0"
   },
   "dependencies": {
-    "cozy-search": "0.1.0",
+    "cozy-search": "0.2.0",
     "hammerjs": "2.0.8",
     "lodash.debounce": "4.0.8",
     "lodash.set": "^4.3.2",
@@ -75,14 +75,14 @@
   },
   "peerDependencies": {
     "@cozy/minilog": ">=1.0.0",
-    "cozy-client": ">=51.1.0",
+    "cozy-client": ">=52.1.0",
     "cozy-dataproxy-lib": ">=4.1.0",
     "cozy-device-helper": ">=2.6.0",
     "cozy-flags": ">=4.6.1",
     "cozy-intent": ">=2.29.1",
     "cozy-interapp": ">=0.4.9",
     "cozy-realtime": ">=4.0.5",
-    "cozy-ui": ">=111.12.0",
+    "cozy-ui": ">=121.8.0",
     "react": ">=16.10.1",
     "react-dom": ">=16.10.1",
     "react-router-dom": ">=6.14.2"