Merge pull request #14 from vtex-apps/patch/update-lint

Fix lint problems + Fix tests

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+coverage/
+*.snap.ts
+*__mocks__*

.eslintrc

@@ -0,0 +1,9 @@
+{
+  "extends": "vtex",
+  "root": true,
+  "env": {
+    "node": true,
+    "es6": true,
+    "jest": true
+  }
+}

.prettierignore

@@ -0,0 +1 @@
+*.md

.prettierrc

@@ -1,6 +1 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "jsxBracketSameLine": true
-}
+"@vtex/prettier-config"

CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Eslint configuration.
+
+### Fixed
+- Test errors.
+
+### Security
+- Bump dependencies versions.
 
 ## [0.3.4] - 2020-04-15
 

package.json

@@ -1,24 +1,33 @@
 {
-  "version": "0.0.0",
-  "devDependencies": {
-    "@vtex/intl-equalizer": "^2.3.0",
-    "husky": "^2.4.1"
-  },
+  "name": "store-form",
+  "private": true,
+  "license": "UNLICENSED",
   "scripts": {
-    "lint": "cd ./react && yarn lint",
-    "test": "cd ./react && yarn test --passWithNoTests",
-    "lint:locales": "intl-equalizer",
-    "locales:fix": "intl-equalizer --fix",
-    "verify": "yarn lint && yarn lint:locales && yarn test"
+    "lint": "eslint --ext js,jsx,ts,tsx .",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint && yarn lint:locales && yarn locales:fix",
-      "pre-push": "yarn verify"
+      "pre-commit": "lint-staged"
     }
   },
-  "intl-equalizer": {
-    "referenceLocale": "en",
-    "localeDirectory": "messages"
+  "lint-staged": {
+    "*.{ts,js,tsx,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,graphql,gql}": [
+      "prettier --write"
+    ]
+  },
+  "devDependencies": {
+    "@vtex/prettier-config": "^0.1.3",
+    "eslint": "^6.8.0",
+    "eslint-config-vtex": "^12.2.1",
+    "eslint-config-vtex-react": "^6.2.1",
+    "husky": "^4.2.0",
+    "lint-staged": "^10.0.2",
+    "prettier": "^1.19.1",
+    "typescript": "^3.8.3"
   }
 }

react/Form.tsx

