Fix lint problems + Fix tests

.eslintignore

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

.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/__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

@@ -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
-
             checkboxObject.formContext.setValue(pointer, !checked)
           }}
-          checked={Boolean(checked)}
         />
       </>
     )

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,11 @@
 require('mutationobserver-shim')
+
+window.matchMedia =
+  window.matchMedia ||
+  function() {
+    return {
+      matches: false,
+      addListener: function() {},
+      removeListener: function() {},
+    }
+  }

react/tsconfig.json

@@ -1,9 +1,28 @@
 {
-  "extends": "@vtex/tsconfig",
   "compilerOptions": {
-    "noEmitOnError": false,
+    "alwaysStrict": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["es2017", "dom", "es2018.promise"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "target": "es2017",
     "typeRoots": ["node_modules/@types"],
-    "types": ["node", "jest", "graphql"]
+    "types": ["node", "jest"]
   },
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
+  "exclude": ["node_modules"],
+  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"],
+  "typeAcquisition": {
+    "enable": false
+  }
 }