newcandies 0.1.30 → 0.1.32

package/package.json

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

package/templates/app-briefs/zustand/yummy/README.md

@@ -1,6 +1,6 @@
 # Yummy - Zustand App Brief
 
-A sweet treats shopping app built with React Native, Expo, and Zustand for state management.
+A fashion shopping app built with React Native, Expo, and Zustand for state management.
 
 ## Getting Started
 
@@ -51,13 +51,12 @@ The store should manage:
 - `getItemCount()` - Get total number of items
 - `getTotal()` - Calculate cart total
 
-Look for `// TODO` comments in the screens to see where to integrate the store.
+Wire up the store to the UI components - the Pressables are ready for your onPress handlers!
 
 ## Features
 
-- 🍬 Product grid with candy/treats
+- 👗 Product grid with fashion items
 - 🛒 Shopping cart with quantity controls
 - 💾 Persistent cart storage with AsyncStorage
 - 🎨 Beautiful orange-themed UI
 - ✨ Smooth animations with react-native-reanimated
-

package/templates/app-briefs/zustand/yummy/src/app/(tabs)/_layout.tsx

@@ -16,7 +16,6 @@ export default function TabLayout() {
     "--color-muted-foreground"
   ) as string;
 
-  // TODO: Get cart item count from zustand store
   const itemCount = 0;
 
   return (
@@ -60,4 +59,3 @@ export default function TabLayout() {
     </Tabs>
   );
 }
-

package/templates/app-briefs/zustand/yummy/src/app/(tabs)/cart.tsx

@@ -1,31 +1,21 @@
-import { View, ScrollView, Pressable, Image } from "react-native";
 import IonIcons from "@expo/vector-icons/Ionicons";
