cozy-ui-plus 1.1.0

package/src/Qualification/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 'cozy-ui/transpiled/react/Icon'
+import NoteIcon from 'cozy-ui/transpiled/react/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/src/Qualification/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)
+  })
+})

package/src/Qualification/QualificationModal/index.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+
+import { useClient } from 'cozy-client'
+import { isSupportedQualification } from 'cozy-client/dist/models/document/qualification'
+import NestedSelectResponsive from 'cozy-ui/transpiled/react/NestedSelect/NestedSelectResponsive'
+import { useI18n, useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { makeOptions, makeSearchOptions } from './helpers'
+import { locales } from './locales'
+
+const QualificationModal = ({ file, title, noDataLabel, onClose }) => {
+  useExtendI18n(locales)
+  const client = useClient()
+  const { t, lang } = useI18n()
+
+  const qualificationLabel = file.metadata?.qualification?.label
+  const options = useMemo(() => makeOptions(lang), [lang])
+  const searchOptions = useMemo(
+    () =>
+      makeSearchOptions({
+        options,
+        title,
+        noDataLabel,
+        t
+      }),
+    [options, title, noDataLabel, t]
+  )
+
+  const isSelected = ({ id, item }) => {
+    return isSupportedQualification(qualificationLabel)
+      ? qualificationLabel === item?.label
+      : id === 'none'
+  }
+
+  const handleClick = async ({ id, item }) => {
+    const fileCollection = client.collection('io.cozy.files')
+    const 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.
+    */
+    await fileCollection.updateMetadataAttribute(file._id, {
+      qualification: removeQualification ? null : item
+    })
+
+    onClose()
+  }
+
+  return (
+    <NestedSelectResponsive
+      options={options}
+      noDivider
+      document={file}
+      isSelected={isSelected}
+      searchOptions={searchOptions}
+      onSelect={handleClick}
+      onClose={onClose}
+    />
+  )
+}
+
+QualificationModal.propTypes = {
+  file: PropTypes.object,
+  title: PropTypes.string,
+  noDataLabel: PropTypes.string,
+  onClose: PropTypes.func
+}
+
+export default QualificationModal

package/src/Qualification/QualificationModal/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "QualificationModal": {
+    "title": "Document type",
+    "noDataLabel": "No result"
+  }
+}

package/src/Qualification/QualificationModal/locales/fr.json

@@ -0,0 +1,6 @@
+{
+  "QualificationModal": {
+    "title": "Type de document",
+    "noDataLabel": "Aucun résultat"
+  }
+}

package/src/Qualification/QualificationModal/locales/index.jsx

@@ -0,0 +1,11 @@
+import en from './en.json'
+import fr from './fr.json'
+import ru from './ru.json'
+import vi from './vi.json'
+
+export const locales = {
+  en,
+  fr,
+  ru,
+  vi
+}

package/src/Qualification/QualificationModal/locales/ru.json

@@ -0,0 +1,6 @@
+{
+  "QualificationModal": {
+    "title": "Тип документа",
+    "noDataLabel": "Нет результатов"
+  }
+}

package/src/Qualification/QualificationModal/locales/vi.json

@@ -0,0 +1,6 @@
+{
+  "QualificationModal": {
+    "title": "Loại tài liệu",
+    "noDataLabel": "Không có kết quả"
+  }
+}

