@beyondcorp/beyond-ui-native 0.1.1 → 0.1.3

package/src/templates/dashboard/DashboardTemplate.tsx

@@ -0,0 +1,205 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  Pressable,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../../components/text/text";
+import { Heading } from "../../components/text/heading";
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar/avatar";
+import { Badge } from "../../components/badge/badge";
+import { Card, CardHeader, CardTitle, CardContent } from "../../components/card/card";
+import { StatsCard, type StatsCardProps } from "../../components/stats-card/stats-card";
+import { Button } from "../../components/button/button";
+
+export interface DashboardMetric extends StatsCardProps {
+  id: string;
+}
+
+export interface DashboardActivity {
+  id: string;
+  title: string;
+  subtitle: string;
+  timestamp: string;
+  amount?: string;
+  status?: {
+    label: string;
+    variant: "primary" | "secondary" | "success" | "warning" | "danger" | "outline";
+  };
+  avatarUrl?: string;
+  avatarInitials?: string;
+}
+
+export interface DashboardQuickAction {
+  id: string;
+  label: string;
+  icon?: string;
+  onPress: () => void;
+}
+
+export interface DashboardTemplateProps extends ViewProps {
+  userName: string;
+  userRole?: string;
+  userAvatarUrl?: string;
+  metrics: DashboardMetric[];
+  quickActions?: DashboardQuickAction[];
+  recentActivities?: DashboardActivity[];
+  onViewAllActivities?: () => void;
+  onNotificationPress?: () => void;
+  unreadNotificationsCount?: number;
+  className?: string;
+}
+
+export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
+  userName,
+  userRole = "Administrator",
+  userAvatarUrl,
+  metrics,
+  quickActions,
+  recentActivities,
+  onViewAllActivities,
+  onNotificationPress,
+  unreadNotificationsCount = 0,
+  className,
+  ...props
+}) => {
+  return (
+    <ScrollView
+      {...props}
+      style={[{ flex: 1 }, (props as any).style]}
+      className={cn("flex-1 bg-background", className)}
+      contentContainerStyle={{ paddingBottom: 40 }}
+      showsVerticalScrollIndicator={false}
+    >
+      {/* Top Greeting Header */}
+      <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-border/40">
+        <View className="flex-row items-center gap-3">
+          <Avatar size="lg">
+            {userAvatarUrl && <AvatarImage source={{ uri: userAvatarUrl }} />}
+            <AvatarFallback text={userName.slice(0, 2).toUpperCase()} />
+          </Avatar>
+          <View>
+            <Text className="text-xs text-muted font-medium uppercase tracking-wider">
+              {userRole}
+            </Text>
+            <Heading level={3} className="text-xl font-bold text-foreground">
+              Hello, {userName} 👋
+            </Heading>
+          </View>
+        </View>
+
+        {onNotificationPress && (
+          <Pressable
+            onPress={onNotificationPress}
+            className="w-10 h-10 rounded-full border border-border bg-card items-center justify-center relative active:opacity-70"
+          >
+            <Text className="text-base text-foreground">🔔</Text>
+            {unreadNotificationsCount > 0 && (
+              <View className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-danger items-center justify-center">
+                <Text className="text-[10px] font-bold text-white">
+                  {unreadNotificationsCount > 9 ? "9+" : unreadNotificationsCount}
+                </Text>
+              </View>
+            )}
+          </Pressable>
+        )}
+      </View>
+
+      <View className="px-6 pt-6 gap-6">
+        {/* Quick Actions */}
+        {quickActions && quickActions.length > 0 && (
+          <View className="gap-2">
+            <Text className="text-xs font-bold text-muted uppercase tracking-wider">
+              Quick Actions
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              className="-mx-6 px-6"
+            >
+              <View className="flex-row gap-3">
+                {quickActions.map((action) => (
+                  <Button
+                    key={action.id}
+                    variant="outline"
+                    size="sm"
+                    onPress={action.onPress}
+                    className="bg-card shadow-sm"
+                  >
+                    {action.icon ? `${action.icon} ${action.label}` : action.label}
+                  </Button>
+                ))}
+              </View>
+            </ScrollView>
+          </View>
+        )}
+
+        {/* Metrics Grid */}
+        <View className="gap-3">
+          <Text className="text-xs font-bold text-muted uppercase tracking-wider">
+            Overview Performance
+          </Text>
+          <View className="gap-3">
+            {metrics.map((metric) => (
+              <StatsCard key={metric.id} {...metric} />
+            ))}
+          </View>
+        </View>
+
+        {/* Recent Activities */}
+        {recentActivities && recentActivities.length > 0 && (
+          <Card className="gap-2">
+            <CardHeader className="flex-row items-center justify-between pb-2">
+              <CardTitle className="text-base font-bold">Recent Activity</CardTitle>
+              {onViewAllActivities && (
+                <Pressable onPress={onViewAllActivities}>
+                  <Text className="text-xs font-semibold text-primary">View all</Text>
+                </Pressable>
+              )}
+            </CardHeader>
+            <CardContent className="gap-3 pt-0">
+              {recentActivities.map((act) => (
+                <View
+                  key={act.id}
+                  className="flex-row items-center justify-between py-2 border-b border-border/40 last:border-b-0"
+                >
+                  <View className="flex-row items-center gap-3 flex-1 pr-2">
+                    <Avatar size="sm">
+                      {act.avatarUrl && <AvatarImage source={{ uri: act.avatarUrl }} />}
+                      <AvatarFallback
+                        text={act.avatarInitials || act.title.slice(0, 2).toUpperCase()}
+                      />
+                    </Avatar>
+                    <View className="flex-1">
+                      <Text className="text-sm font-semibold text-foreground" numberOfLines={1}>
+                        {act.title}
+                      </Text>
+                      <Text className="text-xs text-muted" numberOfLines={1}>
+                        {act.subtitle} • {act.timestamp}
+                      </Text>
+                    </View>
+                  </View>
+
+                  <View className="items-end gap-1">
+                    {act.amount && (
+                      <Text className="text-sm font-bold text-foreground">
+                        {act.amount}
+                      </Text>
+                    )}
+                    {act.status && (
+                      <Badge variant={act.status.variant} size="sm">
+                        {act.status.label}
+                      </Badge>
+                    )}
+                  </View>
+                </View>
+              ))}
+            </CardContent>
+          </Card>
+        )}
+      </View>
+    </ScrollView>
+  );
+};

