@ramonclaudio/create-vexpo 0.1.0

package/dist/templates/default/app/(app)/(tabs)/(home)/index.tsx

@@ -0,0 +1,50 @@
+import { Host, ScrollView, VStack, Text, ContentUnavailableView } from "@expo/ui/swift-ui";
+import { foregroundStyle, kerning, padding, frame, tint } from "@expo/ui/swift-ui/modifiers";
+
+import { authClient } from "@/lib/auth-client";
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { useColors } from "@/hooks/use-theme";
+
+export default function HomeScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const { data: session } = authClient.useSession();
+
+  const name = session?.user?.name?.split(" ")[0] ?? "there";
+  const now = new Date();
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <ScrollView modifiers={[tint(colors.primary as string)]}>
+        <VStack
+          spacing={24}
+          alignment="leading"
+          modifiers={[padding({ horizontal: 20, top: 16, bottom: 40 })]}
+        >
+          <VStack
+            spacing={4}
+            alignment="leading"
+            modifiers={[frame({ maxWidth: Infinity, alignment: "leading" })]}
+          >
+            <Text
+              modifiers={[dfont({ size: 14 }), foregroundStyle(colors.mutedForeground as string)]}
+            >
+              <Text date={now} dateStyle="date" />
+            </Text>
+            <Text
+              modifiers={[dfont({ size: 32, weight: "bold", design: "rounded" }), kerning(-0.5)]}
+            >
+              Hey, {name}
+            </Text>
+          </VStack>
+
+          <ContentUnavailableView
+            title="Nothing here yet"
+            systemImage="square.dashed"
+            description="Home screen is ready to build."
+          />
+        </VStack>
+      </ScrollView>
+    </Host>
+  );
+}

package/dist/templates/default/app/(app)/(tabs)/(home,search)/_layout.tsx

@@ -0,0 +1,44 @@
+import { Stack, useSegments } from "expo-router";
+
+import { useColors } from "@/hooks/use-theme";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { HeaderTint } from "@/constants/theme";
+import { FontFamily } from "@/constants/layout";
+
+export const unstable_settings = {
+  home: { anchor: "index" },
+  search: { anchor: "index" },
+};
+
+export default function SharedLayout() {
+  const colors = useColors();
+  const reduceMotion = useReducedMotion();
+  const segments = useSegments() as string[];
+  const isSearch = segments[2] === "(search)";
+
+  return (
+    <Stack
+      screenOptions={{
+        headerTintColor: HeaderTint as string,
+        headerBlurEffect: "none",
+        headerShadowVisible: false,
+        headerLargeTitleShadowVisible: false,
+        headerLargeStyle: { backgroundColor: "transparent" },
+        headerTitleStyle: { fontFamily: FontFamily.semiBold },
+        headerLargeTitleStyle: { fontFamily: FontFamily.bold },
+        animation: reduceMotion ? "fade" : "default",
+        animationDuration: reduceMotion ? 150 : undefined,
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          title: isSearch ? "Search" : "Home",
+          headerShown: isSearch,
+          headerLargeTitle: false,
+          contentStyle: { backgroundColor: colors.background as string },
+        }}
+      />
+    </Stack>
+  );
+}

package/dist/templates/default/app/(app)/(tabs)/(search)/index.tsx

