@oxyhq/bloom 0.6.24 → 0.7.1

package/src/__tests__/confirm-store.test.ts

@@ -0,0 +1,58 @@
+import {
+  confirm,
+  getConfirmQueue,
+  resolveConfirm,
+  subscribeConfirms,
+} from '../alert-dialog/confirm-store';
+
+describe('confirm-store', () => {
+  afterEach(() => {
+    // Drain any leftover entries between tests.
+    for (const entry of [...getConfirmQueue()]) {
+      resolveConfirm(entry.id, false);
+    }
+  });
+
+  it('enqueues an entry and delivers it to a subscriber', () => {
+    const seen: number[] = [];
+    const unsub = subscribeConfirms((q) => seen.push(q.length));
+
+    void confirm({ title: 'Delete?' });
+
+    expect(getConfirmQueue()).toHaveLength(1);
+    expect(getConfirmQueue()[0]?.title).toBe('Delete?');
+    // Initial delivery (0) + enqueue (1).
+    expect(seen[seen.length - 1]).toBe(1);
+    unsub();
+  });
+
+  it('resolves the promise with true on confirm', async () => {
+    const promise = confirm({ title: 'Save?' });
+    const id = getConfirmQueue()[0]?.id;
+    expect(id).toBeTruthy();
+    if (id) resolveConfirm(id, true);
+    await expect(promise).resolves.toBe(true);
+    expect(getConfirmQueue()).toHaveLength(0);
+  });
+
+  it('resolves the promise with false on cancel', async () => {
+    const promise = confirm({ title: 'Discard?' });
+    const id = getConfirmQueue()[0]?.id;
+    if (id) resolveConfirm(id, false);
+    await expect(promise).resolves.toBe(false);
+  });
+
+  it('drains queued entries to a late subscriber', () => {
+    void confirm({ title: 'Queued before subscribe' });
+    let delivered: number | null = null;
+    const unsub = subscribeConfirms((q) => {
+      delivered = q.length;
+    });
+    expect(delivered).toBe(1);
+    unsub();
+  });
+
+  it('ignores resolving an unknown id', () => {
+    expect(() => resolveConfirm('does-not-exist', true)).not.toThrow();
+  });
+});

package/src/__tests__/native-root-vars.test.ts

