first iteration of OtpInput

sahil143 · Jul 24, 2022 · fffcbb7 · fffcbb7
1 parent 3934f01
commit fffcbb7
Show file tree

Hide file tree

Showing 12 changed files with 2,147 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 node_modules
 .cache
 dist
+example/.parcel-cache
diff --git a/example/index.html b/example/index.html
@@ -9,6 +9,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/example/index.tsx b/example/index.tsx
@@ -1,13 +1,80 @@
-import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../.';
+import styled from '@emotion/styled';
+import { OtpInput } from '../src';
+
+const Div = styled('div')({
+  marginBottom: '40px',
+});
 
 const App = () => {
+  const [value, setValue] = React.useState('');
+  const [value1, setValue1] = React.useState('');
+  const [value2, setValue2] = React.useState('');
+  const [value3, setValue3] = React.useState('');
+  const [value4, setValue4] = React.useState('');
+  const handleChange = (value: string, formattedValue: string) => {
+    setValue(value);
+  };
+  const handleChange1 = (value: string, formattedValue: string) => {
+    setValue1(value);
+  };
+  const handleChange2 = (value: string, formattedValue: string) => {
+    setValue2(value);
+  };
+  const handleChange3 = (value: string, formattedValue: string) => {
+    setValue3(value);
+  };
+  const handleChange4 = (value: string, formattedValue: string) => {
+    setValue4(value);
+  };
   return (
-    <div>
-      <Thing />
-    </div>
+    <>
+      <Div>
+        <p>Numeric Input</p>
+        <OtpInput value={value} onChange={handleChange} format="_/_/_-_/_/_" />
+      </Div>
+      <Div>
+        <p>Alphanumeric Input</p>
+        <OtpInput
+          value={value1}
+          onChange={handleChange1}
+          format="___-___"
+          type="alphanumeric"
+        />
+      </Div>
+      <Div>
+        <p>Password Numeric Input</p>
+        <OtpInput
+          value={value2}
+          onChange={handleChange2}
+          format="_/_-_/_-_/_"
+          type="numeric"
+          isSecure
+        />
+      </Div>
+      <Div>
+        <p>Password Alphanumeric Input</p>
+        <OtpInput
+          value={value3}
+          onChange={handleChange3}
+          format="______"
+          type="alphanumeric"
+          isSecure
+        />
+      </Div>
+      <Div>
+        <p>Disabled Input</p>
+        <OtpInput
+          value={value4}
+          onChange={handleChange4}
+          format="_-_-_-_-_-_"
+          type="alphanumeric"
+          isSecure
+          isDisabled
+        />
+      </Div>
+    </>
   );
 };
 

diff --git a/example/package.json b/example/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
     "start": "parcel index.html",
     "build": "parcel build index.html"
@@ -13,12 +14,13 @@
   "alias": {
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom/profiling",
+    "@emotion/styled": "../node_modules/@emotion/styled",
     "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.8.4",
-    "parcel": "^1.12.3",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "parcel": "^2.6.2",
     "typescript": "^3.4.5"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ @@
     node_modules
     .cache
     dist
+    example/.parcel-cache