newcandies 0.1.21 → 0.1.22

package/package.json

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

package/templates/app-briefs/react-query/sproutsy/src/api/README.md

@@ -0,0 +1,3 @@
+# API layer
+
+Add your client and hooks here.

package/templates/app-briefs/react-query/sproutsy/src/app/(tabs)/explore.tsx

@@ -1,84 +1,15 @@
-import { Ionicons } from "@expo/vector-icons";
-import { FlashList } from "@shopify/flash-list";
-import { useRouter } from "expo-router";
-import { ActivityIndicator, RefreshControl, View } from "react-native";
-import { usePlants } from "~/api/plants/usePlants";
-import ItemSeparator from "~/components/screens/shared/item-separator";
-import PlantCard from "~/components/screens/shared/plant-card";
-import QueryState from "~/components/screens/shared/query-state";
 import { Screen } from "~/components/ui/screen";
 import Text from "~/components/ui/text";
 
 export default function Two() {
-  const router = useRouter();
-
-  const {
-    plants,
-    status,
-    error,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    refetch,
-    isRefetching,
-  } = usePlants({ pageSize: 10 });
-
-  const renderItem = ({ item }: { item: Plant }) => (
-    <PlantCard
-      id={item.id}
-      name={item.name}
-      scientificName={item.scientificName}
-      coverImg={item.coverImg}
-      maintenance={item.maintenance}
-      onPress={() => router.push(`/plant/${item.id}`)}
-    />
-  );
-
-  const onEndReached = () => {
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  };
-
-  if (status === "error") {
-    return (
-      <QueryState
-        isError={true}
-        error={
-          error instanceof Error ? error : new Error("Failed to load plants")
-        }
-      />
-    );
-  }
-
   return (
     <Screen>
-      <View className="px-6 pt-5 pb-4 flex-row items-center gap-3">
-        <Ionicons name="sunny" size={32} color="#234823" />
-        <Text variant="display" className="text-primary">
-          Plants
-        </Text>
-      </View>
-      <FlashList
-        data={plants}
-        renderItem={renderItem}
-        keyExtractor={(item: Plant) => item.id}
-        className="px-4"
-        showsVerticalScrollIndicator={false}
-        ItemSeparatorComponent={ItemSeparator}
-        onEndReached={onEndReached}
-        onEndReachedThreshold={0.5}
-        ListFooterComponent={
-          isFetchingNextPage ? (
-            <View className="py-4 items-center">
-              <ActivityIndicator size="small" />
-            </View>
-          ) : null
-        }
-        refreshControl={
-          <RefreshControl onRefresh={refetch} refreshing={isRefetching} />
-        }
-      />
+      <Text variant="title" className="px-4">
+        Explore tab
+      </Text>
+      <Text className="px-4 text-base text-muted-foreground">
+        Build your infinite list or discovery UI here.
+      </Text>
     </Screen>
   );
 }

package/templates/app-briefs/react-query/sproutsy/src/app/(tabs)/index.tsx

@@ -1,46 +1,15 @@
-import { FlashList, ListRenderItem } from "@shopify/flash-list";
-import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { getPlants } from "~/api/plants";
-import { HomeHeader } from "~/components/screens/home/home-header";
-import ItemSeparator from "~/components/screens/shared/item-separator";
-import PlantCard from "~/components/screens/shared/plant-card";
-import QueryState from "~/components/screens/shared/query-state";
 import { Screen } from "~/components/ui/screen";
+import Text from "~/components/ui/text";
 
 export default function Index() {
-  const router = useRouter();
-  const { data, isPending, isError, error } = useQuery<PlantsResponse>({
-    queryKey: ["plants"],
-    queryFn: getPlants,
-  });
-
-  const renderItem = ({ item }: { item: Plant }) => (
-    <PlantCard
-      id={item.id}
-      name={item.name}
-      scientificName={item.scientificName}
-      coverImg={item.coverImg}
-      maintenance={item.maintenance}
-      onPress={() => router.push(`/plant/${item.id}`)}
-    />
-  );
-
-  if (isPending || isError) {
-    return <QueryState isPending={isPending} isError={isError} error={error} />;
-  }
-
   return (
     <Screen>
-      <HomeHeader />
-      <FlashList
-        data={data?.plants || []}
-        keyExtractor={(item: Plant) => item.id}
-        ItemSeparatorComponent={ItemSeparator}
-        showsVerticalScrollIndicator={false}
-        renderItem={renderItem}
-        className="px-4"
-      />
+      <Text variant="title" className="px-4">
+        Sproutsy Home
+      </Text>
+      <Text className="px-4 text-base text-muted-foreground">
+        Replace this placeholder with your plant feed UI.
+      </Text>
     </Screen>
   );
 }

