@oxyhq/bloom 0.6.12 → 0.6.14

package/src/__tests__/BloomThemeProvider.persistence.test.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render, act, waitFor } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { useBloomTheme } from '../theme/use-theme';
+import type { BloomThemeStorage, PersistedThemeState } from '../theme/persistence';
+
+function Display() {
+  const ctx = useBloomTheme();
+  return (
+    <>
+      <Text testID="mode">{ctx.mode}</Text>
+      <Text testID="preset">{ctx.colorPreset}</Text>
+    </>
+  );
+}
+
+function createSyncStorage(initial?: PersistedThemeState): BloomThemeStorage & {
+  store: Record<string, string>;
+} {
+  const store: Record<string, string> = {};
+  if (initial) {
+    store['bloom-theme'] = JSON.stringify(initial);
+  }
+  return {
+    store,
+    getItem: (key) => (key in store ? store[key]! : null),
+    setItem: (key, value) => {
+      store[key] = value;
+    },
+  };
+}
+
+function createAsyncStorage(initial?: PersistedThemeState): BloomThemeStorage & {
+  store: Record<string, string>;
+} {
+  const store: Record<string, string> = {};
+  if (initial) {
+    store['bloom-theme'] = JSON.stringify(initial);
+  }
+  return {
+    store,
+    getItem: (key) => Promise.resolve(key in store ? store[key]! : null),
+    setItem: (key, value) => {
+      store[key] = value;
+      return Promise.resolve();
+    },
+  };
+}
+
+describe('BloomThemeProvider — persistence', () => {
+  it('hydrates synchronously from sync storage before first paint', () => {
+    const storage = createSyncStorage({ mode: 'dark', colorPreset: 'blue' });
+
+    const { getByTestId } = render(
+      <BloomThemeProvider persistKey="bloom-theme" storage={storage}>
+        <Display />
+      </BloomThemeProvider>,
+    );
+
+    expect(getByTestId('mode').props.children).toBe('dark');
+    expect(getByTestId('preset').props.children).toBe('blue');
+  });
+
+  it('falls back to defaults when storage is empty', () => {
+    const storage = createSyncStorage();
+
+    const { getByTestId } = render(
+      <BloomThemeProvider
+        persistKey="bloom-theme"
+        storage={storage}
+        defaultMode="light"
+        defaultColorPreset="teal"
+      >
+        <Display />
+      </BloomThemeProvider>,
+    );
+
+    expect(getByTestId('mode').props.children).toBe('light');
+    expect(getByTestId('preset').props.children).toBe('teal');
+  });
+
+  it('writes through to storage when setMode is called', async () => {
+    const storage = createSyncStorage();
+
+    function Controls() {
+      const ctx = useBloomTheme();
+      return <Text testID="trigger" onPress={() => ctx.setMode('dark')} />;
+    }
+
+    const { getByTestId } = render(
+      <BloomThemeProvider persistKey="bloom-theme" storage={storage}>
+        <Display />
+        <Controls />
+      </BloomThemeProvider>,
+    );
+
+    await act(async () => {
+      getByTestId('trigger').props.onPress();
+    });
+
+    expect(getByTestId('mode').props.children).toBe('dark');
+    expect(JSON.parse(storage.store['bloom-theme']!)).toMatchObject({ mode: 'dark' });
+  });
+
+  it('writes through to storage when setColorPreset is called', async () => {
+    const storage = createSyncStorage();
+
+    function Controls() {
+      const ctx = useBloomTheme();
+      return <Text testID="trigger" onPress={() => ctx.setColorPreset('purple')} />;
+    }
+
+    const { getByTestId } = render(
+      <BloomThemeProvider persistKey="bloom-theme" storage={storage}>
+        <Display />
+        <Controls />
+      </BloomThemeProvider>,
+    );
+
+    await act(async () => {
+      getByTestId('trigger').props.onPress();
+    });
+
+    expect(getByTestId('preset').props.children).toBe('purple');
+    expect(JSON.parse(storage.store['bloom-theme']!)).toMatchObject({ colorPreset: 'purple' });
+  });
+
+  it('hydrates asynchronously when the storage adapter is async', async () => {
+    const storage = createAsyncStorage({ mode: 'dark', colorPreset: 'pink' });
+
+    const { getByTestId } = render(
+      <BloomThemeProvider
+        persistKey="bloom-theme"
+        storage={storage}
+        awaitHydration={false}
+        defaultMode="light"
+        defaultColorPreset="oxy"
+      >
+        <Display />
+      </BloomThemeProvider>,
+    );
+
+    // Before async hydration completes: defaults
+    expect(getByTestId('mode').props.children).toBe('light');
+    expect(getByTestId('preset').props.children).toBe('oxy');
+
+    // After hydration: persisted values
+    await waitFor(() => {
+      expect(getByTestId('mode').props.children).toBe('dark');
+    });
+    expect(getByTestId('preset').props.children).toBe('pink');
+  });
+
+  it('gates children behind onHydrating when awaitHydration is true', async () => {
+    const storage = createAsyncStorage({ mode: 'dark', colorPreset: 'pink' });
+
+    const { queryByTestId, getByTestId } = render(
+      <BloomThemeProvider
+        persistKey="bloom-theme"
+        storage={storage}
+        awaitHydration
+        onHydrating={<Text testID="loading">loading</Text>}
+      >
+        <Display />
+      </BloomThemeProvider>,
+    );
+
+    expect(queryByTestId('loading')).not.toBeNull();
+    expect(queryByTestId('mode')).toBeNull();
+
+    await waitFor(() => {
+      expect(queryByTestId('mode')).not.toBeNull();
+    });
+    expect(getByTestId('mode').props.children).toBe('dark');
+  });
+
+  it('ignores malformed persisted state', () => {
+    const storage: BloomThemeStorage = {
+      getItem: () => 'not-json',
+      setItem: () => undefined,
+    };
+
+    const { getByTestId } = render(
+      <BloomThemeProvider
+        persistKey="bloom-theme"
+        storage={storage}
+        defaultMode="light"
+        defaultColorPreset="teal"
+      >
+        <Display />
+      </BloomThemeProvider>,
+    );
+
+    expect(getByTestId('mode').props.children).toBe('light');
+    expect(getByTestId('preset').props.children).toBe('teal');
+  });
+
+  it('controlled props win over persisted state', () => {
+    const storage = createSyncStorage({ mode: 'dark', colorPreset: 'blue' });
+
+    const { getByTestId } = render(
+      <BloomThemeProvider
+        persistKey="bloom-theme"
+        storage={storage}
+        mode="light"
+        colorPreset="oxy"
+      >
+        <Display />
+      </BloomThemeProvider>,
+    );
+
+    expect(getByTestId('mode').props.children).toBe('light');
+    expect(getByTestId('preset').props.children).toBe('oxy');
+  });
+});

