@oxyhq/bloom 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -582,20 +582,42 @@
   "license": "MIT",
   "scripts": {
     "generate:exports": "node scripts/generate-platform-exports.mjs",
-    "prebuild": "node scripts/generate-platform-exports.mjs",
+    "generate:font-data": "node scripts/generate-font-data.mjs",
+    "prebuild": "node scripts/generate-platform-exports.mjs && node scripts/generate-font-data.mjs",
     "build": "bob build",
     "test": "jest",
+    "pretest": "node scripts/generate-font-data.mjs",
     "typescript": "tsc --noEmit",
+    "pretypescript": "node scripts/generate-font-data.mjs",
     "clean": "rm -rf lib",
     "prepare": "bob build || true",
-    "release": "rm -rf lib && npm run build && release-it"
+    "release": "rm -rf lib && bun run build && release-it",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "storybook:build": "storybook build -o storybook-static"
+  },
+  "release-it": {
+    "git": {
+      "tagName": "@oxyhq/bloom@${version}",
+      "tagAnnotation": "Release @oxyhq/bloom@${version}",
+      "commitMessage": "chore: release @oxyhq/bloom@${version}"
+    },
+    "github": {
+      "release": true,
+      "releaseName": "@oxyhq/bloom@${version}"
+    },
+    "npm": {
+      "publish": true
+    }
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^10",
+    "@storybook/react-vite": "^10",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^30.0.0",
     "@types/react": "~19.1.0",
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "*",
+    "@vitejs/plugin-react": "^6.0.2",
     "expo-font": "^56.0.5",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
@@ -607,12 +629,15 @@
     "react-native-reanimated": "^4.2.2",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "^15.15.3",
+    "react-native-web": "^0.21.2",
     "react-test-renderer": "^19.2.0",
     "release-it": "^19.0.6",
     "sonner": "^2.0.3",
     "sonner-native": "^0.23.1",
+    "storybook": "^10",
     "ts-jest": "^29.4.6",
-    "typescript": "~5.9.2"
+    "typescript": "~5.9.2",
+    "vite": "^7"
   },
   "peerDependencies": {
     "expo": "*",
@@ -656,6 +681,7 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": "{**/{__tests__,__fixtures__,__mocks__}/**,**/*.stories.{ts,tsx},**/*.{test,spec}.{ts,tsx},**/*.woff2}",
     "targets": [
       [
         "commonjs",
@@ -669,7 +695,12 @@
           "esm": true
         }
       ],
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   },
   "dependencies": {

package/src/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,217 @@
+import React, { type ErrorInfo, type ReactNode } from 'react';
+import { Text } from 'react-native';
+import { act, render, fireEvent } from '@testing-library/react-native';
+
+import { ErrorBoundary } from '../error-boundary';
+import type {
+  ErrorBoundaryFallback,
+  ErrorBoundaryFallbackContext,
+} from '../error-boundary';
+
+/**
+ * Renders normally on the first mount, then throws once we flip the
+ * controlled flag. Used to drive the boundary into / out of its error state.
+ */
+function MaybeThrow({ shouldThrow, message = 'boom' }: { shouldThrow: boolean; message?: string }) {
+  if (shouldThrow) throw new Error(message);
+  return <Text>ok</Text>;
+}
+
+describe('ErrorBoundary', () => {
+  // React intentionally logs errors caught by boundaries — silence the noise
+  // so test output stays useful.
+  let errorSpy: jest.SpyInstance;
+  beforeEach(() => {
+    errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    errorSpy.mockRestore();
+  });
+
+  it('renders children when no error is thrown', () => {
+    const { getByText } = render(
+      <ErrorBoundary>
+        <MaybeThrow shouldThrow={false} />
+      </ErrorBoundary>,
+    );
+    expect(getByText('ok')).toBeTruthy();
+  });
+
+  it('renders the default fallback when a child throws', () => {
+    const { getByText } = render(
+      <ErrorBoundary>
+        <MaybeThrow shouldThrow />
+      </ErrorBoundary>,
+    );
+    expect(getByText('Something went wrong')).toBeTruthy();
+    expect(getByText('An unexpected error occurred')).toBeTruthy();
+    expect(getByText('Try Again')).toBeTruthy();
+  });
+
+  it('renders a static ReactNode fallback (backward-compatible)', () => {
+    const { getByText, queryByText } = render(
+      <ErrorBoundary fallback={<Text>Static fallback</Text>}>
+        <MaybeThrow shouldThrow />
+      </ErrorBoundary>,
+    );
+    expect(getByText('Static fallback')).toBeTruthy();
+    // Default fallback must NOT also appear.
+    expect(queryByText('Something went wrong')).toBeNull();
+  });
+
+  it('renders a render-prop fallback with error context', () => {
+    const { getByText } = render(
+      <ErrorBoundary
+        fallback={({ error, retryCount }) => (
+          <Text>{`err:${error.message} count:${retryCount}`}</Text>
+        )}>
+        <MaybeThrow shouldThrow message="custom-boom" />
+      </ErrorBoundary>,
+    );
+    expect(getByText('err:custom-boom count:0')).toBeTruthy();
+  });
+
+  it('passes errorInfo to the render-prop after componentDidCatch', () => {
+    let captured: ErrorBoundaryFallbackContext | null = null;
+    render(
+      <ErrorBoundary
+        fallback={(ctx) => {
+          captured = ctx;
+          return <Text>captured</Text>;
+        }}>
+        <MaybeThrow shouldThrow />
+      </ErrorBoundary>,
+    );
+    expect(captured).not.toBeNull();
+    const ctx = captured as unknown as ErrorBoundaryFallbackContext;
+    expect(ctx.error.message).toBe('boom');
+    // componentDidCatch populates errorInfo with a componentStack string.
+    expect(ctx.errorInfo).not.toBeNull();
+    expect(typeof ctx.errorInfo?.componentStack).toBe('string');
+  });
+
+  it('invokes onError when a child throws', () => {
+    const onError = jest.fn<void, [Error, ErrorInfo]>();
+    render(
+      <ErrorBoundary onError={onError}>
+        <MaybeThrow shouldThrow message="reported" />
+      </ErrorBoundary>,
+    );
+    expect(onError).toHaveBeenCalledTimes(1);
+    const [err, info] = onError.mock.calls[0]!;
+    expect(err.message).toBe('reported');
+    expect(typeof info.componentStack).toBe('string');
+  });
+
+  it('increments retryCount each time retry() is invoked', () => {
+    /**
+     * The boundary's `retry()` resets `hasError` and re-renders children. To
+     * observe successive `retryCount` values without immediately re-throwing
+     * (which would just snap straight back to the fallback), we capture each
+     * call's count via the render-prop and trigger retry from the fallback.
+     */
+    const seenCounts: number[] = [];
+    let triggerRetry: (() => void) | null = null;
+
+    const fallback: ErrorBoundaryFallback = ({ retry, retryCount }) => {
+      seenCounts.push(retryCount);
+      triggerRetry = retry;
+      return <Text testID="retry-btn">{`count:${retryCount}`}</Text>;
+    };
+
+    function AlwaysThrow(): React.ReactElement {
+      throw new Error('persistent');
+    }
+
+    render(
+      <ErrorBoundary fallback={fallback}>
+        <AlwaysThrow />
+      </ErrorBoundary>,
+    );
+
+    expect(seenCounts[0]).toBe(0);
+    expect(triggerRetry).not.toBeNull();
+
+    // First retry — boundary resets, child throws again, fallback re-renders
+    // with retryCount === 1. Wrap in act() because retry() triggers React
+    // state updates and a synchronous error during the re-render.
+    act(() => {
+      triggerRetry?.();
+    });
+    expect(seenCounts).toContain(1);
+
+    // Second retry → count 2.
+    act(() => {
+      triggerRetry?.();
+    });
+    expect(seenCounts).toContain(2);
+  });
+
+  /**
+   * Type-only compile-time test. These assignments must type-check; they are
+   * never executed. If a future change breaks either variant, ts-jest will
+   * fail the suite at compile time.
+   */
+  it('accepts both ReactNode and render-prop fallback (compile-time)', () => {
+    const _staticFallback: ErrorBoundaryFallback = <Text>static</Text>;
+    const _undefinedFallback: ErrorBoundaryFallback = undefined as ReactNode;
+    const _functionFallback: ErrorBoundaryFallback = ({
+      error,
+      errorInfo,
+      retry,
+      retryCount,
+    }) => (
+      <Text>
+        {error.message}
+        {errorInfo?.componentStack ?? ''}
+        {retryCount}
+        {retry.name}
+      </Text>
+    );
+
+    // Use the values so TS does not flag them as unused.
+    expect(_staticFallback).toBeDefined();
+    expect(_undefinedFallback).toBeUndefined();
+    expect(typeof _functionFallback).toBe('function');
+  });
+
+  it('also accepts assigning fallback directly onto ErrorBoundary props', () => {
+    // Smoke check that the props.fallback union compiles for both variants.
+    const _staticProps = (
+      <ErrorBoundary fallback={<Text>x</Text>}>
+        <Text>y</Text>
+      </ErrorBoundary>
+    );
+    const _renderProps = (
+      <ErrorBoundary fallback={({ retry }) => <Text onPress={retry}>z</Text>}>
+        <Text>y</Text>
+      </ErrorBoundary>
+    );
+    expect(_staticProps).toBeDefined();
+    expect(_renderProps).toBeDefined();
+  });
+
+  it('uses custom default-fallback labels when provided', () => {
+    const { getByText } = render(
+      <ErrorBoundary title="Oops" message="boom message" retryLabel="Retry!">
+        <MaybeThrow shouldThrow />
+      </ErrorBoundary>,
+    );
+    expect(getByText('Oops')).toBeTruthy();
+    expect(getByText('boom message')).toBeTruthy();
+    expect(getByText('Retry!')).toBeTruthy();
+  });
+
+  it('fires the default-fallback retry button without crashing', () => {
+    const { getByText } = render(
+      <ErrorBoundary>
+        <MaybeThrow shouldThrow />
+      </ErrorBoundary>,
+    );
+    // The button is rendered inside a TouchableOpacity; pressing fires the
+    // internal handleRetry which resets state. The child will throw again on
+    // the next render, but the test only asserts the press itself does not
+    // throw synchronously.
+    expect(() => fireEvent.press(getByText('Try Again'))).not.toThrow();
+  });
+});

package/src/__tests__/Skeleton.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import * as Skeleton from '../skeleton';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Skeleton.Box', () => {
+  it('is exported from the Skeleton namespace', () => {
+    expect(typeof Skeleton.Box).toBe('function');
+    expect(Skeleton.Box.displayName).toBe('Skeleton.Box');
+  });
+
+  it('renders without crashing with numeric width/height', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <Skeleton.Box width={100} height={48} />,
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('renders without crashing with percentage width', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <Skeleton.Box width="100%" height={200} />,
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('renders with sharp corners when borderRadius is 0', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <Skeleton.Box width={50} height={50} borderRadius={0} />,
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('renders with a custom large borderRadius', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <Skeleton.Box width={50} height={50} borderRadius={24} />,
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('renders when blend prop is set', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <Skeleton.Box width={50} height={50} blend />,
+    );
+    expect(UNSAFE_root).toBeTruthy();
+  });
+
+  it('still exposes existing primitives (Pill, Circle, Text, Row, Col)', () => {
+    expect(typeof Skeleton.Pill).toBe('function');
+    expect(typeof Skeleton.Circle).toBe('function');
+    expect(typeof Skeleton.Text).toBe('function');
+    expect(typeof Skeleton.Row).toBe('function');
+    expect(typeof Skeleton.Col).toBe('function');
+  });
+});

package/src/avatar/Avatar.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Avatar } from './Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: {
+      control: { type: 'number', min: 16, max: 256, step: 4 },
+    },
+    shape: {
+      control: 'select',
+      options: ['circle', 'squircle'],
+    },
+    verified: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+const SAMPLE_URI =
+  'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop';
+
+export const Basic: Story = {
+  args: { size: 64, name: 'Nate Isern' },
+};
+
+export const FromUri: Story = {
+  args: { size: 64, uri: SAMPLE_URI },
+  name: 'From URI',
+};
+
+export const Initials: Story = {
+  args: { size: 64, name: 'Ada Lovelace' },
+};
+
+export const Squircle: Story = {
+  args: { size: 64, name: 'Ada Lovelace', shape: 'squircle' },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Avatar size={24} name="Ada" />
+      <Avatar size={32} name="Ada" />
+      <Avatar size={40} name="Ada" />
+      <Avatar size={56} name="Ada" />
+      <Avatar size={80} name="Ada" />
+      <Avatar size={120} name="Ada" />
+    </View>
+  ),
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+      <Avatar size={48} name="Ada Lovelace" />
+      <Avatar size={48} name="Grace Hopper" />
+      <Avatar size={48} name="Alan Turing" />
+      <Avatar size={48} name="Linus Torvalds" />
+      <Avatar size={48} name="Margaret Hamilton" />
+    </View>
+  ),
+};

