cozy-ui 80.0.0 → 80.0.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [80.0.2](https://github.com/cozy/cozy-ui/compare/v80.0.1...v80.0.2) (2023-01-19)
+
+
+### Bug Fixes
+
+* Force formatLocallyDistanceToNowStrict to use whole number of day ([a30442f](https://github.com/cozy/cozy-ui/commit/a30442f))
+
+## [80.0.1](https://github.com/cozy/cozy-ui/compare/v80.0.0...v80.0.1) (2023-01-19)
+
+
+### Bug Fixes
+
+* **IllustrationDialog:** The title was not centered properly ([584a58c](https://github.com/cozy/cozy-ui/commit/584a58c))
+
 # [80.0.0](https://github.com/cozy/cozy-ui/compare/v79.5.0...v80.0.0) (2023-01-18)
 
 

package/jest.config.js

@@ -0,0 +1,27 @@
+process.env.TZ = 'UTC'
+
+module.exports = {
+  testURL: 'http://localhost/',
+  moduleFileExtensions: ['js', 'jsx', 'json', 'styl', 'ts', 'tsx'],
+  setupFilesAfterEnv: ['./test/jestsetup.js', 'jest-canvas-mock'],
+  moduleDirectories: ['node_modules', 'src', 'react-styleguidist/lib'],
+  moduleNameMapper: {
+    '\\.(png|gif|jpe?g|svg)$': '<rootDir>/test/__mocks__/fileMock.js',
+    '\\.styl$': 'identity-obj-proxy',
+    'react-styleguidist.+\\.jsx?$': 'babel-jest',
+    '^rsg-components(.*)$':
+      '<rootDir>/node_modules/react-styleguidist/lib/client/rsg-components$1',
+    'react-pdf/dist/entry.webpack.js': 'react-pdf',
+    '^cozy-client$': 'cozy-client/dist/index'
+  },
+  transformIgnorePatterns: ['node_modules/(?!(react-styleguidist)/)'],
+  testPathIgnorePatterns: ['/node_modules/', '/transpiled/', '/dist/'],
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest'
+  },
+  globals: {
+    __ALLOW_HTTP__: false,
+    cozy: {}
+  },
+  snapshotSerializers: ['enzyme-to-json/serializer']
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "80.0.0",
+  "version": "80.0.2",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -121,6 +121,7 @@
     "lodash": "4.17.21",
     "michelangelo": "https://github.com/cozy/michelangelo.git",
     "mini-css-extract-plugin": "0.6.0",
+    "mockdate": "^3.0.5",
     "nodemon": "1.19.4",
     "npm-run-all": "4.1.5",
     "postcss-cli": "6.1.3",
@@ -203,52 +204,6 @@
       "cozy"
     ]
   },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "./test/jestsetup.js",
-      "jest-canvas-mock"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json",
-      "styl",
-      "ts",
-      "tsx"
-    ],
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/transpiled/",
-      "/dist/"
-    ],
-    "moduleDirectories": [
-      "node_modules",
-      "src",
-      "react-styleguidist/lib"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx|js|jsx)?$": "babel-jest"
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!(react-styleguidist)/)"
-    ],
-    "moduleNameMapper": {
-      "\\.(png|gif|jpe?g|svg)$": "<rootDir>/test/__mocks__/fileMock.js",
-      "\\.styl$": "identity-obj-proxy",
-      "react-styleguidist.+\\.jsx?$": "babel-jest",
-      "^rsg-components(.*)$": "<rootDir>/node_modules/react-styleguidist/lib/client/rsg-components$1",
-      "react-pdf/dist/entry.webpack.js": "react-pdf",
-      "^cozy-client$": "cozy-client/dist/index"
-    },
-    "globals": {
-      "__ALLOW_HTTP__": false,
-      "cozy": {}
-    },
-    "testURL": "http://localhost/",
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
-  },
   "browserslist": [
     "extends browserslist-config-cozy"
   ]

package/react/CozyDialogs/IllustrationDialog.jsx

