Skip to content

Commit c2ec8cb

Browse files
ugogougogo
authored
Merge pull request #59 from ugogo/feat/v2
feat/v2
2 parents 7df4a95 + 8e30762 commit c2ec8cb

26 files changed

+8355
-17703
lines changed

‎.eslintrc‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,25 @@
11
{
2+
"root": true,
23
"parser": "@typescript-eslint/parser",
4+
"parserOptions": {
5+
"project": ["./tsconfig.json", "rollup.config.js"]
6+
},
7+
"plugins": ["@typescript-eslint"],
38
"extends": [
9+
"eslint:recommended",
10+
"plugin:@typescript-eslint/recommended",
11+
"plugin:@typescript-eslint/recommended-requiring-type-checking",
12+
"plugin:typescript-sort-keys/recommended",
413
"standard",
14+
"standard-jsx",
515
"standard-react",
6-
"prettier",
7-
"plugin:@typescript-eslint/eslint-recommended"
16+
"prettier"
817
],
918
"env": {
10-
"node": true
11-
},
12-
"parserOptions": {
13-
"ecmaVersion": 2020,
14-
"ecmaFeatures": {
15-
"legacyDecorators": true,
16-
"jsx": true
17-
}
18-
},
19-
"settings": {
20-
"react": {
21-
"version": "16"
22-
}
19+
"browser": true
2320
},
2421
"rules": {
25-
"space-before-function-paren": 0,
26-
"react/prop-types": 0,
27-
"react/jsx-handler-names": 0,
28-
"react/jsx-fragments": 0,
29-
"react/no-unused-prop-types": 0,
30-
"import/export": 0
22+
"react/jsx-sort-props": "error",
23+
"react/sort-prop-types": "error"
3124
}
3225
}

‎.gitignore‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ node_modules
66

77
# builds
88
build
9-
dist
10-
.rpt2_cache
9+
lib
1110

1211
# misc
1312
.DS_Store

‎.storybook/main.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
"stories": [
3+
"../src/**/*.stories.mdx",
4+
"../src/**/*.stories.@(js|jsx|ts|tsx)"
5+
],
6+
"addons": [
7+
"@storybook/addon-links",
8+
"@storybook/addon-essentials",
9+
"@storybook/addon-interactions"
10+
],
11+
"framework": "@storybook/react"
12+
}

‎.storybook/preview.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const parameters = {
2+
actions: {
3+
argTypesRegex: "^on[A-Z].*"
4+
},
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/,
9+
},
10+
},
11+
}

‎README.md‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# react-input-verification-code
22

3-
A verification code input, autocompletion friendly
3+
A verification code input, mobile autocompletion friendly
44

