newcandies 0.1.24 → 0.1.25

package/templates/app-briefs/expo-router/flourish-auth/app.json

@@ -0,0 +1,42 @@
+{
+  "expo": {
+    "name": "Flourish Auth",
+    "slug": "flourish-auth",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "flourish-auth",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/images/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.example.flourishauth"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "package": "com.example.flourishauth"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
+

package/templates/app-briefs/expo-router/flourish-auth/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};
+

package/templates/app-briefs/expo-router/flourish-auth/eas.json

@@ -0,0 +1,22 @@
+{
+  "cli": {
+    "version": ">= 7.0.0"
+  },
+  "build": {
+    "development": {
+      "android": {
+        "buildType": "apk"
+      },
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}
+

package/templates/app-briefs/expo-router/flourish-auth/env

@@ -0,0 +1,2 @@
+WITH_ROZENITE=true
+

package/templates/app-briefs/expo-router/flourish-auth/expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/templates/app-briefs/expo-router/flourish-auth/global.css

@@ -0,0 +1,53 @@
+@import "tailwindcss";
+@import "uniwind";
+
+@layer theme {
+  :root {
+    @variant light {
+      --color-background: #e7edde;
+      --color-foreground: #111827;
+
+      --color-primary: #234823;
+      --color-primary-foreground: #e8ede1;
+
+      --color-secondary: #e0ffc2;
+      --color-secondary-foreground: #234823;
+
+      --color-accent: #ffce47;
+      --color-accent-foreground: #234823;
+
+      --color-muted: #c4dea9;
+      --color-muted-foreground: #739265;
+
+      --color-card: #234823;
+      --color-card-foreground: #e8ede1;
+
+      --color-overlay: #ffffff33;
+      --color-overlay-muted: #ffffff1a;
+    }
+
+    @variant dark {
+      --color-background: #0f1a0f;
+      --color-foreground: #e8ede1;
+
+      --color-primary: #4a9c4a;
+      --color-primary-foreground: #0f1a0f;
+
+      --color-secondary: #1e3a1e;
+      --color-secondary-foreground: #c4dea9;
+
+      --color-accent: #ffce47;
+      --color-accent-foreground: #0f1a0f;
+
+      --color-muted: #1a2e1a;
+      --color-muted-foreground: #739265;
+
+      --color-card: #162516;
+      --color-card-foreground: #e8ede1;
+
+      --color-overlay: #0000004d;
+      --color-overlay-muted: #0000001a;
+    }
+  }
+}
+

package/templates/app-briefs/expo-router/flourish-auth/metro.config.js

@@ -0,0 +1,15 @@
+const { withRozenite } = require("@rozenite/metro");
+const { getDefaultConfig } = require("expo/metro-config");
+const { withUniwindConfig } = require("uniwind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withRozenite(
+  withUniwindConfig(config, {
+    cssEntryFile: "./global.css",
+    dtsFile: "./uniwind-types.d.ts",
+    extraThemes: [],
+  }),
+  { enabled: process.env.WITH_ROZENITE === "true" }
+);
+

package/templates/app-briefs/expo-router/flourish-auth/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "flourish-auth",
+  "version": "0.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@gorhom/bottom-sheet": "latest",
+    "@rozenite/mmkv-plugin": "^1.0.0-alpha.16",
+    "@rozenite/performance-monitor-plugin": "^1.0.0-alpha.16",
+    "@shopify/flash-list": "^2.2.0",
+    "date-fns": "^4.1.0",
+    "expo": "54.0.23",
+    "expo-constants": "~18.0.10",
+    "expo-font": "~14.0.9",
+    "expo-linear-gradient": "^15.0.7",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.14",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-system-ui": "~6.0.8",
+    "expo-web-browser": "~15.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-fast-squircle": "^1.0.11",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-keyboard-controller": "latest",
+    "react-native-mmkv": "^4.0.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.14.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "sonner-native": "latest",
+    "tailwind-merge": "latest",
+    "tailwindcss": "^4.1.16",
+    "uniwind": "^1.0.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@rozenite/metro": "^1.0.0-alpha.16",
+    "@types/react": "~19.1.0",
+    "babel-plugin-module-resolver": "latest",
+    "typescript": "~5.9.2"
+  }
+}
+

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/_layout.tsx

@@ -0,0 +1,14 @@
+import { Stack } from "expo-router";
+
+export default function AuthLayout() {
+  // This is the auth stack navigator
+  // It wraps the welcome, sign-in, and sign-up screens
+  
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="welcome" />
+      <Stack.Screen name="sign-in" />
+      <Stack.Screen name="sign-up" />
+    </Stack>
+  );
+}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/sign-in.tsx

