feat: add OneTimePasswordInput

Author: joshunrau

package.json

@@ -53,7 +53,7 @@
   "scripts": {
     "build": "rm -rf dist && tsup --config tsup.config.mts",
     "format": "prettier --write src",
-    "format:translations": "find src/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
+    "format:translations": "find src/i18n/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
     "lint": "tsc && eslint --fix src",
     "prepare": "husky",
     "storybook": "storybook dev --no-open -p 6006",

src/components/OneTimePasswordInput/OneTimePasswordInput.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NotificationHub } from '../NotificationHub';
+import { OneTimePasswordInput } from './OneTimePasswordInput';
+
+type Story = StoryObj<typeof OneTimePasswordInput>;
+
+export default {
+  args: {
+    onComplete: (code) => {
+      alert(`Code: ${code}`);
+    }
+  },
+  component: OneTimePasswordInput,
+  decorators: [
+    (Story) => {
+      return (
+        <>
+          <NotificationHub />
+          <Story />
+        </>
+      );
+    }
+  ]
+} as Meta<typeof OneTimePasswordInput>;
+
+export const Default: Story = {};

src/components/OneTimePasswordInput/OneTimePasswordInput.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ChangeEvent, ClipboardEvent, KeyboardEvent } from 'react';
+
+import type { Promisable } from 'type-fest';
+
+import { useNotificationsStore, useTranslation } from '@/hooks';
+import { cn } from '@/utils';
+
+const CODE_LENGTH = 6;
+
+const EMPTY_CODE = Object.freeze(Array<null>(CODE_LENGTH).fill(null));
+
+type OneTimePasswordInputProps = {
+  className?: string;
+  onComplete: (code: number) => Promisable<void>;
+};
+
+function getUpdatedDigits(digits: (null | number)[], index: number, value: null | number) {
+  const updatedDigits = [...digits];
+  updatedDigits[index] = value;
+  return updatedDigits;
+}
+
+export const OneTimePasswordInput = ({ className, onComplete }: OneTimePasswordInputProps) => {
+  const notifications = useNotificationsStore();
+  const { t } = useTranslation('libui');
+  const [digits, setDigits] = useState<(null | number)[]>([...EMPTY_CODE]);
+  const inputRefs = digits.map(() => useRef<HTMLInputElement>(null));
+
+  useEffect(() => {
+    const isComplete = digits.every((value) => Number.isInteger(value));
+    if (isComplete) {
+      void onComplete(parseInt(digits.join('')));
+      setDigits([...EMPTY_CODE]);
+    }
+  }, [digits]);
+
+  const focusNext = (index: number) => inputRefs[index + 1 === digits.length ? 0 : index + 1]?.current?.focus();
+
+  const focusPrev = (index: number) => inputRefs[index - 1 >= 0 ? index - 1 : digits.length - 1]?.current?.focus();
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>, index: number) => {
+    let value: null | number;
+    if (e.target.value === '') {
+      value = null;
+    } else if (Number.isInteger(parseInt(e.target.value))) {
+      value = parseInt(e.target.value);
+    } else {
+      return;
+    }
+    setDigits((prevDigits) => getUpdatedDigits(prevDigits, index, value));
+    focusNext(index);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>, index: number) => {
+    switch (e.key) {
+      case 'ArrowLeft':
+        focusPrev(index);
+        break;
+      case 'ArrowRight':
+        focusNext(index);
+        break;
+      case 'Backspace':
+        setDigits((prevDigits) => getUpdatedDigits(prevDigits, index - 1, null));
+        focusPrev(index);
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const pastedDigits = e.clipboardData
+      .getData('text/plain')
+      .split('')
+      .slice(0, CODE_LENGTH)
+      .map((value) => parseInt(value));
+    const isValid = pastedDigits.length === CODE_LENGTH && pastedDigits.every((value) => Number.isInteger(value));
+    if (isValid) {
+      setDigits(pastedDigits);
+    } else {
+      notifications.addNotification({
+        message: t('oneTimePasswordInput.invalidCodeFormat'),
+        type: 'warning'
+      });
+    }
+  };
+
+  return (
+    <div className={cn('flex gap-2', className)}>
+      {digits.map((_, index) => (
+        <input
+          className="w-1/6 rounded-md border border-slate-300 bg-transparent p-2 shadow-xs hover:border-slate-300 focus:border-sky-800 focus:outline-hidden dark:border-slate-600 dark:hover:border-slate-400 dark:focus:border-sky-500"
+          key={index}
+          maxLength={1}
+          ref={inputRefs[index]}
+          type="text"
+          value={digits[index] ?? ''}
+          onChange={(e) => {
+            handleChange(e, index);
+          }}
+          onKeyDown={(e) => {
+            handleKeyDown(e, index);
+          }}
+          onPaste={handlePaste}
+        />
+      ))}
+    </div>
+  );
+};

src/components/OneTimePasswordInput/index.ts

@@ -0,0 +1 @@
+export * from './OneTimePasswordInput';

src/components/index.ts

@@ -32,6 +32,7 @@ export * from './LineGraph';
 export * from './ListboxDropdown';
 export * from './MenuBar';
 export * from './NotificationHub';
+export * from './OneTimePasswordInput';
 export * from './Pagination';
 export * from './Popover';
 export * from './Progress';

src/i18n/translations/libui.json

@@ -131,26 +131,32 @@
       }
     }
   },
+  "oneTimePasswordInput": {
+    "invalidCodeFormat": {
+      "en": "Invalid code format",
+      "fr": "Format de code invalide"
+    }
+  },
   "pagination": {
+    "firstPage": {
+      "en": "<< First",
+      "fr": "<< Première"
+    },
     "info": {
       "en": "Showing {{first}} to {{last}} of {{total}} results",
       "fr": "Affichage de {{first}} à {{last}} sur {{total}} résultats"
     },
+    "lastPage": {
+      "en": "Last >>",
+      "fr": "Dernière >>"
+    },
     "next": {
       "en": "Next",
       "fr": "Suivant"
     },
     "previous": {
       "en": "Previous",
       "fr": "Précédent"
-    },
-    "firstPage": {
-      "en": "<< First",
-      "fr": "<< Première"
-    },
-    "lastPage": {
-      "en": "Last >>",
-      "fr": "Dernière >>"
     }
   },
   "searchBar": {