style(codebase): update eslint rules

.eslintrc.json

@@ -1,6 +1,11 @@
 {
-  "extends": "react-app",
+  "extends": "@significa/eslint-config",
+  "plugins": ["jest"],
   "rules": {
-    "@typescript-eslint/no-angle-bracket-type-assertion": 0 // I don't know wtf it is
+    "@typescript-eslint/interface-name-prefix": "off",
+    "@typescript-eslint/ban-ts-ignore": "off"
+  },
+  "env": {
+    "jest": true
   }
 }

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@significa/prettier-config");

package.json

@@ -40,7 +40,7 @@
     "test:unit:native": "jest -c jest.native.config.js",
     "test:watch": "npm run test:unit -- --watch",
     "test:size": "bundlesize",
-    "test:tsc": "node_modules/.bin/tsc",
+    "test:tsc": "tsc",
     "test:tsc:watch": "npm run tsc -- --watch",
     "commit": "git-cz",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
@@ -57,31 +57,29 @@
     "@babel/runtime": "7.5.5",
     "@commitlint/cli": "8.1.0",
     "@commitlint/config-conventional": "8.1.0",
-    "@storybook/addon-notes": "^5.2.8",
-    "@storybook/addons": "^5.2.8",
-    "@storybook/react": "^5.2.8",
+    "@significa/eslint-config": "0.0.8",
+    "@significa/prettier-config": "0.0.8",
+    "@storybook/addon-notes": "5.2.8",
+    "@storybook/addons": "5.2.8",
+    "@storybook/react": "5.2.8",
     "@types/jest": "24.0.18",
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
     "@types/react-native": "0.60.11",
     "@types/react-test-renderer": "16.9.0",
-    "@typescript-eslint/eslint-plugin": "2.1.0",
-    "@typescript-eslint/parser": "2.1.0",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-core": "^7.0.0-bridge.0",
+    "@typescript-eslint/eslint-plugin": "2.13.0",
+    "awesome-typescript-loader": "5.2.1",
+    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.8.0",
-    "babel-loader": "^7.1.5",
+    "babel-loader": "7.1.5",
     "bundlesize": "0.18.0",
     "commitizen": "4.0.3",
     "cz-conventional-changelog": "3.0.2",
-    "eslint": "6.3.0",
-    "eslint-config-react-app": "5.0.1",
-    "eslint-plugin-flowtype": "4.3.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "2.0.1",
+    "eslint": "6.8.0",
+    "eslint-plugin-jest": "23.1.1",
+    "eslint-plugin-react": "7.17.0",
+    "eslint-plugin-react-hooks": "2.3.0",
     "husky": "3.0.4",
     "jest": "24.9.0",
     "metro-react-native-babel-preset": "0.56.0",
@@ -91,12 +89,11 @@
     "react-native": "0.60.5",
     "react-native-svg": "9.11.1",
     "react-test-renderer": "16.9.0",
-    "remark-emoji": "2.0.2",
     "rollup": "1.20.2",
     "rollup-plugin-copy": "3.1.0",
     "rollup-plugin-replace": "2.2.0",
     "rollup-plugin-typescript2": "0.23.0",
-    "rollup-plugin-uglify": "^6.0.4",
+    "rollup-plugin-uglify": "6.0.4",
     "semantic-release": "15.13.24",
     "ts-jest": "24.0.2",
     "typescript": "3.5.3"

rollup.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 import replace from 'rollup-plugin-replace'
 import { uglify } from 'rollup-plugin-uglify'
 import typescript from 'rollup-plugin-typescript2'
@@ -11,14 +12,14 @@ const cjs = {
   exports: 'named',
   format: 'cjs',
   sourcemap: true,
-};
+}
 
 const esm = {
   format: 'es',
   sourcemap: true,
-};
+}
 
