@croacroa/react-native-template 1.0.0

package/components/ui/Avatar.tsx

@@ -0,0 +1,316 @@
+import { View, Text } from "react-native";
+import { Image } from "expo-image";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+interface AvatarProps {
+  /**
+   * Image source URL
+   */
+  source?: string | null;
+
+  /**
+   * User's name (used for initials fallback)
+   */
+  name?: string;
+
+  /**
+   * Size variant
+   */
+  size?: AvatarSize;
+
+  /**
+   * Custom size in pixels (overrides size variant)
+   */
+  customSize?: number;
+
+  /**
+   * Whether to show online indicator
+   */
+  showOnlineIndicator?: boolean;
+
+  /**
+   * Whether the user is online
+   */
+  isOnline?: boolean;
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+
+  /**
+   * Border color class
+   */
+  borderClassName?: string;
+}
+
+const sizeConfig: Record<
+  AvatarSize,
+  { container: number; text: string; icon: number; indicator: number }
+> = {
+  xs: { container: 24, text: "text-xs", icon: 12, indicator: 6 },
+  sm: { container: 32, text: "text-sm", icon: 16, indicator: 8 },
+  md: { container: 40, text: "text-base", icon: 20, indicator: 10 },
+  lg: { container: 48, text: "text-lg", icon: 24, indicator: 12 },
+  xl: { container: 64, text: "text-xl", icon: 32, indicator: 14 },
+  "2xl": { container: 80, text: "text-2xl", icon: 40, indicator: 16 },
+};
+
+/**
+ * Get initials from a name
+ */
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].substring(0, 2).toUpperCase();
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+/**
+ * Get a consistent color based on the name
+ */
+function getAvatarColor(name: string): string {
+  const colors = [
+    "#ef4444", // red
+    "#f97316", // orange
+    "#f59e0b", // amber
+    "#84cc16", // lime
+    "#10b981", // emerald
+    "#14b8a6", // teal
+    "#06b6d4", // cyan
+    "#0ea5e9", // sky
+    "#3b82f6", // blue
+    "#6366f1", // indigo
+    "#8b5cf6", // violet
+    "#a855f7", // purple
+    "#d946ef", // fuchsia
+    "#ec4899", // pink
+    "#f43f5e", // rose
+  ];
+
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  return colors[Math.abs(hash) % colors.length];
+}
+
+export function Avatar({
+  source,
+  name,
+  size = "md",
+  customSize,
+  showOnlineIndicator = false,
+  isOnline = false,
+  className,
+  borderClassName,
+}: AvatarProps) {
+  const { isDark } = useTheme();
+  const config = sizeConfig[size];
+  const containerSize = customSize || config.container;
+
+  const initials = name ? getInitials(name) : "";
+  const backgroundColor = name
+    ? getAvatarColor(name)
+    : isDark
+      ? "#475569"
+      : "#cbd5e1";
+
+  const renderContent = () => {
+    // Image avatar
+    if (source) {
+      return (
+        <Image
+          source={{ uri: source }}
+          style={{
+            width: containerSize,
+            height: containerSize,
+            borderRadius: containerSize / 2,
+          }}
+          contentFit="cover"
+          transition={200}
+          placeholder={require("@/assets/images/icon.png")}
+        />
+      );
+    }
+
+    // Initials avatar
+    if (name) {
+      return (
+        <View
+          style={{
+            width: containerSize,
+            height: containerSize,
+            borderRadius: containerSize / 2,
+            backgroundColor,
+          }}
+          className="items-center justify-center"
+        >
+          <Text
+            className={cn(config.text, "font-semibold text-white")}
+            style={{
+              fontSize: customSize ? customSize * 0.4 : undefined,
+            }}
+          >
+            {initials}
+          </Text>
+        </View>
+      );
+    }
+
+    // Default placeholder
+    return (
+      <View
+        style={{
+          width: containerSize,
+          height: containerSize,
+          borderRadius: containerSize / 2,
+        }}
+        className={cn(
+          "items-center justify-center",
+          isDark ? "bg-gray-700" : "bg-gray-200"
+        )}
+      >
+        <Ionicons
+          name="person"
+          size={customSize ? customSize * 0.5 : config.icon}
+          color={isDark ? "#94a3b8" : "#64748b"}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <View
+      className={cn("relative", className)}
+      style={{ width: containerSize, height: containerSize }}
+    >
+      <View
+        className={cn("overflow-hidden rounded-full", borderClassName)}
+        style={{
+          width: containerSize,
+          height: containerSize,
+          borderRadius: containerSize / 2,
+        }}
+      >
+        {renderContent()}
+      </View>
+
+      {/* Online indicator */}
+      {showOnlineIndicator && (
+        <View
+          style={{
+            width: config.indicator,
+            height: config.indicator,
+            borderRadius: config.indicator / 2,
+            borderWidth: 2,
+            position: "absolute",
+            bottom: 0,
+            right: 0,
+          }}
+          className={cn(
+            isOnline ? "bg-green-500" : "bg-gray-400",
+            isDark ? "border-background-dark" : "border-white"
+          )}
+        />
+      )}
+    </View>
+  );
+}
+
+/**
+ * Avatar Group component for displaying multiple avatars
+ */
+interface AvatarGroupProps {
+  /**
+   * Array of avatar data
+   */
+  avatars: {
+    source?: string | null;
+    name?: string;
+  }[];
+
+  /**
+   * Maximum number of avatars to display
+   */
+  max?: number;
+
+  /**
+   * Size variant
+   */
+  size?: AvatarSize;
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+}
+
+export function AvatarGroup({
+  avatars,
+  max = 4,
+  size = "md",
+  className,
+}: AvatarGroupProps) {
+  const { isDark } = useTheme();
+  const config = sizeConfig[size];
+  const displayAvatars = avatars.slice(0, max);
+  const remainingCount = avatars.length - max;
+
+  return (
+    <View className={cn("flex-row items-center", className)}>
+      {displayAvatars.map((avatar, index) => (
+        <View
+          key={index}
+          style={{
+            marginLeft: index > 0 ? -config.container / 3 : 0,
+            zIndex: displayAvatars.length - index,
+          }}
+        >
+          <Avatar
+            source={avatar.source}
+            name={avatar.name}
+            size={size}
+            borderClassName={cn(
+              "border-2",
+              isDark ? "border-background-dark" : "border-white"
+            )}
+          />
+        </View>
+      ))}
+
+      {remainingCount > 0 && (
+        <View
+          style={{
+            marginLeft: -config.container / 3,
+            width: config.container,
+            height: config.container,
+            borderRadius: config.container / 2,
+          }}
+          className={cn(
+            "items-center justify-center border-2",
+            isDark
+              ? "bg-gray-700 border-background-dark"
+              : "bg-gray-200 border-white"
+          )}
+        >
+          <Text
+            className={cn(
+              config.text,
+              "font-medium",
+              isDark ? "text-text-dark" : "text-text-light"
+            )}
+          >
+            +{remainingCount}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/components/ui/Badge.tsx

@@ -0,0 +1,416 @@
+import { View, Text, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "@/hooks/useTheme";
+import { cn } from "@/utils/cn";
+
+type BadgeVariant =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "info";
+
+type BadgeSize = "sm" | "md" | "lg";
+
+interface BadgeProps {
+  /**
+   * Badge content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Visual variant
+   */
+  variant?: BadgeVariant;
+
+  /**
+   * Size variant
+   */
+  size?: BadgeSize;
+
+  /**
+   * Icon name (Ionicons)
+   */
+  icon?: keyof typeof Ionicons.glyphMap;
+
+  /**
+   * Whether the badge is outlined
+   */
+  outlined?: boolean;
+
+  /**
+   * Whether to make it a pill shape
+   */
+  pill?: boolean;
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+}
+
+const sizeStyles: Record<
+  BadgeSize,
+  { container: string; text: string; icon: number }
+> = {
+  sm: { container: "px-2 py-0.5", text: "text-xs", icon: 12 },
+  md: { container: "px-2.5 py-1", text: "text-sm", icon: 14 },
+  lg: { container: "px-3 py-1.5", text: "text-base", icon: 16 },
+};
+
+const variantStyles: Record<
+  BadgeVariant,
+  {
+    bg: string;
+    bgDark: string;
+    text: string;
+    textDark: string;
+    border: string;
+    borderDark: string;
+  }
+> = {
+  default: {
+    bg: "bg-gray-100",
+    bgDark: "bg-gray-800",
+    text: "text-gray-700",
+    textDark: "text-gray-300",
+    border: "border-gray-300",
+    borderDark: "border-gray-600",
+  },
+  primary: {
+    bg: "bg-primary-100",
+    bgDark: "bg-primary-900/30",
+    text: "text-primary-700",
+    textDark: "text-primary-400",
+    border: "border-primary-300",
+    borderDark: "border-primary-700",
+  },
+  secondary: {
+    bg: "bg-slate-100",
+    bgDark: "bg-slate-800",
+    text: "text-slate-700",
+    textDark: "text-slate-300",
+    border: "border-slate-300",
+    borderDark: "border-slate-600",
+  },
+  success: {
+    bg: "bg-green-100",
+    bgDark: "bg-green-900/30",
+    text: "text-green-700",
+    textDark: "text-green-400",
+    border: "border-green-300",
+    borderDark: "border-green-700",
+  },
+  warning: {
+    bg: "bg-yellow-100",
+    bgDark: "bg-yellow-900/30",
+    text: "text-yellow-700",
+    textDark: "text-yellow-400",
+    border: "border-yellow-300",
+    borderDark: "border-yellow-700",
+  },
+  error: {
+    bg: "bg-red-100",
+    bgDark: "bg-red-900/30",
+    text: "text-red-700",
+    textDark: "text-red-400",
+    border: "border-red-300",
+    borderDark: "border-red-700",
+  },
+  info: {
+    bg: "bg-blue-100",
+    bgDark: "bg-blue-900/30",
+    text: "text-blue-700",
+    textDark: "text-blue-400",
+    border: "border-blue-300",
+    borderDark: "border-blue-700",
+  },
+};
+
+export function Badge({
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  outlined = false,
+  pill = false,
+  className,
+}: BadgeProps) {
+  const { isDark } = useTheme();
+  const sizeStyle = sizeStyles[size];
+  const variantStyle = variantStyles[variant];
+
+  return (
+    <View
+      className={cn(
+        "flex-row items-center self-start",
+        sizeStyle.container,
+        pill ? "rounded-full" : "rounded-md",
+        outlined
+          ? cn(
+              "border bg-transparent",
+              isDark ? variantStyle.borderDark : variantStyle.border
+            )
+          : isDark
+            ? variantStyle.bgDark
+            : variantStyle.bg,
+        className
+      )}
+    >
+      {icon && (
+        <Ionicons
+          name={icon}
+          size={sizeStyle.icon}
+          color={
+            isDark
+              ? getTextColor(variantStyle.textDark)
+              : getTextColor(variantStyle.text)
+          }
+          style={{ marginRight: 4 }}
+        />
+      )}
+      <Text
+        className={cn(
+          sizeStyle.text,
+          "font-medium",
+          isDark ? variantStyle.textDark : variantStyle.text
+        )}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+// Helper to extract color from class name
+function getTextColor(className: string): string {
+  const colorMap: Record<string, string> = {
+    "text-gray-700": "#374151",
+    "text-gray-300": "#d1d5db",
+    "text-primary-700": "#047857",
+    "text-primary-400": "#34d399",
+    "text-slate-700": "#334155",
+    "text-slate-300": "#cbd5e1",
+    "text-green-700": "#15803d",
+    "text-green-400": "#4ade80",
+    "text-yellow-700": "#a16207",
+    "text-yellow-400": "#facc15",
+    "text-red-700": "#b91c1c",
+    "text-red-400": "#f87171",
+    "text-blue-700": "#1d4ed8",
+    "text-blue-400": "#60a5fa",
+  };
+  return colorMap[className] || "#6b7280";
+}
+
+/**
+ * Chip component (interactive badge)
+ */
+interface ChipProps extends Omit<BadgeProps, "children"> {
+  /**
+   * Chip label
+   */
+  label: string;
+
+  /**
+   * Called when the chip is pressed
+   */
+  onPress?: () => void;
+
+  /**
+   * Whether the chip is selected
+   */
+  selected?: boolean;
+
+  /**
+   * Whether to show remove button
+   */
+  removable?: boolean;
+
+  /**
+   * Called when remove button is pressed
+   */
+  onRemove?: () => void;
+
+  /**
+   * Whether the chip is disabled
+   */
+  disabled?: boolean;
+}
+
+export function Chip({
+  label,
+  variant = "default",
+  size = "md",
+  icon,
+  onPress,
+  selected = false,
+  removable = false,
+  onRemove,
+  disabled = false,
+  pill = true,
+  className,
+}: ChipProps) {
+  const { isDark } = useTheme();
+  const sizeStyle = sizeStyles[size];
+  const variantStyle = selected
+    ? variantStyles.primary
+    : variantStyles[variant];
+
+  const content = (
+    <View
+      className={cn(
+        "flex-row items-center",
+        sizeStyle.container,
+        pill ? "rounded-full" : "rounded-md",
+        selected
+          ? isDark
+            ? "bg-primary-600"
+            : "bg-primary-500"
+          : isDark
+            ? variantStyle.bgDark
+            : variantStyle.bg,
+        disabled && "opacity-50",
+        className
+      )}
+    >
+      {icon && (
+        <Ionicons
+          name={icon}
+          size={sizeStyle.icon}
+          color={
+            selected
+              ? "#ffffff"
+              : isDark
+                ? getTextColor(variantStyle.textDark)
+                : getTextColor(variantStyle.text)
+          }
+          style={{ marginRight: 4 }}
+        />
+      )}
+      <Text
+        className={cn(
+          sizeStyle.text,
+          "font-medium",
+          selected
+            ? "text-white"
+            : isDark
+              ? variantStyle.textDark
+              : variantStyle.text
+        )}
+      >
+        {label}
+      </Text>
+      {removable && (
+        <TouchableOpacity
+          onPress={onRemove}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          disabled={disabled}
+          className="ml-1"
+        >
+          <Ionicons
+            name="close-circle"
+            size={sizeStyle.icon + 2}
+            color={
+              selected
+                ? "#ffffff"
+                : isDark
+                  ? getTextColor(variantStyle.textDark)
+                  : getTextColor(variantStyle.text)
+            }
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        disabled={disabled}
+        activeOpacity={0.7}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+}
+
+/**
+ * Count Badge (for notifications, cart items, etc.)
+ */
+interface CountBadgeProps {
+  /**
+   * Count to display
+   */
+  count: number;
+
+  /**
+   * Maximum count to show before showing "99+"
+   */
+  max?: number;
+
+  /**
+   * Variant color
+   */
+  variant?: "primary" | "error" | "warning";
+
+  /**
+   * Size variant
+   */
+  size?: "sm" | "md";
+
+  /**
+   * Additional class name
+   */
+  className?: string;
+}
+
+export function CountBadge({
+  count,
+  max = 99,
+  variant = "error",
+  size = "sm",
+  className,
+}: CountBadgeProps) {
+  if (count <= 0) return null;
+
+  const displayCount = count > max ? `${max}+` : count.toString();
+
+  const bgColors = {
+    primary: "bg-primary-500",
+    error: "bg-red-500",
+    warning: "bg-yellow-500",
+  };
+
+  const sizes = {
+    sm: { min: 18, text: "text-xs", px: 4 },
+    md: { min: 22, text: "text-sm", px: 6 },
+  };
+
+  const sizeConfig = sizes[size];
+
+  return (
+    <View
+      className={cn(
+        "items-center justify-center rounded-full",
+        bgColors[variant],
+        className
+      )}
+      style={{
+        minWidth: sizeConfig.min,
+        height: sizeConfig.min,
+        paddingHorizontal: sizeConfig.px,
+      }}
+    >
+      <Text className={cn(sizeConfig.text, "font-bold text-white")}>
+        {displayCount}
+      </Text>
+    </View>
+  );
+}