@@ -26,7 +26,7 @@ const Form: FC<FormProps> = props => {
   const { data, loading, error } = useQuery(documentPublicSchema, {
     variables: {
       dataEntity: entity,
-      schema: schema,
+      schema,
     },
   })
 

react/FormInputText.tsx

@@ -6,6 +6,7 @@ import { FormRawInputProps, InputTypes } from './typings/InputProps'
 export default function FormInput(props: FormRawInputProps) {
   const { inputType = InputTypes.input, ...rest } = props
 
+  // eslint-disable-next-line default-case
   switch (inputType) {
     case InputTypes.input:
       return <RawInput pointer={props.pointer} {...rest} />

react/__mocks__/react-apollo.tsx

@@ -19,8 +19,8 @@ export function useQuery<TData, TVariables = OperationVariables>(
 ): Partial<QueryResult<TData, TVariables>> {
   return {
     data: { documentPublicSchema: { schema: jsonSchema } },
-    query: query,
-    options: options,
+    query,
+    options,
   }
 }
 

react/__tests__/Form.test.tsx

@@ -6,34 +6,36 @@ import FormInputCheckbox from '../FormInputCheckbox'
 import FormText from '../FormInputText'
 import FormFieldGroup from '../FormFieldGroup'
 
-test('should render full schema', () => {
-  const { getAllByText } = render(<Form entity="asdf" schema="asdf" />)
+describe('Form', () => {
+  it('should render full schema', () => {
+    const { getAllByText } = render(<Form entity="asdf" schema="asdf" />)
 
-  expect(getAllByText('First Name')[0]).toBeDefined()
-  expect(getAllByText('Last Name')[0]).toBeDefined()
-  expect(getAllByText('Age')[0]).toBeDefined()
-  expect(getAllByText('Your height in meters')[0]).toBeDefined()
-  expect(getAllByText('Email address')[0]).toBeDefined()
-  expect(getAllByText('Street Type')[0]).toBeDefined()
-  expect(getAllByText('Address')[0]).toBeDefined()
-  expect(getAllByText('Street Number')[0]).toBeDefined()
-  expect(getAllByText('Do you agree with the terms?')[0]).toBeDefined()
-})
+    expect(getAllByText('First Name')[0]).toBeDefined()
+    expect(getAllByText('Last Name')[0]).toBeDefined()
+    expect(getAllByText('Age')[0]).toBeDefined()
+    expect(getAllByText('Your height in meters')[0]).toBeDefined()
+    expect(getAllByText('Email address')[0]).toBeDefined()
+    expect(getAllByText('Street Type')[0]).toBeDefined()
+    expect(getAllByText('Address')[0]).toBeDefined()
+    expect(getAllByText('Street Number')[0]).toBeDefined()
+    expect(getAllByText('Do you agree with the terms?')[0]).toBeDefined()
+  })
 
-test('should render partial schema', () => {
-  const { getAllByText } = render(
-    <Form entity="asdf" schema="asdf">
-      <FormText pointer="#/properties/firstName" />
-      <FormText pointer="#/properties/lastName" />
-      <FormFieldGroup pointer="#/properties/address" />
-      <FormInputCheckbox pointer="#/properties/agreement" />
-    </Form>
-  )
+  it('should render partial schema', () => {
+    const { getAllByText } = render(
+      <Form entity="asdf" schema="asdf">
+        <FormText pointer="#/properties/firstName" />
+        <FormText pointer="#/properties/lastName" />
+        <FormFieldGroup pointer="#/properties/address" />
+        <FormInputCheckbox pointer="#/properties/agreement" />
+      </Form>
+    )
 
-  expect(getAllByText('First Name')[0]).toBeDefined()
-  expect(getAllByText('Last Name')[0]).toBeDefined()
-  expect(getAllByText('Street Type')[0]).toBeDefined()
-  expect(getAllByText('Address')[0]).toBeDefined()
-  expect(getAllByText('Street Number')[0]).toBeDefined()
-  expect(getAllByText('Do you agree with the terms?')[0]).toBeDefined()
+    expect(getAllByText('First Name')[0]).toBeDefined()
+    expect(getAllByText('Last Name')[0]).toBeDefined()
+    expect(getAllByText('Street Type')[0]).toBeDefined()
+    expect(getAllByText('Address')[0]).toBeDefined()
+    expect(getAllByText('Street Number')[0]).toBeDefined()
+    expect(getAllByText('Do you agree with the terms?')[0]).toBeDefined()
+  })
 })

react/components/Checkbox.tsx

@@ -13,7 +13,7 @@ export const Checkbox: FC<{
   checkboxObject: UseCheckboxReturnType
   label?: string
 }> = props => {
-  const checkboxObject = props.checkboxObject
+  const { checkboxObject } = props
   const subSchema = checkboxObject.getObject()
   const label = props.label ?? subSchema.title ?? checkboxObject.name
 
@@ -26,14 +26,12 @@ export const Checkbox: FC<{
           {...checkboxObject.getItemInputProps(0)}
           label={label}
           required={checkboxObject.isRequired}
+          checked={Boolean(checked)}
           value="true"
-          {...(checked ? { checked: true } : { checked: false })}
           onChange={() => {
-            const pointer = checkboxObject.pointer
-
+            const { pointer } = checkboxObject
             checkboxObject.formContext.setValue(pointer, !checked)
           }}
-          checked={Boolean(checked)}
         />
       </>
     )
@@ -54,7 +52,7 @@ export const Checkbox: FC<{
             value={value}
             {...(checked ? { checked: true } : { checked: false })}
             onChange={() => {
-              const pointer = checkboxObject.pointer
+              const { pointer } = checkboxObject
 
               checkboxObject.formContext.setValue(pointer, !checked)
             }}

react/components/Dropdown.tsx

@@ -18,7 +18,7 @@ export const Dropdown: FC<{
   selectObject: UseSelectReturnType
   label?: string
 }> = props => {
-  const selectObject = props.selectObject
+  const { selectObject } = props
   const error = selectObject.getError()
 
   const subSchema = selectObject.getObject()
@@ -27,7 +27,7 @@ export const Dropdown: FC<{
   const items = selectObject.getItems()
   const options = useMemo(() => {
     return items.map(value => {
-      return { value: value, label: value }
+      return { value, label: value }
     })
   }, [items])
 
@@ -43,7 +43,7 @@ export const Dropdown: FC<{
             multi={false}
             label={label}
             options={options}
-            error={error ? true : false}
+            error={!!error}
             errorMessage={useFormattedError(error)}
           />
         }

react/components/FormHandler.tsx

@@ -97,7 +97,8 @@ export const FormHandler: FC<{
           }
           return true
         },
-      }}>
+      }}
+    >
       <SubmitContext.Provider value={submitState}>
         {props.children}
       </SubmitContext.Provider>

react/components/Input.tsx

@@ -32,7 +32,7 @@ export const Input: FC<{
   inputObject: UseRawInputReturnType
   label?: string
 }> = props => {
-  const inputObject = props.inputObject
+  const { inputObject } = props
   const error = inputObject.getError()
 
   const subSchema = inputObject.getObject()
@@ -42,7 +42,7 @@ export const Input: FC<{
     <StyleguideInput
       {...inputObject.getInputProps()}
       label={label}
-      error={error ? true : false}
+      error={!!error}
       errorMessage={useFormattedError(error)}
     />
   )

react/components/Object.tsx

@@ -47,7 +47,7 @@ const SpecializedObject: FC<{ baseObject: InputReturnTypes }> = props => {
 export const ObjectMapper: FC<FormFieldGroupProps> = props => {
   const { pointer, uiSchema } = props
   const methods = useObject({
-    pointer: pointer,
+    pointer,
     UISchema: uiSchema,
   })
 

react/components/RadioGroup.tsx

@@ -37,9 +37,9 @@ export const RadioGroup: FC<{
           hideBorder
           label={label}
           options={radioObject.getItems().map(value => {
-            return { value: value, label: value }
+            return { value, label: value }
           })}
-          error={error ? true : false}
+          error={!!error}
           errorMessage={useFormattedError(error)}
         />
       }

react/components/TextArea.tsx

@@ -12,14 +12,14 @@ export const TextAreaInput: FC<{ pointer: string }> = props => {
 export const TextArea: FC<{
   textAreaObject: UseTextAreaReturnType
 }> = props => {
-  const textAreaObject = props.textAreaObject
+  const { textAreaObject } = props
   const error = textAreaObject.getError()
 
   return (
     <StyleguideTextarea
       {...textAreaObject.getTextAreaProps()}
       label={textAreaObject.getObject().title}
-      error={error ? true : false}
+      error={!!error}
       errorMessage={useFormattedError(error)}
     />
   )

react/logic/masterDataError.ts

@@ -13,7 +13,7 @@ interface MasterDataError {
   LineNumber: number
   LinePosition: number
   Path: string
-  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Value: any | string[]
   SchemaId: string
   SchemaBaseUri: string | null
@@ -71,6 +71,7 @@ const evaluateMasterDataErrors = (
   acc: MasterDataErrorRecord,
   serverError: MasterDataError
 ) => {
+  // eslint-disable-next-line default-case
   switch (serverError.ErrorType) {
     case 'required':
       if (Array.isArray(serverError.Value)) {

react/package.json

@@ -1,4 +1,5 @@
 {
+  "version": "0.3.4",
   "scripts": {
     "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
     "test": "vtex-test-tools test",
@@ -10,31 +11,25 @@
     "react-apollo": "^3.1.3",
     "react-dom": "^16.8.6",
     "react-hook-form-jsonschema": "0.2.0-beta.11",
-    "react-intl": "3.9.1"
+    "react-intl": "^4.5.3"
   },
   "devDependencies": {
     "@apollo/react-testing": "^3.1.3",
     "@types/graphql": "14.0.7",
     "@types/jest": "^25.1.1",
     "@types/node": "^13.5.3",
     "@types/react": "^16.9.19",
-    "@types/react-intl": "^3.0.0",
-    "@vtex/styleguide": "^9.108.2",
-    "@vtex/test-tools": "^3.0.1",
+    "@vtex/styleguide": "^9.116.0",
+    "@vtex/test-tools": "^3.1.0",
     "@vtex/tsconfig": "^0.2.0",
     "apollo-cache-inmemory": "^1.6.5",
-    "eslint": "5.x",
-    "eslint-config-vtex-react": "^5.1.0",
     "graphql": "^14.6.0",
-    "mutationobserver-shim": "^0.3.3",
-    "prettier": "^1.18.2",
-    "prop-types": "^15.7.2",
-    "typescript": "3.7.3"
+    "mutationobserver-shim": "^0.3.5",
+    "typescript": "3.8.3"
   },
   "jest": {
     "setupFilesAfterEnv": [
       "./setupTest.js"
     ]
-  },
-  "version": "0.3.4"
+  }
 }

react/setupTest.js

@@ -1 +1,12 @@
+/* eslint-disable no-undef */
 require('mutationobserver-shim')
+
+window.matchMedia =
+  window.matchMedia ||
+  function matchMedia() {
+    return {
+      matches: false,
+      addListener() {},
+      removeListener() {},
+    }
+  }