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

package/dist/templates/optional/formik/components/formik/LoginForm.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { Formik } from 'formik';
+import { FormikInput } from './FormikInput';
+import { loginSchema, type LoginFormValues } from '../../schemas/auth.schema';
+
+interface LoginFormProps {
+  onSubmit: (values: LoginFormValues) => Promise<void>;
+  isLoading?: boolean;
+}
+
+const initialValues: LoginFormValues = { email: '', password: '' };
+
+export function LoginForm({ onSubmit, isLoading = false }: LoginFormProps) {
+  return (
+    <Formik initialValues={initialValues} validationSchema={loginSchema} onSubmit={onSubmit}>
+      {({ handleSubmit }) => (
+        <View style={styles.container}>
+          <FormikInput
+            name="email"
+            label="Email"
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+          />
+          <FormikInput
+            name="password"
+            label="Password"
+            secureTextEntry
+            autoComplete="current-password"
+          />
+          <TouchableOpacity
+            style={[styles.button, isLoading && styles.buttonDisabled]}
+            onPress={() => handleSubmit()}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <ActivityIndicator color="#FFFFFF" />
+            ) : (
+              <Text style={styles.buttonText}>Sign In</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      )}
+    </Formik>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { width: '100%' },
+  button: {
+    backgroundColor: '#6366F1',
+    borderRadius: 8,
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonDisabled: { opacity: 0.6 },
+  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
+});

package/dist/templates/optional/formik/schemas/auth.schema.ts

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+
+export const loginSchema = Yup.object({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+  password: Yup.string().min(8, 'Minimum 8 characters').required('Password is required'),
+});
+
+export const registerSchema = Yup.object({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+  password: Yup.string().min(8, 'Minimum 8 characters').required('Password is required'),
+  confirmPassword: Yup.string()
+    .oneOf([Yup.ref('password')], 'Passwords must match')
+    .required('Please confirm your password'),
+});
+
+export type LoginFormValues = Yup.InferType<typeof loginSchema>;
+export type RegisterFormValues = Yup.InferType<typeof registerSchema>;

package/dist/templates/optional/i18n/src/i18n/hooks/useAppTranslation.ts

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import type en from '../locales/en.json';
+
+// Derive the full key union from the English locale so translations are type-safe
+type TranslationKeys = typeof en;
+type DotPrefix<T extends string, K extends string> = `${T}.${K}`;
+
+type LeafKeys<T, Prefix extends string = ''> = {
+  [K in keyof T]: T[K] extends object
+    ? LeafKeys<T[K], Prefix extends '' ? Extract<K, string> : DotPrefix<Prefix, Extract<K, string>>>
+    : Prefix extends ''
+    ? Extract<K, string>
+    : DotPrefix<Prefix, Extract<K, string>>;
+}[keyof T];
+
+export type AppTranslationKey = LeafKeys<TranslationKeys>;
+
+/**
+ * Typed wrapper around react-i18next's useTranslation.
+ * Keys are inferred from en.json so you get autocompletion + compile-time safety.
+ *
+ * @example
+ *   const { t } = useAppTranslation();
+ *   <Text>{t('auth.signIn')}</Text>
+ */
+export function useAppTranslation() {
+  return useTranslation();
+}

package/dist/templates/optional/i18n/src/i18n/i18n.ts

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import * as RNLocalize from 'react-native-localize';
+
+import en from './locales/en.json';
+import es from './locales/es.json';
+
+const resources = {
+  en: { translation: en },
+  es: { translation: es },
+};
+
+const fallbackLocale = 'en';
+const deviceLocales = RNLocalize.getLocales();
+const bestMatch = deviceLocales[0]?.languageCode ?? fallbackLocale;
+
+void i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: bestMatch,
+    fallbackLng: fallbackLocale,
+    interpolation: {
+      // React already escapes values
+      escapeValue: false,
+    },
+    compatibilityJSON: 'v4',
+  });
+
+export default i18n;

package/dist/templates/optional/i18n/src/i18n/locales/en.json

