@scripso-homepad/ui 0.4.39 → 0.4.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.39",
+  "version": "0.4.40",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/PhoneInput.stories.tsx

@@ -62,8 +62,7 @@ export const Controlled: Story = {
     return (
       <View style={styles.wrapper}>
         <PhoneInput
-          label="Label"
-          placeholder="placeholder"
+          label="Հեռախոսահամար"
           countryCode={countryCode}
           onCountryCodeChange={setCountryCode}
           value={phone}

package/src/components/PhoneInput.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-native";
 import { CountryCodeSelector } from "./CountryCodeSelector";
 import { Label } from "./Label";
+import { defaultCountry } from "../data/countries";
 import {
   getInputFieldStyles,
   inputFieldMetrics,
@@ -22,6 +23,12 @@ import {
   resolveInputVisualState,
 } from "../theme/input";
 import { colors, radii, spacing } from "../theme/tokens";
+import {
+  ARMENIAN_PHONE_PLACEHOLDER,
+  DEFAULT_PHONE_COUNTRY_CODE,
+  formatNationalPhoneDisplay,
+  sanitizeNationalPhoneDigits,
+} from "../utils/phoneFormat";
 import { useApplyWebClassName } from "../utils/useApplyWebClassName";
 
 /** Keep country trigger outer box equal to the phone field (transparent focus ring). */
@@ -52,14 +59,9 @@ export interface PhoneInputProps extends Omit<TextInputProps, "style"> {
   hintClassName?: string;
 }
 
-/** National phone field: digits only (blocks pasted letters/symbols). */
-function sanitizePhoneDigits(value: string): string {
-  return value.replace(/\D/g, "");
-}
-
 export function PhoneInput({
   label,
-  countryCode,
+  countryCode = defaultCountry.code,
   onCountryCodeChange,
   error,
   hint,
@@ -76,6 +78,8 @@ export function PhoneInput({
   onFocus,
   onBlur,
   onChangeText,
+  value,
+  placeholder,
   ...props
 }: PhoneInputProps) {
   const wrapperRef = useRef<ComponentRef<typeof View>>(null);
@@ -94,6 +98,16 @@ export function PhoneInput({
     disabled: isDisabled,
   });
   const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
+  const resolvedCountryCode = countryCode || DEFAULT_PHONE_COUNTRY_CODE;
+  const displayValue =
+    typeof value === "string" || typeof value === "number"
+      ? formatNationalPhoneDisplay(String(value), resolvedCountryCode)
+      : value;
+  const resolvedPlaceholder =
+    placeholder ??
+    (resolvedCountryCode === DEFAULT_PHONE_COUNTRY_CODE
+      ? ARMENIAN_PHONE_PLACEHOLDER
+      : undefined);
 
   function handleFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {
     setFocused(true);
@@ -105,8 +119,8 @@ export function PhoneInput({
     onBlur?.(event);
   }
 
-  function handleChangeText(value: string) {
-    onChangeText?.(sanitizePhoneDigits(value));
+  function handleChangeText(nextValue: string) {
+    onChangeText?.(sanitizeNationalPhoneDigits(nextValue, resolvedCountryCode));
   }
 
   const helperMessage = error ?? hint;
@@ -158,6 +172,8 @@ export function PhoneInput({
               onBlur={handleBlur}
               accessibilityState={{ disabled: isDisabled }}
               {...props}
+              value={displayValue}
+              placeholder={resolvedPlaceholder}
               onChangeText={handleChangeText}
             />
           </View>

package/src/index.ts

@@ -19,6 +19,15 @@ export type {
 export { PhoneInput } from "./components/PhoneInput";
 export type { PhoneInputProps } from "./components/PhoneInput";
 
+export {
+  ARMENIAN_PHONE_PLACEHOLDER,
+  DEFAULT_PHONE_COUNTRY_CODE,
+  formatArmenianNationalNumber,
+  formatNationalPhoneDisplay,
+  getPhoneDigits,
+  sanitizeNationalPhoneDigits,
+} from "./utils/phoneFormat";
+
 export { CountryCodeSelector } from "./components/CountryCodeSelector";
 export type { CountryCodeSelectorProps } from "./components/CountryCodeSelector";
 

package/src/utils/phoneFormat.test.ts

@@ -0,0 +1,34 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import {
+  ARMENIAN_PHONE_PLACEHOLDER,
+  formatArmenianNationalNumber,
+  formatNationalPhoneDisplay,
+  sanitizeNationalPhoneDigits,
+} from './phoneFormat';
+
+describe('phoneFormat', () => {
+  it('formats Armenia national numbers while typing', () => {
+    assert.equal(formatArmenianNationalNumber('9'), '(9');
+    assert.equal(formatArmenianNationalNumber('91'), '(91');
+    assert.equal(formatArmenianNationalNumber('914'), '(91) 4');
+    assert.equal(formatArmenianNationalNumber('9144'), '(91) 44');
+    assert.equal(formatArmenianNationalNumber('914455'), '(91) 44-55');
+    assert.equal(formatArmenianNationalNumber('91445566'), '(91) 44-55-66');
+  });
+
+  it('caps Armenia national numbers at 8 digits', () => {
+    assert.equal(sanitizeNationalPhoneDigits('9144556699', 'AM'), '91445566');
+    assert.equal(formatNationalPhoneDisplay('9144556699', 'AM'), '(91) 44-55-66');
+  });
+
+  it('leaves non-Armenia numbers as digits', () => {
+    assert.equal(formatNationalPhoneDisplay('555123456', 'GE'), '555123456');
+    assert.equal(sanitizeNationalPhoneDigits('(555) 123-456', 'GE'), '555123456');
+  });
+
+  it('exposes the Armenia placeholder mask', () => {
+    assert.equal(ARMENIAN_PHONE_PLACEHOLDER, '(00) 00-00-00');
+  });
+});

package/src/utils/phoneFormat.ts

@@ -0,0 +1,57 @@
+import { defaultCountry } from "../data/countries";
+
+export const DEFAULT_PHONE_COUNTRY_CODE = defaultCountry.code;
+const AM_NATIONAL_MAX_DIGITS = 8;
+const MAX_NATIONAL_DIGITS = 15;
+
+export function getPhoneDigits(value: string): string {
+  return value.replace(/\D/g, "");
+}
+
+/** Armenia mobile display while typing: (91) 44-55-66 */
+export function formatArmenianNationalNumber(digits: string): string {
+  const national = getPhoneDigits(digits).slice(0, AM_NATIONAL_MAX_DIGITS);
+
+  if (national.length === 0) {
+    return "";
+  }
+
+  if (national.length <= 2) {
+    return `(${national}`;
+  }
+
+  const head = national.slice(0, 2);
+  const rest = national.slice(2);
+  const groups = rest.match(/.{1,2}/g) ?? [];
+
+  return `(${head}) ${groups.join("-")}`;
+}
+
+export function formatNationalPhoneDisplay(
+  digits: string,
+  countryCode: string = DEFAULT_PHONE_COUNTRY_CODE,
+): string {
+  const national = getPhoneDigits(digits).slice(0, MAX_NATIONAL_DIGITS);
+
+  if (countryCode === DEFAULT_PHONE_COUNTRY_CODE) {
+    return formatArmenianNationalNumber(national);
+  }
+
+  return national;
+}
+
+export function sanitizeNationalPhoneDigits(
+  value: string,
+  countryCode: string = DEFAULT_PHONE_COUNTRY_CODE,
+): string {
+  const digits = getPhoneDigits(value);
+
+  if (countryCode === DEFAULT_PHONE_COUNTRY_CODE) {
+    return digits.slice(0, AM_NATIONAL_MAX_DIGITS);
+  }
+
+  return digits.slice(0, MAX_NATIONAL_DIGITS);
+}
+
+/** Placeholder mask shown for Armenia national numbers. */
+export const ARMENIAN_PHONE_PLACEHOLDER = "(00) 00-00-00";