telpick 2.0.0

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)
+}

package/src/telpick.vanilla.js

@@ -0,0 +1,199 @@
+import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
+import './telpick.css'
+
+export class TelpickVanilla {
+  constructor(options = {}) {
+    this.code = options.code || null
+    this.onChange = options.onChange || (() => {})
+    this.styleOverrides = options.styleOverrides || {}
+    this.codes = []
+    this.selectedCode = this.code
+    this.isDropdownOpen = false
+    this.searchQuery = ''
+    this.container = null
+    this.dropdown = null
+    this.searchInput = null
+  }
+
+  async init(container) {
+    this.container = container
+    const res = await fetch('/resources/api/country-codes.json')
+    const data = await res.json()
+    this.codes = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+    if (!this.code) {
+      const def = await getDefaultCountry(this.codes)
+      if (def) this.selectedCode = def.country_code
+    }
+    this.render()
+    useClickOutside(this.container, () => {
+      this.closeDropdown()
+    })
+  }
+
+  render() {
+    if (this.isDropdownOpen && this.dropdown && this.searchInput) {
+      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, index) => {
+          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('role', 'option')
+          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 = item.flag
+          img.alt = item.country
+          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)
+        })
+      }
+      return
+    }
+
+    this.container.innerHTML = ''
+    this.container.className = 'telpick-wrapper relative'
+    
+    const btn = document.createElement('button')
+    btn.className = 'telpick-btn'
+    btn.setAttribute('aria-expanded', this.isDropdownOpen)
+    btn.setAttribute('aria-haspopup', 'listbox')
+    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 = selectedCountry.flag
+      img.alt = selectedCountry.country || '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 = 'telpick-arrow 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.setAttribute('role', 'listbox')
+      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.autofocus = true
+      this.searchInput = input
+      input.oninput = e => {
+        e.stopPropagation()
+        const inputEl = e.target
+        const cursorPos = inputEl.selectionStart || 0
+        const newValue = inputEl.value
+        this.searchQuery = newValue
+        this.render()
+        requestAnimationFrame(() => {
+          if (this.searchInput) {
+            this.searchInput.focus()
+            const newCursorPos = Math.min(cursorPos + 1, newValue.length)
+            this.searchInput.setSelectionRange(newCursorPos, newCursorPos)
+          }
+        })
+      }
+      input.onclick = e => e.stopPropagation()
+      input.onmousedown = e => e.stopPropagation()
+      this.dropdown.appendChild(input)
+      
+      const ul = document.createElement('ul')
+      const filtered = !this.searchQuery 
+        ? this.codes 
+        : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+      
+      filtered.forEach((item, index) => {
+        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('role', 'option')
+        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 = item.flag
+        img.alt = item.country
+          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 (this.searchInput) {
+          this.searchInput.focus()
+        }
+      })
+    }
+  }
+
+  closeDropdown() {
+    this.isDropdownOpen = false
+    this.render()
+  }
+}

package/src/telpick.vue.ts

