@highbeek/create-rnstarterkit 1.0.2-beta.2 → 1.0.2-beta.3

package/dist/templates/optional/auth-redux/screens/LoginScreen.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { View, TextInput, Button } from "react-native";
+import { useDispatch } from "react-redux";
+import { login } from "../store/authSlice";
+import { loginApi } from "../api/authApi";
+
+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>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Button title="Login" onPress={handleLogin} />
+    </View>
+  );
+}

package/dist/templates/optional/auth-redux/screens/ProfileScreen.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+const ProfileScreen = () => {
+  return (
+    <View>
+      <Text>ProfileScreen</Text>
+    </View>
+  )
+}
+
+export default ProfileScreen
+
+const styles = StyleSheet.create({})

package/dist/templates/optional/auth-redux/screens/RegisterScreen.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const RegisterScreen = () => {
+  return (
+    <View>
+      <Text>RegisterScreen</Text>
+    </View>
+  );
+};
+
+export default RegisterScreen;
+
+const styles = StyleSheet.create({});

package/dist/templates/optional/auth-redux/screens/SettingsScreen.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const SettingsScreen = () => {
+  return (
+    <View>
+      <Text>SettingsScreen</Text>
+    </View>
+  );
+};
+
+export default SettingsScreen;
+
+const styles = StyleSheet.create({});

package/dist/templates/optional/auth-redux/store/authSlice.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface AuthState {
+  token: string | null;
+}
+
+const initialState: AuthState = {
+  token: null,
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    login(state, action: PayloadAction<string>) {
+      state.token = action.payload;
+    },
+    logout(state) {
+      state.token = null;
+    },
+  },
+});
+
+export const { login, logout } = authSlice.actions;
+export default authSlice.reducer;

package/dist/templates/optional/auth-redux/store/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "./authSlice";
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/dist/templates/optional/auth-zustand/api/authApi.ts

@@ -0,0 +1,14 @@
+function assertCredentials(email: string, password: string) {
+  if (!email.trim()) throw new Error("Email is required");
+  if (!password.trim()) throw new Error("Password is required");
+}
+
+export const loginApi = async (email: string, password: string) => {
+  assertCredentials(email, password);
+  return `demo-token-${email.trim().toLowerCase()}`;
+};
+
+export const registerApi = async (email: string, password: string) => {
+  assertCredentials(email, password);
+  return `demo-token-${email.trim().toLowerCase()}`;
+};

package/dist/templates/optional/auth-zustand/navigation/BottomTabs.tsx

@@ -0,0 +1 @@
+export { default } from "./cli/BottomTabs";

package/dist/templates/optional/auth-zustand/navigation/ProtectedStack.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import LoginScreen from "../screens/LoginScreen";
+import RegisterScreen from "../screens/RegisterScreen";
+import BottomTabs from "./BottomTabs";
+import { useAuthStore } from "../store/authStore";
+
+const Stack = createNativeStackNavigator();
+
+export default function ProtectedStack() {
+  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 (
+    <Stack.Navigator>
+      {token ? (
+        <Stack.Screen
+          name="Main"
+          component={BottomTabs}
+          options={{ headerShown: false }}
+        />
+      ) : (
+        <>
+          <Stack.Screen name="Login" component={LoginScreen} />
+          <Stack.Screen name="Register" component={RegisterScreen} />
+        </>
+      )}
+    </Stack.Navigator>
+  );
+}

package/dist/templates/optional/auth-zustand/navigation/cli/BottomTabs.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import HomeScreen from "../../screens/HomeScreen";
+import ProfileScreen from "../../screens/ProfileScreen";
+import SettingsScreen from "../../screens/SettingsScreen";
+
+const Tab = createBottomTabNavigator();
+
+export default function BottomTabs() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}

package/dist/templates/optional/auth-zustand/navigation/expo/BottomTabs.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Ionicons } from "@expo/vector-icons";
+import HomeScreen from "../../screens/HomeScreen";
+import ProfileScreen from "../../screens/ProfileScreen";
+import SettingsScreen from "../../screens/SettingsScreen";
+
+const Tab = createBottomTabNavigator();
+
+export default function BottomTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarIcon: ({ color, size }) => {
+          let iconName: string = "home";
+
+          if (route.name === "Home") iconName = "home";
+          else if (route.name === "Profile") iconName = "person";
+          else if (route.name === "Settings") iconName = "settings";
+
+          return <Ionicons name={iconName as any} size={size} color={color} />;
+        },
+      })}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}

package/dist/templates/optional/auth-zustand/screens/HomeScreen.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { View, Text, Button } 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>
+  );
+}

package/dist/templates/optional/auth-zustand/screens/LoginScreen.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { View, TextInput, Button } from "react-native";
+import { loginApi } from "../api/authApi";
+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>
+  );
+}

package/dist/templates/optional/auth-zustand/screens/ProfileScreen.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function ProfileScreen() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>This is the Profile Screen</Text>
+    </View>
+  );
+}

package/dist/templates/optional/auth-zustand/screens/RegisterScreen.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { View, TextInput, Button } from "react-native";
+import { registerApi } from "../api/authApi";
+import { useAuthStore } from "../store/authStore";
+
+export default function RegisterScreen() {
+  const login = useAuthStore((state) => state.login);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleRegister = async () => {
+    const token = await registerApi(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="Register" onPress={() => void handleRegister()} />
+    </View>
+  );
+}

package/dist/templates/optional/auth-zustand/screens/SettingsScreen.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function SettingsScreen() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>This is the Settings Screen</Text>
+    </View>
+  );
+}

package/dist/templates/optional/auth-zustand/store/authStore.ts

@@ -0,0 +1,30 @@
+import { create } from "zustand";
+import { getToken, removeToken, storeToken } from "../utils/storage";
+
+type AuthState = {
+  token: string | null;
+  isHydrated: boolean;
+  hydrate: () => Promise<void>;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+};
+
+export const useAuthStore = create<AuthState>((set) => ({
+  token: null,
+  isHydrated: false,
+
+  hydrate: async () => {
+    const token = await getToken();
+    set({ token, isHydrated: true });
+  },
+
+  login: async (token: string) => {
+    await storeToken(token);
+    set({ token });
+  },
+
+  logout: async () => {
+    await removeToken();
+    set({ token: null });
+  },
+}));

package/dist/templates/optional/auth-zustand/utils/storage.ts

@@ -0,0 +1,13 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const storeToken = async (token: string) => {
+  await AsyncStorage.setItem("@token", token);
+};
+
+export const getToken = async () => {
+  return await AsyncStorage.getItem("@token");
+};
+
+export const removeToken = async () => {
+  await AsyncStorage.removeItem("@token");
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highbeek/create-rnstarterkit",
-  "version": "1.0.2-beta.2",
+  "version": "1.0.2-beta.3",
   "description": "CLI to scaffold production-ready React Native app structures.",
   "main": "dist/src/generators/appGenerator.js",
   "bin": {
@@ -11,7 +11,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-templates.js",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },