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

package/package.json

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

@@ -0,0 +1,450 @@
+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,
+  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;
+  }
+};
+
+/** 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. 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,
+  texts,
+  error,
+  busy = false,
+  onCreate,
+  onUnlock,
+  onChangePin,
+  onReset,
+  onForgot,
+  onCancel,
+  onSignOut,
+  subtitle,
+  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 isDesktop = useMediaQuery(DESKTOP_QUERY);
+
+  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. 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;
+    // 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);
+      if (wasTop) 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 completeOtp = (code: string) => {
+    setLocalError(null);
+    setFirstValue(code);
+    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);
+
+  const digitLabel = texts.digit ?? texts.progress;
+
+  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" ? (
+          <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}
+          />
+        ) : (
+          <PinCodeInput
+            key={step}
+            length={pinLength}
+            onComplete={handlePin}
+            onChange={() => setInvalid(false)}
+            disabled={isBusy}
+            invalid={invalid}
+            resetKey={resetKey}
+            digitLabel={digitLabel}
+            groupLabel={title}
+          />
+        )}
+      </div>
+
+      <p role="alert" className="mt-3 min-h-[1.25rem] text-center text-sm text-ews-error">
+        {shownError}
+      </p>
+
+      {(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-sm 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>
+          )}
+          {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>
+  );
+};
+
+export type {
+  LockScreenMode,
+  LockScreenProps,
+  LockScreenTexts,
+} from "./LockScreen.types";
+export { LockScreen };

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

@@ -0,0 +1,75 @@
+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;
+  /** 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 {
+  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;
+  /** 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. */
+  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";