vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/app/(root)/(public)/(auth)/signup.tsx

@@ -0,0 +1,207 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Link, useRouter } from 'expo-router';
+import React, { useState } from 'react';
+import { type Control, useForm } from 'react-hook-form';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+import * as z from 'zod';
+
+import {
+  Button,
+  ControlledFloatingInput,
+  FocusAwareStatusBar,
+  handleError,
+  Text,
+  View,
+} from '@/components/ui';
+import { useToast } from '@/components/ui/utils';
+import { defaultCacheService } from '@/core/cache';
+import { useConvexAuth } from '@/features/authentication/services';
+import { translate } from '@/lib';
+
+const signUpSchema = z
+  .object({
+    name: z.string().optional(),
+    email: z
+      .string({
+        required_error: translate('auth.validation.email_required'),
+      })
+      .email(translate('auth.validation.email_invalid')),
+    password: z
+      .string({
+        required_error: translate('auth.validation.password_required'),
+      })
+      .min(8, translate('auth.validation.password_min_length')),
+    confirmPassword: z.string({
+      required_error: translate('auth.validation.confirm_password_required'),
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: translate('auth.validation.passwords_no_match'),
+    path: ['confirmPassword'],
+  });
+
+type SignUpFormData = z.infer<typeof signUpSchema>;
+
+const SignUpHeader = () => (
+  <View className="mb-8 items-center justify-center">
+    <Text testID="signup-title" className="pb-6 text-center text-4xl font-bold">
+      {translate('auth.signup.title')}
+    </Text>
+    <Text className="mb-6 max-w-xs text-center text-neutral-500">
+      {translate('auth.signup.subtitle')}
+    </Text>
+  </View>
+);
+
+const SignUpForm = ({
+  control,
+  onSubmit,
+  isLoading,
+}: {
+  control: Control<SignUpFormData>;
+  onSubmit: () => void;
+  isLoading: boolean;
+}) => (
+  <>
+    <ControlledFloatingInput
+      testID="name-input"
+      control={control}
+      name="name"
+      label={translate('auth.signup.name')}
+      placeholder={translate('auth.signup.name_placeholder')}
+      autoCapitalize="words"
+    />
+
+    <ControlledFloatingInput
+      testID="email-input"
+      control={control}
+      name="email"
+      label={translate('auth.signup.email')}
+      placeholder={translate('auth.signup.email_placeholder')}
+      keyboardType="email-address"
+      autoCapitalize="none"
+    />
+
+    <ControlledFloatingInput
+      testID="password-input"
+      control={control}
+      name="password"
+      label={translate('auth.signup.password')}
+      placeholder={translate('auth.signup.password_placeholder')}
+      secureTextEntry={true}
+    />
+
+    <ControlledFloatingInput
+      testID="confirm-password-input"
+      control={control}
+      name="confirmPassword"
+      label={translate('auth.signup.confirm_password')}
+      placeholder={translate('auth.signup.confirm_password_placeholder')}
+      secureTextEntry={true}
+    />
+
+    <Button
+      testID="signup-button"
+      label={translate('auth.signup.signup_button')}
+      onPress={onSubmit}
+      loading={isLoading}
+      disabled={isLoading}
+    />
+  </>
+);
+
+export default function SignUp() {
+  const router = useRouter();
+  const { signUpWithOtp, signIn } = useConvexAuth();
+  const [isLoading, setIsLoading] = useState(false);
+  const toast = useToast();
+
+  const { handleSubmit, control } = useForm<SignUpFormData>({
+    resolver: zodResolver(signUpSchema),
+  });
+
+  const onSubmit = async (data: SignUpFormData) => {
+    setIsLoading(true);
+    try {
+      const result = await signUpWithOtp({
+        name: data.name,
+        email: data.email,
+        password: data.password,
+      });
+
+      if (result.error) {
+        handleError(result.error, {
+          feature: 'auth.signup',
+          fallbackMessage: translate('auth.signup.signup_failed'),
+        });
+        return;
+      }
+
+      if (result.navigateToOtp) {
+        // Store password securely in cache instead of URL params
+        const tempKey = `signup_password_${data.email}_${Date.now()}`;
+        await defaultCacheService.setItem(tempKey, {
+          password: data.password,
+          name: data.name || '',
+          expiresAt: Date.now() + 10 * 60 * 1000, // 10 minutes expiration
+        });
+        toast.info(translate('auth.signup.check_email_message'));
+        router.push(
+          `/otp-verification?email=${encodeURIComponent(data.email)}&tempKey=${encodeURIComponent(tempKey)}`,
+        );
+      } else {
+        // Automatically sign in the user after successful signup
+        await signIn('password', {
+          email: data.email,
+          password: data.password,
+        });
+        // Check if this was likely an existing user (no OTP required for existing accounts)
+        toast.success(translate('auth.signup.welcome_back'));
+        router.replace('/(protected)/(tabs)');
+      }
+    } catch (error) {
+      handleError(error, {
+        feature: 'auth.signup',
+        fallbackMessage: translate('auth.signup.signup_failed'),
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <KeyboardAwareScrollView
+        style={{ flex: 1 }}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{
+          flexGrow: 1,
+          justifyContent: 'center',
+          padding: 8,
+        }}
+      >
+        <View className="flex-1 justify-center px-2 py-12">
+          <SignUpHeader />
+          <SignUpForm
+            control={control}
+            onSubmit={handleSubmit(onSubmit)}
+            isLoading={isLoading}
+          />
+          <View className="mt-6 flex-row items-center justify-center">
+            <Text className="-mr-4 text-lg">
+              {translate('auth.signup.have_account')}{' '}
+            </Text>
+            <Link href="/login" asChild>
+              <Button
+                testID="login-link"
+                variant="ghost"
+                label={translate('auth.signup.login')}
+              />
+            </Link>
+          </View>
+        </View>
+      </KeyboardAwareScrollView>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(public)/_layout.tsx

@@ -0,0 +1,60 @@
+import { Stack, usePathname, useRouter } from 'expo-router';
+import { useEffect, useRef } from 'react';
+
+import { useIsFirstTime } from '@/lib';
+import { useAuthClientStore } from '@/lib/state';
+
+const STACK_SCREEN_OPTIONS = Object.freeze({
+  headerShown: false,
+});
+
+export default function PublicLayout() {
+  const router = useRouter();
+  const isAuthenticated = useAuthClientStore((state) => state.isAuthenticated);
+  const authHydrated = useAuthClientStore((state) => !state.isLoading);
+  const hasRedirectedRef = useRef(false);
+  const onboardingRedirectRef = useRef(false);
+  const pathname = usePathname();
+  const isOnboardingRoute = pathname?.startsWith('/onboarding');
+  const [isFirstTime] = useIsFirstTime();
+
+  useEffect(() => {
+    if (!authHydrated) {
+      return;
+    }
+
+    if (isFirstTime && !isOnboardingRoute) {
+      if (!onboardingRedirectRef.current) {
+        onboardingRedirectRef.current = true;
+        router.replace('/onboarding/demo-one?returnTo=/(protected)/(tabs)');
+      }
+      return;
+    }
+
+    onboardingRedirectRef.current = false;
+
+    if (isAuthenticated && !isOnboardingRoute) {
+      if (!hasRedirectedRef.current) {
+        hasRedirectedRef.current = true;
+        router.replace('/(protected)/(tabs)');
+      }
+      return;
+    }
+
+    hasRedirectedRef.current = false;
+  }, [authHydrated, isAuthenticated, isFirstTime, isOnboardingRoute, router]);
+
+  if (!authHydrated) {
+    return null;
+  }
+
+  if (isFirstTime) {
+    return <Stack screenOptions={STACK_SCREEN_OPTIONS} />;
+  }
+
+  if (isAuthenticated && !isOnboardingRoute) {
+    return null;
+  }
+
+  return <Stack screenOptions={STACK_SCREEN_OPTIONS} />;
+}

package/2/apps/native/src/app/(root)/(public)/onboarding/demo-one.tsx

@@ -0,0 +1,5 @@
+/**
+ * Demo One Onboarding Route
+ * Re-exports the demo-one onboarding feature screen
+ */
+export { default } from '@/features/onboarding/demo-one/app';

package/2/apps/native/src/app/(root)/(public)/onboarding/demo-two.tsx

@@ -0,0 +1,52 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Button, FocusAwareStatusBar, Text, View } from '@/components/ui';
+import { info } from '@/core/logging';
+import { translate } from '@/lib';
+
+export default function Onboarding() {
+  const router = useRouter();
+  const params = useLocalSearchParams<{ returnTo?: string }>();
+  return (
+    <View className="flex h-full items-center justify-center">
+      <FocusAwareStatusBar />
+      <View className="justify-end">
+        <Text className="my-3 text-center text-5xl font-bold">
+          {translate('onboarding.app_title')}
+        </Text>
+        <Text className="mb-2 text-center text-lg text-neutral-600">
+          {translate('onboarding.app_subtitle')}
+        </Text>
+
+        <Text className="my-1 pt-6 text-left text-lg">
+          {translate('onboarding.feature_production_ready')}
+        </Text>
+        <Text className="my-1 text-left text-lg">
+          {translate('onboarding.feature_developer_experience')}
+        </Text>
+        <Text className="my-1 text-left text-lg">
+          {translate('onboarding.feature_minimal_code')}
+        </Text>
+        <Text className="my-1 text-left text-lg">
+          {translate('onboarding.feature_maintained_libraries')}
+        </Text>
+      </View>
+      <SafeAreaView className="mt-6">
+        <Button
+          label={translate('onboarding.lets_get_started')}
+          onPress={() => {
+            info('Completing onboarding', { feature: 'onboarding.complete' });
+            info('Navigating to login', { feature: 'onboarding.complete' });
+            const returnTo = params.returnTo as string | undefined;
+            if (returnTo) {
+              router.replace(returnTo as any);
+            } else {
+              router.replace('/login');
+            }
+          }}
+        />
+      </SafeAreaView>
+    </View>
+  );
+}

package/2/apps/native/src/app/(root)/(public)/onboarding/index.tsx

@@ -0,0 +1,82 @@
+import { router, Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { FeatureButton, FocusAwareStatusBar } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function OnboardingSelection() {
+  const theme = useThemeConfig();
+  const optionsTitle = translate('onboarding.options_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: optionsTitle,
+      headerShown: true,
+    }),
+    [optionsTitle],
+  );
+
+  const onboardingOptions = [
+    {
+      id: 'demo-one',
+      title: translate('onboarding.demo_one_title'),
+      icon: '🚀',
+      color: '#22C55E',
+      description: translate('onboarding.demo_one_description'),
+      route: '/onboarding/demo-one?returnTo=/(tabs)',
+      testID: 'onboarding-demo-one-option',
+    },
+    {
+      id: 'demo-two',
+      title: translate('onboarding.demo_two_title'),
+      icon: '✨',
+      color: '#06B6D4',
+      description: translate('onboarding.demo_two_description'),
+      route: '/onboarding/demo-two?returnTo=/(tabs)',
+      testID: 'onboarding-demo-two-option',
+    },
+    {
+      id: 'liftwell',
+      title: translate('onboarding.liftwell_title'),
+      icon: '🏋️',
+      color: '#8B5CF6',
+      description: translate('onboarding.liftwell_description'),
+      route: '/onboarding/liftwell?returnTo=/(tabs)',
+      testID: 'onboarding-liftwell-option',
+    },
+  ];
+
+  const handleOptionPress = (route: string) => {
+    router.push(route as any);
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+      <ScrollView
+        style={{ backgroundColor: theme.colors.background }}
+        className="flex-1"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          <View className="-mx-2 flex-row flex-wrap">
+            {onboardingOptions.map((option) => (
+              <View key={option.id} className="w-1/2 px-2 pb-4">
+                <FeatureButton
+                  title={option.title}
+                  icon={option.icon}
+                  color={option.color}
+                  description={option.description}
+                  testID={option.testID}
+                  onPress={() => handleOptionPress(option.route)}
+                />
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/_layout.tsx

@@ -0,0 +1,30 @@
+import { Stack } from 'expo-router';
+
+import { useAuthClientStore } from '@/lib/state';
+
+export const unstable_settings = {
+  initialRouteName: '(public)',
+};
+
+const STACK_SCREEN_OPTIONS = Object.freeze({
+  headerShown: false,
+});
+
+export default function RootLayout() {
+  const authHydrated = useAuthClientStore((state) => !state.isLoading);
+
+  // Wait for auth to be fully hydrated before making routing decisions
+  if (!authHydrated) {
+    return null; // Keep splash screen visible
+  }
+
+  return (
+    <Stack screenOptions={STACK_SCREEN_OPTIONS}>
+      {/* PUBLIC STACK - Only accessible when NOT authenticated */}
+      <Stack.Screen name="(public)" />
+
+      {/* MAIN STACK - Only accessible when authenticated */}
+      <Stack.Screen name="(protected)" />
+    </Stack>
+  );
+}

package/2/apps/native/src/app/+html.tsx

@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/*
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/*
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

package/2/apps/native/src/app/[...messing].tsx

@@ -0,0 +1,24 @@
+import { Link, Stack } from 'expo-router';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { translate } from '@/lib';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: translate('common.oops') }} />
+      <View className="flex-1 items-center justify-center p-5">
+        <Text className="text-xl font-bold">
+          {translate('common.not_found_title')}
+        </Text>
+
+        <Link href="/" className="mt-4 py-4">
+          <Text className="text-sm text-blue-500">
+            {translate('common.go_home')}
+          </Text>
+        </Link>
+      </View>
+    </>
+  );
+}

package/2/apps/native/src/app/_layout.tsx

@@ -0,0 +1,56 @@
+import '../../global.css';
+
+import { Slot, useRootNavigationState } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import * as SystemUI from 'expo-system-ui';
+import { useEffect } from 'react';
+import { Platform } from 'react-native';
+
+import { NavigationTracker } from '@/components/analytics/navigation-tracker';
+import { FocusAwareStatusBar } from '@/components/ui';
+import {
+  useQuickActionRouting,
+  useSetupQuickActions,
+} from '@/features/quick-actions';
+import { DEFAULT_QUICK_ACTIONS } from '@/features/quick-actions/config/default-actions';
+import { useSelectedLanguage } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+import { RootProviders } from '@/providers';
+
+export { ErrorBoundary } from 'expo-router';
+
+export const unstable_settings = {
+  initialRouteName: '(root)',
+};
+
+export default function RootLayout() {
+  const navigationState = useRootNavigationState();
+  useQuickActionRouting();
+  const theme = useThemeConfig();
+  useSetupQuickActions(DEFAULT_QUICK_ACTIONS);
+  const { language } = useSelectedLanguage();
+  const languageKey = language ?? 'en';
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      SystemUI.setBackgroundColorAsync(theme.colors.background);
+    }
+  }, [theme.colors.background]);
+
+  // Avoid rendering until navigation container is ready
+  if (!navigationState?.key) {
+    return null;
+  }
+
+  return (
+    <RootProviders key={languageKey}>
+      <StatusBar
+        style={theme.dark ? 'light' : 'dark'}
+        backgroundColor={theme.colors.background}
+      />
+      <FocusAwareStatusBar />
+      <Slot />
+      <NavigationTracker />
+    </RootProviders>
+  );
+}

package/2/apps/native/src/app/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

package/2/apps/native/src/components/advanced-ui/buttons/demo.tsx

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+
+import GlowingButton, { presets } from './glowing-button';
+
+const presetNames = Object.keys(presets) as (keyof typeof presets)[];
+
+export default function DemoGlowingButtons() {
+  return (
+    <View className="gap-y-12 py-12">
+      {presetNames.map((presetKey) => (
+        <GlowingButton
+          key={presetKey}
+          preset={presetKey}
+          label={`Preset: ${presetKey}`}
+        />
+      ))}
+    </View>
+  );
+}