@@ -0,0 +1,32 @@
+{
+  "welcome": {
+    "title": "Welcome",
+    "subtitle": "Get started with your app",
+    "getStarted": "Get Started"
+  },
+  "auth": {
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "signOut": "Sign Out",
+    "email": "Email",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "forgotPassword": "Forgot password?",
+    "noAccount": "Don't have an account?",
+    "haveAccount": "Already have an account?"
+  },
+  "common": {
+    "loading": "Loading...",
+    "error": "Something went wrong",
+    "retry": "Try again",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "confirm": "Confirm"
+  },
+  "screens": {
+    "home": "Home",
+    "profile": "Profile",
+    "settings": "Settings"
+  }
+}

package/dist/templates/optional/i18n/src/i18n/locales/es.json

@@ -0,0 +1,32 @@
+{
+  "welcome": {
+    "title": "Bienvenido",
+    "subtitle": "Empieza con tu aplicación",
+    "getStarted": "Comenzar"
+  },
+  "auth": {
+    "signIn": "Iniciar sesión",
+    "signUp": "Registrarse",
+    "signOut": "Cerrar sesión",
+    "email": "Correo electrónico",
+    "password": "Contraseña",
+    "confirmPassword": "Confirmar contraseña",
+    "forgotPassword": "¿Olvidaste tu contraseña?",
+    "noAccount": "¿No tienes cuenta?",
+    "haveAccount": "¿Ya tienes cuenta?"
+  },
+  "common": {
+    "loading": "Cargando...",
+    "error": "Algo salió mal",
+    "retry": "Intentar de nuevo",
+    "cancel": "Cancelar",
+    "save": "Guardar",
+    "delete": "Eliminar",
+    "confirm": "Confirmar"
+  },
+  "screens": {
+    "home": "Inicio",
+    "profile": "Perfil",
+    "settings": "Configuración"
+  }
+}

package/dist/templates/optional/maestro/.maestro/flows/01_welcome.yaml

@@ -0,0 +1,5 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- assertVisible: "Get Started"
+- tapOn: "Get Started"

package/dist/templates/optional/maestro-auth/.maestro/flows/01_welcome.yaml

@@ -0,0 +1,5 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- assertVisible: "Get Started"
+- tapOn: "Get Started"

package/dist/templates/optional/maestro-auth/.maestro/flows/02_login.yaml

@@ -0,0 +1,13 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- tapOn: "Get Started"
+- tapOn: "Sign In"
+- tapOn:
+    id: "email-input"
+- inputText: "test@example.com"
+- tapOn:
+    id: "password-input"
+- inputText: "password123"
+- tapOn: "Sign In"
+- assertVisible: "Home"

package/dist/templates/optional/maestro-auth/.maestro/flows/03_logout.yaml

@@ -0,0 +1,16 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- tapOn: "Get Started"
+- tapOn: "Sign In"
+- tapOn:
+    id: "email-input"
+- inputText: "test@example.com"
+- tapOn:
+    id: "password-input"
+- inputText: "password123"
+- tapOn: "Sign In"
+- assertVisible: "Home"
+- tapOn: "Profile"
+- tapOn: "Sign Out"
+- assertVisible: "Welcome"

package/dist/templates/optional/mmkv/utils/storage.ts

@@ -0,0 +1,17 @@
+import { MMKV } from "react-native-mmkv";
+
+const storage = new MMKV();
+
+export const storeToken = (token: string): void => {
+  storage.set("@token", token);
+};
+
+export const getToken = (): string | null => {
+  return storage.getString("@token") ?? null;
+};
+
+export const removeToken = (): void => {
+  storage.delete("@token");
+};
+
+export { storage as mmkvStorage };

