@colabcommerce/elements 0.0.4 → 0.9.1

package/src/index.css

@@ -0,0 +1,214 @@
+/* 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

@@ -0,0 +1,43 @@
+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

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

package/src/lib/useGeolocation.js

@@ -0,0 +1,266 @@
+/*
+ *  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,
+  }
+}
+