55
[![NPM](https://img.shields.io/npm/v/react-input-verification-code.svg)](https://www.npmjs.com/package/react-input-verification-code) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
66

77
## Features
88

99
- Support native autocompletion when receiving a code via SMS
10-
- Support pasted string (when number)
10+
- Support pasted string
1111

1212
## Examples
1313

@@ -20,54 +20,61 @@ A verification code input, autocompletion friendly
2020
```
2121
{
2222
"react": ">=16.0.0",
23-
"styled-components": ">=5.0.0"
23+
"react-dom": ">=16.0.0"
2424
}
2525
```
26+
2627
## Install
2728

2829
```bash
2930
yarn add react-input-verification-code
30-
31-
# if you don't use `styled-components` in your project
32-
# you have to install it as well
33-
yarn add react-input-verification-code styled-components
3431
```
3532

3633
## Usage
3734

3835
```tsx
39-
import * as React from 'react';
40-
import ReactInputVerificationCode from 'react-input-verification-code';
36+
import React from 'react';
37+
import ReactInputVerificationCode, {
38+
ReactInputVerificationCodeProps,
39+
} from 'react-input-verification-code';
40+
41+
const customProps: ReactInputVerificationCodeProps = {
42+
autoFocus: true,
43+
};
4144

4245
export default function App() {
43-
return <ReactInputVerificationCode />;
46+
return <ReactInputVerificationCode {...customProps} />;
4447
}
4548
```
4649

4750
## API
4851

4952
### Props
5053

51-
| Key | Type | Default | Required | Description |
52-
| ----------- | ---------- | ---------- | -------- | --------------------------------------------------------- |
53-
| autoFocus | `boolean` | false | false | Focus on render |
54-
| length | `number` | `4` | false | How many items will be rendered |
55-
| onChange | `function` | `() => {}` | false | Function called when the value changes |
56-
| onCompleted | `function` | `() => {}` | false | Function called when the code is completed |
57-
| placeholder | `string` | `·` | false | String rendered in each item when no value has been typed |
58-
| value | `string` | `() => {}` | false | Control internal input value |
59-
| type | `text` or `password` | `text` | false | Display the item value or a password mask |
60-
| passwordMask | `string` | `•` | false | Password mask |
61-
62-
### CSS Properties
63-
64-
The following CSS properties are set globally so you can easily override them to fit your needs
65-
66-
| Key | Default | Description |
67-
| ------------------------------------------ | -------- | ----------------------- |
68-
| `--ReactInputVerificationCode-itemWidth` | `4.5rem` | Width of an item |
69-
| `--ReactInputVerificationCode-itemHeight` | `5rem` | Height of an item |
70-
| `--ReactInputVerificationCode-itemSpacing` | `1rem` | Space between two items |
54+
| Key | Type | Default | Required | Description |
55+
| ----------- | ---------------------------------------------- | ------------ | -------- | -------------------------------------------------- |
56+
| autoFocus | `boolean` | false | false | Should focus on first render |
57+
| inputProps | `React.InputHTMLAttributes<HTMLInputElement>;` | `undefined` | false | Allow passing custom props into the inputs |
58+
| length | `number` | `4` | false | How many inputs will be rendered |
59+
| onChange | `function` | `() => null` | false | Function called when the value changes |
60+
| onCompleted | `function` | `() => null` | false | Function called when the value is completed |
61+
| placeholder | `string` | `·` | false | Inputs placeholder |
62+
| value | `string` | `""` | false | Default value |
63+
| type | `'alphanumeric, number'` | `number` | false | Should accepts alphanumeric values or only numbers |
64+
65+
### Custom Styles
66+
67+
Simply override the styles using the following classnames
68+
69+
```css
70+
.ReactInputVerificationCode-container {
71+
/* */
72+
}
73+
74+
.ReactInputVerificationCode-item {
75+
/* */
76+
}
77+
```
7178

7279
## License
7380

‎package.json‎

Lines changed: 79 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,110 @@
11
{
22
"name": "react-input-verification-code",
3-
"version": "1.0.2",
4-
"description": "A verification code input, autocompletion friendly",
5-
"author": "ugogo",
6-
"license": "MIT",
3+
"version": "2.0.0-1",
4+
"description": "A React Verification Code Input, Autocompletion Friendly",
75
"repository": "ugogo/react-input-verification-code",
8-
"main": "dist/index.js",
9-
"module": "dist/index.modern.js",
10-
"source": "src/index.tsx",
6+
"main": "lib/cjs/index.js",
7+
"module": "lib/esm/index.js",
8+
"types": "lib/esm/index.d.ts",
9+
"files": [
10+
"lib"
11+
],
1112
"engines": {
1213
"node": ">=10"
1314
},
1415
"publishConfig": {
1516
"access": "public",
1617
"registry": "https://registry.npmjs.org/"
1718
},
19+
"keywords": [
20+
"react",
21+
"verify",
22+
"verification",
23+
"code",
24+
"pin-code",
25+
"authentication-code",
26+
"input",
27+
"autocompletion",
28+
"otp",
29+
"otp-code",
30+
"one-time-password"
31+
],
1832
"release-it": {
33+
"hooks": {
34+
"before:init": [
35+
"npm run build"
36+
],
37+
"after:release": "npm run storybook:deploy"
38+
},
1939
"git": {
20-
"commitMessage": "v${version}"
40+
"commitMessage": "v${version}",
41+
"requireUpstream": false
2142
},
2243
"github": {
2344
"release": true,
2445
"releaseName": "v${version}"
2546
}
2647
},
2748
"scripts": {
28-
"build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
29-
"start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",
30-
"start:playground": "npm start --prefix playground",
31-
"dev": "run-p start start:playground",
32-
"prepare": "run-s build",
33-
"test": "run-s test:unit test:lint test:build",
34-
"test:build": "run-s build",
35-
"test:lint": "eslint \"./src/**/*.+(ts|tsx)\"",
36-
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
37-
"test:watch": "react-scripts test --env=jsdom",
38-
"release": "npm run test && npm run prepare && dotenv release-it",
39-
"lint": "eslint . --ext .js,.ts,.tsx",
40-
"format": "prettier --write {src,playground}/**/*.{ts,tsx}",
41-
"format:check": "prettier --check {src,playground}/**/*.{ts,tsx}"
49+
"dev": "npm run storybook",
50+
"dev:watch": "rollup -cw",
51+
"build": "rollup -c",
52+
"release": "dotenv release-it",
53+
"lint": "eslint src --ext .js,.ts,.tsx",
54+
"format": "prettier --write src",
55+
"format:check": "prettier --check src",
56+
"storybook": "start-storybook -p 6006",
57+
"storybook:build": "build-storybook",
58+
"storybook:deploy": "storybook-to-ghpages"
4259
},
4360
"peerDependencies": {
4461
"react": ">=16.0.0",
45-
"styled-components": ">=5.0.0"
62+
"react-dom": ">=16.0.0"
4663
},
4764
"devDependencies": {
48-
"@babel/plugin-transform-react-jsx-self": "^7.16.7",
49-
"@babel/plugin-transform-react-jsx-source": "^7.16.7",
50-
"@testing-library/jest-dom": "^5.16.3",
51-
"@testing-library/react": "^13.0.0",
52-
"@testing-library/user-event": "^14.0.4",
53-
"@types/jest": "^27.4.1",
54-
"@types/node": "^17.0.23",
55-
"@types/react": "^17.0.43",
56-
"@types/react-dom": "^17.0.14",
57-
"@types/styled-components": "^5.1.24",
58-
"@typescript-eslint/eslint-plugin": "^5.18.0",
59-
"@typescript-eslint/parser": "^5.18.0",
60-
"babel-eslint": "^10.0.3",
65+
"@babel/core": "^7.19.1",
66+
"@rollup/plugin-commonjs": "^22.0.2",
67+
"@rollup/plugin-node-resolve": "^14.1.0",
68+
"@storybook/addon-actions": "^6.5.12",
69+
"@storybook/addon-essentials": "^6.5.12",
70+
"@storybook/addon-interactions": "^6.5.12",
71+
"@storybook/addon-links": "^6.5.12",
72+
"@storybook/builder-webpack4": "^6.5.12",
73+
"@storybook/manager-webpack5": "^6.5.12",
74+
"@storybook/react": "^6.5.12",
75+
"@storybook/storybook-deployer": "^2.8.12",
76+
"@types/node": "^18.7.18",
77+
"@types/react": "^18.0.20",
78+
"@types/react-dom": "^18.0.6",
79+
"@types/styled-components": "^5.1.26",
80+
"@typescript-eslint/eslint-plugin": "^5.38.0",
81+
"@typescript-eslint/parser": "^5.38.0",
82+
"babel-loader": "^8.2.5",
6183
"cross-env": "^7.0.3",
62-
"dotenv-cli": "^5.1.0",
63-
"eslint": "^8.12.0",
84+
"dotenv-cli": "^6.0.0",
85+
"eslint": "^8.23.1",
6486
"eslint-config-prettier": "^8.5.0",
65-
"eslint-config-standard": "^16.0.3",
87+
"eslint-config-standard": "^17.0.0",
88+
"eslint-config-standard-jsx": "^11.0.0",
6689
"eslint-config-standard-react": "^11.0.1",
67-
"eslint-plugin-import": "^2.25.4",
90+
"eslint-plugin-import": "^2.26.0",
91+
"eslint-plugin-n": "^15.2.5",
6892
"eslint-plugin-node": "^11.1.0",
69-
"eslint-plugin-prettier": "^4.0.0",
70-
"eslint-plugin-promise": "^6.0.0",
71-
"eslint-plugin-react": "^7.29.4",
72-
"eslint-plugin-standard": "^4.1.0",
73-
"gh-pages": "^3.2.3",
74-
"microbundle-crl": "^0.13.11",
93+
"eslint-plugin-promise": "^6.0.1",
94+
"eslint-plugin-react": "^7.31.8",
95+
"eslint-plugin-typescript-sort-keys": "^2.1.0",
7596
"npm-run-all": "^4.1.5",
76-
"prettier": "^2.6.2",
77-
"react": "^18.0.0",
78-
"react-dom": "^18.0.0",
79-
"react-scripts": "^5.0.0",
80-
"release-it": "^14.14.0",
81-
"typescript": "^4.6.3"
97+
"postcss": "^8.4.16",
98+
"prettier": "^2.7.1",
99+
"react": "^18.2.0",
100+
"react-dom": "^18.2.0",
101+
"release-it": "^15.4.2",
102+
"rollup": "^2.79.0",
103+
"rollup-plugin-postcss": "^4.0.2",
104+
"rollup-plugin-typescript2": "^0.34.0",
105+
"styled-components": "^5.3.5",
106+
"typescript": "^4.8.3"
82107
},
83-
"files": [
84-
"dist"
85-
],
86-
"keywords": [
87-
"react",
88-
"verify",
89-
"verification",
90-
"code",
91-
"pin-code",
92-
"authentication-code",
93-
"input",
94-
"autocompletion"
95-
]
108+
"author": "Ugo Onali",
109+
"license": "MIT"
96110
}

‎playground/README.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)