cozy-ui 132.1.0 → 133.0.0

package/react/helpers/acceptedTypes.spec.js

@@ -1,86 +0,0 @@
-import { isValidFile, isValidFolder, getCompliantTypes } from './acceptedTypes'
-
-const makeMockFile = ({
-  extension = '.pdf',
-  mime = 'application/pdf'
-} = {}) => ({
-  _id: '123',
-  type: 'file',
-  mime: mime,
-  name: `mockFile${extension}`
-})
-const makeMockFolder = () => ({
-  _id: '789',
-  type: 'directory',
-  name: 'mockDir'
-})
-
-describe('acceptedTypes', () => {
-  describe('getCompliantTypes', () => {
-    it('should an array with all valid types', () => {
-      const res = getCompliantTypes('.pdf, text/plain, .not')
-
-      expect(res).toStrictEqual(['.pdf', 'text/plain'])
-    })
-  })
-
-  describe('isValidFile', () => {
-    it('should be valid when item has no type providen', () => {
-      const item = makeMockFile()
-      const validTypesAccepted = []
-
-      expect(isValidFile(item, validTypesAccepted)).toBe(true)
-    })
-
-    it('should be valid when item has an accepted extension', () => {
-      const item = makeMockFile({ extension: '.png' })
-      const validTypesAccepted = ['.png', '.pdf']
-
-      expect(isValidFile(item, validTypesAccepted)).toBe(true)
-    })
-
-    it('should not be valid when item has not an accepted extension', () => {
-      const item = makeMockFile({ extension: '.png' })
-      const validTypesAccepted = ['.pdf']
-
-      expect(isValidFile(item, validTypesAccepted)).toBe(false)
-    })
-
-    it('should be valid when item has an accepted mime', () => {
-      const item = makeMockFile({ mime: 'image/png' })
-      const validTypesAccepted = ['application/pdf', 'image/png']
-
-      expect(isValidFile(item, validTypesAccepted)).toBe(true)
-    })
-
-    it('should not be valid when item has not an accepted mime', () => {
-      const item = makeMockFile({ mime: 'image/png' })
-      const validTypesAccepted = ['application/pdf']
-
-      expect(isValidFile(item, validTypesAccepted)).toBe(false)
-    })
-
-    it('should not be valid when item is not an file', () => {
-      const item = makeMockFolder()
-      const validTypesAccepted = []
-
-      expect(isValidFile(item, validTypesAccepted)).toBe(false)
-    })
-  })
-
-  describe('isValidFolder', () => {
-    it('should be valid when item is an folder', () => {
-      const item = makeMockFolder()
-      const validTypesAccepted = ['folder']
-
-      expect(isValidFolder(item, validTypesAccepted)).toBe(true)
-    })
-
-    it('should not be valid when item is not an folder', () => {
-      const item = makeMockFile()
-      const validTypesAccepted = ['folder']
-
-      expect(isValidFolder(item, validTypesAccepted)).toBe(false)
-    })
-  })
-})

package/react/hooks/useClientErrors.jsx

@@ -1,140 +0,0 @@
-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

@@ -1,94 +0,0 @@
-import { screen, render, act } from '@testing-library/react'
-import { renderHook } from '@testing-library/react-hooks'
-import React from 'react'
-
-import { FetchError } from 'cozy-stack-client'
-
-import useClientErrors from './useClientErrors'
-import DemoProvider from '../providers/DemoProvider'
-
-function createCozyClient() {
-  return {
-    on: jest.fn(),
-    removeListener: jest.fn()
-  }
-}
-
-jest.mock('../deprecated/QuotaAlert', () => ({ onClose }) => (
-  <>
-    QuotaAlert <button onClick={onClose}>Dismiss</button>
-  </>
-))
-
-function createWrapper(client = createCozyClient()) {
-  function Wrapper({ children }) {
-    return <DemoProvider client={client}>{children}</DemoProvider>
-  }
-  return Wrapper
-}
-
-function renderWrappedHook(client) {
-  const wrapper = createWrapper(client)
-  return renderHook(() => useClientErrors(), { wrapper })
-}
-
-function wrappedShallow(tree, client) {
-  return render(tree, { wrapper: 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
-      wrappedShallow(<ClientErrors />)
-
-      expect(screen.queryByText('QuotaAlert')).not.toBeInTheDocument()
-    })
-
-    describe('for quota errors', () => {
-      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 () => {
-        await setup()
-
-        expect(screen.queryByText('QuotaAlert')).toBeInTheDocument()
-      })
-    })
-  })
-})

