@streamplace/components 0.0.1 → 0.7.0

package/src/components/ui/text.tsx

@@ -0,0 +1,330 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React, { forwardRef } from "react";
+import { StyleSheet } from "react-native";
+import { colors, borderRadius as radius, spacing } from "../../lib/theme/atoms";
+import { TextPrimitive, TextPrimitiveProps } from "./primitives/text";
+
+// Text variants using class-variance-authority pattern
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5",
+      h6: "h6",
+      subtitle1: "subtitle1",
+      subtitle2: "subtitle2",
+      body1: "body1",
+      body2: "body2",
+      caption: "caption",
+      overline: "overline",
+    },
+    size: {
+      xs: "xs",
+      sm: "sm",
+      base: "base",
+      lg: "lg",
+      xl: "xl",
+      "2xl": "2xl",
+      "3xl": "3xl",
+      "4xl": "4xl",
+    },
+    weight: {
+      thin: "thin",
+      light: "light",
+      normal: "normal",
+      medium: "medium",
+      semibold: "semibold",
+      bold: "bold",
+      extrabold: "extrabold",
+      black: "black",
+    },
+    color: {
+      default: "default",
+      muted: "muted",
+      primary: "primary",
+      secondary: "secondary",
+      destructive: "destructive",
+      success: "success",
+      warning: "warning",
+    },
+  },
+  defaultVariants: {
+    variant: "body1",
+    size: "base",
+    weight: "normal",
+    color: "default",
+  },
+});
+
+export interface TextProps
+  extends Omit<TextPrimitiveProps, "variant" | "size" | "weight" | "color">,
+    VariantProps<typeof textVariants> {
+  // Additional convenience props
+  muted?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  uppercase?: boolean;
+  lowercase?: boolean;
+  capitalize?: boolean;
+  center?: boolean;
+  right?: boolean;
+  justify?: boolean;
+  // Custom color override
+  customColor?: string;
+}
+
+export const Text = forwardRef<any, TextProps>(
+  (
+    {
+      variant = undefined,
+      size = undefined,
+      weight = undefined,
+      color = undefined,
+      muted = false,
+      bold = false,
+      italic = false,
+      underline = false,
+      strikethrough = false,
+      uppercase = false,
+      lowercase = false,
+      capitalize = false,
+      center = false,
+      right = false,
+      justify = false,
+      customColor,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    // Create dynamic styles based on atoms
+    const styles = React.useMemo(() => createStyles(), []);
+
+    // Override props based on convenience props
+    const finalColor = customColor ? customColor : muted ? "muted" : color;
+
+    const finalTransform = uppercase
+      ? "uppercase"
+      : lowercase
+        ? "lowercase"
+        : capitalize
+          ? "capitalize"
+          : "none";
+
+    const finalDecoration =
+      underline && strikethrough
+        ? "underline line-through"
+        : underline
+          ? "underline"
+          : strikethrough
+            ? "line-through"
+            : "none";
+
+    const finalAlign = center
+      ? "center"
+      : right
+        ? "right"
+        : justify
+          ? "justify"
+          : "left";
+
+    // Get variant-specific styles
+    const variantStyle = styles[`${variant}Style` as keyof typeof styles] || {};
+
+    const styleArr = (
+      Array.isArray(style) ? style : [style || undefined]
+    ).filter((s) => s !== undefined);
+
+    return (
+      <TextPrimitive.Root
+        ref={ref}
+        variant={variant || "body1"}
+        size={size || "base"}
+        color={finalColor || "default"}
+        align={finalAlign}
+        transform={finalTransform}
+        decoration={finalDecoration as any}
+        italic={italic}
+        style={[variantStyle, ...styleArr]}
+        {...props}
+      >
+        {children}
+      </TextPrimitive.Root>
+    );
+  },
+);
+
+Text.displayName = "Text";
+
+// Convenience components for common text elements
+export const Heading = forwardRef<
+  any,
+  Omit<TextProps, "variant"> & { level?: 1 | 2 | 3 | 4 | 5 | 6 }
+>(({ level = 1, ...props }, ref) => (
+  <Text ref={ref} variant={`h${level}` as any} {...props} />
+));
+
+Heading.displayName = "Heading";
+
+export const Subtitle = forwardRef<
+  any,
+  Omit<TextProps, "variant"> & { level?: 1 | 2 }
+>(({ level = 1, ...props }, ref) => (
+  <Text
+    ref={ref}
+    variant={level === 1 ? "subtitle1" : "subtitle2"}
+    {...props}
+  />
+));
+
+Subtitle.displayName = "Subtitle";
+
+export const Body = forwardRef<
+  any,
+  Omit<TextProps, "variant"> & { level?: 1 | 2 }
+>(({ level = 1, ...props }, ref) => (
+  <Text ref={ref} variant={level === 1 ? "body1" : "body2"} {...props} />
+));
+
+Body.displayName = "Body";
+
+export const Caption = forwardRef<any, Omit<TextProps, "variant">>(
+  (props, ref) => <Text ref={ref} variant="caption" {...props} />,
+);
+
+Caption.displayName = "Caption";
+
+export const Label = forwardRef<any, Omit<TextProps, "variant">>(
+  (props, ref) => (
+    <Text ref={ref} variant="subtitle1" weight="medium" {...props} />
+  ),
+);
+
+Label.displayName = "Label";
+
+export const Code = forwardRef<any, TextProps>(({ style, ...props }, ref) => {
+  const styles = React.useMemo(() => createStyles(), []);
+  // if style is not an array, convert it to an array
+  const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter(
+    (s) => s !== undefined,
+  );
+
+  return <Text ref={ref} style={[styles.codeStyle, ...styleArr]} {...props} />;
+});
+
+Code.displayName = "Code";
+
+// Span component for inline text styling (inherits from parent)
+export const Span = forwardRef<
+  any,
+  Omit<TextProps, "variant" | "size" | "weight" | "color"> & {
+    variant?:
+      | "h1"
+      | "h2"
+      | "h3"
+      | "h4"
+      | "h5"
+      | "h6"
+      | "subtitle1"
+      | "subtitle2"
+      | "body1"
+      | "body2"
+      | "caption"
+      | "overline";
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    weight?:
+      | "thin"
+      | "light"
+      | "normal"
+      | "medium"
+      | "semibold"
+      | "bold"
+      | "extrabold"
+      | "black";
+    color?:
+      | "default"
+      | "muted"
+      | "primary"
+      | "secondary"
+      | "destructive"
+      | "success"
+      | "warning";
+  }
+>(({ children, ...props }, ref) => (
+  <TextPrimitive.Span ref={ref} {...props}>
+    {children}
+  </TextPrimitive.Span>
+));
+
+Span.displayName = "Span";
+
+// Create atom-based styles
+function createStyles() {
+  return StyleSheet.create({
+    // Variant-specific styles
+    h1Style: {
+      marginBottom: spacing[4],
+    },
+    h2Style: {
+      marginBottom: spacing[3],
+    },
+    h3Style: {
+      marginBottom: spacing[3],
+    },
+    h4Style: {
+      marginBottom: spacing[2],
+    },
+    h5Style: {
+      marginBottom: spacing[2],
+    },
+    h6Style: {
+      marginBottom: spacing[2],
+    },
+    subtitle1Style: {
+      marginBottom: spacing[2],
+    },
+    subtitle2Style: {
+      marginBottom: spacing[1],
+    },
+    body1Style: {
+      marginBottom: spacing[3],
+    },
+    body2Style: {
+      marginBottom: spacing[2],
+    },
+    captionStyle: {
+      marginBottom: spacing[1],
+    },
+    overlineStyle: {
+      marginBottom: spacing[1],
+      textTransform: "uppercase",
+      letterSpacing: 1,
+    },
+    labelStyle: {
+      marginBottom: spacing[1],
+    },
+    buttonStyle: {
+      textAlign: "center",
+    },
+    codeStyle: {
+      fontFamily: "monospace",
+      backgroundColor: colors["muted"],
+      paddingHorizontal: spacing[1],
+      paddingVertical: 2,
+      borderRadius: radius.sm,
+      fontSize: 14,
+    },
+  });
+}
+
+// Export text variants for external use
+export { textVariants };
+
+// Re-export primitive components for advanced usage
+export { TextPrimitive };

package/src/components/ui/textarea.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { bg, borders, flex, p, text } from "../../lib/theme/atoms";
+
+function Textarea({
+  style,
+  multiline = true,
+  numberOfLines = 4,
+  ...props
+}: TextInputProps & {
+  ref?: React.RefObject<TextInput>;
+}) {
+  return (
+    <TextInput
+      style={[
+        flex.values[1],
+        borders.width.thin,
+        borders.color.gray[400],
+        bg.gray[900],
+        p[3],
+        text.gray[200],
+        props.editable === false && { opacity: 0.5 },
+        { borderRadius: 10 },
+        style,
+      ]}
+      multiline={multiline}
+      numberOfLines={numberOfLines}
+      textAlignVertical="top"
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/ui/toast.tsx

@@ -0,0 +1,203 @@
+import { Portal } from "@rn-primitives/portal";
+import { useEffect, useState } from "react";
+import {
+  Animated,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "../../lib/theme/theme";
+
+type ToastProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  duration?: number; // seconds
+};
+
+export function Toast({
+  open,
+  onOpenChange,
+  title,
+  description,
+  actionLabel = "Action",
+  onAction,
+  duration = 3,
+}: ToastProps) {
+  const [seconds, setSeconds] = useState(duration);
+  const insets = useSafeAreaInsets();
+  const { theme } = useTheme();
+  const [fadeAnim] = useState(new Animated.Value(0));
+  const { width } = useWindowDimensions();
+  const isWeb = Platform.OS === "web";
+  const isDesktop = isWeb && width >= 768;
+
+  const containerPosition: ViewStyle = isDesktop
+    ? {
+        top: undefined,
+        bottom: theme.spacing[4],
+        right: theme.spacing[4], // <-- use spacing, not 1
+        alignItems: "flex-end",
+        minWidth: 400,
+        width: 400,
+        // Do NOT set left at all
+      }
+    : {
+        bottom: insets.bottom + theme.spacing[1],
+        left: 0,
+        right: 0,
+        alignItems: "center",
+        width: "100%",
+        maxWidth: undefined,
+      };
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval> | null = null;
+
+    if (open) {
+      setSeconds(duration);
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+
+      interval = setInterval(() => {
+        setSeconds((prev) => {
+          if (prev <= 1) {
+            onOpenChange(false);
+            if (interval) clearInterval(interval);
+            return duration;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    } else {
+      if (interval) clearInterval(interval);
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }).start();
+      setSeconds(duration);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+    // eslint-disable-next-line
+  }, [open, duration]);
+
+  if (!open) return null;
+
+  return (
+    <Portal name="toast">
+      <Animated.View
+        style={[styles.container, containerPosition, { opacity: fadeAnim }]}
+        pointerEvents="box-none"
+      >
+        <View
+          style={[
+            styles.toast,
+            {
+              backgroundColor: theme.colors.secondary,
+              borderColor: theme.colors.border,
+              borderRadius: theme.borderRadius.xl,
+              flexDirection: "column",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: theme.spacing[4],
+              width: isDesktop ? "100%" : "95%",
+            },
+          ]}
+        >
+          <View style={{ gap: theme.spacing[1], width: "100%" }}>
+            <Text
+              style={[
+                {
+                  color: theme.colors.foreground,
+                  fontSize: 16,
+                  fontWeight: "500",
+                },
+              ]}
+            >
+              {title}
+            </Text>
+            {description ? (
+              <Text style={[{ color: theme.colors.foreground, fontSize: 14 }]}>
+                {description}
+              </Text>
+            ) : null}
+          </View>
+          <View
+            style={{
+              gap: theme.spacing[1],
+              flexDirection: "row",
+              justifyContent: "flex-end",
+              width: "100%",
+            }}
+          >
+            {onAction && (
+              <Pressable
+                style={[
+                  styles.button,
+                  {
+                    borderColor: theme.colors.primary,
+                    paddingHorizontal: theme.spacing[4],
+                    paddingVertical: theme.spacing[2],
+                  },
+                ]}
+                onPress={onAction}
+              >
+                <Text style={{ color: theme.colors.foreground }}>
+                  {actionLabel}
+                </Text>
+              </Pressable>
+            )}
+            <Pressable
+              style={[
+                styles.button,
+                {
+                  borderColor: theme.colors.primary,
+                  paddingHorizontal: theme.spacing[4],
+                  paddingVertical: theme.spacing[2],
+                },
+              ]}
+              onPress={() => onOpenChange(false)}
+            >
+              <Text style={{ color: theme.colors.foreground }}>Close</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Animated.View>
+    </Portal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    zIndex: 1000,
+    paddingHorizontal: 16,
+  },
+  toast: {
+    opacity: 0.95,
+    borderWidth: 1,
+    gap: 8,
+  },
+  button: {
+    borderWidth: 1,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+  },
+});