@oxyhq/bloom 0.5.0 → 0.6.0

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../button';
+import { Dialog } from './Dialog';
+import { useDialogControl } from './context';
+import { alert } from './alert';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+function DeclarativeDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open dialog</Button>
+      <Dialog
+        control={control}
+        title="Sign out?"
+        description="You'll need to enter your password to sign in again."
+        actions={[
+          { label: 'Sign out', color: 'destructive' },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+function CustomChildrenDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Open custom dialog</Button>
+      <Dialog control={control} title="Custom body">
+        <View style={{ gap: 12 }}>
+          <Text>Render any JSX inside the dialog body.</Text>
+          <Button variant="secondary" onPress={() => control.close()}>
+            Done
+          </Button>
+        </View>
+      </Dialog>
+    </>
+  );
+}
+
+function AlertDemo() {
+  return (
+    <Button
+      onPress={() =>
+        alert('Delete project?', 'This action cannot be undone.', [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'Delete', style: 'destructive' },
+        ])
+      }
+    >
+      Trigger alert()
+    </Button>
+  );
+}
+
+function ThreeActionDemo() {
+  const control = useDialogControl();
+  return (
+    <>
+      <Button onPress={() => control.open()}>Three actions</Button>
+      <Dialog
+        control={control}
+        title="Save changes?"
+        description="You have unsaved changes."
+        actions={[
+          { label: 'Save', color: 'default' },
+          { label: 'Discard', color: 'destructive' },
+          { label: 'Cancel', color: 'cancel' },
+        ]}
+      />
+    </>
+  );
+}
+
+export const Basic: Story = {
+  render: () => <DeclarativeDemo />,
+};
+
+export const CustomChildren: Story = {
+  render: () => <CustomChildrenDemo />,
+};
+
+export const AlertHelper: Story = {
+  render: () => <AlertDemo />,
+};
+
+export const ThreeAction: Story = {
+  render: () => <ThreeActionDemo />,
+};
+
+export const Composition: Story = {
+  render: () => (
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      <DeclarativeDemo />
+      <CustomChildrenDemo />
+      <AlertDemo />
+    </View>
+  ),
+};

package/src/error-boundary/ErrorBoundary.tsx

