newcandies 0.1.32 → 0.1.34

package/dist/index.js

@@ -156,9 +156,12 @@ async function main() {
       await fs.writeJSON(path.join(dest, "app.json"), mergedApp, { spaces: 2 });
     }
   }
-  const envPath = path.join(dest, "env");
-  if (await fs.pathExists(envPath)) {
-    await fs.move(envPath, path.join(dest, ".env"), { overwrite: true });
+  const destFiles = await fs.readdir(dest);
+  for (const file of destFiles) {
+    if (file === "env" || file.startsWith("env.")) {
+      const newName = "." + file;
+      await fs.move(path.join(dest, file), path.join(dest, newName), { overwrite: true });
+    }
   }
   const pkgPath = path.join(dest, "package.json");
   if (await fs.pathExists(pkgPath)) {
@@ -177,12 +180,14 @@ async function main() {
     await fs.writeJSON(appJsonPath, appJson, { spaces: 2 });
   }
   s.stop("Files ready");
-  if (project.install) {
+  const shouldInstall = project.install && !selectedItem.skipInstall;
+  const shouldPrebuild = opts.prebuild !== false && !selectedItem.skipPrebuild;
+  if (shouldInstall) {
     const si = p.spinner();
     si.start("Installing dependencies");
     await installDeps(project.pm, dest);
     si.stop("Installed");
-    if (opts.prebuild !== false) {
+    if (shouldPrebuild) {
       const sp = p.spinner();
       sp.start("Generating ios/android (expo prebuild)");
       try {
@@ -193,12 +198,15 @@ async function main() {
       }
     }
   }
-  p.outro([
+  const runCmd = (cmd) => `  ${project.pm} ${project.pm === "npm" ? "run " : ""}${cmd}`;
+  const nextSteps = [
     pc.green("Next steps:"),
     `  cd ${project.name}`,
-    project.install ? "" : `  ${project.pm} install`,
-    `  ${project.pm} ${project.pm === "npm" ? "run " : ""}start`
-  ].filter(Boolean).join("\n"));
+    !shouldInstall ? `  ${project.pm} install` : null,
+    !shouldPrebuild ? runCmd("prebuild --clean") : null,
+    runCmd("start")
+  ];
+  p.outro(nextSteps.filter(Boolean).join("\n"));
 }
 async function installDeps(pm, cwd) {
   const cmd = pm === "bun" ? "bun" : pm;

package/package.json

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

package/templates/boilerplate/holidia/.vscode/settings.json

@@ -0,0 +1 @@
+{}

package/templates/boilerplate/holidia/.vscode/snippets.code-snippets

@@ -0,0 +1,144 @@
+{
+  "View": {
+    "prefix": "v",
+    "body": ["<View className=\"$1\">", "  $2", "</View>"],
+    "description": "A Simple View",
+  },
+  "ViewRow": {
+    "prefix": "vr",
+    "body": ["<View className=\"flex flex-row items-center justify-center\">", "  $1", "</View>"],
+    "description": "A Simple Row View",
+  },
+  "Text": {
+    "prefix": "t",
+    "body": ["<Text variant=\"body\" className=\"text-center\">", "  $1", "</Text>"],
+    "description": "A Simple Text",
+  },
+  "export *": {
+    "prefix": "ex *",
+    "body": ["export * from './$1';"],
+    "description": "export *",
+  },
+  "Component": {
+    "prefix": "co",
+    "body": [
+      "import { View } from 'react-native';",
+      "",
+      "import Text from '~/components/text';",
+      "",
+      "type Props = {",
+      "  $2",
+      "};",
+      "const ${1:CompName} = ({}: Props) => {",
+      "  return (",
+      "    <View>",
+      "      <Text>${1:CompName} Component</Text>",
+      "    </View>",
+      "  );",
+      "};",
+      "",
+      "export default ${1:CompName};",
+    ],
+    "description": "Default Export Component",
+  },
+  "useQuery with variables": {
+    "prefix": "useqv",
+    "body": [
+      "import type { AxiosError } from 'axios';",
+      "import { createQuery } from 'react-query-kit';",
+      "",
+      "import { client } from '../common';",
+      "",
+      "type Variables = { $3 };",
+      "type Response = { $4 };",
+      "",
+      "export const use$1 = createQuery<Response, Variables, AxiosError>({",
+      "  queryKey: ['$2'],",
+      "  fetcher: (variables) => {",
+      "    return client",
+      "      .get(`$2/\\${variables.$5}`)",
+      "      .then((response) => response.data);",
+      "  },",
+      "});",
+    ],
+    "description": "useQuery with variables",
+  },
+  "useQuery": {
+    "prefix": "useq",
+    "body": [
+      "import type { AxiosError } from 'axios';",
+      "import { createQuery } from 'react-query-kit';",
+      "",
+      "import { client } from '../common';",
+      "",
+      "type Response = { $3 };",
+      "type Variables = void;",
+      "",
+      "export const use$1 = createQuery<Response, Variables, AxiosError>({",
+      "  queryKey: ['$2'],",
+      "  fetcher: () => {",
+      "    return client.get(`$2`).then((response) => response.data.posts);",
+      "  },",
+      "});",
+    ],
+    "description": "useQuery",
+  },
+  "useInfiniteQuery": {
+    "prefix": "useiq",
+    "body": [
+      "import type { AxiosError } from 'axios';",
+      "import { createInfiniteQuery } from 'react-query-kit';",
+      "",
+      "import { client } from '../common/client';",
+      "import { DEFAULT_LIMIT, getNextPageParam } from '../common/utils';",
+      "import type { PaginateQuery } from '../types';",
+      "",
+      "type Response = void;",
+      "type Variables = PaginateQuery<$3>;",
+      "",
+      "export const use$1 = createInfiniteQuery<Response, Variables, AxiosError>({",
+      "  queryKey: ['$2'],",
+      "  fetcher: (_variables, { pageParam }) => {",
+      "    return client({",
+      "      url: `/$2/`,",
+      "      method: 'GET',",
+      "      params: {",
+      "        limit: DEFAULT_LIMIT,",
+      "        offset: pageParam",
+      "      }",
+      "    }).then((response) => response.data);",
+      "  },",
+      "  getNextPageParam,",
+      "  initialPageParam: 0",
+      "});",
+    ],
+    "description": "useInfiniteQuery",
+  },
+  "useMutation": {
+    "prefix": "usem",
+    "body": [
+      "import type { AxiosError } from 'axios';",
+      "import { createMutation } from 'react-query-kit';",
+      "",
+      "import { client } from '../common';",
+      "",
+      "type Variables = { $3 };",
+      "type Response = { $4 };",
+      "",
+      "export const use$1 = createMutation<Response, Variables, AxiosError>({",
+      "  mutationFn: async (variables) =>",
+      "    client({",
+      "      url: '$2',",
+      "      method: 'POST',",
+      "      data: variables",
+      "    }).then((response) => response.data)",
+      "});",
+    ],
+    "description": "useMutation",
+  },
+  "export default": {
+    "prefix": "expd",
+    "body": ["export default $1;"],
+    "description": "Export Default",
+  },
+}

package/templates/boilerplate/holidia/.zed/settings.json

@@ -0,0 +1,7 @@
+// Folder-specific settings
+//
+// For a full list of overridable settings, and general information on folder-specific settings,
+// see the documentation: https://zed.dev/docs/configuring-zed#settings-files
+{
+  "current_line_highlight": "line"
+}

package/templates/boilerplate/holidia/README.md

@@ -1,3 +1,26 @@
-# Holidia template
+# Holidia App
 
-Adds a sample screen at `app/holi.tsx`. Extra deps will include React Query and AsyncStorage.
+Holidia app boilerplate with NativeWind styling.
+
+
+## Installation
+
+1. Install dependencies:
+   ```bash
+   pnpm install
+   ```
+
+2. Prebuild the project:
+   ```bash
+   pnpm prebuild --clean
+   ```
+
+3. Run the app:
+   - For Android:
+     ```bash
+     pnpm android
+     ```
+   - For iOS:
+     ```bash
+     pnpm ios
+     ```

package/templates/boilerplate/holidia/app/+html.tsx

@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/* 
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/* 
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`;

package/templates/boilerplate/holidia/app/+not-found.tsx

@@ -0,0 +1,23 @@
+import { Link, Stack } from 'expo-router';
+import { Text, View } from 'react-native';
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View className={styles.container}>
+        <Text className={styles.title}>This screen doesn't exist.</Text>
+        <Link href="/" className={styles.link}>
+          <Text className={styles.linkText}>Go to home screen!</Text>
+        </Link>
+      </View>
+    </>
+  );
+}
+
+const styles = {
+  container: `items-center flex-1 justify-center p-5`,
+  title: `text-xl font-bold`,
+  link: `mt-4 pt-4`,
+  linkText: `text-base text-[#2e78b7]`,
+};

package/templates/boilerplate/holidia/app/properties/[id].tsx

@@ -0,0 +1,264 @@
+import Ionicons from '@expo/vector-icons/Ionicons';
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
+import { Calendar, fromDateId, toDateId, useDateRange } from '@marceloterreiro/flash-calendar';
+import { nanoid } from 'nanoid/non-secure';
+import { toast } from 'sonner-native';
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  addMonths,
+  differenceInDays,
+  isBefore,
+  isSameMonth,
+  startOfMonth,
+  subMonths,
+} from 'date-fns';
+import { router, useLocalSearchParams } from 'expo-router';
+import { SquircleButton } from 'expo-squircle-view';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import Container from '~/components/container';
+import Header from '~/components/header';
+import LoadingIndicator from '~/components/loading-indicator';
+import AmenitiesList from '~/components/property/amenities-list';
+import PropertyImage from '~/components/property/property-image';
+import Text from '~/components/text';
+import { client } from '~/core/api/client';
+import { today } from '~/core/constants';
+import useShoppingCartStore from '~/core/store';
+import { calendarTheme } from '~/core/theme/calendar-theme';
+import { PRIMARY } from '~/core/theme/colors';
+
+type Props = {};
+const Property = ({}: Props) => {
+  const { id } = useLocalSearchParams();
+
+  const { data: property, isLoading } = useQuery<Property>({
+    queryKey: ['property' + id],
+    queryFn: async () => {
+      const { data } = await client.get(`/properties/${id}`);
+      return data.property;
+    },
+  });
+
+  const { addItem } = useShoppingCartStore();
+
+  const { calendarActiveDateRanges, onCalendarDayPress } = useDateRange();
+
+  console.log({ calendarActiveDateRanges });
+
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  const snapPoints = useMemo(() => ['60%'], []);
+
+  const renderBackdrop = useCallback((props: BottomSheetBackdropProps) => {
+    return (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior={'close'}
+      />
+    );
+  }, []);
+
+  const calculateDays = () => {
+    if (!calendarActiveDateRanges[0]?.startId) return 0;
+    if (!calendarActiveDateRanges[0]?.endId) return 1;
+
+    const startDate = new Date(calendarActiveDateRanges[0].startId);
+    const endDate = new Date(calendarActiveDateRanges[0].endId);
+
+    return differenceInDays(endDate, startDate) + 1;
+  };
+
+  const hasSelectedDates = Boolean(calendarActiveDateRanges[0]?.startId);
+  const [calendarMonthId, setCalendarMonthId] = useState(today);
+
+  const nextMonth = () => {
+    const month = addMonths(calendarMonthId, 1);
+    setCalendarMonthId(toDateId(month));
+  };
+
+  const currentDisplayMonth = fromDateId(calendarMonthId);
+  const canGoBack =
+    !isSameMonth(currentDisplayMonth, today) && !isBefore(currentDisplayMonth, startOfMonth(today));
+
+  const prevMonth = () => {
+    if (canGoBack) {
+      const month = subMonths(calendarMonthId, 1);
+      setCalendarMonthId(toDateId(month));
+    }
+  };
+  if (isLoading || !property) {
+    return <LoadingIndicator />;
+  }
+  const days = calculateDays();
+  const totalPrice = days * property.price_per_night;
+
+  return (
+    <Container>
+      <Header title="Property" />
+      <ScrollView className="flex-1 bg-gray-100 p-4">
+        <PropertyImage
+          imageUrl={property?.images[1]}
+          isFavorite={property?.is_favorite}
+          rating={5}
+        />
+        <View className="flex flex-row items-center justify-between">
+          <Text variant="subtitle-primary" className="mt-4">
+            {property.name}
+          </Text>
+          <View className="flex flex-row items-center justify-center">
+            <Ionicons name="pricetag" size={12} color={PRIMARY} />
+            <Text variant="body-primary" className="ml-2">
+              ${property.price_per_night} per night
+            </Text>
+          </View>
+        </View>
+        <View className="flex flex-row items-center">
+          <Ionicons name="location" size={16} color={PRIMARY} />
+          <Text variant="body-primary" className="">
+            {property.city}, {property.country}
+          </Text>
+        </View>
+        <Text variant="body" className="mt-1 text-gray-700">
+          {property.description}
+        </Text>
+        <AmenitiesList amenities={property.amenities} />
+      </ScrollView>
+
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        backdropComponent={renderBackdrop}
+        index={-1}
+        enablePanDownToClose={true}
+        enableDynamicSizing={false}>
+        <BottomSheetView style={{ flex: 1 }}>
+          <View className="my-4 flex flex-row items-center justify-between px-4">
+            <View className="flex flex-row items-center justify-center">
+              <Ionicons name="wallet" color={PRIMARY} size={24} />
+              <Text variant="subtitle" className="mx-4">
+                Price : ${hasSelectedDates ? totalPrice : property.price_per_night}
+                {!hasSelectedDates && ' per night'}
+              </Text>
+            </View>
+          </View>
+          <BottomSheetView style={{ flex: 1, paddingHorizontal: 4, position: 'relative' }}>
+            <View className="mt-20 flex flex-row justify-between">
+              <Pressable onPress={prevMonth} disabled={!canGoBack}>
+                <Ionicons name="arrow-back" size={24} color={canGoBack ? PRIMARY : 'gray'} />
+              </Pressable>
+              <Pressable onPress={nextMonth}>
+                <Ionicons name="arrow-forward" size={24} color={PRIMARY} />
+              </Pressable>
+            </View>
+
+            <Calendar
+              calendarMonthId={calendarMonthId}
+              calendarActiveDateRanges={calendarActiveDateRanges}
+              calendarMinDateId={today}
+              onCalendarDayPress={onCalendarDayPress}
+              theme={calendarTheme}
+            />
+            <SquircleButton
+              backgroundColor={PRIMARY}
+              cornerSmoothing={100}
+              onPress={() => {
+                bottomSheetRef.current?.close();
+
+                if (!hasSelectedDates || !calendarActiveDateRanges[0]?.startId) {
+                  console.log('error: please select dates');
+                  return;
+                }
+
+                const cartItem: ICartItem = {
+                  id: 'cart' + nanoid(),
+                  image: property.images[0],
+                  name: property.name,
+                  product: property.id,
+                  price_per_night: property.price_per_night,
+                  quantity: 1,
+                  startDate: calendarActiveDateRanges[0].startId,
+                  endDate:
+                    calendarActiveDateRanges[0]?.endId ?? calendarActiveDateRanges[0].startId,
+                  days: calculateDays(),
+                };
+                addItem(cartItem);
+                bottomSheetRef.current?.close();
+              }}
+              preserveSmoothing
+              className="m-8 flex flex-row items-center justify-center px-4 "
+              style={{
+                paddingVertical: 16,
+                position: 'absolute',
+                bottom: -120,
+                left: 0,
+                right: 0,
+              }}
+              borderRadius={24}>
+              <Ionicons name="checkmark-circle" size={20} color={'white'} />
+              <Text variant="button" className="mx-2 text-center">
+                Confirm
+              </Text>
+            </SquircleButton>
+          </BottomSheetView>
+        </BottomSheetView>
+      </BottomSheet>
+
+      <View className="bottom-0 left-0 right-0 -z-10 mx-4 mt-auto flex flex-row items-center justify-center py-2">
+        {hasSelectedDates ? (
+          <Pressable
+            className="mr-4"
+            onPress={() => {
+              bottomSheetRef.current?.expand();
+            }}>
+            <View className="flex flex-row items-center">
+              <Ionicons name="pricetag" color={PRIMARY} size={16} />
+              <Text variant="body-primary" className="text-center">
+                ${totalPrice}
+              </Text>
+            </View>
+            <Text variant="caption" className="text-center underline">
+              {days === 1 ? '1 Night' : `${days} nights`}
+            </Text>
+          </Pressable>
+        ) : (
+          <Pressable
+            className="mr-4 flex flex-row items-center"
+            onPress={() => {
+              bottomSheetRef.current?.expand();
+            }}>
+            <Ionicons name="calendar-outline" size={24} color={PRIMARY} />
+            <Text variant="body-primary" className="ml-2 text-center underline">
+              Select dates
+            </Text>
+          </Pressable>
+        )}
+        <SquircleButton
+          onPress={() => {
+            toast.success('Property added to cart');
+            router.push('/checkout');
+          }}
+          className="flex-grow"
+          backgroundColor={PRIMARY}
+          borderRadius={16}
+          style={{
+            paddingVertical: 16,
+            marginVertical: 4,
+          }}>
+          <Text variant="button" className="text-center">
+            Book Now
+          </Text>
+        </SquircleButton>
+      </View>
+    </Container>
+  );
+};
+
+export default Property;

package/templates/boilerplate/holidia/app-env.d.ts

@@ -0,0 +1,2 @@
+// @ts-ignore
+/// <reference types="nativewind/types" />