package/dist/templates/optional/react-hook-form/components/rhf/LoginForm.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { useForm, FormProvider } from 'react-hook-form';
+import { RHFInput } from './RHFInput';
+import { loginRules, type LoginFormValues } from '../../schemas/auth.schema';
+
+interface LoginFormProps {
+  onSubmit: (values: LoginFormValues) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function LoginForm({ onSubmit, isLoading = false }: LoginFormProps) {
+  const methods = useForm<LoginFormValues>({
+    defaultValues: { email: '', password: '' },
+    mode: 'onBlur',
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <View style={styles.container}>
+        <RHFInput
+          name="email"
+          label="Email"
+          rules={loginRules.email}
+          autoCapitalize="none"
+          keyboardType="email-address"
+          autoComplete="email"
+        />
+        <RHFInput
+          name="password"
+          label="Password"
+          rules={loginRules.password}
+          secureTextEntry
+          autoComplete="current-password"
+        />
+        <TouchableOpacity
+          style={[styles.button, isLoading && styles.buttonDisabled]}
+          onPress={methods.handleSubmit(onSubmit)}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <ActivityIndicator color="#FFFFFF" />
+          ) : (
+            <Text style={styles.buttonText}>Sign In</Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    </FormProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { width: '100%' },
+  button: {
+    backgroundColor: '#6366F1',
+    borderRadius: 8,
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonDisabled: { opacity: 0.6 },
+  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
+});

package/dist/templates/optional/react-hook-form/components/rhf/RHFInput.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, TextInput, Text, StyleSheet, TextInputProps } from 'react-native';
+import { Controller, useFormContext } from 'react-hook-form';
+
+interface RHFInputProps extends TextInputProps {
+  name: string;
+  label: string;
+}
+
+export function RHFInput({ name, label, ...props }: RHFInputProps) {
+  const { control, formState: { errors } } = useFormContext();
+  const error = errors[name]?.message as string | undefined;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field: { onChange, onBlur, value } }) => (
+          <TextInput
+            style={[styles.input, error ? styles.inputError : undefined]}
+            value={value}
+            onChangeText={onChange}
+            onBlur={onBlur}
+            {...props}
+          />
+        )}
+      />
+      {error ? <Text style={styles.errorText}>{error}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { marginBottom: 16 },
+  label: { fontSize: 14, fontWeight: '500', marginBottom: 6, color: '#374151' },
+  input: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    color: '#111827',
+    backgroundColor: '#FFFFFF',
+  },
+  inputError: { borderColor: '#EF4444' },
+  errorText: { marginTop: 4, fontSize: 12, color: '#EF4444' },
+});

package/dist/templates/optional/react-hook-form/schemas/auth.schema.ts

@@ -0,0 +1,29 @@
+export const loginRules = {
+  email: {
+    required: 'Email is required',
+    pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email address' },
+  },
+  password: {
+    required: 'Password is required',
+    minLength: { value: 8, message: 'Minimum 8 characters' },
+  },
+} as const;
+
+export const registerRules = {
+  email: loginRules.email,
+  password: loginRules.password,
+  confirmPassword: {
+    required: 'Please confirm your password',
+  },
+} as const;
+
+export interface LoginFormValues {
+  email: string;
+  password: string;
+}
+
+export interface RegisterFormValues {
+  email: string;
+  password: string;
+  confirmPassword: string;
+}

package/dist/templates/optional/react-query/hooks/useAppMutation.ts

@@ -0,0 +1,16 @@
+import {
+  useMutation,
+  type UseMutationOptions,
+  type UseMutationResult,
+} from "@tanstack/react-query";
+
+export function useAppMutation<
+  TData = unknown,
+  TError = Error,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: UseMutationOptions<TData, TError, TVariables, TContext>,
+): UseMutationResult<TData, TError, TVariables, TContext> {
+  return useMutation<TData, TError, TVariables, TContext>(options);
+}

package/dist/templates/optional/react-query/hooks/useAppQuery.ts

@@ -0,0 +1,12 @@
+import {
+  useQuery,
+  type UseQueryOptions,
+  type QueryKey,
+  type UseQueryResult,
+} from "@tanstack/react-query";
+
+export function useAppQuery<TData, TError = Error>(
+  options: UseQueryOptions<TData, TError, TData, QueryKey>,
+): UseQueryResult<TData, TError> {
+  return useQuery<TData, TError, TData, QueryKey>(options);
+}

package/dist/templates/optional/react-query/services/queryClient.ts

@@ -0,0 +1,14 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes
+    },
+    mutations: {
+      retry: 0,
+    },
+  },
+});

package/dist/templates/optional/redux/store/hooks.ts

