cozy-ui 116.0.0 → 117.1.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [117.1.0](https://github.com/cozy/cozy-ui/compare/v117.0.0...v117.1.0) (2025-01-21)
+
+
+### Features
+
+* Add Download and Add/Remove favorites actions ([6e4bca4](https://github.com/cozy/cozy-ui/commit/6e4bca4))
+
+# [117.0.0](https://github.com/cozy/cozy-ui/compare/v116.0.0...v117.0.0) (2025-01-13)
+
+
+### Features
+
+* Remove cordova stuff from AppLinker ([add9fbb](https://github.com/cozy/cozy-ui/commit/add9fbb))
+* Remove deprecated slug prop from AppLinker ([a3d47e0](https://github.com/cozy/cozy-ui/commit/a3d47e0))
+
+
+### BREAKING CHANGES
+
+* Use app={{ slug: 'drive' }} instead of slug='drive' as
+AppLinker prop. Also, `name` is not passed anymore as render prop.
+
 # [116.0.0](https://github.com/cozy/cozy-ui/compare/v115.1.0...v116.0.0) (2025-01-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "116.0.0",
+  "version": "117.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/Actions/addToFavorites.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import StarOutlineIcon from '../../Icons/StarOutline'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'addToFavorites'
+
+  return Component
+}
+
+export const addToFavorites = ({ showAlert }) => {
+  const { t } = getActionsI18n()
+  const icon = StarOutlineIcon
+  const label = t('favorites.add.label')
+
+  return {
+    name: 'addToFavorites',
+    icon,
+    label,
+    displayCondition: docs =>
+      docs.length > 0 && docs.every(doc => !doc.cozyMetadata?.favorite),
+    Component: makeComponent(label, icon),
+    action: async (docs, { client }) => {
+      try {
+        for (const doc of docs) {
+          await client.save({
+            ...doc,
+            cozyMetadata: {
+              ...doc.cozyMetadata,
+              favorite: true
+            }
+          })
+        }
+
+        const { filename } = splitFilename(docs[0])
+        showAlert({
+          message: t('favorites.add.success', {
+            filename,
+            smart_count: docs.length
+          }),
+          severity: 'success'
+        })
+      } catch (error) {
+        showAlert({ message: t('favorites.error'), severity: 'error' })
+      }
+    }
+  }
+}

package/react/ActionsMenu/Actions/download.js

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react'
+
+import { downloadFile } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import DownloadIcon from '../../Icons/Download'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'download'
+
+  return Component
+}
+
+export const download = ({ encryptedUrl }) => {
+  const { t } = getActionsI18n()
+  const icon = DownloadIcon
+  const label = t('download')
+
+  return {
+    name: 'download',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    action: (docs, { client, webviewIntent }) =>
+      downloadFile({ client, file: docs[0], url: encryptedUrl, webviewIntent })
+  }
+}

package/react/ActionsMenu/Actions/index.js

@@ -5,6 +5,9 @@ export { smsTo } from './smsTo'
 export { call } from './call'
 export { emailTo } from './emailTo'
 export { print } from './print'
+export { download } from './download'
+export { addToFavorites } from './addToFavorites'
+export { removeFromFavorites } from './removeFromFavorites'
 export { viewInContacts } from './viewInContacts'
 export { viewInDrive } from './viewInDrive'
 export { copyToClipboard } from './copyToClipboard'

package/react/ActionsMenu/Actions/locales/en.json

@@ -5,6 +5,18 @@
   "emailTo": "Send an email",
   "smsTo": "Send a message",
   "print": "Print",
+  "download": "Download",
+  "favorites": {
+    "add": {
+      "label": "Add to favorites",
+      "success": "%{filename} has been added to favorites |||| These items have been added to favorites"
+    },
+    "remove": {
+      "label": "Remove from favorites",
+      "success": "%{filename} has been removed from favorites |||| These items have been removed from favorites"
+    },
+    "error": "An error occurred, please try again."
+  },
   "others": "Others",
   "editAttribute": "Edit attribute",
   "copyToClipboard": {

package/react/ActionsMenu/Actions/locales/fr.json

@@ -5,6 +5,18 @@
   "emailTo": "Envoyer un e-mail",
   "smsTo": "Envoyer un message",
   "print": "Imprimer",
+  "download": "Télécharger",
+  "favorites": {
+    "add": {
+      "label": "Ajouter aux favoris",
+      "success": "%{filename} a été ajouté aux favoris |||| Ces éléments ont été ajoutés aux favoris"
+    },
+    "remove": {
+      "label": "Retirer des favoris",
+      "success": "%{filename} a été retiré des favoris |||| Ces éléments ont été retirés des favoris"
+    },
+    "error": "Une erreur est survenue, merci de réessayer."
+  },
   "others": "Autres",
   "editAttribute": "Editer l'attribut",
   "copyToClipboard": {

package/react/ActionsMenu/Actions/removeFromFavorites.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react'
+
+import { splitFilename } from 'cozy-client/dist/models/file'
+
+import { getActionsI18n } from './locales/withActionsLocales'
+import Icon from '../../Icon'
+import StarIcon from '../../Icons/Star'
+import ListItemIcon from '../../ListItemIcon'
+import ListItemText from '../../ListItemText'
+import ActionsMenuItem from '../ActionsMenuItem'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'removeFromFavorites'
+
+  return Component
+}
+
+export const removeFromFavorites = ({ showAlert }) => {
+  const { t } = getActionsI18n()
+  const icon = StarIcon
+  const label = t('favorites.remove.label')
+
+  return {
+    name: 'removeFromFavorites',
+    icon,
+    label,
+    displayCondition: docs =>
+      docs.length > 0 && docs.every(doc => doc.cozyMetadata?.favorite),
+    Component: makeComponent(label, icon),
+    action: async (docs, { client }) => {
+      try {
+        for (const doc of docs) {
+          await client.save({
+            ...doc,
+            cozyMetadata: {
+              ...doc.cozyMetadata,
+              favorite: false
+            }
+          })
+        }
+
+        const { filename } = splitFilename(docs[0])
+        showAlert({
+          message: t('favorites.success.remove', {
+            filename,
+            smart_count: docs.length
+          }),
+          severity: 'success'
+        })
+      } catch (error) {
+        showAlert({ message: t('favorites.error'), severity: 'error' })
+      }
+    }
+  }
+}

package/react/AppLinker/Readme.md

@@ -1,15 +1,10 @@
 Render-props component that provides onClick/href handler to
 apply to an anchor that needs to open an app.
 
-If the app is known to Cozy (for example Drive or Banks), and
-the user has installed it on its device, the native app will
-be opened.
-
 The app's manifest can be set in the `app` prop. Then, in a
 ReactNative environment, the AppLinker will be able to send
 `openApp` message to the native environment with this `app`
-data. Ideally the `mobile` member should be set with all data
-needed to open the native app ([more info](https://github.com/cozy/cozy-stack/blob/master/docs/apps.md#mobile))
+data.
 
 Handles several cases:
 
@@ -28,32 +23,9 @@ const app = {
 };
 
 <AppLinker app={app} href='http://dalailama-banks.mycozy.cloud'>{
-  ({ onClick, href, name }) => (
-    <a href={href} onClick={onClick}>
-      Open { name }
-    </a>
-  )
-}</AppLinker>
-```
-
-### Exemple with mobile data
-
-```jsx
-import AppLinker from 'cozy-ui/transpiled/react/AppLinker';
-
-const app = {
-  slug: 'passwords',
-  mobile: {
-    schema: 'cozypass://',
-    id_playstore: 'io.cozy.pass',
-    id_appstore: 'cozy-pass/id1502262449'
-  }
-};
-
-<AppLinker app={app} href='http://dalailama-passwords.mycozy.cloud'>{
-  ({ onClick, href, name }) => (
+  ({ onClick, href }) => (
     <a href={href} onClick={onClick}>
-      Open { name }
+      Open
     </a>
   )
 }</AppLinker>

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

@@ -1,16 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`app icon should not crash if no href 1`] = `
-<div>
-  <div>
-    <a>
-      Open 
-      Cozy Drive
-    </a>
-  </div>
-</div>
-`;
-
 exports[`app icon should render correctly 1`] = `
 <div>
   <div>
@@ -18,7 +7,6 @@ exports[`app icon should render correctly 1`] = `
       href="https://fake.link"
     >
       Open 
-      Cozy Drive
     </a>
   </div>
 </div>

package/react/AppLinker/index.jsx

@@ -2,45 +2,25 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { withClient } from 'cozy-client'
-import {
-  checkApp,
-  startApp,
-  isMobileApp,
-  isMobile,
-  openDeeplinkOrRedirect,
-  isAndroid,
-  isFlagshipApp
-} from 'cozy-device-helper'
+import { isFlagshipApp } from 'cozy-device-helper'
 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'
-
-const expirationDelay = 10 * 1000
-const memoizedCheckApp = expiringMemoize(
-  appInfo => checkApp(appInfo).catch(() => false),
-  expirationDelay,
-  appInfo => appInfo.appId
-)
 
 export class AppLinker extends React.Component {
   static contextType = WebviewContext
 
   state = {
-    nativeAppIsAvailable: null,
-    isFetchingAppInfo: false
+    imgRef: null
   }
 
   constructor(props) {
     super(props)
-
-    this.imgRef = null
   }
 
   setImgRef = img => {
@@ -48,44 +28,14 @@ export class AppLinker extends React.Component {
     this.setState({ imgRef: this.imgRef })
   }
 
-  componentDidMount() {
-    if (isMobileApp()) {
-      this.checkAppAvailability()
-    }
-  }
-
-  async checkAppAvailability() {
-    const slug = AppLinker.getSlug(this.props)
-    const appInfo = NATIVE_APP_INFOS[slug]
-    if (appInfo) {
-      const nativeAppIsAvailable = Boolean(await memoizedCheckApp(appInfo))
-      this.setState({ nativeAppIsAvailable })
-    }
-  }
-
   static getSlug(props) {
-    if (props.app && props.app.slug) {
-      return props.app.slug
-    }
-
-    return props.slug
-  }
-
-  static deprecateSlug(props) {
-    if (props.slug) {
-      console.warn(
-        `AppLinker's 'slug' prop is deprecated, please use 'app.slug' instead`
-      )
-    }
+    return props.app.slug
   }
 
-  static getOnClickHref(props, nativeAppIsAvailable, context, imgRef) {
-    const { app, client, nativePath } = props
-    const slug = AppLinker.getSlug(props)
+  static getOnClickHref(props, context, imgRef) {
+    const { app, client } = props
     let href = props.href
     let onClick = null
-    const usingNativeApp = isMobileApp()
-    const appInfo = NATIVE_APP_INFOS[slug]
 
     if (isFlagshipApp()) {
       const { app: currentApp } = client
@@ -114,59 +64,11 @@ export class AppLinker extends React.Component {
       }
     }
 
-    if (usingNativeApp) {
-      if (nativeAppIsAvailable) {
-        // If we are on the native app and the other native app is available,
-        // we open the native app
-        onClick = AppLinker.openNativeFromNative.bind(this, props)
-        href = '#'
-      } else {
-        // If we are on a native app, but the other native app is not available
-        // we open the web link, this is done by the href prop. We still
-        // have to call the prop callback
-        onClick = AppLinker.openWeb.bind(this, props)
-      }
-    } else if (isMobile() && appInfo) {
-      // If we are on the "mobile web version", we try to open the native app
-      // if it exists with an universal links. If it fails, we redirect to the web
-      // version of the requested app
-      // Only on iOS ATM
-      if (isAndroid()) {
-        onClick = AppLinker.openNativeFromWeb.bind(this, props)
-      } else {
-        // Since generateUniversalLink can rise an error, let's catch it to not crash
-        // all the page.
-        try {
-          href = generateUniversalLink({ slug, nativePath, fallbackUrl: href })
-        } catch (err) {
-          console.error(err)
-          href = '#'
-        }
-      }
-    }
-
     return {
       href,
       onClick
     }
   }
-  static openNativeFromWeb(props, ev) {
-    const { href, nativePath, onAppSwitch } = props
-    const slug = AppLinker.getSlug(props)
-    const appInfo = NATIVE_APP_INFOS[slug]
-
-    if (ev) {
-      ev.preventDefault()
-    }
-
-    AppLinker.onAppSwitch(onAppSwitch)
-    openDeeplinkOrRedirect(
-      appInfo.uri + (nativePath === '/' ? '' : nativePath),
-      function () {
-        window.location.href = href
-      }
-    )
-  }
 
   static onAppSwitch(onAppSwitchFn) {
     if (typeof onAppSwitchFn === 'function') {
@@ -174,38 +76,20 @@ export class AppLinker extends React.Component {
     }
   }
 
-  static openNativeFromNative(props, ev) {
-    const { onAppSwitch } = props
-    const slug = AppLinker.getSlug(props)
-    if (ev) {
-      ev.preventDefault()
-    }
-    const appInfo = NATIVE_APP_INFOS[slug]
-    AppLinker.onAppSwitch(onAppSwitch)
-    startApp(appInfo).catch(err => {
-      console.error('AppLinker: Could not open native app', err)
-    })
-  }
-
   static openWeb(props) {
     AppLinker.onAppSwitch(props.onAppSwitch)
   }
 
   render() {
     const { children } = this.props
-    AppLinker.deprecateSlug(this.props)
-    const slug = AppLinker.getSlug(this.props)
-    const { nativeAppIsAvailable } = this.state
-    const appInfo = NATIVE_APP_INFOS[slug]
+
     const { href, onClick } = AppLinker.getOnClickHref(
       this.props,
-      nativeAppIsAvailable,
       this.context,
       this.state.imgRef
     )
 
     return children({
-      ...appInfo,
       iconRef: this.setImgRef,
       onClick: onClick,
       href
@@ -213,38 +97,18 @@ export class AppLinker extends React.Component {
   }
 }
 
-AppLinker.defaultProps = {
-  nativePath: '/'
-}
 AppLinker.propTypes = {
-  /** DEPRECATED: please use app.slug prop */
-  slug: PropTypes.string,
   /*
   Full web url : Used by default on desktop browser
   Used as a fallback_uri on mobile web
   */
   href: PropTypes.string,
-  /*
-    Path used for "native link"
-  */
-  nativePath: PropTypes.string,
   onAppSwitch: PropTypes.func,
   app: PropTypes.shape({
     // Slug of the app : drive / banks ...
-    slug: PropTypes.string.isRequired,
-    // Information about mobile native app
-    mobile: PropTypes.shape({
-      schema: PropTypes.string,
-      id_playstore: PropTypes.string,
-      id_appstore: PropTypes.string
-    })
+    slug: PropTypes.string.isRequired
   }).isRequired
 }
 
 export default withClient(AppLinker)
-export {
-  NATIVE_APP_INFOS,
-  getUniversalLinkDomain,
-  generateWebLink,
-  generateUniversalLink
-}
+export { getUniversalLinkDomain, generateWebLink, generateUniversalLink }