update rn, fix eslint, ts errors (#1655)

* update react-native to 0.69.5, add eslint, autofix src/components

* fix lint errors

Co-authored-by: Artsiom Grintsevich <greenfrvr@gmail.com>

Author: AndreiPirovich

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: [ '@typescript-eslint' ],
+  overrides: [
+    {
+      files: [ '*.ts', '*.tsx' ],
+      rules: {
+        '@typescript-eslint/no-shadow': [ 'error' ],
+        'no-shadow': 'off',
+        'no-undef': 'off',
+        'react-native/no-raw-text': 'off',
+      },
+      extends: [
+        'akveo/react-native:recommended',
+      ],
+    },
+  ],
+  parserOptions: {
+    project: [ './tsconfig.json' ],
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: '18.0.0',
+    },
+  },
+  ignorePatterns: ["src/template-js", "src/template-ts"]
+};

package.json

@@ -19,50 +19,56 @@
     "demo": "yarn --cwd ../kittenTricks",
     "build": "gulp build",
     "clean": "rimraf ./dist",
-    "lint": "tslint -c ./tslint.json ./src/**/*.{ts,tsx}",
+    "lint": "eslint -c .eslintrc.js ./src",
     "test": "jest",
     "parse-docs": "gulp parse-docs",
     "bump-version": "gulp bump-version && conventional-changelog -i CHANGELOG.md -s",
     "publish-docs": "npm run parse-docs && gulp publish-docs",
     "publish-packages": "gulp publish-packages"
   },
+  "dependencies": {
+    "react": "18.0.0",
+    "react-native": "0.69.5"
+  },
   "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-proposal-decorators": "^7.6.2",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-decorators": "^7.18.10",
+    "@babel/runtime": "^7.12.5",
     "@eva-design/eva": "^2.1.1",
     "@eva-design/material": "^2.1.1",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@tsconfig/react-native": "^2.0.2",
     "@types/gulp": "ts3.8",
     "@types/gulp-replace": "ts3.8",
-    "@types/jest": "ts3.8",
-    "@types/lodash.merge": "ts3.8",
-    "@types/react-native": "ts3.8",
-    "@types/react-test-renderer": "ts3.8",
-    "@types/rimraf": "ts3.8",
-    "babel-jest": "^24.9.0",
-    "change-case": "^3.1.0",
+    "@types/jest": "^26.0.23",
+    "@types/lodash.merge": "^4.6.7",
+    "@types/react-native": "^0.69.5",
+    "@types/react-test-renderer": "^18.0.0",
+    "@types/rimraf": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "babel-jest": "^26.6.3",
+    "change-case": "^4.1.2",
     "conventional-changelog-cli": "^2.0.21",
     "coveralls": "^3.0.2",
     "doc-prsr": "^2.2.4",
+    "eslint": "^7.32.0",
+    "eslint-config-akveo": "^1.0.1",
+    "eslint-plugin-react-native": "^4.0.0",
     "gulp": "^4.0.2",
     "gulp-typedoc": "^2.2.3",
     "husky": "^1.1.2",
     "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.56.0",
-    "react": "~16.9.0",
-    "react-native": "~0.61.4",
+    "metro-react-native-babel-preset": "^0.70.3",
     "react-native-svg": "~9.13.6",
     "react-native-testing-library": "^1.12.0",
-    "react-test-renderer": "16.9.0",
+    "react-test-renderer": "18.0.0",
     "rimraf": "^2.6.2",
     "ts-node": "^3.2.2",
-    "tscpaths": "0.0.9",
-    "tslint": "^5.12.1",
     "typedoc": "^0.15.3",
-    "typescript": "^3.8.2"
+    "typescript": "4.4.4"
   },
   "resolutions": {
-    "react": "~16.9.0",
-    "react-native": "~0.61.5",
-    "react-native-svg": "~9.13.3"
+    "@types/react": "^18.0.17"
   }
-}
+}

