refactor: lint and cleanup code

Author: Damian Sznajder

.eslintignore

@@ -2,3 +2,4 @@ node_modules/
 coverage/
 dist/
 lib/
+Example/

.eslintrc.js

@@ -11,45 +11,41 @@ module.exports = {
       version: 'detect',
     },
     'import/core-modules': ['react-native-otp-inputs'],
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
   },
 
+  plugins: ['simple-import-sort'],
   extends: ['satya164', 'plugin:react-native/all'],
 
   rules: {
     'babel/no-unused-expressions': 'off',
+
     'import/extensions': 'off',
     'import/named': 'off',
+    'import/no-unresolved': 'error',
     'jest/consistent-test-it': ['error', { fn: 'test' }],
     'jest/no-truthy-falsy': 'off',
-    'react-hooks/exhaustive-deps': 'warn',
-    'react-hooks/rules-of-hooks': 'error',
-    'react/no-unused-prop-types': 'off',
+    'jest/expect-expect': ['error', { assertFunctionNames: ['expect', 'element'] }],
 
-    'import/no-unresolved': [
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': [
       'error',
       {
-        caseSensitive: false,
-        ignore: ['^(~|jest)/'],
+        groups: [
+          // Side effect imports.
+          ['^\\u0000'],
+          // Packages.
+          ['^@?\\w'],
+          ['^../'],
+          ['^./'],
+        ],
       },
     ],
-
-    'jest/expect-expect': [
-      'error',
-      { assertFunctionNames: ['expect', 'element'] },
-    ],
-
     'prettier/prettier': [
       'error',
       {
         bracketSpacing: true,
-        jsxBracketSameLine: false,
-        parser: 'typescript',
-        printWidth: 80,
+        bracketSameLine: false,
+        printWidth: 100,
         semi: true,
         singleQuote: true,
         tabWidth: 2,
@@ -58,27 +54,14 @@ module.exports = {
       },
     ],
 
-    '@typescript-eslint/array-type': [
-      'error',
-      { default: 'generic', readonly: 'generic' },
-    ],
+    'react/jsx-sort-props': ['error', { shorthandFirst: true }],
+    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-native/no-raw-text': 'off',
+    'react-native/no-color-literals': 'off',
+    'react/no-unused-prop-types': 'off',
 
-    'import/order': [
-      'error',
-      {
-        'newlines-between': 'always-and-inside-groups',
-        groups: [
-          'internal',
-          'external',
-          'unknown',
-          'index',
-          'sibling',
-          'parent',
-          'builtin',
-        ],
-        alphabetize: { order: 'ignore' },
-      },
-    ],
+    '@typescript-eslint/array-type': ['error', { default: 'generic', readonly: 'generic' }],
   },
   globals: {
     __DEV__: true,

babel.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-  presets: [
-    'module:metro-react-native-babel-preset',
-    '@babel/preset-typescript',
-  ],
+  presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'],
 };

package.json

@@ -32,28 +32,29 @@
     "inputs"
   ],
   "devDependencies": {
-    "@babel/core": "7.13.14",
-    "@babel/preset-typescript": "7.13.0",
-    "@commitlint/config-conventional": "12.0.1",
+    "@babel/core": "7.15.8",
+    "@babel/preset-typescript": "7.15.0",
+    "@commitlint/config-conventional": "13.2.0",
+    "@react-native-clipboard/clipboard": "1.9.0",
     "@react-native-community/bob": "0.17.1",
-    "@react-native-clipboard/clipboard": "1.7.0",
-    "@release-it/conventional-changelog": "2.0.1",
-    "@types/jest": "26.0.22",
-    "@types/react": "17.0.3",
-    "@types/react-native": "0.64.2",
-    "commitlint": "12.0.1",
+    "@release-it/conventional-changelog": "3.3.0",
+    "@types/jest": "27.0.2",
+    "@types/react": "17.0.28",
+    "@types/react-native": "0.65.5",
+    "commitlint": "13.2.1",
     "eslint": "7.23.0",
     "eslint-config-satya164": "3.1.10",
-    "husky": "6.0.0",
-    "jest": "26.6.3",
-    "metro-react-native-babel-preset": "0.65.2",
-    "prettier": "2.2.1",
-    "react": "17.0.1",
-    "react-native": "0.64.0",
-    "react-native-builder-bob": "0.18.1",
-    "react-test-renderer": "17.0.1",
-    "release-it": "14.5.0",
-    "typescript": "4.2.3"
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "husky": "7.0.2",
+    "jest": "27.2.5",
+    "metro-react-native-babel-preset": "0.66.2",
+    "prettier": "2.4.1",
+    "react": "17.0.2",
+    "react-native": "0.66.0",
+    "react-native-builder-bob": "0.18.2",
+    "react-test-renderer": "17.0.2",
+    "release-it": "14.11.6",
+    "typescript": "4.4.3"
   },
   "peerDependencies": {
     "@react-native-clipboard/clipboard": "*",
@@ -70,9 +71,8 @@
   },
   "prettier": {
     "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "parser": "typescript",
-    "printWidth": 80,
+    "bracketSameLine": false,
+    "printWidth": 100,
     "semi": true,
     "singleQuote": true,
     "tabWidth": 2,

src/OtpInput.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, forwardRef, RefObject } from 'react';
+import React, { forwardRef, RefObject, useEffect, useMemo, useState } from 'react';
 import {
+  NativeSyntheticEvent,
   Platform,
   StyleProp,
   TextInput,
+  TextInputKeyPressEventData,
+  TextInputProps,
   TextStyle,
   View,
   ViewStyle,
-  TextInputProps,
-  NativeSyntheticEvent,
-  TextInputKeyPressEventData,
 } from 'react-native';
 
 type Props = TextInputProps & {
@@ -19,9 +19,7 @@ type Props = TextInputProps & {
   numberOfInputs: number;
   handleTextChange: (text: string) => void;
   inputValue: string;
-  handleKeyPress: (
-    keyPressEvent: NativeSyntheticEvent<TextInputKeyPressEventData>,
-  ) => void;
+  handleKeyPress: (keyPressEvent: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
 };
 
 const majorVersionIOS: number = parseInt(`${Platform.Version}`, 10);
@@ -30,6 +28,7 @@ const isOTPSupported: boolean = Platform.OS === 'ios' && majorVersionIOS >= 12;
 const OtpInput = forwardRef<TextInput, Props>(
   (
     {
+      autoFocus,
       focusStyles,
       handleKeyPress,
       handleTextChange,
@@ -52,15 +51,26 @@ const OtpInput = forwardRef<TextInput, Props>(
       });
     }, [ref, inputValue]);
 
+    const restProps = useMemo(
+      () =>
+        Platform.select({
+          default: rest,
+          web: { value: inputValue, ...rest },
+        }),
+      [inputValue, rest],
+    );
+
     return (
       <View style={[inputContainerStyles, focused && focusStyles]}>
         <TextInput
+          autoFocus={autoFocus}
           onBlur={() => setFocused(false)}
           onChangeText={handleTextChange}
           onFocus={() => setFocused(true)}
           onKeyPress={handleKeyPress}
           placeholder={placeholder}
           ref={ref}
+          secureTextEntry={secureTextEntry}
           // https://github.com/facebook/react-native/issues/18339
           selectTextOnFocus={Platform.select({
             ios: selectTextOnFocus,
@@ -69,8 +79,7 @@ const OtpInput = forwardRef<TextInput, Props>(
           style={inputStyles}
           textContentType={isOTPSupported ? 'oneTimeCode' : 'none'}
           underlineColorAndroid="transparent"
-          secureTextEntry={secureTextEntry}
-          {...rest}
+          {...restProps}
         />
       </View>
     );

src/index.tsx

@@ -1,7 +1,7 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, {
-  RefObject,
   forwardRef,
+  RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -22,10 +22,10 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import OtpInput from './OtpInput';
-import { OtpInputsRef, SupportedKeyboardType } from './types';
 import { fillOtpCode } from './helpers';
+import OtpInput from './OtpInput';
 import reducer from './reducer';
+import { OtpInputsRef, SupportedKeyboardType } from './types';
 
 const supportAutofillFromClipboard =
   Platform.OS === 'android' || parseInt(Platform.Version as string, 10) < 14;
@@ -47,16 +47,17 @@ type Props = TextInputProps & {
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: 'center',
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'space-between',
   },
 });
 
 const OtpInputs = forwardRef<OtpInputsRef, Props>(
   (
     {
+      autoFocus,
       autofillFromClipboard = supportAutofillFromClipboard,
       autofillListenerIntervalMS = 1000,
       autoCapitalize = 'none',
@@ -80,15 +81,11 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
   ) => {
     const previousCopiedText = useRef<string>('');
     const inputs = useRef<Array<RefObject<TextInput>>>([]);
-    const [{ otpCode, hasKeySupport }, dispatch] = useReducer(
-      reducer,
-      {},
-      () => ({
-        otpCode: fillOtpCode(numberOfInputs, defaultValue),
-        handleChange,
-        hasKeySupport: Platform.OS === 'ios',
-      }),
-    );
+    const [{ otpCode, hasKeySupport }, dispatch] = useReducer(reducer, {}, () => ({
+      otpCode: fillOtpCode(numberOfInputs, defaultValue),
+      handleChange,
+      hasKeySupport: Platform.OS === 'ios',
+    }));
 
     useEffect(() => {
       dispatch({ type: 'setHandleChange', payload: handleChange });
@@ -149,12 +146,11 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
     };
 
     const handleKeyPress = (
-      {
-        nativeEvent: { key },
-      }: NativeSyntheticEvent<TextInputKeyPressEventData>,
+      { nativeEvent: { key } }: NativeSyntheticEvent<TextInputKeyPressEventData>,
       index: number,
     ) => {
-      handleInputTextChange(key === 'Backspace' ? '' : key, index);
+      const text = key === 'Backspace' || key.length > 1 ? '' : key;
+      handleInputTextChange(text, index);
 
       if (Platform.OS === 'android' && !hasKeySupport && !isNaN(parseInt(key)))
         dispatch({ type: 'setHasKeySupport', payload: true });
@@ -223,12 +219,7 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
       return () => {
         clearInterval(interval);
       };
-    }, [
-      autofillFromClipboard,
-      autofillListenerIntervalMS,
-      listenOnCopiedText,
-      numberOfInputs,
-    ]);
+    }, [autofillFromClipboard, autofillListenerIntervalMS, listenOnCopiedText, numberOfInputs]);
 
     const renderInputs = (): Array<JSX.Element> => {
       const iterationArray = Array<number>(numberOfInputs).fill(0);
@@ -246,16 +237,17 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
 
         return (
           <OtpInput
+            accessible
+            accessibilityLabel={`${testIDPrefix}-${inputIndex}`}
             autoCapitalize={autoCapitalize}
+            autoFocus={index === 0 && autoFocus}
             clearTextOnFocus={clearTextOnFocus}
             firstInput={index === 0}
             focusStyles={focusStyles}
-            handleKeyPress={(
-              keyPressEvent: NativeSyntheticEvent<TextInputKeyPressEventData>,
-            ) => handleKeyPress(keyPressEvent, inputIndex)}
-            handleTextChange={(text: string) =>
-              handleTextChange(text, inputIndex)
+            handleKeyPress={(keyPressEvent: NativeSyntheticEvent<TextInputKeyPressEventData>) =>
+              handleKeyPress(keyPressEvent, inputIndex)
             }
+            handleTextChange={(text: string) => handleTextChange(text, inputIndex)}
             inputContainerStyles={inputContainerStyles}
             inputStyles={inputStyles}
             inputValue={inputValue}
@@ -270,9 +262,7 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
             ref={inputs.current[inputIndex]}
             secureTextEntry={secureTextEntry}
             selectTextOnFocus={selectTextOnFocus}
-            accessible
             testID={`${testIDPrefix}-${inputIndex}`}
-            accessibilityLabel={`${testIDPrefix}-${inputIndex}`}
             {...restProps}
           />
         );

src/reducer.ts

@@ -1,5 +1,5 @@
 import { fillOtpCode } from './helpers';
-import { ActionTypes, ReducerState, Actions } from './types';
+import { Actions, ActionTypes, ReducerState } from './types';
 
 const ACTION_TYPES: ActionTypes = {
   setHandleChange: 'setHandleChange',