@oxy.so/bloom 5.1.0 → 5.2.0

package/src/chat-composer/ComposerAttachmentStrip.tsx

@@ -1,204 +1,4 @@
-/**
- * The pending-attachment strip between the banner stack and the bar.
- *
- * The tile geometry and the rounded-rect progress path are `composer-panel`'s —
- * imported rather than retyped, because a second ring drawn from a second path
- * helper is how two composers end up with rings that close at different angles.
- */
-import React from 'react';
-import { Image, Pressable, ScrollView, View } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-
-import { ringPath } from '../composer-panel/shared';
-import { RiCloseLine } from '../icons/remix/RiCloseLine';
-import { RiFileTextLine } from '../icons/remix/RiFileTextLine';
-import { useImageResolver } from '../image-resolver/context';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
 import { ComposerIconButton } from './ComposerIconButton';
-import { TILE, TILE_RADIUS, resolveChatComposerPalette } from './shared';
-import type { ChatComposerAttachment, ComposerAttachmentStripProps } from './types';
-import { dataHook } from './web-hooks';
-import { useMessages } from '../locale/messages';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-
-function isUrl(value: string): boolean {
-  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
-}
-
-function Tile({
-  attachment,
-  size,
-  onRemove,
-  removeLabel,
-  onOpen,
-  openLabel,
-  testID,
-}: {
-  attachment: ChatComposerAttachment;
-  size: number;
-  onRemove?: (id: string) => void;
-  removeLabel: (attachment: ChatComposerAttachment) => string;
-  onOpen?: (id: string) => void;
-  openLabel?: (attachment: ChatComposerAttachment) => string;
-  testID?: string;
-}) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme);
-  const resolveImage = useImageResolver();
-  const Glyph = attachment.icon ?? RiFileTextLine;
-  const uploading = attachment.progress !== undefined;
-  const progress = Math.min(100, Math.max(0, attachment.progress ?? 0));
-  const radius = TILE_RADIUS - 1;
-  const path = ringPath(size, size, 1, radius);
-  // No `pathLength` on native, so the dash arithmetic needs the real length:
-  // four straight runs plus one full circle of the corner radius.
-  const length = 4 * (size - 2 - 2 * radius) + 2 * Math.PI * radius;
-
-  const uri =
-    attachment.source === undefined
-      ? undefined
-      : isUrl(attachment.source)
-        ? attachment.source
-        : resolveImage?.(attachment.source, 'thumb');
-
-  // The box is a button only where the caller gave it something to do. A tile
-  // that is `role="button"` with no handler announces an action that is not
-  // there, and one that opens on press without a role is unreachable.
-  const Box = onOpen === undefined ? View : Pressable;
-  const boxProps =
-    onOpen === undefined
-      ? {}
-      : {
-          role: 'button' as const,
-          accessibilityLabel: (openLabel ?? ((a: ChatComposerAttachment) => a.name))(attachment),
-          onPress: () => onOpen(attachment.id),
-        };
-
-  return (
-    <View style={{ width: size, gap: 4 }} testID={testID}>
-      {/* The clipped box and the ring are SIBLINGS, never nested. Inside the
-          bordered box an inset-0 layer is the PADDING box — `size - 2` — so a
-          ring drawn in the tile's own `size` coordinates lands 1px off and has
-          its last edge cut away by the same `overflow: hidden` that rounds the
-          photo. The symptom is a ring that stops three quarters of the way
-          round while the dash arithmetic says it is complete. */}
-      <View style={{ position: 'relative', width: size, height: size }}>
-        <Box
-          {...boxProps}
-          style={{
-            width: size,
-            height: size,
-            borderRadius: TILE_RADIUS,
-            borderWidth: 1,
-            borderColor: palette.border,
-            backgroundColor: palette.inset,
-            alignItems: 'center',
-            justifyContent: 'center',
-            overflow: 'hidden',
-          }}>
-          {uri ? (
-            <Image
-              source={{ uri }}
-              accessibilityIgnoresInvertColors
-              style={{ width: size, height: size, opacity: uploading ? 0.6 : 1 }}
-            />
-          ) : (
-            <Glyph width={22} height={22} fill={palette.iconSecondary} />
-          )}
-        </Box>
-        {uploading ? (
-          <View
-            {...dataHook('bloomChatComposerRing')}
-            pointerEvents="none"
-            style={{ position: 'absolute', top: 0, left: 0, width: size, height: size }}
-            testID={testID ? `${testID}-ring` : undefined}>
-            <Svg width={size} height={size}>
-              <Path
-                d={path}
-                fill="none"
-                stroke={palette.accent}
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeDasharray={`${(length * progress) / 100} ${length}`}
-              />
-            </Svg>
-          </View>
-        ) : null}
-      </View>
-      {onRemove && !uploading ? (
-        <View style={{ position: 'absolute', top: -6, right: -6 }}>
-          <ComposerIconButton
-            icon={RiCloseLine}
-            accessibilityLabel={removeLabel(attachment)}
-            onPress={() => onRemove(attachment.id)}
-            size={20}
-            iconSize={12}
-            style={{
-              backgroundColor: palette.surface,
-              borderWidth: 1,
-              borderColor: palette.border,
-            }}
-            testID={testID ? `${testID}-remove` : undefined}
-          />
-        </View>
-      ) : null}
-      <Text
-        variant="caption-2-regular"
-        numberOfLines={1}
-        style={{ color: uploading ? palette.accent : palette.textSecondary }}>
-        {uploading ? `${Math.round(progress)}%` : (attachment.caption ?? attachment.name)}
-      </Text>
-    </View>
-  );
-}
+import { createComposerAttachmentStrip } from './create-composer-attachment-strip';
 