package/src/templates/dashboard/index.ts

@@ -0,0 +1 @@
+export * from "./DashboardTemplate";

package/src/templates/index.ts

@@ -0,0 +1,3 @@
+export * from "./auth";
+export * from "./dashboard";
+export * from "./settings";

package/src/templates/settings/SettingsTemplate.tsx

@@ -0,0 +1,226 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  Pressable,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../../components/text/text";
+import { Heading } from "../../components/text/heading";
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar/avatar";
+import { Badge } from "../../components/badge/badge";
+import { Card } from "../../components/card/card";
+import { Switch } from "../../components/switch/switch";
+import { Button } from "../../components/button/button";
+import { Separator } from "../../components/separator/separator";
+
+export interface SettingsTemplateProps extends ViewProps {
+  user: {
+    name: string;
+    email: string;
+    avatarUrl?: string;
+    plan?: string;
+  };
+  pushNotifications?: boolean;
+  onTogglePushNotifications?: (val: boolean) => void;
+  emailNotifications?: boolean;
+  onToggleEmailNotifications?: (val: boolean) => void;
+  isDarkMode?: boolean;
+  onToggleDarkMode?: (val: boolean) => void;
+  biometricsEnabled?: boolean;
+  onToggleBiometrics?: (val: boolean) => void;
+  onEditProfile?: () => void;
+  onChangePassword?: () => void;
+  onViewTerms?: () => void;
+  onViewPrivacy?: () => void;
+  onLogout?: () => void;
+  onDeleteAccount?: () => void;
+  className?: string;
+}
+
+export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
+  user,
+  pushNotifications = true,
+  onTogglePushNotifications,
+  emailNotifications = true,
+  onToggleEmailNotifications,
+  isDarkMode = false,
+  onToggleDarkMode,
+  biometricsEnabled = false,
+  onToggleBiometrics,
+  onEditProfile,
+  onChangePassword,
+  onViewTerms,
+  onViewPrivacy,
+  onLogout,
+  onDeleteAccount,
+  className,
+  ...props
+}) => {
+  return (
+    <ScrollView
+      {...props}
+      style={[{ flex: 1 }, (props as any).style]}
+      className={cn("flex-1 bg-background", className)}
+      contentContainerStyle={{ paddingBottom: 40 }}
+      showsVerticalScrollIndicator={false}
+    >
+      <View className="px-6 pt-6 gap-6">
+        <Heading level={2} className="text-2xl font-bold text-foreground">
+          Settings & Profile
+        </Heading>
+
+        {/* User Card */}
+        <Card className="p-4 flex-row items-center gap-4">
+          <Avatar size="lg">
+            {user.avatarUrl && <AvatarImage source={{ uri: user.avatarUrl }} />}
+            <AvatarFallback text={user.name.slice(0, 2).toUpperCase()} />
+          </Avatar>
+          <View className="flex-1">
+            <View className="flex-row items-center gap-2">
+              <Text className="text-base font-bold text-foreground">{user.name}</Text>
+              {user.plan && (
+                <Badge variant="primary" size="sm">
+                  {user.plan}
+                </Badge>
+              )}
+            </View>
+            <Text className="text-xs text-muted">{user.email}</Text>
+          </View>
+          {onEditProfile && (
+            <Button variant="outline" size="sm" onPress={onEditProfile}>
+              Edit
+            </Button>
+          )}
+        </Card>
+
+        {/* Preferences Section */}
+        <View className="gap-2">
+          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+            Preferences
+          </Text>
+          <Card className="divide-y divide-border/50">
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">
+                  Push Notifications
+                </Text>
+                <Text className="text-xs text-muted">
+                  Receive real-time alerts on your mobile device
+                </Text>
+              </View>
+              <Switch
+                checked={pushNotifications}
+                onCheckedChange={onTogglePushNotifications}
+              />
+            </View>
+
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">
+                  Email Notifications
+                </Text>
+                <Text className="text-xs text-muted">
+                  Weekly digests and activity summaries
+                </Text>
+              </View>
+              <Switch
+                checked={emailNotifications}
+                onCheckedChange={onToggleEmailNotifications}
+              />
+            </View>
+
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">Dark Theme</Text>
+                <Text className="text-xs text-muted">
+                  Enable high contrast dark mode appearance
+                </Text>
+              </View>
+              <Switch checked={isDarkMode} onCheckedChange={onToggleDarkMode} />
+            </View>
+
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">
+                  Biometric Login
+                </Text>
+                <Text className="text-xs text-muted">
+                  Use Face ID or fingerprint to authenticate
+                </Text>
+              </View>
+              <Switch
+                checked={biometricsEnabled}
+                onCheckedChange={onToggleBiometrics}
+              />
+            </View>
+          </Card>
+        </View>
+
+        {/* Security & Account Links */}
+        <View className="gap-2">
+          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+            Account & Security
+          </Text>
+          <Card className="divide-y divide-border/50">
+            {onChangePassword && (
+              <Pressable
+                onPress={onChangePassword}
+                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+              >
+                <Text className="text-sm font-semibold text-foreground">
+                  Change Password
+                </Text>
+                <Text className="text-muted text-xs">›</Text>
+              </Pressable>
+            )}
+
+            {onViewTerms && (
+              <Pressable
+                onPress={onViewTerms}
+                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+              >
+                <Text className="text-sm font-semibold text-foreground">
+                  Terms of Service
+                </Text>
+                <Text className="text-muted text-xs">›</Text>
+              </Pressable>
+            )}
+
+            {onViewPrivacy && (
+              <Pressable
+                onPress={onViewPrivacy}
+                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+              >
+                <Text className="text-sm font-semibold text-foreground">
+                  Privacy Policy
+                </Text>
+                <Text className="text-muted text-xs">›</Text>
+              </Pressable>
+            )}
+          </Card>
+        </View>
+
+        {/* Danger Zone */}
+        <View className="gap-3 pt-2">
+          {onLogout && (
+            <Button variant="outline" size="lg" onPress={onLogout}>
+              Log Out
+            </Button>
+          )}
+
+          {onDeleteAccount && (
+            <Button
+              variant="destructive"
+              size="lg"
+              onPress={onDeleteAccount}
+            >
+              Delete Account
+            </Button>
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+};

package/src/templates/settings/index.ts

@@ -0,0 +1 @@
+export * from "./SettingsTemplate";

package/src/theme/preset.ts

@@ -0,0 +1,45 @@
+import { tokens } from "./tokens";
+
+export { tokens };
+
+export const beyondUIPreset = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        primary: tokens.colors.primary,
+        secondary: tokens.colors.secondary,
+        danger: tokens.colors.danger,
+        destructive: tokens.colors.destructive,
+        success: tokens.colors.success,
+        warning: tokens.colors.warning,
+        neutral: tokens.colors.neutral,
+        background: tokens.colors.semantic.light.background,
+        foreground: tokens.colors.semantic.light.foreground,
+        card: {
+          DEFAULT: tokens.colors.semantic.light.card,
+          foreground: tokens.colors.semantic.light.cardForeground,
+        },
+        cardForeground: tokens.colors.semantic.light.cardForeground,
+        muted: {
+          DEFAULT: tokens.colors.semantic.light.mutedForeground,
+          foreground: tokens.colors.semantic.light.mutedForeground,
+        },
+        mutedForeground: tokens.colors.semantic.light.mutedForeground,
+        border: tokens.colors.semantic.light.border,
+        input: tokens.colors.semantic.light.input,
+      },
+      borderRadius: {
+        none: "0px",
+        sm: `${tokens.radius.sm}px`,
+        md: `${tokens.radius.md}px`,
+        lg: `${tokens.radius.lg}px`,
+        xl: `${tokens.radius.xl}px`,
+        "2xl": `${tokens.radius["2xl"]}px`,
+        full: "9999px",
+      },
+    },
+  },
+};
+
+export default beyondUIPreset;

