expotesting2 4.1.0

package/README.md

@@ -0,0 +1,289 @@
+# expotesting
+
+> **Production-ready React Native (Expo) learning library** — modular, fully typed, aligned to a structured university syllabus.
+
+---
+
+## Overview
+
+`expotesting` is a **pnpm + Turborepo monorepo** that functions as both a learning platform and a reusable component/hook library for React Native (Expo) development. It mirrors academic progression across three modules:
+
+| Module | Topic | Experiments |
+|--------|-------|-------------|
+| 1 | React Basics — Components, Navigation, JSX | 01, 02, 03 |
+| 2 | State, Networking & Data | 04, 05 |
+| 3 | Advanced — Animations & Device Features | 06 |
+
+---
+
+## Monorepo Structure
+
+```
+expotesting/
+├── apps/
+│   └── expo-app/          # Demo app — runs all 6 experiments
+├── packages/
+│   ├── core/              # Components, hooks, theme, utils
+│   ├── navigation/        # Stack, Tab, Drawer navigators + factory
+│   ├── state/             # Context API + Redux Toolkit
+│   ├── network/           # Axios client + fetch helpers + useFetch
+│   ├── storage/           # AsyncStorage + SQLite wrappers + useSQLite
+│   ├── animations/        # Animated API + Reanimated utilities
+│   ├── device/            # useCamera, useGallery, useLocation
+│   └── examples/          # All 6 runnable experiment screens
+├── package.json           # Root (private, pnpm workspace)
+├── pnpm-workspace.yaml
+├── turbo.json
+└── tsconfig.base.json
+```
+
+---
+
+## Getting Started
+
+### Prerequisites
+- Node.js ≥ 18
+- pnpm ≥ 9 (`npm i -g pnpm`)
+- Expo Go app on a physical device, or an iOS/Android simulator
+
+### Install
+
+```bash
+pnpm install
+```
+
+### Run the demo app
+
+```bash
+pnpm start
+# or
+cd apps/expo-app && expo start
+```
+
+---
+
+## Packages
+
+### `@expotesting/core`
+
+Reusable UI components and hooks with zero external dependencies beyond React Native.
+
+**Components**
+```tsx
+import { Container, Card, Input, Button, List } from '@expotesting/core';
+
+<Container scroll padded>
+  <Card title="Profile" subtitle="Software Engineer" elevation="md">
+    <Input label="Email" value={email} onChangeText={setEmail} />
+    <Button onPress={handleSubmit} loading={submitting}>Submit</Button>
+  </Card>
+  <List data={items} renderItem={({ item }) => <Text>{item.name}</Text>} />
+</Container>
+```
+
+**Hooks**
+```ts
+import { useToggle, useCounter, useAsync } from '@expotesting/core';
+
+const { value: isOpen, toggle } = useToggle(false);
+const { count, increment, decrement, reset } = useCounter(0, { min: 0, max: 10 });
+const { data, loading, error, execute } = useAsync(() => fetchUser(id));
+```
+
+**Theme tokens**
+```ts
+import { palette, spacing, typography, radius, shadows } from '@expotesting/core';
+```
+
+---
+
+### `@expotesting/navigation`
+
+Pre-wired navigators built on React Navigation v6.
+
+```tsx
+import { createAppNavigator } from '@expotesting/navigation';
+import { NavigationContainer } from '@react-navigation/native';
+
+const Navigator = createAppNavigator({
+  type: 'tabs',       // 'stack' | 'tabs' | 'drawer'
+  screens: [
+    { name: 'Home', component: HomeScreen },
+    { name: 'Profile', component: ProfileScreen },
+  ],
+  activeColor: '#6200EE',
+});
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Navigator />
+    </NavigationContainer>
+  );
+}
+```
+
+---
+
+### `@expotesting/state`
+
+#### Context API
+
+```tsx
+import { ThemeProvider, useTheme, AuthProvider, useAuth } from '@expotesting/state';
+
+// Wrap app
+<ThemeProvider><AuthProvider>{children}</AuthProvider></ThemeProvider>
+
+// Consume
+const { colors, isDark, toggleTheme } = useTheme();
+const { user, login, logout, isAuthenticated } = useAuth();
+```
+
+#### Redux Toolkit
+
+```tsx
+import { Provider } from 'react-redux';
+import {
+  store,
+  useAppSelector, useAppDispatch,
+  increment, decrement, fetchPosts,
+  selectCount, selectAllPosts,
+} from '@expotesting/state';
+
+// Root
+<Provider store={store}>{children}</Provider>
+
+// In components
+const count = useAppSelector(selectCount);
+const dispatch = useAppDispatch();
+dispatch(increment());
+dispatch(fetchPosts({ page: 1, limit: 10 }));
+```
+
+---
+
+### `@expotesting/network`
+
+```ts
+import { apiClient, useFetch } from '@expotesting/network';
+
+// Axios instance
+const { data } = await apiClient.get<User>('/users/1');
+await apiClient.post('/posts', { title: 'Hello' });
+
+// Hook
+const { data, loading, error, refetch } = useFetch<Post[]>('/posts?_limit=10');
+```
+
+---
+
+### `@expotesting/storage`
+
+```ts
+import { appStorage, createStorage, useSQLite } from '@expotesting/storage';
+
+// AsyncStorage
+await appStorage.setItem('theme', 'dark');
+const theme = await appStorage.getItem<string>('theme');
+
+// Namespaced
+const authStorage = createStorage('auth');
+await authStorage.setItem('token', jwt);
+
+// SQLite hook
+const { db, ready, error } = useSQLite('myapp.db');
+useEffect(() => {
+  if (!ready || !db) return;
+  void db.runAsync('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name TEXT)');
+}, [ready, db]);
+```
+
+---
+
+### `@expotesting/animations`
+
+```tsx
+import { FadeView, ScaleView, SlideView } from '@expotesting/animations';
+import { reanimatedFadeIn, reanimatedSpringScale } from '@expotesting/animations';
+
+// Animated API components
+<FadeView visible={show} duration={300}>
+  <MyContent />
+</FadeView>
+
+<ScaleView visible={show}>
+  <MyContent />
+</ScaleView>
+
+<SlideView visible={show} direction="top">
+  <MyContent />
+</SlideView>
+
+// Reanimated hooks
+import { useFade, useScale } from '@expotesting/animations';
+const { opacity, fadeIn, fadeOut } = useFade();
+```
+
+---
+
+### `@expotesting/device`
+
+```ts
+import { useCamera, useGallery, useLocation } from '@expotesting/device';
+
+// Camera
+const { hasPermission, requestPermission, capturePhoto, lastPhoto } = useCamera();
+
+// Gallery
+const { pickImage, selectedAsset } = useGallery({ allowsEditing: true });
+
+// Location
+const { location, getLocation, loading } = useLocation({ accuracy: 'balanced' });
+```
+
+---
+
+## Experiments
+
+| # | Screen | Topics |
+|---|--------|--------|
+| 01 | `BasicAppScreen` | View · Text · Image · StyleSheet · Flexbox · Component Composition |
+| 02 | `ComponentsStateScreen` | useState · useReducer · Event Handling · Controlled Inputs |
+| 03 | `NavHomeScreen` / `NavDetailsScreen` | Stack with typed params · Navigation.navigate · route.params |
+| 04 | `StateManagementScreen` | Context API · Redux counter · Async thunk (fetchPosts) |
+| 05 | `NetworkStorageScreen` | fetch() · Axios · FlatList · AsyncStorage · SQLite CRUD |
+| 06 | `AnimationsDeviceScreen` | Animated API · Reanimated entering/exiting · Camera · Gallery · GPS |
+
+Each experiment is a self-contained React component importable from `@expotesting/examples`.
+
+```tsx
+import { BasicAppScreen, EXPERIMENT_REGISTRY } from '@expotesting/examples';
+```
+
+---
+
+## TypeScript
+
+All packages are authored in **strict TypeScript**. Type definitions ship alongside source files. No separate `@types/*` packages are required for the internal API.
+
+---
+
+## Tooling
+
+| Tool | Purpose |
+|------|---------|
+| pnpm workspaces | Monorepo package management |
+| Turborepo | Build orchestration + caching |
+| TypeScript 5 strict | Type safety |
+| Expo SDK ~52 | Managed workflow |
+| React Navigation 6 | Navigation |
+| Redux Toolkit 2 | State management |
+| Axios 1 | HTTP client |
+| Reanimated 3 | Advanced animations |
+
+---
+
+## License
+
+MIT

package/apps/expo-app/app.json

@@ -0,0 +1,60 @@
+{
+  "expo": {
+    "name": "expotesting",
+    "slug": "expotesting",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#6200EE"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.expotesting.app",
+      "infoPlist": {
+        "NSCameraUsageDescription": "Used in Experiment 06 to demonstrate Expo Camera.",
+        "NSPhotoLibraryUsageDescription": "Used in Experiment 06 to demonstrate ImagePicker.",
+        "NSLocationWhenInUseUsageDescription": "Used in Experiment 06 to demonstrate GPS location."
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#6200EE"
+      },
+      "package": "com.expotesting.app",
+      "permissions": [
+        "CAMERA",
+        "READ_EXTERNAL_STORAGE",
+        "WRITE_EXTERNAL_STORAGE",
+        "ACCESS_FINE_LOCATION",
+        "ACCESS_COARSE_LOCATION"
+      ]
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": [
+      [
+        "expo-camera",
+        { "cameraPermission": "Allow expotesting to access camera." }
+      ],
+      [
+        "expo-image-picker",
+        { "photosPermission": "Allow expotesting to access photos." }
+      ],
+      [
+        "expo-location",
+        { "locationWhenInUsePermission": "Allow expotesting to access your location." }
+      ],
+      "expo-sqlite",
+      [
+        "react-native-reanimated"
+      ]
+    ]
+  }
+}

