@streamplace/components 0.0.1 → 0.7.0

package/src/components/ui/primitives/text.tsx

@@ -0,0 +1,499 @@
+import { createContext, forwardRef, useContext } from "react";
+import type { ColorValue as RNColorValue } from "react-native";
+import {
+  AnimatableNumericValue,
+  ColorValue,
+  OpaqueColorValue,
+  Platform,
+  Text as RNText,
+  TextProps as RNTextProps,
+  TextStyle,
+} from "react-native";
+import { useTheme } from "../../../lib/theme/theme";
+import { typography, type Typography } from "../../../lib/theme/tokens";
+
+// Text inheritance context
+interface TextContextValue {
+  fontSize?: number;
+  fontWeight?: TextStyle["fontWeight"];
+  color?: string | RNColorValue | OpaqueColorValue;
+  fontFamily?: string;
+  lineHeight?: number;
+  textAlign?: TextStyle["textAlign"];
+  letterSpacing?: number;
+  textTransform?: TextStyle["textTransform"];
+  textDecorationLine?: TextStyle["textDecorationLine"];
+  fontStyle?: TextStyle["fontStyle"];
+  opacity?: number | AnimatableNumericValue;
+}
+
+export const TextContext = createContext<Partial<TextContextValue> | null>(
+  null,
+);
+
+export function objectFromObjects(
+  arr: Record<string, any>[],
+): Record<string, any> {
+  return Object.assign({}, ...arr);
+}
+
+// Text primitive props
+export interface TextPrimitiveProps extends Omit<RNTextProps, "style"> {
+  // Typography variants
+  variant?:
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "body1"
+    | "body2"
+    | "caption"
+    | "overline"
+    | "subtitle1"
+    | "subtitle2";
+
+  // Size system
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | number;
+
+  // Weight system
+  weight?:
+    | "thin"
+    | "light"
+    | "normal"
+    | "medium"
+    | "semibold"
+    | "bold"
+    | "extrabold"
+    | "black";
+
+  // Color variants
+  color?:
+    | "default"
+    | "muted"
+    | "primary"
+    | "secondary"
+    | "destructive"
+    | "success"
+    | "warning"
+    | (string & {});
+
+  // Text alignment
+  align?: "left" | "center" | "right" | "justify";
+
+  // Line height
+  leading?: "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" | number;
+
+  // Letter spacing
+  tracking?:
+    | "tighter"
+    | "tight"
+    | "normal"
+    | "wide"
+    | "wider"
+    | "widest"
+    | number;
+
+  // Text transform
+  transform?: "none" | "capitalize" | "uppercase" | "lowercase";
+
+  // Text decoration
+  decoration?: "none" | "underline" | "line-through";
+
+  // Font style
+  italic?: boolean;
+
+  // Opacity
+  opacity?: number;
+
+  // Custom style
+  style?: TextStyle | TextStyle[];
+
+  // Inheritance - whether this component should inherit from parent context
+  inherit?: boolean;
+
+  // Reset inheritance - start fresh context
+  reset?: boolean;
+}
+
+// Size mapping
+const sizeMap = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 30,
+  "4xl": 36,
+} as const;
+
+// Weight mapping
+const weightMap = {
+  thin: "100",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900",
+} as const;
+
+// Line height mapping
+const leadingMap = {
+  none: 1,
+  tight: 1.2,
+  snug: 1.3,
+  normal: 1.5,
+  relaxed: 1.7,
+  loose: 2,
+} as const;
+
+// Letter spacing mapping
+const trackingMap = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6,
+} as const;
+
+// Variant definitions (platform-aware)
+const getVariantStyles = () => {
+  // get platform-specific typography
+  // iOS, Android, Web (Universal)
+  const typographicPlatform = (
+    Platform.OS === "ios"
+      ? "ios"
+      : Platform.OS === "android"
+        ? "android"
+        : "universal"
+  ) as keyof Typography;
+  const platformTypography = typography[typographicPlatform] as Record<
+    string,
+    TextStyle
+  >;
+
+  if (!platformTypography) {
+    throw new Error("Platform typography not defined");
+  }
+
+  // Define mapping based on platform
+  if (typographicPlatform === "ios") {
+    return {
+      h1: platformTypography.largeTitle,
+      h2: platformTypography.title1,
+      h3: platformTypography.title2,
+      h4: platformTypography.title3,
+      h5: platformTypography.headline,
+      h6: platformTypography.headline,
+      subtitle1: platformTypography.subhead,
+      subtitle2: platformTypography.footnote,
+      body1: platformTypography.body,
+      body2: platformTypography.callout,
+      caption: platformTypography.caption1,
+      overline: platformTypography.caption2,
+    };
+  } else if (typographicPlatform === "android") {
+    return {
+      h1: platformTypography.headline1,
+      h2: platformTypography.headline2,
+      h3: platformTypography.headline3,
+      h4: platformTypography.headline4,
+      h5: platformTypography.headline5,
+      h6: platformTypography.headline6,
+      subtitle1: platformTypography.subtitle1,
+      subtitle2: platformTypography.subtitle2,
+      body1: platformTypography.body1,
+      body2: platformTypography.body2,
+      caption: platformTypography.caption,
+      overline: platformTypography.overline,
+    };
+  } else {
+    // universal
+    // Map variants to universal sizes
+    return {
+      h1: platformTypography["4xl"],
+      h2: platformTypography["3xl"],
+      h3: platformTypography["2xl"],
+      h4: platformTypography["xl"],
+      h5: platformTypography["lg"],
+      h6: platformTypography["base"],
+      subtitle1: platformTypography.base,
+      subtitle2: platformTypography.sm,
+      body1: platformTypography.base,
+      body2: platformTypography.sm,
+      caption: platformTypography.xs,
+      overline: platformTypography.xs,
+    };
+  }
+};
+
+// Text root primitive
+export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
+  (
+    {
+      variant,
+      size,
+      weight,
+      color,
+      align,
+      leading,
+      tracking,
+      transform,
+      decoration,
+      italic = false,
+      opacity,
+      style,
+      inherit = true,
+      reset = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+    const parentContext = useContext(TextContext);
+
+    // Get variant styles
+    const variantStyles = getVariantStyles() as Record<string, TextStyle>;
+
+    // Calculate inherited values
+    const inheritedContext =
+      inherit && !reset && parentContext ? parentContext : {};
+
+    // Calculate final styles
+    const finalStyles: TextStyle = {
+      // Start with inherited values
+      fontSize: inheritedContext.fontSize,
+      fontWeight: inheritedContext.fontWeight,
+      //color: inheritedContext.color,
+      fontFamily: inheritedContext.fontFamily,
+      lineHeight: inheritedContext.lineHeight,
+      textAlign: inheritedContext.textAlign,
+      letterSpacing: inheritedContext.letterSpacing,
+      textTransform: inheritedContext.textTransform,
+      textDecorationLine:
+        inheritedContext.textDecorationLine as TextStyle["textDecorationLine"],
+      fontStyle: inheritedContext.fontStyle,
+      opacity: inheritedContext.opacity,
+
+      // Apply variant styles (these may override inherited)
+      ...(variant && variantStyles[variant]),
+
+      // Apply explicit prop styles (these should override inherited and variant)
+
+      // Apply size
+      ...(size && {
+        fontSize: typeof size === "number" ? size : sizeMap[size],
+      }),
+
+      // Apply weight
+      ...(weight && {
+        fontWeight: weightMap[weight] as TextStyle["fontWeight"],
+      }),
+
+      // Apply color
+      ...(color
+        ? {
+            color:
+              color === "default"
+                ? theme.colors.text
+                : color === "muted"
+                  ? theme.colors.textMuted
+                  : color === "primary"
+                    ? theme.colors.primary
+                    : color === "secondary"
+                      ? theme.colors.secondary
+                      : color === "destructive"
+                        ? theme.colors.destructive
+                        : color === "success"
+                          ? theme.colors.success
+                          : color === "warning"
+                            ? theme.colors.warning
+                            : color || inheritedContext.color, // Custom color string
+          }
+        : { color: inheritedContext.color || theme.colors.text }),
+
+      // Apply alignment
+      ...(align && {
+        textAlign: align,
+      }),
+
+      // Apply line height
+      ...(leading && {
+        lineHeight: typeof leading === "number" ? leading : leadingMap[leading],
+      }),
+
+      // Apply letter spacing
+      ...(tracking && {
+        letterSpacing:
+          typeof tracking === "number" ? tracking : trackingMap[tracking],
+      }),
+
+      // Apply text transform
+      ...(transform &&
+        transform !== "none" && {
+          textTransform: transform,
+        }),
+
+      // Apply text decoration
+      ...(decoration &&
+        decoration !== "none" && {
+          textDecorationLine: decoration,
+        }),
+
+      // Apply italic
+      ...(italic && {
+        fontStyle: "italic",
+      }),
+
+      // Apply opacity
+      ...(opacity !== undefined && {
+        opacity,
+      }),
+    };
+
+    finalStyles.color = finalStyles.color as ColorValue;
+
+    // Create context value for children
+    const contextValue: TextContextValue = {
+      fontSize:
+        typeof finalStyles.fontSize === "number"
+          ? finalStyles.fontSize
+          : undefined,
+      fontWeight: finalStyles.fontWeight,
+      color: finalStyles.color || undefined,
+      fontFamily:
+        typeof finalStyles.fontFamily === "string"
+          ? finalStyles.fontFamily
+          : undefined,
+      lineHeight:
+        typeof finalStyles.lineHeight === "number"
+          ? finalStyles.lineHeight
+          : undefined,
+      textAlign: finalStyles.textAlign,
+      letterSpacing: finalStyles.letterSpacing as number | undefined,
+      textTransform: finalStyles.textTransform,
+      textDecorationLine:
+        finalStyles.textDecorationLine as TextStyle["textDecorationLine"],
+      fontStyle: finalStyles.fontStyle,
+      opacity: finalStyles.opacity as number | undefined,
+    };
+
+    return (
+      <TextContext.Provider value={contextValue}>
+        <RNText ref={ref} style={[finalStyles, style]} {...props}>
+          {children}
+        </RNText>
+      </TextContext.Provider>
+    );
+  },
+);
+
+TextRoot.displayName = "TextRoot";
+
+// Text span primitive (inherits from parent but doesn't create new context)
+export const TextSpan = forwardRef<RNText, Omit<TextPrimitiveProps, "reset">>(
+  ({ children, ...props }, ref) => {
+    return (
+      <TextRoot ref={ref as any} inherit={true} {...props}>
+        {children}
+      </TextRoot>
+    );
+  },
+);
+
+TextSpan.displayName = "TextSpan";
+
+// Text block primitive (always creates new context)
+export const TextBlock = forwardRef<RNText, TextPrimitiveProps>(
+  ({ children, reset = true, ...props }, ref) => {
+    return (
+      <TextRoot ref={ref as any} reset={reset} {...props}>
+        {children}
+      </TextRoot>
+    );
+  },
+);
+
+TextBlock.displayName = "TextBlock";
+
+// Hook to access current text context
+export function useTextContext(): TextContextValue | null {
+  return useContext(TextContext);
+}
+
+// Utility function to create text styles
+export function createTextStyle(
+  props: Omit<TextPrimitiveProps, "children" | "style" | "ref">,
+): TextStyle {
+  // This is a utility function that can be used to generate styles
+  // without rendering a component
+  const style: TextStyle = {};
+
+  if (props.size) {
+    style.fontSize =
+      typeof props.size === "number" ? props.size : sizeMap[props.size];
+  }
+
+  if (props.weight) {
+    style.fontWeight = weightMap[props.weight] as TextStyle["fontWeight"];
+  }
+
+  if (props.align) {
+    style.textAlign = props.align;
+  }
+
+  if (props.leading) {
+    style.lineHeight =
+      typeof props.leading === "number"
+        ? props.leading
+        : leadingMap[props.leading];
+  }
+
+  if (props.tracking) {
+    style.letterSpacing =
+      typeof props.tracking === "number"
+        ? props.tracking
+        : trackingMap[props.tracking];
+  }
+
+  if (props.transform && props.transform !== "none") {
+    style.textTransform = props.transform;
+  }
+
+  if (props.decoration && props.decoration !== "none") {
+    style.textDecorationLine = props.decoration;
+  }
+
+  if (props.italic) {
+    style.fontStyle = "italic";
+  }
+
+  if (props.opacity !== undefined) {
+    style.opacity = props.opacity;
+  }
+
+  return style;
+}
+
+// Export primitive collection
+export const TextPrimitive: {
+  Root: typeof TextRoot;
+  Span: typeof TextSpan;
+  Block: typeof TextBlock;
+  Context: typeof TextContext;
+  useContext: typeof useTextContext;
+  createStyle: typeof createTextStyle;
+} = {
+  Root: TextRoot,
+  Span: TextSpan,
+  Block: TextBlock,
+  Context: TextContext,
+  useContext: useTextContext,
+  createStyle: createTextStyle,
+};

