@colabcommerce/elements 0.9.1 → 0.9.3

package/src/i18n/defaultResources.js

@@ -1,19 +0,0 @@
-const modules = import.meta.glob("../locales/*/*.json", { eager: true })
-
-export function getDefaultResources() {
-  const resources = {}
-
-  for (const path in modules) {
-    const match = path.match(/\.\.\/locales\/([^/]+)\/([^/]+)\.json$/)
-    if (!match) continue
-
-    const [, lng, ns] = match
-    const mod = modules[path]
-    const json = mod.default ?? mod
-
-    resources[lng] ||= {}
-    resources[lng][ns] = json
-  }
-
-  return resources
-}

package/src/i18n/index.js

@@ -1,44 +0,0 @@
-import i18n from "i18next"
-import { initReactI18next } from "react-i18next"
-import { getDefaultResources } from "./defaultResources"
-import { mergeResources } from "./mergeResources"
-
-export function initLibraryI18n(opts = {}) {
-  const defaults = opts.disableDefaults ? {} : getDefaultResources()
-  const resources = mergeResources(defaults, opts.resources)
-
-  if (!i18n.isInitialized) {
-    i18n
-      .use(initReactI18next)
-      .init({
-        resources,
-        lng: opts.lng,
-        fallbackLng: opts.fallbackLng ?? "en",
-        ns: opts.ns ?? Object.keys(resources[opts.fallbackLng ?? "en"] || { common: true }),
-        defaultNS: opts.defaultNS ?? "common",
-        interpolation: { escapeValue: false },
-        ...opts.i18next,
-      })
-  } else {
-    // If already initialized, just add/overwrite resources safely
-    for (const [lng, namespaces] of Object.entries(resources)) {
-      for (const [ns, bundle] of Object.entries(namespaces)) {
-        i18n.addResourceBundle(lng, ns, bundle, true, true) // deep merge + overwrite
-      }
-    }
-    if (opts.lng) i18n.changeLanguage(opts.lng)
-  }
-
-  return i18n
-}
-
-/**
- * Optional helper to add/override resources after init.
- */
-export function addLibraryResources(resources) {
-  for (const [lng, namespaces] of Object.entries(resources)) {
-    for (const [ns, bundle] of Object.entries(namespaces)) {
-      i18n.addResourceBundle(lng, ns, bundle, true, true)
-    }
-  }
-}

package/src/i18n/mergeResources.js

@@ -1,22 +0,0 @@
-function isPlainObject(v) {
-  return v && typeof v === "object" && !Array.isArray(v)
-}
-
-export function deepMerge(base, override) {
-  if (!isPlainObject(base) || !isPlainObject(override)) return override ?? base
-
-  const out = { ...base }
-  for (const key of Object.keys(override)) {
-    out[key] =
-      key in out ? deepMerge(out[key], override[key]) : override[key]
-  }
-  return out
-}
-
-export function mergeResources(
-  defaults,
-  user
-) {
-  if (!user) return defaults
-  return deepMerge(defaults, user)
-}

package/src/index.css

