From 5bc36508d21409e7e7d99ee5c4c045311369e931 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Messiant?= <cedric.messiant@gmail.com>
Date: Fri, 15 Mar 2019 17:28:39 +0100
Subject: [PATCH] feat: Use cozy-ui fields (input and textarea)

---
 .../ContactCard/ContactFieldInput.jsx         |  5 +-
 .../__snapshots__/index.spec.jsx.snap         | 84 ++++++++++++-------
 .../Form/__snapshots__/fields.spec.jsx.snap   | 35 ++++++++
 src/components/Form/fields.jsx                | 27 ++++++
 src/components/Form/fields.spec.jsx           | 43 ++++++++++
 5 files changed, 164 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Form/__snapshots__/fields.spec.jsx.snap
 create mode 100644 src/components/Form/fields.jsx
 create mode 100644 src/components/Form/fields.spec.jsx

diff --git a/src/components/ContactCard/ContactFieldInput.jsx b/src/components/ContactCard/ContactFieldInput.jsx
index 195fd5f65..31d4c6b69 100644
--- a/src/components/ContactCard/ContactFieldInput.jsx
+++ b/src/components/ContactCard/ContactFieldInput.jsx
@@ -4,9 +4,10 @@ import { Field } from 'react-final-form'
 import classnames from 'classnames'
 
 import HasValueCondition from '../Form/HasValueCondition'
+import { AdaptedInput, AdaptedTextarea } from '../Form/fields'
 
 const getInputComponent = inputType =>
