Skip to content

Commit f2e45c7

Browse files
coderdiazcoderdiaz
committed
refactor: moved from rollup to tsc with typescript
1 parent 3ac334a commit f2e45c7

19 files changed

+372
-410
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
node_modules/
22
yarn-error.log
3-
dist/
3+
lib/

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"trailingComma": "all",
3+
"singleQuote": true
4+
}

‎README.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
# React Card Brand
2+
23
> A zero-dependency React Hook to show the brand from a card type.
34
45
## Installation
6+
57
```sh
68
$ npm i -S react-card-brand
79
```
810

911
or install with Yarn if you prefer:
12+
1013
```sh
1114
yarn add react-card-brand
1215
```
1316

1417
## Usage
18+
1519
You can import `useCardBrand` into your component and use the `getSvgProps` callback to get a current brand from your card type.
1620

1721
```js
@@ -23,15 +27,16 @@ export default function Example() {
2327

2428
return (
2529
<div>
26-
<svg {...getSvgProps({ type: "visa", images })} />
30+
<svg {...getSvgProps({ type: 'visa', images })} />
2731
</div>
2832
);
2933
}
3034
```
3135

32-
3336
## Community
37+
3438
All feedback and suggestions are welcome!
3539

3640
## License
37-
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/react-card-brand/master/LICENSE)
41+
42+
This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/react-card-brand/master/LICENSE)

‎package.json

