@oxy.so/bloom 4.0.0 → 4.1.0

package/src/vendor-card/shared.ts

@@ -0,0 +1,123 @@
+/**
+ * Everything the vendor card decides WITHOUT rendering: which readings the fact
+ * row carries, what the status pill says, and the sentence a screen reader
+ * hears. Pure, so `VendorCard.test.tsx` can assert each one directly instead of
+ * inferring it from markup.
+ *
+ * The card's COLOURS are not here, because they are not this family's to pick:
+ * a vendor card is the same object as a housing card — a photo with a wash, a
+ * pill over it, a heart, a title and a fact row — and it paints itself with
+ * `listing-card`'s own `resolveListingCardPaint`. A second table of the same
+ * eleven colours is how two cards that are meant to be the same drift apart.
+ */
+import { PHOTO_RADIUS } from '../listing-card/shared';
+import type { ListingFact } from '../listing-card/types';
+import { formatRatingValue } from '../rating/Rating';
+import {
+  VENDOR_AVAILABILITY_LABELS,
+  VENDOR_CUISINE_LIMIT,
+  VENDOR_FACT_ICON,
+  VENDOR_FACT_LABELS,
+  VENDOR_FACT_ORDER,
+} from './constants';
+import type { VendorAvailability, VendorCardDensity, VendorCardProps, VendorFactKey } from './types';
+
+/** The status pill's label, or `null` for a vendor that is taking orders. */
+export function availabilityLabelFor(
+  availability: VendorAvailability | undefined,
+  override?: string,
+): string | null {
+  if (!availability || availability === 'open') return null;
+  return override ?? VENDOR_AVAILABILITY_LABELS[availability];
+}
+
+/**
+ * The readings the fact row draws, in {@link VENDOR_FACT_ORDER}, skipping the
+ * ones the app did not give. Each carries the glyph it is drawn with and the
+ * words it is ANNOUNCED with, which are not the same string: "€1.90" beside a
+ * bike reads as a fee to an eye and as a price to a screen reader.
+ */
+export function vendorFacts(
+  props: Pick<
+    VendorCardProps,
+    'deliveryTime' | 'deliveryFee' | 'distance' | 'minimumOrder' | 'factLabels'
+  >,
+): ListingFact[] {
+  const values: Record<VendorFactKey, string | undefined> = {
+    deliveryTime: props.deliveryTime,
+    deliveryFee: props.deliveryFee,
+    distance: props.distance,
+    minimumOrder: props.minimumOrder,
+  };
+  const facts: ListingFact[] = [];
+  for (const key of VENDOR_FACT_ORDER) {
+    const value = values[key];
+    if (!value) continue;
+    const word = props.factLabels?.[key] ?? VENDOR_FACT_LABELS[key];
+    facts.push({ icon: VENDOR_FACT_ICON[key], label: value, accessibilityLabel: `${word} ${value}` });
+  }
+  return facts;
+}
+
+/** The cuisines actually drawn: the first few, de-duplicated, in the order given. */
+export function vendorCuisines(
+  cuisines: ReadonlyArray<string> | undefined,
+  density: VendorCardDensity,
+): string[] {
+  if (!cuisines) return [];
+  return Array.from(new Set(cuisines.filter((c) => c !== ''))).slice(0, VENDOR_CUISINE_LIMIT[density]);
+}
+
+/**
+ * The whole card as one sentence, in the order it is read on screen. EVERY
+ * cuisine is in it, including the ones the clipped row dropped — the row drops
+ * pills because it ran out of width, which is not a reason to withhold them
+ * from someone who is listening rather than looking.
+ */
+export function composeVendorName(props: VendorCardProps): string {
+  const parts: string[] = [props.name];
+  const status = availabilityLabelFor(props.availability, props.availabilityLabel);
+  if (status) parts.push(status);
+  if (status && props.opensAt) parts.push(props.opensAt);
+  if (props.promo) parts.push(props.promo);
+  for (const cuisine of props.cuisines ?? []) if (cuisine !== '') parts.push(cuisine);
+  if (props.rating !== undefined) {
+    const rated = props.rating !== null && props.rating !== '';
+    if (rated) {
+      const count =
+        props.reviewCount != null && props.reviewCount !== '' ? `, ${props.reviewCount} reviews` : '';
+      parts.push(`Rated ${formatRatingValue(props.rating as number | string)} out of 5${count}`);
+    } else {
+      parts.push(props.newLabel ?? 'New');
+    }
+  }
+  for (const fact of vendorFacts(props)) parts.push(fact.accessibilityLabel ?? fact.label);
+  return parts.join(', ');
+}
+
+// ---------------------------------------------------------------------------
+//  Web CSS — the focus ring on the card's own link. `adoptStyleSheet` no-ops
+//  without a document, so this is inert on native.
+//
+//  The heart is `listing-card`'s `FavoriteButton`, and ITS rules live in
+//  `LISTING_CARD_CSS`. The card adopts that sheet too (same id, so two cards on
+//  one page adopt it once) rather than restating the two rules here: a copy
+//  would be a second place for the ring colour to be wrong.
+// ---------------------------------------------------------------------------
+
+export const VENDOR_CARD_STYLE_ID = 'bloom-vendor-card-web-css';
+
+const LINK = '[data-bloom-vendor-card-link]';
+
+export const VENDOR_CARD_CSS = `
+${LINK} {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+}
+${LINK}:focus-visible {
+  outline: 2px solid var(--bloom-vendor-card-ring, currentColor);
+  outline-offset: 4px;
+  border-radius: ${PHOTO_RADIUS + 4}px;
+}
+`;

