expotesting2 4.1.0

package/packages/navigation/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@expotesting/navigation",
+  "version": "1.0.0",
+  "description": "Pre-built navigators and navigation utilities for expotesting",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {},
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "@react-navigation/native": "^6",
+    "@react-navigation/native-stack": "^6",
+    "@react-navigation/bottom-tabs": "^6",
+    "@react-navigation/drawer": "^6"
+  },
+  "license": "MIT"
+}

package/packages/navigation/src/DrawerNavigator.jsx

@@ -0,0 +1,35 @@
+/**
+ * AppDrawerNavigator — wraps @react-navigation/drawer with consistent styling.
+ *
+ * @example
+ * <AppDrawerNavigator
+ *   screens={[
+ *     { name: 'Home', component: HomeScreen },
+ *     { name: 'Profile', component: ProfileScreen },
+ *   ]}
+ * />
+ */
+
+import React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+
+const Drawer = createDrawerNavigator();
+
+export function AppDrawerNavigator({
+  screens,
+  screenOptions,
+  drawerPosition = 'left' }){
+  return (
+    <Drawer.Navigator
+      screenOptions={{
+        drawerPosition,
+        drawerType: 'slide',
+        overlayColor: 'rgba(0,0,0,0.4)',
+        ...screenOptions }}
+    >
+      {screens.map(({ name, component, options }) => (
+        <Drawer.Screen key={name} name={name} component={component} options={options} />
+      ))}
+    </Drawer.Navigator>
+  );
+}

package/packages/navigation/src/StackNavigator.jsx

@@ -0,0 +1,51 @@
+/**
+ * AppStackNavigator — wraps @react-navigation/native-stack with common defaults.
+ *
+ * Features:
+ * - Typed screen registration
+ * - Custom header styling via `headerStyle` prop
+ * - Convenient `screens` array API (alternative to boilerplate Screen tags)
+ *
+ * @example
+ * import { AppStackNavigator } from '@expotesting/navigation';
+ *
+ * export default function App() {
+ *   return (
+ *     <NavigationContainer>
+ *       <AppStackNavigator
+ *         screens={[
+ *           { name: 'Home', component: HomeScreen },
+ *           { name: 'Details', component: DetailsScreen },
+ *         ]}
+ *       />
+ *     </NavigationContainer>
+ *   );
+ * }
+ */
+
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const Stack = createNativeStackNavigator();
+
+export function AppStackNavigator({
+  screens,
+  screenOptions }){
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerBackTitleVisible: false,
+        ...screenOptions }}
+    >
+      {screens.map(({ name, component, options, initialParams }) => (
+        <Stack.Screen
+          key={name}
+          name={name}
+          component={component}
+          options={options}
+          initialParams={initialParams}
+        />
+      ))}
+    </Stack.Navigator>
+  );
+}

package/packages/navigation/src/TabNavigator.jsx

@@ -0,0 +1,44 @@
+/**
+ * AppTabNavigator — wraps @react-navigation/bottom-tabs with icon + label support.
+ *
+ * @example
+ * <AppTabNavigator
+ *   tabs={[
+ *     { name: 'Home', component, icon: 'home' },
+ *     { name: 'Settings', component, icon: 'settings' },
+ *   ]}
+ * />
+ */
+
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const Tab = createBottomTabNavigator();
+
+export function AppTabNavigator({
+  tabs,
+  screenOptions,
+  activeColor = '#6200EE',
+  inactiveColor = '#757575' }){
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        tabBarActiveTintColor: activeColor,
+        tabBarInactiveTintColor: inactiveColor,
+        tabBarStyle: { paddingBottom: 4, height: 56 },
+        headerShown: false,
+        ...screenOptions }}
+    >
+      {tabs.map(({ name, component, options, tabBarIcon }) => (
+        <Tab.Screen
+          key={name}
+          name={name}
+          component={component}
+          options={{
+            ...(tabBarIcon && { tabBarIcon }),
+            ...options }}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+}

package/packages/navigation/src/createAppNavigator.jsx

@@ -0,0 +1,48 @@
+/**
+ * createAppNavigator — factory that composes Stack + Tab + Drawer navigators
+ * based on a declarative config object.
+ *
+ * Supported types: 'stack' | 'tabs' | 'drawer'
+ *
+ * @example
+ * const AppNavigator = createAppNavigator({
+ *   type: 'tabs',
+ *   screens: [
+ *     { name: 'Home', component: HomeScreen },
+ *     { name: 'Profile', component: ProfileScreen },
+ *   ],
+ * });
+ *
+ * export default function App() {
+ *   return (
+ *     <NavigationContainer>
+ *       <AppNavigator />
+ *     </NavigationContainer>
+ *   );
+ * }
+ */
+
+import React from 'react';
+import { AppStackNavigator } from './StackNavigator';
+import { AppTabNavigator } from './TabNavigator';
+import { AppDrawerNavigator } from './DrawerNavigator';
+
+export function createAppNavigator(config): () => React.ReactElement {
+  return function AppNavigator(){
+    switch (config.type) {
+      case 'tabs':
+        return (
+          <AppTabNavigator
+            tabs={config.screens]}
+            activeColor={config.activeColor}
+            inactiveColor={config.inactiveColor}
+          />
+        );
+      case 'drawer':
+        return <AppDrawerNavigator screens={config.screens]} />;
+      case 'stack':
+      default:
+        return <AppStackNavigator screens={config.screens]} />;
+    }
+  };
+}