package/src/ShortcutTile/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { TileIcon } from 'cozy-ui/transpiled/react/Tile'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { nameToColor } from 'cozy-ui/transpiled/react/legacy/Avatar/helpers'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+
+import styles from '../AppTile/styles.styl'
+
+interface ShortcutTileProps {
+  file: Partial<object> & {
+    name: string
+    attributes?: { metadata?: { icon?: string; iconMimeType?: string } }
+  }
+}
+
+const useStyles = makeStyles({
+  letter: {
+    color: 'white',
+    margin: 'auto'
+  },
+  letterWrapper: {
+    backgroundColor: ({ name }: { name: string }) =>
+      (nameToColor as (name: string) => string)(name)
+  }
+})
+
+export const ShortcutTile = ({ file }: ShortcutTileProps): JSX.Element => {
+  const classes = useStyles({ name: file.name })
+  const icon = file.attributes?.metadata?.icon
+  const iconMimeType = file.attributes?.metadata?.iconMimeType
+
+  if (icon) {
+    return (
+      <TileIcon>
+        <img
+          className={styles['AppTile-icon']}
+          src={
+            iconMimeType
+              ? `data:${iconMimeType};base64,${icon}`
+              : `data:image/svg+xml;base64,${window.btoa(icon)}`
+          }
+          width={48}
+          height={48}
+          alt={file.name}
+        />
+      </TileIcon>
+    )
+  }
+
+  return (
+    <TileIcon>
+      <div className={classes.letterWrapper}>
+        <Typography className={classes.letter} variant="h2" align="center">
+          {file.name[0].toUpperCase()}
+        </Typography>
+      </div>
+    </TileIcon>
+  )
+}

package/src/SquareAppIcon/Readme.md