-const globals = { react: 'React', 'react-dom': 'ReactDOM' };
+const globals = { react: 'React', 'react-dom': 'ReactDOM' }
 
 const commonPlugins = [
   typescript({
@@ -47,7 +48,7 @@ const umdConfig = mergeAll([
         file: `dist/${pkg.name}.js`,
         format: 'umd',
         name: 'ContentLoader',
-        globals
+        globals,
       },
     ]),
     external: Object.keys(pkg.peerDependencies || {}),
@@ -97,7 +98,7 @@ const webConfig = mergeAll([
     input: 'src/index.ts',
     output: [
       mergeAll([configBase.output, { ...esm, file: pkg.module }]),
-      mergeAll([configBase.output, { ...cjs, file: pkg.main,  }]),
+      mergeAll([configBase.output, { ...cjs, file: pkg.main }]),
     ],
     plugins: configBase.plugins.concat(),
   },
@@ -108,14 +109,20 @@ const nativeConfig = mergeAll([
   {
     input: './src/native/index.ts',
     output: [
-      mergeAll([configBase.output, { ...esm, file: `native/${pkg.name}.native.es.js` }]),
-      mergeAll([configBase.output, { ...cjs, file: `native/${pkg.name}.native.cjs.js`,  }]),
+      mergeAll([
+        configBase.output,
+        { ...esm, file: `native/${pkg.name}.native.es.js` },
+      ]),
+      mergeAll([
+        configBase.output,
+        { ...cjs, file: `native/${pkg.name}.native.cjs.js` },
+      ]),
     ],
-    plugins: configBase.plugins.concat(copy({
-      targets: [
-        { src: 'src/native/package.json', dest: 'native' },
-      ]
-    }))
+    plugins: configBase.plugins.concat(
+      copy({
+        targets: [{ src: 'src/native/package.json', dest: 'native' }],
+      })
+    ),
   },
 ])
 

src/__tests__/uid.test.tsx

@@ -3,7 +3,7 @@ import uid from '../uid'
 describe('unique id', () => {
   const options = 100
   // @ts-ignore To avoid adding polyfill for `fill` becoz fill is ES6 feature and our target is ES5
-  const ids = new Array(options).fill(' ').map(item => uid())
+  const ids = new Array(options).fill(' ').map(() => uid())
   // @ts-ignore To avoid adding polyfill for `from`
   const unique = Array.from(new Set(ids))
 

src/native/stylized/BulletListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect, Circle } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderBulletList: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Circle cx="10" cy="20" r="8" />
     <Rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
@@ -15,3 +15,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderBulletList

src/native/stylized/CodeStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderCode: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
     <Rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -19,3 +19,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderCode

src/native/stylized/FacebookStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect, Circle } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Rect x="70" y="15" rx="4" ry="4" width="117" height="6" />
     <Rect x="70" y="35" rx="3" ry="3" width="85" height="6" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <Circle cx="30" cy="30" r="30" />
   </Holder>
 )
+
+export default ReactContentLoaderFacebook

src/native/stylized/InstagramStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect, Circle } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderInstagram: React.FC<IContentLoaderProps> = props => (
   <Holder {...props} height={480}>
     <Circle cx="30" cy="30" r="30" />
 
@@ -12,3 +12,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
   </Holder>
 )
+
+export default ReactContentLoaderInstagram

src/native/stylized/ListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder, { Rect } from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderListStyle: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <Rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
     <Rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <Rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderListStyle

src/stylized/BulletListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderBulletList: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <circle cx="10" cy="20" r="8" />
     <rect x="25" y="15" rx="5" ry="5" width="220" height="10" />
@@ -15,3 +15,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="25" y="105" rx="5" ry="5" width="220" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderBulletList

src/stylized/CodeStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderCode: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
     <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
@@ -19,3 +19,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderCode

src/stylized/FacebookStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderFacebook: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
     <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <circle cx="30" cy="30" r="30" />
   </Holder>
 )
+
+export default ReactContentLoaderFacebook

src/stylized/InstagramStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderInstagram: React.FC<IContentLoaderProps> = props => (
   <Holder {...props} height={480}>
     <circle cx="30" cy="30" r="30" />
 
@@ -12,3 +12,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
   </Holder>
 )
+
+export default ReactContentLoaderInstagram

src/stylized/ListStyle.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import Holder from '../Holder'
 import { IContentLoaderProps } from '../'
 
-export default (props: IContentLoaderProps) => (
+const ReactContentLoaderListStyle: React.FC<IContentLoaderProps> = props => (
   <Holder {...props}>
     <rect x="0" y="0" rx="3" ry="3" width="250" height="10" />
     <rect x="20" y="20" rx="3" ry="3" width="220" height="10" />
@@ -13,3 +13,5 @@ export default (props: IContentLoaderProps) => (
     <rect x="20" y="100" rx="3" ry="3" width="80" height="10" />
   </Holder>
 )
+
+export default ReactContentLoaderListStyle

tsconfig.base.json

@@ -1,15 +1,17 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "jsx": "react",
-    "lib": ["es6"],
     "declaration": true,
     "declarationDir": "./dist/types",
     "declarationMap": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "lib": ["es6"],
     "noEmit": true,
+    "noImplicitAny": false,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
     "sourceMap": true,
-    "esModuleInterop": true,
-    "noImplicitAny": false
+    "target": "es5"
   },
   "include": ["./src/**/*"],
   "exclude": ["node_modules", "src/__tests__"]

tsconfig.test.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
-    "lib": ["dom"],
-    "noEmit": true
+    "lib": ["dom"]
   }
 }