cozy-ui-plus 1.1.0

package/src/Field/Readme.md

@@ -0,0 +1,357 @@
+#### 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/src/Field/index.jsx

@@ -0,0 +1,317 @@
+import cx from 'classnames'
+import omit from 'lodash/omit'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+
+import labelStyles from 'cozy-ui/react/Label/styles.styl'
+import Label from 'cozy-ui/transpiled/react/Label'
+import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
+import Textarea from 'cozy-ui/transpiled/react/Textarea'
+import Input from 'cozy-ui/transpiled/react/legacy/Input'
+
+import styles from './styles.styl'
+import ContactPicker from '../ContactPicker'
+
+/**
+ * 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/src/Field/index.spec.js

@@ -0,0 +1,59 @@
+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()
+  })
+})