package/react/proptypes.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const AppDoctype = PropTypes.shape({
-  name: PropTypes.string,
-  slug: PropTypes.string,
-  developer: PropTypes.object,
-  links: PropTypes.shape({
-    icon: PropTypes.string
-  }),
-  latest_version: PropTypes.shape({
-    version: PropTypes.string
-  })
-})
-
-export const FileDoctype = PropTypes.shape({
-  _id: PropTypes.string,
-  class: PropTypes.string,
-  mime: PropTypes.string,
-  name: PropTypes.string
-})

package/react/providers/CozyTheme/CozyThemeWithQuery.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client'
-
-import DumbCozyTheme from './DumbCozyTheme'
-import { buildSettingsInstanceQuery } from './queries'
-
-const CozyThemeWithQuery = props => {
-  const instanceQuery = buildSettingsInstanceQuery()
-  const { data: instance, ...instanceQueryLeft } = useQuery(
-    instanceQuery.definition,
-    instanceQuery.options
-  )
-
-  if (
-    isQueryLoading(instanceQueryLeft) &&
-    !hasQueryBeenLoaded(instanceQueryLeft)
-  ) {
-    return null
-  }
-
-  return <DumbCozyTheme {...props} settingsThemeType={instance?.colorScheme} />
-}
-
-export default CozyThemeWithQuery

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -1,65 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { CozyThemeContext } from './index'
-import MuiCozyTheme from '../../MuiCozyTheme'
-import useMediaQuery from '../../hooks/useMediaQuery'
-
-const DumbCozyTheme = ({
-  variant,
-  className,
-  ignoreItself,
-  settingsThemeType,
-  children
-}) => {
-  const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
-  const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
-
-  const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
-    ? 'dark'
-    : 'light'
-  const filteredSettingsThemeType = ['light', 'dark'].includes(
-    settingsThemeType
-  )
-    ? settingsThemeType
-    : undefined
-
-  const selfThemeType =
-    uiThemeType || filteredSettingsThemeType || deviceThemeType
-  const selfThemeVariant = uiThemeVariant || variant
-
-  return (
-    <CozyThemeContext.Provider
-      value={{
-        type: selfThemeType,
-        variant: selfThemeVariant,
-        isLight: selfThemeType === 'light'
-      }}
-    >
-      <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
-        <div
-          className={cx(className, {
-            [`TwakeTheme--${selfThemeType}-${selfThemeVariant}`]:
-              Boolean(selfThemeVariant),
-            'u-dc': ignoreItself
-          })}
-        >
-          {children}
-        </div>
-      </MuiCozyTheme>
-    </CozyThemeContext.Provider>
-  )
-}
-
-DumbCozyTheme.propTypes = {
-  variant: PropTypes.oneOf(['normal', 'inverted']),
-  /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
-  ignoreItself: PropTypes.bool,
-  className: PropTypes.string,
-  /** Theme type from io.cozy.settings.instance */
-  settingsThemeType: PropTypes.oneOf(['light', 'dark', 'auto']),
-  children: PropTypes.node
-}
-
-export default DumbCozyTheme

package/react/providers/CozyTheme/queries.js

