codingpixel-expo-app 0.1.0

package/dist/prompts.js

@@ -0,0 +1,115 @@
+import prompts from "prompts";
+import { execa } from "execa";
+import { log } from "./util.js";
+const STRICT_BOOL_VARS = [
+    "EXPO_INCLUDE_BOTTOM_SHEET",
+    "EXPO_INCLUDE_IMAGE_PICKER",
+];
+/**
+ * SHAPE-only validation of EXPO_* env vars. MUST be called from `src/index.ts`
+ * BEFORE `resolveTargetDir` (Phase 1) so invalid input throws BEFORE any fs
+ * mutation creates an orphan empty target dir.
+ *
+ * Per PLAN_V5.md Phase 2 step 2 (v5-r6).
+ */
+export function validateEnvVars() {
+    const pm = process.env.EXPO_PACKAGE_MANAGER;
+    if (pm !== undefined && pm !== "" && pm !== "yarn" && pm !== "npm") {
+        throw new Error(`EXPO_PACKAGE_MANAGER: expected "yarn" or "npm", got "${pm}"`);
+    }
+    for (const key of STRICT_BOOL_VARS) {
+        const v = process.env[key];
+        if (v !== undefined && v !== "" && v !== "0" && v !== "1") {
+            throw new Error(`${key}: expected "0" or "1", got "${v}"`);
+        }
+    }
+    // EXPO_PRIMARY_FONT / EXPO_SECONDARY_FONT accept any string — no shape check.
+}
+function readBoolEnv(key) {
+    const v = process.env[key];
+    if (v === undefined || v === "")
+        return undefined;
+    return v === "1";
+}
+async function probeBin(bin, timeout = 3000) {
+    try {
+        const result = await execa(bin, ["--version"], { timeout, reject: false });
+        return result.exitCode === 0;
+    }
+    catch {
+        // ENOENT, TimeoutError, etc.
+        return false;
+    }
+}
+/**
+ * Resolve the package manager once and propagate the choice through every
+ * later install step so we never end up with both yarn.lock + package-lock.json.
+ *
+ * Order:
+ *   1. EXPO_PACKAGE_MANAGER override (already shape-validated by validateEnvVars).
+ *   2. yarn --version probe (3s timeout) → "yarn".
+ *   3. npm --version probe (3s timeout) → "npm".
+ *   4. Both missing → throw EARLY (before Phase 3 mutates fs).
+ */
+export async function detectPackageManager() {
+    const override = process.env.EXPO_PACKAGE_MANAGER;
+    if (override === "yarn" || override === "npm")
+        return override;
+    if (await probeBin("yarn"))
+        return "yarn";
+    if (await probeBin("npm"))
+        return "npm";
+    throw new Error("Neither yarn nor npm available — install one before proceeding");
+}
+/**
+ * Gather all answers — env vars take precedence; missing values prompted from TTY.
+ * Non-TTY + missing answer → throw.
+ *
+ * NOTE: Fonts are intentionally hard-coded empty (Deviation #9). The generator
+ * empty-path produces `Fonts = {} as const` + drops `useFonts` sentinels →
+ * generated app has no font wiring. EXPO_PRIMARY_FONT / EXPO_SECONDARY_FONT
+ * env vars are silently ignored (still shape-validated by validateEnvVars).
+ */
+export async function gatherAnswers() {
+    // Fonts disabled — see Deviation #9.
+    const primaryFont = "";
+    const secondaryFont = "";
+    // Only bottom-sheet + image-picker remain prompt-driven.
+    const envBottomSheet = readBoolEnv("EXPO_INCLUDE_BOTTOM_SHEET");
+    const envImagePicker = readBoolEnv("EXPO_INCLUDE_IMAGE_PICKER");
+    const tty = Boolean(process.stdin.isTTY);
+    const need = envBottomSheet === undefined || envImagePicker === undefined;
+    if (need && !tty) {
+        throw new Error("Missing required answers and stdin is not a TTY. Set " +
+            'EXPO_INCLUDE_BOTTOM_SHEET + EXPO_INCLUDE_IMAGE_PICKER ("0" or "1").');
+    }
+    let bottomSheet;
+    if (envBottomSheet !== undefined) {
+        bottomSheet = envBottomSheet;
+    }
+    else {
+        const ans = await prompts({
+            type: "confirm",
+            name: "bottomSheet",
+            message: "Include bottom-sheet support?",
+            initial: false,
+        });
+        bottomSheet = Boolean(ans.bottomSheet);
+    }
+    let imagePicker;
+    if (envImagePicker !== undefined) {
+        imagePicker = envImagePicker;
+    }
+    else {
+        const ans = await prompts({
+            type: "confirm",
+            name: "imagePicker",
+            message: "Include image-picker support?",
+            initial: false,
+        });
+        imagePicker = Boolean(ans.imagePicker);
+    }
+    const packageManager = await detectPackageManager();
+    log.info(`Package manager: ${packageManager}`);
+    return { primaryFont, secondaryFont, bottomSheet, imagePicker, packageManager };
+}