+15-19
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,19 @@
33
"version": "0.1.0",
44
"author": {
55
"name": "Javier Diaz Chamorro",
6-
"email": "hello@coderdiaz.me"
6+
"email": "hey@coderdiaz.dev"
77
},
88
"scripts": {
9-
"build": "rimraf dist && npm run lint && rollup -c",
10-
"prepare": "npm run build",
11-
"lint": "tslint -p ."
9+
"start": "tsc -w",
10+
"build": "rimraf lib && yarn lint && tsc",
11+
"prepare": "yarn build",
12+
"format": "prettier --write \"src/**/*.ts\" \"lib/**/*.js\"",
13+
"lint": "tslint -p tsconfig.json"
1214
},
13-
"main": "dist/react-card-brand.cjs.js",
14-
"module": "dist/react-card-brand.esm.js",
15-
"unpkg": "dist/react-card-brand.js",
16-
"jsdelivr": "dist/react-card-brand.js",
17-
"cdn": "dist/react-card-brand.js",
15+
"main": "lib/index.js",
16+
"types": "lib/index.d.ts",
1817
"files": [
19-
"dist"
18+
"lib/**/*"
2019
],
2120
"repository": {
2221
"type": "git",
@@ -26,15 +25,12 @@
2625
"url": "https://github.com/coderdiaz/react-card-brand/issues"
2726
},
2827
"devDependencies": {
29-
"@types/react": "^16.9.17",
30-
"rimraf": "^3.0.0",
31-
"rollup": "^1.27.13",
32-
"rollup-plugin-commonjs": "^10.1.0",
33-
"rollup-plugin-node-resolve": "^5.2.0",
34-
"rollup-plugin-terser": "^5.1.3",
35-
"rollup-plugin-typescript2": "^0.25.3",
36-
"tslint": "^5.20.1",
37-
"typescript": "^3.7.3"
28+
"@types/react": "^18.2.15",
29+
"prettier": "^3.0.0",
30+
"rimraf": "^5.0.1",
31+
"tslint": "^6.1.3",
32+
"tslint-config-prettier": "^1.18.0",
33+
"typescript": "^5.1.6"
3834
},
3935
"peerDependencies": {
4036
"react": "^16.12.0",

‎src/images/amex.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
export default (
42
<g fill="none" fillRule="evenodd">
53
<rect fill="#016fd0" height="16" rx="2" width="24" />

‎src/images/dinersclub.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import * as React from "react";
2-
31
export default (
42
<g id="319" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
5-
<g id="New-Icons" transform="translate(-320.000000, -280.000000)" fillRule="nonzero">
3+
<g
4+
id="New-Icons"
5+
transform="translate(-320.000000, -280.000000)"
6+
fillRule="nonzero"
7+
>
68
<g id="Card-Brands" transform="translate(40.000000, 200.000000)">
79
<g id="Color" transform="translate(0.000000, 80.000000)">
810
<g id="Diners-Club" transform="translate(280.000000, 0.000000)">

‎src/images/discover.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import * as React from "react";
2-
31
export default (
42
<g id="319" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
5-
<g id="New-Icons" transform="translate(-280.000000, -280.000000)" fillRule="nonzero">
3+
<g
4+
id="New-Icons"
5+
transform="translate(-280.000000, -280.000000)"
6+
fillRule="nonzero"
7+
>
68
<g id="Card-Brands" transform="translate(40.000000, 200.000000)">
79
<g id="Color" transform="translate(0.000000, 80.000000)">
810
<g id="Discover" transform="translate(240.000000, 0.000000)">

‎src/images/hipercard.tsx

+15-4
Large diffs are not rendered by default.

‎src/images/index.ts

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import amex from "./amex.js";
2-
import dinersclub from "./dinersclub.js";
3-
import discover from "./discover.js";
4-
import hipercard from "./hipercard.js";
5-
import jcb from "./jcb.js";
6-
import unionpay from "./unionpay.js";
7-
import mastercard from "./mastercard.js";
8-
import placeholder from "./placeholder.js";
9-
import visa from "./visa.js";
1+
import amex from './amex.js';
2+
import dinersclub from './dinersclub.js';
3+
import discover from './discover.js';
4+
import hipercard from './hipercard.js';
5+
import jcb from './jcb.js';
6+
import unionpay from './unionpay.js';
7+
import mastercard from './mastercard.js';
8+
import placeholder from './placeholder.js';
9+
import visa from './visa.js';
1010

1111
export default {
1212
amex,

‎src/images/jcb.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
export default (
42
<g fill="none">
53
<path

‎src/images/mastercard.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
export default (
42
<g fill="none" fillRule="evenodd">
53
<rect fill="#252525" height="16" rx="2" width="24" />

‎src/images/placeholder.tsx

+18-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import * as React from "react";
2-
31
export default (
42
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
53
<g>
6-
<rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="24" height="16" rx="1" />
4+
<rect
5+
id="Rectangle"
6+
fill="#D8D8D8"
7+
x="0"
8+
y="0"
9+
width="24"
10+
height="16"
11+
rx="1"
12+
/>
713
<rect
814
id="Rectangle"
915
fill="#A6A6A6"
@@ -13,7 +19,15 @@ export default (
1319
height="1.88235294"
1420
rx="0.941176471"
1521
/>
16-
<rect id="Rectangle" fill="#FFFFFF" x="16.6153846" y="3.76470588" width="4.61538462" height="2.82352941" rx="1" />
22+
<rect
23+
id="Rectangle"
24+
fill="#FFFFFF"
25+
x="16.6153846"
26+
y="3.76470588"
27+
width="4.61538462"
28+
height="2.82352941"
29+
rx="1"
30+
/>
1731
<rect
1832
id="Rectangle"
1933
fill="#A6A6A6"

‎src/images/unionpay.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from "react";
2-
31
export default (
42
<g fill="none">
53
<path

‎src/images/visa.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import * as React from "react";
2-
31
export default (
42
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
5-
<g id="New-Icons" transform="translate(-80.000000, -280.000000)" fillRule="nonzero">
3+
<g
4+
id="New-Icons"
5+
transform="translate(-80.000000, -280.000000)"
6+
fillRule="nonzero"
7+
>
68
<g id="Card-Brands" transform="translate(40.000000, 200.000000)">
79
<g id="Color" transform="translate(0.000000, 80.000000)">
810
<g id="Visa" transform="translate(40.000000, 0.000000)">

‎src/index.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export { default as useCardBrand } from "./useCardBrand";
2-
export { default as images } from "./images";
1+
export { default as useCardBrand } from './useCardBrand';
2+
export { default as images } from './images';

‎src/useCardBrand.ts

+22-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
1-
import * as React from "react";
1+
import * as React from 'react';
2+
3+
interface UseCardBrandProps {
4+
images?: {
5+
[key: string]: React.ReactNode | JSX.Element;
6+
};
7+
ariaLabel?: string;
8+
type?: string;
9+
}
210

311
export default function useCardBrand() {
4-
const getSvgProps = React.useCallback((props = {}) => {
12+
const getSvgProps = React.useCallback((props: UseCardBrandProps = {}) => {
513
const images = props.images || {};
6-
return {
7-
"aria-label": props.ariaLabel ? props.ariaLabel : "Placeholder card",
8-
"children": images[props.type ? props.type : "placeholder"] || images.placeholder,
9-
"width": "1.5em",
10-
"height": "1em",
11-
"viewBox": "0 0 24 16",
12-
...props,
13-
};
14+
15+
return React.useMemo(
16+
() => ({
17+
'aria-label': props.ariaLabel ?? 'Placeholder card',
18+
children: images[props.type ?? 'placeholder'] || images,
19+
width: '1.5em',
20+
height: '1em',
21+
viewBox: '0 0 24 16',
22+
...props,
23+
}),
24+
[props.ariaLabel, props.type],
25+
);
1426
}, []);
1527

1628
return {

‎tsconfig.json

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
{
22
"compilerOptions": {
3-
"module": "es6",
4-
"moduleResolution": "node",
5-
"outDir": "./dist",
6-
"target": "es5",
7-
"jsx": "react",
3+
"jsx": "react-jsx",
4+
"target": "ES2021",
5+
"module": "commonjs",
86
"declaration": true,
7+
"outDir": "./lib",
8+
"strict": true
99
},
10-
"include": [
11-
"src"
12-
],
13-
"exclude": [
14-
"node_modules"
15-
]
16-
}
10+
"include": ["src"],
11+
"exclude": ["node_modules"]
12+
}

‎tslint.json

+4-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,7 @@
11
{
2-
"defaultSeverity": "error",
3-
"extends": ["tslint:recommended"],
4-
"jsRules": {
5-
"no-unused-expression": true
6-
},
2+
"extends": ["tslint:recommended", "tslint-config-prettier"],
73
"rules": {
8-
"member-access": [false],
9-
"ordered-imports": [false],
10-
"max-line-length": [true, 150],
11-
"member-ordering": [false],
12-
"interface-name": [false],
13-
"arrow-parens": false,
14-
"no-console": false,
15-
"object-literal-sort-keys": false
16-
},
17-
"rulesDirectory": []
4+
"no-shadowed-variable": false,
5+
"variable-name": false
6+
}
187
}

0 commit comments

Comments
 (0)