newcandies 0.1.5 → 0.1.7

package/dist/index.js

@@ -151,11 +151,13 @@ async function writeBaseline({ dest, name, withQuery }) {
     "react-native-worklets": "0.5.1",
     // Styling
     tailwindcss: "^4.1.16",
-    uniwind: "^1.0.0"
+    uniwind: "^1.0.0",
+    "@expo/vector-icons": "latest"
   };
   if (withQuery) {
     baseDeps["@tanstack/react-query"] = "latest";
   }
+  baseDeps["tailwind-merge"] = "latest";
   const pkg = {
     name,
     version: "0.0.0",
@@ -169,7 +171,8 @@ async function writeBaseline({ dest, name, withQuery }) {
     dependencies: baseDeps,
     devDependencies: {
       "@types/react": "~19.1.0",
-      typescript: "~5.9.2"
+      typescript: "~5.9.2",
+      "babel-plugin-module-resolver": "latest"
     }
   };
   await fs.writeJSON(path.join(dest, "package.json"), pkg, { spaces: 2 });
@@ -209,7 +212,7 @@ async function writeBaseline({ dest, name, withQuery }) {
         output: "static",
         favicon: "./assets/images/favicon.png"
       },
-      plugins: ["expo-router"],
+      plugins: [["expo-router", { appRoot: "./src/app" }]],
       experiments: {
         typedRoutes: true
       }
@@ -221,6 +224,7 @@ async function writeBaseline({ dest, name, withQuery }) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
+      ['module-resolver', { alias: { '~': './' } }],
       'react-native-reanimated/plugin'
     ]
   };
