@cartbase/storefront 0.17.0 → 0.18.1

package/src/common/country-flag.tsx

@@ -1,52 +1,52 @@
-import "flag-icons/css/flag-icons.min.css"
-
-import { cn } from "../lib/utils"
-
-/**
- * A country's flag, from its ISO-3166 alpha-2 code.
- *
- * WHY A SPRITE AND NOT AN EMOJI: the emoji flag (🇧🇬) costs nothing and is
- * the obvious choice, but Windows ships no flag glyphs in Segoe UI Emoji, so
- * a Windows shopper reads the two letters "BG" instead of a flag. `flag-icons`
- * is SVG under a CSS class, so it renders identically on every platform. It is
- * also the same sprite the Cartbase admin draws its flags with, so a merchant
- * sees one country treatment across the admin and their storefront.
- *
- * The aspect ratio is the sprite's own 4:3, sized in `em` so a flag matches
- * the text it sits beside at any font size.
- *
- * Decorative by default: a flag never carries meaning a shopper cannot get
- * from the name next to it, so it is `aria-hidden` and screen readers read
- * the name. Pass `title` for a tooltip when the flag stands alone.
- */
-export function CountryFlag({
-  code,
-  title,
-  className,
-}: {
-  /** ISO-3166 alpha-2, any case. Unknown or empty renders a neutral placeholder. */
-  code: string | null | undefined
-  title?: string
-  className?: string
-}) {
-  const iso2 = code?.trim().toLowerCase()
-
-  // A placeholder rather than nothing: the box holds its space, so a field
-  // does not jump when a shopper picks their country.
-  if (!iso2 || !/^[a-z]{2}$/.test(iso2)) {
-    return (
-      <span
-        className={cn("inline-block w-[1.33em] h-[1em] rounded-[2px] bg-muted", className)}
-        aria-hidden
-      />
-    )
-  }
-
-  return (
-    <span
-      className={cn(`fi fi-${iso2}`, "inline-block w-[1.33em] h-[1em] rounded-[2px] shrink-0", className)}
-      title={title}
-      aria-hidden
-    />
-  )
-}
+import "flag-icons/css/flag-icons.min.css"
+
+import { cn } from "../lib/utils"
+
+/**
+ * A country's flag, from its ISO-3166 alpha-2 code.
+ *
+ * WHY A SPRITE AND NOT AN EMOJI: the emoji flag (🇧🇬) costs nothing and is
+ * the obvious choice, but Windows ships no flag glyphs in Segoe UI Emoji, so
+ * a Windows shopper reads the two letters "BG" instead of a flag. `flag-icons`
+ * is SVG under a CSS class, so it renders identically on every platform. It is
+ * also the same sprite the Cartbase admin draws its flags with, so a merchant
+ * sees one country treatment across the admin and their storefront.
+ *
+ * The aspect ratio is the sprite's own 4:3, sized in `em` so a flag matches
+ * the text it sits beside at any font size.
+ *
+ * Decorative by default: a flag never carries meaning a shopper cannot get
+ * from the name next to it, so it is `aria-hidden` and screen readers read
+ * the name. Pass `title` for a tooltip when the flag stands alone.
+ */
+export function CountryFlag({
+  code,
+  title,
+  className,
+}: {
+  /** ISO-3166 alpha-2, any case. Unknown or empty renders a neutral placeholder. */
+  code: string | null | undefined
+  title?: string
+  className?: string
+}) {
+  const iso2 = code?.trim().toLowerCase()
+
+  // A placeholder rather than nothing: the box holds its space, so a field
+  // does not jump when a shopper picks their country.
+  if (!iso2 || !/^[a-z]{2}$/.test(iso2)) {
+    return (
+      <span
+        className={cn("inline-block w-[1.33em] h-[1em] rounded-[2px] bg-muted", className)}
+        aria-hidden
+      />
+    )
+  }
+
+  return (
+    <span
+      className={cn(`fi fi-${iso2}`, "inline-block w-[1.33em] h-[1em] rounded-[2px] shrink-0", className)}
+      title={title}
+      aria-hidden
+    />
+  )
+}

package/src/common/country-select.tsx

