@oxyhq/bloom 0.1.14 → 0.1.15

package/src/__tests__/BloomThemeProvider.test.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { useTheme, useThemeColor, useBloomTheme } from '../theme/use-theme';
+import type { AppColorName } from '../theme/color-presets';
+
+function ThemeDisplay() {
+  const theme = useTheme();
+  return (
+    <>
+      <Text testID="mode">{theme.mode}</Text>
+      <Text testID="isDark">{String(theme.isDark)}</Text>
+      <Text testID="isLight">{String(theme.isLight)}</Text>
+      <Text testID="primary">{theme.colors.primary}</Text>
+      <Text testID="background">{theme.colors.background}</Text>
+    </>
+  );
+}
+
+function ColorDisplay({ colorKey }: { colorKey: 'primary' | 'error' | 'background' }) {
+  const color = useThemeColor(colorKey);
+  return <Text testID="color">{color}</Text>;
+}
+
+function BloomThemeDisplay() {
+  const ctx = useBloomTheme();
+  return (
+    <>
+      <Text testID="ctx-mode">{ctx.mode}</Text>
+      <Text testID="ctx-preset">{ctx.colorPreset}</Text>
+    </>
+  );
+}
+
+describe('BloomThemeProvider', () => {
+  it('provides a light theme by default', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider>
+        <ThemeDisplay />
+      </BloomThemeProvider>,
+    );
+    expect(getByTestId('mode').props.children).toBe('light');
+    expect(getByTestId('isDark').props.children).toBe('false');
+    expect(getByTestId('isLight').props.children).toBe('true');
+  });
+
+  it('provides a dark theme when mode is dark', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider mode="dark">
+        <ThemeDisplay />
+      </BloomThemeProvider>,
+    );
+    expect(getByTestId('mode').props.children).toBe('dark');
+    expect(getByTestId('isDark').props.children).toBe('true');
+    expect(getByTestId('isLight').props.children).toBe('false');
+  });
+
+  it('uses teal as default color preset', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider>
+        <BloomThemeDisplay />
+      </BloomThemeProvider>,
+    );
+    expect(getByTestId('ctx-preset').props.children).toBe('teal');
+  });
+
+  it('applies the specified color preset', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider colorPreset="blue">
+        <ThemeDisplay />
+      </BloomThemeProvider>,
+    );
+    // Blue preset hex is #1d9bf0 (case may vary)
+    expect(getByTestId('primary').props.children.toLowerCase()).toBe('#1d9bf0');
+  });
+
+  it('generates different background colors for light and dark modes', () => {
+    const { getByTestId: getLight } = render(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        <ThemeDisplay />
+      </BloomThemeProvider>,
+    );
+    const { getByTestId: getDark } = render(
+      <BloomThemeProvider mode="dark" colorPreset="teal">
+        <ThemeDisplay />
+      </BloomThemeProvider>,
+    );
+
+    const lightBg = getLight('background').props.children;
+    const darkBg = getDark('background').props.children;
+    expect(lightBg).not.toBe(darkBg);
+  });
+
+  it('renders all color presets without crashing', () => {
+    const presets: AppColorName[] = [
+      'teal', 'blue', 'green', 'amber', 'red',
+      'purple', 'pink', 'sky', 'orange', 'mint',
+    ];
+
+    for (const preset of presets) {
+      const { unmount } = render(
+        <BloomThemeProvider colorPreset={preset} mode="light">
+          <ThemeDisplay />
+        </BloomThemeProvider>,
+      );
+      unmount();
+
+      const { unmount: unmountDark } = render(
+        <BloomThemeProvider colorPreset={preset} mode="dark">
+          <ThemeDisplay />
+        </BloomThemeProvider>,
+      );
+      unmountDark();
+    }
+  });
+});
+
+describe('useTheme', () => {
+  it('throws when used outside BloomThemeProvider', () => {
+    // Suppress error boundary logging
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<ThemeDisplay />)).toThrow(
+      'useTheme must be used within a <BloomThemeProvider>',
+    );
+    spy.mockRestore();
+  });
+});
+
+describe('useThemeColor', () => {
+  it('returns the correct color value', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider colorPreset="teal">
+        <ColorDisplay colorKey="primary" />
+      </BloomThemeProvider>,
+    );
+    expect(getByTestId('color').props.children).toBe('#005c67');
+  });
+});
+
+describe('useBloomTheme', () => {
+  it('exposes mode and color preset', () => {
+    const { getByTestId } = render(
+      <BloomThemeProvider mode="dark" colorPreset="purple">
+        <BloomThemeDisplay />
+      </BloomThemeProvider>,
+    );
+    expect(getByTestId('ctx-mode').props.children).toBe('dark');
+    expect(getByTestId('ctx-preset').props.children).toBe('purple');
+  });
+
+  it('throws when used outside BloomThemeProvider', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<BloomThemeDisplay />)).toThrow(
+      'useBloomTheme must be used within a <BloomThemeProvider>',
+    );
+    spy.mockRestore();
+  });
+});

