created phone input component 72h

frui/frui.css

@@ -31,6 +31,7 @@
 @import url('./styles/fields/multiselect.css');
 @import url('./styles/fields/option.css');
 @import url('./styles/fields/password.css');
+@import url('./styles/fields/phoneinput.css');
 @import url('./styles/fields/rating.css');
 @import url('./styles/fields/select.css');
 @import url('./styles/fields/switch.css');

frui/package.json

@@ -93,6 +93,7 @@
   "dependencies": {
     "codemirror": "6.0.1",
     "inputmask": "5.0.9",
+    "libphonenumber-js": "^1.12.23",
     "markdown-to-jsx": "7.7.4",
     "moment": "2.30.1",
     "react-syntax-highlighter": "15.6.1"

frui/src/element/index.tsx

@@ -1,36 +1,36 @@
-export type { AlertProps } from './Alert';
-export type { BadgeProps } from './Badge';
-export type { LoaderProps } from './Loader';
+export type { AlertProps } from './Alert.js';
+export type { BadgeProps } from './Badge.js';
+export type { LoaderProps } from './Loader.js';
 export type {
   ModalContextProps,
   ModalProviderProps, 
   ModalProps
-} from './Modal';
+} from './Modal.js';
 export type { 
   TableColProps,
   TableFootProps,
   TableHeadProps,
   TableProps,
   TableRowProps,
   TableRuleProps
-} from './Table';
-export type { TooltipProps, TooltipDirection } from './Tooltip';
+} from './Table.js';
+export type { TooltipProps, TooltipDirection } from './Tooltip.js';
 
-export { ModalContext, ModalProvider, useModal } from './Modal';
+export { ModalContext, ModalProvider, useModal } from './Modal.js';
 export {
   Thead,
   Tfoot,
   Tcol,
   Trow,
   Tgroup
-} from './Table';
+} from './Table.js';
 
-import Alert from './Alert';
-import Badge from './Badge';
-import Loader from './Loader';
-import Modal from './Modal';
-import Table from './Table';
-import Tooltip from './Tooltip';
+import Alert from './Alert.js';
+import Badge from './Badge.js';
+import Loader from './Loader.js';
+import Modal from './Modal.js';
+import Table from './Table.js';
+import Tooltip from './Tooltip.js';
 
 export {
   Alert,

frui/src/field/ColorPicker.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties } from 'react';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import ColorDisplay, { ColorProps } from '../format/Color';
+import ColorDisplay, { ColorProps } from '../format/Color.js';
 
 export type RGBA = { r: number; g: number; b: number; a: number; };
 export type HSVA = { h: number; s: number; v: number; a: number; };

