@ews-admin/global-design-system 1.1.26 → 1.5.0

package/dist/utils/index.d.ts

@@ -1,5 +1,7 @@
 import { type ClassValue } from "clsx";
 export { createEnvConfig } from "./env-config";
+export { COUNTRY_CODES, extractCountryCodeFromPhoneNumber, formatPhoneNumberWithCountryCode, getDefaultCountryCode, } from "./phone";
+export type { CountryCodeOption, CountryCodeSelectProps } from "./phone";
 export type { EnvConfig, EnvConfigOverrides, Environment, } from "./env-config";
 /**
  * Default currency for price formatting

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,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;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;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,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;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;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

@@ -0,0 +1,48 @@
+/**
+ * Country code option for phone number selection
+ */
+export interface CountryCodeOption {
+    code: string;
+    country: string;
+}
+/**
+ * Props for country code select component
+ */
+export interface CountryCodeSelectProps {
+    options: CountryCodeOption[];
+    value: string;
+    onChange: (code: string) => void;
+}
+/**
+ * Available country codes supported by the platform
+ */
+export declare const COUNTRY_CODES: CountryCodeOption[];
+/**
+ * Determines the default country code based on phone number prefix or country ISO code.
+ * Falls back to "+221" (Senegal) when no match is found.
+ */
+export declare function getDefaultCountryCode(phoneNumber?: string, country?: string): string;
+/**
+ * Extracts the country code prefix from a phone number and returns both
+ * the detected country code and the local number without the prefix.
+ *
+ * @example
+ * extractCountryCodeFromPhoneNumber("+22177123456") // { countryCode: "+221", cleanedPhoneNumber: "77123456" }
+ * extractCountryCodeFromPhoneNumber("77123456")     // { countryCode: "+221", cleanedPhoneNumber: "77123456" }
+ */
+export declare function extractCountryCodeFromPhoneNumber(phoneNumber: string, country?: string): {
+    countryCode: string;
+    cleanedPhoneNumber: string;
+};
+/**
+ * Formats a phone number by prepending the country code if not already present.
+ * If the number already starts with a known country code it is returned as-is.
+ * Leading zeros, spaces and dashes are stripped from the local part before formatting.
+ *
+ * @example
+ * formatPhoneNumberWithCountryCode("77123456", "+221")    // "+22177123456"
+ * formatPhoneNumberWithCountryCode("+22177123456", "+221") // "+22177123456" (unchanged)
+ * formatPhoneNumberWithCountryCode("077123456", "+221")   // "+22177123456" (leading 0 stripped)
+ */
+export declare function formatPhoneNumberWithCountryCode(phoneNumber: string, countryCode?: string): string;
+//# sourceMappingURL=phone.d.ts.map

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

@@ -0,0 +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,CAgBrD;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC9C,WAAW,EAAE,MAAM,EACnB,WAAW,GAAE,MAAe,GAC3B,MAAM,CAgBR"}

package/package.json

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

