create-du-app 0.1.3 → 0.1.4

package/README.md

@@ -44,16 +44,13 @@ npx create-du-app --name my-shop --mobile expo --fe nextjs --be nestjs
 
 ## Install globally (optional)
 
-Scaffold often? Install once and use the shorter `create-app` command:
+Scaffold often? Install once so you don't re-download it each time:
 
 ```bash
 npm install -g create-du-app     # or: pnpm add -g create-du-app
-create-app                       # same as npx create-du-app
+create-du-app                    # same as npx create-du-app
 ```
 
-> The **package** is `create-du-app`; the installed **command** is `create-app`
-> (same pattern as `create-next-app`).
-
 ## Available stacks
 
 | Group    | Technologies                  | Output folder  |
@@ -62,7 +59,9 @@ create-app                       # same as npx create-du-app
 | Frontend | Next.js · ReactJS             | `apps/web`     |
 | Backend  | Node.js · NestJS · PHP        | `apps/backend` |
 
-`packages/shared` (shared types + api client) is added automatically when you pick **≥ 2** JS/TS stacks.
+`packages/shared` (`@repo/shared` — shared data contracts, built with tsup) is added
+automatically when you pick **≥ 2** JS/TS stacks, and every JS/TS app is wired to it
+as a `workspace:*` dependency.
 
 ---
 
@@ -76,6 +75,10 @@ Working on the CLI source or the templates? See the
 | `src/index.js`    | Entry point. Parses flags, runs interactive or non-interactive, then generates. |
 | `src/registry.js` | **Data declaration** of groups, technologies, `templatePath`, and `lang`. Edit this to add/remove a stack. |
 | `src/prompts.js`  | Interactive prompts (`@clack/prompts`). |
