feat(common): CHECKOUT-4378 Add sort-props and one-expression-per-lin…

…e rules
bigcommerce · Sep 20, 2019 · 990d043 · 990d043
1 parent 807a7f0
commit 990d043
Show file tree

Hide file tree

Showing 161 changed files with 618 additions and 593 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -35,7 +35,7 @@
         "react/destructuring-assignment": "error",
         "react/display-name": "off",
         "react/jsx-closing-bracket-location": [
-            "error", 
+            "error",
             "line-aligned"
         ],
         "react/jsx-curly-newline": [
@@ -62,8 +62,15 @@
         ],
         "react/jsx-key": "error",
         "react/jsx-no-bind": "error",
+        "react/jsx-one-expression-per-line": [
+            "error",
+            {
+                "allow": "single-child"
+            }
+        ],
         "react/jsx-pascal-case": "error",
         "react/jsx-props-no-multi-spaces": "error",
+        "react/jsx-sort-props": "error",
         "react/jsx-tag-spacing": [
             "error",
             {

diff --git a/src/app/address/AddressForm.tsx b/src/app/address/AddressForm.tsx
@@ -67,31 +67,31 @@ class AddressForm extends Component<AddressFormProps & WithLanguageProps> {
                     if (addressFieldName === 'address1' && googleMapsApiKey && countriesWithAutocomplete) {
                         return (
                             <GoogleAutocompleteFormField
-                                key={ field.id }
-                                parentFieldName={ fieldName }
+                                apiKey={ googleMapsApiKey }
                                 countryCode={ countryCode }
-                                supportedCountries={ countriesWithAutocomplete }
                                 field={ field }
+                                key={ field.id }
+                                nextElement={ this.nextElement || undefined }
+                                onChange={ this.handleAutocompleteChange }
                                 onSelect={ this.handleAutocompleteSelect }
                                 onToggleOpen={ onAutocompleteToggle }
-                                onChange={ this.handleAutocompleteChange }
-                                apiKey={ googleMapsApiKey }
-                                nextElement={ this.nextElement || undefined }
+                                parentFieldName={ fieldName }
+                                supportedCountries={ countriesWithAutocomplete }
                             />
                         );
                     }
 
                     return (
                         <DynamicFormField
-                            onChange={ this.handleDynamicFormFieldChange(addressFieldName) }
+                            field={ field }
                             // stateOrProvince can sometimes be a dropdown or input, so relying on id is not sufficient
+                            fieldType={ this.getDynamicFormFieldType(field) }
                             key={ `${field.id}-${field.name}` }
+                            onChange={ this.handleDynamicFormFieldChange(addressFieldName) }
                             parentFieldName={ field.custom ?
                                 (fieldName ? `${fieldName}.customFields` : 'customFields') :
                                 fieldName }
-                            field={ field }
                             placeholder={ translatedPlaceholderId && language.translate(translatedPlaceholderId) }
-                            fieldType={ this.getDynamicFormFieldType(field) }
                         />
                     );
                 }) }