@@ -0,0 +1,185 @@
+Component used to show an app status, can be used in a list of apps and connectors in the Home
+application.
+
+```jsx
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+const { variant } = useCozyTheme()
+const app = { name: "Test App", slug: "testapp", type: "app" }
+const [isLoading, setLoading] = React.useState(false)
+const [isError, setIsError] = React.useState(false)
+const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
+
+;
+
+<BreakpointsProvider>
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+  <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
+
+  <Grid container spacing={1} style={{ background: variant === 'inverted' ? `center / cover no-repeat url(${cloudWallpaper})` : 'white' }}
+  >
+    <Grid item>
+      <SquareAppIcon app={app} description="This description will be ignored as default display mode is compact" name="Normal" />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon app={app} name="Maintenance" variant="maintenance" />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon app={app} name="Error" variant="error" />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon name="Add" variant="add" />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon name="Shortcut" variant="shortcut" hideShortcutBadge={isShortcutBadgeHide} />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size={32} />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon IconContent={<Icon icon={CozyIcon} size={32} />} name="Loading" variant={isError ? 'error' : 'loading'} />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
+              src={`data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd" transform="translate(0 2)">
+      <rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/>
+      <path fill="#197BFF" d="M0,0.990777969 C0,0.443586406 0.449948758,0 1.00684547,0 L12.9931545,0 C13.5492199,0 14.3125,0.3125 14.7107565,0.71075654 L15.2892435,1.28924346 C15.6817835,1.68178346 16.4446309,2 17.0008717,2 L30.0059397,2 C31.1072288,2 32,2.89470506 32,4 L32,4 L17.0008717,4 C16.4481055,4 15.6875,4.3125 15.2892435,4.71075654 L14.7107565,5.28924346 C14.3182165,5.68178346 13.5500512,6 12.9931545,6 L1.00684547,6 C0.450780073,6 0,5.54902482 0,5.00922203 L0,0.990777969 Z"/>
+    </g>
+  </svg>`)}`}
+              width={32}
+              height={32}
+              alt={"Shortcut"}
+            />} hideShortcutBadge={isShortcutBadgeHide} />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size={32} />} />
+    </Grid>
+    <Grid item>
+      <SquareAppIcon name="Icon Grid" IconContent={(
+        <Grid container spacing={0}>
+          <Grid item xs={6}>
+            <Icon icon={CozyIcon} />
+          </Grid>
+          <Grid item xs={6}>
+            <Icon icon={CozyIcon} />
+          </Grid>
+            <Grid item xs={6}>
+              <Icon icon={CozyIcon} />
+            </Grid>
+            <Grid item xs={6}>
+              <Icon icon={CozyIcon} />
+            </Grid>
+          </Grid>
+      )} />
+    </Grid>
+  </Grid>
+</BreakpointsProvider>
+```
+
+### Using the "detailed" display mode
+
+Set the `display` prop to `detailed` to show the app `description` below the app `name`, provided the `description` prop is set.
+Otherwise, the app `name` will be centered vertically.
+
+```jsx
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import SquareAppIcon from 'cozy-ui/transpiled/react/SquareAppIcon'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import cloudWallpaper from '../../docs/cloud-wallpaper.jpg'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+const { variant } = useCozyTheme()
+const app = { name: "Test App", slug: "testapp", type: "app" }
+const [isLoading, setLoading] = React.useState(false)
+const [isError, setIsError] = React.useState(false)
+const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
+
+;
+
+<BreakpointsProvider>
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+    <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
+
+  <Grid container spacing={4}>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Weather Wiz"
+        description="Get real-time weather updates and forecasts" />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Meal Planner"
+        description="Plan your meals with nutrition tracking"
+        variant="maintenance" />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Travel Tracker"
+        description="Explore and document your travel adventures"
+        variant="error" />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Fitness Friend"
+        variant="add" />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Mindful Moments"
+        description="Guided meditations for daily mindfulness"
+        variant="ghost" />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Study Space"
+        description="Organize your study schedule and resources"
+        variant="shortcut"
+        hideShortcutBadge={isShortcutBadgeHide} />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Quick Notes"
+        IconContent={<Icon icon={CozyIcon} size="48" />}
+        variant={isLoading ? 'loading' : 'default'} />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Daily Budget"
+        description="Manage your daily expenses and budgets"
+        IconContent={<Icon icon={CozyIcon} size="48" />}
+        variant={isError ? 'error' : 'loading'} />
+    </Grid>
+    <Grid item xs={4}>
+      <SquareAppIcon
+        display="detailed"
+        name="Event Planner"
+        description="Plan and schedule your events effectively"
+        IconContent={<Icon icon={CozyIcon} size="48" />} />
+    </Grid>
+  </Grid>
+</BreakpointsProvider>
+```

package/src/SquareAppIcon/SquareAppIcon.spec.js

@@ -0,0 +1,86 @@
+/* eslint-env jest */
+
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
+
+import SquareAppIcon from '.'
+
+const appMock = {
+  slug: 'test',
+  name: 'Test'
+}
+
+const Wrapper = props => {
+  return (
+    <DemoProvider>
+      <SquareAppIcon {...props} />
+    </DemoProvider>
+  )
+}
+
+describe('SquareAppIcon component', () => {
+  it('should render an app correctly with the given name', () => {
+    const root = render(<Wrapper app={appMock} name="modified" />)
+    expect(root.getByText('modified')).toBeTruthy()
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render an app correctly with the app name', () => {
+    const root = render(<Wrapper app={appMock} />)
+    expect(root.getByText('Test')).toBeTruthy()
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render an app with the app slug if no name prop and app is a string', () => {
+    const root = render(<Wrapper app="testslug" />)
+    expect(root.getByText('testslug')).toBeTruthy()
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render correctly an app in maintenance state', () => {
+    const root = render(<Wrapper app={appMock} variant="maintenance" />)
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render correctly an app in ghost state', () => {
+    const root = render(<Wrapper app={appMock} variant="ghost" />)
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render correctly an app in error state', () => {
+    const root = render(<Wrapper app={appMock} variant="error" />)
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render correctly an app in add state', () => {
+    const root = render(<Wrapper variant="add" />)
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should render correctly an app in shortcut state', () => {
+    const root = render(<Wrapper variant="shortcut" name="shortcut" />)
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+
+  it('should display icon-content an app with icon content in shortcut state', () => {
+    const { queryByTestId } = render(
+      <Wrapper
+        variant="shortcut"
+        name="shortcut"
+        IconContent={<Icon data-testid="icon-content" icon={CozyIcon} />}
+      />
+    )
+    expect(queryByTestId('icon-content')).toBeTruthy()
+  })
+
+  it('should render correctly an app with custom content', () => {
+    const root = render(
+      <Wrapper name="custom icon" IconContent={<Icon icon={CozyIcon} />} />
+    )
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
+})