@ramonclaudio/create-vexpo 0.1.0 → 0.1.2

package/dist/templates/default/{app → src/app}/(app)/help.tsx

@@ -11,20 +11,22 @@ import {
   Spacer,
   Image,
   Text,
-  ContentUnavailableView,
+  DisclosureGroup,
 } from "@expo/ui/swift-ui";
 import {
+  accessibilityHidden,
   background,
   buttonStyle,
   clipShape,
   cornerRadius,
   foregroundStyle,
   frame,
-  onTapGesture,
   padding,
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
+import { ContentUnavailable } from "@/components/ui/content-unavailable";
 import { Button as ButtonTokens } from "@/constants/layout";
 
 import { ErrorText } from "@/components/ui/status-text";
@@ -41,10 +43,12 @@ const support = (Constants.expoConfig?.extra?.support ?? {}) as SupportConfig;
 
 const FAQ_ITEMS = [
   {
+    id: "delete-account",
     question: "How do I delete my account?",
     answer: "Go to Settings, then Delete Account. This will permanently remove all your data.",
   },
   {
+    id: "notifications",
     question: "Why aren't notifications working?",
     answer:
       "Make sure notifications are enabled in Settings, then Notifications. You must use a physical device.",
@@ -53,10 +57,15 @@ const FAQ_ITEMS = [
 
 export default function HelpScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const [searchText, setSearchText] = useState("");
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-  const [emailError, setEmailError] = useState<string | null>(null);
+  const [linkError, setLinkError] = useState<string | null>(null);
+  const toggleExpanded = (question: string, next: boolean) => {
+    haptics.selection();
+    setExpanded((m) => ({ ...m, [question]: next }));
+  };
 
   const filteredFaq = searchText
     ? FAQ_ITEMS.filter(
@@ -68,41 +77,51 @@ export default function HelpScreen() {
 
   const issuesUrl = support.issuesUrl || support.githubUrl;
 
-  const handleOpenIssues = () => {
+  const handleOpenIssues = async () => {
     if (!issuesUrl) return;
     haptics.light();
-    openURL(issuesUrl);
+    setLinkError(null);
+    const canOpen = await canOpenURL(issuesUrl);
+    if (canOpen) {
+      openURL(issuesUrl);
+    } else {
+      haptics.error();
+      setLinkError("Couldn't open the issues page.");
+    }
   };
 
   const handleOpenEmail = async () => {
     if (!support.email) return;
     haptics.light();
-    setEmailError(null);
-    const url = `mailto:${support.email}?subject=App Support`;
+    setLinkError(null);
+    const url = `mailto:${support.email}?subject=${encodeURIComponent("App Support")}`;
     const canOpen = await canOpenURL(url);
     if (canOpen) {
       openURL(url);
     } else {
       haptics.error();
-      setEmailError(`No email app configured. Contact ${support.email} directly.`);
+      setLinkError(`No email app configured. Contact ${support.email} directly.`);
     }
   };
 
   type SFSymbol = NonNullable<ComponentProps<typeof Image>["systemName"]>;
 
   const rowButton = ({
+    testID,
     label,
     systemImage,
     onPress,
   }: {
+    testID: string;
     label: string;
     systemImage: SFSymbol;
     onPress: () => void;
   }) => (
     <Button
+      testID={testID}
       modifiers={[
         buttonStyle("plain"),
-        frame({ maxWidth: 10000 }),
+        frame({ maxWidth: Infinity }),
         background(colors.muted as string),
         clipShape("capsule"),
       ]}
@@ -112,11 +131,16 @@ export default function HelpScreen() {
         spacing={12}
         alignment="center"
         modifiers={[
-          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+          frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
           padding({ horizontal: 16 }),
         ]}
       >
-        <Image systemName={systemImage} size={18} color={colors.foreground as string} />
+        <Image
+          systemName={systemImage}
+          size={symbolSize(18)}
+          color={colors.foreground as string}
+          modifiers={[accessibilityHidden(true)]}
+        />
         <Text
           modifiers={[
             dfont({ size: 16, weight: "medium" }),
@@ -126,7 +150,12 @@ export default function HelpScreen() {
           {label}
         </Text>
         <Spacer />
-        <Image systemName="chevron.right" size={13} color={colors.mutedForeground as string} />
+        <Image
+          systemName="chevron.right"
+          size={symbolSize(13)}
+          color={colors.mutedForeground as string}
+          modifiers={[accessibilityHidden(true)]}
+        />
       </HStack>
     </Button>
   );
@@ -148,19 +177,20 @@ export default function HelpScreen() {
           />
         </Stack.Toolbar>
       ) : null}
-      <Host style={{ flex: 1, backgroundColor: colors.background }}>
+      <Host testID="help-screen" style={{ flex: 1, backgroundColor: colors.background }}>
         <ScrollView modifiers={[tint(colors.primary as string)]}>
           <VStack
             spacing={12}
             alignment="leading"
             modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
           >
-            {emailError ? <ErrorText>{emailError}</ErrorText> : null}
+            {linkError ? <ErrorText testID="help-link-error">{linkError}</ErrorText> : null}
 
             {(support.email || issuesUrl) && (
               <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
                 {support.email
                   ? rowButton({
+                      testID: "help-email-support",
                       label: "Email Support",
                       systemImage: "envelope.fill",
                       onPress: handleOpenEmail,
@@ -168,6 +198,7 @@ export default function HelpScreen() {
                   : null}
                 {issuesUrl
                   ? rowButton({
+                      testID: "help-report-issue",
                       label: "Report an Issue",
                       systemImage: "exclamationmark.bubble.fill",
                       onPress: handleOpenIssues,
@@ -177,7 +208,8 @@ export default function HelpScreen() {
             )}
 
             {filteredFaq.length === 0 ? (
-              <ContentUnavailableView
+              <ContentUnavailable
+                testID="help-faq-empty"
                 title="No results"
                 systemImage="magnifyingglass"
                 description="Try a different search term"
@@ -185,6 +217,7 @@ export default function HelpScreen() {
             ) : (
               <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
                 <Text
+                  testID="help-faq-heading"
                   modifiers={[
                     dfont({ size: 13, weight: "semibold" }),
                     foregroundStyle(colors.mutedForeground as string),
@@ -193,57 +226,36 @@ export default function HelpScreen() {
                 >
                   FREQUENTLY ASKED
                 </Text>
-                {filteredFaq.map((item) => {
-                  const isOpen = !!expanded[item.question];
-                  return (
-                    <VStack
-                      key={item.question}
-                      alignment="leading"
-                      spacing={isOpen ? 8 : 0}
-                      modifiers={[
-                        frame({ maxWidth: 10000 }),
-                        background(colors.muted as string),
-                        cornerRadius(20),
-                        padding({ horizontal: 20, vertical: 12 }),
-                        onTapGesture(() => {
-                          haptics.selection();
-                          setExpanded((m) => ({ ...m, [item.question]: !m[item.question] }));
-                        }),
-                      ]}
+                {filteredFaq.map((item) => (
+                  <VStack
+                    key={item.question}
+                    alignment="leading"
+                    modifiers={[
+                      frame({ maxWidth: Infinity }),
+                      padding({ horizontal: 20, vertical: 4 }),
+                      background(colors.muted as string),
+                      cornerRadius(20),
+                    ]}
+                  >
+                    <DisclosureGroup
+                      testID={`help-faq-${item.id}`}
+                      label={item.question}
+                      isExpanded={!!expanded[item.question]}
+                      onIsExpandedChange={(v) => toggleExpanded(item.question, v)}
+                      modifiers={[dfont({ size: 16, weight: "medium" })]}
                     >
-                      <HStack
-                        spacing={12}
-                        alignment="center"
-                        modifiers={[frame({ maxWidth: 10000 })]}
+                      <Text
+                        modifiers={[
+                          dfont({ size: 14 }),
+                          foregroundStyle(colors.mutedForeground as string),
+                          padding({ vertical: 8 }),
+                        ]}
                       >
-                        <Text
-                          modifiers={[
-                            dfont({ size: 15, weight: "medium" }),
-                            foregroundStyle(colors.foreground as string),
-                          ]}
-                        >
-                          {item.question}
-                        </Text>
-                        <Spacer />
-                        <Image
-                          systemName={isOpen ? "chevron.up" : "chevron.down"}
-                          size={13}
-                          color={colors.mutedForeground as string}
-                        />
-                      </HStack>
-                      {isOpen ? (
-                        <Text
-                          modifiers={[
-                            dfont({ size: 14 }),
-                            foregroundStyle(colors.mutedForeground as string),
-                          ]}
-                        >
-                          {item.answer}
-                        </Text>
-                      ) : null}
-                    </VStack>
-                  );
-                })}
+                        {item.answer}
+                      </Text>
+                    </DisclosureGroup>
+                  </VStack>
+                ))}
               </VStack>
             )}
           </VStack>

package/dist/templates/default/{app → src/app}/(app)/linked.tsx

@@ -1,13 +1,5 @@
 import { useLocalSearchParams } from "expo-router";
-import {
-  Host,
-  ScrollView,
-  Text,
-  VStack,
-  HStack,
-  Spacer,
-  ContentUnavailableView,
-} from "@expo/ui/swift-ui";
+import { Host, ScrollView, Text, VStack, LabeledContent } from "@expo/ui/swift-ui";
 import {
   background,
   cornerRadius,
@@ -20,6 +12,7 @@ import {
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
 
+import { ContentUnavailable } from "@/components/ui/content-unavailable";
 import { useColors } from "@/hooks/use-theme";
 
 export default function LinkedScreen() {
@@ -30,7 +23,7 @@ export default function LinkedScreen() {
   const entries = Object.entries(params).filter(([, v]) => v != null);
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="linked-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView
         modifiers={[scrollDismissesKeyboard("interactively"), tint(colors.primary as string)]}
       >
@@ -40,7 +33,7 @@ export default function LinkedScreen() {
           modifiers={[padding({ horizontal: 24, top: 24, bottom: 40 })]}
         >
           <VStack spacing={6} alignment="leading">
-            <Text modifiers={[dfont({ size: 22, weight: "bold" })]}>
+            <Text testID="linked-title" modifiers={[dfont({ size: 22, weight: "bold" })]}>
               You got here via a deep link
             </Text>
             <Text
@@ -65,31 +58,31 @@ export default function LinkedScreen() {
                 spacing={0}
                 alignment="leading"
                 modifiers={[
-                  frame({ maxWidth: 10000 }),
+                  frame({ maxWidth: Infinity }),
                   background(colors.muted as string),
                   cornerRadius(20),
                 ]}
               >
                 {entries.map(([key, value]) => (
-                  <HStack
+                  <LabeledContent
                     key={key}
-                    spacing={12}
-                    alignment="center"
+                    label={
+                      <Text
+                        modifiers={[
+                          dfont({ size: 15 }),
+                          foregroundStyle(colors.mutedForeground as string),
+                        ]}
+                      >
+                        {key}
+                      </Text>
+                    }
                     modifiers={[
-                      frame({ maxWidth: 10000 }),
+                      frame({ maxWidth: Infinity }),
                       padding({ horizontal: 16, vertical: 12 }),
                     ]}
                   >
                     <Text
-                      modifiers={[
-                        dfont({ size: 15 }),
-                        foregroundStyle(colors.mutedForeground as string),
-                      ]}
-                    >
-                      {key}
-                    </Text>
-                    <Spacer />
-                    <Text
+                      testID={`linked-param-${key}`}
                       modifiers={[
                         dfont({ size: 13, design: "monospaced" }),
                         foregroundStyle(colors.foreground as string),
@@ -98,12 +91,13 @@ export default function LinkedScreen() {
                     >
                       {Array.isArray(value) ? value.join(", ") : String(value)}
                     </Text>
-                  </HStack>
+                  </LabeledContent>
                 ))}
               </VStack>
             </VStack>
           ) : (
-            <ContentUnavailableView
+            <ContentUnavailable
+              testID="linked-empty"
               title="No params"
               systemImage="link.badge.plus"
               description="This deep link didn't include any parameters."

package/dist/templates/default/{app → src/app}/(app)/privacy.tsx

@@ -12,6 +12,8 @@ import {
   Toggle,
 } from "@expo/ui/swift-ui";
 import {
+  accessibilityHidden,
+  accessibilityLabel,
   background,
   buttonStyle,
   clipShape,
@@ -21,6 +23,7 @@ import {
   tint,
 } from "@expo/ui/swift-ui/modifiers";
 import { useDynamicFont } from "@/lib/dynamic-font";
+import { useSymbolSize } from "@/lib/dynamic-symbol-size";
 import { Button as ButtonTokens } from "@/constants/layout";
 
 import { haptics } from "@/lib/haptics";
@@ -28,6 +31,7 @@ import { useColors } from "@/hooks/use-theme";
 
 export default function PrivacyScreen() {
   const dfont = useDynamicFont();
+  const symbolSize = useSymbolSize();
   const colors = useColors();
   const [analyticsEnabled, setAnalyticsEnabled] = useState(true);
 
@@ -39,12 +43,14 @@ export default function PrivacyScreen() {
   type SFSymbol = NonNullable<ComponentProps<typeof Image>["systemName"]>;
 
   const rowButton = ({
+    testID,
     label,
     systemImage,
     onPress,
     chevron = true,
     trailing,
   }: {
+    testID: string;
     label: string;
     systemImage: SFSymbol;
     onPress: () => void;
@@ -52,9 +58,10 @@ export default function PrivacyScreen() {
     trailing?: React.ReactNode;
   }) => (
     <Button
+      testID={testID}
       modifiers={[
         buttonStyle("plain"),
-        frame({ maxWidth: 10000 }),
+        frame({ maxWidth: Infinity }),
         background(colors.muted as string),
         clipShape("capsule"),
       ]}
@@ -64,11 +71,16 @@ export default function PrivacyScreen() {
         spacing={12}
         alignment="center"
         modifiers={[
-          frame({ maxWidth: 10000, height: ButtonTokens.height }),
+          frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
           padding({ horizontal: 16 }),
         ]}
       >
-        <Image systemName={systemImage} size={18} color={colors.foreground as string} />
+        <Image
+          systemName={systemImage}
+          size={symbolSize(18)}
+          color={colors.foreground as string}
+          modifiers={[accessibilityHidden(true)]}
+        />
         <Text
           modifiers={[
             dfont({ size: 16, weight: "medium" }),
@@ -80,14 +92,19 @@ export default function PrivacyScreen() {
         <Spacer />
         {trailing ??
           (chevron ? (
-            <Image systemName="chevron.right" size={13} color={colors.mutedForeground as string} />
+            <Image
+              systemName="chevron.right"
+              size={symbolSize(13)}
+              color={colors.mutedForeground as string}
+              modifiers={[accessibilityHidden(true)]}
+            />
           ) : null)}
       </HStack>
     </Button>
   );
 
   return (
-    <Host style={{ flex: 1, backgroundColor: colors.background }}>
+    <Host testID="privacy-screen" style={{ flex: 1, backgroundColor: colors.background }}>
       <ScrollView modifiers={[tint(colors.primary as string)]}>
         <VStack
           spacing={12}
@@ -96,16 +113,19 @@ export default function PrivacyScreen() {
         >
           <VStack spacing={8} modifiers={[frame({ maxWidth: Infinity })]}>
             {rowButton({
+              testID: "privacy-camera-photos",
               label: "Camera & Photos",
               systemImage: "camera.fill",
               onPress: handleOpenSettings,
             })}
             {rowButton({
+              testID: "privacy-notifications",
               label: "Notifications",
               systemImage: "bell.fill",
               onPress: handleOpenSettings,
             })}
             {rowButton({
+              testID: "privacy-system-settings",
               label: "System Settings",
               systemImage: "gear",
               onPress: handleOpenSettings,
@@ -117,13 +137,18 @@ export default function PrivacyScreen() {
             spacing={12}
             alignment="center"
             modifiers={[
-              frame({ maxWidth: 10000, height: ButtonTokens.height }),
+              frame({ maxWidth: Infinity, minHeight: ButtonTokens.height }),
               padding({ horizontal: 16 }),
               background(colors.muted as string),
               clipShape("capsule"),
             ]}
           >
-            <Image systemName="chart.bar.fill" size={18} color={colors.foreground as string} />
+            <Image
+              systemName="chart.bar.fill"
+              size={symbolSize(18)}
+              color={colors.foreground as string}
+              modifiers={[accessibilityHidden(true)]}
+            />
             <Text
               modifiers={[
                 dfont({ size: 16, weight: "medium" }),
@@ -134,16 +159,18 @@ export default function PrivacyScreen() {
             </Text>
             <Spacer />
             <Toggle
+              testID="privacy-share-analytics"
               isOn={analyticsEnabled}
               onIsOnChange={(v) => {
                 haptics.selection();
                 setAnalyticsEnabled(v);
               }}
-              modifiers={[tint(colors.primary as string)]}
+              modifiers={[tint(colors.primary as string), accessibilityLabel("Share analytics")]}
             />
           </HStack>
 
           <Text
+            testID="privacy-data-disclaimer"
             modifiers={[
               dfont({ size: 13 }),
               foregroundStyle(colors.mutedForeground as string),