update ts defintiions

downshift-js · Aug 17, 2017 · 47c0fde · 47c0fde
1 parent 669831a
commit 47c0fde
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 176 deletions.
diff --git a/index.d.ts b/index.d.ts
diff --git a/other/TYPESCRIPT_USAGE.md b/other/TYPESCRIPT_USAGE.md
@@ -0,0 +1,5 @@
+# Typescript Usage
+
+The current bundled Typescript definitions are incomplete and based around the needs of the developers who contributed them.
+
+Pull requests to improve them are welcome and appreciated. If you've never contributed to open source before, then you may find [this free video course](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github) helpful.
diff --git a/package-scripts.js b/package-scripts.js
@@ -20,8 +20,10 @@ module.exports = {
       },
     },
     test: {
-      default: crossEnv('NODE_ENV=test jest --coverage'),
+      default: series.nps('test.jest', 'test.ts'),
+      jest: crossEnv('NODE_ENV=test jest --coverage'),
       update: crossEnv('NODE_ENV=test jest --coverage --updateSnapshot'),
+      ts: 'tsc --noEmit -p ./tsconfig.json',
       watch: crossEnv('NODE_ENV=test jest --watch'),
       build: {
         description: 'validates the built files',

diff --git a/package.json b/package.json
@@ -1,72 +1,74 @@
 {
-  "name": "downshift",
-  "version": "1.0.0-rc.1",
-  "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",
-  "main": "dist/downshift.cjs.js",
-  "jsnext:main": "dist/downshift.es.js",
-  "module": "dist/downshift.es.js",
-  "scripts": {
-    "start": "nps",
-    "test": "nps test",
-    "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\""
-  },
-  "files": ["dist"],
-  "keywords": [],
-  "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=15",
-    "prop-types": ">=15"
-  },
-  "devDependencies": {
-    "@storybook/react": "^3.2.3",
-    "all-contributors-cli": "^4.3.0",
-    "babel-cli": "^6.24.1",
-    "babel-jest": "^20.0.3",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-inline-environment-variables": "^0.1.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "enzyme": "^2.9.1",
-    "enzyme-to-json": "^1.5.1",
-    "eslint": "^4.2.0",
-    "eslint-config-kentcdodds": "^12.4.2",
-    "husky": "^0.14.3",
-    "jest": "^20.0.4",
-    "lint-staged": "^4.0.1",
-    "nps": "^5.4.0",
-    "nps-utils": "^1.2.0",
-    "opt-cli": "^1.5.1",
-    "preact": "^8.2.1",
-    "prettier-eslint-cli": "^4.1.1",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
-    "rollup": "^0.45.2",
-    "rollup-plugin-alias": "^1.3.1",
-    "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-commonjs": "^8.1.0",
-    "rollup-plugin-json": "^2.3.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-uglify": "^2.0.1"
-  },
-  "lint-staged": {
-    "*.js": [
-      "prettier-eslint --write --no-semi --single-quote --trailing-comma=all --no-bracket-spacing",
-      "git add"
-    ]
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/paypal/downshift.git"
-  },
-  "bugs": {
-    "url": "https://github.com/paypal/downshift/issues"
-  },
-  "homepage": "https://github.com/paypal/downshift#readme"
+    "name": "downshift",
+    "version": "1.0.0-rc.1",
+    "description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",
+    "main": "dist/downshift.cjs.js",
+    "jsnext:main": "dist/downshift.es.js",
+    "module": "dist/downshift.es.js",
+    "typings": "typings/index.d.ts",
+    "scripts": {
+        "start": "nps",
+        "test": "nps test",
+        "precommit": "lint-staged && opt --in pre-commit --exec \"npm start validate\""
+    },
+    "files": ["dist"],
+    "keywords": [],
+    "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": ">=15",
+        "prop-types": ">=15"
+    },
+    "devDependencies": {
+        "@storybook/react": "^3.2.3",
+        "all-contributors-cli": "^4.3.0",
+        "babel-cli": "^6.24.1",
+        "babel-jest": "^20.0.3",
+        "babel-plugin-external-helpers": "^6.22.0",
+        "babel-plugin-transform-class-properties": "^6.24.1",
+        "babel-plugin-transform-inline-environment-variables": "^0.1.1",
+        "babel-plugin-transform-object-rest-spread": "^6.23.0",
+        "babel-plugin-transform-react-jsx": "^6.24.1",
+        "babel-preset-env": "^1.6.0",
+        "babel-preset-react": "^6.24.1",
+        "babel-register": "^6.24.1",
+        "enzyme": "^2.9.1",
+        "enzyme-to-json": "^1.5.1",
+        "eslint": "^4.2.0",
+        "eslint-config-kentcdodds": "^12.4.2",
+        "husky": "^0.14.3",
+        "jest": "^20.0.4",
+        "lint-staged": "^4.0.1",
+        "nps": "^5.4.0",
+        "nps-utils": "^1.2.0",
+        "opt-cli": "^1.5.1",
+        "preact": "^8.2.1",
+        "prettier-eslint-cli": "^4.1.1",
+        "prop-types": "^15.5.10",
+        "react": "^15.6.1",
+        "react-dom": "^15.6.1",
+        "react-test-renderer": "^15.6.1",
+        "rollup": "^0.45.2",
+        "rollup-plugin-alias": "^1.3.1",
+        "rollup-plugin-babel": "^2.7.1",
+        "rollup-plugin-commonjs": "^8.1.0",
+        "rollup-plugin-json": "^2.3.0",
+        "rollup-plugin-node-resolve": "^3.0.0",
+        "rollup-plugin-uglify": "^2.0.1",
+        "typescript": "^2.4.2"
+    },
+    "lint-staged": {
+        "*.js": [
+            "prettier-eslint --write --no-semi --single-quote --trailing-comma=all --no-bracket-spacing",
+            "git add"
+        ]
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/paypal/downshift.git"
+    },
+    "bugs": {
+        "url": "https://github.com/paypal/downshift/issues"
+    },
+    "homepage": "https://github.com/paypal/downshift#readme"
 }
