cozy-ui 131.2.0 → 133.0.0-beta.1

package/react/AppSections/components/AppsSection.spec.jsx

@@ -1,58 +0,0 @@
-'use strict'
-
-/* eslint-env jest */
-
-import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
-
-import { CozyProvider } from 'cozy-client'
-
-import { AppsSection } from './AppsSection'
-import { I18nContext } from '../../jestLib/I18n'
-import mockApps from '../../mocks/apps'
-import { BreakpointsProvider } from '../../providers/Breakpoints'
-import { I18n } from '../../providers/I18n'
-import en from '../locales/en'
-
-const i18nContext = I18nContext({ locale: en })
-const tMock = i18nContext.t
-
-describe('AppsSection component', () => {
-  const client = {}
-  const setup = ({ onAppClick }) => {
-    render(
-      <CozyProvider client={client}>
-        <BreakpointsProvider>
-          <I18n lang="en" dictRequire={() => en}>
-            <AppsSection
-              t={tMock}
-              lang="en"
-              subtitle={<h3>Test Apps</h3>}
-              appsList={mockApps}
-              onAppClick={onAppClick}
-            />
-          </I18n>
-        </BreakpointsProvider>
-      </CozyProvider>
-    )
-  }
-
-  it('should be rendered correctly with apps list, subtitle', () => {
-    const mockOnAppClick = jest.fn()
-    setup({ onAppClick: mockOnAppClick })
-
-    mockApps.forEach(app => {
-      expect(screen.getByText(app.name, { exact: false })).toBeInTheDocument()
-    })
-  })
-
-  it('should run provided onAppClick on AppTile click event', () => {
-    const mockOnAppClick = jest.fn()
-    setup({ onAppClick: mockOnAppClick })
-
-    const bouilligue = screen.getByText('Bouilligue', { exact: false })
-    fireEvent.click(bouilligue)
-    expect(mockOnAppClick.mock.calls.length).toBe(1)
-    expect(mockOnAppClick.mock.calls[0][0]).toBe('konnector-bouilligue')
-  })
-})

package/react/AppSections/components/AppsSection.styl

@@ -1,7 +0,0 @@
-.AppsSection 
-    margin-bottom 1rem
-
-.AppsSection__list
-    display flex
-    flex-wrap wrap
-    justify-content flex-start

package/react/AppSections/components/DropdownFilter.jsx

@@ -1,49 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React, { Component } from 'react'
-
-import styles from './DropdownFilter.styl'
-import Icon from '../../Icon'
-import BottomIcon from '../../Icons/Bottom'
-import SelectBox from '../../SelectBox'
-
-const SmallArrow = () => (
-  <Icon
-    className={cx(styles.DropdownFilter__icon, 'u-mr-1')}
-    icon={BottomIcon}
-    color="var(--coolGrey)"
-    width={16}
-    height={16}
-  />
-)
-
-/**
- * Renders a generic dropdown
- */
-export class DropdownFilter extends Component {
-  render() {
-    const { options, defaultValue } = this.props
-    return (
-      <div className={styles.Dropdown}>
-        <SelectBox
-          classNamePrefix="sto-sections-select"
-          options={options}
-          onChange={this.props.onChange}
-          defaultValue={defaultValue}
-          components={{
-            DropdownIndicator: SmallArrow
-          }}
-          isSearchable={false}
-          fullwidth
-        />
-      </div>
-    )
-  }
-}
-
-DropdownFilter.propTypes = {
-  options: PropTypes.array.isRequired,
-  defaultValue: PropTypes.object
-}
-
-export default DropdownFilter

package/react/AppSections/components/DropdownFilter.styl

@@ -1,14 +0,0 @@
-.Dropdown__icon
-  padding: 0 .5rem;
-
-@media (max-width: 48rem)
-  .Dropdown .Select__control
-    padding .5rem .5rem .5rem .2rem
-    border-radius 0
-    height 2.75rem
-
-  .Dropdown .Select__menu
-    top 2rem
-
-  .Dropdown > div
-    max-width none