@@ -1,214 +0,0 @@
-/* This works for build, not dev. */
-/* .cc {
-  @import "tailwindcss";
-  @import "react-phone-number-input/style.css";
-} */
-
-/* This can't be part of build as it leaks to the global scope. */
-@import "tailwindcss";
-@import "react-phone-number-input/style.css";
-/* end */
-
-@import "tw-animate-css";
-
-/* Keep this if you want to continue using `dark:` variants on descendants */
-@custom-variant dark (&:is(.cc.dark *));
-
-.cc {
-
-  --background: #fdfdfd;
-  --foreground: #000000;
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --card: #fdfdfd;
-  --card-foreground: #000000;
-  --popover: #fcfcfc;
-  --popover-foreground: #000000;
-  --primary: #7033ff;
-  --primary-foreground: #ffffff;
-  --secondary: #edf0f4;
-  --secondary-foreground: #080808;
-  --muted: #f5f5f5;
-  --muted-foreground: #525252;
-  --accent: #e2ebff;
-  --accent-foreground: #1e69dc;
-  --destructive: #e54b4f;
-  --destructive-foreground: #ffffff;
-  --border: #e7e7ee;
-  --input: #ebebeb;
-  --ring: #000000;
-  --chart-1: #4ac885;
-  --chart-2: #7033ff;
-  --chart-3: #fd822b;
-  --chart-4: #3276e4;
-  --chart-5: #747474;
-  --radius: 1.4rem;
-  --sidebar: #f5f8fb;
-  --sidebar-foreground: #000000;
-  --sidebar-primary: #000000;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #ebebeb;
-  --sidebar-accent-foreground: #000000;
-  --sidebar-border: #ebebeb;
-  --sidebar-ring: #000000;
-  --shadow-x: 0px;
-  --shadow-y: 2px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.2;
-  --shadow-color: #000000;
-
-  /* ===== Scrollbar CSS ===== */
-  /* Firefox */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: #858585 #ffffff;
-  }
-
-  /* Chrome, Edge, and Safari */
-  *::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  *::-webkit-scrollbar-track {
-    background: #ffffff;
-  }
-
-  *::-webkit-scrollbar-thumb {
-    background-color: #858585;
-    border-radius: 4px;
-    border: 3px solid #ffffff;
-  }
-
-  /* Phone Input Override */
-  .PhoneInputCountry {
-    @apply absolute left-8 top-0 h-12 flex items-center gap-2 px-3 bg-transparent;
-  }
-}
-
-.cc.dark {
-  --background: #1a1b1e;
-  --foreground: #f0f0f0;
-  --card: #222327;
-  --card-foreground: #f0f0f0;
-  --popover: #222327;
-  --popover-foreground: #f0f0f0;
-  --primary: #8c5cff;
-  --primary-foreground: #ffffff;
-  --secondary: #2a2c33;
-  --secondary-foreground: #f0f0f0;
-  --muted: #2a2c33;
-  --muted-foreground: #a0a0a0;
-  --accent: #1e293b;
-  --accent-foreground: #79c0ff;
-  --destructive: #f87171;
-  --destructive-foreground: #ffffff;
-  --border: #33353a;
-  --input: #33353a;
-  --ring: #8c5cff;
-  --chart-1: #4ade80;
-  --chart-2: #8c5cff;
-  --chart-3: #fca5a5;
-  --chart-4: #5993f4;
-  --chart-5: #a0a0a0;
-  --sidebar: #161618;
-  --sidebar-foreground: #f0f0f0;
-  --sidebar-primary: #8c5cff;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #2a2c33;
-  --sidebar-accent-foreground: #8c5cff;
-  --sidebar-border: #33353a;
-  --sidebar-ring: #8c5cff;
-  --shadow-x: 0px;
-  --shadow-y: 2px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.2;
-  --shadow-color: #000000;
-}
-
-.cc {
-  @theme inline {
-    /* core colors */
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-
-    --color-card: var(--card);
-    --color-card-foreground: var(--card-foreground);
-
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
-
-    --color-primary: var(--primary);
-    --color-primary-foreground: var(--primary-foreground);
-
-    --color-secondary: var(--secondary);
-    --color-secondary-foreground: var(--secondary-foreground);
-
-    --color-muted: var(--muted);
-    --color-muted-foreground: var(--muted-foreground);
-
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-
-    --color-destructive: var(--destructive);
-    --color-destructive-foreground: var(--destructive-foreground);
-
-    /* borders & inputs */
-    --color-border: var(--border);
-    --color-input: var(--input);
-    --color-ring: var(--ring);
-
-    /* charts */
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-
-    /* sidebar */
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
-
-    /* radius */
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
-
-    /* shadows (optional but nice) */
-    --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);
-
-    --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);
-
-    --shadow: var(--shadow-md);
-    --color-shadow-color: var(--shadow-color);
-  }
-}
-
-/* Scope base styles to the wrapper (no global leakage) */
-@layer base {
-  .cc {
-    @apply bg-background text-foreground;
-  }
-
-  .cc * {
-    @apply border-border outline-ring/50;
-  }
-}

package/src/lib/addressComponentsToAddress.js

@@ -1,43 +0,0 @@
-function addressComponentsToAddress(components) {
-  // Helper to extract a component by type
-  const get = (type) =>
-    components.find((c) => c.types.includes(type))?.long_name || "";
-
-  // Line one: street number + route
-  const streetNumber = get("street_number");
-  const route = get("route");
-  const addressLine1 = [streetNumber, route].filter(Boolean).join(" ");
-
-  // Line two: subpremise, suite, unit, etc.
-  const subpremise = get("subpremise");
-  const addressLine2 = subpremise ? `Unit ${subpremise}` : "";
-
-  // City (Google may return locality or postal_town depending on country)
-  const city = get("locality") || get("postal_town") || get("sublocality") || "";
-
-  // Province/state/region
-  const province = get("administrative_area_level_1");
-
-  // Postal/ZIP code
-  const postalCode = get("postal_code");
-
-  // Country
-  const country = get("country");
-
-  // Update the country to be the short name (ISO code) if available
-  const countryShort = components.find((c) => c.types.includes("country"))?.short_name;
-  const finalCountry = countryShort || country;
-
-  // Return the structured address
-
-  return {
-    addressLine1,
-    addressLine2,
-    city,
-    province,
-    postalCode,
-    country: finalCountry,
-  };
-}
-
-export default addressComponentsToAddress;

