cozy-ui-plus 1.1.0

package/src/UploadQueue/styles.styl

@@ -0,0 +1,155 @@
+@require 'settings/icons.styl'
+@require 'settings/breakpoints.styl'
+@require 'settings/spaces.styl'
+@require 'settings/typography.styl'
+
+$coz-bar-size=3rem
+
+.upload-queue
+    border   .0625rem solid var(--dividerColor)
+    border-radius    .5rem
+    background-color var(--paperBackgroundColor)
+    display          flex
+    flex-direction   column
+    max-width 90%
+    width    30rem
+    overflow hidden
+
+.upload-queue__threshold-bar
+    min-width 10rem
+    margin-right 1rem
+
+.upload-queue__progress-caption
+    line-height $caption-font-size
+    height 1rem
+
+.upload-queue__upload-progress
+    align-items center
+    display flex
+    margin-top 0.125rem // Must tweak a bit the margin-top
+
+
+.upload-queue--popover
+    z-index           var(--zIndex-popover)
+    border            rem(1) solid var(--dividerColor)
+    border-radius     .5rem
+    box-shadow        rem(0 1 3 0) rgba(50, 54, 63, .19), rem(0 6 18 0) rgba(50, 54, 63, .19)
+    background-color  var(--paperBackgroundColor)
+    position fixed
+    bottom   .5rem
+    right    1.5rem
+    height   13.125rem
+    transform        translateY(18.75rem)
+    transition       0.5s
+    opacity          0
+    visibility       hidden
+
+
+.upload-queue--popover.upload-queue--visible
+    opacity    1
+    visibility visible
+    transform  translate(0)
+
+.upload-queue-header
+    display          flex
+    flex-direction   column
+    justify-content  center
+    height           2rem
+    min-height       2rem
+    background-color var(--defaultBackgroundColor)
+    font-weight      bold
+    margin           0
+    padding          .5rem 1rem .5rem
+
+    .upload-queue-header-inner
+        display flex
+        justify-content space-between
+        align-items center
+
+
+progress.upload-queue-progress
+    -webkit-appearance none
+    -moz-appearance    none
+    border     none
+    display    block
+    width      100%
+    height     .125rem
+    margin     0
+
+
+.upload-queue-content
+    overflow auto
+
+.upload-queue--collapsed
+    height 2.5rem
+
+    .upload-queue-content
+        visibility none
+
+.upload-queue-list
+    flex      1 1 auto
+    display   flex
+    flex-direction column
+
+.upload-queue-item--error
+    background-color var(--errorBackground)
+
+.upload-queue-item--done
+    background-color var(--defaultBackgroundColor)
+
+.item-file
+    user-select none
+    overflow hidden
+
+.item-status
+    flex       0 0 15%
+    text-align right
+    white-space nowrap
+    padding-left (spacing_values.m)
+
++medium-screen()
+    // we need to cover the border-bottom of the cozy-bar
+    $coz-bar-border-size = .0625rem
+
+    .upload-queue
+        border-radius 0
+        border 0
+        background-color var(--paperBackgroundColor)
+        box-shadow none
+        width 100%
+        max-width 100%
+        height auto
+        transform none
+
+
+    .upload-queue-header
+        background 0
+        text-transform uppercase
+        padding .5rem
+
+    .upload-queue-content
+        display none
+
+    .upload-queue--popover
+        top $coz-bar-size
+        bottom auto
+        right 0
+        left 0
+        z-index calc(var(--zIndex-app) + 3)
+        max-height 0
+
+        &:before
+            position fixed
+            top $coz-bar-size - $coz-bar-border-size
+            z-index  var(--zIndex-nav)
+            width 100%
+            height $coz-bar-border-size
+            content ''
+            background var(--paperBackgroundColor)
+
+        &.upload-queue--visible
+            max-height 30%
+
+        .upload-queue-content
+            display none
+

package/src/UploadQueue/useStatusIcon.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CheckCircleIcon from 'cozy-ui/transpiled/react/Icons/CheckCircle'
+import CrossCircleIcon from 'cozy-ui/transpiled/react/Icons/CrossCircle'
+import WarningIcon from 'cozy-ui/transpiled/react/Icons/Warning'
+import Spinner from 'cozy-ui/transpiled/react/Spinner'
+
+import { uploadStatus } from './index'
+
+export const useStatusIcon = (statusToUse, progress) => {
+  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
+    uploadStatus
+  const SuccessIcon = CheckCircleIcon
+  const ErrorIcon = CrossCircleIcon
+
+  let statusIcon
+
+  if (statusToUse === LOADING) {
+    statusIcon = !progress ? <Spinner color="var(--primaryColor)" /> : null
+  } else if (statusToUse === CANCEL) {
+    statusIcon = <Icon icon={ErrorIcon} color="var(--errorColor)" />
+  } else if (ERROR_STATUSES.includes(statusToUse)) {
+    statusIcon = <Icon icon={WarningIcon} color="var(--errorColor)" />
+  } else if (DONE_STATUSES.includes(statusToUse)) {
+    statusIcon = <Icon icon={SuccessIcon} color="var(--successColor)" />
+  } else if (statusToUse === PENDING) {
+    statusIcon = null
+  }
+
+  return statusIcon
+}

