cozy-ui 89.0.0 → 90.0.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [90.0.0](https://github.com/cozy/cozy-ui/compare/v89.1.0...v90.0.0) (2023-07-20)
+
+
+### Features
+
+* Add ButtonBase component ([9e77485](https://github.com/cozy/cozy-ui/commit/9e77485))
+* Add QualificationGrid and QualificationItem components ([b773099](https://github.com/cozy/cozy-ui/commit/b773099))
+* Upgrade cozy-client from 35.2.0 to 38.11.1 ([d59b93b](https://github.com/cozy/cozy-ui/commit/d59b93b))
+
+
+### BREAKING CHANGES
+
+* you must have `cozy-client >= 38.11.1`
+
+# [89.1.0](https://github.com/cozy/cozy-ui/compare/v89.0.0...v89.1.0) (2023-07-18)
+
+
+### Features
+
+* **ListItemFile:** Show correct icon for notes ([ab03f13](https://github.com/cozy/cozy-ui/commit/ab03f13))
+
 # [89.0.0](https://github.com/cozy/cozy-ui/compare/v88.6.0...v89.0.0) (2023-07-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "89.0.0",
+  "version": "90.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -91,14 +91,14 @@
     "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
     "copyfiles": "2.4.1",
-    "cozy-client": "^35.2.0",
+    "cozy-client": "^38.11.1",
     "cozy-device-helper": "2.0.0",
     "cozy-flags": "^2.10.1",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": "1.16.1",
     "cozy-logger": "^1.9.0",
     "cozy-sharing": "^3.10.0",
-    "cozy-stack-client": "^35.0.0",
+    "cozy-stack-client": "^38.9.2",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.8",
@@ -181,7 +181,7 @@
     "rooks": "^5.11.2"
   },
   "peerDependencies": {
-    "cozy-client": ">=35.2.0",
+    "cozy-client": ">=38.11.1",
     "cozy-device-helper": "^2.0.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-intent": ">=1.3.0",

package/react/ButtonBase/Readme.md

@@ -0,0 +1 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/api/button-base/).

package/react/ButtonBase/index.js

@@ -0,0 +1,3 @@
+import ButtonBase from '@material-ui/core/ButtonBase'
+
+export default ButtonBase

package/react/List/Readme.md

@@ -285,8 +285,6 @@ import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 ```jsx
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import List from 'cozy-ui/transpiled/react/List'
-import ListItemContact from 'cozy-ui/transpiled/react/ListItem/ListItemContact'
-import ListItemFile from 'cozy-ui/transpiled/react/ListItem/ListItemFile'
 import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
@@ -340,6 +338,15 @@ const files = [
         label: 'driver_license'
       }
     }
+  },
+  {
+    _type: 'io.cozy.files',
+    type: 'file',
+    name: 'Note01.cozy-note',
+    metadata: {
+      title: 'note title',
+      version: 0
+    }
   }
 ]
 
@@ -371,6 +378,11 @@ const files = [
       onClick={() => {}}
     />
     <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[1]}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
     <ListItem button>
       <ListItemIcon>
         <Icon icon={FiletypeTextIcon} width="32" height="32" />

package/react/ListItem/ListItemFile/ItemIcon.jsx

@@ -2,9 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useClient } from 'cozy-client'
+import { isNote } from 'cozy-client/dist/models/file'
 
 import Icon from '../../Icon'
 import FiletypeTextIcon from '../../Icons/FileTypeText'
+import FiletypeNoteIcon from '../../Icons/FileTypeNote'
 import FileImageLoader from '../../FileImageLoader'
 import Thumbnail from '../../Thumbnail'
 import Skeleton from '../../Skeleton'
@@ -32,7 +34,7 @@ const ItemIcon = ({ icon, file }) => {
       }}
       renderFallback={() => (
         <Thumbnail>
-          <Icon icon={FiletypeTextIcon} />
+          <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
         </Thumbnail>
       )}
     />

package/react/QualificationGrid/Readme.md

@@ -0,0 +1,25 @@
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import QualificationGrid from 'cozy-ui/transpiled/react/QualificationGrid'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const initialVariants = [{ noUndefined: false, noOthers: false }]
+initialState = { selectedQualification: undefined }
+
+;
+
+<DemoProvider>
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <>
+        <div className="u-mb-1">Selected qualification: {state.selectedQualification}</div>
+        <QualificationGrid
+          noUndefined={variant.noUndefined}
+          noOthers={variant.noOthers}
+          onClick={qualification => setState({ selectedQualification: qualification })}
+        />
+      </>
+    )}
+  </Variants>
+</DemoProvider>
+```

package/react/QualificationGrid/helpers.js

@@ -0,0 +1,7 @@
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData'
+import flag from 'cozy-flags'
+
+export const getThemesList = () =>
+  flag('hide.healthTheme.enabled')
+    ? themesList.filter(theme => theme.label !== 'health')
+    : themesList

package/react/QualificationGrid/index.jsx

@@ -0,0 +1,88 @@
+import React, { Fragment, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import Grid from '../Grid'
+import QualificationItem from '../QualificationItem'
+import { useI18n } from '../I18n'
+import PeopleIcon from '../Icons/People'
+import TeamIcon from '../Icons/Team'
+import CompanyIcon from '../Icons/Company'
+import HeartIcon from '../Icons/Heart'
+import HomeIcon from '../Icons/Home'
+import CarIcon from '../Icons/Car'
+import CompassIcon from '../Icons/Compass'
+import BankIcon from '../Icons/Bank'
+import BillIcon from '../Icons/Bill'
+import DotsIcon from '../Icons/Dots'
+
+import withLocales from './locales/withLocales'
+import { getThemesList } from './helpers'
+
+const IconByName = {
+  people: PeopleIcon,
+  team: TeamIcon,
+  company: CompanyIcon,
+  heart: HeartIcon,
+  home: HomeIcon,
+  car: CarIcon,
+  compass: CompassIcon,
+  bank: BankIcon,
+  bill: BillIcon,
+  dots: DotsIcon
+}
+
+const QualificationGrid = ({ noUndefined, noOthers, onClick }) => {
+  const themesList = getThemesList()
+  const { t } = useI18n()
+  const [selectedQualification, setSelectedQualification] = useState()
+
+  const handleClick = theme => {
+    onClick(theme?.label)
+    setSelectedQualification(theme?.label)
+  }
+
+  return (
+    <Grid container spacing={1}>
+      {!noUndefined && (
+        <Grid item xs={3} sm={2}>
+          <QualificationItem
+            label={t('themes.undefined')}
+            isSelected={selectedQualification === undefined}
+            onClick={() => handleClick()}
+          />
+        </Grid>
+      )}
+      {themesList.map((theme, index) => (
+        <Fragment key={index}>
+          {(!noOthers || theme.label !== 'others') && (
+            <Grid item xs={3} sm={2}>
+              <QualificationItem
+                label={t(`themes.${theme.label}`)}
+                icon={IconByName[theme.icon]}
+                isSelected={theme.label === selectedQualification}
+                onClick={() => handleClick(theme)}
+              />
+            </Grid>
+          )}
+        </Fragment>
+      ))}
+    </Grid>
+  )
+}
+
+QualificationGrid.defaultProps = {
+  noUndefined: false,
+  noOthers: false,
+  onClick: () => {}
+}
+
+QualificationGrid.propTypes = {
+  /** Remove `undefined` theme */
+  noUndefined: PropTypes.bool,
+  /** Remove `others` theme */
+  noOthers: PropTypes.bool,
+  /** Triggered when an item is clicked */
+  onClick: PropTypes.func
+}
+
+export default withLocales(QualificationGrid)

package/react/QualificationGrid/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "themes": {
+    "activity": "Activity",
+    "family": "Family",
+    "finance": "Finance",
+    "health": "Health",
+    "home": "Home",
+    "identity": "Identity",
+    "invoice": "Invoice",
+    "others": "Others",
+    "transport": "Transport",
+    "undefined": "Undefined",
+    "work_study": "Work"
+  }
+}

package/react/QualificationGrid/locales/fr.json

@@ -0,0 +1,15 @@
+{
+  "themes": {
+    "activity": "Loisirs",
+    "family": "Famille",
+    "finance": "Finances",
+    "health": "Santé",
+    "home": "Logement",
+    "identity": "Identité",
+    "invoice": "Factures",
+    "others": "Autres",
+    "transport": "Transport",
+    "undefined": "Indéfini",
+    "work_study": "Travail"
+  }
+}

package/react/QualificationGrid/locales/withLocales.jsx

@@ -0,0 +1,11 @@
+import withOnlyLocales from '../../I18n/withOnlyLocales'
+
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}
+
+export default withOnlyLocales(locales)

package/react/QualificationItem/Readme.md

@@ -0,0 +1,8 @@
+```jsx
+import QualificationItem from 'cozy-ui/transpiled/react/QualificationItem'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+
+;
+
+<QualificationItem icon={PeopleIcon} label="People" />
+```

package/react/QualificationItem/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import ButtonBase from '../ButtonBase'
+import Icon, { iconPropType } from '../Icon'
+import FileDuotoneIcon from '../Icons/FileDuotone'
+import IconStack from '../IconStack'
+import Typography from '../Typography'
+import { makeStyles } from '../styles'
+
+const useStyles = makeStyles({
+  item: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: 84,
+    marginBottom: 8,
+    borderRadius: 4,
+    borderColor: ({ isSelected }) =>
+      isSelected ? 'var(--primaryColor)' : 'var(--borderMainColor)',
+    border: '1px solid'
+  }
+})
+
+const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
+  const styles = useStyles({ isSelected })
+
+  return (
+    <ButtonBase {...props} className={styles.item} onClick={onClick}>
+      <IconStack
+        className="u-mb-half"
+        foreground={
+          icon && (
+            <Icon
+              icon={icon}
+              color={
+                isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+              }
+            />
+          )
+        }
+        background={
+          <Icon
+            icon={FileDuotoneIcon}
+            size="32"
+            color={
+              isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+            }
+          />
+        }
+      />
+      <Typography variant="caption">{label}</Typography>
+    </ButtonBase>
+  )
+}
+
+QualificationItem.propTypes = {
+  icon: PropTypes.oneOfType([PropTypes.node, iconPropType]),
+  label: PropTypes.string,
+  isSelected: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
+export default QualificationItem

package/react/index.js

@@ -121,3 +121,6 @@ export { default as InputAdornment } from './InputAdornment'
 export { default as InputBase } from './InputBase'
 export { default as SearchBar } from './SearchBar'
 export { default as Thumbnail } from './Thumbnail'
+export { default as ButtonBase } from './ButtonBase'
+export { default as QualificationGrid } from './QualificationGrid'
+export { default as QualificationItem } from './QualificationItem'

package/transpiled/react/ButtonBase/index.js

@@ -0,0 +1,2 @@
+import ButtonBase from '@material-ui/core/ButtonBase';
+export default ButtonBase;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClient } from 'cozy-client';
+import { isNote } from 'cozy-client/dist/models/file';
 import Icon from "cozy-ui/transpiled/react/Icon";
 import FiletypeTextIcon from "cozy-ui/transpiled/react/Icons/FileTypeText";
+import FiletypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
 import FileImageLoader from "cozy-ui/transpiled/react/FileImageLoader";
 import Thumbnail from "cozy-ui/transpiled/react/Thumbnail";
 import Skeleton from "cozy-ui/transpiled/react/Skeleton";
@@ -27,7 +29,7 @@ var ItemIcon = function ItemIcon(_ref) {
     },
     renderFallback: function renderFallback() {
       return /*#__PURE__*/React.createElement(Thumbnail, null, /*#__PURE__*/React.createElement(Icon, {
-        icon: FiletypeTextIcon
+        icon: isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon
       }));
     }
   });

package/transpiled/react/QualificationGrid/helpers.js

@@ -0,0 +1,7 @@
+import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
+import flag from 'cozy-flags';
+export var getThemesList = function getThemesList() {
+  return flag('hide.healthTheme.enabled') ? themesList.filter(function (theme) {
+    return theme.label !== 'health';
+  }) : themesList;
+};

package/transpiled/react/QualificationGrid/index.js

@@ -0,0 +1,97 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { Fragment, useState } from 'react';
+import PropTypes from 'prop-types';
+import Grid from "cozy-ui/transpiled/react/Grid";
+import QualificationItem from "cozy-ui/transpiled/react/QualificationItem";
+import { useI18n } from "cozy-ui/transpiled/react/I18n";
+import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
+import TeamIcon from "cozy-ui/transpiled/react/Icons/Team";
+import CompanyIcon from "cozy-ui/transpiled/react/Icons/Company";
+import HeartIcon from "cozy-ui/transpiled/react/Icons/Heart";
+import HomeIcon from "cozy-ui/transpiled/react/Icons/Home";
+import CarIcon from "cozy-ui/transpiled/react/Icons/Car";
+import CompassIcon from "cozy-ui/transpiled/react/Icons/Compass";
+import BankIcon from "cozy-ui/transpiled/react/Icons/Bank";
+import BillIcon from "cozy-ui/transpiled/react/Icons/Bill";
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
+import withLocales from "cozy-ui/transpiled/react/QualificationGrid/locales/withLocales";
+import { getThemesList } from "cozy-ui/transpiled/react/QualificationGrid/helpers";
+var IconByName = {
+  people: PeopleIcon,
+  team: TeamIcon,
+  company: CompanyIcon,
+  heart: HeartIcon,
+  home: HomeIcon,
+  car: CarIcon,
+  compass: CompassIcon,
+  bank: BankIcon,
+  bill: BillIcon,
+  dots: DotsIcon
+};
+
+var QualificationGrid = function QualificationGrid(_ref) {
+  var noUndefined = _ref.noUndefined,
+      noOthers = _ref.noOthers,
+      onClick = _ref.onClick;
+  var themesList = getThemesList();
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedQualification = _useState2[0],
+      setSelectedQualification = _useState2[1];
+
+  var handleClick = function handleClick(theme) {
+    onClick(theme === null || theme === void 0 ? void 0 : theme.label);
+    setSelectedQualification(theme === null || theme === void 0 ? void 0 : theme.label);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 1
+  }, !noUndefined && /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: 3,
+    sm: 2
+  }, /*#__PURE__*/React.createElement(QualificationItem, {
+    label: t('themes.undefined'),
+    isSelected: selectedQualification === undefined,
+    onClick: function onClick() {
+      return handleClick();
+    }
+  })), themesList.map(function (theme, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, (!noOthers || theme.label !== 'others') && /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 3,
+      sm: 2
+    }, /*#__PURE__*/React.createElement(QualificationItem, {
+      label: t("themes.".concat(theme.label)),
+      icon: IconByName[theme.icon],
+      isSelected: theme.label === selectedQualification,
+      onClick: function onClick() {
+        return handleClick(theme);
+      }
+    })));
+  }));
+};
+
+QualificationGrid.defaultProps = {
+  noUndefined: false,
+  noOthers: false,
+  onClick: function onClick() {}
+};
+QualificationGrid.propTypes = {
+  /** Remove `undefined` theme */
+  noUndefined: PropTypes.bool,
+
+  /** Remove `others` theme */
+  noOthers: PropTypes.bool,
+
+  /** Triggered when an item is clicked */
+  onClick: PropTypes.func
+};
+export default withLocales(QualificationGrid);