-| `src/generate.js` | Copies templates, renames `_package.json` → `package.json`, emits the root `package.json` + `pnpm-workspace.yaml`, substitutes `{{PROJECT_NAME}}`. |
+| `src/generate.js` | Copies templates, renames `_package.json` → `package.json`, substitutes `{{PROJECT_NAME}}`, emits the root config (`package.json`, `pnpm-workspace.yaml`, `turbo.json`, `tsconfig.base.json`, `.gitignore`, `.npmrc`, `scripts/bootstrap.mjs`), and wires JS/TS apps to `@repo/shared`. |
+| `scripts/validate-templates.mjs` | Validates every registered template (gates `prepack`/publish). Run with `pnpm validate`. |
+
+Before publishing, `prepack` runs template validation automatically. Run the full
+check (validate + generate smoke test) from the repo root with `pnpm test`.
 
 Release a new version: `pnpm release` (see [scripts/release.mjs](scripts/release.mjs)).

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "create-du-app",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "CLI generator: pick templates (Mobile/FE/BE) and scaffold a product monorepo",
   "type": "module",
   "bin": {
-    "create-app": "src/index.js"
+    "create-du-app": "src/index.js"
   },
   "files": [
     "src",
@@ -12,14 +12,15 @@
   ],
   "scripts": {
     "start": "node src/index.js",
+    "validate": "node scripts/validate-templates.mjs",
     "release": "node scripts/release.mjs",
-    "prepack": "node scripts/bundle-templates.mjs",
+    "prepack": "node scripts/validate-templates.mjs && node scripts/bundle-templates.mjs",
     "postpack": "node scripts/bundle-templates.mjs --clean"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
-  "packageManager": "pnpm@9.0.0",
+  "packageManager": "pnpm@9.12.0",
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "fs-extra": "^11.2.0"

package/src/index.js

@@ -2,8 +2,8 @@
 // index.js — entry point. Parse args + run prompts (TTY) or generate directly (flags).
 //
 // Usage:
-//   create-app                                 interactive (requires a real terminal)
-//   create-app --name my-shop --be nestjs      non-interactive (runs anywhere)
+//   create-du-app                                 interactive (requires a real terminal)
+//   create-du-app --name my-shop --be nestjs      non-interactive (runs anywhere)
 //   node src/index.js
 //
 // Flags:
@@ -56,11 +56,11 @@ async function readVersion() {
 
 function printHelp() {
   console.log(`
-create-app — scaffold a product monorepo from company templates
+create-du-app — scaffold a product monorepo from company templates
 
 Usage:
-  create-app                                interactive (requires a real terminal)
-  create-app --name my-shop --be nestjs     non-interactive (runs anywhere)
+  create-du-app                                interactive (requires a real terminal)
+  create-du-app --name my-shop --be nestjs     non-interactive (runs anywhere)
   node src/index.js                         equivalent (when not linked)
 
 Options:
@@ -73,7 +73,7 @@ Options:
   -y, --yes               generate without prompting (needs --name + >=1 group)
 
 Example:
-  create-app --name my-shop --mobile expo --fe nextjs --be nestjs
+  create-du-app --name my-shop --mobile expo --fe nextjs --be nestjs
 
 Add/remove templates: edit packages/cli/src/registry.js
 `);
@@ -93,7 +93,7 @@ function parseArgs(argv) {
       case '--fe': out.fe = argv[++i]; break;
       case '--be': out.be = argv[++i]; break;
       default:
-        throw new Error(`Invalid argument: ${a}. See: create-app --help`);
+        throw new Error(`Invalid argument: ${a}. See: create-du-app --help`);
     }
   }
   return out;
@@ -155,7 +155,7 @@ async function main() {
     throw new Error(
       'This terminal does not support interactive mode (stdin is not a TTY).\n' +
       '  → Run it in Terminal.app/iTerm, OR use flags:\n' +
-      '    create-app --name my-shop --mobile expo --fe nextjs --be nestjs',
+      '    create-du-app --name my-shop --mobile expo --fe nextjs --be nestjs',
     );
   } else {
     plan = await runPrompts();

package/src/prompts.js

@@ -24,7 +24,7 @@ function ensureNotCancelled(value) {
 }
 
 export async function runPrompts() {
-  intro('create-app — scaffold a product monorepo from company templates');
+  intro('create-du-app — scaffold a product monorepo from company templates');
 
   // 1) Project name
   const projectName = ensureNotCancelled(

package/templates/mobile/expo/.env.example

@@ -0,0 +1,5 @@
+# Copy to .env and fill in. Read at build time by react-native-config.
+# NEVER commit the real .env — only this example.
+
+# Base URL of your API (include trailing slash).
+BASE_URL=https://api.example.com/

package/templates/mobile/expo/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+  rules: {
+    semi: 0,
+  },
+};

package/templates/mobile/expo/.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/templates/mobile/expo/.svgrrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    replaceAttrValues: {
+        '{currentColor}': '{props.color || "#0D1F2D"}',
+        '{292929}': '{props.color || "#292929"}',
+        '{D4D4FF}': '{props.color || "#D4D4FF"}',
+        '{7C7C7C}': '{props.color || "#7C7C7C"}',
+        '{D97706}': '{props.color || "#D97706"}',
+    },
+}

package/templates/mobile/expo/README.md

@@ -1,11 +1,46 @@
-# Placeholder: Expo (mobile/expo)
+# {{PROJECT_NAME}} — Mobile (Expo)
 
-This is a **placeholder** for the **Expo** template.
+An Expo + React Native starter built from the company's production core. The
+reusable infrastructure (`src/core`) is ported as-is; only product-specific
+features (audio/player, real-estate, IAP, maps, blur) were removed. Build your
+features under `src/modules/`.
 
-Drop the standard Expo source here. Conventions:
+## Architecture
 
-- Name the template's `package.json` as **`_package.json`** (the CLI renames it on generate).
-- Name `.gitignore` as **`_gitignore`**, `.npmrc` as **`_npmrc`** if present.
-- Wherever you need the project name, write `{{PROJECT_NAME}}` — the CLI replaces it with the real name.
+```
+src/
+├── app/        composition: providers, navigation, global stores (auth/loading/common), i18n
+├── core/       reusable infrastructure (see below)
+├── modules/    your features (home/profile examples included)
+└── assets/     i18n, svgs (sync-generated barrel), images, lotties
+```
 
-`lang: js` → this app counts toward the condition for creating `packages/shared`.
+### `src/core` — the reusable kit
+| Area | Where |
+|------|-------|
+| API | `services/api.service.ts` (axios + auth header + device-id + 401 session handling), `api/example.api.ts` (React Query pattern) |
+| Data | `utils/query-client.util.ts`, `utils/query-persister.util.ts` (MMKV offline cache) |
+| Theme | `theme/` — context + `Colors` design tokens (`useTheme`, `useThemedStyles`) |
+| UI kit | `components/ui/*` — button, text-field/area, checkbox, radio, toggle, modal, bottom-sheet, header, tabs, otp-input, search-box, skeleton, app-image, image-slider… |
+| Forms | `components/forms/*` — react-hook-form bindings over the DS fields |
+| Hooks | `hook/*` — useDebounce, useTimeout, useNetworkStatus, useEndReached, useAppNavigation… |
+| Utils | `utils/*` — storage, translator (i18n), validate/schema (yup), date/number format, enum, toast, size/typography… |
+
+### Shared contracts
+The core imports domain contracts (`ApiEndpoints`, `ExternalUrls`, enums) from
+**`@repo/shared`** — generate this app alongside another JS/TS stack so that
+package exists; the CLI wires `"@repo/shared": "workspace:*"` automatically.
+
+## Getting started
+
+```bash
+pnpm bootstrap                                  # install + build @repo/shared
+pnpm --filter {{PROJECT_NAME}}-mobile typecheck # verify
+pnpm --filter {{PROJECT_NAME}}-mobile start     # expo dev server
+```
+
+Add an icon: drop `name.svg` in `src/assets/svgs/` then `pnpm --filter {{PROJECT_NAME}}-mobile sync-svgs`.
+
+Native folders (`ios/`, `android/`) are git-ignored — run `expo prebuild` to generate them.
+
+> Before shipping: set `name`, `slug`, `scheme`, and the iOS/Android bundle ids in `app.json`.

package/templates/mobile/expo/_gitignore

@@ -0,0 +1,20 @@
+# Native build artifacts (regenerated by `expo prebuild`)
+/ios
+/android
+.expo/
+web-build/
+
+# Dependencies
+node_modules/
+
+# Metro
+.metro-health-check*
+
+# Env (keep .env.example)
+.env
+.env.*
+!.env.example
+
+# Logs / OS
+*.log
+.DS_Store

package/templates/mobile/expo/_package.json

@@ -2,5 +2,66 @@
   "name": "{{PROJECT_NAME}}-mobile",
   "version": "0.1.0",
   "private": true,
-  "description": "Placeholder Expo app for {{PROJECT_NAME}}"
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild",
+    "lint": "eslint . --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "sync-svgs": "node src/scripts/sync-svgs.js",
+    "sync-images": "node src/scripts/sync-images.js"
+  },
+  "dependencies": {
+    "@hookform/error-message": "2.0.0",
+    "@react-native-async-storage/async-storage": "^2.1.2",
+    "@react-native-community/netinfo": "^12.0.1",
+    "@react-navigation/bottom-tabs": "^7.12.0",
+    "@react-navigation/native": "^7.0.13",
+    "@react-navigation/native-stack": "^7.1.14",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-query-persist-client": "^5.101.0",
+    "axios": "^1.7.9",
+    "expo": "~56.0.6",
+    "i18next": "^21.5.4",
+    "lodash": "^4.17.21",
+    "lottie-react-native": "^7.3.4",
+    "qs": "^6.10.1",
+    "react": "19.2.3",
+    "react-hook-form": "^7.53.2",
+    "react-i18next": "^11.14.3",
+    "react-native": "0.85.3",
+    "react-native-config": "^1.6.1",
+    "react-native-date-picker": "5.0.12",
+    "react-native-device-info": "^15.0.2",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-image-picker": "^8.2.1",
+    "react-native-keyboard-controller": "^1.21.6",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-localize": "^3.7.0",
+    "react-native-mmkv": "^4.3.1",
+    "react-native-nitro-modules": "^0.35.9",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "^5.7.0",
+    "react-native-screens": "4.25.2",
+    "react-native-svg": "^15.15.4",
+    "react-native-toast-message": "^2.2.1",
+    "react-native-worklets": "0.8.3",
+    "yup": "^0.32.11",
+    "zustand": "^5.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@react-native/eslint-config": "0.85.3",
+    "@types/lodash": "^4.14.176",
+    "@types/qs": "^6.9.7",
+    "@types/react": "^19.1.1",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^8.19.0",
+    "prettier": "2.8.8",
+    "react-native-svg-transformer": "^1.5.0",
+    "typescript": "~5.8.3"
+  }
 }

package/templates/mobile/expo/app.json

@@ -0,0 +1,18 @@
+{
+  "expo": {
+    "name": "{{PROJECT_NAME}}",
+    "slug": "{{PROJECT_NAME}}",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "scheme": "myapp",
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.company.myapp"
+    },
+    "android": {
+      "package": "com.company.myapp"
+    }
+  }
+}