package/apps/expo-app/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

package/apps/expo-app/index.js

@@ -0,0 +1,6 @@
+import 'react-native-reanimated';
+import 'react-native-gesture-handler';
+import { registerRootComponent } from 'expo';
+import App from './src/App';
+
+registerRootComponent(App);

package/apps/expo-app/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "expo-app",
+  "version": "1.0.0",
+  "description": "expotesting demo app — showcases all 6 experiments",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expotesting/animations": "workspace:*",
+    "@expotesting/core": "workspace:*",
+    "@expotesting/device": "workspace:*",
+    "@expotesting/examples": "workspace:*",
+    "@expotesting/navigation": "workspace:*",
+    "@expotesting/network": "workspace:*",
+    "@expotesting/state": "workspace:*",
+    "@expotesting/storage": "workspace:*",
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-navigation/bottom-tabs": "^6.6.1",
+    "@react-navigation/drawer": "^6.7.2",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
+    "@reduxjs/toolkit": "^2.3.0",
+    "axios": "^1.7.0",
+    "expo": "~52.0.0",
+    "expo-camera": "~16.0.0",
+    "expo-image-picker": "~16.0.0",
+    "expo-location": "~18.0.0",
+    "expo-sqlite": "~15.0.0",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.0",
+    "react-native-reanimated": "~3.16.0",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.3.0",
+    "react-redux": "^9.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0"
+  }
+}

package/apps/expo-app/src/App.jsx

@@ -0,0 +1,37 @@
+/**
+ * App.tsx — root component.
+ *
+ * Wires up:
+ * - Redux Provider (store from @expotesting/state)
+ * - ThemeProvider + AuthProvider (Context API)
+ * - GestureHandlerRootView (required by react-native-gesture-handler)
+ * - SafeAreaProvider
+ * - RootNavigator
+ */
+
+import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Provider } from 'react-redux';
+import { StatusBar } from 'expo-status-bar';
+
+import { store } from '@expotesting/state';
+import { ThemeProvider, AuthProvider } from '@expotesting/state';
+import { RootNavigator } from './navigation/RootNavigator';
+
+export default function App(){
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <Provider store={store}>
+          <ThemeProvider>
+            <AuthProvider>
+              <StatusBar style="light" />
+              <RootNavigator />
+            </AuthProvider>
+          </ThemeProvider>
+        </Provider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}

package/apps/expo-app/src/navigation/RootNavigator.jsx

@@ -0,0 +1,82 @@
+/**
+ * RootNavigator — top-level stack that hosts the catalogue
+ * and all experiment screens.
+ */
+
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { HomeScreen } from '../screens/HomeScreen';
+import {
+  BasicAppScreen,
+  ComponentsStateScreen,
+  NavHomeScreen,
+  NavDetailsScreen,
+  NavProfileScreen,
+  StateManagementScreen,
+  NetworkStorageScreen,
+  AnimationsDeviceScreen } from '@expotesting/examples';
+
+const Stack = createNativeStackNavigator();
+
+export function RootNavigator(){
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          headerBackTitleVisible: false,
+          headerStyle: { backgroundColor: '#6200EE' },
+          headerTintColor: '#fff',
+          headerTitleStyle: { fontWeight: '700' } }}
+      >
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="Basic"
+          component={BasicAppScreen}
+          options={{ title: 'Exp 01 — Basic App', headerShown: false }}
+        />
+        <Stack.Screen
+          name="State"
+          component={ComponentsStateScreen}
+          options={{ title: 'Exp 02 — Components & State', headerShown: false }}
+        />
+        <Stack.Screen
+          name="NavHome"
+          component={NavHomeScreen}
+          options={{ title: 'Exp 03 — Navigation', headerShown: false }}
+        />
+        <Stack.Screen
+          name="NavDetails"
+          component={NavDetailsScreen}
+          options={{ title: 'Details', headerShown: true }}
+        />
+        <Stack.Screen
+          name="NavProfile"
+          component={NavProfileScreen}
+          options={{ title: 'Profile', headerShown: true }}
+        />
+        <Stack.Screen
+          name="StateMan"
+          component={StateManagementScreen}
+          options={{ title: 'Exp 04 — State Management', headerShown: false }}
+        />
+        <Stack.Screen
+          name="NetStore"
+          component={NetworkStorageScreen}
+          options={{ title: 'Exp 05 — Networking & Storage', headerShown: false }}
+        />
+        <Stack.Screen
+          name="AnimDevice"
+          component={AnimationsDeviceScreen}
+          options={{ title: 'Exp 06 — Animations & Device', headerShown: false }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

package/apps/expo-app/src/navigation/types.js

@@ -0,0 +1,5 @@
+/**
+ * Root navigation param list for the demo app.
+ * Each experiment screen is a separate stack route.
+ */
+