package/react/AppSections/constants.js

@@ -1,9 +0,0 @@
-export const APP_TYPE = {
-  KONNECTOR: 'konnector',
-  WEBAPP: 'webapp',
-  FILE: 'file'
-}
-
-export const APP_CLASS = {
-  SHORTCUT: 'shortcut'
-}

package/react/AppSections/generateI18nConfig.ts

@@ -1,23 +0,0 @@
-export const generateI18nConfig = (
-  categories?: Record<string, string>
-): {
-  en: Record<string, string>
-  fr: Record<string, string>
-} => {
-  if (!categories) return { en: {}, fr: {} }
-
-  const i18nConfig: Record<string, string> = {}
-
-  for (const [key, value] of Object.entries(categories)) {
-    // Extract the final part of the path as the display name
-    const displayName =
-      value.split('/').pop() ?? ''.replace(/([A-Z])/g, ' $1').trim()
-
-    i18nConfig[`app_categories.${key}`] = displayName
-  }
-
-  return {
-    en: i18nConfig,
-    fr: i18nConfig
-  }
-}

package/react/AppSections/helpers.js

@@ -1,16 +0,0 @@
-import _get from 'lodash/get'
-
-import { APP_CLASS, APP_TYPE } from './constants'
-
-export const getTranslatedManifestProperty = (app, path, t) => {
-  if (!t || !app || !path) return _get(app, path, '')
-  return t(`apps.${app.slug}.${path}`, {
-    _: _get(app, path, '')
-  })
-}
-
-export const isShortcutFile = app => {
-  if (!app) return false
-
-  return app.type === APP_TYPE.FILE && app.class === APP_CLASS.SHORTCUT
-}

package/react/AppSections/helpers.spec.js

@@ -1,39 +0,0 @@
-import { getTranslatedManifestProperty } from './helpers'
-import en from './locales/en'
-import { I18nContext } from '../jestLib/I18n'
-import { extend as extendI18n } from '../providers/I18n'
-
-const i18nContext = I18nContext({ locale: en })
-const tMock = i18nContext.t
-
-describe('getTranslatedManifestProperty helper', () => {
-  const appMock = {
-    slug: 'mock',
-    name: 'Not Translated Name',
-    description: 'not translated description'
-  }
-  const translatedName = 'Translated Name'
-
-  beforeAll(() => {
-    extendI18n({
-      [`apps.${appMock.slug}.name`]: translatedName
-    })
-  })
-
-  it('should return the translated property if translated', () => {
-    // name is translated here in the beforeAll
-    expect(getTranslatedManifestProperty(appMock, 'name', tMock)).toBe(
-      translatedName
-    )
-  })
-
-  it('should fallback to the manifest property if no translated property found', () => {
-    expect(getTranslatedManifestProperty(appMock, 'description', tMock)).toBe(
-      appMock.description
-    )
-  })
-
-  it('should always return an default empty string value', () => {
-    expect(getTranslatedManifestProperty()).toBe('')
-  })
-})

package/react/AppSections/index.jsx

@@ -1,3 +0,0 @@
-export { default } from './Sections'
-import * as categoryUtils from './categories'
-export { categoryUtils }

package/react/AppSections/index.spec.jsx