frui/src/field/PhoneInput.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { 
+  parsePhoneNumberFromString, 
+  AsYouType, 
+  CountryCode 
+} from 'libphonenumber-js';
+import type { CountryData as Country } from '../field/Country';
+import countriesData from '../data/countries';
+
+export type DialCode = `+${string}`;
+
+export type PhoneInputProps = {
+  error?: boolean;
+  initialValue?: string;
+  name?: string;
+  placeholder?: string;
+  searchable?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const typedCountries = countriesData as Country[];
+
+export function usePhoneInput(initialValue?: string, defaultCountry: Country = typedCountries[0]) {
+  const [ phoneNumber, setPhoneNumber ] = useState('');
+  const [ rawNumber, setRawNumber ] = useState('');
+  const [ selectedCountry, setSelectedCountry ] = useState<Country>(defaultCountry);
+  const [ searchTerm, setSearchTerm ] = useState('');
+  const [ countries, setCountries ] = useState<Country[]>(typedCountries);
+  const [ isDropdownOpen, setIsDropdownOpen ] = useState(false);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  //format & validate input
+  const handlePhoneInputChange = (value: string) => {
+    const numericValue = value.replace(/\D/g, '');
+    setRawNumber(numericValue);
+
+    const formatter = new AsYouType(selectedCountry.iso2.toUpperCase() as CountryCode);
+    const formatted = formatter.input(numericValue);
+
+    setPhoneNumber(formatted);
+  };
+
+  //select country
+  const handleCountryChange = (country: Country) => {
+    setSelectedCountry(country);
+    setSearchTerm('');
+    setCountries(typedCountries);
+    setIsDropdownOpen(false);
+  };
+
+  //search countries
+  const handleSearch = (term: string) => {
+    setSearchTerm(term);
+    const filtered = typedCountries.filter(c =>
+      c.name.toLowerCase().includes(term.toLowerCase()) ||
+      c.iso2.toLowerCase().includes(term.toLowerCase())
+    );
+    setCountries(filtered);
+  };
+
+  //format initial value
+  useEffect(() => {
+    if (!initialValue) return;
+
+    const parsed = parsePhoneNumberFromString(initialValue);
+    if (parsed) {
+      const isoCode = parsed.country as CountryCode;
+      const match = typedCountries.find(c => c.iso2.toUpperCase() === isoCode);
+
+      if (match) {
+        setSelectedCountry(match);
+        const formatter = new AsYouType(isoCode);
+        const formatted = formatter.input(parsed.nationalNumber);
+        setPhoneNumber(formatted);
+        setRawNumber(parsed.nationalNumber);
+      } else {
+        setPhoneNumber(parsed.nationalNumber || initialValue);
+        setRawNumber(parsed.nationalNumber || initialValue);
+      }
+    } else {
+      setPhoneNumber(initialValue);
+      setRawNumber(initialValue.replace(/\D/g, ''));
+    }
+  }, [ initialValue ]);
+
+  //outside click closes dropdown
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+        setSearchTerm('');
+        setCountries(typedCountries);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  //escape key closes dropdown
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setIsDropdownOpen(false);
+        setSearchTerm('');
+        setCountries(typedCountries);
+      }
+    }
+    if (isDropdownOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [ isDropdownOpen ]);
+
+  return {
+    phoneNumber,
+    rawNumber,
+    selectedCountry,
+    countries,
+    searchTerm,
+    isDropdownOpen,
+    dropdownRef,
+    setIsDropdownOpen,
+    handlers: { handlePhoneInputChange, handleCountryChange, handleSearch }
+  };
+}
+
+//dropdown component
+export function PhoneDropdown({
+  countries,
+  searchTerm,
+  searchable,
+  onSearch,
+  onSelect
+}: {
+  countries: Country[];
+  searchTerm: string;
+  searchable?: boolean;
+  onSearch: (term: string) => void;
+  onSelect: (country: Country) => void;
+}) {
+  return (
+    <div className="frui-phone-input-dropdown-container">
+      <ul className="frui-phone-input-dropdown">
+        {searchable && (
+          <input
+            autoFocus
+            value={searchTerm}
+            onChange={e => onSearch(e.target.value)}
+            placeholder="Search for country..."
+            className="frui-phone-input-search"
+            type="search"
+          />
+        )}
+        {countries.map(country => (
+          <li
+            key={country.iso2}
+            className="frui-phone-input-dropdown-item"
+            onClick={() => onSelect(country)}
+          >
+            <span className="frui-phone-input-flag">{country.flag}</span>
+            <span>{country.name}</span>
+            <span className="frui-phone-input-dialcode">{country.tel}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+//main component
+export default function PhoneInput({
+  error = false,
+  initialValue,
+  name,
+  placeholder,
+  searchable = true,
+  className,
+  style
+}: PhoneInputProps) {
+  const {
+    phoneNumber,
+    rawNumber,
+    selectedCountry,
+    countries,
+    searchTerm,
+    isDropdownOpen,
+    dropdownRef,
+    setIsDropdownOpen,
+    handlers
+  } = usePhoneInput(initialValue, typedCountries[0]);
+
+  //base + user class
+  const classNames = [ 'frui-phone-input-wrapper' ];
+  if (error) classNames.push('frui-phone-input-error');
+  if (className) classNames.push(className);
+
+  return (
+    <>
+      <div className={classNames.join(' ')} style={style}>
+        <div className="frui-phone-input-container">
+          <button
+            className="frui-phone-input-select-btn"
+            type="button"
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+          >
+            <span className="frui-phone-input-flag">{selectedCountry.flag}</span>
+            <span>{selectedCountry.tel}</span>
+          </button>
+          <input
+            className="frui-phone-input-container-input"
+            type="tel"
+            inputMode="numeric"
+            value={phoneNumber}
+            onChange={e => handlers.handlePhoneInputChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+        {isDropdownOpen && (
+          <div ref={dropdownRef}>
+            <PhoneDropdown
+              countries={countries}
+              searchTerm={searchTerm}
+              searchable={searchable}
+              onSearch={handlers.handleSearch}
+              onSelect={handlers.handleCountryChange}
+            />
+          </div>
+        )}
+      </div>
+      {/* hidden input for form submission */}
+      <input type="hidden" name={name} value={`${selectedCountry.tel}${rawNumber}`} />
+    </>
+  );
+}

frui/src/field/index.ts

@@ -50,6 +50,7 @@ export type {
 export type { MultiSelectProps } from './MultiSelect.js';
 export type { NumberOptions, NumberProps } from './Number.js';
 export type { PasswordProps } from './Password.js';
+export type { DialCode, PhoneInputProps } from './PhoneInput.js';
 export type { RadioProps } from './Radio.js';
 export type { RatingConfig, RatingProps } from './Rating.js';
 //export type {} from './Radiolist.js';
@@ -108,6 +109,7 @@ export { useMarkdown } from './Markdown.js';
 export { useMetadata, MetadataFields } from './Metadata.js';
 export { useNumber } from './Number.js';
 export { usePassword } from './Password.js';
+export { usePhoneInput, PhoneDropdown } from './PhoneInput.js';
 export { useRadio } from './Radio.js';
 export { useRating, Star } from './Rating.js';
 //export {} from './Radiolist.js';
@@ -143,6 +145,7 @@ import Metadata from './Metadata.js';
 import MultiSelect from './MultiSelect.js';
 import Number from './Number.js';
 import Password from './Password.js';
+import PhoneInput from './PhoneInput.js';
 import Radio from './Radio.js';
 //import Radiolist from './Radiolist.js';
 import Rating from './Radio.js';
@@ -177,6 +180,7 @@ export {
   MultiSelect,
   Number,
   Password,
+  PhoneInput,
   Radio,
   Rating,
   Select,

frui/src/form/index.ts

@@ -1,16 +1,16 @@
-export type { ButtonProps } from './Button';
-export type { ControlProps } from './Control';
+export type { ButtonProps } from './Button.js';
+export type { ControlProps } from './Control.js';
 export type { 
   FieldsProps, 
   FieldsetConfig, 
   FieldsetProps
-} from './Fieldset';
+} from './Fieldset.js';
 
-export { useFieldset } from './Fieldset';
+export { useFieldset } from './Fieldset.js';
 
-import Button from './Button';
-import Control from './Control';
-import Fieldset from './Fieldset';
+import Button from './Button.js';
+import Control from './Control.js';
+import Fieldset from './Fieldset.js';
 
 export {
   Button,