@beyondcorp/beyond-ui-native 0.1.1 → 0.1.3

package/src/providers/BeyondUIProvider.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { View, useColorScheme as useRNColorScheme } from "react-native";
+import { PortalHost } from "@rn-primitives/portal";
+import { ToastContext, ToastItem, ToastContextValue } from "../components/toast/types";
+import { ToastContainer } from "../components/toast/toast";
+
+export type ColorScheme = "light" | "dark" | "system";
+
+export interface BeyondUIContextValue {
+  colorScheme: "light" | "dark";
+  setColorScheme: (scheme: ColorScheme) => void;
+  toggleColorScheme: () => void;
+}
+
+export const BeyondUIContext = React.createContext<BeyondUIContextValue>({
+  colorScheme: "light",
+  setColorScheme: () => {},
+  toggleColorScheme: () => {},
+});
+
+export function useBeyondUI() {
+  return React.useContext(BeyondUIContext);
+}
+
+export interface BeyondUIProviderProps {
+  children: React.ReactNode;
+  defaultColorScheme?: ColorScheme;
+}
+
+export function BeyondUIProvider({
+  children,
+  defaultColorScheme = "system",
+}: BeyondUIProviderProps) {
+  const systemScheme = useRNColorScheme() ?? "light";
+  const [selectedScheme, setSelectedScheme] = React.useState<ColorScheme>(defaultColorScheme);
+  const [toasts, setToasts] = React.useState<ToastItem[]>([]);
+
+  const activeScheme: "light" | "dark" =
+    selectedScheme === "system" ? systemScheme : selectedScheme;
+
+  const toggleColorScheme = React.useCallback(() => {
+    setSelectedScheme((prev) => {
+      const current = prev === "system" ? systemScheme : prev;
+      return current === "dark" ? "light" : "dark";
+    });
+  }, [systemScheme]);
+
+  const dismissToast = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = React.useCallback((toast: Omit<ToastItem, "id">) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { ...toast, id }]);
+    return id;
+  }, []);
+
+  const toastContextValue: ToastContextValue = React.useMemo(
+    () => ({
+      toasts,
+      show: showToast,
+      dismiss: dismissToast,
+      success: (title, description) =>
+        showToast({ title, description, variant: "success" }),
+      danger: (title, description) =>
+        showToast({ title, description, variant: "danger" }),
+      error: (title, description) =>
+        showToast({ title, description, variant: "danger" }),
+      warning: (title, description) =>
+        showToast({ title, description, variant: "warning" }),
+      info: (title, description) =>
+        showToast({ title, description, variant: "info" }),
+    }),
+    [toasts, showToast, dismissToast]
+  );
+
+  const contextValue: BeyondUIContextValue = React.useMemo(
+    () => ({
+      colorScheme: activeScheme,
+      setColorScheme: setSelectedScheme,
+      toggleColorScheme,
+    }),
+    [activeScheme, toggleColorScheme]
+  );
+
+  return (
+    <BeyondUIContext.Provider value={contextValue}>
+      <ToastContext.Provider value={toastContextValue}>
+        <View
+          style={{ flex: 1 }}
+          className={activeScheme === "dark" ? "dark flex-1" : "flex-1"}
+        >
+          {children}
+          <PortalHost />
+          <ToastContainer toasts={toasts} onDismiss={dismissToast} />
+        </View>
+      </ToastContext.Provider>
+    </BeyondUIContext.Provider>
+  );
+}

package/src/templates/auth/ForgotPasswordTemplate.tsx

@@ -0,0 +1,132 @@
+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 { Alert, AlertDescription } from "../../components/alert/alert";
+
+export interface ForgotPasswordTemplateProps {
+  title?: string;
+  subtitle?: string;
+  onSubmit?: (data: { email: string }) => void;
+  onBackToSignIn?: () => void;
+  isLoading?: boolean;
+  isSuccess?: boolean;
+  error?: string | null;
+  className?: string;
+}
+
+export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
+  title = "Reset Password",
+  subtitle = "Enter your email address and we'll send you recovery instructions",
+  onSubmit,
+  onBackToSignIn,
+  isLoading = false,
+  isSuccess = false,
+  error,
+  className,
+}) => {
+  const [email, setEmail] = React.useState("");
+  const [emailError, setEmailError] = React.useState<string | undefined>();
+
+  const handleSubmit = () => {
+    if (!email || !email.includes("@")) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+    setEmailError(undefined);
+    onSubmit?.({ email });
+  };
+
+  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">
+          <View className="items-center gap-2">
+            <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 variant="danger">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {isSuccess ? (
+            <View className="gap-4">
+              <Alert variant="success">
+                <AlertDescription>
+                  Password reset link sent! Check your email inbox.
+                </AlertDescription>
+              </Alert>
+
+              {onBackToSignIn && (
+                <Button variant="primary" size="lg" onPress={onBackToSignIn}>
+                  Back to Sign In
+                </Button>
+              )}
+            </View>
+          ) : (
+            <View className="gap-4">
+              <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}
+              />
+
+              <Button
+                variant="primary"
+                size="lg"
+                loading={isLoading}
+                onPress={handleSubmit}
+                className="mt-2"
+              >
+                Send Reset Link
+              </Button>
+
+              {onBackToSignIn && (
+                <View className="flex-row justify-center items-center gap-1.5 pt-2">
+                  <Pressable onPress={onBackToSignIn}>
+                    <Text className="text-sm font-semibold text-primary">
+                      Back to Sign In
+                    </Text>
+                  </Pressable>
+                </View>
+              )}
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};

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";