cozy-ui 114.0.1 → 115.0.1

package/.bundlemonrc

@@ -10,8 +10,7 @@
       "maxPercentIncrease": 10
     },
     {
-      "path": "transpiled/react/stylesheet.css",
-      "maxPercentIncrease": 10
+      "path": "transpiled/react/stylesheet.css"
     }
   ],
   "groups": [

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [115.0.1](https://github.com/cozy/cozy-ui/compare/v115.0.0...v115.0.1) (2024-12-20)
+
+
+### Bug Fixes
+
+* Ensure use correct format locales ([5d078db](https://github.com/cozy/cozy-ui/commit/5d078db)), closes [/github.com/date-fns/date-fns/blob/main/CHANGELOG.md#200---2019-08-20](https://github.com//github.com/date-fns/date-fns/blob/main/CHANGELOG.md/issues/200---2019-08-20)
+
+# [115.0.0](https://github.com/cozy/cozy-ui/compare/v114.0.1...v115.0.0) (2024-12-19)
+
+
+### Features
+
+* Upgrade date-fns to 2.30.0 ([a89c524](https://github.com/cozy/cozy-ui/commit/a89c524))
+
+
+### BREAKING CHANGES
+
+* The date formatting function (`f` from `useI18n`) changes,
+please refer to this doc.
+https://date-fns.org/v2.30.0/docs/format
+
 ## [114.0.1](https://github.com/cozy/cozy-ui/compare/v114.0.0...v114.0.1) (2024-12-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "114.0.1",
+  "version": "115.0.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -162,7 +162,7 @@
     "chart.js": "3.7.1",
     "classnames": "^2.2.5",
     "cozy-interapp": "^0.5.4",
-    "date-fns": "^1.28.5",
+    "date-fns": "2.30.0",
     "filesize": "8.0.7",
     "hammerjs": "^2.0.8",
     "intersection-observer": "0.11.0",

package/react/BarContextProvider/index.spec.jsx

@@ -22,7 +22,7 @@ const DumbHelloWorld = translate()(({ t, f, lang }) => (
   <div>
     {t('helloworld')}
     <br />
-    {f('2020-01-06', 'DDD MMM')}
+    {f('2020-01-06', 'D LLL', { useAdditionalDayOfYearTokens: true })}
     <br />
     {lang}
   </div>

package/react/DateMonthPicker/index.jsx

@@ -26,7 +26,7 @@ const MonthButton = ({ monthNum, onClick, isSelected }) => {
       )}
       onClick={handleClick}
     >
-      {f(d, 'MMM')}
+      {f(d, 'LLL')}
     </button>
   )
 }
@@ -50,7 +50,7 @@ const DateMonthPicker = ({ initialValue, onSelect }) => {
 
   const handleClickMonth = month => {
     const d = new Date(year, month, 1)
-    onSelect(format(d, 'YYYY-MM-DD'))
+    onSelect(format(d, 'yyyy-LL-dd'))
   }
   return (
     <div>
@@ -93,7 +93,7 @@ const dateMonthProp = function (props, propName, componentName) {
         '` supplied to' +
         ' `' +
         componentName +
-        '`. Should be in the form YYYY-MM.'
+        '`. Should be in the form yyyy-LL.'
     )
   }
 }

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -51,7 +51,7 @@ const FilePickerBodyItem = ({
   const Input = multiple ? Checkbox : Radio
 
   const listItemSecondaryContent = isFile(item)
-    ? `${f(item.updated_at, 'DD MMM YYYY')} - ${filesize(item.size, {
+    ? `${f(item.updated_at, 'dd LLL yyyy')} - ${filesize(item.size, {
         base: 10
       })}`
     : null

package/react/ListItem/ListItemFile/SecondaryText.jsx

@@ -12,7 +12,7 @@ const SecondaryText = ({ secondary, file }) => {
   if (secondary) return secondary
 
   const date = file?.metadata?.datetime
-    ? f(file?.metadata?.datetime, 'DD/MM/YYYY')
+    ? f(file?.metadata?.datetime, 'dd/LL/yyyy')
     : null
 
   return (

package/react/providers/I18n/format.jsx

@@ -1,23 +1,43 @@
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
 import format from 'date-fns/format'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 
 import { DEFAULT_LANG } from '.'
 
 const locales = {}
 let lang = DEFAULT_LANG
 
+/**
+ * Ensure that the locale is in the correct format for date-fns (see 2.0.0 BC https://github.com/date-fns/date-fns/blob/main/CHANGELOG.md#200---2019-08-20)
+ * @param {string} lang
+ */
+const ensureLocaleFormat = lang => {
+  switch (lang) {
+    case 'en':
+      return 'en-US'
+    case 'zh_cn':
+      return 'zh-CN'
+    case 'zh_tw':
+      return 'zh-TW'
+    default:
+      return lang
+  }
+}
+
 const getWarningMessage = lang =>
   `The "${lang}" locale isn't supported by date-fns. or has not been included in the build. Check if you have configured a ContextReplacementPlugin that is too restrictive.`
 
 export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => {
-  lang = userLang
+  lang = ensureLocaleFormat(userLang)
+  const ensureDefaultLang = ensureLocaleFormat(defaultLang)
   try {
-    locales[defaultLang] = require(`date-fns/locale/${defaultLang}/index.js`)
+    locales[
+      ensureDefaultLang
+    ] = require(`date-fns/locale/${ensureDefaultLang}/index.js`)
   } catch (err) {
-    console.warn(getWarningMessage(defaultLang))
+    console.warn(getWarningMessage(ensureDefaultLang))
   }
 
-  if (lang && lang !== defaultLang) {
+  if (lang && lang !== ensureDefaultLang) {
     try {
       locales[lang] = require(`date-fns/locale/${lang}/index.js`)
     } catch (e) {
@@ -29,10 +49,13 @@ export const provideDateFnsLocale = (userLang, defaultLang = DEFAULT_LANG) => {
 
 export const initFormat =
   (userLang, defaultLang = DEFAULT_LANG) =>
-  (date, formatStr) => {
+  (date, formatStr, opts = {}) => {
     const locale = provideDateFnsLocale(userLang, defaultLang)
-    return format(date, formatStr, { locale })
+    const ensureDate = date && typeof date === 'string' ? new Date(date) : date
+
+    return format(ensureDate, formatStr, { locale, ...opts })
   }
 
-export const formatLocallyDistanceToNow = date =>
-  distanceInWordsToNow(date, { locale: locales[lang] })
+export const formatLocallyDistanceToNow = date => {
+  return formatDistanceToNow(date, { locale: locales[lang] })
+}

package/react/providers/I18n/format.spec.jsx

@@ -10,6 +10,18 @@ describe('initFormat', () => {
   it('should not throw if a date-fns locale can not be found', () => {
     expect(() => initFormat('unknown-lang', 'unknown-default')).not.toThrow()
   })
+
+  it('should use the correct locale', () => {
+    const f = initFormat('fr', 'en')
+    const date = f(0, 'yyyy-LLLL-dd')
+    expect(date).toBe('1970-janvier-01')
+  })
+
+  it('should fallback english if a date-fns locale can not be found', () => {
+    const f = initFormat('unknown-lang', 'unknown-default')
+    const date = f(0, 'yyyy-LLLL-dd')
+    expect(date).toBe('1970-January-01')
+  })
 })
 
 describe('formatLocallyDistanceToNow', () => {

package/react/providers/I18n/index.spec.jsx

@@ -10,7 +10,7 @@ const DumbI18nHelloWorld = ({ t, f, lang }) => (
   <div>
     {t('helloworld')}
     <br />
-    {f('2020-01-06', 'DDD MMM')}
+    {f('2020-01-06', 'D LLL', { useAdditionalDayOfYearTokens: true })}
     <br />
     {lang}
   </div>

package/transpiled/react/DateMonthPicker/index.js

@@ -36,7 +36,7 @@ var MonthButton = function MonthButton(_ref) {
   return /*#__PURE__*/React.createElement("button", {
     className: cx(styles.DateMonthPicker__MonthButton, isSelected ? styles['DateMonthPicker__MonthButton--selected'] : null),
     onClick: handleClick
-  }, f(d, 'MMM'));
+  }, f(d, 'LLL'));
 };
 
 var useCounter = function useCounter(initialValue, min, max) {
@@ -75,7 +75,7 @@ var DateMonthPicker = function DateMonthPicker(_ref2) {
 
   var handleClickMonth = function handleClickMonth(month) {
     var d = new Date(year, month, 1);
-    onSelect(format(d, 'YYYY-MM-DD'));
+    onSelect(format(d, 'yyyy-LL-dd'));
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -108,7 +108,7 @@ var DateMonthPicker = function DateMonthPicker(_ref2) {
 
 var dateMonthProp = function dateMonthProp(props, propName, componentName) {
   if (!/^[0-9]{4}-[0-9]{2}$/.test(props[propName])) {
-    return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Should be in the form YYYY-MM.');
+    return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Should be in the form yyyy-LL.');
   }
 };
 

package/transpiled/react/FilePicker/FilePickerBodyItem.js

@@ -50,7 +50,7 @@ var FilePickerBodyItem = function FilePickerBodyItem(_ref) {
 
   var hasChoice = isValidFile(item, itemTypesAccepted) || isValidFolder(item, itemTypesAccepted);
   var Input = multiple ? Checkbox : Radio;
-  var listItemSecondaryContent = isFile(item) ? "".concat(f(item.updated_at, 'DD MMM YYYY'), " - ").concat(filesize(item.size, {
+  var listItemSecondaryContent = isFile(item) ? "".concat(f(item.updated_at, 'dd LLL yyyy'), " - ").concat(filesize(item.size, {
     base: 10
   })) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {

package/transpiled/react/ListItem/ListItemFile/SecondaryText.js

@@ -14,7 +14,7 @@ var SecondaryText = function SecondaryText(_ref) {
       f = _useI18n.f;
 
   if (secondary) return secondary;
-  var date = file !== null && file !== void 0 && (_file$metadata = file.metadata) !== null && _file$metadata !== void 0 && _file$metadata.datetime ? f(file === null || file === void 0 ? void 0 : (_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.datetime, 'DD/MM/YYYY') : null;
+  var date = file !== null && file !== void 0 && (_file$metadata = file.metadata) !== null && _file$metadata !== void 0 && _file$metadata.datetime ? f(file === null || file === void 0 ? void 0 : (_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.datetime, 'dd/LL/yyyy') : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, date ? date : '', (isExpired(file) || isExpiringSoon(file)) && /*#__PURE__*/React.createElement(React.Fragment, null, date ? ' · ' : '', /*#__PURE__*/React.createElement(ExpirationAnnotation, {
     file: file
   })));

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

@@ -1,8 +1,34 @@
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
 import format from 'date-fns/format';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import { DEFAULT_LANG } from "cozy-ui/transpiled/react/providers/I18n";
 var locales = {};
 var lang = DEFAULT_LANG;
+/**
+ * Ensure that the locale is in the correct format for date-fns (see 2.0.0 BC https://github.com/date-fns/date-fns/blob/main/CHANGELOG.md#200---2019-08-20)
+ * @param {string} lang
+ */
+
+var ensureLocaleFormat = function ensureLocaleFormat(lang) {
+  switch (lang) {
+    case 'en':
+      return 'en-US';
+
+    case 'zh_cn':
+      return 'zh-CN';
+
+    case 'zh_tw':
+      return 'zh-TW';
+
+    default:
+      return lang;
+  }
+};
 
 var getWarningMessage = function getWarningMessage(lang) {
   return "The \"".concat(lang, "\" locale isn't supported by date-fns. or has not been included in the build. Check if you have configured a ContextReplacementPlugin that is too restrictive.");
@@ -10,15 +36,16 @@ var getWarningMessage = function getWarningMessage(lang) {
 
 export var provideDateFnsLocale = function provideDateFnsLocale(userLang) {
   var defaultLang = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_LANG;
-  lang = userLang;
+  lang = ensureLocaleFormat(userLang);
+  var ensureDefaultLang = ensureLocaleFormat(defaultLang);
 
   try {
-    locales[defaultLang] = require("date-fns/locale/".concat(defaultLang, "/index.js"));
+    locales[ensureDefaultLang] = require("date-fns/locale/".concat(ensureDefaultLang, "/index.js"));
   } catch (err) {
-    console.warn(getWarningMessage(defaultLang));
+    console.warn(getWarningMessage(ensureDefaultLang));
   }
 
-  if (lang && lang !== defaultLang) {
+  if (lang && lang !== ensureDefaultLang) {
     try {
       locales[lang] = require("date-fns/locale/".concat(lang, "/index.js"));
     } catch (e) {
@@ -31,14 +58,16 @@ export var provideDateFnsLocale = function provideDateFnsLocale(userLang) {
 export var initFormat = function initFormat(userLang) {
   var defaultLang = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_LANG;
   return function (date, formatStr) {
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     var locale = provideDateFnsLocale(userLang, defaultLang);
-    return format(date, formatStr, {
+    var ensureDate = date && typeof date === 'string' ? new Date(date) : date;
+    return format(ensureDate, formatStr, _objectSpread({
       locale: locale
-    });
+    }, opts));
   };
 };
 export var formatLocallyDistanceToNow = function formatLocallyDistanceToNow(date) {
-  return distanceInWordsToNow(date, {
+  return formatDistanceToNow(date, {
     locale: locales[lang]
   });
 };