@@ -0,0 +1,125 @@
+type SetCall = ReadonlyArray<readonly [string]>;
+
+/**
+ * Verifies the native/default variant `theme/native-root-vars.ts` publishes the
+ * active preset into react-native-css's GLOBAL `rootVariables` family with the
+ * exact keying and value shape react-native-css itself uses for compiled `:root`
+ * vars, and that the web fork `theme/native-root-vars.web.ts` is an inert no-op.
+ *
+ *  - keys are written WITHOUT the leading `--` (the family is keyed by the bare
+ *    name — confirmed against react-native-css@3.0.7's compiler, which stores
+ *    `:root { --x }` via `slice(2)` and looks up `var(--x)` by the bare name);
+ *  - each value is a single-element value-array `[[value]]` (`VariableValue[]`);
+ *  - the native variant reaches react-native-css via a STATIC ESM import (so
+ *    Metro resolves the `module` build — the SAME family the renderer reads);
+ *  - the web variant never imports react-native-css and writes nothing.
+ *
+ * react-native-css is NOT a Bloom dependency (it arrives transitively via the
+ * host's NativeWind install), so the subpath is mocked virtually here — both for
+ * the runtime `.set` capture AND so ts-jest can compile the static import. The
+ * ambient `src/react-native-css.d.ts` declares the subpath's types for `tsc`.
+ */
+describe('applyNativeRootVars (native variant)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('writes preset vars to rootVariables with the leading -- stripped', () => {
+    const sets: Record<string, SetCall> = {};
+
+    jest.isolateModules(() => {
+      jest.doMock(
+        'react-native-css/native-internal',
+        () => ({
+          rootVariables: (name: string) => ({
+            set: (value: SetCall) => {
+              sets[name] = value;
+            },
+          }),
+        }),
+        { virtual: true },
+      );
+
+      const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      applyNativeRootVars('blue', 'light');
+    });
+
+    // Keys are bare (no `--`), and the raw HSL triple is present unwrapped.
+    expect(sets).toHaveProperty('primary');
+    expect(sets).not.toHaveProperty('--primary');
+    expect(sets.primary).toEqual([['205 87% 53%']]);
+
+    // Resolved Tailwind v4 `--color-*` vars are written too, also bare-keyed.
+    expect(sets).toHaveProperty('color-primary');
+    expect(sets['color-primary']).toEqual([['hsl(205 87% 53%)']]);
+
+    // Every value is a single-element value-array `[[value]]` of strings.
+    for (const value of Object.values(sets)) {
+      expect(Array.isArray(value)).toBe(true);
+      expect(value).toHaveLength(1);
+      expect(value[0]).toHaveLength(1);
+      expect(typeof value[0]?.[0]).toBe('string');
+    }
+  });
+
+  it('reflects the resolved mode (dark preset differs from light)', () => {
+    const collect = (mode: 'light' | 'dark'): Record<string, SetCall> => {
+      const sets: Record<string, SetCall> = {};
+      jest.isolateModules(() => {
+        jest.doMock(
+          'react-native-css/native-internal',
+          () => ({
+            rootVariables: (name: string) => ({
+              set: (value: SetCall) => {
+                sets[name] = value;
+              },
+            }),
+          }),
+          { virtual: true },
+        );
+        const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+          applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+        };
+        applyNativeRootVars('teal', mode);
+      });
+      return sets;
+    };
+
+    expect(collect('light').background).not.toEqual(collect('dark').background);
+  });
+
+  it('guards when rootVariables is not callable (defensive, never throws)', () => {
+    jest.isolateModules(() => {
+      jest.doMock(
+        'react-native-css/native-internal',
+        () => ({ rootVariables: undefined }),
+        { virtual: true },
+      );
+      const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      expect(() => applyNativeRootVars('blue', 'light')).not.toThrow();
+    });
+  });
+});
+
+describe('applyNativeRootVars (web fork)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('no-ops on web (vars are written to documentElement there instead)', () => {
+    // The web fork must never touch react-native-css. We assert it neither
+    // imports the subpath nor throws — it is a pure no-op with the same
+    // signature as the native variant.
+    jest.isolateModules(() => {
+      const { applyNativeRootVars } = require('../theme/native-root-vars.web') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      expect(() => applyNativeRootVars('blue', 'light')).not.toThrow();
+      expect(applyNativeRootVars('blue', 'light')).toBeUndefined();
+    });
+  });
+});

package/src/alert-dialog/AlertDialog.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AlertDialog, AlertDialogHost, confirm } from './index';
+import { Button } from '../button';
+import { Text } from '../typography';
+
+const meta: Meta = {
+  title: 'Overlays/AlertDialog',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Declarative: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <View style={{ padding: 40 }}>
+        <Button onPress={() => setOpen(true)}>Delete app</Button>
+        <AlertDialog
+          visible={open}
+          onClose={() => setOpen(false)}
+          title="Delete this app?"
+          description="This permanently removes the application and all of its credentials. This cannot be undone."
+          confirmLabel="Delete"
+          destructive
+          onConfirm={() => {}}
+        />
+      </View>
+    );
+  },
+};
+
+function ImperativeDemo() {
+  const [result, setResult] = useState<string>('—');
+  return (
+    <View style={{ padding: 40, gap: 12 }}>
+      <AlertDialogHost />
+      <Button
+        onPress={async () => {
+          const ok = await confirm({
+            title: 'Sign out everywhere?',
+            description: 'You will need to sign in again on all devices.',
+            confirmLabel: 'Sign out',
+            destructive: true,
+          });
+          setResult(ok ? 'confirmed' : 'cancelled');
+        }}>
+        Sign out everywhere
+      </Button>
+      <Text>{`Result: ${result}`}</Text>
+    </View>
+  );
+}
+
+export const ImperativeConfirm: Story = {
+  render: () => <ImperativeDemo />,
+};

