@douglasneuroinformatics/libui 4.1.0 → 4.2.0

package/dist/hooks.d.ts

@@ -3,7 +3,7 @@ export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as T
 import { Promisable } from 'type-fest';
 import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
-import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-Dm7os_cB.js';
+import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DHTtLrqP.js';
 
 declare function useChart(): {
     config: ChartConfig;

package/dist/hooks.js

@@ -19,8 +19,8 @@ import {
   useTheme,
   useTranslation,
   useWindowSize
-} from "./chunk-KI6BSSS6.js";
-import "./chunk-655XRTXX.js";
+} from "./chunk-ZIAKQCCQ.js";
+import "./chunk-ARKHRGTL.js";
 import "./chunk-HCQE34RL.js";
 export {
   DEFAULT_THEME,

package/dist/i18n.d.ts

@@ -1,7 +1,7 @@
 import * as zustand from 'zustand';
 import { SetOptional } from 'type-fest';
-import { L as Language, b as Translations, a as TranslateFunction } from './types-Dm7os_cB.js';
-export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-Dm7os_cB.js';
+import { L as Language, b as Translations, a as TranslateFunction } from './types-DHTtLrqP.js';
+export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DHTtLrqP.js';
 
 type InitOptions = {
     defaultLanguage?: Language;

package/dist/i18n.js

@@ -2,7 +2,7 @@
 import {
   i18n,
   translationStore
-} from "./chunk-655XRTXX.js";
+} from "./chunk-ARKHRGTL.js";
 export {
   i18n,
   translationStore

package/dist/{types-Dm7os_cB.d.ts → types-DHTtLrqP.d.ts}

@@ -132,11 +132,25 @@ var notifications = {
 		}
 	}
 };
+var oneTimePasswordInput = {
+	invalidCodeFormat: {
+		en: "Invalid code format",
+		fr: "Format de code invalide"
+	}
+};
 var 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"