@@ -1,11 +1,11 @@
-/**
- * `CountrySelect` is now `MarketSelect` (`common/market-select`), renamed on
- * 2026-09-14: it lists the store's MARKETS, and a component is named for what
- * it does (store-package card, finding 6; doctrine 14b). This path and these
- * names are kept for ONE release so an existing import keeps compiling, and
- * go with the release after it.
- *
- * @deprecated import `MarketSelect` from `@cartbase/storefront/common/market-select`.
- */
-export { MarketSelect as CountrySelect } from "./market-select"
-export type { MarketSelectProps as CountrySelectProps } from "./market-select"
+/**
+ * `CountrySelect` is now `MarketSelect` (`common/market-select`), renamed on
+ * 2026-09-14: it lists the store's MARKETS, and a component is named for what
+ * it does (store-package card, finding 6; doctrine 14b). This path and these
+ * names are kept for ONE release so an existing import keeps compiling, and
+ * go with the release after it.
+ *
+ * @deprecated import `MarketSelect` from `@cartbase/storefront/common/market-select`.
+ */
+export { MarketSelect as CountrySelect } from "./market-select"
+export type { MarketSelectProps as CountrySelectProps } from "./market-select"

package/src/common/index.ts

@@ -1,20 +1,20 @@
-/**
- * @cartbase/storefront/common — shared storefront chrome. Ported from
- * `@1click/ui/src/common` (v2.3.1) + `LocalizedLink` (from the
- * mindpages-storefront production component); Cartbase data seams per
- * module JSDoc.
- */
-export { LocalizedLink, type LocalizedLinkProps } from "./localized-link"
-export { CartButton } from "./cart-button"
-export { CartButtonClient } from "./cart-button-client"
-export { DeleteButton, type DeleteButtonProps } from "./delete-button"
-export { CountryFlag } from "./country-flag"
-export { MarketSelect, type MarketSelectProps } from "./market-select"
-/** @deprecated the old name of `MarketSelect`, kept for one release (2026-09-14). */
-export { CountrySelect, type CountrySelectProps } from "./country-select"
-export {
-  LanguageSelect,
-  localeDisplayName,
-  type LanguageSelectProps,
-} from "./language-select"
-export { Skeleton, SkeletonProductPreview } from "./skeleton"
+/**
+ * @cartbase/storefront/common — shared storefront chrome. Ported from
+ * `@1click/ui/src/common` (v2.3.1) + `LocalizedLink` (from the
+ * mindpages-storefront production component); Cartbase data seams per
+ * module JSDoc.
+ */
+export { LocalizedLink, type LocalizedLinkProps } from "./localized-link"
+export { CartButton } from "./cart-button"
+export { CartButtonClient } from "./cart-button-client"
+export { DeleteButton, type DeleteButtonProps } from "./delete-button"
+export { CountryFlag } from "./country-flag"
+export { MarketSelect, type MarketSelectProps } from "./market-select"
+/** @deprecated the old name of `MarketSelect`, kept for one release (2026-09-14). */
+export { CountrySelect, type CountrySelectProps } from "./country-select"
+export {
+  LanguageSelect,
+  localeDisplayName,
+  type LanguageSelectProps,
+} from "./language-select"
+export { Skeleton, SkeletonProductPreview } from "./skeleton"

package/src/common/market-select.tsx

