telpick 1.0.0

package/src/telpick.js

@@ -0,0 +1,273 @@
+class Telpick {
+  constructor({ code = null, onChange = () => {}, styleOverrides = {} } = {}) {
+    this.code = code
+    this.onChange = onChange
+    this.styleOverrides = styleOverrides
+    this.codes = []
+    this.selectedCode = code
+    this.isDropdownOpen = false
+    this.searchQuery = ''
+    this.container = null
+    this.dropdown = null
+    this._outsideHandler = null
+  }
+
+  async init(container) {
+    this.container = container
+    const res = await fetch('src/assets/country-code.json')
+    const data = await res.json()
+    this.codes = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+    if (!this.code) {
+      const services = [
+        async () => {
+          try {
+            const res = await fetch('https://ip-api.com/json/?fields=countryCode')
+            const data = await res.json()
+            if (data.countryCode) {
+              return this.codes.find(c => c.country_code === data.countryCode)
+            }
+          } catch {}
+          return null
+        },
+        async () => {
+          try {
+            const res = await fetch('https://get.geojs.io/v1/ip/country.json')
+            const data = await res.json()
+            if (data.country) {
+              return this.codes.find(c => c.country_code === data.country)
+            }
+          } catch {}
+          return null
+        },
+        async () => {
+          try {
+            const res = await fetch('https://ipapi.co/json/')
+            const data = await res.json()
+            if (data.country_code) {
+              return this.codes.find(c => c.country_code === data.country_code)
+            }
+          } catch {}
+          return null
+        }
+      ]
+
+      let found = null
+      for (const service of services) {
+        try {
+          found = await Promise.race([
+            service(),
+            new Promise((resolve) => setTimeout(() => resolve(null), 3000))
+          ])
+          if (found) break
+        } catch {}
+      }
+
+      if (!found) {
+        try {
+          const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+          const timezoneToCountry = {
+            'America/Lima': 'PE', 'America/Bogota': 'CO', 'America/Mexico_City': 'MX',
+            'America/Argentina/Buenos_Aires': 'AR', 'America/Santiago': 'CL',
+            'America/Caracas': 'VE', 'America/Montevideo': 'UY', 'America/Asuncion': 'PY',
+            'America/La_Paz': 'BO', 'America/Guayaquil': 'EC', 'America/Panama': 'PA',
+            'America/Costa_Rica': 'CR', 'America/Managua': 'NI', 'America/Tegucigalpa': 'HN',
+            'America/Guatemala': 'GT', 'America/El_Salvador': 'SV', 'America/Havana': 'CU',
+            'America/Santo_Domingo': 'DO', 'America/Jamaica': 'JM', 'America/Port-au-Prince': 'HT',
+            'Europe/Madrid': 'ES', 'Europe/London': 'GB', 'Europe/Paris': 'FR',
+            'Europe/Berlin': 'DE', 'Europe/Rome': 'IT', 'Europe/Amsterdam': 'NL',
+            'Europe/Brussels': 'BE', 'Europe/Vienna': 'AT', 'Europe/Zurich': 'CH',
+            'Europe/Stockholm': 'SE', 'Europe/Oslo': 'NO', 'Europe/Copenhagen': 'DK',
+            'Europe/Helsinki': 'FI', 'Europe/Warsaw': 'PL', 'Europe/Prague': 'CZ',
+            'Europe/Bucharest': 'RO', 'Europe/Moscow': 'RU',
+            'America/New_York': 'US', 'America/Chicago': 'US', 'America/Denver': 'US',
+            'America/Los_Angeles': 'US', 'America/Toronto': 'CA', 'America/Vancouver': 'CA',
+            'Asia/Tokyo': 'JP', 'Asia/Shanghai': 'CN', 'Asia/Hong_Kong': 'CN',
+            'Asia/Seoul': 'KR', 'Asia/Singapore': 'SG', 'Asia/Bangkok': 'TH',
+            'Asia/Jakarta': 'ID', 'Asia/Manila': 'PH', 'Asia/Kolkata': 'IN',
+            'Asia/Dubai': 'AE', 'Asia/Riyadh': 'SA',
+            'Australia/Sydney': 'AU', 'Australia/Melbourne': 'AU', 'Pacific/Auckland': 'NZ',
+            'Africa/Cairo': 'EG', 'Africa/Johannesburg': 'ZA', 'Africa/Nairobi': 'KE',
+            'Africa/Lagos': 'NG'
+          }
+          const countryCode = timezoneToCountry[timezone]
+          if (countryCode) {
+            found = this.codes.find(c => c.country_code === countryCode)
+          }
+        } catch {}
+      }
+
+      if (found) {
+        this.selectedCode = found.country_code
+      } else {
+        const defaultCountry = this.codes.find(c => c.country_code === 'CO')
+        if (defaultCountry) this.selectedCode = defaultCountry.country_code
+      }
+    } else {
+      const found = this.codes.find(c => c.country_code === this.code)
+      if (found) this.selectedCode = found.country_code
+    }
+    this.render()
+    const selected = this.codes.find(c => c.country_code === this.selectedCode)
+    if (selected) this.onChange(selected)
+    this._setupOutsideClick()
+  }
+
+  render() {
+    this.container.innerHTML = ''
+    const btn = document.createElement('button')
+    btn.className = 'telpick-btn'
+    Object.assign(btn.style, this.styleOverrides)
+    btn.onclick = () => {
+      this.isDropdownOpen = !this.isDropdownOpen
+      this.render()
+    }
+    const flagDiv = document.createElement('div')
+    flagDiv.className = 'telpick-flag'
+    const selectedCountry = this.codes.find(c => c.country_code === this.selectedCode) || { flag: '', code: '', country: '' }
+    if (selectedCountry.flag) {
+      const img = document.createElement('img')
+      img.src = 'src/assets' + selectedCountry.flag
+      img.className = 'w-full h-full object-cover'
+      img.alt = 'flag'
+      flagDiv.appendChild(img)
+    }
+    btn.appendChild(flagDiv)
+    const codeSpan = document.createElement('span')
+    codeSpan.textContent = selectedCountry.code
+    btn.appendChild(codeSpan)
+    const arrowSpan = document.createElement('span')
+    arrowSpan.className = 'ml-auto'
+    arrowSpan.textContent = '▼'
+    btn.appendChild(arrowSpan)
+    this.container.appendChild(btn)
+
+    if (this.isDropdownOpen) {
+      this.dropdown = document.createElement('div')
+      this.dropdown.className = 'telpick-dropdown'
+      this.dropdown.onclick = e => e.stopPropagation()
+      this.dropdown.onmousedown = e => e.stopPropagation()
+      
+      const input = document.createElement('input')
+      input.className = 'telpick-search'
+      input.type = 'text'
+      input.placeholder = 'Buscar país...'
+      input.value = this.searchQuery
+      input.oninput = e => {
+        e.stopPropagation()
+        const inputEl = e.target
+        const cursorPos = inputEl.selectionStart || 0
+        const newValue = inputEl.value
+        this.searchQuery = newValue
+        const ul = this.dropdown?.querySelector('ul')
+        if (ul) {
+          ul.innerHTML = ''
+          const filtered = !this.searchQuery ? this.codes : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+          filtered.forEach(item => {
+            const li = document.createElement('li')
+            const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
+            li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
+            li.onclick = () => {
+              this.selectedCode = item.country_code
+              this.onChange(item)
+              this.isDropdownOpen = false
+              this.searchQuery = ''
+              this.render()
+            }
+            const flag = document.createElement('div')
+            flag.className = 'telpick-flag'
+            const img = document.createElement('img')
+            img.src = 'src/assets' + item.flag
+            img.className = 'w-full h-full object-cover'
+            img.alt = 'flag'
+            flag.appendChild(img)
+            li.appendChild(flag)
+            const countrySpan = document.createElement('span')
+            countrySpan.textContent = item.country
+            li.appendChild(countrySpan)
+            const codeSpan = document.createElement('span')
+            codeSpan.className = 'ml-auto'
+            codeSpan.textContent = item.code
+            li.appendChild(codeSpan)
+            ul.appendChild(li)
+          })
+          requestAnimationFrame(() => {
+            if (input) {
+              input.focus()
+              const newCursorPos = Math.min(cursorPos + 1, newValue.length)
+              input.setSelectionRange(newCursorPos, newCursorPos)
+            }
+          })
+        } else {
+          this.render()
+        }
+      }
+      input.onclick = e => e.stopPropagation()
+      input.onmousedown = e => e.stopPropagation()
+      this.dropdown.appendChild(input)
+      const ul = document.createElement('ul')
+      ul.style.maxHeight = '130px'
+      ul.style.overflowY = 'auto'
+      const filtered = !this.searchQuery ? this.codes : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+      filtered.forEach(item => {
+        const li = document.createElement('li')
+        const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
+        li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
+        li.setAttribute('aria-selected', isSelected)
+        li.onclick = () => {
+          this.selectedCode = item.country_code
+          this.onChange(item)
+          this.isDropdownOpen = false
+          this.searchQuery = ''
+          this.render()
+        }
+        const flag = document.createElement('div')
+          flag.className = 'telpick-flag'
+          const img = document.createElement('img')
+          img.src = 'src/assets' + item.flag
+        img.className = 'w-full h-full object-cover'
+        img.alt = 'flag'
+          flag.appendChild(img)
+          li.appendChild(flag)
+          const countrySpan = document.createElement('span')
+          countrySpan.textContent = item.country
+          li.appendChild(countrySpan)
+          const codeSpan = document.createElement('span')
+        codeSpan.className = 'ml-auto'
+        codeSpan.textContent = item.code
+        li.appendChild(codeSpan)
+        ul.appendChild(li)
+      })
+      this.dropdown.appendChild(ul)
+      this.container.appendChild(this.dropdown)
+      
+      requestAnimationFrame(() => {
+        if (input) {
+          input.focus()
+        }
+      })
+    }
+  }
+
+  _setupOutsideClick() {
+    if (this._outsideHandler) document.removeEventListener('click', this._outsideHandler)
+    this._outsideHandler = e => {
+      const target = e.target
+      if (this.isDropdownOpen && this.container && target) {
+        const dropdown = this.container.querySelector('.telpick-dropdown')
+        if (!this.container.contains(target) && (!dropdown || !dropdown.contains(target))) {
+          this.isDropdownOpen = false
+          this.render()
+        }
+      }
+    }
+    document.addEventListener('click', this._outsideHandler, true)
+  }
+
+  destroy() {
+    if (this._outsideHandler) document.removeEventListener('mousedown', this._outsideHandler)
+    this.container.innerHTML = ''
+  }
+}
+
+window.Telpick = Telpick
+export default Telpick