package/src/lib/productSchema.js

@@ -1,6 +0,0 @@
-const productSchema = {
-  type: 'object',
-  properties: {
-    sku: { type: 'string' },
-  },
-}

package/src/lib/useGeolocation.js

@@ -1,266 +0,0 @@
-/*
- *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
- *  All rights reserved.
- * 
- * This hook provides geolocation using the browser's Geolocation API. As well
- * as an IP based fallback based on ipapi.co lookups
- * Usage:
- *   const { location, source, isLoading, error, refresh, isGeolocationAvailable, isGeolocationEnabled } = useGeolocation();
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useGeolocated } from 'react-geolocated'
-import { setKey, fromLatLng } from 'react-geocode'
-import addressComponentsToAddress from '@/lib/addressComponentsToAddress'
-
-const IPAPI_URL = 'https://ipapi.co/json?key=kGu4vlFKun6lmweTaFlSP54Ypbq1yWmJlPIy0qCxC7shPBO1qQ'
-
-function toError(value) {
-  if (value instanceof Error) return value
-  if (typeof value === 'string') return new Error(value)
-  try {
-    return new Error(JSON.stringify(value))
-  } catch {
-    return new Error('Unknown error')
-  }
-}
-
-function coordsToLocation(coords) {
-  if (!coords) return null
-
-  return {
-    latitude: coords.latitude,
-    longitude: coords.longitude,
-    accuracy: coords.accuracy,
-    altitude: coords.altitude ?? null,
-    altitudeAccuracy: coords.altitudeAccuracy ?? null,
-    heading: coords.heading ?? null,
-    speed: coords.speed ?? null,
-    city: null,
-    region: null,
-    country: null,
-    postal: null,
-    timezone: null,
-    ip: null,
-    raw: coords,
-  }
-}
-
-function ipapiToLocation(payload) {
-  if (!payload || typeof payload !== 'object') return null
-
-  const latitude = Number(payload.latitude)
-  const longitude = Number(payload.longitude)
-
-  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return null
-
-  return {
-    latitude,
-    longitude,
-    city: payload.city ?? null,
-    region: payload.region ?? null,
-    country: payload.country_name ?? payload.country ?? null,
-    postal: payload.postal ?? null,
-    timezone: payload.timezone ?? null,
-    ip: payload.ip ?? null,
-    raw: payload,
-  }
-}
-
-export default function useGeolocation(options = {}) {
-  const {
-    userDecisionTimeout = 10_000,
-    autoGeoLocate = true,
-    positionOptions = { enableHighAccuracy: false, maximumAge: 0, timeout: 10_000 },
-  } = options
-
-  const {
-    coords,
-    isGeolocationAvailable,
-    isGeolocationEnabled,
-    positionError,
-    getPosition,
-  } = useGeolocated({
-    positionOptions,
-    userDecisionTimeout,
-    suppressLocationOnMount: true,
-    watchLocationPermissionChange: true,
-  })
-
-  const [location, setLocation] = useState(null)
-  const [source, setSource] = useState(null) // 'geolocation' | 'ipapi' | null
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState(null)
-
-  const requestIdRef = useRef(0)
-  const ipapiAttemptedRequestIdRef = useRef(null)
-  const ipapiAbortRef = useRef(null)
-  const autoStartedRef = useRef(false)
-
-  const stopIpapi = useCallback(() => {
-    if (ipapiAbortRef.current) {
-      console.log('stopIpapi: aborting inflight ipapi request')
-      ipapiAbortRef.current.abort()
-      ipapiAbortRef.current = null
-    }
-  }, [])
-
-  const fetchIpapi = useCallback(async (requestId, reasonError = null) => {
-    // Important: only attempt the IP fallback once per refresh cycle.
-    // Otherwise, if `positionError` stays set and IP lookup fails,
-    // the fallback effect can re-trigger infinitely.
-    console.log('fetchIpapi called', { requestId, currentRequestId: requestIdRef.current, attemptedRequestId: ipapiAttemptedRequestIdRef.current })
-    if (ipapiAttemptedRequestIdRef.current === requestId) return
-    ipapiAttemptedRequestIdRef.current = requestId
-
-    //stopIpapi()
-    const controller = new AbortController()
-    ipapiAbortRef.current = controller
-
-    try {
-      const res = await fetch(IPAPI_URL, {
-        method: 'GET',
-        headers: { Accept: 'application/json' },
-        cache: 'default',
-        signal: controller.signal,
-      })
-
-      if (!res.ok) {
-        throw new Error(`ipapi request failed: ${res.status} ${res.statusText}`)
-      }
-
-      const payload = await res.json()
-      const ipLocation = ipapiToLocation(payload)
-      if (!ipLocation) {
-        throw new Error('ipapi response did not include a valid latitude/longitude')
-      }
-
-      //if (requestIdRef.current !== requestId) return
-      setLocation(ipLocation)
-      setSource('ipapi')
-      setIsLoading(false)
-      setError(null)
-    } catch (err) {
-      if (controller.signal.aborted) return
-      if (requestIdRef.current !== requestId) return
-
-      const normalized = toError(err)
-      setIsLoading(false)
-      //setSource(null)
-      //setLocation(null)
-      setError(reasonError ? toError(reasonError) : normalized)
-    } finally {
-      if (ipapiAbortRef.current === controller) {
-        ipapiAbortRef.current = null
-      }
-    }
-  }, [stopIpapi])
-
-  const refresh = useCallback(() => {
-    requestIdRef.current += 1
-    const requestId = requestIdRef.current
-
-    //stopIpapi()
-    setIsLoading(true)
-    setError(null)
-    setSource(null)
-    setLocation(null)
-
-    if (!isGeolocationAvailable) {
-      fetchIpapi(requestId)
-      return
-    }
-
-    // If browser-level location services are disabled, skip straight to IP fallback.
-    if (isGeolocationEnabled === false) {
-      fetchIpapi(requestId)
-      return
-    }
-
-    // If auto geolocation is disabled, skip straight to IP fallback.
-    if (!autoGeoLocate) {
-      fetchIpapi(requestId)
-      return
-    }
-
-    getPosition()
-  }, [fetchIpapi, getPosition, isGeolocationAvailable, isGeolocationEnabled, stopIpapi, autoGeoLocate])
-
-  // Cleanup inflight IP lookup on unmount.
-  useEffect(() => {
-    return () => stopIpapi()
-  }, [stopIpapi])
-
-  // Kick off the initial request once, when availability is known.
-  // (react-geolocated updates its booleans after mount; don't auto-refresh on every update)
-  useEffect(() => {
-    if (autoStartedRef.current) return
-    if (typeof isGeolocationAvailable !== 'boolean') return
-    autoStartedRef.current = true
-    refresh()
-  }, [refresh])
-
-  // If we get browser coords, prefer them (even if IP fallback already ran).
-  const browserLocation = useMemo(() => coordsToLocation(coords), [coords])
-
-  useEffect(() => {
-    if (!browserLocation) return
-    setLocation(browserLocation)
-    setSource('geolocation')
-    setIsLoading(false)
-    setError(null)
-  }, [browserLocation])
-
-  // If we get browserLocation and the city is null, we try to augment it with geocoding.
-  useEffect(() => {
-    async function augmentWithGeocode() {
-      if (!browserLocation) return
-      if (browserLocation.city) return
-
-      try {
-
-        setKey('AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M')
-        const geocodeResults = await fromLatLng(browserLocation.latitude, browserLocation.longitude)
-        if (!geocodeResults.results || geocodeResults.results.length === 0) return
-
-        const firstResult = addressComponentsToAddress(geocodeResults?.results[0]?.address_components)
-        const augmented = {
-          ...browserLocation,
-          city: firstResult?.city ?? null,
-          region: firstResult.province ?? null,
-          country: firstResult.country ?? null,
-          postal: firstResult.postalCode ?? null,
-        }
-        setLocation(augmented)
-      } catch {
-        // Ignore geocoding errors.
-      }
-    }
-
-    augmentWithGeocode()
-  }, [browserLocation])
-
-  const requestId = requestIdRef.current
-  fetchIpapi(requestId)
-
-  // If browser geolocation errors (blocked/denied/unavailable/timeout), fall back to IP.
-  useEffect(() => {
-    if (!positionError) return
-    if (source === 'geolocation') return
-    if (location) return
-
-    const requestId = requestIdRef.current
-    fetchIpapi(requestId, positionError)
-  }, [fetchIpapi, location, positionError, source])
-
-  return {
-    location,
-    source,
-    isLoading,
-    error,
-    refresh,
-    isGeolocationAvailable,
-    isGeolocationEnabled,
-  }
-}
-