@@ -239,22 +243,79 @@ module.exports = withUniwindConfig(config, {
 `;
   await fs.writeFile(path.join(dest, "metro.config.js"), metro);
   const tsconfig = {
+    extends: "expo/tsconfig.base",
     compilerOptions: {
       strict: true,
-      jsx: "react-native",
-      target: "ES2020",
-      moduleResolution: "node",
-      types: ["react", "react-native"]
+      paths: {
+        "~/*": ["./*"]
+      }
     },
-    include: ["app", "./uniwind-types.d.ts", "./expo-env.d.ts"]
+    include: [
+      "**/*.ts",
+      "**/*.tsx",
+      ".expo/types/**/*.ts",
+      "expo-env.d.ts",
+      "./uniwind-types.d.ts"
+    ]
   };
   await fs.writeJSON(path.join(dest, "tsconfig.json"), tsconfig, { spaces: 2 });
   const expoEnv = `/// <reference types="expo" />
 /// <reference types="expo-router" />
 `;
   await fs.writeFile(path.join(dest, "expo-env.d.ts"), expoEnv);
-  const appDir = path.join(dest, "app");
+  const srcDir = path.join(dest, "src");
+  const appDir = path.join(srcDir, "app");
   await fs.ensureDir(appDir);
+  await fs.ensureDir(path.join(srcDir, "core"));
+  await fs.ensureDir(path.join(srcDir, "api"));
+  await fs.ensureDir(path.join(srcDir, "lib"));
+  await fs.ensureDir(path.join(srcDir, "types"));
+  await fs.ensureDir(path.join(srcDir, "components", "screens", "home"));
+  await fs.ensureDir(path.join(srcDir, "components", "screens", "profile"));
+  await fs.ensureDir(path.join(srcDir, "components", "core"));
+  const textCore = `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';
+
+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',
+  body: 'text-base',
+  'body-primary': 'text-base text-primary',
+  caption: 'text-sm font-medium',
+  'caption-primary': 'text-sm text-primary font-medium',
+  button: 'text-xl text-primary font-semibold text-white text-center',
+  display: 'text-3x font-bold',
+};
+
+const Text = ({ variant = 'body', children, className, ...props }: TextComponentProps) => {
+  const textStyle = twMerge('text-black', variantStyles[variant], className);
+  return (
+    <RNText className={textStyle} {...props}>
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;
+`;
+  await fs.writeFile(path.join(srcDir, "components", "core", "text.tsx"), textCore);
   const easJson = {
     cli: { version: ">= 7.0.0" },
     build: {
@@ -285,80 +346,185 @@ module.exports = withUniwindConfig(config, {
 `;
   await fs.writeFile(path.join(dest, "global.css"), globalCss);
   {
-    const rootLayout = withQuery ? `import 'react-native-gesture-handler';
-import '../global.css';
-import { Slot } from 'expo-router';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+    const rootLayout = withQuery ? `import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { useEffect } from "react";
+import "react-native-reanimated";
+import "../../global.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export { ErrorBoundary } from "expo-router";
+
+export const unstable_settings = {
+  initialRouteName: "(tabs)",
+};
+
+SplashScreen.preventAutoHideAsync();
 
 const queryClient = new QueryClient();
 
-const RootLayout = () => {
+export default function RootLayout() {
+  const [loaded, error] = useFonts({
+    SpaceMono: require("../../assets/fonts/SpaceMono-Regular.ttf"),
+    ...FontAwesome.font,
+  });
+
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
-        <QueryClientProvider client={queryClient}>
-          <Slot />
-        </QueryClientProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+    <QueryClientProvider client={queryClient}>
+      <RootLayoutNav />
+    </QueryClientProvider>
   );
-};
-
-export default RootLayout;
-` : `import 'react-native-gesture-handler';
-import '../global.css';
-import { Slot } from 'expo-router';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+}
 
-const RootLayout = () => {
+function RootLayoutNav() {
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <SafeAreaProvider>
-        <Slot />
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+    </Stack>
   );
+}
+` : `import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { useEffect } from "react";
+import "react-native-reanimated";
+import "../../global.css";
+
+export { ErrorBoundary } from "expo-router";
+
+export const unstable_settings = {
+  initialRouteName: "(tabs)",
 };
 
-export default RootLayout;
+SplashScreen.preventAutoHideAsync();
+
+export default function RootLayout() {
+  const [loaded, error] = useFonts({
+    SpaceMono: require("../../assets/fonts/SpaceMono-Regular.ttf"),
+    ...FontAwesome.font,
+  });
+
+  useEffect(() => {
+    if (error) throw error;
+  }, [error]);
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return <RootLayoutNav />;
+}
+
+function RootLayoutNav() {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <Stack.Screen name="modal" options={{ presentation: "modal" }} />
+    </Stack>
+  );
+}
 `;
     await fs.writeFile(path.join(appDir, "_layout.tsx"), rootLayout);
     const tabsDir = path.join(appDir, "(tabs)");
     await fs.ensureDir(tabsDir);
-    const layout = `import { Tabs } from 'expo-router';
+    const layout = `import React from 'react';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Link, Tabs } from 'expo-router';
+import { Pressable } from 'react-native';
+import '../../global.css';
 
-const TabsLayout = () => {
-  return <Tabs screenOptions={{ headerShown: false }} />;
-};
+function TabBarIcon(props: { name: React.ComponentProps<typeof FontAwesome>['name']; color: string; }) {
+  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
+}
 
-export default TabsLayout;
+export default function TabLayout() {
+  return (
+    <Tabs screenOptions={{ headerShown: true }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Tab One',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+          headerRight: () => (
+            <Link href="/modal" asChild>
+              <Pressable>
+                {({ pressed }) => (
+                  <FontAwesome name="info-circle" size={25} color={"#1f2937"} style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }} />
+                )}
+              </Pressable>
+            </Link>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="two"
+        options={{
+          title: 'Tab Two',
+          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
 `;
     await fs.writeFile(path.join(tabsDir, "_layout.tsx"), layout);
-    const home = `import { View, Text } from 'react-native';
-
-const Home = () => (
-  <View className="flex-1 items-center justify-center bg-background">
-    <Text className="text-foreground text-xl">Home Tab</Text>
-  </View>
-);
+    const tabOne = `import { View, Text } from 'react-native';
 
-export default Home;
+export default function Index() {
+  return (
+    <View className="flex-1 items-center justify-center bg-background">
+      <Text className="text-foreground text-xl">Tab One</Text>
+    </View>
+  );
+}
 `;
-    await fs.writeFile(path.join(tabsDir, "index.tsx"), home);
-    const settings = `import { View, Text } from 'react-native';
+    await fs.writeFile(path.join(tabsDir, "index.tsx"), tabOne);
+    const tabTwo = `import { View, Text } from 'react-native';
 
-const Settings = () => (
-  <View className="flex-1 items-center justify-center bg-background">
-    <Text className="text-foreground text-xl">Settings Tab</Text>
-  </View>
-);
+export default function Two() {
+  return (
+    <View className="flex-1 items-center justify-center bg-background">
+      <Text className="text-foreground text-xl">Tab Two</Text>
+    </View>
+  );
+}
+`;
+    await fs.writeFile(path.join(tabsDir, "two.tsx"), tabTwo);
+    const modal = `import { View, Text } from 'react-native';
 
-export default Settings;
+export default function Modal() {
+  return (
+    <View className="flex-1 items-center justify-center bg-background">
+      <Text className="text-foreground text-xl">Modal screen</Text>
+    </View>
+  );
+}
 `;
-    await fs.writeFile(path.join(tabsDir, "settings.tsx"), settings);
+    await fs.writeFile(path.join(appDir, "modal.tsx"), modal);
   }
 }
 async function applyTemplateOverlay({ dest, type, template, category, variant }) {

package/package.json

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