Please the linter gods

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+legacy

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "vtex",
+  "env": {
+    "node": true
+  }
+}

.prettierrc

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

CHANGELOG.md

@@ -6,6 +6,8 @@ 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]
+### Fixed
+- Sort numbers by value instead of alphabetically.
 
 ## [2.25.0] - 2020-01-06
 ### Changed
@@ -83,7 +85,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added CSS Override class to header row background.
 
 ### Added
-- Allow `drawer` block on `header-row`. 
+- Allow `drawer` block on `header-row`.
 
 ## [2.16.0] - 2019-04-24
 ### Changed

docs/README.md

@@ -184,7 +184,7 @@ You can check if others are passing through similar issues [here](https://github
 
 ## Contributing
 
-Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project. 
+Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.
 
 ## Tests
 

package.json

@@ -1,12 +1,15 @@
 {
   "private": true,
-  "devDependencies": {
-    "eslint": "^5.16.0",
-    "eslint-config-vtex-react": "^4.0.0",
-    "prettier": "^1.16.4",
-    "typescript": "^3.4.1"
+  "scripts": {
+    "lint": "eslint --ext js,jsx,ts,tsx .",
+    "format": "prettier --write \"**/*.{ts,js,json}\""
   },
-  "dependencies": {
-    "@vtex/css-handles": "^1.1.0"
+  "devDependencies": {
+    "@vtex/prettier-config": "^0.0.1",
+    "eslint": "^6.8.0",
+    "eslint-config-vtex-react": "^5.1.0",
+    "prettier": "^1.19.1",
+    "react": "^16.12.0",
+    "typescript": "^3.7.5"
   }
 }

react/ForceCenter.js

@@ -8,9 +8,7 @@ const ForceCenter = ({ children }) => {
 
   return (
     <div
-      className={`${
-        handles.forceCenter
-      } absolute left-0 right-0 flex justify-center z-1`}
+      className={`${handles.forceCenter} absolute left-0 right-0 flex justify-center z-1`}
       style={{ pointerEvents: 'none' }}
     >
       <div

react/__tests__/Header.test.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from '@vtex/test-tools/react'
 import { useRuntime } from 'vtex.render-runtime'
+
 import Header from '../legacy/index'
 
 describe('Header Component', () => {

react/components/Layout.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react'
+
 import StickyRows from './StickyRows'
 
 const Layout: FunctionComponent = ({ children }) => {

react/components/StickyRows.tsx

@@ -1,10 +1,12 @@
 import React, { FunctionComponent } from 'react'
+
 import useCumulativeHeightState from '../hooks/useCumulativeHeightState'
 
 const RowContext = React.createContext<{
   onResize(height: number): void
   offset: number
 }>({
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onResize: () => {},
   offset: 0,
 })

react/hooks/useCumulativeHeightState.tsx

@@ -59,7 +59,7 @@ const useCumulativeHeightState = () => {
   const getAccumulatedHeight = (index: number) => {
     const sortedIndices = Object.keys(state)
       .map(key => parseInt(key, 10))
-      .sort()
+      .sort((a, b) => a - b)
 
     const indices = sortedIndices.slice(0, sortedIndices.indexOf(index))
 

react/index.js

@@ -2,6 +2,7 @@ import React, { Suspense } from 'react'
 import { useChildBlock, NoSSR } from 'vtex.render-runtime'
 
 import CustomHeader from './components/CustomHeader'
+
 const LegacyHeader = React.lazy(() => import('./legacy'))
 
 const Header = props => {

react/package.json

@@ -1,4 +1,5 @@
 {
+  "version": "2.25.0",
   "name": "vtex.header",
   "description": "A Header Component.",
   "license": "ISC",
@@ -9,6 +10,12 @@
     "gen:coveralls": "yarn test:coverage  && cat ./coverage/lcov.info | coveralls",
     "lint": "tsc --noEmit && eslint --ext ts,tsx ."
   },
+  "devDependencies": {
+    "@types/classnames": "^2.2.7",
+    "@vtex/test-tools": "^0.1.3",
+    "apollo-client": "^2.5.1",
+    "coveralls": "^3.0.3"
+  },
   "dependencies": {
     "@types/react-resize-detector": "^3.1.1",
     "@vtex/css-handles": "^1.1.3",
@@ -26,12 +33,5 @@
   },
   "vtexScriptsOverride": {
     "srcPath": "."
-  },
-  "devDependencies": {
-    "@types/classnames": "^2.2.7",
-    "@vtex/test-tools": "^0.1.3",
-    "apollo-client": "^2.5.1",
-    "coveralls": "^3.0.3"
-  },
-  "version": "2.25.0"
+  }
 }

react/testUtils/test-utils.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import * as reactTestingLibrary from 'react-testing-library'
 import { IntlProvider } from 'react-intl'
+
 import defaultStrings from '../../messages/en.json'
 
 const customRender = (node, options) => {

react/typings/css.d.ts

@@ -1,4 +1 @@
-declare module '*.css' {
-  const css: any
-  export default css
-}
+declare module '*.css'