@spree/dashboard-ui 1.0.0-beta.1 → 1.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
@@ -67,7 +67,6 @@
     "date-fns-tz": "^3.2.0",
     "flag-icons": "^7.5.0",
     "lucide-react": "^1.14.0",
-    "maplibre-gl": "6.4.1",
     "react-colorful": "^5.7.0",
     "react-day-picker": "^9.14.0",
     "recharts": "^3.8.1",
@@ -76,7 +75,6 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@types/geojson": "^7946.0.16",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.2.4",

package/src/index.ts

@@ -31,7 +31,6 @@ export { requiredMessage } from './lib/validation-messages'
 // ---------------------------------------------------------------------------
 export * from './spree/address-block'
 export * from './spree/address-book-row'
-export * from './spree/address-map'
 export * from './spree/back-button'
 export * from './spree/bulk-dialog'
 export * from './spree/bulk-price-table'

package/src/spree/fulfillment-item-list.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Thumbnail } from '../ui/thumbnail'
 import { PackageIcon } from './icons'
 
@@ -5,6 +6,9 @@ import { PackageIcon } from './icons'
  * One row of a fulfillment's item list, already joined to its line item by
  * the caller. The image and the price are optional: a surface that does not
  * expose them renders the name and the count alone.
+ *
+ * `priceSource` is a node because saying where a price came from means
+ * linking to it, and routing belongs to the app.
  */
 export type FulfillmentItemRowData = {
   key: string
@@ -12,6 +16,7 @@ export type FulfillmentItemRowData = {
   optionsText?: string | null
   thumbnailUrl?: string | null
   displayPrice?: string | null
+  priceSource?: ReactNode
   quantity: number
 }
 
@@ -35,14 +40,15 @@ function ItemRow({ row }: { row: FulfillmentItemRowData }) {
         )}
       </div>
 
-      <div className="shrink-0 whitespace-nowrap text-right text-muted-foreground text-sm">
+      <div className="min-w-0 shrink text-right text-muted-foreground text-sm">
         {row.displayPrice ? (
-          <span>
+          <span className="whitespace-nowrap">
             {row.displayPrice} × {row.quantity}
           </span>
         ) : (
-          <span>× {row.quantity}</span>
+          <span className="whitespace-nowrap">× {row.quantity}</span>
         )}
+        {row.priceSource && <div className="truncate text-xs">{row.priceSource}</div>}
       </div>
     </div>
   )

package/src/spree/address-map.tsx

@@ -1,62 +0,0 @@
-import { lazy, Suspense } from 'react'
-import { useTranslation } from 'react-i18next'
-
-/**
- * Structural shape `<AddressMap>` needs. Declared here rather than imported
- * so the design system stays decoupled from any SDK's `Address` type — the
- * same reason `<AddressBlock>` carries its own.
- */
-export interface AddressMapValue {
-  latitude?: number | null
-  longitude?: number | null
-}
-
-// MapLibre and its styles are a few megabytes for a map that appears on one
-// card of a page, so it is loaded on demand and every other screen is spared.
-const LazyMap = lazy(async () => ({ default: (await import('../ui/map')).Map }))
-const LazyMapControls = lazy(async () => ({ default: (await import('../ui/map')).MapControls }))
-const LazyMapMarker = lazy(async () => ({ default: (await import('../ui/map')).MapMarker }))
-const LazyMarkerContent = lazy(async () => ({ default: (await import('../ui/map')).MarkerContent }))
-const LazyMarkerTooltip = lazy(async () => ({ default: (await import('../ui/map')).MarkerTooltip }))
-
-/**
- * Where an address actually is, beside the lines that describe it — a returns
- * address is what shoppers are told to post to, so it is worth seeing on a map
- * rather than trusting as typed.
- *
- * Coordinates are geocoded in the background after an address is saved, so a
- * freshly entered one has none yet; the map is simply absent until then rather
- * than showing the middle of the ocean.
- */
-export function AddressMap({
-  address,
-  label,
-  className,
-}: {
-  address: AddressMapValue
-  /** Names whose address the pin marks — a seller, a customer, a branch. */
-  label?: string
-  className?: string
-}) {
-  const { t } = useTranslation()
-  const { latitude, longitude } = address
-
-  if (latitude == null || longitude == null) {
-    return <p className="text-muted-foreground text-xs">{t('admin.address.not_located_yet')}</p>
-  }
-
-  return (
-    <div className={className ?? 'h-40 overflow-hidden rounded-md border'}>
-      <Suspense fallback={<div className="size-full animate-pulse bg-muted" />}>
-        <LazyMap center={[longitude, latitude]} zoom={13}>
-          <LazyMapControls />
-          <LazyMapMarker longitude={longitude} latitude={latitude}>
-            {/* The default pin; the tooltip names whose address it is. */}
-            <LazyMarkerContent />
-            {label && <LazyMarkerTooltip>{label}</LazyMarkerTooltip>}
-          </LazyMapMarker>
-        </LazyMap>
-      </Suspense>
-    </div>
-  )
-}