@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from "react-redux";
+import type { TypedUseSelectorHook } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

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

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+export const store = configureStore({
+  reducer: {
+    // Add your slice reducers here
+    // example: counter: counterReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/dist/templates/optional/sentry/src/utils/sentry.ts

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/react-native';
+
+export function initSentry() {
+  Sentry.init({
+    // Replace with your Sentry DSN from https://sentry.io
+    dsn: '__YOUR_DSN__',
+    tracesSampleRate: 1.0,
+    // Disable verbose logging in production
+    debug: __DEV__,
+    // Attach JS/native stack traces to all events
+    attachStacktrace: true,
+    environment: __DEV__ ? 'development' : 'production',
+  });
+}
+
+/** Manually capture an exception (e.g. in a catch block) */
+export function captureException(error: unknown) {
+  Sentry.captureException(error);
+}
+
+/** Add a breadcrumb for tracing user flows */
+export function addBreadcrumb(message: string, category = 'app') {
+  Sentry.addBreadcrumb({ message, category });
+}

package/dist/templates/optional/swr/hooks/useSWRFetch.ts

@@ -0,0 +1,14 @@
+import useSWR, { type SWRConfiguration, type SWRResponse } from "swr";
+
+const defaultFetcher = async (url: string): Promise<unknown> => {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
+  return res.json();
+};
+
+export function useSWRFetch<TData = unknown, TError = Error>(
+  key: string | null,
+  config?: SWRConfiguration<TData, TError>,
+): SWRResponse<TData, TError> {
+  return useSWR<TData, TError>(key, defaultFetcher as (key: string) => Promise<TData>, config);
+}

package/dist/templates/optional/swr/providers/SWRProvider.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { SWRConfig } from "swr";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export function SWRProvider({ children }: Props) {
+  return (
+    <SWRConfig
+      value={{
+        revalidateOnFocus: true,
+        revalidateOnReconnect: true,
+        shouldRetryOnError: true,
+        errorRetryCount: 3,
+      }}
+    >
+      {children}
+    </SWRConfig>
+  );
+}

package/dist/templates/optional/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ESNext"],
+    "jsx": "react-native",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "types": ["jest", "node"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "**/Pods", "dist"]
+}

package/dist/templates/optional/zustand/store/appStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+type AppState = {
+  // Add your global state here
+  // example: count: number;
+  // example: increment: () => void;
+};
+
+export const useAppStore = create<AppState>(() => ({
+  // Initialize state here
+  // example: count: 0,
+  // example: increment: () => set((state) => ({ count: state.count + 1 })),
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highbeek/create-rnstarterkit",
-  "version": "1.0.2-beta.5",
+  "version": "1.1.0",
   "description": "CLI to scaffold production-ready React Native app structures.",
   "main": "dist/src/generators/appGenerator.js",
   "bin": {
@@ -12,12 +12,42 @@
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node scripts/copy-templates.js",
+    "lint": "eslint",
+    "test": "node scripts/test-generator.mjs",
+    "test:ci": "SKIP_INSTALL=1 node scripts/test-generator.mjs",
     "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prepare": "husky"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "cli",
+    "starter-kit",
+    "boilerplate",
+    "scaffold",
+    "nativewind",
+    "tailwind",
+    "react-native-cli",
+    "create-app"
+  ],
+  "author": "Ibukun Agboola <highbeek>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Highbeek/RNStarterKit.git"
+  },
+  "homepage": "https://github.com/Highbeek/RNStarterKit#readme",
+  "bugs": {
+    "url": "https://github.com/Highbeek/RNStarterKit/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix"
+    ]
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
   "type": "commonjs",
   "dependencies": {
     "chalk": "^5.6.2",
@@ -29,6 +59,11 @@
   "devDependencies": {
     "@types/inquirer": "^9.0.9",
     "@types/node": "^25.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "eslint": "^10.0.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"
   }

package/dist/templates/expo-base/App.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { SafeAreaView, StyleSheet, Text } from "react-native";
-
-export default function App() {
-  return (
-    <SafeAreaView style={styles.container}>
-      <Text style={styles.title}>RN Starter Kit</Text>
-      <Text style={styles.subtitle}>
-        Build your app by adding screens and navigation.
-      </Text>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "700",
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 15,
-    textAlign: "center",
-    color: "#666",
-  },
-});