package/src/alert-dialog/AlertDialog.tsx

@@ -0,0 +1,120 @@
+import React, { memo, useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Button } from '../button';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { fontSize, space } from '../styles/tokens';
+import type { CenteredDialogProps } from '../dialog';
+import type { AlertDialogProps } from './types';
+
+type CenteredDialogComponent = React.ComponentType<CenteredDialogProps>;
+
+/**
+ * Build the `AlertDialog` component bound to a platform `CenteredDialog`.
+ *
+ * `CenteredDialog` is platform-forked (native RN `Modal` vs pure-DOM web
+ * overlay), and this repo never relies on implicit `.web` resolution — the
+ * platform entry files (`index.ts` / `index.web.ts`) inject the correct
+ * `CenteredDialog` here. The body below is single-source, no duplication.
+ *
+ * `AlertDialog` is a thin wrapper over `CenteredDialog` that lays out a title,
+ * description and a confirm/cancel action row. Reach for the imperative
+ * `confirm()` helper + `<AlertDialogHost />` to trigger a confirm from an
+ * event handler without owning visible state.
+ */
+export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
+  const AlertDialogComponent = function AlertDialog({
+    visible,
+    onClose,
+    title,
+    description,
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    onConfirm,
+    onCancel,
+    destructive = false,
+    hideCancel = false,
+    dismissible = false,
+    cardStyle,
+    testID,
+  }: AlertDialogProps) {
+    const theme = useTheme();
+
+    const handleCancel = useCallback(() => {
+      onCancel?.();
+      onClose();
+    }, [onCancel, onClose]);
+
+    const handleConfirm = useCallback(() => {
+      onConfirm?.();
+      onClose();
+    }, [onConfirm, onClose]);
+
+    return (
+    <CenteredDialog
+      visible={visible}
+      onClose={dismissible ? onClose : () => {}}
+      dismissible={dismissible}
+      title={title}
+      showClose={false}
+      accessibilityLabel={title}
+      cardStyle={cardStyle}
+      testID={testID}
+      footer={
+        <View style={styles.actions}>
+          {!hideCancel ? (
+            <Button
+              variant="secondary"
+              size="medium"
+              onPress={handleCancel}
+              style={styles.action}
+              accessibilityLabel={cancelLabel}>
+              {cancelLabel}
+            </Button>
+          ) : null}
+          <Button
+            variant="primary"
+            size="medium"
+            onPress={handleConfirm}
+            style={[
+              styles.action,
+              destructive && { backgroundColor: theme.colors.negative },
+            ]}
+            textStyle={destructive ? { color: theme.colors.negativeForeground } : undefined}
+            accessibilityLabel={confirmLabel}>
+            {confirmLabel}
+          </Button>
+        </View>
+      }>
+      {description ? (
+        <Text
+          style={{
+            fontSize: fontSize.md,
+            lineHeight: fontSize.md * 1.4,
+            color: theme.colors.textSecondary,
+          }}>
+          {description}
+        </Text>
+      ) : null}
+    </CenteredDialog>
+    );
+  };
+
+  const AlertDialog = memo(AlertDialogComponent);
+  AlertDialog.displayName = 'AlertDialog';
+  return AlertDialog;
+}
+
+export type AlertDialogType = ReturnType<typeof createAlertDialog>;
+
+const styles = StyleSheet.create({
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: space.sm,
+  },
+  action: {
+    minWidth: 96,
+  },
+});

