cozy-ui 132.0.0 → 133.0.0-beta.1

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/scripts/screenshots/fetchAllComponents.js

@@ -1,114 +0,0 @@
-const sortBy = require('lodash/sortBy')
-const flattenDeep = require('lodash/flattenDeep')
-const { sleep } = require('./helpers')
-
-const pushAll = (arr, items) => arr.push.apply(arr, items)
-
-const formatLink = (parsedStyleguideURL, relativeLink) => {
-  if (parsedStyleguideURL.protocol === 'file:') {
-    return `file://${relativeLink}`
-  } else {
-    return `${parsedStyleguideURL.toString()}${relativeLink}`
-  }
-}
-
-const getComponentNameFromTestId = testId => {
-  return testId.split('-example-')[0]
-}
-
-/**
- * Fetch all available components on the styleguide and returns an array
- * of { name, link } describing each component.
- * Components are sorted by name.
- */
-const fetchAllComponents = async (page, args, config) => {
-  const styleguideIndexURL = `${args.styleguideUrl}/index.html`
-
-  console.log(`➡️ Opening styleguide ${styleguideIndexURL}`)
-  await page.goto(styleguideIndexURL, {
-    waitUntil: 'load',
-    timeout: 0
-  })
-
-  console.log('➡️ Extracting links')
-
-  // We want to take screenshot for individual example, so we :
-  // - extract categories (link from the side menu with no ?id=)
-  // - go to category's page
-  // - look for `.rsg--controls-40 a` which is the open isolated for examples
-  // - look for its closest data-testid to get the name
-  const categoriesName = await page.evaluate(() => {
-    const sidebarSelector = '.rsg--sidebar-4'
-    return Array.from(document.querySelectorAll(`${sidebarSelector} a`))
-      .filter(v => !v.href.includes('?id='))
-      .map(x => x.text)
-      .filter(x => x !== 'Cozy-ui documentation') // see section's name in styleguide.config.js
-  })
-
-  const sortedCategoriesNames = sortBy(
-    categoriesName.map(catName => ({
-      link: styleguideIndexURL + '#/' + catName,
-      name: catName
-    })),
-    x => x.name
-  )
-
-  const allLinks = []
-  const parsedStyleguideURL = new URL(args.styleguideUrl)
-
-  for (const cate of sortedCategoriesNames) {
-    await page.goto(cate.link, { waitUntil: 'load', timeout: 0 })
-    await sleep(100)
-
-    const componentLinks = flattenDeep(
-      await page.evaluate(config => {
-        const componentSectionSelector = '.rsg--root-23'
-        const exampleToolbarSelector = '.rsg--toolbar-41'
-        const componentToolbarSelector = '.rsg--toolbar-11'
-        const openIsolatedButtonSelector = '.rsg--button-21'
-        const componentContainers = document.querySelectorAll(
-          componentSectionSelector
-        )
-
-        return Array.from(componentContainers, componentContainer => {
-          const componentId = componentContainer.dataset.testid.replace(
-            '-container',
-            ''
-          )
-          const perExampleScreenshot =
-            config[componentId] && config[componentId].perExampleScreenshot
-
-          const isolateButtons = componentContainer.querySelectorAll(
-            `${
-              perExampleScreenshot
-                ? exampleToolbarSelector
-                : componentToolbarSelector
-            } ${openIsolatedButtonSelector}`
-          )
-
-          return Array.from(isolateButtons).map(btn => {
-            const testId = btn.dataset.testid.replace('-isolate-button', '')
-
-            return {
-              testId,
-              link: btn.getAttribute('href')
-            }
-          })
-        })
-      }, config)
-    )
-
-    pushAll(
-      allLinks,
-      componentLinks.map(link => ({
-        ...link,
-        link: formatLink(parsedStyleguideURL, link.link),
-        name: getComponentNameFromTestId(link.testId)
-      }))
-    )
-  }
-
-  return allLinks
-}
-
-module.exports = fetchAllComponents

package/scripts/screenshots/helpers.js

@@ -1,39 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-
-const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
-
-const readConfig = async () => {
-  const configPath = path.join(process.cwd(), 'rsgscreenshots.json')
-  if (fs.existsSync(configPath)) {
-    return JSON.parse(fs.readFileSync(configPath))
-  } else {
-    return {}
-  }
-}
-
-const builtinViewports = {
-  mobile: '320x480',
-  desktop: '800x600'
-}
-
-const parseViewportArgument = viewportStr => {
-  viewportStr = builtinViewports[viewportStr] || viewportStr
-  const splitted = viewportStr.split('x')
-  if (!splitted[1]) {
-    console.warn(
-      `Viewport format unsupported (${viewportStr}), supported format example: 800x600. You can also use built-in viewport names: ${Object.keys(
-        builtinViewports
-      ).join(', ')}.`
-    )
-    throw new Error('Bad viewport format')
-  }
-  return { width: parseInt(splitted[0]), height: parseInt(splitted[1]) }
-}
-
-module.exports = {
-  sleep,
-  readConfig,
-  builtinViewports,
-  parseViewportArgument
-}