package/templates/mobile/expo/babel.config.js

@@ -0,0 +1,21 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['.'],
+          extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json', '.svg'],
+          alias: {
+            '@src': './src',
+            '@modules': './src/modules',
+          },
+        },
+      ],
+      // Must be last.
+      'react-native-reanimated/plugin',
+    ],
+  };
+};

package/templates/mobile/expo/index.js

@@ -0,0 +1,5 @@
+import { registerRootComponent } from 'expo';
+import AppProvider from './src/app/app-provider';
+
+// Expo registers the root component under the fixed native module name "main".
+registerRootComponent(AppProvider);

package/templates/mobile/expo/metro.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const { getDefaultConfig } = require('expo/metro-config');
+const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');
+
+// --- Monorepo paths ---
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, '../..');
+
+/**
+ * Metro configuration (Expo + monorepo-aware, with SVG support)
+ * https://docs.expo.dev/guides/monorepos/
+ *
+ * @type {import('expo/metro-config').MetroConfig}
+ */
+const config = getDefaultConfig(projectRoot);
+
+// Watch the whole monorepo so edits in packages/* trigger reloads.
+config.watchFolders = [monorepoRoot];
+
+// Resolve from the app first, then the hoisted monorepo root node_modules.
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+];
+
+// SVG-as-component support (react-native-svg-transformer).
+config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer/expo');
+config.resolver.assetExts = config.resolver.assetExts.filter(ext => ext !== 'svg');
+config.resolver.sourceExts = [...config.resolver.sourceExts, 'svg'];
+
+module.exports = wrapWithReanimatedMetroConfig(config);

