refactor(forms): namespace final-form and react-final-form re-exports

BREAKING CHANGE: final-form and react-final-form exports are now re-exported under the named exports FinalForm and ReactFinalForm respectively.
dhis2 · Apr 23, 2020 · c59e0bb · c59e0bb
1 parent c9ef5d4
commit c59e0bb
Show file tree

Hide file tree

Showing 29 changed files with 253 additions and 248 deletions.
diff --git a/cypress/integration/forms/FileInput/accepts_file/index.js b/cypress/integration/forms/FileInput/accepts_file/index.js
@@ -2,7 +2,7 @@ import '../common/index.js'
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a multi-file IputField is rendered', () => {
-    cy.visitStory('Testing:Forms', 'Standard form')
+    cy.visitStory('Testing:FileInput', 'Standard form')
 })
 
 When('a file is provided', () => {

diff --git a/cypress/integration/forms/FileInput/common/index.js b/cypress/integration/forms/FileInput/common/index.js
@@ -1,7 +1,7 @@
 import { Given } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a single-file FileInput is rendered', () => {
-    cy.visitStory('Testing:Forms', 'Standard form')
+    cy.visitStory('Testing:FileInput', 'Standard form')
 })
 
 Given('the InputField does not contain any files', () => {

diff --git a/packages/forms/src/CheckboxControl/CheckboxControl.stories.e2e.js b/packages/forms/src/CheckboxControl/CheckboxControl.stories.e2e.js
@@ -2,12 +2,14 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { FieldControl, CheckboxControl, hasValue } from '../index.js'
+import { ReactFinalForm, CheckboxControl, hasValue } from '../index.js'
+
+const { Field } = ReactFinalForm
 
 storiesOf('Testing:Checkbox', module)
     .addDecorator(formDecorator)
     .add('Unchecked', () => (
-        <FieldControl
+        <Field
             component={CheckboxControl}
             className="checkbox"
             name="checkbox"
@@ -17,7 +19,7 @@ storiesOf('Testing:Checkbox', module)
         />
     ))
     .add('Checked ', () => (
-        <FieldControl
+        <Field
             component={CheckboxControl}
             className="checkbox"
             name="checkbox"
@@ -26,7 +28,7 @@ storiesOf('Testing:Checkbox', module)
         />
     ))
     .add('Unchecked with value', () => (
-        <FieldControl
+        <Field
             component={CheckboxControl}
             className="checkbox"
             name="checkbox"
@@ -35,7 +37,7 @@ storiesOf('Testing:Checkbox', module)
         />
     ))
     .add('Checked with value', () => (
-        <FieldControl
+        <Field
             component={CheckboxControl}
             className="checkbox"
             name="checkbox"

diff --git a/packages/forms/src/CheckboxControl/CheckboxControl.stories.js b/packages/forms/src/CheckboxControl/CheckboxControl.stories.js
@@ -2,19 +2,17 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { FieldControl, CheckboxControl, hasValue } from '../index.js'
+import { ReactFinalForm, CheckboxControl, hasValue } from '../index.js'
+
+const { Field } = ReactFinalForm
 
 storiesOf('Form/CheckboxControl', module)
     .addDecorator(formDecorator)
     .add('Default', () => (
-        <FieldControl
-            component={CheckboxControl}
-            name="agree"
-            label="Do you agree?"
-        />
+        <Field component={CheckboxControl} name="agree" label="Do you agree?" />
     ))
     .add('Required', () => (
-        <FieldControl
+        <Field
             name="agree"
             component={CheckboxControl}
             required
@@ -23,15 +21,15 @@ storiesOf('Form/CheckboxControl', module)
         />
     ))
     .add('Disabled', () => (
-        <FieldControl
+        <Field
             name="agree"
             component={CheckboxControl}
             disabled
             label="Do you agree?"
         />
     ))
     .add('Help text', () => (
-        <FieldControl
+        <Field
             name="agree"
             component={CheckboxControl}
             label="Do you agree?"
@@ -40,21 +38,21 @@ storiesOf('Form/CheckboxControl', module)
     ))
     .add('Statuses', () => (
         <>
-            <FieldControl
+            <Field
                 name="valid"
                 component={CheckboxControl}
                 label="Valid"
                 valid
                 validationText="Validation text"
             />
-            <FieldControl
+            <Field
                 name="warning"
                 component={CheckboxControl}
                 label="Warning"
                 warning
                 validationText="Validation text"
             />
-            <FieldControl
+            <Field
                 name="error"
                 component={CheckboxControl}
                 label="Error"
@@ -65,13 +63,13 @@ storiesOf('Form/CheckboxControl', module)
     ))
     .add('Value when checked', () => (
         <>
-            <FieldControl
+            <Field
                 name="bool"
                 component={CheckboxControl}
                 label="I produce boolean form values"
                 helpText="Click submit and check the console"
             />
-            <FieldControl
+            <Field
                 name="string"
                 component={CheckboxControl}
                 label="I produce string form values"

diff --git a/packages/forms/src/CheckboxGroupControl/CheckboxGroupControl.stories.e2e.js b/packages/forms/src/CheckboxGroupControl/CheckboxGroupControl.stories.e2e.js
@@ -2,7 +2,9 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { FieldControl, CheckboxGroupControl, hasValue } from '../index.js'
+import { ReactFinalForm, CheckboxGroupControl, hasValue } from '../index.js'
+
+const { Field } = ReactFinalForm
 
 const defaultOptions = [
     { label: 'Foo', value: 'foo' },
@@ -13,15 +15,15 @@ const defaultOptions = [
 storiesOf('Testing:CheckboxGroup', module)
     .addDecorator(formDecorator)
     .add('Default', ({ cypressProps }) => (
-        <FieldControl
+        <Field
             name="choice"
             label="Choose something"
             component={CheckboxGroupControl}
             options={cypressProps.options || defaultOptions}
         />
     ))
     .add('Required', ({ cypressProps }) => (
-        <FieldControl
+        <Field
             name="choice"
             label="Choose something"
             component={CheckboxGroupControl}

diff --git a/packages/forms/src/CheckboxGroupControl/CheckboxGroupControl.stories.js b/packages/forms/src/CheckboxGroupControl/CheckboxGroupControl.stories.js
@@ -3,12 +3,14 @@ import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
 import {
-    FieldControl,
+    ReactFinalForm,
     CheckboxGroupControl,
     arrayWithIdObjects,
     hasValue,
 } from '../index.js'
 
+const { Field } = ReactFinalForm
+
 const options = [
     { label: 'Foo', value: 'foo' },
     { label: 'Bar', value: 'bar' },
@@ -20,7 +22,7 @@ const multipleValue = ['bar', 'baz']
 storiesOf('Form/CheckboxGroupControl', module)
     .addDecorator(formDecorator)
     .add('Default - Checkbox', () => (
-        <FieldControl
+        <Field
             name="choice"
             label="Choose something"
             component={CheckboxGroupControl}
@@ -29,7 +31,7 @@ storiesOf('Form/CheckboxGroupControl', module)
         />
     ))
     .add('Required - Checkbox', () => (
-        <FieldControl
+        <Field
             name="choice"
             label="Choose something"
             component={CheckboxGroupControl}
@@ -42,13 +44,13 @@ storiesOf('Form/CheckboxGroupControl', module)
 
     .add('Different value transformers', () => (
         <>
-            <FieldControl
+            <Field
                 name="array"
                 label="My values are going to the form as an array of strings (default)"
                 component={CheckboxGroupControl}
                 options={options}
             />
-            <FieldControl
+            <Field
                 name="arrayWithIdObjects"
                 label="My values are going to the form as an array objects with an ID"
                 component={CheckboxGroupControl}

diff --git a/packages/forms/src/FieldControl/FieldControl.js b/packages/forms/src/FieldControl/FieldControl.js
diff --git a/packages/forms/src/FileInputControl/FileInputControl.js b/packages/forms/src/FileInputControl/FileInputControl.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import propTypes from '@dhis2/prop-types'
 import i18n from '@dhis2/d2-i18n'
-import { FileInputField } from '@dhis2/ui-widgets'
-import { FileListItem } from '@dhis2/ui-widgets'
+import { FileInputField, FileListItem } from '@dhis2/ui-widgets'
 
 import { hasError, isValid, getValidationText } from '../shared/helpers.js'
 import { inputPropType, metaPropType } from '../shared/propTypes.js'