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

package/dist/src/generators/codeGenerator.js

@@ -0,0 +1,289 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCode = generateCode;
+const path_1 = __importDefault(require("path"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+// ---------------------------------------------------------------------------
+// Project context detection
+// ---------------------------------------------------------------------------
+async function detectProjectConfig() {
+    let dir = process.cwd();
+    const root = path_1.default.parse(dir).root;
+    while (dir !== root) {
+        const pkgPath = path_1.default.join(dir, "package.json");
+        if (await fs_extra_1.default.pathExists(pkgPath)) {
+            const pkg = await fs_extra_1.default.readJson(pkgPath);
+            if (pkg.rnstarterkitConfig) {
+                return { config: pkg.rnstarterkitConfig, projectRoot: dir };
+            }
+        }
+        dir = path_1.default.dirname(dir);
+    }
+    throw new Error("❌ No rnstarterkitConfig found in package.json.\n" +
+        "   Run this command from inside a project created with create-rnstarterkit.");
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function toPascalCase(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function toCamelCase(str) {
+    return str.charAt(0).toLowerCase() + str.slice(1);
+}
+async function writeAndLog(filePath, content) {
+    if (await fs_extra_1.default.pathExists(filePath)) {
+        console.error(`❌ File already exists: ${filePath}`);
+        process.exit(1);
+    }
+    await fs_extra_1.default.ensureDir(path_1.default.dirname(filePath));
+    await fs_extra_1.default.writeFile(filePath, content, "utf8");
+    console.log(`✅ Created ${path_1.default.relative(process.cwd(), filePath)}`);
+}
+// ---------------------------------------------------------------------------
+// screen generator
+// ---------------------------------------------------------------------------
+function screenStateImports(config) {
+    if (!config.auth)
+        return "";
+    if (config.state === "Redux Toolkit") {
+        return `import { useAppSelector } from '../store/hooks';\n`;
+    }
+    if (config.state === "Zustand") {
+        return `import { useAuthStore } from '../store/authStore';\n`;
+    }
+    if (config.state === "Context API") {
+        return `import { useContext } from 'react';\nimport { AuthContext } from '../context/AuthContext';\n`;
+    }
+    return "";
+}
+function screenStateHook(config) {
+    if (!config.auth)
+        return "";
+    if (config.state === "Redux Toolkit") {
+        return `\n  const token = useAppSelector((state) => state.auth.token);\n`;
+    }
+    if (config.state === "Zustand") {
+        return `\n  const { token } = useAuthStore();\n`;
+    }
+    if (config.state === "Context API") {
+        return `\n  const { token } = useContext(AuthContext);\n`;
+    }
+    return "";
+}
+async function generateScreen(name, config, projectRoot) {
+    const screenName = toPascalCase(name);
+    const fileName = `${screenName}Screen.tsx`;
+    const targetDir = config.platform === "Expo"
+        ? path_1.default.join(projectRoot, "app")
+        : path_1.default.join(projectRoot, "screens");
+    const filePath = path_1.default.join(targetDir, fileName);
+    const stateImports = screenStateImports(config);
+    const stateHook = screenStateHook(config);
+    const layoutImport = config.platform === "React Native CLI"
+        ? `import ScreenLayout from '../components/layout/ScreenLayout';\n`
+        : "";
+    const wrapper = config.platform === "React Native CLI"
+        ? ["<ScreenLayout>", "    </ScreenLayout>"]
+        : ["<View style={styles.container}>", "    </View>"];
+    const content = config.platform === "Expo"
+        ? `import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+${stateImports}
+export default function ${screenName}Screen() {${stateHook}
+  return (
+    ${wrapper[0]}
+      <Text style={styles.title}>${screenName}</Text>
+    ${wrapper[1]}
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 },
+  title: { fontSize: 24, fontWeight: 'bold', color: '#111827' },
+});
+`
+        : `import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+${layoutImport}${stateImports}
+export default function ${screenName}Screen() {${stateHook}
+  return (
+    ${wrapper[0]}
+      <Text style={styles.title}>${screenName}</Text>
+    ${wrapper[1]}
+  );
+}
+
+const styles = StyleSheet.create({
+  title: { fontSize: 24, fontWeight: 'bold', color: '#111827' },
+});
+`;
+    await writeAndLog(filePath, content);
+}
+// ---------------------------------------------------------------------------
+// component generator
+// ---------------------------------------------------------------------------
+async function generateComponent(name, projectRoot) {
+    const componentName = toPascalCase(name);
+    const filePath = path_1.default.join(projectRoot, "components", `${componentName}.tsx`);
+    const content = `import React from 'react';
+import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+
+type ${componentName}Props = {
+  label?: string;
+  style?: ViewStyle;
+};
+
+export function ${componentName}({ label = '${componentName}', style }: ${componentName}Props) {
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 12 },
+  label: { fontSize: 14, color: '#374151' },
+});
+`;
+    await writeAndLog(filePath, content);
+}
+// ---------------------------------------------------------------------------
+// hook generator
+// ---------------------------------------------------------------------------
+async function generateHook(name, projectRoot) {
+    const baseName = name.startsWith("use") ? name.slice(3) : name;
+    const hookName = `use${toPascalCase(baseName)}`;
+    const filePath = path_1.default.join(projectRoot, "hooks", `${hookName}.ts`);
+    const content = `import { useState, useCallback } from 'react';
+
+type ${toPascalCase(baseName)}State = {
+  data: null;
+  isLoading: boolean;
+  error: string | null;
+};
+
+export function ${hookName}() {
+  const [state, setState] = useState<${toPascalCase(baseName)}State>({
+    data: null,
+    isLoading: false,
+    error: null,
+  });
+
+  const execute = useCallback(async () => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      // TODO: implement hook logic
+      setState((prev) => ({ ...prev, isLoading: false }));
+    } catch (err) {
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: err instanceof Error ? err.message : 'Unknown error',
+      }));
+    }
+  }, []);
+
+  return { ...state, execute };
+}
+`;
+    await writeAndLog(filePath, content);
+}
+// ---------------------------------------------------------------------------
+// slice generator
+// ---------------------------------------------------------------------------
+async function generateSlice(name, config, projectRoot) {
+    if (config.state !== "Redux Toolkit") {
+        console.error(`❌ Slice generation requires Redux Toolkit. This project uses: ${config.state || "None"}`);
+        process.exit(1);
+    }
+    const sliceName = toCamelCase(name);
+    const SliceName = toPascalCase(name);
+    const filePath = path_1.default.join(projectRoot, "store", `${sliceName}Slice.ts`);
+    // --- write the slice file ---
+    const sliceContent = `import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+interface ${SliceName}State {
+  // TODO: define your state shape
+  data: null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+const initialState: ${SliceName}State = {
+  data: null,
+  isLoading: false,
+  error: null,
+};
+
+const ${sliceName}Slice = createSlice({
+  name: '${sliceName}',
+  initialState,
+  reducers: {
+    setLoading(state, _action: PayloadAction<boolean>) {
+      state.isLoading = _action.payload;
+    },
+    setError(state, action: PayloadAction<string | null>) {
+      state.error = action.payload;
+    },
+    reset() {
+      return initialState;
+    },
+  },
+});
+
+export const { setLoading, setError, reset } = ${sliceName}Slice.actions;
+export default ${sliceName}Slice.reducer;
+`;
+    await writeAndLog(filePath, sliceContent);
+    // --- patch store.ts to register the new reducer ---
+    const storePath = path_1.default.join(projectRoot, "store", "store.ts");
+    if (await fs_extra_1.default.pathExists(storePath)) {
+        let storeContent = await fs_extra_1.default.readFile(storePath, "utf8");
+        const importLine = `import ${sliceName}Reducer from './${sliceName}Slice';\n`;
+        if (!storeContent.includes(importLine)) {
+            // Add import after last existing import
+            storeContent = storeContent.replace(/^(import .+\n)+/m, (match) => `${match}${importLine}`);
+        }
+        // Add reducer key inside configureStore reducer object
+        if (!storeContent.includes(`${sliceName}:`)) {
+            storeContent = storeContent.replace(/reducer:\s*\{/, `reducer: {\n    ${sliceName}: ${sliceName}Reducer,`);
+        }
+        await fs_extra_1.default.writeFile(storePath, storeContent, "utf8");
+        console.log(`🔗 Registered ${sliceName} in store/store.ts`);
+    }
+    else {
+        console.warn(`⚠️  store/store.ts not found — add the reducer manually:\n` +
+            `   import ${sliceName}Reducer from './${sliceName}Slice';\n` +
+            `   // add ${sliceName}: ${sliceName}Reducer to your store`);
+    }
+}
+// ---------------------------------------------------------------------------
+// Public entry point
+// ---------------------------------------------------------------------------
+async function generateCode(type, name) {
+    const { config, projectRoot } = await detectProjectConfig();
+    const validTypes = ["screen", "component", "hook", "slice"];
+    if (!validTypes.includes(type)) {
+        console.error(`❌ Unknown type "${type}". Valid types: ${validTypes.join(" | ")}`);
+        process.exit(1);
+    }
+    switch (type) {
+        case "screen":
+            await generateScreen(name, config, projectRoot);
+            break;
+        case "component":
+            await generateComponent(name, projectRoot);
+            break;
+        case "hook":
+            await generateHook(name, projectRoot);
+            break;
+        case "slice":
+            await generateSlice(name, config, projectRoot);
+            break;
+    }
+}

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

@@ -1,44 +1,222 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import { NewAppScreen } from '@react-native/new-app-screen';
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import React, { useRef, useState } from "react";
+import {
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
 import {
   SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+  SafeAreaView,
+} from "react-native-safe-area-context";
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Start with a clean React Native CLI project structure.",
+    image: require("./assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Ready for Scale",
+    description: "Build faster with sensible architecture you can extend.",
+    image: require("./assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Use this onboarding as a placeholder for your product design.",
+    image: require("./assets/images/icon.png"),
+  },
+];
 
 function App() {
-  const isDarkMode = useColorScheme() === 'dark';
+  const [isOnboarded, setIsOnboarded] = useState(false);
 
   return (
     <SafeAreaProvider>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
+      <StatusBar barStyle="dark-content" />
+      {isOnboarded ? (
+        <HomeScreen />
+      ) : (
+        <WelcomeScreen onFinish={() => setIsOnboarded(true)} />
+      )}
     </SafeAreaProvider>
   );
 }
 
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
+function WelcomeScreen({ onFinish }: { onFinish: () => void }) {
+  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 });
+    } else {
+      onFinish();
+    }
+  };
+
+  const isLastSlide = activeIndex === slides.length - 1;
 
   return (
-    <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
+    <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>
+
+      <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>
+  );
+}
+
+function HomeScreen() {
+  return (
+    <SafeAreaView style={homeStyles.container}>
+      <Text style={homeStyles.title}>Home</Text>
+      <Text style={homeStyles.subtitle}>
+        Replace this screen with your app content.
+      </Text>
+    </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",
+  },
+});
+
+const homeStyles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: "#F7F7F9",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#4B5563",
+    textAlign: "center",
   },
 });
 