package/src/theme/tokens.ts

@@ -0,0 +1,144 @@
+export const tokens = {
+  colors: {
+    primary: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554",
+      DEFAULT: "#2563eb",
+    },
+    secondary: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617",
+      DEFAULT: "#475569",
+    },
+    danger: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a",
+      DEFAULT: "#dc2626",
+    },
+    // Alias for shadcn / React Native convention compatibility
+    destructive: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a",
+      DEFAULT: "#dc2626",
+    },
+    success: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d",
+      950: "#052e16",
+      DEFAULT: "#16a34a",
+    },
+    warning: {
+      50: "#fffbeb",
+      100: "#fef3c7",
+      200: "#fde68a",
+      300: "#fcd34d",
+      400: "#fbbf24",
+      500: "#f59e0b",
+      600: "#d97706",
+      700: "#b45309",
+      800: "#92400e",
+      900: "#78350f",
+      950: "#451a03",
+      DEFAULT: "#d97706",
+    },
+    neutral: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712",
+    },
+    semantic: {
+      light: {
+        background: "#ffffff",
+        foreground: "#0f172a",
+        card: "#ffffff",
+        cardForeground: "#0f172a",
+        muted: "#f8fafc",
+        mutedForeground: "#64748b",
+        border: "#e2e8f0",
+        input: "#e2e8f0",
+      },
+      dark: {
+        background: "#090d16",
+        foreground: "#f8fafc",
+        card: "#0f172a",
+        cardForeground: "#f8fafc",
+        muted: "#1e293b",
+        mutedForeground: "#94a3b8",
+        border: "#334155",
+        input: "#334155",
+      },
+    },
+  },
+  radius: {
+    none: 0,
+    sm: 6,
+    md: 10,
+    lg: 14,
+    xl: 20,
+    "2xl": 28,
+    full: 9999,
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    "2xl": 32,
+    "3xl": 48,
+  },
+} as const;
+
+export type BeyondUITokens = typeof tokens;

package/src/types/nativewind-env.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="nativewind/types" />
+
+import "react-native";
+
+declare module "react-native" {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+    placeholderClassName?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+    contentContainerClassName?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+}