@@ -1,57 +1,57 @@
-"use client"
-
-import { useMemo } from "react"
-import type { StoreRegion } from "../api/regions"
-
-/**
- * THE MARKET PICKER for a header or footer: the store's regions, by name.
- *
- * Ported from `@1click/ui/src/common/country-select.tsx` (v2.3.1) and
- * renamed on 2026-09-14 (store-package card, finding 6). The port carried the
- * name of a component that listed a region's countries; Cartbase regions
- * carry no countries on the store surface, so it listed the REGIONS
- * themselves and was named for something it did not do. A market is what a
- * shopper picks here; a country is picked in the checkout, from
- * `listCountries`, with `CountryFlag` beside it.
- *
- * Persistence is the app's: `onChange` hands over the chosen region and the
- * app writes it where it keeps it (usually `carts.updateCart(client, cartId,
- * { region_id })` plus a cookie).
- */
-export type MarketSelectProps = {
-  regions: StoreRegion[]
-  /** The active region's id. */
-  value?: string | null
-  /** Fired with the chosen region; persist it app-side. */
-  onChange: (region: StoreRegion) => void
-  className?: string
-}
-
-export function MarketSelect({ regions, value, onChange, className }: MarketSelectProps) {
-  const options = useMemo(
-    () => [...regions].sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")),
-    [regions]
-  )
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const selected = options.find((r) => r.id === e.target.value)
-    if (selected) onChange(selected)
-  }
-
-  return (
-    <select
-      value={value || ""}
-      onChange={handleChange}
-      className={
-        className ??
-        "text-sm text-foreground bg-card border border-border rounded-lg px-3 py-2"
-      }
-    >
-      {options.map((r) => (
-        <option key={r.id} value={r.id}>
-          {r.name}
-        </option>
-      ))}
-    </select>
-  )
-}
+"use client"
+
+import { useMemo } from "react"
+import type { StoreRegion } from "../api/regions"
+
+/**
+ * THE MARKET PICKER for a header or footer: the store's regions, by name.
+ *
+ * Ported from `@1click/ui/src/common/country-select.tsx` (v2.3.1) and
+ * renamed on 2026-09-14 (store-package card, finding 6). The port carried the
+ * name of a component that listed a region's countries; Cartbase regions
+ * carry no countries on the store surface, so it listed the REGIONS
+ * themselves and was named for something it did not do. A market is what a
+ * shopper picks here; a country is picked in the checkout, from
+ * `listCountries`, with `CountryFlag` beside it.
+ *
+ * Persistence is the app's: `onChange` hands over the chosen region and the
+ * app writes it where it keeps it (usually `carts.updateCart(client, cartId,
+ * { region_id })` plus a cookie).
+ */
+export type MarketSelectProps = {
+  regions: StoreRegion[]
+  /** The active region's id. */
+  value?: string | null
+  /** Fired with the chosen region; persist it app-side. */
+  onChange: (region: StoreRegion) => void
+  className?: string
+}
+
+export function MarketSelect({ regions, value, onChange, className }: MarketSelectProps) {
+  const options = useMemo(
+    () => [...regions].sort((a, b) => (a.name ?? "").localeCompare(b.name ?? "")),
+    [regions]
+  )
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = options.find((r) => r.id === e.target.value)
+    if (selected) onChange(selected)
+  }
+
+  return (
+    <select
+      value={value || ""}
+      onChange={handleChange}
+      className={
+        className ??
+        "text-sm text-foreground bg-card border border-border rounded-lg px-3 py-2"
+      }
+    >
+      {options.map((r) => (
+        <option key={r.id} value={r.id}>
+          {r.name}
+        </option>
+      ))}
+    </select>
+  )
+}

package/src/index.ts

@@ -1,12 +1,12 @@
-/**
- * @cartbase/storefront — root barrel.
- *
- * `@cartbase/storefront/api` is the SDK layer (typed store-API client).
- * Component families ship under their own subpath exports (stage 3) and are
- * NOT re-exported here — UI imports stay per-module so tree-shaking and
- * client/server boundaries stay explicit, same discipline as @1click/ui.
- */
-
-export * from "./api/types"
-export { StorefrontClient } from "./api/http"
-export type { StorefrontClientConfig } from "./api/http"
+/**
+ * @cartbase/storefront — root barrel.
+ *
+ * `@cartbase/storefront/api` is the SDK layer (typed store-API client).
+ * Component families ship under their own subpath exports (stage 3) and are
+ * NOT re-exported here — UI imports stay per-module so tree-shaking and
+ * client/server boundaries stay explicit, same discipline as @1click/ui.
+ */
+
+export * from "./api/types"
+export { StorefrontClient } from "./api/http"
+export type { StorefrontClientConfig } from "./api/http"

package/src/lib/cookie-names.ts

@@ -40,6 +40,20 @@ export function readCartCookie(
   return get(CART_COOKIE) ?? get(LEGACY_CART_COOKIE)
 }
 