-import { toast } from "sonner-native";
+import { Image, Pressable, ScrollView, 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";
 
 export default function CartScreen() {
-  // TODO: Get cart state and actions from zustand store
   const items: CartItem[] = [];
 
-  const handleCheckout = () => {
-    if (items.length === 0) return;
-    toast.success("Order placed!");
-    // TODO: Clear cart using zustand store
-  };
-
-  // TODO: Get total from zustand store
   const total = 0;
 
   return (
     <Screen className="flex-1 bg-background">
-      {/* Header */}
       <View className="px-5 pt-4 pb-2">
         <Text className="text-3xl font-bold text-foreground">My Bag</Text>
         <Text className="text-muted-foreground mt-1">
-          {items.length === 0 ? "No treats yet!" : `${items.length} sweet treats`}
+          {items.length === 0 ? "No items yet!" : `${items.length} items`}
         </Text>
       </View>
 
@@ -36,7 +26,7 @@ export default function CartScreen() {
             Your bag is empty
           </Text>
           <Text className="text-muted-foreground text-center mt-2">
-            Time to add some yummy treats!
+            Time to add some stylish pieces!
           </Text>
         </View>
       ) : (
@@ -49,15 +39,13 @@ export default function CartScreen() {
             {items.map((item) => (
               <Squircle
                 key={item.product.id}
-                className="bg-card mb-3 p-4 overflow-hidden"
+                className="bg-card mb-3 p-4 overflow-hidden rounded-3xl"
                 cornerSmoothing={1}
-                borderRadius={24}
               >
                 <View className="flex-row items-center">
                   <Squircle
-                    className="w-20 h-20 overflow-hidden"
+                    className="w-20 h-20 overflow-hidden rounded-2xl"
                     cornerSmoothing={1}
-                    borderRadius={18}
                   >
                     <Image
                       source={{ uri: item.product.coverImg }}
@@ -75,40 +63,23 @@ export default function CartScreen() {
                     </Text>
                   </View>
 
-                  <Pressable
-                    onPress={() => {
-                      // TODO: Remove item using zustand store
-                    }}
-                    className="absolute top-3 right-3 w-7 h-7 items-center justify-center"
-                  >
+                  <Pressable className="absolute top-3 right-3 w-7 h-7 items-center justify-center">
                     <IonIcons name="close-circle" size={22} color="#d4d4d4" />
                   </Pressable>
                 </View>
 
-                {/* Quantity Controls */}
                 <View className="flex-row items-center justify-end mt-3">
                   <Squircle
-                    className="flex-row items-center bg-background overflow-hidden"
+                    className="flex-row items-center bg-background overflow-hidden rounded-xl"
                     cornerSmoothing={1}
-                    borderRadius={14}
                   >
-                    <Pressable
-                      onPress={() => {
-                        // TODO: Decrease quantity using zustand store
-                      }}
-                      className="w-10 h-10 items-center justify-center"
-                    >
+                    <Pressable className="w-10 h-10 items-center justify-center">
                       <IonIcons name="remove" size={18} color="#f97316" />
                     </Pressable>
                     <Text className="font-bold text-base w-8 text-center text-foreground">
                       {item.quantity}
                     </Text>
-                    <Pressable
-                      onPress={() => {
-                        // TODO: Increase quantity using zustand store
-                      }}
-                      className="w-10 h-10 items-center justify-center"
-                    >
+                    <Pressable className="w-10 h-10 items-center justify-center">
                       <IonIcons name="add" size={18} color="#f97316" />
                     </Pressable>
                   </Squircle>
@@ -117,7 +88,6 @@ export default function CartScreen() {
             ))}
           </ScrollView>
 
-          {/* Checkout Section */}
           <View className="px-5 pb-6 pt-4">
             <View className="flex-row justify-between items-center mb-4">
               <Text className="font-bold text-lg text-foreground">Total</Text>
@@ -126,11 +96,10 @@ export default function CartScreen() {
               </Text>
             </View>
 
-            <Pressable onPress={handleCheckout}>
+            <Pressable>
               <Squircle
-                className="bg-primary py-4 items-center justify-center overflow-hidden"
+                className="bg-primary py-4 items-center justify-center overflow-hidden rounded-xl"
                 cornerSmoothing={1}
-                borderRadius={20}
               >
                 <Text className="text-white font-bold text-lg">
                   Checkout
@@ -143,4 +112,3 @@ export default function CartScreen() {
     </Screen>
   );
 }
-

package/templates/app-briefs/zustand/yummy/src/app/(tabs)/index.tsx

@@ -1,76 +1,70 @@
 import { View, Pressable, Image } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import IonIcons from "@expo/vector-icons/Ionicons";
-import { toast } from "sonner-native";
 
 import { Screen } from "~/components/ui/screen";
 import Text from "~/components/ui/text";
 import { Squircle } from "~/components/ui/squircle";
 import { customProducts } from "~/lib/constants";
 
-export default function HomeScreen() {
-  // TODO: Get addItem from zustand store
+type ProductCardProps = {
+  product: Product;
+};
 
-  const handleAddToCart = (product: Product) => {
-    // TODO: Add item to cart using zustand store
-    toast.success("Added to cart");
-  };
+const ProductCard = ({ product }: ProductCardProps) => {
+  return (
+    <View className="flex-1 mx-2 items-center">
+      <View className="relative w-full">
+        <Squircle
+          className="w-full aspect-[3/4] overflow-hidden rounded-3xl"
+          cornerSmoothing={1}
+        >
+          <Image
+            source={{ uri: product.coverImg }}
+            className="w-full h-full"
+            resizeMode="cover"
+          />
+        </Squircle>
+        <Pressable className="absolute bottom-4 left-1/2 -translate-x-1/2 flex-row items-center overflow-hidden">
+          <Squircle
+            className="flex-row items-center bg-white px-3 py-2 rounded-xl"
+            cornerSmoothing={1}
+          >
+            <Text className="text-sm font-medium text-foreground mr-2">
+              Add
+            </Text>
+            <Squircle
+              className="bg-primary w-8 h-8 items-center justify-center rounded-xl"
+              cornerSmoothing={1}
+            >
+              <IonIcons name="add" size={20} color="white" />
+            </Squircle>
+          </Squircle>
+        </Pressable>
+      </View>
+      <Text
+        className="text-base font-semibold mt-3 text-center text-foreground"
+        numberOfLines={1}
+      >
+        {product.name}
+      </Text>
+      <Text className="text-base text-muted-foreground">${product.price}</Text>
+    </View>
+  );
+};
 
+export default function HomeScreen() {
   return (
     <Screen className="flex-1 bg-background">
       <View className="flex-1 px-3 pt-4">
         <FlashList
           data={customProducts}
           numColumns={2}
-          estimatedItemSize={280}
           showsVerticalScrollIndicator={false}
           ItemSeparatorComponent={() => <View className="h-4" />}
-          renderItem={({ item }) => (
-            <View className="flex-1 mx-2 items-center">
-              <View className="relative w-full">
-                <Squircle
-                  className="w-full aspect-[3/4] overflow-hidden"
-                  cornerSmoothing={1}
-                  borderRadius={28}
-                >
-                  <Image
-                    source={{ uri: item.coverImg }}
-                    className="w-full h-full"
-                    resizeMode="cover"
-                  />
-                </Squircle>
-                <Pressable
-                  onPress={() => handleAddToCart(item)}
-                  className="absolute bottom-4 left-1/2 -translate-x-1/2 flex-row items-center overflow-hidden"
-                  style={{ elevation: 4 }}
-                >
-                  <Squircle
-                    className="flex-row items-center bg-white px-3 py-2"
-                    cornerSmoothing={1}
-                    borderRadius={20}
-                  >
-                    <Text className="text-sm font-medium text-foreground mr-2">Add</Text>
-                    <Squircle
-                      className="bg-primary w-8 h-8 items-center justify-center"
-                      cornerSmoothing={1}
-                      borderRadius={10}
-                    >
-                      <IonIcons name="add" size={20} color="white" />
-                    </Squircle>
-                  </Squircle>
-                </Pressable>
-              </View>
-              <Text className="text-base font-semibold mt-3 text-center text-foreground" numberOfLines={1}>
-                {item.name}
-              </Text>
-              <Text className="text-base text-muted-foreground">
-                ${item.price}
-              </Text>
-            </View>
-          )}
+          renderItem={({ item }) => <ProductCard product={item} />}
         />
       </View>
     </Screen>
   );
 }
-

package/templates/app-briefs/zustand/yummy/src/app/_layout.tsx

@@ -1,8 +1,6 @@
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { Stack } from "expo-router";
-import * as SystemUI from "expo-system-ui";
-import { useEffect } from "react";
-import { Appearance, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import "react-native-reanimated";
@@ -10,10 +8,6 @@ import { Toaster } from "sonner-native";
 import "../../global.css";
 
 export default function RootLayout() {
-  useEffect(() => {
-    Appearance.setColorScheme("light");
-    SystemUI.setBackgroundColorAsync("#FAF8F3");
-  }, []);
 
   return (
     <GestureHandlerRootView style={styles.container}>

package/templates/app-briefs/zustand/yummy/src/lib/constants/index.ts

@@ -1,45 +1,44 @@
 export const customProducts: Product[] = [
   {
     id: "1",
-    name: "Strawberry Delight",
+    name: "Cocoa Turtleneck Sweater",
     price: 12.99,
     coverImg: "https://github.com/user-attachments/assets/a080b50c-46bb-4710-9d99-59b3ca4c39e4",
   },
   {
     id: "2",
-    name: "Berry Bliss",
+    name: "Teal Plaid Blazer",
     price: 9.50,
     coverImg: "https://github.com/user-attachments/assets/fcaec702-c807-4193-b745-a501eb005bf5",
   },
   {
     id: "3",
-    name: "Citrus Dream",
+    name: "Olive Wool Coat",
     price: 14.25,
-    coverImg: "https://github.com/user-attachments/assets/d58cfd3b-bdb6-4b1e-91a6-b5ba7486ed2e",
+    coverImg: "https://github.com/user-attachments/assets/d0046c75-dd8d-4fd8-9826-f72027f5a0e3",
   },
   {
     id: "4",
-    name: "Candy Crush",
+    name: "Ivory Wool Coat",
     price: 11.80,
     coverImg: "https://github.com/user-attachments/assets/70cd0677-a46d-4816-975b-28fe9d192a72",
   },
   {
     id: "5",
-    name: "Sweet Treat",
+    name: "Camel Belted Blazer",
     price: 8.99,
     coverImg: "https://github.com/user-attachments/assets/441796bf-4fdd-4feb-9cf0-b8c1b5d33129",
   },
   {
     id: "6",
-    name: "Gummy Paradise",
+    name: "Taupe Longline Coat",
     price: 10.50,
     coverImg: "https://github.com/user-attachments/assets/2e1a6a9b-845e-4107-b8a5-4dc5b74da2f8",
   },
   {
     id: "7",
-    name: "Rainbow Mix",
+    name: "Coral Knit Sweater",
     price: 15.99,
     coverImg: "https://github.com/user-attachments/assets/1c786744-a3fb-4c61-ad7e-b1e601efc248",
   },
 ];
-