diff --git a/test/basic.test.tsx b/test/basic.test.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import Downshift, { ChangeOptions } from '../';
+
+interface Props { }
+
+interface State {
+    items: Array<any>;
+}
+
+export default class App extends React.Component<Props, State> {
+    state: State = {
+        items: ['apple', 'orange', 'carrot'],
+    };
+
+    onChange = ({ selectedItem, previousItem }: ChangeOptions) => {
+        console.log('selectedItem', selectedItem);
+        console.log('previousItem', previousItem);
+    };
+
+    render() {
+        const items = this.state.items;
+
+        return (
+            <Downshift onChange={this.onChange}>
+                {({
+                    getInputProps,
+                    getItemProps,
+                    isOpen,
+                    inputValue,
+                    selectedItem,
+                    highlightedIndex,
+                }) =>
+                    <div>
+                        <input
+                            {...getInputProps({
+                                placeholder: 'Favorite color ?',
+                            }) }
+                        />
+                        {isOpen
+                            ? <div style={{ border: '1px solid #ccc' }}>
+                                {items
+                                    .filter(
+                                    (i: any) =>
+                                        !inputValue ||
+                                        i
+                                            .toLowerCase()
+                                            .includes(
+                                            inputValue.toLowerCase()
+                                            )
+                                    )
+                                    .map((item: any, index: number) =>
+                                        <div
+                                            {...getItemProps({ item, index }) }
+                                            key={item}
+                                            style={{
+                                                backgroundColor: highlightedIndex ===
+                                                    index
+                                                    ? 'gray'
+                                                    : 'white',
+                                                fontWeight: selectedItem ===
+                                                    item
+                                                    ? 'bold'
+                                                    : 'normal',
+                                            }}
+                                        >
+                                            {item}
+                                        </div>
+                                    )}
+                            </div>
+                            : null}
+                    </div>}
+            </Downshift>
+        );
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "jsx": "react"
+    }
+}