Update CodeInput/PinInput components (#746)

* Rename from CodeInput to PinInput

* Modified structure of components

* Add styling props to pin input

Author: YoussefHenna

example/src/App.tsx

@@ -63,7 +63,7 @@ import SectionListExample from "./SectionListExample";
 import LinearProgressExample from "./LinearProgressExample";
 import CircularProgressExample from "./CircularProgressExample";
 import VideoPlayerExample from "./VideoPlayerExample";
-import CodeInputExample from "./CodeInputExample";
+import PinInputExample from "./PinInputExample";
 
 const ROUTES = {
   AudioPlayer: AudioPlayerExample,
@@ -102,7 +102,7 @@ const ROUTES = {
   LinearProgress: LinearProgressExample,
   CircularProgress: CircularProgressExample,
   VideoPlayer: VideoPlayerExample,
-  CodeInput: CodeInputExample,
+  PinInput: PinInputExample,
 };
 
 let customFonts = {

example/src/CodeInputExample.tsx example/src/PinInputExample.tsxexample/src/CodeInputExample.tsx renamed to example/src/PinInputExample.tsx

@@ -1,24 +1,37 @@
 import React from "react";
 import Section, { Container } from "./Section";
-import { CodeInput, CodeInputCell, CodeInputText } from "@draftbit/ui";
+import { PinInput, CustomPinInputCell, CustomPinInputText } from "@draftbit/ui";
 
-const CodeInputExample: React.FC = () => {
+const PinInputExample: React.FC = () => {
   const [value1, setValue1] = React.useState("");
   const [value2, setValue2] = React.useState("");
 
   return (
     <Container style={{}}>
-      <Section title="CodeInput (default cell)" style={{}}>
-        <CodeInput value={value1} onChangeText={setValue1} />
+      <Section title="PinInput (default cell)" style={{}}>
+        <PinInput value={value1} onChangeText={setValue1} />
       </Section>
-      <Section title="CodeInput (custom cell)" style={{}}>
-        <CodeInput
+      <Section title="PinInput (default cell, customized)" style={{}}>
+        <PinInput
+          value={value1}
+          onChangeText={setValue1}
+          focusedBorderColor="green"
+          unFocusedBorderColor="gray"
+          focusedBackgroundColor="rgba(0,1,0,0.2)"
+          focusedBorderWidth={5}
+          unFocusedBorderWidth={3}
+          focusedTextColor="green"
+          style={{ borderRadius: 35, fontWeight: 800 }}
+        />
+      </Section>
+      <Section title="PinInput (custom cell)" style={{}}>
+        <PinInput
           value={value1}
           onChangeText={setValue1}
           onInputFull={(value) => console.log("Input full", value)}
           renderItem={({ cellValue, isFocused }) => {
             return (
-              <CodeInputCell
+              <CustomPinInputCell
                 style={{
                   width: 70,
                   height: 70,
@@ -35,22 +48,22 @@ const CodeInputExample: React.FC = () => {
                   justifyContent: "center",
                 }}
               >
-                <CodeInputText
+                <CustomPinInputText
                   style={{ color: isFocused ? "green" : "black", fontSize: 20 }}
                   isFocused={isFocused}
                 >
                   {cellValue}
-                </CodeInputText>
-              </CodeInputCell>
+                </CustomPinInputText>
+              </CustomPinInputCell>
             );
           }}
         />
       </Section>
-      <Section title="CodeInput (more cells)" style={{}}>
-        <CodeInput cellCount={7} value={value2} onChangeText={setValue2} />
+      <Section title="PinInput (more cells)" style={{}}>
+        <PinInput cellCount={7} value={value2} onChangeText={setValue2} />
       </Section>
     </Container>
   );
 };
 
-export default CodeInputExample;
+export default PinInputExample;

packages/core/src/__tests__/Debouncing.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, act } from "@testing-library/react-native";
 import TextInput from "../components/TextInput";
 import TextField from "../components/TextField";
 import NumberInput from "../components/NumberInput";
-import { CodeInput } from "../components/CodeInput";
+import { PinInput } from "../components/PinInput";
 import DefaultTheme, { Theme } from "../styles/DefaultTheme";
 import { IconI } from "../interfaces/Icon";
 
@@ -78,12 +78,12 @@ describe("Text Input debouncing test", () => {
   );
 
   test.each([200, 500, 1000])(
-    "should onChangeTextDelayed be called once with %s delay in CodeInput",
+    "should onChangeTextDelayed be called once with %s delay in PinInput",
     (delay) => {
       const Wrapper: React.FC = () => {
         const [value, setValue] = React.useState("");
         return (
-          <CodeInput
+          <PinInput
             value={value}
             onChangeText={(text) => setValue(text)}
             changeTextDelay={delay}

…/__tests__/components/CodeInput.test.tsx …c/__tests__/components/PinInput.test.tsxpackages/core/src/__tests__/components/CodeInput.test.tsx renamed to packages/core/src/__tests__/components/PinInput.test.tsx packages/core/src/__tests__/components/CodeInput.test.tsx renamed to packages/core/src/__tests__/components/PinInput.test.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { render, screen, fireEvent, act } from "@testing-library/react-native";
 import { View } from "react-native";
-import { CodeInput, CodeInputText } from "../../components/CodeInput";
+import { PinInput, PinInputText } from "../../components/PinInput";
 import { Cursor } from "react-native-confirmation-code-field";
 
-describe("CodeInput tests", () => {
+describe("PinInput tests", () => {
   test("should onInputFull be called when input is full", () => {
     const cellCount = 6;
     const text = "0".repeat(cellCount);
@@ -13,7 +13,7 @@ describe("CodeInput tests", () => {
     const Wrapper: React.FC = () => {
       const [value, setValue] = React.useState("");
       return (
-        <CodeInput
+        <PinInput
           value={value}
           onChangeText={(text) => setValue(text)}
           cellCount={cellCount}
@@ -35,7 +35,7 @@ describe("CodeInput tests", () => {
     "should render %s custom input cells",
     (cellCount) => {
       render(
-        <CodeInput
+        <PinInput
           renderItem={() => <View testID="test-input-cell" />}
           cellCount={cellCount}
         />
@@ -49,24 +49,24 @@ describe("CodeInput tests", () => {
   test.each([2, 4, 6, 7, 8])(
     "should render %s default input cells when renderItem not provided",
     (cellCount) => {
-      render(<CodeInput cellCount={cellCount} />);
+      render(<PinInput cellCount={cellCount} />);
 
       const cells = screen.queryAllByTestId("default-code-input-cell");
       expect(cells).toHaveLength(cellCount);
     }
   );
 
-  describe("CodeInputText tests", () => {
+  describe("PinInputText tests", () => {
     test("should render cursor when focused and does not have a value", () => {
-      render(<CodeInputText isFocused />);
+      render(<PinInputText isFocused />);
 
       const cursor = screen.UNSAFE_queryByType(Cursor);
       expect(cursor).toBeTruthy();
     });
 
     test("should render text value when focused and has a value", () => {
       const text = "sample text";
-      render(<CodeInputText isFocused>{text}</CodeInputText>);
+      render(<PinInputText isFocused>{text}</PinInputText>);
 
       const cursor = screen.UNSAFE_queryByType(Cursor);
       const componentWithText = screen.queryByText(text);
@@ -76,7 +76,7 @@ describe("CodeInput tests", () => {
 
     test("should render text value when not focused and has a value", () => {
       const text = "sample text";
-      render(<CodeInputText isFocused={false}>{text}</CodeInputText>);
+      render(<PinInputText isFocused={false}>{text}</PinInputText>);
 
       const cursor = screen.UNSAFE_queryByType(Cursor);
       const componentWithText = screen.queryByText(text);

packages/core/src/components/CodeInput/CodeInput.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, ViewStyle, View } from "react-native";
+
+interface CustomPinInputCellProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Simple View wrapper component to create a custom pin input cell
+ * Meant to be used in PinInput's renderItem
+ */
+const CustomPinInputCell: React.FC<
+  React.PropsWithChildren<CustomPinInputCellProps>
+> = ({ style, children }) => {
+  return <View style={style} children={children} />;
+};
+
+export default CustomPinInputCell;