@@ -1,137 +0,0 @@
-'use strict'
-
-/* eslint-env jest */
-
-import { render, screen } from '@testing-library/react'
-import React from 'react'
-
-import { Sections } from './Sections'
-import en from './locales/en.json'
-import { I18nContext } from '../jestLib/I18n'
-import mockApps from '../mocks/apps'
-import DemoProvider from '../providers/DemoProvider'
-
-const i18nContext = I18nContext({ locale: en })
-const tMock = i18nContext.t
-
-describe('AppsSection component', () => {
-  it('should be rendered correctly with apps list, subtitle and onAppClick', () => {
-    const mockOnAppClick = jest.fn()
-    render(
-      <DemoProvider>
-        <Sections
-          t={tMock}
-          lang="en"
-          subtitle="Test Apps"
-          apps={mockApps}
-          allApps={mockApps}
-          onAppClick={mockOnAppClick}
-          error={null}
-          location={{ search: '' }}
-        />
-      </DemoProvider>
-    )
-
-    expect(screen.queryByText('Cozy Collect')).toBeInTheDocument()
-    expect(screen.queryByText('Cozy Drive')).toBeInTheDocument()
-    expect(screen.queryByText('DevOnly')).toBeInTheDocument()
-  })
-
-  it('should render correctly render message if error provided', () => {
-    const mockOnAppClick = jest.fn()
-    render(
-      <DemoProvider>
-        <Sections
-          t={tMock}
-          lang="en"
-          subtitle="Test Apps"
-          apps={mockApps}
-          allApps={mockApps}
-          onAppClick={mockOnAppClick}
-          error={new Error('This is a test error')}
-          location={{ search: '' }}
-        />
-      </DemoProvider>
-    )
-
-    expect(screen.queryByText('This is a test error')).toBeInTheDocument()
-  })
-
-  it('should not render dropdown filter on mobile if nav=false flag provided', () => {
-    const mockOnAppClick = jest.fn()
-    render(
-      <DemoProvider>
-        <Sections
-          t={tMock}
-          lang="en"
-          subtitle="Test Apps"
-          apps={mockApps}
-          allApps={mockApps}
-          onAppClick={mockOnAppClick}
-          breakpoints={{ isMobile: true }}
-          hasNav={false}
-        />
-      </DemoProvider>
-    )
-
-    expect(screen.queryByText('All categories')).not.toBeInTheDocument()
-  })
-
-  it('should not render dropdown filter on tablet if nav=false flag provided', () => {
-    const mockOnAppClick = jest.fn()
-    render(
-      <DemoProvider>
-        <Sections
-          t={tMock}
-          lang="en"
-          subtitle="Test Apps"
-          apps={mockApps}
-          allApps={mockApps}
-          onAppClick={mockOnAppClick}
-          breakpoints={{ isTablet: true }}
-          hasNav={false}
-        />
-      </DemoProvider>
-    )
-
-    expect(screen.queryByText('All categories')).not.toBeInTheDocument()
-  })
-
-  it('should render dropdown filter on mobile if no nav=false flag provided', () => {
-    const mockOnAppClick = jest.fn()
-    render(
-      <DemoProvider>
-        <Sections
-          t={tMock}
-          lang="en"
-          subtitle="Test Apps"
-          apps={mockApps}
-          allApps={mockApps}
-          onAppClick={mockOnAppClick}
-          breakpoints={{ isMobile: true }}
-        />
-      </DemoProvider>
-    )
-
-    expect(screen.queryByText('All categories')).toBeInTheDocument()
-  })
-
-  it('should render dropdown filter on tablet if no nav=false flag provided', () => {
-    const mockOnAppClick = jest.fn()
-    render(
-      <DemoProvider>
-        <Sections
-          t={tMock}
-          lang="en"
-          subtitle="Test Apps"
-          apps={mockApps}
-          allApps={mockApps}
-          onAppClick={mockOnAppClick}
-          breakpoints={{ isTablet: true }}
-        />
-      </DemoProvider>
-    )
-
-    expect(screen.queryByText('All categories')).toBeInTheDocument()
-  })
-})

package/react/AppSections/locales/en.json

@@ -1,37 +0,0 @@
-{
-  "app_categories": {
-    "all": "All categories",
-    "banking": "Banking",
-    "clouds": "Clouds and vaults",
-    "cozy": "The essentials",
-    "education": "Education",
-    "energy": "Energy",
-    "finance": "Employment and finance",
-    "health": "Health",
-    "host_provider": "Host",
-    "insurance": "Insurance",
-    "isp": "Mobile and Internet",
-    "konnectors": "Services",
-    "list_separator": ", ",
-    "mes_infos": "MesInfos experimentation",
-    "online_services": "Online services",
-    "others": "Others",
-    "partners": "Partners",
-    "press": "Press",
-    "productivity": "Productivity",
-    "ptnb": "PTNB experimentation",
-    "public_service": "Public services",
-    "shopping": "Shopping",
-    "social": "Social",
-    "tech": "Tech",
-    "telecom": "Telecom",
-    "transport": "Transportation",
-    "pro": "Work",
-    "shortcuts": "Additional apps"
-  },
-  "sections": {
-    "applications": "Applications",
-    "konnectors": "Services",
-    "shortcuts": "Additional apps"
-  }
-}