package/templates/mobile/expo/src/app/App.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { useTheme } from '@src/core/theme';
+import { RootNavigator } from './navigation';
+import { useAuthStore } from './stores';
+import { bootstrapLanguage } from './config/translation';
+
+// Root UI component. Restores the persisted session + language, then mounts navigation.
+export function App() {
+  const { resolved } = useTheme();
+  const hydrate = useAuthStore(s => s.hydrate);
+
+  useEffect(() => {
+    void bootstrapLanguage();
+    void hydrate();
+  }, [hydrate]);
+
+  return (
+    <>
+      <StatusBar barStyle={resolved === 'dark' ? 'light-content' : 'dark-content'} />
+      <RootNavigator />
+    </>
+  );
+}

package/templates/mobile/expo/src/app/app-provider.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { I18nextProvider } from 'react-i18next';
+import { onlineManager } from '@tanstack/react-query';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import NetInfo from '@react-native-community/netinfo';
+import { queryClient, mmkvQueryPersister } from '@src/core/utils';
+import { ThemeProvider } from '@src/core/theme';
+import { i18n } from './config/translation';
+import { App } from './App';
+
+// Pause/resume React Query based on connectivity (offline-first).
+onlineManager.setEventListener(setOnline =>
+  NetInfo.addEventListener(state => setOnline(Boolean(state.isConnected))),
+);
+
+// The provider tree. Order: gesture root → persisted query cache → i18n →
+// safe-area → theme → app UI.
+export default function AppProvider() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{ persister: mmkvQueryPersister }}>
+        <I18nextProvider i18n={i18n}>
+          <SafeAreaProvider>
+            <ThemeProvider>
+              <App />
+            </ThemeProvider>
+          </SafeAreaProvider>
+        </I18nextProvider>
+      </PersistQueryClientProvider>
+    </GestureHandlerRootView>
+  );
+}