package/dist/scaffold.js

@@ -0,0 +1,43 @@
+import path from "node:path";
+import fs from "node:fs";
+import { execa } from "execa";
+import { fileExists, log } from "./util.js";
+/**
+ * Wrap `create-expo-app` to scaffold the blank-typescript template into `dir`.
+ *
+ * Why `--no-install`:
+ *   The CLI runs its own install pass later (Phase 7 `installNativeDeps`) using
+ *   the resolved `packageManager` answer + `expo install` (so versions match the
+ *   target SDK). Letting create-expo-app install separately would risk
+ *   dual-lockfile + version drift.
+ *
+ * Why `--yes`:
+ *   Forces a fresh fetch of `create-expo-app@latest`; bypasses any stale global
+ *   install that could ship an older template.
+ *
+ * NOTE: `dir` is passed as the positional arg. create-expo-app interprets the
+ *   final segment as the app name (`expo.name`); we still patch `expo.scheme`
+ *   ourselves later (Phase 4 step 7) so the in-package name + scheme stay in sync.
+ */
+export async function runCreateExpoApp(dir, _name) {
+    log.step(`Scaffolding blank-typescript template into ${dir}…`);
+    await execa("npx", [
+        "--yes",
+        "create-expo-app@latest",
+        dir,
+        "--template",
+        "blank-typescript",
+        "--no-install",
+    ], { stdio: "inherit" });
+}
+/**
+ * Delete `App.tsx` shipped by blank-typescript — collides with expo-router's
+ * auto-detection of `src/app/`. Idempotent (no-op if already absent).
+ */
+export function cleanupBlankTemplate(target) {
+    const appTsx = path.join(target, "App.tsx");
+    if (fileExists(appTsx)) {
+        fs.rmSync(appTsx);
+        log.step("Removed blank-typescript App.tsx (replaced by expo-router src/app/).");
+    }
+}

package/dist/sdkNotes.js

@@ -0,0 +1,19 @@
+// Reads Phase 0 probe results from `docs/SDK_NOTES.md`. Each probe wrote a
+// `KEY=VALUE` line; this exposes a Map-like lookup so CLI runtime branches
+// don't need raw-text grep.
+import fs from "node:fs";
+export function readSDKNotes(filePath) {
+    const out = new Map();
+    if (!fs.existsSync(filePath)) {
+        // No probe file → CLI runs against an unprobed installation. All callers
+        // get conservative defaults (empty Map → `.get()` returns undefined).
+        return out;
+    }
+    const content = fs.readFileSync(filePath, "utf8");
+    for (const line of content.split("\n")) {
+        const m = line.match(/^([A-Z][A-Z0-9_]*)=(.*)$/);
+        if (m)
+            out.set(m[1], m[2]);
+    }
+    return out;
+}

package/dist/util.js

