newcandies 0.1.29 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "newcandies",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "Scaffold Expo Router + Uniwind React Native apps with layered templates.",
   "type": "module",
   "bin": {

package/templates/app-briefs/expo-router/flourish-auth/README.md

@@ -1,6 +1,6 @@
-# Flourish Auth - Expo Router Tab Navigation with Authentication
+# Flourish Auth - Expo Router Authentication App Brief
 
-Learn to implement **Protected Routes** and authentication flows with Expo Router.
+A beautiful plant care app built with React Native, Expo, and Expo Router for learning authentication flows.
 
 ## Getting Started
 
@@ -19,135 +19,88 @@ bun start
 ```
 src/
 ├── app/
-│   ├── _layout.tsx           # Root layout (TODO: add Protected guards)
-│   ├── (auth)/               # Auth route group
-│   │   ├── _layout.tsx       # Auth stack navigator
-│   │   ├── welcome.tsx       # TODO: Build landing screen
-│   │   ├── sign-in.tsx       # TODO: Build sign in form
-│   │   └── sign-up.tsx       # TODO: Build sign up form
-│   ├── (tabs)/               # Tab group (from flourish)
-│   │   ├── _layout.tsx       # Tab navigator (complete)
-│   │   ├── index.tsx         # Home tab (complete)
-│   │   ├── explore.tsx       # TODO
-│   │   ├── search.tsx        # TODO
-│   │   └── profile.tsx       # TODO: Add logout button
-│   └── plant/
-│       └── [id].tsx          # TODO
-├── components/ui/            # Complete
+│   ├── _layout.tsx           # Root layout with Stack
+│   ├── (tabs)/               # Tab group
+│   │   ├── _layout.tsx       # Tab navigator config
+│   │   ├── index.tsx         # Home tab
+│   │   ├── explore.tsx       # Explore tab
+│   │   ├── search.tsx        # Search tab
+│   │   └── profile.tsx       # Profile tab
+├── components/ui/
+│   ├── screen.tsx
+│   ├── squircle.tsx
+│   └── text.tsx
 ├── lib/
-│   ├── constants/            # Plant data (complete)
-│   ├── stores/
-│   │   └── README.md         # TODO: Create auth.ts store
-│   └── utils/                # Complete
+│   ├── constants/index.ts    # Plant data
+│   └── utils/index.ts        # Date helpers
 └── types/
+    └── plant.d.ts
 ```
 
-## Your Tasks
+## Your Task
 
-### 1. Create Auth Store (`src/lib/stores/auth.ts`)
+This app brief teaches **Expo Router Authentication Flows**. The base app has tab navigation already set up. Your task is to add authentication.
 
-```typescript
-import { create } from 'zustand';
+### Screens to Build
 
-interface AuthState {
-  isLoggedIn: boolean;
-  login: () => void;
-  logout: () => void;
-}
-
-const useAuth = create<AuthState>((set) => ({
-  isLoggedIn: false,
-  login: () => set({ isLoggedIn: true }),
-  logout: () => set({ isLoggedIn: false }),
-}));
-
-export default useAuth;
-```
-
-### 2. Implement Protected Routes (`src/app/_layout.tsx`)
+1. **`(auth)/welcome.tsx`** - Welcome/landing screen
+   - App branding and logo
+   - "Sign In" and "Sign Up" buttons
+   - Navigate to respective auth screens
 
-```tsx
-import useAuth from "~/lib/stores/auth";
-
-export default function RootLayout() {
-  const { isLoggedIn } = useAuth();
-
-  return (
-    <Stack screenOptions={{ headerShown: false }}>
-      {/* Show auth screens when NOT logged in */}
-      <Stack.Protected guard={!isLoggedIn}>
-        <Stack.Screen name="(auth)" />
-      </Stack.Protected>
-
-      {/* Show app screens when logged in */}
-      <Stack.Protected guard={isLoggedIn}>
-        <Stack.Screen name="(tabs)" />
-        <Stack.Screen name="plant/[id]" />
-      </Stack.Protected>
-    </Stack>
-  );
-}
-```
+2. **`(auth)/sign-in.tsx`** - Sign in form
+   - Email and password inputs
+   - Sign in button
+   - Link to sign up page
+   - Back button to welcome
 
-### 3. Build Auth Screens
+3. **`(auth)/sign-up.tsx`** - Sign up form
+   - Name, email, and password inputs
+   - Sign up button
+   - Link to sign in page
+   - Back button to welcome
 
-**welcome.tsx** - Landing page with:
-- App logo and tagline
-- "Get Started" → sign-up
-- "Sign In" link → sign-in
+4. **`(auth)/_layout.tsx`** - Auth group layout
+   - Stack navigator for auth screens
+   - Configure screen options
 
-**sign-in.tsx** - Login form with:
-- Email & password inputs
-- Sign In button → calls `login()`
-- Link to sign-up
+### Authentication Concepts
 
-**sign-up.tsx** - Registration form with:
-- Name, email & password inputs
-- Create Account button → calls `login()`
-- Link to sign-in
+You'll need to implement:
+- Protected routes (redirect unauthenticated users)
+- Auth state management (using Zustand or Context)
+- Conditional navigation based on auth status
+- Route groups for organization: `(auth)` and `(tabs)`
 
-### 4. Add Logout to Profile
+### Navigation Flow
 
-```tsx
-import useAuth from "~/lib/stores/auth";
-
-export default function Profile() {
-  const { logout } = useAuth();
-  
-  return (
-    // ... profile content ...
-    <Pressable onPress={logout}>
-      <Text>Sign Out</Text>
-    </Pressable>
-  );
-}
 ```
+Unauthenticated:
+  welcome -> sign-in -> (tabs)
+  welcome -> sign-up -> (tabs)
 
-## Key Concepts
+Authenticated:
+  (tabs) directly
+```
 
-### Route Groups
-- `(auth)` - Screens for unauthenticated users
-- `(tabs)` - Main app for authenticated users
+### Protecting Routes
 
-### Stack.Protected
-Conditionally shows screens based on a guard boolean:
+In `_layout.tsx`, check auth state and redirect:
 ```tsx
-<Stack.Protected guard={condition}>
-  <Stack.Screen name="..." />
-</Stack.Protected>
+// Redirect to welcome if not authenticated
+if (!isAuthenticated && !isAuthRoute) {
+  return <Redirect href="/welcome" />;
+}
 ```
 
-### Auth Flow
-1. User opens app → sees welcome (not logged in)
-2. User signs in → `login()` sets `isLoggedIn: true`
-3. Protected Routes automatically show `(tabs)` 
-4. User taps Sign Out → `logout()` → back to `(auth)`
+## Design System
 
-No manual navigation needed - Protected Routes handle it!
+- 🌿 Green nature theme (`#234823` primary)
+- ☀️ Golden accent (`#ffce47`)
+- 🟢 Squircle cards with smooth corners
 
-## Available Resources
+## Available Data
 
-- Plant data in `lib/constants`
-- UI components (Screen, Text, Squircle)
-- Tab navigation already configured
-- Home screen fully implemented
+- `customPlants` - Array of 5 plants with full details
+- `getWeekDays(date)` - Helper for calendar display
+- `Plant` interface - TypeScript type for plants

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

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "Flourish Auth",
+    "name": "flourish-auth",
     "slug": "flourish-auth",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -39,4 +39,3 @@
     }
   }
 }
