newcandies 0.1.26 → 0.1.28

package/package.json

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

package/templates/app-briefs/expo-router/cozynotes/src/app/+not-found.tsx

@@ -0,0 +1,32 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Link, Stack } from 'expo-router';
+import { Pressable, Text, View } from 'react-native';
+import Screen from '~/components/ui/screen';
+import Squircle from '~/components/ui/squircle';
+
+
+
+export default function NotFoundScreen() {
+  return (
+    <Screen>
+      <Stack.Screen options={{ title: 'Not Found', headerShown: false }} />
+      <View className="flex-1 items-center justify-center px-8">
+        <Ionicons name="alert-circle-outline" size={80} color="black" />
+        <Text className="mt-6 text-2xl font-bold text-foreground">Page Not Found</Text>
+        <Text className="mt-2 text-center text-muted-foreground">
+          {"The page you're looking for doesn't exist."}
+        </Text>
+        <Link href="/" asChild>
+          <Pressable className="mt-8">
+            <Squircle
+              cornerSmoothing={1}
+              className="bg-primary px-6 py-3"
+              style={{ borderRadius: 14 }}>
+              <Text className="font-semibold text-primary-foreground">Go to Home</Text>
+            </Squircle>
+          </Pressable>
+        </Link>
+      </View>
+    </Screen>
+  );
+}

package/templates/app-briefs/expo-router/cozynotes/src/components/screens/home/note-card.tsx

@@ -1,18 +1,23 @@
 import { Ionicons } from '@expo/vector-icons';
 import { Link } from 'expo-router';
 import { Pressable, View } from 'react-native';
+import { twMerge } from 'tailwind-merge';
 
 import Squircle from '~/components/ui/squircle';
 import Text from '~/components/ui/text';
-import { Note } from '~/lib/constants';
 
-// Rotation patterns for variety
+
+/**
+ * Get the rotation for the note card
+ */
 const getRotation = (index: number) => {
   const rotations = [-4, 3, -2, 5, -3, 2, -5, 4];
   return rotations[index % rotations.length];
-};
+}; 
 
-// Horizontal offset for staggered look (relative to center)
+/**
+ * Get the offset for the note card
+ */
 const getOffset = (index: number) => {
   const offsets = [-50, 60, -40, 70, -55, 50, -35, 65];
   return offsets[index % offsets.length];
@@ -25,33 +30,23 @@ const NoteCard = ({ note, index }: { note: Note; index: number }) => {
   return (
     <Link href={{ pathname: '/note/[id]', params: { id: note.id } }} asChild>
       <Pressable
+        className={twMerge('-mb-[60px] self-center')}
         style={{
-          marginBottom: -60,
-          alignSelf: 'center',
           marginLeft: offsetX,
           transform: [{ rotate: `${rotation}deg` }],
           zIndex: index,
         }}>
         <Squircle
           cornerSmoothing={1}
-          className="bg-card"
-          style={{
-            width: 240,
-            height: 324,
-            borderRadius: 24,
-            padding: 20,
-          }}>
-          {/* Menu dots */}
-          <View style={{ position: 'absolute', top: 16, right: 16 }}>
-            <Ionicons name="ellipsis-horizontal" size={18} color="var(--color-muted-foreground)" />
+          className="h-80 w-60 rounded-3xl bg-card p-5">
+          <View className="absolute right-4 top-4">
+            <Ionicons name="ellipsis-horizontal" size={18} color="black" />
           </View>
 
-          {/* Title */}
           <Text variant="subtitle" className="mb-2 mr-10" numberOfLines={2}>
             {note.title}
           </Text>
 
-          {/* Content */}
           <Text variant="note" className="opacity-90" numberOfLines={10}>
             {note.content}
           </Text>

package/templates/app-briefs/expo-router/cozynotes/src/components/ui/back-button.tsx

@@ -13,8 +13,8 @@ const BackButton = ({ icon = 'chevron-back' }: BackButtonProps) => {
     <Pressable onPress={() => router.back()}>
       <Squircle
         cornerSmoothing={1}
-        className="size-12 items-center justify-center bg-card rounded-[14px]">
-        <Ionicons name={icon} size={26} color="var(--color-foreground)" />
+        className="size-12 items-center justify-center bg-card rounded-xl">
+        <Ionicons name={icon} size={26} color="black" />
       </Squircle>
     </Pressable>
   );

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

@@ -13,9 +13,9 @@ export default function RootLayout() {
       <KeyboardProvider>
         <BottomSheetModalProvider>
           <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            {/* TODO: Add more stack screens like plant/[id] */}
-          </Stack>
+           <Stack>
+            <Stack.Screen name="index" />
+           </Stack>
           <Toaster />
         </BottomSheetModalProvider>
       </KeyboardProvider>

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

@@ -0,0 +1,12 @@
+import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
+
+const Home = () => {
+  return (
+    <Screen>
+      <Text>Home</Text>
+    </Screen>
+  );
+};
+
+export default Home;

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

@@ -1,71 +0,0 @@
-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/src/app/(tabs)/explore.tsx

@@ -1,24 +0,0 @@
-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/src/app/(tabs)/index.tsx

@@ -1,102 +0,0 @@
-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/src/app/(tabs)/profile.tsx

@@ -1,25 +0,0 @@
-import { View } from "react-native";
-import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
-
-export default function Profile() {
-  // TODO: Implement the Profile screen
-  // - Display user avatar and name
-  // - Show plant stats (plants owned, waterings)
-  // - Add "Currently..." status card
-  // - Include Edit Profile button
-
-  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 to show user profile
-        </Text>
-      </View>
-    </Screen>
-  );
-}
-

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

@@ -1,24 +0,0 @@
-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/src/app/plant/[id].tsx

@@ -1,48 +0,0 @@
-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>
-    </>
-  );
-}
-