@oxy.so/bloom 2.10.0 → 2.12.0

package/src/chat-people/ChannelPostCard.tsx

@@ -0,0 +1,275 @@
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Avatar } from '../avatar/Avatar';
+import { Button } from '../button';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiChat3Line } from '../icons/remix/RiChat3Line';
+import { RiEyeLine } from '../icons/remix/RiEyeLine';
+import { RiMore2Line } from '../icons/remix/RiMore2Line';
+import { RiPushpinFill } from '../icons/remix/RiPushpinFill';
+import { RiShareForwardLine } from '../icons/remix/RiShareForwardLine';
+import { RiVerifiedBadgeFill } from '../icons/remix/RiVerifiedBadgeFill';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveChatPeoplePaint } from './shared';
+import type { ChannelPostCardProps } from './types';
+
+/**
+ * `ChannelPostCard`: one broadcast in a channel.
+ *
+ *   header    32 avatar · channel name (+ verified mark, + pin mark) · time
+ *   media     edge to edge inside the card's radius
+ *   body      the post
+ *   reactions the caller's row of chips
+ *   footer    views (eye) · forwards (arrow) on the left; "128 comments" and
+ *             share on the right
+ *
+ * COUNTS ARE STRINGS. "12.4K" is a locale decision and an abbreviation policy
+ * the app already made for its feed; a card that formats numbers itself would
+ * disagree with the list it sits in, in the one place a reader compares them
+ * side by side.
+ *
+ * The eye and the forward arrow are DECORATIVE — the counts beside them are
+ * text, so the glyph would announce a second time. The accessible names for
+ * both live in `labels`, on the row that holds each pair.
+ */
+
+const RADIUS = 16;
+
+function ChannelPostCardComponent({
+  channelName,
+  channelAvatar,
+  channelAvatarVariant,
+  verified = false,
+  time,
+  children,
+  media,
+  views,
+  forwards,
+  reactions,
+  comments,
+  onComments,
+  onShare,
+  shareLabel = 'Share',
+  onPress,
+  pinned = false,
+  onMore,
+  moreLabel = 'Post options',
+  labels,
+  style,
+  testID,
+}: ChannelPostCardProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveChatPeoplePaint(theme), [theme]);
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const viewsLabel = labels?.views ?? ((count: string) => `${count} views`);
+  const forwardsLabel = labels?.forwards ?? ((count: string) => `${count} forwards`);
+
+  const header = (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingRight: onMore === undefined ? 0 : 28,
+      }}
+    >
+      <Avatar
+        source={channelAvatar}
+        variant={channelAvatarVariant}
+        name={channelName}
+        size={32}
+      />
+      <View style={{ flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+        <Text
+          variant="body-semibold"
+          numberOfLines={1}
+          style={{ color: paint.text, flexShrink: 1 }}
+          testID={testID ? `${testID}-channel` : undefined}
+        >
+          {channelName}
+        </Text>
+        {verified ? <RiVerifiedBadgeFill width={14} height={14} fill={paint.accent} /> : null}
+        {pinned ? (
+          <View
+            accessibilityLabel={labels?.pinned ?? 'Pinned'}
+            testID={testID ? `${testID}-pinned` : undefined}
+          >
+            <RiPushpinFill width={13} height={13} fill={paint.textTertiary} />
+          </View>
+        ) : null}
+      </View>
+      <Text
+        variant="caption-1-regular"
+        style={{ color: paint.textSecondary }}
+        testID={testID ? `${testID}-time` : undefined}
+      >
+        {time}
+      </Text>
+    </View>
+  );
+
+  const body = (
+    <>
+      {header}
+      {media === undefined ? null : (
+        <View
+          style={{
+            borderRadius: RADIUS - 6,
+            overflow: 'hidden',
+            backgroundColor: paint.rowHighlight,
+          }}
+          testID={testID ? `${testID}-media` : undefined}
+        >
+          {media}
+        </View>
+      )}
+      {children === undefined ? null : typeof children === 'string' ? (
+        <Text variant="body-regular" style={{ color: paint.text }}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+      {reactions}
+    </>
+  );
+
+  const shell = {
+    gap: 10,
+    borderRadius: RADIUS,
+    paddingTop: 12,
+    paddingRight: 12,
+    paddingBottom: 12,
+    paddingLeft: 12,
+  };
+
+  const footer =
+    views === undefined &&
+    forwards === undefined &&
+    comments === undefined &&
+    onShare === undefined ? null : (
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 14,
+          paddingTop: 8,
+          paddingRight: 12,
+          paddingBottom: 12,
+          paddingLeft: 12,
+          flexWrap: 'wrap',
+        }}
+      >
+        {views === undefined ? null : (
+          <View
+            accessibilityLabel={viewsLabel(views)}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}
+            testID={testID ? `${testID}-views` : undefined}
+          >
+            <RiEyeLine width={14} height={14} fill={paint.textSecondary} />
+            <Text variant="caption-1-regular" style={{ color: paint.textSecondary }}>
+              {views}
+            </Text>
+          </View>
+        )}
+        {forwards === undefined ? null : (
+          <View
+            accessibilityLabel={forwardsLabel(forwards)}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}
+            testID={testID ? `${testID}-forwards` : undefined}
+          >
+            <RiShareForwardLine width={14} height={14} fill={paint.textSecondary} />
+            <Text variant="caption-1-regular" style={{ color: paint.textSecondary }}>
+              {forwards}
+            </Text>
+          </View>
+        )}
+        <View style={{ flex: 1 }} />
+        {comments === undefined ? null : (
+          <Button
+            variant="text"
+            size="small"
+            leadingIcon={RiChat3Line}
+            onPress={onComments}
+            testID={testID ? `${testID}-comments` : undefined}
+          >
+            {comments}
+          </Button>
+        )}
+        {onShare === undefined ? null : (
+          <Button
+            variant="text"
+            size="small"
+            iconOnly
+            leadingIcon={RiShareForwardLine}
+            accessibilityLabel={shareLabel}
+            onPress={onShare}
+            testID={testID ? `${testID}-share` : undefined}
+          />
+        )}
+      </View>
+    );
+
+  return (
+    <View
+      style={[
+        {
+          borderRadius: RADIUS,
+          borderWidth: 1,
+          borderColor: paint.border,
+          backgroundColor:
+            hovered && onPress !== undefined ? paint.rowHighlight : paint.surfaceRaised,
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {onPress === undefined ? (
+        <View style={shell}>{body}</View>
+      ) : (
+        <Pressable
+          role="button"
+          accessibilityLabel={`${channelName}, ${time}`}
+          onPress={onPress}
+          onHoverIn={onIn}
+          onHoverOut={onOut}
+          style={shell}
+          testID={testID ? `${testID}-open` : undefined}
+        >
+          {body}
+        </Pressable>
+      )}
+      {footer}
+      {/* A SIBLING of the card's press target, laid over its top-right corner
+          rather than nested in the header. A `<button>` inside a `<button>` is
+          invalid HTML, and react-dom says so loudly; on native it is two
+          overlapping announcements for one gesture. */}
+      {onMore === undefined ? null : (
+        <Pressable
+          role="button"
+          accessibilityLabel={moreLabel}
+          onPress={onMore}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          style={{
+            position: 'absolute',
+            top: 12,
+            right: 10,
+            width: 24,
+            height: 24,
+            borderRadius: 12,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          testID={testID ? `${testID}-more` : undefined}
+        >
+          <RiMore2Line width={16} height={16} fill={paint.textSecondary} />
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+export const ChannelPostCard = memo(ChannelPostCardComponent);
+ChannelPostCard.displayName = 'ChannelPostCard';

package/src/chat-people/ContactList.tsx

@@ -0,0 +1,195 @@
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, View, type LayoutChangeEvent } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { ContactRow } from './ContactRow';
+import { contactIndexLetters, contactSectionIndex, resolveChatPeoplePaint } from './shared';
+import type { ContactListProps } from './types';
+
+/**
+ * `ContactList`: contacts in A–Z sections, with the index rail.
+ *
+ *   heading   one letter, `caption-1-semibold` secondary, on the page fill;
+ *             PINNED while its own rows scroll under it
+ *   rail      the letters down the right edge, each a 16×16 press target with
+ *             a 6px hit slop, the active one in the accent
+ *
+ * STICKY IS `stickyHeaderIndices`, not CSS. react-native-web implements the
+ * same prop the native ScrollView does, so one spelling pins the heading on
+ * both platforms; `position: sticky` would pin it on web and do nothing at all
+ * on native, which is the shape of bug nothing in jest can see.
+ *
+ * The rail SCROLLS the list itself when it can (it measures each section's
+ * offset with `onLayout`) and always reports the letter through
+ * `onJumpToLetter`, so an app driving a virtualised list gets what it needs.
+ * A letter with no section does nothing: a rail showing the whole alphabet
+ * over six sections must not jump to whatever happens to be nearest.
+ */
+
+const RAIL_WIDTH = 22;
+
+function ContactListComponent({
+  sections,
+  showIndex,
+  indexLetters,
+  activeLetter,
+  onJumpToLetter,
+  formatJumpLabel,
+  onContactPress,
+  onContactSelectedChange,
+  onContactAction,
+  stickyHeaders = true,
+  height,
+  header,
+  footer,
+  emptyState,
+  style,
+  testID,
+}: ContactListProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveChatPeoplePaint(theme), [theme]);
+  const scroller = useRef<ScrollView | null>(null);
+  const offsets = useRef<Map<string, number>>(new Map());
+  const [, setMeasured] = useState(0);
+
+  const filled = sections.filter((section) => section.contacts.length > 0);
+  const letters = contactIndexLetters(filled, indexLetters);
+  const railVisible = showIndex ?? filled.length > 1;
+  const jumpLabel = formatJumpLabel ?? ((letter: string) => `Jump to ${letter}`);
+
+  const onSectionLayout = useCallback((letter: string, event: LayoutChangeEvent) => {
+    offsets.current.set(letter, event.nativeEvent.layout.y);
+    setMeasured((n) => n + 1);
+  }, []);
+
+  const jump = useCallback(
+    (letter: string) => {
+      if (contactSectionIndex(filled, letter) < 0) return;
+      const y = offsets.current.get(letter);
+      if (y !== undefined) scroller.current?.scrollTo({ y, animated: true });
+      onJumpToLetter?.(letter);
+    },
+    [filled, onJumpToLetter],
+  );
+
+  // One flat child array so `stickyHeaderIndices` can name the headings by
+  // position. Building it inline and counting as we go is what keeps the two
+  // in step — a second pass over the same data is a second place to be wrong.
+  const children: React.ReactNode[] = [];
+  const stickyIndices: number[] = [];
+  if (header !== undefined) children.push(<View key="__header">{header}</View>);
+  for (const section of filled) {
+    stickyIndices.push(children.length);
+    children.push(
+      <View
+        key={`heading-${section.letter}`}
+        onLayout={(event) => onSectionLayout(section.letter, event)}
+        style={{
+          backgroundColor: paint.surface,
+          paddingTop: 10,
+          paddingRight: 10,
+          paddingBottom: 4,
+          paddingLeft: 10,
+        }}
+        testID={testID ? `${testID}-heading-${section.letter}` : undefined}
+      >
+        <Text variant="caption-1-semibold" style={{ color: paint.textSecondary }}>
+          {section.letter}
+        </Text>
+      </View>,
+    );
+    for (const contact of section.contacts) {
+      children.push(
+        <ContactRow
+          key={contact.id}
+          {...contact}
+          onPress={
+            contact.onPress ??
+            (onContactPress === undefined ? undefined : () => onContactPress(contact.id))
+          }
+          onSelectedChange={
+            contact.onSelectedChange ??
+            (onContactSelectedChange === undefined
+              ? undefined
+              : (next: boolean) => onContactSelectedChange(contact.id, next))
+          }
+          onAction={
+            contact.onAction ??
+            (onContactAction === undefined ? undefined : () => onContactAction(contact.id))
+          }
+          style={{ paddingRight: railVisible ? RAIL_WIDTH : 0 }}
+          testID={testID ? `${testID}-contact-${contact.id}` : undefined}
+        />,
+      );
+    }
+  }
+  if (footer !== undefined) children.push(<View key="__footer">{footer}</View>);
+
+  if (filled.length === 0) {
+    return (
+      <View style={[{ backgroundColor: paint.surface }, style]} testID={testID}>
+        {header}
+        {emptyState}
+        {footer}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[{ backgroundColor: paint.surface, position: 'relative' }, style]}
+      testID={testID}
+    >
+      <ScrollView
+        ref={scroller}
+        style={height === undefined ? undefined : { height }}
+        stickyHeaderIndices={stickyHeaders ? stickyIndices : undefined}
+        testID={testID ? `${testID}-scroll` : undefined}
+      >
+        {children}
+      </ScrollView>
+
+      {railVisible ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 8,
+            bottom: 8,
+            right: 2,
+            width: RAIL_WIDTH,
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1,
+          }}
+          testID={testID ? `${testID}-rail` : undefined}
+        >
+          {letters.map((letter) => {
+            const active = letter === activeLetter;
+            return (
+              <Pressable
+                key={letter}
+                role="button"
+                accessibilityLabel={jumpLabel(letter)}
+                onPress={() => jump(letter)}
+                hitSlop={{ top: 2, bottom: 2, left: 6, right: 6 }}
+                style={{ paddingTop: 1, paddingBottom: 1 }}
+                testID={testID ? `${testID}-jump-${letter}` : undefined}
+              >
+                <Text
+                  variant={active ? 'caption-2-bold' : 'caption-2-medium'}
+                  style={{ color: active ? paint.railActive : paint.railText }}
+                >
+                  {letter}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const ContactList = memo(ContactListComponent);
+ContactList.displayName = 'ContactList';

package/src/chat-people/ContactRow.tsx

@@ -0,0 +1,214 @@
+import React, { memo, useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Button } from '../button';
+import { AvatarPresence } from '../chat-indicators/AvatarPresence';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { resolveChatPeoplePaint } from './shared';
+import type { ContactRowProps, ContactRowTrailing } from './types';
+import { DISABLED_OPACITY } from '../styles/tokens';
+
+/**
+ * `ContactRow`: one person in a list of people.
+ *
+ *   avatar with presence · name (`body-medium`) over the subtitle
+ *   (`caption-1-regular`, secondary) · one trailing affordance
+ *
+ * The trailing slot is DERIVED from the handlers by default — a `checkbox` with
+ * `onSelectedChange`, an action button with `onAction`, nothing otherwise —
+ * for the same reason `CallControls` derives its buttons: a `trailing` prop and
+ * a handler prop that disagree is a control that does nothing, and there is no
+ * way for the row to notice.
+ *
+ * SELECTION IS ONE TARGET, NOT TWO. When the row is a checkbox row, the ROW is
+ * the `role="checkbox"` and the mark inside it is DRAWN, not a `Checkbox`
+ * component. Nesting Bloom's `Checkbox` here would put a second
+ * `role="checkbox"` inside the first — two hit areas that disagree about which
+ * one the user meant, and a screen reader announcing the same control twice.
+ * The mark is a 20px circle (the picker idiom) rather than a square, so it
+ * cannot be mistaken for the settings checkbox it is not.
+ */
+
+const AVATAR: Record<'small' | 'medium', number> = { small: 36, medium: 44 };
+
+function resolveTrailing(props: ContactRowProps): ContactRowTrailing {
+  if (props.trailing !== undefined) return props.trailing;
+  if (props.onSelectedChange !== undefined) return 'checkbox';
+  if (props.onAction !== undefined) return 'action';
+  return 'none';
+}
+
+function ContactRowComponent(props: ContactRowProps) {
+  const {
+    name,
+    avatar,
+    avatarVariant,
+    subtitle,
+    status,
+    trailingSlot,
+    selected = false,
+    onSelectedChange,
+    actionLabel = 'Add',
+    onAction,
+    actionDone = false,
+    actionDoneLabel = 'Added',
+    onPress,
+    disabled = false,
+    size = 'medium',
+    style,
+    textStyle,
+    testID,
+  } = props;
+  const theme = useTheme();
+  const paint = useMemo(() => resolveChatPeoplePaint(theme), [theme]);
+  const { state: hovered, onIn, onOut } = useInteractionState();
+  const trailing = resolveTrailing(props);
+  const checkboxRow = trailing === 'checkbox' && onSelectedChange !== undefined;
+  const pressable = checkboxRow || onPress !== undefined;
+
+  const body = (
+    <>
+      <AvatarPresence
+        source={avatar}
+        variant={avatarVariant}
+        name={name}
+        size={AVATAR[size]}
+        status={status}
+        presenceRingColor={paint.surface}
+        presenceLabel=""
+      />
+      <View style={{ flex: 1, minWidth: 0, gap: 1 }}>
+        <Text
+          variant="body-medium"
+          numberOfLines={1}
+          style={[{ color: paint.text }, textStyle]}
+          testID={testID ? `${testID}-name` : undefined}
+        >
+          {name}
+        </Text>
+        {subtitle === undefined ? null : (
+          <Text
+            variant="caption-1-regular"
+            numberOfLines={1}
+            style={{ color: paint.textSecondary }}
+            testID={testID ? `${testID}-subtitle` : undefined}
+          >
+            {subtitle}
+          </Text>
+        )}
+      </View>
+      {trailingSlot !== undefined ? (
+        trailingSlot
+      ) : trailing === 'chevron' ? (
+        <RiArrowRightSLine width={20} height={20} fill={paint.textTertiary} />
+      ) : checkboxRow ? (
+        <View
+          pointerEvents="none"
+          style={{
+            width: 20,
+            height: 20,
+            borderRadius: 10,
+            borderWidth: selected ? 0 : 1.5,
+            borderColor: paint.textTertiary,
+            backgroundColor: selected ? paint.accent : 'transparent',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+          testID={testID ? `${testID}-checkbox` : undefined}
+        >
+          {selected ? <RiCheckLine width={14} height={14} fill={paint.onAccent} /> : null}
+        </View>
+      ) : null}
+    </>
+  );
+
+  const shell = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: 12,
+    flex: 1,
+    minWidth: 0,
+    borderRadius: 12,
+    backgroundColor:
+      (hovered && pressable) || (checkboxRow && selected) ? paint.rowHighlight : 'transparent',
+    paddingTop: 8,
+    paddingRight: 10,
+    paddingBottom: 8,
+    paddingLeft: 10,
+    opacity: disabled ? DISABLED_OPACITY : 1,
+  };
+
+  const main = checkboxRow ? (
+    <Pressable
+      role="checkbox"
+      accessibilityLabel={name}
+      aria-checked={selected}
+      accessibilityState={{ checked: selected, disabled }}
+      aria-disabled={disabled || undefined}
+      disabled={disabled}
+      onPress={() => onSelectedChange?.(!selected)}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      style={shell}
+      testID={testID ? `${testID}-select` : undefined}
+    >
+      {body}
+    </Pressable>
+  ) : onPress === undefined ? (
+    <View style={shell}>{body}</View>
+  ) : (
+    <Pressable
+      role="button"
+      accessibilityLabel={subtitle === undefined ? name : `${name}, ${subtitle}`}
+      aria-disabled={disabled || undefined}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      onHoverIn={onIn}
+      onHoverOut={onOut}
+      style={shell}
+      testID={testID ? `${testID}-open` : undefined}
+    >
+      {body}
+    </Pressable>
+  );
+
+  return (
+    <View
+      style={[{ flexDirection: 'row', alignItems: 'center', gap: 8 }, style]}
+      testID={testID}
+    >
+      {main}
+      {trailing === 'action' && onAction !== undefined ? (
+        actionDone ? (
+          <View
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 4, paddingRight: 6 }}
+            testID={testID ? `${testID}-action-done` : undefined}
+          >
+            <RiCheckLine width={16} height={16} fill={paint.textSecondary} />
+            <Text variant="body-2-medium" style={{ color: paint.textSecondary }}>
+              {actionDoneLabel}
+            </Text>
+          </View>
+        ) : (
+          <Button
+            variant="secondary"
+            size="small"
+            disabled={disabled}
+            onPress={onAction}
+            testID={testID ? `${testID}-action` : undefined}
+          >
+            {actionLabel}
+          </Button>
+        )
+      ) : null}
+    </View>
+  );
+}
+
+export const ContactRow = memo(ContactRowComponent);
+ContactRow.displayName = 'ContactRow';