@@ -17,7 +17,11 @@ const IllustrationDialog = props => {
     fullScreen,
     dialogActionsProps,
     dialogContentProps
-  } = useCozyDialog({ ...props, isFluidTitle: true })
+  } = useCozyDialog({
+    ...props,
+    isFluidTitle: true,
+    disableTitleAutoPadding: true
+  })
 
   const onBackOrClose = onBack || onClose
 
@@ -44,9 +48,17 @@ const IllustrationDialog = props => {
       <DialogContent {...dialogContentProps}>
         <div className="dialogContentInner withFluidActions">
           {title && (
-            <DialogTitle {...dialogTitleProps}>
-              <div className="u-flex u-flex-justify-center">{title}</div>
-            </DialogTitle>
+            <div className="dialogTitleFluidContainer">
+              <DialogTitle
+                {...dialogTitleProps}
+                className={cx(
+                  `u-flex u-flex-justify-center`,
+                  dialogTitleProps.className
+                )}
+              >
+                {title}
+              </DialogTitle>
+            </div>
           )}
           <div
             className={cx('dialogContentWrapper', {

package/react/I18n/format.jsx

@@ -1,7 +1,13 @@
 import format from 'date-fns/format'
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now'
+import distanceInWordsStrict from 'date-fns/distance_in_words_strict'
+import differenceInCalendarDays from 'date-fns/difference_in_calendar_days'
+import getHours from 'date-fns/get_hours'
+import setHours from 'date-fns/set_hours'
+import setMinutes from 'date-fns/set_minutes'
+import getMinutes from 'date-fns/get_minutes'
+
 import { DEFAULT_LANG } from '.'
-import formatDistanceToNow from 'date-fns/distance_in_words_to_now'
-import formatDistanceStrict from 'date-fns/distance_in_words_strict'
 
 const locales = {}
 let lang = DEFAULT_LANG
@@ -36,7 +42,32 @@ export const initFormat = (userLang, defaultLang = DEFAULT_LANG) => (
 }
 
 export const formatLocallyDistanceToNow = date =>
-  formatDistanceToNow(date, { locale: locales[lang] })
+  distanceInWordsToNow(date, { locale: locales[lang] })
+
+export const setHoursAndMinutesFromDate = (date, refDate) => {
+  let newDate = date
+  newDate = setHours(newDate, getHours(refDate))
+  newDate = setMinutes(newDate, getMinutes(refDate))
+  return newDate
+}
 
-export const formatLocallyDistanceToNowStrict = date =>
-  formatDistanceStrict(Date.now(), date, { locale: locales[lang] })
+/**
+ * Return the distance between the given dates in words, using strict units.
+ * If the distance is in days, we force the time to be a whole number of days
+ * @param {Date} date - Future date compared to the current date
+ * @returns {string} Number of hours/day/month that separates the date from the present moment
+ */
+export const formatLocallyDistanceToNowStrict = date => {
+  const now = new Date()
+  const days = differenceInCalendarDays(date, now)
+  const isSameDay = days === 0
+  const isInMonth = days > 0 && days < 32
+
+  const refDate = isSameDay ? date : setHoursAndMinutesFromDate(date, now)
+  const unit = isInMonth ? 'd' : undefined
+
+  return distanceInWordsStrict(now, refDate, {
+    locale: locales[lang],
+    unit
+  })
+}

package/react/I18n/format.spec.jsx

@@ -1,7 +1,10 @@
+import MockDate from 'mockdate'
+
 import {
   initFormat,
   formatLocallyDistanceToNow,
-  formatLocallyDistanceToNowStrict
+  formatLocallyDistanceToNowStrict,
+  setHoursAndMinutesFromDate
 } from './format'
 
 describe('initFormat', () => {
@@ -75,6 +78,22 @@ describe('formatLocallyDistanceToNowStrict', () => {
     expect(result).toEqual('1 hour')
   })
 
+  it('should formatDistanceToNowStrict with one day', () => {
+    const date = Date.now() + 24 * 60 * 60 * 1000 // 1d
+
+    const result = formatLocallyDistanceToNowStrict(date)
+
+    expect(result).toEqual('1 day')
+  })
+
+  it('should formatDistanceToNowStrict with two days', () => {
+    const date = Date.now() + 2 * 24 * 60 * 60 * 1000 // 2d
+
+    const result = formatLocallyDistanceToNowStrict(date)
+
+    expect(result).toEqual('2 days')
+  })
+
   it('should formatDistanceToNowStrict with very high value', () => {
     const date = Date.now() + 42 * 24 * 60 * 60 * 1000 // 42d
 
@@ -82,4 +101,166 @@ describe('formatLocallyDistanceToNowStrict', () => {
 
     expect(result).toEqual('1 month')
   })
+
+  describe('for hours', () => {
+    afterEach(() => {
+      MockDate.reset()
+    })
+
+    it('should return 1 hour', () => {
+      MockDate.set('2023-01-01T00:00:00')
+      const date = new Date('2023-01-01T01:00:00')
+
+      const result = formatLocallyDistanceToNowStrict(date)
+
+      expect(result).toEqual('1 hour')
+    })
+
+    it('should return 23 hours', () => {
+      MockDate.set('2023-01-01T00:00:00')
+      const date = new Date('2023-01-01T23:59:00')
+
+      const result = formatLocallyDistanceToNowStrict(date)
+
+      expect(result).toEqual('23 hours')
+    })
+
+    it('should return 11 hours', () => {
+      MockDate.set('2023-01-01T12:00:00')
+      const date = new Date('2023-01-01T23:59:00')
+
+      const result = formatLocallyDistanceToNowStrict(date)
+
+      expect(result).toEqual('11 hours')
+    })
+  })
+
+  describe('for days', () => {
+    describe('at midnight', () => {
+      beforeEach(() => {
+        MockDate.set('2023-01-01T00:00:00')
+      })
+
+      afterEach(() => {
+        MockDate.reset()
+      })
+
+      it('should return 1 day when 00:00:00', () => {
+        const date = new Date('2023-01-02T00:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('1 day')
+      })
+
+      it('should return 1 day when 01:00:00', () => {
+        const date = new Date('2023-01-02T01:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('1 day')
+      })
+
+      it('should return 1 day when 23:59:00', () => {
+        const date = new Date('2023-01-02T23:59:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('1 day')
+      })
+
+      it('should return 2 days when 00:00:00', () => {
+        const date = new Date('2023-01-03T00:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('2 days')
+      })
+
+      it('should return 2 days when 01:00:00', () => {
+        const date = new Date('2023-01-03T01:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('2 days')
+      })
+
+      it('should return 2 days when 23:59:00', () => {
+        const date = new Date('2023-01-03T23:59:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('2 days')
+      })
+    })
+
+    describe('at midday', () => {
+      beforeEach(() => {
+        MockDate.set('2023-01-01T12:00:00')
+      })
+
+      afterEach(() => {
+        MockDate.reset()
+      })
+
+      it('should return 1 day when 00:00:00', () => {
+        const date = new Date('2023-01-02T00:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('1 day')
+      })
+
+      it('should return 1 day when 11:00:00', () => {
+        const date = new Date('2023-01-02T11:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('1 day')
+      })
+
+      it('should return 1 day when 23:59:00', () => {
+        const date = new Date('2023-01-02T23:59:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('1 day')
+      })
+
+      it('should return 2 days when 00:00:00', () => {
+        const date = new Date('2023-01-03T00:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('2 days')
+      })
+
+      it('should return 2 days when 01:00:00', () => {
+        const date = new Date('2023-01-03T01:00:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('2 days')
+      })
+
+      it('should return 2 days when 23:59:00', () => {
+        const date = new Date('2023-01-03T23:59:00')
+
+        const result = formatLocallyDistanceToNowStrict(date)
+
+        expect(result).toEqual('2 days')
+      })
+    })
+  })
+})
+
+describe('setHoursAndMinutesFromDate', () => {
+  it('should return correct date', () => {
+    const res = setHoursAndMinutesFromDate(
+      new Date('2023-01-03T00:00:30'),
+      new Date('2023-01-01T12:24:00')
+    )
+
+    expect(res).toStrictEqual(new Date('2023-01-03T12:24:30'))
+  })
 })

package/transpiled/react/CozyDialogs/IllustrationDialog.js

@@ -22,7 +22,8 @@ var IllustrationDialog = function IllustrationDialog(props) {
       actionsLayout = props.actionsLayout;
 
   var _useCozyDialog = useCozyDialog(_objectSpread(_objectSpread({}, props), {}, {
-    isFluidTitle: true
+    isFluidTitle: true,
+    disableTitleAutoPadding: true
   })),
       dialogProps = _useCozyDialog.dialogProps,
       dialogTitleProps = _useCozyDialog.dialogTitleProps,
@@ -43,9 +44,11 @@ var IllustrationDialog = function IllustrationDialog(props) {
     onClick: onBackOrClose
   }), /*#__PURE__*/React.createElement(DialogContent, dialogContentProps, /*#__PURE__*/React.createElement("div", {
     className: "dialogContentInner withFluidActions"
-  }, title && /*#__PURE__*/React.createElement(DialogTitle, dialogTitleProps, /*#__PURE__*/React.createElement("div", {
-    className: "u-flex u-flex-justify-center"
-  }, title)), /*#__PURE__*/React.createElement("div", {
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: "dialogTitleFluidContainer"
+  }, /*#__PURE__*/React.createElement(DialogTitle, _extends({}, dialogTitleProps, {
+    className: cx("u-flex u-flex-justify-center", dialogTitleProps.className)
+  }), title)), /*#__PURE__*/React.createElement("div", {
     className: cx('dialogContentWrapper', {
       withActions: Boolean(actions)
     })

package/transpiled/react/I18n/format.js

@@ -1,7 +1,12 @@
 import format from 'date-fns/format';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
+import differenceInCalendarDays from 'date-fns/difference_in_calendar_days';
+import getHours from 'date-fns/get_hours';
+import setHours from 'date-fns/set_hours';
+import setMinutes from 'date-fns/set_minutes';
+import getMinutes from 'date-fns/get_minutes';
 import { DEFAULT_LANG } from "cozy-ui/transpiled/react/I18n";
-import formatDistanceToNow from 'date-fns/distance_in_words_to_now';
-import formatDistanceStrict from 'date-fns/distance_in_words_strict';
 var locales = {};
 var lang = DEFAULT_LANG;
 
@@ -39,12 +44,32 @@ export var initFormat = function initFormat(userLang) {
   };
 };
 export var formatLocallyDistanceToNow = function formatLocallyDistanceToNow(date) {
-  return formatDistanceToNow(date, {
+  return distanceInWordsToNow(date, {
     locale: locales[lang]
   });
 };
+export var setHoursAndMinutesFromDate = function setHoursAndMinutesFromDate(date, refDate) {
+  var newDate = date;
+  newDate = setHours(newDate, getHours(refDate));
+  newDate = setMinutes(newDate, getMinutes(refDate));
+  return newDate;
+};
+/**
+ * Return the distance between the given dates in words, using strict units.
+ * If the distance is in days, we force the time to be a whole number of days
+ * @param {Date} date - Future date compared to the current date
+ * @returns {string} Number of hours/day/month that separates the date from the present moment
+ */
+
 export var formatLocallyDistanceToNowStrict = function formatLocallyDistanceToNowStrict(date) {
-  return formatDistanceStrict(Date.now(), date, {
-    locale: locales[lang]
+  var now = new Date();
+  var days = differenceInCalendarDays(date, now);
+  var isSameDay = days === 0;
+  var isInMonth = days > 0 && days < 32;
+  var refDate = isSameDay ? date : setHoursAndMinutesFromDate(date, now);
+  var unit = isInMonth ? 'd' : undefined;
+  return distanceInWordsStrict(now, refDate, {
+    locale: locales[lang],
+    unit: unit
   });
 };