-  inputType === 'textarea' ? 'textarea' : 'input'
+  inputType === 'textarea' ? AdaptedTextarea : AdaptedInput
 
 class ContactFieldInput extends React.Component {
   state = {
@@ -65,7 +66,7 @@ class ContactFieldInput extends React.Component {
             <Field
               name={`${name}Label`}
               type="text"
-              component="input"
+              component={AdaptedInput}
               className="contact-form__label-input"
               placeholder={labelPlaceholder}
               onFocus={this.onFocus}
diff --git a/src/components/ContactCard/ContactForm/__snapshots__/index.spec.jsx.snap b/src/components/ContactCard/ContactForm/__snapshots__/index.spec.jsx.snap
index d831c110f..e561f70b8 100644
--- a/src/components/ContactCard/ContactForm/__snapshots__/index.spec.jsx.snap
+++ b/src/components/ContactCard/ContactForm/__snapshots__/index.spec.jsx.snap
@@ -24,7 +24,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="givenName"
               onBlur={[Function]}
               onChange={[Function]}
@@ -52,7 +53,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="familyName"
               onBlur={[Function]}
               onChange={[Function]}
@@ -97,7 +99,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="phone[0].phone"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -108,7 +111,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
                 value="+33 (2)0 90 00 54 04"
               />
               <input
-                className="contact-form__label-input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+                data-valid={true}
                 name="phone[0].phoneLabel"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -146,7 +150,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="phone[1].phone"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -157,7 +162,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
                 value="+33 6 77 11 22 33"
               />
               <input
-                className="contact-form__label-input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+                data-valid={true}
                 name="phone[1].phoneLabel"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -248,7 +254,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="email[0].email"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -259,7 +266,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
                 value="john.doe@cozycloud.cc"
               />
               <input
-                className="contact-form__label-input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+                data-valid={true}
                 name="email[0].emailLabel"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -297,7 +305,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="email[1].email"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -308,7 +317,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
                 value="john.doe@posteo.net"
               />
               <input
-                className="contact-form__label-input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+                data-valid={true}
                 name="email[1].emailLabel"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -399,7 +409,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="address[0].address"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -410,7 +421,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
                 value="94 Hinton Road 05034 Fresno, Singapore"
               />
               <input
-                className="contact-form__label-input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+                data-valid={true}
                 name="address[0].addressLabel"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -448,7 +460,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="address[1].address"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -459,7 +472,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
                 value="426 Runolfsson Knolls 84573 Port Easter  Cocos (Keeling) Islands"
               />
               <input
-                className="contact-form__label-input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+                data-valid={true}
                 name="address[1].addressLabel"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -547,7 +561,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="cozy"
               onBlur={[Function]}
               onChange={[Function]}
@@ -558,7 +573,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
               value="https://johndoe.mycozy.cloud"
             />
             <input
-              className="contact-form__label-input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__label-input"
+              data-valid={true}
               name="cozyLabel"
               onBlur={[Function]}
               onChange={[Function]}
@@ -599,7 +615,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="company"
               onBlur={[Function]}
               onChange={[Function]}
@@ -641,7 +658,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="birthday"
               onBlur={[Function]}
               onChange={[Function]}
@@ -683,7 +701,8 @@ exports[`ContactForm should fill form with contact data 1`] = `
             className="contact-form__input-wrapper"
           >
             <textarea
-              className="contact-form__input"
+              className="styles__c-textarea___D7EEH contact-form__input"
+              data-valid={true}
               name="note"
               onBlur={[Function]}
               onChange={[Function]}
@@ -758,7 +777,8 @@ exports[`ContactForm should match snapshot 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="givenName"
               onBlur={[Function]}
               onChange={[Function]}
@@ -786,7 +806,8 @@ exports[`ContactForm should match snapshot 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="familyName"
               onBlur={[Function]}
               onChange={[Function]}
@@ -831,7 +852,8 @@ exports[`ContactForm should match snapshot 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="phone[0].phone"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -903,7 +925,8 @@ exports[`ContactForm should match snapshot 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="email[0].email"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -975,7 +998,8 @@ exports[`ContactForm should match snapshot 1`] = `
               className="contact-form__input-wrapper"
             >
               <input
-                className="contact-form__input"
+                className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+                data-valid={true}
                 name="address[0].address"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -1044,7 +1068,8 @@ exports[`ContactForm should match snapshot 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="cozy"
               onBlur={[Function]}
               onChange={[Function]}
@@ -1086,7 +1111,8 @@ exports[`ContactForm should match snapshot 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="company"
               onBlur={[Function]}
               onChange={[Function]}
@@ -1128,7 +1154,8 @@ exports[`ContactForm should match snapshot 1`] = `
             className="contact-form__input-wrapper"
           >
             <input
-              className="contact-form__input"
+              className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR contact-form__input"
+              data-valid={true}
               name="birthday"
               onBlur={[Function]}
               onChange={[Function]}
@@ -1170,7 +1197,8 @@ exports[`ContactForm should match snapshot 1`] = `
             className="contact-form__input-wrapper"
           >
             <textarea
-              className="contact-form__input"
+              className="styles__c-textarea___D7EEH contact-form__input"
+              data-valid={true}
               name="note"
               onBlur={[Function]}
               onChange={[Function]}
diff --git a/src/components/Form/__snapshots__/fields.spec.jsx.snap b/src/components/Form/__snapshots__/fields.spec.jsx.snap
new file mode 100644
index 000000000..ddd2ed598
--- /dev/null
+++ b/src/components/Form/__snapshots__/fields.spec.jsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdaptedInput should adapt cozy-ui input for react-final-form 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <input
+    className="styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR"
+    data-valid={true}
+    name="title"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    type="text"
+    value="Hello"
+  />
+</form>
+`;
+
+exports[`AdaptedTextarea should adapt cozy-ui input for react-final-form 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <textarea
+    className="styles__c-textarea___D7EEH"
+    data-valid={true}
+    name="description"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    placeholder=""
+    value="Nostrum expedita qui rerum non est asperiores ratione."
+  />
+</form>
+`;
diff --git a/src/components/Form/fields.jsx b/src/components/Form/fields.jsx
new file mode 100644
index 000000000..6dcb4f9a1
--- /dev/null
+++ b/src/components/Form/fields.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Input from 'cozy-ui/transpiled/react/Input'
+import Textarea from 'cozy-ui/transpiled/react/Textarea'
+
+function adaptField(WrappedComponent) {
+  class AdaptField extends React.Component {
+    render() {
+      const {
+        input,
+        meta: { valid },
+        ...rest
+      } = this.props
+      return <WrappedComponent {...input} {...rest} data-valid={valid} />
+    }
+  }
+  AdaptField.displayName = `adaptField(${getDisplayName(WrappedComponent)})`
+  return AdaptField
+}
+
+function getDisplayName(WrappedComponent) {
+  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
+}
+
+const AdaptedInput = adaptField(Input)
+const AdaptedTextarea = adaptField(Textarea)
+
+export { AdaptedInput, AdaptedTextarea }
diff --git a/src/components/Form/fields.spec.jsx b/src/components/Form/fields.spec.jsx
new file mode 100644
index 000000000..77b7913b8
--- /dev/null
+++ b/src/components/Form/fields.spec.jsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { Field, Form } from 'react-final-form'
+import renderer from 'react-test-renderer'
+
+import { AdaptedInput, AdaptedTextarea } from './fields'
+
+describe('AdaptedInput', () => {
+  it('should adapt cozy-ui input for react-final-form', () => {
+    const jsx = (
+      <Form
+        initialValues={{ title: 'Hello' }}
+        onSubmit={jest.fn()}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field name="title" component={AdaptedInput} />
+          </form>
+        )}
+      />
+    )
+    const tree = renderer.create(jsx).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})
+
+describe('AdaptedTextarea', () => {
+  it('should adapt cozy-ui input for react-final-form', () => {
+    const jsx = (
+      <Form
+        initialValues={{
+          description: 'Nostrum expedita qui rerum non est asperiores ratione.'
+        }}
+        onSubmit={jest.fn()}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field name="description" component={AdaptedTextarea} />
+          </form>
+        )}
+      />
+    )
+    const tree = renderer.create(jsx).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})