@highbeek/create-rnstarterkit 1.0.2-beta.5 → 1.0.2-beta.7

package/dist/src/generators/appGenerator.js

@@ -18,7 +18,7 @@ async function generateApp(options) {
         filter: (src) => shouldCopyPath(src, templatePath),
     });
     await replaceProjectName(targetPath, projectName);
-    await createStandardStructure(targetPath);
+    await createStandardStructure(targetPath, platform);
     if (auth) {
         const authFolder = state === "Redux Toolkit"
             ? "auth-redux"
@@ -29,8 +29,13 @@ async function generateApp(options) {
         if (authFolder === "auth-context" ||
             authFolder === "auth-zustand" ||
             authFolder === "auth-redux") {
-            await setAuthTabsByPlatform(targetPath, platform);
-            await writeAuthAppShell(targetPath, state);
+            if (platform === "Expo") {
+                await writeExpoRouterAuthRoutes(targetPath, state);
+            }
+            else {
+                await setAuthTabsByPlatform(targetPath, platform);
+                await writeAuthAppShell(targetPath, state);
+            }
         }
     }
     if (apiClient) {
@@ -46,6 +51,7 @@ async function generateApp(options) {
     if (storage === "MMKV")
         await copyOptionalModule("mmkv", targetPath);
     await configureStateAndAuthDependencies(targetPath, {
+        platform,
         state,
         auth,
         storage,
@@ -53,6 +59,7 @@ async function generateApp(options) {
     await configureAbsoluteImports(targetPath, platform, absoluteImports);
     await configureDataFetching(targetPath, dataFetching);
     await configureApiClientTransport(targetPath, apiClient, apiClientType);
+    await syncApiIndex(targetPath);
     await configureValidation(targetPath, validation);
     if (typescript) {
         const tsconfigTemplate = path_1.default.join(templateRoot, "optional/tsconfig.json");
@@ -144,26 +151,26 @@ async function ensureCliApiEnvSupport(targetPath) {
         },
     });
 }
-async function createStandardStructure(targetPath) {
-    const directories = [
+async function createStandardStructure(targetPath, platform) {
+    const commonDirectories = [
         "assets",
         "assets/icons",
         "assets/images",
         "assets/fonts",
         "components",
-        "navigation",
-        "screens",
         "hooks",
         "utils",
         "services",
+        "api",
+        "config",
+        "context",
     ];
+    const cliOnlyDirectories = ["navigation", "screens"];
+    const directories = platform === "Expo"
+        ? commonDirectories
+        : [...commonDirectories, ...cliOnlyDirectories];
     for (const directory of directories) {
-        const absoluteDir = path_1.default.join(targetPath, directory);
-        await fs_extra_1.default.ensureDir(absoluteDir);
-        const gitkeepPath = path_1.default.join(absoluteDir, ".gitkeep");
-        if (!(await fs_extra_1.default.pathExists(gitkeepPath))) {
-            await fs_extra_1.default.writeFile(gitkeepPath, "", "utf8");
-        }
+        await fs_extra_1.default.ensureDir(path_1.default.join(targetPath, directory));
     }
 }
 async function configureAbsoluteImports(targetPath, platform, absoluteImports) {
@@ -204,24 +211,156 @@ export const queryClient = new QueryClient();
 }
 async function configureApiClientTransport(targetPath, apiClient, apiClientType) {
     if (apiClient && apiClientType === "Axios") {
-        const templateRoot = await resolveTemplateRoot();
         await ensureDependencies(targetPath, {
             dependencies: {
                 axios: "^1.12.2",
             },
         });
-        await writeIfMissing(path_1.default.join(targetPath, "api/axiosClient.ts"), `import axios from "axios";
+        await fs_extra_1.default.writeFile(path_1.default.join(targetPath, "api/client.ts"), `import axios, {
+  AxiosError,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from "axios";
 import { API_BASE_URL } from "../config/env";
 
-export const axiosClient = axios.create({
+export class ApiError extends Error {
+  status: number;
+  data: unknown;
+
+  constructor(status: number, message: string, data: unknown) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.data = data;
+  }
+}
+
+type RequestOptions = {
+  headers?: Record<string, string>;
+  query?: Record<string, string | number | boolean | undefined>;
+  token?: string | null;
+  signal?: AbortSignal;
+};
+
+const client = axios.create({
   baseURL: API_BASE_URL,
   timeout: 15000,
 });
-`);
-        await fs_extra_1.default.copy(path_1.default.join(templateRoot, "optional/apiClient/api/client.axios.ts"), path_1.default.join(targetPath, "api/client.ts"), {
-            overwrite: true,
-        });
+
+let authTokenGetter: (() => string | null | undefined) | null = null;
+
+export function setAuthTokenGetter(getter: (() => string | null | undefined) | null) {
+  authTokenGetter = getter;
+}
+
+function resolveErrorMessage(data: unknown, status: number) {
+  if (
+    typeof data === "object" &&
+    data !== null &&
+    "message" in data &&
+    typeof (data as { message: unknown }).message === "string"
+  ) {
+    return (data as { message: string }).message;
+  }
+  return \`Request failed with status \${status}\`;
+}
+
+export function addRequestInterceptor(
+  interceptor: (
+    config: InternalAxiosRequestConfig,
+  ) =>
+    | InternalAxiosRequestConfig
+    | Promise<InternalAxiosRequestConfig>,
+) {
+  return client.interceptors.request.use(interceptor);
+}
+
+export function addResponseInterceptor(
+  onFulfilled?: (
+    response: AxiosResponse,
+  ) => AxiosResponse | Promise<AxiosResponse>,
+  onRejected?: (error: AxiosError) => unknown,
+) {
+  return client.interceptors.response.use(onFulfilled, onRejected);
+}
+
+addRequestInterceptor((config) => {
+  const token = authTokenGetter?.();
+  if (token) {
+    config.headers.Authorization = \`Bearer \${token}\`;
+  }
+  return config;
+});
+
+addResponseInterceptor(
+  (response) => response,
+  (error) => {
+    if (axios.isAxiosError(error)) {
+      const status = error.response?.status ?? 500;
+      const data = error.response?.data ?? null;
+      return Promise.reject(new ApiError(status, resolveErrorMessage(data, status), data));
     }
+    return Promise.reject(error);
+  },
+);
+
+async function request<T>(
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+  path: string,
+  body?: unknown,
+  options: RequestOptions = {},
+): Promise<T> {
+  const { headers = {}, query, token, signal } = options;
+  const requestConfig: AxiosRequestConfig = {
+    method,
+    url: path,
+    data: body,
+    params: query,
+    signal,
+    headers: {
+      ...(token ? { Authorization: \`Bearer \${token}\` } : {}),
+      ...headers,
+    },
+  };
+  const response = await client.request<T>(requestConfig);
+  return response.data;
+}
+
+export const apiClient = {
+  get: <T>(path: string, options?: RequestOptions) =>
+    request<T>("GET", path, undefined, options),
+  post: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>("POST", path, body, options),
+  put: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>("PUT", path, body, options),
+  patch: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>("PATCH", path, body, options),
+  delete: <T>(path: string, options?: RequestOptions) =>
+    request<T>("DELETE", path, undefined, options),
+};
+`, "utf8");
+        await fs_extra_1.default.remove(path_1.default.join(targetPath, "api/client.axios.ts"));
+        await fs_extra_1.default.remove(path_1.default.join(targetPath, "api/axiosClient.ts"));
+    }
+}
+async function syncApiIndex(targetPath) {
+    const apiDir = path_1.default.join(targetPath, "api");
+    if (!(await fs_extra_1.default.pathExists(apiDir)))
+        return;
+    const exports = [];
+    if (await fs_extra_1.default.pathExists(path_1.default.join(apiDir, "client.ts"))) {
+        exports.push('export * from "./client";');
+    }
+    if (await fs_extra_1.default.pathExists(path_1.default.join(apiDir, "endpoints/auth.ts"))) {
+        exports.push('export * from "./endpoints/auth";');
+    }
+    else if (await fs_extra_1.default.pathExists(path_1.default.join(apiDir, "authApi.ts"))) {
+        exports.push('export * from "./authApi";');
+    }
+    if (exports.length === 0)
+        return;
+    await fs_extra_1.default.writeFile(path_1.default.join(apiDir, "index.ts"), `${exports.join("\n")}\n`, "utf8");
 }
 async function configureValidation(targetPath, validation) {
     const dependencies = {};
@@ -237,7 +376,7 @@ async function configureValidation(targetPath, validation) {
 }
 async function configureStateAndAuthDependencies(targetPath, options) {
     const dependencies = {};
-    if (options.auth) {
+    if (options.auth && options.platform === "React Native CLI") {
         dependencies["@react-navigation/native-stack"] = "^7.3.29";
     }
     if (options.state === "Redux Toolkit") {
@@ -255,6 +394,466 @@ async function configureStateAndAuthDependencies(targetPath, options) {
         await ensureDependencies(targetPath, { dependencies });
     }
 }
+async function writeExpoRouterAuthRoutes(targetPath, state) {
+    const appDir = path_1.default.join(targetPath, "app");
+    const authDir = path_1.default.join(appDir, "(auth)");
+    const tabsDir = path_1.default.join(appDir, "(tabs)");
+    await fs_extra_1.default.ensureDir(authDir);
+    await fs_extra_1.default.ensureDir(tabsDir);
+    const stateBindings = getExpoAuthStateBindings(state);
+    const routeFiles = getExpoAuthRouteFiles(state);
+    await fs_extra_1.default.writeFile(path_1.default.join(appDir, "_layout.tsx"), stateBindings.rootLayout, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(appDir, "index.tsx"), stateBindings.indexRoute, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(authDir, "_layout.tsx"), stateBindings.authLayout, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "_layout.tsx"), stateBindings.tabsLayout, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(authDir, "login.tsx"), routeFiles.login, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(authDir, "register.tsx"), routeFiles.register, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "index.tsx"), routeFiles.home, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "profile.tsx"), routeFiles.profile, "utf8");
+    await fs_extra_1.default.writeFile(path_1.default.join(tabsDir, "settings.tsx"), routeFiles.settings, "utf8");
+    await fs_extra_1.default.remove(path_1.default.join(targetPath, "navigation"));
+    await fs_extra_1.default.remove(path_1.default.join(targetPath, "screens"));
+}
+function getExpoAuthStateBindings(state) {
+    if (state === "Redux Toolkit") {
+        return {
+            rootLayout: `import React from "react";
+import { Slot } from "expo-router";
+import { Provider } from "react-redux";
+import { store } from "../store/store";
+
+export default function RootLayout() {
+  return (
+    <Provider store={store}>
+      <Slot />
+    </Provider>
+  );
+}
+`,
+            indexRoute: `import React from "react";
+import { Redirect } from "expo-router";
+import { useSelector } from "react-redux";
+import type { RootState } from "../store/store";
+
+export default function Index() {
+  const token = useSelector((state: RootState) => state.auth.token);
+  return <Redirect href={token ? "/(tabs)" : "/(auth)/login"} />;
+}
+`,
+            authLayout: `import React from "react";
+import { Redirect, Stack } from "expo-router";
+import { useSelector } from "react-redux";
+import type { RootState } from "../../store/store";
+
+export default function AuthLayout() {
+  const token = useSelector((state: RootState) => state.auth.token);
+  if (token) return <Redirect href="/(tabs)" />;
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+    </Stack>
+  );
+}
+`,
+            tabsLayout: `import React from "react";
+import { Redirect, Tabs } from "expo-router";
+import { useSelector } from "react-redux";
+import type { RootState } from "../../store/store";
+
+export default function TabsLayout() {
+  const token = useSelector((state: RootState) => state.auth.token);
+  if (!token) return <Redirect href="/(auth)/login" />;
+
+  return (
+    <Tabs screenOptions={{ headerShown: false }}>
+      <Tabs.Screen name="index" options={{ title: "Home" }} />
+      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
+    </Tabs>
+  );
+}
+`,
+        };
+    }
+    if (state === "Zustand") {
+        return {
+            rootLayout: `import React from "react";
+import { Slot } from "expo-router";
+
+export default function RootLayout() {
+  return <Slot />;
+}
+`,
+            indexRoute: `import React from "react";
+import { useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { Redirect } from "expo-router";
+import { useAuthStore } from "../store/authStore";
+
+export default function Index() {
+  const token = useAuthStore((state) => state.token);
+  const isHydrated = useAuthStore((state) => state.isHydrated);
+  const hydrate = useAuthStore((state) => state.hydrate);
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  return <Redirect href={token ? "/(tabs)" : "/(auth)/login"} />;
+}
+`,
+            authLayout: `import React, { useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { Redirect, Stack } from "expo-router";
+import { useAuthStore } from "../../store/authStore";
+
+export default function AuthLayout() {
+  const token = useAuthStore((state) => state.token);
+  const isHydrated = useAuthStore((state) => state.isHydrated);
+  const hydrate = useAuthStore((state) => state.hydrate);
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (token) return <Redirect href="/(tabs)" />;
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+    </Stack>
+  );
+}
+`,
+            tabsLayout: `import React, { useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { Redirect, Tabs } from "expo-router";
+import { useAuthStore } from "../../store/authStore";
+
+export default function TabsLayout() {
+  const token = useAuthStore((state) => state.token);
+  const isHydrated = useAuthStore((state) => state.isHydrated);
+  const hydrate = useAuthStore((state) => state.hydrate);
+
+  useEffect(() => {
+    void hydrate();
+  }, [hydrate]);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (!token) return <Redirect href="/(auth)/login" />;
+
+  return (
+    <Tabs screenOptions={{ headerShown: false }}>
+      <Tabs.Screen name="index" options={{ title: "Home" }} />
+      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
+    </Tabs>
+  );
+}
+`,
+        };
+    }
+    return {
+        rootLayout: `import React from "react";
+import { Slot } from "expo-router";
+import { AuthProvider } from "../context/AuthContext";
+
+export default function RootLayout() {
+  return (
+    <AuthProvider>
+      <Slot />
+    </AuthProvider>
+  );
+}
+`,
+        indexRoute: `import React, { useContext } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { Redirect } from "expo-router";
+import { AuthContext } from "../context/AuthContext";
+
+export default function Index() {
+  const { token, isHydrated } = useContext(AuthContext);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  return <Redirect href={token ? "/(tabs)" : "/(auth)/login"} />;
+}
+`,
+        authLayout: `import React, { useContext } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { Redirect, Stack } from "expo-router";
+import { AuthContext } from "../../context/AuthContext";
+
+export default function AuthLayout() {
+  const { token, isHydrated } = useContext(AuthContext);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (token) return <Redirect href="/(tabs)" />;
+
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+    </Stack>
+  );
+}
+`,
+        tabsLayout: `import React, { useContext } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { Redirect, Tabs } from "expo-router";
+import { AuthContext } from "../../context/AuthContext";
+
+export default function TabsLayout() {
+  const { token, isHydrated } = useContext(AuthContext);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (!token) return <Redirect href="/(auth)/login" />;
+
+  return (
+    <Tabs screenOptions={{ headerShown: false }}>
+      <Tabs.Screen name="index" options={{ title: "Home" }} />
+      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
+    </Tabs>
+  );
+}
+`,
+    };
+}
+function getExpoAuthRouteFiles(state) {
+    const register = `import React from "react";
+import { Text, View } from "react-native";
+
+export default function RegisterScreen() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>RegisterScreen</Text>
+    </View>
+  );
+}
+`;
+    const profile = `import React from "react";
+import { Text, View } from "react-native";
+
+export default function ProfileScreen() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>ProfileScreen</Text>
+    </View>
+  );
+}
+`;
+    const settings = `import React from "react";
+import { Text, View } from "react-native";
+
+export default function SettingsScreen() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>SettingsScreen</Text>
+    </View>
+  );
+}
+`;
+    if (state === "Redux Toolkit") {
+        return {
+            login: `import React, { useState } from "react";
+import { Button, TextInput, View } from "react-native";
+import { useDispatch } from "react-redux";
+import { loginApi } from "../../api";
+import { login } from "../../store/authSlice";
+
+export default function LoginScreen() {
+  const dispatch = useDispatch();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    const token = await loginApi(email, password);
+    dispatch(login(token));
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Button title="Login" onPress={() => void handleLogin()} />
+    </View>
+  );
+}
+`,
+            register,
+            home: `import React from "react";
+import { Button, Text, View } from "react-native";
+import { useDispatch } from "react-redux";
+import { logout } from "../../store/authSlice";
+
+export default function HomeScreen() {
+  const dispatch = useDispatch();
+
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>Welcome Home!</Text>
+      <Button title="Logout" onPress={() => dispatch(logout())} />
+    </View>
+  );
+}
+`,
+            profile,
+            settings,
+        };
+    }
+    if (state === "Zustand") {
+        return {
+            login: `import React, { useState } from "react";
+import { Button, TextInput, View } from "react-native";
+import { loginApi } from "../../api";
+import { useAuthStore } from "../../store/authStore";
+
+export default function LoginScreen() {
+  const login = useAuthStore((state) => state.login);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    const token = await loginApi(email, password);
+    await login(token);
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Button title="Login" onPress={() => void handleLogin()} />
+    </View>
+  );
+}
+`,
+            register,
+            home: `import React from "react";
+import { Button, Text, View } from "react-native";
+import { useAuthStore } from "../../store/authStore";
+
+export default function HomeScreen() {
+  const logout = useAuthStore((state) => state.logout);
+
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>Welcome Home!</Text>
+      <Button title="Logout" onPress={() => void logout()} />
+    </View>
+  );
+}
+`,
+            profile,
+            settings,
+        };
+    }
+    return {
+        login: `import React, { useContext, useState } from "react";
+import { Button, TextInput, View } from "react-native";
+import { loginApi } from "../../api";
+import { AuthContext } from "../../context/AuthContext";
+
+export default function LoginScreen() {
+  const { login } = useContext(AuthContext);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    const token = await loginApi(email, password);
+    await login(token);
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Button title="Login" onPress={() => void handleLogin()} />
+    </View>
+  );
+}
+`,
+        register,
+        home: `import React, { useContext } from "react";
+import { Button, Text, View } from "react-native";
+import { AuthContext } from "../../context/AuthContext";
+
+export default function HomeScreen() {
+  const { logout } = useContext(AuthContext);
+
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>Welcome Home!</Text>
+      <Button title="Logout" onPress={() => void logout()} />
+    </View>
+  );
+}
+`,
+        profile,
+        settings,
+    };
+}
 async function writeAuthAppShell(targetPath, state) {
     const appPath = path_1.default.join(targetPath, "App.tsx");
     const byState = {