twinbloc-rn-starter 0.1.0

package/bin/cli.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import path from "path";
+import fs from "fs-extra";
+import { spawnSync } from "child_process";
+import chalk from "chalk";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = path.resolve(__dirname, "..");
+const templateRoot = path.join(packageRoot, "template", "react-native-starter");
+const examplesRoot = path.join(packageRoot, "examples");
+
+const program = new Command();
+
+program
+  .name("create-twinbloc-app")
+  .argument("<project-directory>")
+  .option("--example <name>", "example variant", "base")
+  .option("--skip-install", "skip dependency installation", false)
+  .option("--pm <npm|yarn|pnpm|bun>", "force package manager")
+  .parse(process.argv);
+
+const [projectDirectory] = program.args;
+const options = program.opts();
+
+if (!projectDirectory) {
+  console.error(chalk.red("Project directory is required."));
+  process.exit(1);
+}
+
+const targetDir = path.resolve(process.cwd(), projectDirectory);
+
+const isEmptyDir = async (dir) => {
+  if (!fs.existsSync(dir)) return true;
+  const entries = await fs.readdir(dir);
+  return entries.length === 0;
+};
+
+const resolveExamplePath = (name) => {
+  if (!name || name === "base") return null;
+  return path.join(examplesRoot, name);
+};
+
+const detectPackageManager = () => {
+  if (options.pm) return options.pm;
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.includes("pnpm")) return "pnpm";
+  if (userAgent.includes("yarn")) return "yarn";
+  if (userAgent.includes("bun")) return "bun";
+  return "npm";
+};
+
+const cleanLockfilesForBun = async (dir) => {
+  const lockfiles = ["package-lock.json", "yarn.lock", "pnpm-lock.yaml"];
+  await Promise.all(lockfiles.map((file) => fs.remove(path.join(dir, file))));
+};
+
+const runInstall = (dir, pm) => {
+  const cmd = pm === "yarn" ? "yarn" : pm;
+  const args = pm === "npm" ? ["install"] : ["install"];
+  const result = spawnSync(cmd, args, { cwd: dir, stdio: "inherit" });
+  if (result.status !== 0) process.exit(result.status);
+};
+
+const main = async () => {
+  const empty = await isEmptyDir(targetDir);
+  if (!empty) {
+    console.error(chalk.red("Target directory must be empty."));
+    process.exit(1);
+  }
+
+  await fs.ensureDir(targetDir);
+
+  if (!fs.existsSync(templateRoot)) {
+    console.error(chalk.red("Template folder not found."));
+    process.exit(1);
+  }
+
+  await fs.copy(templateRoot, targetDir);
+
+  const examplePath = resolveExamplePath(options.example);
+  if (examplePath) {
+    if (!fs.existsSync(examplePath)) {
+      console.error(chalk.red(`Example not found: ${options.example}`));
+      process.exit(1);
+    }
+    await fs.copy(examplePath, targetDir, { overwrite: true });
+  }
+
+  const targetPackageJson = path.join(targetDir, "package.json");
+  if (fs.existsSync(targetPackageJson)) {
+    const pkg = await fs.readJson(targetPackageJson);
+    pkg.name = path.basename(targetDir);
+    await fs.writeJson(targetPackageJson, pkg, { spaces: 2 });
+  }
+
+  if (!options.skipInstall) {
+    const pm = detectPackageManager();
+    if (pm === "bun") {
+      await cleanLockfilesForBun(targetDir);
+    }
+    runInstall(targetDir, pm);
+  }
+
+  console.log(chalk.green("Project created successfully."));
+};
+
+main().catch((error) => {
+  console.error(chalk.red(error.message));
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "twinbloc-rn-starter",
+  "version": "0.1.0",
+  "description": "React Native starter template with optional examples",
+  "type": "module",
+  "bin": {
+    "create-twinbloc-app": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "template",
+    "examples",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react-native",
+    "starter",
+    "template",
+    "cli",
+    "create-app"
+  ],
+  "author": "teepheh-git",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "test": "node ./bin/cli.js --help"
+  },
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.57.1"
+  }
+}

package/template/react-native-starter/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["expo.vscode-expo-tools"] }

package/template/react-native-starter/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

package/template/react-native-starter/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

package/template/react-native-starter/app/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}

package/template/react-native-starter/app/index.tsx

@@ -0,0 +1,86 @@
+import { Pressable, SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { useCounterStore } from "@/src/state/useCounterStore";
+
+export default function Index() {
+  const count = useCounterStore((state) => state.count);
+  const increment = useCounterStore((state) => state.increment);
+  const decrement = useCounterStore((state) => state.decrement);
+  const reset = useCounterStore((state) => state.reset);
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <View style={styles.container}>
+        <Text style={styles.title}>Twinbloc Starter</Text>
+        <Text style={styles.subtitle}>Edit app/index.tsx to customize.</Text>
+        <Text style={styles.counter}>Count: {count}</Text>
+        <View style={styles.actions}>
+          <Pressable style={styles.button} onPress={decrement}>
+            <Text style={styles.buttonText}>-</Text>
+          </Pressable>
+          <Pressable style={styles.button} onPress={increment}>
+            <Text style={styles.buttonText}>+</Text>
+          </Pressable>
+          <Pressable style={styles.secondaryButton} onPress={reset}>
+            <Text style={styles.secondaryButtonText}>Reset</Text>
+          </Pressable>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#0B0F1A"
+  },
+  container: {
+    flex: 1,
+    padding: 24,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 12
+  },
+  title: {
+    color: "#F5F7FF",
+    fontSize: 28,
+    fontWeight: "700"
+  },
+  subtitle: {
+    color: "#B2B9D2",
+    textAlign: "center"
+  },
+  counter: {
+    color: "#F5F7FF",
+    fontSize: 24,
+    fontWeight: "600"
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 12,
+    marginTop: 16
+  },
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    borderRadius: 12,
+    backgroundColor: "#4C6FFF"
+  },
+  buttonText: {
+    color: "#FFFFFF",
+    fontSize: 18,
+    fontWeight: "600"
+  },
+  secondaryButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#4C6FFF"
+  },
+  secondaryButtonText: {
+    color: "#4C6FFF",
+    fontSize: 16,
+    fontWeight: "600"
+  }
+});

package/template/react-native-starter/app.json

@@ -0,0 +1,50 @@
+{
+  "expo": {
+    "name": "react-native-starter",
+    "slug": "react-native-starter",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "reactnativestarter",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.bulkyy.reactnativestarter"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "package": "com.bulkyy.reactnativestarter"
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

package/template/react-native-starter/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);