package/src/__tests__/persistence.test.ts

@@ -0,0 +1,155 @@
+import {
+  readPersistedTheme,
+  readPersistedThemeSync,
+  writePersistedTheme,
+  type BloomThemeStorage,
+} from '../theme/persistence';
+
+function createSyncStorage(initial?: Record<string, string>): BloomThemeStorage & {
+  store: Record<string, string>;
+} {
+  const store: Record<string, string> = { ...initial };
+  return {
+    store,
+    getItem: (key) => (key in store ? store[key]! : null),
+    setItem: (key, value) => {
+      store[key] = value;
+    },
+  };
+}
+
+function createAsyncStorage(initial?: Record<string, string>): BloomThemeStorage & {
+  store: Record<string, string>;
+} {
+  const store: Record<string, string> = { ...initial };
+  return {
+    store,
+    getItem: (key) => Promise.resolve(key in store ? store[key]! : null),
+    setItem: (key, value) => {
+      store[key] = value;
+      return Promise.resolve();
+    },
+  };
+}
+
+describe('readPersistedThemeSync', () => {
+  it('returns kind=none when persistKey is missing', () => {
+    expect(readPersistedThemeSync(undefined, createSyncStorage())).toEqual({ kind: 'none' });
+  });
+
+  it('returns kind=none when storage is missing', () => {
+    expect(readPersistedThemeSync('k', undefined)).toEqual({ kind: 'none' });
+  });
+
+  it('detects async adapters', () => {
+    expect(readPersistedThemeSync('k', createAsyncStorage())).toEqual({ kind: 'async' });
+  });
+
+  it('parses valid sync payloads', () => {
+    const storage = createSyncStorage({ k: JSON.stringify({ mode: 'dark', colorPreset: 'blue' }) });
+    expect(readPersistedThemeSync('k', storage)).toEqual({
+      kind: 'sync',
+      state: { mode: 'dark', colorPreset: 'blue' },
+    });
+  });
+
+  it('returns sync/null on empty storage', () => {
+    expect(readPersistedThemeSync('k', createSyncStorage())).toEqual({ kind: 'sync', state: null });
+  });
+
+  it('rejects malformed JSON', () => {
+    const storage = createSyncStorage({ k: 'not-json' });
+    expect(readPersistedThemeSync('k', storage)).toEqual({ kind: 'sync', state: null });
+  });
+
+  it('rejects unknown color presets', () => {
+    const storage = createSyncStorage({ k: JSON.stringify({ colorPreset: 'not-a-preset' }) });
+    expect(readPersistedThemeSync('k', storage)).toEqual({ kind: 'sync', state: null });
+  });
+
+  it('rejects unknown modes', () => {
+    const storage = createSyncStorage({ k: JSON.stringify({ mode: 'rainbow' }) });
+    expect(readPersistedThemeSync('k', storage)).toEqual({ kind: 'sync', state: null });
+  });
+
+  it('accepts partial payloads (mode only)', () => {
+    const storage = createSyncStorage({ k: JSON.stringify({ mode: 'dark' }) });
+    expect(readPersistedThemeSync('k', storage)).toEqual({
+      kind: 'sync',
+      state: { mode: 'dark', colorPreset: undefined },
+    });
+  });
+
+  it('accepts partial payloads (preset only)', () => {
+    const storage = createSyncStorage({ k: JSON.stringify({ colorPreset: 'purple' }) });
+    expect(readPersistedThemeSync('k', storage)).toEqual({
+      kind: 'sync',
+      state: { mode: undefined, colorPreset: 'purple' },
+    });
+  });
+
+  it('handles thrown getItem as sync/null', () => {
+    const storage: BloomThemeStorage = {
+      getItem: () => {
+        throw new Error('boom');
+      },
+      setItem: () => undefined,
+    };
+    expect(readPersistedThemeSync('k', storage)).toEqual({ kind: 'sync', state: null });
+  });
+});
+
+describe('readPersistedTheme', () => {
+  it('reads async storage', async () => {
+    const storage = createAsyncStorage({ k: JSON.stringify({ mode: 'dark' }) });
+    await expect(readPersistedTheme('k', storage)).resolves.toEqual({
+      mode: 'dark',
+      colorPreset: undefined,
+    });
+  });
+
+  it('returns null when persistence is off', async () => {
+    await expect(readPersistedTheme(undefined, createAsyncStorage())).resolves.toBeNull();
+    await expect(readPersistedTheme('k', undefined)).resolves.toBeNull();
+  });
+
+  it('swallows storage errors', async () => {
+    const storage: BloomThemeStorage = {
+      getItem: () => Promise.reject(new Error('boom')),
+      setItem: () => Promise.resolve(),
+    };
+    await expect(readPersistedTheme('k', storage)).resolves.toBeNull();
+  });
+});
+
+describe('writePersistedTheme', () => {
+  it('serializes only defined keys', async () => {
+    const storage = createSyncStorage();
+    await writePersistedTheme('k', storage, { mode: 'dark' });
+    expect(JSON.parse(storage.store.k!)).toEqual({ mode: 'dark' });
+  });
+
+  it('serializes both keys when both are present', async () => {
+    const storage = createSyncStorage();
+    await writePersistedTheme('k', storage, { mode: 'light', colorPreset: 'oxy' });
+    expect(JSON.parse(storage.store.k!)).toEqual({ mode: 'light', colorPreset: 'oxy' });
+  });
+
+  it('is a no-op when persistence is off', async () => {
+    const storage = createSyncStorage();
+    await writePersistedTheme(undefined, storage, { mode: 'dark' });
+    expect(storage.store.k).toBeUndefined();
+  });
+
+  it('swallows storage errors', async () => {
+    const storage: BloomThemeStorage = {
+      getItem: () => null,
+      setItem: () => {
+        throw new Error('boom');
+      },
+    };
+    await expect(
+      writePersistedTheme('k', storage, { mode: 'dark' }),
+    ).resolves.toBeUndefined();
+  });
+});

