@colabcommerce/elements 0.9.1 → 0.9.3

package/src/components/StoreLocatorMapMarker/index.jsx

@@ -1,55 +0,0 @@
-import { useState, useCallback } from 'react'
-import { MapPin, Navigation } from 'lucide-react'
-import { AdvancedMarker, InfoWindow, useAdvancedMarkerRef } from '@vis.gl/react-google-maps'
-import { Button } from "@/components/ui/button"
-import { info } from 'autoprefixer'
-
-const StoreLocatorMapMarker = ({ store, isSelected, onClick }) => {
-
-  const [infoWindowShown, setInfoWindowShown] = useState(false)
-  const [markerRef, marker] = useAdvancedMarkerRef()
-
-  const handleMarkerClick = useCallback(() => {
-    onClick && onClick(store.id)
-  }, [store.id, onClick])
-
-  const handleClose = useCallback(() => setInfoWindowShown(false), [])
-
-  const showInfoWindow = isSelected
-
-  return (
-    <AdvancedMarker
-      position={{
-        lat: store.address?.latitude * 1,
-        lng: store.address?.longitude * 1,
-      }}
-      ref={markerRef}
-      title={store.name}
-      onClick={handleMarkerClick}
-    >
-      <MapPin className={`w-8 h-8 hover:cursor-pointer ${isSelected ? 'text-primary fill-white z-10' : 'z-1 fill-white text-muted-foreground'}`} size={32} />
-      {showInfoWindow && (
-        <InfoWindow anchor={marker} headerContent={<h3 className="font-bold text-sm align-center text-left mb-2">{store.retailer_name}</h3>} onClose={handleClose}>
-          <p className="text-sm text-left text-muted-foreground">
-            {store.address?.street_line_one}
-            {store.address?.street_line_two ? `, ${store.address?.street_line_two}` : ''}
-          </p>
-          <p className="text-sm text-left text-muted-foreground mb-4">
-            {store.address?.city}, {store.address?.province} {store.address?.postal_code}
-          </p>
-          <div className="flex flex-row gap-2 mb-1">
-            <Button className="flex-1 md:flex-row" size="sm">
-              <Navigation className="w-4 h-4" />
-              Directions
-            </Button>
-            <Button variant="outline" className="flex-1 md:flex-none bg-transparent" size="sm">
-              View Details
-            </Button>
-          </div>
-        </InfoWindow>
-      )}
-    </AdvancedMarker>
-  )
-}
-
-export default StoreLocatorMapMarker

package/src/components/StoreLocatorMessageDialog/index.jsx

@@ -1,20 +0,0 @@
-import MessageDialog from "@/components/MessageDialog"
-import { useStoreLocator } from "@/contexts/store-locator"
-
-const StoreLocatorMessageDialog = () => {
-
-  const { messageDialogOpen, setMessageDialogOpen, messageStoreId, setMessageStoreId, stores } = useStoreLocator()
-
-  const store = stores.find(store => store.id === messageStoreId)
-  const storeName = store ? store.retailer_name : null
-
-  const handleClose = () => {
-    setMessageDialogOpen(false)
-    setMessageStoreId(null)
-  }
-  return (
-    <MessageDialog isOpen={messageDialogOpen} onClose={handleClose} storeName={storeName} />
-  )
-}
-
-export default StoreLocatorMessageDialog

package/src/components/StoreLocatorSearch/index.jsx