package/packages/navigation/src/index.js

@@ -0,0 +1,8 @@
+export { AppStackNavigator } from './StackNavigator';
+
+export { AppTabNavigator } from './TabNavigator';
+
+export { AppDrawerNavigator } from './DrawerNavigator';
+
+export { createAppNavigator } from './createAppNavigator';
+

package/packages/navigation/src/types.js

@@ -0,0 +1,18 @@
+/**
+ * Shared navigation types used across stack, tab, and drawer navigators.
+ *
+ * Consumers should augment these types via TypeScript declaration merging
+ * to get fully-typed navigation for their specific routes.
+ *
+ * @example
+ * // In your app:
+ * declare module '@expotesting/navigation' {
+ *   interface AppParamList {
+ *     Home: undefined;
+ *     Profile: { userId: string };
+ *   }
+ * }
+ */
+
+// Generic param list — extend this in your app
+// eslint-disable-next-line @typescript-eslint/no-empty-interface

package/packages/network/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@expotesting/network",
+  "version": "1.0.0",
+  "description": "Axios API client, fetch helpers, and useFetch hook for expotesting",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {},
+  "dependencies": {
+    "axios": "^1.7.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73"
+  },
+  "license": "MIT"
+}

package/packages/network/src/apiClient.js

@@ -0,0 +1,90 @@
+/**
+ * apiClient — pre-configured Axios instance with:
+ * - Request/response interceptors
+ * - Timeout handling
+ * - Consistent error normalisation
+ * - Bearer token injection (call setAuthToken to configure)
+ *
+ * @example
+ * import { apiClient } from '@expotesting/network';
+ *
+ * const posts = await apiClient.get('/posts?_limit=10');
+ * const newPost = await apiClient.post('/posts', { title: 'Hello', body: '...' });
+ * await apiClient.delete('/posts/1');
+ */
+
+import axios, {
+  isAxiosError } from 'axios';
+
+const DEFAULT_BASE_URL = 'https://jsonplaceholder.typicode.com';
+const DEFAULT_TIMEOUT = 10_000;
+
+function createApiClient(baseURL = DEFAULT_BASE_URL){
+  const instance = axios.create({
+    baseURL,
+    timeout: DEFAULT_TIMEOUT,
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json' } });
+
+  // --- Request interceptor: attach auth token if available ---
+  instance.interceptors.request.use(
+    (config) => {
+      const token = getAuthToken();
+      if (token && config.headers) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    },
+    (error) => Promise.reject(error),
+  );
+
+  // --- Response interceptor: normalise errors ---
+  instance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      const apiError= { message: 'An unexpected error occurred' };
+
+      if (isAxiosError(error)) {
+        apiError.status = error.response?.status;
+        apiError.code = error.code;
+
+        if (error.response?.data && typeof error.response.data === 'object') {
+          const data = error.response.data;
+          apiError.message =
+            typeof data['message'] === 'string'
+              ? data['message']
+              : `HTTP ${apiError.status}`;
+        } else if (error.code === 'ECONNABORTED') {
+          apiError.message = 'Request timed out. Please try again.';
+        } else if (!error.response) {
+          apiError.message = 'Network error. Check your connection.';
+        } else {
+          apiError.message = `HTTP ${apiError.status}`;
+        }
+      }
+
+      return Promise.reject(apiError);
+    },
+  );
+
+  return instance;
+}
+
+// In-memory token store — in production use SecureStore or AsyncStorage
+let _authToken= null;
+
+export function setAuthToken(token){
+  _authToken = token;
+}
+
+export function getAuthToken(){
+  return _authToken;
+}
+
+export const apiClient = createApiClient();
+
+/** Create a custom instance pointing to a different base URL. */
+export function createClient(baseURL){
+  return createApiClient(baseURL);
+}

package/packages/network/src/fetchHelpers.js

@@ -0,0 +1,97 @@
+/**
+ * fetchHelpers — lightweight wrappers around the native Fetch API.
+ *
+ * Use these when you prefer Fetch over Axios or need a smaller bundle.
+ *
+ * @example
+ * const posts = await fetchGet<Post[]>('/posts?_limit=5', {
+ *   baseURL: 'https://jsonplaceholder.typicode.com',
+ * });
+ */
+
+class HttpError extends Error {
+  constructor(
+    message,
+    status,
+    statusText,
+  ) {
+    super(message);
+    this.name = 'HttpError';
+  }
+}
+
+export { HttpError };
+
+async function fetchWithTimeout(
+  url,
+  options = {},
+){
+  const { timeout = 10_000, baseURL = '', ...fetchOptions } = options;
+  const fullUrl = url.startsWith('http') ? url : `${baseURL}${url}`;
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(fullUrl, {
+      ...fetchOptions,
+      signal: controller.signal });
+    return response;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+async function parseResponse(response){
+  if (!response.ok) {
+    throw new HttpError(
+      `HTTP ${response.status}: ${response.statusText}`,
+      response.status,
+      response.statusText,
+    );
+  }
+  const contentType = response.headers.get('content-type') ?? '';
+  if (contentType.includes('application/json')) {
+    return response.json();
+  }
+  return response.text();
+}
+
+export async function fetchGet(url, options){
+  const response = await fetchWithTimeout(url, { ...options, method: 'GET' });
+  return parseResponse(response);
+}
+
+export async function fetchPost(
+  url,
+  body,
+  options,
+){
+  const response = await fetchWithTimeout(url, {
+    ...options,
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    body: JSON.stringify(body) });
+  return parseResponse(response);
+}
+
+export async function fetchPut(
+  url,
+  body,
+  options,
+){
+  const response = await fetchWithTimeout(url, {
+    ...options,
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    body: JSON.stringify(body) });
+  return parseResponse(response);
+}
+
+export async function fetchDelete(
+  url,
+  options,
+){
+  const response = await fetchWithTimeout(url, { ...options, method: 'DELETE' });
+  return parseResponse(response);
+}

package/packages/network/src/hooks/useFetch.js

@@ -0,0 +1,56 @@
+/**
+ * useFetch — React hook for fetching data with loading/error/refetch support.
+ *
+ * @example
+ * const { data, loading, error, refetch } = useFetch<Post[]>(
+ *   'https://jsonplaceholder.typicode.com/posts?_limit=10',
+ * );
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useFetch(url, init){
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const abortRef = useRef(null);
+
+  const execute = useCallback(async () => {
+    // Cancel any in-flight request
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(url, { ...init, signal: controller.signal });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const result= await response.json();
+      if (!controller.signal.aborted) {
+        setData(result);
+      }
+    } catch (err) {
+      if (!controller.signal.aborted) {
+        setError(err instanceof Error ? err.message : 'Fetch failed');
+      }
+    } finally {
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url]);
+
+  useEffect(() => {
+    void execute();
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, [execute]);
+
+  return { data, loading, error, refetch: execute };
+}

package/packages/network/src/index.js

@@ -0,0 +1,3 @@
+export { apiClient, createClient, setAuthToken, getAuthToken } from './apiClient';
+export { fetchGet, fetchPost, fetchPut, fetchDelete, HttpError } from './fetchHelpers';
+export { useFetch } from './hooks/useFetch';

package/packages/network/src/types.js

@@ -0,0 +1,4 @@
+/**
+ * Shared types for the network package.
+ */
+

package/packages/state/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@expotesting/state",
+  "version": "1.0.0",
+  "description": "Context API and Redux Toolkit state management for expotesting",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./context": "./src/context/index.ts",
+    "./redux": "./src/redux/index.ts"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.3.0",
+    "react-redux": "^9.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73"
+  },
+  "license": "MIT"
+}

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

@@ -0,0 +1,94 @@
+/**
+ * AuthContext — minimal auth state (authenticated/unauthenticated + user profile).
+ *
+ * In production, replace the mock login with real API calls and secure token storage.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <AuthProvider>
+ *       <RootNavigator />
+ *     </AuthProvider>
+ *   );
+ * }
+ *
+ * function ProfileScreen() {
+ *   const { user, logout } = useAuth();
+ *   return <Text>Hello, {user?.name}</Text>;
+ * }
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState } from 'react';
+
+const AuthContext = createContext(null);
+
+// Simulates an API delay
+function mockLogin(email, password){
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (password.length < 6) {
+        reject(new Error('Password must be at least 6 characters'));
+        return;
+      }
+      resolve({
+        id: '1',
+        name: email.split('@')[0] ?? 'User',
+        email,
+        avatarUrl: `https://api.dicebear.com/7.x/initials/svg?seed=${encodeURIComponent(email)}` });
+    }, 800);
+  });
+}
+
+export function AuthProvider({ children }){
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const login = useCallback(async (email, password) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const loggedInUser = await mockLogin(email, password);
+      setUser(loggedInUser);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    setUser(null);
+    setError(null);
+  }, []);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const value = useMemo(
+    () => ({
+      user,
+      isAuthenticated: user !== null,
+      loading,
+      error,
+      login,
+      logout,
+      clearError }),
+    [user, loading, error, login, logout, clearError],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/** Hook to consume AuthContext — must be used inside <AuthProvider>. */
+export function useAuth(){
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return ctx;
+}