cozy-ui 131.0.1 → 131.1.0-beta.1

package/react/Progress/index.js

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

package/react/ProgressionBanner/Readme.md

@@ -1,30 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,25 +0,0 @@
-```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

@@ -1,7 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,15 +0,0 @@
-{
-  "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

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

package/react/QualificationGrid/locales/vi.json

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-```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

@@ -1,105 +0,0 @@
-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

@@ -1,8 +0,0 @@
-```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

@@ -1,64 +0,0 @@
-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

@@ -1,28 +0,0 @@
-```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

@@ -1,63 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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)
-  })
-})