@ews-admin/global-design-system 1.25.0 → 1.27.0

package/dist/utils/index.d.ts

@@ -2,7 +2,7 @@ import { type ClassValue } from "clsx";
 export { createEnvConfig } from "./env-config";
 export { SupportedCountry, getRegionsByCountry, getRegionOptions, } from "./locations";
 export type {} from "./locations";
-export { COUNTRY_CODES, extractCountryCodeFromPhoneNumber, formatPhoneNumberWithCountryCode, getDefaultCountryCode, } from "./phone";
+export { COUNTRY_CODES, extractCountryCodeFromPhoneNumber, formatPhoneNumberForDisplay, formatPhoneNumberWithCountryCode, getDefaultCountryCode, } from "./phone";
 export type { CountryCodeOption, CountryCodeSelectProps } from "./phone";
 export type { EnvConfig, EnvConfigOverrides, Environment, } from "./env-config";
 /**

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iCAAiC,EACjC,gCAAgC,EAChC,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACzE,YAAY,EACV,SAAS,EACT,kBAAkB,EAClB,WAAW,GACZ,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GACtC,IAAI,CAgBN;AAED,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,EACvC,OAAO,CAAC,EAAE,iBAAiB,GAC1B,MAAM,CASR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAUlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EACL,aAAa,EACb,iCAAiC,EACjC,2BAA2B,EAC3B,gCAAgC,EAChC,qBAAqB,GACtB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACzE,YAAY,EACV,SAAS,EACT,kBAAkB,EAClB,WAAW,GACZ,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GACtC,IAAI,CAgBN;AAED,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,EACvC,OAAO,CAAC,EAAE,iBAAiB,GAC1B,MAAM,CASR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAUlC,CAAC"}

package/dist/utils/phone.d.ts

@@ -51,4 +51,18 @@ export declare function extractCountryCodeFromPhoneNumber(phoneNumber: string, c
  *                                                           //   don't re-prepend the dial code)
  */
 export declare function formatPhoneNumberWithCountryCode(phoneNumber: string, countryCode?: string): string;
+/**
+ * Formats a phone number for display only: the country code, then the
+ * national digits in their usual groups. Do not use it for values sent to the
+ * API, form values or tel: links; formatPhoneNumberWithCountryCode gives the
+ * unspaced value for those. A number from another country, or of an
+ * unexpected length, is returned as formatPhoneNumberWithCountryCode returns it.
+ *
+ * @example
+ * formatPhoneNumberForDisplay("221771234567")  // "+221 77 123 45 67" (backend's storage format)
+ * formatPhoneNumberForDisplay("771234567")     // "+221 77 123 45 67"
+ * formatPhoneNumberForDisplay("+23566123456")  // "+235 66 12 34 56"
+ * formatPhoneNumberForDisplay("+22177123")     // "+22177123" (unexpected length, unchanged)
+ */
+export declare function formatPhoneNumberForDisplay(phoneNumber: string, countryCode?: string): string;
 //# sourceMappingURL=phone.d.ts.map

package/dist/utils/phone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone.d.ts","sourceRoot":"","sources":["../../src/utils/phone.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,iBAAiB,EAG5C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAgBR;AAED;;;;;;;GAOG;AACH,wBAAgB,iCAAiC,CAC/C,WAAW,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,MAAM,GACf;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,kBAAkB,EAAE,MAAM,CAAA;CAAE,CA+BrD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gCAAgC,CAC9C,WAAW,EAAE,MAAM,EACnB,WAAW,GAAE,MAAe,GAC3B,MAAM,CA2BR"}
+{"version":3,"file":"phone.d.ts","sourceRoot":"","sources":["../../src/utils/phone.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,iBAAiB,EAG5C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,GACf,MAAM,CAgBR;AAED;;;;;;;GAOG;AACH,wBAAgB,iCAAiC,CAC/C,WAAW,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,MAAM,GACf;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,kBAAkB,EAAE,MAAM,CAAA;CAAE,CA+BrD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gCAAgC,CAC9C,WAAW,EAAE,MAAM,EACnB,WAAW,GAAE,MAAe,GAC3B,MAAM,CA2BR;AAYD;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,CACzC,WAAW,EAAE,MAAM,EACnB,WAAW,GAAE,MAAe,GAC3B,MAAM,CAiBR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -50,6 +50,7 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "jest": "29",
     "postcss": "^8.5.6",
     "rollup": "^4.6.1",
     "rollup-plugin-dts": "^6.1.0",
@@ -57,6 +58,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.5.0",
     "tailwindcss": "^3.4.0",
+    "ts-jest": "29",
     "typescript": "^5.2.2",
     "vite": "^4.5.0"
   },

package/src/components/SecureLoader/SecureLoader.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Lock } from "lucide-react";
+
+/**
+ * The loader is purely presentational: the caller decides when to render it
+ * (while the session is validated, fetched or terminated) and provides
+ * already-translated labels.
+ */
+export interface SecureLoaderProps {
+  label: string;
+  /** Extra line shown under the label. */
+  description?: string;
+}
+
+/**
+ * Full-screen loader (lock icon with a spinner) shown while the user's
+ * session is being checked.
+ */
+const SecureLoader: React.FC<SecureLoaderProps> = ({ label, description }) => (
+  <div
+    data-testid="secure-loader"
+    className="flex min-h-screen items-center justify-center bg-gray-100"
+  >
+    <div className="flex flex-col items-center rounded-lg bg-white p-6 shadow-lg">
+      <div className="relative">
+        <Lock className="h-16 w-16 text-gray-500" />
+        <div className="absolute bottom-2 right-1 h-6 w-6 animate-spin rounded-full border-4 border-gray-300 border-t-green-500"></div>
+      </div>
+      <p className="mt-4 text-lg text-gray-600">{label}</p>
+      {description && (
+        <p className="mt-2 text-sm text-gray-500">{description}</p>
+      )}
+    </div>
+  </div>
+);
+
+export default SecureLoader;

