@streamplace/components 0.7.26 → 0.7.29

package/src/components/ui/toast.tsx

@@ -11,11 +11,81 @@ import {
   ViewStyle,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTheme } from "../../lib/theme/theme";
 
-import { useCallback } from "react";
+import { useTheme } from "../../ui";
 
-type ToastController = {
+type ToastConfig = {
+  title: string;
+  description?: string;
+  duration?: number;
+  actionLabel?: string;
+  onAction?: () => void;
+};
+
+type ToastState = {
+  id: string;
+  open: boolean;
+  title: string;
+  description?: string;
+  duration: number;
+  actionLabel?: string;
+  onAction?: () => void;
+};
+
+class ToastManager {
+  private listeners: Set<(state: ToastState | null) => void> = new Set();
+  private currentToast: ToastState | null = null;
+  private timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  show(config: ToastConfig) {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+
+    const toast: ToastState = {
+      id: Math.random().toString(36).substr(2, 9),
+      open: true,
+      title: config.title,
+      description: config.description,
+      duration: config.duration ?? 3,
+      actionLabel: config.actionLabel,
+      onAction: config.onAction,
+    };
+
+    this.currentToast = toast;
+    this.notifyListeners();
+
+    if (toast.duration > 0) {
+      this.timeoutId = setTimeout(() => {
+        this.hide();
+      }, toast.duration * 1000);
+    }
+  }
+
+  hide() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    this.currentToast = null;
+    this.notifyListeners();
+  }
+
+  subscribe(listener: (state: ToastState | null) => void) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach((listener) => listener(this.currentToast));
+  }
+}
+
+const toastManager = new ToastManager();
+
+export const toast = {
   show: (
     title: string,
     description?: string,
@@ -24,103 +94,51 @@ type ToastController = {
       actionLabel?: string;
       onAction?: () => void;
     },
-  ) => void;
-  hide: () => void;
+  ) => {
+    toastManager.show({
+      title,
+      description,
+      ...options,
+    });
+  },
+  hide: () => toastManager.hide(),
 };
 
