newcandies 0.1.19 → 0.1.20

package/package.json

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

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,18 @@
+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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+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 APIProvider from "~/api/api-provider";
+import "../../global.css";
+import { StyleSheet } from "react-native";
+
+export default function RootLayout() {
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <KeyboardProvider>
+        <APIProvider>
+          <BottomSheetModalProvider>
+            <Stack>
+              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            </Stack>
+            <Toaster />
+          </BottomSheetModalProvider>
+        </APIProvider>
+      </KeyboardProvider>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

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

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

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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,50 @@
+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;

package/templates/app-briefs/react-query/sproutsy/src/components/ui/screen.tsx

@@ -0,0 +1,17 @@
+import { withUniwind } from "uniwind";
+import { SafeAreaView as RNSafeAreaView } from "react-native-safe-area-context";
+import { ReactNode } from "react";
+
+const SafeAreaView = withUniwind(RNSafeAreaView);
+
+interface ScreenProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Screen = ({
+  children,
+  className = "flex-1 bg-background",
+}: ScreenProps) => {
+  return <SafeAreaView className={className}>{children}</SafeAreaView>;
+};

package/templates/app-briefs/react-query/sproutsy/src/components/ui/squircle.tsx

@@ -0,0 +1,4 @@
+import { withUniwind } from "uniwind";
+import SquircleView from "react-native-fast-squircle";
+
+export const Squircle = withUniwind(SquircleView);

package/templates/app-briefs/react-query/sproutsy/src/components/ui/text.tsx

@@ -0,0 +1,54 @@
+import { Text as RNText, TextProps } from "react-native";
+import { twMerge } from "tailwind-merge";
+
+type TypographyVariant =
+  | "title"
+  | "subtitle"
+  | "body"
+  | "caption"
+  | "button"
+  | "display"
+  | "caption-primary"
+  | "body-primary"
+  | "subtitle-primary"
+  | "subtitle-secondary"
+  | "body-secondary";
+
+interface TextComponentProps extends TextProps {
+  className?: string;
+  variant?: TypographyVariant;
+}
+
+const variantStyles: Record<TypographyVariant, string> = {
+  title: "text-2xl font-bold",
+  subtitle: "text-xl font-semibold",
+  "subtitle-primary": "text-xl font-semibold text-primary",
+  "subtitle-secondary": "text-xl font-semibold text-secondary",
+  body: "text-base",
+  "body-primary": "text-base text-primary",
+  "body-secondary": "text-base text-secondary",
+  caption: "text-sm font-medium text-white",
+  "caption-primary": "text-sm text-primary font-medium",
+  button: "text-xl font-semibold text-white text-center",
+  display: "text-3xl font-bold",
+};
+
+const Text = ({
+  variant = "body",
+  children,
+  className,
+  ...props
+}: TextComponentProps) => {
+  const textStyle = twMerge(
+    "text-foreground",
+    variantStyles[variant],
+    className
+  );
+  return (
+    <RNText className={textStyle} {...props}>
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;