package/src/__tests__/BottomSheet.test.tsx

@@ -0,0 +1,109 @@
+import React, { createRef } from 'react';
+import { Dimensions } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import BottomSheet, { type BottomSheetRef } from '../bottom-sheet';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+function renderWithDarkTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="dark" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('BottomSheet', () => {
+  it('does not render content when not presented', () => {
+    const ref = createRef<BottomSheetRef>();
+    const { queryByText } = renderWithTheme(
+      <BottomSheet ref={ref}>
+        <React.Fragment>Sheet Content</React.Fragment>
+      </BottomSheet>,
+    );
+    // Not rendered until present() is called
+    expect(queryByText('Sheet Content')).toBeNull();
+  });
+
+  it('exposes present/dismiss/close/expand/collapse/scrollTo on ref', () => {
+    const ref = createRef<BottomSheetRef>();
+    renderWithTheme(
+      <BottomSheet ref={ref}>
+        <React.Fragment>Content</React.Fragment>
+      </BottomSheet>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(typeof ref.current!.present).toBe('function');
+    expect(typeof ref.current!.dismiss).toBe('function');
+    expect(typeof ref.current!.close).toBe('function');
+    expect(typeof ref.current!.expand).toBe('function');
+    expect(typeof ref.current!.collapse).toBe('function');
+    expect(typeof ref.current!.scrollTo).toBe('function');
+  });
+
+  describe('rotation bug fix', () => {
+    it('uses Dimensions.addEventListener for screen dimension updates', () => {
+      const addEventSpy = jest.spyOn(Dimensions, 'addEventListener');
+
+      const ref = createRef<BottomSheetRef>();
+      renderWithTheme(
+        <BottomSheet ref={ref}>
+          <React.Fragment>Content</React.Fragment>
+        </BottomSheet>,
+      );
+
+      // The useScreenDimensions hook should have registered a listener
+      expect(addEventSpy).toHaveBeenCalledWith('change', expect.any(Function));
+
+      addEventSpy.mockRestore();
+    });
+
+    it('does not use module-level cached screen dimensions', () => {
+      // This test verifies the fix: the component should NOT reference
+      // a module-level SCREEN_HEIGHT constant. Instead it uses
+      // useScreenDimensions() which subscribes to Dimensions changes.
+
+      // We verify this indirectly by checking that the component renders
+      // successfully even after a simulated dimension change.
+      const ref = createRef<BottomSheetRef>();
+      const { unmount } = renderWithTheme(
+        <BottomSheet ref={ref}>
+          <React.Fragment>Content</React.Fragment>
+        </BottomSheet>,
+      );
+
+      // Unmounting should clean up the Dimensions listener without error
+      unmount();
+    });
+  });
+
+  describe('dark mode fix', () => {
+    it('renders in light mode without errors', () => {
+      const ref = createRef<BottomSheetRef>();
+      const { unmount } = renderWithTheme(
+        <BottomSheet ref={ref}>
+          <React.Fragment>Light content</React.Fragment>
+        </BottomSheet>,
+      );
+      unmount();
+    });
+
+    it('renders in dark mode without errors', () => {
+      const ref = createRef<BottomSheetRef>();
+      const { unmount } = renderWithDarkTheme(
+        <BottomSheet ref={ref}>
+          <React.Fragment>Dark content</React.Fragment>
+        </BottomSheet>,
+      );
+      unmount();
+    });
+  });
+});

package/src/__tests__/Button.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Button, PrimaryButton, SecondaryButton, IconButton, GhostButton, TextButton } from '../button';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Button', () => {
+  it('renders children as text', () => {
+    const { getByText } = renderWithTheme(<Button>Click me</Button>);
+    expect(getByText('Click me')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Button onPress={onPress}>Press</Button>,
+    );
+    fireEvent.press(getByText('Press'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports testID prop', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button testID="my-button">Test</Button>,
+    );
+    expect(getByTestId('my-button')).toBeTruthy();
+  });
+
+  it('has accessibilityRole button set on the Pressable', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button testID="a11y-btn">A11y</Button>,
+    );
+    const btn = getByTestId('a11y-btn');
+    expect(btn.props.accessibilityRole).toBe('button');
+  });
+
+  it('applies accessibilityLabel', () => {
+    const { getByLabelText } = renderWithTheme(
+      <Button accessibilityLabel="Save changes">Save</Button>,
+    );
+    expect(getByLabelText('Save changes')).toBeTruthy();
+  });
+
+  it('sets disabled accessibility state', () => {
+    const { getByTestId } = renderWithTheme(
+      <Button testID="dis-btn" disabled>
+        Disabled
+      </Button>,
+    );
+    const btn = getByTestId('dis-btn');
+    expect(btn.props.accessibilityState).toEqual({ disabled: true });
+  });
+});
+
+describe('Button variants', () => {
+  it('PrimaryButton renders without crashing', () => {
+    const { getByText } = renderWithTheme(
+      <PrimaryButton>Primary</PrimaryButton>,
+    );
+    expect(getByText('Primary')).toBeTruthy();
+  });
+
+  it('SecondaryButton renders without crashing', () => {
+    const { getByText } = renderWithTheme(
+      <SecondaryButton>Secondary</SecondaryButton>,
+    );
+    expect(getByText('Secondary')).toBeTruthy();
+  });
+
+  it('IconButton renders without crashing', () => {
+    const { getByTestId } = renderWithTheme(
+      <IconButton testID="icon-btn" />,
+    );
+    expect(getByTestId('icon-btn')).toBeTruthy();
+  });
+
+  it('GhostButton renders without crashing', () => {
+    const { getByText } = renderWithTheme(
+      <GhostButton>Ghost</GhostButton>,
+    );
+    expect(getByText('Ghost')).toBeTruthy();
+  });
+
+  it('TextButton renders without crashing', () => {
+    const { getByText } = renderWithTheme(
+      <TextButton>Text</TextButton>,
+    );
+    expect(getByText('Text')).toBeTruthy();
+  });
+});