@@ -0,0 +1,48 @@
+import fs from "node:fs";
+import path from "node:path";
+import kleur from "kleur";
+export function isDirEmpty(dir) {
+    try {
+        const entries = fs.readdirSync(dir);
+        // Treat directories with only dot-files (e.g. .git) as non-empty too — be strict.
+        return entries.length === 0;
+    }
+    catch (err) {
+        if (err.code === "ENOENT")
+            return true;
+        throw err;
+    }
+}
+export function ensureDir(dir) {
+    fs.mkdirSync(dir, { recursive: true });
+}
+export function dirExists(p) {
+    try {
+        return fs.statSync(p).isDirectory();
+    }
+    catch {
+        return false;
+    }
+}
+export function fileExists(p) {
+    try {
+        return fs.statSync(p).isFile();
+    }
+    catch {
+        return false;
+    }
+}
+export const log = {
+    info: (msg) => console.log(kleur.cyan("ℹ"), msg),
+    warn: (msg) => console.warn(kleur.yellow("⚠"), msg),
+    error: (msg) => console.error(kleur.red("✖"), msg),
+    success: (msg) => console.log(kleur.green("✔"), msg),
+    step: (msg) => console.log(kleur.magenta("›"), msg),
+    raw: (msg) => console.log(msg),
+};
+export function basename(p) {
+    return path.basename(p);
+}
+export function joinCwd(arg) {
+    return path.join(process.cwd(), arg);
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "codingpixel-expo-app",
+  "version": "0.1.0",
+  "description": "Opinionated Expo app scaffolder mirroring MyRoster conventions.",
+  "type": "module",
+  "bin": {
+    "codingpixel-expo": "bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "dist/",
+    "templates/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsx src/index.ts",
+    "test": "vitest run",
+    "audit:templates": "bash scripts/audit-templates.sh",
+    "prepublishOnly": "npm run build && npm run test && npm run audit:templates"
+  },
+  "keywords": [
+    "expo",
+    "scaffolder",
+    "create-expo-app",
+    "react-native"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/generator": "~7.29.1",
+    "@babel/parser": "~7.29.3",
+    "@babel/traverse": "~7.29.0",
+    "@babel/types": "~7.29.0",
+    "execa": "^9.6.1",
+    "fs-extra": "^11.3.5",
+    "kleur": "^4.1.5",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^25.6.2",
+    "@types/prompts": "^2.4.9",
+    "eslint": "^10.3.0",
+    "prettier": "^3.8.3",
+    "tsx": "^4.21.0",
+    "typescript": "5.5.4",
+    "vitest": "^4.1.5"
+  }
+}

package/templates/base/assets/index.ts

@@ -0,0 +1,8 @@
+// Asset registry shim. Apps add real exports as they bundle .png / .ttf etc.
+// Example:
+//   import notification from "./images/notification.png";
+//   export const Images = { notification };
+//
+// `@assets` resolves here via tsconfig path mapping.
+export const Images = {} as Record<string, number>;
+export {};

package/templates/base/src/app/_layout.tsx

@@ -0,0 +1,39 @@
+// Provider tree per PLAN_V5.md Phase 4 step 2. Sentinels are filled by Phase 6
+// `patchLayout` based on the user's `useFonts` / `bottomSheet` answers.
+import { ErrorBoundary } from "react-error-boundary";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { KeyboardProvider } from "react-native-keyboard-controller";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+import { TanStackQueryProvider } from "@core/tanstack";
+import { persistor, store } from "@redux/store";
+import ErrorFallback from "@components/errorFallback";
+import Routes from "./routes";
+// @@USE_FONTS_IMPORT@@
+// @@BOTTOM_SHEET_PROVIDER_IMPORT@@
+
+export default function RootLayout() {
+  // @@USE_FONTS_HOOK@@
+  // @@USE_FONTS_GUARD@@
+
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <TanStackQueryProvider>
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <SafeAreaProvider>
+              <KeyboardProvider>
+                {/* @@BOTTOM_SHEET_PROVIDER_OPEN@@ */}
+                <ErrorBoundary FallbackComponent={ErrorFallback}>
+                  <Routes />
+                </ErrorBoundary>
+                {/* @@BOTTOM_SHEET_PROVIDER_CLOSE@@ */}
+              </KeyboardProvider>
+            </SafeAreaProvider>
+          </GestureHandlerRootView>
+        </TanStackQueryProvider>
+      </PersistGate>
+    </Provider>
+  );
+}

package/templates/base/src/app/index.tsx

@@ -0,0 +1,13 @@
+import AppText from "@appComponents/appText";
+import AppWrapper from "@appComponents/appWrapper";
+import { Colors } from "@theme/colors";
+
+export default function Home() {
+  return (
+    <AppWrapper>
+      <AppText size={20} color={Colors.BLACK}>
+        Hello from codingpixel-expo-app 👋
+      </AppText>
+    </AppWrapper>
+  );
+}

package/templates/base/src/app/routes.tsx

@@ -0,0 +1,9 @@
+import { Stack } from "expo-router";
+
+export default function Routes() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}

package/templates/base/src/core/redux/hooks.ts

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

package/templates/base/src/core/redux/mmkvStorage.ts

