cozy-ui 131.1.0-beta.9 → 131.2.0

package/react/Progress/index.js

@@ -0,0 +1,2 @@
+export { default as LinearProgress } from '@material-ui/core/LinearProgress'
+export { default as CircularProgress } from '@material-ui/core/CircularProgress'

package/react/ProgressionBanner/Readme.md

@@ -0,0 +1,30 @@
+A banner with a progress bar at the bottom.
+
+```jsx
+import useProgression from 'cozy-ui/transpiled/react/helpers/useProgression';
+import ProgressionBanner from 'cozy-ui/transpiled/react/ProgressionBanner';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import CloudSync from 'cozy-ui/transpiled/react/Icons/CloudSync';
+import Variants from 'cozy-ui/docs/components/Variants';
+import MuiButton from 'cozy-ui/transpiled/react/Button';
+
+const { progression } = useProgression();
+
+const initialVariants = [
+  { withValue: true, progressBar: true, withButton: false }
+];
+
+<Variants initialVariants={initialVariants}>{
+  variant => (
+    <ProgressionBanner
+      progressBar={variant.progressBar}
+      value={variant.withValue && progression}
+      text={variant.withButton ? "Storage limit nearly reached" : "4 remaining items"}
+      icon={<Icon icon={CloudSync} />}
+      button={variant.withButton && <MuiButton color='primary' onClick={() => alert("Clicked!")}>
+          Manage your storage space
+        </MuiButton>}
+    />
+  )
+}</Variants>
+```