package/src/alert-dialog/AlertDialogHost.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  resolveConfirm,
+  subscribeConfirms,
+  type ConfirmEntry,
+} from './confirm-store';
+import type { AlertDialogType } from './AlertDialog';
+
+/**
+ * Build the `<AlertDialogHost />` bound to a platform `AlertDialog`. The
+ * platform entry files (`index.ts` / `index.web.ts`) inject the correct one.
+ *
+ * The host mounts the imperative `confirm()` UI. Wrap your app root once
+ * (after `BloomThemeProvider`) and you can call `confirm()` from anywhere —
+ * including before the host mounts (entries are queued and drained on
+ * subscribe). Confirms present one at a time in FIFO order.
+ */
+export function createAlertDialogHost(AlertDialog: AlertDialogType) {
+  function ConfirmHost({ entry }: { entry: ConfirmEntry }) {
+    return (
+      <AlertDialog
+        visible
+        title={entry.title}
+        description={entry.description}
+        confirmLabel={entry.confirmLabel}
+        cancelLabel={entry.cancelLabel}
+        destructive={entry.destructive}
+        hideCancel={entry.hideCancel}
+        dismissible={entry.dismissible}
+        onConfirm={() => resolveConfirm(entry.id, true)}
+        onCancel={() => resolveConfirm(entry.id, false)}
+        onClose={() => resolveConfirm(entry.id, false)}
+      />
+    );
+  }
+
+  function AlertDialogHost() {
+    const [queue, setQueue] = useState<readonly ConfirmEntry[]>([]);
+
+    useEffect(() => subscribeConfirms(setQueue), []);
+
+    const head = queue[0];
+    if (!head) return null;
+
+    return <ConfirmHost key={head.id} entry={head} />;
+  }
+  AlertDialogHost.displayName = 'AlertDialogHost';
+
+  return AlertDialogHost;
+}

package/src/alert-dialog/confirm-store.ts

@@ -0,0 +1,77 @@
+import type { ConfirmOptions } from './types';
+
+/**
+ * Imperative confirm store.
+ *
+ * Mirrors the `dialog/alert-store` pattern: a module-scope queue + a single
+ * subscriber (the `<AlertDialogHost />` mounted in the app tree). `confirm()`
+ * enqueues an entry and resolves a promise with the user's choice. Entries
+ * enqueued before the host mounts drain on subscribe — no lost confirms.
+ */
+
+let idCounter = 0;
+function genId(): string {
+  idCounter += 1;
+  return `bloom-confirm-${idCounter}`;
+}
+
+export interface ConfirmEntry extends ConfirmOptions {
+  id: string;
+  resolve: (confirmed: boolean) => void;
+}
+
+type Listener = (queue: ConfirmEntry[]) => void;
+
+let queue: ConfirmEntry[] = [];
+let listener: Listener | null = null;
+
+function emit(): void {
+  if (listener) listener(queue);
+}
+
+/**
+ * Show a Bloom confirm dialog and resolve with the user's choice.
+ *
+ * ```ts
+ * const ok = await confirm({
+ *   title: 'Delete app?',
+ *   description: 'This cannot be undone.',
+ *   confirmLabel: 'Delete',
+ *   destructive: true,
+ * });
+ * if (ok) await doDelete();
+ * ```
+ */
+export function confirm(options: ConfirmOptions): Promise<boolean> {
+  return new Promise<boolean>((resolve) => {
+    const id = genId();
+    queue = [...queue, { ...options, id, resolve }];
+    emit();
+  });
+}
+
+/** Resolve and remove an entry. Called by the host on confirm/cancel/dismiss. */
+export function resolveConfirm(id: string, confirmed: boolean): void {
+  const entry = queue.find((e) => e.id === id);
+  if (!entry) return;
+  queue = queue.filter((e) => e.id !== id);
+  entry.resolve(confirmed);
+  emit();
+}
+
+/**
+ * Subscribe to queue changes (single-subscriber model; latest wins). Delivers
+ * the current queue synchronously so a freshly mounted host catches up.
+ */
+export function subscribeConfirms(fn: Listener): () => void {
+  listener = fn;
+  fn(queue);
+  return () => {
+    if (listener === fn) listener = null;
+  };
+}
+
+/** Inspect the current queue. Used by tests. */
+export function getConfirmQueue(): readonly ConfirmEntry[] {
+  return queue;
+}

