@streamplace/components 0.0.1 → 0.7.0

package/src/components/mobile-player/webrtc-primitives.tsx

@@ -0,0 +1,33 @@
+// Browser compatibility checks for WebRTC
+const checkWebRTCSupport = () => {
+  if (typeof window === "undefined") {
+    throw new Error("WebRTC is not available in non-browser environments");
+  }
+
+  if (!window.RTCPeerConnection) {
+    throw new Error(
+      "RTCPeerConnection is not supported in this browser. Please use a modern browser that supports WebRTC.",
+    );
+  }
+
+  if (!window.RTCSessionDescription) {
+    throw new Error(
+      "RTCSessionDescription is not supported in this browser. Please use a modern browser that supports WebRTC.",
+    );
+  }
+};
+
+// Check support immediately
+try {
+  checkWebRTCSupport();
+} catch (error) {
+  console.error("WebRTC Compatibility Error:", error.message);
+}
+
+export const RTCPeerConnection = window.RTCPeerConnection;
+export const RTCSessionDescription = window.RTCSessionDescription;
+export const WebRTCMediaStream = window.MediaStream;
+export const mediaDevices = navigator.mediaDevices;
+
+// Export the compatibility checker for use in other components
+export { checkWebRTCSupport };

package/src/components/ui/button.tsx

@@ -0,0 +1,309 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React, { forwardRef, useMemo } from "react";
+import { ActivityIndicator, StyleSheet } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import * as tokens from "../../lib/theme/tokens";
+import { ButtonPrimitive, ButtonPrimitiveProps } from "./primitives/button";
+import { TextPrimitive } from "./primitives/text";
+
+// Button variants using class-variance-authority pattern
+const buttonVariants = cva("", {
+  variants: {
+    variant: {
+      primary: "primary",
+      secondary: "secondary",
+      outline: "outline",
+      ghost: "ghost",
+      destructive: "destructive",
+      success: "success",
+    },
+    size: {
+      sm: "sm",
+      md: "md",
+      lg: "lg",
+      xl: "xl",
+      pill: "pill",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+export interface ButtonProps
+  extends Omit<ButtonPrimitiveProps, "children">,
+    VariantProps<typeof buttonVariants> {
+  children?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  loading?: boolean;
+  loadingText?: string;
+}
+
+export const Button = forwardRef<any, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      children,
+      leftIcon,
+      rightIcon,
+      loading = false,
+      loadingText,
+      disabled,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+
+    // Create dynamic styles based on theme
+    const styles = useMemo(() => createStyles(theme), [theme]);
+
+    // Get variant styles
+    const buttonStyle = useMemo(() => {
+      const variantStyle = styles[`${variant}Button` as keyof typeof styles];
+      const sizeStyle = styles[`${size}Button` as keyof typeof styles];
+      return [variantStyle, sizeStyle];
+    }, [variant, size, styles]);
+
+    // Get inner styles for button content
+    const buttonInnerStyle = useMemo(() => {
+      const sizeInnerStyle =
+        styles[`${size}ButtonInner` as keyof typeof styles];
+      return sizeInnerStyle;
+    }, [size, styles]);
+
+    const textStyle = React.useMemo(() => {
+      const variantTextStyle = styles[`${variant}Text` as keyof typeof styles];
+      const sizeTextStyle = styles[`${size}Text` as keyof typeof styles];
+      return [variantTextStyle, sizeTextStyle];
+    }, [variant, size, styles]);
+
+    const iconSize = React.useMemo(() => {
+      switch (size) {
+        case "sm":
+          return 16;
+        case "lg":
+          return 20;
+        case "xl":
+          return 24;
+        case "md":
+        default:
+          return 18;
+      }
+    }, [size]);
+
+    const spinnerSize = useMemo(() => {
+      switch (size) {
+        case "sm":
+          return "small" as const;
+        case "lg":
+        case "xl":
+          return "large" as const;
+        case "md":
+        default:
+          return "small" as const;
+      }
+    }, [size]);
+
+    const spinnerColor = useMemo(() => {
+      switch (variant) {
+        case "outline":
+        case "ghost":
+          return theme.colors.primary;
+        case "secondary":
+          return theme.colors.secondaryForeground;
+        case "destructive":
+          return theme.colors.destructiveForeground;
+        default:
+          return theme.colors.primaryForeground;
+      }
+    }, [variant, theme.colors]);
+
+    return (
+      <ButtonPrimitive.Root
+        ref={ref}
+        disabled={disabled || loading}
+        style={[buttonStyle, style]}
+        {...props}
+      >
+        <ButtonPrimitive.Content style={buttonInnerStyle}>
+          {loading && !leftIcon ? (
+            <ButtonPrimitive.Icon position="left">
+              <ActivityIndicator size={spinnerSize} color={spinnerColor} />
+            </ButtonPrimitive.Icon>
+          ) : leftIcon ? (
+            <ButtonPrimitive.Icon
+              position="left"
+              style={{ width: iconSize, height: iconSize }}
+            >
+              {leftIcon}
+            </ButtonPrimitive.Icon>
+          ) : null}
+
+          <TextPrimitive.Root style={textStyle}>
+            {loading && loadingText ? loadingText : children}
+          </TextPrimitive.Root>
+
+          {loading && rightIcon ? (
+            <ButtonPrimitive.Icon position="right">
+              <ActivityIndicator size={spinnerSize} color={spinnerColor} />
+            </ButtonPrimitive.Icon>
+          ) : rightIcon ? (
+            <ButtonPrimitive.Icon
+              position="right"
+              style={{ width: iconSize, height: iconSize }}
+            >
+              {rightIcon}
+            </ButtonPrimitive.Icon>
+          ) : null}
+        </ButtonPrimitive.Content>
+      </ButtonPrimitive.Root>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+// Create theme-based styles
+function createStyles(theme: any) {
+  return StyleSheet.create({
+    // Variant styles
+    primaryButton: {
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
+      ...theme.shadows.sm,
+    },
+    primaryText: {
+      color: theme.colors.primaryForeground,
+      fontWeight: "600",
+    },
+
+    secondaryButton: {
+      backgroundColor: theme.colors.secondary,
+      borderWidth: 0,
+    },
+    secondaryText: {
+      color: theme.colors.secondaryForeground,
+      fontWeight: "500",
+    },
+
+    outlineButton: {
+      backgroundColor: "transparent",
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    outlineText: {
+      color: theme.colors.foreground,
+      fontWeight: "500",
+    },
+
+    ghostButton: {
+      backgroundColor: "transparent",
+      borderWidth: 0,
+    },
+    ghostText: {
+      color: theme.colors.foreground,
+      fontWeight: "500",
+    },
+
+    destructiveButton: {
+      backgroundColor: theme.colors.destructive,
+      borderWidth: 0,
+      ...theme.shadows.sm,
+    },
+    destructiveText: {
+      color: theme.colors.destructiveForeground,
+      fontWeight: "600",
+    },
+
+    successButton: {
+      backgroundColor: theme.colors.success,
+      borderWidth: 0,
+      ...theme.shadows.sm,
+    },
+    successText: {
+      color: theme.colors.successForeground,
+      fontWeight: "600",
+    },
+
+    pillButton: {
+      paddingHorizontal: theme.spacing[3],
+      paddingVertical: theme.spacing[2],
+      borderRadius: tokens.borderRadius.full,
+      minHeight: tokens.touchTargets.minimum / 2,
+    },
+
+    pillText: {
+      color: theme.colors.primaryForeground,
+      fontWeight: "400",
+    },
+
+    // Size styles
+    smButton: {
+      paddingHorizontal: theme.spacing[3],
+      paddingVertical: theme.spacing[2],
+      borderRadius: tokens.borderRadius.md,
+      minHeight: tokens.touchTargets.minimum,
+      gap: theme.spacing[1],
+    },
+    smButtonInner: {
+      gap: theme.spacing[1],
+    },
+    smText: {
+      fontSize: 14,
+      lineHeight: 16,
+    },
+
+    mdButton: {
+      paddingHorizontal: theme.spacing[4],
+      paddingVertical: theme.spacing[3],
+      borderRadius: tokens.borderRadius.md,
+      minHeight: tokens.touchTargets.minimum,
+      gap: theme.spacing[2],
+    },
+    mdButtonInner: {
+      gap: theme.spacing[2],
+    },
+    mdText: {
+      fontSize: 16,
+      lineHeight: 18,
+    },
+
+    lgButton: {
+      paddingHorizontal: theme.spacing[6],
+      paddingVertical: theme.spacing[4],
+      borderRadius: tokens.borderRadius.md,
+      minHeight: tokens.touchTargets.comfortable,
+      gap: theme.spacing[3],
+    },
+    lgButtonInner: {
+      gap: theme.spacing[3],
+    },
+    lgText: {
+      fontSize: 18,
+      lineHeight: 20,
+    },
+
+    xlButton: {
+      paddingHorizontal: theme.spacing[8],
+      paddingVertical: theme.spacing[5],
+      borderRadius: tokens.borderRadius.lg,
+      minHeight: tokens.touchTargets.large,
+      gap: theme.spacing[4],
+    },
+    xlButtonInner: {
+      gap: theme.spacing[4],
+    },
+    xlText: {
+      fontSize: 20,
+      lineHeight: 24,
+    },
+  });
+}
+
+// Export button variants for external use
+export { buttonVariants };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,376 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react-native";
+import React, { forwardRef } from "react";
+import { Platform, StyleSheet, Text } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import { createThemedIcon } from "./icons";
+import { ModalPrimitive, ModalPrimitiveProps } from "./primitives/modal";
+
+const ThemedX = createThemedIcon(X);
+
+// Dialog variants using class-variance-authority pattern
+const dialogVariants = cva("", {
+  variants: {
+    variant: {
+      default: "default",
+      sheet: "sheet",
+      fullscreen: "fullscreen",
+    },
+    size: {
+      sm: "sm",
+      md: "md",
+      lg: "lg",
+      xl: "xl",
+      full: "full",
+    },
+    position: {
+      center: "center",
+      top: "top",
+      bottom: "bottom",
+      left: "left",
+      right: "right",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    position: "center",
+  },
+});
+
+export interface DialogProps
+  extends Omit<ModalPrimitiveProps, "children">,
+    VariantProps<typeof dialogVariants> {
+  children?: React.ReactNode;
+  title?: string;
+  description?: string;
+  dismissible?: boolean;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+}
+
+export const Dialog = forwardRef<any, DialogProps>(
+  (
+    {
+      variant = "left",
+      size = "md",
+      position = "center",
+      children,
+      title,
+      description,
+      dismissible = true,
+      showCloseButton = true,
+      onClose,
+      open = false,
+      onOpenChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+
+    // Create dynamic styles based on theme
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+
+    const handleClose = React.useCallback(() => {
+      if (onClose) {
+        onClose();
+      }
+      if (onOpenChange) {
+        onOpenChange(false);
+      }
+    }, [onClose, onOpenChange]);
+
+    const presentationStyle = React.useMemo(() => {
+      if (variant === "sheet" && Platform.OS === "ios") {
+        return "pageSheet" as const;
+      }
+      if (variant === "fullscreen") {
+        return "fullScreen" as const;
+      }
+      return Platform.OS === "ios"
+        ? ("pageSheet" as const)
+        : ("fullScreen" as const);
+    }, [variant]);
+
+    const animationType = React.useMemo(() => {
+      if (variant === "sheet") {
+        return "slide" as const;
+      }
+      return "fade" as const;
+    }, [variant]);
+
+    return (
+      <ModalPrimitive.Root
+        ref={ref}
+        open={open}
+        onOpenChange={onOpenChange}
+        presentationStyle={presentationStyle}
+        animationType={animationType}
+        {...props}
+      >
+        <ModalPrimitive.Overlay
+          dismissible={dismissible}
+          onDismiss={handleClose}
+          style={styles.overlay}
+        >
+          <ModalPrimitive.Content
+            position={position || "left"}
+            size={size || "md"}
+            style={[
+              styles.content,
+              styles[`${variant}Content` as keyof typeof styles],
+              styles[`${size}Content` as keyof typeof styles],
+            ]}
+          >
+            {(title || showCloseButton) && (
+              <ModalPrimitive.Header
+                withBorder={variant !== "sheet"}
+                style={styles.header}
+              >
+                <DialogTitle>{title}</DialogTitle>
+                {showCloseButton && (
+                  <ModalPrimitive.Close
+                    onClose={handleClose}
+                    style={styles.closeButton}
+                  >
+                    <DialogCloseIcon />
+                  </ModalPrimitive.Close>
+                )}
+              </ModalPrimitive.Header>
+            )}
+
+            <ModalPrimitive.Body
+              scrollable={variant !== "fullscreen"}
+              style={styles.body}
+            >
+              {description && (
+                <DialogDescription>{description}</DialogDescription>
+              )}
+              {children}
+            </ModalPrimitive.Body>
+          </ModalPrimitive.Content>
+        </ModalPrimitive.Overlay>
+      </ModalPrimitive.Root>
+    );
+  },
+);
+
+Dialog.displayName = "Dialog";
+
+// Dialog Title component
+export interface DialogTitleProps {
+  children?: React.ReactNode;
+  style?: any;
+}
+
+export const DialogTitle = forwardRef<any, DialogTitleProps>(
+  ({ children, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+
+    if (!children) return null;
+
+    return (
+      <Text ref={ref} style={[styles.title, style]} {...props}>
+        {children}
+      </Text>
+    );
+  },
+);
+
+DialogTitle.displayName = "DialogTitle";
+
+// Dialog Description component
+export interface DialogDescriptionProps {
+  children?: React.ReactNode;
+  style?: any;
+}
+
+export const DialogDescription = forwardRef<any, DialogDescriptionProps>(
+  ({ children, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+
+    if (!children) return null;
+
+    return (
+      <Text ref={ref} style={[styles.description, style]} {...props}>
+        {children}
+      </Text>
+    );
+  },
+);
+
+DialogDescription.displayName = "DialogDescription";
+
+// Dialog Footer component
+export interface DialogFooterProps {
+  children?: React.ReactNode;
+  direction?: "row" | "column";
+  justify?:
+    | "flex-start"
+    | "center"
+    | "flex-end"
+    | "space-between"
+    | "space-around";
+  withBorder?: boolean;
+  style?: any;
+}
+
+export const DialogFooter = forwardRef<any, DialogFooterProps>(
+  (
+    {
+      children,
+      direction = "row",
+      justify = "flex-end",
+      withBorder = true,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+
+    if (!children) return null;
+
+    return (
+      <ModalPrimitive.Footer
+        ref={ref}
+        withBorder={withBorder}
+        direction={direction}
+        justify={justify}
+        style={[styles.footer, style]}
+        {...props}
+      >
+        {children}
+      </ModalPrimitive.Footer>
+    );
+  },
+);
+
+DialogFooter.displayName = "DialogFooter";
+
+// Dialog Close Icon component (Lucide X)
+const DialogCloseIcon = () => {
+  return <ThemedX size="md" variant="muted" />;
+};
+
+// Create theme-aware styles
+function createStyles(theme: any) {
+  return StyleSheet.create({
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+    },
+
+    content: {
+      backgroundColor: theme.colors.card,
+      borderRadius: theme.borderRadius.lg,
+      ...theme.shadows.lg,
+      maxHeight: "90%",
+      maxWidth: "90%",
+    },
+
+    // Variant styles
+    defaultContent: {
+      // Default styles already applied in content
+    },
+
+    sheetContent: {
+      borderTopLeftRadius: theme.borderRadius.xl,
+      borderTopRightRadius: theme.borderRadius.xl,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      marginTop: "auto",
+      marginBottom: 0,
+      maxHeight: "80%",
+      width: "100%",
+      maxWidth: "100%",
+    },
+
+    fullscreenContent: {
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      borderRadius: 0,
+      margin: 0,
+    },
+
+    // Size styles
+    smContent: {
+      minWidth: 300,
+      minHeight: 200,
+    },
+
+    mdContent: {
+      minWidth: 400,
+      minHeight: 300,
+    },
+
+    lgContent: {
+      minWidth: 500,
+      minHeight: 400,
+    },
+
+    xlContent: {
+      minWidth: 600,
+      minHeight: 500,
+    },
+
+    fullContent: {
+      width: "95%",
+      height: "95%",
+      maxWidth: "95%",
+      maxHeight: "95%",
+    },
+
+    header: {
+      paddingHorizontal: theme.spacing[6],
+      paddingVertical: theme.spacing[4],
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+    },
+
+    body: {
+      paddingHorizontal: theme.spacing[6],
+      paddingBottom: theme.spacing[6],
+      flex: 1,
+    },
+
+    footer: {
+      paddingHorizontal: theme.spacing[6],
+      paddingVertical: theme.spacing[4],
+      gap: theme.spacing[2],
+    },
+
+    title: {
+      fontSize: 20,
+      fontWeight: "600",
+      color: theme.colors.text,
+      flex: 1,
+      lineHeight: 24,
+    },
+
+    description: {
+      fontSize: 16,
+      color: theme.colors.textMuted,
+      lineHeight: 22,
+      marginBottom: theme.spacing[4],
+    },
+
+    closeButton: {
+      width: theme.touchTargets.minimum,
+      height: theme.touchTargets.minimum,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.borderRadius.sm,
+      marginLeft: theme.spacing[2],
+    },
+  });
+}
+
+// Export dialog variants for external use
+export { dialogVariants };