package/templates/app-briefs/react-query/sproutsy/src/app/_layout.tsx

@@ -4,7 +4,6 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
-import APIProvider from "~/api/api-provider";
 import "../../global.css";
 import { StyleSheet } from "react-native";
 
@@ -12,14 +11,13 @@ export default function RootLayout() {
   return (
     <GestureHandlerRootView style={styles.container}>
       <KeyboardProvider>
-        <APIProvider>
-          <BottomSheetModalProvider>
-            <Stack>
-              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            </Stack>
-            <Toaster />
-          </BottomSheetModalProvider>
-        </APIProvider>
+        <BottomSheetModalProvider>
+          {/* TODO: Wrap your API/query providers here */}
+          <Stack>
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          </Stack>
+          <Toaster />
+        </BottomSheetModalProvider>
       </KeyboardProvider>
     </GestureHandlerRootView>
   );

package/templates/app-briefs/react-query/sproutsy/src/app/plant/[id].tsx

@@ -1,91 +1,21 @@
-import { Ionicons } from "@expo/vector-icons";
-import { useQuery } from "@tanstack/react-query";
-import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { Image, Pressable, ScrollView, View } from "react-native";
-import { getPlantById } from "~/api/plants";
-import QueryState from "~/components/screens/shared/query-state";
+import { Stack, useLocalSearchParams } from "expo-router";
 import { Screen } from "~/components/ui/screen";
-import { Squircle } from "~/components/ui/squircle";
 import Text from "~/components/ui/text";
 
 export default function PlantDetails() {
   const { id } = useLocalSearchParams<{ id: string }>();
-  const router = useRouter();
-
-  const {
-    data: plant,
-    isPending,
-    isError,
-    error,
-  } = useQuery<Plant>({
-    queryKey: ["plant", id],
-    queryFn: () => getPlantById(id!),
-    enabled: !!id,
-  });
-
-  if (isPending || isError || !plant) {
-    return (
-      <QueryState
-        isPending={isPending}
-        isError={isError || !plant}
-        error={error}
-        errorMessage="Error"
-      />
-    );
-  }
 
   return (
     <>
       <Stack.Screen options={{ headerShown: false }} />
-      <Screen className="flex-1 relative">
-        <ScrollView className="flex-1">
-          <View className="bg-background">
-            <Image
-              source={{ uri: plant.coverImg }}
-              className="w-full h-96"
-              resizeMode="cover"
-            />
-            <Pressable
-              onPress={() => router.back()}
-              className="absolute top-4 left-4 w-10 h-10 rounded-full bg-white justify-center items-center"
-            >
-              <Ionicons name="chevron-back" size={24} color={"black"} />
-            </Pressable>
-          </View>
-
-          <View className="p-6 bg-primary-foreground">
-            <Text variant="display">{plant.name}</Text>
-            <Text variant="subtitle" className="text-primary  mb-4">
-              {plant.scientificName}
-            </Text>
-
-            <Text variant="title" className="text-primary mb-6">
-              ${(plant.price / 100).toFixed(2)}
-            </Text>
-
-            <View className="mb-6">
-              <Text variant="subtitle" className="mb-2">
-                About
-              </Text>
-              <Text className="leading-6">{plant.description}</Text>
-            </View>
-
-            {plant.specialCare && (
-              <View className="mb-6">
-                <Text variant="subtitle" className="mb-3">
-                  Special Care
-                </Text>
-                <Squircle
-                  cornerSmoothing={1}
-                  className="bg-white p-6"
-                  style={{ borderRadius: 16 }}
-                >
-                  <Text className="leading-6">{plant.specialCare}</Text>
-                </Squircle>
-              </View>
-            )}
-          </View>
-        </ScrollView>
+      <Screen className="flex-1 items-center justify-center bg-background px-6">
+        <Text variant="title" className="mb-2">
+          Plant details
+        </Text>
+        <Text className="text-center text-muted-foreground">
+          Use the ID param ({id ?? "?"}) to fetch the selected plant and display
+          its details here.
+        </Text>
       </Screen>
     </>
   );

package/templates/app-briefs/react-query/sproutsy/src/api/api-provider.tsx

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useTanStackQueryDevTools } from "@rozenite/tanstack-query-plugin";
-
-const queryClient = new QueryClient();
-
-const APIProvider = ({ children }: { children: ReactNode }) => {
-  useTanStackQueryDevTools(queryClient);
-
-  return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-  );
-};
-
-export default APIProvider;

