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

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.7",
+  "version": "1.1.1",
   "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/components/ui/collapsible.tsx

@@ -1,45 +0,0 @@
-import { PropsWithChildren, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-
-import { ThemedText } from '@/components/themed-text';
-import { ThemedView } from '@/components/themed-view';
-import { IconSymbol } from '@/components/ui/icon-symbol';
-import { Colors } from '@/constants/theme';
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const theme = useColorScheme() ?? 'light';
-
-  return (
-    <ThemedView>
-      <TouchableOpacity
-        style={styles.heading}
-        onPress={() => setIsOpen((value) => !value)}
-        activeOpacity={0.8}>
-        <IconSymbol
-          name="chevron.right"
-          size={18}
-          weight="medium"
-          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
-          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
-        />
-
-        <ThemedText type="defaultSemiBold">{title}</ThemedText>
-      </TouchableOpacity>
-      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  heading: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  content: {
-    marginTop: 6,
-    marginLeft: 24,
-  },
-});

package/dist/templates/expo-base/components/ui/icon-symbol.ios.tsx

@@ -1,32 +0,0 @@
-import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
-import { StyleProp, ViewStyle } from 'react-native';
-
-export function IconSymbol({
-  name,
-  size = 24,
-  color,
-  style,
-  weight = 'regular',
-}: {
-  name: SymbolViewProps['name'];
-  size?: number;
-  color: string;
-  style?: StyleProp<ViewStyle>;
-  weight?: SymbolWeight;
-}) {
-  return (
-    <SymbolView
-      weight={weight}
-      tintColor={color}
-      resizeMode="scaleAspectFit"
-      name={name}
-      style={[
-        {
-          width: size,
-          height: size,
-        },
-        style,
-      ]}
-    />
-  );
-}

package/dist/templates/expo-base/components/ui/icon-symbol.tsx

@@ -1,41 +0,0 @@
-// Fallback for using MaterialIcons on Android and web.
-
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
-import { ComponentProps } from 'react';
-import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
-
-type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
-type IconSymbolName = keyof typeof MAPPING;
-
-/**
- * Add your SF Symbols to Material Icons mappings here.
- * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
- * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
- */
-const MAPPING = {
-  'house.fill': 'home',
-  'paperplane.fill': 'send',
-  'chevron.left.forwardslash.chevron.right': 'code',
-  'chevron.right': 'chevron-right',
-} as IconMapping;
-
-/**
- * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
- * This ensures a consistent look across platforms, and optimal resource usage.
- * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
- */
-export function IconSymbol({
-  name,
-  size = 24,
-  color,
-  style,
-}: {
-  name: IconSymbolName;
-  size?: number;
-  color: string | OpaqueColorValue;
-  style?: StyleProp<TextStyle>;
-  weight?: SymbolWeight;
-}) {
-  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
-}