@ews-admin/global-design-system 1.30.0 → 1.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/LockScreen/LockScreen.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { cn } from "../../utils";
 import { Button } from "../Button/Button";
 import { Logo } from "../Logo";
+import { PinCodeInput } from "../PinCodeInput";
 import { PinPad } from "../PinPad";
 import type {
   LockScreenMode,
@@ -33,14 +35,21 @@ const titleOf = (mode: LockScreenMode, step: Step, texts: LockScreenTexts) => {
   }
 };
 
+/** Same breakpoint as Tailwind's `sm`. */
+const DESKTOP_QUERY = "(min-width: 640px)";
+
+/** Open lock screens, oldest first; only the last one traps focus. */
+const trapStack: object[] = [];
+
 const FOCUSABLE =
   'button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
 
 /**
  * Blocking PIN screen: creates, checks, changes or resets (with a one-time
- * code) the user's secret code. Full screen on mobile, centered card on a grey
- * backdrop from 640px. Submit handlers return promises: a rejection clears the
- * code and goes back to the first step, the app shows its message in `error`.
+ * code) the user's secret code. Below 640px: full screen with an on-screen
+ * keypad. From 640px: compact dialog on a grey backdrop with one box per digit,
+ * typed on the keyboard. Submit handlers return promises: a rejection clears
+ * the code and goes back to the first step, the app shows its message in `error`.
  */
 const LockScreen = ({
   mode,
@@ -53,6 +62,8 @@ const LockScreen = ({
   onReset,
   onForgot,
   onCancel,
+  onSignOut,
+  subtitle,
   pinLength = 4,
   otpLength = 6,
   logo,
@@ -68,6 +79,7 @@ const LockScreen = ({
   const [resetKey, setResetKey] = useState(0);
   const panelRef = useRef<HTMLDivElement>(null);
   const mounted = useRef(true);
+  const isDesktop = useMediaQuery(DESKTOP_QUERY);
 
   const restart = useCallback(
     (failed: boolean) => {
@@ -93,21 +105,29 @@ const LockScreen = ({
     };
   }, []);
 
-  // Block page scroll and keep focus inside the screen.
+  // Block page scroll and keep focus inside the screen. Only the most recently
+  // mounted lock screen traps focus: two traps pulling focus back to their own
+  // panel would loop forever (e.g. a Storybook docs page rendering every story).
   useEffect(() => {
+    const token = {};
+    trapStack.push(token);
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const previousFocus = document.activeElement as HTMLElement | null;
-    panelRef.current?.focus();
+    // The desktop code boxes focus themselves first.
+    if (!panelRef.current?.contains(document.activeElement)) panelRef.current?.focus();
     const keepFocus = (event: FocusEvent) => {
+      if (trapStack[trapStack.length - 1] !== token) return;
       const panel = panelRef.current;
       if (panel && !panel.contains(event.target as Node)) panel.focus();
     };
     document.addEventListener("focusin", keepFocus);
     return () => {
+      const wasTop = trapStack[trapStack.length - 1] === token;
+      trapStack.splice(trapStack.indexOf(token), 1);
       document.body.style.overflow = previousOverflow;
       document.removeEventListener("focusin", keepFocus);
-      previousFocus?.focus?.();
+      if (wasTop) previousFocus?.focus?.();
     };
   }, []);
 
@@ -185,6 +205,13 @@ const LockScreen = ({
     setStep("new");
   };
 
+  const completeOtp = (code: string) => {
+    setLocalError(null);
+    setFirstValue(code);
+    setInvalid(false);
+    setStep("new");
+  };
+
   const isBusy = busy || pending;
   const shownError = localError ?? error;
   const showForgot =
@@ -193,82 +220,39 @@ const LockScreen = ({
     (step === "unlock" || step === "current");
   const title = titleOf(mode, step, texts);
 
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 z-[1000] flex justify-center overflow-y-auto bg-white",
-        "sm:items-center sm:bg-ews-gray-900/50 sm:backdrop-blur-sm",
-        className,
-      )}
-      data-testid="lock-screen"
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={texts.dialogLabel}
-        aria-busy={isBusy}
-        tabIndex={-1}
-        onKeyDown={trapTab}
-        className={cn(
-          "flex min-h-full w-full flex-col items-center px-6 pb-8 outline-none",
-          "sm:min-h-0 sm:w-auto sm:min-w-[22rem] sm:rounded-2xl sm:bg-white sm:px-10 sm:py-10 sm:shadow-xl",
-        )}
-      >
-        <div className="flex min-h-[33vh] shrink-0 items-center justify-center sm:min-h-0 sm:pb-8">
-          {logo ?? <Logo size="lg" variant="normal" />}
-        </div>
+  const digitLabel = texts.digit ?? texts.progress;
 
-        {title && (
-          <h2 className="mb-8 text-center text-lg font-normal text-ews-gray-900">
-            {title}
-          </h2>
-        )}
+  const desktopContent = (
+    <>
+      <div className="pb-5">{logo ?? <Logo size="sm" variant="normal" />}</div>
+
+      {title && (
+        <h2 className="text-center text-xl font-semibold text-ews-gray-900">{title}</h2>
+      )}
+      {subtitle && (
+        <p className="mt-1 text-center text-sm text-ews-gray-600">{subtitle}</p>
+      )}
+      {step === "otp" && texts.otpDescription && (
+        <p className="mt-2 text-center text-sm text-ews-gray-600">{texts.otpDescription}</p>
+      )}
 
+      <div className="mt-6">
         {step === "otp" ? (
-          <form
-            onSubmit={submitOtp}
-            className="flex w-full max-w-xs flex-col items-center gap-4"
-          >
-            {texts.otpDescription && (
-              <p className="text-center text-sm text-ews-gray-600">
-                {texts.otpDescription}
-              </p>
-            )}
-            <label className="sr-only" htmlFor="lock-screen-otp">
-              {texts.otpLabel}
-            </label>
-            <input
-              id="lock-screen-otp"
-              dir="ltr"
-              inputMode="numeric"
-              autoComplete="one-time-code"
-              maxLength={otpLength}
-              value={otp}
-              disabled={isBusy}
-              aria-label={texts.otpLabel}
-              aria-invalid={invalid || undefined}
-              onChange={(event) => {
-                setOtp(event.target.value.replace(/\D/g, "").slice(0, otpLength));
-                setInvalid(false);
-              }}
-              className={cn(
-                "w-full rounded-lg border bg-white px-4 py-3 text-center text-2xl tracking-[0.5em]",
-                "focus:border-ews-primary focus:ring-2 focus:ring-ews-primary",
-                invalid ? "border-ews-error" : "border-ews-gray-300",
-              )}
-            />
-            <Button
-              type="submit"
-              variant="ews-primary"
-              fullWidth
-              disabled={otp.length !== otpLength || isBusy}
-            >
-              {texts.otpSubmit}
-            </Button>
-          </form>
+          <PinCodeInput
+            key={step}
+            length={otpLength}
+            masked={false}
+            autoComplete="one-time-code"
+            onComplete={completeOtp}
+            onChange={() => setInvalid(false)}
+            disabled={isBusy}
+            invalid={invalid}
+            resetKey={resetKey}
+            digitLabel={digitLabel}
+            groupLabel={texts.otpLabel ?? title}
+          />
         ) : (
-          <PinPad
+          <PinCodeInput
             key={step}
             length={pinLength}
             onComplete={handlePin}
@@ -276,26 +260,24 @@ const LockScreen = ({
             disabled={isBusy}
             invalid={invalid}
             resetKey={resetKey}
-            eraseLabel={texts.erase}
-            progressLabel={texts.progress}
-            keypadLabel={texts.keypad}
+            digitLabel={digitLabel}
+            groupLabel={title}
           />
         )}
+      </div>
 
-        <p
-          role="alert"
-          className="mt-6 min-h-[1.25rem] text-center text-sm text-ews-error"
-        >
-          {shownError}
-        </p>
+      <p role="alert" className="mt-3 min-h-[1.25rem] text-center text-sm text-ews-error">
+        {shownError}
+      </p>
 
-        <div className="mt-auto flex flex-col items-center gap-3 pt-6 sm:mt-4">
+      {(showForgot || (onCancel && texts.cancel) || (onSignOut && texts.signOut)) && (
+        <div className="mt-4 flex w-full flex-col items-center gap-2 border-t border-ews-gray-200 pt-4">
           {showForgot && (
             <button
               type="button"
               onClick={onForgot}
               disabled={isBusy}
-              className="text-base font-medium text-ews-primary hover:underline focus-visible:underline"
+              className="text-sm font-medium text-ews-primary hover:underline focus-visible:underline"
             >
               {texts.forgot}
             </button>
@@ -310,7 +292,151 @@ const LockScreen = ({
               {texts.cancel}
             </button>
           )}
+          {onSignOut && texts.signOut && (
+            <button
+              type="button"
+              onClick={onSignOut}
+              disabled={isBusy}
+              className="text-sm text-ews-gray-600 hover:underline focus-visible:underline"
+            >
+              {texts.signOut}
+            </button>
+          )}
         </div>
+      )}
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-[1000] flex justify-center overflow-y-auto bg-white",
+        "sm:items-center sm:bg-ews-gray-900/50 sm:backdrop-blur-sm",
+        isDesktop && "p-4",
+        className,
+      )}
+      data-testid="lock-screen"
+      data-layout={isDesktop ? "desktop" : "mobile"}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={texts.dialogLabel}
+        aria-busy={isBusy}
+        tabIndex={-1}
+        onKeyDown={trapTab}
+        className={
+          isDesktop
+            ? "flex w-full max-w-[400px] flex-col items-center rounded-2xl bg-white px-8 py-8 shadow-xl outline-none"
+            : cn(
+                "flex min-h-full w-full flex-col items-center px-6 pb-8 outline-none",
+                "sm:min-h-0 sm:w-auto sm:min-w-[22rem] sm:rounded-2xl sm:bg-white sm:px-10 sm:py-10 sm:shadow-xl",
+              )
+        }
+      >
+        {isDesktop ? (
+          desktopContent
+        ) : (
+          <>
+            <div className="flex min-h-[33vh] shrink-0 items-center justify-center sm:min-h-0 sm:pb-8">
+              {logo ?? <Logo size="lg" variant="normal" />}
+            </div>
+
+            {title && (
+              <h2 className="mb-8 text-center text-lg font-normal text-ews-gray-900">
+                {title}
+              </h2>
+            )}
+
+            {step === "otp" ? (
+              <form
+                onSubmit={submitOtp}
+                className="flex w-full max-w-xs flex-col items-center gap-4"
+              >
+                {texts.otpDescription && (
+                  <p className="text-center text-sm text-ews-gray-600">
+                    {texts.otpDescription}
+                  </p>
+                )}
+                <label className="sr-only" htmlFor="lock-screen-otp">
+                  {texts.otpLabel}
+                </label>
+                <input
+                  id="lock-screen-otp"
+                  dir="ltr"
+                  inputMode="numeric"
+                  autoComplete="one-time-code"
+                  maxLength={otpLength}
+                  value={otp}
+                  disabled={isBusy}
+                  aria-label={texts.otpLabel}
+                  aria-invalid={invalid || undefined}
+                  onChange={(event) => {
+                    setOtp(event.target.value.replace(/\D/g, "").slice(0, otpLength));
+                    setInvalid(false);
+                  }}
+                  className={cn(
+                    "w-full rounded-lg border bg-white px-4 py-3 text-center text-2xl tracking-[0.5em]",
+                    "focus:border-ews-primary focus:ring-2 focus:ring-ews-primary",
+                    invalid ? "border-ews-error" : "border-ews-gray-300",
+                  )}
+                />
+                <Button
+                  type="submit"
+                  variant="ews-primary"
+                  fullWidth
+                  disabled={otp.length !== otpLength || isBusy}
+                >
+                  {texts.otpSubmit}
+                </Button>
+              </form>
+            ) : (
+              <PinPad
+                key={step}
+                length={pinLength}
+                onComplete={handlePin}
+                onChange={() => setInvalid(false)}
+                disabled={isBusy}
+                invalid={invalid}
+                resetKey={resetKey}
+                eraseLabel={texts.erase}
+                progressLabel={texts.progress}
+                keypadLabel={texts.keypad}
+              />
+            )}
+
+            <p
+              role="alert"
+              className="mt-6 min-h-[1.25rem] text-center text-sm text-ews-error"
+            >
+              {shownError}
+            </p>
+
+            <div className="mt-auto flex flex-col items-center gap-3 pt-6 sm:mt-4">
+              {showForgot && (
+                <button
+                  type="button"
+                  onClick={onForgot}
+                  disabled={isBusy}
+                  className="text-base font-medium text-ews-primary hover:underline focus-visible:underline"
+                >
+                  {texts.forgot}
+                </button>
+              )}
+              {onCancel && texts.cancel && (
+                <button
+                  type="button"
+                  onClick={onCancel}
+                  disabled={isBusy}
+                  className="text-sm text-ews-gray-600 hover:underline focus-visible:underline"
+                >
+                  {texts.cancel}
+                </button>
+              )}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

package/src/components/LockScreen/LockScreen.types.ts

@@ -30,12 +30,16 @@ export interface LockScreenTexts {
   forgot?: string;
   /** Secondary link, shown with `onCancel`. */
   cancel?: string;
+  /** Desktop: "Se déconnecter" link, shown with `onSignOut`. */
+  signOut?: string;
   /** Accessible label of the erase key. */
   erase: string;
   /** Accessible label of the keypad. */
   keypad?: string;
   /** Text announced when the number of typed digits changes. */
   progress: (filled: number, total: number) => string;
+  /** Desktop: accessible label of each box, e.g. (1, 4) => "Chiffre 1 sur 4". Defaults to `progress`. */
+  digit?: (position: number, total: number) => string;
 }
 
 export interface LockScreenProps {
@@ -57,6 +61,10 @@ export interface LockScreenProps {
   onForgot?: () => void;
   /** Shows the "cancel" link (e.g. leave the change or reset flow). */
   onCancel?: () => void;
+  /** Desktop: shows the sign out link (with `texts.signOut`). */
+  onSignOut?: () => void;
+  /** Desktop: line under the title, e.g. "Connecté en tant que Awa Diop". */
+  subtitle?: React.ReactNode;
   /** Number of PIN digits. Default 4. */
   pinLength?: number;
   /** Number of one-time code digits. Default 6. */

package/src/components/PinCodeInput/PinCodeInput.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils";
+import type { PinCodeInputProps } from "./PinCodeInput.types";
+
+const MASK = "•";
+const onlyDigits = (text: string) => text.replace(/\D/g, "");
+
+/**
+ * Row of one-digit boxes for a PIN or a one-time code (desktop keyboards):
+ * typing moves to the next box, Backspace goes back, arrows move, pasting a
+ * code fills the boxes and `onComplete` fires once every box is filled.
+ */
+const PinCodeInput = ({
+  length = 4,
+  onComplete,
+  onChange,
+  masked = true,
+  autoComplete = "off",
+  autoFocus = true,
+  disabled = false,
+  invalid = false,
+  resetKey,
+  digitLabel,
+  groupLabel,
+  className,
+}: PinCodeInputProps) => {
+  const empty = useCallback(() => Array.from({ length }, () => ""), [length]);
+  const [digits, setDigits] = useState<string[]>(empty);
+  const digitsRef = useRef<string[]>(digits);
+  const inputs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const focusBox = (index: number) => {
+    const input = inputs.current[Math.max(0, Math.min(index, length - 1))];
+    input?.focus();
+    input?.select();
+  };
+
+  const update = (next: string[]) => {
+    digitsRef.current = next;
+    setDigits(next);
+    const value = next.join("");
+    onChange?.(value);
+    if (value.length === length && next.every(Boolean)) onComplete(value);
+  };
+
+  /** Writes `chars` from box `start` on and focuses the box after them. */
+  const fill = (start: number, chars: string) => {
+    const next = [...digitsRef.current];
+    const written = chars.slice(0, length - start).split("");
+    written.forEach((char, offset) => {
+      next[start + offset] = char;
+    });
+    focusBox(start + written.length);
+    update(next);
+  };
+
+  // Clear the boxes when the caller asks for it.
+  useEffect(() => {
+    const cleared = empty();
+    digitsRef.current = cleared;
+    setDigits(cleared);
+  }, [resetKey, empty]);
+
+  // Focus the first empty box on mount, after a reset and once re-enabled.
+  useEffect(() => {
+    if (!autoFocus || disabled) return;
+    const firstEmpty = digitsRef.current.findIndex((digit) => !digit);
+    focusBox(firstEmpty === -1 ? length - 1 : firstEmpty);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus, disabled, resetKey, length]);
+
+  const handleChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    const { value, selectionStart } = event.target;
+    const typed = onlyDigits(value);
+    if (!typed) {
+      const next = [...digitsRef.current];
+      next[index] = "";
+      update(next);
+      return;
+    }
+    // A digit typed next to the one already in the box: keep the new one.
+    if (digitsRef.current[index] && value.length === 2) {
+      const inserted = value.charAt((selectionStart ?? value.length) - 1);
+      if (/\d/.test(inserted)) {
+        fill(index, inserted);
+        return;
+      }
+    }
+    // One digit, or a whole code (browser autofill of the one-time code).
+    fill(typed.length >= length ? 0 : index, typed);
+  };
+
+  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    switch (event.key) {
+      case "Backspace": {
+        event.preventDefault();
+        const next = [...digitsRef.current];
+        const target = next[index] ? index : Math.max(0, index - 1);
+        next[target] = "";
+        focusBox(target);
+        update(next);
+        return;
+      }
+      case "Delete": {
+        event.preventDefault();
+        const next = [...digitsRef.current];
+        next[index] = "";
+        update(next);
+        return;
+      }
+      case "ArrowLeft":
+        event.preventDefault();
+        focusBox(index - 1);
+        return;
+      case "ArrowRight":
+        event.preventDefault();
+        focusBox(index + 1);
+        return;
+      case "Home":
+        event.preventDefault();
+        focusBox(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focusBox(length - 1);
+        return;
+    }
+  };
+
+  const handlePaste = (index: number, event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    if (disabled) return;
+    const pasted = onlyDigits(event.clipboardData.getData("text"));
+    if (!pasted) return;
+    fill(pasted.length >= length ? 0 : index, pasted);
+  };
+
+  return (
+    // Codes stay left-to-right in RTL locales.
+    <div
+      dir="ltr"
+      role="group"
+      aria-label={groupLabel}
+      data-testid="pin-code-input"
+      className={cn("flex justify-center gap-3", invalid && "animate-pin-shake", className)}
+    >
+      {digits.map((digit, index) => (
+        <input
+          key={index}
+          ref={(element) => {
+            inputs.current[index] = element;
+          }}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          autoComplete={index === 0 ? autoComplete : "off"}
+          autoCorrect="off"
+          spellCheck={false}
+          value={digit && masked ? MASK : digit}
+          disabled={disabled}
+          aria-label={digitLabel(index + 1, length)}
+          aria-invalid={invalid || undefined}
+          data-filled={!!digit}
+          onChange={(event) => handleChange(index, event)}
+          onKeyDown={(event) => handleKeyDown(index, event)}
+          onPaste={(event) => handlePaste(index, event)}
+          onFocus={(event) => event.target.select()}
+          className={cn(
+            "h-14 w-12 rounded-lg border bg-white text-center text-2xl font-medium text-ews-gray-900 outline-none",
+            "transition-colors focus:border-ews-primary focus:ring-2 focus:ring-ews-primary",
+            "disabled:cursor-not-allowed disabled:opacity-60",
+            invalid ? "border-ews-error" : digit ? "border-ews-primary" : "border-ews-gray-300",
+            disabled && digit && "animate-pulse",
+          )}
+        />
+      ))}
+    </div>
+  );
+};
+
+export type { PinCodeInputProps } from "./PinCodeInput.types";
+export { PinCodeInput };

package/src/components/PinCodeInput/PinCodeInput.types.ts

@@ -0,0 +1,25 @@
+export interface PinCodeInputProps {
+  /** Number of boxes (digits). Default 4. */
+  length?: number;
+  /** Called once every box is filled, with the full code. */
+  onComplete: (code: string) => void;
+  /** Called on every change of the typed value. */
+  onChange?: (value: string) => void;
+  /** Shows bullets instead of the typed digits (PIN). Default true. */
+  masked?: boolean;
+  /** `autocomplete` of the boxes, e.g. "one-time-code" for an SMS code. Default "off". */
+  autoComplete?: string;
+  /** Focuses the first empty box on mount, after a reset and when re-enabled. Default true. */
+  autoFocus?: boolean;
+  /** Ignores input (e.g. while the code is being checked). */
+  disabled?: boolean;
+  /** Shows the boxes in the error color and shakes them. */
+  invalid?: boolean;
+  /** Changing this value clears the boxes (e.g. after a wrong code). */
+  resetKey?: string | number;
+  /** Accessible label of each box, e.g. (1, 4) => "Digit 1 of 4". */
+  digitLabel: (position: number, total: number) => string;
+  /** Accessible label of the group of boxes. */
+  groupLabel?: string;
+  className?: string;
+}

package/src/components/PinCodeInput/index.ts

@@ -0,0 +1,2 @@
+export { PinCodeInput } from "./PinCodeInput";
+export type { PinCodeInputProps } from "./PinCodeInput";

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useDebounce, useDebouncedCallback } from "./useDebounce";
+export { useMediaQuery } from "./useMediaQuery";
 export { useIdleLock } from "./useIdleLock";
 export type { UseIdleLockOptions, UseIdleLockResult } from "./useIdleLock";
 export { useSelectField } from "./useSelectField";

package/src/hooks/useMediaQuery.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+const matches = (query: string, fallback: boolean) =>
+  typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(query).matches
+    : fallback;
+
+/**
+ * Whether a CSS media query matches, updated when it changes. Returns
+ * `defaultValue` where `matchMedia` does not exist (server rendering, old
+ * test environments).
+ */
+export const useMediaQuery = (query: string, defaultValue = false): boolean => {
+  const [value, setValue] = useState(() => matches(query, defaultValue));
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const list = window.matchMedia(query);
+    const onChange = () => setValue(list.matches);
+    onChange();
+    // Safari < 14 only has addListener.
+    if (list.addEventListener) {
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    }
+    list.addListener(onChange);
+    return () => list.removeListener(onChange);
+  }, [query]);
+
+  return value;
+};