package/dist/templates/cli-base/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: ['react-native-worklets/plugin'],
 };

package/dist/templates/cli-base/ios/BaseApp.xcodeproj/project.pbxproj

@@ -259,7 +259,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_IDENTITY = "";
+				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = "";
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = BaseApp/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
@@ -289,7 +292,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_IDENTITY = "";
+				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = "";
 				INFOPLIST_FILE = BaseApp/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
 				LD_RUNPATH_SEARCH_PATHS = (

package/dist/templates/cli-base/ios/Podfile

@@ -30,5 +30,10 @@ target 'BaseApp' do
       :mac_catalyst_enabled => false,
       # :ccache_enabled => true
     )
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+      end
+    end
   end
 end

package/dist/templates/cli-base/jest.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   preset: 'react-native',
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|@react-native|@react-navigation|react-native-reanimated)/)',
+  ],
 };

package/dist/templates/cli-base/package.json

@@ -5,20 +5,23 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "lint": "eslint .",
     "start": "react-native start",
+    "lint": "eslint . --max-warnings 0",
+    "format": "prettier --write .",
+    "type-check": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
+    "@babel/runtime": "^7.25.0",
     "react": "19.2.3",
     "react-native": "0.84.0",
-    "@react-native/new-app-screen": "0.84.0",
-    "react-native-safe-area-context": "^5.5.2"
+    "react-native-safe-area-context": "^5.5.2",
+    "react-native-worklets": "^0.7.0",
+    "react-native-reanimated": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.3",
-    "@babel/runtime": "^7.25.0",
     "@react-native-community/cli": "20.1.0",
     "@react-native-community/cli-platform-android": "20.1.0",
     "@react-native-community/cli-platform-ios": "20.1.0",

package/dist/templates/cli-base/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@react-native/typescript-config",
   "compilerOptions": {
+    "strict": true,
     "types": ["jest"]
   },
   "include": ["**/*.ts", "**/*.tsx"],

package/dist/templates/expo-base/app/_layout.tsx

@@ -1,24 +1,13 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import 'react-native-reanimated';
-
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export const unstable_settings = {
-  anchor: '(tabs)',
-};
+import { Stack } from "expo-router";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function RootLayout() {
-  const colorScheme = useColorScheme();
-
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
+    <SafeAreaProvider>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="index" />
+        <Stack.Screen name="home" />
       </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    </SafeAreaProvider>
   );
 }