hunghg255 · hunghg255 · Jul 27, 2024 · Jul 27, 2024
diff --git a/.changeset/README.md b/.changeset/README.md
diff --git a/.changeset/config.json b/.changeset/config.json
diff --git a/.github/commit-convention.md b/.github/commit-convention.md
@@ -0,0 +1,95 @@
+## Git Commit Message Convention
+
+> This is adapted from [Commit convention](https://www.conventionalcommits.org/en/v1.0.0/).
+
+#### TL;DR:
+
+Messages must be matched by the following regex:
+
+``` js
+/^((feat|fix|docs|style|core|i18n|a11y|report|misc|cli|audits|improve|security|deprecated|refactor|perf|test|workflow|build|ci|chore|types|wip|release|deps?|merge|examples?|revert)(\(.+\))?(:|!:)|(Merge|Revert|Version)) .{1,50}$/
+```
+
+#### Examples
+
+Appears under "Features" header, `compiler` subheader:
+
+```
+feat(compiler): add 'comments' option
+```
+
+Appears under "Bug Fixes" header, `v-model` subheader, with a link to issue #28:
+
+```
+fix(v-model): handle events on blur
+
+close #28
+```
+
+Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation:
+
+```
+perf(core): improve vdom diffing by removing 'foo' option
+
+BREAKING CHANGE: The 'foo' option has been removed.
+```
+
+The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header.
+
+```
+revert: feat(compiler): add 'comments' option
+
+This reverts commit 667ecc1654a317a13331b17617d973392f415f02.
+```
+
+### Full Message Format
+
+A commit message consists of a **header**, **body** and **footer**.  The header has a **type**, **scope** and **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Revert
+
+If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. In the body, it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
+
+### Type
+
+If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. However, if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.
+
+Other prefixes are up to your discretion. Suggested prefixes are `docs`, `chore`, `style`, `refactor`, and `test` for non-changelog related tasks.
+
+### Scope
+
+The scope could be anything specifying the place of the commit change. For example `core`, `compiler`, `ssr`, `v-model`, `transition` etc...
+
+### Subject
+
+The subject contains a succinct description of the change:
+
+* use the imperative, present tense: "change" not "changed" nor "changes"
+* don't capitalize the first letter
+* no dot (.) at the end
+
+### Body
+
+Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes".
+The body should include the motivation for the change and contrast this with previous behavior.
+
+### Footer
+
+The footer should contain any information about **Breaking Changes** and is also the place to
+reference GitHub issues that this commit **Closes**.
+
+**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
+
+```
+feat!: breaking change / feat(scope)!: rework API
+```
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,78 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install
+        run: pnpm install
+
+      - name: Build
+        run: pnpm core:build
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Install
+        run: pnpm install
+
+      - name: Build
+        run: pnpm core:build
+
+      - name: Test
+        run: pnpm test
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,46 @@
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  release:
+    permissions:
+      id-token: write
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install
+        run: pnpm install
+
+      - run: npx changeloggithub@latest
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+
+      - name: Publish
+        run: node scripts/publish.js
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          NPM_CONFIG_PROVENANCE: true
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -20,50 +20,42 @@ A fully customizable, one-time password input component for the web built with R
 ![see here](https://media.giphy.com/media/lN98dFU6h3oP0wWS5x/giphy.gif)
 
 ## Support auto fill on mobile (safari, chrome....)
-![see here](https://res.cloudinary.com/hunghg255/image/upload/v1690099530/react-otp-input_r7ukv1.png)
 
+![see here](https://res.cloudinary.com/hunghg255/image/upload/v1690099530/react-otp-input_r7ukv1.png)
 
 [Live Demo](https://reactjs-otp-input-demo.vercel.app/)
 
 ## Installation
 
 [![NPM](https://nodei.co/npm/reactjs-otp-input.png?compact=true)](https://nodei.co/npm/reactjs-otp-input/)
 
-
 ## To install the latest stable version:
 
 ```
-npm install --save reactjs-otp-input@latest
-```
-Or `yarn`
-
-```
-yarn add reactjs-otp-input
+pnpm install reactjs-otp-input@latest
 ```
 
 ## Basic usage:
 
 ```jsx
 import React, { Component } from 'react';
-import { OtpInput } from 'react-otp-input';
+import { OtpInput } from 'reactjs-otp-input';
 
-export default const App {
+const App = () => {
   const [otp, setOtp] = useState('');
 
-  const handleChange = (otp) => setOtp({ otp });
+  const handleChange = (otp) => setOtp(otp);
 
   return <OtpInput value={otp} onChange={handleChange} numInputs={6} separator={<span>-</span>} />;
-}
+};
 ```
 
-
 ## To run the development server:
 
 ```
 npm run dev
 ```
 
-
 ## API
 
 <table>