@oxy.so/bloom 4.0.0 → 4.2.0

package/src/menu-item/MenuItemOptions.tsx

@@ -0,0 +1,230 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button } from '../button';
+import { Checkbox } from '../checkbox';
+import { Divider } from '../divider';
+import { Field } from '../field';
+import { RadioGroup } from '../radio';
+import type { RadioOption } from '../radio';
+import { StepperRow } from '../stepper';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MENU_ITEM_GROUP_GAP } from './constants';
+import {
+  describeOptionRule,
+  optionDisabled,
+  optionGroupRule,
+  optionSubtitle,
+  resolveMenuItemPaint,
+  toggleOptionSelection,
+} from './shared';
+import type { MenuItemOptionGroup, MenuItemOptionsProps } from './types';
+
+/**
+ * Choosing a dish: the questions, how many of it, and what that comes to.
+ *
+ *   group     a `Field` whose label is the question and the rule ("Size
+ *             Choose 1"), then the controls, then the group's error
+ *   controls  `RadioGroup` when at most one may be chosen, a column of
+ *             `Checkbox` otherwise. Bloom's own, through the `Field` contract —
+ *             `docs/composition.mdx` names hand-rolled `role="radiogroup"` as
+ *             debt and keeps a list of the three families that carry it, and
+ *             this is not a fourth.
+ *   quantity  `StepperRow`
+ *   footer    ONE `Button`, full width, carrying the running price after the
+ *             label ("Add to basket · €16.40")
+ *
+ * IT IS CONTENT, NOT A SURFACE. On a phone it is what a `BottomSheet` holds; on
+ * a desktop what a `Dialog` holds. It paints no backdrop, claims no edge and
+ * owns no open state, so the same tree works in either — building a sheet in
+ * here would be a third one beside the two Bloom already ships.
+ *
+ * IT ADDS NOTHING UP. `total` is a string the app formatted, like every other
+ * amount in Bloom's commerce families, because currency, locale, rounding and
+ * how an option's delta applies are decisions this component cannot make for
+ * three different apps.
+ *
+ * THE CAP IS ENFORCED BY DISABLING, NOT BY EVICTING. At a group's `max`, the
+ * options that are not already chosen go disabled. A reader who presses a
+ * fourth extra and watches the first one disappear has been told nothing about
+ * the rule.
+ */
+
+function GroupLabel({ title, rule, color }: { title: string; rule: string; color: string }) {
+  // A nested `Text`, not a `View`: `Label` renders its children INSIDE a `Text`,
+  // and a `View` in a `Text` is a div in a span on web and unreliable on native.
+  return (
+    <>
+      {title}
+      <Text variant="body-regular" style={{ color }}>
+        {`  ${rule}`}
+      </Text>
+    </>
+  );
+}
+
+function OptionGroup({
+  group,
+  chosen,
+  onValueChange,
+  disabled,
+  secondary,
+  testID,
+}: {
+  group: MenuItemOptionGroup;
+  chosen: ReadonlyArray<string>;
+  onValueChange: MenuItemOptionsProps['onValueChange'];
+  disabled: boolean;
+  secondary: string;
+  testID?: string;
+}) {
+  const rule = optionGroupRule(group);
+  const ruleText = describeOptionRule(group);
+  const label = <GroupLabel title={group.title} rule={ruleText} color={secondary} />;
+
+  const body = rule.multiple ? (
+    <View style={{ gap: 12 }} testID={testID ? `${testID}-options` : undefined}>
+      {group.options.map((option) => (
+        <Checkbox
+          key={option.id}
+          checked={chosen.includes(option.id)}
+          onCheckedChange={() => onValueChange(group.id, toggleOptionSelection(chosen, option.id, rule))}
+          label={option.label}
+          description={optionSubtitle(option)}
+          disabled={disabled || optionDisabled(option, chosen, rule)}
+          testID={testID ? `${testID}-option-${option.id}` : undefined}
+        />
+      ))}
+    </View>
+  ) : (
+    <RadioGroup
+      // The field's label is a NODE, so it publishes no `labelText` for the
+      // group to take its name from — the name is written here, and it carries
+      // the rule as well, which the drawn label says and `aria-labelledby`
+      // cannot reach on native.
+      label={`${group.title}, ${ruleText}`}
+      value={chosen[0]}
+      onValueChange={(next: string) => onValueChange(group.id, toggleOptionSelection(chosen, next, rule))}
+      options={group.options.map(
+        (option): RadioOption => ({
+          value: option.id,
+          label: option.label,
+          description: optionSubtitle(option),
+          disabled: option.disabled,
+          testID: testID ? `${testID}-option-${option.id}` : undefined,
+        }),
+      )}
+      testID={testID ? `${testID}-options` : undefined}
+    />
+  );
+
+  return (
+    <Field
+      label={label}
+      error={group.error}
+      required={rule.required}
+      disabled={disabled}
+      multiple={rule.multiple}
+      testID={testID}
+    >
+      {body}
+    </Field>
+  );
+}
+
+function MenuItemOptionsComponent({
+  groups,
+  value,
+  onValueChange,
+  quantity,
+  onQuantityChange,
+  quantityLabel = 'Quantity',
+  total,
+  onSubmit,
+  submitLabel = 'Add to basket',
+  submitDisabled = false,
+  disabled = false,
+  header,
+  accessibilityLabel = 'Options',
+  style,
+  testID,
+}: MenuItemOptionsProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveMenuItemPaint(theme, surface), [theme, surface]);
+
+  return (
+    <View style={[{ gap: MENU_ITEM_GROUP_GAP }, style]} testID={testID}>
+      {header}
+      {groups.length > 0 ? (
+        <View
+          role="group"
+          accessibilityLabel={accessibilityLabel}
+          aria-label={accessibilityLabel}
+          style={{ gap: MENU_ITEM_GROUP_GAP }}
+          testID={testID ? `${testID}-groups` : undefined}
+        >
+          {groups.map((group, index) => (
+            <React.Fragment key={group.id}>
+              {index > 0 ? <Divider color={paint.rule} /> : null}
+              <OptionGroup
+                group={group}
+                chosen={value[group.id] ?? []}
+                onValueChange={onValueChange}
+                disabled={disabled}
+                secondary={paint.textSecondary}
+                testID={testID ? `${testID}-group-${group.id}` : undefined}
+              />
+            </React.Fragment>
+          ))}
+        </View>
+      ) : null}
+
+      {onQuantityChange ? (
+        <StepperRow
+          title={quantityLabel}
+          value={quantity ?? 1}
+          min={1}
+          onValueChange={onQuantityChange}
+          disabled={disabled}
+          stepperStyle={{ flexShrink: 0 }}
+          testID={testID ? `${testID}-quantity` : undefined}
+        />
+      ) : null}
+
+      {onSubmit ? (
+        <Button
+          variant="primary"
+          size="large"
+          fullWidth
+          disabled={disabled || submitDisabled}
+          onPress={onSubmit}
+          testID={testID ? `${testID}-submit` : undefined}
+        >
+          {total ? `${submitLabel} · ${total}` : submitLabel}
+        </Button>
+      ) : total ? (
+        <View
+          style={{ flexDirection: 'row', alignItems: 'baseline', gap: 12 }}
+          testID={testID ? `${testID}-total` : undefined}
+        >
+          <Text variant="title-3-semibold" style={{ flex: 1, color: paint.text }}>
+            {submitLabel}
+          </Text>
+          <Text
+            variant="title-3-semibold"
+            testID={testID ? `${testID}-total-amount` : undefined}
+            style={{ color: paint.text, fontVariant: ['tabular-nums'] }}
+          >
+            {total}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const MenuItemOptions = memo(MenuItemOptionsComponent);
+MenuItemOptions.displayName = 'MenuItemOptions';

package/src/menu-item/MenuItemRow.tsx

@@ -0,0 +1,246 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { RiAddLine } from '../icons/remix/RiAddLine';
+import { Item } from '../item';
+import { ListingPriceLines } from '../listing-card/parts';
+import { Stepper } from '../stepper';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { space } from '../styles/tokens';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { MENU_ITEM_GEOMETRY } from './constants';
+import { MenuItemDiets, MenuItemSpice, MenuItemThumb } from './parts';
+import { composeMenuItemName, resolveMenuItemPaint, spiceLevel } from './shared';
+import type { MenuItemRowProps } from './types';
+
+/**
+ * A dish in a menu: what it is, what it costs, and how to put one in the
+ * basket.
+ *
+ *   leading   the square photo (72; 56 compact), washed while sold out, with
+ *             the basket count over its corner when no `Stepper` is drawn
+ *   body      the name + the diet pills and the flames; the description,
+ *             clamped to two lines; the price line — an optional struck
+ *             original price, then the price semibold
+ *   trailing  a `Stepper` once something is in the basket and the app can
+ *             change it, otherwise the round add button, and NOTHING while the
+ *             dish is sold out
+ *
+ * It is `Item` with a dish's slots filled in. The row, the press target, the
+ * hover wash, the density rungs and the a11y role translation are `Item`'s job
+ * and this family owns no second copy of any of them; the price line is
+ * `listing-card`'s `ListingPriceLines`, which already draws a struck original
+ * price beside a current one.
+ *
+ * A PRESSABLE ROW AND ITS ADD CONTROL ARE SIBLINGS, NOT PARENT AND CHILD.
+ * `Item`'s pressable form is a real `<button>` on web, a button inside a button
+ * is invalid HTML, and a web click on the inner control ALSO opens the row
+ * (native does not bubble a press, so this is a web-only failure that a native
+ * run cannot find). So a row that both opens the dish and adds it splits into
+ * the row and the control side by side — the same answer `address/AddressRow`
+ * reaches, for the same reason. A row with no press target keeps its control in
+ * `Item`'s trailing slot, where there is nothing to nest inside.
+ *
+ * THE QUANTITY IS DRAWN ONCE. With `onQuantityChange` it lives in the
+ * `Stepper`, which is where a reader would change it; without, it is a count
+ * over the photo. A badge beside a stepper showing the same number is two
+ * controls that mean one thing.
+ */
+function MenuItemRowComponent(props: MenuItemRowProps) {
+  const {
+    name,
+    description,
+    price,
+    originalPrice,
+    photo,
+    photoVariant,
+    diets,
+    dietLabels,
+    spice,
+    spiceLabel,
+    quantity = 0,
+    onQuantityChange,
+    onAdd,
+    addLabel,
+    unavailable = false,
+    unavailableLabel = 'Sold out',
+    onPress,
+    density = 'comfortable',
+    accessibilityLabel,
+    style,
+    testID,
+  } = props;
+
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveMenuItemPaint(theme, surface), [theme, surface]);
+  const g = MENU_ITEM_GEOMETRY[density];
+  const compact = density === 'compact';
+  const heat = spiceLevel(spice);
+  const inBasket = quantity > 0;
+  const stepper = inBasket && onQuantityChange != null && !unavailable;
+
+  const control = unavailable ? null : stepper ? (
+    <Stepper
+      size="small"
+      value={quantity}
+      min={0}
+      onValueChange={onQuantityChange!}
+      accessibilityLabel={name}
+      testID={testID ? `${testID}-stepper` : undefined}
+    />
+  ) : onAdd ? (
+    <Button
+      variant="secondary"
+      size="small"
+      iconOnly
+      leadingIcon={RiAddLine}
+      accessibilityLabel={addLabel ?? `Add ${name}`}
+      onPress={onAdd}
+      testID={testID ? `${testID}-add` : undefined}
+    />
+  ) : null;
+
+  const media = (
+    <MenuItemThumb
+      photo={photo}
+      photoVariant={photoVariant}
+      size={g.thumb}
+      radius={g.thumbRadius}
+      placeholder={paint.thumb}
+      wash={paint.wash}
+      washed={unavailable}
+      overlay={
+        inBasket && !stepper ? (
+          <Badge
+            content={quantity}
+            variant="solid"
+            color="primary"
+            size="medium"
+            testID={testID ? `${testID}-quantity` : undefined}
+          />
+        ) : null
+      }
+      testID={testID}
+    />
+  );
+
+  const body = (
+    <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+      {/*
+        THE NAME OWNS ITS LINE. It used to share one with the flames, and at 390
+        — where a thumbnail and a stepper leave the text column about 50 wide —
+        a one-line `Text` is `nowrap` on web, so the fixed 44px glyph run took
+        what it needed and the name collapsed to ZERO rather than truncating:
+        three flames and no dish. The marks are a row of their own, below the
+        description, where the flames and the diet pills are the same kind of
+        thing anyway.
+      */}
+      <Text
+        variant={compact ? 'body-semibold' : 'headline-semibold'}
+        numberOfLines={1}
+        testID={testID ? `${testID}-name` : undefined}
+        style={{ color: paint.text }}
+      >
+        {name}
+      </Text>
+      {description ? (
+        <Text
+          variant="body-2-regular"
+          numberOfLines={2}
+          testID={testID ? `${testID}-description` : undefined}
+          style={{ color: paint.textSecondary }}
+        >
+          {description}
+        </Text>
+      ) : null}
+      <MenuItemDiets
+        diets={diets ?? []}
+        labels={dietLabels}
+        surface={surface}
+        glyphColor={paint.diet}
+        glyph={g.glyph}
+        // `undefined` rather than an element that renders nothing: the row is
+        // drawn at all only when there is something in it, and an empty element
+        // still counts as a mark.
+        leading={
+          heat > 0 ? (
+            <MenuItemSpice
+              level={heat}
+              label={spiceLabel}
+              color={paint.spice}
+              glyph={g.glyph}
+              testID={testID}
+            />
+          ) : undefined
+        }
+        style={{ marginTop: 2 }}
+        testID={testID}
+      />
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 2, minWidth: 0 }}>
+        <ListingPriceLines
+          lines={[{ price, originalPrice }]}
+          size={compact ? 'small' : 'medium'}
+          color={paint.text}
+          secondaryColor={paint.textSecondary}
+          style={{ flexShrink: 1, minWidth: 0 }}
+          testID={testID ? `${testID}-price` : undefined}
+        />
+        {unavailable ? (
+          <Text
+            variant="body-2-medium"
+            numberOfLines={1}
+            testID={testID ? `${testID}-unavailable` : undefined}
+            style={{ color: paint.textSecondary }}
+          >
+            {unavailableLabel}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  const splitControl = control != null && onPress != null && !unavailable;
+
+  const row = (
+    <Item
+      leading={media}
+      trailing={splitControl ? null : control}
+      onPress={unavailable ? undefined : onPress}
+      disabled={unavailable}
+      density={density}
+      accessibilityLabel={accessibilityLabel ?? composeMenuItemName(props)}
+      // `paddingRight`, never `paddingHorizontal`: `Item` writes the longhand
+      // for the reason its own file records, and a shorthand here would outrank
+      // it on web and not on native.
+      style={splitControl ? { paddingRight: space.sm } : style}
+      testID={testID}
+    >
+      {body}
+    </Item>
+  );
+
+  if (!splitControl) return row;
+
+  return (
+    <View
+      style={[{ flexDirection: 'row', alignItems: 'center', paddingRight: space.lg }, style]}
+      testID={testID ? `${testID}-split` : undefined}
+    >
+      {/*
+        `Item`'s `style` lands on its CONTENT view, inside the `Pressable` that
+        is actually this row's flex child — so `flex: 1` written there would sit
+        one node below where the layout happens. The flex goes on a wrapper the
+        parent CAN see. (`address/AddressRow` records the same measurement.)
+      */}
+      <View style={{ flex: 1, minWidth: 0 }}>{row}</View>
+      {control}
+    </View>
+  );
+}
+
+export const MenuItemRow = memo(MenuItemRowComponent);
+MenuItemRow.displayName = 'MenuItemRow';

package/src/menu-item/constants.ts

@@ -0,0 +1,60 @@
+import type { MenuItemDensity, MenuItemDiet } from './types';
+
+/** Every diet, in the order a dish lists them. */
+export const MENU_ITEM_DIETS: readonly MenuItemDiet[] = [
+  'vegetarian',
+  'vegan',
+  'gluten-free',
+  'dairy-free',
+  'halal',
+  'kosher',
+];
+
+/** The English words. Apps in other languages pass `dietLabels`. */
+export const MENU_ITEM_DIET_LABELS: Readonly<Record<MenuItemDiet, string>> = {
+  vegetarian: 'Vegetarian',
+  vegan: 'Vegan',
+  'gluten-free': 'Gluten-free',
+  'dairy-free': 'Dairy-free',
+  halal: 'Halal',
+  kosher: 'Kosher',
+};
+
+/**
+ * The two diets that are about what the dish is MADE OF get a glyph; the other
+ * four are certifications and preparations with no drawing, and inventing one
+ * for them would be Bloom asserting a symbol an app's customers have to learn.
+ */
+export const MENU_ITEM_DIET_WITH_GLYPH: readonly MenuItemDiet[] = ['vegetarian', 'vegan'];
+
+/** The hottest level the flames can say. */
+export const MENU_ITEM_SPICE_MAX = 3;
+
+export interface MenuItemGeometry {
+  /** The square thumbnail's edge. */
+  thumb: number;
+  /** Its corner. */
+  thumbRadius: number;
+  /** The flame and the diet glyph. */
+  glyph: number;
+}
+
+/**
+ * 72 is the thumbnail that lets a two-line description sit beside it without
+ * the row growing taller than the picture — the dish's photo and its words end
+ * on the same line. 56 is the basket rung, where the words are one line.
+ */
+export const MENU_ITEM_GEOMETRY: Record<MenuItemDensity, MenuItemGeometry> = {
+  comfortable: { thumb: 72, thumbRadius: 12, glyph: 14 },
+  compact: { thumb: 56, thumbRadius: 10, glyph: 12 },
+};
+
+/**
+ * How far a sold-out dish's photo is washed toward the page. The same 0.5
+ * `listing-card` washes an unavailable home at, so a card and a row that both
+ * mean "not this one" fade by the same amount.
+ */
+export const MENU_ITEM_WASH_OPACITY = 0.5;
+
+/** Between two option groups, and between a group's rule and its controls. */
+export const MENU_ITEM_GROUP_GAP = 24;

package/src/menu-item/index.ts

@@ -0,0 +1,29 @@
+export { MenuItemOptions } from './MenuItemOptions';
+export { MenuItemRow } from './MenuItemRow';
+export {
+  MENU_ITEM_DIET_LABELS,
+  MENU_ITEM_DIETS,
+  MENU_ITEM_GEOMETRY,
+  MENU_ITEM_SPICE_MAX,
+} from './constants';
+export type { MenuItemGeometry } from './constants';
+export {
+  composeMenuItemName,
+  describeOptionRule,
+  describeSpice,
+  optionDisabled,
+  optionGroupRule,
+  optionSubtitle,
+  resolveMenuItemPaint,
+  spiceLevel,
+  toggleOptionSelection,
+} from './shared';
+export type { MenuItemOptionRule, MenuItemPaint } from './shared';
+export type {
+  MenuItemDensity,
+  MenuItemDiet,
+  MenuItemOption,
+  MenuItemOptionGroup,
+  MenuItemOptionsProps,
+  MenuItemRowProps,
+} from './types';