package/src/components/ui/resizeable.tsx

@@ -0,0 +1,169 @@
+import { ChevronUp } from "lucide-react-native";
+import { ComponentProps } from "react";
+import { Dimensions } from "react-native";
+import {
+  Gesture,
+  GestureDetector,
+  Pressable,
+} from "react-native-gesture-handler";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useKeyboardSlide } from "../../hooks";
+import { bottom, layout, p, w, zIndex } from "../../lib/theme/atoms";
+import { View } from "./view";
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+const { height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+type ResizableChatSheetProps = {
+  isPlayerRatioGreater: boolean;
+  style?: ComponentProps<typeof AnimatedView>["style"];
+  children?: React.ReactNode;
+};
+
+const SPRING_CONFIG = { damping: 20, stiffness: 100 };
+
+export function Resizable({
+  isPlayerRatioGreater,
+  style = {},
+  children,
+}: ResizableChatSheetProps) {
+  const { slideKeyboard } = useKeyboardSlide();
+  const { bottom: safeBottom } = useSafeAreaInsets();
+  const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.5;
+  const MIN_HEIGHT = -(SCREEN_HEIGHT - safeBottom) * 0.2;
+  const COLLAPSE_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.1;
+
+  const sheetHeight = useSharedValue(MIN_HEIGHT);
+  const startHeight = useSharedValue(MIN_HEIGHT);
+
+  const panGesture = Gesture.Pan()
+    .onStart(() => {
+      startHeight.value = sheetHeight.value;
+    })
+    .onUpdate((event) => {
+      let newHeight = startHeight.value - event.translationY;
+      if (newHeight > MAX_HEIGHT) newHeight = MAX_HEIGHT;
+      if (newHeight < MIN_HEIGHT) newHeight = MIN_HEIGHT;
+      sheetHeight.value = newHeight;
+
+      if (newHeight < COLLAPSE_HEIGHT) {
+        sheetHeight.value = withSpring(MIN_HEIGHT, SPRING_CONFIG);
+      }
+    });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    height: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : sheetHeight.value,
+    opacity: interpolate(
+      sheetHeight.value,
+      [MIN_HEIGHT, COLLAPSE_HEIGHT],
+      [0, 1],
+      Extrapolation.CLAMP,
+    ),
+    transform: [
+      {
+        translateY:
+          slideKeyboard - safeBottom + Math.max(0, -sheetHeight.value),
+      },
+    ],
+  }));
+
+  const handleAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: sheetHeight.value < COLLAPSE_HEIGHT ? 1 : 0,
+    transform: [
+      {
+        translateY: sheetHeight.value < COLLAPSE_HEIGHT ? 0 : withSpring(20),
+      },
+    ],
+  }));
+
+  return (
+    <>
+      <Animated.View
+        style={[
+          handleAnimatedStyle,
+          layout.position.absolute,
+          bottom[4],
+          w.percent[100],
+          layout.flex.center,
+          zIndex[1],
+          { marginBottom: safeBottom },
+        ]}
+      >
+        <Pressable
+          onPress={() => {
+            sheetHeight.value =
+              sheetHeight.value === MIN_HEIGHT
+                ? withSpring(MAX_HEIGHT, SPRING_CONFIG)
+                : withSpring(MIN_HEIGHT, SPRING_CONFIG);
+          }}
+        >
+          <View
+            style={[
+              p[1],
+              {
+                borderRadius: 999,
+                backgroundColor: "rgba(0, 0, 0, 0.5)",
+                overflow: "hidden",
+              },
+            ]}
+          >
+            <ChevronUp
+              size={32}
+              color="white"
+              style={{ marginBottom: 1, marginTop: -1 }}
+            />
+          </View>
+        </Pressable>
+      </Animated.View>
+      <AnimatedView
+        style={[
+          animatedStyle,
+          isPlayerRatioGreater
+            ? layout.position.relative
+            : layout.position.absolute,
+          bottom[0],
+          zIndex[1],
+          w.percent[100],
+          {
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            overflow: "visible",
+            borderTopLeftRadius: 16,
+            borderTopRightRadius: 16,
+            minWidth: "100%",
+          },
+          style,
+        ]}
+      >
+        <View style={[layout.flex.row, layout.flex.justifyCenter]}>
+          <GestureDetector gesture={panGesture}>
+            <View
+              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+              style={[
+                w[32],
+                {
+                  height: 6,
+                  transform: [{ translateY: -10 }],
+                  backgroundColor: "#eeeeee66",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 999,
+                },
+              ]}
+            />
+          </GestureDetector>
+        </View>
+        {children}
+      </AnimatedView>
+    </>
+  );
+}
+
+Resizable.displayName = "ResizableChatSheet";