create-100x-mobile 0.4.3 → 0.4.5

package/dist/templates/instant/instantLib.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantLibTemplate = instantLibTemplate;
+function instantLibTemplate() {
+    return `import "react-native-get-random-values";
+import { init, i, id, type InstaQLEntity } from "@instantdb/react-native";
+
+const appId = process.env.EXPO_PUBLIC_INSTANT_APP_ID;
+
+export const schema = i.schema({
+  entities: {
+    todos: i.entity({
+      text: i.string(),
+      completed: i.boolean(),
+      createdAt: i.number().indexed(),
+    }),
+  },
+});
+
+export type InstantTodo = InstaQLEntity<typeof schema, "todos">;
+export const createId = id;
+
+export const isInstantConfigured = Boolean(appId);
+export const instantDb = isInstantConfigured
+  ? init({ appId: appId as string, schema })
+  : null;
+`;
+}

package/dist/templates/instant/rootLayout.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantRootLayoutTemplate = instantRootLayoutTemplate;
+function instantRootLayoutTemplate() {
+    return `import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { useFrameworkReady } from "@/hooks/useFrameworkReady";
+
+export default function RootLayout() {
+  useFrameworkReady();
+
+  return (
+    <>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="auto" />
+    </>
+  );
+}
+`;
+}

package/dist/templates/instant/settingsScreen.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantSettingsScreenTemplate = instantSettingsScreenTemplate;
+function instantSettingsScreenTemplate() {
+    return `import React from "react";
+import { View, Text, StyleSheet, StatusBar } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function SettingsScreen() {
+  const instantAppId = process.env.EXPO_PUBLIC_INSTANT_APP_ID;
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+      <View style={styles.header}>
+        <Text style={styles.title}>Settings</Text>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Backend</Text>
+          <Text style={styles.sectionText}>InstantDB</Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>Instant App ID</Text>
+          <Text style={styles.sectionText}>
+            {instantAppId || "Not configured (set EXPO_PUBLIC_INSTANT_APP_ID)"}
+          </Text>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.sectionTitle}>About</Text>
+          <Text style={styles.sectionText}>Version 1.0.0</Text>
+          <Text style={styles.sectionText}>Built with Expo + InstantDB</Text>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#1F2937",
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingBottom: 24,
+    gap: 12,
+  },
+  card: {
+    backgroundColor: "#F8F9FA",
+    borderRadius: 14,
+    padding: 16,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#374151",
+    marginBottom: 8,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+  },
+  sectionText: {
+    fontSize: 15,
+    color: "#1F2937",
+    marginBottom: 4,
+    lineHeight: 22,
+  },
+});
+`;
+}

package/dist/templates/instant/tabsLayout.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantTabsLayoutTemplate = instantTabsLayoutTemplate;
+function instantTabsLayoutTemplate() {
+    return `import { Tabs } from "expo-router";
+import { SquareCheck as CheckSquare, Settings } from "lucide-react-native";
+import { Platform } from "react-native";
+
+export default function TabLayout() {
+  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>
+  );
+}
+`;
+}

package/dist/templates/instant/todosScreen.js

