rename project 🤦

Author: ugogo

README.md

@@ -1,32 +1,32 @@
-# react-verification-code
+# react-input-verification-code
 
 A verification code input, autocompletion friendly
 
-[![NPM](https://img.shields.io/npm/v/react-verification-code.svg)](https://www.npmjs.com/package/react-verification-code) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![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)
 
 ## Examples
 
-- Basic - [CodeSandbox](https://codesandbox.io/s/basic-6ejdp) - [Source](https://github.com/ugogo/react-verification-code/tree/master/example/src/Basic.tsx)
+- Basic - [CodeSandbox](https://codesandbox.io/s/basic-6ejdp) - [Source](https://github.com/ugogo/react-input-verification-code/tree/master/example/src/Basic.tsx)
 
 ## Install
 
 ```bash
-npm install --save react-verification-code
+npm install --save react-input-verification-code
 ```
 
 ```bash
-yarn add react-verification-code
+yarn add react-input-verification-code
 ```
 
 ## Usage
 
 ```tsx
 import * as React from 'react';
-import ReactVerificationCode from 'react-verification-code';
-import 'react-verification-code/dist/index.css';
+import ReactInputVerificationCode from 'react-input-verification-code';
+import 'react-input-verification-code/dist/index.css';
 
 export default function App() {
-  return <ReactVerificationCode />;
+  return <ReactInputVerificationCode />;
 }
 ```
 

example/README.md

@@ -1,5 +1,5 @@
 This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-It is linked to the react-verification-code package in the parent directory for development purposes.
+It is linked to the react-input-verification-code package in the parent directory for development purposes.
 
 You can run `yarn install` and then `yarn start` to test your package.

example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-verification-code-example",
+  "name": "react-input-verification-code-example",
   "homepage": ".",
   "version": "0.0.0",
   "private": true,
@@ -16,7 +16,7 @@
     "react-dom": "link:../node_modules/react-dom",
     "react-scripts": "link:../node_modules/react-scripts",
     "typescript": "link:../node_modules/typescript",
-    "react-verification-code": "link:.."
+    "react-input-verification-code": "link:.."
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"

example/src/Basic.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactVerificationCode from 'react-verification-code';
-import 'react-verification-code/dist/index.css';
+import ReactInputVerificationCode from 'react-input-verification-code';
+import 'react-input-verification-code/dist/index.css';
 
-export default () => <ReactVerificationCode />;
+export default () => <ReactInputVerificationCode />;

example/yarn.lock

@@ -8518,6 +8518,10 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+"react-input-verification-code@link:..":
+  version "0.0.0"
+  uid ""
+
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -8527,10 +8531,6 @@ react-is@^16.8.1, react-is@^16.8.4:
   version "0.0.0"
   uid ""
 
-"react-verification-code@link:..":
-  version "0.0.0"
-  uid ""
-
 "react@link:../node_modules/react":
   version "0.0.0"
   uid ""

package.json

@@ -1,16 +1,19 @@
 {
-  "name": "react-verification-code",
+  "name": "react-input-verification-code",
   "version": "0.1.0",
   "description": "A verification code input, autocompletion friendly",
   "author": "ugogo",
   "license": "MIT",
-  "repository": "ugogo/react-verification-code",
+  "repository": "ugogo/react-input-verification-code",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.tsx",
   "engines": {
     "node": ">=10"
   },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
   "scripts": {
     "build": "microbundle-crl --no-compress --format modern,cjs --css-modules false",
     "start": "microbundle-crl watch --no-compress --format modern,cjs --css-modules false",

src/index.css

@@ -1,4 +1,4 @@
-.ReactVerificationCode__container {
+.ReactInputVerificationCode__container {
   display: flex;
   position: relative;
   width: calc(
@@ -8,8 +8,8 @@
   justify-content: space-between;
 }
 
-.ReactVerificationCode__input,
-.ReactVerificationCode__item {
+.ReactInputVerificationCode__input,
+.ReactInputVerificationCode__item {
   width: var(--itemWidth);
   height: var(--itemHeight);
   padding: 0;
@@ -21,19 +21,19 @@
   border: 0;
 }
 
-.ReactVerificationCode__item {
+.ReactInputVerificationCode__item {
   --boxShadowColor: #ccc;
   --boxShadowSize: 1px;
   box-shadow: inset 0 0 0 var(--boxShadowSize) var(--boxShadowColor);
   transition: box-shadow 0.2s ease-out;
 }
 
-.ReactVerificationCode__item.is-active {
+.ReactInputVerificationCode__item.is-active {
   --boxShadowColor: #888;
   --boxShadowSize: 2px;
 }
 
-.ReactVerificationCode__input {
+.ReactInputVerificationCode__input {
   position: absolute;
   top: 0;
   left: calc(

src/index.tsx

@@ -95,7 +95,8 @@ export default ({ length = 4, placeholder = '·' }) => {
         .composedPath()
         .reduce(
           (bool: boolean, path: HTMLElement) =>
-            bool || path.dataset?.reactVerificationCodeId === CONTAINER_DATA_ID,
+            bool ||
+            path.dataset?.reactInputVerificationCodeId === CONTAINER_DATA_ID,
           false
         );
 
@@ -111,8 +112,8 @@ export default ({ length = 4, placeholder = '·' }) => {
 
   return (
     <div
-      data-react-verification-code-id={CONTAINER_DATA_ID}
-      className='ReactVerificationCode__container'
+      data-react-input-verification-code-id={CONTAINER_DATA_ID}
+      className='ReactInputVerificationCode__container'
       style={
         {
           '--activeIndex': activeIndex,
@@ -125,7 +126,7 @@ export default ({ length = 4, placeholder = '·' }) => {
     >
       <input
         ref={codeInputRef}
-        className='ReactVerificationCode__input'
+        className='ReactInputVerificationCode__input'
         autoComplete='one-time-code'
         type='text'
         inputMode='decimal'
@@ -143,7 +144,7 @@ export default ({ length = 4, placeholder = '·' }) => {
           ref={ref}
           role='button'
           tabIndex={0}
-          className={`ReactVerificationCode__item ${
+          className={`ReactInputVerificationCode__item ${
             activeIndex === i ? 'is-active' : ''
           }`}
           onFocus={onItemFocus(i)}