cozy-ui 114.0.0 → 115.0.0

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.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)
+
+
+### Bug Fixes
+
+* **Export:** Wasn't good for Alert and I18n ([4770b0a](https://github.com/cozy/cozy-ui/commit/4770b0a))
+
 # [114.0.0](https://github.com/cozy/cozy-ui/compare/v113.9.0...v114.0.0) (2024-12-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "114.0.0",
+  "version": "115.0.0",
   "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/index.js

@@ -6,7 +6,7 @@ export { default as Banner } from './Banner'
 export { default as ButtonAction } from './deprecated/ButtonAction'
 export { default as BottomDrawer } from './deprecated/BottomDrawer'
 export { default as BarButton } from './BarButton'
-export { default as I18n, translate, useI18n } from './I18n'
+export { default as I18n, translate, useI18n } from './providers/I18n'
 export { default as Icon } from './Icon'
 export { default as Sprite } from './Icon/Sprite'
 export { default as Sidebar } from './Sidebar'
@@ -134,7 +134,7 @@ export { default as TimelineDot } from './TimelineDot'
 export { default as TimelineItem } from './TimelineItem'
 export { default as TimelineOppositeContent } from './TimelineOppositeContent'
 export { default as TimelineSeparator } from './TimelineSeparator'
-export { default as AlertProvider, useAlert } from './Alert'
+export { default as AlertProvider, useAlert } from './providers/Alert'
 export { default as Modal } from './Modal'
 export { ListSkeleton, ListItemSkeleton } from './Skeletons'
 export { default as ActionsBar } from './ActionsBar'

package/react/providers/I18n/format.jsx

@@ -1,5 +1,5 @@
-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 '.'
 
@@ -29,10 +29,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/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/index.js

@@ -6,7 +6,7 @@ export { default as Banner } from './Banner';
 export { default as ButtonAction } from './deprecated/ButtonAction';
 export { default as BottomDrawer } from './deprecated/BottomDrawer';
 export { default as BarButton } from './BarButton';
-export { default as I18n, translate, useI18n } from './I18n';
+export { default as I18n, translate, useI18n } from './providers/I18n';
 export { default as Icon } from './Icon';
 export { default as Sprite } from './Icon/Sprite';
 export { default as Sidebar } from './Sidebar';
@@ -107,7 +107,7 @@ export { default as TimelineDot } from './TimelineDot';
 export { default as TimelineItem } from './TimelineItem';
 export { default as TimelineOppositeContent } from './TimelineOppositeContent';
 export { default as TimelineSeparator } from './TimelineSeparator';
-export { default as AlertProvider, useAlert } from './Alert';
+export { default as AlertProvider, useAlert } from './providers/Alert';
 export { default as Modal } from './Modal';
 export { ListSkeleton, ListItemSkeleton } from './Skeletons';
 export { default as ActionsBar } from './ActionsBar';

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

@@ -1,5 +1,11 @@
-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;
@@ -31,14 +37,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]
   });
 };