@oxy.so/bloom 2.8.0 → 2.10.0

package/src/home-search/SavedSearchCard.tsx

@@ -0,0 +1,211 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { resolveButtonRamps } from '../button/shared';
+import { webDataSet } from '../checkbox/shared';
+import { Chip } from '../chip';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiDeleteBinLine } from '../icons/remix/RiDeleteBinLine';
+import { RiNotification3Line } from '../icons/remix/RiNotification3Line';
+import { RiNotificationOffLine } from '../icons/remix/RiNotificationOffLine';
+import { RiSearchLine } from '../icons/remix/RiSearchLine';
+import { STAY_SEARCH_TILE_RADIUS } from '../stay-search/constants';
+import { useStaySearchPalette } from '../stay-search/palette';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { SavedSearchCardProps } from './types';
+
+/**
+ * One saved search in a list: what it looks for, how much is new, and how
+ * often it alerts.
+ *
+ *   card       radius 16, the card surface with a hairline, 16 inset, 12 between rows
+ *   header     a 44px icon tile (radius 12, neutral fill, 22px glyph), the
+ *              title (body-semibold, two lines) and, at the right, a primary
+ *              `Badge` with the new-results count while it is above 0
+ *   criteria   medium outlined `Chip`s (neutral), wrapped 6 apart
+ *   footer     a hairline above; a bell (off: a struck bell) and the alert
+ *              frequency (body-2-regular, text-secondary) on the left, an
+ *              "Edit" secondary button and a secondary delete icon button on the right
+ *
+ * With `onPress` the header is a named `button` ("<title>, 12 new") that fills
+ * neutral on hover; the footer's buttons are its SIBLINGS, never nested in it.
+ */
+
+const STYLE_ID = 'bloom-saved-search-card-web-css';
+const CSS = `
+[data-bloom-saved-search-open] {
+  outline: none;
+  cursor: pointer;
+}
+[data-bloom-saved-search-open]:focus-visible {
+  box-shadow: 0 0 0 2px var(--bloom-saved-search-ring, currentColor);
+}
+`;
+
+export const SAVED_SEARCH_CARD_RADIUS = 16;
+const TILE = 44;
+
+function SavedSearchCardComponent({
+  title,
+  criteria,
+  newCount = 0,
+  formatNewCount = (n) => `${n} new`,
+  alertFrequency,
+  alertsOffLabel = 'Alerts off',
+  icon: Icon = RiSearchLine,
+  onPress,
+  onEdit,
+  onDelete,
+  editLabel = 'Edit',
+  deleteLabel = 'Delete',
+  style,
+  testID,
+}: SavedSearchCardProps) {
+  const theme = useTheme();
+  const palette = useStaySearchPalette();
+  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const hover = useInteractionState();
+  const hasNew = newCount > 0;
+
+  useEffect(() => {
+    adoptStyleSheet(STYLE_ID, CSS);
+  }, []);
+
+  const card: WebCssStyle = {
+    borderRadius: SAVED_SEARCH_CARD_RADIUS,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.barSurface,
+    paddingTop: 16,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    gap: 12,
+  };
+
+  const headerContent = (
+    <>
+      <View
+        style={{
+          width: TILE,
+          height: TILE,
+          borderRadius: STAY_SEARCH_TILE_RADIUS,
+          backgroundColor: palette.tile,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Icon width={22} height={22} fill={palette.text} />
+      </View>
+      <Text variant="body-semibold" numberOfLines={2} style={{ flex: 1, minWidth: 0, color: palette.text }}>
+        {title}
+      </Text>
+      {hasNew ? (
+        <Badge
+          content={formatNewCount(newCount)}
+          color="primary"
+          variant="solid"
+          size="medium"
+          testID={testID ? `${testID}-badge` : undefined}
+        />
+      ) : null}
+    </>
+  );
+
+  const headerStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderRadius: 12,
+    marginTop: -6,
+    marginLeft: -6,
+    marginRight: -6,
+    paddingTop: 6,
+    paddingBottom: 6,
+    paddingLeft: 6,
+    paddingRight: 6,
+    backgroundColor: onPress && hover.state ? palette.rowHighlight : 'transparent',
+    '--bloom-saved-search-ring': accent[500],
+  };
+
+  const name = hasNew ? `${title}, ${formatNewCount(newCount)}` : title;
+
+  return (
+    <View testID={testID} style={[card, style]}>
+      {onPress ? (
+        <Pressable
+          {...webDataSet({ bloomSavedSearchOpen: '' })}
+          role="button"
+          accessibilityLabel={name}
+          onPress={onPress}
+          onHoverIn={hover.onIn}
+          onHoverOut={hover.onOut}
+          testID={testID ? `${testID}-open` : undefined}
+          style={headerStyle}
+        >
+          {headerContent}
+        </Pressable>
+      ) : (
+        <View style={headerStyle}>{headerContent}</View>
+      )}
+      {criteria && criteria.length > 0 ? (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
+          {criteria.map((item, index) => (
+            <Chip key={`${index}-${item}`} size="medium" variant="outlined">
+              {item}
+            </Chip>
+          ))}
+        </View>
+      ) : null}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingTop: 12,
+          borderTopWidth: 1,
+          borderTopColor: theme.isDark ? neutral[800] : neutral[200],
+        }}
+      >
+        {alertFrequency ? (
+          <RiNotification3Line width={16} height={16} fill={palette.textSecondary} />
+        ) : (
+          <RiNotificationOffLine width={16} height={16} fill={palette.textSecondary} />
+        )}
+        <Text variant="body-2-regular" numberOfLines={1} style={{ flex: 1, minWidth: 0, color: palette.textSecondary }}>
+          {alertFrequency ?? alertsOffLabel}
+        </Text>
+        {onEdit ? (
+          <Button
+            variant="secondary"
+            size="small"
+            onPress={onEdit}
+            accessibilityLabel={`${editLabel} ${title}`}
+            testID={testID ? `${testID}-edit` : undefined}
+          >
+            {editLabel}
+          </Button>
+        ) : null}
+        {onDelete ? (
+          <Button
+            variant="secondary"
+            size="small"
+            iconOnly
+            icon={RiDeleteBinLine}
+            onPress={onDelete}
+            accessibilityLabel={`${deleteLabel} ${title}`}
+            testID={testID ? `${testID}-delete` : undefined}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export const SavedSearchCard = memo(SavedSearchCardComponent);
+SavedSearchCard.displayName = 'SavedSearchCard';

package/src/home-search/SearchModeTabs.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Platform, Pressable, View } from 'react-native';
+
+import { resolveCategoryBarPaint, type CategoryBarPaint } from '../category-bar/CategoryBar';
+import { webDataSet } from '../checkbox/shared';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { DEFAULT_HOME_SEARCH_MODE_LABELS, HOME_SEARCH_MODES } from './constants';
+import type { HomeSearchMode, SearchModeTabsProps } from './types';
+
+/**
+ * The mode switch above the search bar: Rent, Buy, Vacation rentals, Swap.
+ *
+ * `tabs` (default) — text tabs in `CategoryBar`'s selected-underline look:
+ *
+ *   tab        body-medium label, 8 above and 10 below it, then a 2px bar the
+ *              width of the label; 24 between tabs
+ *   rest       text-secondary; hover text-primary (web)
+ *   selected   text-primary with a 2px text-primary bar
+ *
+ * The label keeps ONE weight in every state, so switching never reflows the
+ * row. Keyboard (web): one tab stop (the selected tab); ArrowLeft/ArrowRight,
+ * Home and End move focus, Enter and Space select.
+ *
+ * `segmented` — Bloom's `SegmentedControl` (`large`, a full pill, the thumb
+ * sliding under the selected mode), stretched to the width so the modes share
+ * it: the phone layout.
+ *
+ * Either way a `tablist` named by `accessibilityLabel`, each mode a `tab` with
+ * `aria-selected`.
+ */
+
+const IS_WEB = Platform.OS === 'web';
+
+const STYLE_ID = 'bloom-search-mode-tabs-web-css';
+const TAB = '[data-bloom-search-mode-tab]';
+const CSS = `
+${TAB} {
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+${TAB}:focus-visible [data-bloom-search-mode-ring] {
+  outline: 2px solid var(--bloom-search-mode-ring, currentColor);
+  outline-offset: -2px;
+}
+`;
+
+interface TabProps {
+  label: string;
+  selected: boolean;
+  tabbable: boolean;
+  paint: CategoryBarPaint;
+  onSelect: () => void;
+  onKey: (event: { key: string; preventDefault: () => void }) => void;
+  registerRef: (node: View | null) => void;
+  testID?: string;
+}
+
+function ModeTab({ label, selected, tabbable, paint, onSelect, onKey, registerRef, testID }: TabProps) {
+  const hover = useInteractionState();
+  const color = selected || hover.state ? paint.active : paint.rest;
+  const webProps: Record<string, unknown> = IS_WEB ? { tabIndex: tabbable ? 0 : -1, onKeyDown: onKey } : {};
+
+  return (
+    <Pressable
+      ref={registerRef}
+      {...webDataSet({ bloomSearchModeTab: selected ? 'selected' : '' })}
+      {...webProps}
+      role="tab"
+      accessibilityLabel={label}
+      aria-selected={selected}
+      accessibilityState={{ selected }}
+      onPress={onSelect}
+      onHoverIn={hover.onIn}
+      onHoverOut={hover.onOut}
+      testID={testID}
+      style={{ paddingTop: 8, paddingLeft: 4, paddingRight: 4 }}
+    >
+      <View
+        pointerEvents="none"
+        {...webDataSet({ bloomSearchModeRing: '' })}
+        style={{ position: 'absolute', top: 2, left: -2, right: -2, bottom: 6, borderRadius: 8 }}
+      />
+      <Text variant="body-medium" numberOfLines={1} style={{ color }}>
+        {label}
+      </Text>
+      <View
+        testID={testID ? `${testID}-bar` : undefined}
+        style={{ marginTop: 10, height: 2, borderRadius: 1, backgroundColor: selected ? paint.active : 'transparent' }}
+      />
+    </Pressable>
+  );
+}
+
+export function SearchModeTabs<K extends string = HomeSearchMode>({
+  value,
+  onValueChange,
+  modes,
+  labels,
+  variant = 'tabs',
+  accessibilityLabel = 'Search mode',
+  style,
+  testID,
+}: SearchModeTabsProps<K>) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveCategoryBarPaint(theme), [theme]);
+  const keys = modes ?? (HOME_SEARCH_MODES as unknown as readonly K[]);
+  const nodes = useRef(new Map<K, View>());
+  const labelOf = (key: K) =>
+    labels?.[key] ?? (DEFAULT_HOME_SEARCH_MODE_LABELS as Partial<Record<string, string>>)[key] ?? key;
+
+  useEffect(() => {
+    adoptStyleSheet(STYLE_ID, CSS);
+  }, []);
+
+  const onKey = useCallback(
+    (key: K, event: { key: string; preventDefault: () => void }) => {
+      const index = keys.indexOf(key);
+      let target = -1;
+      switch (event.key) {
+        case 'ArrowRight':
+          target = Math.min(keys.length - 1, index + 1);
+          break;
+        case 'ArrowLeft':
+          target = Math.max(0, index - 1);
+          break;
+        case 'Home':
+          target = 0;
+          break;
+        case 'End':
+          target = keys.length - 1;
+          break;
+        case ' ':
+        case 'Spacebar':
+          // Enter reaches `onPress` through react-native-web's press responder;
+          // Space only does for button roles, so a tab answers it here.
+          event.preventDefault();
+          onValueChange(key);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const next = keys[target];
+      if (next !== undefined) nodes.current.get(next)?.focus();
+    },
+    [keys, onValueChange],
+  );
+
+  if (variant === 'segmented') {
+    return (
+      <SegmentedControl
+        label={accessibilityLabel}
+        type="tabs"
+        size="large"
+        value={value}
+        onChange={onValueChange}
+        style={[{ alignSelf: 'stretch' }, style]}
+      >
+        {keys.map((key) => (
+          <SegmentedControlItem key={key} value={key} testID={testID ? `${testID}-${key}` : undefined}>
+            <SegmentedControlItemText>{labelOf(key)}</SegmentedControlItemText>
+          </SegmentedControlItem>
+        ))}
+      </SegmentedControl>
+    );
+  }
+
+  const hasSelection = keys.includes(value);
+  const rowStyle: WebCssStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    // 4px of pressable padding either side: 24 between labels.
+    gap: 16,
+    '--bloom-search-mode-ring': paint.ring,
+  };
+
+  return (
+    <View testID={testID} role="tablist" accessibilityLabel={accessibilityLabel} style={[rowStyle, style]}>
+      {keys.map((key, index) => (
+        <ModeTab
+          key={key}
+          label={labelOf(key)}
+          selected={key === value}
+          tabbable={hasSelection ? key === value : index === 0}
+          paint={paint}
+          onSelect={() => onValueChange(key)}
+          onKey={(event) => onKey(key, event)}
+          registerRef={(node) => {
+            if (node) nodes.current.set(key, node);
+            else nodes.current.delete(key);
+          }}
+          testID={testID ? `${testID}-${key}` : undefined}
+        />
+      ))}
+    </View>
+  );
+}
+
+SearchModeTabs.displayName = 'SearchModeTabs';

