cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/AppSections/search.spec.js

@@ -1,158 +0,0 @@
-'use strict'
-
-/* eslint-env jest */
-
-import { makeMatcherFromSearch } from './search'
-import mockApps from '../mocks/apps'
-
-const mockMaintenanceApps = [
-  { slug: 'collect' },
-  { slug: 'drive' },
-  {
-    slug: 'konnectorInMaintenance',
-    maintenance: {
-      flag_infra_maintenance: true,
-      flag_short_maintenance: true,
-      flag_disallow_manual_exec: true,
-      messages: []
-    }
-  }
-]
-
-describe('makeMatcherFromSearch', () => {
-  it('should filter correctly on type', () => {
-    const matcher = makeMatcherFromSearch({ type: 'webapp' })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should filter correctly on doctype', () => {
-    const matcher = makeMatcherFromSearch({ doctype: 'io.mock.doctype2' })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should filter correctly on tags', () => {
-    const matcher = makeMatcherFromSearch({ tag: 'bills' })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should filter correctly on category', () => {
-    const matcher = makeMatcherFromSearch({ category: 'cozy' })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should filter correctly on pending update apps', () => {
-    const matcher = makeMatcherFromSearch({ pendingUpdate: true })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should filter correctly when show maintenance is false', () => {
-    const matcher = makeMatcherFromSearch({ showMaintenance: false })
-    expect(mockMaintenanceApps.filter(matcher)).toStrictEqual([
-      { slug: 'collect' },
-      { slug: 'drive' }
-    ])
-  })
-
-  it('should filter correctly when show maintenance is true', () => {
-    const matcher = makeMatcherFromSearch({ showMaintenance: true })
-    expect(mockMaintenanceApps.filter(matcher)).toStrictEqual([
-      { slug: 'collect' },
-      { slug: 'drive' },
-      {
-        maintenance: {
-          flag_disallow_manual_exec: true,
-          flag_infra_maintenance: true,
-          flag_short_maintenance: true,
-          messages: []
-        },
-        slug: 'konnectorInMaintenance'
-      }
-    ])
-  })
-
-  it('should handle correctly multi filters', () => {
-    const matcher = makeMatcherFromSearch({
-      type: 'konnector',
-      doctype: 'io.mock.doctype'
-    })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should not throw error if search is not provided', () => {
-    const matcher = makeMatcherFromSearch()
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should not throw error if app with malformed permission and search on doctype', () => {
-    const malFormedPermApp = {
-      slug: 'collect',
-      name: 'Collect',
-      editor: 'Cozy',
-      name_prefix: 'Cozy',
-      categories: ['cozy'],
-      developer: { name: 'Cozy' },
-      type: 'webapp',
-      icon: '<svg></svg>',
-      permissions: {
-        mock: {
-          // NO TYPE = malformed
-          description: 'io.mock.doctype'
-        },
-        mock2: {
-          type: 'io.mock.doctype2'
-        }
-      },
-      tags: ['konnector', 'collect', 'bills', 'providers', 'files'],
-      version: '3.0.0',
-      versions: {
-        stable: ['3.0.0'],
-        beta: ['3.0.0'],
-        dev: ['3.0.0']
-      },
-      uninstallable: false,
-      installed: true,
-      isInRegistry: true,
-      related: 'http://collect.cozy.mock/'
-    }
-    const matcher = makeMatcherFromSearch({ doctype: 'io.mock.doctype' })
-    expect([malFormedPermApp].filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should not throw error if app with no categories and search on category', () => {
-    const appWithoutCategories = {
-      slug: 'collect',
-      name: 'Collect',
-      editor: 'Cozy',
-      name_prefix: 'Cozy',
-      developer: { name: 'Cozy' },
-      type: 'webapp',
-      icon: '<svg></svg>',
-      permissions: {
-        mock: {
-          type: 'io.mock.doctype'
-        },
-        mock2: {
-          type: 'io.mock.doctype2'
-        }
-      },
-      tags: ['konnector', 'collect', 'bills', 'providers', 'files'],
-      version: '3.0.0',
-      versions: {
-        stable: ['3.0.0'],
-        beta: ['3.0.0'],
-        dev: ['3.0.0']
-      },
-      uninstallable: false,
-      installed: true,
-      isInRegistry: true,
-      related: 'http://collect.cozy.mock/'
-    }
-    const matcher = makeMatcherFromSearch({ category: 'cozy' })
-    expect([appWithoutCategories].filter(matcher)).toMatchSnapshot()
-  })
-
-  it('should work even for an unsupported filter', () => {
-    const matcher = makeMatcherFromSearch({ unsupportedKey: 'omg' })
-    expect(mockApps.filter(matcher)).toMatchSnapshot()
-  })
-})

package/react/AppTile/AppTile.spec.jsx

@@ -1,119 +0,0 @@
-'use strict'
-
-/* eslint-env jest */
-
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import CozyClient from 'cozy-client'
-
-import AppTile from '.'
-import en from '../AppSections/locales/en.json'
-import DemoProvider from '../providers/DemoProvider'
-import I18n from '../providers/I18n'
-
-const appMock = {
-  slug: 'test',
-  editor: 'cozy',
-  namePrefix: 'Cozy',
-  developer: {
-    name: 'Cozy'
-  },
-  icon: '<svg></svg>',
-  name: 'Test',
-  version: '3.0.3',
-  onClick: jest.fn()
-}
-
-const appMock2 = {
-  slug: 'test2',
-  editor: '',
-  developer: {
-    name: 'Naming me'
-  },
-  icon: '<svg></svg>',
-  name: 'Test2',
-  version: '3.0.3-beta7483',
-  installedAppLink: 'test2.cozy.mock',
-  installed: true,
-  onClick: jest.fn()
-}
-
-const client = new CozyClient({})
-const Wrapper = props => {
-  return (
-    <DemoProvider client={client}>
-      <I18n dictRequire={() => en} lang="en">
-        <AppTile {...props} />
-      </I18n>
-    </DemoProvider>
-  )
-}
-
-describe('AppTile component', () => {
-  it('should render correctly an app', () => {
-    const root = render(<Wrapper {...appMock} app={appMock} />)
-    expect(root.getByText('Cozy Test')).toBeTruthy()
-    expect(root.getByText('By Cozy')).toBeTruthy()
-  })
-
-  it('should render correctly an app without developer property', () => {
-    const appMockWithoutDevelopper = Object.assign({}, appMock)
-    delete appMockWithoutDevelopper.developer
-    const root = render(
-      <Wrapper {...appMockWithoutDevelopper} app={appMockWithoutDevelopper} />
-    )
-    expect(root.getByText('Cozy Test')).toBeTruthy()
-    expect(root.queryByText('By Cozy')).toBeFalsy()
-  })
-
-  it('should render correctly an app in maintenance', () => {
-    const appInMaintenance = Object.assign({}, appMock2, {
-      maintenance: { maintenance_options: {} }
-    })
-    const setup = ({ displaySpecificMaintenanceStyle }) =>
-      render(
-        <Wrapper
-          {...appInMaintenance}
-          app={appInMaintenance}
-          displaySpecificMaintenanceStyle={displaySpecificMaintenanceStyle}
-        />
-      )
-    const root = setup({ displaySpecificMaintenanceStyle: false })
-    expect(root.getByText('Test2')).toBeTruthy()
-    expect(root.getByText('By Naming me')).toBeTruthy()
-    expect(root.getByText('In maintenance')).toBeTruthy()
-    expect(root.queryByTestId('icon-maintenance')).toBeNull()
-
-    const rootWithIcon = setup({ displaySpecificMaintenanceStyle: true })
-    expect(rootWithIcon.getByTestId('icon-maintenance')).toBeTruthy()
-  })
-
-  it('should render correctly an installed app', () => {
-    const root = render(<Wrapper {...appMock2} app={appMock2} />)
-    expect(root.getByText('Installed')).toBeTruthy()
-  })
-
-  it('should render correctly an installed app without icon provided', () => {
-    const appMockWithoutIcon = Object.assign({}, appMock, {
-      icon: 'https://hello.svg'
-    })
-    const root = render(
-      <Wrapper
-        {...appMockWithoutIcon}
-        app={appMockWithoutIcon}
-        alt="Alternative text"
-      />
-    )
-    expect(root.getByText('Cozy Test')).toBeTruthy()
-    expect(root.getByText('By Cozy')).toBeTruthy()
-  })
-
-  it('should render correctly an installed app without icon provided', () => {
-    const appMockWithoutIcon = Object.assign({}, appMock, { icon: '' })
-    const root = render(
-      <Wrapper {...appMockWithoutIcon} app={appMockWithoutIcon} />
-    )
-    expect(root.queryByRole('progressbar')).toBeFalsy()
-  })
-})

package/react/AppTile/Readme.md

@@ -1,24 +0,0 @@
-Component used to show an app status, can be used in
-a list of apps for example in the Store.
-
-```jsx
-import AppTile from 'cozy-ui/transpiled/react/AppTile'
-import mockApps from '../AppSections/_mockApps'
-import { I18n } from 'cozy-ui/transpiled/react/providers/I18n'
-import Grid from 'cozy-ui/transpiled/react/Grid'
-
-const locale = {}
-const app = mockApps[0]
-
-;
-
-<I18n dictRequire={lang => locale} lang="en">
-  <Grid container>
-    <AppTile app={app} />
-    <AppTile app={{...app, maintenance: true}} />
-    <AppTile app={{...app, maintenance: true}} displaySpecificMaintenanceStyle={true} />
-    <AppTile app={{...app, availableVersion: true}} />
-    <AppTile app={{...app, availableVersion: true}} showStatus={['maintenance']} />
-  </Grid>
-</I18n>
-```

package/react/AppTile/helpers.js

@@ -1,25 +0,0 @@
-export const APP_STATUS = {
-  installed: 'installed',
-  maintenance: 'maintenance',
-  update: 'update'
-}
-
-export const getCurrentStatusLabel = app => {
-  if (hasPendingUpdate(app)) return APP_STATUS.update
-  if (isUnderMaintenance(app)) return APP_STATUS.maintenance
-  if (isInstalledAndNothingToReport(app)) return APP_STATUS.installed
-  return null
-}
-
-export const hasPendingUpdate = app => {
-  return !!app.availableVersion
-}
-
-export const isUnderMaintenance = app => {
-  return !hasPendingUpdate(app) && app.maintenance
-}
-
-/* installed here means no actions needed */
-export const isInstalledAndNothingToReport = app => {
-  return !hasPendingUpdate(app) && !isUnderMaintenance(app) && app.installed
-}

package/react/AppTile/index.jsx

@@ -1,139 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { APP_STATUS, getCurrentStatusLabel } from './helpers'
-import en from './locales/en.json'
-import fr from './locales/fr.json'
-import ru from './locales/ru.json'
-import vi from './locales/vi.json'
-import styles from './styles.styl'
-import AppIcon from '../AppIcon'
-import { isShortcutFile } from '../AppSections/helpers.js'
-import Icon from '../Icon'
-import WrenchCircleIcon from '../Icons/WrenchCircle'
-import { ShortcutTile } from '../ShortcutTile'
-import Tile, {
-  TileTitle,
-  TileSubtitle,
-  TileFooter,
-  TileIcon,
-  TileDescription
-} from '../Tile'
-import palette from '../palette'
-import { AppDoctype } from '../proptypes'
-import { createUseI18n } from '../providers/I18n'
-
-const locales = { en, fr, ru, vi }
-
-let dataset
-const getDataset = () => {
-  if (dataset) return dataset
-  const root = document.querySelector('[role=application]')
-  dataset = root && root.dataset
-  return dataset
-}
-
-const getAppIconProps = () => ({
-  domain: getDataset() && getDataset().cozyDomain,
-  secure: window.location.protocol === 'https:'
-})
-
-const useI18n = createUseI18n(locales)
-
-export const AppTile = ({
-  app,
-  name: nameProp,
-  namePrefix,
-  onClick,
-  showDeveloper,
-  showStatus,
-  IconComponent: IconComponentProp,
-  displaySpecificMaintenanceStyle
-}) => {
-  const { t } = useI18n()
-  const { developer = {} } = app
-
-  const name = nameProp || app.name
-
-  const statusLabel = getCurrentStatusLabel(app)
-
-  const isStatusArray = Array.isArray(showStatus)
-
-  const statusToDisplay =
-    isShortcutFile(app) && statusLabel === APP_STATUS.installed
-      ? 'favorite'
-      : isStatusArray
-      ? showStatus.indexOf(statusLabel) > -1 && statusLabel
-      : showStatus && statusLabel
-
-  const IconComponent = IconComponentProp || AppIcon
-
-  const isInMaintenanceWithSpecificDisplay =
-    displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance
-
-  return (
-    <Tile
-      tag="button"
-      type="button"
-      onClick={onClick}
-      className={cx({
-        [styles['AppTile-container-maintenance']]:
-          isInMaintenanceWithSpecificDisplay
-      })}
-      isSecondary={statusLabel === APP_STATUS.installed}
-    >
-      <TileIcon>
-        {isShortcutFile(app) ? (
-          <ShortcutTile file={app} />
-        ) : (
-          <IconComponent
-            app={app}
-            className={styles['AppTile-icon']}
-            {...getAppIconProps()}
-          />
-        )}
-        {isInMaintenanceWithSpecificDisplay && (
-          <Icon
-            data-testid="icon-maintenance"
-            icon={WrenchCircleIcon}
-            color={palette['coolGrey']}
-            className={styles['AppTile-icon-maintenance']}
-          />
-        )}
-      </TileIcon>
-      <TileDescription className={styles[`AppTile-description`]}>
-        <TileTitle isMultiline={!statusLabel}>
-          {namePrefix ? `${namePrefix} ${name}` : name}
-        </TileTitle>
-        {developer.name && showDeveloper && (
-          <TileSubtitle>{`${t('app_item.by')} ${developer.name}`}</TileSubtitle>
-        )}
-        {statusToDisplay && (
-          <TileFooter isAccent={statusLabel === APP_STATUS.update}>
-            {t(`app_item.${statusToDisplay}`)}
-          </TileFooter>
-        )}
-      </TileDescription>
-    </Tile>
-  )
-}
-
-AppTile.propTypes = {
-  app: AppDoctype,
-  name: PropTypes.string,
-  namePrefix: PropTypes.string,
-  onClick: PropTypes.func,
-  IconComponent: PropTypes.element,
-  showDeveloper: PropTypes.bool,
-  showStatus: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
-  displaySpecificMaintenanceStyle: PropTypes.bool
-}
-
-AppTile.defaultProps = {
-  showDeveloper: true,
-  showStatus: true,
-  displaySpecificMaintenanceStyle: false
-}
-
-export default AppTile

package/react/AppTile/locales/en.json

@@ -1,9 +0,0 @@
-{
-  "app_item": {
-    "by": "By",
-    "installed": "Installed",
-    "maintenance": "In maintenance",
-    "update": "Update available",
-    "favorite": "Added to home page"
-  }
-}

package/react/AppTile/locales/fr.json

@@ -1,9 +0,0 @@
-{
-  "app_item": {
-    "by": "Par",
-    "installed": "Installée",
-    "maintenance": "En maintenance",
-    "update": "Mise à jour dispo.",
-    "favorite": "Ajouté sur l'accueil"
-  }
-}

package/react/AppTile/locales/ru.json

@@ -1,9 +0,0 @@
-{
-  "app_item": {
-    "by": "От",
-    "installed": "Установлено",
-    "maintenance": "На обслуживании",
-    "update": "Обновление доступно",
-    "favorite": "Добавлено на главную страницу"
-  }
-}

package/react/AppTile/locales/vi.json

@@ -1,9 +0,0 @@
-{
-  "app_item": {
-    "by": "Bởi",
-    "installed": "Đã cài đặt",
-    "maintenance": "Đang bảo trì",
-    "update": "Có cập nhật mới",
-    "favorite": "Đã thêm vào trang chủ"
-  }
-}

package/react/AppTile/styles.styl

@@ -1,27 +0,0 @@
-@require 'settings/breakpoints.styl'
-
-
-.AppTile-icon
-  object-fit contain
-  max-width 100%
-  width auto
-
-.AppTile-icon--default
-  height 100%
-  padding 0 .5em
-
-.AppTile-icon-maintenance
-  position absolute
-  border 2px solid var(--primaryContrastTextColor)
-  border-radius 50%
-  background var(--primaryContrastTextColor)
-  bottom 80px
-  left 80px
-
-  +small-screen()
-    bottom 6px
-    left 40px
-
-.AppTile-container-maintenance
-  filter grayscale(1)
-  opacity .64

package/react/BarContextProvider/index.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { Provider } from 'react-redux'
-
-import { CozyProvider } from 'cozy-client'
-import { WebviewIntentProvider } from 'cozy-intent'
-
-import { BreakpointsProvider } from '../providers/Breakpoints'
-import { I18nContext } from '../providers/I18n'
-
-const BarContextProvider = ({
-  children,
-  store,
-  client,
-  f,
-  t,
-  lang,
-  webviewService
-}) => {
-  if (!children) return null
-
-  return (
-    <Provider store={store}>
-      <CozyProvider client={client}>
-        <I18nContext.Provider value={{ f, t, lang }}>
-          <BreakpointsProvider>
-            {webviewService ? (
-              <WebviewIntentProvider webviewService={webviewService}>
-                {children}
-              </WebviewIntentProvider>
-            ) : (
-              children
-            )}
-          </BreakpointsProvider>
-        </I18nContext.Provider>
-      </CozyProvider>
-    </Provider>
-  )
-}
-
-export default BarContextProvider