@@ -0,0 +1,247 @@
+import { useMemo, useState } from "react";
+import { router, Stack } from "expo-router";
+import {
+  Host,
+  ScrollView,
+  Button,
+  Text,
+  VStack,
+  HStack,
+  Spacer,
+  Image,
+  ContentUnavailableView,
+} from "@expo/ui/swift-ui";
+import {
+  background,
+  buttonStyle,
+  clipShape,
+  foregroundStyle,
+  frame,
+  padding,
+  scrollDismissesKeyboard,
+  tint,
+} from "@expo/ui/swift-ui/modifiers";
+import type { SFSymbol } from "sf-symbols-typescript";
+
+import { useDynamicFont } from "@/lib/dynamic-font";
+import { useColors } from "@/hooks/use-theme";
+import { useDebounce } from "@/hooks/use-debounce";
+import { useDebugEnabled } from "@/lib/preferences";
+import { haptics } from "@/lib/haptics";
+
+type Destination = {
+  title: string;
+  subtitle: string;
+  icon: SFSymbol;
+  href: Parameters<typeof router.push>[0];
+  keywords: string;
+};
+
+const DESTINATIONS: readonly Destination[] = [
+  {
+    title: "Home",
+    subtitle: "Recent activity and updates",
+    icon: "house.fill",
+    href: "/(app)/(tabs)/(home)",
+    keywords: "home dashboard activity feed",
+  },
+  {
+    title: "Settings",
+    subtitle: "Account, preferences, and devices",
+    icon: "gearshape.fill",
+    href: "/(app)/(tabs)/settings",
+    keywords: "settings options config",
+  },
+  {
+    title: "Preferences",
+    subtitle: "Theme, motion, haptics, dynamic type",
+    icon: "slider.horizontal.3",
+    href: "/(app)/(tabs)/settings/preferences",
+    keywords: "preferences theme dark light motion reduced haptics accessibility",
+  },
+  {
+    title: "Profile",
+    subtitle: "Name, username, email, bio, avatar",
+    icon: "person.crop.circle.fill",
+    href: "/(app)/profile",
+    keywords: "profile name username email bio avatar account",
+  },
+  {
+    title: "Active sessions",
+    subtitle: "Devices currently signed in",
+    icon: "list.bullet.rectangle.portrait.fill",
+    href: "/(app)/sessions",
+    keywords: "sessions devices logout signed in revoke",
+  },
+  {
+    title: "Linked accounts",
+    subtitle: "Apple, email, social providers",
+    icon: "link.circle.fill",
+    href: "/(app)/linked",
+    keywords: "linked apple sign in social providers oauth",
+  },
+  {
+    title: "Help",
+    subtitle: "FAQ and support",
+    icon: "questionmark.circle.fill",
+    href: "/(app)/help",
+    keywords: "help faq support contact email issue",
+  },
+  {
+    title: "Privacy",
+    subtitle: "How your data is handled",
+    icon: "lock.shield.fill",
+    href: "/(app)/privacy",
+    keywords: "privacy data tracking apple labels",
+  },
+];
+
+const DEBUG_DESTINATION: Destination = {
+  title: "Debug",
+  subtitle: "Version, build, OTA update, device, push diagnostics",
+  icon: "ant.circle.fill",
+  href: "/(app)/debug" as Destination["href"],
+  keywords: "debug diagnostics version build sdk runtime release update vendor push session",
+};
+
+const DEBOUNCE_MS = 120;
+
+function score(d: Destination, query: string): number {
+  if (query.length === 0) return 0;
+  const q = query.toLowerCase();
+  const title = d.title.toLowerCase();
+  if (title === q) return 100;
+  if (title.startsWith(q)) return 80;
+  if (title.includes(q)) return 60;
+  if (d.subtitle.toLowerCase().includes(q)) return 40;
+  if (d.keywords.includes(q)) return 20;
+  return 0;
+}
+
+export default function SearchScreen() {
+  const dfont = useDynamicFont();
+  const colors = useColors();
+  const [raw, setRaw] = useState("");
+  const query = useDebounce(raw, DEBOUNCE_MS);
+  const [debugOn] = useDebugEnabled();
+
+  const destinations = useMemo<readonly Destination[]>(
+    () => (debugOn ? [...DESTINATIONS, DEBUG_DESTINATION] : DESTINATIONS),
+    [debugOn],
+  );
+
+  const results = useMemo(() => {
+    if (query.trim().length === 0) return destinations;
+    const trimmed = query.trim();
+    return destinations
+      .map((d) => ({ d, s: score(d, trimmed) }))
+      .filter(({ s }) => s > 0)
+      .toSorted((a, b) => b.s - a.s)
+      .map(({ d }) => d);
+  }, [query, destinations]);
+
+  const open = (href: Destination["href"]) => {
+    haptics.light();
+    router.push(href);
+  };
+
+  const sectionLabelModifiers = [
+    dfont({ size: 13, weight: "semibold" }),
+    foregroundStyle(colors.mutedForeground as string),
+    padding({ horizontal: 8, top: 4 }),
+  ];
+
+  return (
+    <>
+      <Stack.SearchBar
+        placement="automatic"
+        placeholder="Search the app"
+        onChangeText={(e) => setRaw(e.nativeEvent.text)}
+      />
+      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+        <ScrollView
+          modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
+        >
+          <VStack
+            spacing={12}
+            alignment="leading"
+            modifiers={[padding({ horizontal: 24, top: 16, bottom: 40 })]}
+          >
+            {results.length === 0 ? (
+              <ContentUnavailableView
+                title="No results"
+                systemImage="magnifyingglass"
+                description={`Nothing matches "${query.trim()}"`}
+              />
+            ) : (
+              <VStack spacing={8} alignment="leading" modifiers={[frame({ maxWidth: Infinity })]}>
+                <Text modifiers={sectionLabelModifiers}>
+                  {query.trim() ? "RESULTS" : "JUMP TO"}
+                </Text>
+                {results.map((d) => (
+                  <Button
+                    key={d.href as string}
+                    modifiers={[
+                      buttonStyle("plain"),
+                      frame({ maxWidth: 10000 }),
+                      background(colors.muted as string),
+                      clipShape("capsule"),
+                    ]}
+                    onPress={() => open(d.href)}
+                  >
+                    <HStack
+                      spacing={14}
+                      alignment="center"
+                      modifiers={[
+                        frame({ maxWidth: 10000 }),
+                        padding({ horizontal: 16, vertical: 12 }),
+                      ]}
+                    >
+                      <Image systemName={d.icon} size={20} color={colors.foreground as string} />
+                      <VStack alignment="leading" spacing={2}>
+                        <Text
+                          modifiers={[
+                            dfont({ size: 16, weight: "medium" }),
+                            foregroundStyle(colors.foreground as string),
+                          ]}
+                        >
+                          {d.title}
+                        </Text>
+                        <Text
+                          modifiers={[
+                            dfont({ size: 13 }),
+                            foregroundStyle(colors.mutedForeground as string),
+                          ]}
+                        >
+                          {d.subtitle}
+                        </Text>
+                      </VStack>
+                      <Spacer />
+                      <Image
+                        systemName="chevron.right"
+                        size={13}
+                        color={colors.mutedForeground as string}
+                      />
+                    </HStack>
+                  </Button>
+                ))}
+              </VStack>
+            )}
+
+            {query.trim() === "" ? (
+              <Text
+                modifiers={[
+                  dfont({ size: 13 }),
+                  foregroundStyle(colors.mutedForeground as string),
+                  padding({ horizontal: 8, top: 4 }),
+                ]}
+              >
+                Type to find any screen.
+              </Text>
+            ) : null}
+          </VStack>
+        </ScrollView>
+      </Host>
+    </>
+  );
+}