package/react/ProgressionBanner/index.jsx

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Banner from '../Banner'
+import { LinearProgress } from '../Progress'
+import Typography from '../Typography'
+import { withStyles } from '../styles'
+
+const progressHeight = '0.125rem'
+
+const styles = theme => ({
+  banner: {
+    backgroundColor: theme.palette.background.contrast
+  },
+  progress: {
+    backgroundColor: 'transparent',
+    height: progressHeight,
+    marginTop: `-${progressHeight}`
+  }
+})
+
+const ProgressionBanner = withStyles(styles)(
+  ({ classes, value, text, icon, button, progressBar }) => {
+    const variant = value ? 'determinate' : undefined
+
+    return (
+      <>
+        <Banner
+          className={classes.banner}
+          icon={icon}
+          text={
+            <Typography component="span" variant="h6">
+              {text}
+            </Typography>
+          }
+          buttonOne={button}
+          inline
+        />
+        {progressBar && (
+          <LinearProgress
+            className={classes.progress}
+            variant={variant}
+            value={value}
+          />
+        )}
+      </>
+    )
+  }
+)
+
+ProgressionBanner.propTypes = {
+  /** Percentage of progression, should be between 0 and 100 */
+  value: PropTypes.number,
+  /** Text to be shown in the banner */
+  text: PropTypes.string,
+  /** Icon to be shown in the banner */
+  icon: PropTypes.node,
+  /** Button to use in the banner */
+  button: PropTypes.node,
+  /** Progression bar is hidden if set to false (defaults to true) */
+  progressBar: PropTypes.bool
+}
+
+ProgressionBanner.defaultProps = {
+  progressBar: true
+}
+
+export default ProgressionBanner

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,87 @@
+import PropTypes from 'prop-types'
+import React, { Fragment, useState } from 'react'
+
+import { getThemesList } from './helpers'
+import withLocales from './locales/withLocales'
+import Grid from '../Grid'
+import BankIcon from '../Icons/Bank'
+import BillIcon from '../Icons/Bill'
+import CarIcon from '../Icons/Car'
+import ChessIcon from '../Icons/Chess'
+import DotsIcon from '../Icons/Dots'
+import HeartIcon from '../Icons/Heart'
+import PeopleIcon from '../Icons/People'
+import TeamIcon from '../Icons/Team'
+import WorkIcon from '../Icons/Work'
+import HomeIcon from '../Icons/Home'
+import QualificationItem from '../QualificationItem'
+import { useI18n } from '../providers/I18n'
+
+const IconByName = {
+  people: PeopleIcon,
+  team: TeamIcon,
+  work: WorkIcon,
+  heart: HeartIcon,
+  home: HomeIcon,
+  car: CarIcon,
+  chess: ChessIcon,
+  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/ru.json

@@ -0,0 +1,15 @@
+{
+  "themes": {
+    "activity": "Деятельность",
+    "family": "Семья",
+    "finance": "Финансы",
+    "health": "Здоровье",
+    "home": "Дом",
+    "identity": "Личность",
+    "invoice": "Счет",
+    "others": "Прочее",
+    "transport": "Транспорт",
+    "undefined": "Не определено",
+    "work_study": "Работа"
+  }
+}

package/react/QualificationGrid/locales/vi.json

@@ -0,0 +1,15 @@
+{
+  "themes": {
+    "activity": "Hoạt động",
+    "family": "Gia đình",
+    "finance": "Tài chính",
+    "health": "Sức khỏe",
+    "home": "Nhà",
+    "identity": "Danh tính",
+    "invoice": "Hóa đơn",
+    "others": "Khác",
+    "transport": "Giao thông",
+    "undefined": "Chưa xác định",
+    "work_study": "Công việc"
+  }
+}

package/react/QualificationGrid/locales/withLocales.jsx

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

package/react/QualificationIcon/Readme.md

@@ -0,0 +1,14 @@
+```jsx
+import QualificationIcon from 'cozy-ui/transpiled/react/QualificationIcon'
+
+;
+
+<>
+  <QualificationIcon className="u-mr-1" />
+  <QualificationIcon className="u-mr-1" qualification="isp_invoice" />
+  <QualificationIcon className="u-mr-1" qualification="phone_invoice" />
+  <QualificationIcon className="u-mr-1" qualification="family_record_book" />
+  <QualificationIcon className="u-mr-1" theme="identity" />
+  <QualificationIcon theme="transport" />
+</>
+```

package/react/QualificationIcon/index.jsx

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { getIconByLabel } from 'cozy-client/dist/models/document/qualification'
+
+import Icon from '../Icon'
+import BankIcon from '../Icons/Bank'
+import BankCheckIcon from '../Icons/BankCheck'
+import BenefitIcon from '../Icons/Benefit'
+import BillIcon from '../Icons/Bill'
+import CarIcon from '../Icons/Car'
+import ChessIcon from '../Icons/Chess'
+import ChildIcon from '../Icons/Child'
+import DotsIcon from '../Icons/Dots'
+import EmailIcon from '../Icons/Email'
+import EuroIcon from '../Icons/Euro'
+import ExchangeIcon from '../Icons/Exchange'
+import FitnessIcon from '../Icons/Fitness'
+import GlobeIcon from '../Icons/Globe'
+import GouvIcon from '../Icons/Gouv'
+import HeartIcon from '../Icons/Heart'
+import HomeIcon from '../Icons/Home'
+import ImageIcon from '../Icons/Image'
+import JusticeIcon from '../Icons/Justice'
+import LaudryIcon from '../Icons/Laudry'
+import LightningIcon from '../Icons/Lightning'
+import NoteIcon from '../Icons/Note'
+import PeopleIcon from '../Icons/People'
+import PlaneIcon from '../Icons/Plane'
+import RemboursementIcon from '../Icons/Remboursement'
+import RestaurantIcon from '../Icons/Restaurant'
+import SchoolIcon from '../Icons/School'
+import ShopIcon from '../Icons/Shop'
+import TeamIcon from '../Icons/Team'
+import TelecomIcon from '../Icons/Telecom'
+import TelephoneIcon from '../Icons/Telephone'
+import WaterIcon from '../Icons/Water'
+import WorkIcon from '../Icons/Work'
+
+const IconByLabel = {
+  'bank-check': BankCheckIcon,
+  bank: BankIcon,
+  benefit: BenefitIcon,
+  bill: BillIcon,
+  car: CarIcon,
+  chess: ChessIcon,
+  child: ChildIcon,
+  dots: DotsIcon,
+  email: EmailIcon,
+  euro: EuroIcon,
+  exchange: ExchangeIcon,
+  'file-type-note': NoteIcon,
+  fitness: FitnessIcon,
+  globe: GlobeIcon,
+  gouv: GouvIcon,
+  heart: HeartIcon,
+  home: HomeIcon,
+  image: ImageIcon,
+  justice: JusticeIcon,
+  laudry: LaudryIcon,
+  lightning: LightningIcon,
+  people: PeopleIcon,
+  plane: PlaneIcon,
+  remboursement: RemboursementIcon,
+  restaurant: RestaurantIcon,
+  school: SchoolIcon,
+  shop: ShopIcon,
+  team: TeamIcon,
+  telecom: TelecomIcon,
+  telephone: TelephoneIcon,
+  water: WaterIcon,
+  work: WorkIcon
+}
+
+const themeIconByLabel = {
+  identity: 'people',
+  family: 'team',
+  work_study: 'work',
+  health: 'heart',
+  home: 'home',
+  transport: 'car',
+  activity: 'chess',
+  finance: 'bank',
+  invoice: 'bill',
+  others: 'dots'
+}
+
+const QualificationIcon = ({ theme, qualification, ...props }) => {
+  const _Icon = qualification
+    ? IconByLabel[getIconByLabel(qualification)]
+    : theme
+    ? IconByLabel[themeIconByLabel[theme]]
+    : null
+
+  return <Icon icon={_Icon} color="#E049BF" size={16} {...props} />
+}
+
+QualificationIcon.propTypes = {
+  /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
+  qualification: PropTypes.string,
+  /** The name of the qualification theme (indentity, family, etc.) */
+  theme: PropTypes.string
+}
+
+export default QualificationIcon

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 PropTypes from 'prop-types'
+import React from 'react'
+
+import ButtonBase from '../ButtonBase'
+import Icon, { iconPropType } from '../Icon'
+import IconStack from '../IconStack'
+import FileDuotoneIcon from '../Icons/FileDuotone'
+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/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/helpers.js

@@ -0,0 +1,63 @@
+import React from 'react'
+
+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 Icon from '../Icon'
+import NoteIcon from '../Icons/Note'
+import QualificationIcon from '../QualificationIcon'
+
+export const makeOptions = lang => {
+  const qualifT = getBoundT(lang)
+
+  return {
+    children: [
+      {
+        id: 'none',
+        title: qualifT('Scan.themes.none'),
+        icon: <QualificationIcon />
+      },
+      ...themesList.map(theme => ({
+        id: theme.id,
+        title: qualifT(`Scan.themes.${theme.label}`),
+        icon: <QualificationIcon theme={theme.label} />,
+        children: theme.items.map(item => ({
+          id: item.label,
+          item,
+          title: qualifT(`Scan.items.${item.label}`),
+          icon: isQualificationNote(item) ? (
+            <Icon icon={NoteIcon} color="#E049BF" size={16} />
+          ) : (
+            <QualificationIcon qualification={item.label} />
+          )
+        }))
+      }))
+    ]
+  }
+}
+
+export const searchOptionsFn = (options, value) => {
+  if (!value) return options.children
+
+  const deepOptions = options.children
+    .flatMap(child => child.children)
+    .reduce((acc, curr) => {
+      if (!!curr && !acc.some(el => el.id === curr.id)) {
+        acc.push(curr)
+      }
+      return acc
+    }, [])
+
+  return deepOptions.filter(deepOption =>
+    deepOption.title.toLowerCase().includes(value.toLowerCase())
+  )
+}
+
+export const makeSearchOptions = ({ options, title, noDataLabel, t }) => {
+  return {
+    placeholderSearch: title || t('QualificationModal.title'),
+    noDataLabel: noDataLabel || t('QualificationModal.noDataLabel'),
+    onSearch: value => searchOptionsFn(options, value)
+  }
+}

package/react/QualificationModal/helpers.spec.js

@@ -0,0 +1,61 @@
+import { searchOptionsFn } from './helpers'
+
+describe('searchOptionsFn', () => {
+  it('should return only the uniq good result', () => {
+    const options = {
+      children: [
+        { id: 'none', title: 'None' },
+        {
+          id: 'theme1',
+          title: 'Identity',
+          children: [
+            { id: '01', title: 'Identity Photo' },
+            { id: '02', title: 'ID card' }
+          ]
+        },
+        {
+          id: 'theme2',
+          title: 'Family',
+          children: [
+            { id: '03', title: 'Family record book' },
+            { id: '04', title: 'Birth certificate' },
+            { id: '01', title: 'Identity Photo' }
+          ]
+        }
+      ]
+    }
+
+    const res = searchOptionsFn(options, 'photo')
+
+    expect(res).toStrictEqual([{ id: '01', title: 'Identity Photo' }])
+  })
+
+  it('should return the initial list and not all children', () => {
+    const options = {
+      children: [
+        { id: 'none', title: 'None' },
+        {
+          id: 'theme1',
+          title: 'Identity',
+          children: [
+            { id: '01', title: 'Identity Photo' },
+            { id: '02', title: 'ID card' }
+          ]
+        },
+        {
+          id: 'theme2',
+          title: 'Family',
+          children: [
+            { id: '03', title: 'Family record book' },
+            { id: '04', title: 'Birth certificate' },
+            { id: '01', title: 'Identity Photo' }
+          ]
+        }
+      ]
+    }
+
+    const res = searchOptionsFn(options, '')
+
+    expect(res).toStrictEqual(options.children)
+  })
+})