package/src/vendor-card/types.ts

@@ -0,0 +1,115 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AccentTone } from '../theme/accent-colors';
+
+/**
+ * Whether you can order from this vendor right now.
+ *
+ * `open` draws nothing at all. `paused` is a vendor that is open but has
+ * stopped taking orders for a while (a kitchen that is under water); `closed`
+ * is outside its hours. Both wash the cover toward the page and draw a status
+ * pill, because the difference the reader acts on is "not now", and the two
+ * words are what say which kind of "not now" it is.
+ */
+export type VendorAvailability = 'open' | 'paused' | 'closed';
+
+/**
+ * `comfortable` is the wide card that sits in a shelf of vendors; `compact` is
+ * the dense row a search result is drawn as. ONE component, because the DATA is
+ * the same and a screen that switches at a breakpoint must not switch
+ * components.
+ */
+export type VendorCardDensity = 'comfortable' | 'compact';
+
+/**
+ * The four readings a vendor card can carry, in the order it draws them. Each
+ * arrives PRE-FORMATTED — "25–35 min", "€1.90", "Free", "1.2 km", "€12" — and
+ * nothing here parses, converts or adds up any of them.
+ */
+export type VendorFactKey = 'deliveryTime' | 'deliveryFee' | 'distance' | 'minimumOrder';
+
+export interface VendorCardProps {
+  /** The vendor's name. One line, truncated. */
+  name: string;
+  /**
+   * The cover: an absolute URL, or an id the app's `ImageResolver` turns into
+   * one (resolved with `photoVariant`). One picture — a vendor is not a gallery.
+   */
+  photo?: string;
+  /** The `ImageResolver` rendition for a photo id (e.g. `'medium'`). Ignored for URLs. */
+  photoVariant?: string;
+  /**
+   * What the vendor cooks or sells — "Japanese", "Sushi", "Poke". Drawn as a
+   * clipped row of pills under the name; the ones that do not fit drop out
+   * whole rather than being cut in half, and the card's accessible name still
+   * carries every one of them.
+   */
+  cuisines?: ReadonlyArray<string>;
+  /**
+   * The rating on a 5 scale, drawn by Bloom's `Rating` right of the name.
+   * `undefined` draws nothing; `null` or `''` draws the "New" label.
+   */
+  rating?: number | string | null;
+  /** The review count, drawn after the rating ("(128)"). */
+  reviewCount?: number | string;
+  /** The "New" label of an unrated vendor. Default `"New"`. */
+  newLabel?: string;
+  /** Pre-formatted — "25–35 min". */
+  deliveryTime?: string;
+  /** Pre-formatted — "€1.90", "Free". */
+  deliveryFee?: string;
+  /** Pre-formatted — "1.2 km". */
+  distance?: string;
+  /** Pre-formatted — "€12". */
+  minimumOrder?: string;
+  /**
+   * The WORD said before each reading in the card's accessible name —
+   * "Delivery time 25–35 min". Defaults are English ("Delivery time",
+   * "Delivery", "Distance", "Minimum order"); a bare "25–35 min" beside a glyph
+   * means nothing read aloud, and the glyph is not announced.
+   */
+  factLabels?: Partial<Record<VendorFactKey, string>>;
+  /** The promotion, pre-formatted and short — "2 for 1", "−20% today". */
+  promo?: string;
+  /** The promo mark's tone. Default `success`, the tone `price-breakdown` gives money coming back. */
+  promoTone?: AccentTone;
+  /** Default `open`. */
+  availability?: VendorAvailability;
+  /** Replaces the English status label ("Paused", "Closed"). */
+  availabilityLabel?: string;
+  /**
+   * When the vendor takes orders again, PRE-FORMATTED by the app — "Opens at
+   * 19:00", "Opens tomorrow at 12:00". Drawn under the name while the vendor is
+   * not open, and ignored while it is: a line that said when an open shop opens
+   * is noise.
+   */
+  opensAt?: string;
+  /** Whether the vendor is saved. Omit `onFavoriteChange` too to hide the heart. */
+  favorite?: boolean;
+  /** Called with the next saved state. The heart is drawn only when this is given. */
+  onFavoriteChange?: (favorite: boolean) => void;
+  /** Names of the heart, passed to `FavoriteButton`. */
+  saveLabel?: string;
+  removeLabel?: string;
+  /** Called when the card is pressed. */
+  onPress?: () => void;
+  /**
+   * The vendor's URL. On web the card is a real `<a href>` (open in a new tab,
+   * copy link); with `onPress` too the default navigation is prevented so a
+   * router can take it. On native the card opens it with `Linking` when there is
+   * no `onPress`.
+   */
+  href?: string;
+  /** Draws a skeleton in the same geometry instead of the vendor. */
+  loading?: boolean;
+  /** Default `comfortable`. */
+  density?: VendorCardDensity;
+  /**
+   * Replaces the composed accessible name ("Fig & Ember, Closed, Japanese,
+   * Sushi, Rated 4.8 out of 5, 214 reviews, Delivery time 25–35 min"), which is
+   * English.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}