@colabcommerce/elements 0.0.4 → 0.9.1

package/src/components/ui/Input/indexInput.cy.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import Input from './index'
+
+describe('<Input />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<Input />)
+  })
+})

package/src/components/ui/LoadingPuff/index.jsx

@@ -0,0 +1,10 @@
+const LoadingPuff = ({ size = 48 }) => {
+  return (
+    <div className="flex items-center justify-center" style={{ width: size, height: size }}>
+      {/* By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL */}
+      <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#7033FFFF"><g fill="none" fill-rule="evenodd" stroke-width="2"><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="0s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="0s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle><circle cx="22" cy="22" r="1"><animate attributeName="r" begin="-0.9s" dur="1.8s" values="1; 20" calcMode="spline" keyTimes="0; 1" keySplines="0.165, 0.84, 0.44, 1" repeatCount="indefinite" /><animate attributeName="stroke-opacity" begin="-0.9s" dur="1.8s" values="1; 0" calcMode="spline" keyTimes="0; 1" keySplines="0.3, 0.61, 0.355, 1" repeatCount="indefinite" /></circle></g></svg>
+    </div>
+  )
+}
+
+export default LoadingPuff

package/src/components/ui/Panel/index.jsx

@@ -0,0 +1,23 @@
+import cn from '@/lib/utils/cn'
+
+function Panel({
+  active,
+  children,
+  className,
+}) {
+  return (
+    <div
+      data-state={active ? "open" : "closed"}
+      className={cn(
+        "absolute inset-0",
+        "transition duration-300 ease-out will-change-transform",
+        "data-[state=closed]:pointer-events-none",
+        className
+      )}
+    >
+      <div className="w-full h-[100%]">{children}</div>
+    </div>
+  )
+}
+
+export default Panel

package/src/components/ui/PhoneNumberInput/index.jsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react'
+import Input from '@/components/ui/Input'
+
+export const PhoneNumberInput = forwardRef(
+  ({ value, onChange, onBlur, ...props }, ref) => (
+    <Input
+      {...props}
+      ref={ref}
+      value={value ?? ''}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      className="pl-24 h-12"
+    />
+  )
+)
+
+PhoneNumberInput.displayName = 'PhoneNumberInput'

package/src/contexts/quote-form.jsx

@@ -0,0 +1,94 @@
+/*
+ *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
+ *  All rights reserved.
+ * 
+ */
+
+import { useState, useEffect, useContext, createContext } from 'react'
+import useSearchResults from '@/lib/useSearchResults'
+import useGeolocation from '@/lib/useGeolocation'
+import useStoreLocatorConfig from '@/lib/useStoreLocatorConfig'
+
+const QuoteFormContext = createContext()
+
+export const QuoteFormProvider = ({
+  organizationId,
+  locale,
+  baseUrl = '/retailers',
+  products = [],
+  filterBy = { stocked: ['sku'], available: ['sku'] },
+  children }) => {
+
+  const [stepIndex, setStepIndex] = useState(0)
+  const [selectedStoreId, setSelectedStoreId] = useState(null)
+  const [focusedStoreId, setFocusedStoreId] = useState(null)
+  const [messageStoreId, setMessageStoreId] = useState(null)
+  const [messageDialogOpen, setMessageDialogOpen] = useState(false)
+  const [searchRadius, setSearchRadius] = useState('300mi')
+  const [searchLocation, setSearchLocation] = useState(null)
+  const [useLocationType, setUseLocationType] = useState('geolocation') // 'geolocation' or 'search'
+
+  const { location: geoLocation } = useGeolocation({ autoGeoLocate: false })
+
+  // Determine which location to use based on useLocationType. If 'geolocation', use geoLocation.
+  // If 'search', use searchLocation if available, otherwise fallback to geoLocation.
+  const location = useLocationType === 'geolocation' ? geoLocation : (searchLocation || geoLocation)
+
+  const { stores, meta, isLoading: searchIsLoading, error: searchError } = useSearchResults({
+    organizationId,
+    location,
+    page: 1,
+    radius: searchRadius,
+    pageSize: 10,
+  })
+
+  const { config, isLoading: configIsLoading, error: configError } = useStoreLocatorConfig(organizationId)
+
+  const sharedState = {
+    stepIndex,
+    setStepIndex,
+    selectedStoreId,
+    setSelectedStoreId,
+    focusedStoreId,
+    setFocusedStoreId,
+    organizationId,
+    location,
+    locale,
+    stores,
+    meta,
+    searchIsLoading,
+    searchError,
+    config,
+    configIsLoading,
+    configError,
+    messageDialogOpen,
+    setMessageDialogOpen,
+    messageStoreId,
+    setMessageStoreId,
+    baseUrl,
+    searchRadius,
+    setSearchRadius,
+    searchLocation,
+    setSearchLocation,
+    useLocationType,
+    setUseLocationType,
+    products,
+    filterBy
+  }
+
+  return (
+    <QuoteFormContext.Provider value={sharedState}>
+      {children}
+    </QuoteFormContext.Provider>
+  )
+
+}
+
+export const useQuoteForm = () => {
+  // Log a warning if used outside of a QuoteFormProvider
+  const context = useContext(QuoteFormContext)
+  if (!context) {
+    console.warn('useQuoteForm must be used within a QuoteFormProvider')
+  }
+  return context
+}

