create-your-stack 0.0.7 → 0.0.9

package/bin/create-your-stack

@@ -78,12 +78,11 @@ if [[ "$USE_CLERK" == "true" ]]; then
 fi
 
 if [[ "$USE_CONVEX" == "true" ]]; then
-  DEPS="$DEPS convex"
-  DEV_DEPS="$DEV_DEPS convex-helpers"
+  DEPS="$DEPS convex convex-helpers"
 fi
 
 if [[ "$USE_UNIWIND" == "true" ]]; then
-  DEPS="$DEPS uniwind tailwindcss clsx tailwind-merge lucide-react-native react-native-reanimated react-native-worklets @gorhom/bottom-sheet react-native-gesture-handler reanimated-color-picker"
+  DEPS="$DEPS uniwind tailwindcss clsx tailwind-merge lucide-react-native react-native-reanimated react-native-worklets @gorhom/bottom-sheet react-native-gesture-handler reanimated-color-picker react-native-keyboard-controller"
 fi
 
 echo "Installing main dependencies..."
@@ -115,6 +114,134 @@ EOT"
 
 echo "📄 Creating utility files..."
 
+echo "📦 Creating stores..."
+cat <<'EOT' > stores/themeStore.ts
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { NativeWindStyleSheet } from 'nativewind';
+import { mmkvStorage } from './mmkv'; // We'll need to make sure this exists or inline it if simple
+
+// Simple mmkv wrapper if not existing, but let's assume standard zustand setup or use a simple one for now.
+// Actually, to be safe and self-contained:
+import { MMKV } from 'react-native-mmkv';
+
+const storage = new MMKV();
+
+export const useThemeStore = create(
+  persist(
+    (set) => ({
+      theme: 'system',
+      setTheme: (theme: string) => {
+        set({ theme });
+        // You might want to add logic here to update NativeWind/Uniwind if needed, 
+        // but often that's handled by a separate effect or the provider.
+        // For Uniwind/NativeWind v4, it usually watches the system or a class.
+      },
+    }),
+    {
+      name: 'theme-storage',
+      storage: createJSONStorage(() => ({
+        setItem: (name, value) => storage.set(name, value),
+        getItem: (name) => storage.getString(name),
+        removeItem: (name) => storage.delete(name),
+      })),
+    }
+  )
+);
+EOT
+
+echo "🧩 Creating components..."
+cat <<'EOT' > components/ThemeSwitcher.tsx
+import { api } from '@/convex/_generated/api';
+import { cn } from '@/lib/cn';
+import { useThemeStore } from '@/stores/themeStore';
+import { useQuery } from 'convex/react';
+import { Moon, Sparkles, Sun } from 'lucide-react-native';
+import React, { useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming
+} from 'react-native-reanimated';
+import { useUniwind } from 'uniwind';
+
+type Theme = 'light' | 'dark' | 'premium';
+
+const THEMES: { name: Theme; label: string; Icon: React.ElementType }[] = [
+    { name: 'light', label: 'Light', Icon: Sun },
+    { name: 'dark', label: 'Dark', Icon: Moon },
+    { name: 'premium', label: 'Premium', Icon: Sparkles },
+];
+
+export default function ThemeSwitcher() {
+    const subscription = useQuery(api.subscriptions.requirePremium);
+    const { theme, hasAdaptiveThemes } = useUniwind();
+    const activeTheme = hasAdaptiveThemes && theme === 'premium' ? 'premium' : theme;
+    const { setTheme } = useThemeStore();
+
+    const themeAvailables = useMemo(() => {
+        return THEMES.filter(t => t.name === 'premium' ? subscription?.ok : true);
+    }, [subscription?.ok]);
+
+    // Determine active index
+    const activeIndex = themeAvailables.findIndex(t => t.name === activeTheme);
+    const safeIndex = activeIndex === -1 ? 0 : activeIndex;
+
+    const pillPosition = useSharedValue(safeIndex);
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            width: `${100 / themeAvailables.length}%`,
+            left: `${(pillPosition.value * 100) / themeAvailables.length}%`,
+        };
+    });
+
+    React.useEffect(() => {
+        pillPosition.value = withTiming(safeIndex, {
+            duration: 600,
+        });
+    }, [safeIndex, pillPosition]);
+
+    return (
+        <View className="w-full px-5 py-2">
+            <View className="h-12 bg-background rounded-full p-1 flex-row relative">
+                {/* Animated Background Pill */}
+                <Animated.View
+                    className="absolute top-1 bottom-1 rounded-full bg-primary shadow-sm shadow-black/10"
+                    style={animatedStyle}
+                />
+
+                {themeAvailables.map((t, index) => {
+                    const isActive = activeTheme === t.name;
+
+                    return (
+                        <Pressable
+                            key={t.name + index}
+                            onPress={() => setTheme(t.name)}
+                            className="flex-1 items-center justify-center flex-row gap-2 rounded-full z-10"
+                        >
+                            <t.Icon
+                                size={18}
+                                color={isActive ? (t.name === 'premium' ? '#EAB308' : t.name === 'light' ? '#e6e8ecff' : '#3B82F6') : '#94A3B8'}
+                                fill={isActive && t.name === 'premium' ? '#EAB308' : 'transparent'}
+                            />
+                            <Text className={cn(
+                                "text-sm font-semibold transition-colors",
+                                isActive ? "text-slate-900 dark:text-white light:text-white" : "text-slate-500",
+                                t.name === 'premium' ? "text-yellow-500" : ""
+
+                            )}>
+                                {t.label}
+                            </Text>
+                        </Pressable>
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+EOT
+
 cat <<'EOT' > lib/cn.ts
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -128,7 +255,8 @@ cat <<'EOT' > lib/clerk.ts
 import { ClerkProvider, useAuth } from '@clerk/clerk-expo';
 import { Platform } from 'react-native';
 import { ConvexProviderWithClerk } from 'convex/react-clerk';
-import { ConvexReactClient } from 'convex/react';
+import { ConvexReactClient, useQueries } from 'convex/react';
+import { makeUseQueryWithStatus } from 'convex-helpers/react';
 import * as SecureStore from 'expo-secure-store';
 import Constants from 'expo-constants';
 
@@ -191,6 +319,8 @@ const tokenCache = Platform.OS === 'web' ? {
   },
 };
 
+export const useQueryWithStatus = makeUseQueryWithStatus(useQueries);
+
 export { ClerkProvider, useAuth, ConvexProviderWithClerk, convex, publishableKey, tokenCache };
 EOT
 
@@ -200,18 +330,34 @@ const { getDefaultConfig } = require("expo/metro-config");
 const { withUniwindConfig } = require("uniwind/metro");
 
 const config = getDefaultConfig(__dirname);
-module.exports = withUniwindConfig(config, { input: "./global.css" });
+module.exports = withUniwindConfig(config, { 
+ cssEntryFile: './global.css',
+ dtsFile: './uniwind-types.d.ts'
+ });
 EOT
 
-echo "🔌 Injecting global.css into _layout..."
-for layout in app/_layout.tsx app/_layout.js; do
-  if [[ -f "$layout" ]] && ! grep -q "global.css" "$layout"; then
-    tmp="${layout}.tmp"
-    echo "import '../global.css';" > "$tmp"
-    cat "$layout" >> "$tmp"
-    mv "$tmp" "$layout"
-  fi
-done
+echo "� Creating app/_layout.tsx with providers..."
+run "cat <<'EOT' > app/_layout.tsx
+import { Slot } from 'expo-router';
+import { ClerkProvider, useAuth, ConvexProviderWithClerk, convex, publishableKey, tokenCache } from '../lib/clerk';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
+import '../global.css';
+
+export default function Layout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <KeyboardProvider>
+        <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
+          <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+             <Slot />
+          </ConvexProviderWithClerk>
+        </ClerkProvider>
+      </KeyboardProvider>
+    </GestureHandlerRootView>
+  );
+}
+EOT"
 
 echo "🧪 Creating .env.local..."
 run "cat <<'EOT' > .env.local
@@ -239,6 +385,9 @@ if [[ "$USE_CONVEX" == "true" ]]; then
   fi
 fi
 
+echo "🔧 Fixing dependencies..."
+run "bunx expo install --fix"
+
 echo "✅ Project '$PROJECT_NAME' is ready!"
 echo "👉 Next steps:"
 echo "   1. cd $PROJECT_NAME"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-your-stack",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "module": "index.ts",
   "type": "module",
   "bin": {