cozy-ui-plus 1.1.0

package/src/AppSections/categories.spec.js

@@ -0,0 +1,289 @@
+'use strict'
+
+/* eslint-env jest */
+
+import mapValues from 'lodash/mapValues'
+
+import mockApps from './_testApps'
+import * as catUtils from './categories'
+import en from './locales/en'
+import { I18nContext } from '../../test/I18n'
+
+const i18nContext = I18nContext({
+  locale: {
+    ...en,
+    app_categories: {
+      ...en.app_categories,
+      foo: 'Foo',
+      bar: 'Bar'
+    }
+  }
+})
+const tMock = i18nContext.t
+
+describe('groupApps', () => {
+  it('should return apps sorted in a dictionary by categories', () => {
+    expect(
+      mapValues(catUtils.groupApps(mockApps), apps => apps.map(x => x.slug))
+    ).toEqual({
+      cozy: ['collect', 'drive', 'photos'],
+      isp: ['konnector-bouilligue'],
+      others: ['devonly'],
+      partners: ['tasky'],
+      telecom: ['konnector-bouilligue'],
+      transport: ['konnector-trinlane']
+    })
+  })
+})
+
+describe('sorter', () => {
+  const prepareCategories = categoryNames =>
+    categoryNames.map(cat =>
+      catUtils.addLabel(
+        {
+          value: cat
+        },
+        tMock
+      )
+    )
+
+  it('should return a categories list alphabetically except for all and others', () => {
+    const catList = prepareCategories([
+      'cozy',
+      'isp',
+      'all',
+      'telecom',
+      'others',
+      'banking'
+    ])
+    expect(catList.sort(catUtils.sorter).map(x => x.value)).toEqual([
+      'all',
+      'cozy',
+      'banking',
+      'isp',
+      'telecom',
+      'others'
+    ])
+  })
+
+  it('should test with all and others at the border', () => {
+    const catList2 = prepareCategories([
+      'all',
+      'telecom',
+      'banking',
+      'cozy',
+      'others'
+    ])
+    expect(catList2.sort(catUtils.sorter).map(x => x.value)).toEqual([
+      'all',
+      'cozy',
+      'banking',
+      'telecom',
+      'others'
+    ])
+  })
+})
+
+describe('generateOptionsFromApps', () => {
+  const addLabel = x => catUtils.addLabel(x, tMock)
+  it('should return a list of categories options for a select input based on the apps list', () => {
+    expect(
+      catUtils.generateOptionsFromApps(mockApps, {
+        includeAll: false,
+        addLabel
+      })
+    ).toEqual([
+      {
+        label: 'The essentials',
+        secondary: false,
+        type: 'webapp',
+        value: 'cozy'
+      },
+      {
+        label: 'Partners',
+        secondary: false,
+        type: 'webapp',
+        value: 'partners'
+      },
+      {
+        label: 'Others',
+        secondary: false,
+        type: 'webapp',
+        value: 'others'
+      },
+      {
+        label: 'Services',
+        secondary: false,
+        value: 'konnectors'
+      },
+      {
+        label: 'Mobile and Internet',
+        secondary: true,
+        type: 'konnector',
+        value: 'isp'
+      },
+      {
+        label: 'Telecom',
+        secondary: true,
+        type: 'konnector',
+        value: 'telecom'
+      },
+      {
+        label: 'Transportation',
+        secondary: true,
+        type: 'konnector',
+        value: 'transport'
+      }
+    ])
+  })
+
+  it('should return include the all categories if includeAll option true', () => {
+    expect(
+      catUtils.generateOptionsFromApps(mockApps, { includeAll: true, addLabel })
+    ).toEqual([
+      {
+        secondary: false,
+        value: 'all'
+      },
+      {
+        label: 'The essentials',
+        secondary: false,
+        type: 'webapp',
+        value: 'cozy'
+      },
+      {
+        label: 'Partners',
+        secondary: false,
+        type: 'webapp',
+        value: 'partners'
+      },
+      {
+        label: 'Others',
+        secondary: false,
+        type: 'webapp',
+        value: 'others'
+      },
+      {
+        label: 'Services',
+        secondary: false,
+        value: 'konnectors'
+      },
+      {
+        label: 'Mobile and Internet',
+        secondary: true,
+        type: 'konnector',
+        value: 'isp'
+      },
+      {
+        label: 'Telecom',
+        secondary: true,
+        type: 'konnector',
+        value: 'telecom'
+      },
+      {
+        label: 'Transportation',
+        secondary: true,
+        type: 'konnector',
+        value: 'transport'
+      }
+    ])
+  })
+
+  it('should return an empty list if empty apps list provided', () => {
+    expect(
+      catUtils.generateOptionsFromApps([], { includeAll: false, addLabel })
+    ).toEqual([])
+  })
+
+  it('should return an empty list if no apps provided', () => {
+    expect(
+      catUtils.generateOptionsFromApps(null, { includeAll: false, addLabel })
+    ).toEqual([])
+  })
+
+  it('should return additional apps categories when there more than one', () => {
+    const appsWithAdditionlOnes = [
+      ...mockApps,
+      {
+        _id: 'shortcutA',
+        name: 'Shortcut A',
+        categories: ['foo'],
+        type: 'file',
+        _type: 'io.cozy.files'
+      },
+      {
+        _id: 'shortcutB',
+        name: 'Shortcut B',
+        categories: ['bar'],
+        type: 'file',
+        _type: 'io.cozy.files'
+      }
+    ]
+
+    expect(
+      catUtils.generateOptionsFromApps(appsWithAdditionlOnes, {
+        includeAll: false,
+        addLabel
+      })
+    ).toEqual([
+      {
+        label: 'The essentials',
+        secondary: false,
+        type: 'webapp',
+        value: 'cozy'
+      },
+      {
+        label: 'Partners',
+        secondary: false,
+        type: 'webapp',
+        value: 'partners'
+      },
+      {
+        label: 'Others',
+        secondary: false,
+        type: 'webapp',
+        value: 'others'
+      },
+      {
+        label: 'Additional apps',
+        secondary: false,
+        value: 'shortcuts'
+      },
+      {
+        label: 'Bar',
+        secondary: true,
+        type: 'file',
+        value: 'bar'
+      },
+      {
+        label: 'Foo',
+        secondary: true,
+        type: 'file',
+        value: 'foo'
+      },
+      {
+        label: 'Services',
+        secondary: false,
+        value: 'konnectors'
+      },
+      {
+        label: 'Mobile and Internet',
+        secondary: true,
+        type: 'konnector',
+        value: 'isp'
+      },
+      {
+        label: 'Telecom',
+        secondary: true,
+        type: 'konnector',
+        value: 'telecom'
+      },
+      {
+        label: 'Transportation',
+        secondary: true,
+        type: 'konnector',
+        value: 'transport'
+      }
+    ])
+  })
+})