@@ -0,0 +1,18 @@
+import { createMMKV } from "react-native-mmkv";
+
+const storage = createMMKV();
+
+export const reduxStorage = {
+  setItem: (key: string, value: string) => {
+    storage.set(key, value);
+    return Promise.resolve(true);
+  },
+  getItem: (key: string) => {
+    const value = storage.getString(key);
+    return Promise.resolve(value);
+  },
+  removeItem: (key: string) => {
+    storage.remove(key);
+    return Promise.resolve();
+  },
+};

package/templates/base/src/core/redux/reducers.ts

@@ -0,0 +1,20 @@
+import { combineReducers } from "@reduxjs/toolkit";
+import { persistReducer } from "redux-persist";
+
+import { reduxStorage } from "./mmkvStorage";
+import { userReducer } from "./slices/userSlice";
+
+export const rootReducer = combineReducers({
+  user: userReducer,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+
+const persistConfig = {
+  key: "root",
+  version: 1,
+  storage: reduxStorage,
+  whitelist: ["user"],
+};
+
+export const persistedReducer = persistReducer(persistConfig, rootReducer);

package/templates/base/src/core/redux/slices/userSlice.ts

@@ -0,0 +1,31 @@
+// Deviation #5 (docs/MIRROR_NOTES.md): minimal user shape per SPEC §6 ("dummy
+// user shape"). Apps replace with their actual auth model.
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export type User = {
+  id: string | null;
+  name: string | null;
+};
+
+const initialState: User = { id: null, name: null };
+
+const userSlice = createSlice({
+  name: "user",
+  initialState,
+  reducers: {
+    setUser: (state, action: PayloadAction<User>) => {
+      state.id = action.payload.id;
+      state.name = action.payload.name;
+    },
+    updateUser: (state, action: PayloadAction<Partial<User>>) => {
+      Object.assign(state, action.payload);
+    },
+    clearUser: (state) => {
+      state.id = null;
+      state.name = null;
+    },
+  },
+});
+
+export const { setUser, updateUser, clearUser } = userSlice.actions;
+export default userSlice.reducer;

package/templates/base/src/core/redux/store.ts

@@ -0,0 +1,28 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { persistStore } from "redux-persist";
+
+import { persistedReducer } from "./reducers";
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [
+          "persist/PERSIST",
+          "persist/REHYDRATE",
+          "persist/PAUSE",
+          "persist/FLUSH",
+          "persist/PURGE",
+          "persist/REGISTER",
+        ],
+      },
+    }),
+});
+
+export const persistor = persistStore(store);
+
+export type AppStore = typeof store;
+export type AppDispatch = AppStore["dispatch"];
+export type AppState = ReturnType<AppStore["getState"]>;
+

package/templates/base/src/core/tanstack/index.tsx

@@ -0,0 +1,93 @@
+import type {
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
+  UseMutationOptions,
+  UseMutationResult,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useInfiniteQuery as useInfiniteQueryHook,
+  useMutation as useMutationHook,
+  useQueryClient as useQueryClientHook,
+  useQuery as useQueryHook,
+} from "@tanstack/react-query";
+import React from "react";
+
+// Create a singleton QueryClient instance
+// This ensures we don't create multiple instances
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 10 * 60 * 1000, // 10 minutes (formerly cacheTime)
+    },
+    mutations: {
+      retry: 1,
+    },
+  },
+});
+
+// QueryClientProvider component that wraps the app with the queryClient
+export const TanStackQueryProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+// Wrapper for useQuery to ensure single instance pattern
+export function useQuery<
+  TQueryFnData = unknown,
+  TError = Error,
+  TData = TQueryFnData,
+  TQueryKey extends readonly unknown[] = readonly unknown[],
+>(
+  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UseQueryResult<TData, TError> {
+  return useQueryHook(options);
+}
+
+// Wrapper for useMutation to ensure single instance pattern
+export function useMutation<
+  TData = unknown,
+  TError = Error,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options?: UseMutationOptions<TData, TError, TVariables, TContext>,
+): UseMutationResult<TData, TError, TVariables, TContext> {
+  return useMutationHook(options ?? {});
+}
+
+// Wrapper for useQueryClient to ensure single instance pattern
+export function useQueryClient() {
+  return useQueryClientHook();
+}
+
+// Wrapper for useInfiniteQuery to ensure single instance pattern
+export function useInfiniteQuery<
+  TQueryFnData = unknown,
+  TError = Error,
+  TData = TQueryFnData,
+  TQueryKey extends readonly unknown[] = readonly unknown[],
+>(
+  options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+): UseInfiniteQueryResult<TData, TError> {
+  return useInfiniteQueryHook(options);
+}
+
+// Export types for useQuery and useMutation
+export type {
+  UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
+  UseMutationOptions,
+  UseMutationResult,
+  UseQueryOptions,
+  UseQueryResult,
+};