package/src/telpick.react.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react'
+import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
+import './telpick.css'
+
+export function TelpickReact({ code, onChange, styleOverrides }: TelpickProps) {
+  const [codes, setCodes] = useState<CountryCode[]>([])
+  const [selectedCode, setSelectedCode] = useState(code)
+  const [isDropdownOpen, setDropdownOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    fetch('/resources/api/country-codes.json')
+      .then(res => res.json())
+      .then(data => {
+        const sorted = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+        setCodes(sorted)
+        if (!code) {
+          getDefaultCountry(data).then(def => {
+            if (def) {
+              setSelectedCode(def.country_code)
+              onChange && onChange(def)
+            }
+          })
+        } else {
+          setSelectedCode(code)
+        }
+      })
+  }, [code, onChange])
+
+  useEffect(() => {
+    if (code !== undefined && code !== selectedCode) {
+      setSelectedCode(code)
+    }
+  }, [code])
+
+  useEffect(() => {
+    if (dropdownRef.current) {
+      const remove = useClickOutside(dropdownRef.current, () => setDropdownOpen(false))
+      return remove
+    }
+  }, [dropdownRef])
+
+  useEffect(() => {
+    if (isDropdownOpen && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [isDropdownOpen])
+
+  const selectCode = (item: CountryCode) => {
+    setSelectedCode(item.country_code)
+    onChange && onChange(item)
+    setDropdownOpen(false)
+    setSearchQuery('')
+  }
+
+  const selectedCountry = codes.find(c => c.country_code === selectedCode) || {
+    country_code: selectedCode,
+    flag: '',
+    country: '',
+    code: '',
+  }
+
+  const filteredCodes = useMemo(() => {
+    if (!searchQuery) return codes
+    return codes.filter(c => c.country.toLowerCase().includes(searchQuery.toLowerCase()))
+  }, [codes, searchQuery])
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const cursorPosition = e.target.selectionStart || 0
+    const newValue = e.target.value
+    setSearchQuery(newValue)
+    requestAnimationFrame(() => {
+      if (searchInputRef.current) {
+        searchInputRef.current.focus()
+        const newCursorPos = Math.min(cursorPosition + 1, newValue.length)
+        searchInputRef.current.setSelectionRange(newCursorPos, newCursorPos)
+      }
+    })
+  }
+
+  return (
+    <div className="telpick-wrapper relative" ref={dropdownRef}>
+      <button
+        onClick={() => setDropdownOpen(!isDropdownOpen)}
+        className="telpick-btn"
+        style={styleOverrides}
+        aria-expanded={isDropdownOpen}
+        aria-haspopup="listbox"
+      >
+        <div className="telpick-flag">
+          {selectedCountry.flag && <img src={selectedCountry.flag} alt={selectedCountry.country || 'flag'} />}
+        </div>
+        <span>{selectedCountry.code}</span>
+        <span className="telpick-arrow ml-auto">▼</span>
+      </button>
+      {isDropdownOpen && (
+        <div 
+          className="telpick-dropdown" 
+          role="listbox"
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <input
+            ref={searchInputRef}
+            value={searchQuery}
+            onChange={handleSearchChange}
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            type="text"
+            placeholder="Buscar país..."
+            className="telpick-search"
+            autoFocus
+          />
+          <ul>
+            {filteredCodes.map((item, index) => {
+              const isSelected = item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined
+              return (
+                <li
+                  key={`${item.country_code}-${index}`}
+                  onClick={() => selectCode(item)}
+                  className={`telpick-item ${isSelected ? 'telpick-item-selected' : ''}`}
+                  role="option"
+                  aria-selected={isSelected}
+                >
+                <div className="telpick-flag">
+                  <img src={item.flag} alt={item.country} />
+                </div>
+                <span>{item.country}</span>
+                <span className="ml-auto">{item.code}</span>
+              </li>
+              )
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/telpick.ts

@@ -0,0 +1,157 @@
+export interface CountryCode {
+  country_code: string;
+  flag: string;
+  country: string;
+  code: string;
+}
+
+export interface TelpickProps {
+  code?: string;
+  onChange?: (country: CountryCode) => void;
+  styleOverrides?: Partial<Record<string, string>>;
+}
+
+export async function getDefaultCountry(codes: CountryCode[]): Promise<CountryCode | null> {
+  const services = [
+    async () => {
+      try {
+        const res = await fetch('https://ip-api.com/json/?fields=countryCode')
+        const data = await res.json()
+        if (data.countryCode) {
+          return codes.find(c => c.country_code === data.countryCode) || null
+        }
+      } catch {}
+      return null
+    },
+    async () => {
+      try {
+        const res = await fetch('https://get.geojs.io/v1/ip/country.json')
+        const data = await res.json()
+        if (data.country) {
+          return codes.find(c => c.country_code === data.country) || null
+        }
+      } catch {}
+      return null
+    },
+    async () => {
+      try {
+        const res = await fetch('https://ipapi.co/json/')
+        const data = await res.json()
+        if (data.country_code) {
+          return codes.find(c => c.country_code === data.country_code) || null
+        }
+      } catch {}
+      return null
+    },
+    async () => {
+      try {
+        const res = await fetch('https://ip-api.io/json/')
+        const data = await res.json()
+        if (data.country_code) {
+          return codes.find(c => c.country_code === data.country_code) || null
+        }
+      } catch {}
+      return null
+    }
+  ]
+
+  for (const service of services) {
+    try {
+      const result = await Promise.race([
+        service(),
+        new Promise<null>((resolve) => setTimeout(() => resolve(null), 3000))
+      ])
+      if (result) return result
+    } catch {
+      continue
+    }
+  }
+
+  try {
+    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+    const timezoneToCountry: Record<string, string> = {
+      'America/Lima': 'PE',
+      'America/Bogota': 'CO',
+      'America/Mexico_City': 'MX',
+      'America/Argentina/Buenos_Aires': 'AR',
+      'America/Santiago': 'CL',
+      'America/Caracas': 'VE',
+      'America/Montevideo': 'UY',
+      'America/Asuncion': 'PY',
+      'America/La_Paz': 'BO',
+      'America/Guayaquil': 'EC',
+      'America/Panama': 'PA',
+      'America/Costa_Rica': 'CR',
+      'America/Managua': 'NI',
+      'America/Tegucigalpa': 'HN',
+      'America/Guatemala': 'GT',
+      'America/El_Salvador': 'SV',
+      'America/Havana': 'CU',
+      'America/Santo_Domingo': 'DO',
+      'America/Jamaica': 'JM',
+      'America/Port-au-Prince': 'HT',
+      'Europe/Madrid': 'ES',
+      'Europe/London': 'GB',
+      'Europe/Paris': 'FR',
+      'Europe/Berlin': 'DE',
+      'Europe/Rome': 'IT',
+      'Europe/Amsterdam': 'NL',
+      'Europe/Brussels': 'BE',
+      'Europe/Vienna': 'AT',
+      'Europe/Zurich': 'CH',
+      'Europe/Stockholm': 'SE',
+      'Europe/Oslo': 'NO',
+      'Europe/Copenhagen': 'DK',
+      'Europe/Helsinki': 'FI',
+      'Europe/Warsaw': 'PL',
+      'Europe/Prague': 'CZ',
+      'Europe/Bucharest': 'RO',
+      'Europe/Moscow': 'RU',
+      'America/New_York': 'US',
+      'America/Chicago': 'US',
+      'America/Denver': 'US',
+      'America/Los_Angeles': 'US',
+      'America/Toronto': 'CA',
+      'America/Vancouver': 'CA',
+      'Asia/Tokyo': 'JP',
+      'Asia/Shanghai': 'CN',
+      'Asia/Hong_Kong': 'CN',
+      'Asia/Seoul': 'KR',
+      'Asia/Singapore': 'SG',
+      'Asia/Bangkok': 'TH',
+      'Asia/Jakarta': 'ID',
+      'Asia/Manila': 'PH',
+      'Asia/Kolkata': 'IN',
+      'Asia/Dubai': 'AE',
+      'Asia/Riyadh': 'SA',
+      'Australia/Sydney': 'AU',
+      'Australia/Melbourne': 'AU',
+      'Pacific/Auckland': 'NZ',
+      'Africa/Cairo': 'EG',
+      'Africa/Johannesburg': 'ZA',
+      'Africa/Nairobi': 'KE',
+      'Africa/Lagos': 'NG'
+    }
+    
+    const countryCode = timezoneToCountry[timezone]
+    if (countryCode) {
+      return codes.find(c => c.country_code === countryCode) || null
+    }
+  } catch {}
+
+  return codes.find(c => c.country_code === 'CO') || null
+}
+
+export function useClickOutside(ref: HTMLElement, cb: () => void) {
+  function handler(e: MouseEvent) {
+    const target = e.target as Node
+    if (ref && target && !ref.contains(target)) {
+      const dropdown = ref.querySelector('.telpick-dropdown')
+      if (!dropdown || !dropdown.contains(target)) {
+        cb()
+      }
+    }
+  }
+  document.addEventListener('click', handler, true)
+  return () => document.removeEventListener('click', handler, true)
+}