create-100x-mobile 0.4.10 → 0.5.0

package/dist/templates/instant/magic/tabsLayout.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.magicTabsLayoutTemplate = magicTabsLayoutTemplate;
+function magicTabsLayoutTemplate() {
+    return `import { Tabs, Redirect } from "expo-router";
+import { SquareCheck as CheckSquare, Settings } from "lucide-react-native";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { instantDb } from "@/lib/instant";
+
+function SetupRequired() {
+  return (
+    <View style={styles.setupContainer}>
+      <View style={styles.setupCard}>
+        <Text style={styles.setupTitle}>Setup Required</Text>
+        <Text style={styles.setupText}>
+          Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file.
+        </Text>
+        <Text style={styles.setupStep}>
+          You can create an app id with:\n
+          npx instant-cli init-without-files --title my-app
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function AuthenticatedTabsLayout({
+  db,
+}: {
+  db: NonNullable<typeof instantDb>;
+}) {
+  const { isLoading, user, error } = db.useAuth();
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (error) {
+    return null;
+  }
+
+  if (!user) {
+    return <Redirect href="/(auth)/sign-in" />;
+  }
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: "#FFFFFF",
+          borderTopWidth: 0,
+          elevation: 0,
+          shadowOpacity: 0,
+          height: Platform.OS === "ios" ? 88 : 72,
+          paddingBottom: Platform.OS === "ios" ? 32 : 12,
+          paddingTop: 12,
+        },
+        tabBarActiveTintColor: "#1F2937",
+        tabBarInactiveTintColor: "#9CA3AF",
+        tabBarLabelStyle: {
+          fontSize: 13,
+          fontWeight: "500",
+          marginTop: 4,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Todos",
+          tabBarIcon: ({ size, color }) => (
+            <CheckSquare size={size} color={color} strokeWidth={2} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ size, color }) => (
+            <Settings size={size} color={color} strokeWidth={2} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+
+export default function TabLayout() {
+  if (!instantDb) {
+    return <SetupRequired />;
+  }
+
+  return <AuthenticatedTabsLayout db={instantDb} />;
+}
+
+const styles = StyleSheet.create({
+  setupContainer: {
+    flex: 1,
+    backgroundColor: "#f5f5f5",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  setupCard: {
+    backgroundColor: "#fff",
+    borderRadius: 12,
+    padding: 24,
+    maxWidth: 420,
+    width: "100%",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3,
+  },
+  setupTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#333",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  setupText: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 12,
+    lineHeight: 22,
+    textAlign: "center",
+  },
+  setupStep: {
+    fontSize: 14,
+    color: "#888",
+    marginTop: 16,
+    padding: 16,
+    backgroundColor: "#f8f9fa",
+    borderRadius: 8,
+    lineHeight: 20,
+  },
+});
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.4.10",
+  "version": "0.5.0",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {
@@ -11,7 +11,7 @@
     "build": "npm run clean && tsc",
     "dev": "tsc --watch",
     "typecheck": "tsc --noEmit",
-    "test": "npm run build && node --test tests/**/*.test.cjs",
+    "test": "vitest run",
     "check": "npm run typecheck && npm test && npm pack --dry-run",
     "prepublishOnly": "npm run check"
   },
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "typescript": "~5.7.0"
+    "typescript": "~5.7.0",
+    "vitest": "1.3.1"
   }
 }