@oxy.so/bloom 2.8.0 → 2.10.0

package/src/eviction/EvictionReportCard.tsx

@@ -0,0 +1,249 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Chip } from '../chip';
+import {
+  RiChat3Line,
+  RiCheckLine,
+  RiGroupLine,
+  RiHandHeartLine,
+  RiMapPinLine,
+  RiShareLine,
+  RiShieldCheckFill,
+  RiTimeLine,
+} from '../icons/remix';
+import { HousingCard, HousingToggleButton, useHousingPalette } from '../tenancy/parts';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { EVICTION_STATUS } from './constants';
+import type { EvictionReportCardProps } from './types';
+
+/**
+ * A published report of an upcoming eviction, so neighbours and support groups
+ * can turn up.
+ *
+ *   card        the housing card, 16 between blocks
+ *   top         status `Badge` (scheduled warning, postponed info, suspended
+ *               success, cancelled neutral — subtle; executed a solid neutral)
+ *               and, on the right, the community-verified mark (14 shield in the
+ *               success text colour + caption-1-medium)
+ *   when        the date title-2-semibold (a heading), then a 16 clock + time
+ *               body-medium and the relative line body-2-semibold in the
+ *               status's text colour ("in 3 days")
+ *   area        16 pin + the COARSE area body-medium
+ *   household   small subtle neutral `Chip`s, 6 apart
+ *   description body-regular, clamped to 3 lines
+ *   support     16 icons + body-2-medium text-secondary counters
+ *   actions     under a hairline: the "I'll be there" pill toggle
+ *               (`aria-pressed` + `accessibilityState.selected`), then small
+ *               secondary "Share" and "Contact support group" buttons; wraps
+ *
+ * PRIVACY: the card takes `area`, never an address. Precision is decided
+ * upstream; see `docs/eviction.mdx`.
+ */
+function EvictionReportCardComponent({
+  date,
+  time,
+  relativeLabel,
+  status,
+  statusLabel,
+  area,
+  household,
+  description,
+  numberOfLines = 3,
+  attendeesLabel,
+  organisationsLabel,
+  attending = false,
+  onAttendingChange,
+  attendLabel = "I'll be there",
+  onShare,
+  shareLabel = 'Share',
+  onContactSupport,
+  contactSupportLabel = 'Contact support group',
+  verified = false,
+  verifiedLabel = 'Community verified',
+  headingLevel = 3,
+  style,
+  testID,
+}: EvictionReportCardProps) {
+  const theme = useTheme();
+  const palette = useHousingPalette();
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const info = EVICTION_STATUS[status];
+  const statusText = useMemo(
+    () =>
+      info.tone === 'default'
+        ? palette.textSecondary
+        : resolveAccentColors(theme.colors, info.tone, 'outlined').foreground,
+    [theme, info.tone, palette.textSecondary],
+  );
+  const verifiedColor = resolveAccentColors(theme.colors, 'success', 'outlined').foreground;
+
+  const hasSupport = Boolean(attendeesLabel || organisationsLabel);
+  const hasActions = Boolean(onAttendingChange || onShare || onContactSupport);
+
+  return (
+    <HousingCard style={[{ gap: 16 }, style]} testID={testID}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+        <Badge
+          content={statusLabel ?? info.label}
+          color={info.tone}
+          variant={info.fill}
+          size="medium"
+          testID={id('status')}
+        />
+        {verified ? (
+          <View
+            accessible
+            accessibilityLabel={verifiedLabel}
+            testID={id('verified')}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 4, flexShrink: 1 }}
+          >
+            <RiShieldCheckFill width={14} height={14} fill={verifiedColor} />
+            <Text variant="caption-1-medium" numberOfLines={1} style={{ color: palette.textSecondary }}>
+              {verifiedLabel}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+
+      <View style={{ gap: 4 }}>
+        <Text
+          role="heading"
+          aria-level={headingLevel}
+          variant="title-2-semibold"
+          style={{ color: palette.text }}
+          testID={id('date')}
+        >
+          {date}
+        </Text>
+        {time || relativeLabel ? (
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', columnGap: 8, rowGap: 2 }}>
+            {time ? (
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                <RiTimeLine width={16} height={16} fill={palette.textSecondary} />
+                <Text variant="body-medium" style={{ color: palette.text }} testID={id('time')}>
+                  {time}
+                </Text>
+              </View>
+            ) : null}
+            {time && relativeLabel ? (
+              <Text
+                variant="body-2-regular"
+                accessibilityElementsHidden
+                importantForAccessibility="no"
+                style={{ color: palette.textSecondary }}
+              >
+                ·
+              </Text>
+            ) : null}
+            {relativeLabel ? (
+              <Text variant="body-2-semibold" style={{ color: statusText }} testID={id('relative')}>
+                {relativeLabel}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }} testID={id('area')}>
+        <RiMapPinLine width={16} height={16} fill={palette.textSecondary} />
+        <Text variant="body-medium" numberOfLines={2} style={{ color: palette.text, flexShrink: 1 }}>
+          {area}
+        </Text>
+      </View>
+
+      {household && household.length > 0 ? (
+        <View role="list" style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }} testID={id('household')}>
+          {household.map((item, index) => (
+            <View key={`${item}-${index}`} role="listitem">
+              <Chip size="small" variant="subtle" color="default">
+                {item}
+              </Chip>
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      {description ? (
+        <Text
+          variant="body-regular"
+          numberOfLines={numberOfLines > 0 ? numberOfLines : undefined}
+          style={{ color: palette.text }}
+          testID={id('description')}
+        >
+          {description}
+        </Text>
+      ) : null}
+
+      {hasSupport ? (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', columnGap: 16, rowGap: 6 }} testID={id('support')}>
+          {attendeesLabel ? (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <RiGroupLine width={16} height={16} fill={palette.textSecondary} />
+              <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
+                {attendeesLabel}
+              </Text>
+            </View>
+          ) : null}
+          {organisationsLabel ? (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <RiHandHeartLine width={16} height={16} fill={palette.textSecondary} />
+              <Text variant="body-2-medium" style={{ color: palette.textSecondary }}>
+                {organisationsLabel}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+
+      {hasActions ? (
+        <View
+          testID={id('actions')}
+          style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 8,
+            paddingTop: 16,
+            borderTopWidth: 1,
+            borderTopColor: palette.hairline,
+          }}
+        >
+          {onAttendingChange ? (
+            <HousingToggleButton
+              label={attendLabel}
+              pressed={attending}
+              onPress={() => onAttendingChange(!attending)}
+              icon={RiHandHeartLine}
+              pressedIcon={RiCheckLine}
+              testID={id('attend')}
+            />
+          ) : null}
+          {onShare ? (
+            <Button variant="secondary" size="small" leadingIcon={RiShareLine} onPress={onShare} testID={id('share')}>
+              {shareLabel}
+            </Button>
+          ) : null}
+          {onContactSupport ? (
+            <Button
+              variant="secondary"
+              size="small"
+              leadingIcon={RiChat3Line}
+              onPress={onContactSupport}
+              testID={id('contact')}
+            >
+              {contactSupportLabel}
+            </Button>
+          ) : null}
+        </View>
+      ) : null}
+    </HousingCard>
+  );
+}
+
+export const EvictionReportCard = memo(EvictionReportCardComponent);
+EvictionReportCard.displayName = 'EvictionReportCard';

package/src/eviction/EvictionTimeline.tsx

@@ -0,0 +1,61 @@
+import React, { memo, useMemo } from 'react';
+
+import { TenancyTimeline } from '../tenancy/TenancyTimeline';
+import type { TenancyTimelineEvent } from '../tenancy/types';
+import { EVICTION_EVENT } from './constants';
+import type { EvictionTimelineProps } from './types';
+
+/**
+ * An eviction case's history: the report, the date being set, postponements,
+ * suspensions, the outcome — each with its date and where it came from.
+ *
+ * It is `TenancyTimeline` at comfortable density with a marker per event kind:
+ *
+ *   published     file       primary
+ *   date-set      calendar   warning
+ *   postponed     clock      info
+ *   suspended     shield     success
+ *   executed      house      neutral
+ *   cancelled     x circle   neutral
+ *   mobilisation  group      primary
+ *   update        info       primary
+ *
+ * `upcoming` entries (a date not yet reached) draw a hollow marker. The source
+ * is drawn beside the date ("14 Aug 2026 · Source: Court notice") so a reader
+ * can weigh each claim.
+ */
+const DEFAULT_FORMAT_SOURCE = (source: string) => `Source: ${source}`;
+
+function EvictionTimelineComponent({
+  events,
+  formatSource = DEFAULT_FORMAT_SOURCE,
+  accessibilityLabel = 'Case history',
+  style,
+  testID,
+}: EvictionTimelineProps) {
+  const mapped = useMemo<TenancyTimelineEvent[]>(
+    () =>
+      events.map((event) => ({
+        id: event.id,
+        title: event.title,
+        date: event.date,
+        actor: event.source ? formatSource(event.source) : undefined,
+        description: event.description,
+        icon: EVICTION_EVENT[event.kind].icon,
+        tone: EVICTION_EVENT[event.kind].tone,
+        state: event.upcoming ? 'upcoming' : 'complete',
+      })),
+    [events, formatSource],
+  );
+  return (
+    <TenancyTimeline
+      events={mapped}
+      accessibilityLabel={accessibilityLabel}
+      style={style}
+      testID={testID}
+    />
+  );
+}
+
+export const EvictionTimeline = memo(EvictionTimelineComponent);
+EvictionTimeline.displayName = 'EvictionTimeline';

package/src/eviction/constants.ts

@@ -0,0 +1,34 @@
+import {
+  RiCalendarLine,
+  RiCloseCircleLine,
+  RiFileTextLine,
+  RiGroupLine,
+  RiHome4Line,
+  RiInformationLine,
+  RiShieldCheckLine,
+  RiTimeLine,
+} from '../icons/remix';
+import type { AccentFill, AccentTone } from '../theme/accent-colors';
+import type { HousingIcon } from '../tenancy/types';
+import type { EvictionEventKind, EvictionStatus } from './types';
+
+/** The status badge: tone, fill and default English word. */
+export const EVICTION_STATUS: Record<EvictionStatus, { tone: AccentTone; fill: AccentFill; label: string }> = {
+  scheduled: { tone: 'warning', fill: 'subtle', label: 'Scheduled' },
+  postponed: { tone: 'info', fill: 'subtle', label: 'Postponed' },
+  suspended: { tone: 'success', fill: 'subtle', label: 'Suspended' },
+  executed: { tone: 'default', fill: 'solid', label: 'Executed' },
+  cancelled: { tone: 'default', fill: 'subtle', label: 'Cancelled' },
+};
+
+/** A history entry's marker. */
+export const EVICTION_EVENT: Record<EvictionEventKind, { icon: HousingIcon; tone: AccentTone }> = {
+  published: { icon: RiFileTextLine, tone: 'primary' },
+  'date-set': { icon: RiCalendarLine, tone: 'warning' },
+  postponed: { icon: RiTimeLine, tone: 'info' },
+  suspended: { icon: RiShieldCheckLine, tone: 'success' },
+  executed: { icon: RiHome4Line, tone: 'default' },
+  cancelled: { icon: RiCloseCircleLine, tone: 'default' },
+  mobilisation: { icon: RiGroupLine, tone: 'primary' },
+  update: { icon: RiInformationLine, tone: 'primary' },
+};

package/src/eviction/index.ts

@@ -0,0 +1,10 @@
+export { EvictionReportCard } from './EvictionReportCard';
+export { EvictionTimeline } from './EvictionTimeline';
+export { EVICTION_EVENT, EVICTION_STATUS } from './constants';
+export type {
+  EvictionEvent,
+  EvictionEventKind,
+  EvictionReportCardProps,
+  EvictionStatus,
+  EvictionTimelineProps,
+} from './types';

package/src/eviction/types.ts

@@ -0,0 +1,103 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Where a scheduled eviction stands.
+ *
+ *   scheduled   warning   a date is set and it has not happened
+ *   postponed   info      the date moved; a new one may be set
+ *   suspended   success   stopped, for now (a court, an agreement, the community)
+ *   executed    neutral   it happened (a dark, solid badge)
+ *   cancelled   neutral   withdrawn
+ */
+export type EvictionStatus = 'scheduled' | 'postponed' | 'suspended' | 'executed' | 'cancelled';
+
+export interface EvictionReportCardProps {
+  /**
+   * The scheduled date, pre-formatted and prominent ("Tuesday, 23 September").
+   * The app owns the locale.
+   */
+  date: string;
+  /** Pre-formatted ("09:00"). */
+  time?: string;
+  /**
+   * A relative line the app computes ("in 3 days", "Tomorrow", "2 weeks ago").
+   * The card never reads the clock.
+   */
+  relativeLabel?: string;
+  status: EvictionStatus;
+  /** Overrides the status word. */
+  statusLabel?: string;
+  /**
+   * A COARSE area — a neighbourhood and city ("Carabanchel, Madrid") or a
+   * street without a number. PRIVACY: never pass an exact address. How precise
+   * this is gets decided upstream, where the report is moderated; the card
+   * draws whatever it is given and has no field for a door number on purpose.
+   */
+  area: string;
+  /** Short free strings drawn as chips ("Family with minors", "Elderly person"). */
+  household?: readonly string[];
+  /** Clamped to `numberOfLines`. */
+  description?: string;
+  /** Default `3`; `0` never clamps. */
+  numberOfLines?: number;
+  /** Pre-formatted ("12 people will attend"). */
+  attendeesLabel?: string;
+  /** Pre-formatted ("3 organisations supporting"). */
+  organisationsLabel?: string;
+  /** Whether the viewer said they will attend. Draws the toggle with `onAttendingChange`. */
+  attending?: boolean;
+  onAttendingChange?: (attending: boolean) => void;
+  /** Default `"I'll be there"`. Stays the toggle's name in both states; `aria-pressed` carries the state. */
+  attendLabel?: string;
+  onShare?: () => void;
+  /** Default `"Share"`. */
+  shareLabel?: string;
+  onContactSupport?: () => void;
+  /** Default `"Contact support group"`. */
+  contactSupportLabel?: string;
+  /**
+   * Checked by the community (neighbours, a housing group) — NOT by an
+   * authority. The label says so; keep it that way when translating.
+   */
+  verified?: boolean;
+  /** Default `"Community verified"`. */
+  verifiedLabel?: string;
+  /** The heading level of the date on web. Default `3`. */
+  headingLevel?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** What a history entry records; picks its marker icon and tone. */
+export type EvictionEventKind =
+  | 'published'
+  | 'date-set'
+  | 'postponed'
+  | 'suspended'
+  | 'executed'
+  | 'cancelled'
+  | 'mobilisation'
+  | 'update';
+
+export interface EvictionEvent {
+  id?: string;
+  kind: EvictionEventKind;
+  title: string;
+  /** Pre-formatted ("14 Aug 2026"). */
+  date?: string;
+  /** Where the information came from ("Court notice", "Neighbourhood assembly"). */
+  source?: string;
+  description?: string;
+  /** Draws a hollow marker (a date that has not arrived). */
+  upcoming?: boolean;
+}
+
+export interface EvictionTimelineProps {
+  events: readonly EvictionEvent[];
+  /** Default `(source) => \`Source: ${source}\``. */
+  formatSource?: (source: string) => string;
+  /** Names the list. Default `"Case history"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/home-search/BudgetPicker.tsx

@@ -0,0 +1,116 @@
+import React, { memo, useCallback } from 'react';
+import { View } from 'react-native';
+
+import { Chip } from '../chip';
+import { RangeFields } from '../stay-filters/RangeFields';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { DEFAULT_BUDGET_PRESETS } from './constants';
+import type { BudgetPickerProps, BudgetPreset } from './types';
+
+/**
+ * A budget for a search panel: a title, a "Minimum" / "Maximum" pair of fields
+ * and a row of preset chips.
+ *
+ *   title        body-semibold, text-primary; description body-2-regular,
+ *                text-secondary, 2 under it
+ *   fields       the range filters' floating-label pair, 16 apart, 16 under
+ *   presets      Bloom `Chip`s (`large`, `outlined`; the chosen one takes the
+ *                brand tone), wrapped 8 apart, 16 under the fields
+ *
+ * `period` picks the defaults: `month` (rent) presets up to 800 / 800–1,200 /
+ * 1,200–1,800 / 1,800+ and a 50 step; `total` (sale) up to 150,000 /
+ * 150,000–300,000 / 300,000–600,000 / 600,000+ and a 5,000 step.
+ *
+ * EITHER END IS OPEN: `null` is no minimum / no maximum. An emptied field
+ * commits `null`; a typed amount snaps to `step` and can not pass the other
+ * end. A preset chip sets both ends at once; pressing the chosen one again
+ * clears the budget. Preset labels are built from `formatAmount` unless given.
+ */
+
+/** A preset's chip label from the amount formatter. Pure; exported for the tests. */
+export function budgetPresetLabel(preset: BudgetPreset, format: (n: number) => string): string {
+  if (preset.label) return preset.label;
+  if (preset.min == null && preset.max != null) return `Up to ${format(preset.max)}`;
+  if (preset.max == null && preset.min != null) return `${format(preset.min)}+`;
+  if (preset.min != null && preset.max != null) return `${format(preset.min)} – ${format(preset.max)}`;
+  return 'Any';
+}
+
+function BudgetPickerComponent({
+  value,
+  onValueChange,
+  period = 'month',
+  presets,
+  formatAmount = String,
+  title,
+  description,
+  minLabel = 'Minimum',
+  maxLabel = 'Maximum',
+  step,
+  presetsLabel = 'Budget presets',
+  style,
+  testID,
+}: BudgetPickerProps) {
+  const theme = useTheme();
+  const items = presets ?? DEFAULT_BUDGET_PRESETS[period];
+  const heading = title ?? (period === 'month' ? 'Monthly budget' : 'Price');
+  const sub =
+    description === undefined ? (period === 'month' ? 'Rent per month, before bills' : 'Total price') : description;
+
+  const onCommit = useCallback(
+    (next: [number | null, number | null]) => {
+      if (next[0] !== value[0] || next[1] !== value[1]) onValueChange(next);
+    },
+    [value, onValueChange],
+  );
+
+  return (
+    <View testID={testID} style={[{ gap: 16 }, style]}>
+      <View style={{ gap: 2 }}>
+        <Text variant="body-semibold" role="heading" style={{ color: theme.colors.text }}>
+          {heading}
+        </Text>
+        {sub ? (
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary }}>
+            {sub}
+          </Text>
+        ) : null}
+      </View>
+      <RangeFields
+        value={value}
+        onCommit={onCommit}
+        format={formatAmount}
+        labels={[minLabel, maxLabel]}
+        min={0}
+        step={step ?? (period === 'month' ? 50 : 5000)}
+        nullable
+        testID={testID}
+      />
+      {items.length > 0 ? (
+        <View role="group" accessibilityLabel={presetsLabel} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          {items.map((preset, index) => {
+            const selected = preset.min === value[0] && preset.max === value[1];
+            return (
+              <Chip
+                key={index}
+                size="large"
+                variant="outlined"
+                selected={selected}
+                onPress={() => onValueChange(selected ? [null, null] : [preset.min, preset.max])}
+                testID={testID ? `${testID}-preset-${index}` : undefined}
+                // `paddingHorizontal`, the spelling Chip's base uses — a longhand would lose on web.
+                style={{ paddingHorizontal: 12, height: 32 }}
+              >
+                {budgetPresetLabel(preset, formatAmount)}
+              </Chip>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const BudgetPicker = memo(BudgetPickerComponent);
+BudgetPicker.displayName = 'BudgetPicker';