@@ -144,14 +158,6 @@ var pagination = {
 	previous: {
 		en: "Previous",
 		fr: "Précédent"
-	},
-	firstPage: {
-		en: "<< First",
-		fr: "<< Première"
-	},
-	lastPage: {
-		en: "Last >>",
-		fr: "Dernière >>"
 	}
 };
 var searchBar = {
@@ -165,6 +171,7 @@ var libuiTranslations = {
 	form: form,
 	months: months,
 	notifications: notifications,
+	oneTimePasswordInput: oneTimePasswordInput,
 	pagination: pagination,
 	searchBar: searchBar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "packageManager": "pnpm@10.7.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -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",

package/src/components/Form/Form.stories.tsx

@@ -540,7 +540,7 @@ export const WithError: StoryObj<typeof Form> = {
         variant: 'input'
       }
     },
-    beforeSubmit: (data) => {
+    onBeforeSubmit: (data) => {
       if (data.name === 'Winston') {
         return { success: true };
       }

package/src/components/Form/Form.test.tsx

@@ -116,14 +116,13 @@ describe('Form', () => {
     });
   });
 
-  describe('custom beforeSubmit error', () => {
-    let beforeSubmit: Mock;
+  describe('custom onBeforeSubmit error', () => {
+    let onBeforeSubmit: Mock;
 
     beforeEach(() => {
-      beforeSubmit = vi.fn();
+      onBeforeSubmit = vi.fn();
       render(
         <Form
-          beforeSubmit={beforeSubmit}
           content={{
             value: {
               kind: 'number',
@@ -135,6 +134,7 @@ describe('Form', () => {
           validationSchema={z.object({
             value: z.number({ message: 'Please enter a number' })
           })}
+          onBeforeSubmit={onBeforeSubmit}
           onError={onError}
           onSubmit={onSubmit}
         />
@@ -156,12 +156,12 @@ describe('Form', () => {
           'Please enter a number'
         ])
       );
-      expect(beforeSubmit).not.toHaveBeenCalled();
+      expect(onBeforeSubmit).not.toHaveBeenCalled();
       expect(onSubmit).not.toHaveBeenCalled();
     });
 
-    it('should not allow submitting the form with the beforeSubmit error', async () => {
-      beforeSubmit.mockResolvedValueOnce({ errorMessage: 'Invalid!', success: false });
+    it('should not allow submitting the form with the onBeforeSubmit error', async () => {
+      onBeforeSubmit.mockResolvedValueOnce({ errorMessage: 'Invalid!', success: false });
       const field: HTMLInputElement = screen.getByLabelText('Value');
       await userEvent.type(field, '-1');
       fireEvent.submit(screen.getByTestId(testid));
@@ -171,8 +171,8 @@ describe('Form', () => {
       expect(onSubmit).not.toHaveBeenCalled();
     });
 
-    it('should allow submitting the form if beforeSubmit returns true', async () => {
-      beforeSubmit.mockResolvedValueOnce({ success: true });
+    it('should allow submitting the form if onBeforeSubmit returns true', async () => {
+      onBeforeSubmit.mockResolvedValueOnce({ success: true });
       const field: HTMLInputElement = screen.getByLabelText('Value');
       await userEvent.type(field, '-1');
       fireEvent.submit(screen.getByTestId(testid));

package/src/components/Form/Form.tsx

@@ -29,7 +29,6 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
     left?: React.ReactNode;
     right?: React.ReactNode;
   };
-  beforeSubmit?: (data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>;
   className?: string;
   content: FormContent<TData>;
   customStyles?: {
@@ -39,6 +38,7 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
   fieldsFooter?: React.ReactNode;
   id?: string;
   initialValues?: PartialNullableFormDataType<NoInfer<TData>>;
+  onBeforeSubmit?: (data: NoInfer<TData>) => Promisable<{ errorMessage: string; success: false } | { success: true }>;
   onError?: (error: z.ZodError<NoInfer<TData>>) => void;
   onSubmit: (data: NoInfer<TData>) => Promisable<void>;
   preventResetValuesOnReset?: boolean;
@@ -52,13 +52,13 @@ type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<T
 
 const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({
   additionalButtons,
-  beforeSubmit,
   className,
   content,
   customStyles,
   fieldsFooter,
   id,
   initialValues,
+  onBeforeSubmit,
   onError,
   onSubmit,
   preventResetValuesOnReset,
@@ -116,8 +116,8 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
       handleError(result.error);
       return;
     }
-    if (beforeSubmit) {
-      const beforeSubmitResult = await beforeSubmit(result.data);
+    if (onBeforeSubmit) {
+      const beforeSubmitResult = await onBeforeSubmit(result.data);
       if (!beforeSubmitResult.success) {
         setErrors({});
         setRootErrors([beforeSubmitResult.errorMessage]);
@@ -142,7 +142,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   const isGrouped = Array.isArray(content);
 
   const revalidate = () => {
-    const hasErrors = Object.keys(errors).length > 0;
+    const hasErrors = Object.keys(errors).length > 0 || rootErrors.length;
     if (hasErrors) {
       validationSchema
         .safeParseAsync(values)
@@ -156,7 +156,8 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
   };
 
   useEffect(() => {
-    revalidate();
+    setErrors({});
+    setRootErrors([]);
   }, [resolvedLanguage]);
 
   const isSuspended = Boolean(suspendWhileSubmitting && isSubmitting);

package/src/components/OneTimePasswordInput/OneTimePasswordInput.spec.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { OneTimePasswordInput } from './OneTimePasswordInput';
+
+type Props = React.ComponentPropsWithoutRef<typeof OneTimePasswordInput>;
+
+const TEST_ID = 'OneTimePasswordInput';
+
+const TestOneTimePasswordInput: React.FC<Partial<Props>> = (props) => {
+  return <OneTimePasswordInput data-testid={TEST_ID} {...(props as Props)} />;
+};
+
+describe('OneTimePasswordInput', () => {
+  it('should render', () => {
+    render(<TestOneTimePasswordInput />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+});

package/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 = {};

package/src/components/OneTimePasswordInput/OneTimePasswordInput.tsx

@@ -0,0 +1,109 @@
+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 = {
+  [key: `data-${string}`]: unknown;
+  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, ...props }: 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)} {...props}>
+      {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>
+  );
+};

package/src/components/OneTimePasswordInput/index.ts

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

package/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';

package/src/i18n/translations/libui.json

@@ -131,11 +131,25 @@
       }
     }
   },
+  "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"
@@ -143,14 +157,6 @@
     "previous": {
       "en": "Previous",
       "fr": "Précédent"
-    },
-    "firstPage": {
-      "en": "<< First",
-      "fr": "<< Première"
-    },
-    "lastPage": {
-      "en": "Last >>",
-      "fr": "Dernière >>"
     }
   },
   "searchBar": {