@beyondcorp/beyond-ui-native 0.1.2 → 0.1.4

package/src/templates/auth/SignInTemplate.tsx

@@ -0,0 +1,213 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../../components/text/text";
+import { Heading } from "../../components/text/heading";
+import { Input } from "../../components/input/input";
+import { Button } from "../../components/button/button";
+import { Checkbox } from "../../components/checkbox/checkbox";
+import { Alert, AlertDescription } from "../../components/alert/alert";
+import { Separator } from "../../components/separator/separator";
+
+export interface SignInTemplateProps {
+  title?: string;
+  subtitle?: string;
+  logo?: React.ReactNode;
+  onSubmit?: (data: { email: string; password: string; rememberMe: boolean }) => void;
+  onForgotPassword?: () => void;
+  onSignUpPress?: () => void;
+  onGooglePress?: () => void;
+  onApplePress?: () => void;
+  isLoading?: boolean;
+  error?: string | null;
+  className?: string;
+}
+
+export const SignInTemplate: React.FC<SignInTemplateProps> = ({
+  title = "Welcome Back",
+  subtitle = "Sign in to your Beyond account to continue",
+  logo,
+  onSubmit,
+  onForgotPassword,
+  onSignUpPress,
+  onGooglePress,
+  onApplePress,
+  isLoading = false,
+  error,
+  className,
+}) => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [rememberMe, setRememberMe] = React.useState(false);
+  const [emailError, setEmailError] = React.useState<string | undefined>();
+  const [passwordError, setPasswordError] = React.useState<string | undefined>();
+
+  const handleSubmit = () => {
+    let valid = true;
+    setEmailError(undefined);
+    setPasswordError(undefined);
+
+    if (!email || !email.includes("@")) {
+      setEmailError("Please enter a valid email address");
+      valid = false;
+    }
+    if (!password || password.length < 6) {
+      setPasswordError("Password must be at least 6 characters");
+      valid = false;
+    }
+
+    if (valid) {
+      onSubmit?.({ email, password, rememberMe });
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+      className={cn("flex-1 bg-background", className)}
+    >
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
+        className="px-6 py-8"
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="w-full max-w-md mx-auto gap-6">
+          {/* Logo & Header */}
+          <View className="items-center gap-2">
+            {logo && <View className="mb-2">{logo}</View>}
+            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+              {title}
+            </Heading>
+            <Text className="text-muted text-center text-base">
+              {subtitle}
+            </Text>
+          </View>
+
+          {/* Error Banner */}
+          {error && (
+            <Alert variant="danger">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Fields */}
+          <View className="gap-4">
+            <Input
+              label="Email Address"
+              placeholder="you@company.com"
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoCorrect={false}
+              value={email}
+              onChangeText={(text) => {
+                setEmail(text);
+                if (emailError) setEmailError(undefined);
+              }}
+              error={emailError}
+            />
+
+            <View className="gap-1">
+              <Input
+                label="Password"
+                placeholder="••••••••"
+                secureTextEntry={!showPassword}
+                value={password}
+                onChangeText={(text) => {
+                  setPassword(text);
+                  if (passwordError) setPasswordError(undefined);
+                }}
+                error={passwordError}
+                rightElement={
+                  <Pressable onPress={() => setShowPassword((p) => !p)} className="p-1">
+                    <Text className="text-xs text-muted font-semibold">
+                      {showPassword ? "HIDE" : "SHOW"}
+                    </Text>
+                  </Pressable>
+                }
+              />
+            </View>
+
+            {/* Remember & Forgot */}
+            <View className="flex-row items-center justify-between py-1">
+              <View className="flex-row items-center gap-2">
+                <Checkbox checked={rememberMe} onCheckedChange={setRememberMe} />
+                <Text className="text-sm text-foreground">Remember me</Text>
+              </View>
+
+              {onForgotPassword && (
+                <Pressable onPress={onForgotPassword}>
+                  <Text className="text-sm font-semibold text-primary">
+                    Forgot password?
+                  </Text>
+                </Pressable>
+              )}
+            </View>
+
+            {/* Submit */}
+            <Button
+              variant="primary"
+              size="lg"
+              loading={isLoading}
+              onPress={handleSubmit}
+              className="mt-2"
+            >
+              Sign In
+            </Button>
+          </View>
+
+          {/* Social Logins */}
+          {(onGooglePress || onApplePress) && (
+            <View className="gap-4">
+              <View className="flex-row items-center gap-3">
+                <Separator className="flex-1" />
+                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Separator className="flex-1" />
+              </View>
+
+              <View className="flex-row gap-3">
+                {onGooglePress && (
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onPress={onGooglePress}
+                  >
+                    Google
+                  </Button>
+                )}
+                {onApplePress && (
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onPress={onApplePress}
+                  >
+                    Apple
+                  </Button>
+                )}
+              </View>
+            </View>
+          )}
+
+          {/* Switch to SignUp */}
+          {onSignUpPress && (
+            <View className="flex-row justify-center items-center gap-1.5 pt-2">
+              <Text className="text-sm text-muted">Don't have an account?</Text>
+              <Pressable onPress={onSignUpPress}>
+                <Text className="text-sm font-bold text-primary">Sign Up</Text>
+              </Pressable>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};

package/src/templates/auth/SignUpTemplate.tsx

@@ -0,0 +1,233 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../../components/text/text";
+import { Heading } from "../../components/text/heading";
+import { Input } from "../../components/input/input";
+import { Button } from "../../components/button/button";
+import { Checkbox } from "../../components/checkbox/checkbox";
+import { Alert, AlertDescription } from "../../components/alert/alert";
+import { Separator } from "../../components/separator/separator";
+
+export interface SignUpTemplateProps {
+  title?: string;
+  subtitle?: string;
+  logo?: React.ReactNode;
+  onSubmit?: (data: {
+    fullName: string;
+    email: string;
+    password: string;
+    agreeToTerms: boolean;
+  }) => void;
+  onSignInPress?: () => void;
+  onGooglePress?: () => void;
+  onApplePress?: () => void;
+  isLoading?: boolean;
+  error?: string | null;
+  className?: string;
+}
+
+export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
+  title = "Create Account",
+  subtitle = "Get started with your free Beyond account",
+  logo,
+  onSubmit,
+  onSignInPress,
+  onGooglePress,
+  onApplePress,
+  isLoading = false,
+  error,
+  className,
+}) => {
+  const [fullName, setFullName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [agreeToTerms, setAgreeToTerms] = React.useState(false);
+
+  const [nameError, setNameError] = React.useState<string | undefined>();
+  const [emailError, setEmailError] = React.useState<string | undefined>();
+  const [passwordError, setPasswordError] = React.useState<string | undefined>();
+  const [termsError, setTermsError] = React.useState<string | undefined>();
+
+  const handleSubmit = () => {
+    let valid = true;
+    setNameError(undefined);
+    setEmailError(undefined);
+    setPasswordError(undefined);
+    setTermsError(undefined);
+
+    if (!fullName.trim()) {
+      setNameError("Full name is required");
+      valid = false;
+    }
+    if (!email || !email.includes("@")) {
+      setEmailError("Please enter a valid email address");
+      valid = false;
+    }
+    if (!password || password.length < 8) {
+      setPasswordError("Password must be at least 8 characters");
+      valid = false;
+    }
+    if (!agreeToTerms) {
+      setTermsError("You must agree to the Terms of Service");
+      valid = false;
+    }
+
+    if (valid) {
+      onSubmit?.({ fullName, email, password, agreeToTerms });
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+      className={cn("flex-1 bg-background", className)}
+    >
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
+        className="px-6 py-8"
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="w-full max-w-md mx-auto gap-6">
+          {/* Header */}
+          <View className="items-center gap-2">
+            {logo && <View className="mb-2">{logo}</View>}
+            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+              {title}
+            </Heading>
+            <Text className="text-muted text-center text-base">
+              {subtitle}
+            </Text>
+          </View>
+
+          {/* Error Alert */}
+          {error && (
+            <Alert variant="danger">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {/* Form */}
+          <View className="gap-4">
+            <Input
+              label="Full Name"
+              placeholder="Mark Otto"
+              value={fullName}
+              onChangeText={(text) => {
+                setFullName(text);
+                if (nameError) setNameError(undefined);
+              }}
+              error={nameError}
+            />
+
+            <Input
+              label="Email Address"
+              placeholder="you@company.com"
+              keyboardType="email-address"
+              autoCapitalize="none"
+              value={email}
+              onChangeText={(text) => {
+                setEmail(text);
+                if (emailError) setEmailError(undefined);
+              }}
+              error={emailError}
+            />
+
+            <Input
+              label="Password"
+              placeholder="At least 8 characters"
+              secureTextEntry
+              value={password}
+              onChangeText={(text) => {
+                setPassword(text);
+                if (passwordError) setPasswordError(undefined);
+              }}
+              error={passwordError}
+            />
+
+            {/* Terms checkbox */}
+            <View className="gap-1">
+              <View className="flex-row items-center gap-2 pt-1">
+                <Checkbox
+                  checked={agreeToTerms}
+                  onCheckedChange={(checked) => {
+                    setAgreeToTerms(checked);
+                    if (termsError) setTermsError(undefined);
+                  }}
+                />
+                <Text className="text-sm text-foreground flex-1">
+                  I agree to the Terms of Service & Privacy Policy
+                </Text>
+              </View>
+              {termsError && (
+                <Text className="text-xs text-danger font-medium">{termsError}</Text>
+              )}
+            </View>
+
+            {/* Submit */}
+            <Button
+              variant="primary"
+              size="lg"
+              loading={isLoading}
+              onPress={handleSubmit}
+              className="mt-2"
+            >
+              Create Account
+            </Button>
+          </View>
+
+          {/* Social Logins */}
+          {(onGooglePress || onApplePress) && (
+            <View className="gap-4">
+              <View className="flex-row items-center gap-3">
+                <Separator className="flex-1" />
+                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Separator className="flex-1" />
+              </View>
+
+              <View className="flex-row gap-3">
+                {onGooglePress && (
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onPress={onGooglePress}
+                  >
+                    Google
+                  </Button>
+                )}
+                {onApplePress && (
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onPress={onApplePress}
+                  >
+                    Apple
+                  </Button>
+                )}
+              </View>
+            </View>
+          )}
+
+          {/* Back to SignIn */}
+          {onSignInPress && (
+            <View className="flex-row justify-center items-center gap-1.5 pt-2">
+              <Text className="text-sm text-muted">Already have an account?</Text>
+              <Pressable onPress={onSignInPress}>
+                <Text className="text-sm font-bold text-primary">Sign In</Text>
+              </Pressable>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};

package/src/templates/auth/index.ts

@@ -0,0 +1,3 @@
+export * from "./SignInTemplate";
+export * from "./SignUpTemplate";
+export * from "./ForgotPasswordTemplate";

package/src/templates/dashboard/DashboardTemplate.tsx

@@ -0,0 +1,204 @@
+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-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wider">
+              {userRole}
+            </Text>
+            <Heading level={3} className="text-xl font-bold text-neutral-900 dark:text-neutral-50">
+              Hello, {userName} 👋
+            </Heading>
+          </View>
+        </View>
+
+        {onNotificationPress && (
+          <Pressable
+            onPress={onNotificationPress}
+            className="w-10 h-10 rounded-full border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 items-center justify-center relative active:opacity-70"
+          >
+            <Text className="text-base text-neutral-900 dark:text-neutral-100">🔔</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-neutral-500 dark:text-neutral-400 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}
+                  >
+                    {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-neutral-500 dark:text-neutral-400 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-600 dark:text-primary-400">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-neutral-200 dark:border-neutral-800 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-neutral-900 dark:text-neutral-100" numberOfLines={1}>
+                        {act.title}
+                      </Text>
+                      <Text className="text-xs text-neutral-500 dark:text-neutral-400" numberOfLines={1}>
+                        {act.subtitle} • {act.timestamp}
+                      </Text>
+                    </View>
+                  </View>
+
+                  <View className="items-end gap-1">
+                    {act.amount && (
+                      <Text className="text-sm font-bold text-neutral-900 dark:text-neutral-100">
+                        {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";