feat(dropdowns): migrate react-dropdowns to Typescript (#371)

Author: Austin Green

.eslintignore

@@ -0,0 +1 @@
+packages/notifications/index.d.ts

.eslintrc.json

@@ -1,11 +1,14 @@
 {
+  "parser": "@typescript-eslint/parser",
   "extends": [
     "@zendeskgarden",
     "@zendeskgarden/eslint-config/plugins/notice.js",
     "plugin:react/recommended",
     "plugin:jest/recommended",
     "plugin:jsx-a11y/recommended",
-    "prettier"
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
   ],
   "settings": {
     "react": {
@@ -18,7 +21,7 @@
     "PACKAGE_VERSION": true,
     "COMPONENT_IDS": true
   },
-  "plugins": ["prettier", "react", "jest", "jsx-a11y", "react-hooks"],
+  "plugins": ["prettier", "react", "jest", "jsx-a11y", "react-hooks", "@typescript-eslint"],
   "env": {
     "es6": true,
     "browser": true,
@@ -30,13 +33,35 @@
     "valid-jsdoc": "off",
     "no-invalid-this": "off",
     "no-unused-expressions": ["error", { "allowShortCircuit": true }],
+    "no-irregular-whitespace": ["error", { "skipTemplates": true }],
+    "prefer-named-capture-group": "off",
     "react/jsx-key": "off",
     "react/display-name": "off",
     "react/no-unsafe": ["error", { "checkAliases": true }],
+    "react/prop-types": ["error", { "ignore": ["children"] }],
     "jsx-a11y/label-has-for": "off",
     "jest/no-disabled-tests": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/interface-name-prefix": ["error", "always"],
+    "@typescript-eslint/no-non-null-assertion": "off"
   },
-  "overrides": [{ "files": ["*.spec.js"], "rules": { "react/prop-types": "off" } }]
+  "overrides": [
+    {
+      "files": ["*.{ts,tsx}", "*.spec.{js,ts,tsx}"],
+      "rules": {
+        "react/prop-types": "off"
+      }
+    },
+    {
+      "files": ["*.js"],
+      "rules": {
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ]
 }

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 *.log
 .changelog
+.vscode
 
 # Package specific
 packages/**/dist

.lintstagedrc

@@ -7,6 +7,13 @@
       "prettier --write",
       "git add"
     ],
+    "*.{ts,tsx}": [
+      "stylelint",
+      "eslint",
+      "jest --config=utils/test/jest.config.js --findRelatedTests",
+      "prettier --write",
+      "git add"
+    ],
     "*.md": [
       "markdownlint",
       "prettier --write",

.travis.yml

@@ -16,9 +16,10 @@ before_install:
 install: yarn --frozen-lockfile --ignore-scripts
 
 script:
+  - yarn lerna bootstrap --ignore-scripts
   - yarn lint
+  - yarn tsc
   - yarn format
-  - yarn lerna bootstrap --ignore-scripts
   - yarn test:all --coverage --runInBand
 
 after_success: yarn coveralls < demo/coverage/lcov.info

.yarnclean

@@ -0,0 +1 @@
+@types/react-native

babel.config.js

@@ -18,6 +18,7 @@ module.exports = {
   plugins: [
     '@babel/plugin-transform-object-assign',
     '@babel/plugin-proposal-class-properties',
+    '@babel/proposal-object-rest-spread',
     'babel-plugin-styled-components'
   ]
 };

lerna.json

@@ -1,9 +1,7 @@
 {
   "version": "6.0.3",
   "npmClient": "yarn",
-  "npmClientArgs": [
-    "--no-lockfile"
-  ],
+  "npmClientArgs": ["--no-lockfile"],
   "changelog": {
     "repo": "zendeskgarden/react-components",
     "cacheDir": ".changelog",
@@ -18,6 +16,8 @@
   "ignoreChanges": [
     "*.md",
     "*.spec.js",
+    "*.spec.ts",
+    "*.spec.tsx",
     "**/__snapshots__/**",
     "styleguide.config.js"
   ],

package.json

@@ -7,14 +7,15 @@
     "build:analyze": "ANALYZE_BUNDLE=true yarn build:single",
     "build:demo": "yarn build && lerna run build:demo --stream",
     "build:single": "utils/scripts/scoped-npm-command.js --script build",
-    "format": "yarn format:package_json && yarn format:js && yarn format:markdown",
+    "format": "yarn format:package_json && yarn format:js && yarn format:ts && yarn format:markdown",
     "format:js": "prettier --loglevel warn --write 'packages/**/!(dist|umd)/*.js' && prettier --loglevel warn --write utils/**/*.js",
     "format:markdown": "prettier --loglevel warn --write 'packages/**/!(dist)/!(CHANGELOG)*.md'",
     "format:package_json": "prettier-package-json --write && lerna exec -- prettier-package-json --write",
+    "format:ts": "prettier --loglevel warn --write 'packages/**/!(dist|umd)/*.{ts,tsx}' && prettier --loglevel warn --write utils/**/*.{ts,tsx}",
     "postinstall": "lerna bootstrap",
     "lint": "yarn lint:css && yarn lint:js && yarn lint:markdown",
     "lint:css": "stylelint \"packages/*/src/**/*.js\" && stylelint \"utils/**/*.js\"",
-    "lint:js": "eslint packages/*/src/ utils/ --max-warnings 0",
+    "lint:js": "eslint packages/*/src/ utils/ --ext js,ts,tsx --max-warnings 0",
     "lint:markdown": "markdownlint API.md DEVELOPMENT.md README.md VERSIONING.md packages/*/src/**/*.md packages/*/src/*.md packages/*/README.md",
     "new": "utils/scripts/create-package.js",
     "prepare": "yarn build",
@@ -28,13 +29,23 @@
     "@babel/cli": "7.4.4",
     "@babel/core": "7.4.5",
     "@babel/plugin-proposal-class-properties": "7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "7.4.4",
     "@babel/plugin-transform-object-assign": "7.2.0",
     "@babel/polyfill": "7.4.4",
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
     "@svgr/webpack": "4.3.0",
     "@testing-library/react": "8.0.1",
+    "@types/classnames": "2.2.8",
+    "@types/jest": "24.0.13",
+    "@types/prop-types": "15.7.1",
     "@types/react": "16.8.19",
+    "@types/react-dom": "16.8.4",
+    "@types/styled-components": "4.1.16",
+    "@types/webpack": "4.4.32",
+    "@typescript-eslint/eslint-plugin": "1.10.2",
+    "@typescript-eslint/parser": "1.10.2",
+    "@zendeskgarden/css-bedrock": "7.0.26",
     "@zendeskgarden/css-variables": "6.3.4",
     "@zendeskgarden/eslint-config": "7.2.1",
     "@zendeskgarden/stylelint-config": "10.0.0",
@@ -54,6 +65,7 @@
     "enzyme-to-json": "3.3.5",
     "eslint": "5.16.0",
     "eslint-config-prettier": "4.3.0",
+    "eslint-loader": "2.1.2",
     "eslint-plugin-jest": "22.6.4",
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-notice": "0.7.8",
@@ -89,6 +101,7 @@
     "prettier": "1.18.2",
     "prettier-package-json": "2.1.0",
     "react": "16.8.6",
+    "react-docgen-typescript": "1.12.5",
     "react-dom": "16.8.6",
     "react-styleguidist": "8.0.6",
     "regenerator-runtime": "0.13.2",
@@ -100,6 +113,9 @@
     "stylelint-config-styled-components": "0.1.1",
     "stylelint-order": "3.0.0",
     "stylelint-processor-styled-components": "1.8.0",
+    "ts-jest": "24.0.2",
+    "ts-loader": "6.0.2",
+    "typescript": "3.5.1",
     "uglifyjs-webpack-plugin": "2.1.3",
     "webpack": "4.33.0",
     "webpack-bundle-analyzer": "3.3.2",

packages/dropdowns/package.json

@@ -18,6 +18,7 @@
     "build:demo": "../../utils/scripts/build-demo.sh",
     "start": "../../utils/scripts/start.sh"
   },
+  "types": "./dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-selection": "^0.2.3",
     "classnames": "^2.2.5",
@@ -32,6 +33,7 @@
     "styled-components": "^4.2.0"
   },
   "devDependencies": {
+    "@types/lodash.debounce": "^4.0.6",
     "@zendeskgarden/css-arrows": "3.1.1",
     "@zendeskgarden/css-forms": "7.0.10",
     "@zendeskgarden/css-menus": "9.0.10",
@@ -49,5 +51,5 @@
     "access": "public"
   },
   "zendeskgarden:library": "GardenDropdowns",
-  "zendeskgarden:src": "src/index.js"
+  "zendeskgarden:src": "src/index.ts"
 }