package/templates/app-briefs/react-query/sproutsy/src/api/client.ts

@@ -1,8 +0,0 @@
-import axios from 'axios';
-
-console.log(process.env.EXPO_PUBLIC_API_URL, 'logging env');
-
-export const client = axios.create({
-  baseURL: process.env.EXPO_PUBLIC_API_URL,
-  timeout: 60000,
-});

package/templates/app-briefs/react-query/sproutsy/src/api/plants/index.ts

@@ -1,18 +0,0 @@
-import { client } from "../client";
-
-export const getPlants = async () => {
-  const response = await client.get("/plants/");
-  return response.data;
-};
-
-export const listPlants = async (page: number = 1, pageSize: number = 20) => {
-  const response = await client.get("/plants/", {
-    params: { page, limit:pageSize },
-  });
-  return response.data;
-};
-
-export const getPlantById = async (id: string) => {
-  const response = await client.get(`/plants/${id}`);
-  return response.data.data;
-};

package/templates/app-briefs/react-query/sproutsy/src/api/plants/usePlants.ts

@@ -1,46 +0,0 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { listPlants } from ".";
-
-interface UsePlantsOptions {
-  pageSize?: number;
-}
-
-export const usePlants = (options: UsePlantsOptions = {}) => {
-  const { pageSize = 10 } = options;
-
-  const {
-    data,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    refetch,
-    isRefetching,
-    isLoading,
-    status,
-    error,
-  } = useInfiniteQuery({
-    queryKey: ["plants-list", pageSize],
-    queryFn: ({ pageParam = 1 }) => listPlants(pageParam, pageSize),
-    initialPageParam: 1,
-    getNextPageParam: (lastPage: PlantsResponse, _, lastPageParam) => {
-      if (lastPage.metadata.currentPage >= lastPage.metadata.lastPage) {
-        return undefined;
-      }
-      return lastPageParam + 1;
-    },
-  });
-
-  const plants: Plant[] = data?.pages.flatMap((page) => page.plants) ?? [];
-
-  return {
-    plants,
-    status,
-    error,
-    isLoading,
-    refetch,
-    isRefetching,
-    isFetchingNextPage,
-    hasNextPage,
-    fetchNextPage,
-  };
-};

package/templates/app-briefs/react-query/sproutsy/src/components/screens/home/home-header.tsx

@@ -1,38 +0,0 @@
-import { Image, View } from "react-native";
-import Text from "~/components/ui/text";
-
-const getDate = () => {
-  const date = new Date();
-  return {
-    weekday: date.toLocaleString("en-US", { weekday: "long" }),
-  };
-};
-
-export const HomeHeader = () => {
-  const { weekday } = getDate();
-
-  return (
-    <View className="px-6 pt-2">
-      <View className="flex-row items-center justify-between mb-6">
-        <View className="flex-row items-center gap-3">
-          <Image
-            source={require("assets/images/sproutsies-logo.png")}
-            style={{ width: 24, height: 24 }}
-            resizeMode="contain"
-          />
-          <Image
-            source={require("assets/images/sproutsy-main-logo.png")}
-            style={{ height: 24, width: 124 }}
-            resizeMode="contain"
-          />
-        </View>
-        <View className="items-end">
-          <Text variant="caption-primary" className="text-muted-foreground">
-            Happy
-          </Text>
-          <Text variant="subtitle-primary">{weekday}</Text>
-        </View>
-      </View>
-    </View>
-  );
-};

