cozy-ui 89.1.0 → 90.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "89.1.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/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/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';