cozy-ui 111.21.0 → 112.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [112.0.0](https://github.com/cozy/cozy-ui/compare/v111.21.0...v112.0.0) (2024-10-24)
+
+
+### Features
+
+* **hooks:** Add useClientErrors from cozy-client ([deb505e](https://github.com/cozy/cozy-ui/commit/deb505e))
+* **providers:** Add Encrypted from cozy-viewer ([612cff6](https://github.com/cozy/cozy-ui/commit/612cff6))
+* Remove Viewer ([7d2b7ef](https://github.com/cozy/cozy-ui/commit/7d2b7ef))
+
+
+### BREAKING CHANGES
+
+* if you want to use the Viewer, you must import components from `cozy-viewer`. So replace `import Something from 'cozy-ui/transpiled/react/Viewer/...'` by `import Something from 'cozy-viewer/...'`
+
 # [111.21.0](https://github.com/cozy/cozy-ui/compare/v111.20.0...v111.21.0) (2024-10-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.21.0",
+  "version": "112.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -158,7 +158,8 @@
     "svgo": "2.8.0",
     "svgstore-cli": "1.3.2",
     "url-loader": "1.1.2",
-    "webpack": "4.39.3"
+    "webpack": "4.39.3",
+    "whatwg-fetch": "3.5.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.4",

package/react/FileImageLoader/Readme.md

@@ -3,14 +3,77 @@
 A component to get the image in `links` prop of a file, according to its class (could be `image` or `pdf`).
 
 ```jsx
-import DemoProvider from 'cozy-ui/transpiled/react/Viewer/docs/DemoProvider'
-
+import DemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
 import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone"
 import BankIcon from "cozy-ui/transpiled/react/Icons/Bank"
 import CloudWallpaper from 'cozy-ui/docs/cloud-wallpaper.jpg'
 
+const demoTextFileResponse = {
+  text: () => new Promise(resolve => resolve('Hello World !'))
+}
+
+const demoFilesByClass = {
+  pdf: 'https://raw.githubusercontent.com/rospdf/pdf-php/2ccf7591fc2f18e63342ebfedad7997b08c34ed2/readme.pdf',
+  audio: 'https://viewerdemo.cozycloud.cc/Z.mp3',
+  video: 'https://viewerdemo.cozycloud.cc/Nextcloud.mp4',
+  text: 'https://viewerdemo.cozycloud.cc/notes.md'
+}
+
+const mockClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  on: () => {},
+  collection: () => ({
+    getDownloadLinkById: id =>
+      new Promise(resolve => resolve(demoFilesByClass[id])),
+    download: () =>
+      alert(
+        "This is a demo, there's no actual Cozy to download the file from ¯\\_(ツ)_/¯"
+      ),
+    get: () =>
+      new Promise(resolve =>
+        resolve({
+          data: {
+            links: {
+              large: CloudWallpaper
+            }
+          }
+        })
+      )
+  }),
+  getStackClient: () => ({
+    uri: '',
+    fetch: () => new Promise(resolve => resolve(demoTextFileResponse))
+  }),
+  getClient: () => mockClient,
+  store: {
+    getState: () => {},
+    subscribe: () => {},
+    unsubscribe: () => {}
+  },
+  getQueryFromState: queryName => {
+    if (queryName === 'io.cozy.files/parent_folder') {
+      return {
+        data: {
+          _id: 'parent_id',
+          path: '/Parent'
+        }
+      }
+    }
+  },
+  query: () => ({
+    data: [{ attributes: { slug: 'mespapiers' }, links: { related: '' } }]
+  }),
+  getInstanceOptions: () => ({ app: { slug: 'mespapiers' }, subdomain: 'flat' })
+}
+
 const file = {
   _id: 'image',
   class: 'image',
@@ -31,7 +94,7 @@ const FallbackComp = () => {
 
 ;
 
-<DemoProvider>
+<DemoProvider client={mockClient}>
   <FileImageLoader
     file={file}
     linkType="large"

package/react/FileImageLoader/index.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import { Component } from 'react'
 
 import { withClient } from 'cozy-client'
+import { isEncrypted } from 'cozy-client/dist/models/file'
 import logger from 'cozy-logger'
 
 const PENDING = 'PENDING'
@@ -12,8 +13,7 @@ const FAILED = 'FAILED'
 const GET_LINK = 'GET_LINK'
 
 import { checkImageSource } from './checkImageSource'
-import { isFileEncrypted } from '../Viewer/helpers'
-import { EncryptedContext } from '../Viewer/providers/EncryptedProvider'
+import { EncryptedContext } from '../providers/Encrypted'
 
 export class FileImageLoader extends Component {
   state = {
@@ -60,7 +60,7 @@ export class FileImageLoader extends Component {
 
   loadNextSrc(lastError = null) {
     const { file } = this.props
-    if (isFileEncrypted(file)) {
+    if (isEncrypted(file)) {
       // No link available for encrypted files
       return
     }

package/react/FileImageLoader/index.spec.jsx

@@ -6,7 +6,7 @@ import logger from 'cozy-logger'
 
 import { FileImageLoader } from '.'
 import { checkImageSource } from './checkImageSource'
-import EncryptedProvider from '../Viewer/providers/EncryptedProvider'
+import EncryptedProvider from '../providers/Encrypted'
 
 jest.mock('./checkImageSource', () => ({
   ...jest.requireActual('./checkImageSource'),

package/react/hooks/useClientErrors.jsx

@@ -0,0 +1,140 @@
+import filter from 'lodash/filter'
+import React, { useCallback, useState, useEffect } from 'react'
+
+import { useClient } from 'cozy-client'
+import { FetchError } from 'cozy-stack-client'
+
+import QuotaAlert from '../deprecated/QuotaAlert'
+
+/**
+ * Rendering functions for client fetch errors by status code
+ *
+ * @private
+ * @type {object}
+ */
+const byHttpStatus = {
+  413: QuotaError // <QuotaError />
+}
+
+/**
+ * Display for a quota error from the client
+ *
+ * @see QuotaAlert
+ * @private
+ * @param {object} props - Props
+ * @param {Function} props.dismiss - remove the error from the stack to display
+ * @returns {React.ReactElement}
+ */
+function QuotaError({ dismiss }) {
+  return <QuotaAlert onClose={dismiss} />
+}
+
+/**
+ * Returns the handler for an error
+ *
+ * @param {import("../types").ClientError} error - The error
+ * @returns {Function|null} React Component
+ */
+function getErrorComponent(error) {
+  if (error instanceof Response || error instanceof FetchError) {
+    const status = error.status || ''
+    return byHttpStatus[status] || null
+  }
+  return null
+}
+
+/**
+ * Renders a stack of errors
+ *
+ * @private
+ * @see ClientErrors
+ * @param {import("../types").ClientError[]} errorStack - array of errors/exceptions
+ * @param {Function} setErrorStack - mutates the array of errors
+ * @returns {Array<React.ReactElement>} React rendering
+ */
+function renderErrors(errorStack, setErrorStack) {
+  const errors = errorStack.map((error, key) => {
+    const Component = getErrorComponent(error)
+    if (Component) {
+      const dismiss = () =>
+        setErrorStack(stack => filter(stack, e => e !== error))
+      return <Component key={key} error={error} dismiss={dismiss} />
+    } else {
+      return null
+    }
+  })
+  return errors
+}
+
+/**
+ * Manages the client errors and allows to display them
+ *
+ * Returns a `ClientErrors` React component that takes care
+ * of how to display cozy-client errors (probably displaying a modal)
+ *
+ * Only Quota Errors are managed for now.
+ *
+ * @example
+ * ```
+ * const App = () => {
+ *   const { ClientErrors } = useClientErrors()
+ *
+ *   return <Layout>
+ *      <h1>My app</h1>
+ *      <ClientErrors />
+ *   </Layout>
+ * }
+ * ```
+ *
+ * @param {object} [props] - Props
+ * @param {boolean} [props.handleExceptions] - should cozy-client directly handle errors before forwarding them to the caller?
+ * @returns {{ClientErrors: Function}} React component
+ */
+export default function useClientErrors({ handleExceptions = true } = {}) {
+  const client = useClient()
+  const [errorStack, setErrorStack] = useState([])
+
+  /**
+   * Handle client errors, add them to the error stack
+   *
+   * @param {import("../types").ClientError} error -
+   * @returns {boolean} true if the error was manager, false otherwise
+   */
+  const handleError = useCallback(
+    error => {
+      // `isErrorManaged` is there to avoid the same error to be added twice
+      // once the error has been added once, the `isErrorManaged`is set to true
+      // and any future push is ignored
+      if (error.isErrorManaged) return false
+
+      const isManageable = !!getErrorComponent(error)
+      if (isManageable) {
+        error.isErrorManaged = true
+        setErrorStack(stack => stack.concat(error))
+        return true
+      } else {
+        error.isErrorManaged = false
+        return false
+      }
+    },
+    [setErrorStack]
+  )
+
+  useEffect(() => {
+    if (handleExceptions) {
+      client.on('error', handleError)
+      return () => client.removeListener('error', handleError)
+    } else {
+      return undefined
+    }
+  }, [client, handleError, handleExceptions])
+
+  // @ts-ignore
+  const ClientErrors = useCallback(
+    () => renderErrors(errorStack, setErrorStack),
+    [errorStack, setErrorStack]
+  )
+  // @ts-ignore
+  ClientErrors.displayName = 'ClientErrors'
+  return { ClientErrors }
+}

package/react/hooks/useClientErrors.spec.jsx

@@ -0,0 +1,102 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { shallow } from 'enzyme'
+import React from 'react'
+
+import { CozyProvider } from 'cozy-client'
+import { FetchError } from 'cozy-stack-client'
+
+import useClientErrors from './useClientErrors'
+
+function createCozyClient() {
+  return {
+    on: jest.fn(),
+    removeListener: jest.fn()
+  }
+}
+
+function createWrapper(client = createCozyClient()) {
+  function Wrapper({ children }) {
+    return <CozyProvider client={client}>{children}</CozyProvider>
+  }
+  return Wrapper
+}
+
+function renderWrappedHook(client) {
+  const wrapper = createWrapper(client)
+  return renderHook(() => useClientErrors(), { wrapper })
+}
+
+function wrappedShallow(tree, client) {
+  return shallow(tree, { wrappingComponent: createWrapper(client) })
+}
+
+describe('useClientErrors', () => {
+  it('registers an `error` handler in client', done => {
+    const client = createCozyClient()
+    client.on.mockImplementation(name => name === 'error' && done())
+    renderWrappedHook(client)
+  })
+
+  describe('renderErrors', () => {
+    it('returns a function', () => {
+      const { result } = renderWrappedHook()
+      const { ClientErrors } = result.current
+      expect(ClientErrors).toBeInstanceOf(Function)
+    })
+
+    it('displays nothing by default', () => {
+      const { result } = renderWrappedHook()
+      const { ClientErrors } = result.current
+      const node = wrappedShallow(<ClientErrors />)
+      expect(node).toHaveLength(0)
+    })
+
+    describe('for quota errors', () => {
+      const findQuotaAlert = node => {
+        return node.at(0).dive()
+      }
+      const setup = async () => {
+        const client = createCozyClient()
+        const response = new Response(null, {
+          status: 413,
+          statusText: 'Quota exceeded'
+        })
+        const error = new FetchError(
+          response,
+          `${response.status} ${response.statusText}`
+        )
+
+        const { result, waitForNextUpdate } = renderWrappedHook(client)
+        const nextUpdate = waitForNextUpdate()
+
+        act(() => {
+          const handler = client.on.mock.calls[0][1]
+          handler(error)
+        })
+
+        await nextUpdate
+        const { ClientErrors } = result.current
+        const node = wrappedShallow(<ClientErrors />, client)
+        return { node, result, client }
+      }
+
+      it('displays a a QuotaAlert', async () => {
+        const { node } = await setup()
+        expect(node).toHaveLength(1)
+        expect(findQuotaAlert(node).type().name).toEqual('QuotaAlert')
+      })
+
+      it('can be dismissed', async () => {
+        const { node, result, client } = await setup()
+        const quotaAlert = findQuotaAlert(node)
+        const onClose = quotaAlert.props().onClose
+        act(() => onClose())
+
+        // re-render ClientErrors returned by the hook
+        const { ClientErrors } = result.current
+        const updatedNode = wrappedShallow(<ClientErrors />, client)
+        expect(updatedNode.at(0).length).toBe(0)
+      })
+    })
+  })
+})

package/react/index.js

@@ -65,7 +65,6 @@ export { default as AppTitle } from './AppTitle'
 export { default as Filename } from './Filename'
 export { default as FilePath } from './FilePath'
 export { default as FilePathLink } from './FilePathLink'
-export { default as Viewer } from './Viewer/ViewerExposer'
 export { default as FileInput } from './FileInput'
 export { default as Card } from './Card'
 export { default as InlineCard } from './deprecated/InlineCard'

package/transpiled/react/FileImageLoader/index.js

@@ -15,6 +15,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { withClient } from 'cozy-client';
+import { isEncrypted } from 'cozy-client/dist/models/file';
 import logger from 'cozy-logger';
 var PENDING = 'PENDING';
 var LOADING_LINK = 'LOADING_LINK';
@@ -23,8 +24,7 @@ var LOADED = 'LOADED';
 var FAILED = 'FAILED';
 var GET_LINK = 'GET_LINK';
 import { checkImageSource } from "cozy-ui/transpiled/react/FileImageLoader/checkImageSource";
-import { isFileEncrypted } from "cozy-ui/transpiled/react/Viewer/helpers";
-import { EncryptedContext } from "cozy-ui/transpiled/react/Viewer/providers/EncryptedProvider";
+import { EncryptedContext } from "cozy-ui/transpiled/react/providers/Encrypted";
 export var FileImageLoader = /*#__PURE__*/function (_Component) {
   _inherits(FileImageLoader, _Component);
 
@@ -99,7 +99,7 @@ export var FileImageLoader = /*#__PURE__*/function (_Component) {
       var lastError = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       var file = this.props.file;
 
-      if (isFileEncrypted(file)) {
+      if (isEncrypted(file)) {
         // No link available for encrypted files
         return;
       }

package/transpiled/react/hooks/useClientErrors.js

@@ -0,0 +1,167 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import filter from 'lodash/filter';
+import React, { useCallback, useState, useEffect } from 'react';
+import { useClient } from 'cozy-client';
+import { FetchError } from 'cozy-stack-client';
+import QuotaAlert from "cozy-ui/transpiled/react/deprecated/QuotaAlert";
+/**
+ * Rendering functions for client fetch errors by status code
+ *
+ * @private
+ * @type {object}
+ */
+
+var byHttpStatus = {
+  413: QuotaError // <QuotaError />
+
+};
+/**
+ * Display for a quota error from the client
+ *
+ * @see QuotaAlert
+ * @private
+ * @param {object} props - Props
+ * @param {Function} props.dismiss - remove the error from the stack to display
+ * @returns {React.ReactElement}
+ */
+
+function QuotaError(_ref) {
+  var dismiss = _ref.dismiss;
+  return /*#__PURE__*/React.createElement(QuotaAlert, {
+    onClose: dismiss
+  });
+}
+/**
+ * Returns the handler for an error
+ *
+ * @param {import("../types").ClientError} error - The error
+ * @returns {Function|null} React Component
+ */
+
+
+function getErrorComponent(error) {
+  if (error instanceof Response || error instanceof FetchError) {
+    var status = error.status || '';
+    return byHttpStatus[status] || null;
+  }
+
+  return null;
+}
+/**
+ * Renders a stack of errors
+ *
+ * @private
+ * @see ClientErrors
+ * @param {import("../types").ClientError[]} errorStack - array of errors/exceptions
+ * @param {Function} setErrorStack - mutates the array of errors
+ * @returns {Array<React.ReactElement>} React rendering
+ */
+
+
+function renderErrors(errorStack, setErrorStack) {
+  var errors = errorStack.map(function (error, key) {
+    var Component = getErrorComponent(error);
+
+    if (Component) {
+      var dismiss = function dismiss() {
+        return setErrorStack(function (stack) {
+          return filter(stack, function (e) {
+            return e !== error;
+          });
+        });
+      };
+
+      return /*#__PURE__*/React.createElement(Component, {
+        key: key,
+        error: error,
+        dismiss: dismiss
+      });
+    } else {
+      return null;
+    }
+  });
+  return errors;
+}
+/**
+ * Manages the client errors and allows to display them
+ *
+ * Returns a `ClientErrors` React component that takes care
+ * of how to display cozy-client errors (probably displaying a modal)
+ *
+ * Only Quota Errors are managed for now.
+ *
+ * @example
+ * ```
+ * const App = () => {
+ *   const { ClientErrors } = useClientErrors()
+ *
+ *   return <Layout>
+ *      <h1>My app</h1>
+ *      <ClientErrors />
+ *   </Layout>
+ * }
+ * ```
+ *
+ * @param {object} [props] - Props
+ * @param {boolean} [props.handleExceptions] - should cozy-client directly handle errors before forwarding them to the caller?
+ * @returns {{ClientErrors: Function}} React component
+ */
+
+
+export default function useClientErrors() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$handleException = _ref2.handleExceptions,
+      handleExceptions = _ref2$handleException === void 0 ? true : _ref2$handleException;
+
+  var client = useClient();
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      errorStack = _useState2[0],
+      setErrorStack = _useState2[1];
+  /**
+   * Handle client errors, add them to the error stack
+   *
+   * @param {import("../types").ClientError} error -
+   * @returns {boolean} true if the error was manager, false otherwise
+   */
+
+
+  var handleError = useCallback(function (error) {
+    // `isErrorManaged` is there to avoid the same error to be added twice
+    // once the error has been added once, the `isErrorManaged`is set to true
+    // and any future push is ignored
+    if (error.isErrorManaged) return false;
+    var isManageable = !!getErrorComponent(error);
+
+    if (isManageable) {
+      error.isErrorManaged = true;
+      setErrorStack(function (stack) {
+        return stack.concat(error);
+      });
+      return true;
+    } else {
+      error.isErrorManaged = false;
+      return false;
+    }
+  }, [setErrorStack]);
+  useEffect(function () {
+    if (handleExceptions) {
+      client.on('error', handleError);
+      return function () {
+        return client.removeListener('error', handleError);
+      };
+    } else {
+      return undefined;
+    }
+  }, [client, handleError, handleExceptions]); // @ts-ignore
+
+  var ClientErrors = useCallback(function () {
+    return renderErrors(errorStack, setErrorStack);
+  }, [errorStack, setErrorStack]); // @ts-ignore
+
+  ClientErrors.displayName = 'ClientErrors';
+  return {
+    ClientErrors: ClientErrors
+  };
+}

package/transpiled/react/index.js

@@ -52,7 +52,6 @@ export { default as AppTitle } from './AppTitle';
 export { default as Filename } from './Filename';
 export { default as FilePath } from './FilePath';
 export { default as FilePathLink } from './FilePathLink';
-export { default as Viewer } from './Viewer/ViewerExposer';
 export { default as FileInput } from './FileInput';
 export { default as Card } from './Card';
 export { default as InlineCard } from './deprecated/InlineCard';