@oxyhq/bloom 0.30.3 → 0.30.5

package/src/__tests__/BottomSheetWebFork.test.ts

@@ -0,0 +1,66 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Regression guard for the BottomSheet RN-Web fix.
+ *
+ * On React-Native-Web, RN's `<Modal>` renders through `ModalPortal`, which
+ * appends its host `<div>` DURING RENDER and removes it in an unmount effect
+ * that nulls its ref. Under React 19 concurrent/StrictMode that host node is
+ * orphaned, so the sheet mounts but its DOM lands in a detached node and never
+ * paints — breaking the responsive `Dialog` bottom placement on narrow web.
+ *
+ * The fix splits the component: a shared, platform-agnostic `BottomSheetBase`
+ * (no `<Modal>`, no keyboard-controller) plus two shells — native `index.tsx`
+ * (RN `<Modal>` + keyboard-controller, unchanged) and web `index.web.tsx`
+ * (bloom's stable DOM `<Portal>`). These source/contract assertions fail loudly
+ * if any leg regresses. (The actual paint is verified in a real browser — jest
+ * cannot reproduce the RN-Web render race.)
+ */
+
+const SRC = join(__dirname, '..');
+const REPO_ROOT = join(SRC, '..');
+
+const read = (rel: string) => readFileSync(join(SRC, rel), 'utf8');
+
+describe('BottomSheet web fork (RN-Web Modal-orphan fix)', () => {
+  it('web shell renders through bloom DOM Portal, never RN <Modal>/keyboard-controller', () => {
+    const web = read('bottom-sheet/index.web.tsx');
+    expect(web).toMatch(/from '\.\.\/portal\/index\.web'/);
+    expect(web).toMatch(/BottomSheetBase/);
+    // The whole point: no RN Modal *import* (orphaned ModalPortal) on web.
+    // Doc comments may still reference Modal to explain why it's avoided.
+    expect(web).not.toMatch(/import \{[^}]*\bModal\b[^}]*\} from 'react-native'/);
+    expect(web).not.toMatch(/require\(\s*['"]react-native-keyboard-controller['"]/);
+  });
+
+  it('native shell keeps RN <Modal> + keyboard-controller', () => {
+    const native = read('bottom-sheet/index.tsx');
+    expect(native).toMatch(/import \{ Modal[^}]*\} from 'react-native'/);
+    expect(native).toContain('react-native-keyboard-controller');
+    expect(native).toMatch(/BottomSheetBase/);
+  });
+
+  it('shared base is a clean default: no <Modal>, no keyboard-controller import', () => {
+    const base = read('bottom-sheet/BottomSheetBase.tsx');
+    // Comments may MENTION Modal; assert there is no Modal *import*.
+    expect(base).not.toMatch(/import \{[^}]*\bModal\b[^}]*\} from 'react-native'/);
+    expect(base).not.toContain("require('react-native-keyboard-controller')");
+    // Base injects the platform Shell rather than hard-coding a container.
+    expect(base).toContain('Shell');
+  });
+
+  it('package.json exports ./bottom-sheet with a browser condition → index.web.js', () => {
+    const pkg = JSON.parse(readFileSync(join(REPO_ROOT, 'package.json'), 'utf8')) as {
+      exports: Record<string, { browser?: { import?: string } }>;
+    };
+    const entry = pkg.exports['./bottom-sheet'];
+    expect(entry).toBeDefined();
+    expect(entry?.browser?.import).toBe('./lib/module/bottom-sheet/index.web.js');
+  });
+
+  it('generator lists ./bottom-sheet as a web-forked subpath', () => {
+    const gen = readFileSync(join(REPO_ROOT, 'scripts/generate-platform-exports.mjs'), 'utf8');
+    expect(gen).toMatch(/WEB_FORKED_SUBPATHS[\s\S]*'\.\/bottom-sheet'/);
+  });
+});

package/src/activity-heatmap/ActivityHeatmap.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { View, Pressable, StyleSheet } from 'react-native';
 
+import { withAlpha } from '../theme/color-utils';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { ActivityHeatmapDay, ActivityHeatmapProps } from './types';
@@ -52,35 +53,6 @@ function levelForCount(count: number, levels: number[]): number {
   return level;
 }
 
-function parseRgb(color: string): { r: number; g: number; b: number } | null {
-  const trimmed = color.trim();
-  if (trimmed.startsWith('#')) {
-    let hex = trimmed.slice(1);
-    if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
-    if (hex.length !== 6) return null;
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-    if ([r, g, b].some((v) => Number.isNaN(v))) return null;
-    return { r, g, b };
-  }
-  const match = /rgba?\(([^)]+)\)/i.exec(trimmed);
-  if (!match || match[1] === undefined) return null;
-  const parts = match[1].split(/[\s,/]+/).filter(Boolean).map(Number);
-  if (parts.length < 3) return null;
-  const [r, g, b] = parts;
-  if (r === undefined || g === undefined || b === undefined) return null;
-  if ([r, g, b].some((v) => Number.isNaN(v))) return null;
-  return { r, g, b };
-}
-
-/** Compose `color` at `alpha`; returns the input unchanged if it can't parse. */
-function withAlpha(color: string, alpha: number): string {
-  const rgb = parseRgb(color);
-  if (!rgb) return color;
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
-}
-
 interface Cell {
   key: string;
   count: number;