@oxyhq/bloom 0.15.0 → 0.16.0

package/src/__tests__/CenteredDialog.test.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { Modal, Text } from 'react-native';
-import { fireEvent, render } from '@testing-library/react-native';
-
-import { CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID } from '../dialog';
-import { BloomThemeProvider } from '../theme/BloomThemeProvider';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(
-    <BloomThemeProvider mode="light" colorPreset="teal">
-      {ui}
-    </BloomThemeProvider>,
-  );
-}
-
-const CLOSE_LABEL = 'Close dialog';
-
-describe('CenteredDialog', () => {
-  it('renders the title, children and footer when visible', () => {
-    const { getByText } = renderWithTheme(
-      <CenteredDialog
-        visible
-        onClose={() => {}}
-        title="Confirm action"
-        footer={<Text>Footer area</Text>}
-      >
-        <Text>Body content</Text>
-      </CenteredDialog>,
-    );
-    expect(getByText('Confirm action')).toBeTruthy();
-    expect(getByText('Body content')).toBeTruthy();
-    expect(getByText('Footer area')).toBeTruthy();
-  });
-
-  it('forwards visible=false to the underlying Modal', () => {
-    const { UNSAFE_getByType } = renderWithTheme(
-      <CenteredDialog visible={false} onClose={() => {}} title="Hidden">
-        <Text>Body</Text>
-      </CenteredDialog>,
-    );
-    // The native fork always mounts the RN Modal; the platform hides it via
-    // the `visible` prop. Assert the prop is wired through.
-    expect(UNSAFE_getByType(Modal).props.visible).toBe(false);
-  });
-
-  it('renders a header close button by default when a title is set and fires onClose', () => {
-    const onClose = jest.fn();
-    const { getByLabelText } = renderWithTheme(
-      <CenteredDialog visible onClose={onClose} title="With close">
-        <Text>Body</Text>
-      </CenteredDialog>,
-    );
-    fireEvent.press(getByLabelText(CLOSE_LABEL));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('omits the header close button when showClose is false even with a title', () => {
-    const { queryByLabelText } = renderWithTheme(
-      <CenteredDialog visible onClose={() => {}} title="No close" showClose={false}>
-        <Text>Body</Text>
-      </CenteredDialog>,
-    );
-    expect(queryByLabelText(CLOSE_LABEL)).toBeNull();
-  });
-
-  it('closes when the backdrop is pressed (dismissible default)', () => {
-    const onClose = jest.fn();
-    const { getByTestId } = renderWithTheme(
-      <CenteredDialog visible onClose={onClose}>
-        <Text>Body</Text>
-      </CenteredDialog>,
-    );
-    fireEvent.press(getByTestId(CENTERED_DIALOG_BACKDROP_TESTID));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it('does NOT close on backdrop press when dismissible is false', () => {
-    const onClose = jest.fn();
-    const { getByTestId } = renderWithTheme(
-      <CenteredDialog visible onClose={onClose} dismissible={false}>
-        <Text>Body</Text>
-      </CenteredDialog>,
-    );
-    fireEvent.press(getByTestId(CENTERED_DIALOG_BACKDROP_TESTID));
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it('derives the backdrop testID from a provided testID', () => {
-    const { getByTestId } = renderWithTheme(
-      <CenteredDialog visible onClose={() => {}} testID="signout">
-        <Text>Body</Text>
-      </CenteredDialog>,
-    );
-    expect(getByTestId('signout-backdrop')).toBeTruthy();
-  });
-
-  it('renders a chromeless card (no header) when no title and showClose unset', () => {
-    const { queryByLabelText, getByText, getByTestId } = renderWithTheme(
-      <CenteredDialog visible onClose={() => {}}>
-        <Text>Chromeless body</Text>
-      </CenteredDialog>,
-    );
-    expect(getByText('Chromeless body')).toBeTruthy();
-    // No header close button; only the backdrop is interactive.
-    expect(queryByLabelText(CLOSE_LABEL)).toBeNull();
-    expect(getByTestId(CENTERED_DIALOG_BACKDROP_TESTID)).toBeTruthy();
-  });
-});

package/src/__tests__/ResponsiveSheet.test.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { act, render } from '@testing-library/react-native';
-
-import { ResponsiveSheet } from '../responsive-sheet';
-import { BloomThemeProvider } from '../theme/BloomThemeProvider';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(
-    <BloomThemeProvider mode="light" colorPreset="teal">
-      {ui}
-    </BloomThemeProvider>,
-  );
-}
-
-function rerenderWithTheme(
-  rerender: ReturnType<typeof render>['rerender'],
-  ui: React.ReactElement,
-) {
-  rerender(
-    <BloomThemeProvider mode="light" colorPreset="teal">
-      {ui}
-    </BloomThemeProvider>,
-  );
-}
-
-const LABEL = 'Filters sheet';
-
-// `ResponsiveSheet` is now a deprecated thin wrapper over `<Dialog>`. These
-// tests verify the controlled wrapper contract it still owns (open/close
-// presence + delegation). The jest env reports a 375px-wide viewport (below
-// the default `md` breakpoint) so the wrapper resolves to the bottom-sheet
-// placement, which delegates to bloom's `BottomSheet`.
-describe('ResponsiveSheet (deprecated Dialog wrapper)', () => {
-  it('renders children when open', () => {
-    const { getByText } = renderWithTheme(
-      <ResponsiveSheet open onClose={() => {}} label={LABEL}>
-        <Text>Sheet body</Text>
-      </ResponsiveSheet>,
-    );
-    expect(getByText('Sheet body')).toBeTruthy();
-  });
-
-  it('renders nothing when closed (never opened)', () => {
-    const { queryByText } = renderWithTheme(
-      <ResponsiveSheet open={false} onClose={() => {}} label={LABEL}>
-        <Text>Sheet body</Text>
-      </ResponsiveSheet>,
-    );
-    expect(queryByText('Sheet body')).toBeNull();
-  });
-
-  it('unmounts the body after a controlled close settles', () => {
-    jest.useFakeTimers();
-    try {
-      const { getByText, queryByText, rerender } = renderWithTheme(
-        <ResponsiveSheet open onClose={() => {}} label={LABEL}>
-          <Text>Sheet body</Text>
-        </ResponsiveSheet>,
-      );
-      expect(getByText('Sheet body')).toBeTruthy();
-
-      rerenderWithTheme(
-        rerender,
-        <ResponsiveSheet open={false} onClose={() => {}} label={LABEL}>
-          <Text>Sheet body</Text>
-        </ResponsiveSheet>,
-      );
-
-      // After the close animation/fallback settles the body is gone.
-      act(() => {
-        jest.advanceTimersByTime(500);
-      });
-      expect(queryByText('Sheet body')).toBeNull();
-    } finally {
-      jest.useRealTimers();
-    }
-  });
-
-  it('forwards a custom label to the dialog surface', () => {
-    const { getByLabelText } = renderWithTheme(
-      <ResponsiveSheet open onClose={() => {}} label={LABEL}>
-        <Text>Sheet body</Text>
-      </ResponsiveSheet>,
-    );
-    expect(getByLabelText(LABEL)).toBeTruthy();
-  });
-});

package/src/dialog/CenteredDialog.stories.tsx

@@ -1,125 +0,0 @@
-import React, { useState } from 'react';
-import { Text, View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../button';
-import { CenteredDialog } from './CenteredDialog';
-
-const meta: Meta<typeof CenteredDialog> = {
-  title: 'Components/CenteredDialog',
-  component: CenteredDialog,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CenteredDialog>;
-
-function CompactDemo() {
-  const [visible, setVisible] = useState(false);
-  return (
-    <>
-      <Button onPress={() => setVisible(true)}>Open compact dialog</Button>
-      <CenteredDialog
-        visible={visible}
-        onClose={() => setVisible(false)}
-        title="Delete project?"
-        footer={
-          <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 8 }}>
-            <Button variant="ghost" size="small" onPress={() => setVisible(false)}>
-              Cancel
-            </Button>
-            <Button variant="primary" size="small" onPress={() => setVisible(false)}>
-              Delete
-            </Button>
-          </View>
-        }
-      >
-        <Text>This action cannot be undone. The project and all its data will be permanently removed.</Text>
-      </CenteredDialog>
-    </>
-  );
-}
-
-function CozyDemo() {
-  const [visible, setVisible] = useState(false);
-  return (
-    <>
-      <Button onPress={() => setVisible(true)}>Open cozy dialog</Button>
-      <CenteredDialog
-        visible={visible}
-        onClose={() => setVisible(false)}
-        title="Roomier layout"
-        compact={false}
-      >
-        <Text>compact={'{false}'} relaxes the padding and header/footer gaps for content-heavy dialogs.</Text>
-      </CenteredDialog>
-    </>
-  );
-}
-
-function ChromelessDemo() {
-  const [visible, setVisible] = useState(false);
-  return (
-    <>
-      <Button onPress={() => setVisible(true)}>Open chromeless dialog</Button>
-      <CenteredDialog visible={visible} onClose={() => setVisible(false)}>
-        <View style={{ gap: 12 }}>
-          <Text>No title, no close button — the card owns every pixel.</Text>
-          <Button variant="secondary" size="small" onPress={() => setVisible(false)}>
-            Done
-          </Button>
-        </View>
-      </CenteredDialog>
-    </>
-  );
-}
-
-function NonDismissibleDemo() {
-  const [visible, setVisible] = useState(false);
-  return (
-    <>
-      <Button onPress={() => setVisible(true)}>Open blocking dialog</Button>
-      <CenteredDialog
-        visible={visible}
-        onClose={() => setVisible(false)}
-        title="Action required"
-        dismissible={false}
-        showClose={false}
-        footer={
-          <Button size="small" onPress={() => setVisible(false)}>
-            Acknowledge
-          </Button>
-        }
-      >
-        <Text>Backdrop tap and Escape are disabled — the user must choose an action.</Text>
-      </CenteredDialog>
-    </>
-  );
-}
-
-export const Compact: Story = {
-  render: () => <CompactDemo />,
-};
-
-export const Cozy: Story = {
-  render: () => <CozyDemo />,
-};
-
-export const Chromeless: Story = {
-  render: () => <ChromelessDemo />,
-};
-
-export const NonDismissible: Story = {
-  render: () => <NonDismissibleDemo />,
-};
-
-export const Gallery: Story = {
-  render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <CompactDemo />
-      <CozyDemo />
-      <ChromelessDemo />
-      <NonDismissibleDemo />
-    </View>
-  ),
-};

package/src/dialog/CenteredDialog.tsx

@@ -1,305 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  Modal,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-import { useInteractionState } from '../hooks/useInteractionState';
-import { TimesLarge_Stroke2_Corner0_Rounded as CloseIcon } from '../icons/Times';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import type { CenteredDialogProps } from './centered-dialog-types';
-import {
-  CARD_RADIUS,
-  DEFAULT_MAX_WIDTH,
-  MAX_HEIGHT_FRACTION,
-  resolveSpacing,
-  VIEWPORT_GUTTER,
-} from './centered-dialog-tokens';
-
-const CLOSE_HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
-
-/** Stable testID for the dimmed backdrop. Overridden when a `testID` is set. */
-export const CENTERED_DIALOG_BACKDROP_TESTID = 'bloom-centered-dialog-backdrop';
-
-/**
- * @deprecated Use `<Dialog placement="center">` instead.
- *
- * Native variant of `<CenteredDialog>`.
- *
- * A controlled, centered modal: a transparent RN `Modal` (fade animation,
- * own native window) hosting a dimmed full-screen backdrop and a centered,
- * rounded card styled entirely from Bloom theme tokens.
- *
- * The backdrop is a sibling `Pressable` rendered BEHIND the card (absolute
- * filled), never a parent of it — so a tap on the card never bubbles to the
- * backdrop's close handler and the card never ends up nested inside the
- * backdrop's pressable on web.
- *
- * Dismissal: backdrop tap (when `dismissible`), the header close button, and
- * the Android hardware back button (`onRequestClose`) all call `onClose`.
- */
-export function CenteredDialog({
-  visible,
-  onClose,
-  title,
-  dismissible = true,
-  maxWidth = DEFAULT_MAX_WIDTH,
-  compact = true,
-  showClose,
-  children,
-  footer,
-  accessibilityLabel,
-  closeAccessibilityLabel = 'Close dialog',
-  backdropAccessibilityLabel = 'Dismiss dialog',
-  cardStyle,
-  contentStyle,
-  testID,
-}: CenteredDialogProps) {
-  const theme = useTheme();
-  const backdropPress = useInteractionState();
-
-  const spacing = useMemo(() => resolveSpacing(compact), [compact]);
-  const resolvedShowClose = showClose ?? Boolean(title);
-  const hasHeader = Boolean(title) || resolvedShowClose;
-
-  const handleBackdropPress = dismissible ? onClose : undefined;
-  // Android's hardware back must always be answerable; when the dialog is
-  // non-dismissible we still need a handler (RN requires one for transparent
-  // modals) — make it a no-op so back does nothing rather than crash.
-  const handleRequestClose = dismissible ? onClose : noop;
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="fade"
-      statusBarTranslucent
-      onRequestClose={handleRequestClose}
-    >
-      <View style={[styles.root, { padding: VIEWPORT_GUTTER }]}>
-        <Pressable
-          testID={testID ? `${testID}-backdrop` : CENTERED_DIALOG_BACKDROP_TESTID}
-          style={[
-            styles.backdrop,
-            { backgroundColor: theme.colors.overlay },
-            backdropPress.state && styles.backdropPressed,
-          ]}
-          onPress={handleBackdropPress}
-          onPressIn={backdropPress.onIn}
-          onPressOut={backdropPress.onOut}
-          disabled={!dismissible}
-          accessibilityRole="button"
-          accessibilityLabel={backdropAccessibilityLabel}
-        />
-
-        {/* RN's `Modal` already isolates its contents in a separate
-            accessibility window, so an explicit `accessibilityViewIsModal`
-            on the card is redundant here (and would mark the sibling
-            backdrop inaccessible). The web fork uses `aria-modal` instead. */}
-        <View
-          testID={testID}
-          accessibilityLabel={accessibilityLabel ?? title}
-          style={[
-            styles.card,
-            {
-              maxWidth,
-              maxHeight: `${MAX_HEIGHT_FRACTION * 100}%`,
-              backgroundColor: theme.colors.card,
-              borderColor: theme.colors.border,
-              shadowColor: theme.colors.shadow,
-            },
-            cardStyle,
-          ]}
-        >
-          {hasHeader ? (
-            <DialogHeader
-              title={title}
-              showClose={resolvedShowClose}
-              padding={spacing.pad}
-              gap={spacing.headerGap}
-              closeAccessibilityLabel={closeAccessibilityLabel}
-              onClose={onClose}
-            />
-          ) : null}
-
-          <ScrollView
-            style={styles.bodyScroll}
-            contentContainerStyle={[
-              {
-                padding: spacing.pad,
-                paddingTop: hasHeader ? spacing.headerGap : spacing.pad,
-                gap: spacing.contentGap,
-              },
-              contentStyle,
-            ]}
-            showsVerticalScrollIndicator={false}
-            keyboardShouldPersistTaps="handled"
-          >
-            {children}
-          </ScrollView>
-
-          {footer ? (
-            <View
-              style={[
-                styles.footer,
-                {
-                  padding: spacing.pad,
-                  paddingTop: spacing.footerGap,
-                  borderTopColor: theme.colors.borderLight,
-                },
-              ]}
-            >
-              {footer}
-            </View>
-          ) : null}
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-function DialogHeader({
-  title,
-  showClose,
-  padding,
-  gap,
-  closeAccessibilityLabel,
-  onClose,
-}: {
-  title?: string;
-  showClose: boolean;
-  padding: number;
-  gap: number;
-  closeAccessibilityLabel: string;
-  onClose: () => void;
-}) {
-  const theme = useTheme();
-
-  return (
-    <View
-      style={[
-        styles.header,
-        { paddingHorizontal: padding, paddingTop: padding, gap },
-      ]}
-    >
-      {title ? (
-        <Text
-          accessibilityRole="header"
-          numberOfLines={2}
-          style={[styles.title, { color: theme.colors.text }]}
-        >
-          {title}
-        </Text>
-      ) : (
-        <View style={styles.titleSpacer} />
-      )}
-      {showClose ? (
-        <CloseButton
-          accessibilityLabel={closeAccessibilityLabel}
-          onPress={onClose}
-        />
-      ) : null}
-    </View>
-  );
-}
-
-function CloseButton({
-  accessibilityLabel,
-  onPress,
-}: {
-  accessibilityLabel: string;
-  onPress: () => void;
-}) {
-  const theme = useTheme();
-  const press = useInteractionState();
-
-  return (
-    <Pressable
-      onPress={onPress}
-      onPressIn={press.onIn}
-      onPressOut={press.onOut}
-      hitSlop={CLOSE_HIT_SLOP}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      style={[
-        styles.closeButton,
-        { backgroundColor: theme.colors.contrast50 },
-        press.state && styles.closeButtonPressed,
-      ]}
-    >
-      <CloseIcon size="sm" fill={theme.colors.textSecondary} />
-    </Pressable>
-  );
-}
-
-function noop(): void {
-  /* non-dismissible: hardware back is intentionally inert */
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  backdrop: {
-    // Spell out the absolute-fill rect (matches `Fill`'s canonical style)
-    // rather than spreading the deprecated `StyleSheet.absoluteFillObject`,
-    // which RN 0.83's generated types no longer surface on the `StyleSheet`
-    // namespace and which downstream type-checks reject.
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-  // A subtle deepening on press confirms the tap-to-dismiss affordance.
-  backdropPressed: {
-    opacity: 0.92,
-  },
-  card: {
-    width: '100%',
-    borderRadius: CARD_RADIUS,
-    borderWidth: StyleSheet.hairlineWidth,
-    overflow: 'hidden',
-    shadowOpacity: 0.18,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 8 },
-    elevation: 12,
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-  },
-  title: {
-    flex: 1,
-    fontSize: 17,
-    fontWeight: '700',
-    lineHeight: 22,
-  },
-  titleSpacer: {
-    flex: 1,
-  },
-  closeButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  closeButtonPressed: {
-    opacity: 0.7,
-  },
-  bodyScroll: {
-    flexGrow: 0,
-    flexShrink: 1,
-  },
-  footer: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-  },
-});