package/src/components/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,127 @@
+import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from "react";
+import {
+  COUNTRY_CODES,
+  extractCountryCodeFromPhoneNumber,
+} from "../../utils/phone";
+import { formatNumeric } from "../../utils";
+import { Input } from "../Input/Input";
+import type { InputProps } from "../Input/Input";
+
+const DEFAULT_COUNTRY_CODE = "+221";
+
+export interface PhoneInputProps
+  extends Omit<InputProps, "countryCodeSelect" | "leftIcon" | "type"> {
+  /** Currently selected country code (controlled). Defaults to +221 if omitted. */
+  countryCode?: string;
+  /** Called when the user changes the country code dropdown. */
+  onCountryCodeChange?: (code: string) => void;
+}
+
+/**
+ * Phone number input with integrated country code selector.
+ *
+ * The component stores the **full** phone number (e.g. "+22177123456") as its
+ * form value so that the country code prefix is always preserved on save.
+ * The text field displays only the local part ("77123456") for a clean UX.
+ *
+ * Works with React Hook Form via `Controller` — no extra setup needed.
+ */
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({ countryCode, onCountryCodeChange, onChange, value, ...props }, ref) => {
+    // internalCode tracks user's explicit dropdown selection when no countryCode
+    // prop is provided and value doesn't carry a recognised prefix.
+    const [internalCode, setInternalCode] = useState(DEFAULT_COUNTRY_CODE);
+    const nativeRef = useRef<HTMLInputElement>(null);
+
+    // Derive the country code directly from value on every render — no state
+    // sync needed. Falls back to internalCode when value is empty or unrecognised.
+    const codeFromValue = (value as string)
+      ? COUNTRY_CODES.find(({ code }) =>
+          (value as string).startsWith(code)
+        )?.code ?? null
+      : null;
+
+    const activeCode = countryCode ?? codeFromValue ?? internalCode;
+
+    const handleCodeChange = (newCode: string) => {
+      // Update internal or external country code state.
+      if (onCountryCodeChange) {
+        onCountryCodeChange(newCode);
+      } else {
+        setInternalCode(newCode);
+      }
+      // Re-emit the current phone value with the new country code so that
+      // RHF (Controller) and any other onChange listeners stay in sync even
+      // when the user changes the dropdown without retyping the number.
+      const el = nativeRef.current;
+      if (el && onChange) {
+        const numeric = formatNumeric(el.value);
+        const fullValue = numeric ? `${newCode}${numeric}` : "";
+        // Pass the value string directly — RHF's Controller field.onChange
+        // accepts raw values, avoiding unreliable fake-event parsing.
+        (onChange as unknown as (value: string) => void)(fullValue);
+      }
+    };
+
+    const toLocalPart = (v: unknown) =>
+      extractCountryCodeFromPhoneNumber((v as string) || "").cleanedPhoneNumber;
+
+    // When value prop changes (Controller / direct value prop usage),
+    // update the DOM input directly so the display stays in sync.
+    useEffect(() => {
+      const el = nativeRef.current;
+      if (el && value !== undefined) {
+        el.value = toLocalPart(value);
+      }
+    }, [value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      // Enforce digits-only in the displayed field.
+      const numeric = formatNumeric(e.target.value);
+      if (e.target.value !== numeric) {
+        e.target.value = numeric;
+      }
+      // Always emit the full phone number (country code + local part) to the form.
+      const fullValue = numeric ? `${activeCode}${numeric}` : "";
+      const syntheticEvent = {
+        ...e,
+        target: { ...e.target, value: fullValue, name: e.target.name },
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange?.(syntheticEvent);
+    };
+
+    // Merge the forwarded ref (used by RHF register) with our internal ref.
+    const composedRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        (nativeRef as MutableRefObject<HTMLInputElement | null>).current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          (ref as MutableRefObject<HTMLInputElement | null>).current = node;
+      },
+      [ref]
+    );
+
+    // Initial display: strip country code so only the local part is shown.
+    const initialDisplay =
+      value !== undefined ? toLocalPart(value) : undefined;
+
+    return (
+      <Input
+        ref={composedRef}
+        type="tel"
+        // Use defaultValue (uncontrolled) so React never resets what the user types.
+        // Updates from the value prop are applied imperatively via the useEffect above.
+        defaultValue={initialDisplay}
+        countryCodeSelect={{
+          options: COUNTRY_CODES,
+          value: activeCode,
+          onChange: handleCodeChange,
+        }}
+        onChange={handleChange}
+        {...props}
+      />
+    );
+  }
+);
+
+PhoneInput.displayName = "PhoneInput";

package/src/components/PhoneInput/index.ts

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

package/src/index.ts

@@ -22,6 +22,9 @@ export type { ProfileImageUploadProps } from "./components/ProfileImageUpload";
 export { DropdownMultiSelect } from "./components/DropdownMultiSelect";
 export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";
 
+export { PhoneInput } from "./components/PhoneInput";
+export type { PhoneInputProps } from "./components/PhoneInput";
+
 export { Logo } from "./components/Logo";
 export type { LogoProps } from "./components/Logo";
 
@@ -44,15 +47,25 @@ export {
   BLOOD_TYPES,
   BloodType,
   cn,
+  COUNTRY_CODES,
   createEnvConfig,
   debounce,
+  extractCountryCodeFromPhoneNumber,
   formatCurrency,
   formatDate,
   formatNumeric,
+  formatPhoneNumberWithCountryCode,
   generateId,
+  getDefaultCountryCode,
   isValidPhoneNumber,
 } from "./utils";
-export type { EnvConfig, EnvConfigOverrides, Environment } from "./utils";
+export type {
+  CountryCodeOption,
+  CountryCodeSelectProps,
+  EnvConfig,
+  EnvConfigOverrides,
+  Environment,
+} from "./utils";
 
 // Hooks
 export { useDebounce, useDebouncedCallback, useSelectField } from "./hooks";

