Just run flow-to-ts command

Author: armandabric

.eslintrc.js

@@ -1,5 +1,13 @@
 module.exports = {
-  extends: ['algolia', 'algolia/jest', 'algolia/react'],
+  extends: ['airbnb-typescript', 'prettier'],
+
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+  },
+
+  // ecmaFeatures: {
+  //   jsx: true,
+  // },
 
   env: {
     es6: true,
@@ -11,12 +19,12 @@ module.exports = {
     },
   },
 
-  rules: {
-    'max-params': ['error', 10],
-    'no-warning-comments': 'error',
+  // rules: {
+  //   'max-params': ['error', 10],
+  //   'no-warning-comments': 'error',
 
-    'import/no-commonjs': 'off',
-  },
+  //   'import/no-commonjs': 'off',
+  // },
 
   overrides: [
     {

.flowconfig

@@ -1,2 +1,3 @@
 **/dist/**/*
 **/node_modules/**/*
+src/**/*.js

.prettierignore

@@ -1,5 +1,5 @@
 {
-  "parser": "flow",
+  "parser": "babel-ts",
   "singleQuote": true,
   "trailingComma": "es5",
   "overrides": [

.prettierrc

@@ -1,7 +1,7 @@
 declare module 'react-element-to-jsx-string' {
   import { ReactNode } from 'react';
 
-  type FilterPropsFunction = (value: any, key: string) => boolean
+  type FilterPropsFunction = (value: any, key: string) => boolean;
 
   interface ReactElementToJSXStringOptions {
     displayName?: (element: ReactNode) => string;
@@ -16,7 +16,10 @@ declare module 'react-element-to-jsx-string' {
     useFragmentShortSyntax?: boolean;
   }
 
-  const reactElementToJSXString: (element: ReactNode, options?: ReactElementToJSXStringOptions) => string;
+  const reactElementToJSXString: (
+    element: ReactNode,
+    options?: ReactElementToJSXStringOptions
+  ) => string;
 
   export { ReactElementToJSXStringOptions as Options };
 

index.d.ts

@@ -8,23 +8,15 @@
   "types": "index.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "build:flow": "flow-copy-source -v --ignore=*.spec.js src/ dist/cjs",
     "prebuild": "rm -rf dist/",
-    "postbuild": "npm run build:flow",
-    "prepare": "npm run build",
-    "lint": "eslint .",
-    "lint:fix": "npm run lint -- --fix",
-    "flow": "flow",
-    "precommit": "lint-staged",
-    "prepublishOnly": "npm run build",
-    "prettier:fix": "prettier --write \"**/*.{js,json}\"",
+    "lint": "eslint --ext ts --ext tsx src/",
+    "lint:fix": "yarn run lint -- --fix",
+    "prettier:fix": "prettier --write \"**/*.{ts,tsx,js}\"",
     "test": "jest",
     "test:watch": "jest --watch",
     "release": "./release.sh",
-    "smoke": "node tests/smoke/run"
-  },
-  "lint-staged": {
-    "*.js": ["prettier --write \"**/*.{js,json}\"", "git add"]
+    "smoke": "node tests/smoke/run",
+    "ts:progress": "tsc > tserrors.txt"
   },
   "author": {
     "name": "Algolia, Inc.",
@@ -40,20 +32,27 @@
     "@babel/preset-react": "7.14.5",
     "@commitlint/cli": "8.3.5",
     "@commitlint/config-angular": "8.3.4",
+    "@khanacademy/flow-to-ts": "^0.5.2",
+    "@types/enzyme": "^3.10.9",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/react": "^17.0.26",
+    "@types/react-is": "^17.0.2",
     "babel-eslint": "10.1.0",
     "babel-jest": "24.9.0",
     "babel-register": "6.26.0",
     "conventional-changelog-cli": "2.1.1",
     "doctoc": "1.4.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
-    "eslint": "6.8.0",
+    "eslint": "7.25.0",
+    "eslint-config-airbnb-typescript": "12.3.1",
     "eslint-config-algolia": "14.0.1",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-plugin-import": "2.24.2",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jest": "22.21.0",
-    "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "4.2.0",
     "esm": "3.2.25",
     "expect": "27.2.3",
     "flow-bin": "0.119.1",
@@ -63,7 +62,7 @@
     "json": "10.0.0",
     "lint-staged": "10.5.4",
     "mversion": "2.0.1",
-    "prettier": "1.19.1",
+    "prettier": "2.4.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-test-renderer": "16.14.0",
@@ -72,7 +71,8 @@
     "rollup-plugin-node-builtins": "2.1.2",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-node-resolve": "5.2.0",
-    "rollup-plugin-sourcemaps": "0.6.3"
+    "rollup-plugin-sourcemaps": "0.6.3",
+    "typescript": "4.2.4"
   },
   "peerDependencies": {
     "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1",
@@ -81,9 +81,11 @@
   "dependencies": {
     "@base2/pretty-print-object": "1.0.1",
     "is-plain-object": "5.0.0",
-    "react-is": "^17.0.2"
+    "react-is": "17.0.2"
   },
   "jest": {
-    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.js"]
+    "setupFilesAfterEnv": [
+      "<rootDir>tests/setupTests.js"
+    ]
   }
 }

package.json

@@ -0,0 +1,7 @@
+import React from 'react'; // eslint-disable-next-line react/display-name
+
+export default function (props) {
+  const { children } = props; // eslint-disable-line react/prop-types
+
+  return <div>{children}</div>;
+}

src/AnonymousStatelessComponent.js

@@ -1,24 +1,30 @@
-/* @flow */
-
 import createPropFilter from './createPropFilter';
 
 describe('createPropFilter', () => {
   it('should filter based on an array of keys', () => {
-    const props = { a: 1, b: 2, c: 3 };
-    const filter = createPropFilter(props, ['b']);
+    const props = {
+      a: 1,
+      b: 2,
+      c: 3,
+    };
 
+    const filter = createPropFilter(props, ['b']);
     const filteredPropKeys = Object.keys(props).filter(filter);
 
     expect(filteredPropKeys).toEqual(['a', 'c']);
   });
 
   it('should filter based on a callback', () => {
-    const props = { a: 1, b: 2, c: 3 };
+    const props = {
+      a: 1,
+      b: 2,
+      c: 3,
+    };
+
     const filter = createPropFilter(
       props,
       (val, key) => key !== 'b' && val < 3
     );
-
     const filteredPropKeys = Object.keys(props).filter(filter);
 
     expect(filteredPropKeys).toEqual(['a']);

src/AnonymousStatelessComponent.tsx

@@ -1,8 +1,6 @@
-/* @flow */
-
 export default function createPropFilter(
   props: {},
-  filter: string[] | ((any, string) => boolean)
+  filter: string[] | ((propValue: any, key: string) => boolean)
 ) {
   if (Array.isArray(filter)) {
     return (key: string) => filter.indexOf(key) === -1;

src/formatter/createPropFilter.spec.js renamed to src/formatter/createPropFilter.spec.ts

@@ -1,32 +1,41 @@
-/* @flow */
-
 import React from 'react';
 import formatComplexDataStructure from './formatComplexDataStructure';
 
-jest.mock('./formatReactElementNode.js', () => node =>
-  `<${node.displayName} />`
+jest.mock(
+  './formatReactElementNode',
+  () => (node) => `<${node.displayName} />`
 );
 
 const createFakeReactElement = (tagName = 'Foo') =>
   React.createElement(tagName, {}, null);
-const options = { tabStop: 2 };
+
+const options = {
+  tabStop: 2,
+};
 
 describe('formatComplexDataStructure', () => {
   it('should format an object', () => {
-    const fixture = { a: 1, b: { c: 'ccc' } };
-
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
-      `{
+    const fixture = {
+      a: 1,
+      b: {
+        c: 'ccc',
+      },
+    };
+    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(`{
     a: 1,
     b: {
       c: 'ccc'
     }
-  }`
-    );
+  }`);
   });
 
   it('should format inline an object', () => {
-    const fixture = { a: 1, b: { c: 'ccc' } };
+    const fixture = {
+      a: 1,
+      b: {
+        c: 'ccc',
+      },
+    };
 
     expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
       "{a: 1, b: {c: 'ccc'}}"
@@ -38,31 +47,33 @@ describe('formatComplexDataStructure', () => {
   });
 
   it('should order the object keys', () => {
-    const fixture = { b: { d: 'ddd', c: 'ccc' }, a: 1 };
+    const fixture = {
+      b: {
+        d: 'ddd',
+        c: 'ccc',
+      },
+      a: 1,
+    };
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
-      `{
+    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(`{
     a: 1,
     b: {
       c: 'ccc',
       d: 'ddd'
     }
-  }`
-    );
+  }`);
   });
 
   it('should format an array', () => {
     const fixture = [1, '2', true, false, null];
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
-      `[
+    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(`[
     1,
     '2',
     true,
     false,
     null
-  ]`
-    );
+  ]`);
   });
 
   it('should format inline an array ', () => {
@@ -74,29 +85,33 @@ describe('formatComplexDataStructure', () => {
   });
 
   it('should format an object that contains a react element', () => {
-    const fixture = { a: createFakeReactElement('BarBar') };
+    const fixture = {
+      a: createFakeReactElement('BarBar'),
+    };
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
-      `{
+    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(`{
     a: <BarBar />
-  }`
-    );
+  }`);
   });
 
   it('should format an empty array', () => {
     expect(formatComplexDataStructure([], false, 0, options)).toEqual('[]');
   });
 
   it('should format an object that contains a date', () => {
-    const fixture = { a: new Date('2017-11-13T00:00:00.000Z') };
+    const fixture = {
+      a: new Date('2017-11-13T00:00:00.000Z'),
+    };
 
     expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
       `{a: new Date('2017-11-13T00:00:00.000Z')}`
     );
   });
 
   it('should format an object that contains a regexp', () => {
-    const fixture = { a: /test/g };
+    const fixture = {
+      a: /test/g,
+    };
 
     expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
       `{a: /test/g}`