package/src/bottom-sheet/BottomSheet.stories.tsx

@@ -0,0 +1,92 @@
+import React, { useRef } from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { BottomSheet, type BottomSheetRef } from './index';
+
+const meta: Meta<typeof BottomSheet> = {
+  title: 'Components/BottomSheet',
+  component: BottomSheet,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BottomSheet>;
+
+function BasicSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open sheet</Button>
+      <BottomSheet ref={ref}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Bottom sheet</Text>
+          <Text>
+            Pan down to close, or tap the backdrop. This is the default sheet
+            (flush, rounded top corners only).
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+function DetachedSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open detached</Button>
+      <BottomSheet ref={ref} detached>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>Detached</Text>
+          <Text>
+            Floating card with margins and rounded corners on all sides.
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+function NonScrollableSheet() {
+  const ref = useRef<BottomSheetRef>(null);
+  return (
+    <>
+      <Button onPress={() => ref.current?.present()}>Open non-scrollable</Button>
+      <BottomSheet ref={ref} scrollable={false}>
+        <View style={{ padding: 24, gap: 12 }}>
+          <Text style={{ fontSize: 20, fontWeight: '700' }}>
+            Non-scrollable
+          </Text>
+          <Text>
+            Use when the body owns its own VirtualizedList (FlatList,
+            SectionList, etc.).
+          </Text>
+        </View>
+      </BottomSheet>
+    </>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <BasicSheet />,
+};
+
+export const Detached: Story = {
+  render: () => <DetachedSheet />,
+};
+
+export const NonScrollable: Story = {
+  render: () => <NonScrollableSheet />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <BasicSheet />
+      <DetachedSheet />
+      <NonScrollableSheet />
+    </View>
+  ),
+};

package/src/button/Button.stories.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    onPress: () => {},
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'inverse', 'icon', 'ghost', 'text'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {
+  args: { children: 'Save' },
+};
+
+export const Primary: Story = {
+  args: { variant: 'primary', children: 'Primary' },
+};
+
+export const Secondary: Story = {
+  args: { variant: 'secondary', children: 'Secondary' },
+};
+
+export const Ghost: Story = {
+  args: { variant: 'ghost', children: 'Ghost' },
+};
+
+export const TextOnly: Story = {
+  args: { variant: 'text', children: 'Text button' },
+  name: 'Text',
+};
+
+export const Inverse: Story = {
+  args: { variant: 'inverse', children: 'Inverse' },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="inverse">Inverse</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="text">Text</Button>
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <Button size="small">Small</Button>
+      <Button size="medium">Medium</Button>
+      <Button size="large">Large</Button>
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: { loading: true, children: 'Submitting' },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, children: 'Disabled' },
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+      <Button variant="primary">Save</Button>
+      <Button variant="secondary">Cancel</Button>
+    </View>
+  ),
+};