@@ -0,0 +1,25 @@
+import { View } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+export default function SignIn() {
+  // TODO: Build the sign-in screen
+  // - Add back button to go back
+  // - Add email input field
+  // - Add password input field  
+  // - Add "Sign In" button that calls login() from auth store
+  // - Add link to sign-up screen
+
+  return (
+    <Screen>
+      <View className="flex-1 px-6 justify-center">
+        <Text variant="display" className="text-primary">
+          Sign In
+        </Text>
+        <Text className="text-muted-foreground mt-2">
+          Build this screen with email/password form
+        </Text>
+      </View>
+    </Screen>
+  );
+}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/sign-up.tsx

@@ -0,0 +1,26 @@
+import { View } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+export default function SignUp() {
+  // TODO: Build the sign-up screen
+  // - Add back button to go back
+  // - Add name input field
+  // - Add email input field
+  // - Add password input field
+  // - Add "Create Account" button that calls login() from auth store
+  // - Add link to sign-in screen
+
+  return (
+    <Screen>
+      <View className="flex-1 px-6 justify-center">
+        <Text variant="display" className="text-primary">
+          Sign Up
+        </Text>
+        <Text className="text-muted-foreground mt-2">
+          Build this screen with registration form
+        </Text>
+      </View>
+    </Screen>
+  );
+}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(auth)/welcome.tsx

@@ -0,0 +1,22 @@
+import { View } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+export default function Welcome() {
+  // TODO: Build the welcome/landing screen
+  // - Display app logo/icon (use MaterialCommunityIcons "flower")
+  // - Show app name "Flourish" and tagline
+  // - Add "Get Started" button → navigates to sign-up
+  // - Add "Already have an account? Sign In" link → navigates to sign-in
+
+  return (
+    <Screen className="justify-center items-center">
+      <Text variant="display" className="text-primary">
+        Welcome
+      </Text>
+      <Text className="text-muted-foreground mt-2">
+        Build this screen with login/signup buttons
+      </Text>
+    </Screen>
+  );
+}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/_layout.tsx