package/src/alert-dialog/index.ts

@@ -0,0 +1,13 @@
+import { CenteredDialog } from '../dialog/index';
+import { createAlertDialog } from './AlertDialog';
+import { createAlertDialogHost } from './AlertDialogHost';
+
+export const AlertDialog = createAlertDialog(CenteredDialog);
+export const AlertDialogHost = createAlertDialogHost(AlertDialog);
+
+export { confirm } from './confirm-store';
+export type {
+  AlertDialogProps,
+  AlertDialogActionStyle,
+  ConfirmOptions,
+} from './types';

package/src/alert-dialog/index.web.ts

@@ -0,0 +1,13 @@
+import { CenteredDialog } from '../dialog/index.web';
+import { createAlertDialog } from './AlertDialog';
+import { createAlertDialogHost } from './AlertDialogHost';
+
+export const AlertDialog = createAlertDialog(CenteredDialog);
+export const AlertDialogHost = createAlertDialogHost(AlertDialog);
+
+export { confirm } from './confirm-store';
+export type {
+  AlertDialogProps,
+  AlertDialogActionStyle,
+  ConfirmOptions,
+} from './types';

package/src/alert-dialog/types.ts

@@ -0,0 +1,46 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type AlertDialogActionStyle = 'default' | 'cancel' | 'destructive';
+
+export interface AlertDialogProps {
+  /** Whether the dialog is mounted + visible (controlled). */
+  visible: boolean;
+  /** Close request — backdrop tap, Escape, cancel, or after confirm. */
+  onClose: () => void;
+  /** Headline. */
+  title: string;
+  /** Supporting copy. */
+  description?: string;
+  /** Confirm button label. Defaults to `'Confirm'`. */
+  confirmLabel?: string;
+  /** Cancel button label. Defaults to `'Cancel'`. */
+  cancelLabel?: string;
+  /** Confirm handler. The dialog closes after it runs (sync). */
+  onConfirm?: () => void;
+  /** Cancel handler. Runs in addition to `onClose`. */
+  onCancel?: () => void;
+  /**
+   * Style the confirm button as destructive (negative color). Defaults to
+   * `false`.
+   */
+  destructive?: boolean;
+  /** Render only the confirm button (no cancel). Defaults to `false`. */
+  hideCancel?: boolean;
+  /**
+   * Tap-outside / Escape dismisses. Defaults to `false` — alert dialogs are
+   * usually blocking until answered.
+   */
+  dismissible?: boolean;
+  cardStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface ConfirmOptions {
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+  hideCancel?: boolean;
+  dismissible?: boolean;
+}

package/src/combobox/Combobox.stories.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Combobox } from './index';
+import type { ComboboxOption } from './types';
+
+const meta: Meta = {
+  title: 'Forms/Combobox',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const FRAMEWORKS: ComboboxOption[] = [
+  { value: 'react', label: 'React' },
+  { value: 'vue', label: 'Vue', description: 'The Progressive Framework' },
+  { value: 'svelte', label: 'Svelte' },
+  { value: 'solid', label: 'Solid' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'qwik', label: 'Qwik', description: 'Resumable' },
+];
+
+export const Basic: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | null>(null);
+    return (
+      <View style={{ width: 320, padding: 40 }}>
+        <Combobox
+          options={FRAMEWORKS}
+          value={value}
+          onValueChange={setValue}
+          placeholder="Pick a framework…"
+          label="Framework"
+        />
+      </View>
+    );
+  },
+};