-

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

@@ -5,4 +5,3 @@ module.exports = function (api) {
     plugins: ["react-native-reanimated/plugin"],
   };
 };
-

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

@@ -19,4 +19,3 @@
     "production": {}
   }
 }
-

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

@@ -50,4 +50,3 @@
     }
   }
 }
-

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

@@ -12,4 +12,3 @@ module.exports = withRozenite(
   }),
   { enabled: process.env.WITH_ROZENITE === "true" }
 );
-

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

@@ -42,8 +42,7 @@
     "sonner-native": "latest",
     "tailwind-merge": "latest",
     "tailwindcss": "^4.1.16",
-    "uniwind": "^1.0.0",
-    "zustand": "^5.0.9"
+    "uniwind": "^1.0.0"
   },
   "devDependencies": {
     "@rozenite/metro": "^1.0.0-alpha.16",
@@ -52,4 +51,3 @@
     "typescript": "~5.9.2"
   }
 }
-

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

@@ -1,29 +1,35 @@
 import IonIcons from "@expo/vector-icons/Ionicons";
 import { Tabs } from "expo-router";
+import React from "react";
 import { useCSSVariable } from "uniwind";
 
-function TabBarIcon(props: {
+type TabBarIconType = {
   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 TabBarIcon = (props: TabBarIconType) => {
+  return <IonIcons size={28} {...props} />;
+};
+
+const TabsLayout = () => {
   const primaryColor = useCSSVariable("--color-primary") as string;
-  const tabBarActiveTintColor = useCSSVariable(
+  const tabBarInActiveTintColor = useCSSVariable(
     "--color-muted-foreground"
   ) as string;
 
+  const backgroundColor = useCSSVariable("--color-muted") as string;
+
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
+
         tabBarActiveTintColor: primaryColor,
-        tabBarInactiveTintColor: tabBarActiveTintColor,
+        tabBarInactiveTintColor: tabBarInActiveTintColor,
         tabBarStyle: {
           backgroundColor,
+          paddingTop: 16,
         },
       }}
     >
@@ -31,7 +37,6 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Home",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => (
             <TabBarIcon name="partly-sunny" color={color} />
@@ -42,7 +47,6 @@ export default function TabLayout() {
         name="explore"
         options={{
           title: "Explore",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="grid" color={color} />,
         }}
@@ -51,7 +55,6 @@ export default function TabLayout() {
         name="search"
         options={{
           title: "Search",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="search" color={color} />,
         }}
@@ -60,12 +63,12 @@ export default function TabLayout() {
         name="profile"
         options={{
           title: "Profile",
-          headerShown: false,
           tabBarShowLabel: false,
           tabBarIcon: ({ color }) => <TabBarIcon name="person" color={color} />,
         }}
       />
     </Tabs>
   );
-}
+};
 
+export default TabsLayout;

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

@@ -1,24 +1,82 @@
-import { View } from "react-native";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { FlatList, Image, Pressable, ScrollView, View } from "react-native";
+import { twMerge } from "tailwind-merge";
 import { Screen } from "~/components/ui/screen";
+import { Squircle } from "~/components/ui/squircle";
 import Text from "~/components/ui/text";
+import { categories, customPlants } from "~/lib/constants";
 
-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
+type ExploreCardProps = {
+  item: Plant;
+};
+const ExploreCard = ({ item }: ExploreCardProps) => {
+  return (
+    <Pressable className="mx-5">
+      <Squircle
+        cornerSmoothing={1}
+        className="overflow-hidden rounded-3xl bg-primary"
+      >
+        <Image
+          source={{ uri: item.coverImg }}
+          className="w-full h-48"
+          resizeMode="cover"
+        />
+        <View className="p-5">
+          <Text variant="subtitle-secondary">{item.locationType}</Text>
+          <Text variant="caption">{item.name}</Text>
+        </View>
+      </Squircle>
+    </Pressable>
+  );
+};
 
+const ListHeader = () => {
   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>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName="px-5 gap-2 pb-4"
+      >
+        {categories.map((category) => (
+          <Pressable key={category.id}>
+            <Squircle
+              cornerSmoothing={1}
+              className={twMerge(
+                "flex-row bg-primary items-center gap-2 px-3 py-2 rounded-xl",
+                category.bgColor
+              )}
+            >
+              <Ionicons
+                name={category.icon as any}
+                size={16}
+                color={category.bgColor}
+              />
+              <Text variant="caption-primary">{category.label}</Text>
+            </Squircle>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </>
+  );
+};
+
+const Explore = () => {
+  return (
+    <Screen>
+      <FlatList
+        data={customPlants}
+        renderItem={({ item }) => <ExploreCard item={item} />}
+        contentContainerClassName="pb-8 gap-5 pt-2"
+        ListHeaderComponent={ListHeader}
+      />
     </Screen>
   );
-}
+};
 
+export default Explore;

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

@@ -1,51 +1,71 @@
-import { View, Image, Pressable, FlatList } from "react-native";
+import { format } from "date-fns";
+import { router } from "expo-router";
+import { FlatList, Image, Pressable, View } from "react-native";
 import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
 import { Squircle } from "~/components/ui/squircle";
+import Text from "~/components/ui/text";
 import { customPlants } from "~/lib/constants";
-import { useRouter } from "expo-router";
-import { format } from "date-fns";
 import { getWeekDays } from "~/lib/utils";
 
+type PlantCardProps = {
+  item: Plant;
+  onPress?: () => void;
+};
+
+const PlantCard = ({ item, onPress }: PlantCardProps) => {
+  return (
+    <Pressable onPress={() => router.push(`/`)} 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">
+          <Image
+            source={{ uri: item.coverImg }}
+            className="w-full h-full aspect-square"
+          />
+        </Squircle>
+        <View className="px-1 py-2">
+          <Text variant="body-secondary">{item.name}</Text>
+        </View>
+      </Squircle>
+    </Pressable>
+  );
+};
+
 const now = new Date();
 const weekDays = getWeekDays(now);
 
 const HomeHeader = () => {
   return (
-    <View className="px-5 pt-4 pb-4">
+    <View className="px-5 py-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" />
+          <Text variant="display">{format(now, "EEE")}</Text>
+          <View className="w-4 h-4 rounded-full bg-accent"></View>
         </View>
-
         <View className="items-end">
           <Text variant="subtitle">{format(now, "MMMM d")}</Text>
-          <Text className="text-lg text-foreground/70">{format(now, "yyyy")}</Text>
+          <Text>{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"
+                className="bg-primary p-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>
+                <Text variant="subtitle-secondary">{day.date}</Text>
+                <Text variant="caption">{day.day}</Text>
               </Squircle>
             ) : (
-              <View className="px-2 py-2 items-center">
-                <Text className="text-lg font-medium text-primary/40">
+              <View className="p-2 items-center">
+                <Text variant="subtitle" className="text-primary/40">
                   {day.date}
                 </Text>
-                <Text className="text-xs font-medium text-primary/30 mt-1">
+                <Text variant="caption" className="text-primary/30">
                   {day.day}
                 </Text>
               </View>
@@ -57,46 +77,21 @@ const HomeHeader = () => {
   );
 };
 
-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();
-
+const Home = () => {
   return (
     <Screen>
       <FlatList
         data={customPlants}
+        renderItem={({ item }) => <PlantCard item={item} />}
         numColumns={2}
+        ListHeaderComponent={HomeHeader}
         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"
+        columnWrapperClassName="gap-4 px-5"
         showsVerticalScrollIndicator={false}
       />
     </Screen>
   );
-}
+};
 
+export default Home;