scripts/create-doc-app-navigation.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { pascal } from 'change-case';
+import { pascalCase } from 'change-case';
 
 interface ShowcaseMap {
   [componentName: string]: ComponentShowcase;
@@ -63,7 +63,7 @@ const createComponentShowcase = (showcasePath: string, component: string): Compo
   const showcaseFiles: string[] = fs.readdirSync(path.resolve(showcasePath, component));
 
   return showcaseFiles.reduce((showcaseAcc: ComponentShowcase, showcaseFile: string) => {
-    const routeName: string = pascal(`${showcaseFile.split('.component.tsx')[0]}`);
+    const routeName: string = pascalCase(`${showcaseFile.split('.component.tsx')[0]}`);
     const showcaseInfo: ShowcaseInfo = { name: `${routeName}Showcase`, routeName, path: showcaseFile };
     return { ...showcaseAcc, showcases: [...showcaseAcc.showcases, showcaseInfo] };
   }, { showcases: [] });

src/components/devsupport/components/falsyFC/falsyFC.component.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-export type RenderFCProp<Props = {}> = (props?: Props) => React.ReactElement;
+export type RenderFCProp<Props> = (props?: Props) => React.ReactElement;
 
-export type RenderProp<Props = {}> = RenderFCProp<Props> | React.ReactElement
+export type RenderProp<Props> = RenderFCProp<Props> | React.ReactElement;
 
-export type FalsyFCProps<Props = {}> = Props & {
+export type FalsyFCProps<Props> = Props & {
   component?: RenderProp<Props>;
   fallback?: React.ReactElement;
 };
@@ -36,7 +36,7 @@ export type FalsyFCProps<Props = {}> = Props & {
  * );
  * ```
  */
-export class FalsyFC<Props = {}> extends React.Component<FalsyFCProps<Props>> {
+export class FalsyFC<Props> extends React.Component<FalsyFCProps<Props>> {
 
   public render(): React.ReactElement {
     const { component, fallback, ...props } = this.props;

src/components/devsupport/components/falsyFC/falsyFC.spec.tsx

@@ -3,45 +3,62 @@ import { Text } from 'react-native';
 import { render } from 'react-native-testing-library';
 import { FalsyFC } from './falsyFC.component';
 
-it('should render nothing', function () {
-  const component = render(<FalsyFC/>);
+const styles = { color: 'red' };
+
+it('should render nothing', () => {
+  const component = render(<FalsyFC />);
   expect(component.toJSON()).toEqual(null);
 });
 
 it('should render provided function component', () => {
   const component = render(
-    <FalsyFC style={{ color: 'red' }} component={props => <Text {...props}>I love Babel</Text>}/>,
+    <FalsyFC
+      style={styles}
+      component={props => (
+        <Text {...props}>
+          I love Babel
+        </Text>
+      )}
+    />,
   );
 
   const textComponent = component.getByText('I love Babel');
 
   expect(textComponent).toBeTruthy();
-  expect(textComponent.props.style).toEqual({
-    color: 'red',
-  });
+  expect(textComponent.props.style).toEqual(styles);
 });
 
 it('should render provided function component with hooks', () => {
-  const HookComponent = (props) => {
+  const HookComponent = (props): React.ReactElement => {
     const state = React.useState(1);
     return (
-      <Text {...props}>I love Babel {state}</Text>
+      <Text {...props}>
+        I love Babel
+        {state}
+      </Text>
     );
   };
 
   const component = render(
-    <FalsyFC style={{ color: 'red' }} component={props => <HookComponent {...props}/>}/>,
+    <FalsyFC
+      style={styles}
+      component={props => <HookComponent {...props} />}
+    />,
   );
 
   const textComponent = component.getByText('I love Babel 1');
   expect(textComponent).toBeTruthy();
 });
 
-it('should render fallback component', function () {
+it('should render fallback component', () => {
   const component = render(
     <FalsyFC
       component={null}
-      fallback={<Text>I love Babel</Text>}
+      fallback={(
+        <Text>
+          I love Babel
+        </Text>
+      )}
     />,
   );
 
@@ -50,15 +67,19 @@ it('should render fallback component', function () {
   expect(textComponent).toBeTruthy();
 });
 
-it('should be able to render components with hooks', function () {
-  const ComponentWithHooks = () => {
-    const [text, setText ] = React.useState('');
+it('should be able to render components with hooks', () => {
+  const ComponentWithHooks = (): React.ReactElement => {
+    const [text, setText] = React.useState('');
 
     React.useEffect(() => {
       setText('I love Babel');
     }, []);
 
-    return <Text>{text}</Text>;
+    return (
+      <Text>
+        {text}
+      </Text>
+    );
   };
 
   const component = render(
@@ -72,21 +93,23 @@ it('should be able to render components with hooks', function () {
   expect(textComponent).toBeTruthy();
 });
 
-it('should be able to render valid element', function () {
-  const ComponentWithHooks = (props) => {
-    return <Text {...props}>I love Babel</Text>;
+it('should be able to render valid element', () => {
+  const ComponentWithHooks = (props): React.ReactElement => {
+    return (
+      <Text {...props}>
+        I love Babel
+      </Text>
+    );
   };
 
   const component = render(
     <FalsyFC
-      style={{ color: 'red' }}
+      style={styles}
       component={<ComponentWithHooks />}
     />,
   );
 
   const textComponent = component.getByText('I love Babel');
   expect(textComponent).toBeTruthy();
-  expect(textComponent.props.style).toEqual({
-    color: 'red',
-  });
+  expect(textComponent.props.style).toEqual(styles);
 });