package/src/context-menu/ContextMenu.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { useTheme } from '../theme/use-theme';
+import * as ContextMenu from './index';
+
+const meta: Meta = {
+  title: 'Components/ContextMenu',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function TriggerSurface() {
+  const theme = useTheme();
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger label="Long-press for actions">
+        {({ props }) => (
+          <Pressable
+            onPress={() => props.onPress?.()}
+            onLongPress={() => props.onLongPress?.()}
+            accessibilityLabel={props.accessibilityLabel}
+            accessibilityHint={props.accessibilityHint}
+            style={{
+              padding: 24,
+              borderRadius: 12,
+              backgroundColor: theme.colors.backgroundSecondary,
+              borderWidth: 1,
+              borderColor: theme.colors.borderLight,
+              minWidth: 240,
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ color: theme.colors.text }}>
+              Long-press / right-click me
+            </Text>
+          </Pressable>
+        )}
+      </ContextMenu.Trigger>
+      <ContextMenu.Outer>
+        <ContextMenu.Group>
+          <ContextMenu.Item label="Open" onPress={() => {}}>
+            <ContextMenu.ItemText>Open</ContextMenu.ItemText>
+          </ContextMenu.Item>
+          <ContextMenu.Item label="Rename" onPress={() => {}}>
+            <ContextMenu.ItemText>Rename</ContextMenu.ItemText>
+          </ContextMenu.Item>
+          <ContextMenu.Item label="Delete" onPress={() => {}}>
+            <ContextMenu.ItemText>Delete</ContextMenu.ItemText>
+          </ContextMenu.Item>
+        </ContextMenu.Group>
+      </ContextMenu.Outer>
+    </ContextMenu.Root>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <TriggerSurface />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <TriggerSurface />
+      <TriggerSurface />
+    </View>
+  ),
+};