diff --git a/src/app/address/AddressSelect.spec.tsx b/src/app/address/AddressSelect.spec.tsx
@@ -48,9 +48,9 @@ describe('AddressSelect Component', () => {
                 <LocaleContext.Provider value={ localeContext }>
                     <AddressSelect
                         addresses={ getCustomer().addresses }
-                        selectedAddress={ getAddress() }
                         onSelectAddress={ noop }
                         onUseNewAddress={ noop }
+                        selectedAddress={ getAddress() }
                     />
                 </LocaleContext.Provider>
             </CheckoutProvider>
@@ -65,9 +65,9 @@ describe('AddressSelect Component', () => {
                 <LocaleContext.Provider value={ localeContext }>
                     <AddressSelect
                         addresses={ getCustomer().addresses }
-                        selectedAddress={ getAddress() }
                         onSelectAddress={ noop }
                         onUseNewAddress={ noop }
+                        selectedAddress={ getAddress() }
                     />
                 </LocaleContext.Provider>
             </CheckoutProvider>
@@ -115,8 +115,8 @@ describe('AddressSelect Component', () => {
                     <AddressSelect
                         addresses={ getCustomer().addresses }
                         onSelectAddress={ onSelectAddress }
-                        selectedAddress={ getAddress() }
                         onUseNewAddress={ noop }
+                        selectedAddress={ getAddress() }
                     />
                 </LocaleContext.Provider>
             </CheckoutProvider>

diff --git a/src/app/address/CheckboxGroupFormField.tsx b/src/app/address/CheckboxGroupFormField.tsx
@@ -84,18 +84,18 @@ const MultiCheckboxFormField: FunctionComponent<MultiCheckboxFormFieldProps> = (
         { label }
 
         <MultiCheckboxControl
-            testId={ id }
             onSelectedAll={ handleSelectAll }
             onSelectedNone={ handleSelectNone }
+            testId={ id }
         />
 
         <DynamicInput
+            fieldType={ DynamicFormFieldType.checkbox }
+            id={ id }
             name={ name }
-            value={ getIn(values, name) || [] }
             onChange={ handleInputChange }
-            fieldType={ DynamicFormFieldType.checkbox }
             options={ options }
-            id={ id }
+            value={ getIn(values, name) || [] }
         />
 
         <FormFieldError

diff --git a/src/app/address/DynamicFormField.spec.tsx b/src/app/address/DynamicFormField.spec.tsx
@@ -31,8 +31,8 @@ describe('DynamicFormField Component', () => {
         const component = mount(
             <Formik initialValues={ {} } onSubmit={ jest.fn() }>
                 <DynamicFormField
-                    onChange={ onChange }
                     field={ formFields.find(({ name }) => name === 'address1') as FormFieldType }
+                    onChange={ onChange }
                 />
             </Formik>
         );
@@ -48,8 +48,8 @@ describe('DynamicFormField Component', () => {
         const component = mount(
             <Formik initialValues={ {} } onSubmit={ jest.fn() }>
                 <DynamicFormField
-                    onChange={ onChange }
                     field={ formFields.find(({ name }) => name === 'address1') as FormFieldType }
+                    onChange={ onChange }
                 />
             </Formik>
         );

diff --git a/src/app/address/DynamicFormField.tsx b/src/app/address/DynamicFormField.tsx
@@ -82,7 +82,8 @@ const DynamicFormField: FunctionComponent<DynamicFormFieldProps>  = ({
                 fieldLabel :
                 translatedLabelString && <TranslatedString id={ translatedLabelString } /> }
             { !required &&
-                <> { '' }
+                <>
+                    { '' }
                     <small className="optimizedCheckout-contentSecondary">
                         <TranslatedString id="common.optional_text" />
                     </small>
@@ -99,15 +100,15 @@ const DynamicFormField: FunctionComponent<DynamicFormFieldProps>  = ({
     const renderInput = useCallback(({ field }: FieldProps<string>) => (
         <DynamicInput
             { ...field }
-            maxLength={ maxLength || undefined }
+            autoComplete={ AUTOCOMPLETE[addressFieldName] }
+            fieldType={ fieldType }
+            id={ fieldInputId }
             max={ max }
+            maxLength={ maxLength || undefined }
             min={ min }
+            options={ options && options.items }
             placeholder={ placeholder || (options && options.helperLabel) }
-            fieldType={ fieldType }
             rows={ options && (options as any).rows }
-            options={ options && options.items }
-            autoComplete={ AUTOCOMPLETE[addressFieldName] }
-            id={ fieldInputId }
         />
     ), [
         addressFieldName,
@@ -124,17 +125,17 @@ const DynamicFormField: FunctionComponent<DynamicFormFieldProps>  = ({
         <div className={ `dynamic-form-field dynamic-form-field--${getFormFieldLegacyName(addressFieldName)}` }>
             { fieldType === DynamicFormFieldType.checkbox ?
                 <CheckboxGroupFormField
-                    onChange={ onChange }
-                    name={ fieldName }
                     id={ fieldInputId }
                     label={ label }
+                    name={ fieldName }
+                    onChange={ onChange }
                     options={ (options && options.items) || [] }
                 /> :
                 <FormField
+                    input={ renderInput }
+                    label={ label }
                     name={ fieldName }
                     onChange={ onChange }
-                    label={ label }
-                    input={ renderInput }
                 /> }
         </div>
     );

diff --git a/src/app/address/DynamicInput.spec.tsx b/src/app/address/DynamicInput.spec.tsx
@@ -16,8 +16,8 @@ describe('DynamicInput', () => {
     it('renders textarea for multiline type', () => {
         expect(shallow(
             <DynamicInput
-                id="field_33"
                 fieldType={ DynamicFormFieldType.multiline }
+                id="field_33"
                 rows={ 4 }
             />)
             .find(TextArea)
@@ -28,10 +28,10 @@ describe('DynamicInput', () => {
     it('renders date picker for date type', () => {
         const datePicker = shallow(
             <DynamicInput
-                id="field_33"
                 fieldType={ DynamicFormFieldType.date }
-                min="2019-1-1"
+                id="field_33"
                 max="2019-2-1"
+                min="2019-1-1"
             />
         );
 
@@ -47,11 +47,11 @@ describe('DynamicInput', () => {
             <DynamicInput
                 fieldType={ DynamicFormFieldType.checkbox }
                 id="id"
-                value={ ['y'] }
                 options={ [
                     { value: 'x', label: 'X' },
                     { value: 'y', label: 'Y' },
                 ] }
+                value={ ['y'] }
             />);
 
         expect(component.find(CheckboxInput).at(0).props())
@@ -72,12 +72,12 @@ describe('DynamicInput', () => {
             <DynamicInput
                 fieldType={ DynamicFormFieldType.radio }
                 id="id"
-                value="y"
                 onChange={ jest.fn() }
                 options={ [
                     { value: 'x', label: 'X' },
                     { value: 'y', label: 'Y' },
                 ] }
+                value="y"
             />);
 
         expect(component.find(RadioInput).at(0).props())
@@ -96,8 +96,8 @@ describe('DynamicInput', () => {
     it('renders number type input for number type', () => {
         expect(shallow(
             <DynamicInput
-                id="field_33"
                 fieldType={ DynamicFormFieldType.number }
+                id="field_33"
             />)
             .find(TextInput)
             .prop('type'))
@@ -107,8 +107,8 @@ describe('DynamicInput', () => {
     it('renders password type input for password type', () => {
         expect(shallow(
             <DynamicInput
-                id="field_33"
                 fieldType={ DynamicFormFieldType.password }
+                id="field_33"
             />)
             .find(TextInput)
             .prop('type'))
@@ -118,8 +118,8 @@ describe('DynamicInput', () => {
     it('renders tel type input for phone type', () => {
         expect(shallow(
             <DynamicInput
-                id="field_33"
                 fieldType={ DynamicFormFieldType.telephone }
+                id="field_33"
             />)
             .find(TextInput)
             .prop('type'))
@@ -129,15 +129,15 @@ describe('DynamicInput', () => {
     it('renders select input with passed props', () => {
         expect(shallow(
             <DynamicInput
-                id="field_33"
+                defaultValue="foo"
                 fieldType={ DynamicFormFieldType.dropdown }
+                id="field_33"
+                name="select"
                 options={ [
                     { label: 'Foo', value: 'foo'},
                     { label: 'Foo1', value: 'foo1'},
                 ] }
-                defaultValue="foo"
                 placeholder="Select an option"
-                name="select"
             />).html())
             .toMatchSnapshot();
     });