package/templates/base/src/core/tanstack/tanstack-keys.ts

@@ -0,0 +1,42 @@
+export const TANSTACK_KEYS = {
+  // coach
+
+  // Dashboard
+  dashboard: ["coach", "dashboard"],
+  // Teams
+  teams: ["coach", "teams"],
+  teamDetails: (teamId: string) => ["coach", "teamDetails", teamId],
+  // Schedule
+  schedule: ["coach", "schedule"],
+  // Messages
+  messages: ["coach", "messages"],
+  messageDetails: (messageId: string) => ["coach", "messageDetails", messageId],
+  directChatInfo: (chatId: string) => ["directChatInfo", chatId],
+  directChatMessages: (chatId: string) => ["directChatMessages", chatId],
+  teamChatInfo: (teamId: string) => ["teamChatInfo", teamId],
+  teamChatMessages: (teamId: string) => ["teamChatMessages", teamId],
+  teamAnnouncements: (teamId: string) => ["teamAnnouncements", teamId],
+  // Payments
+  payments: ["coach", "payments"],
+  paymentsSummary: ["coach", "payments", "summary"],
+  paymentPlanDetail: (planId: string) => ["coach", "paymentPlanDetail", planId],
+  // Profile
+
+  // shared
+  playerDetails: (playerId: string) => ["shared", "playerDetails", playerId],
+
+  // parent
+  parentSchedule: ["parent", "schedule"],
+  parentDashboard: ["parent", "dashboard"],
+  myFamily: ["parent", "myFamily"],
+  programs: ["parent", "programs"],
+  programDetails: (id: string) => ["parent", "programDetails", id],
+  registration: ["parent", "registration"],
+  parentMessages: ["parent", "messages"],
+  parentMessageDetails: (messageId: string) => ["parent", "messageDetails", messageId],
+  parentPayments: ["parent", "payments"],
+  parentPaymentsSummary: ["parent", "payments", "summary"],
+  parentOrganizations: ["parent", "organizations"],
+  parentTeamInvitations: ["parent", "teamInvitations"],
+  parentTeamInvitationDetail: (id: string) => ["parent", "teamInvitationDetail", id],
+};

package/templates/base/src/core/utils/config.ts

@@ -0,0 +1,50 @@
+import { clearUser } from "@redux/slices/userSlice";
+import { store } from "@redux/store";
+import axios, { AxiosInstance } from "axios";
+import { Keyboard } from "react-native";
+import { BASE_URL } from "./endpoints";
+
+const HTTP_CLIENT: AxiosInstance = axios.create({
+  baseURL: BASE_URL,
+  timeout: 12000,
+});
+
+const initialConfig = () => {
+  setupAxios();
+};
+
+const setupAxios = () => {
+  HTTP_CLIENT.interceptors.request.use(
+    async (config: any) => {
+      Keyboard.dismiss();
+
+      const token = store.getState().user?.accessToken;
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (err: any) => {
+      console.log("error in api: ", err);
+
+      Promise.reject(err);
+    },
+  );
+
+  HTTP_CLIENT.interceptors.response.use(
+    (response) => {
+      return response;
+    },
+    (err) => {
+      console.log("err in response", err, err?.message);
+
+      if (err?.response?.status == 401 || err?.status == 401) {
+        store.dispatch(clearUser());
+      }
+
+      return Promise.reject(err?.response?.data || err);
+    },
+  );
+};
+
+export { HTTP_CLIENT, initialConfig, setupAxios };

package/templates/base/src/core/utils/constants.ts

@@ -0,0 +1,11 @@
+import { Platform } from "react-native";
+
+export const ANDROID = Platform.OS === "android";
+export const IOS = Platform.OS === "ios";
+
+export const ImageSource = {
+  CAMERA: "camera" as const,
+  GALLERY: "gallery" as const,
+};
+
+// @@MEDIA_CONSTANTS@@