package/react/AppSections/locales/fr.json

@@ -1,37 +0,0 @@
-{
-  "app_categories": {
-    "all": "Toutes les catégories",
-    "banking": "Banques",
-    "clouds": "Clouds et coffres",
-    "cozy": "Les essentielles",
-    "education": "Éducation",
-    "energy": "Energie",
-    "finance": "Emploi et finance",
-    "health": "Santé",
-    "host_provider": "Hébergeur",
-    "insurance": "Assurance",
-    "isp": "Mobile et Internet",
-    "konnectors": "Services",
-    "list_separator": ", ",
-    "mes_infos": "Expérimentation MesInfos",
-    "online_services": "Services en ligne",
-    "others": "Autres",
-    "partners": "Partenaires",
-    "press": "Presse",
-    "productivity": "Productivité",
-    "ptnb": "Expérimentation Carnet du Logement",
-    "public_service": "Services publics",
-    "shopping": "Shopping",
-    "social": "Social",
-    "tech": "Tech",
-    "telecom": "Mobile",
-    "transport": "Voyage et transport",
-    "pro": "Travail",
-    "shortcuts": "App supplémentaires"
-  },
-  "sections": {
-    "applications": "Applications",
-    "konnectors": "Services",
-    "shortcuts": "App supplémentaires"
-  }
-}

package/react/AppSections/locales/ru.json

@@ -1,37 +0,0 @@
-{
-  "app_categories": {
-    "all": "Все категории",
-    "banking": "Банковское дело",
-    "clouds": "Облака и хранилища",
-    "cozy": "Основное",
-    "education": "Образование",
-    "energy": "Энергетика",
-    "finance": "Занятость и финансы",
-    "health": "Здоровье",
-    "host_provider": "Хостинг",
-    "insurance": "Страхование",
-    "isp": "Мобильная связь и Интернет",
-    "konnectors": "Сервисы",
-    "list_separator": ", ",
-    "mes_infos": "Эксперимент MesInfos",
-    "online_services": "Онлайн-сервисы",
-    "others": "Прочее",
-    "partners": "Партнеры",
-    "press": "Пресса",
-    "productivity": "Продуктивность",
-    "ptnb": "Эксперимент PTNB",
-    "public_service": "Государственные услуги",
-    "shopping": "Покупки",
-    "social": "Социальные сети",
-    "tech": "Технологии",
-    "telecom": "Телекоммуникации",
-    "transport": "Транспорт",
-    "pro": "Работа",
-    "shortcuts": "Дополнительные приложения"
-  },
-  "sections": {
-    "applications": "Приложения",
-    "konnectors": "Сервисы",
-    "shortcuts": "Дополнительные приложения"
-  }
-}

package/react/AppSections/locales/vi.json

@@ -1,37 +0,0 @@
-{
-  "app_categories": {
-    "all": "Tất cả danh mục",
-    "banking": "Ngân hàng",
-    "clouds": "Đám mây và kho lưu trữ",
-    "cozy": "Thiết yếu",
-    "education": "Giáo dục",
-    "energy": "Năng lượng",
-    "finance": "Việc làm và tài chính",
-    "health": "Sức khỏe",
-    "host_provider": "Máy chủ",
-    "insurance": "Bảo hiểm",
-    "isp": "Di động và Internet",
-    "konnectors": "Dịch vụ",
-    "list_separator": ", ",
-    "mes_infos": "Thí nghiệm MesInfos",
-    "online_services": "Dịch vụ trực tuyến",
-    "others": "Khác",
-    "partners": "Đối tác",
-    "press": "Báo chí",
-    "productivity": "Năng suất",
-    "ptnb": "Thí nghiệm PTNB",
-    "public_service": "Dịch vụ công",
-    "shopping": "Mua sắm",
-    "social": "Mạng xã hội",
-    "tech": "Công nghệ",
-    "telecom": "Viễn thông",
-    "transport": "Giao thông",
-    "pro": "Công việc",
-    "shortcuts": "Ứng dụng bổ sung"
-  },
-  "sections": {
-    "applications": "Ứng dụng",
-    "konnectors": "Dịch vụ",
-    "shortcuts": "Ứng dụng bổ sung"
-  }
-}

