@highbeek/create-rnstarterkit 1.0.2-beta.1 → 1.0.2-beta.11

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

@@ -0,0 +1,174 @@
+import React, { useRef, useState } from "react";
+import {
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type WelcomeScreenProps = {
+  onContinue: () => void;
+};
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Build faster with a clean, production-ready app foundation.",
+    image: require("../assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Structure That Scales",
+    description: "Auth, state, and API setup are organized for real-world apps.",
+    image: require("../assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Swap this welcome flow with your own brand and product journey.",
+    image: require("../assets/images/icon.png"),
+  },
+];
+
+export default function WelcomeScreen({ onContinue }: WelcomeScreenProps) {
+  const { width } = useWindowDimensions();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef<FlatList<Slide>>(null);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems[0]?.index != null) {
+        setActiveIndex(viewableItems[0].index);
+      }
+    },
+  ).current;
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 }).current;
+
+  const handleNext = () => {
+    const nextIndex = activeIndex + 1;
+    if (nextIndex < slides.length) {
+      listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+      return;
+    }
+    onContinue();
+  };
+
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <FlatList
+        ref={listRef}
+        data={slides}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        keyExtractor={(item) => item.id}
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item }) => (
+          <View style={[styles.slide, { width }]}>
+            <Image source={item.image} style={styles.image} resizeMode="contain" />
+            <Text style={styles.title}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+          </View>
+        )}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig}
+      />
+
+      <View style={styles.footer}>
+        <View style={styles.dotsRow}>
+          {slides.map((slide, index) => (
+            <View
+              key={slide.id}
+              style={[styles.dot, index === activeIndex && styles.dotActive]}
+            />
+          ))}
+        </View>
+
+        <Pressable style={styles.button} onPress={handleNext}>
+          <Text style={styles.buttonLabel}>{isLastSlide ? "Get Started" : "Next"}</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#F7F7F9",
+  },
+  slide: {
+    flex: 1,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: 220,
+    height: 220,
+    marginBottom: 28,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: "#4B5563",
+    textAlign: "center",
+    maxWidth: 320,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 28,
+    gap: 20,
+  },
+  dotsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: "#D1D5DB",
+  },
+  dotActive: {
+    width: 24,
+    backgroundColor: "#111827",
+  },
+  button: {
+    height: 52,
+    borderRadius: 12,
+    backgroundColor: "#111827",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

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/dist/templates/optional/ci/.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - run: npm run lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - run: npm test -- --passWithNoTests

package/dist/templates/optional/error-boundary/components/ErrorBoundary.tsx

@@ -0,0 +1,83 @@
+import React, { Component, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+type Props = {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onReset?: () => void;
+};
+
+type State = {
+  hasError: boolean;
+  error: Error | null;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: { componentStack: string }) {
+    console.error("ErrorBoundary caught:", error, info.componentStack);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Something went wrong</Text>
+          <Text style={styles.message}>{this.state.error?.message}</Text>
+          <Pressable style={styles.button} onPress={this.handleReset}>
+            <Text style={styles.buttonLabel}>Try again</Text>
+          </Pressable>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 8,
+  },
+  message: {
+    fontSize: 14,
+    color: "#6B7280",
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    backgroundColor: "#111827",
+    borderRadius: 8,
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, TextInput, Text, StyleSheet, TextInputProps } from 'react-native';
+import { useField } from 'formik';
+
+interface FormikInputProps extends TextInputProps {
+  name: string;
+  label: string;
+}
+
+export function FormikInput({ name, label, ...props }: FormikInputProps) {
+  const [field, meta, helpers] = useField(name);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <TextInput
+        style={[styles.input, meta.touched && meta.error ? styles.inputError : undefined]}
+        value={field.value}
+        onChangeText={helpers.setValue}
+        onBlur={() => helpers.setTouched(true)}
+        {...props}
+      />
+      {meta.touched && meta.error ? (
+        <Text style={styles.errorText}>{meta.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/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/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;