@streamplace/components 0.0.1 → 0.7.0

package/src/lib/theme/tokens.ts

@@ -0,0 +1,409 @@
+/**
+ * Design tokens for React Native components
+ * Inspired by shadcn/ui but adapted for React Native styling
+ */
+
+export const colors = {
+  // Primary colors
+  primary: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554",
+  },
+
+  // Grayscale
+  gray: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0d0d0d",
+  },
+
+  // Semantic colors
+  destructive: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a",
+  },
+
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16",
+  },
+
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03",
+  },
+
+  // iOS system colors (adaptive)
+  ios: {
+    systemBlue: "#007AFF",
+    systemGreen: "#34C759",
+    systemRed: "#FF3B30",
+    systemOrange: "#FF9500",
+    systemYellow: "#FFCC00",
+    systemPurple: "#AF52DE",
+    systemPink: "#FF2D92",
+    systemTeal: "#5AC8FA",
+    systemIndigo: "#5856D6",
+    systemGray: "#8E8E93",
+    systemGray2: "#AEAEB2",
+    systemGray3: "#C7C7CC",
+    systemGray4: "#D1D1D6",
+    systemGray5: "#E5E5EA",
+    systemGray6: "#F2F2F7",
+  },
+
+  // Android Material colors
+  android: {
+    primary: "#6200EE",
+    primaryVariant: "#3700B3",
+    secondary: "#03DAC6",
+    secondaryVariant: "#018786",
+    background: "#FFFFFF",
+    surface: "#FFFFFF",
+    error: "#B00020",
+    onPrimary: "#FFFFFF",
+    onSecondary: "#000000",
+    onBackground: "#000000",
+    onSurface: "#000000",
+    onError: "#FFFFFF",
+  },
+
+  // Transparent colors
+  transparent: "transparent",
+  black: "#000000",
+  white: "#FFFFFF",
+} as const;
+
+export const spacing = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+  44: 176,
+  48: 192,
+  52: 208,
+  56: 224,
+  60: 240,
+  64: 256,
+  72: 288,
+  80: 320,
+  96: 384,
+  auto: "auto",
+} as const;
+
+export const borderRadius = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  "2xl": 20,
+  "3xl": 24,
+  full: 999,
+} as const;
+
+export const typography = {
+  // iOS system font sizes
+  ios: {
+    largeTitle: {
+      fontSize: 34,
+      lineHeight: 41,
+      fontWeight: "700" as const,
+    },
+    title1: {
+      fontSize: 28,
+      lineHeight: 34,
+      fontWeight: "700" as const,
+    },
+    title2: {
+      fontSize: 22,
+      lineHeight: 28,
+      fontWeight: "700" as const,
+    },
+    title3: {
+      fontSize: 20,
+      lineHeight: 25,
+      fontWeight: "600" as const,
+    },
+    headline: {
+      fontSize: 17,
+      lineHeight: 22,
+      fontWeight: "600" as const,
+    },
+    body: {
+      fontSize: 17,
+      lineHeight: 22,
+      fontWeight: "400" as const,
+    },
+    callout: {
+      fontSize: 16,
+      lineHeight: 21,
+      fontWeight: "400" as const,
+    },
+    subhead: {
+      fontSize: 15,
+      lineHeight: 20,
+      fontWeight: "400" as const,
+    },
+    footnote: {
+      fontSize: 13,
+      lineHeight: 18,
+      fontWeight: "400" as const,
+    },
+    caption1: {
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: "400" as const,
+    },
+    caption2: {
+      fontSize: 11,
+      lineHeight: 13,
+      fontWeight: "400" as const,
+    },
+  },
+
+  // Android Material typography
+  android: {
+    headline1: {
+      fontSize: 96,
+      lineHeight: 112,
+      fontWeight: "300" as const,
+    },
+    headline2: {
+      fontSize: 60,
+      lineHeight: 72,
+      fontWeight: "300" as const,
+    },
+    headline3: {
+      fontSize: 48,
+      lineHeight: 56,
+      fontWeight: "400" as const,
+    },
+    headline4: {
+      fontSize: 34,
+      lineHeight: 42,
+      fontWeight: "400" as const,
+    },
+    headline5: {
+      fontSize: 24,
+      lineHeight: 32,
+      fontWeight: "400" as const,
+    },
+    headline6: {
+      fontSize: 20,
+      lineHeight: 28,
+      fontWeight: "500" as const,
+    },
+    subtitle1: {
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: "400" as const,
+    },
+    subtitle2: {
+      fontSize: 14,
+      lineHeight: 22,
+      fontWeight: "500" as const,
+    },
+    body1: {
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: "400" as const,
+    },
+    body2: {
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: "400" as const,
+    },
+    button: {
+      fontSize: 14,
+      lineHeight: 16,
+      fontWeight: "500" as const,
+    },
+    caption: {
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: "400" as const,
+    },
+    overline: {
+      fontSize: 10,
+      lineHeight: 16,
+      fontWeight: "400" as const,
+    },
+  },
+
+  // Universal typography scale
+  universal: {
+    xs: {
+      fontSize: 12,
+      lineHeight: 16,
+      fontWeight: "400" as const,
+    },
+    sm: {
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: "400" as const,
+    },
+    base: {
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: "400" as const,
+    },
+    lg: {
+      fontSize: 18,
+      lineHeight: 28,
+      fontWeight: "400" as const,
+    },
+    xl: {
+      fontSize: 20,
+      lineHeight: 28,
+      fontWeight: "500" as const,
+    },
+    "2xl": {
+      fontSize: 24,
+      lineHeight: 32,
+      fontWeight: "600" as const,
+    },
+    "3xl": {
+      fontSize: 30,
+      lineHeight: 36,
+      fontWeight: "700" as const,
+    },
+    "4xl": {
+      fontSize: 36,
+      lineHeight: 40,
+      fontWeight: "700" as const,
+    },
+  },
+} as const;
+
+export const shadows = {
+  none: {
+    shadowColor: "transparent",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  sm: {
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  md: {
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  lg: {
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.15,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  xl: {
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.2,
+    shadowRadius: 16,
+    elevation: 16,
+  },
+} as const;
+
+// Touch targets (iOS Human Interface Guidelines)
+export const touchTargets = {
+  minimum: 44, // Minimum touch target size
+  comfortable: 48, // Comfortable touch target size
+  large: 56, // Large touch target size
+} as const;
+
+// Animation durations
+export const animations = {
+  fast: 150,
+  normal: 200,
+  slow: 300,
+  slower: 500,
+} as const;
+
+// Breakpoints for responsive design
+export const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+} as const;
+
+export type Colors = typeof colors;
+export type Spacing = typeof spacing;
+export type BorderRadius = typeof borderRadius;
+export type Typography = typeof typography;
+export type Shadows = typeof shadows;
+export type TouchTargets = typeof touchTargets;
+export type Animations = typeof animations;
+export type Breakpoints = typeof breakpoints;

package/src/lib/utils.ts

@@ -0,0 +1,132 @@
+import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from "react-native";
+
+// React Native style utilities
+type Style = ViewStyle | TextStyle | ImageStyle;
+
+/**
+ * Merges React Native styles similar to how cn() merges CSS classes
+ * Handles arrays, objects, and falsy values
+ */
+export function mergeStyles(
+  ...styles: (Style | Style[] | undefined | null | false)[]
+): Style {
+  const validStyles = styles.filter(Boolean).flat() as Style[];
+  return StyleSheet.flatten(validStyles) || {};
+}
+
+/**
+ * Creates a style merger function that includes base styles
+ * Useful for component variants
+ */
+export function createStyleMerger(baseStyle: Style) {
+  return (...styles: (Style | Style[] | undefined | null | false)[]) => {
+    return mergeStyles(baseStyle, ...styles);
+  };
+}
+
+/**
+ * Conditionally applies styles based on boolean conditions
+ */
+export function conditionalStyle(
+  condition: boolean,
+  trueStyle: Style,
+  falseStyle?: Style,
+): Style | undefined {
+  return condition ? trueStyle : falseStyle;
+}
+
+/**
+ * Creates responsive values based on screen dimensions
+ */
+export function responsiveValue<T>(
+  values: {
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    default: T;
+  },
+  screenWidth: number,
+): T {
+  if (screenWidth >= 1280 && values.xl !== undefined) return values.xl;
+  if (screenWidth >= 1024 && values.lg !== undefined) return values.lg;
+  if (screenWidth >= 768 && values.md !== undefined) return values.md;
+  if (screenWidth >= 640 && values.sm !== undefined) return values.sm;
+  return values.default;
+}
+
+/**
+ * Creates platform-specific styles
+ */
+export function platformStyle(styles: {
+  ios?: Style;
+  android?: Style;
+  web?: Style;
+  default?: Style;
+}): Style {
+  const Platform = require("react-native").Platform;
+
+  if (Platform.OS === "ios" && styles.ios) return styles.ios;
+  if (Platform.OS === "android" && styles.android) return styles.android;
+  if (Platform.OS === "web" && styles.web) return styles.web;
+  return styles.default || {};
+}
+
+/**
+ * Converts hex color to rgba
+ */
+export function hexToRgba(hex: string, alpha: number = 1): string {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return hex;
+
+  const r = parseInt(result[1], 16);
+  const g = parseInt(result[2], 16);
+  const b = parseInt(result[3], 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Creates a debounced function for performance
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout;
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func(...args), delay);
+  };
+}
+
+/**
+ * Creates a throttled function for performance
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number,
+): (...args: Parameters<T>) => void {
+  let lastCall = 0;
+
+  return (...args: Parameters<T>) => {
+    const now = Date.now();
+    if (now - lastCall >= delay) {
+      lastCall = now;
+      func(...args);
+    }
+  };
+}
+
+/**
+ * Type-safe component prop forwarding
+ */
+export function forwardProps<T extends Record<string, any>>(
+  props: T,
+  omit: (keyof T)[],
+): Omit<T, keyof T extends string ? keyof T : never> {
+  const result = { ...props };
+  omit.forEach((key) => delete result[key]);
+  return result;
+}

package/src/livestream-provider/index.tsx

@@ -0,0 +1,48 @@
+import React, { useContext, useRef } from "react";
+import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
+import { useLivestreamWebsocket } from "./websocket";
+
+export function LivestreamProvider({
+  children,
+  src,
+}: {
+  children: React.ReactNode;
+  src: string;
+}) {
+  const context = useContext(LivestreamContext);
+  const store = useRef(makeLivestreamStore()).current;
+  if (context) {
+    // this is ok, there's use cases for having one in another
+    // like having a player component that's independently usable
+    // but can also be embedded within an entire livestream page
+    return <>{children}</>;
+  }
+  (window as any).livestreamStore = store;
+  return (
+    <LivestreamContext.Provider value={{ store: store }}>
+      <LivestreamPoller src={src}>{children}</LivestreamPoller>
+    </LivestreamContext.Provider>
+  );
+}
+
+export function WebsocketWatcher({ src }: { src: string }) {
+  useLivestreamWebsocket(src);
+  return <></>;
+}
+
+export function LivestreamPoller({
+  children,
+  src,
+}: {
+  children: React.ReactNode;
+  src: string;
+}) {
+  // Websocket watcher is a sibling instead of a parent to avoid
+  // re-rendering when the websocket does stuff
+  return (
+    <>
+      <WebsocketWatcher src={src} />
+      {children}
+    </>
+  );
+}

package/src/livestream-provider/websocket.tsx

@@ -0,0 +1,47 @@
+import { useRef } from "react";
+import useWebSocket from "react-use-websocket";
+import { useHandleWebsocketMessages } from "../livestream-store";
+import { useUrl } from "../streamplace-store";
+
+export function useLivestreamWebsocket(src: string) {
+  const url = useUrl();
+  const handleWebSocketMessages = useHandleWebsocketMessages();
+
+  let wsUrl = url.replace(/^http\:/, "ws:");
+  wsUrl = wsUrl.replace(/^https\:/, "wss:");
+
+  const ref = useRef<any[]>([]);
+  const handle = useRef<NodeJS.Timeout | null>(null);
+
+  const { readyState } = useWebSocket(`${wsUrl}/api/websocket/${src}`, {
+    reconnectInterval: 1000,
+    shouldReconnect: () => true,
+
+    onOpen: () => {
+      ref.current = [];
+    },
+
+    onError: (e) => {
+      console.log("onError", e);
+    },
+
+    // spamming the redux store with messages causes a zillion re-renders,
+    // so we batch them up a bit
+    onMessage: (msg) => {
+      try {
+        const data = JSON.parse(msg.data);
+        ref.current.push(data);
+        if (handle.current) {
+          return;
+        }
+        handle.current = setTimeout(() => {
+          handleWebSocketMessages(ref.current);
+          ref.current = [];
+          handle.current = null;
+        }, 250);
+      } catch (e) {
+        console.log("onMessage parse error", e);
+      }
+    },
+  });
+}