cozy-ui 113.8.0 → 114.0.0

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

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
@@ -34,23 +34,31 @@ I18nHelloWorldOldAPI.contextTypes = {
 
 describe('new context api', () => {
   it('should provide t and f and lang through useI18n hook', () => {
-    const root = mount(
+    render(
       <I18n lang="en" dictRequire={() => locales}>
         <I18nHelloWorldHook />
       </I18n>
     )
-    expect(root.html()).toBe('<div>Hello World !<br>6 Jan<br>en</div>')
+    expect(
+      screen.getByText('Hello World !', { exact: false })
+    ).toBeInTheDocument()
+    expect(screen.getByText('6 Jan', { exact: false })).toBeInTheDocument()
+    expect(screen.getByText('en', { exact: false })).toBeInTheDocument()
   })
 })
 
 describe('old context api', () => {
   it('should provide t and f and lang through old context API', () => {
-    const root = mount(
+    render(
       <I18n lang="en" dictRequire={() => locales}>
         <I18nHelloWorldOldAPI />
       </I18n>
     )
-    expect(root.html()).toBe('<div>Hello World !<br>6 Jan<br>en</div>')
+    expect(
+      screen.getByText('Hello World !', { exact: false })
+    ).toBeInTheDocument()
+    expect(screen.getByText('6 Jan', { exact: false })).toBeInTheDocument()
+    expect(screen.getByText('en', { exact: false })).toBeInTheDocument()
   })
 })
 

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

@@ -1,3 +1,4 @@
+import { render, screen } from '@testing-library/react'
 import React from 'react'
 
 import { I18n } from '.'
@@ -29,9 +30,8 @@ class MockComponent extends React.Component {
 }
 
 describe('with locales', () => {
-  let root
   const setup = ({ lang, Component }) => {
-    root = mount(
+    render(
       <I18n lang={lang} dictRequire={localeCode => globalLocales[localeCode]}>
         <Component />
       </I18n>
@@ -42,9 +42,9 @@ describe('with locales', () => {
     describe(description, () => {
       it('should provide t with correct locale strings', () => {
         setup({ lang: 'en', Component })
-        expect(root.text()).toBe('Hello local world !')
+        expect(screen.getByText('Hello local world !')).toBeInTheDocument()
         setup({ lang: 'fr', Component })
-        expect(root.text()).toBe('Bonjour le monde local !')
+        expect(screen.getByText('Bonjour le monde local !')).toBeInTheDocument()
       })
     })
   }

package/transpiled/react/FileInput/index.js

@@ -47,7 +47,8 @@ var FileInput = function FileInput(_ref) {
       } else {
         _onChange(Array.from(e.target.files)[0]);
       }
-    }
+    },
+    "data-testid": "file-input"
   }, inputProps)));
 };
 

package/transpiled/react/QualificationIconStack/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["qualification"];
+var _excluded = ["theme", "qualification"];
 import PropTypes from 'prop-types';
 import React from 'react';
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification';
@@ -11,7 +11,9 @@ import BankCheckIcon from "cozy-ui/transpiled/react/Icons/BankCheck";
 import BenefitIcon from "cozy-ui/transpiled/react/Icons/Benefit";
 import BillIcon from "cozy-ui/transpiled/react/Icons/Bill";
 import CarIcon from "cozy-ui/transpiled/react/Icons/Car";
+import ChessIcon from "cozy-ui/transpiled/react/Icons/Chess";
 import ChildIcon from "cozy-ui/transpiled/react/Icons/Child";
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import EmailIcon from "cozy-ui/transpiled/react/Icons/Email";
 import EuroIcon from "cozy-ui/transpiled/react/Icons/Euro";
 import ExchangeIcon from "cozy-ui/transpiled/react/Icons/Exchange";
@@ -49,13 +51,15 @@ function FileDuotoneWhite(props) {
   })));
 }
 
-var qualificationIcon = {
+var IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
   benefit: BenefitIcon,
   bill: BillIcon,
   car: CarIcon,
+  chess: ChessIcon,
   child: ChildIcon,
+  dots: DotsIcon,
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
@@ -81,12 +85,25 @@ var qualificationIcon = {
   water: WaterIcon,
   work: WorkIcon
 };
+var themeIconByLabel = {
+  identity: 'people',
+  family: 'team',
+  work_study: 'work',
+  health: 'heart',
+  home: 'home',
+  transport: 'car',
+  activity: 'chess',
+  finance: 'bank',
+  invoice: 'bill',
+  others: 'dots'
+};
 
 var QualificationIconStack = function QualificationIconStack(_ref) {
-  var qualification = _ref.qualification,
+  var theme = _ref.theme,
+      qualification = _ref.qualification,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var QualificationIcon = qualificationIcon[getIconByLabel(qualification)];
+  var ForegroundIcon = qualification ? IconByLabel[getIconByLabel(qualification)] : theme ? IconByLabel[themeIconByLabel[theme]] : null;
   return /*#__PURE__*/React.createElement(IconStack, _extends({}, props, {
     backgroundIcon: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
       className: "u-pos-absolute",
@@ -98,7 +115,7 @@ var QualificationIconStack = function QualificationIconStack(_ref) {
       size: 32
     })),
     foregroundIcon: /*#__PURE__*/React.createElement(Icon, {
-      icon: QualificationIcon,
+      icon: ForegroundIcon,
       color: "#E049BF",
       size: 16
     })
@@ -107,6 +124,9 @@ var QualificationIconStack = function QualificationIconStack(_ref) {
 
 QualificationIconStack.propTypes = {
   /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
-  qualification: PropTypes.string.isRequired
+  qualification: PropTypes.string,
+
+  /** The name of the qualification theme (indentity, family, etc.) */
+  theme: PropTypes.string
 };
 export default QualificationIconStack;

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/deprecated/ViewStack/example.js

@@ -34,7 +34,7 @@ var Slide = function Slide(_ref2) {
               return stackPop();
 
             case 2:
-              // No alerts during enzyme tests
+              // No alerts during tests
               if (number === 2 && !global.mount) {
                 alert('You went back to the first slide');
               }

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';