package/templates/app-briefs/react-query/sproutsy/src/components/screens/shared/item-separator.tsx

@@ -1,7 +0,0 @@
-import { View } from "react-native";
-
-const ItemSeparator = () => {
-  return <View className="h-4" />;
-};
-
-export default ItemSeparator;

package/templates/app-briefs/react-query/sproutsy/src/components/screens/shared/plant-card.tsx

@@ -1,70 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { Image, Pressable, View } from "react-native";
-import { Squircle } from "~/components/ui/squircle";
-import Text from "~/components/ui/text";
-
-type PlantCardProps = {
-  id: string;
-  name: string;
-  scientificName: string;
-  coverImg: string;
-  maintenance?: string;
-  onPress?: () => void;
-};
-
-const PlantCard = ({
-  name,
-  scientificName,
-  coverImg,
-  maintenance,
-  onPress,
-}: PlantCardProps) => {
-  return (
-    <Pressable onPress={onPress}>
-      <Squircle cornerSmoothing={1} className="overflow-hidden rounded-3xl">
-        <View className="bg-background">
-          <Image
-            source={{ uri: coverImg }}
-            className="h-[356] w-full"
-            resizeMode="cover"
-          />
-
-          <View className="flex-1 bg-card p-4 justify-end">
-            <Text variant="subtitle" className="text-card-foreground mb-3">
-              {name}
-            </Text>
-            <View className="flex-row justify-between items-center gap-2">
-              <View className="flex-1 flex-row items-center gap-2">
-                <View className="w-5 h-5 bg-overlay items-center justify-center rounded-full">
-                  <Ionicons name="flask" size={12} color="white" />
-                </View>
-                <View className="flex-1">
-                  <Text variant="caption">Scientific</Text>
-                  <Text variant="caption" numberOfLines={1}>
-                    {scientificName}
-                  </Text>
-                </View>
-              </View>
-              {maintenance && (
-                <Squircle
-                  cornerSmoothing={1}
-                  className="bg-overlay-muted px-3 py-1 flex-row items-center gap-2 rounded-xl"
-                >
-                  <Ionicons name="shield-checkmark" size={12} color="white" />
-                  <View>
-                    <Text variant="caption">Care</Text>
-                    <Text className="text-card-foreground" variant="caption-primary">
-                      {maintenance.toLowerCase()}
-                    </Text>
-                  </View>
-                </Squircle>
-              )}
-            </View>
-          </View>
-        </View>
-      </Squircle>
-    </Pressable>
-  );
-};
-
-export default PlantCard;

package/templates/app-briefs/react-query/sproutsy/src/components/screens/shared/query-state.tsx

@@ -1,50 +0,0 @@
-import { View, ActivityIndicator } from "react-native";
-import { Stack } from "expo-router";
-import { Screen } from "~/components/ui/screen";
-import Text from "~/components/ui/text";
-
-interface QueryStateProps {
-  isPending?: boolean;
-  isError?: boolean;
-  error?: Error | null;
-  errorMessage?: string;
-}
-
-const QueryState = ({
-  isPending,
-  isError,
-  error,
-  errorMessage = "Something went wrong",
-}: QueryStateProps) => {
-  if (isPending) {
-    return (
-      <>
-        <Stack.Screen options={{ headerShown: false }} />
-        <Screen>
-          <View className="flex-1 items-center justify-center">
-            <ActivityIndicator size="large" />
-          </View>
-        </Screen>
-      </>
-    );
-  }
-
-  if (isError) {
-    return (
-      <>
-        <Stack.Screen options={{ headerShown: false }} />
-        <Screen>
-          <View className="flex-1 items-center justify-center">
-            <Text className="text-lg font-medium text-red-500">
-              {error?.message || errorMessage}
-            </Text>
-          </View>
-        </Screen>
-      </>
-    );
-  }
-
-  return null;
-};
-
-export default QueryState;