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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.29.0",
+  "version": "1.30.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

@@ -0,0 +1,324 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils";
+import { Button } from "../Button/Button";
+import { Logo } from "../Logo";
+import { PinPad } from "../PinPad";
+import type {
+  LockScreenMode,
+  LockScreenProps,
+  LockScreenTexts,
+} from "./LockScreen.types";
+
+type Step = "unlock" | "current" | "otp" | "new" | "confirm";
+
+const FIRST_STEP: Record<LockScreenMode, Step> = {
+  create: "new",
+  unlock: "unlock",
+  change: "current",
+  reset: "otp",
+};
+
+const titleOf = (mode: LockScreenMode, step: Step, texts: LockScreenTexts) => {
+  switch (step) {
+    case "unlock":
+      return texts.unlockTitle;
+    case "current":
+      return texts.currentTitle;
+    case "otp":
+      return texts.otpTitle;
+    case "new":
+      return mode === "create" ? texts.createTitle : texts.newTitle;
+    case "confirm":
+      return texts.confirmTitle;
+  }
+};
+
+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`.
+ */
+const LockScreen = ({
+  mode,
+  texts,
+  error,
+  busy = false,
+  onCreate,
+  onUnlock,
+  onChangePin,
+  onReset,
+  onForgot,
+  onCancel,
+  pinLength = 4,
+  otpLength = 6,
+  logo,
+  className,
+}: LockScreenProps) => {
+  const [step, setStep] = useState<Step>(FIRST_STEP[mode]);
+  const [firstValue, setFirstValue] = useState(""); // current PIN or one-time code
+  const [newPin, setNewPin] = useState("");
+  const [otp, setOtp] = useState("");
+  const [localError, setLocalError] = useState<string | null>(null);
+  const [invalid, setInvalid] = useState(false);
+  const [pending, setPending] = useState(false);
+  const [resetKey, setResetKey] = useState(0);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const mounted = useRef(true);
+
+  const restart = useCallback(
+    (failed: boolean) => {
+      setStep(FIRST_STEP[mode]);
+      setFirstValue("");
+      setNewPin("");
+      setOtp("");
+      setInvalid(failed);
+      setResetKey((key) => key + 1);
+    },
+    [mode],
+  );
+
+  useEffect(() => {
+    restart(false);
+    setLocalError(null);
+  }, [restart]);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+
+  // Block page scroll and keep focus inside the screen.
+  useEffect(() => {
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const previousFocus = document.activeElement as HTMLElement | null;
+    panelRef.current?.focus();
+    const keepFocus = (event: FocusEvent) => {
+      const panel = panelRef.current;
+      if (panel && !panel.contains(event.target as Node)) panel.focus();
+    };
+    document.addEventListener("focusin", keepFocus);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("focusin", keepFocus);
+      previousFocus?.focus?.();
+    };
+  }, []);
+
+  const trapTab = (event: React.KeyboardEvent) => {
+    if (event.key !== "Tab" || !panelRef.current) return;
+    const items = Array.from(
+      panelRef.current.querySelectorAll<HTMLElement>(FOCUSABLE),
+    );
+    if (items.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = items[0];
+    const last = items[items.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey && (active === first || active === panelRef.current)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  const submit = async (call: (() => Promise<unknown>) | undefined) => {
+    if (!call) return;
+    setPending(true);
+    try {
+      await call();
+      if (mounted.current) restart(false);
+    } catch {
+      if (mounted.current) restart(true);
+    } finally {
+      if (mounted.current) setPending(false);
+    }
+  };
+
+  const handlePin = (pin: string) => {
+    setLocalError(null);
+    switch (step) {
+      case "unlock":
+        void submit(onUnlock && (() => onUnlock(pin)));
+        return;
+      case "current":
+        setFirstValue(pin);
+        setStep("new");
+        return;
+      case "new":
+        setNewPin(pin);
+        setStep("confirm");
+        return;
+      case "confirm":
+        if (pin !== newPin) {
+          setLocalError(texts.mismatchError);
+          setInvalid(true);
+          setNewPin("");
+          setStep("new");
+          setResetKey((key) => key + 1);
+          return;
+        }
+        if (mode === "create") void submit(onCreate && (() => onCreate(pin)));
+        else if (mode === "change")
+          void submit(onChangePin && (() => onChangePin(firstValue, pin)));
+        else if (mode === "reset")
+          void submit(onReset && (() => onReset(firstValue, pin)));
+        return;
+    }
+  };
+
+  const submitOtp = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (otp.length !== otpLength) return;
+    setFirstValue(otp);
+    setInvalid(false);
+    setStep("new");
+  };
+
+  const isBusy = busy || pending;
+  const shownError = localError ?? error;
+  const showForgot =
+    !!onForgot &&
+    !!texts.forgot &&
+    (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>
+
+        {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>
+  );
+};
+
+export type {
+  LockScreenMode,
+  LockScreenProps,
+  LockScreenTexts,
+} from "./LockScreen.types";
+export { LockScreen };

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

@@ -0,0 +1,67 @@
+import type React from "react";
+
+export type LockScreenMode = "create" | "unlock" | "change" | "reset";
+
+/** Every text of the lock screen, already translated by the app. */
+export interface LockScreenTexts {
+  /** Accessible name of the dialog. */
+  dialogLabel: string;
+  /** create: "Choose your secret code". */
+  createTitle?: string;
+  /** create / change / reset: "Confirm your secret code". */
+  confirmTitle?: string;
+  /** unlock: "Enter your secret code". */
+  unlockTitle?: string;
+  /** change: "Enter your current secret code". */
+  currentTitle?: string;
+  /** change / reset: "Choose your new secret code". */
+  newTitle?: string;
+  /** reset: title of the one-time code step. */
+  otpTitle?: string;
+  /** reset: explanation under the title (e.g. "Code sent by SMS to ••••12"). */
+  otpDescription?: string;
+  /** reset: label of the one-time code input. */
+  otpLabel?: string;
+  /** reset: button that validates the one-time code. */
+  otpSubmit?: string;
+  /** Shown when the confirmation does not match the first PIN. */
+  mismatchError: string;
+  /** Link at the bottom ("Code secret oublié ?"), shown with `onForgot`. */
+  forgot?: string;
+  /** Secondary link, shown with `onCancel`. */
+  cancel?: 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;
+}
+
+export interface LockScreenProps {
+  mode: LockScreenMode;
+  texts: LockScreenTexts;
+  /** Error from the app (e.g. "Wrong code, 3 attempts left"). */
+  error?: string | null;
+  /** Forces the busy state (in addition to pending submit promises). */
+  busy?: boolean;
+  /** create: called with the confirmed PIN. */
+  onCreate?: (pin: string) => Promise<unknown>;
+  /** unlock: called with the typed PIN. */
+  onUnlock?: (pin: string) => Promise<unknown>;
+  /** change: called once the current PIN and the confirmed new PIN are typed. */
+  onChangePin?: (currentPin: string, newPin: string) => Promise<unknown>;
+  /** reset: called once the one-time code and the confirmed new PIN are typed. */
+  onReset?: (otp: string, newPin: string) => Promise<unknown>;
+  /** unlock / change: shows the "forgot" link. */
+  onForgot?: () => void;
+  /** Shows the "cancel" link (e.g. leave the change or reset flow). */
+  onCancel?: () => void;
+  /** Number of PIN digits. Default 4. */
+  pinLength?: number;
+  /** Number of one-time code digits. Default 6. */
+  otpLength?: number;
+  /** Replaces the default Medecine360 logo. */
+  logo?: React.ReactNode;
+  className?: string;
+}

package/src/components/LockScreen/index.ts

@@ -0,0 +1,6 @@
+export { LockScreen } from "./LockScreen";
+export type {
+  LockScreenMode,
+  LockScreenProps,
+  LockScreenTexts,
+} from "./LockScreen";

package/src/components/PinPad/PinPad.tsx

@@ -0,0 +1,150 @@
+import { Delete } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils";
+import type { PinPadProps } from "./PinPad.types";
+
+const DIGIT_ROWS = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+const keyClass =
+  "flex h-16 w-16 items-center justify-center justify-self-center rounded-full text-3xl font-light text-ews-gray-900 " +
+  "transition-colors hover:bg-ews-gray-100 active:bg-ews-gray-200 " +
+  "focus-visible:ring-2 focus-visible:ring-ews-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent";
+
+/**
+ * iOS-style PIN entry: a row of dots filled as digits are typed and a 3x4
+ * keypad. Texts are provided by the caller (already translated).
+ */
+const PinPad = ({
+  length = 4,
+  onComplete,
+  onChange,
+  disabled = false,
+  invalid = false,
+  resetKey,
+  captureKeyboard = true,
+  eraseLabel,
+  progressLabel,
+  keypadLabel,
+  className,
+}: PinPadProps) => {
+  const [value, setValue] = useState("");
+  const valueRef = useRef("");
+
+  const update = useCallback(
+    (next: string) => {
+      valueRef.current = next;
+      setValue(next);
+      onChange?.(next);
+      if (next.length === length) onComplete(next);
+    },
+    [length, onChange, onComplete],
+  );
+
+  // Clear the typed digits when the caller asks for it.
+  useEffect(() => {
+    valueRef.current = "";
+    setValue("");
+  }, [resetKey]);
+
+  const press = useCallback(
+    (digit: string) => {
+      if (disabled || valueRef.current.length >= length) return;
+      update(valueRef.current + digit);
+    },
+    [disabled, length, update],
+  );
+
+  const erase = useCallback(() => {
+    if (disabled || valueRef.current.length === 0) return;
+    update(valueRef.current.slice(0, -1));
+  }, [disabled, update]);
+
+  useEffect(() => {
+    if (!captureKeyboard) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+      const target = event.target as HTMLElement | null;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) return;
+      if (/^[0-9]$/.test(event.key)) {
+        event.preventDefault();
+        press(event.key);
+      } else if (event.key === "Backspace") {
+        event.preventDefault();
+        erase();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [captureKeyboard, press, erase]);
+
+  return (
+    <div className={cn("flex flex-col items-center gap-10", className)}>
+      {/* Keypads stay left-to-right in RTL locales, like phone keypads. */}
+      <div
+        dir="ltr"
+        aria-hidden="true"
+        data-testid="pin-dots"
+        className={cn("flex gap-5", invalid && "animate-pin-shake")}
+      >
+        {Array.from({ length }, (_, index) => (
+          <span
+            key={index}
+            data-filled={index < value.length}
+            className={cn(
+              "h-3.5 w-3.5 rounded-full transition-colors",
+              invalid
+                ? "bg-ews-error"
+                : index < value.length
+                  ? "bg-ews-primary"
+                  : "bg-ews-primary-light",
+              disabled && index < value.length && "animate-pulse",
+            )}
+          />
+        ))}
+      </div>
+      <p className="sr-only" aria-live="polite" aria-atomic="true">
+        {progressLabel(value.length, length)}
+      </p>
+
+      <div
+        dir="ltr"
+        role="group"
+        aria-label={keypadLabel}
+        className="grid grid-cols-3 gap-x-8 gap-y-4"
+      >
+        {DIGIT_ROWS.map((digit) => (
+          <button
+            key={digit}
+            type="button"
+            className={keyClass}
+            disabled={disabled}
+            onClick={() => press(digit)}
+          >
+            {digit}
+          </button>
+        ))}
+        <span aria-hidden="true" />
+        <button
+          type="button"
+          className={keyClass}
+          disabled={disabled}
+          onClick={() => press("0")}
+        >
+          0
+        </button>
+        <button
+          type="button"
+          className={cn(keyClass, "text-ews-gray-700")}
+          disabled={disabled || value.length === 0}
+          aria-label={eraseLabel}
+          onClick={erase}
+        >
+          <Delete className="h-7 w-7" strokeWidth={1.5} aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export type { PinPadProps } from "./PinPad.types";
+export { PinPad };

package/src/components/PinPad/PinPad.types.ts

@@ -0,0 +1,23 @@
+export interface PinPadProps {
+  /** Number of digits of the PIN. Default 4. */
+  length?: number;
+  /** Called once the last digit is typed, with the full PIN. */
+  onComplete: (pin: string) => void;
+  /** Called on every change of the typed value. */
+  onChange?: (value: string) => void;
+  /** Ignores taps and key presses (e.g. while the PIN is being checked). */
+  disabled?: boolean;
+  /** Shows the dots in the error color and shakes them. */
+  invalid?: boolean;
+  /** Changing this value clears the typed digits (e.g. after a wrong PIN). */
+  resetKey?: string | number;
+  /** Listens to the physical keyboard (digits and Backspace). Default true. */
+  captureKeyboard?: boolean;
+  /** Accessible label of the erase key. */
+  eraseLabel: string;
+  /** Text announced to screen readers when the number of typed digits changes. */
+  progressLabel: (filled: number, total: number) => string;
+  /** Accessible label of the keypad group. */
+  keypadLabel?: string;
+  className?: string;
+}

package/src/components/PinPad/index.ts

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

package/src/hooks/index.ts

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