cozy-ui 111.5.0 → 111.7.0

package/.nvmrc

@@ -1 +1 @@
-16.20.2
+18.20.3

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [111.7.0](https://github.com/cozy/cozy-ui/compare/v111.6.0...v111.7.0) (2024-08-14)
+
+
+### Features
+
+* handle shortcuttiles ([e5ff800](https://github.com/cozy/cozy-ui/commit/e5ff800))
+
+# [111.6.0](https://github.com/cozy/cozy-ui/compare/v111.5.0...v111.6.0) (2024-08-14)
+
+
+### Bug Fixes
+
+* handle auto fixable lint errors ([ec1c677](https://github.com/cozy/cozy-ui/commit/ec1c677))
+* manually handle lint errors not auto fixable ([bf9df94](https://github.com/cozy/cozy-ui/commit/bf9df94))
+
+
+### Features
+
+* Prettier to 2.6 (current implicit version) ([0739fc7](https://github.com/cozy/cozy-ui/commit/0739fc7))
+* update lint config ([e9637af](https://github.com/cozy/cozy-ui/commit/e9637af))
+
 # [111.5.0](https://github.com/cozy/cozy-ui/compare/v111.4.0...v111.5.0) (2024-08-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.5.0",
+  "version": "111.7.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -25,8 +25,8 @@
     "build:css:kss": "env CSSMODULES=false yarn run stylus-build -o build/styleguide/app.css stylus/cozy-ui/build.styl",
     "build:doc": "npm-run-all 'build:doc:*'",
     "build:doc:config": "copyfiles -u 1 docs/*.md docs/_config.yml build",
-    "build:doc:kss": "kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage stylus/styleguide.md --css app.css",
-    "build:doc:react": "styleguidist build --config docs/styleguide.config.js",
+    "build:doc:kss": "NODE_OPTIONS=--openssl-legacy-provider kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage stylus/styleguide.md --css app.css",
+    "build:doc:react": "NODE_OPTIONS=--openssl-legacy-provider styleguidist build --config docs/styleguide.config.js",
     "build:types": "tsc -p tsconfig-build.json",
     "build:all": "yarn makeSpriteAndPalette && yarn build && yarn build:css:all && yarn build:doc",
     "build:js": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx,.md,.styl,.json,.snap react/ --out-dir transpiled/react --copy-files --no-copy-ignored --verbose",
@@ -35,7 +35,7 @@
     "deploy:doc": "git-directory-deploy --directory build/ --branch gh-pages",
     "makeSvgr": "scripts/generate-svgr-icon.sh",
     "lint": "npm-run-all 'lint:*'",
-    "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'react/**/*.ts' 'docs/styleguide.config.js'",
+    "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'react/**/*.ts' 'react/**/*.tsx' 'docs/styleguide.config.js'",
     "lint:stylus": "stylint stylus --config .stylintrc",
     "lint:md": "remark . -o -S",
     "palette": "scripts/make-palette.sh",
@@ -70,6 +70,7 @@
     "@argos-ci/cli": "1.0.4",
     "@babel/cli": "7.17.6",
     "@babel/core": "7.17.8",
+    "@babel/eslint-parser": "7.19.1",
     "@babel/helper-builder-react-jsx": "7.16.7",
     "@babel/helper-define-map": "7.16.7",
     "@babel/helper-regex": "7.10.5",
@@ -83,6 +84,8 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^14.4.2",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
+    "@typescript-eslint/parser": "5.54.0",
     "autoprefixer-stylus": "1.0.0",
     "babel-loader": "8.2.4",
     "babel-plugin-css-modules-transform": "1.6.2",
@@ -105,8 +108,14 @@
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "eslint": "8.11.0",
-    "eslint-config-cozy-app": "4.0.0",
+    "eslint-config-cozy-app": "^6.1.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "express": "^4.17.1",
     "focus-trap-react": "^6.0.0",
     "git-directory-deploy": "1.5.1",
@@ -125,8 +134,10 @@
     "npm-run-all": "4.1.5",
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
+    "prettier": "2.6.0",
     "pretty": "2.0.0",
     "prop-types": "15.7.2",
+    "puppeteer-core": "22.15.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hot-loader": "^4.3.11",

package/react/AccordionSummary/index.js

@@ -1,5 +1,5 @@
-import React from 'react'
 import AccordionSummary from '@material-ui/core/AccordionSummary'
+import React from 'react'
 
 import AccordionExpandIcon from './AccordionExpandIcon'
 

package/react/ActionsBar/ResponsiveAction.jsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
 
-import useBreakpoints from '../providers/Breakpoints'
-import { makeStyles } from '../styles'
 import Button from '../Buttons'
-import Typography from '../Typography'
 import Icon from '../Icon'
+import Typography from '../Typography'
+import useBreakpoints from '../providers/Breakpoints'
+import { makeStyles } from '../styles'
 
 const useDesktopStyles = makeStyles({
   root: {

package/react/ActionsBar/index.jsx

@@ -1,24 +1,23 @@
-import React, { useRef, useState, useMemo } from 'react'
 import PropTypes from 'prop-types'
+import React, { useRef, useState, useMemo } from 'react'
 
-import { makeStyles } from '../styles'
-import useBreakpoints from '../providers/Breakpoints'
+import ResponsiveAction from './ResponsiveAction'
+import withActionsLocales from './locales/withActionsLocales'
+import ActionsMenu from '../ActionsMenu'
+import { makeActions, others } from '../ActionsMenu/Actions'
+import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers'
+import ActionsItems from '../ActionsMenu/ActionsItems'
 import AppBar from '../AppBar'
-import Toolbar from '../Toolbar'
 import Box from '../Box'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
 import CrossIcon from '../Icons/Cross'
 import CrossCircleIcon from '../Icons/CrossCircle'
 import DotsIcon from '../Icons/Dots'
-import ActionsMenu from '../ActionsMenu'
-import ActionsItems from '../ActionsMenu/ActionsItems'
-import { getOnlyNeededActions } from '../ActionsMenu/Actions/helpers'
+import Toolbar from '../Toolbar'
+import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
-import { makeActions, others } from '../ActionsMenu/Actions'
-
-import ResponsiveAction from './ResponsiveAction'
-import withActionsLocales from './locales/withActionsLocales'
+import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
   appBar: ({ isMobile }) => ({
@@ -81,10 +80,10 @@ const ActionsBar = ({
   const showDesktopCloseButton = !!onClose && !isMobile
   const maxActionsDisplayed = isMobile ? 4 : maxDesktopActions
 
-  const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [
-    actions,
-    docs
-  ])
+  const cleanedActions = useMemo(
+    () => getOnlyNeededActions(actions, docs),
+    [actions, docs]
+  )
 
   const countActionsToDisplay =
     cleanedActions.length > maxActionsDisplayed

package/react/ActionsBar/locales/withActionsLocales.jsx

@@ -1,7 +1,6 @@
-import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
-
 import en from './en.json'
 import fr from './fr.json'
+import withOnlyLocales from '../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/ActionsMenu/Actions/call.js

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
 
-import TelephoneIcon from '../../Icons/Telephone'
 import { getActionsI18n } from './locales/withActionsLocales'
-import ActionsMenuItem from '../ActionsMenuItem'
-import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
+import TelephoneIcon from '../../Icons/Telephone'
+import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
 
 export const call = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/Actions/emailTo.js

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
 
-import EmailIcon from '../../Icons/Email'
 import { getActionsI18n } from './locales/withActionsLocales'
-import ActionsMenuItem from '../ActionsMenuItem'
-import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
+import EmailIcon from '../../Icons/Email'
+import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
 
 export const emailTo = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/Actions/helpers.js

@@ -1,4 +1,5 @@
 import { PDFDocument } from 'pdf-lib'
+
 import { fetchBlobFileById } from 'cozy-client/dist/models/file'
 
 // Should guarantee good resolution for different uses (printing, downloading, etc.)

package/react/ActionsMenu/Actions/locales/withActionsLocales.jsx

@@ -1,8 +1,7 @@
-import { getI18n } from '../../../providers/I18n/helpers'
-import withOnlyLocales from '../../../providers/I18n/withOnlyLocales'
-
 import en from './en.json'
 import fr from './fr.json'
+import { getI18n } from '../../../providers/I18n/helpers'
+import withOnlyLocales from '../../../providers/I18n/withOnlyLocales'
 
 export const locales = {
   en,

package/react/ActionsMenu/Actions/modify.js

@@ -2,12 +2,12 @@ import React, { forwardRef } from 'react'
 
 import { generateWebLink } from 'cozy-client'
 
-import ListItemIcon from '../../ListItemIcon'
-import ListItemText from '../../ListItemText'
+import { getActionsI18n } from './locales/withActionsLocales'
 import Icon from '../../Icon'
 import PenIcon from '../../Icons/Pen'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
 import ActionsMenuItem from '../ActionsMenuItem'
-import { getActionsI18n } from './locales/withActionsLocales'
 
 export const modify = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/Actions/others.jsx

@@ -1,6 +1,5 @@
-import DotsIcon from '../../Icons/Dots'
-
 import { getActionsI18n } from './locales/withActionsLocales'
+import DotsIcon from '../../Icons/Dots'
 
 export const others = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/Actions/print.js

@@ -1,15 +1,15 @@
 import React, { forwardRef } from 'react'
 
-import logger from 'cozy-logger'
 import { fetchBlobFileById, isFile } from 'cozy-client/dist/models/file'
+import logger from 'cozy-logger'
 
 import { makeBase64FromFile, makePdfBlob } from './helpers'
-import PrinterIcon from '../../Icons/Printer'
 import { getActionsI18n } from './locales/withActionsLocales'
-import ActionsMenuItem from '../ActionsMenuItem'
-import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
+import PrinterIcon from '../../Icons/Printer'
+import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
 
 export const print = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/Actions/smsTo.js

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
 
-import CommentIcon from '../../Icons/Comment'
 import { getActionsI18n } from './locales/withActionsLocales'
-import ActionsMenuItem from '../ActionsMenuItem'
-import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
+import CommentIcon from '../../Icons/Comment'
+import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
 
 export const smsTo = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/Actions/viewInContacts.js

@@ -2,12 +2,12 @@ import React, { forwardRef } from 'react'
 
 import { generateWebLink } from 'cozy-client'
 
-import OpenappIcon from '../../Icons/Openapp'
 import { getActionsI18n } from './locales/withActionsLocales'
-import ActionsMenuItem from '../ActionsMenuItem'
-import ListItemIcon from '../../ListItemIcon'
 import Icon from '../../Icon'
+import OpenappIcon from '../../Icons/Openapp'
+import ListItemIcon from '../../ListItemIcon'
 import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
 
 export const viewInContacts = () => {
   const { t } = getActionsI18n()

package/react/ActionsMenu/ActionsItems.jsx

@@ -1,11 +1,11 @@
-import React, { forwardRef, useMemo } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef, useMemo } from 'react'
 
 import { useClient } from 'cozy-client'
 import { useWebviewIntent } from 'cozy-intent'
 
-import { useI18n } from '../providers/I18n'
 import { getActionName, getOnlyNeededActions } from './Actions/helpers'
+import { useI18n } from '../providers/I18n'
 
 const ActionsItems = forwardRef(
   (
@@ -23,10 +23,10 @@ const ActionsItems = forwardRef(
     const webviewIntent = useWebviewIntent()
     const { t } = useI18n()
 
-    const cleanedActions = useMemo(() => getOnlyNeededActions(actions, docs), [
-      actions,
-      docs
-    ])
+    const cleanedActions = useMemo(
+      () => getOnlyNeededActions(actions, docs),
+      [actions, docs]
+    )
 
     return cleanedActions.map((actionObject, idx) => {
       const actionName = getActionName(actionObject)

package/react/ActionsMenu/ActionsMenuItem.jsx

@@ -1,10 +1,10 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import omit from 'lodash/omit'
 import cx from 'classnames'
+import omit from 'lodash/omit'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import MenuItem from '../MenuItem'
 import ListItem from '../ListItem'
+import MenuItem from '../MenuItem'
 
 const cleanPropsForDOM = props => {
   const nonDOMProps = ['docs', 'action', 't', 'f', 'lang']

package/react/ActionsMenu/ActionsMenuMobileHeader.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
 import ActionsMenuItem from './ActionsMenuItem'
 import Divider from '../Divider'

package/react/ActionsMenu/ActionsMenuWrapper.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
-import Menu from '../Menu'
-import useBreakpoints from '../providers/Breakpoints'
 import BottomSheet from '../BottomSheet'
-import isTesting from '../helpers/isTesting'
+import Menu from '../Menu'
 import Paper from '../Paper'
 import { useActionMenuEffects } from '../deprecated/ActionMenu/ActionMenuEffects'
+import isTesting from '../helpers/isTesting'
+import useBreakpoints from '../providers/Breakpoints'
 
 const ActionsMenuWrapper = ({
   children,

package/react/ActionsMenu/index.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import ActionsMenuWrapper from './ActionsMenuWrapper'
 import ActionsItems from './ActionsItems'
+import ActionsMenuWrapper from './ActionsMenuWrapper'
 
 const useTransformOrigin = ({ vertical, horizontal }) => {
   const v =

package/react/Alert/index.jsx

@@ -1,15 +1,15 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
+import MuiAlert from '@material-ui/lab/Alert'
 import cx from 'classnames'
 import merge from 'lodash/merge'
-import MuiAlert from '@material-ui/lab/Alert'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 
-import { makeStyles } from '../styles'
 import Icon from '../Icon'
 import CheckCircleIcon from '../Icons/CheckCircle'
+import InfoIcon from '../Icons/Info'
 import WarningIcon from '../Icons/Warning'
 import WarningCircleIcon from '../Icons/WarningCircle'
-import InfoIcon from '../Icons/Info'
+import { makeStyles } from '../styles'
 
 const DEFAULT_ICON_SIZE = 16
 

package/react/AppIcon/index.jsx

@@ -1,14 +1,15 @@
-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 { withClient } from 'cozy-client'
-import styles from './styles.styl'
 
+import styles from './styles.styl'
+import { isShortcutFile } from '../AppSections/helpers'
 import Icon, { iconPropType } from '../Icon'
 import CubeIcon from '../Icons/Cube'
-
+import { ShortcutTile } from '../ShortcutTile'
 import palette from '../palette'
-
 import { AppDoctype } from '../proptypes'
 
 const DONE = 'done'
@@ -46,6 +47,9 @@ export class AppIcon extends Component {
   fetchIcon() {
     const { app, type, priority, client } = this.props
 
+    // Shortcut files used in cozy-store have their own icon in their doctype metadata
+    if (isShortcutFile(app)) return
+
     return client.getStackClient().getIconURL({
       type,
       slug: app.slug || app,
@@ -94,6 +98,10 @@ export class AppIcon extends Component {
     const { alt, className, fallbackIcon } = this.props
     const { icon, status } = this.state
 
+    if (isShortcutFile(this.props.app)) {
+      return <ShortcutTile file={this.props.app} />
+    }
+
     switch (status) {
       case FETCHING:
         return (

package/react/AppLinker/expiringMemoize.js

@@ -1,4 +1,4 @@
-export default function(fn, duration, keyFn) {
+export default function (fn, duration, keyFn) {
   const memo = {}
   return arg => {
     const key = keyFn(arg)

package/react/AppLinker/index.deprecated.spec.jsx

@@ -6,9 +6,9 @@
  * Those tests should be kept until `slug` prop is completely removed
  */
 
-import React from 'react'
 import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
 
 import {
   isMobileApp,
@@ -30,7 +30,7 @@ const setup = ({ app, onAppSwitch }) => {
       <AppLinker
         onAppSwitch={onAppSwitch}
         slug={app.slug}
-        href={'https://fake.link'}
+        href="https://fake.link"
       >
         {({ onClick, href, name }) => (
           <div>

package/react/AppLinker/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 
 import { withClient } from 'cozy-client'
 import {
@@ -14,13 +14,13 @@ import {
 import { WebviewContext } from 'cozy-intent'
 import logger from 'cozy-logger'
 
+import expiringMemoize from './expiringMemoize'
 import {
   generateUniversalLink,
   generateWebLink,
   getUniversalLinkDomain
 } from './native'
 import { NATIVE_APP_INFOS } from './native.config'
-import expiringMemoize from './expiringMemoize'
 
 const expirationDelay = 10 * 1000
 const memoizedCheckApp = expiringMemoize(
@@ -162,7 +162,7 @@ export class AppLinker extends React.Component {
     AppLinker.onAppSwitch(onAppSwitch)
     openDeeplinkOrRedirect(
       appInfo.uri + (nativePath === '/' ? '' : nativePath),
-      function() {
+      function () {
         window.location.href = href
       }
     )

package/react/AppLinker/index.spec.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
 
 import {
   isMobileApp,
@@ -19,7 +19,7 @@ const setup = ({ app, onAppSwitch }) => {
   return {
     user: userEvent.setup({ delay: null }),
     ...render(
-      <AppLinker onAppSwitch={onAppSwitch} href={'https://fake.link'} app={app}>
+      <AppLinker onAppSwitch={onAppSwitch} href="https://fake.link" app={app}>
         {({ onClick, href, name }) => (
           <div>
             <a href={href} onClick={onClick}>

package/react/AppSections/Sections.jsx

@@ -1,23 +1,24 @@
-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 Typography from '../Typography'
-import { translate } from '../providers/I18n'
-import withBreakpoints from '../helpers/withBreakpoints'
+import flag from 'cozy-flags'
+import { useExtendI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
+import styles from './Sections.styl'
+import * as catUtils from './categories'
 import AppsSection from './components/AppsSection'
 import DropdownFilter from './components/DropdownFilter'
-
 import { APP_TYPE } from './constants'
-import * as searchUtils from './search'
-import * as catUtils from './categories'
-
-import styles from './Sections.styl'
-
-import withLocales from '../providers/I18n/withLocales'
+import { generateI18nConfig } from './generateI18nConfig'
+import { isShortcutFile } from './helpers'
 import en from './locales/en.json'
 import fr from './locales/fr.json'
+import * as searchUtils from './search'
+import Typography from '../Typography'
+import withBreakpoints from '../helpers/withBreakpoints'
+import { translate } from '../providers/I18n'
+import withLocales from '../providers/I18n/withLocales'
 
 const locales = {
   en,
@@ -109,12 +110,19 @@ export class Sections extends Component {
     const webAppGroups = catUtils.groupApps(
       filteredApps.filter(a => a.type === APP_TYPE.WEBAPP)
     )
+    const shortcutsGroups = catUtils.groupApps(
+      filteredApps.filter(a => isShortcutFile(a))
+    )
+
     const webAppsCategories = Object.keys(webAppGroups)
       .map(cat => catUtils.addLabel({ value: cat }, t))
       .sort(catUtils.sorter)
     const konnectorsCategories = Object.keys(konnectorGroups)
       .map(cat => catUtils.addLabel({ value: cat }, t))
       .sort(catUtils.sorter)
+    const shortcutsCategories = Object.keys(shortcutsGroups)
+      .map(cat => catUtils.addLabel({ value: cat }, t))
+      .sort(catUtils.sorter)
 
     const dropdownDisplayed =
       hasNav && (isMobile || isTablet) && showFilterDropdown
@@ -158,6 +166,33 @@ export class Sections extends Component {
               })}
             </div>
           )}
+          {!!shortcutsCategories.length && (
+            <div>
+              {showSubTitles && (
+                <SectionSubtitle>{t('sections.shortcuts')}</SectionSubtitle>
+              )}
+
+              {shortcutsCategories.map(cat => {
+                return (
+                  <AppsSection
+                    key={cat.value}
+                    {...componentsProps?.appsSection}
+                    appsList={shortcutsGroups[cat.value]}
+                    subtitle={
+                      showSubSubTitles ? (
+                        <SectionSubSubtitle>{cat.label}</SectionSubSubtitle>
+                      ) : null
+                    }
+                    IconComponent={IconComponent}
+                    onAppClick={onAppClick}
+                    displaySpecificMaintenanceStyle={
+                      displaySpecificMaintenanceStyle
+                    }
+                  />
+                )
+              })}
+            </div>
+          )}
           {!!konnectorsCategories.length && (
             <div>
               {showSubTitles && (
@@ -190,6 +225,14 @@ export class Sections extends Component {
   }
 }
 
+const SectionsWrapper = props => {
+  const config = flag('store.alternative-source')
+  const i18nConfig = generateI18nConfig(config?.categories)
+  useExtendI18n(i18nConfig)
+
+  return <Sections {...props} />
+}
+
 Sections.propTypes = {
   t: PropTypes.func.isRequired,
 
@@ -234,6 +277,6 @@ Sections.defaultProps = {
   })
 }
 
-export const Untranslated = withBreakpoints()(Sections)
+export const Untranslated = withBreakpoints()(SectionsWrapper)
 
 export default withLocales(locales)(translate()(Untranslated))