package/src/__tests__/theme.test.ts

@@ -0,0 +1,148 @@
+import {
+  APP_COLOR_PRESETS,
+  APP_COLOR_NAMES,
+  HEX_TO_APP_COLOR,
+  hexToAppColorName,
+} from '../theme/color-presets';
+import type { Theme, ThemeColors, ThemeMode } from '../theme/types';
+
+describe('Theme system', () => {
+  describe('color presets', () => {
+    it('has all named presets defined', () => {
+      for (const name of APP_COLOR_NAMES) {
+        expect(APP_COLOR_PRESETS[name]).toBeDefined();
+        expect(APP_COLOR_PRESETS[name]!.name).toBe(name);
+        expect(APP_COLOR_PRESETS[name]!.hex).toMatch(/^#[0-9a-f]{6}$/i);
+      }
+    });
+
+    it('each preset has both light and dark color variables', () => {
+      const requiredVars = [
+        '--background',
+        '--foreground',
+        '--surface',
+        '--primary',
+        '--border',
+        '--muted',
+        '--muted-foreground',
+        '--destructive',
+        '--input',
+      ];
+
+      for (const name of APP_COLOR_NAMES) {
+        const preset = APP_COLOR_PRESETS[name]!;
+        for (const v of requiredVars) {
+          expect(preset.light[v]).toBeDefined();
+          expect(preset.dark[v]).toBeDefined();
+        }
+      }
+    });
+
+    it('light and dark variants have different values', () => {
+      for (const name of APP_COLOR_NAMES) {
+        const preset = APP_COLOR_PRESETS[name]!;
+        // Background should differ between light and dark
+        expect(preset.light['--background']).not.toBe(preset.dark['--background']);
+      }
+    });
+  });
+
+  describe('hexToAppColorName', () => {
+    it('maps known hex values to correct color names', () => {
+      expect(hexToAppColorName('#005c67')).toBe('teal');
+      expect(hexToAppColorName('#1d9bf0')).toBe('blue');
+      expect(hexToAppColorName('#10b981')).toBe('green');
+      expect(hexToAppColorName('#ef4444')).toBe('red');
+      expect(hexToAppColorName('#c46ede')).toBe('oxy');
+    });
+
+    it('is case-insensitive', () => {
+      expect(hexToAppColorName('#005C67')).toBe('teal');
+      expect(hexToAppColorName('#1D9BF0')).toBe('blue');
+    });
+
+    it('defaults to teal for unknown hex values', () => {
+      expect(hexToAppColorName('#000000')).toBe('teal');
+      expect(hexToAppColorName('#ffffff')).toBe('teal');
+      expect(hexToAppColorName('#123456')).toBe('teal');
+    });
+  });
+
+  describe('HEX_TO_APP_COLOR mapping', () => {
+    it('has a hex entry for every named preset', () => {
+      const mappedNames = new Set(Object.values(HEX_TO_APP_COLOR));
+      for (const name of APP_COLOR_NAMES) {
+        expect(mappedNames.has(name)).toBe(true);
+      }
+    });
+
+    it('hex keys match the preset hex values', () => {
+      for (const [hex, name] of Object.entries(HEX_TO_APP_COLOR)) {
+        const preset = APP_COLOR_PRESETS[name];
+        expect(preset).toBeDefined();
+        expect(preset!.hex.toLowerCase()).toBe(hex.toLowerCase());
+      }
+    });
+  });
+
+  describe('Theme type shape', () => {
+    it('supports light and dark modes with isDark/isLight flags', () => {
+      const lightTheme: Theme = {
+        mode: 'light',
+        isDark: false,
+        isLight: true,
+        colors: createMockColors(),
+      };
+      expect(lightTheme.isDark).toBe(false);
+      expect(lightTheme.isLight).toBe(true);
+
+      const darkTheme: Theme = {
+        mode: 'dark',
+        isDark: true,
+        isLight: false,
+        colors: createMockColors(),
+      };
+      expect(darkTheme.isDark).toBe(true);
+      expect(darkTheme.isLight).toBe(false);
+    });
+
+    it('ThemeMode includes all expected variants', () => {
+      const modes: ThemeMode[] = ['light', 'dark', 'system', 'adaptive'];
+      expect(modes).toHaveLength(4);
+    });
+  });
+});
+
+function createMockColors(): ThemeColors {
+  return {
+    background: '#fff',
+    backgroundSecondary: '#f5f5f5',
+    backgroundTertiary: '#eee',
+    text: '#000',
+    textSecondary: '#666',
+    textTertiary: '#999',
+    border: '#ccc',
+    borderLight: '#ddd',
+    primary: '#005c67',
+    primaryLight: '#e0f7fa',
+    primaryDark: '#003d44',
+    secondary: '#005c67',
+    tint: '#005c67',
+    icon: '#666',
+    iconActive: '#005c67',
+    success: '#10B981',
+    error: '#EF4444',
+    warning: '#F59E0B',
+    info: '#3B82F6',
+    primarySubtle: '#e0f7fa',
+    primarySubtleForeground: '#003d44',
+    negative: '#B91C1C',
+    negativeForeground: '#FFFFFF',
+    negativeSubtle: '#fef2f2',
+    negativeSubtleForeground: '#B91C1C',
+    contrast50: '#f5f5f5',
+    card: '#f5f5f5',
+    shadow: 'rgba(0,0,0,0.1)',
+    overlay: 'rgba(0,0,0,0.5)',
+  };
+}