package/dist/templates/default/app/(app)/(tabs)/_layout.tsx

@@ -0,0 +1,77 @@
+import { NativeTabs } from "expo-router/unstable-native-tabs";
+
+import { FontFamily, FontSize } from "@/constants/layout";
+import { useColors } from "@/hooks/use-theme";
+import { haptics } from "@/lib/haptics";
+import { LoadingScreen } from "@/components/ui/loading-screen";
+
+export function SuspenseFallback() {
+  return <LoadingScreen />;
+}
+
+export default function TabLayout() {
+  const colors = useColors();
+  return (
+    <NativeTabs
+      backgroundColor={colors.background}
+      blurEffect="systemDefault"
+      tintColor={colors.tabIconSelected}
+      iconColor={{
+        default: colors.tabIconDefault,
+        selected: colors.tabIconSelected,
+      }}
+      labelStyle={{
+        fontFamily: FontFamily.medium,
+        fontSize: FontSize.xs,
+      }}
+      sidebarAdaptable
+      minimizeBehavior="automatic"
+      shadowColor={colors.separator}
+      badgeBackgroundColor={colors.destructive}
+      screenListeners={
+        __DEV__
+          ? {
+              tabPress: (e) => {
+                console.log("[Tab]", e.target);
+              },
+            }
+          : undefined
+      }
+    >
+      <NativeTabs.Trigger
+        name="(home)"
+        contentStyle={{ backgroundColor: colors.background }}
+        listeners={{
+          tabPress: () => haptics.light(),
+        }}
+      >
+        <NativeTabs.Trigger.Icon sf={{ default: "house", selected: "house.fill" }} />
+        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
+        <NativeTabs.Trigger.Badge hidden />
+      </NativeTabs.Trigger>
+
+      <NativeTabs.Trigger
+        name="settings"
+        contentStyle={{ backgroundColor: colors.background as string }}
+        listeners={{
+          tabPress: () => haptics.light(),
+        }}
+      >
+        <NativeTabs.Trigger.Icon sf={{ default: "gearshape", selected: "gearshape.fill" }} />
+        <NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
+      </NativeTabs.Trigger>
+
+      <NativeTabs.Trigger
+        name="(search)"
+        role="search"
+        contentStyle={{ backgroundColor: colors.background as string }}
+        listeners={{
+          tabPress: () => haptics.light(),
+        }}
+      >
+        <NativeTabs.Trigger.Icon sf="magnifyingglass" />
+        <NativeTabs.Trigger.Label>Search</NativeTabs.Trigger.Label>
+      </NativeTabs.Trigger>
+    </NativeTabs>
+  );
+}

package/dist/templates/default/app/(app)/(tabs)/settings/_layout.tsx

@@ -0,0 +1,37 @@
+import { Stack } from "expo-router";
+
+import { useColors } from "@/hooks/use-theme";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
+import { HeaderTint } from "@/constants/theme";
+import { LoadingScreen } from "@/components/ui/loading-screen";
+
+export const unstable_settings = {
+  initialRouteName: "index",
+};
+
+export function SuspenseFallback() {
+  return <LoadingScreen />;
+}
+
+export default function SettingsLayout() {
+  const colors = useColors();
+  const reduceMotion = useReducedMotion();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: colors.background as string },
+        animation: reduceMotion ? "fade" : "default",
+        animationDuration: reduceMotion ? 150 : undefined,
+      }}
+    >
+      <Stack.Screen name="index" />
+      <Stack.Screen name="preferences" options={{ headerShown: true }}>
+        <Stack.Header transparent />
+        <Stack.Screen.Title style={{ color: HeaderTint as string }}>Preferences</Stack.Screen.Title>
+        <Stack.Screen.BackButton>Settings</Stack.Screen.BackButton>
+      </Stack.Screen>
+    </Stack>
+  );
+}