package/templates/mobile/expo/src/app/config/translation.ts

@@ -0,0 +1,26 @@
+import { findBestLanguageTag } from 'react-native-localize';
+import { Translator } from '@src/core/utils';
+import en from '@src/assets/i18n/en.json';
+import fr from '@src/assets/i18n/fr.json';
+
+const resources = {
+  en: { translation: en },
+  fr: { translation: fr },
+};
+
+const fallbackLng = 'en';
+const best = findBestLanguageTag(Object.keys(resources));
+
+// Initialize i18next once and expose the instance. The provider mounts it in
+// app-provider.tsx; the active language can be changed via Translator.changeLanguages.
+export const i18n = Translator.setup({
+  resources,
+  lng: best?.languageTag?.split('-')[0] ?? fallbackLng,
+  fallbackLng,
+  interpolation: { escapeValue: false },
+});
+
+// Hook persisted-language restore here if you store a user preference.
+export async function bootstrapLanguage(): Promise<void> {
+  // no-op for the starter; wire AppStorageUtil + Translator.changeLanguages here.
+}

package/templates/mobile/expo/src/app/index.ts

@@ -0,0 +1 @@
+export * from './stores';

package/templates/mobile/expo/src/app/navigation/app-route-type.ts

@@ -0,0 +1,27 @@
+// Central screen registry + typed param list. Add a screen here and every
+// navigation call to it (via NavigationUtil / useNavigation) is type-checked.
+export enum Screen {
+  Home = 'Home',
+  Profile = 'Profile',
+  // Auth / feature screens the core references (e.g. session-expired reset).
+  // Wire real screens for these as you build the app.
+  SignIn = 'SignIn',
+  OtpVerification = 'OtpVerification',
+  PlayerFull = 'PlayerFull',
+  LibraryMain = 'LibraryMain',
+}
+
+export type NavigatorParamList = {
+  [Screen.Home]: undefined;
+  [Screen.Profile]: undefined;
+  [Screen.SignIn]: undefined;
+  [Screen.OtpVerification]: undefined;
+  [Screen.PlayerFull]: undefined;
+  [Screen.LibraryMain]: undefined;
+};
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends NavigatorParamList {}
+  }
+}

package/templates/mobile/expo/src/app/navigation/bottom-tabs.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '@src/core/theme';
+import { Screen } from './app-route-type';
+import { HomeScreen } from '@src/modules/home/home.screen';
+import { ProfileScreen } from '@src/modules/profile/profile.screen';
+
+const Tab = createBottomTabNavigator();
+
+export function BottomTabs() {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: colors.bg_elevation_level_1_normal },
+        headerTintColor: colors.fg_neutral_normal,
+        tabBarStyle: {
+          backgroundColor: colors.bg_elevation_level_1_normal,
+          borderTopColor: colors.bd_neutral_faded,
+        },
+        tabBarActiveTintColor: colors.fg_primary_normal,
+        tabBarInactiveTintColor: colors.fg_neutral_faded,
+      }}>
+      <Tab.Screen name={Screen.Home} component={HomeScreen} options={{ title: t('home.title') }} />
+      <Tab.Screen
+        name={Screen.Profile}
+        component={ProfileScreen}
+        options={{ title: t('profile.title') }}
+      />
+    </Tab.Navigator>
+  );
+}

