@streamplace/components 0.9.0 → 0.9.1

package/src/components/stream-notification/stream-notification.tsx

@@ -0,0 +1,227 @@
+import { X } from "lucide-react-native";
+import { useEffect, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Text, useTheme } from "../../";
+import {
+  StreamNotification,
+  streamNotificationManager,
+} from "./stream-notification-manager";
+
+export function StreamNotificationProvider({
+  children = <></>,
+  position = "top",
+}: {
+  children?: React.ReactNode;
+  position?: "top" | "bottom";
+}) {
+  const [notifications, setNotifications] = useState(
+    streamNotificationManager.getAll(),
+  );
+
+  useEffect(() => {
+    return streamNotificationManager.subscribe(setNotifications);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      {children}
+      {notifications.map((notification, index) => (
+        <NotificationItem
+          key={notification.id}
+          notification={notification}
+          index={index}
+          position={position}
+        />
+      ))}
+    </View>
+  );
+}
+
+function NotificationItem({
+  notification,
+  index,
+  position,
+}: {
+  notification: StreamNotification;
+  index: number;
+  position: "top" | "bottom";
+}) {
+  const { theme } = useTheme();
+  const translateY = useSharedValue(position === "top" ? -100 : 100);
+  const opacity = useSharedValue(0);
+  const [isExiting, setIsExiting] = useState(false);
+
+  const NOTIFICATION_HEIGHT = 60;
+  const NOTIFICATION_GAP = 8;
+  const offset = 16 + index * (NOTIFICATION_HEIGHT + NOTIFICATION_GAP);
+
+  useEffect(() => {
+    translateY.value = withTiming(position === "top" ? offset : -offset, {
+      duration: 300,
+      easing: Easing.out(Easing.cubic),
+    });
+    opacity.value = withTiming(1, {
+      duration: 200,
+    });
+  }, [offset, position]);
+
+  useEffect(() => {
+    if (notification.shouldDismiss && !isExiting) {
+      setIsExiting(true);
+      setTimeout(() => {
+        streamNotificationManager.hide(
+          notification.id,
+          notification.dismissReason || "auto",
+        );
+      }, 200);
+    }
+  }, [
+    notification.shouldDismiss,
+    isExiting,
+    notification.id,
+    notification.dismissReason,
+  ]);
+
+  useEffect(() => {
+    if (isExiting) {
+      translateY.value = withTiming(position === "top" ? -100 : 100, {
+        duration: 200,
+        easing: Easing.in(Easing.cubic),
+      });
+      opacity.value = withTiming(0, {
+        duration: 200,
+      });
+    }
+  }, [isExiting, position]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    opacity: opacity.value,
+  }));
+
+  const variantStyles = {
+    default: {
+      backgroundColor: theme.colors.card,
+      borderColor: theme.colors.border,
+    },
+    info: {
+      backgroundColor: theme.colors.info,
+      borderColor: theme.colors.info,
+    },
+    warning: {
+      backgroundColor: theme.colors.warning,
+      borderColor: theme.colors.warning,
+    },
+  };
+
+  const handleDismiss = (reason: "user" | "auto" = "user") => {
+    console.log("Dismissing notification:", notification.id);
+    setIsExiting(true);
+    setTimeout(() => {
+      console.log("Requesting dismiss for notification:", notification.id);
+      streamNotificationManager.hide(notification.id, reason);
+    }, 200);
+    console.log(streamNotificationManager.getAll());
+  };
+
+  const handleAction = () => {
+    notification.onAction?.();
+    streamNotificationManager.hide(notification.id, "user");
+  };
+
+  const positionStyle = position === "top" ? { top: 0 } : { bottom: 0 };
+
+  return (
+    <Animated.View
+      style={[
+        styles.notification,
+        positionStyle,
+        notification.render
+          ? {}
+          : variantStyles[notification.variant || "default"],
+        { margin: 0, padding: 0 },
+        animatedStyle,
+      ]}
+    >
+      {notification.render ? (
+        notification.render(isExiting, handleDismiss, notification.startTime)
+      ) : (
+        <View style={styles.content}>
+          <Text style={[styles.message, { color: theme.colors.foreground }]}>
+            {notification.message}
+          </Text>
+
+          <View style={styles.actions}>
+            {notification.actionLabel && (
+              <Pressable onPress={handleAction}>
+                <Text
+                  style={[styles.actionButton, { color: theme.colors.primary }]}
+                >
+                  {notification.actionLabel}
+                </Text>
+              </Pressable>
+            )}
+
+            <Pressable
+              onPress={() => handleDismiss("user")}
+              style={styles.closeButton}
+            >
+              <X size={16} color={theme.colors.mutedForeground} />
+            </Pressable>
+          </View>
+        </View>
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    pointerEvents: "box-none",
+  },
+  notification: {
+    position: "absolute",
+    top: 0,
+    left: 16,
+    right: 16,
+    zIndex: 9999,
+    borderRadius: 8,
+    borderWidth: 1,
+    padding: 12,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+  message: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  actionButton: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  closeButton: {
+    padding: 4,
+  },
+});

package/src/components/stream-notification/teleport-notification.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+import { useWindowDimensions, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { Button, Text, useTheme, zero } from "../../";
+
+export function TeleportNotification({
+  targetHandle,
+  countdown,
+  canCancel,
+  startTime,
+  onDismiss,
+}: {
+  targetHandle: string;
+  countdown: number;
+  canCancel: boolean;
+  startTime?: number;
+  onDismiss: (reason?: "user" | "auto") => void;
+}) {
+  const { zero: z } = useTheme();
+  const w = useWindowDimensions().width;
+
+  const [start, setStart] = useState(Date.now());
+  const [now, setNow] = useState(Date.now());
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(Date.now());
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+
+  const timeLeft = Math.max(0, countdown - Math.floor((now - start) / 1000));
+
+  useEffect(() => {
+    if (dismissed) {
+      return;
+    }
+    if (timeLeft <= 0) {
+      setDismissed(true);
+      onDismiss("auto");
+    }
+  }, [dismissed, onDismiss, timeLeft]);
+
+  // if we're past 5 seconds from start, stripes should already be hidden
+  const elapsedTime = startTime ? (Date.now() - startTime) / 1000 : 0;
+  const [showStripes, setShowStripes] = useState(elapsedTime < 5);
+
+  const stripeX = useSharedValue(0);
+  const stripeOpacity = useSharedValue(1);
+  const progressWidth = useSharedValue(100);
+
+  useEffect(() => {
+    // if stripes are already hidden, fade out asap and return
+    if (!showStripes) {
+      stripeOpacity.value = withTiming(0, { duration: 0 });
+      return;
+    }
+    // warning stripes animation
+    stripeX.value = withRepeat(
+      withTiming(30 * 2, {
+        duration: 1000,
+        easing: Easing.linear,
+      }),
+      3,
+      false,
+    );
+
+    // hide stripes after 500ms
+    const stripesTimer = setTimeout(() => {
+      // woosh the stripes off to the right before hiding
+      stripeX.value = withTiming(30 * 80, {
+        duration: 1500,
+        easing: Easing.cubic,
+      });
+      // after animation, set stripes as hidden
+      setTimeout(() => {
+        setShowStripes(false);
+      }, 350);
+    }, 1500);
+
+    return () => clearTimeout(stripesTimer);
+  }, []);
+
+  useEffect(() => {
+    if (showStripes) return;
+
+    // animate progress bar
+    const percentage = (timeLeft / countdown) * 100;
+    progressWidth.value = withTiming(percentage, {
+      duration: 1000,
+      easing: Easing.linear,
+    });
+  }, [timeLeft, countdown, showStripes]);
+
+  const stripesStyle = useAnimatedStyle(() => ({
+    opacity: stripeOpacity.value,
+    transform: [{ translateX: stripeX.value }],
+  }));
+
+  const progressStyle = useAnimatedStyle(() => ({
+    width: `${progressWidth.value}%`,
+  }));
+
+  return (
+    <View style={[{ overflow: "hidden" }, zero.r.lg, zero.bg.neutral[900]]}>
+      <View
+        style={[
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.layout.flex.spaceBetween,
+          zero.px[3],
+          w > 650 ? zero.py[4] : zero.py[2],
+        ]}
+      >
+        <Text size={w > 650 ? "xl" : "base"}>
+          Teleporting to @{targetHandle}
+        </Text>
+        <View
+          style={[
+            zero.layout.flex.row,
+            zero.layout.flex.alignCenter,
+            zero.gap.all[3],
+          ]}
+        >
+          <Text color="muted">{timeLeft}s</Text>
+          {canCancel && (
+            <Button
+              onPress={() => onDismiss("user")}
+              width="min"
+              variant="destructive"
+            >
+              Cancel
+            </Button>
+          )}
+        </View>
+      </View>
+      <View
+        style={{
+          height: 4,
+          width: "100%",
+          borderRadius: 2,
+          overflow: "hidden",
+          backgroundColor: "#0f0f1e",
+        }}
+      >
+        <Animated.View
+          style={[
+            { height: "100%", borderRadius: 2, backgroundColor: "#16f4d0" },
+            progressStyle,
+          ]}
+        />
+      </View>
+      <Animated.View
+        style={[
+          {
+            position: "absolute",
+            flexDirection: "row",
+            height: 180,
+            width: "200%",
+            //clickthrough
+            pointerEvents: "none",
+          },
+          stripesStyle,
+        ]}
+      >
+        {[...Array(80)].map((_, i) => (
+          <View
+            key={i}
+            style={{
+              width: 30,
+              height: "100%",
+              backgroundColor: i % 2 === 0 ? "#FFA500" : "#000000",
+              transform: [{ skewX: "-45deg" }, { translateX: -30 * 8 }],
+            }}
+          />
+        ))}
+      </Animated.View>
+    </View>
+  );
+}

package/src/components/ui/button.tsx

@@ -23,6 +23,7 @@ const buttonVariants = cva("", {
       lg: "lg",
       xl: "xl",
       pill: "pill",
+      icon: "icon",
     },
   },
   defaultVariants: {
@@ -143,6 +144,12 @@ export const Button = forwardRef<any, ButtonProps>(
             inner: { gap: 4 },
             text: zero.typography.universal.xs,
           };
+        case "icon":
+          return {
+            button: [zero.p[2], { borderRadius: zero.borderRadius.md }],
+            inner: { gap: 0 },
+            text: zero.typography.universal.sm,
+          };
         case "md":
         default:
           return {

package/src/components/ui/dropdown.tsx

@@ -1,3 +1,4 @@
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import {
   Check,
@@ -109,32 +110,83 @@ export const DropdownMenuSubTrigger = forwardRef<
 
 export const DropdownMenuSubContent = forwardRef<
   any,
-  DropdownMenuPrimitive.SubContentProps & { children?: ReactNode }
->(({ children, ...props }, ref) => {
-  const { zero: zt } = useTheme();
+  DropdownMenuPrimitive.SubContentProps & {
+    children?: ReactNode;
+    portalHost?: string;
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+  }
+>(
+  (
+    {
+      children,
+      portalHost,
+      sideOffset,
+      alignOffset,
+      avoidCollisions = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const { zero: zt } = useTheme();
 
-  return (
-    <DropdownMenuPrimitive.SubContent
-      ref={ref}
-      style={[
-        a.zIndex[50],
-        a.sizes.minWidth[64],
-        a.sizes.maxWidth[64],
-        a.overflow.hidden,
-        a.radius.all.md,
-        a.borders.width.thin,
-        zt.border.default,
-        mt[1],
-        zt.bg.popover,
-        p[1],
-        a.shadows.md,
-      ]}
-      {...props}
-    >
-      {children}
-    </DropdownMenuPrimitive.SubContent>
-  );
-});
+    const [portalContainer, setPortalContainer] =
+      React.useState<HTMLElement | null>(null);
+
+    React.useEffect(() => {
+      if (Platform.OS === "web" && portalHost) {
+        const element = document.querySelector<HTMLElement>(
+          `[data-portal-host="${portalHost}"]`,
+        );
+        setPortalContainer(element);
+      }
+    }, [portalHost]);
+
+    const styles = [
+      a.sizes.minWidth[64],
+      a.sizes.maxWidth[64],
+      a.overflow.hidden,
+      a.radius.all.md,
+      a.borders.width.thin,
+      zt.border.default,
+      mt[1],
+      zt.bg.popover,
+      p[1],
+      a.shadows.md,
+    ];
+
+    // On web, use Radix directly to support custom portal container
+    if (Platform.OS === "web") {
+      const { forceMount } = props;
+      // Flatten RN style array into a plain CSS object for DOM
+      const flattenedStyles = StyleSheet.flatten(styles);
+      return (
+        <RadixDropdownMenu.Portal
+          {...(portalContainer ? { container: portalContainer } : {})}
+        >
+          <RadixDropdownMenu.SubContent
+            ref={ref}
+            style={flattenedStyles as React.CSSProperties}
+            forceMount={forceMount}
+            sideOffset={sideOffset}
+            alignOffset={alignOffset}
+            avoidCollisions={avoidCollisions}
+          >
+            {children}
+          </RadixDropdownMenu.SubContent>
+        </RadixDropdownMenu.Portal>
+      );
+    }
+
+    // On native, use rn-primitives
+    return (
+      <DropdownMenuPrimitive.SubContent ref={ref} style={styles} {...props}>
+        {children}
+      </DropdownMenuPrimitive.SubContent>
+    );
+  },
+);
 
 export const DropdownMenuContent = forwardRef<
   any,
@@ -147,8 +199,26 @@ export const DropdownMenuContent = forwardRef<
   const { height } = useWindowDimensions();
   const maxHeight = height * 0.9;
 
+  const [portalContainer, setPortalContainer] =
+    React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    if (Platform.OS === "web" && portalHost) {
+      const element = document.querySelector<HTMLElement>(
+        `[data-portal-host="${portalHost}"]`,
+      );
+      setPortalContainer(element);
+      console.log("set portal container to", element);
+    }
+  }, [portalHost]);
+
   return (
-    <DropdownMenuPrimitive.Portal hostName={portalHost}>
+    <DropdownMenuPrimitive.Portal
+      hostName={portalHost}
+      {...(Platform.OS === "web" && portalContainer
+        ? { container: portalContainer }
+        : {})}
+    >
       <DropdownMenuPrimitive.Overlay
         style={[
           Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,

package/src/components/ui/index.ts

@@ -15,6 +15,7 @@ export * from "./info-row";
 export * from "./input";
 export * from "./loader";
 export * from "./menu";
+export * from "./portal";
 export * from "./resizeable";
 export * from "./slider";
 export * from "./text";

package/src/components/ui/portal.tsx

@@ -0,0 +1 @@
+export * from "@rn-primitives/portal";

package/src/components/ui/portal.web.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+function Portal({
+  children,
+  hostName = "INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME",
+}: {
+  children: React.ReactNode;
+  hostName?: string;
+}) {
+  const [hostElement, setHostElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const element = document.querySelector<HTMLElement>(
+      `[data-portal-host="${hostName}"]`,
+    );
+    setHostElement(element);
+  }, [hostName]);
+
+  if (!hostElement) {
+    return null;
+  }
+
+  return createPortal(children, hostElement);
+}
+
+interface PortalHostProps {
+  name?: string;
+}
+
+function PortalHost({
+  name = "INTERNAL_PRIMITIVE_DEFAULT_HOST_NAME",
+}: PortalHostProps) {
+  return <div data-portal-host={name} />;
+}
+
+export { Portal, PortalHost };