Merge pull request #4489 from Methuselah96/ts-try-hooks-again

Convert to TypeScript

Author: JedWatson

.changeset/getChangelogEntry.js

@@ -4,25 +4,25 @@ const { getInfo } = require('@changesets/get-github-info');
 const getReleaseLine = async (changeset, type) => {
   const [firstLine, ...futureLines] = changeset.summary
     .split('\n')
-    .map(l => l.trimRight());
+    .map((l) => l.trimRight());
   let { links } = await getInfo({
     repo: 'JedWatson/react-select',
     commit: changeset.commit,
   });
   return `- ${links.commit}${links.pull === null ? '' : ` ${links.pull}`}${
     links.user === null ? '' : ` Thanks ${links.user}!`
-  } - ${firstLine}\n${futureLines.map(l => `  ${l}`).join('\n')}`;
+  } - ${firstLine}\n${futureLines.map((l) => `  ${l}`).join('\n')}`;
 };
 
 const getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {
   if (dependenciesUpdated.length === 0) return '';
 
   const changesetLinks = changesets.map(
-    changeset => `- Updated dependencies [${changeset.commit}]:`
+    (changeset) => `- Updated dependencies [${changeset.commit}]:`
   );
 
   const updatedDepenenciesList = dependenciesUpdated.map(
-    dependency => `  - ${dependency.name}@${dependency.version}`
+    (dependency) => `  - ${dependency.name}@${dependency.version}`
   );
 
   return [...changesetLinks, ...updatedDepenenciesList].join('\n');

.circleci/config.yml

@@ -59,7 +59,7 @@ jobs:
                   command: |
                       yarn prettier:check
                       yarn lint
-                      yarn flow check --flowconfig-name=.flowconfig-ci
+                      yarn type-check
                       yarn test:jest
                       yarn coveralls
     end_to_end:

.codesandbox/ci.json

@@ -1,8 +1,5 @@
-
-
 {
   "buildCommand": "build",
   "packages": ["packages/*"],
   "sandboxes": ["nfmxw"]
 }
-

.coveralls.yml

@@ -1,2 +1,2 @@
 service-name: travis-ci
-repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR 
+repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR

.eslintignore

@@ -2,7 +2,6 @@ coverage/*
 cypress/plugins/*
 cypress/support/*
 **/dist/*
-flow-typed/*
 lib/*
 node_modules/*
 **/node_modules/*

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
-  extends: ['plugin:react-hooks/recommended'],
-  parser: 'babel-eslint',
+  extends: ['plugin:react-hooks/recommended', 'plugin:@typescript-eslint/base'],
+  parser: '@typescript-eslint/parser',
   env: {
     browser: true,
     es6: true,
     node: true,
   },
-  plugins: ['react'],
+  plugins: ['react', '@typescript-eslint'],
   rules: {
-    'no-unused-vars': [
+    '@typescript-eslint/no-unused-vars': [
       'error',
       {
         args: 'after-used',
@@ -23,9 +23,9 @@ module.exports = {
     'no-shadow': 1,
     'no-trailing-spaces': 1,
     'no-underscore-dangle': 1,
-    'no-unused-expressions': 1,
+    '@typescript-eslint/no-unused-expressions': 1,
     'object-curly-spacing': [1, 'always'],
-    quotes: [2, 'single', 'avoid-escape'],
+    '@typescript-eslint/quotes': [2, 'single', 'avoid-escape'],
     'react/jsx-boolean-value': 1,
     'react/jsx-no-undef': 1,
     'react/jsx-uses-react': 1,
@@ -37,7 +37,12 @@ module.exports = {
     'react/react-in-jsx-scope': 1,
     'react/self-closing-comp': 1,
     'react/sort-prop-types': 1,
-    semi: 2,
+    '@typescript-eslint/semi': 2,
     strict: 0,
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

.flowconfig

@@ -5,26 +5,26 @@ welcome, from issue reports to PRs and documentation / write-ups.
 
 Before you open a PR:
 
-* In development, run `yarn start` to build (+watch) the project source, and run
-the [development server](http://localhost:8000).
-* Please ensure all the examples work correctly after your change. If you're
-adding a major new use-case, add a new example demonstrating its use.
-* Be careful to follow the code style of the project. Run `yarn lint` after
-your changes and ensure you do not introduce any new errors or warnings.
-* This repository uses `flow`, please run `yarn flow` after your changes to ensure
-that you do not introduce any new type errors.
+- In development, run `yarn start` to build (+watch) the project source, and run
+  the [development server](http://localhost:8000).
+- Please ensure all the examples work correctly after your change. If you're
+  adding a major new use-case, add a new example demonstrating its use.
+- Be careful to follow the code style of the project. Run `yarn lint` after
+  your changes and ensure you do not introduce any new errors or warnings.
+- This repository uses TypeScript, please run `yarn type-check` after your changes to ensure
+  that you do not introduce any new type errors.
 
-* Ensure that your effort is aligned with the project's roadmap by talking to
-the maintainers, especially if you are going to spend a lot of time on it.
-* Make sure there's an issue open for any work you take on and intend to submit
-as a pull request - it helps core members review your concept and direction
-early and is a good way to discuss what you're planning to do.
-* If you open an issue and are interested in working on a fix, please let us
-know. We'll help you get started, rather than adding it to the queue.
-* Make sure you do not add regressions by running `yarn test`.
-* Where possible, include tests with your changes, either that demonstrates the
-bug, or tests the new functionality. If you're not sure how to test your
-changes, feel free to ping @gwyneplaine or @JedWatson
-* Run `yarn coveralls` to check that the coverage hasn't dropped, and look at the
-report (under the generated `coverage` directory) to check that your changes are
-covered
+- Ensure that your effort is aligned with the project's roadmap by talking to
+  the maintainers, especially if you are going to spend a lot of time on it.
+- Make sure there's an issue open for any work you take on and intend to submit
+  as a pull request - it helps core members review your concept and direction
+  early and is a good way to discuss what you're planning to do.
+- If you open an issue and are interested in working on a fix, please let us
+  know. We'll help you get started, rather than adding it to the queue.
+- Make sure you do not add regressions by running `yarn test`.
+- Where possible, include tests with your changes, either that demonstrates the
+  bug, or tests the new functionality. If you're not sure how to test your
+  changes, feel free to ping @gwyneplaine or @JedWatson
+- Run `yarn coveralls` to check that the coverage hasn't dropped, and look at the
+  report (under the generated `coverage` directory) to check that your changes are
+  covered

.flowconfig-ci

@@ -3,10 +3,11 @@
 Before creating an issue...
 
 # Are you asking a question?
-Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag.
 
+Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag.
 
 # Are you reporting a bug or runtime error?
+
 Please include a test case that demonstrates the issue you're reporting!
 
 This is very helpful to maintainers in order to help us see the issue you're seeing.
@@ -26,10 +27,10 @@ https://codesandbox.io/s/n34mq0743j
 
 You may also find the [online Babel tool](https://babeljs.io/repl/) quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.
 
-
 # Are you making a feature request?
+
 Provide as much information as possible about your requested feature. Here are a few questions you may consider answering:
 
-*   What's your use case? (Tell us about your application and what problem you're trying to solve.)
-*   What interface do you have in mind? (What new properties or methods do you think might be helpful?)
-*   Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)
+- What's your use case? (Tell us about your application and what problem you're trying to solve.)
+- What interface do you have in mind? (What new properties or methods do you think might be helpful?)
+- Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)

.github/CONTRIBUTING.md

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@master
         with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Setup Node.js 10.x

.github/ISSUE_TEMPLATE.md

@@ -2,7 +2,6 @@ coverage/*
 cypress/plugins/*
 cypress/support/*
 **/dist/*
-flow-typed/*
 lib/*
 node_modules/*
 **/node_modules/*

.github/workflows/release.yml

@@ -5,21 +5,21 @@ welcome, from issue reports to PRs and documentation / write-ups.
 
 Before you open a PR:
 
-* In development, run `yarn start` to build (and watch) the project source, and run
-the [development server](http://localhost:8000).
-* Please ensure all the examples work correctly after your change. If you're
-adding a major new use-case, add a new example `/docs/examples` and subsequent documentation demonstrating its use `/docs/pages`.
-* Ensure that your effort is aligned with the project's roadmap by talking to
-the maintainers, especially if you are going to spend a lot of time on it.
-* Make sure there's an issue open for any work you take on and intend to submit
-as a pull request - it helps core members review your concept and direction
-early and is a good way to discuss what you're planning to do.
-* If you open an issue and are interested in working on a fix, please let us
-know. We'll help you get started, rather than inadvertently doubling up on your hard work.
-* Make sure you do not add regressions by running `yarn test`.
-* Where possible, include tests with your changes, either that demonstrates the
-bug, or tests the new functionality. If you're not sure how to test your
-changes, feel free to ping @gwyneplaine
-* Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
-(with regards to formatting, etc)
-* All new features and changes need documentation.
+- In development, run `yarn start` to build (and watch) the project source, and run
+  the [development server](http://localhost:8000).
+- Please ensure all the examples work correctly after your change. If you're
+  adding a major new use-case, add a new example `/docs/examples` and subsequent documentation demonstrating its use `/docs/pages`.
+- Ensure that your effort is aligned with the project's roadmap by talking to
+  the maintainers, especially if you are going to spend a lot of time on it.
+- Make sure there's an issue open for any work you take on and intend to submit
+  as a pull request - it helps core members review your concept and direction
+  early and is a good way to discuss what you're planning to do.
+- If you open an issue and are interested in working on a fix, please let us
+  know. We'll help you get started, rather than inadvertently doubling up on your hard work.
+- Make sure you do not add regressions by running `yarn test`.
+- Where possible, include tests with your changes, either that demonstrates the
+  bug, or tests the new functionality. If you're not sure how to test your
+  changes, feel free to ping @gwyneplaine
+- Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
+  (with regards to formatting, etc)
+- All new features and changes need documentation.

.prettierignore

@@ -36,7 +36,9 @@ yarn add react-select
 ```
 
 Then use it in your app:
+
 #### With React Component
+
 ```js
 import React from 'react';
 import Select from 'react-select';
@@ -51,10 +53,9 @@ class App extends React.Component {
   state = {
     selectedOption: null,
   };
-  handleChange = selectedOption => {
-    this.setState(
-      { selectedOption },
-      () => console.log(`Option selected:`, this.state.selectedOption)
+  handleChange = (selectedOption) => {
+    this.setState({ selectedOption }, () =>
+      console.log(`Option selected:`, this.state.selectedOption)
     );
   };
   render() {
@@ -72,9 +73,10 @@ class App extends React.Component {
 ```
 
 #### With React Hooks
+
 ```js
-import React, { useState } from "react";
-import Select from "react-select";
+import React, { useState } from 'react';
+import Select from 'react-select';
 
 const options = [
   { value: 'chocolate', label: 'Chocolate' },
@@ -84,7 +86,7 @@ const options = [
 
 export default function App() {
   const [selectedOption, setSelectedOption] = useState(null);
-  
+
   return (
     <div className="App">
       <Select

CONTRIBUTING.md

@@ -4,5 +4,9 @@ module.exports = {
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-runtime',
   ],
-  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
 };

README.md

@@ -1,5 +1,5 @@
-const selector = require('../fixtures/selectors.json');
-const baseUrl = require('../../cypress.json').baseUrl;
+import selector from '../fixtures/selectors.json';
+import cypressJson from '../../cypress.json';
 
 const setup = [
   { width: 1440, height: 900, viewport: 'macbook-15', device: 'Laptop' },
@@ -9,7 +9,7 @@ const setup = [
 
 describe('Multi Select', () => {
   before(() => {
-    cy.visit(baseUrl);
+    cy.visit(cypressJson.baseUrl);
     cy.title().should('equal', 'React-Select');
     cy.get('h1').should('contain', 'Test Page for Cypress');
   });
@@ -20,7 +20,7 @@ describe('Multi Select', () => {
   for (let config of setup) {
     const { viewport } = config;
     it(`Should display several default values that can be removed in view: ${viewport}`, () => {
-      cy.get(selector.multiSelectDefaultValues).then(function($defaultValue) {
+      cy.get(selector.multiSelectDefaultValues).then(function ($defaultValue) {
         expect($defaultValue).to.have.length(2);
         expect($defaultValue.eq(0)).to.contain('Purple');
         expect($defaultValue.eq(1)).to.contain('Red');
@@ -29,7 +29,7 @@ describe('Multi Select', () => {
       cy.get(selector.firstMultiValueRemove)
         .click()
         .get(selector.multiSelectDefaultValues)
-        .then(function($defaultValue) {
+        .then(function ($defaultValue) {
           expect($defaultValue).to.have.length(1);
           expect($defaultValue.eq(0)).to.contain('Red');
         })
@@ -42,7 +42,7 @@ describe('Multi Select', () => {
         .click()
         .type('{backspace}', { force: true })
         .get(selector.multiSelectDefaultValues)
-        .then(function($defaultValue) {
+        .then(function ($defaultValue) {
           expect($defaultValue).to.have.length(1);
           expect($defaultValue.eq(0)).to.contain('Purple');
         })
@@ -74,7 +74,7 @@ describe('Multi Select', () => {
         .type('Slate', { force: true })
         .type('{enter}', { force: true })
         .get(selector.multiSelectDefaultValues)
-        .then(function($defaultValue) {
+        .then(function ($defaultValue) {
           expect($defaultValue).to.have.length(5);
           expect($defaultValue.eq(0)).to.contain('Purple');
           expect($defaultValue.eq(1)).to.contain('Red');