package/src/utils/index.ts

@@ -1,6 +1,13 @@
 import { clsx, type ClassValue } from "clsx";
 
 export { createEnvConfig } from "./env-config";
+export {
+  COUNTRY_CODES,
+  extractCountryCodeFromPhoneNumber,
+  formatPhoneNumberWithCountryCode,
+  getDefaultCountryCode,
+} from "./phone";
+export type { CountryCodeOption, CountryCodeSelectProps } from "./phone";
 export type {
   EnvConfig,
   EnvConfigOverrides,

package/src/utils/phone.ts

@@ -0,0 +1,109 @@
+/**
+ * Country code option for phone number selection
+ */
+export interface CountryCodeOption {
+  code: string;
+  country: string;
+}
+
+/**
+ * Props for country code select component
+ */
+export interface CountryCodeSelectProps {
+  options: CountryCodeOption[];
+  value: string;
+  onChange: (code: string) => void;
+}
+
+/**
+ * Available country codes supported by the platform
+ */
+export const COUNTRY_CODES: CountryCodeOption[] = [
+  { code: "+221", country: "SN" }, // Senegal
+  { code: "+235", country: "TD" }, // Chad
+];
+
+/**
+ * Determines the default country code based on phone number prefix or country ISO code.
+ * Falls back to "+221" (Senegal) when no match is found.
+ */
+export function getDefaultCountryCode(
+  phoneNumber?: string,
+  country?: string
+): string {
+  if (phoneNumber) {
+    const match = COUNTRY_CODES.find(({ code }) =>
+      phoneNumber.startsWith(code)
+    );
+    if (match) return match.code;
+  }
+
+  if (country) {
+    const match = COUNTRY_CODES.find(
+      ({ country: c }) => c.toUpperCase() === country.toUpperCase()
+    );
+    if (match) return match.code;
+  }
+
+  return "+221";
+}
+
+/**
+ * Extracts the country code prefix from a phone number and returns both
+ * the detected country code and the local number without the prefix.
+ *
+ * @example
+ * extractCountryCodeFromPhoneNumber("+22177123456") // { countryCode: "+221", cleanedPhoneNumber: "77123456" }
+ * extractCountryCodeFromPhoneNumber("77123456")     // { countryCode: "+221", cleanedPhoneNumber: "77123456" }
+ */
+export function extractCountryCodeFromPhoneNumber(
+  phoneNumber: string,
+  country?: string
+): { countryCode: string; cleanedPhoneNumber: string } {
+  const matched = COUNTRY_CODES.find(({ code }) =>
+    phoneNumber.startsWith(code)
+  );
+
+  if (matched) {
+    const cleaned = phoneNumber
+      .replace(new RegExp(`^\\${matched.code}\\s*`), "")
+      .trim();
+    return { countryCode: matched.code, cleanedPhoneNumber: cleaned };
+  }
+
+  return {
+    countryCode: getDefaultCountryCode(phoneNumber, country),
+    cleanedPhoneNumber: phoneNumber.trim(),
+  };
+}
+
+/**
+ * Formats a phone number by prepending the country code if not already present.
+ * If the number already starts with a known country code it is returned as-is.
+ * Leading zeros, spaces and dashes are stripped from the local part before formatting.
+ *
+ * @example
+ * formatPhoneNumberWithCountryCode("77123456", "+221")    // "+22177123456"
+ * formatPhoneNumberWithCountryCode("+22177123456", "+221") // "+22177123456" (unchanged)
+ * formatPhoneNumberWithCountryCode("077123456", "+221")   // "+22177123456" (leading 0 stripped)
+ */
+export function formatPhoneNumberWithCountryCode(
+  phoneNumber: string,
+  countryCode: string = "+221"
+): string {
+  const trimmed = phoneNumber?.trim() || "";
+
+  if (!trimmed) return "";
+
+  // Already has a known country code — return as-is
+  if (COUNTRY_CODES.some(({ code }) => trimmed.startsWith(code))) {
+    return trimmed;
+  }
+
+  // Strip leading zeros, spaces, dashes and + signs from the local part
+  const cleaned = trimmed.replace(/^[\s+0-]*/, "").trim();
+
+  if (!cleaned) return "";
+
+  return `${countryCode}${cleaned}`;
+}