cozy-ui 111.11.0 → 111.13.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [111.13.0](https://github.com/cozy/cozy-ui/compare/v111.12.0...v111.13.0) (2024-09-25)
+
+
+### Bug Fixes
+
+* **AppTile:** Display the name of the developer instead custom property ([ff428f8](https://github.com/cozy/cozy-ui/commit/ff428f8))
+* **AppTile:** Show favorite label also desktop ([6477abe](https://github.com/cozy/cozy-ui/commit/6477abe))
+* **I18n:** Allow multiple locales extensions in apps by isolating state ([2bf2645](https://github.com/cozy/cozy-ui/commit/2bf2645))
+
+
+### Features
+
+* **AppSections:** Rename shortcuts section to additional apps ([3b53853](https://github.com/cozy/cozy-ui/commit/3b53853))
+
+# [111.12.0](https://github.com/cozy/cozy-ui/compare/v111.11.0...v111.12.0) (2024-09-23)
+
+
+### Features
+
+* Remove `ui.darkmode.enabled` flag condition ([67e67cd](https://github.com/cozy/cozy-ui/commit/67e67cd))
+
 # [111.11.0](https://github.com/cozy/cozy-ui/compare/v111.10.0...v111.11.0) (2024-09-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.11.0",
+  "version": "111.13.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/AppSections/Sections.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import flag from 'cozy-flags'
-import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from './Sections.styl'
 import * as catUtils from './categories'
@@ -16,9 +15,9 @@ import en from './locales/en.json'
 import fr from './locales/fr.json'
 import * as searchUtils from './search'
 import Typography from '../Typography'
-import withBreakpoints from '../helpers/withBreakpoints'
-import { translate } from '../providers/I18n'
-import withLocales from '../providers/I18n/withLocales'
+import { useBreakpoints } from '../providers/Breakpoints'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+import withOnlyLocales from '../providers/I18n/withOnlyLocales'
 
 const locales = {
   en,
@@ -230,7 +229,10 @@ const SectionsWrapper = props => {
   const i18nConfig = generateI18nConfig(config?.categories)
   useExtendI18n(i18nConfig)
 
-  return <Sections {...props} />
+  const { t } = useI18n()
+  const breakpoints = useBreakpoints()
+
+  return <Sections {...props} breakpoints={breakpoints} t={t} />
 }
 
 Sections.propTypes = {
@@ -277,6 +279,4 @@ Sections.defaultProps = {
   })
 }
 
-export const Untranslated = withBreakpoints()(SectionsWrapper)
-
-export default withLocales(locales)(translate()(Untranslated))
+export default withOnlyLocales(locales)(SectionsWrapper)

package/react/AppSections/__snapshots__/index.spec.jsx.snap

@@ -1076,7 +1076,7 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           "value": "partners",
         },
         Object {
-          "label": "Shortcuts",
+          "label": "Additional apps",
           "secondary": false,
           "value": "shortcuts",
         },
@@ -1482,7 +1482,7 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           "value": "partners",
         },
         Object {
-          "label": "Shortcuts",
+          "label": "Additional apps",
           "secondary": false,
           "value": "shortcuts",
         },

package/react/AppSections/categories.spec.js

@@ -104,7 +104,7 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
-      { label: 'Shortcuts', secondary: false, value: 'shortcuts' },
+      { label: 'Additional apps', secondary: false, value: 'shortcuts' },
       {
         label: 'Services',
         secondary: false,
@@ -158,7 +158,7 @@ describe('generateOptionsFromApps', () => {
         value: 'others'
       },
       {
-        label: 'Shortcuts',
+        label: 'Additional apps',
         secondary: false,
         value: 'shortcuts'
       },

package/react/AppSections/components/__snapshots__/AppsSection.spec.jsx.snap

@@ -28,7 +28,7 @@ Array [
     "title": "Cozy Photos",
   },
   Object {
-    "developer": "By undefined",
+    "developer": null,
     "status": "Update available",
     "title": "Tasky",
   },

package/react/AppSections/locales/en.json

@@ -27,11 +27,11 @@
     "telecom": "Telecom",
     "transport": "Transportation",
     "pro": "Work",
-    "shortcuts": "Shortcuts"
+    "shortcuts": "Additional apps"
   },
   "sections": {
     "applications": "Applications",
     "konnectors": "Services",
-    "shortcuts": "Shortcuts"
+    "shortcuts": "Additional apps"
   }
 }

package/react/AppSections/locales/fr.json

@@ -27,11 +27,11 @@
     "telecom": "Mobile",
     "transport": "Voyage et transport",
     "pro": "Travail",
-    "shortcuts": "Raccourcis"
+    "shortcuts": "App supplémentaires"
   },
   "sections": {
     "applications": "Applications",
     "konnectors": "Services",
-    "shortcuts": "Raccourcis"
+    "shortcuts": "App supplémentaires"
   }
 }

package/react/AppTile/index.jsx

@@ -20,7 +20,6 @@ import Tile, {
 } from '../Tile'
 import palette from '../palette'
 import { AppDoctype } from '../proptypes'
-import useBreakpoints from '../providers/Breakpoints'
 import { createUseI18n } from '../providers/I18n'
 
 const locales = { en, fr }
@@ -52,7 +51,6 @@ export const AppTile = ({
 }) => {
   const { t } = useI18n()
   const { developer = {} } = app
-  const { isMobile } = useBreakpoints()
 
   const name = nameProp || app.name
 
@@ -61,7 +59,7 @@ export const AppTile = ({
   const isStatusArray = Array.isArray(showStatus)
 
   const statusToDisplay =
-    isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile
+    isShortcutFile(app) && statusLabel === APP_STATUS.installed
       ? 'favorite'
       : isStatusArray
       ? showStatus.indexOf(statusLabel) > -1 && statusLabel
@@ -71,9 +69,6 @@ export const AppTile = ({
 
   const isInMaintenanceWithSpecificDisplay =
     displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance
-  const tileSubtitle = isShortcutFile(app)
-    ? app.metadata?.source
-    : developer.name
 
   return (
     <Tile
@@ -109,8 +104,8 @@ export const AppTile = ({
         <TileTitle isMultiline={!statusLabel}>
           {namePrefix ? `${namePrefix} ${name}` : name}
         </TileTitle>
-        {showDeveloper && (
-          <TileSubtitle>{`${t('app_item.by')} ${tileSubtitle}`}</TileSubtitle>
+        {developer.name && showDeveloper && (
+          <TileSubtitle>{`${t('app_item.by')} ${developer.name}`}</TileSubtitle>
         )}
         {statusToDisplay && (
           <TileFooter isAccent={statusLabel === APP_STATUS.update}>

package/react/AppTile/locales/fr.json

@@ -4,6 +4,6 @@
     "installed": "Installée",
     "maintenance": "En maintenance",
     "update": "Mise à jour dispo.",
-    "favorite": "Ajouté sur la page d'accueil"
+    "favorite": "Ajouté sur l'accueil"
   }
 }

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -2,8 +2,6 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import flag from 'cozy-flags'
-
 import { CozyThemeContext } from './index'
 import MuiCozyTheme from '../../MuiCozyTheme'
 import useMediaQuery from '../../hooks/useMediaQuery'
@@ -18,11 +16,8 @@ const DumbCozyTheme = ({
   const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
   const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
 
-  const isOnlyLight = !!flag('ui.darkmode.enabled') // should be remove when dark mode is validated on all apps
   const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
-    ? isOnlyLight
-      ? 'dark'
-      : 'light'
+    ? 'dark'
     : 'light'
   const filteredSettingsThemeType = ['light', 'dark'].includes(
     settingsThemeType

package/react/providers/I18n/index.jsx

@@ -89,8 +89,9 @@ I18n.childContextTypes = {
   lang: PropTypes.string
 }
 
-export { initTranslation, extend, useExtendI18n } from './translation'
+export { initTranslation, extend } from './translation'
 export { default as translate } from './translate'
 export { default as createUseI18n } from './createUseI18n'
+export { default as useExtendI18n } from './useExtendI18n'
 
 export default I18n

package/react/providers/I18n/translation.jsx

@@ -1,6 +1,6 @@
 import Polyglot from 'node-polyglot'
 
-import { DEFAULT_LANG, useI18n } from '.'
+import { DEFAULT_LANG } from '.'
 
 export let _polyglot
 
@@ -40,34 +40,3 @@ export const initTranslation = (
 }
 
 export const extend = (dict, polyglot) => (polyglot || _polyglot)?.extend(dict)
-
-// Use to determine if we need to merge locales again, and to avoid useless calls
-let useExtendI18nLang = ''
-
-/**
- * Hook to merge app locales with cozy-ui locales
- * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
- * @returns {void}
- */
-export const useExtendI18n = locales => {
-  const { lang, polyglot } = useI18n()
-
-  if (!locales || !lang || !polyglot) return
-
-  // To simplify code we use Polyglot.extend to merge
-  // locales from object and from polyglot.phrases
-  // rather than native JS or lodash. this is why we have two extend.
-  if (useExtendI18nLang !== lang) {
-    const _polyglot = new Polyglot({
-      phrases: locales[lang],
-      locale: lang
-    })
-
-    // merge locales from app and cozy-ui, without replacing existing one in app
-    extend(polyglot.phrases, _polyglot)
-    // use merged locales in app
-    extend(_polyglot.phrases, polyglot)
-    // set the sitch to avoid useless merge
-    useExtendI18nLang = lang
-  }
-}

package/react/providers/I18n/useExtendI18n.jsx

@@ -0,0 +1,37 @@
+import Polyglot from 'node-polyglot'
+import { useState } from 'react'
+
+import { useI18n } from '.'
+import { extend } from './translation'
+
+/**
+ * Hook to merge app locales with cozy-ui locales
+ * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
+ * @returns {void}
+ */
+const useExtendI18n = locales => {
+  const { lang, polyglot } = useI18n()
+  // Use to determine if we need to merge locales again, and to avoid useless calls
+  const [useExtendI18nLang, setUseExtendI18nLang] = useState('')
+
+  if (!locales || !lang || !polyglot) return
+
+  // To simplify code we use Polyglot.extend to merge
+  // locales from object and from polyglot.phrases
+  // rather than native JS or lodash. this is why we have two extend.
+  if (useExtendI18nLang !== lang) {
+    const _polyglot = new Polyglot({
+      phrases: locales[lang],
+      locale: lang
+    })
+
+    // merge locales from app and cozy-ui, without replacing existing one in app
+    extend(polyglot.phrases, _polyglot)
+    // use merged locales in app
+    extend(_polyglot.phrases, polyglot)
+    // set the switch to avoid useless merge
+    setUseExtendI18nLang(lang)
+  }
+}
+
+export default useExtendI18n

package/transpiled/react/AppSections/Sections.js

@@ -14,7 +14,6 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import flag from 'cozy-flags';
-import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 var styles = {
   "Sections__section": "Sections__Sections__section___2onYy"
 };
@@ -53,12 +52,12 @@ var en = {
     telecom: "Telecom",
     transport: "Transportation",
     pro: "Work",
-    shortcuts: "Shortcuts"
+    shortcuts: "Additional apps"
   },
   sections: {
     applications: "Applications",
     konnectors: "Services",
-    shortcuts: "Shortcuts"
+    shortcuts: "Additional apps"
   }
 };
 var fr = {
@@ -90,19 +89,19 @@ var fr = {
     telecom: "Mobile",
     transport: "Voyage et transport",
     pro: "Travail",
-    shortcuts: "Raccourcis"
+    shortcuts: "App suppl\xE9mentaires"
   },
   sections: {
     applications: "Applications",
     konnectors: "Services",
-    shortcuts: "Raccourcis"
+    shortcuts: "App suppl\xE9mentaires"
   }
 };
 import * as searchUtils from "cozy-ui/transpiled/react/AppSections/search";
 import Typography from "cozy-ui/transpiled/react/Typography";
-import withBreakpoints from "cozy-ui/transpiled/react/helpers/withBreakpoints";
-import { translate } from "cozy-ui/transpiled/react/providers/I18n";
-import withLocales from "cozy-ui/transpiled/react/providers/I18n/withLocales";
+import { useBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import withOnlyLocales from "cozy-ui/transpiled/react/providers/I18n/withOnlyLocales";
 var locales = {
   en: en,
   fr: fr
@@ -291,7 +290,15 @@ var SectionsWrapper = function SectionsWrapper(props) {
   var config = flag('store.alternative-source');
   var i18nConfig = generateI18nConfig(config === null || config === void 0 ? void 0 : config.categories);
   useExtendI18n(i18nConfig);
-  return /*#__PURE__*/React.createElement(Sections, props);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var breakpoints = useBreakpoints();
+  return /*#__PURE__*/React.createElement(Sections, _extends({}, props, {
+    breakpoints: breakpoints,
+    t: t
+  }));
 };
 
 Sections.propTypes = {
@@ -334,5 +341,4 @@ Sections.defaultProps = {
     })
   })
 };
-export var Untranslated = withBreakpoints()(SectionsWrapper);
-export default withLocales(locales)(translate()(Untranslated));
+export default withOnlyLocales(locales)(SectionsWrapper);

package/transpiled/react/AppTile/index.js

@@ -19,7 +19,7 @@ var fr = {
     installed: "Install\xE9e",
     maintenance: "En maintenance",
     update: "Mise \xE0 jour dispo.",
-    favorite: "Ajout\xE9 sur la page d'accueil"
+    favorite: "Ajout\xE9 sur l'accueil"
   }
 };
 var styles = {
@@ -36,7 +36,6 @@ import { ShortcutTile } from "cozy-ui/transpiled/react/ShortcutTile";
 import Tile, { TileTitle, TileSubtitle, TileFooter, TileIcon, TileDescription } from "cozy-ui/transpiled/react/Tile";
 import palette from "cozy-ui/transpiled/react/palette";
 import { AppDoctype } from "cozy-ui/transpiled/react/proptypes";
-import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { createUseI18n } from "cozy-ui/transpiled/react/providers/I18n";
 var locales = {
   en: en,
@@ -60,8 +59,6 @@ var getAppIconProps = function getAppIconProps() {
 
 var useI18n = createUseI18n(locales);
 export var AppTile = function AppTile(_ref) {
-  var _app$metadata;
-
   var app = _ref.app,
       nameProp = _ref.name,
       namePrefix = _ref.namePrefix,
@@ -76,17 +73,12 @@ export var AppTile = function AppTile(_ref) {
 
   var _app$developer = app.developer,
       developer = _app$developer === void 0 ? {} : _app$developer;
-
-  var _useBreakpoints = useBreakpoints(),
-      isMobile = _useBreakpoints.isMobile;
-
   var name = nameProp || app.name;
   var statusLabel = getCurrentStatusLabel(app);
   var isStatusArray = Array.isArray(showStatus);
-  var statusToDisplay = isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile ? 'favorite' : isStatusArray ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
+  var statusToDisplay = isShortcutFile(app) && statusLabel === APP_STATUS.installed ? 'favorite' : isStatusArray ? showStatus.indexOf(statusLabel) > -1 && statusLabel : showStatus && statusLabel;
   var IconComponent = IconComponentProp || AppIcon;
   var isInMaintenanceWithSpecificDisplay = displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance;
-  var tileSubtitle = isShortcutFile(app) ? (_app$metadata = app.metadata) === null || _app$metadata === void 0 ? void 0 : _app$metadata.source : developer.name;
   return /*#__PURE__*/React.createElement(Tile, {
     tag: "button",
     type: "button",
@@ -107,7 +99,7 @@ export var AppTile = function AppTile(_ref) {
     className: styles["AppTile-description"]
   }, /*#__PURE__*/React.createElement(TileTitle, {
     isMultiline: !statusLabel
-  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), showDeveloper && /*#__PURE__*/React.createElement(TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(tileSubtitle)), statusToDisplay && /*#__PURE__*/React.createElement(TileFooter, {
+  }, namePrefix ? "".concat(namePrefix, " ").concat(name) : name), developer.name && showDeveloper && /*#__PURE__*/React.createElement(TileSubtitle, null, "".concat(t('app_item.by'), " ").concat(developer.name)), statusToDisplay && /*#__PURE__*/React.createElement(TileFooter, {
     isAccent: statusLabel === APP_STATUS.update
   }, t("app_item.".concat(statusToDisplay)))));
 };

package/transpiled/react/providers/CozyTheme/DumbCozyTheme.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import flag from 'cozy-flags';
 import { CozyThemeContext } from "cozy-ui/transpiled/react/providers/CozyTheme/index";
 import MuiCozyTheme from "cozy-ui/transpiled/react/MuiCozyTheme";
 import useMediaQuery from "cozy-ui/transpiled/react/hooks/useMediaQuery";
@@ -19,9 +18,7 @@ var DumbCozyTheme = function DumbCozyTheme(_ref) {
 
   var uiThemeVariant = localStorage.getItem('ui-theme-variant'); // use only for cozy-ui documentation and argos screenshots
 
-  var isOnlyLight = !!flag('ui.darkmode.enabled'); // should be remove when dark mode is validated on all apps
-
-  var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? isOnlyLight ? 'dark' : 'light' : 'light';
+  var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
   var filteredSettingsThemeType = ['light', 'dark'].includes(settingsThemeType) ? settingsThemeType : undefined;
   var selfThemeType = uiThemeType || filteredSettingsThemeType || deviceThemeType;
   var selfThemeVariant = uiThemeVariant || variant;

package/transpiled/react/providers/I18n/index.js

@@ -114,7 +114,8 @@ I18n.childContextTypes = {
   polyglot: PropTypes.object,
   lang: PropTypes.string
 };
-export { initTranslation, extend, useExtendI18n } from './translation';
+export { initTranslation, extend } from './translation';
 export { default as translate } from './translate';
 export { default as createUseI18n } from './createUseI18n';
+export { default as useExtendI18n } from './useExtendI18n';
 export default I18n;

package/transpiled/react/providers/I18n/translation.js

@@ -1,5 +1,5 @@
 import Polyglot from 'node-polyglot';
-import { DEFAULT_LANG, useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { DEFAULT_LANG } from "cozy-ui/transpiled/react/providers/I18n";
 export var _polyglot;
 export var initTranslation = function initTranslation(lang, dictRequire, context) {
   var defaultLang = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_LANG;
@@ -37,35 +37,4 @@ export var extend = function extend(dict, polyglot) {
   var _ref;
 
   return (_ref = polyglot || _polyglot) === null || _ref === void 0 ? void 0 : _ref.extend(dict);
-}; // Use to determine if we need to merge locales again, and to avoid useless calls
-
-var useExtendI18nLang = '';
-/**
- * Hook to merge app locales with cozy-ui locales
- * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
- * @returns {void}
- */
-
-export var useExtendI18n = function useExtendI18n(locales) {
-  var _useI18n = useI18n(),
-      lang = _useI18n.lang,
-      polyglot = _useI18n.polyglot;
-
-  if (!locales || !lang || !polyglot) return; // To simplify code we use Polyglot.extend to merge
-  // locales from object and from polyglot.phrases
-  // rather than native JS or lodash. this is why we have two extend.
-
-  if (useExtendI18nLang !== lang) {
-    var _polyglot2 = new Polyglot({
-      phrases: locales[lang],
-      locale: lang
-    }); // merge locales from app and cozy-ui, without replacing existing one in app
-
-
-    extend(polyglot.phrases, _polyglot2); // use merged locales in app
-
-    extend(_polyglot2.phrases, polyglot); // set the sitch to avoid useless merge
-
-    useExtendI18nLang = lang;
-  }
 };

package/transpiled/react/providers/I18n/useExtendI18n.js

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import Polyglot from 'node-polyglot';
+import { useState } from 'react';
+import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { extend } from "cozy-ui/transpiled/react/providers/I18n/translation";
+/**
+ * Hook to merge app locales with cozy-ui locales
+ * @param {object} locales - Locales sorted by lang `{ fr: {...}, en: {...} }`
+ * @returns {void}
+ */
+
+var useExtendI18n = function useExtendI18n(locales) {
+  var _useI18n = useI18n(),
+      lang = _useI18n.lang,
+      polyglot = _useI18n.polyglot; // Use to determine if we need to merge locales again, and to avoid useless calls
+
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      useExtendI18nLang = _useState2[0],
+      setUseExtendI18nLang = _useState2[1];
+
+  if (!locales || !lang || !polyglot) return; // To simplify code we use Polyglot.extend to merge
+  // locales from object and from polyglot.phrases
+  // rather than native JS or lodash. this is why we have two extend.
+
+  if (useExtendI18nLang !== lang) {
+    var _polyglot = new Polyglot({
+      phrases: locales[lang],
+      locale: lang
+    }); // merge locales from app and cozy-ui, without replacing existing one in app
+
+
+    extend(polyglot.phrases, _polyglot); // use merged locales in app
+
+    extend(_polyglot.phrases, polyglot); // set the switch to avoid useless merge
+
+    setUseExtendI18nLang(lang);
+  }
+};
+
+export default useExtendI18n;