@@ -1,316 +0,0 @@
-"use client"
-
-import { useEffect, useId, useMemo, useRef, useState } from "react"
-import { Search, MapPin, Sliders } from "lucide-react"
-import * as Popover from "@radix-ui/react-popover"
-import * as ScrollArea from "@radix-ui/react-scroll-area"
-
-import { Button } from "@/components/ui/Button"
-import { useStoreLocator } from "@/contexts/store-locator"
-import { usePlacesAutocomplete } from "@/lib/usePlacesAutocomplete"
-import Input from "@/components/ui/Input"
-import { useTranslation } from "react-i18next"
-
-function getItemLabel(item) {
-  // Support a few common shapes:
-  // - Google Places autocomplete style: { placePrediction: { text: { text } } }
-  // - Simple: { label }, { description }, { text }
-  return (
-    item?.label ??
-    item?.description ??
-    item?.text ??
-    item?.placePrediction?.text?.text ??
-    item?.placePrediction?.structuredFormat?.mainText?.text ??
-    ""
-  )
-}
-
-function getItemSecondary(item) {
-  return (
-    item?.secondary ??
-    item?.secondary_text ??
-    item?.placePrediction?.structuredFormat?.secondaryText?.text ??
-    item?.placePrediction?.structuredFormat?.secondaryText ??
-    ""
-  )
-}
-
-function getItemId(item, fallback) {
-  return (
-    item?.id ??
-    item?.place_id ??
-    item?.placePrediction?.placeId ??
-    fallback
-  )
-}
-
-export function StoreLocatorSearch() {
-
-  const { t } = useTranslation()
-  const [searchQuery, setSearchQuery] = useState("")
-  const [showFilters, setShowFilters] = useState(false)
-
-  // Radix dropdown state
-  const [open, setOpen] = useState(false)
-  const [activeIndex, setActiveIndex] = useState(-1)
-
-  const { location, searchRadius, setSearchRadius, setSearchLocation, setUseLocationType, geoLocation } = useStoreLocator()
-
-  const { results, isLoading, error } = usePlacesAutocomplete({
-    query: searchQuery,
-    apiKey: "AIzaSyAnJmWEU1r63DiRWHkjczxzHyIEq3dhj4M",
-    center: { lat: 37.7937, lng: -122.3965 },
-    radiusMeters: 10000,
-    types: ["locality", "postal_code"],
-  })
-
-  const items = useMemo(() => Array.isArray(results) ? results : [], [results])
-
-  const inputRef = useRef(null)
-  const listId = useId()
-  const activeId = activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : undefined
-
-  // When results change while open, reset the highlighted row
-  useEffect(() => {
-    if (!open) return
-    if (isLoading) return
-    setActiveIndex(items.length ? 0 : -1)
-  }, [open, isLoading, items.length])
-
-  const commitSelection = (item) => {
-    const label = getItemLabel(item)
-    if (!label) return
-
-    setSearchQuery(label)
-    setOpen(false)
-
-    // Keep focus like Google
-    requestAnimationFrame(() => inputRef.current?.focus())
-
-    const locationObject = {
-      "latitude": item.location?.lat ?? null,
-      "longitude": item.location?.lng ?? null,
-      "accuracy": null,
-      "altitude": 0,
-      "altitudeAccuracy": null,
-      "heading": null,
-      "speed": null,
-      "city": item.city ?? null,
-      "region": item.region ?? null,
-      "country": item.country ?? null,
-      "postal": item.postalCode ?? null,
-      "timezone": null,
-      "ip": null,
-      "type": "search",
-      "raw": item
-    }
-
-    setSearchLocation(locationObject)
-    setUseLocationType('search')
-
-    // If your store locator has a method to actually run the search / set coords,
-    // this is where you’d call it, e.g.:
-    // setSelectedPlace(item)
-    // runSearch({ placeId: ..., radius: searchRadius })
-  }
-
-  const onKeyDown = (e) => {
-    // open dropdown with arrows
-    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-      setOpen(true)
-      return
-    }
-    if (!open) return
-
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault()
-        setActiveIndex((i) => Math.min(i + 1, items.length - 1))
-        break
-      }
-      case "ArrowUp": {
-        e.preventDefault()
-        setActiveIndex((i) => Math.max(i - 1, 0))
-        break
-      }
-      case "Enter": {
-        if (activeIndex >= 0 && items[activeIndex]) {
-          e.preventDefault()
-          commitSelection(items[activeIndex])
-        }
-        break
-      }
-      case "Escape": {
-        e.preventDefault()
-        setOpen(false)
-        break
-      }
-      default:
-        break
-    }
-  }
-
-  const handleUseCurrentLocation = () => {
-    setUseLocationType('geolocation')
-    setOpen(false)
-    setSearchQuery("")
-  }
-
-  const showEmpty =
-    open &&
-    !isLoading &&
-    !error &&
-    searchQuery.trim().length > 0 &&
-    items.length === 0
-
-  return (
-    <div className="max-w-3xl mx-auto">
-      <div className="bg-card rounded-xl shadow-lg p-6 border">
-        <div className="flex flex-row gap-4">
-          <Popover.Root open={open} onOpenChange={setOpen}>
-            <Popover.Anchor asChild>
-              <div className="flex-1 relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-                <Input
-                  ref={inputRef}
-                  type="text"
-                  placeholder={location?.city ? t('default:location_search_placeholder_w_location', { location: location.city }) : t('default:location_search_placeholder')}
-                  value={searchQuery}
-                  onChange={(e) => {
-                    setSearchQuery(e.target.value)
-                    setOpen(true)
-                  }}
-                  onFocus={() => setOpen(true)}
-                  onKeyDown={onKeyDown}
-                  className="pl-10 h-12"
-                  role="combobox"
-                  aria-autocomplete="list"
-                  aria-expanded={open}
-                  aria-controls={listId}
-                  aria-activedescendant={activeId}
-                />
-              </div>
-            </Popover.Anchor>
-
-            <Popover.Content
-              sideOffset={6}
-              align="start"
-              onOpenAutoFocus={(e) => e.preventDefault()} // keep focus in input
-              className="w-[var(--radix-popover-trigger-width)] max-w-[560px] rounded-xl border rounded bg-background shadow-lg overflow-hidden"
-            >
-              <ScrollArea.Root className="max-h-80">
-                <ScrollArea.Viewport>
-                  <div id={listId} role="listbox" className="p-2">
-                    {error ? (
-                      <div className="px-3 py-2 text-sm rounded-md border border-destructive/30 bg-destructive/10 text-destructive">
-                        {String(error)}
-                      </div>
-                    ) : null}
-
-                    {isLoading ? (
-                      <div className="px-3 py-2 text-sm text-muted-foreground">
-                        {t('default:loading')}
-                      </div>
-                    ) : null}
-
-                    {showEmpty ? (
-                      <div className="px-3 py-2 text-sm text-muted-foreground">
-                        {t('default:no_results')}
-                      </div>
-                    ) : null}
-
-                    {!isLoading && !error && items.map((item, idx) => {
-                      const active = idx === activeIndex
-                      const label = getItemLabel(item)
-                      const secondary = getItemSecondary(item)
-                      const id = getItemId(item, `${idx}`)
-
-                      if (!label) return null
-
-                      return (
-                        <div
-                          key={id}
-                          id={`${listId}-opt-${idx}`}
-                          role="option"
-                          aria-selected={active}
-                          onMouseEnter={() => setActiveIndex(idx)}
-                          onMouseDown={(e) => e.preventDefault()} // keep focus
-                          onClick={() => commitSelection(item)}
-                          className={[
-                            "cursor-pointer rounded-lg px-3 py-2",
-                            active ? "bg-muted" : "hover:bg-muted/60",
-                          ].join(" ")}
-                        >
-                          <div className="text-sm text-left font-medium leading-tight">
-                            {label}
-                          </div>
-                          {secondary ? (
-                            <div className="text-xs text-left text-muted-foreground mt-1 leading-tight">
-                              {secondary}
-                            </div>
-                          ) : null}
-                        </div>
-                      )
-                    })}
-                  </div>
-                </ScrollArea.Viewport>
-
-                <ScrollArea.Scrollbar orientation="vertical" className="flex select-none touch-none p-0.5 bg-transparent">
-                  <ScrollArea.Thumb className="flex-1 bg-border rounded-full" />
-                </ScrollArea.Scrollbar>
-              </ScrollArea.Root>
-            </Popover.Content>
-          </Popover.Root>
-
-          <Button
-            variant="outline"
-            size="lg"
-            onClick={() => setShowFilters(!showFilters)}
-            className="w-auto h-12"
-            type="button"
-          >
-            <Sliders className="w-5 h-5" />
-          </Button>
-        </div>
-
-        {showFilters && (
-          <div className="mt-6 pt-6 border-t grid md:grid-cols-2 gap-4">
-            <div>
-              <label className="text-sm font-medium mb-2 block">Distance</label>
-              <select
-                value={searchRadius}
-                onChange={(e) => setSearchRadius(e.target.value)}
-                className="w-full h-10 rounded-md border border-input bg-background px-3 text-sm"
-              >
-                <option value="5mi">Within 5 miles</option>
-                <option value="10mi">Within 10 miles</option>
-                <option value="25mi">Within 25 miles</option>
-                <option value="50mi">Within 50 miles</option>
-                <option value="100mi">Within 100 miles</option>
-              </select>
-            </div>
-            <div>
-              <label className="text-sm font-medium mb-2 block">Retailer Type</label>
-              <select className="w-full h-10 rounded-md border border-input bg-background px-3 text-sm">
-                <option>All Types</option>
-                <option>Specialty Stores</option>
-                <option>Big Box Retailers</option>
-                <option>Independent Dealers</option>
-                <option>Authorized Distributors</option>
-              </select>
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
-        <MapPin className="w-4 h-4" />
-        <button className="text-primary hover:underline font-medium" type="button" onClick={handleUseCurrentLocation}>
-          {t('default:use_my_location')}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default StoreLocatorSearch

package/src/components/StoreMap/index.jsx

@@ -1,30 +0,0 @@
-import { MapPin, Navigation } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import StaticMap from "@/components/StaticMap"
-import { useStore } from "@/contexts/store"
-
-export function StoreMap() {
-  const { store } = useStore()
-  return (
-    <Card className="p-0 overflow-hidden sticky top-24">
-      <div className="relative w-full h-[500px] bg-gradient-to-br from-primary/10 to-primary/5">
-        <StaticMap
-          center={`${store?.address?.latitude},${store?.address?.longitude}`}
-          zoom={15}
-          markers={[{ lat: store?.address?.latitude, lng: store?.address?.longitude }]}
-        />
-        <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
-          <div className="text-center">
-            <Button variant="outline" size="sm">
-              <Navigation className="w-4 h-4 mr-2" />
-              View on Google Maps
-            </Button>
-          </div>
-        </div>
-      </div>
-    </Card>
-  )
-}
-
-export default StoreMap

package/src/components/StoreMeta/index.jsx

@@ -1,7 +0,0 @@
-const StoreMeta = () => {
-  return (
-    <div>StoreMeta</div>
-  )
-}
-
-export default StoreMeta

package/src/components/StoreProducts/index.jsx

@@ -1,112 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Search, SlidersHorizontal, Heart, Eye } from "lucide-react"
-import Input from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Card } from "@/components/ui/card"
-import { useStore } from "@/contexts/store"
-
-export function StoreProducts() {
-  const [searchQuery, setSearchQuery] = useState("")
-  const [selectedCategory, setSelectedCategory] = useState("all")
-
-  const { store } = useStore()
-
-  const products = store?.retailer_location_products || []
-  const categories = [{ id: "all", label: "All Products" }, ...Array.from(new Set(products.map(p => p.category))).map(cat => ({ id: cat, label: cat.charAt(0).toUpperCase() + cat.slice(1) }))]
-
-  const filteredProducts = products.filter((product) => {
-    const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase())
-    const matchesCategory = selectedCategory === "all" || product.category === selectedCategory
-    return matchesSearch && matchesCategory
-  })
-
-  return (
-    <div>
-      <div className="mb-8">
-        <h2 className="text-3xl font-bold mb-4">Available Products</h2>
-        <p className="text-muted-foreground mb-6">
-          Browse our current inventory of quality furniture pieces. All items shown are available for immediate viewing
-          at our showroom.
-        </p>
-
-        {/* Search and Filter */}
-        <div className="flex flex-col sm:flex-row gap-4 mb-6">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
-            <Input
-              type="text"
-              placeholder="Search products..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10"
-            />
-          </div>
-        </div>
-
-        {/* Category Filters */}
-        <div className="flex flex-wrap gap-2">
-          {categories.map((category) => (
-            <Button
-              key={category.id}
-              variant={selectedCategory === category.id ? "default" : "outline"}
-              size="sm"
-              onClick={() => setSelectedCategory(category.id)}
-            >
-              {category.label}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      {/* Products Grid */}
-      <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-        {filteredProducts.map((product) => (
-          <Card key={product.id} className="group overflow-hidden">
-            <div className="relative bg-muted overflow-hidden">
-              <img
-                src={product.images?.[0] || "/placeholder.svg"}
-                alt={product.name}
-                fill
-                className="object-cover group-hover:scale-105 transition-transform duration-300"
-              />
-              {product.available && (
-                <Badge className="absolute top-3 left-3 bg-primary text-primary-foreground">Special Order</Badge>
-              )}
-              {!product.stocked && <Badge className="absolute top-3 left-3 bg-red-600 text-white">Out of Stock</Badge>}
-              <div className="absolute top-3 right-3 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                <Button size="icon" variant="secondary" className="h-9 w-9">
-                  <Heart className="w-4 h-4" />
-                </Button>
-                <Button size="icon" variant="secondary" className="h-9 w-9">
-                  <Eye className="w-4 h-4" />
-                </Button>
-              </div>
-            </div>
-            <div className="p-4">
-              <h3 className="font-semibold mb-1 group-hover:text-primary transition-colors">{product.name}</h3>
-              <p className="text-sm text-muted-foreground mb-3 line-clamp-2">{product.description}</p>
-              <div className="flex items-center justify-between">
-                <span className="text-2xl font-bold text-primary">{product?.price && product.price.toLocaleString()}</span>
-
-                <Button size="sm" disabled={!product.stocked}>
-                  {product.stocked ? "View Details" : "Unavailable"}
-                </Button>
-              </div>
-            </div>
-          </Card>
-        ))}
-      </div>
-
-      {filteredProducts.length === 0 && (
-        <div className="text-center py-12">
-          <p className="text-lg text-muted-foreground">No products found matching your criteria.</p>
-        </div>
-      )}
-
-    </div>
-  )
-}
-export default StoreProducts

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

@@ -1,46 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva } from 'class-variance-authority'
-
-import cn from '@/lib/utils/cn'
-
-const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        success:
-          'border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : 'span'
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }

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

@@ -1,56 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva } from 'class-variance-authority'
-
-import cn from '@/lib/utils/cn'
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-const Button = ({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}) => {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

package/src/components/ui/Button/indexButton.cy.jsx

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