package/react/AppSections/search.js

@@ -1,104 +0,0 @@
-import mapValues from 'lodash/mapValues'
-import matches from 'lodash/matches'
-import overEvery from 'lodash/overEvery'
-
-import { APP_TYPE } from './constants'
-
-const getDoctypesList = permsObj => {
-  const doctypes = []
-  for (let p in permsObj) {
-    if (permsObj[p].type) doctypes.push(permsObj[p].type)
-  }
-  return doctypes
-}
-
-const typeMatcher = type => app => app.type === type
-const categoryMatcher = category => app => {
-  if (!Array.isArray(app.categories)) return false
-  return app.categories.includes(category)
-}
-const tagMatcher = tag => app => {
-  if (!Array.isArray(app.tags)) return false
-  return app.tags.includes(tag)
-}
-const doctypeMatcher = doctype => app => {
-  if (!app.permissions) return false
-  return getDoctypesList(app.permissions).includes(doctype)
-}
-const pendingUpdateMatcher = () => app => !!app.availableVersion
-
-const showMaintenanceMatcher = isShowMaintenance => app => {
-  if (isShowMaintenance) return true
-  return app.maintenance === undefined
-}
-
-const qualificationLabelsMatcher = label => app => {
-  if (!Array.isArray(app.qualification_labels)) return false
-  return app.qualification_labels.includes(label)
-}
-
-const searchAttrToMatcher = {
-  type: typeMatcher,
-  category: categoryMatcher,
-  tag: tagMatcher,
-  doctype: doctypeMatcher,
-  pendingUpdate: pendingUpdateMatcher,
-  showMaintenance: showMaintenanceMatcher,
-  qualificationLabels: qualificationLabelsMatcher
-}
-
-/**
- * Returns a predicate function to match an app based on
- * a search specification.
- *
- * @param  {Search} search - What to search, ex: { type: 'webapp', category: 'banking'}
- * @return {Function<App>}
- */
-export const makeMatcherFromSearch = (search = {}) => {
-  // Create all predicates from the search object
-  const predicates = Object.values(
-    mapValues(search, (value, name) => {
-      return searchAttrToMatcher[name]?.(value)
-    })
-  )
-  // Return a function returning true if all predicates pass
-  return overEvery(predicates)
-}
-
-/**
- * Returns a predicate to find the corresponding category option for
- * a search
- *
- * @param  {Search}
- * @return {Function<CategoryOption>}
- */
-export const makeOptionMatcherFromSearch = (search = {}) => {
-  const typeParam = search.type
-  const categoryParam = search.category
-  if (typeParam === APP_TYPE.KONNECTOR && !categoryParam) {
-    return matches({ value: 'konnectors' })
-  } else if (!typeParam && !categoryParam) {
-    return matches({ value: 'all' })
-  }
-  return matches({ value: categoryParam, type: typeParam })
-}
-
-/**
- * Returns a Search from a category option
- *
- * @param  {CategoryOption}
- * @return {Search}
- */
-export const makeSearchFromOption = option => {
-  if (option.value === 'all') {
-    return {}
-  }
-  const search = {}
-  if (option.value === 'konnectors') {
-    search.type = APP_TYPE.KONNECTOR
-  } else {
-    search.type = option.type
-    search.category = option.value
-  }
-  return search
-}