package/src/AppSections/components/AppsSection.jsx

@@ -0,0 +1,82 @@
+import sortBy from 'lodash/sortBy'
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import styles from './AppsSection.styl'
+import AppTile from '../../AppTile'
+import { getTranslatedManifestProperty } from '../helpers'
+
+const makeNameGetter = t => app => getTranslatedManifestProperty(app, 'name', t)
+
+const makeAppsListNameLowerCased = appsList => {
+  return appsList.map(app => ({
+    ...app,
+    name: app.name.toLowerCase()
+  }))
+}
+
+export const AppsSection = ({
+  appsList,
+  subtitle,
+  onAppClick,
+  IconComponent,
+  displaySpecificMaintenanceStyle,
+  disableClick
+}) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+  const apps = useMemo(() => makeAppsListNameLowerCased(appsList), [appsList])
+  const sortedApps = useMemo(() => {
+    return sortBy(apps, makeNameGetter(t))
+  }, [apps, t])
+  const getAppBySlug = useMemo(
+    () => slug => appsList.find(app => app.slug === slug),
+    [appsList]
+  )
+
+  return (
+    <div className={styles.AppsSection}>
+      {subtitle}
+      {apps && !!apps.length && (
+        <div className={styles.AppsSection__list}>
+          {sortedApps.map(app => {
+            const realApp = getAppBySlug(app.slug)
+            const isDisableClick = disableClick?.(realApp)
+            return (
+              <AppTile
+                app={realApp}
+                namePrefix={getTranslatedManifestProperty(
+                  realApp,
+                  'name_prefix',
+                  t
+                )}
+                name={getTranslatedManifestProperty(realApp, 'name', t)}
+                onClick={() => !isDisableClick && onAppClick(realApp.slug)}
+                key={realApp.slug}
+                showDeveloper={!isMobile}
+                displaySpecificMaintenanceStyle={
+                  displaySpecificMaintenanceStyle
+                }
+                IconComponent={IconComponent}
+              />
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+AppsSection.propTypes = {
+  appsList: PropTypes.array,
+  subtitle: PropTypes.element,
+  onAppClick: PropTypes.func,
+  IconComponent: PropTypes.element,
+  displaySpecificMaintenanceStyle: PropTypes.bool,
+  disableClick: PropTypes.func
+}
+
+export default AppsSection

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

@@ -0,0 +1,50 @@
+'use strict'
+
+/* eslint-env jest */
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import { AppsSection } from './AppsSection'
+import { I18nContext } from '../../../test/I18n'
+import DemoProvider from '../../providers/DemoProvider'
+import mockApps from '../_testApps'
+import en from '../locales/en'
+
+const i18nContext = I18nContext({ locale: en })
+const tMock = i18nContext.t
+
+describe('AppsSection component', () => {
+  const setup = ({ onAppClick }) => {
+    render(
+      <DemoProvider>
+        <AppsSection
+          t={tMock}
+          lang="en"
+          subtitle={<h3>Test Apps</h3>}
+          appsList={mockApps}
+          onAppClick={onAppClick}
+        />
+      </DemoProvider>
+    )
+  }
+
+  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/src/AppSections/components/AppsSection.styl

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

package/src/AppSections/components/DropdownFilter.jsx

@@ -0,0 +1,50 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
+
+import styles from './DropdownFilter.styl'
+
+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/src/AppSections/components/DropdownFilter.styl

@@ -0,0 +1,14 @@
+.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/src/AppSections/constants.js

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

package/src/AppSections/generateI18nConfig.ts

@@ -0,0 +1,23 @@
+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/src/AppSections/helpers.js

@@ -0,0 +1,16 @@
+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/src/AppSections/helpers.spec.js

@@ -0,0 +1,40 @@
+import { extend as extendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import { getTranslatedManifestProperty } from './helpers'
+import en from './locales/en'
+import { I18nContext } from '../../test/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/src/AppSections/index.jsx

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