cozy-ui 132.0.0 → 133.0.0-beta.1

package/react/Field/Readme.md

@@ -1,357 +0,0 @@
-#### Field component is a combination of Label & Input components
-
-Like `Input` component, it can have the following properties:
-
-* `fullwidth` (default: `false`)
-
-##### Example
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    id="idField"
-    label="I'm a label"
-    type="textarea"
-    placeholder="I'm a textarea"
-    size="medium"
-  />
-</form>
-```
-
-##### Inline variant
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    id="idField"
-    label="I'm a label"
-    type="text"
-    placeholder="Write something"
-    size="medium"
-    variant="inline"
-  />
-</form>
-```
-
-##### Controlled input
-
-An input is controlled if `props.value` is passed, even if it is empty.
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-initialState = { value: '' }
-
-const handleChange = ev => setState({ value: ev.target.value })
-
-;
-
-<Field id='controlled-field' onChange={handleChange} value={state.value} />
-```
-
-* `inputRef`
-
-This property is mapped to `<Input />` component `inputRef` property.
-It gives access to the underlying `<input />` element, for example to give focus or move the caret.
-
-##### Example
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
-
-class FieldWithFocus extends React.Component {
-  constructor() {
-    super()
-    this.component = null;
-    this.setFocus = this.setFocus.bind(this)
-  }
-  setFocus() {
-    this.component.focus()
-  }
-  render() {
-    return (
-      <div>
-          <Field
-            inputRef={c => this.component = c}
-            label="I can have focus"
-            placeholder="Focus please" />
-        <Button label="Focus!" onClick={this.setFocus}>Set Focus</Button>
-      </div>
-    )
-  }
-}
-
-;
-
-<FieldWithFocus />
-```
-
-* `name`
-
-Name of the form field, injected into `Input`, `TextArea` or `SelectBox` component.
-
-##### Exemple
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    label="I got a name"
-    name="foo"
-  />
-</form>
-```
-
-#### Field when there's an error
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    id="idFieldError"
-    label="I'm an error label"
-    placeholder="I'm an error input[type=text]"
-    error
-    onChange={() => {}}
-  />
-</form>
-```
-
-#### Field with SelectBox
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-const options = [
-{
-  label: 'Choice 1',
-  value: '1'
-}, {
-  label: 'Choice 2',
-  value: '2'
-}]
-
-;
-
-<form>
-  <Field
-    label="I'am a SelectBox"
-    type="select"
-    options={options}
-    placeholder="Select ..."
-    value={null}
-  />
-  <Field
-    label="I'am a SelectBox with a value"
-    type="select"
-    options={options}
-    value={{ label: 'Choice 2', value: '2'}}
-  />
-</form>
-```
-
-#### Field with ContactPicker
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-import mockClient from 'cozy-ui/transpiled/react/ContactsListModal/mockClient'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
-
-initialState = { selectedContact: null }
-
-;
-
-<BreakpointsProvider>
-  <DemoProvider client={mockClient}>
-    <form>
-      <Field
-        label="Contact"
-        type="contact"
-        placeholder="Select a contact"
-        value={state.selectedContact}
-        onChange={selectedContact => setState({ selectedContact })}
-      />
-    </form>
-  </DemoProvider>
-</BreakpointsProvider>
-```
-
-#### Password field with show/hide button
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    id="idFieldPassword"
-    label="I'm a password label"
-    type="password"
-    secondaryLabels={{
-      hideLabel: "Hide",
-      showLabel: "Show"
-    }}
-  />
-</form>
-```
-
-#### Password field without show/hide button
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    id="idFieldPassword"
-    label="I'm a password label"
-    type="password"
-  />
-</form>
-```
-
-#### Side element
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    label="I'm a label"
-    side="(optional)"
-  />
-</form>
-```
-
-#### Side element with fullwidth element
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    label="I'm a label"
-    side="(optional)"
-    fullwidth={true}
-  />
-</form>
-```
-
-#### Customized label and input
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    label="I'm a label"
-    labelProps={{
-      style: { color: 'teal' }
-    }}
-    fieldProps={{
-      style: { borderColor: 'teal' }
-    }}
-  />
-</form>
-```
-
-#### Password with custom secondaryComponent
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-import MuiButton from 'cozy-ui/transpiled/react/Button'
-
-;
-
-<form>
-  <br/>
-  <Field
-    label="I'm a label"
-    labelProps={{
-      style: { color: 'teal' }
-    }}
-    fieldProps={{
-      style: { borderColor: 'teal' }
-    }}
-    type="password"
-    secondaryComponent={({visible}) => {
-      return (
-        /* Need to cancel the paddingTop of the button */
-        <div style={{ marginTop: '-0.5rem'}}>
-          <MuiButton size='small' color='secondary'>
-            {visible ? 'Hide' : 'Show' }
-          </MuiButton>
-        </div>
-      )
-    }}
-  />
-</form>
-```
-
-#### Controlled Field
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field'
-
-;
-
-<form>
-  <Field
-    side="(optional)"
-    fullwidth={true}
-    value={state.value}
-    onChange={ev => setState({value: ev.target.value})}
-  />
-  Value: { state.value }
-</form>
-```
-
-#### Mobile specific props
-
-On mobile devices, following props may be useful to control on-screen keyboard's behavior
-
-Note that `autoCapitalize` property is not handled by all mobile browsers and it also depends on the on-screen keyboard installed by the user and its configuration (i.e. [Android SwiftKey configuration](https://support.swiftkey.com/hc/en-us/articles/201468481-How-do-I-turn-off-Auto-Capitalize-))
-
-```jsx
-import Field from 'cozy-ui/transpiled/react/Field';
-import Variants from 'cozy-ui/docs/components/Variants';
-
-const initialVariants = [
-  { autoCapitalize: false, autoComplete: false }
-];
-
-<Variants initialVariants={initialVariants}>{
-  variant => (
-    <form>
-      <Field
-        autoCapitalize={variant.autoCapitalize ? 'on' : 'none'}
-        autoComplete={variant.autoComplete ? 'on' : 'off'}
-      />
-    </form>
-  )
-}</Variants>
-```

package/react/Field/index.jsx

@@ -1,316 +0,0 @@
-import cx from 'classnames'
-import omit from 'lodash/omit'
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-
-import styles from './styles.styl'
-import ContactPicker from '../ContactPicker'
-import Input from '../legacy/Input'
-import Label from '../Label'
-import labelStyles from '../Label/styles.styl'
-import SelectBox from '../SelectBox'
-import Textarea from '../Textarea'
-
-/**
- * PropTypes to pass to Input but not to other components, like SelectBox
- * for example
- */
-const inputSpecificPropTypes = {
-  autoCapitalize: PropTypes.string,
-  autoComplete: PropTypes.string,
-  onKeyUp: PropTypes.func
-}
-
-const InputPassword = ({
-  hideLabel,
-  showLabel,
-  fullwidth,
-  secondaryComponent,
-  inputRef,
-  ...restProps
-}) => {
-  const [visible, setVisible] = useState(false)
-
-  const toggleVisibility = () => {
-    setVisible(visible => !visible)
-  }
-
-  return (
-    <div className={styles['o-field-input']}>
-      {!secondaryComponent && (
-        <div
-          className={cx(
-            labelStyles['c-label'],
-            styles['o-field-input-action'],
-            { [styles['o-side-fullwidth']]: fullwidth }
-          )}
-          onClick={toggleVisibility}
-        >
-          {visible ? hideLabel : showLabel}
-        </div>
-      )}
-      {secondaryComponent && (
-        <div
-          className={cx(styles['o-field-input-action'], {
-            [styles['o-side-fullwidth']]: fullwidth
-          })}
-          onClick={toggleVisibility}
-        >
-          {secondaryComponent({ visible })}
-        </div>
-      )}
-      <Input
-        {...restProps}
-        ref={inputRef}
-        fullwidth={fullwidth}
-        type={visible ? 'text' : 'password'}
-      />
-    </div>
-  )
-}
-
-InputPassword.propTypes = {
-  ...Input.propTypes,
-  hideLabel: PropTypes.string,
-  showLabel: PropTypes.string
-}
-
-InputPassword.defaultProps = {
-  ...Input.defaultProps
-}
-
-const FieldContainer = props => {
-  const { className, variant, ...rest } = props
-
-  return (
-    <div
-      className={cx(
-        styles['o-field'],
-        { [styles['o-field--inline']]: variant === 'inline' },
-        className
-      )}
-      {...rest}
-    />
-  )
-}
-
-const Field = props => {
-  const {
-    autoCapitalize,
-    autoComplete,
-    className,
-    disabled,
-    fieldProps,
-    labelProps,
-    fullwidth,
-    label,
-    id,
-    inputRef,
-    name,
-    type,
-    value,
-    placeholder,
-    error,
-    onChange,
-    onKeyUp,
-    onFocus,
-    onBlur,
-    readOnly,
-    secondaryLabels,
-    secondaryComponent,
-    side,
-    size,
-    variant
-  } = props
-  const controlledProps = {
-    ...(value !== undefined ? { value } : {}),
-    ...(onChange ? { onChange } : {})
-  }
-  const inputType = type => {
-    switch (type) {
-      case 'select':
-        return (
-          <SelectBox
-            {...omit(props, ...Object.keys(inputSpecificPropTypes))}
-            // If value prop is falsy, the SelectBox never displays any selected
-            // option. Only passing `undefined` make the SelectBox work
-            // properly.
-            value={props.value || undefined}
-          />
-        )
-      case 'textarea':
-        return (
-          <Textarea
-            autoCapitalize={autoCapitalize}
-            disabled={disabled}
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            error={error}
-            onKeyUp={onKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            readOnly={readOnly}
-            {...controlledProps}
-          />
-        )
-      case 'password':
-        return (
-          <InputPassword
-            autoCapitalize={autoCapitalize}
-            autoComplete={autoComplete}
-            disabled={disabled}
-            fullwidth={fullwidth}
-            id={id}
-            inputRef={inputRef}
-            name={name}
-            type={type}
-            placeholder={placeholder}
-            error={error}
-            {...controlledProps}
-            onKeyUp={onKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            readOnly={readOnly}
-            size={size}
-            {...fieldProps}
-            {...secondaryLabels}
-            secondaryComponent={secondaryComponent}
-          />
-        )
-
-      case 'contact':
-        return (
-          <ContactPicker
-            placeholder={placeholder}
-            onChange={onChange}
-            selectedContact={value}
-          />
-        )
-
-      case 'date':
-      case 'email':
-      case 'url':
-      case 'text':
-      case 'number':
-        return (
-          <Input
-            autoCapitalize={autoCapitalize}
-            autoComplete={autoComplete}
-            disabled={disabled}
-            fullwidth={fullwidth}
-            id={id}
-            ref={inputRef}
-            name={name}
-            type={type}
-            placeholder={placeholder}
-            error={error}
-            {...controlledProps}
-            onKeyUp={onKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            readOnly={readOnly}
-            size={size}
-            {...fieldProps}
-          />
-        )
-      default:
-        throw new Error(
-          `${type} is not a valid type. Type must be ${allowedTypes.join(', ')}`
-        )
-    }
-  }
-
-  return (
-    <FieldContainer className={className} variant={variant}>
-      <Label htmlFor={id} {...labelProps}>
-        {label}
-      </Label>
-      {side && (
-        <div
-          className={cx(styles['o-side'], labelStyles['c-label'], {
-            [styles['o-side-fullwidth']]: fullwidth
-          })}
-        >
-          {side}
-        </div>
-      )}
-      {inputType(type)}
-    </FieldContainer>
-  )
-}
-
-const allowedTypes = [
-  'date',
-  'email',
-  'password',
-  'select',
-  'textarea',
-  'text',
-  'url',
-  'number',
-  'contact'
-]
-
-Field.propTypes = {
-  ...inputSpecificPropTypes,
-  disabled: PropTypes.bool,
-  labelProps: PropTypes.object,
-  fieldProps: PropTypes.object,
-  fullwidth: PropTypes.bool,
-  label: PropTypes.node.isRequired,
-  id: PropTypes.string,
-  name: PropTypes.string,
-  type: PropTypes.oneOf(allowedTypes),
-  // value should be an object for type=select and string for others
-  value: function (props, propName, componentName) {
-    // not a required props
-    if (typeof props[propName] === 'undefined') return
-    if (props.type === 'select' && typeof props[propName] !== 'object') {
-      return new Error(
-        'Invalid prop `' +
-          propName +
-          '` supplied to' +
-          ' `' +
-          componentName +
-          '`. Expected an object for a Field value with type=select.'
-      )
-    } else if (props.type !== 'select' && typeof props[propName] !== 'string') {
-      return new Error(
-        'Invalid prop `' +
-          propName +
-          '` supplied to' +
-          ' `' +
-          componentName +
-          '`. Expected value to be a string.'
-      )
-    }
-  },
-  placeholder: PropTypes.string,
-  error: PropTypes.bool,
-  onChange: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  side: PropTypes.node,
-  size: PropTypes.oneOf(['tiny', 'medium', 'large']),
-  secondaryLabels: PropTypes.object,
-  secondaryComponent: PropTypes.func
-}
-
-Field.defaultProps = {
-  fieldProps: {},
-  labelProps: {},
-  fullwidth: false,
-  label: '',
-  id: '',
-  type: 'text',
-  value: undefined,
-  placeholder: '',
-  error: false,
-  size: 'large',
-  secondaryLabels: {}
-}
-
-export default Field
-export { FieldContainer }

package/react/Field/index.spec.js

@@ -1,59 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import Field from '.'
-
-describe('Field component', () => {
-  beforeEach(() => {
-    // by default, proptypes checking just log errors
-    jest.spyOn(console, 'error').mockImplementation(message => {
-      throw new Error(message)
-    })
-  })
-
-  afterEach(() => {
-    jest.resetAllMocks()
-    jest.restoreAllMocks()
-  })
-
-  it('should expect object type value for type=select', () => {
-    expect(() =>
-      render(
-        <Field
-          label="mock field"
-          type="select"
-          value={{}}
-          onChange={() => {}}
-        />
-      )
-    ).not.toThrowError()
-    expect(() =>
-      render(
-        <Field
-          label="mock field"
-          type="select"
-          value="wrong"
-          onChange={() => {}}
-        />
-      )
-    ).toThrowError()
-  })
-
-  it('should expect string type value for all types but select', () => {
-    expect(() =>
-      render(
-        <Field
-          label="mock field"
-          type="text"
-          value="good"
-          onChange={() => {}}
-        />
-      )
-    ).not.toThrowError()
-    expect(() =>
-      render(
-        <Field label="mock field" type="text" value={{}} onChange={() => {}} />
-      )
-    ).toThrowError()
-  })
-})