cozy-ui 113.9.0 → 114.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [114.0.0](https://github.com/cozy/cozy-ui/compare/v113.9.0...v114.0.0) (2024-12-12)
+
+
+### Features
+
+* Add QualificationModal component ([e2ebcc0](https://github.com/cozy/cozy-ui/commit/e2ebcc0))
+* Upgrade packages ([4ca7867](https://github.com/cozy/cozy-ui/commit/4ca7867))
+
+
+### BREAKING CHANGES
+
+* You must have `cozy-client >= 51.6.0` and `cozy-intent >= 2.29.1`
+
 # [113.9.0](https://github.com/cozy/cozy-ui/compare/v113.8.0...v113.9.0) (2024-12-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "113.9.0",
+  "version": "114.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -92,12 +92,12 @@
     "browserslist-config-cozy": "0.4.0",
     "bundlemon": "3.1.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^48.8.0",
+    "cozy-client": "^51.6.0",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
-    "cozy-intent": "1.16.1",
+    "cozy-intent": "^2.29.1",
     "cozy-logger": "^1.9.0",
-    "cozy-stack-client": "^47.4.0",
+    "cozy-stack-client": "^51.6.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.8",
@@ -181,9 +181,9 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=48.8.0",
+    "cozy-client": ">=51.6.0",
     "cozy-device-helper": "^2.0.0",
-    "cozy-intent": ">=1.3.0",
+    "cozy-intent": ">=2.29.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },

package/react/Paywall/Paywall.spec.jsx

@@ -42,15 +42,13 @@ describe('Paywall', () => {
     useInstanceInfo.mockReturnValue({
       context: {
         data: {
-          attributes: {
-            enable_premium_links: enablePremiumLinks,
-            manager_url: 'http://mycozy.cloud'
-          }
+          enable_premium_links: enablePremiumLinks,
+          manager_url: 'http://mycozy.cloud'
         }
       },
       instance: {
         data: {
-          attributes: { uuid: hasUuid ? '123' : null }
+          uuid: hasUuid ? '123' : null
         }
       },
       isLoaded: true

package/react/QualificationModal/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import QualificationModal from 'cozy-ui/transpiled/react/QualificationModal'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import CloudIcon from 'cozy-ui/transpiled/react/Icons/Cloud'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import FormControl from 'cozy-ui/transpiled/react/FormControl'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+initialState = { show: isTesting() ? true : false }
+
+const show = () => setState({show: true})
+const hide = () => setState({show: false})
+
+;
+
+<DemoProvider client={{ collection: () => ({ updateMetadataAttribute: () => {}}) }}>
+  <Button label={state.show ? "Close modal" : "Open modal"} variant="ghost" onClick={show} />
+  {state.show &&
+    <QualificationModal
+      file={{ name: "toto.txt", metadata: { qualification: { label: 'isp_invoice' } } }}
+      onClose={hide}
+    />
+  }
+</DemoProvider>
+```

package/react/QualificationModal/index.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+
+import { useClient } from 'cozy-client'
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers'
+import { getBoundT } from 'cozy-client/dist/models/document/locales'
+import { getQualification } from 'cozy-client/dist/models/document/qualification'
+
+import { locales } from './locales'
+import Icon from '../Icon'
+import FileTypeNoteIcon from '../Icons/FileTypeNote'
+import NestedSelectResponsive from '../NestedSelect/NestedSelectResponsive'
+import QualificationIconStack from '../QualificationIconStack'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const makeOptions = lang => {
+  const qualifT = getBoundT(lang)
+
+  return {
+    children: [
+      {
+        id: 'none',
+        title: qualifT('Scan.themes.none'),
+        icon: <QualificationIconStack />
+      },
+      ...themesList.map(theme => ({
+        id: theme.id,
+        title: qualifT(`Scan.themes.${theme.label}`),
+        icon: <QualificationIconStack theme={theme.label} />,
+        children: theme.items.map(item => ({
+          id: item.label,
+          item,
+          title: qualifT(`Scan.items.${item.label}`),
+          icon: isQualificationNote(item) ? (
+            <Icon icon={FileTypeNoteIcon} size={64} />
+          ) : (
+            <QualificationIconStack qualification={item.label} />
+          )
+        }))
+      }))
+    ]
+  }
+}
+
+const QualificationModal = ({ file, title, onClose }) => {
+  useExtendI18n(locales)
+  const client = useClient()
+  const { t, lang } = useI18n()
+
+  const qualificationLabel = getQualification(file)?.label
+  const options = useMemo(() => makeOptions(lang), [lang])
+
+  const isSelected = ({ id, item }) => {
+    return qualificationLabel
+      ? qualificationLabel === item?.label
+      : id === 'none'
+  }
+
+  const handleClick = async ({ id, item }) => {
+    const fileCollection = client.collection('io.cozy.files')
+    const removeQualification = qualificationLabel && id === 'none'
+
+    /*
+      In the case where we remove the qualification it's necessary to define the attribute to `null` and not `undefined`, with `undefined` the stack does not return the attribute and today the Redux store is not updated for a missing attribute.
+      As a result, the UI is not updated and continues to display the qualification on the document, even though it has been deleted in CouchDB.
+    */
+    await fileCollection.updateMetadataAttribute(file._id, {
+      qualification: removeQualification ? null : item
+    })
+
+    onClose()
+  }
+
+  return (
+    <NestedSelectResponsive
+      title={title || t('QualificationModal.title')}
+      options={options}
+      noDivider
+      document={file}
+      isSelected={isSelected}
+      onSelect={handleClick}
+      onClose={onClose}
+    />
+  )
+}
+
+QualificationModal.propTypes = {
+  file: PropTypes.object,
+  title: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+export default QualificationModal

package/react/QualificationModal/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "QualificationModal": {
+    "title": "Document type"
+  }
+}

package/react/QualificationModal/locales/fr.json

@@ -0,0 +1,5 @@
+{
+  "QualificationModal": {
+    "title": "Type de document"
+  }
+}

package/react/QualificationModal/locales/index.jsx

@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}

package/react/index.js

@@ -125,6 +125,8 @@ export { default as Thumbnail } from './Thumbnail'
 export { default as ButtonBase } from './ButtonBase'
 export { default as QualificationGrid } from './QualificationGrid'
 export { default as QualificationItem } from './QualificationItem'
+export { default as QualificationIconStack } from './QualificationIconStack'
+export { default as QualificationModal } from './QualificationModal'
 export { default as Timeline } from './Timeline'
 export { default as TimelineConnector } from './TimelineConnector'
 export { default as TimelineContent } from './TimelineContent'

package/transpiled/react/QualificationModal/index.js

@@ -0,0 +1,126 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import { useClient } from 'cozy-client';
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
+import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers';
+import { getBoundT } from 'cozy-client/dist/models/document/locales';
+import { getQualification } from 'cozy-client/dist/models/document/qualification';
+import { locales } from "cozy-ui/transpiled/react/QualificationModal/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
+import NestedSelectResponsive from "cozy-ui/transpiled/react/NestedSelect/NestedSelectResponsive";
+import QualificationIconStack from "cozy-ui/transpiled/react/QualificationIconStack";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var makeOptions = function makeOptions(lang) {
+  var qualifT = getBoundT(lang);
+  return {
+    children: [{
+      id: 'none',
+      title: qualifT('Scan.themes.none'),
+      icon: /*#__PURE__*/React.createElement(QualificationIconStack, null)
+    }].concat(_toConsumableArray(themesList.map(function (theme) {
+      return {
+        id: theme.id,
+        title: qualifT("Scan.themes.".concat(theme.label)),
+        icon: /*#__PURE__*/React.createElement(QualificationIconStack, {
+          theme: theme.label
+        }),
+        children: theme.items.map(function (item) {
+          return {
+            id: item.label,
+            item: item,
+            title: qualifT("Scan.items.".concat(item.label)),
+            icon: isQualificationNote(item) ? /*#__PURE__*/React.createElement(Icon, {
+              icon: FileTypeNoteIcon,
+              size: 64
+            }) : /*#__PURE__*/React.createElement(QualificationIconStack, {
+              qualification: item.label
+            })
+          };
+        })
+      };
+    })))
+  };
+};
+
+var QualificationModal = function QualificationModal(_ref) {
+  var _getQualification;
+
+  var file = _ref.file,
+      title = _ref.title,
+      onClose = _ref.onClose;
+  useExtendI18n(locales);
+  var client = useClient();
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t,
+      lang = _useI18n.lang;
+
+  var qualificationLabel = (_getQualification = getQualification(file)) === null || _getQualification === void 0 ? void 0 : _getQualification.label;
+  var options = useMemo(function () {
+    return makeOptions(lang);
+  }, [lang]);
+
+  var isSelected = function isSelected(_ref2) {
+    var id = _ref2.id,
+        item = _ref2.item;
+    return qualificationLabel ? qualificationLabel === (item === null || item === void 0 ? void 0 : item.label) : id === 'none';
+  };
+
+  var handleClick = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
+      var id, item, fileCollection, removeQualification;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              id = _ref3.id, item = _ref3.item;
+              fileCollection = client.collection('io.cozy.files');
+              removeQualification = qualificationLabel && id === 'none';
+              /*
+                In the case where we remove the qualification it's necessary to define the attribute to `null` and not `undefined`, with `undefined` the stack does not return the attribute and today the Redux store is not updated for a missing attribute.
+                As a result, the UI is not updated and continues to display the qualification on the document, even though it has been deleted in CouchDB.
+              */
+
+              _context.next = 5;
+              return fileCollection.updateMetadataAttribute(file._id, {
+                qualification: removeQualification ? null : item
+              });
+
+            case 5:
+              onClose();
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleClick(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(NestedSelectResponsive, {
+    title: title || t('QualificationModal.title'),
+    options: options,
+    noDivider: true,
+    document: file,
+    isSelected: isSelected,
+    onSelect: handleClick,
+    onClose: onClose
+  });
+};
+
+QualificationModal.propTypes = {
+  file: PropTypes.object,
+  title: PropTypes.string,
+  onClose: PropTypes.func
+};
+export default QualificationModal;

package/transpiled/react/QualificationModal/locales/index.js

@@ -0,0 +1,14 @@
+var en = {
+  QualificationModal: {
+    title: "Document type"
+  }
+};
+var fr = {
+  QualificationModal: {
+    title: "Type de document"
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};

package/transpiled/react/index.js

@@ -98,6 +98,8 @@ export { default as Thumbnail } from './Thumbnail';
 export { default as ButtonBase } from './ButtonBase';
 export { default as QualificationGrid } from './QualificationGrid';
 export { default as QualificationItem } from './QualificationItem';
+export { default as QualificationIconStack } from './QualificationIconStack';
+export { default as QualificationModal } from './QualificationModal';
 export { default as Timeline } from './Timeline';
 export { default as TimelineConnector } from './TimelineConnector';
 export { default as TimelineContent } from './TimelineContent';