cozy-ui 111.5.0 → 111.7.0

package/react/AppSections/__snapshots__/index.spec.jsx.snap

@@ -1075,6 +1075,11 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           "type": "webapp",
           "value": "partners",
         },
+        Object {
+          "label": "Shortcuts",
+          "secondary": false,
+          "value": "shortcuts",
+        },
         Object {
           "label": "Services",
           "secondary": false,
@@ -1476,6 +1481,11 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           "type": "webapp",
           "value": "partners",
         },
+        Object {
+          "label": "Shortcuts",
+          "secondary": false,
+          "value": "shortcuts",
+        },
         Object {
           "label": "Services",
           "secondary": false,

package/react/AppSections/categories.js

@@ -38,21 +38,37 @@ export const groupApps = apps => multiGroupBy(apps, getAppCategory)
  * Alphabetical sort on label except for
  *   - 'all' value always at the beginning
  *   - 'others' value always at the end
+ *   - 'cozy' value should be near the beginning, right after 'all'
+ *   - items of type 'file' should appear alphabetically between 'webapp' and 'konnector'
  *
  * @param  {CategoryOption} categoryA
  * @param  {CategoryOption} categoryB
  * @return {Number}
  */
 export const sorter = (categoryA, categoryB) => {
-  return (
-    (categoryA.value === 'all' && -1) ||
-    (categoryB.value === 'all' && 1) ||
-    (categoryA.value === 'others' && 1) ||
-    (categoryB.value === 'others' && -1) ||
-    (categoryA.value === 'cozy' && -1) ||
-    (categoryB.value === 'cozy' && 1) ||
-    categoryA.label.localeCompare(categoryB.label)
-  )
+  // Always keep 'all' at the beginning
+  if (categoryA.value === 'all') return -1
+  if (categoryB.value === 'all') return 1
+
+  // Always keep 'others' at the end
+  if (categoryA.value === 'others') return 1
+  if (categoryB.value === 'others') return -1
+
+  // Keep 'cozy' near the beginning, right after 'all'
+  if (categoryA.value === 'cozy') return -1
+  if (categoryB.value === 'cozy') return 1
+
+  // Sort by type order: webapp < file < konnector
+  const typeOrder = ['webapp', 'file', 'konnector']
+  const typeAIndex = typeOrder.indexOf(categoryA.type)
+  const typeBIndex = typeOrder.indexOf(categoryB.type)
+
+  if (typeAIndex !== typeBIndex) {
+    return typeAIndex - typeBIndex
+  }
+
+  // Alphabetical sort on label for the rest
+  return categoryA.label.localeCompare(categoryB.label)
 }
 
 export const addLabel = (cat, t) => ({
@@ -82,7 +98,7 @@ export const generateOptionsFromApps = (apps, options = {}) => {
       ]
     : []
 
-  for (const type of [APP_TYPE.WEBAPP, APP_TYPE.KONNECTOR]) {
+  for (const type of [APP_TYPE.WEBAPP, APP_TYPE.FILE, APP_TYPE.KONNECTOR]) {
     const catApps = groupApps(apps.filter(a => a.type === type))
     // Add an entry to filter by all konnectors
     if (type === APP_TYPE.KONNECTOR) {
@@ -93,11 +109,19 @@ export const generateOptionsFromApps = (apps, options = {}) => {
         })
       )
     }
+    if (type === APP_TYPE.FILE) {
+      allCategoryOptions.push(
+        addLabel({
+          value: 'shortcuts',
+          secondary: false
+        })
+      )
+    }
     const categoryOptions = Object.keys(catApps).map(cat => {
       return addLabel({
         value: cat,
         type: type,
-        secondary: type === APP_TYPE.KONNECTOR
+        secondary: type === APP_TYPE.KONNECTOR || type === APP_TYPE.FILE
       })
     })
 

package/react/AppSections/categories.spec.js

@@ -2,12 +2,12 @@
 
 /* eslint-env jest */
 
-import * as catUtils from './categories'
+import mapValues from 'lodash/mapValues'
 
+import * as catUtils from './categories'
+import en from './locales/en'
 import { I18nContext } from '../jestLib/I18n'
 import mockApps from '../mocks/apps'
-import en from './locales/en'
-import mapValues from 'lodash/mapValues'
 
 const i18nContext = I18nContext({
   locale: en
@@ -104,6 +104,7 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
+      { label: 'Shortcuts', secondary: false, value: 'shortcuts' },
       {
         label: 'Services',
         secondary: false,
@@ -156,6 +157,11 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
+      {
+        label: 'Shortcuts',
+        secondary: false,
+        value: 'shortcuts'
+      },
       {
         label: 'Services',
         secondary: false,

package/react/AppSections/components/AppsSection.jsx

@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react'
+import sortBy from 'lodash/sortBy'
 import PropTypes from 'prop-types'
-import { useI18n } from '../../providers/I18n'
+import React, { useMemo } from 'react'
+
+import styles from './AppsSection.styl'
+import AppTile from '../../AppTile'
 import useBreakpoints from '../../providers/Breakpoints'
+import { useI18n } from '../../providers/I18n'
 import { getTranslatedManifestProperty } from '../helpers'
-import sortBy from 'lodash/sortBy'
-import AppTile from '../../AppTile'
-import styles from './AppsSection.styl'
 
 const makeNameGetter = t => app => getTranslatedManifestProperty(app, 'name', t)
 

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

@@ -2,19 +2,18 @@
 
 /* eslint-env jest */
 
-import React from 'react'
 import { mount } from 'enzyme'
+import React from 'react'
 
 import { CozyProvider } from 'cozy-client'
 
-import mockApps from '../../mocks/apps'
-import en from '../locales/en'
-import { I18nContext } from '../../jestLib/I18n'
+import { AppsSection } from './AppsSection'
 import Tile, { TileTitle, TileSubtitle, TileFooter } from '../../Tile'
+import { I18nContext } from '../../jestLib/I18n'
+import mockApps from '../../mocks/apps'
 import { BreakpointsProvider } from '../../providers/Breakpoints'
 import { I18n } from '../../providers/I18n'
-
-import { AppsSection } from './AppsSection'
+import en from '../locales/en'
 
 const i18nContext = I18nContext({ locale: en })
 const tMock = i18nContext.t

package/react/AppSections/components/DropdownFilter.jsx

@@ -1,13 +1,12 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 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'
 
-import styles from './DropdownFilter.styl'
-
 const SmallArrow = () => (
   <Icon
     className={cx(styles.DropdownFilter__icon, 'u-mr-1')}

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

@@ -28,7 +28,7 @@ Array [
     "title": "Cozy Photos",
   },
   Object {
-    "developer": null,
+    "developer": "By undefined",
     "status": "Update available",
     "title": "Tasky",
   },

package/react/AppSections/constants.js

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

package/react/AppSections/generateI18nConfig.ts

@@ -0,0 +1,23 @@
+export const generateI18nConfig = (categories?: {
+  [key: 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,8 +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/react/AppSections/helpers.spec.js

@@ -1,7 +1,7 @@
 import { getTranslatedManifestProperty } from './helpers'
-import { extend as extendI18n } from '../providers/I18n'
 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

package/react/AppSections/index.spec.jsx

@@ -2,13 +2,13 @@
 
 /* eslint-env jest */
 
-import React from 'react'
 import { shallow } from 'enzyme'
-import { Sections } from './Sections'
+import React from 'react'
 
-import mockApps from '../mocks/apps'
-import { I18nContext } from '../jestLib/I18n'
+import { Sections } from './Sections'
 import en from './locales/en.json'
+import { I18nContext } from '../jestLib/I18n'
+import mockApps from '../mocks/apps'
 
 const i18nContext = I18nContext({ locale: en })
 const tMock = i18nContext.t

package/react/AppSections/locales/en.json

@@ -26,10 +26,12 @@
     "tech": "Tech",
     "telecom": "Telecom",
     "transport": "Transportation",
-    "pro": "Work"
+    "pro": "Work",
+    "shortcuts": "Shortcuts"
   },
   "sections": {
     "applications": "Applications",
-    "konnectors": "Services"
+    "konnectors": "Services",
+    "shortcuts": "Shortcuts"
   }
 }

package/react/AppSections/locales/fr.json

@@ -26,10 +26,12 @@
     "tech": "Tech",
     "telecom": "Mobile",
     "transport": "Voyage et transport",
-    "pro": "Travail"
+    "pro": "Travail",
+    "shortcuts": "Raccourcis"
   },
   "sections": {
     "applications": "Applications",
-    "konnectors": "Services"
+    "konnectors": "Services",
+    "shortcuts": "Raccourcis"
   }
 }

package/react/AppSections/search.js

@@ -1,6 +1,6 @@
-import overEvery from 'lodash/overEvery'
 import mapValues from 'lodash/mapValues'
 import matches from 'lodash/matches'
+import overEvery from 'lodash/overEvery'
 
 import { APP_TYPE } from './constants'
 

package/react/AppTile/AppTile.spec.jsx

@@ -2,14 +2,15 @@
 
 /* eslint-env jest */
 
-import React from 'react'
 import { render } from '@testing-library/react'
-import CozyClient, { CozyProvider } from 'cozy-client'
+import React from 'react'
 
-import en from '../AppSections/locales/en.json'
-import I18n from '../providers/I18n'
+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',
@@ -41,11 +42,11 @@ const appMock2 = {
 const client = new CozyClient({})
 const Wrapper = props => {
   return (
-    <CozyProvider client={client}>
+    <DemoProvider client={client}>
       <I18n dictRequire={() => en} lang="en">
         <AppTile {...props} />
       </I18n>
-    </CozyProvider>
+    </DemoProvider>
   )
 }
 

package/react/AppTile/index.jsx

@@ -1,7 +1,16 @@
+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 styles from './styles.styl'
 import AppIcon from '../AppIcon'
-import PropTypes from 'prop-types'
+import { isShortcutFile } from '../AppSections/helpers.js'
+import Icon from '../Icon'
+import WrenchCircleIcon from '../Icons/WrenchCircle'
+import { ShortcutTile } from '../ShortcutTile'
 import Tile, {
   TileTitle,
   TileSubtitle,
@@ -9,18 +18,10 @@ import Tile, {
   TileIcon,
   TileDescription
 } from '../Tile'
-
-import { createUseI18n } from '../providers/I18n'
-import { AppDoctype } from '../proptypes'
-
-import { APP_STATUS, getCurrentStatusLabel } from './helpers'
-import styles from './styles.styl'
-import en from './locales/en.json'
-import fr from './locales/fr.json'
-import Icon from '../Icon'
-import WrenchCircleIcon from '../Icons/WrenchCircle'
 import palette from '../palette'
-import cx from 'classnames'
+import { AppDoctype } from '../proptypes'
+import useBreakpoints from '../providers/Breakpoints'
+import { createUseI18n } from '../providers/I18n'
 
 const locales = { en, fr }
 
@@ -49,16 +50,30 @@ export const AppTile = ({
   IconComponent: IconComponentProp,
   displaySpecificMaintenanceStyle
 }) => {
-  const name = nameProp || app.name
   const { t } = useI18n()
   const { developer = {} } = app
+  const { isMobile } = useBreakpoints()
+
+  const name = nameProp || app.name
+
   const statusLabel = getCurrentStatusLabel(app)
-  const statusToDisplay = Array.isArray(showStatus)
-    ? showStatus.indexOf(statusLabel) > -1 && statusLabel
-    : showStatus && statusLabel
+
+  const isStatusArray = Array.isArray(showStatus)
+
+  const statusToDisplay =
+    isShortcutFile(app) && statusLabel === APP_STATUS.installed && isMobile
+      ? 'favorite'
+      : isStatusArray
+      ? showStatus.indexOf(statusLabel) > -1 && statusLabel
+      : showStatus && statusLabel
+
   const IconComponent = IconComponentProp || AppIcon
+
   const isInMaintenanceWithSpecificDisplay =
     displaySpecificMaintenanceStyle && statusLabel === APP_STATUS.maintenance
+  const tileSubtitle = isShortcutFile(app)
+    ? app.metadata?.source
+    : developer.name
 
   return (
     <Tile
@@ -66,18 +81,21 @@ export const AppTile = ({
       type="button"
       onClick={onClick}
       className={cx({
-        [styles[
-          'AppTile-container-maintenance'
-        ]]: isInMaintenanceWithSpecificDisplay
+        [styles['AppTile-container-maintenance']]:
+          isInMaintenanceWithSpecificDisplay
       })}
       isSecondary={statusLabel === APP_STATUS.installed}
     >
       <TileIcon>
-        <IconComponent
-          app={app}
-          className={styles['AppTile-icon']}
-          {...getAppIconProps()}
-        />
+        {isShortcutFile(app) ? (
+          <ShortcutTile file={app} />
+        ) : (
+          <IconComponent
+            app={app}
+            className={styles['AppTile-icon']}
+            {...getAppIconProps()}
+          />
+        )}
         {isInMaintenanceWithSpecificDisplay && (
           <Icon
             data-testid="icon-maintenance"
@@ -91,8 +109,8 @@ export const AppTile = ({
         <TileTitle isMultiline={!statusLabel}>
           {namePrefix ? `${namePrefix} ${name}` : name}
         </TileTitle>
-        {developer.name && showDeveloper && (
-          <TileSubtitle>{`${t('app_item.by')} ${developer.name}`}</TileSubtitle>
+        {showDeveloper && (
+          <TileSubtitle>{`${t('app_item.by')} ${tileSubtitle}`}</TileSubtitle>
         )}
         {statusToDisplay && (
           <TileFooter isAccent={statusLabel === APP_STATUS.update}>

package/react/AppTile/locales/en.json

@@ -3,6 +3,7 @@
     "by": "By",
     "installed": "Installed",
     "maintenance": "In maintenance",
-    "update": "Update available"
+    "update": "Update available",
+    "favorite": "Added to home page"
   }
 }

package/react/AppTile/locales/fr.json

@@ -3,6 +3,7 @@
     "by": "Par",
     "installed": "Installée",
     "maintenance": "En maintenance",
-    "update": "Mise à jour dispo."
+    "update": "Mise à jour dispo.",
+    "favorite": "Ajouté sur la page d'accueil"
   }
 }

package/react/AppTitle/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
-import cx from 'classnames'
 import Typography from '@material-ui/core/Typography'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
+
 import styles from './styles.styl'
 
 export const AppTitle = ({ children, tag, className, ...restProps }) => {

package/react/Avatar/index.jsx

@@ -1,13 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
-import PropTypes from 'prop-types'
 import assign from 'lodash/assign'
+import PropTypes from 'prop-types'
+import React from 'react'
 
+import { nameToColor } from './helpers'
 import styles from './styles.styl'
+import { createSizeStyle } from '../Circle'
 import Icon, { iconPropType } from '../Icon'
 import PeopleIcon from '../Icons/People'
-import { createSizeStyle } from '../Circle'
-import { nameToColor } from './helpers'
 
 const createBgColorStyle = ({ text, textId }) =>
   text ? { backgroundColor: `${nameToColor(textId || text)}` } : {}

package/react/Backdrop/index.js

@@ -1,7 +1,7 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import MuiBackdrop from '@material-ui/core/Backdrop'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
 
 import { makeStyles } from '../styles'
 

package/react/Badge/index.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import MuiBadge from '@material-ui/core/Badge'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import MuiBadge from '@material-ui/core/Badge'
+import React from 'react'
 
 const Badge = ({
   classes = {},

package/react/Banner/index.jsx

@@ -1,14 +1,13 @@
-import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import Paper from '../Paper'
-import Grid from '../Grid'
+import styles from './styles.styl'
 import Divider from '../Divider'
+import Grid from '../Grid'
+import Paper from '../Paper'
 import Typography from '../Typography'
 
-import styles from './styles.styl'
-
 /**
  * A banner displays a prominent message and related optional actions.
  */

package/react/Banner/index.spec.jsx

@@ -1,5 +1,6 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
+
 import Banner from '.'
 
 describe('Grid', () => {

package/react/BarButton/index.jsx

@@ -1,9 +1,8 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { PureComponent } from 'react'
 
 import styles from './styles.styl'
-
 import Icon from '../Icon'
 
 class MaybeLink extends PureComponent {

package/react/BarContextProvider/index.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { I18nContext } from '../providers/I18n'
-import { BreakpointsProvider } from '../providers/Breakpoints'
+import { Provider } from 'react-redux'
 
 import { CozyProvider } from 'cozy-client'
-import { Provider } from 'react-redux'
 import { WebviewIntentProvider } from 'cozy-intent'
 
+import { BreakpointsProvider } from '../providers/Breakpoints'
+import { I18nContext } from '../providers/I18n'
+
 const BarContextProvider = ({
   children,
   store,

package/react/BarContextProvider/index.spec.jsx

@@ -1,14 +1,14 @@
+import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider, useStore } from 'react-redux'
 import configureStore from 'redux-mock-store'
-import { render } from '@testing-library/react'
 
-import { useWebviewIntent } from 'cozy-intent'
 import CozyClient, {
   createMockClient,
   CozyProvider,
   useClient
 } from 'cozy-client'
+import { useWebviewIntent } from 'cozy-intent'
 
 import BarContextProvider from '.'
 import I18n, { useI18n, translate } from '../providers/I18n'

package/react/BarTitle/index.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-
-import Typography from '../Typography'
+import React from 'react'
 
 import styles from './styles.styl'
+import Typography from '../Typography'
 
 const BarTitle = ({ noWrap, children }) => {
   return (