feat: proper ucard input component (using input-otp)

apps/forge/src/components/signin/actions/UCardInput/index.tsx

@@ -1,54 +1,45 @@
-import { useRef, useState } from "react";
-import OtpInput, { OtpInputHandle } from "@/components/signin/actions/UCardInput/input.tsx";
+import { useState } from "react";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ui/components/ui/card.tsx";
 import { Button } from "@ui/components/ui/button.tsx";
 import { toast } from "sonner";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "@/redux/store.ts";
 import { signinActions } from "@/redux/signin.slice.ts";
 import { FlowStepComponent } from "@/components/signin/actions/SignInManager/types.ts";
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@ui/components/ui/input-otp";
 
 const UCardInput: FlowStepComponent = ({ onPrimary }) => {
-  const [otp, setOtp] = useState<number>(0);
-  const [isOtpValid, setIsOtpValid] = useState<boolean>(false);
-  const otpRef = useRef<OtpInputHandle | null>(null);
+  const [otp, setOtp] = useState(""); // OTP is now handled as a string
+  const [isOtpValid, setIsOtpValid] = useState(false);
   const dispatch = useDispatch<AppDispatch>();
 
-  const UCARD_LENGTH = 9;
-  const STRIP_CHAR_AMOUNT = 3;
-  const VALID_LENGTH = UCARD_LENGTH - STRIP_CHAR_AMOUNT;
+  const UCARD_LENGTH = 9; // Total length of the OTP
 
-  const handleOtpChange = (value: number) => {
-    setOtp(value);
-    if (getNumberLength(value) === VALID_LENGTH) {
-      setIsOtpValid(true);
-    }
-  };
-
-  const getNumberLength = (num: number): number => {
-    return num.toString().length;
+  const handleOtpChange = (value: string) => {
+    setOtp(value); // Set the full value of the OTP input
+    setIsOtpValid(value.length === UCARD_LENGTH); // Validation based on the length of the input
   };
 
   const handleClear = () => {
     console.log("Clearing OTP");
-    otpRef?.current?.clearOtp();
+    setOtp(""); // Clear the OTP by resetting the state
   };
 
-  const handleOnSubmit = (otp: number) => {
-    if (getNumberLength(otp) === VALID_LENGTH) {
+  const handleOnSubmit = () => {
+    if (isOtpValid) {
       console.log("Submitting UCard:", otp);
       toast(`UCard Entered: ${otp}`, {
-        description: `This is feedback that lets you know what the card has in fact been entered woop woop`,
+        description: "This is feedback that lets you know what the card has in fact been entered woop woop",
         action: {
           label: "Woah",
           onClick: () => console.log("ʕ •ᴥ• ʔ"),
         },
       });
-      dispatch(signinActions.updateSignInSessionField("ucard_number", otp));
+      const parsedOtp = parseInt(otp.slice(-6), 10);
+      dispatch(signinActions.updateSignInSessionField("ucard_number", parsedOtp));
       onPrimary?.();
     }
   };
-
   return (
     <>
       <Card className="w-[700px]">
@@ -57,16 +48,30 @@ const UCardInput: FlowStepComponent = ({ onPrimary }) => {
           <CardDescription>Enter your UCard number</CardDescription>
         </CardHeader>
         <CardContent>
-          <OtpInput
-            ref={otpRef}
-            length={UCARD_LENGTH}
-            stripChars={STRIP_CHAR_AMOUNT}
-            onOtpChange={handleOtpChange}
-            onSubmit={handleOnSubmit}
-          />
+          <InputOTP
+            maxLength={9}
+            value={otp}
+            onChange={(value) => handleOtpChange(value)}
+            onComplete={() => handleOnSubmit()}
+          >
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+              <InputOTPSlot index={6} />
+              <InputOTPSlot index={7} />
+              <InputOTPSlot index={8} />
+            </InputOTPGroup>
+          </InputOTP>
         </CardContent>
         <CardFooter className="flex justify-between flex-row-reverse">
-          <Button onClick={() => handleOnSubmit(otp)} disabled={!isOtpValid} aria-disabled={!isOtpValid}>
+          <Button onClick={() => handleOnSubmit()} disabled={!isOtpValid} aria-disabled={!isOtpValid}>
             Submit
           </Button>
           <Button variant="outline" onClick={handleClear}>

packages/ui/components/ui/input-otp.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Dot } from "lucide-react"
+
+import { cn } from "@ui/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Dot />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

packages/ui/package.json

@@ -39,6 +39,7 @@
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.0.28",
+    "input-otp": "^1.2.4",
     "lucide-react": "^0.300.0",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.38",

packages/ui/tailwind.config.js

@@ -81,12 +81,17 @@ module.exports = {
         from: { height: "var(--radix-accordion-content-height)" },
         to: { height: "0" },
       },
+      "caret-blink": {
+        "0%,70%,100%": { opacity: "1" },
+        "20%,50%": { opacity: "0" },
+      },
     },
     animation: {
       "accordion-down": "accordion-down 0.2s ease-out",
       "accordion-up": "accordion-up 0.2s ease-out",
+      "caret-blink": "caret-blink 1.25s ease-out infinite",
     },
   },
   // eslint-disable-next-line no-undef
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography"), require('tailwindcss/nesting')],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography"), require("tailwindcss/nesting")],
 };