@@ -6,6 +6,8 @@ import type { ErrorBoundaryProps } from './types';
 interface ErrorBoundaryState {
   hasError: boolean;
   error: Error | null;
+  errorInfo: ErrorInfo | null;
+  retryCount: number;
 }
 
 /**
@@ -52,24 +54,45 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   state: ErrorBoundaryState = {
     hasError: false,
     error: null,
+    errorInfo: null,
+    retryCount: 0,
   };
 
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
     return { hasError: true, error };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.setState({ errorInfo });
     this.props.onError?.(error, errorInfo);
   }
 
   private handleRetry = (): void => {
-    this.setState({ hasError: false, error: null });
+    this.setState((prev) => ({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      retryCount: prev.retryCount + 1,
+    }));
   };
 
   render(): ReactNode {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
+    if (this.state.hasError && this.state.error) {
+      const { fallback } = this.props;
+
+      if (typeof fallback === 'function') {
+        // Render-prop variant — invoke with error context.
+        return fallback({
+          error: this.state.error,
+          errorInfo: this.state.errorInfo,
+          retry: this.handleRetry,
+          retryCount: this.state.retryCount,
+        });
+      }
+
+      if (fallback !== undefined) {
+        // Static ReactNode variant (backward-compatible).
+        return fallback;
       }
 
       return (

package/src/error-boundary/index.ts

@@ -1,2 +1,6 @@
 export { ErrorBoundary } from './ErrorBoundary';
-export type { ErrorBoundaryProps } from './types';
+export type {
+  ErrorBoundaryProps,
+  ErrorBoundaryFallback,
+  ErrorBoundaryFallbackContext,
+} from './types';

package/src/error-boundary/types.ts

@@ -1,9 +1,52 @@
 import type { ReactNode, ErrorInfo } from 'react';
 
+/**
+ * Context passed to a render-prop `fallback` when an ErrorBoundary catches an
+ * error. Consumers can use this to render rich fallback UI (stack traces,
+ * report buttons, retry counters, i18n strings, etc).
+ */
+export interface ErrorBoundaryFallbackContext {
+  /** The error thrown by a descendant during render/commit. */
+  error: Error;
+  /**
+   * The React-supplied error info (`componentStack`). May be `null` if
+   * `componentDidCatch` has not run yet for the current crash — in practice it
+   * is populated before the fallback is shown.
+   */
+  errorInfo: ErrorInfo | null;
+  /**
+   * Resets the boundary back to its non-error state and re-renders `children`.
+   * Increments {@link retryCount} as a side effect.
+   */
+  retry: () => void;
+  /**
+   * Number of times {@link retry} has been invoked for the currently-mounted
+   * boundary instance. Starts at 0; increments by 1 on each `retry()` call.
+   * Useful for showing "Try again (n/max)" UIs and giving up after N attempts.
+   */
+  retryCount: number;
+}
+
+/**
+ * The `fallback` may either be a plain ReactNode (rendered as-is, no error
+ * context) or a render function that receives the error context and returns
+ * a ReactNode.
+ */
+export type ErrorBoundaryFallback =
+  | ReactNode
+  | ((context: ErrorBoundaryFallbackContext) => ReactNode);
+
 export interface ErrorBoundaryProps {
   children: ReactNode;
-  /** Custom fallback UI to render on error */
-  fallback?: ReactNode;
+  /**
+   * Custom fallback UI to render on error. Accepts either:
+   *  - a ReactNode (static — same UI on every error), or
+   *  - a render-prop `(ctx) => ReactNode` receiving `{ error, errorInfo,
+   *    retry, retryCount }`.
+   *
+   * Backward-compatible: passing a static node continues to work unchanged.
+   */
+  fallback?: ErrorBoundaryFallback;
   /** Error title (defaults to "Something went wrong") */
   title?: string;
   /** Error message (defaults to "An unexpected error occurred") */

package/src/fonts/FontLoader.tsx

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 // Reach for the web variant explicitly. The default `./apply-font-faces`
-// is a no-op stub that exists so Metro never sees the module-level
-// `.woff2` imports on native (Metro's default `assetExts` does not include
-// `.woff2`). This file (`FontLoader.tsx`) is only picked up by web
-// bundlers — Metro selects `FontLoader.native.tsx` on iOS/Android — so it
-// is safe to take a direct dependency on the web implementation here.
+// is a no-op stub on native — native loads its fonts via
+// `useFonts(FONT_ASSETS)` in `FontLoader.native.tsx` and has no use for
+// CSS `@font-face` injection. This file (`FontLoader.tsx`) is only picked
+// up by web bundlers — Metro selects `FontLoader.native.tsx` on iOS/Android
+// — so it is safe to take a direct dependency on the web implementation
+// here.
 import { applyFontFaces } from './apply-font-faces.web';
 
 export interface FontLoaderProps {

package/src/fonts/apply-font-faces.ts

@@ -2,10 +2,10 @@
 // is selected by bundlers via the package.json conditions. RN consumers
 // never need font-face injection — useFonts handles loading on native.
 //
-// This file MUST have zero `.woff2` imports. Metro parses module-level
-// imports at bundle time and would otherwise fail to resolve the `.woff2`
-// assets (not in Metro's default `assetExts`). See
-// `apply-font-faces.web.ts` for the real implementation.
+// The web variant does NOT pull in any `.woff2` files via asset imports —
+// it imports base64 data URLs from `font-data.web.ts`. This stub stays
+// here so the file split (`*.ts` vs `*.web.ts`) makes the platform
+// intent explicit and so the runtime API surface matches across platforms.
 export function applyFontFaces(): void {
   // intentionally empty
 }

package/src/fonts/apply-font-faces.web.ts

@@ -1,8 +1,9 @@
-/// <reference path="../assets.d.ts" />
-import blomusReg from './assets/BlomusModernus-Regular.woff2';
-import blomusBold from './assets/BlomusModernus-Bold.woff2';
-import interVar from './assets/InterVariable.woff2';
-import geistMono from './assets/GeistMono-Variable.woff2';
+import {
+  blomusModernusRegular,
+  blomusModernusBold,
+  interVariable,
+  geistMonoVariable,
+} from './font-data.web';
 import { fontFamilies } from './tokens';
 
 const STYLE_ID = 'bloom-fonts';
@@ -12,10 +13,17 @@ const STYLE_ID = 'bloom-fonts';
  *
  * Web-only. The native counterpart in `apply-font-faces.ts` is a no-op
  * stub — Metro cannot parse `.woff2` imports, so the file split keeps
- * those imports out of the native bundle entirely. Idempotent: safe to
+ * the font payload out of the native bundle entirely. Idempotent: safe to
  * call multiple times; subsequent calls early-return after the
  * `<style id="bloom-fonts">` tag has been mounted. SSR-safe via the
  * `typeof document === 'undefined'` guard.
+ *
+ * The font URLs come from `./font-data.web`, a generated module that
+ * embeds the woff2 bytes as base64 data URLs. Inlining (rather than
+ * relying on bundler asset loaders for `.woff2`) means consumers do not
+ * have to extend Metro's `assetExts` or add a webpack/Vite asset rule —
+ * the published JS is self-contained. See `scripts/generate-font-data.mjs`
+ * for the rationale and trade-offs.
  */
 export function applyFontFaces(): void {
   if (typeof document === 'undefined') return;
@@ -24,10 +32,10 @@ export function applyFontFaces(): void {
   const style = document.createElement('style');
   style.id = STYLE_ID;
   style.textContent = `
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusReg}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'BlomusModernus'; src: url(${blomusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Inter'; src: url(${interVar}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
-    @font-face { font-family: 'Geist Mono'; src: url(${geistMono}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusRegular}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusModernusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url(${interVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url(${geistMonoVariable}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
     :root {
       --bloom-font-display: ${fontFamilies.display};
       --bloom-font-sans: ${fontFamilies.sans};

package/src/fonts/font-assets.ts

@@ -5,8 +5,8 @@
 // covers all weights at runtime. `@fontsource(-variable)?/*` packages only
 // publish .woff2 for their variable axes — modern react-native font loading
 // requires .ttf, so we use the upstream variable TTFs instead. On web,
-// `apply-font-faces.web.ts` references the .woff2 variants directly and this
-// file is never imported.
+// `apply-font-faces.web.ts` inlines the .woff2 variants as base64 data URLs
+// (see `font-data.web.ts`) and this file is never imported.
 
 export const FONT_ASSETS = {
   BlomusModernus: require('./assets/BlomusModernus-Regular.ttf'),