cozy-bar 36.1.3 → 36.2.0

package/README.md

@@ -119,6 +119,50 @@ To hide the AI assistant button in the search bar (e.g. when the assistant is al
 />
 ```
 
+## Standalone bar
+
+`dist/standalone.js` is a self-contained bundle (React and every dependency included) for apps that are not Cozy React apps. Load it with a script tag, it exposes `window.TwakeBar`:
+
+```html
+<script src="standalone.js"></script>
+<script>
+  window.TwakeBar.mount({
+    appSlug: 'mail',
+    appName: 'Twake Mail',
+    appIcon: '/icon.svg', // optional, served by the app
+    appTextIcon: '/icon-text.svg', // optional, served by the app
+    locale: 'fr', // optional, 'en' by default
+    theme: 'dark', // optional, the device theme by default
+    onLogOut: () => myApp.logOut(), // required unless public
+    idToken: '…', // optional, the OIDC id token of the user
+    cozyURL: 'https://alice.mycozy.cloud' // required with idToken
+  })
+
+  // When the app logs in after mount(), or renews its id token
+  window.TwakeBar.setCredentials({
+    idToken: '…',
+    cozyURL: 'https://alice.mycozy.cloud'
+  })
+
+  // Whenever the app language or theme changes
+  window.TwakeBar.setLocale('en')
+  window.TwakeBar.setTheme('light')
+</script>
+```
+
+- Every call returns a promise, rejected when the bar cannot load or when the call fails, e.g. `mount()` with an invalid config.
+- `mount(config)` prepends a `#cozy-bar` element to the body. The app must reserve its space: `3rem` height, full width.
+- `public: true` displays the bar logged out. Otherwise the bar waits for credentials (skeleton avatar) and falls back to logged out after 30 seconds.
+- The bar exchanges the id token for a token of the user's Cozy with the cozy-stack `POST /auth/token_exchange` (`exchange_type: 'app'`). The Cozy must accept the id token audience in its `app_token_exchange` config, and the token gets the permissions of the Cozy app it is linked to.
+- `mount()` with `idToken` and `cozyURL` exchanges the token right away, and its promise resolves once the bar is logged in. `setCredentials()` does the same after `mount()`: it creates the Cozy client and displays the logged in bar. Calling it again, e.g. with a renewed id token, only updates the token of the existing client. If the first exchange fails, the promise is rejected and the bar is displayed logged out.
+- `unmount()` removes the bar, e.g. to give the page its own header back when `mount()` failed.
+- `setLocale(locale)` re-renders the mounted bar in another language, without recreating the Cozy client. It is ignored before `mount()`. Supported locales are `de`, `en`, `es`, `fr`, `it`, `ru` and `vi`, others fall back to `en`.
+- `setTheme(theme)` does the same with the theme, `light` or `dark`. Locale and theme come from the app, not from `io.cozy.settings`, so the bar always matches it.
+- The log out item of the user menu calls `onLogOut`. It is required unless the page is public, since the app owns the session: `mount()` throws without it.
+- The bar renders in a shadow root so its styles do not leak into the page and the page styles do not leak into the bar. The only globals added to the document head are the cozy-ui theme variables, scoped to hidden `.TwakeTheme--light|dark` nodes, and the Inter font stylesheet of the stack.
+
+Build it with `yarn build:standalone`, it is also built by `yarn build`.
+
 ## License
 
 Cozy Bar is distributed under the MIT license.

package/dist/components/AppsMenu/AppsMenuContent.js

@@ -29,13 +29,6 @@ var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-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",
-  "apps-menu-grid-item-icon": "apps-menu-grid-item-icon"
-};
-
 var AppsMenuContent = function AppsMenuContent(_ref) {
   var isFetchingApps = _ref.isFetchingApps,
       apps = _ref.apps,
@@ -55,7 +48,7 @@ var AppsMenuContent = function AppsMenuContent(_ref) {
 
   if (isFetchingApps) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: styles['apps-menu-grid']
+      className: "apps-menu-grid"
     }, /*#__PURE__*/_react.default.createElement(_AppItemPlaceholder.default, {
       key: "1"
     }), /*#__PURE__*/_react.default.createElement(_AppItemPlaceholder.default, {
@@ -72,7 +65,7 @@ var AppsMenuContent = function AppsMenuContent(_ref) {
   var sortedApps = (0, _cozyFlags.default)('apps.sort') ? (0, _applications.sortApplicationsList)(displayedApps, (0, _cozyFlags.default)('apps.sort')) : displayedApps;
   var entrypoints = (0, _helper.getEntrypoints)(apps);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: styles['apps-menu-grid']
+    className: "apps-menu-grid"
   }, sortedApps.map(function (app) {
     return /*#__PURE__*/_react.default.createElement(_AppItem.default, {
       key: app.slug,

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

@@ -29,12 +29,6 @@ var _AppIcon = _interopRequireDefault(require("cozy-ui-plus/dist/AppIcon"));
 
 var _AppLinker = _interopRequireDefault(require("cozy-ui-plus/dist/AppLinker"));
 
-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",
-  "apps-menu-grid-item-icon": "apps-menu-grid-item-icon"
-};
 var useStyles = (0, _styles.makeStyles)(function () {
   return {
     text: {
@@ -71,11 +65,11 @@ var AppItem = function AppItem(_ref) {
       href: href,
       title: appName,
       onClick: onClick,
-      className: (0, _classnames.default)(styles['apps-menu-grid-item-wrapper'], 'u-bdrs-5'),
+      className: (0, _classnames.default)('apps-menu-grid-item-wrapper', 'u-bdrs-5'),
       label: /*#__PURE__*/_react.default.createElement("div", {
-        className: styles['apps-menu-grid-item']
+        className: "apps-menu-grid-item"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles['apps-menu-grid-item-icon']
+        className: "apps-menu-grid-item-icon"
       }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, (0, _extends2.default)({
         app: app,
         key: app.slug

package/dist/components/AppsMenu/components/EntrypointItem.js

@@ -21,12 +21,6 @@ var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typog
 
 var _styles = require("cozy-ui/transpiled/react/styles");
 
-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",
-  "apps-menu-grid-item-icon": "apps-menu-grid-item-icon"
-};
 var useStyles = (0, _styles.makeStyles)(function () {
   return {
     text: {
@@ -66,11 +60,11 @@ var EntrypointItem = function EntrypointItem(_ref) {
     variant: "text",
     href: entrypointUrl,
     title: title,
-    className: (0, _classnames.default)(styles['apps-menu-grid-item-wrapper'], 'u-bdrs-5'),
+    className: (0, _classnames.default)('apps-menu-grid-item-wrapper', 'u-bdrs-5'),
     label: /*#__PURE__*/_react.default.createElement("div", {
-      className: styles['apps-menu-grid-item']
+      className: "apps-menu-grid-item"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: styles['apps-menu-grid-item-icon']
+      className: "apps-menu-grid-item-icon"
     }, /*#__PURE__*/_react.default.createElement("img", {
       className: "u-bdrs-5 u-w-100",
       src: "data:image/svg+xml;base64,".concat(entrypoint.icon),

package/dist/components/AppsMenu/components/ShortcutItem.js

@@ -21,12 +21,6 @@ var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typog
 
 var _styles = require("cozy-ui/transpiled/react/styles");
 
-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",
-  "apps-menu-grid-item-icon": "apps-menu-grid-item-icon"
-};
 var useStyles = (0, _styles.makeStyles)(function () {
   return {
     text: {
@@ -61,11 +55,11 @@ var ShortcutItem = function ShortcutItem(_ref) {
     variant: "text",
     href: url,
     title: filename,
-    className: (0, _classnames.default)(styles['apps-menu-grid-item-wrapper'], 'u-bdrs-5'),
+    className: (0, _classnames.default)('apps-menu-grid-item-wrapper', 'u-bdrs-5'),
     label: /*#__PURE__*/_react.default.createElement("div", {
-      className: styles['apps-menu-grid-item']
+      className: "apps-menu-grid-item"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: styles['apps-menu-grid-item-icon']
+      className: "apps-menu-grid-item-icon"
     }, shortcutImgSrc ? /*#__PURE__*/_react.default.createElement("img", {
       className: "u-bdrs-5 u-w-100",
       src: shortcutImgSrc,

package/dist/components/Bar.js

@@ -57,6 +57,7 @@ var Bar = function Bar(_ref) {
       appTextIcon = _ref.appTextIcon,
       searchOptions = _ref.searchOptions,
       appSlug = _ref.appSlug,
+      appName = _ref.appName,
       componentsProps = _ref.componentsProps;
 
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
@@ -90,6 +91,7 @@ var Bar = function Bar(_ref) {
   }, barLeft || /*#__PURE__*/_react.default.createElement(_BarLeft.default, (0, _extends2.default)({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.BarLeft, {
     isPublic: isPublic,
     homeApp: homeApp,
+    appName: appName,
     appIcon: appIcon,
     appTextIcon: appTextIcon
   })), barCenter, /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/Elements/BarLeft.js

@@ -23,12 +23,48 @@ var _Grid = _interopRequireDefault(require("cozy-ui/transpiled/react/Grid"));
 
 var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
-var BarLeft = function BarLeft(_ref) {
-  var isPublic = _ref.isPublic,
-      homeApp = _ref.homeApp,
+// The standalone bar receives icons as URLs instead of SVG components
+var AppTitleOrIcon = function AppTitleOrIcon(_ref) {
+  var appName = _ref.appName,
       appIcon = _ref.appIcon,
-      appTextIcon = _ref.appTextIcon,
-      noCozyHome = _ref.noCozyHome;
+      appTextIcon = _ref.appTextIcon;
+
+  if (typeof appIcon !== 'string') {
+    return /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+      appIcon: appIcon,
+      appTextIcon: appTextIcon
+    });
+  }
+
+  if (typeof appTextIcon !== 'string') {
+    return /*#__PURE__*/_react.default.createElement("img", {
+      src: appIcon,
+      alt: appName !== null && appName !== void 0 ? appName : '',
+      className: "coz-bar-app-icon"
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+    appIcon: /*#__PURE__*/_react.default.createElement("img", {
+      src: appIcon,
+      alt: "",
+      className: "coz-bar-app-icon"
+    }),
+    appTextIcon: /*#__PURE__*/_react.default.createElement("img", {
+      src: appTextIcon,
+      alt: appName !== null && appName !== void 0 ? appName : '',
+      className: "coz-bar-app-text-icon"
+    })
+  });
+};
+
+var BarLeft = function BarLeft(_ref2) {
+  var isPublic = _ref2.isPublic,
+      homeApp = _ref2.homeApp,
+      appName = _ref2.appName,
+      appIcon = _ref2.appIcon,
+      appTextIcon = _ref2.appTextIcon,
+      noCozyHome = _ref2.noCozyHome;
 
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
       isMobile = _useBreakpoints.isMobile;
@@ -45,13 +81,15 @@ var BarLeft = function BarLeft(_ref) {
         return /*#__PURE__*/_react.default.createElement("a", {
           className: "coz-nav-apps-btns-home u-ml-half",
           href: homeHref
-        }, /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+        }, /*#__PURE__*/_react.default.createElement(AppTitleOrIcon, {
+          appName: appName,
           appIcon: appIcon,
           appTextIcon: appTextIcon
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+      return /*#__PURE__*/_react.default.createElement(AppTitleOrIcon, {
+        appName: appName,
         appIcon: appIcon,
         appTextIcon: appTextIcon
       });
@@ -75,10 +113,12 @@ var BarLeft = function BarLeft(_ref) {
   })), noCozyHome && homeHref ? /*#__PURE__*/_react.default.createElement("a", {
     className: "coz-nav-apps-btns-home u-ml-half",
     href: homeHref
-  }, /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+  }, /*#__PURE__*/_react.default.createElement(AppTitleOrIcon, {
+    appName: appName,
     appIcon: appIcon,
     appTextIcon: appTextIcon
-  })) : /*#__PURE__*/_react.default.createElement(_AppTitle.default, {
+  })) : /*#__PURE__*/_react.default.createElement(AppTitleOrIcon, {
+    appName: appName,
     appIcon: appIcon,
     appTextIcon: appTextIcon
   }));

package/dist/components/UserMenu/UserMenuContent.js

@@ -45,11 +45,6 @@ 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,
@@ -84,7 +79,7 @@ var UserMenuContent = function UserMenuContent(_ref) {
   });
   var gutters = isMobile ? 'disabled' : undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(styles['user-menu-content'], 'u-flex u-flex-column')
+    className: (0, _classnames.default)('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 u-ph-half"
   }, /*#__PURE__*/_react.default.createElement(_AvatarMyself.default, {
@@ -148,7 +143,8 @@ var UserMenuContent = function UserMenuContent(_ref) {
         webviewIntent: webviewIntent,
         onLogOut: onLogOut
       });
-    }
+    },
+    "data-testid": "user-menu-logout"
   }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.Logout
   })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {

package/dist/components/UserMenu/index.js

@@ -73,7 +73,8 @@ var UserMenu = function UserMenu(_ref) {
     ref: buttonRef,
     onClick: toggleMenu,
     disabled: !isLoaded,
-    className: "u-p-0 u-ml-half"
+    className: "u-p-0 u-ml-half",
+    "data-testid": "user-menu-button"
   }, /*#__PURE__*/_react.default.createElement(_AvatarMyself.default, {
     size: isMobile ? 's' : 'm'
   })), isMobile ? /*#__PURE__*/_react.default.createElement(_CozyDialogs.ConfirmDialog, {

package/dist/components/helpers.js

@@ -9,18 +9,17 @@ exports.getAppsData = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _applications = require("cozy-client/dist/models/applications");
+
 var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-// cozy-client's useQuery normalizes JSON:API responses — attributes are
-// spread to the top level (e.g. app.slug, app.name exist directly).
-// We only ensure `href` is derived from `links.related` for AppLinker.
 var mapApp = function mapApp(app) {
   return _objectSpread(_objectSpread({}, app), {}, {
-    href: app.links && app.links.related || app.href
+    href: (0, _applications.getUrl)(app) || app.href
   });
 };
 

package/dist/components/useI18n.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.locales = exports.default = void 0;
 
 var _de = _interopRequireDefault(require("../locales/de.json"));
 
@@ -32,6 +32,7 @@ var locales = {
   ru: _ru.default,
   vi: _vi.default
 };
+exports.locales = locales;
 var useI18n = (0, _twakeI18n.createUseI18n)(locales);
 var _default = useI18n;
 exports.default = _default;

package/dist/components/utils/IconCozyHome.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _twakeIcons = require("@linagora/twake-icons");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _cozyClient = require("cozy-client");
 
@@ -17,16 +17,19 @@ var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
 var _AppIcon = _interopRequireDefault(require("cozy-ui-plus/dist/AppIcon"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var IconCozyHome = function IconCozyHome() {
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
       isMobile = _useBreakpoints.isMobile;
 
-  var client = (0, _cozyClient.useClient)();
+  var client = (0, _cozyClient.useClient)(); // AppIcon reloads the icon whenever fetchIcon changes
 
-  var fetchIcon = function fetchIcon() {
+  var fetchIcon = (0, _react.useCallback)(function () {
     return "".concat(client.getStackClient().uri, "/assets/images/icon-cozy-home.svg");
-  };
-
+  }, [client]);
   return /*#__PURE__*/_react.default.createElement(_AppIcon.default, {
     fetchIcon: fetchIcon,
     fallbackIcon: _twakeIcons.TwakeWorkplace,