package/src/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 QuotaPaywall from '../Paywall'
+
+/**
+ * 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 QuotaPaywall
+ * @private
+ * @param {object} props - Props
+ * @param {Function} props.dismiss - remove the error from the stack to display
+ * @returns {React.ReactElement}
+ */
+function QuotaError({ dismiss }) {
+  return <QuotaPaywall 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/src/hooks/useClientErrors.spec.jsx

@@ -0,0 +1,94 @@
+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('../Paywall', () => ({ onClose }) => (
+  <>
+    QuotaPaywall <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) })
+}
+
+xdescribe('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('QuotaPaywall')).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 QuotaPaywall', async () => {
+        await setup()
+
+        expect(screen.queryByText('QuotaPaywall')).toBeInTheDocument()
+      })
+    })
+  })
+})

package/src/proptypes.js

@@ -0,0 +1,20 @@
+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/src/providers/CozyTheme/CozyThemeWithQuery.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client'
+import DumbCozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
+
+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/src/providers/CozyTheme/Readme.md

@@ -0,0 +1,88 @@
+An area of a page can have a different CozyTheme and components inside
+will be automatically styled.
+
+`MuiCozyTheme` is used under the hood so that MaterialUI components are
+also styled.
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
+import Buttons from 'cozy-ui/transpiled/react/Buttons'
+import TextField from 'cozy-ui/transpiled/react/TextField'
+import BarButton from 'cozy-ui/transpiled/react/BarButton'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import Figure from 'cozy-ui/transpiled/react/Figure'
+
+const props = [{}, { disabled: true}, { busy: true }]
+
+const themesSupportingContext = [
+  'primary',
+  'secondary'
+]
+
+;
+
+<DemoProvider>
+  <CozyTheme variant='inverted' className='u-stack-m'>
+    <Paper className='u-p-1'>
+      <Typography className='u-mb-1' variant="h4">Forced inverted variant</Typography>
+      <Typography variant="h4">➡️ Mui components</Typography>
+      <Typography variant="h5">Buttons</Typography>
+      {themesSupportingContext.map(theme =>
+        <p key={theme}>{
+          props.map(
+            props => <Buttons key={theme + JSON.stringify(props)} className="u-mr-half" label={theme} variant={theme} {...props} />
+          )
+        }</p>
+      )}
+      <Typography className='u-mt-1' variant="h5">TextField</Typography>
+      <TextField
+        id="inverted-field"
+        label="A field"
+        defaultValue="Default value"
+        margin="normal"
+        variant="outlined"
+        placeholder="placeholder"
+      />
+      <Typography className='u-mt-1' variant="h5">Normal variant inside inverted one</Typography>
+      <CozyTheme variant='normal'>
+        <Paper className='u-p-1 u-mv-1'>
+            <Typography variant='body1'>
+              We can always go back to normal variant if a child must "get out" of the theme.
+            </Typography>
+            <Buttons className='u-ml-0 u-mt-half' variant='primary' label='Primary button' />
+            <p>
+              <a href='#' className='u-link'>An u-link span</a>
+            </p>
+        </Paper>
+      </CozyTheme>
+
+      <Typography variant="h4">➡️ Not Mui components</Typography>
+      <Typography className=' u-mb-1' variant="h5">Avatar</Typography>
+      <Avatar className="u-mb-1" ghost text="CD" />
+      <Typography className='u-mb-1' variant="h5">Figure</Typography>
+      <Figure total={1000} symbol='€' coloredPositive coloredNegative signed />
+      <Figure total={-1000} symbol='€' coloredPositive coloredNegative signed />
+      <Figure total={-1000} symbol='€' signed />
+      <Typography className='u-mv-1' variant="h4">➡️ Utility classes only</Typography>
+      <div className='u-stack-s'>
+        <div className='u-error'>
+          Error text : "Please enter the right password."
+        </div>
+        <div className='u-success'>
+          Valid text : "Success, you've connected EDF to your Cozy."
+        </div>
+        <div className='u-warning'>
+          Warning text : "Something does not feel right, you may want to reload the page."
+        </div>
+        <p>
+          <a href='#' className='u-link'>An u-link span</a>
+        </p>
+      </div>
+    </Paper>
+  </CozyTheme>
+</DemoProvider>
+```

package/src/providers/CozyTheme/index.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { isRsg } from 'cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers'
+import DumbCozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
+export { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
+
+import CozyThemeWithQuery from './CozyThemeWithQuery'
+
+const CozyTheme = ({ ignoreCozySettings, ...props }) => {
+  const Comp =
+    ignoreCozySettings || process.env.NODE_ENV === 'test' || isRsg
+      ? DumbCozyTheme
+      : CozyThemeWithQuery
+
+  return <Comp {...props} />
+}
+
+CozyTheme.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,
+  /** Bypasses the request that retrieves the app's settings in order to define the theme type */
+  ignoreCozySettings: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.node
+}
+
+CozyTheme.defaultProps = {
+  variant: 'normal',
+  ignoreCozySettings: false,
+  ignoreItself: true
+}
+
+export default CozyTheme

package/src/providers/CozyTheme/queries.js

@@ -0,0 +1,14 @@
+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/src/providers/DemoProvider.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { CozyProvider } from 'cozy-client'
+import DumbDemoProvider from 'cozy-ui/transpiled/react/providers/DemoProvider'
+
+const defaultClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
+}
+
+const DemoProvider = ({ client, children, ...props }) => {
+  return (
+    <CozyProvider client={client || defaultClient}>
+      <DumbDemoProvider {...props}>{children}</DumbDemoProvider>
+    </CozyProvider>
+  )
+}
+
+export default DemoProvider