@@ -1,14 +0,0 @@
-import { Q, fetchPolicies } from 'cozy-client'
-
-const SETTINGS_DOCTYPE = 'io.cozy.settings'
-
-const defaultFetchPolicy = fetchPolicies.olderThan(5 * 60 * 1000)
-
-export const buildSettingsInstanceQuery = () => ({
-  definition: Q(SETTINGS_DOCTYPE).getById('io.cozy.settings.instance'),
-  options: {
-    as: `${SETTINGS_DOCTYPE}/io.cozy.settings.instance`,
-    fetchPolicy: defaultFetchPolicy,
-    singleDocData: true
-  }
-})

package/react/providers/Intent/index.jsx

@@ -1,83 +0,0 @@
-import React, {
-  useEffect,
-  useMemo,
-  useState,
-  createContext,
-  useContext
-} from 'react'
-
-import { useClient } from 'cozy-client'
-import Backdrop from 'cozy-ui/transpiled/react/Backdrop'
-import Spinner from 'cozy-ui/transpiled/react/Spinner'
-
-export const IntentContext = createContext()
-
-export const useIntent = () => {
-  const context = useContext(IntentContext)
-
-  if (!context) {
-    throw new Error('useIntent must be used within a IntentProvider')
-  }
-  return context
-}
-
-const IntentProvider = ({ intentId, componentsProps, children }) => {
-  const client = useClient()
-  const [state, setState] = useState({
-    service: null,
-    intent: null,
-    data: null
-  })
-
-  const value = useMemo(
-    () => ({
-      service: state.service,
-      intent: state.intent,
-      data: state.data
-    }),
-    [state]
-  )
-
-  useEffect(() => {
-    const startService = async () => {
-      let service
-
-      try {
-        service = await client.intents.createService(intentId, window)
-        const intent = service.getIntent()
-        const data = service.getData()
-
-        setState({
-          service,
-          intent,
-          data
-        })
-      } catch (error) {
-        service.throw(error)
-      }
-    }
-
-    if (!state.service) {
-      startService()
-    }
-  }, [client, intentId, state.service])
-
-  if (!state.service) {
-    return (
-      <Backdrop open {...componentsProps?.backdrop}>
-        <Spinner
-          className="u-m-0"
-          size="xxlarge"
-          middle
-          {...componentsProps?.spinner}
-        />
-      </Backdrop>
-    )
-  }
-
-  return (
-    <IntentContext.Provider value={value}>{children}</IntentContext.Provider>
-  )
-}
-
-export default IntentProvider

package/transpiled/react/AppIcon/index.d.ts

@@ -1,50 +0,0 @@
-export class AppIcon extends React.Component<any, any, any> {
-    constructor(props: any, context: any);
-    isUnmounting: boolean;
-    handleError(): void;
-    fetchIcon(): any;
-    state: {
-        error: null;
-        icon: null;
-        status: string;
-    };
-    componentWillUnmount(): void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    load(): Promise<void>;
-    render(): JSX.Element;
-}
-export namespace AppIcon {
-    namespace propTypes {
-        export const alt: PropTypes.Requireable<string>;
-        export const app: PropTypes.Requireable<string | PropTypes.InferProps<{
-            name: PropTypes.Requireable<string>;
-            slug: PropTypes.Requireable<string>;
-            developer: PropTypes.Requireable<object>;
-            links: PropTypes.Requireable<PropTypes.InferProps<{
-                icon: PropTypes.Requireable<string>;
-            }>>;
-            latest_version: PropTypes.Requireable<PropTypes.InferProps<{
-                version: PropTypes.Requireable<string>;
-            }>>;
-        }>>;
-        export { iconPropType as fallbackIcon };
-        export const fetchIcon: PropTypes.Requireable<(...args: any[]) => any>;
-        export const client: PropTypes.Validator<object>;
-        export const className: PropTypes.Requireable<string>;
-        export const onReady: PropTypes.Requireable<(...args: any[]) => any>;
-        export const type: PropTypes.Requireable<string>;
-        export const priority: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const type_1: string;
-        export { type_1 as type };
-        const priority_1: string;
-        export { priority_1 as priority };
-    }
-}
-declare var _default: Function;
-export default _default;
-import React from "react";
-import PropTypes from "prop-types";
-import { iconPropType } from "../Icon";