package/src/contexts/store-locator.jsx

@@ -0,0 +1,83 @@
+/*
+ *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
+ *  All rights reserved.
+ * 
+ */
+
+import { useState, useEffect, useContext, createContext } from 'react'
+import useSearchResults from '@/lib/useSearchResults'
+import useGeolocation from '@/lib/useGeolocation'
+import useStoreLocatorConfig from '@/lib/useStoreLocatorConfig'
+
+const StoreLocatorContext = createContext()
+
+export const StoreLocatorProvider = ({ organizationId, locale, baseUrl = '/retailers', children }) => {
+
+  const [selectedStoreId, setSelectedStoreId] = useState(null)
+  const [focusedStoreId, setFocusedStoreId] = useState(null)
+  const [messageStoreId, setMessageStoreId] = useState(null)
+  const [messageDialogOpen, setMessageDialogOpen] = useState(false)
+  const [searchRadius, setSearchRadius] = useState('25mi')
+  const [searchLocation, setSearchLocation] = useState(null)
+  const [useLocationType, setUseLocationType] = useState('geolocation') // 'geolocation' or 'search'
+
+  const { location: geoLocation } = useGeolocation()
+
+  // Determine which location to use based on useLocationType. If 'geolocation', use geoLocation.
+  // If 'search', use searchLocation if available, otherwise fallback to geoLocation.
+  const location = useLocationType === 'geolocation' ? geoLocation : (searchLocation || geoLocation)
+
+  const { stores, meta, isLoading: searchIsLoading, error: searchError } = useSearchResults({
+    organizationId,
+    location,
+    page: 1,
+    radius: searchRadius,
+    pageSize: 10,
+  })
+
+  const { config, isLoading: configIsLoading, error: configError } = useStoreLocatorConfig(organizationId)
+
+  const sharedState = {
+    selectedStoreId,
+    setSelectedStoreId,
+    focusedStoreId,
+    setFocusedStoreId,
+    organizationId,
+    location,
+    locale,
+    stores,
+    meta,
+    searchIsLoading,
+    searchError,
+    config,
+    configIsLoading,
+    configError,
+    messageDialogOpen,
+    setMessageDialogOpen,
+    messageStoreId,
+    setMessageStoreId,
+    baseUrl,
+    searchRadius,
+    setSearchRadius,
+    searchLocation,
+    setSearchLocation,
+    useLocationType,
+    setUseLocationType,
+  }
+
+  return (
+    <StoreLocatorContext.Provider value={sharedState}>
+      {children}
+    </StoreLocatorContext.Provider>
+  )
+
+}
+
+export const useStoreLocator = () => {
+  // Log a warning if used outside of a StoreLocatorProvider
+  const context = useContext(StoreLocatorContext)
+  if (!context) {
+    console.warn('useStoreLocator must be used within a StoreLocatorProvider')
+  }
+  return context
+}

package/src/contexts/store.jsx