package/src/home-search/constants.ts

@@ -0,0 +1,106 @@
+import { DEFAULT_STAY_SEARCH_BAR_LABELS } from '../stay-search/constants';
+import type {
+  BudgetPeriod,
+  BudgetPreset,
+  HomeSearchMode,
+  HomeSearchSegment,
+  HomeSearchSegmentKeys,
+  HomeSearchSegmentOverrides,
+  MoveInOption,
+  MoveInPickerLabels,
+} from './types';
+
+/** Every mode, in the default tab order. */
+export const HOME_SEARCH_MODES: readonly HomeSearchMode[] = ['rent', 'buy', 'stays', 'swap'];
+
+export const DEFAULT_HOME_SEARCH_MODE_LABELS: Record<HomeSearchMode, string> = {
+  rent: 'Rent',
+  buy: 'Buy',
+  stays: 'Vacation rentals',
+  swap: 'Swap',
+};
+
+type SegmentPresets = { readonly [M in HomeSearchMode]: readonly HomeSearchSegment<HomeSearchSegmentKeys[M]>[] };
+
+/**
+ * Each mode's segments with their labels, placeholders and widths, and no
+ * values. `homeSearchSegments()` fills the values in.
+ *
+ *   rent    Location · Move-in · Budget
+ *   buy     Location · Price · Property type
+ *   stays   Where · Check in · Check out · Who   (what `StaySearchBar` draws)
+ *   swap    Where · Dates · Home size
+ */
+export const HOME_SEARCH_SEGMENTS: SegmentPresets = {
+  rent: [
+    { key: 'location', label: 'Location', placeholder: 'Search city or area', flex: 1.6 },
+    { key: 'moveIn', label: 'Move-in', placeholder: 'Add date', flex: 1 },
+    { key: 'budget', label: 'Budget', placeholder: 'Add budget', flex: 1.5 },
+  ],
+  buy: [
+    { key: 'location', label: 'Location', placeholder: 'Search city or area', flex: 1.6 },
+    { key: 'price', label: 'Price', placeholder: 'Any price', flex: 1.1 },
+    { key: 'propertyType', label: 'Property type', placeholder: 'Any type', flex: 1.5 },
+  ],
+  stays: [
+    { key: 'destination', label: DEFAULT_STAY_SEARCH_BAR_LABELS.where, placeholder: DEFAULT_STAY_SEARCH_BAR_LABELS.destinationPlaceholder, flex: 1.4 },
+    { key: 'checkIn', label: DEFAULT_STAY_SEARCH_BAR_LABELS.checkIn, placeholder: DEFAULT_STAY_SEARCH_BAR_LABELS.datesPlaceholder, flex: 1 },
+    { key: 'checkOut', label: DEFAULT_STAY_SEARCH_BAR_LABELS.checkOut, placeholder: DEFAULT_STAY_SEARCH_BAR_LABELS.datesPlaceholder, flex: 1 },
+    { key: 'guests', label: DEFAULT_STAY_SEARCH_BAR_LABELS.who, placeholder: DEFAULT_STAY_SEARCH_BAR_LABELS.guestsPlaceholder, flex: 1.5 },
+  ],
+  swap: [
+    { key: 'destination', label: 'Where', placeholder: 'Search destinations', flex: 1.5 },
+    { key: 'dates', label: 'Dates', placeholder: 'Add dates', flex: 1.2 },
+    { key: 'homeSize', label: 'Home size', placeholder: 'Any size', flex: 1.5 },
+  ],
+};
+
+/**
+ * A mode's preset segments with `values` filled in and any per-key
+ * `overrides` (label, placeholder, flex, panelAlign) applied.
+ *
+ * ```ts
+ * homeSearchSegments('rent', { location: 'Old Halden', budget: '€800 – €1,200' });
+ * ```
+ */
+export function homeSearchSegments<M extends HomeSearchMode>(
+  mode: M,
+  values?: Partial<Record<HomeSearchSegmentKeys[M], string>>,
+  overrides?: HomeSearchSegmentOverrides<HomeSearchSegmentKeys[M]>,
+): HomeSearchSegment<HomeSearchSegmentKeys[M]>[] {
+  const preset = HOME_SEARCH_SEGMENTS[mode] as readonly HomeSearchSegment<HomeSearchSegmentKeys[M]>[];
+  return preset.map((segment) => ({
+    ...segment,
+    ...overrides?.[segment.key],
+    value: values?.[segment.key] ?? overrides?.[segment.key]?.value,
+  }));
+}
+
+export const DEFAULT_BUDGET_PRESETS: Record<BudgetPeriod, readonly BudgetPreset[]> = {
+  month: [
+    { min: null, max: 800 },
+    { min: 800, max: 1200 },
+    { min: 1200, max: 1800 },
+    { min: 1800, max: null },
+  ],
+  total: [
+    { min: null, max: 150000 },
+    { min: 150000, max: 300000 },
+    { min: 300000, max: 600000 },
+    { min: 600000, max: null },
+  ],
+};
+
+export const DEFAULT_CONTRACT_LENGTHS: readonly MoveInOption[] = [
+  { value: 'any', label: 'Any' },
+  { value: 'short', label: '1–6 months' },
+  { value: 'medium', label: '6–12 months' },
+  { value: 'long', label: '1+ year' },
+];
+
+export const DEFAULT_MOVE_IN_LABELS: MoveInPickerLabels = {
+  date: 'Move-in date',
+  flexible: 'Flexible',
+  asap: 'As soon as possible',
+  contractLength: 'Contract length',
+};

package/src/home-search/index.ts

@@ -0,0 +1,35 @@
+export { BudgetPicker } from './BudgetPicker';
+export {
+  DEFAULT_BUDGET_PRESETS,
+  DEFAULT_CONTRACT_LENGTHS,
+  DEFAULT_HOME_SEARCH_MODE_LABELS,
+  HOME_SEARCH_MODES,
+  HOME_SEARCH_SEGMENTS,
+  homeSearchSegments,
+} from './constants';
+export { HomeSearchBar } from './HomeSearchBar';
+export { MoveInPicker } from './MoveInPicker';
+export { PropertyTypePicker } from './PropertyTypePicker';
+export { SavedSearchCard } from './SavedSearchCard';
+export { SaveSearchButton } from './SaveSearchButton';
+export { SearchModeTabs } from './SearchModeTabs';
+export type {
+  BudgetPeriod,
+  BudgetPickerProps,
+  BudgetPreset,
+  HomeSearchBarProps,
+  HomeSearchMode,
+  HomeSearchSegment,
+  HomeSearchSegmentKeys,
+  HomeSearchSegmentOverrides,
+  MoveInOption,
+  MoveInPickerLabels,
+  MoveInPickerProps,
+  MoveInTiming,
+  MoveInValue,
+  PropertyTypePickerProps,
+  SavedSearchCardProps,
+  SavedSearchIcon,
+  SaveSearchButtonProps,
+  SearchModeTabsProps,
+} from './types';