package/src/components/SecureLoader/index.ts

@@ -0,0 +1,2 @@
+export { default as SecureLoader } from "./SecureLoader";
+export type { SecureLoaderProps } from "./SecureLoader";

package/src/index.ts

@@ -52,6 +52,9 @@ export type { TagListProps } from "./components/TagList";
 export { PaymentDueBanner } from "./components/PaymentDueBanner";
 export type { PaymentDueBannerProps } from "./components/PaymentDueBanner";
 
+export { SecureLoader } from "./components/SecureLoader";
+export type { SecureLoaderProps } from "./components/SecureLoader";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";
@@ -73,6 +76,7 @@ export {
   formatDate,
   type FormatDateOptions,
   formatNumeric,
+  formatPhoneNumberForDisplay,
   formatPhoneNumberWithCountryCode,
   generateId,
   getDefaultCountryCode,

package/src/utils/index.ts

@@ -10,6 +10,7 @@ export type {} from "./locations";
 export {
   COUNTRY_CODES,
   extractCountryCodeFromPhoneNumber,
+  formatPhoneNumberForDisplay,
   formatPhoneNumberWithCountryCode,
   getDefaultCountryCode,
 } from "./phone";

package/src/utils/phone.ts

@@ -139,3 +139,48 @@ export function formatPhoneNumberWithCountryCode(
 
   return `${countryCode}${cleaned}`;
 }
+
+/**
+ * National digit groups used to display a phone number, per country code:
+ * Senegal numbers have 9 national digits (77 123 45 67, 33 823 45 67), Chad
+ * numbers 8 (66 12 34 56).
+ */
+const DISPLAY_DIGIT_GROUPS: Record<string, number[]> = {
+  "+221": [2, 3, 2, 2],
+  "+235": [2, 2, 2, 2],
+};
+
+/**
+ * Formats a phone number for display only: the country code, then the
+ * national digits in their usual groups. Do not use it for values sent to the
+ * API, form values or tel: links; formatPhoneNumberWithCountryCode gives the
+ * unspaced value for those. A number from another country, or of an
+ * unexpected length, is returned as formatPhoneNumberWithCountryCode returns it.
+ *
+ * @example
+ * formatPhoneNumberForDisplay("221771234567")  // "+221 77 123 45 67" (backend's storage format)
+ * formatPhoneNumberForDisplay("771234567")     // "+221 77 123 45 67"
+ * formatPhoneNumberForDisplay("+23566123456")  // "+235 66 12 34 56"
+ * formatPhoneNumberForDisplay("+22177123")     // "+22177123" (unexpected length, unchanged)
+ */
+export function formatPhoneNumberForDisplay(
+  phoneNumber: string,
+  countryCode: string = "+221"
+): string {
+  const canonical = formatPhoneNumberWithCountryCode(phoneNumber, countryCode);
+  const code = COUNTRY_CODES.find(({ code: c }) => canonical.startsWith(c))?.code;
+  const groups = code ? DISPLAY_DIGIT_GROUPS[code] : undefined;
+  if (!code || !groups) return canonical;
+
+  const national = canonical.slice(code.length).replace(/[\s-]/g, "");
+  const expectedLength = groups.reduce((sum, size) => sum + size, 0);
+  if (!/^\d+$/.test(national) || national.length !== expectedLength) return canonical;
+
+  const parts: string[] = [];
+  let start = 0;
+  for (const size of groups) {
+    parts.push(national.slice(start, start + size));
+    start += size;
+  }
+  return `${code} ${parts.join(" ")}`;
+}