+/**
+ * Forget the stored cart in the browser, under both names: Medusa's
+ * `removeCartId()`. The package's checkout calls it when the order is
+ * placed, and a store hands it to `CartDrawerProvider`'s `onCartEnd` so a
+ * cart that turned out to be completed or gone is forgotten too. A no-op
+ * on the server.
+ */
+export function clearCartCookie(): void {
+  if (typeof document === "undefined") return
+  for (const name of [CART_COOKIE, LEGACY_CART_COOKIE]) {
+    document.cookie = `${name}=;path=/;max-age=0;samesite=lax`
+  }
+}
+
 /**
  * THE VISITOR ID — our own per-browser id and the join key between browsing
  * and money (ecommerce-analytics §3.1). It is OURS deliberately: the

package/src/lib/country-name.ts

@@ -1,59 +1,59 @@
-/**
- * The name of a country, from its ISO-3166 alpha-2 code.
- *
- * A code is a machine string: "bg" is how a cart address stores a country,
- * never how a shopper reads it. The catalogue from
- * `GET /api/store/countries` carries real names, so this is for the one case
- * where a code arrives WITHOUT one: the checkout hook's fallback when the
- * country list cannot be loaded. It used to hand the address form
- * `{iso_2: "bg", display_name: ""}`, and the form rendered an EMPTY country
- * field (found on evoo, 2026-09-13).
- *
- * `Intl.DisplayNames` is in the runtime, so this needs no bundled table and
- * knows every country in every language the browser does.
- *
- * THE LOCALE IS EXPLICIT AND DEFAULTS TO ENGLISH ON PURPOSE. Letting Intl
- * pick the runtime default would name the country in the SERVER's language
- * during a server render and in the BROWSER's language after hydration,
- * which is a hydration mismatch on any store whose visitors are not in the
- * server's locale. Pass the store's own language to translate it:
- *
- *   const locale = useStorefrontLocale()
- *   countryName("bg", locale.code)   // "България"
- *
- * Three behaviours verified against the runtime rather than assumed
- * (2026-09-13): a LOWERCASE code returns itself unchanged, so the code is
- * uppercased here; a malformed code throws `RangeError`, so it is shape
- * checked and wrapped; and an unknown-but-well-formed code resolves to
- * "Unknown Region" unless `fallback: "none"` is set, which is why it is set
- * and why the uppercase code is the last resort.
- */
-
-const cache = new Map<string, Intl.DisplayNames>()
-
-function namer(locale: string): Intl.DisplayNames | null {
-  const hit = cache.get(locale)
-  if (hit) return hit
-  try {
-    const made = new Intl.DisplayNames([locale], { type: "region", fallback: "none" })
-    cache.set(locale, made)
-    return made
-  } catch {
-    return null
-  }
-}
-
-export function countryName(
-  code: string | null | undefined,
-  locale: string = "en"
-): string {
-  const iso2 = code?.trim()
-  if (!iso2 || !/^[a-z]{2}$/i.test(iso2)) return ""
-
-  const upper = iso2.toUpperCase()
-  try {
-    return namer(locale)?.of(upper) || upper
-  } catch {
-    return upper
-  }
-}
+/**
+ * The name of a country, from its ISO-3166 alpha-2 code.
+ *
+ * A code is a machine string: "bg" is how a cart address stores a country,
+ * never how a shopper reads it. The catalogue from
+ * `GET /api/store/countries` carries real names, so this is for the one case
+ * where a code arrives WITHOUT one: the checkout hook's fallback when the
+ * country list cannot be loaded. It used to hand the address form
+ * `{iso_2: "bg", display_name: ""}`, and the form rendered an EMPTY country
+ * field (found on evoo, 2026-09-13).
+ *
+ * `Intl.DisplayNames` is in the runtime, so this needs no bundled table and
+ * knows every country in every language the browser does.
+ *
+ * THE LOCALE IS EXPLICIT AND DEFAULTS TO ENGLISH ON PURPOSE. Letting Intl
+ * pick the runtime default would name the country in the SERVER's language
+ * during a server render and in the BROWSER's language after hydration,
+ * which is a hydration mismatch on any store whose visitors are not in the
+ * server's locale. Pass the store's own language to translate it:
+ *
+ *   const locale = useStorefrontLocale()
+ *   countryName("bg", locale.code)   // "България"
+ *
+ * Three behaviours verified against the runtime rather than assumed
+ * (2026-09-13): a LOWERCASE code returns itself unchanged, so the code is
+ * uppercased here; a malformed code throws `RangeError`, so it is shape
+ * checked and wrapped; and an unknown-but-well-formed code resolves to
+ * "Unknown Region" unless `fallback: "none"` is set, which is why it is set
+ * and why the uppercase code is the last resort.
+ */
+
+const cache = new Map<string, Intl.DisplayNames>()
+
+function namer(locale: string): Intl.DisplayNames | null {
+  const hit = cache.get(locale)
+  if (hit) return hit
+  try {
+    const made = new Intl.DisplayNames([locale], { type: "region", fallback: "none" })
+    cache.set(locale, made)
+    return made
+  } catch {
+    return null
+  }
+}
+
+export function countryName(
+  code: string | null | undefined,
+  locale: string = "en"
+): string {
+  const iso2 = code?.trim()
+  if (!iso2 || !/^[a-z]{2}$/i.test(iso2)) return ""
+
+  const upper = iso2.toUpperCase()
+  try {
+    return namer(locale)?.of(upper) || upper
+  } catch {
+    return upper
+  }
+}