@oxy.so/bloom 4.0.0 → 4.1.0

package/src/carrier-quote/CarrierQuoteList.tsx

@@ -0,0 +1,265 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Card } from '../card';
+import { Chip } from '../chip';
+import { useControllableState } from '../hooks/use-controllable-state';
+import { IconCircle } from '../icon-circle';
+import { RiInbox2Line } from '../icons/remix/RiInbox2Line';
+import * as Skeleton from '../skeleton';
+import { surfaceFillVars, useSurfaceLevel } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CarrierQuoteCard } from './CarrierQuoteCard';
+import { CARRIER_QUOTE_GEOMETRY, CARRIER_QUOTE_LABELS, CARRIER_QUOTE_SORTS } from './constants';
+import { markCarrierQuotes, resolveCarrierQuotePaint, sortCarrierQuotes } from './shared';
+import type { CarrierQuoteListProps, CarrierQuoteSort } from './types';
+
+/**
+ * The offers on one job, ordered, marked and counted.
+ *
+ *   head     the count at `body-semibold` on the left, the order as a
+ *            `radiogroup` of chips on the right; both wrap onto their own line
+ *            under 420
+ *   list     the cards, 12 apart, each one handed the marks the SET earned
+ *   loading  placeholder cards of the same height, announced `busy` — not a
+ *            spinner, because the answer arriving is a list and a list is what
+ *            should be reserved for it
+ *   empty    a tinted glyph disc over one line of explanation and the caller's
+ *            own action; an empty offers list is a WAIT, not a failure, so it
+ *            says what happens next rather than what went wrong
+ *
+ * **THE ORDER IS THIS COMPONENT'S, NOT THE CALLER'S.** `quotes` arrives in
+ * whatever order the app has; `sortCarrierQuotes` puts it in the chosen one and
+ * is stable, so two equal offers never swap places on a re-render.
+ *
+ * **THE MARKS ARE A STATEMENT ABOUT THE SET.** `cheapest` and `fastest` are
+ * derived here from `priceValue` / `etaMinutes` — numbers the app supplies for
+ * comparison and this family never draws — and every offer tied at a minimum
+ * is marked. A card cannot mark itself: it has never seen the others.
+ */
+
+function CarrierQuoteListComponent({
+  quotes,
+  sort: sortProp,
+  defaultSort = 'price',
+  onSortChange,
+  sortOptions = CARRIER_QUOTE_SORTS,
+  showCount = true,
+  marks = true,
+  loading = false,
+  loadingCount = 3,
+  onAccept,
+  onMessage,
+  onDecline,
+  onPressCarrier,
+  selectedId = null,
+  density = 'comfortable',
+  breakdown,
+  emptyTitle = 'No offers yet',
+  emptyDescription = 'Carriers are looking at your job. The first offers usually arrive within a few minutes.',
+  emptyAction,
+  labels: labelOverrides,
+  accessibilityLabel = 'Offers',
+  style,
+  testID,
+}: CarrierQuoteListProps) {
+  const theme = useTheme();
+  const ambient = useSurfaceLevel(0);
+  const paint = useMemo(
+    () => resolveCarrierQuotePaint(theme, ambient.background),
+    [theme, ambient.background],
+  );
+  const labels = useMemo(
+    () => ({
+      ...CARRIER_QUOTE_LABELS,
+      ...labelOverrides,
+      sortOptions: { ...CARRIER_QUOTE_LABELS.sortOptions, ...labelOverrides?.sortOptions },
+    }),
+    [labelOverrides],
+  );
+  const [sort, setSort] = useControllableState<CarrierQuoteSort>({
+    value: sortProp,
+    defaultValue: defaultSort,
+    onChange: onSortChange,
+  });
+
+  const ordered = useMemo(() => sortCarrierQuotes(quotes, sort), [quotes, sort]);
+  const marked = useMemo(
+    () => (marks ? markCarrierQuotes(quotes) : new Map<string, never[]>()),
+    [quotes, marks],
+  );
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  // No head at all until there is something to count and something to order.
+  // "0 offers" over a control that can reorder nothing is chrome for a list
+  // that does not exist yet, and the empty state already says the same thing in
+  // words a reader can act on.
+  const head =
+    quotes.length > 0 && (showCount || sortOptions.length > 0) ? (
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 8,
+        }}
+        testID={id('head')}
+      >
+        {showCount ? (
+          <Text
+            variant="body-semibold"
+            role="heading"
+            aria-level={3}
+            style={{ color: paint.text }}
+            testID={id('count')}
+          >
+            {labels.count(quotes.length)}
+          </Text>
+        ) : (
+          <View />
+        )}
+        {sortOptions.length > 0 ? (
+          <View
+            role="radiogroup"
+            accessibilityLabel={labels.sort}
+            style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}
+            testID={id('sort')}
+          >
+            {sortOptions.map((option) => (
+              <Chip
+                key={option}
+                role="radio"
+                // 32 drawn, 44 under a thumb through `Chip`'s own hitSlop: this
+                // is a control, not a label.
+                size="xl"
+                variant="outlined"
+                selected={sort === option}
+                onPress={() => setSort(option)}
+                accessibilityLabel={labels.sortOptions[option]}
+                testID={id(`sort-${option}`)}
+              >
+                {labels.sortOptions[option]}
+              </Chip>
+            ))}
+          </View>
+        ) : null}
+      </View>
+    ) : null;
+
+  let body: React.ReactNode;
+  if (loading) {
+    body = (
+      <View
+        aria-busy
+        accessibilityState={{ busy: true }}
+        accessibilityLabel={labels.loading}
+        style={{ gap: 12 }}
+        testID={id('loading')}
+      >
+        {Array.from({ length: Math.max(1, loadingCount) }, (_unused, index) => (
+          <Card
+            key={index}
+            variant="outlined"
+            radius="radius-20"
+            style={surfaceFillVars(theme.colors.card)}
+            testID={id(`placeholder-${index}`)}
+          >
+            <View
+              style={{
+                paddingTop: CARRIER_QUOTE_GEOMETRY.padding,
+                paddingBottom: CARRIER_QUOTE_GEOMETRY.padding,
+                paddingLeft: CARRIER_QUOTE_GEOMETRY.padding,
+                paddingRight: CARRIER_QUOTE_GEOMETRY.padding,
+                gap: CARRIER_QUOTE_GEOMETRY.gap,
+              }}
+            >
+              <Skeleton.Row style={{ alignItems: 'center', gap: 12 }}>
+                <Skeleton.Circle size={CARRIER_QUOTE_GEOMETRY.avatar.comfortable} />
+                <Skeleton.Col style={{ gap: 6 }}>
+                  <Skeleton.Text style={{ width: 160 }} />
+                  <Skeleton.Text style={{ width: 110 }} />
+                </Skeleton.Col>
+                <Skeleton.Box width={72} height={20} />
+              </Skeleton.Row>
+              <Skeleton.Box
+                height={64}
+                borderRadius={CARRIER_QUOTE_GEOMETRY.tileRadius}
+              />
+            </View>
+          </Card>
+        ))}
+      </View>
+    );
+  } else if (ordered.length === 0) {
+    body = (
+      <View
+        role="group"
+        accessibilityLabel={emptyTitle}
+        style={{
+          alignItems: 'center',
+          gap: 12,
+          paddingTop: 32,
+          paddingBottom: 32,
+          paddingLeft: 24,
+          paddingRight: 24,
+        }}
+        testID={id('empty')}
+      >
+        <IconCircle icon={RiInbox2Line} size="lg" />
+        <Text
+          variant="headline-semibold"
+          style={{ color: paint.text, textAlign: 'center' }}
+          testID={id('empty-title')}
+        >
+          {emptyTitle}
+        </Text>
+        {emptyDescription ? (
+          <Text
+            variant="body-regular"
+            style={{ color: paint.textSecondary, textAlign: 'center', maxWidth: 360 }}
+          >
+            {emptyDescription}
+          </Text>
+        ) : null}
+        {emptyAction}
+      </View>
+    );
+  } else {
+    body = (
+      <View style={{ gap: 12 }}>
+        {ordered.map((quote) => (
+          <CarrierQuoteCard
+            key={quote.id}
+            quote={marks ? { ...quote, marks: marked.get(quote.id) ?? [] } : quote}
+            onAccept={onAccept}
+            onMessage={onMessage}
+            onDecline={onDecline}
+            onPressCarrier={onPressCarrier}
+            selected={selectedId === quote.id}
+            density={density}
+            breakdown={breakdown}
+            labels={labelOverrides}
+            testID={id(quote.id)}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID={testID}
+      role="group"
+      accessibilityLabel={accessibilityLabel}
+      style={[{ gap: 16 }, style]}
+    >
+      {head}
+      {body}
+    </View>
+  );
+}
+
+export const CarrierQuoteList = memo(CarrierQuoteListComponent);
+CarrierQuoteList.displayName = 'CarrierQuoteList';

package/src/carrier-quote/constants.ts

@@ -0,0 +1,72 @@
+import { RADIUS } from '../design-tokens/scales';
+import type { AccentTone } from '../theme/accent-colors';
+import type { CarrierQuoteLabels, CarrierQuoteMark, CarrierQuoteSort } from './types';
+
+/** Every default word the card and the list draw. */
+export const CARRIER_QUOTE_LABELS: Required<
+  Omit<CarrierQuoteLabels, 'marks' | 'sortOptions'>
+> & {
+  marks: Record<CarrierQuoteMark, string>;
+  sortOptions: Record<CarrierQuoteSort, string>;
+} = {
+  accept: 'Accept',
+  message: 'Message',
+  decline: 'Decline',
+  pickup: 'Pick-up',
+  eta: 'Arrives',
+  vehicle: 'Vehicle',
+  jobs: (jobs: string) => `${jobs} jobs`,
+  verified: 'Verified carrier',
+  marks: { cheapest: 'Cheapest', fastest: 'Fastest' },
+  showPrice: 'Show price details',
+  hidePrice: 'Hide price details',
+  priceDetails: 'Price details for',
+  sort: 'Sort offers',
+  sortOptions: { price: 'Cheapest', eta: 'Fastest', rating: 'Best rated' },
+  count: (count: number) => (count === 1 ? '1 offer' : `${count} offers`),
+  loading: 'Loading offers',
+};
+
+/**
+ * The tone each mark is painted in.
+ *
+ * Two marks, two different things: money is `success` because a lower number is
+ * unambiguously in the reader's favour, time is `info` because "fastest" is a
+ * fact rather than a recommendation — a reader who is not in a hurry should not
+ * see it painted as the good answer.
+ */
+export const CARRIER_QUOTE_MARK_TONE: Record<CarrierQuoteMark, AccentTone> = {
+  cheapest: 'success',
+  fastest: 'info',
+};
+
+/** The order the marks are drawn in, so two marked quotes never disagree. */
+export const CARRIER_QUOTE_MARK_ORDER: readonly CarrierQuoteMark[] = ['cheapest', 'fastest'];
+
+/** The three orders a list offers, in the order they are drawn. */
+export const CARRIER_QUOTE_SORTS: readonly CarrierQuoteSort[] = ['price', 'eta', 'rating'];
+
+/**
+ * The card's geometry, as numbers rather than as prose.
+ *
+ * `narrowWidth` is the card's OWN width under which the actions drop their
+ * labels to glyphs and the tiles stack two by two — one measurement for both,
+ * because a card too narrow for three tiles is too narrow for three labelled
+ * buttons beside a 48 mark. `avatar` is the mark: 48 on the card, 36 in a
+ * compact row, which is the rung a list item uses everywhere else in Bloom.
+ */
+export const CARRIER_QUOTE_GEOMETRY = {
+  padding: 16,
+  gap: 16,
+  tileGap: 8,
+  tilePadding: 12,
+  tileRadius: RADIUS['radius-12'],
+  radius: RADIUS['radius-20'],
+  narrowWidth: 420,
+  avatar: { comfortable: 48, compact: 36 },
+  rowMinHeight: 64,
+  /** The drawn size of an action; a `hitSlop` takes it to 44 for a thumb. */
+  actionHit: { top: 6, bottom: 6, left: 6, right: 6 },
+} as const;
+
+export type CarrierQuoteGeometry = typeof CARRIER_QUOTE_GEOMETRY;

package/src/carrier-quote/index.ts

@@ -0,0 +1,28 @@
+export { CarrierQuoteCard } from './CarrierQuoteCard';
+export { CarrierQuoteList } from './CarrierQuoteList';
+export {
+  CARRIER_QUOTE_GEOMETRY,
+  CARRIER_QUOTE_LABELS,
+  CARRIER_QUOTE_MARK_ORDER,
+  CARRIER_QUOTE_MARK_TONE,
+  CARRIER_QUOTE_SORTS,
+} from './constants';
+export type { CarrierQuoteGeometry } from './constants';
+export {
+  carrierActionsAreLabelled,
+  markCarrierQuotes,
+  orderCarrierMarks,
+  resolveCarrierQuotePaint,
+  sortCarrierQuotes,
+} from './shared';
+export type { CarrierQuotePaint } from './shared';
+export type {
+  CarrierQuote,
+  CarrierQuoteCardProps,
+  CarrierQuoteCarrier,
+  CarrierQuoteDensity,
+  CarrierQuoteLabels,
+  CarrierQuoteListProps,
+  CarrierQuoteMark,
+  CarrierQuoteSort,
+} from './types';

package/src/carrier-quote/shared.ts

@@ -0,0 +1,168 @@
+/**
+ * What `CarrierQuoteCard` paints, and the pure ordering the list is built on.
+ *
+ * The paint is RELATIVE, for the reason every commerce family here computes one
+ * the same way: the card is a `Card` on an offers screen and a bare row inside
+ * a sheet, and a ramp stop picked here would be right for one of them and
+ * invisible on the other. Everything comes off the fill the content actually
+ * lands on (`styles/surface-levels.ts`).
+ *
+ * The ordering is pure and exported because "cheapest first" is a claim about a
+ * SET, and a claim about a set is exactly what a render-level test cannot walk
+ * at its boundaries — ties, missing numbers, a list of one.
+ */
+import { interactiveWebCss } from '../styles/interactive-web-css';
+import { hairlineOn, surfaceFillOn, surfaceTextOn } from '../styles/surface-levels';
+import type { SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import { CARRIER_QUOTE_MARK_ORDER } from './constants';
+import type { CarrierQuote, CarrierQuoteMark, CarrierQuoteSort } from './types';
+
+export interface CarrierQuotePaint {
+  /** The fill the content lands on — the card's, or the ambient one at compact. */
+  surface: string;
+  /** The rule over the action footer, and the breakdown's own divider. */
+  hairline: string;
+  /** The next fill UP: a tile, the wash a bare press target takes under a pointer. */
+  tile: string;
+  text: string;
+  textSecondary: string;
+  textTertiary: string;
+  /** The text rungs that clear AA on a TILE, which is not the card's fill. */
+  tileText: SurfaceTextPaint;
+  /** The chosen card's border, and the focus ring. */
+  accent: string;
+}
+
+export function resolveCarrierQuotePaint(theme: Theme, surface: string): CarrierQuotePaint {
+  const text = surfaceTextOn(theme, surface);
+  const tile = surfaceFillOn(theme, surface);
+  return {
+    surface,
+    hairline: hairlineOn(theme, surface),
+    tile,
+    text: text.text,
+    textSecondary: text.textSecondary,
+    textTertiary: text.textTertiary,
+    tileText: surfaceTextOn(theme, tile),
+    accent: theme.colors.primary,
+  };
+}
+
+/**
+ * Whether the card's actions carry their LABELS at this width.
+ *
+ * A pure function of the measured width so the threshold can be walked without
+ * a layout pass — `onLayout` never fires in jsdom, and a threshold only a
+ * browser exercises is a threshold nothing pins. Before the first layout the
+ * width is `null` and the labels are ON: an unmeasured card is one the caller
+ * has not constrained, and the label is the better of the two guesses.
+ */
+export function carrierActionsAreLabelled(width: number | null, narrowWidth: number): boolean {
+  return width === null || width >= narrowWidth;
+}
+
+/**
+ * The offers in the order the list draws them.
+ *
+ * Every key is a NUMBER the caller supplied for comparison only — this family
+ * never reads a formatted amount, so a quote with no number for the current
+ * order cannot be placed against one that has a number, and goes LAST. Within
+ * the missing group the caller's own order is kept, because there is nothing
+ * left to sort on and re-shuffling a group of equals makes a list jump for no
+ * visible reason.
+ *
+ * Stable: equal keys keep their input order.
+ */
+export function sortCarrierQuotes(
+  quotes: readonly CarrierQuote[],
+  sort: CarrierQuoteSort,
+): CarrierQuote[] {
+  const key = (quote: CarrierQuote): number | undefined => {
+    if (sort === 'price') return quote.priceValue;
+    if (sort === 'eta') return quote.etaMinutes;
+    const rating = quote.carrier.rating;
+    return typeof rating === 'number' ? rating : undefined;
+  };
+  // A rating sorts HIGH first; a price and an ETA sort LOW first.
+  const direction = sort === 'rating' ? -1 : 1;
+  return quotes
+    .map((quote, index) => ({ quote, index, key: key(quote) }))
+    .sort((a, b) => {
+      if (a.key === undefined && b.key === undefined) return a.index - b.index;
+      if (a.key === undefined) return 1;
+      if (b.key === undefined) return -1;
+      if (a.key === b.key) return a.index - b.index;
+      return (a.key - b.key) * direction;
+    })
+    .map((entry) => entry.quote);
+}
+
+/**
+ * Which offers are the cheapest and which the fastest, by id.
+ *
+ * EVERY offer tied at a minimum is marked. Two offers at €38.40 are both the
+ * cheapest, and choosing one of them would be this component inventing a
+ * tie-break the app never asked for — while marking neither would hide a true
+ * statement. A quote with no number for a mark cannot win it.
+ */
+export function markCarrierQuotes(
+  quotes: readonly CarrierQuote[],
+): Map<string, CarrierQuoteMark[]> {
+  const best = (read: (quote: CarrierQuote) => number | undefined): number | undefined => {
+    let min: number | undefined;
+    for (const quote of quotes) {
+      const value = read(quote);
+      if (value === undefined || Number.isNaN(value)) continue;
+      if (min === undefined || value < min) min = value;
+    }
+    return min;
+  };
+  const cheapest = best((quote) => quote.priceValue);
+  const fastest = best((quote) => quote.etaMinutes);
+
+  const out = new Map<string, CarrierQuoteMark[]>();
+  for (const quote of quotes) {
+    const marks: CarrierQuoteMark[] = [];
+    if (cheapest !== undefined && quote.priceValue === cheapest) marks.push('cheapest');
+    if (fastest !== undefined && quote.etaMinutes === fastest) marks.push('fastest');
+    if (marks.length > 0) out.set(quote.id, marks);
+  }
+  return out;
+}
+
+/** The marks in their drawn order, so two marked quotes never disagree. Pure. */
+export function orderCarrierMarks(marks: readonly CarrierQuoteMark[]): CarrierQuoteMark[] {
+  return CARRIER_QUOTE_MARK_ORDER.filter((mark) => marks.includes(mark));
+}
+
+/** Joins the non-empty parts of an accessible name. */
+export function joinQuoteName(
+  parts: ReadonlyArray<string | number | false | null | undefined>,
+  separator = ', ',
+): string {
+  return parts
+    .map((part) => (typeof part === 'number' ? String(part) : part))
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(separator);
+}
+
+// ---------------------------------------------------------------------------
+//  Keyboard focus on web
+//
+//  The identity block is a react-native-web `Pressable`: focusable, with the
+//  outline reset, so without a `:focus-visible` rule a keyboard user tabs
+//  through an invisible stop. Inline styles carry no pseudo-classes, so the
+//  rule lives in an adopted sheet hanging off a `dataSet` attribute, and the
+//  ring colour is a per-instance custom property because it is a resolved
+//  token.
+// ---------------------------------------------------------------------------
+
+export const CARRIER_QUOTE_STYLE_ID = 'bloom-carrier-quote-web-css';
+
+export const CARRIER_QUOTE_WEB_CSS = interactiveWebCss({
+  selector: '[data-bloom-carrier-subject]',
+  varPrefix: 'bloom-carrier',
+  reset: 'none',
+  transition: 'background-color 150ms ease',
+});