Skip to content

Commit c1ebb08

Browse files
christopher-stripechristopher-stripe
committed
Use TypeScript
1 parent b646da0 commit c1ebb08

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+4602
-3016
lines changed

‎.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["@babel/preset-react", "@babel/preset-env", "@babel/preset-flow"]
2+
"presets": ["@babel/preset-react", "@babel/preset-env"]
33
}

‎.eslintignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
lib/**/*.js
2-
dist/**/*.js
1+
dist

‎.eslintrc.yml

+29-25
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,47 @@
11
---
2+
root: true
23
extends:
3-
- airbnb
4-
- plugin:flowtype/recommended
5-
# overwrite any rules that may conflict with prettier
6-
- prettier
7-
- prettier/flowtype
8-
- prettier/react
9-
- prettier/standard
10-
parser: 'babel-eslint'
4+
- eslint:recommended
5+
- plugin:@typescript-eslint/eslint-recommended
6+
- plugin:@typescript-eslint/recommended
7+
- plugin:react/recommended
8+
parser: '@typescript-eslint/parser'
9+
parserOptions:
10+
# project: './tsconfig.json'
11+
ecmaFeatures:
12+
jsx: true
1113
plugins:
12-
- flowtype
14+
- '@typescript-eslint'
1315
- jest
16+
- react
1417
- react-hooks
18+
settings:
19+
react:
20+
version: detect
1521
env:
1622
jest/globals: true
1723
browser: true
24+
es6: true
1825
rules:
19-
react-hooks/rules-of-hooks: 2
20-
react-hooks/exhaustive-deps: 1
21-
react/jsx-filename-extension: 0
22-
react/jsx-props-no-spreading: 0
23-
react/require-default-props: 0
24-
no-duplicate-imports: 2 # doesn't support flow imports.
2526
no-console: 0
2627
func-style: 2
2728
consistent-return: 2
28-
jsx-a11y/label-has-associated-control: 0
29-
react/prop-types: 0
3029
prefer-arrow-callback:
3130
- 2
3231
- allowNamedFunctions: false
3332
allowUnboundThis: false
34-
flowtype/no-primitive-constructor-types: 2
35-
flowtype/require-valid-file-annotation:
36-
- 2
37-
- 'always'
38-
- annotationStyle: 'line'
39-
no-unused-vars:
40-
- 2
41-
- ignoreRestSiblings: true
4233
jest/no-disabled-tests: 2
4334
jest/no-focused-tests: 2
35+
react/prop-types: 0
36+
react/forbid-prop-types: 0
37+
react/no-unused-prop-types: 0
38+
react-hooks/rules-of-hooks: 2
39+
react-hooks/exhaustive-deps: 1
40+
'@typescript-eslint/no-explicit-any': 0
41+
'@typescript-eslint/no-empty-interface': 0
42+
'@typescript-eslint/explicit-function-return-type': 0
43+
'@typescript-eslint/camelcase': 0
44+
'@typescript-eslint/no-empty-function': 0
45+
'@typescript-eslint/no-unused-vars':
46+
- 2
47+
- varsIgnorePattern: ^_

‎.storybook/config.js

-7
This file was deleted.

‎.storybook/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
stories: ['./example.stories.js'],
5+
addons: [
6+
{
7+
name: '@storybook/preset-typescript',
8+
options: {include: [path.resolve(__dirname, '..')]},
9+
},
10+
],
11+
};

‎.travis.yml

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
language: node_js
2-
node_js:
3-
- '8'
2+
node_js: 'lts/*'
43
script:
5-
- npm run lint
6-
- npm run flow
7-
- npm run test
8-
- npm run prettier-list-different
4+
- yarn run ci
95
cache: yarn

‎README.md

