@oxyhq/bloom 0.50.2 → 0.51.0

package/src/__tests__/TabBarWebFork.test.ts

@@ -0,0 +1,197 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Structural guard for the tab bar's platform split.
+ *
+ * `@oxyhq/bloom/tab-bar` has to resolve cleanly in four places at once: Metro on
+ * iOS/Android (platform extensions), a web bundler (the `browser` export
+ * condition), a non-Metro bundler reading the published `lib/`, and a consumer's
+ * `tsc` (which follows the `"react-native"` source condition). Three packages
+ * break that the moment they appear outside a `.native` file:
+ * `expo-glass-effect` and `expo-symbols` are native-only, and `expo-router` /
+ * `react-native-screens` belong solely to the opt-in
+ * `@oxyhq/bloom/tab-bar/expo-router` subpath so the core bar stays usable in an
+ * app with no router at all.
+ *
+ * None of that is observable from a jest render — a missing `.web` retarget or a
+ * leaked native import fails at a consumer's BUILD, in a repo that isn't this
+ * one. Hence source/contract assertions.
+ *
+ * Every assertion below matches on real import/export/require STATEMENTS, never
+ * on bare substrings: the doc comments in these files name all four packages on
+ * purpose (explaining why they are absent), so `includes('expo-symbols')` would
+ * report a failure that is actually the documentation doing its job.
+ */
+
+const SRC = join(__dirname, '..');
+const REPO_ROOT = join(SRC, '..');
+
+const read = (rel: string) => readFileSync(join(SRC, rel), 'utf8');
+
+/** Packages that must never be reached from a neutral or web module. */
+const PLATFORM_ONLY = [
+  'expo-glass-effect',
+  'expo-symbols',
+  'expo-router',
+  'react-native-screens',
+] as const;
+
+/**
+ * Files resolved by a web bundler, a non-Metro bundler, or a consumer's `tsc`.
+ * `expo-router/index.ts` and its siblings are deliberately absent — that subpath
+ * is where the router packages are allowed to live.
+ */
+const NEUTRAL_AND_WEB_FILES = [
+  'tab-bar/index.ts',
+  'tab-bar/index.web.tsx',
+  'tab-bar/types.ts',
+  'tab-bar/shared.ts',
+  'tab-bar/TabBarBase.tsx',
+  'tab-bar/minimize-context.tsx',
+  'tab-bar/surface.tsx',
+  'tab-bar/surface.web.tsx',
+  'tab-bar/glyph.tsx',
+  'progressive-blur/index.web.tsx',
+  'progressive-blur/shared.ts',
+  'progressive-blur/types.ts',
+] as const;
+
+/**
+ * Blank out comments so a doc comment discussing a package is not mistaken for
+ * an import of it. Line comments are matched only when they START the line, so
+ * a `//` inside a string literal (a URL) survives untouched.
+ */
+function stripComments(source: string): string {
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^[ \t]*\/\/.*$/gm, '');
+}
+
+/** Every module specifier the file actually imports, re-exports or requires. */
+function moduleSpecifiers(source: string): string[] {
+  const code = stripComments(source);
+  const patterns = [
+    /\bfrom\s*['"]([^'"]+)['"]/g, // import … from 'x' / export … from 'x'
+    /\bimport\s*['"]([^'"]+)['"]/g, // bare side-effect import 'x'
+    /\brequire\(\s*['"]([^'"]+)['"]\s*\)/g,
+    /\bimport\(\s*['"]([^'"]+)['"]\s*\)/g,
+  ];
+  const found = new Set<string>();
+  for (const pattern of patterns) {
+    for (const match of code.matchAll(pattern)) {
+      if (match[1]) found.add(match[1]);
+    }
+  }
+  return [...found];
+}
+
+/** True when `specifier` resolves to `pkg` (bare or a subpath of it). */
+function isFrom(specifier: string, pkg: string): boolean {
+  return specifier === pkg || specifier.startsWith(`${pkg}/`);
+}
+
+describe('tab-bar platform split', () => {
+  it('the extractor sees real imports and ignores commented-out ones', () => {
+    // Self-check: if `moduleSpecifiers` breaks, every assertion below would
+    // pass vacuously by finding nothing.
+    const probe = [
+      "/* a doc comment naming expo-symbols and expo-router */",
+      "// import { Nope } from 'react-native-screens';",
+      "import { A } from 'react-native';",
+      "export type { B } from './types';",
+      "const c = require('expo-glass-effect');",
+    ].join('\n');
+    expect(moduleSpecifiers(probe).sort()).toEqual([
+      './types',
+      'expo-glass-effect',
+      'react-native',
+    ]);
+  });
+
+  it.each(NEUTRAL_AND_WEB_FILES)('%s imports no native-only or router package', (file) => {
+    const specifiers = moduleSpecifiers(read(file));
+    const leaked = specifiers.filter((s) => PLATFORM_ONLY.some((pkg) => isFrom(s, pkg)));
+    expect(leaked).toEqual([]);
+  });
+
+  it('the web progressive blur drops expo-blur for one masked backdrop-filter', () => {
+    // Ten stacked BlurViews would be ten composited backdrop passes per frame.
+    expect(moduleSpecifiers(read('progressive-blur/index.web.tsx'))).not.toContain('expo-blur');
+    expect(moduleSpecifiers(read('progressive-blur/index.tsx'))).toContain('expo-blur');
+  });
+
+  it('the native surface and glyph are the ONLY holders of the native packages', () => {
+    // The guard above only proves absence; this proves the split is real rather
+    // than the feature having quietly lost its native path.
+    expect(moduleSpecifiers(read('tab-bar/surface.native.tsx'))).toContain('expo-glass-effect');
+    expect(moduleSpecifiers(read('tab-bar/glyph.native.tsx'))).toContain('expo-symbols');
+  });
+
+  it('the router packages live only under tab-bar/expo-router', () => {
+    const router = moduleSpecifiers(read('tab-bar/expo-router/RouterTabBar.tsx'));
+    expect(router.some((s) => isFrom(s, 'expo-router'))).toBe(true);
+    const screen = moduleSpecifiers(read('tab-bar/expo-router/fading-tab-screen.tsx'));
+    expect(screen).toContain('react-native-screens');
+  });
+
+  it('the default entry imports the platform pieces BY BARE NAME (Metro picks .native)', () => {
+    const specifiers = moduleSpecifiers(read('tab-bar/index.ts'));
+    expect(specifiers).toContain('./surface');
+    expect(specifiers).toContain('./glyph');
+    expect(specifiers).toContain('../progressive-blur');
+    // A `.web` path here would pin every platform to the web fork.
+    expect(specifiers).not.toContain('./surface.web');
+  });
+
+  it('the web entry imports the web pieces by their FULL .web name', () => {
+    // Inside the published `lib/` every file is plain `.js`, and no web bundler
+    // resolves a bare `./surface` to the `.web` sibling — only Metro does.
+    const specifiers = moduleSpecifiers(read('tab-bar/index.web.tsx'));
+    expect(specifiers).toContain('./surface.web');
+    expect(specifiers).toContain('../progressive-blur/index.web');
+    expect(specifiers).not.toContain('./surface');
+    // `./glyph` has no web fork: the neutral file already renders `item.icon`,
+    // which is the correct web behaviour.
+    expect(specifiers).toContain('./glyph');
+  });
+});
+
+describe('tab-bar published surface', () => {
+  const pkg = JSON.parse(readFileSync(join(REPO_ROOT, 'package.json'), 'utf8')) as {
+    exports: Record<string, { browser?: { import?: string; require?: string } }>;
+  };
+
+  it('exports ./tab-bar with a browser condition → index.web.js', () => {
+    const entry = pkg.exports['./tab-bar'];
+    expect(entry).toBeDefined();
+    expect(entry?.browser?.import).toBe('./lib/module/tab-bar/index.web.js');
+    expect(entry?.browser?.require).toBe('./lib/commonjs/tab-bar/index.web.js');
+  });
+
+  it('exports ./progressive-blur with a browser condition → index.web.js', () => {
+    expect(pkg.exports['./progressive-blur']?.browser?.import).toBe(
+      './lib/module/progressive-blur/index.web.js',
+    );
+  });
+
+  it('exports ./tab-bar/expo-router with NO browser condition', () => {
+    // The router adapter is universal — it only re-binds `TabBar`/`TabBarButton`,
+    // whose own entry already resolves per platform. There is no `.web` sibling,
+    // so a browser condition would point at a file bob never emits.
+    const entry = pkg.exports['./tab-bar/expo-router'];
+    expect(entry).toBeDefined();
+    expect(entry?.browser).toBeUndefined();
+  });
+
+  it('the generator lists exactly the right subpaths as web-forked', () => {
+    const gen = readFileSync(join(REPO_ROOT, 'scripts/generate-platform-exports.mjs'), 'utf8');
+    const block = /const WEB_FORKED_SUBPATHS = new Set\(\[([\s\S]*?)\]\);/.exec(gen)?.[1];
+    expect(block).toBeDefined();
+    const listed = [...(block ?? '').matchAll(/^\s*'([^']+)',/gm)].map((m) => m[1]);
+    expect(listed).toContain('./tab-bar');
+    expect(listed).toContain('./progressive-blur');
+    // `assertWebSourceExists()` throws for this one — it has no `.web` sibling.
+    expect(listed).not.toContain('./tab-bar/expo-router');
+  });
+});