@@ -0,0 +1,144 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
+import './telpick.css'
+
+export const TelpickVue = defineComponent({
+  name: 'TelpickVue',
+  props: {
+    code: { type: String, default: null },
+    styleOverrides: { type: Object, default: () => ({}) }
+  },
+  emits: ['update:code'],
+  setup(props, { emit }) {
+    const codes = ref<CountryCode[]>([])
+    const selectedCode = ref(props.code)
+    const isDropdownOpen = ref(false)
+    const searchQuery = ref('')
+    const dropdownRef = ref<HTMLElement | null>(null)
+    const searchInputRef = ref<HTMLInputElement | null>(null)
+
+    const handleSearchInput = (e: Event) => {
+      const input = e.target as HTMLInputElement
+      const cursorPos = input.selectionStart || 0
+      const newValue = input.value
+      searchQuery.value = newValue
+      requestAnimationFrame(() => {
+        if (searchInputRef.value) {
+          searchInputRef.value.focus()
+          const newCursorPos = Math.min(cursorPos + 1, newValue.length)
+          searchInputRef.value.setSelectionRange(newCursorPos, newCursorPos)
+        }
+      })
+    }
+
+    const selectCode = (item: CountryCode) => {
+      selectedCode.value = item.country_code
+      emit('update:code', item)
+      isDropdownOpen.value = false
+      searchQuery.value = ''
+    }
+
+    const selectedCountry = computed(() => {
+      return (
+        codes.value.find((c) => c.country_code === selectedCode.value) || {
+          country_code: selectedCode.value,
+          flag: '',
+          country: '',
+          code: '',
+        }
+      )
+    })
+
+    const filteredCodes = computed(() => {
+      if (!searchQuery.value) return codes.value
+      return codes.value.filter((c) =>
+        c.country.toLowerCase().includes(searchQuery.value.toLowerCase())
+      )
+    })
+
+    watch(() => props.code, (newCode) => {
+      if (newCode !== undefined && newCode !== null) {
+        selectedCode.value = newCode
+      }
+    })
+
+    watch(isDropdownOpen, async () => {
+      if (isDropdownOpen.value) {
+        await nextTick()
+        if (searchInputRef.value) {
+          searchInputRef.value.focus()
+        }
+      }
+    })
+
+    onMounted(async () => {
+      const response = await fetch('/resources/api/country-codes.json')
+      const data = await response.json()
+      codes.value = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+      if (!props.code) {
+        const def = await getDefaultCountry(codes.value)
+        if (def) selectCode(def)
+      }
+      if (dropdownRef.value) {
+        const remove = useClickOutside(dropdownRef.value, () => {
+          isDropdownOpen.value = false
+        })
+        onUnmounted(remove)
+      }
+    })
+
+    return {
+      codes,
+      selectedCode,
+      isDropdownOpen,
+      searchQuery,
+      selectCode,
+      selectedCountry,
+      filteredCodes,
+      dropdownRef,
+      searchInputRef,
+      handleSearchInput
+    }
+  },
+  template: `
+    <div class="telpick-wrapper relative" ref="dropdownRef">
+      <button
+        @click="isDropdownOpen = !isDropdownOpen"
+        class="telpick-btn"
+        :style="styleOverrides"
+        :aria-expanded="isDropdownOpen"
+        aria-haspopup="listbox"
+      >
+        <div class="telpick-flag">
+          <img v-if="selectedCountry.flag" :src="selectedCountry.flag" :alt="selectedCountry.country || 'flag'" />
+        </div>
+        <span>{{ selectedCountry.code }}</span>
+        <span class="telpick-arrow ml-auto">▼</span>
+      </button>
+      <Transition name="telpick-dropdown">
+        <div v-if="isDropdownOpen" class="telpick-dropdown" role="listbox" @click.stop @mousedown.stop>
+          <input 
+            ref="searchInputRef" 
+            v-model="searchQuery" 
+            type="text" 
+            placeholder="Buscar país..." 
+            class="telpick-search" 
+            @input="handleSearchInput"
+            @click.stop
+            @mousedown.stop
+            autofocus 
+          />
+          <ul>
+            <li v-for="(item, index) in filteredCodes" :key="\`\${item.country_code}-\${index}\`" @click="selectCode(item)" :class="['telpick-item', { 'telpick-item-selected': item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined }]" role="option" :aria-selected="item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined">
+              <div class="telpick-flag">
+                <img :src="item.flag" :alt="item.country" />
+              </div>
+              <span>{{ item.country }}</span>
+              <span class="ml-auto">{{ item.code }}</span>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  `
+})

package/src/telpick.wrappers.jsx

@@ -0,0 +1,37 @@
+// Wrapper para Vue, React y CDN usando Vanilla JS
+// Vue y React pueden usar el componente vanilla vía ref
+
+// Vue wrapper
+export function TelpickVue(props, { emit }) {
+	let telpickInstance = null
+	return {
+		mounted() {
+			telpickInstance = new window.Telpick({
+				code: props.code,
+				onChange: country => emit('update:code', country),
+				styleOverrides: props.styleOverrides || {}
+			})
+			telpickInstance.init(this.$el)
+		},
+		beforeUnmount() {
+			telpickInstance && telpickInstance.destroy()
+		},
+		render() {
+			return null // Render handled by vanilla
+		}
+	}
+}
+
+// React wrapper
+import React, { useRef, useEffect } from 'react'
+export function TelpickReact({ code, onChange, styleOverrides }) {
+	const ref = useRef()
+	useEffect(() => {
+		const telpickInstance = new window.Telpick({ code, onChange, styleOverrides })
+		telpickInstance.init(ref.current)
+		return () => telpickInstance.destroy()
+	}, [code, onChange, styleOverrides])
+	return <div ref={ref}></div>
+}
+
+// CDN usage: window.Telpick