+10
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,16 @@ upgrade React to use this library. If you prefer not to upgrade your React
133133
version, we recommend using legacy
134134
[`react-stripe-elements`](https://github.com/stripe/react-stripe-elements).
135135

136+
### TypeScript support
137+
138+
React Stripe.js is packaged with TypeScript declarations. Some types are pulled
139+
from [`@stripe/stripe-js`](https://github.com/stripe/stripe-js)—be sure to add
140+
`@stripe/stripe-js` as a dependency to your project for full TypeScript support.
141+
142+
Typings in React Stripe.js follow the same
143+
[versioning policy](https://github.com/stripe/stripe-js#typescript-support) as
144+
`@stripe/stripe-js`.
145+
136146
### Contributing
137147

138148
If you would like to contribute to React Stripe.js, please make sure to read our

‎examples/class-components/0-Card-Minimal.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {CardElement, Elements, ElementsConsumer} from '../../src';

‎examples/class-components/1-Card-Detailed.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {CardElement, Elements, ElementsConsumer} from '../../src';

‎examples/class-components/2-Split-Card.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {

‎examples/class-components/3-Payment-Request-Button.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {

‎examples/class-components/4-IBAN.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {IbanElement, Elements, ElementsConsumer} from '../../src';

‎examples/class-components/5-iDEAL.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {IdealBankElement, Elements, ElementsConsumer} from '../../src';

‎examples/hooks/0-Card-Minimal.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {CardElement, Elements, useElements, useStripe} from '../../src';

‎examples/hooks/1-Card-Detailed.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React, {useState} from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {CardElement, Elements, useElements, useStripe} from '../../src';

‎examples/hooks/2-Split-Card.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React, {useState} from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {

‎examples/hooks/3-Payment-Request-Button.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React, {useState, useEffect} from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {PaymentRequestButtonElement, Elements, useStripe} from '../../src';

‎examples/hooks/4-IBAN.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React, {useState} from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {IbanElement, Elements, useElements, useStripe} from '../../src';

‎examples/hooks/5-iDEAL.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @noflow
2-
31
import React, {useState} from 'react';
42
import {loadStripe} from '@stripe/stripe-js';
53
import {IdealBankElement, Elements, useElements, useStripe} from '../../src';

‎examples/util.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// @noflow
21
/* eslint-disable no-console */
32
import React, {useState, useEffect} from 'react';
43

‎package.json

+32-20
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@
77
"jsnext:main": "dist/react-stripe.esm.js",
88
"browser:min": "dist/react-stripe.umd.min.js",
99
"browser": "dist/react-stripe.umd.js",
10+
"types": "dist/react-stripe.d.ts",
1011
"scripts": {
1112
"test": "jest",
12-
"rollup": "rollup -c",
13-
"lint": "eslint src examples",
14-
"flow": "flow",
15-
"build": "yarn run lint && yarn run flow && yarn run rollup",
13+
"lint": "eslint '{src,examples}/**/*.{ts,tsx,js}'",
14+
"lint:prettier": "prettier './**/*.js' './**/*.css' './**/*.md' --list-different",
15+
"typecheck": "tsc",
16+
"build": "yarn run clean && yarn run rollup -c",
1617
"clean": "rimraf dist",
17-
"prettier": "prettier './**/*.js' './**/*.css' './**/*.md' --write",
18-
"prettier-list-different": "prettier './**/*.js' './**/*.css' './**/*.md' --list-different",
19-
"prepublish": "yarn run clean && yarn run build",
20-
"publish": "npm publish --access public",
18+
"prettier:fix": "prettier './**/*.js' './**/*.css' './**/*.md' --write",
19+
"ci": "yarn run lint && yarn run lint:prettier && yarn run test && yarn run typecheck && yarn run build",
20+
"prepublish": "yarn run ci",
2121
"doctoc": "doctoc README.md",
2222
"storybook": "start-storybook -p 6006 "
2323
},
@@ -28,9 +28,6 @@
2828
],
2929
"author": "Stripe (https://www.stripe.com)",
3030
"license": "MIT",
31-
"dependencies": {
32-
"prop-types": "^15.7.2"
33-
},
3431
"repository": {
3532
"type": "git",
3633
"url": "https://github.com/stripe/react-stripe-js.git"
@@ -40,51 +37,66 @@
4037
"src"
4138
],
4239
"jest": {
40+
"preset": "ts-jest/presets/js-with-ts",
4341
"setupFilesAfterEnv": [
4442
"<rootDir>/test/setupJest.js"
4543
]
4644
},
45+
"dependencies": {
46+
"prop-types": "^15.7.2"
47+
},
4748
"devDependencies": {
4849
"@babel/cli": "^7.7.0",
4950
"@babel/core": "^7.7.2",
5051
"@babel/preset-env": "^7.7.1",
51-
"@babel/preset-flow": "^7.0.0",
5252
"@babel/preset-react": "^7.7.0",
53+
"@stripe/stripe-js": "1.0.0-beta.5",
5354
"@storybook/addon-actions": "^5.2.6",
5455
"@storybook/addon-links": "^5.2.6",
5556
"@storybook/addons": "^5.2.6",
57+
"@storybook/preset-typescript": "^1.2.0",
5658
"@storybook/react": "^5.2.6",
57-
"@stripe/stripe-js": "^1.0.0-beta.3",
59+
"@types/enzyme": "^3.10.4",
60+
"@types/jest": "^25.1.1",
61+
"@types/react": "^16.9.19",
62+
"@types/react-dom": "^16.9.5",
63+
"@typescript-eslint/eslint-plugin": "^2.18.0",
64+
"@typescript-eslint/parser": "^2.18.0",
65+
"@wessberg/rollup-plugin-ts": "^1.2.15",
5866
"babel-eslint": "^10.0.3",
5967
"babel-jest": "^24.9.0",
6068
"babel-loader": "^8.0.6",
6169
"enzyme": "3.10",
6270
"enzyme-adapter-react-16": "^1.14.0",
6371
"eslint": "6.6.0",
6472
"eslint-config-airbnb": "18.0.1",
65-
"eslint-config-prettier": "^6.5.0",
66-
"eslint-plugin-flowtype": "^4.3.0",
73+
"eslint-config-prettier": "^6.10.0",
6774
"eslint-plugin-import": "^2.18.2",
6875
"eslint-plugin-jest": "^22.6.3",
6976
"eslint-plugin-jsx-a11y": "^6.2.3",
70-
"eslint-plugin-prettier": "^3.1.1",
77+
"eslint-plugin-prettier": "^3.1.2",
7178
"eslint-plugin-react": "^7.14.3",
7279
"eslint-plugin-react-hooks": "^1.7.0",
73-
"flow-bin": "^0.111.3",
74-
"jest": "^24.9.0",
80+
"fork-ts-checker-webpack-plugin": "^4.0.3",
81+
"jest": "^25.1.0",
7582
"prettier": "^1.19.1",
7683
"react": "~16.9.0",
84+
"react-docgen-typescript-loader": "^3.6.0",
7785
"react-dom": "~16.9.0",
7886
"rimraf": "^2.6.2",
7987
"rollup": "^1.27.0",
8088
"rollup-plugin-babel": "^4.3.3",
8189
"rollup-plugin-commonjs": "^10.1.0",
8290
"rollup-plugin-node-resolve": "^5.2.0",
8391
"rollup-plugin-replace": "^2.2.0",
84-
"rollup-plugin-terser": "^5.1.2"
92+
"rollup-plugin-terser": "^5.1.2",
93+
"ts-jest": "^25.1.0",
94+
"ts-loader": "^6.2.1",
95+
"typescript": "^3.7.5"
8596
},
8697
"peerDependencies": {
8798
"react": "^16.8.0",
88-
"react-dom": "^16.8.0"
99+
"react-dom": "^16.8.0",
100+
"@stripe/stripe-js": "1.0.0-beta.5"
89101
}
90102
}

‎rollup.config.js

+9-24
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
1-
// @noflow
21
import babel from 'rollup-plugin-babel';
32
import commonjs from 'rollup-plugin-commonjs';
43
import resolve from 'rollup-plugin-node-resolve';
54
import {terser} from 'rollup-plugin-terser';
65
import replace from 'rollup-plugin-replace';
6+
import ts from '@wessberg/rollup-plugin-ts';
77
import pkg from './package.json';
88

99
export default [
1010
{
11-
input: 'src/index.js',
11+
input: 'src/index.ts',
1212
external: ['react', 'prop-types'],
1313
output: [
1414
{file: pkg.main, format: 'cjs'},
1515
{file: pkg.module, format: 'es'},
1616
],
17-
plugins: [
18-
resolve(),
19-
babel({
20-
exclude: 'node_modules/**',
21-
}),
22-
commonjs(),
23-
],
17+
plugins: [ts(), resolve(), babel(), commonjs()],
2418
},
2519
// UMD build with inline PropTypes
2620
{
27-
input: 'src/index.js',
21+
input: 'src/index.ts',
2822
external: ['react'],
2923
output: [
3024
{
@@ -36,17 +30,11 @@ export default [
3630
},
3731
},
3832
],
39-
plugins: [
40-
resolve(),
41-
babel({
42-
exclude: 'node_modules/**',
43-
}),
44-
commonjs(),
45-
],
33+
plugins: [ts(), resolve(), babel(), commonjs()],
4634
},
4735
// Minified UMD Build without PropTypes
4836
{
49-
input: 'src/index.js',
37+
input: 'src/index.ts',
5038
external: ['react'],
5139
output: [
5240
{
@@ -59,13 +47,10 @@ export default [
5947
},
6048
],
6149
plugins: [
50+
ts(),
6251
resolve(),
63-
babel({
64-
exclude: 'node_modules/**',
65-
}),
66-
replace({
67-
'process.env.NODE_ENV': JSON.stringify('production'),
68-
}),
52+
babel(),
53+
replace({'process.env.NODE_ENV': JSON.stringify('production')}),
6954
commonjs(),
7055
terser(),
7156
],

0 commit comments

Comments
 (0)