-type UseToastReturn = {
-  open: boolean;
-  title: string;
-  description?: string;
-  actionLabel?: string;
-  onAction?: () => void;
-  duration?: number;
-  setOpen: (open: boolean) => void;
-  setTitle: (title: string) => void;
-  setDescription: (description: string) => void;
-  setActionLabel: (label: string) => void;
-  setOnAction: (cb?: () => void) => void;
-  setDuration: (duration: number) => void;
-  toastController: ToastController;
-};
+export function useToast() {
+  const [toastState, setToastState] = useState<ToastState | null>(null);
 
-/**
- * useToast - a hook to manage Toast state and provide a toastController.
- * Returns a ready-to-render ToastComponent.
- */
-export function useToast(
-  initial: {
-    title?: string;
-    description?: string;
-    duration?: number;
-    actionLabel?: string;
-    onAction?: () => void;
-  } = {},
-) {
-  const [open, setOpen] = useState(false);
-  const [title, setTitle] = useState(initial.title ?? "");
-  const [description, setDescription] = useState(initial.description ?? "");
-  const [duration, setDuration] = useState(initial.duration ?? 3);
-  const [actionLabel, setActionLabel] = useState(
-    initial.actionLabel ?? "Action",
-  );
-  const [onAction, setOnAction] = useState<(() => void) | undefined>(
-    initial.onAction,
-  );
+  useEffect(() => {
+    return toastManager.subscribe(setToastState);
+  }, []);
 
-  const show = useCallback(
-    (
-      toastTitle: string,
-      toastDescription?: string,
-      options?: {
-        duration?: number;
-        actionLabel?: string;
-        onAction?: () => void;
-      },
-    ) => {
-      setTitle(toastTitle);
-      setDescription(toastDescription ?? "");
-      setDuration(options?.duration ?? 3);
-      setActionLabel(options?.actionLabel ?? "Action");
-      setOnAction(options?.onAction);
-      setOpen(true);
-    },
-    [],
-  );
+  return {
+    toast: toastState,
+    ...toast,
+  };
+}
+
+export function ToastProvider() {
+  const [toastState, setToastState] = useState<ToastState | null>(null);
 
-  const hide = useCallback(() => {
-    setOpen(false);
+  useEffect(() => {
+    return toastManager.subscribe(setToastState);
   }, []);
 
-  // Ready-to-render Toast component
-  const ToastComponent = (
+  if (!toastState?.open) return null;
+
+  return (
     <Toast
-      open={open}
-      onOpenChange={setOpen}
-      title={title}
-      description={description}
-      actionLabel={actionLabel}
-      onAction={onAction}
-      duration={duration}
+      open={toastState.open}
+      onOpenChange={(open) => {
+        if (!open) toastManager.hide();
+      }}
+      title={toastState.title}
+      description={toastState.description}
+      actionLabel={toastState.actionLabel}
+      onAction={toastState.onAction}
+      duration={toastState.duration}
     />
   );
-
-  return {
-    open,
-    title,
-    description,
-    actionLabel,
-    onAction,
-    duration,
-    setOpen,
-    setTitle,
-    setDescription,
-    setActionLabel,
-    setOnAction,
-    setDuration,
-    toastController: { show, hide },
-    ToastComponent,
-  };
 }
 
 type ToastProps = {

package/src/components/ui/view.tsx

@@ -5,8 +5,8 @@ import {
   ViewProps as RNViewProps,
   ViewStyle,
 } from "react-native";
-import { borderRadius as radius, spacing } from "../../lib/theme/atoms";
 import { useTheme } from "../../lib/theme/theme";
+import * as zero from "../../ui";
 
 // View variants using class-variance-authority pattern
 const viewVariants = cva("", {
@@ -121,72 +121,64 @@ export const View = forwardRef<RNView, ViewProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
+    const { zero: zt } = useTheme();
 
-    // Map variant to styles
+    // Map variant to styles using theme.zero
     const variantStyles: ViewStyle = (() => {
       switch (variant) {
         case "card":
           return {
-            backgroundColor: theme.colors.card,
-            borderRadius: radius.lg,
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 3,
+            ...zt.bg.card,
+            borderRadius: zero.borderRadius.lg,
+            ...zero.shadows.md,
           };
         case "overlay":
-          return {
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-          };
+          return zt.bg.overlay;
         case "surface":
-          return {
-            backgroundColor: theme.colors.background,
-          };
+          return zt.bg.background;
         case "container":
           return {
-            backgroundColor: theme.colors.background,
-            padding: spacing[4],
+            ...zt.bg.background,
+            ...zero.p[8],
           };
         default:
           return {};
       }
     })();
 
-    // Map padding to numeric values
+    // Map padding to zero tokens
     const paddingValue = (() => {
       switch (padding) {
         case "xs":
-          return spacing[1];
+          return zero.p[1];
         case "sm":
-          return spacing[2];
+          return zero.p[2];
         case "md":
-          return spacing[3];
+          return zero.p[4];
         case "lg":
-          return spacing[4];
+          return zero.p[6];
         case "xl":
-          return spacing[5];
+          return zero.p[8];
         default:
-          return undefined;
+          return {};
       }
     })();
 
-    // Map margin to numeric values
+    // Map margin to zero tokens
     const marginValue = (() => {
       switch (margin) {
         case "xs":
-          return spacing[1];
+          return zero.m[1];
         case "sm":
-          return spacing[2];
+          return zero.m[2];
         case "md":
-          return spacing[3];
+          return zero.m[4];
         case "lg":
-          return spacing[4];
+          return zero.m[6];
         case "xl":
-          return spacing[5];
+          return zero.m[8];
         default:
-          return undefined;
+          return {};
       }
     })();
 
@@ -262,8 +254,8 @@ export const View = forwardRef<RNView, ViewProps>(
 
     const computedStyle: ViewStyle = {
       ...variantStyles,
-      ...(paddingValue !== undefined && { padding: paddingValue }),
-      ...(marginValue !== undefined && { margin: marginValue }),
+      ...paddingValue,
+      ...marginValue,
       flexDirection,
       alignItems,
       justifyContent,
@@ -278,13 +270,7 @@ export const View = forwardRef<RNView, ViewProps>(
       ...(borderColor && { borderColor }),
       ...(borderWidth !== undefined && { borderWidth }),
       ...(borderRadius !== undefined && { borderRadius }),
-      ...(shadow && {
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-      }),
+      ...(shadow && zero.shadows.md),
     };
 
     const finalStyle = Array.isArray(style)

package/src/crypto-polyfill.native.tsx

@@ -0,0 +1,24 @@
+// awkward use of require()? you betcha. but import() with Metro causes it to try and
+// resolve the package at compile-time even if not installed, so here we are.
+let rnqc: any | null = null;
+let expoCrypto: any | null = null;
+try {
+  rnqc = require("react-native-quick-crypto");
+} catch (err) {}
+try {
+  expoCrypto = require("expo-crypto");
+} catch (err) {}
+
+if (!rnqc && !expoCrypto) {
+  throw new Error(
+    "Livestreaming requires one of react-native-quick-crypto or expo-crypto",
+  );
+} else if (!rnqc && expoCrypto) {
+  // @atproto/crypto dependencies expect crypto.getRandomValues to be a function
+  if (typeof globalThis.crypto === "undefined") {
+    globalThis.crypto = {} as any;
+  }
+  if (typeof globalThis.crypto.getRandomValues === "undefined") {
+    globalThis.crypto.getRandomValues = expoCrypto.getRandomValues;
+  }
+}

package/src/index.tsx

@@ -1,4 +1,6 @@
 // barrel file :)
+import "./crypto-polyfill";
+
 export * from "./livestream-provider";
 export * from "./livestream-store";
 export * from "./player-store";

package/src/lib/theme/index.ts

@@ -3,7 +3,6 @@ export {
   ThemeProvider,
   createThemeColors,
   createThemeIcons,
-  createThemeStyles,
   createThemedStyles,
   darkTheme,
   lightTheme,
@@ -11,7 +10,6 @@ export {
   useTheme,
   type Theme,
   type ThemeIcons,
-  type ThemeStyles,
 } from "./theme";
 
 // Design tokens