package/src/__tests__/theme.test.ts

@@ -4,7 +4,7 @@ import {
   HEX_TO_APP_COLOR,
   hexToAppColorName,
 } from '../theme/color-presets';
-import { buildTheme } from '../theme/BloomThemeProvider';
+import { buildTheme } from '../theme/build-theme';
 import type { Theme, ThemeColors, ThemeMode } from '../theme/types';
 
 describe('Theme system', () => {

package/src/hooks/useControllableState.ts

@@ -0,0 +1,44 @@
+import { useCallback, useRef, useState } from 'react';
+
+export interface UseControllableStateOptions<T> {
+  /** Controlled value. When defined, the hook does not own internal state. */
+  value?: T;
+  /** Initial value used when uncontrolled. */
+  defaultValue: T;
+  /** Notified whenever the value changes, controlled or not. */
+  onChange?: (next: T) => void;
+}
+
+/**
+ * Canonical Radix/shadcn-style controllable state hook. Returns a tuple of the
+ * current value and a setter that:
+ *   - updates internal state when uncontrolled, and
+ *   - always calls `onChange` (so controlled parents stay in sync).
+ *
+ * Switching between controlled and uncontrolled at runtime is supported but
+ * discouraged; the hook keeps the latest `value` for reads either way.
+ */
+export function useControllableState<T>({
+  value,
+  defaultValue,
+  onChange,
+}: UseControllableStateOptions<T>): [T, (next: T) => void] {
+  const [internal, setInternal] = useState<T>(defaultValue);
+  const isControlled = value !== undefined;
+  const current = isControlled ? (value as T) : internal;
+
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (!isControlled) {
+        setInternal(next);
+      }
+      onChangeRef.current?.(next);
+    },
+    [isControlled],
+  );
+
+  return [current, setValue];
+}