package/transpiled/react/QualificationGrid/locales/withLocales.js

@@ -0,0 +1,36 @@
+import withOnlyLocales from "cozy-ui/transpiled/react/I18n/withOnlyLocales";
+var en = {
+  themes: {
+    activity: "Activity",
+    family: "Family",
+    finance: "Finance",
+    health: "Health",
+    home: "Home",
+    identity: "Identity",
+    invoice: "Invoice",
+    others: "Others",
+    transport: "Transport",
+    undefined: "Undefined",
+    work_study: "Work"
+  }
+};
+var fr = {
+  themes: {
+    activity: "Loisirs",
+    family: "Famille",
+    finance: "Finances",
+    health: "Sant\xE9",
+    home: "Logement",
+    identity: "Identit\xE9",
+    invoice: "Factures",
+    others: "Autres",
+    transport: "Transport",
+    undefined: "Ind\xE9fini",
+    work_study: "Travail"
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};
+export default withOnlyLocales(locales);

package/transpiled/react/QualificationItem/index.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "label", "isSelected", "onClick"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import ButtonBase from "cozy-ui/transpiled/react/ButtonBase";
+import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
+import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone";
+import IconStack from "cozy-ui/transpiled/react/IconStack";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+var useStyles = makeStyles({
+  item: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: 84,
+    marginBottom: 8,
+    borderRadius: 4,
+    borderColor: function borderColor(_ref) {
+      var isSelected = _ref.isSelected;
+      return isSelected ? 'var(--primaryColor)' : 'var(--borderMainColor)';
+    },
+    border: '1px solid'
+  }
+});
+
+var QualificationItem = function QualificationItem(_ref2) {
+  var icon = _ref2.icon,
+      label = _ref2.label,
+      isSelected = _ref2.isSelected,
+      onClick = _ref2.onClick,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var styles = useStyles({
+    isSelected: isSelected
+  });
+  return /*#__PURE__*/React.createElement(ButtonBase, _extends({}, props, {
+    className: styles.item,
+    onClick: onClick
+  }), /*#__PURE__*/React.createElement(IconStack, {
+    className: "u-mb-half",
+    foreground: icon && /*#__PURE__*/React.createElement(Icon, {
+      icon: icon,
+      color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+    }),
+    background: /*#__PURE__*/React.createElement(Icon, {
+      icon: FileDuotoneIcon,
+      size: "32",
+      color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+    })
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, label));
+};
+
+QualificationItem.propTypes = {
+  icon: PropTypes.oneOfType([PropTypes.node, iconPropType]),
+  label: PropTypes.string,
+  isSelected: PropTypes.bool,
+  onClick: PropTypes.func
+};
+export default QualificationItem;

package/transpiled/react/index.js

@@ -94,4 +94,7 @@ export { default as Skeleton } from './Skeleton';
 export { default as InputAdornment } from './InputAdornment';
 export { default as InputBase } from './InputBase';
 export { default as SearchBar } from './SearchBar';
-export { default as Thumbnail } from './Thumbnail';
+export { default as Thumbnail } from './Thumbnail';
+export { default as ButtonBase } from './ButtonBase';
+export { default as QualificationGrid } from './QualificationGrid';
+export { default as QualificationItem } from './QualificationItem';