DS-18 OTP Input

.changeset/brave-carpets-teach.md

@@ -0,0 +1,5 @@
+---
+"@kunai-consulting/qwik-components": patch
+---
+
+Added signals to track the total number of input fields present and if all fields are filled. Applied invisible style to hiddenInput

.changeset/ninety-impalas-prove.md

@@ -0,0 +1,5 @@
+---
+"@kunai-consulting/qwik-components": patch
+---
+
+Updated focus state, added test

apps/docs/src/routes/examples/test.tsx

@@ -1,16 +1,16 @@
 import { type PropsOf, component$ } from "@builder.io/qwik";
 import type { DocumentHead } from "@builder.io/qwik-city";
-import { Otp } from "@kunai-consulting/qwik-components";
 import { VisuallyHidden } from "~/utils/visually-hidden";
+import { Otp } from "@kunai-consulting/qwik-components";
 
 export const head: DocumentHead = {
   title: "Qwik Design System",
   meta: [
     {
       name: "description",
-      content: "Qwik Design System"
-    }
-  ]
+      content: "Qwik Design System",
+    },
+  ],
 };
 
 export default component$(() => {
@@ -25,24 +25,21 @@ export default component$(() => {
             Two-step verification
           </div>
           <div class="text-cool-700 w-full text-center text-sm">
-            A verification code has been sent to your email. Please enter the code below
-            to verify this device.
+            A verification code has been sent to your email. Please enter the
+            code below to verify this device.
           </div>
         </div>
 
         <Otp.Root class="flex flex-col items-center justify-center">
-          <VisuallyHidden>
-            <Otp.HiddenNativeInput />
-          </VisuallyHidden>
+          <Otp.HiddenNativeInput class="opacity-0" />
 
           <div class="otp-container flex flex-row justify-center gap-2">
-            {Array.from({ length: 6 }, (_, index) => {
+            {Array.from({ length: 4 }, (_, index) => {
               const uniqueKey = `otp-${index}-${Date.now()}`;
 
               return (
                 <Otp.Item
                   key={uniqueKey}
-                  autoFocus={index === 0}
                   class={
                     "h-9 w-10 border-2 text-center data-[highlighted]:border-blue-600 rounded data-[highlighted]:ring-blue-100  data-[highlighted]:ring-[3px] data-[highlighted]:pl-1 data-[highlighted]:pr-1 caret-blue-600"
                   }
@@ -55,7 +52,10 @@ export default component$(() => {
             })}
           </div>
           <div class="mt-6 flex flex-row justify-center gap-2">
-            <input type="checkbox" class="text-cool-700 form-checkbox text-sm" />
+            <input
+              type="checkbox"
+              class="text-cool-700 form-checkbox text-sm"
+            />
             This is a trusted device, don't ask again
           </div>
         </Otp.Root>

apps/docs/src/routes/otp/examples/hero.tsx

@@ -0,0 +1,95 @@
+import { type PropsOf, component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+import { VisuallyHidden } from '~/utils/visually-hidden';
+import { Otp } from '@kunai-consulting/qwik-components';
+
+export const head: DocumentHead = {
+  title: 'Qwik Design System',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik Design System',
+    },
+  ],
+};
+
+export default component$(() => {
+  return (
+    <div class="mt-10 flex justify-center">
+      <div class="flex flex-col items-center justify-center">
+        <div class="m-6 flex h-[8.125rem] w-[23.5rem] flex-col items-center ">
+          <div class="flex w-full justify-center">
+            <InformationCircle />
+          </div>
+          <div class="text-cool-700 w-full py-4 text-center text-lg font-semibold">
+            Two-step verification
+          </div>
+          <div class="text-cool-700 w-full text-center text-sm">
+            A verification code has been sent to your email. Please enter the
+            code below to verify this device.
+          </div>
+        </div>
+
+        <Otp.Root class="flex flex-col items-center justify-center">
+          <Otp.HiddenNativeInput class="opacity-0" />
+
+          <div class="otp-container flex flex-row justify-center gap-2">
+            {Array.from({ length: 4 }, (_, index) => {
+              const uniqueKey = `otp-${index}-${Date.now()}`;
+
+              return (
+                <Otp.Item
+                  key={uniqueKey}
+                  class={
+                    'h-9 w-10 border-2 text-center data-[highlighted]:border-blue-600 rounded data-[highlighted]:ring-blue-100  data-[highlighted]:ring-[3px] data-[highlighted]:pl-1 data-[highlighted]:pr-1 caret-blue-600'
+                  }
+                >
+                  <Otp.Caret class="text-blue-500 text-xl animate-blink-caret">
+                    |
+                  </Otp.Caret>
+                </Otp.Item>
+              );
+            })}
+          </div>
+          <div class="mt-6 flex flex-row justify-center gap-2">
+            <input
+              type="checkbox"
+              class="text-cool-700 form-checkbox text-sm"
+            />
+            This is a trusted device, don't ask again
+          </div>
+        </Otp.Root>
+        <div class="flex flex-row items-center justify-center gap-2 p-6 text-sm">
+          <button
+            type="button"
+            class="h-[36px] w-[140px] items-center justify-center whitespace-nowrap rounded-md border-none bg-[#5568AA] px-4 py-0 text-start text-white"
+          >
+            Sign in securely
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+const InformationCircle = component$((props: PropsOf<'svg'>) => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>Information Circle</title>
+      <path
+        d="M17.3333 21.3333H16V16H14.6667M16 10.6667H16.0133M28 16C28 17.5759 27.6896 19.1363 27.0866 20.5922C26.4835 22.0481 25.5996 23.371 24.4853 24.4853C23.371 25.5996 22.0481 26.4835 20.5922 27.0866C19.1363 27.6896 17.5759 28 16 28C14.4242 28 12.8637 27.6896 11.4078 27.0866C9.95191 26.4835 8.62904 25.5996 7.51473 24.4853C6.40043 23.371 5.51652 22.0481 4.91346 20.5922C4.3104 19.1363 4.00002 17.5759 4.00002 16C4.00002 12.8174 5.2643 9.76516 7.51473 7.51472C9.76517 5.26428 12.8174 4 16 4C19.1826 4 22.2349 5.26428 24.4853 7.51472C26.7357 9.76516 28 12.8174 28 16Z"
+        stroke="#2563EB"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+});

libs/components/src/otp/otp-caret.tsx

@@ -1,11 +1,13 @@
-import { type PropsOf, Slot, component$, useContext } from "@builder.io/qwik";
-import { OTPContextId } from "./otp-context";
-import { itemContextId } from "./otp-item";
+import { type PropsOf, Slot, component$, useContext } from '@builder.io/qwik';
+import { OTPContextId } from './otp-context';
+import { itemContextId } from './otp-item';
 
-export const OtpCaret = component$(({ ...props }: PropsOf<"span">) => {
+export const OtpCaret = component$(({ ...props }: PropsOf<'span'>) => {
   const itemContext = useContext(itemContextId);
   const context = useContext(OTPContextId);
-  const showCaret = context.activeIndexSig.value === itemContext.index;
+  const showCaret =
+    context.activeIndexSig.value === itemContext.index &&
+    context.isFocusedSig.value;
 
   return <span {...props}>{showCaret && <Slot />}</span>;
 });

libs/components/src/otp/otp-context.ts

@@ -1,9 +1,12 @@
-import { type Signal, createContextId } from "@builder.io/qwik";
+import { type Signal, createContextId } from '@builder.io/qwik';
 
 export interface OTPContext {
   value: Signal<string>;
   activeIndexSig: Signal<number>;
   nativeInputRef: Signal<HTMLInputElement | undefined>;
+  numItemsSig: Signal<number>;
+  fullEntrySig: Signal<boolean>;
+  isFocusedSig: Signal<boolean>;
 }
 
-export const OTPContextId = createContextId<OTPContext>("OTPContext");
+export const OTPContextId = createContextId<OTPContext>('OTPContext');

libs/components/src/otp/otp-item.tsx

@@ -3,41 +3,53 @@ import {
   Slot,
   component$,
   createContextId,
+  useComputed$,
   useContext,
   useContextProvider,
-  useSignal
-} from "@builder.io/qwik";
-import { OTPContextId } from "./otp-context";
+  useSignal,
+} from '@builder.io/qwik';
+import { OTPContextId } from './otp-context';
 
 interface ItemContextType {
   index: number;
 }
 type OTPProps = {
   _index?: number;
-} & PropsOf<"div">;
+} & PropsOf<'div'>;
 
-export const itemContextId = createContextId<ItemContextType>("qd-otp-item");
+export const itemContextId = createContextId<ItemContextType>('qd-otp-item');
 export const OtpItem = component$(({ _index = 0, ...props }: OTPProps) => {
   const context = useContext(OTPContextId);
   const itemRef = useSignal<HTMLInputElement>();
-  const isFocused = useSignal(false);
   useContextProvider(itemContextId, { index: _index });
-
-  const itemValue = context.value.value[_index] || "";
+  const itemValue = context.value.value[_index] || '';
+  const isFullEntry = useComputed$(
+    () => _index === context.numItemsSig.value - 1
+  );
 
   if (_index === undefined) {
-    throw new Error("Qwik UI: Otp Item must have an index. This is a bug in Qwik UI");
+    throw new Error(
+      'Qwik UI: Otp Item must have an index. This is a bug in Qwik UI'
+    );
   }
 
   return (
     <div
       {...props}
       ref={itemRef}
       data-qui-otp-item={_index}
-      data-highlighted={context.activeIndexSig.value === _index ? "" : undefined}
+      data-highlighted={
+        (context.isFocusedSig.value &&
+          context.activeIndexSig.value === _index) ||
+        (isFullEntry.value &&
+          context.fullEntrySig.value &&
+          !context.isFocusedSig.value === false)
+          ? ''
+          : undefined
+      }
       onFocus$={() => {
         context.activeIndexSig.value = _index;
-        isFocused.value = true;
+        context.isFocusedSig.value = true;
         context.nativeInputRef.value?.focus();
       }}
     >

libs/components/src/otp/otp-native-input.tsx

@@ -1,24 +1,33 @@
 // File: otp-native-input.tsx
-import { component$, useContext } from "@builder.io/qwik";
-import { OTPContextId } from "./otp-context";
+import { component$, type PropsOf, useContext } from '@builder.io/qwik';
+import { OTPContextId } from './otp-context';
 
-export const OtpNativeInput = component$(() => {
+interface OtpNativeInputProps extends PropsOf<'input'> {}
+
+export const OtpNativeInput = component$((props: OtpNativeInputProps) => {
   const context = useContext(OTPContextId);
 
   return (
     <input
+      {...props}
       ref={context.nativeInputRef}
       type="text"
       data-qui-otp-native-input
       value={context.value.value}
       inputMode="numeric"
       pattern="[0-9]*"
+      onFocus$={() => {
+        context.isFocusedSig.value = true;
+      }}
+      onBlur$={() => {
+        context.isFocusedSig.value = false;
+      }}
       onInput$={(event: InputEvent) => {
         const input = event.target as HTMLInputElement;
         context.value.value = input.value;
         context.activeIndexSig.value = input.value.length;
       }}
-      maxLength={6}
+      maxLength={context.numItemsSig.value}
       aria-label="Enter your OTP"
     />
   );

libs/components/src/otp/otp-root.tsx

@@ -2,37 +2,51 @@ import {
   type PropsOf,
   Slot,
   component$,
+  useComputed$,
   useContextProvider,
-  useSignal
-} from "@builder.io/qwik";
-import { findComponent, processChildren } from "../../utils/inline-component";
-import { OTPContextId } from "./otp-context";
-import { OtpItem } from "./otp-item";
-
-type OtpRootProps = PropsOf<"div">;
+  useSignal,
+} from '@builder.io/qwik';
+import { findComponent, processChildren } from '../../utils/inline-component';
+import { OTPContextId } from './otp-context';
+import { OtpItem } from './otp-item';
+
+type OtpRootProps = PropsOf<'div'> & {
+  _numItems?: number;
+};
 
 export const OtpRoot = ({ children }: OtpRootProps) => {
   let currItemIndex = 0;
+  let numItems = 0;
 
   findComponent(OtpItem, (itemProps) => {
     itemProps._index = currItemIndex;
     currItemIndex++;
+    numItems = currItemIndex;
   });
 
   processChildren(children);
 
-  return <OtpBase>{children}</OtpBase>;
+  return <OtpBase _numItems={numItems}>{children}</OtpBase>;
 };
 
 export const OtpBase = component$((props: OtpRootProps) => {
-  const value = useSignal<string | number>("");
+  const value = useSignal<string>('');
   const activeIndex = useSignal(0);
   const nativeInputRef = useSignal<HTMLInputElement>();
+  const numItemsSig = useComputed$(() => props._numItems || 0);
+  const isFocusedSig = useSignal(false);
+
+  const fullEntrySig = useComputed$(
+    () => value.value.length === numItemsSig.value
+  );
 
   const context = {
     value: value,
     activeIndexSig: activeIndex,
-    nativeInputRef: nativeInputRef
+    nativeInputRef: nativeInputRef,
+    numItemsSig,
+    fullEntrySig,
+    isFocusedSig,
   };
 
   useContextProvider(OTPContextId, context);

libs/components/src/otp/otp-test.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('OTP Component Tests', () => {
+  test('should allow input into OTP fields and verify focus management', async ({
+    page,
+  }) => {
+    await page.goto('http://localhost:6174/otp/hero');
+
+    const inputs = page.locator('input[data-qui-otp-native-input]');
+
+    await inputs.focus();
+    // assumes 4 inputs
+    await inputs.fill('1234');
+    expect(inputs).toHaveValue('1234');
+
+    // assumes 4 inputs
+    const lastOtpItem = page.locator('div[data-qui-otp-item="3"]');
+    await expect(lastOtpItem).toHaveAttribute('data-highlighted', '');
+  });
+});