package/src/__tests__/ToastContent.test.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { ToastContent } from '../toast/ToastContent';
+import type { ToastVariant } from '../toast/types';
+
+const renderContent = (
+  props: Partial<React.ComponentProps<typeof ToastContent>> = {},
+) => {
+  const onDismiss = jest.fn();
+  const utils = render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      <ToastContent
+        id={1}
+        title="Saved"
+        unstyled={false}
+        icons={{}}
+        onDismiss={onDismiss}
+        {...props}
+      />
+    </BloomThemeProvider>,
+  );
+  return { ...utils, onDismiss };
+};
+
+/**
+ * `ReactTestInstance['type']` is `ElementType`, whose string arm is
+ * `keyof JSX.IntrinsicElements` — so comparing it to a React Native host name
+ * ('Pressable', 'Svg', …) is a type error. Normalise to a plain string instead of
+ * asserting the type away.
+ */
+const hostName = (node: { type: unknown }): string =>
+  typeof node.type === 'string' ? node.type : '';
+
+/**
+ * `*ByRole` does not resolve through this repo's `react-native` mock (it renders
+ * primitives as bare host elements), so button assertions go by component type.
+ */
+const pressablesOf = ({ UNSAFE_root }: ReturnType<typeof renderContent>) =>
+  UNSAFE_root.findAll((node) => hostName(node) === 'Pressable');
+
+/** Bloom icons render as `Svg` hosts. */
+const iconsOf = ({ UNSAFE_root }: ReturnType<typeof renderContent>) =>
+  UNSAFE_root.findAll((node) => hostName(node) === 'Svg');
+
+const spinnersOf = ({ UNSAFE_root }: ReturnType<typeof renderContent>) =>
+  UNSAFE_root.findAll((node) => hostName(node) === 'ActivityIndicator');
+
+describe('ToastContent', () => {
+  it('renders the title', () => {
+    const { getByText } = renderContent();
+    expect(getByText('Saved')).toBeTruthy();
+  });
+
+  it('renders a description only when one is given', () => {
+    expect(renderContent().queryByText('Details')).toBeNull();
+    expect(
+      renderContent({ description: 'Details' }).getByText('Details'),
+    ).toBeTruthy();
+  });
+
+  it('renders an action button and calls onClick', () => {
+    const onClick = jest.fn();
+    const { getByText } = renderContent({
+      action: { label: 'Undo', onClick },
+    });
+
+    fireEvent.press(getByText('Undo'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an action supplied as a node instead of a label/onClick pair', () => {
+    const { getByText } = renderContent({
+      action: <Text>Custom action</Text>,
+    });
+    expect(getByText('Custom action')).toBeTruthy();
+  });
+
+  it('dismisses after running the cancel handler', () => {
+    const onClick = jest.fn();
+    const { getByText, onDismiss } = renderContent({
+      cancel: { label: 'Dismiss', onClick },
+    });
+
+    fireEvent.press(getByText('Dismiss'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledWith(1);
+  });
+
+  it('shows no button row when there is neither action nor cancel', () => {
+    expect(pressablesOf(renderContent())).toHaveLength(0);
+  });
+
+  it('renders the close button only when asked, and it dismisses', () => {
+    expect(pressablesOf(renderContent({ dismissible: true }))).toHaveLength(0);
+
+    const rendered = renderContent({ dismissible: true, closeButton: true });
+    const [closeButton] = pressablesOf(rendered);
+    expect(closeButton).toBeDefined();
+    if (closeButton) {
+      fireEvent.press(closeButton);
+    }
+    expect(rendered.onDismiss).toHaveBeenCalledWith(1);
+  });
+
+  it('never renders a close button on a non-dismissible toast', () => {
+    expect(
+      pressablesOf(renderContent({ dismissible: false, closeButton: true })),
+    ).toHaveLength(0);
+  });
+
+  it('prefers a caller-supplied close node over the default button', () => {
+    const { getByText } = renderContent({
+      dismissible: true,
+      closeButton: true,
+      close: <Text>Bye</Text>,
+    });
+    expect(getByText('Bye')).toBeTruthy();
+  });
+
+  it('renders a variant icon, and none for a variant-less toast', () => {
+    // A neutral toast has no leading icon at all.
+    expect(iconsOf(renderContent({ variant: 'success' })).length).toBeGreaterThan(
+      iconsOf(renderContent()).length,
+    );
+  });
+
+  it.each<ToastVariant>(['success', 'error', 'warning', 'info'])(
+    'renders an icon for the %s variant',
+    (variant) => {
+      expect(iconsOf(renderContent({ variant })).length).toBeGreaterThan(0);
+    },
+  );
+
+  it('uses a spinner instead of an icon while a promise is pending', () => {
+    const rendered = renderContent({
+      promiseOptions: {
+        promise: Promise.resolve('done'),
+        loading: 'Saving…',
+        error: 'Failed',
+      },
+    });
+    expect(spinnersOf(rendered)).toHaveLength(1);
+    expect(iconsOf(rendered)).toHaveLength(0);
+  });
+
+  it('lets the outlet override the loading indicator', () => {
+    const { getByText } = renderContent({
+      variant: 'loading',
+      icons: { loading: <Text>spinning</Text> },
+    });
+    expect(getByText('spinning')).toBeTruthy();
+  });
+
+  it('lets the outlet override a variant icon', () => {
+    const { getByText } = renderContent({
+      variant: 'success',
+      icons: { success: <Text>yay</Text> },
+    });
+    expect(getByText('yay')).toBeTruthy();
+  });
+
+  it('prefers a per-toast icon over the variant icon', () => {
+    const { getByText } = renderContent({
+      variant: 'success',
+      icon: <Text>mine</Text>,
+      icons: { success: <Text>yay</Text> },
+    });
+    expect(getByText('mine')).toBeTruthy();
+  });
+
+  it('applies caller style overrides to the title', () => {
+    const { getByText } = renderContent({
+      styles: { title: { fontSize: 99 } },
+    });
+    expect(getByText('Saved').props.style).toEqual(
+      expect.arrayContaining([{ fontSize: 99 }]),
+    );
+  });
+
+  it('drops its own surface and text styling when unstyled', () => {
+    const { getByText } = renderContent({ unstyled: true });
+    // Only the (absent) override slot remains, so nothing carries a colour.
+    expect(getByText('Saved').props.style).toEqual([
+      undefined,
+      undefined,
+      undefined,
+    ]);
+  });
+});

package/src/__tests__/ToastHostWebFork.test.ts

@@ -0,0 +1,155 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Source/contract guards for the toast host split, mirroring
+ * `BottomSheetWebFork.test.ts`.
+ *
+ * The toast engine is ONE universal implementation; its only platform split is
+ * the host. Several of the properties below cannot be reproduced in jest (the
+ * real paint, the portal ancestry, Metro's `.native` resolution), so they are
+ * asserted against the source and the generated packaging instead, and verified
+ * for real in a browser and on a device.
+ */
+
+const SRC = join(__dirname, '..');
+const REPO_ROOT = join(SRC, '..');
+
+const read = (rel: string) => readFileSync(join(SRC, rel), 'utf8');
+
+/**
+ * Source with comments removed. These files deliberately DOCUMENT the patterns
+ * they must not contain (`ToastHost.native.tsx` shows a consumer how to inject
+ * `FullWindowOverlay`; `Positioner.tsx` explains why it holds no `position:
+ * 'fixed'`), so every negative assertion runs against code only.
+ */
+const code = (rel: string) =>
+  read(rel)
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^\s*\/\/.*$/gm, '');
+
+describe('ToastHost platform split', () => {
+  it('web/default host portals into the shared bloom portal root', () => {
+    const host = read('toast/ToastHost.tsx');
+    expect(host).toMatch(/from '\.\.\/portal\/index\.web'/);
+    expect(host).toMatch(/<Portal>/);
+  });
+
+  it('web/default host provides its own GestureHandlerRootView (W8)', () => {
+    const host = read('toast/ToastHost.tsx');
+    // Portaled content sits outside the app-root GHRV, so swipe-to-dismiss
+    // would never receive touches without this.
+    expect(host).toMatch(
+      /import \{ GestureHandlerRootView \} from 'react-native-gesture-handler'/,
+    );
+  });
+
+  it('web/default host anchors to the viewport through the shared style module (W7)', () => {
+    const host = code('toast/ToastHost.tsx');
+    expect(host).toMatch(/position: WEB_POSITION_FIXED/);
+    expect(host).toMatch(/from '\.\.\/styles\/web-view-style'/);
+    // The one-off inline cast this replaces must never come back.
+    expect(host).not.toMatch(/'fixed' as/);
+  });
+
+  it('web/default host layers toasts at Z_INDEX.toast', () => {
+    const host = read('toast/ToastHost.tsx');
+    expect(host).toMatch(/zIndex: Z_INDEX\.toast/);
+  });
+
+  it('native host imports neither react-native-screens nor the portal (D6)', () => {
+    const native = code('toast/ToastHost.native.tsx');
+    expect(native).not.toMatch(/from 'react-native-screens'/);
+    expect(native).not.toMatch(/from '\.\.\/portal/);
+    expect(native).toMatch(/ToasterOverlayWrapper/);
+    // The doc comment still has to tell consumers how to inject it themselves.
+    expect(read('toast/ToastHost.native.tsx')).toMatch(/FullWindowOverlay/);
+  });
+
+  it('the shared style module owns the only fixed-position assertion', () => {
+    const styleModule = read('styles/web-view-style.ts');
+    expect(styleModule).toMatch(
+      /export const WEB_POSITION_FIXED = 'fixed' as ViewStyle\['position'\]/,
+    );
+    // Exactly one cast in the module, and nothing else exported alongside it.
+    // (Counted against code — the doc comment discusses casts in prose.)
+    expect(code('styles/web-view-style.ts').match(/ as /g)).toHaveLength(1);
+    expect(styleModule.match(/^export /gm)).toHaveLength(1);
+  });
+
+  it('no engine file other than the host reaches for a platform overlay', () => {
+    for (const file of [
+      'toast/Toaster.tsx',
+      'toast/Positioner.tsx',
+      'toast/ToastRow.tsx',
+    ]) {
+      const source = code(file);
+      expect(source).not.toMatch(/from 'react-native-screens'/);
+      // Doc comments explain why `fixed` lives in the host; assert no file here
+      // actually POSITIONS anything fixed.
+      expect(source).not.toMatch(/position:\s*'fixed'/);
+      expect(source).not.toMatch(/webPosition\(/);
+    }
+  });
+
+  it('never returns an animation from a mapper (reanimated web failure mode A)', () => {
+    // `useDerivedValue(() => withTiming(...))` and a `withTiming` returned from
+    // inside `useAnimatedStyle` do not tick on web: the value jumps to a static
+    // frame. Every animation must be ASSIGNED from JS instead — the row's shared
+    // values come from `useAnimatedTarget`, and its mappers only read them.
+    for (const file of [
+      'toast/ToastRow.tsx',
+      'toast/use-toast-position.ts',
+      'toast/ToastSwipeHandler.tsx',
+    ]) {
+      const source = code(file);
+      expect(source).not.toMatch(/useDerivedValue/);
+      expect(source).not.toMatch(/return withTiming/);
+    }
+
+    const driver = code('toast/use-animated-target.ts');
+    expect(driver).toMatch(/value\.value = withTiming\(/);
+    expect(driver).not.toMatch(/useDerivedValue/);
+  });
+
+  it('Positioner passes pointerEvents through style, not as a prop', () => {
+    const positioner = code('toast/Positioner.tsx');
+    expect(positioner).toMatch(/pointerEvents:/);
+    expect(positioner).not.toMatch(/pointerEvents=\{/);
+  });
+
+  it('package.json exports ./toast WITHOUT a browser condition', () => {
+    const pkg = JSON.parse(readFileSync(join(REPO_ROOT, 'package.json'), 'utf8')) as {
+      exports: Record<string, { browser?: unknown; import?: { default?: string } }>;
+    };
+    const entry = pkg.exports['./toast'];
+    expect(entry).toBeDefined();
+    // A browser condition would emit lib/module/toast/index.web.js, and any
+    // bundler with `.web.js` in resolve.extensions would resolve `./toast` to it.
+    expect(entry?.browser).toBeUndefined();
+    expect(entry?.import?.default).toBe('./lib/module/toast/index.js');
+  });
+
+  it('the generator no longer lists ./toast as web-forked', () => {
+    const generator = readFileSync(
+      join(REPO_ROOT, 'scripts/generate-platform-exports.mjs'),
+      'utf8',
+    );
+    const forkedBlock = /const WEB_FORKED_SUBPATHS = new Set\(\[([\s\S]*?)\]\)/.exec(
+      generator,
+    );
+    expect(forkedBlock).not.toBeNull();
+    expect(forkedBlock?.[1]).not.toMatch(/^\s*'\.\/toast',/m);
+  });
+
+  it('no sonner import survives in the toast surface or the root barrel', () => {
+    for (const file of [
+      'toast/index.tsx',
+      'toast/Toaster.tsx',
+      'toast/toast-fns.ts',
+      'index.ts',
+    ]) {
+      expect(code(file)).not.toMatch(/from 'sonner(-native)?'/);
+    }
+  });
+});