@@ -0,0 +1,408 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantTodosScreenTemplate = instantTodosScreenTemplate;
+function instantTodosScreenTemplate() {
+    return `import React, { useMemo, useState } from "react";
+import {
+  Alert,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Check, Plus, Trash2 } from "lucide-react-native";
+import { createId, instantDb, type InstantTodo } from "@/lib/instant";
+
+type FilterType = "all" | "active" | "completed";
+
+function SetupRequired() {
+  return (
+    <View style={styles.setupContainer}>
+      <Text style={styles.setupTitle}>InstantDB Setup Required</Text>
+      <Text style={styles.setupText}>
+        Add EXPO_PUBLIC_INSTANT_APP_ID to your .env.local file.
+      </Text>
+      <Text style={styles.setupHint}>
+        You can create an app id with:\\n
+        npx instant-cli init-without-files --title my-app
+      </Text>
+    </View>
+  );
+}
+
+function InstantTodosScreen() {
+  const db = instantDb!;
+  const [text, setText] = useState("");
+  const [filter, setFilter] = useState<FilterType>("all");
+
+  const { isLoading, error, data } = db.useQuery({
+    todos: {
+      $: {
+        order: { createdAt: "desc" },
+      },
+    },
+  });
+
+  const todos = data?.todos ?? [];
+
+  const filteredTodos = useMemo(() => {
+    switch (filter) {
+      case "active":
+        return todos.filter((todo) => !todo.completed);
+      case "completed":
+        return todos.filter((todo) => todo.completed);
+      default:
+        return todos;
+    }
+  }, [filter, todos]);
+
+  const activeTodosCount = todos.filter((todo) => !todo.completed).length;
+  const completedTodosCount = todos.filter((todo) => todo.completed).length;
+
+  const addTodo = async () => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+
+    try {
+      await db.transact(
+        db.tx.todos[createId()].create({
+          text: trimmed,
+          completed: false,
+          createdAt: Date.now(),
+        })
+      );
+      setText("");
+    } catch (txnError) {
+      console.error("Failed to add todo:", txnError);
+      Alert.alert("Error", "Could not add todo.");
+    }
+  };
+
+  const toggleTodo = async (todo: InstantTodo) => {
+    try {
+      await db.transact(
+        db.tx.todos[todo.id].update({ completed: !todo.completed })
+      );
+    } catch (txnError) {
+      console.error("Failed to toggle todo:", txnError);
+      Alert.alert("Error", "Could not update todo.");
+    }
+  };
+
+  const removeTodo = async (todo: InstantTodo) => {
+    try {
+      await db.transact(db.tx.todos[todo.id].delete());
+    } catch (txnError) {
+      console.error("Failed to delete todo:", txnError);
+      Alert.alert("Error", "Could not delete todo.");
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <Text style={styles.loadingText}>Loading todos...</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.loadingContainer}>
+        <Text style={styles.errorText}>Error: {error.message}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>My Tasks</Text>
+          <Text style={styles.subtitle}>
+            {activeTodosCount} active, {completedTodosCount} completed
+          </Text>
+        </View>
+
+        <View style={styles.addRow}>
+          <TextInput
+            style={styles.input}
+            placeholder="Add a new task..."
+            placeholderTextColor="#9CA3AF"
+            value={text}
+            onChangeText={setText}
+            onSubmitEditing={addTodo}
+            returnKeyType="done"
+          />
+          <Pressable
+            style={[styles.addButton, !text.trim() && styles.addButtonDisabled]}
+            onPress={addTodo}
+            disabled={!text.trim()}
+          >
+            <Plus size={18} color={text.trim() ? "#FFFFFF" : "#9CA3AF"} />
+          </Pressable>
+        </View>
+
+        <View style={styles.filters}>
+          {(["all", "active", "completed"] as const).map((key) => (
+            <Pressable
+              key={key}
+              style={[styles.filterPill, filter === key && styles.filterPillActive]}
+              onPress={() => setFilter(key)}
+            >
+              <Text
+                style={[
+                  styles.filterText,
+                  filter === key && styles.filterTextActive,
+                ]}
+              >
+                {key === "completed" ? "done" : key}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+
+        <FlatList
+          data={filteredTodos}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={styles.listContent}
+          ListEmptyComponent={
+            <View style={styles.emptyState}>
+              <Text style={styles.emptyTitle}>No tasks yet</Text>
+              <Text style={styles.emptySubtitle}>
+                Add your first task above to get started.
+              </Text>
+            </View>
+          }
+          renderItem={({ item }) => (
+            <View style={styles.todoRow}>
+              <Pressable
+                style={[
+                  styles.checkbox,
+                  item.completed && styles.checkboxCompleted,
+                ]}
+                onPress={() => toggleTodo(item)}
+              >
+                {item.completed ? (
+                  <Check size={14} color="#FFFFFF" strokeWidth={3} />
+                ) : null}
+              </Pressable>
+              <Text
+                style={[
+                  styles.todoText,
+                  item.completed && styles.todoTextCompleted,
+                ]}
+              >
+                {item.text}
+              </Text>
+              <Pressable style={styles.deleteButton} onPress={() => removeTodo(item)}>
+                <Trash2 size={18} color="#9CA3AF" />
+              </Pressable>
+            </View>
+          )}
+        />
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+export default function TodosScreen() {
+  if (!instantDb) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <SetupRequired />
+      </SafeAreaView>
+    );
+  }
+  return <InstantTodosScreen />;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#FFFFFF",
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#1F2937",
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#6B7280",
+    fontWeight: "500",
+  },
+  addRow: {
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    height: 52,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    fontSize: 16,
+    color: "#1F2937",
+  },
+  addButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    backgroundColor: "#1F2937",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  addButtonDisabled: {
+    backgroundColor: "#E5E7EB",
+  },
+  filters: {
+    flexDirection: "row",
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 10,
+    gap: 8,
+  },
+  filterPill: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    backgroundColor: "#F3F4F6",
+  },
+  filterPillActive: {
+    backgroundColor: "#111827",
+  },
+  filterText: {
+    color: "#6B7280",
+    fontWeight: "600",
+    textTransform: "capitalize",
+  },
+  filterTextActive: {
+    color: "#FFFFFF",
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 96,
+    flexGrow: 1,
+  },
+  todoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 56,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    marginBottom: 8,
+    paddingHorizontal: 8,
+    backgroundColor: "#FFFFFF",
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: "#D1D5DB",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
+  checkboxCompleted: {
+    backgroundColor: "#10B981",
+    borderColor: "#10B981",
+  },
+  todoText: {
+    flex: 1,
+    color: "#1F2937",
+    fontSize: 16,
+  },
+  todoTextCompleted: {
+    color: "#9CA3AF",
+    textDecorationLine: "line-through",
+  },
+  deleteButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  setupContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  setupTitle: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+  setupText: {
+    fontSize: 15,
+    color: "#4B5563",
+    textAlign: "center",
+    lineHeight: 22,
+  },
+  setupHint: {
+    marginTop: 16,
+    fontSize: 13,
+    color: "#6B7280",
+    textAlign: "center",
+    lineHeight: 20,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 24,
+  },
+  loadingText: {
+    color: "#4B5563",
+    fontSize: 16,
+  },
+  errorText: {
+    color: "#DC2626",
+    fontSize: 15,
+    textAlign: "center",
+  },
+  emptyState: {
+    marginTop: 48,
+    alignItems: "center",
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#1F2937",
+  },
+  emptySubtitle: {
+    marginTop: 8,
+    color: "#6B7280",
+    fontSize: 14,
+    textAlign: "center",
+  },
+});
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {