expotesting2 4.1.0

package/packages/state/src/context/ThemeContext.jsx

@@ -0,0 +1,79 @@
+/**
+ * ThemeContext — provides light/dark theme throughout the app.
+ *
+ * Usage:
+ *   1. Wrap your app in <ThemeProvider>
+ *   2. Consume with useTheme()
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <MainNavigator />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * function Screen() {
+ *   const { colorScheme, toggleTheme, colors } = useTheme();
+ *   return <View style={{ backgroundColor: colors.background }} />;
+ * }
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState } from 'react';
+
+const lightColors= {
+  background: '#FFFFFF',
+  surface: '#F5F5F5',
+  primary: '#6200EE',
+  text: '#212121',
+  subtext: '#757575',
+  border: '#E0E0E0',
+  error: '#B00020' };
+
+const darkColors= {
+  background: '#121212',
+  surface: '#1E1E1E',
+  primary: '#BB86FC',
+  text: '#FFFFFF',
+  subtext: '#B0B0B0',
+  border: '#333333',
+  error: '#CF6679' };
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({
+  children,
+  initialScheme = 'light' }){
+  const [colorScheme, setColorScheme] = useState(initialScheme);
+
+  const toggleTheme = useCallback(() => {
+    setColorScheme((s) => (s === 'light' ? 'dark' : 'light'));
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      colorScheme,
+      colors: colorScheme === 'dark' ? darkColors : lightColors,
+      isDark: colorScheme === 'dark',
+      toggleTheme,
+      setColorScheme }),
+    [colorScheme, toggleTheme],
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/** Hook to consume ThemeContext — must be used inside <ThemeProvider>. */
+export function useTheme(){
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return ctx;
+}

package/packages/state/src/context/index.js

@@ -0,0 +1,3 @@
+export { ThemeProvider, useTheme } from './ThemeContext';
+
+export { AuthProvider, useAuth } from './AuthContext';

package/packages/state/src/index.js

@@ -0,0 +1,5 @@
+// Context API exports
+export * from './context/index';
+
+// Redux exports
+export * from './redux/index';

package/packages/state/src/redux/hooks.js

@@ -0,0 +1,12 @@
+/**
+ * Typed hooks for Redux — use these instead of plain useSelector / useDispatch.
+ *
+ * @example
+ * const dispatch = useAppDispatch();
+ * const count = useAppSelector(selectCount);
+ */
+
+import { useDispatch, useSelector } from 'react-redux';
+
+export const useAppDispatch = useDispatch;
+export const useAppSelector = useSelector;

package/packages/state/src/redux/index.js

@@ -0,0 +1,7 @@
+export { store } from './store';
+
+export { useAppDispatch, useAppSelector } from './hooks';
+
+export { counterSlice, increment, decrement, reset, incrementByAmount, setStep, selectCount, selectStep } from './slices/counterSlice';
+
+export { postsSlice, fetchPosts, fetchPostById, clearPosts, selectPost, selectAllPosts, selectPostsStatus, selectPostsError, selectSelectedPost } from './slices/postsSlice';

package/packages/state/src/redux/slices/counterSlice.js

@@ -0,0 +1,39 @@
+/**
+ * counterSlice — example Redux Toolkit slice demonstrating:
+ * - synchronous actions (increment, decrement, reset, incrementByAmount)
+ * - derived selectors
+ * - used in Module 2: State Management
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState= {
+  value: 0,
+  step: 1 };
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment(state) {
+      state.value += state.step;
+    },
+    decrement(state) {
+      state.value -= state.step;
+    },
+    reset(state) {
+      state.value = 0;
+    },
+    incrementByAmount(state, action) {
+      state.value += action.payload;
+    },
+    setStep(state, action) {
+      state.step = action.payload;
+    } } });
+
+export const { increment, decrement, reset, incrementByAmount, setStep } =
+  counterSlice.actions;
+
+// Typed selectors (kept co-located for discoverability)
+export const selectCount = (state) => state.counter.value;
+export const selectStep = (state) => state.counter.step;

package/packages/state/src/redux/slices/postsSlice.js

@@ -0,0 +1,92 @@
+/**
+ * postsSlice — demonstrates async thunks with createAsyncThunk.
+ *
+ * Covers:
+ * - API fetching with loading/error/success states
+ * - Async/Await patterns in Redux
+ * - Normalized state (simple array)
+ *
+ * Derived from Module 2
+ */
+
+import {
+  createAsyncThunk,
+  createSlice } from '@reduxjs/toolkit';
+
+const POSTS_API = 'https://jsonplaceholder.typicode.com/posts';
+
+/** Fetch paginated posts — pass { page, limit } to control pagination. */
+export const fetchPosts = createAsyncThunk('posts/fetchPosts', async ({ page = 1, limit = 10 }, { rejectWithValue }) => {
+  try {
+    const start = (page - 1) * limit;
+    const response = await fetch(
+      `${POSTS_API}?_start=${start}&_limit=${limit}`,
+    );
+    if (!response.ok) {
+      return rejectWithValue(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    const data= await response.json();
+    return data;
+  } catch (err) {
+    return rejectWithValue(err instanceof Error ? err.message : 'Network error');
+  }
+});
+
+/** Fetch a single post by id. */
+export const fetchPostById = createAsyncThunk('posts/fetchPostById', async (id, { rejectWithValue }) => {
+  try {
+    const response = await fetch(`${POSTS_API}/${id}`);
+    if (!response.ok) {
+      return rejectWithValue(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    return (await response.json());
+  } catch (err) {
+    return rejectWithValue(err instanceof Error ? err.message : 'Network error');
+  }
+});
+
+const initialState= {
+  items: [],
+  status: 'idle',
+  error: null,
+  selectedPost: null,
+};
+
+export const postsSlice = createSlice({
+  name: 'posts',
+  initialState,
+  reducers: {
+    clearPosts(state) {
+      state.items = [];
+      state.status = 'idle';
+      state.error = null;
+    },
+    selectPost(state, action) {
+      state.selectedPost = action.payload;
+    } },
+  extraReducers(builder) {
+    builder
+      .addCase(fetchPosts.pending, (state) => {
+        state.status = 'loading';
+        state.error = null;
+      })
+      .addCase(fetchPosts.fulfilled, (state, action) => {
+        state.status = 'succeeded';
+        state.items = action.payload;
+      })
+      .addCase(fetchPosts.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.payload ?? 'Unknown error';
+      })
+      .addCase(fetchPostById.fulfilled, (state, action) => {
+        state.selectedPost = action.payload;
+      });
+  } });
+
+export const { clearPosts, selectPost } = postsSlice.actions;
+
+// Selectors
+export const selectAllPosts = (state) => state.posts.items;
+export const selectPostsStatus = (state) => state.posts.status;
+export const selectPostsError = (state) => state.posts.error;
+export const selectSelectedPost = (state) => state.posts.selectedPost;

package/packages/state/src/redux/store.js

@@ -0,0 +1,32 @@
+/**
+ * Redux store — pre-configured with counter and posts slices.
+ *
+ * @example
+ * // In your app entry point:
+ * import { Provider } from 'react-redux';
+ * import { store } from '@expotesting/state/redux';
+ *
+ * export default function App() {
+ *   return (
+ *     <Provider store={store}>
+ *       <RootNavigator />
+ *     </Provider>
+ *   );
+ * }
+ */
+
+import { configureStore } from '@reduxjs/toolkit';
+import { counterSlice } from './slices/counterSlice';
+import { postsSlice } from './slices/postsSlice';
+
+export const store = configureStore({
+  reducer: {
+    counter: counterSlice.reducer,
+    posts: postsSlice.reducer },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      // Serializable check is fine for standard payloads
+      serializableCheck: {
+        ignoredActions: [] } }) });
+
+// Inferred types — re-export for use in hooks across the app

package/packages/storage/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@expotesting/storage",
+  "version": "1.0.0",
+  "description": "AsyncStorage and SQLite wrappers for expotesting",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./async-storage": "./src/asyncStorage.ts",
+    "./sqlite": "./src/sqlite/index.ts"
+  },
+  "scripts": {},
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "@react-native-async-storage/async-storage": ">=1",
+    "expo-sqlite": ">=14"
+  },
+  "devDependencies": {
+    "@react-native-async-storage/async-storage": "*",
+    "expo-sqlite": "*"
+  },
+  "license": "MIT"
+}

package/packages/storage/src/asyncStorage.js

@@ -0,0 +1,82 @@
+/**
+ * asyncStorage — typed wrappers around @react-native-async-storage/async-storage.
+ *
+ * Why wrap? 
+ * - Automatic JSON serialisation/deserialisation
+ * - Namespace support to avoid key collisions
+ * - Consistent error handling
+ *
+ * @example
+ * const storage = createStorage('auth');
+ * await storage.setItem('token', 'abc123');
+ * const token = await storage.getItem<string>('token');
+ * await storage.removeItem('token');
+ */
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+/**
+ * Creates a namespaced storage adapter to isolate different domains of data.
+ *
+ * @param namespace - Prefix added to all keys, e.g. 'auth', 'settings'
+ */
+export function createStorage(namespace = 'app'){
+  const prefix = `@${namespace}:`;
+
+  const buildKey = (key) => `${prefix}${key}`;
+
+  async function setItem(key, value){
+    const serialised = JSON.stringify(value);
+    await AsyncStorage.setItem(buildKey(key), serialised);
+  }
+
+  async function getItem(key){
+    const raw = await AsyncStorage.getItem(buildKey(key));
+    if (raw === null) return null;
+    try {
+      return JSON.parse(raw);
+    } catch {
+      // If stored value is a plain string (legacy), return as-is
+      return raw;
+    }
+  }
+
+  async function removeItem(key){
+    await AsyncStorage.removeItem(buildKey(key));
+  }
+
+  async function clear(){
+    const allKeys = await AsyncStorage.getAllKeys();
+    const namespaceKeys = allKeys.filter((k) => k.startsWith(prefix));
+    await AsyncStorage.multiRemove(namespaceKeys);
+  }
+
+  async function getAllKeys(){
+    const allKeys = await AsyncStorage.getAllKeys();
+    return allKeys
+      .filter((k) => k.startsWith(prefix))
+      .map((k) => k.slice(prefix.length));
+  }
+
+  async function multiGet(keys){
+    const fullKeys = keys.map(buildKey);
+    const pairs = await AsyncStorage.multiGet(fullKeys);
+    const result= {};
+    for (const [k, v] of pairs) {
+      const shortKey = k.slice(prefix.length);
+      try {
+        result[shortKey] = v !== null ? (JSON.parse(v)) : null;
+      } catch {
+        result[shortKey] = v;
+      }
+    }
+    return result;
+  }
+
+  return { setItem, getItem, removeItem, clear, getAllKeys, multiGet };
+}
+
+// Default app-level storage instance
+export const appStorage = createStorage('app');
+export const authStorage = createStorage('auth');
+export const settingsStorage = createStorage('settings');

package/packages/storage/src/index.js

@@ -0,0 +1,2 @@
+export * from './asyncStorage';
+export * from './sqlite/index';

package/packages/storage/src/sqlite/database.js

@@ -0,0 +1,65 @@
+/**
+ * SQLite database setup using expo-sqlite v14 (async API).
+ *
+ * expo-sqlite v14 introduced a fully async API via SQLiteDatabase.
+ * Use openDatabase() once at app startup; pass the db instance to operations.
+ *
+ * @example
+ * // In your app entry point:
+ * const db = await openDatabase('myapp.db');
+ * await runMigrations(db);
+ *
+ * // Later:
+ * const users = await queryAll<User>(db, 'SELECT * FROM users');
+ */
+
+import * as SQLite from 'expo-sqlite';
+
+/**
+ * Opens (or creates) a SQLite database file.
+ * Call this once per app session and share the instance.
+ */
+export async function openDatabase(name = 'expotesting.db'){
+  const db = await SQLite.openDatabaseAsync(name);
+  // Enable WAL mode for better concurrent read performance
+  await db.execAsync('PRAGMA journal_mode = WAL;');
+  return db;
+}
+
+/**
+ * Runs raw SQL statements separated by semicolons — ideal for migrations.
+ */
+export async function runMigrations(db, sql){
+  await db.execAsync(sql);
+}
+
+/** Standard CRUD types */
+
+/**
+ * Generates + executes a CREATE TABLE IF NOT EXISTS statement.
+ */
+export async function createTable(
+  db,
+  tableName,
+  columns,
+){
+  const cols = columns.map((c) => {
+    let def = `${c.name} ${c.type}`;
+    if (c.primaryKey) def += ' PRIMARY KEY';
+    if (c.autoIncrement) def += ' AUTOINCREMENT';
+    if (c.notNull) def += ' NOT NULL';
+    if (c.unique) def += ' UNIQUE';
+    if (c.defaultValue !== undefined) def += ` DEFAULT ${c.defaultValue}`;
+    return def;
+  });
+  await db.execAsync(
+    `CREATE TABLE IF NOT EXISTS ${tableName} (${cols.join(', ')});`,
+  );
+}
+
+/**
+ * Drops a table if it exists.
+ */
+export async function dropTable(db, tableName){
+  await db.execAsync(`DROP TABLE IF EXISTS ${tableName};`);
+}

package/packages/storage/src/sqlite/index.js

@@ -0,0 +1,3 @@
+export * from './database';
+export * from './operations';
+export * from './useSQLite';

package/packages/storage/src/sqlite/operations.js

@@ -0,0 +1,112 @@
+/**
+ * SQLite CRUD operations — generic helpers for the most common patterns.
+ *
+ * @example
+ * // Insert a record
+ * const id = await insertRow(db, 'notes', { title: 'Hello', content: 'World' });
+ *
+ * // Query all
+ * const notes = await queryAll<Note>(db, 'SELECT * FROM notes ORDER BY id DESC');
+ *
+ * // Query with params
+ * const note = await queryOne<Note>(db, 'SELECT * FROM notes WHERE id = ?', [id]);
+ *
+ * // Update
+ * await updateRows(db, 'notes', { title: 'Updated' }, 'id = ?', [id]);
+ *
+ * // Delete
+ * await deleteRows(db, 'notes', 'id = ?', [id]);
+ */
+
+/**
+ * Execute a SELECT query returning all rows.
+ */
+export async function queryAll(
+  db,
+  sql,
+  params = [],
+){
+  return db.getAllAsync(sql, params);
+}
+
+/**
+ * Execute a SELECT query returning the first row or null.
+ */
+export async function queryOne(
+  db,
+  sql,
+  params = [],
+){
+  return db.getFirstAsync(sql, params);
+}
+
+/**
+ * INSERT a row from an object — returns the inserted row's id.
+ */
+export async function insertRow(
+  db,
+  tableName,
+  data,
+){
+  const keys = Object.keys(data);
+  const placeholders = keys.map(() => '?').join(', ');
+  const values = Object.values(data);
+  const result = await db.runAsync(
+    `INSERT INTO ${tableName} (${keys.join(', ')}) VALUES (${placeholders});`,
+    values,
+  );
+  return result.lastInsertRowId;
+}
+
+/**
+ * UPDATE rows matching a WHERE clause.
+ */
+export async function updateRows(
+  db,
+  tableName,
+  data,
+  where,
+  whereParams = [],
+){
+  const assignments = Object.keys(data)
+    .map((k) => `${k} = ?`)
+    .join(', ');
+  const values= [...Object.values(data), ...whereParams];
+  const result = await db.runAsync(
+    `UPDATE ${tableName} SET ${assignments} WHERE ${where};`,
+    values,
+  );
+  return result.changes;
+}
+
+/**
+ * DELETE rows matching a WHERE clause.
+ */
+export async function deleteRows(
+  db,
+  tableName,
+  where,
+  whereParams = [],
+){
+  const result = await db.runAsync(
+    `DELETE FROM ${tableName} WHERE ${where};`,
+    whereParams,
+  );
+  return result.changes;
+}
+
+/**
+ * Count rows in a table, optionally filtered.
+ */
+export async function countRows(
+  db,
+  tableName,
+  where,
+  whereParams = [],
+){
+  const sql = where
+    ? `SELECT COUNT(*) as count FROM ${tableName} WHERE ${where};`
+    : `SELECT COUNT(*) as count FROM ${tableName};`;
+  const row = await db.getFirstAsync(sql, whereParams);
+  return row?.count ?? 0;
+}

package/packages/storage/src/sqlite/useSQLite.js

@@ -0,0 +1,45 @@
+/**
+ * useSQLite — React hook that opens a SQLite database and
+ * returns the db instance alongside ready/error state.
+ *
+ * @example
+ * 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)');
+ * }, [ready, db]);
+ */
+
+import { useEffect, useState } from 'react';
+import { openDatabase } from './database';
+
+export function useSQLite(dbName = 'expotesting.db'){
+  const [db, setDb] = useState(null);
+  const [ready, setReady] = useState(false);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void (async () => {
+      try {
+        const database = await openDatabase(dbName);
+        if (!cancelled) {
+          setDb(database);
+          setReady(true);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to open database');
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [dbName]);
+
+  return { db, ready, error };
+}