-export function ComposerAttachmentStrip({
-  attachments,
-  onRemove,
-  onOpen,
-  size = TILE,
-  removeLabel: removeLabelProp,
-  openLabel,
-  style,
-  testID,
-  accessibilityLabel: accessibilityLabelProp,
-}: ComposerAttachmentStripProps) {
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  const removeLabel = removeLabelProp ?? ((attachment: ChatComposerAttachment) => messages.removeAttachment(attachment.name));
-  const accessibilityLabel = accessibilityLabelProp ?? messages.attachments;
-  if (attachments.length === 0) return null;
-  return (
-    <ScrollView
-      {...dataHook('bloomChatComposerScroll')}
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      accessibilityLabel={accessibilityLabel}
-      contentContainerStyle={{
-        flexDirection: 'row',
-        gap: 10,
-        // The remove disc hangs 6px past the tile on both axes and a horizontal
-        // ScrollView clips its cross axis (`overflow-y: hidden` on web), so the
-        // top pad is the disc's overhang plus its border — not a rhythm value.
-        paddingLeft: 8,
-        paddingRight: 8,
-        paddingTop: 10,
-        paddingBottom: 2,
-      }}
-      style={[{ flexGrow: 0 }, style]}
-      testID={testID}>
-      {attachments.map((attachment) => (
-        <Tile
-          key={attachment.id}
-          attachment={attachment}
-          size={size}
-          onRemove={onRemove}
-          removeLabel={removeLabel}
-          onOpen={onOpen}
-          openLabel={openLabel}
-          testID={testID ? `${testID}-${attachment.id}` : undefined}
-        />
-      ))}
-    </ScrollView>
-  );
-}
+export const ComposerAttachmentStrip = createComposerAttachmentStrip({ ComposerIconButton });

package/src/chat-composer/ComposerAttachmentStrip.web.tsx

@@ -0,0 +1,4 @@
+import { ComposerIconButton } from './ComposerIconButton.web';
+import { createComposerAttachmentStrip } from './create-composer-attachment-strip';
+
+export const ComposerAttachmentStrip = createComposerAttachmentStrip({ ComposerIconButton });

package/src/chat-composer/ComposerBanner.tsx

@@ -1,159 +1,4 @@
-/**
- * The stack above the input: a reply / edit / forward preview, or the one-line
- * `note` a slow-mode countdown and a scheduled send use.
- *
- * Every banner is the same row — rail, glyph, optional thumbnail, two lines of
- * text, a close button — because they are the same affordance ("the next
- * message is about THIS, and here is how to get out of it"). `note` drops the
- * rail and the surface, which is the difference between "you are in a mode" and
- * "here is a fact about sending".
- */
-import React from 'react';
-import { Image, View } from 'react-native';
-
-import { RiCloseLine } from '../icons/remix/RiCloseLine';
-import { useImageResolver } from '../image-resolver/context';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
 import { ComposerIconButton } from './ComposerIconButton';
