refactor(forms): add suffix 'Control'

BREAKING CHANGE: Postfix all the @dhis2/ui-forms components with 'Control' to avoid conflicts with the base components in @dhis2/ui-core and @dhis2/ui-widgets, since all components are now exported in @dhis2/ui.
dhis2 · Mar 12, 2020 · 06896ea · 06896ea
1 parent c15bfb8
commit 06896ea
Show file tree

Hide file tree

Showing 44 changed files with 294 additions and 274 deletions.
diff --git a/packages/forms/src/components/Checkbox.js → ...ms/src/CheckboxControl/CheckboxControl.js b/packages/forms/src/components/Checkbox.js → ...ms/src/CheckboxControl/CheckboxControl.js
@@ -9,10 +9,11 @@ import {
     hasError,
     isValid,
     getValidationText,
-} from './shared/helpers.js'
-import { metaPropType, inputPropType } from './shared/propTypes.js'
+} from '../shared/helpers.js'
 
-const Checkbox = ({
+import { metaPropType, inputPropType } from '../shared/propTypes.js'
+
+export const CheckboxControl = ({
     checkedValue,
     error,
     input,
@@ -38,7 +39,7 @@ const Checkbox = ({
     />
 )
 
-Checkbox.propTypes = {
+CheckboxControl.propTypes = {
     input: inputPropType.isRequired,
     meta: metaPropType.isRequired,
 
@@ -51,5 +52,3 @@ Checkbox.propTypes = {
     onBlur: propTypes.func,
     onFocus: propTypes.func,
 }
-
-export { Checkbox }
diff --git a/...ges/forms/src/__e2e__/Checkbox.stories.js → ...boxControl/CheckboxControl.stories.e2e.js b/...ges/forms/src/__e2e__/Checkbox.stories.js → ...boxControl/CheckboxControl.stories.e2e.js
@@ -2,13 +2,13 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { Field, Checkbox, hasValue } from '../index.js'
+import { FieldControl, CheckboxControl, hasValue } from '../index.js'
 
 storiesOf('Testing:Checkbox', module)
     .addDecorator(formDecorator)
     .add('Unchecked', () => (
-        <Field
-            component={Checkbox}
+        <FieldControl
+            component={CheckboxControl}
             className="checkbox"
             name="checkbox"
             label="Label text"
@@ -17,26 +17,26 @@ storiesOf('Testing:Checkbox', module)
         />
     ))
     .add('Checked ', () => (
-        <Field
-            component={Checkbox}
+        <FieldControl
+            component={CheckboxControl}
             className="checkbox"
             name="checkbox"
             label="Label text"
             initialValue={true}
         />
     ))
     .add('Unchecked with value', () => (
-        <Field
-            component={Checkbox}
+        <FieldControl
+            component={CheckboxControl}
             className="checkbox"
             name="checkbox"
             label="Label text"
             checkedValue="yes"
         />
     ))
     .add('Checked with value', () => (
-        <Field
-            component={Checkbox}
+        <FieldControl
+            component={CheckboxControl}
             className="checkbox"
             name="checkbox"
             label="Label text"

diff --git a/...ages/forms/src/__demo__/Switch.stories.js → ...heckboxControl/CheckboxControl.stories.js b/...ages/forms/src/__demo__/Switch.stories.js → ...heckboxControl/CheckboxControl.stories.js
@@ -2,52 +2,61 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { Field, Switch, hasValue } from '../index.js'
+import { FieldControl, CheckboxControl, hasValue } from '../index.js'
 
-storiesOf('Form/Switch', module)
+storiesOf('Form/CheckboxControl', module)
     .addDecorator(formDecorator)
     .add('Default', () => (
-        <Field component={Switch} name="agree" label="Do you agree?" />
+        <FieldControl
+            component={CheckboxControl}
+            name="agree"
+            label="Do you agree?"
+        />
     ))
     .add('Required', () => (
-        <Field
+        <FieldControl
             name="agree"
-            component={Switch}
+            component={CheckboxControl}
             required
             validate={hasValue}
             label="Do you agree?"
         />
     ))
     .add('Disabled', () => (
-        <Field name="agree" component={Switch} disabled label="Do you agree?" />
+        <FieldControl
+            name="agree"
+            component={CheckboxControl}
+            disabled
+            label="Do you agree?"
+        />
     ))
     .add('Help text', () => (
-        <Field
+        <FieldControl
             name="agree"
-            component={Switch}
+            component={CheckboxControl}
             label="Do you agree?"
             helpText="Click to agree"
         />
     ))
     .add('Statuses', () => (
         <>
-            <Field
+            <FieldControl
                 name="valid"
-                component={Switch}
+                component={CheckboxControl}
                 label="Valid"
                 valid
                 validationText="Validation text"
             />
-            <Field
+            <FieldControl
                 name="warning"
-                component={Switch}
+                component={CheckboxControl}
                 label="Warning"
                 warning
                 validationText="Validation text"
             />
-            <Field
+            <FieldControl
                 name="error"
-                component={Switch}
+                component={CheckboxControl}
                 label="Error"
                 error
                 validationText="Validation text"
@@ -56,15 +65,15 @@ storiesOf('Form/Switch', module)
     ))
     .add('Value when checked', () => (
         <>
-            <Field
+            <FieldControl
                 name="bool"
-                component={Switch}
+                component={CheckboxControl}
                 label="I produce boolean form values"
                 helpText="Click submit and check the console"
             />
-            <Field
+            <FieldControl
                 name="string"
-                component={Switch}
+                component={CheckboxControl}
                 label="I produce string form values"
                 checkedValue="value_when_checked"
                 helpText="Click submit and check the console"

diff --git a/...ges/forms/src/components/CheckboxGroup.js → ...ckboxGroupControl/CheckboxGroupControl.js b/...ges/forms/src/components/CheckboxGroup.js → ...ckboxGroupControl/CheckboxGroupControl.js
@@ -9,12 +9,12 @@ import {
     getValidationText,
     createFocusHandler,
     createBlurHandler,
-} from './shared/helpers.js'
+} from '../shared/helpers.js'
 import {
     toggleGroupOptionsProp,
     inputPropType,
     metaPropType,
-} from './shared/propTypes.js'
+} from '../shared/propTypes.js'
 
 const createChangeHandler = ({ value: currentValues, onChange }) => payload => {
     const activeIndex = currentValues.indexOf(payload.value)
@@ -29,7 +29,7 @@ const createChangeHandler = ({ value: currentValues, onChange }) => payload => {
     onChange(value)
 }
 
-const CheckboxGroup = ({
+export const CheckboxGroupControl = ({
     options,
     input,
     meta,
@@ -58,7 +58,7 @@ const CheckboxGroup = ({
     </ToggleGroupField>
 )
 
-CheckboxGroup.propTypes = {
+CheckboxGroupControl.propTypes = {
     input: inputPropType.isRequired,
     meta: metaPropType.isRequired,
     options: toggleGroupOptionsProp.isRequired,
@@ -72,5 +72,3 @@ CheckboxGroup.propTypes = {
     onBlur: propTypes.func,
     onFocus: propTypes.func,
 }
-
-export { CheckboxGroup }
diff --git a/...orms/src/__e2e__/CheckboxGroup.stories.js → ...ntrol/CheckboxGroupControl.stories.e2e.js b/...orms/src/__e2e__/CheckboxGroup.stories.js → ...ntrol/CheckboxGroupControl.stories.e2e.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { Field, CheckboxGroup, hasValue } from '../index.js'
+import { FieldControl, CheckboxGroupControl, hasValue } from '../index.js'
 
 const defaultOptions = [
     { label: 'Foo', value: 'foo' },
@@ -13,18 +13,18 @@ const defaultOptions = [
 storiesOf('Testing:CheckboxGroup', module)
     .addDecorator(formDecorator)
     .add('Default', ({ cypressProps }) => (
-        <Field
+        <FieldControl
             name="choice"
             label="Choose something"
-            component={CheckboxGroup}
+            component={CheckboxGroupControl}
             options={cypressProps.options || defaultOptions}
         />
     ))
     .add('Required', ({ cypressProps }) => (
-        <Field
+        <FieldControl
             name="choice"
             label="Choose something"
-            component={CheckboxGroup}
+            component={CheckboxGroupControl}
             validate={hasValue}
             required
             options={cypressProps.options || defaultOptions}

diff --git a/...rms/src/__demo__/CheckboxGroup.stories.js → ...upControl/CheckboxGroupControl.stories.js b/...rms/src/__demo__/CheckboxGroup.stories.js → ...upControl/CheckboxGroupControl.stories.js
@@ -2,7 +2,12 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { formDecorator } from '../formDecorator.js'
 
-import { Field, CheckboxGroup, arrayWithIdObjects, hasValue } from '../index.js'
+import {
+    FieldControl,
+    CheckboxGroupControl,
+    arrayWithIdObjects,
+    hasValue,
+} from '../index.js'
 
 const options = [
     { label: 'Foo', value: 'foo' },
@@ -12,22 +17,22 @@ const options = [
 
 const multipleValue = ['bar', 'baz']
 
-storiesOf('Form/CheckboxGroup', module)
+storiesOf('Form/CheckboxGroupControl', module)
     .addDecorator(formDecorator)
     .add('Default - Checkbox', () => (
-        <Field
+        <FieldControl
             name="choice"
             label="Choose something"
-            component={CheckboxGroup}
+            component={CheckboxGroupControl}
             options={options}
             initialValue={multipleValue}
         />
     ))
     .add('Required - Checkbox', () => (
-        <Field
+        <FieldControl
             name="choice"
             label="Choose something"
-            component={CheckboxGroup}
+            component={CheckboxGroupControl}
             validate={hasValue}
             required
             options={options}
@@ -37,16 +42,16 @@ storiesOf('Form/CheckboxGroup', module)
 
     .add('Different value transformers', () => (
         <>
-            <Field
+            <FieldControl
                 name="array"
                 label="My values are going to the form as an array of strings (default)"
-                component={CheckboxGroup}
+                component={CheckboxGroupControl}
                 options={options}
             />
-            <Field
+            <FieldControl
                 name="arrayWithIdObjects"
                 label="My values are going to the form as an array objects with an ID"
-                component={CheckboxGroup}
+                component={CheckboxGroupControl}
                 options={options}
                 format={arrayWithIdObjects.format}
                 parse={arrayWithIdObjects.parse}

diff --git a/packages/forms/src/components/Field.js → ...es/forms/src/FieldControl/FieldControl.js b/packages/forms/src/components/Field.js → ...es/forms/src/FieldControl/FieldControl.js
@@ -1,7 +1,7 @@
 import propTypes from '@dhis2/prop-types'
-import { Field } from 'react-final-form'
+import { Field as FieldControl } from 'react-final-form'
 
-Field.propTypes = {
+FieldControl.propTypes = {
     name: propTypes.string.isRequired,
 
     afterSubmit: propTypes.func,
@@ -52,4 +52,4 @@ Field.propTypes = {
  *    directly to that built in component
  */
 
-export { Field }
+export { FieldControl }
diff --git a/packages/forms/src/components/FileInput.js → .../src/FileInputControl/FileInputControl.js b/packages/forms/src/components/FileInput.js → .../src/FileInputControl/FileInputControl.js
@@ -4,8 +4,8 @@ import i18n from '@dhis2/d2-i18n'
 import { FileInputField } from '@dhis2/ui-widgets'
 import { FileListItem } from '@dhis2/ui-core'
 
-import { hasError, isValid, getValidationText } from './shared/helpers.js'
-import { inputPropType, metaPropType } from './shared/propTypes.js'
+import { hasError, isValid, getValidationText } from '../shared/helpers.js'
+import { inputPropType, metaPropType } from '../shared/propTypes.js'
 
 const btnLabel = i18n.t('Upload file')
 const btnLabelMulti = i18n.t('Upload files')
@@ -40,7 +40,7 @@ const createRemoveHandler = (input, fileToDelete) => () => {
     input.onChange(value)
 }
 
-const FileInput = ({
+export const FileInputControl = ({
     buttonLabel,
     disabled,
     error,
@@ -78,11 +78,11 @@ const FileInput = ({
     )
 }
 
-FileInput.defaultProps = {
+FileInputControl.defaultProps = {
     placeholder: i18n.t('No file(s) selected yet'),
 }
 
-FileInput.propTypes = {
+FileInputControl.propTypes = {
     input: inputPropType.isRequired,
     meta: metaPropType.isRequired,
 
@@ -98,5 +98,3 @@ FileInput.propTypes = {
         propTypes.oneOf(['']),
     ]),
 }
-
-export { FileInput }