@@ -0,0 +1,71 @@
+import IonIcons from "@expo/vector-icons/Ionicons";
+import { Tabs } from "expo-router";
+import { useCSSVariable } from "uniwind";
+
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof IonIcons>["name"];
+  color: string;
+}) {
+  return <IonIcons size={28} style={{ marginBottom: -4 }} {...props} />;
+}
+
+export default function TabLayout() {
+  const backgroundColor = useCSSVariable("--color-muted") as string;
+  const primaryColor = useCSSVariable("--color-primary") as string;
+  const tabBarActiveTintColor = useCSSVariable(
+    "--color-muted-foreground"
+  ) as string;
+
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: primaryColor,
+        tabBarInactiveTintColor: tabBarActiveTintColor,
+        tabBarStyle: {
+          backgroundColor,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          headerShown: false,
+          tabBarShowLabel: false,
+          tabBarIcon: ({ color }) => (
+            <TabBarIcon name="partly-sunny" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: "Explore",
+          headerShown: false,
+          tabBarShowLabel: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="grid" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="search"
+        options={{
+          title: "Search",
+          headerShown: false,
+          tabBarShowLabel: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="search" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: "Profile",
+          headerShown: false,
+          tabBarShowLabel: false,
+          tabBarIcon: ({ color }) => <TabBarIcon name="person" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
+

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/explore.tsx

@@ -0,0 +1,24 @@
+import { View } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+export default function Explore() {
+  // TODO: Implement the Explore screen
+  // - Add category filters (Indoor, Outdoor, Low Water, Pet Safe, Beginner)
+  // - Display plants in a vertical list with larger cards
+  // - Navigate to plant detail on press
+
+  return (
+    <Screen>
+      <View className="px-5 pt-4 pb-4">
+        <Text variant="display" className="text-primary">
+          Explore
+        </Text>
+        <Text className="text-muted-foreground mt-2">
+          Build this screen to browse plants by category
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/index.tsx

@@ -0,0 +1,102 @@
+import { View, Image, Pressable, FlatList } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+import { Squircle } from "~/components/ui/squircle";
+import { customPlants } from "~/lib/constants";
+import { useRouter } from "expo-router";
+import { format } from "date-fns";
+import { getWeekDays } from "~/lib/utils";
+
+const now = new Date();
+const weekDays = getWeekDays(now);
+
+const HomeHeader = () => {
+  return (
+    <View className="px-5 pt-4 pb-4">
+      <View className="flex-row justify-between items-start mb-5">
+        <View className="flex-row items-center gap-2">
+          <Text variant="display" className="text-4xl">{format(now, "EEE")}</Text>
+          <View className="w-3 h-3 rounded-full bg-accent" />
+        </View>
+
+        <View className="items-end">
+          <Text variant="subtitle">{format(now, "MMMM d")}</Text>
+          <Text className="text-lg text-foreground/70">{format(now, "yyyy")}</Text>
+        </View>
+      </View>
+
+      <View className="flex-row justify-between">
+        {weekDays.map((day, index) => (
+          <View key={index} className="items-center">
+            {day.isToday ? (
+              <Squircle
+                className="bg-primary px-2 py-2 items-center rounded-xl"
+                cornerSmoothing={1}
+              >
+                <Text className="text-lg font-bold text-primary-foreground">
+                  {day.date}
+                </Text>
+                <Text className="text-xs font-medium text-secondary mt-1">
+                  {day.day}
+                </Text>
+              </Squircle>
+            ) : (
+              <View className="px-2 py-2 items-center">
+                <Text className="text-lg font-medium text-primary/40">
+                  {day.date}
+                </Text>
+                <Text className="text-xs font-medium text-primary/30 mt-1">
+                  {day.day}
+                </Text>
+              </View>
+            )}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const PlantCard = ({ item, onPress }: { item: Plant; onPress?: () => void }) => (
+  <Pressable onPress={onPress} className="flex-1">
+    <Squircle className="bg-primary overflow-hidden rounded-3xl p-2" cornerSmoothing={1}>
+      <Squircle className="overflow-hidden rounded-2xl w-full aspect-square" cornerSmoothing={1}>
+        <Image source={{ uri: item.coverImg }} className="w-full h-full" resizeMode="cover" />
+      </Squircle>
+      <View className="px-1 py-2">
+        <Text variant="body-secondary" className="text-primary-foreground">{item.name}</Text>
+      </View>
+    </Squircle>
+  </Pressable>
+);
+
+const ListHeader = () => (
+  <>
+    <HomeHeader />
+    <View className="px-5 pb-4">
+      <Text variant="subtitle" className="text-primary">Our Plants</Text>
+    </View>
+  </>
+);
+
+export default function Index() {
+  const router = useRouter();
+
+  return (
+    <Screen>
+      <FlatList
+        data={customPlants}
+        numColumns={2}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <PlantCard item={item} onPress={() => router.push(`/plant/${item.id}`)} />
+        )}
+        ListHeaderComponent={ListHeader}
+        columnWrapperClassName="gap-4 px-5"
+        contentContainerClassName="gap-4 pb-8"
+        showsVerticalScrollIndicator={false}
+      />
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/profile.tsx

@@ -0,0 +1,27 @@
+import { View } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+export default function Profile() {
+  // TODO: Build the profile screen
+  // - Import useAuth from ~/lib/stores/auth
+  // - Get logout function from auth store
+  // - Display user avatar and name
+  // - Show plant stats (plants owned, waterings)
+  // - Add "Currently..." status card
+  // - Add Edit Profile button
+  // - Add Sign Out button that calls logout()
+
+  return (
+    <Screen>
+      <View className="px-5 pt-4">
+        <Text variant="display" className="text-primary">
+          Profile
+        </Text>
+        <Text className="text-muted-foreground mt-2">
+          Build this screen with user info and Sign Out button
+        </Text>
+      </View>
+    </Screen>
+  );
+}

package/templates/app-briefs/expo-router/flourish-auth/src/app/(tabs)/search.tsx

@@ -0,0 +1,24 @@
+import { View } from "react-native";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+export default function Search() {
+  // TODO: Implement the Search screen
+  // - Add a search input with icon
+  // - Filter plants by name as user types
+  // - Display matching results
+
+  return (
+    <Screen>
+      <View className="px-5 pt-4">
+        <Text variant="display" className="text-primary">
+          Search
+        </Text>
+        <Text className="text-muted-foreground mt-2">
+          Build this screen to search for plants
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+

package/templates/app-briefs/expo-router/flourish-auth/src/app/_layout.tsx

@@ -0,0 +1,48 @@
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { Stack } from "expo-router";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { KeyboardProvider } from "react-native-keyboard-controller";
+import "react-native-reanimated";
+import { Toaster } from "sonner-native";
+import "../../global.css";
+import { StyleSheet } from "react-native";
+
+export default function RootLayout() {
+  // TODO: Import useAuth from ~/lib/stores/auth
+  // TODO: Get isLoggedIn from the auth store
+
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <KeyboardProvider>
+        <BottomSheetModalProvider>
+          {/* 
+            TODO: Implement Protected Routes
+            
+            Use Stack.Protected to show different screens based on auth state:
+            
+            <Stack.Protected guard={!isLoggedIn}>
+              <Stack.Screen name="(auth)" />
+            </Stack.Protected>
+
+            <Stack.Protected guard={isLoggedIn}>
+              <Stack.Screen name="(tabs)" />
+              <Stack.Screen name="plant/[id]" />
+            </Stack.Protected>
+          */}
+          <Stack screenOptions={{ headerShown: false }}>
+            <Stack.Screen name="(auth)" />
+            <Stack.Screen name="(tabs)" />
+            <Stack.Screen name="plant/[id]" />
+          </Stack>
+          <Toaster />
+        </BottomSheetModalProvider>
+      </KeyboardProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/templates/app-briefs/expo-router/flourish-auth/src/app/plant/[id].tsx

@@ -0,0 +1,48 @@
+import { View } from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+import { customPlants } from "~/lib/constants";
+
+export default function PlantDetails() {
+  const { id } = useLocalSearchParams<{ id: string }>();
+
+  const plant = customPlants.find((p) => p.id === id);
+
+  if (!plant) {
+    return (
+      <>
+        <Stack.Screen options={{ headerShown: false }} />
+        <Screen className="flex-1 items-center justify-center bg-background">
+          <Text>Plant not found</Text>
+        </Screen>
+      </>
+    );
+  }
+
+  // TODO: Implement the Plant Details screen
+  // - Add back button navigation
+  // - Display plant image in a stacked card design
+  // - Show plant name and scientific name
+  // - Add quick info pills (water needs, light needs)
+  // - Display "About this plant" card with description
+  // - Show care details (water frequency, growth rate, maintenance)
+
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <Screen className="flex-1 bg-background">
+        <View className="px-5 pt-4">
+          <Text variant="display">{plant.name}</Text>
+          <Text className="text-muted-foreground mt-1">
+            {plant.scientificName}
+          </Text>
+          <Text className="text-muted-foreground mt-4">
+            Build this screen to show plant details
+          </Text>
+        </View>
+      </Screen>
+    </>
+  );
+}
+