cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/BarContextProvider/index.spec.jsx

@@ -1,176 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import { Provider, useStore } from 'react-redux'
-import configureStore from 'redux-mock-store'
-
-import CozyClient, {
-  createMockClient,
-  CozyProvider,
-  useClient
-} from 'cozy-client'
-import { useWebviewIntent } from 'cozy-intent'
-
-import BarContextProvider from '.'
-import I18n, { useI18n, translate } from '../providers/I18n'
-
-const mockWebviewService = { foo: 'bar' }
-const mockVoidWebviewService = 'No context'
-const locales = { helloworld: 'Hello World !' }
-const localesBar = { a: 'b' }
-
-const DumbHelloWorld = translate()(({ t, f, lang }) => (
-  <div>
-    {t('helloworld')}
-    <br />
-    {f('2020-01-06', 'D LLL', { useAdditionalDayOfYearTokens: true })}
-    <br />
-    {lang}
-  </div>
-))
-
-const IntentComponent = () => {
-  let webviewIntent
-  let render
-
-  try {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    webviewIntent = useWebviewIntent()
-    render = webviewIntent.foo
-  } catch {
-    render = mockVoidWebviewService
-  }
-
-  return <main>{render}</main>
-}
-
-const MockedBar = props => {
-  const client = new CozyClient({})
-  return (
-    <CozyProvider client={client}>
-      <I18n lang="fr" dictRequire={() => localesBar}>
-        {props.children}
-      </I18n>
-    </CozyProvider>
-  )
-}
-
-const App = ({ children, webviewService }) => {
-  const { t, f, lang } = useI18n()
-  const client = useClient()
-  const store = useStore()
-
-  return (
-    <MockedBar>
-      <BarContextProvider
-        t={t}
-        f={f}
-        lang={lang}
-        client={client}
-        store={store}
-        webviewService={webviewService}
-      >
-        {children}
-      </BarContextProvider>
-    </MockedBar>
-  )
-}
-
-describe('BarContextProvider', () => {
-  afterAll(() => {
-    window.cozy = undefined
-  })
-
-  it('should provide the right (aka app not the one from the bar) t/f/store/client to the DumbHelloWorld', () => {
-    const client = createMockClient({})
-    const mockStore = configureStore()
-    const store = mockStore(x => x)
-
-    const { queryByText } = render(
-      <Provider store={store}>
-        <CozyProvider client={client}>
-          <I18n lang="en" dictRequire={() => locales}>
-            <App>
-              <DumbHelloWorld />
-            </App>
-          </I18n>
-        </CozyProvider>
-      </Provider>
-    )
-
-    expect(queryByText('<div>Hello World !<br>6 Jan<br>en</div>')).toBeDefined()
-  })
-
-  it('should render nothing when no children is provided', () => {
-    const { container } = render(<BarContextProvider />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  it('should work without a cozy-intent context', () => {
-    // Set App Amirale context
-    window.cozy.isFlagshipApp = true
-
-    const client = createMockClient({})
-    const mockStore = configureStore()
-    const store = mockStore(x => x)
-
-    const { queryByText } = render(
-      <Provider store={store}>
-        <CozyProvider client={client}>
-          <I18n lang="en" dictRequire={() => locales}>
-            <App>
-              <IntentComponent />
-            </App>
-          </I18n>
-        </CozyProvider>
-      </Provider>
-    )
-
-    expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
-  })
-
-  it('should not try to provide a cozy-intent context if one is provided', () => {
-    // Set App Amirale context
-    window.cozy.isFlagshipApp = true
-
-    const client = createMockClient({})
-    const mockStore = configureStore()
-    const store = mockStore(x => x)
-
-    const { queryByText } = render(
-      <Provider store={store}>
-        <CozyProvider client={client}>
-          <I18n lang="en" dictRequire={() => locales}>
-            <App webviewService={mockWebviewService}>
-              <IntentComponent />
-            </App>
-          </I18n>
-        </CozyProvider>
-      </Provider>
-    )
-
-    expect(queryByText(mockWebviewService.foo)).toBeInTheDocument()
-  })
-
-  it('should work without a cozy-intent context', () => {
-    // Set Web context
-    window.cozy.isFlagshipApp = false
-
-    const client = createMockClient({})
-    const mockStore = configureStore()
-    const store = mockStore(x => x)
-
-    const { queryByText } = render(
-      <Provider store={store}>
-        <CozyProvider client={client}>
-          <I18n lang="en" dictRequire={() => locales}>
-            <App>
-              <IntentComponent />
-            </App>
-          </I18n>
-        </CozyProvider>
-      </Provider>
-    )
-
-    expect(queryByText(mockVoidWebviewService)).toBeInTheDocument()
-  })
-})

package/react/CipherIcon/Readme.md

@@ -1,14 +0,0 @@
-This is an icon representing a cipher for a given konnector
-
-```jsx
-import CipherIcon from 'cozy-ui/transpiled/react/CipherIcon';
-
-<div>
-  <div>
-    <CipherIcon konnector="payfit" />
-  </div>
-  <div>
-    <CipherIcon konnector={{ slug: 'payfit' }} />
-  </div>
-</div>
-```

package/react/CipherIcon/index.jsx

@@ -1,46 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { withClient } from 'cozy-client'
-
-import AppIcon from '../AppIcon'
-import Icon from '../Icon'
-import KeychainIcon from '../Icons/Keychain'
-import { AppDoctype } from '../proptypes'
-
-class CipherIcon extends React.PureComponent {
-  constructor(props) {
-    super(props)
-    this.fetchIcon = this.fetchIcon.bind(this)
-  }
-
-  fetchIcon() {
-    const { client, konnector } = this.props
-
-    return client.getStackClient().getIconURL({
-      type: 'konnector',
-      slug: konnector.slug || konnector,
-      appData: konnector
-    })
-  }
-
-  render() {
-    const { className, ...rest } = this.props
-
-    return (
-      <div className={cx('u-dib u-pos-relative', className)} {...rest}>
-        <Icon icon={KeychainIcon} size={32} />
-        <div className="u-pos-absolute u-right-0 u-bottom-0">
-          <AppIcon fetchIcon={this.fetchIcon} className="u-w-1 u-h-1" />
-        </div>
-      </div>
-    )
-  }
-}
-
-CipherIcon.propTypes = {
-  konnector: PropTypes.oneOfType([AppDoctype, PropTypes.string]).isRequired
-}
-
-export default withClient(CipherIcon)

package/react/CipherIcon/index.spec.jsx

@@ -1,51 +0,0 @@
-import { fireEvent, render } from '@testing-library/react'
-import React from 'react'
-
-import CipherIcon from '.'
-
-jest.mock('cozy-client', () => ({
-  withClient: Component => {
-    const client = {
-      getStackClient: () => ({
-        getIconURL: ({ type, appData }) => {
-          console.log('getIconUrl called with:')
-          console.log(type)
-          console.log(appData)
-        }
-      })
-    }
-    return konnector => (
-      <Component client={client} konnector={{ ...konnector }} />
-    )
-  }
-}))
-
-jest.mock('../AppIcon', () => ({ fetchIcon }) => (
-  <button data-testid="app-icon" onClick={fetchIcon}></button>
-))
-
-describe('CipherIcon', () => {
-  it('should provide appData to getIconUrl in order to get icon simply, when oauth not needed', () => {
-    // Given
-    jest.spyOn(console, 'log').mockImplementation()
-    const konnector = {
-      name: 'PropTypes.string',
-      slug: 'slug',
-      links: {
-        icon: 'icon url'
-      },
-      latest_version: {
-        version: 'version'
-      }
-    }
-    const { getByTestId } = render(<CipherIcon konnector={konnector} />)
-
-    // When
-    fireEvent.click(getByTestId('app-icon'))
-
-    // Then
-    expect(console.log).toHaveBeenNthCalledWith(1, 'getIconUrl called with:')
-    expect(console.log).toHaveBeenNthCalledWith(2, 'konnector')
-    expect(console.log).toHaveBeenNthCalledWith(3, { konnector })
-  })
-})

package/react/ContactPicker/Readme.md

@@ -1,26 +0,0 @@
-⚠️ The app must have `POST` permission on `io.cozy.contacts` doctype to use `ContactPicker`.
-
-⚠️ Since this component use `ContactsListModal`, it does a request to fetch all contacts, it should be wrapped in a CozyProvider.
-
-Also, to take advantage of realtime updates of the contacts, the CozyClient passed to the provider should have a realtime plugin initialized. The component will work without realtime initialized, but the list will not always be up-to-date.
-
-```jsx
-import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import ContactPicker from 'cozy-ui/transpiled/react/ContactPicker'
-
-initialState = { selectedContact: null }
-
-;
-
-<DemoProvider client={mockClient}>
-  <ContactPicker
-    placeholder="Select a contact"
-    onChange={selectedContact => setState({ selectedContact })}
-    value={state.selectedContact}
-    listPlaceholder="Search a contact"
-    listEmptyMessage="No contact"
-    addContactLabel="Add a contact"
-  />
-</DemoProvider>
-```

package/react/ContactPicker/index.jsx

@@ -1,87 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import { models } from 'cozy-client'
-const { getDisplayName } = models.contact
-
-import styles from './styles.styl'
-import ContactsListModal from '../ContactsListModal'
-
-const SelectControl = props => {
-  const { className, children, ...rest } = props
-
-  return (
-    <button
-      type="button"
-      className={cx(styles.SelectControl, className)}
-      {...rest}
-    >
-      {children}
-    </button>
-  )
-}
-
-class ContactPicker extends React.Component {
-  constructor(props, context) {
-    super(props, context)
-    this.state = {
-      opened: this.props.initialOpen
-    }
-    this.open = this.open.bind(this)
-    this.close = this.close.bind(this)
-  }
-
-  open() {
-    this.setState({ opened: true })
-  }
-
-  close() {
-    this.setState({ opened: false })
-  }
-
-  render() {
-    const {
-      placeholder,
-      onChange,
-      value,
-      listPlaceholder,
-      listEmptyMessage,
-      addContactLabel,
-      initialOpen, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props
-    const { opened } = this.state
-
-    const handleChange = contact => {
-      onChange(contact)
-    }
-
-    return (
-      <>
-        <SelectControl {...rest} onClick={this.open}>
-          {value ? getDisplayName(value) : placeholder}
-        </SelectControl>
-        {opened && (
-          <ContactsListModal
-            dismissAction={this.close}
-            onItemClick={handleChange}
-            placeholder={listPlaceholder}
-            emptyMessage={listEmptyMessage}
-            addContactLabel={addContactLabel}
-          />
-        )}
-      </>
-    )
-  }
-}
-
-ContactPicker.defaultProps = {
-  initialOpen: false
-}
-
-ContactPicker.propTypes = {
-  initialOpen: PropTypes.bool
-}
-
-export default ContactPicker

package/react/ContactPicker/index.spec.jsx

@@ -1,60 +0,0 @@
-import { render, fireEvent, waitFor } from '@testing-library/react'
-import React from 'react'
-
-import ContactPicker from '.'
-import contacts from '../ContactsList/_mockContacts.json'
-import mockClient from '../ContactsListModal/mockClient'
-import DemoProvider from '../providers/DemoProvider'
-
-const Wrapper = ({ children }) => {
-  return <DemoProvider client={mockClient}>{children}</DemoProvider>
-}
-
-it('should show a contacts list modal when clicking the control', async () => {
-  const root = render(
-    <Wrapper>
-      <ContactPicker placeholder="Select a contact" />
-    </Wrapper>
-  )
-
-  const btn = root.getByText('Select a contact')
-  fireEvent.click(btn)
-
-  await waitFor(() => {
-    expect(root.getByRole('dialog')).toBeTruthy()
-  })
-})
-
-it('should call the onChange function when a contact is being selected', async () => {
-  const onChange = jest.fn()
-  const root = render(
-    <Wrapper>
-      <ContactPicker placeholder="Select a contact" onChange={onChange} />
-    </Wrapper>
-  )
-
-  const btn = root.getByText('Select a contact')
-  fireEvent.click(btn)
-
-  const row = await root.findByText('Mitch')
-  fireEvent.click(row)
-
-  expect(onChange).toHaveBeenCalledWith(
-    expect.objectContaining({
-      name: {
-        familyName: 'Woodrum',
-        givenName: 'Mitch'
-      }
-    })
-  )
-})
-
-it('should show the given contact name in the select', () => {
-  const root = render(
-    <Wrapper>
-      <ContactPicker placeholder="Select a contact" value={contacts[0]} />
-    </Wrapper>
-  )
-
-  expect(root.getByText('isabelle.durand@cozycloud.cc')).toBeTruthy()
-})

package/react/ContactPicker/styles.styl

@@ -1,5 +0,0 @@
-@require 'tools/mixins'
-@require 'components/forms'
-
-.SelectControl
-    @extend $select

package/react/Contacts/AddModal/ContactAddressDialog/helpers.js

@@ -1,22 +0,0 @@
-import { cleanFormattedAddress } from 'cozy-client/dist/models/contact'
-
-/**
- * Make formatted address
- * @param {{ name: string, value: string }[]} subFieldsState - State of address sub fields
- * @returns {string} - Formatted address
- */
-export const makeFormattedAddressWithSubFields = (subFieldsState, t) => {
-  const normalizedAddress = subFieldsState.reduce((acc, curr) => {
-    const key = curr.name
-      .split('.')
-      .pop()
-      .replace(/address/, '')
-
-    return {
-      ...acc,
-      [key]: curr.value || ''
-    }
-  }, {})
-
-  return cleanFormattedAddress(t('formatted.address', normalizedAddress))
-}

package/react/Contacts/AddModal/ContactAddressDialog/helpers.spec.js

@@ -1,64 +0,0 @@
-import { makeFormattedAddressWithSubFields } from './helpers'
-
-describe('makeFormattedAddressWithSubFields', () => {
-  it('should return full formatted address', () => {
-    const subFieldsStateMock = [
-      { name: 'address[0].addressnumber', value: '10' },
-      { name: 'address[0].addressstreet', value: 'rue du test' },
-      { name: 'address[0].addresscode', value: '75056' },
-      { name: 'address[0].addresscity', value: 'Paris' },
-      { name: 'address[0].addresscountry', value: 'France' }
-    ]
-    const res = makeFormattedAddressWithSubFields(
-      subFieldsStateMock,
-      jest.fn(() => '10 rue du test, 75056 Paris, France')
-    )
-
-    expect(res).toBe('10 rue du test, 75056 Paris, France')
-  })
-  it('should return formatted address if only "code" & "city" values are defined', () => {
-    const subFieldsStateMock = [
-      { name: 'address[0].addressnumber', value: undefined },
-      { name: 'address[0].addressstreet', value: undefined },
-      { name: 'address[0].addresscode', value: '75056' },
-      { name: 'address[0].addresscity', value: 'Paris' },
-      { name: 'address[0].addresscountry', value: undefined }
-    ]
-    const res = makeFormattedAddressWithSubFields(
-      subFieldsStateMock,
-      jest.fn(() => ' , 75056 Paris, ')
-    )
-
-    expect(res).toBe('75056 Paris')
-  })
-  it('should return formatted address if "code" & "city" values are undefined', () => {
-    const subFieldsStateMock = [
-      { name: 'address[0].addressnumber', value: '10' },
-      { name: 'address[0].addressstreet', value: 'rue du test' },
-      { name: 'address[0].addresscode', value: undefined },
-      { name: 'address[0].addresscity', value: undefined },
-      { name: 'address[0].addresscountry', value: 'France' }
-    ]
-    const res = makeFormattedAddressWithSubFields(
-      subFieldsStateMock,
-      jest.fn(() => '10 rue du test,  , France')
-    )
-
-    expect(res).toBe('10 rue du test, France')
-  })
-  it('should return formatted address if all values are undefined', () => {
-    const subFieldsStateMock = [
-      { name: 'address[0].addressnumber', value: undefined },
-      { name: 'address[0].addressstreet', value: undefined },
-      { name: 'address[0].addresscode', value: undefined },
-      { name: 'address[0].addresscity', value: undefined },
-      { name: 'address[0].addresscountry', value: undefined }
-    ]
-    const res = makeFormattedAddressWithSubFields(
-      subFieldsStateMock,
-      jest.fn(() => ' ,  , ')
-    )
-
-    expect(res).toBe('')
-  })
-})

package/react/Contacts/AddModal/ContactAddressDialog/index.jsx

@@ -1,84 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { Field, useForm } from 'react-final-form'
-
-import { makeFormattedAddressWithSubFields } from './helpers'
-import { locales } from './locales'
-import Button from '../../../Buttons'
-import { FixedDialog } from '../../../CozyDialogs'
-import { useI18n, useExtendI18n } from '../../../providers/I18n'
-import FieldInputWrapper from '../ContactForm/FieldInputWrapper'
-import { fieldInputAttributesTypes } from '../types'
-
-const ContactAddressModal = ({ onClose, name, subFields }) => {
-  useExtendI18n(locales)
-  const { t } = useI18n()
-  const { getFieldState, change } = useForm()
-
-  const subFieldsState = subFields.map(subField =>
-    getFieldState(`${name}${subField.name}`)
-  )
-
-  const onConfirm = () => {
-    const hasBeenModified = subFieldsState.some(state => !state.pristine)
-    if (!hasBeenModified) {
-      return onClose()
-    }
-
-    const formattedAddress = makeFormattedAddressWithSubFields(
-      subFieldsState,
-      t
-    )
-    change(name, formattedAddress)
-
-    onClose()
-  }
-
-  const onCancel = () => {
-    subFieldsState.forEach(({ name, initial }) => change(name, initial))
-    onClose()
-  }
-
-  return (
-    <FixedDialog
-      open
-      onClose={onClose}
-      size="small"
-      title={t('Contacts.AddModal.ContactAddressDialog.fields.address')}
-      content={subFields.map(subField => (
-        <div key={subField.name} className="u-mt-1">
-          <Field
-            label={t(
-              `Contacts.AddModal.ContactAddressDialog.fields.${subField.name}`
-            )}
-            attributes={{ type: subField.type }}
-            name={`${name}${subField.name}`}
-            component={FieldInputWrapper}
-          />
-        </div>
-      ))}
-      actions={
-        <>
-          <Button
-            variant="secondary"
-            label={t('Contacts.AddModal.ContactAddressDialog.cancel')}
-            onClick={onCancel}
-          />
-          <Button
-            className="u-ml-half"
-            label={t('Contacts.AddModal.ContactAddressDialog.ok')}
-            onClick={onConfirm}
-          />
-        </>
-      }
-    />
-  )
-}
-
-ContactAddressModal.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-  subFields: PropTypes.arrayOf(fieldInputAttributesTypes).isRequired
-}
-
-export default ContactAddressModal

package/react/Contacts/AddModal/ContactAddressDialog/locales/en.json

@@ -1,25 +0,0 @@
-{
-  "Contacts": {
-    "AddModal": {
-      "ContactAddressDialog": {
-        "fields": {
-          "address": "Address",
-          "number": "Lane number",
-          "street": "Postal address",
-          "code": "Postal code",
-          "city": "City",
-          "country": "Country",
-          "locality": "Locality",
-          "building": "Building",
-          "stairs": "Stairs",
-          "floor": "Floor",
-          "apartment": "Apartment",
-          "region": "Region",
-          "entrycode": "Entry code"
-        },
-        "cancel": "Cancel",
-        "ok": "Ok"
-      }
-    }
-  }
-}

package/react/Contacts/AddModal/ContactAddressDialog/locales/fr.json

@@ -1,25 +0,0 @@
-{
-  "Contacts": {
-    "AddModal": {
-      "ContactAddressDialog": {
-        "fields": {
-          "address": "Adresse",
-          "number": "Numéro de voie",
-          "street": "Adresse postal",
-          "code": "Code postal",
-          "city": "Ville",
-          "country": "Pays",
-          "locality": "Lieu-dit",
-          "building": "Bâtiment",
-          "stairs": "Escalier",
-          "floor": "Etage",
-          "apartment": "Appartement",
-          "region": "Région",
-          "entrycode": "Code d'entrée"
-        },
-        "cancel": "Annuler",
-        "ok": "Ok"
-      }
-    }
-  }
-}