-import {
-  BANNER_ICONS,
-  BANNER_RADIUS,
-  BANNER_RAIL_WIDTH,
-  resolveChatComposerPalette,
-} from './shared';
-import type { ComposerBannerProps } from './types';
-import { useCommonMessages } from '../locale/common-messages';
-
-/** A URL passes through; a bare id goes to the app's `ImageResolver`. */
-function isUrl(value: string): boolean {
-  return /^(https?:)?\/\//.test(value) || value.startsWith('data:') || value.startsWith('file:');
-}
-
-export function ComposerBanner({
-  kind,
-  title,
-  preview,
-  thumbnail,
-  icon,
-  accentColor,
-  onClose,
-  closeLabel: closeLabelProp,
-  trailing,
-  style,
-  testID,
-  accessibilityLabel,
-}: ComposerBannerProps) {
-  const common = useCommonMessages();
-  const closeLabel = closeLabelProp ?? common.cancel;
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme);
-  const resolveImage = useImageResolver();
-  const Icon = icon ?? BANNER_ICONS[kind];
-  const accent = accentColor ?? palette.accent;
-  const note = kind === 'note';
-
-  const thumbUri =
-    thumbnail === undefined ? undefined : isUrl(thumbnail) ? thumbnail : resolveImage?.(thumbnail, 'thumb');
-
-  if (note) {
-    return (
-      <View
-        accessibilityRole="text"
-        accessibilityLabel={accessibilityLabel ?? (preview ? `${title}. ${preview}` : title)}
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            paddingLeft: 10,
-            paddingRight: 6,
-            paddingTop: 2,
-            paddingBottom: 2,
-          },
-          style,
-        ]}
-        testID={testID}>
-        <Icon width={14} height={14} fill={palette.iconSecondary} />
-        <Text variant="caption-1-regular" numberOfLines={1} style={{ color: palette.textSecondary, flexShrink: 1 }}>
-          {title}
-        </Text>
-        {preview ? (
-          <Text variant="caption-1-regular" numberOfLines={1} style={{ color: palette.textPlaceholder, flexShrink: 1 }}>
-            {preview}
-          </Text>
-        ) : null}
-        <View style={{ flexGrow: 1 }} />
-        {trailing}
-        {onClose ? (
-          <ComposerIconButton
-            icon={RiCloseLine}
-            accessibilityLabel={closeLabel}
-            onPress={onClose}
-            size={24}
-            iconSize={14}
-          />
-        ) : null}
-      </View>
-    );
-  }
+import { createComposerBanner } from './create-composer-banner';
 
-  return (
-    <View
-      accessibilityLabel={accessibilityLabel ?? (preview ? `${title}. ${preview}` : title)}
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 10,
-          borderRadius: BANNER_RADIUS,
-          backgroundColor: palette.accentSoft,
-          paddingLeft: 8,
-          paddingRight: 4,
-          paddingTop: 6,
-          paddingBottom: 6,
-        },
-        style,
-      ]}
-      testID={testID}>
-      <View
-        testID={testID ? `${testID}-rail` : undefined}
-        style={{
-          width: BANNER_RAIL_WIDTH,
-          alignSelf: 'stretch',
-          minHeight: 32,
-          borderRadius: 2,
-          backgroundColor: accent,
-        }}
-      />
-      <Icon width={18} height={18} fill={accent} />
-      {thumbUri ? (
-        <Image
-          source={{ uri: thumbUri }}
-          accessibilityIgnoresInvertColors
-          style={{ width: 32, height: 32, borderRadius: 8, backgroundColor: palette.inset }}
-        />
-      ) : null}
-      <View style={{ flexShrink: 1, flexGrow: 1, gap: 1 }}>
-        <Text variant="body-2-medium" numberOfLines={1} style={{ color: accent }}>
-          {title}
-        </Text>
-        {preview ? (
-          <Text variant="body-2-regular" numberOfLines={1} style={{ color: palette.textSecondary }}>
-            {preview}
-          </Text>
-        ) : null}
-      </View>
-      {trailing}
-      {onClose ? (
-        <ComposerIconButton
-          icon={RiCloseLine}
-          accessibilityLabel={closeLabel}
-          onPress={onClose}
-          size={28}
-          iconSize={16}
-        />
-      ) : null}
-    </View>
-  );
-}
+export const ComposerBanner = createComposerBanner({ ComposerIconButton });

package/src/chat-composer/ComposerBanner.web.tsx

@@ -0,0 +1,4 @@
+import { ComposerIconButton } from './ComposerIconButton.web';
+import { createComposerBanner } from './create-composer-banner';
+
+export const ComposerBanner = createComposerBanner({ ComposerIconButton });