package/templates/mobile/expo/src/app/navigation/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { navigationRef } from '@src/core/utils';
+import { BottomTabs } from './bottom-tabs';
+
+// Mounts the navigation tree and wires the global navigationRef so the API
+// layer (and any non-component code) can navigate / reset on session expiry.
+export function RootNavigator() {
+  return (
+    <NavigationContainer ref={navigationRef}>
+      <BottomTabs />
+    </NavigationContainer>
+  );
+}

package/templates/mobile/expo/src/app/stores/auth.store.ts

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { AppStorageUtil, StorageKeys } from '@src/core/utils';
+
+interface AuthState {
+  token: string | null;
+  isAuthenticated: boolean;
+  setToken: (token: string | null) => void;
+  clearTokens: () => void;
+  hydrate: () => Promise<void>;
+}
+
+// Global auth store (Zustand). The API layer reads `token` for the auth header
+// and calls `clearTokens()` on a 401 (see core/services/api.service.ts).
+export const useAuthStore = create<AuthState>()(set => ({
+  token: null,
+  isAuthenticated: false,
+  setToken: token => {
+    if (token) {
+      AppStorageUtil.setItem(StorageKeys.APP_ACCESS_TOKEN, token);
+    } else {
+      AppStorageUtil.removeItem(StorageKeys.APP_ACCESS_TOKEN);
+    }
+    set({ token, isAuthenticated: Boolean(token) });
+  },
+  clearTokens: () => {
+    AppStorageUtil.removeItem(StorageKeys.APP_ACCESS_TOKEN);
+    set({ token: null, isAuthenticated: false });
+  },
+  hydrate: async () => {
+    const token = (await AppStorageUtil.getItem(StorageKeys.APP_ACCESS_TOKEN)) as string | null;
+    set({ token: token ?? null, isAuthenticated: Boolean(token) });
+  },
+}));

package/templates/mobile/expo/src/app/stores/common.store.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+export interface EnumValue {
+  key: string;
+  value: string;
+  label?: string;
+}
+
+interface CommonState {
+  /** Server-provided enum/lookup values (seeded after login/bootstrap). */
+  enumValues: EnumValue[];
+  setEnumValues: (values: EnumValue[]) => void;
+}
+
+// App-wide misc state (enum lookups, etc.). Used by core/utils/func.util.
+export const useCommonStore = create<CommonState>()(set => ({
+  enumValues: [],
+  setEnumValues: enumValues => set({ enumValues }),
+}));

package/templates/mobile/expo/src/app/stores/index.ts

@@ -0,0 +1,3 @@
+export * from './auth.store';
+export * from './loading.store';
+export * from './common.store';

package/templates/mobile/expo/src/app/stores/loading.store.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+
+interface LoadingState {
+  /** True while at least one non-silent request is in flight. */
+  isLoading: boolean;
+  count: number;
+  showLoading: () => void;
+  hideLoading: () => void;
+}
+
+// Ref-counted global loading flag. The API layer toggles it around non-silent
+// requests; <LoadingApp> renders the overlay when `isLoading` is true.
+export const useLoadingStore = create<LoadingState>()(set => ({
+  isLoading: false,
+  count: 0,
+  showLoading: () => set(s => ({ count: s.count + 1, isLoading: true })),
+  hideLoading: () =>
+    set(s => {
+      const count = Math.max(0, s.count - 1);
+      return { count, isLoading: count > 0 };
+    }),
+}));