@@ -0,0 +1,59 @@
+/*
+ *  Copyright (c) 2025 Colab Commerce <https://colabcommerce.com>
+ *  All rights reserved.
+ * 
+ */
+
+import { useState, useEffect, useContext, createContext } from 'react'
+
+const StoreContext = createContext()
+
+export const StoreProvider = ({ organizationId, id, locale, baseUrl = '/retailers', initialData = null, children }) => {
+
+  const [store, setStore] = useState(initialData?.company_retailer_location || null)
+
+  useEffect(() => {
+    async function fetchStore() {
+      if (!id) {
+        setStore(null)
+        return
+      }
+
+      try {
+        const response = await fetch(`https://api.colabcommerce.com/widget_api/company_retailer_locations/${id}`)
+        if (!response.ok) {
+          throw new Error(`Error fetching retailer: ${response.statusText}`)
+        }
+        const data = await response.json()
+        setStore(data?.company_retailer_location || null)
+      } catch (error) {
+        console.error('Failed to fetch retailer:', error)
+        setStore(null)
+      }
+    }
+
+    fetchStore()
+  }, [organizationId, id, baseUrl])
+
+  const sharedState = {
+    organizationId,
+    id,
+    locale,
+    baseUrl,
+    store
+  }
+
+  return (
+    <StoreContext.Provider value={sharedState}>
+      {children}
+    </StoreContext.Provider>
+  )
+}
+
+export const useStore = () => {
+  const context = useContext(StoreContext)
+  if (context === undefined) {
+    throw new Error('useStore must be used within a StoreProvider')
+  }
+  return context
+}

package/src/contexts/translations.jsx

@@ -0,0 +1,11 @@
+import { useMemo } from "react"
+import { I18nextProvider } from "react-i18next"
+import { initLibraryI18n } from "@/i18n"
+
+export default function LibraryI18nProvider({
+  children,
+  options = {},
+}) {
+  const memoizedI18n = useMemo(() => initLibraryI18n(options), [options])
+  return <I18nextProvider i18n={memoizedI18n}>{children}</I18nextProvider>
+}

package/src/dist.css

@@ -0,0 +1,229 @@
+/* This works for build, not dev. */
+.cc {
+  @import "tailwindcss";
+  @import "react-phone-number-input/style.css";
+}
+
+@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;
+
+  /* PhoneInput Variables, need to be defined here as the scoping for the styles
+     doesn't work as expected otherwise */
+  --PhoneInput-color--focus: #03b2cb;
+  --PhoneInputInternationalIconPhone-opacity: .8;
+  --PhoneInputInternationalIconGlobe-opacity: .65;
+  --PhoneInputCountrySelect-marginRight: .35em;
+  --PhoneInputCountrySelectArrow-width: .3em;
+  --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
+  --PhoneInputCountrySelectArrow-borderWidth: 1px;
+  --PhoneInputCountrySelectArrow-opacity: .45;
+  --PhoneInputCountrySelectArrow-color: currentColor;
+  --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
+  --PhoneInputCountrySelectArrow-transform: rotate(45deg);
+  --PhoneInputCountryFlag-aspectRatio: 1.5;
+  --PhoneInputCountryFlag-height: 1em;
+  --PhoneInputCountryFlag-borderWidth: 1px;
+  --PhoneInputCountryFlag-borderColor: #00000080;
+  --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
+  --PhoneInputCountryFlag-backgroundColor--loading: #0000001a
+
+  /* ===== 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/entries/QuoteForm.js

@@ -0,0 +1,2 @@
+import QuoteForm from "@/components/QuoteForm"
+export default QuoteForm

package/src/entries/Store.js

@@ -0,0 +1,2 @@
+import Store from "@/components/Store"
+export default Store

package/src/entries/StoreLocator.js

@@ -0,0 +1,2 @@
+import StoreLocator from "@/components/StoreLocator"
+export default StoreLocator

package/src/entries/StoreLocatorProvider.js

@@ -0,0 +1,2 @@
+export { StoreLocatorProvider as default } from "@/contexts/store-locator";
+export { StoreLocatorProvider } from "@/contexts/store-locator";

package/src/entries/styles.js

@@ -0,0 +1,2 @@
+import "@/dist.css"
+export { } 

package/src/entries/useStoreLocator.js

@@ -0,0 +1,2 @@
+export { useStoreLocator as default } from "@/contexts/store-locator";
+export { useStoreLocator } from "@/contexts/store-locator";

package/src/i18n/defaultResources.js

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

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

@@ -0,0 +1,22 @@
+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)
+}