expotesting2 4.1.0

package/packages/core/src/components/Button.jsx

@@ -0,0 +1,92 @@
+/**
+ * Button — accessible pressable button with multiple visual variants.
+ *
+ * Variants: 'filled' | 'outlined' | 'ghost'
+ * Sizes:    'sm' | 'md' | 'lg'
+ *
+ * @example
+ * <Button onPress={handleSubmit} loading={submitting}>Submit</Button>
+ * <Button variant="outlined" size="sm" onPress={cancel}>Cancel</Button>
+ */
+
+import React from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text } from 'react-native';
+import { palette, radius, spacing, typography } from '../theme';
+
+export function Button({
+  variant = 'filled',
+  size = 'md',
+  loading = false,
+  fullWidth = false,
+  disabled,
+  style,
+  labelStyle,
+  children,
+  ...rest
+}){
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        styles.base,
+        sizeStyles[size],
+        variantStyles[variant].button,
+        isDisabled && styles.disabled,
+        fullWidth && styles.fullWidth,
+        pressed && !isDisabled && styles.pressed,
+        style,
+      ]}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      {...rest}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={variant === 'filled' ? palette.onPrimary : palette.primary}
+        />
+      ) : (
+        <Text style={[styles.label, variantStyles[variant].label, labelStyle]}>
+          {children}
+        </Text>
+      )}
+    </Pressable>
+  );
+}
+
+const sizeStyles= {
+  sm: { paddingVertical: spacing.xs, paddingHorizontal: spacing.sm, minHeight: 36 },
+  md: { paddingVertical: spacing.sm, paddingHorizontal: spacing.md, minHeight: 44 },
+  lg: { paddingVertical: spacing.md, paddingHorizontal: spacing.lg, minHeight: 52 } };
+
+const variantStyles = {
+  filled: {
+    button: { backgroundColor: palette.primary, borderWidth: 0 },
+    label: { color: palette.onPrimary } },
+  outlined: {
+    button: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: palette.primary },
+    label: { color: palette.primary } },
+  ghost: {
+    button: { backgroundColor: 'transparent', borderWidth: 0 },
+    label: { color: palette.primary } } };
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: radius.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row' },
+  label: {
+    ...typography.button },
+  disabled: {
+    opacity: 0.4 },
+  pressed: {
+    opacity: 0.8 },
+  fullWidth: {
+    width: '100%' } });

package/packages/core/src/components/Card.jsx

@@ -0,0 +1,47 @@
+/**
+ * Card — elevated surface for grouping related content.
+ *
+ * @example
+ * <Card title="Profile">
+ *   <Text>Content here</Text>
+ * </Card>
+ */
+
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { palette, radius, shadows, spacing, typography } from '../theme';
+
+export function Card({
+  title,
+  subtitle,
+  elevation = 'sm',
+  style,
+  children }){
+  return (
+    <View style={[styles.card, elevation !== 'none' && shadows[elevation], style]}>
+      {(title || subtitle) && (
+        <View style={styles.header}>
+          {title && <Text style={styles.title}>{title}</Text>}
+          {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+        </View>
+      )}
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: palette.surface,
+    borderRadius: radius.md,
+    padding: spacing.md,
+    marginVertical: spacing.sm },
+  header: {
+    marginBottom: spacing.sm },
+  title: {
+    ...typography.h3,
+    color: palette.onSurface },
+  subtitle: {
+    ...typography.caption,
+    color: palette.grey700,
+    marginTop: 2 } });

package/packages/core/src/components/Container.jsx

@@ -0,0 +1,61 @@
+/**
+ * Container — full-width screen wrapper with consistent horizontal padding.
+ * Supports safe area awareness via `safe` prop (requires react-native-safe-area-context).
+ *
+ * @example
+ * <Container safe>
+ *   <Text>Hello</Text>
+ * </Container>
+ */
+
+import React from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  View } from 'react-native';
+import { spacing, palette } from '../theme';
+
+export function Container({
+  scroll = false,
+  padded = true,
+  backgroundColor = palette.background,
+  style,
+  children,
+  scrollProps,
+  ...rest
+}){
+  const containerStyle = StyleSheet.flatten([
+    styles.base,
+    { backgroundColor },
+    padded && styles.padded,
+    style,
+  ]);
+
+  if (scroll) {
+    return (
+      <ScrollView
+        style={[styles.base, { backgroundColor }]}
+        contentContainerStyle={[styles.scrollContent, padded && styles.padded]}
+        showsVerticalScrollIndicator={false}
+        {...scrollProps}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+
+  return (
+    <View style={containerStyle} {...rest}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1 },
+  padded: {
+    paddingHorizontal: spacing.md },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: spacing.xl } });

package/packages/core/src/components/Input.jsx

@@ -0,0 +1,83 @@
+/**
+ * Input — labeled text input with error/helper text.
+ *
+ * @example
+ * <Input label="Email" value={email} onChangeText={setEmail} error={errors.email} />
+ */
+
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View } from 'react-native';
+import { palette, radius, spacing, typography } from '../theme';
+
+export function Input({
+  label,
+  error,
+  helperText,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}){
+  const [focused, setFocused] = useState(false);
+
+  const borderColor = error
+    ? palette.error
+    : focused
+    ? palette.primary
+    : palette.grey400;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <TextInput
+        style={[styles.input, { borderColor }, style]}
+        placeholderTextColor={palette.grey400}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        accessibilityLabel={label}
+        {...rest}
+      />
+      {error ? (
+        <Text style={styles.error}>{error}</Text>
+      ) : helperText ? (
+        <Text style={styles.helper}>{helperText}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: spacing.xs },
+  label: {
+    ...typography.caption,
+    color: palette.grey700,
+    marginBottom: 4,
+    fontWeight: '600' },
+  input: {
+    height: 48,
+    borderWidth: 1.5,
+    borderRadius: radius.sm,
+    paddingHorizontal: spacing.sm,
+    ...typography.body,
+    color: palette.onBackground,
+    backgroundColor: palette.surface },
+  error: {
+    ...typography.caption,
+    color: palette.error,
+    marginTop: 4 },
+  helper: {
+    ...typography.caption,
+    color: palette.grey700,
+    marginTop: 4 } });

package/packages/core/src/components/List.jsx

@@ -0,0 +1,80 @@
+/**
+ * List — typed FlatList wrapper with built-in empty/loading/error states.
+ *
+ * @example
+ * <List
+ *   data={items}
+ *   renderItem={({ item }) => <Text>{item.name}</Text>}
+ *   keyExtractor={(item) => item.id}
+ *   loading={isLoading}
+ *   emptyMessage="No items found"
+ * />
+ */
+
+import React from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  View } from 'react-native';
+import { palette, spacing, typography } from '../theme';
+
+// Generic FlatList wrapper — must be a function component (not arrow) for generic JSX
+export function List({
+  data,
+  loading,
+  error,
+  emptyMessage = 'No items.',
+  containerStyle,
+  ...flatListProps
+}){
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color={palette.primary} />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text style={styles.errorText}>{error}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      data={data ?? []}
+      style={containerStyle}
+      contentContainerStyle={(!data || data.length === 0) ? styles.emptyContent : undefined}
+      ListEmptyComponent={
+        <View style={styles.center}>
+          <Text style={styles.emptyText}>{emptyMessage}</Text>
+        </View>
+      }
+      showsVerticalScrollIndicator={false}
+      {...flatListProps}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.xl },
+  emptyContent: {
+    flexGrow: 1 },
+  emptyText: {
+    ...typography.body,
+    color: palette.grey700,
+    textAlign: 'center' },
+  errorText: {
+    ...typography.body,
+    color: palette.error,
+    textAlign: 'center',
+    paddingHorizontal: spacing.md } });

package/packages/core/src/components/index.js

@@ -0,0 +1,9 @@
+export { Container } from './Container';
+
+export { Card } from './Card';
+
+export { Input } from './Input';
+
+export { Button } from './Button';
+
+export { List } from './List';

package/packages/core/src/hooks/index.js

@@ -0,0 +1,5 @@
+export { useToggle } from './useToggle';
+
+export { useCounter } from './useCounter';
+
+export { useAsync } from './useAsync';

package/packages/core/src/hooks/useAsync.js

@@ -0,0 +1,60 @@
+/**
+ * useAsync — wraps an async function with loading/error/data state.
+ * The function is automatically executed once on mount (unless lazy=true).
+ *
+ * @example
+ * const { data, loading, error, execute } = useAsync(() => fetchUser(id), [id]);
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useAsync(
+  asyncFn,
+  options = {},
+){
+  const { lazy = false } = options;
+
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(!lazy);
+  const [error, setError] = useState(null);
+
+  // Track whether the component is still mounted to avoid state updates after unmount
+  const mountedRef = useRef(true);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const execute = useCallback(async () => {
+    if (!mountedRef.current) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await asyncFn();
+      if (mountedRef.current) {
+        setData(result);
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    } finally {
+      if (mountedRef.current) {
+        setLoading(false);
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [asyncFn]);
+
+  useEffect(() => {
+    if (!lazy) {
+      void execute();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lazy]);
+
+  return { data, loading, error, execute };
+}

package/packages/core/src/hooks/useCounter.js

@@ -0,0 +1,36 @@
+/**
+ * useCounter — numeric counter with bounded increment/decrement.
+ *
+ * @example
+ * const { count, increment, decrement, reset, set } = useCounter(0, 1);
+ */
+
+import { useCallback, useState } from 'react';
+
+export function useCounter(initial = 0, options = {}){
+  const { step = 1, min, max } = options;
+  const [count, setCount] = useState(initial);
+
+  const increment = useCallback(() => {
+    setCount((c) => (max !== undefined ? Math.min(max, c + step) : c + step));
+  }, [step, max]);
+
+  const decrement = useCallback(() => {
+    setCount((c) => (min !== undefined ? Math.max(min, c - step) : c - step));
+  }, [step, min]);
+
+  const reset = useCallback(() => setCount(initial), [initial]);
+
+  const set = useCallback(
+    (value) => {
+      const clamped =
+        min !== undefined && max !== undefined
+          ? Math.min(max, Math.max(min, value))
+          : value;
+      setCount(clamped);
+    },
+    [min, max],
+  );
+
+  return { count, increment, decrement, reset, set };
+}

package/packages/core/src/hooks/useToggle.js

@@ -0,0 +1,18 @@
+/**
+ * useToggle — boolean toggle state with named setters.
+ *
+ * @example
+ * const { value, toggle, setTrue, setFalse } = useToggle(false);
+ */
+
+import { useCallback, useState } from 'react';
+
+export function useToggle(initial = false){
+  const [value, setValue] = useState(initial);
+
+  const toggle = useCallback(() => setValue((v) => !v), []);
+  const setTrue = useCallback(() => setValue(true), []);
+  const setFalse = useCallback(() => setValue(false), []);
+
+  return { value, toggle, setTrue, setFalse };
+}

package/packages/core/src/index.js

@@ -0,0 +1,5 @@
+// @expotesting/core — central barrel export
+export * from './hooks/index';
+export * from './components/index';
+export * from './utils/index';
+export * from './theme/index';

package/packages/core/src/theme/index.js

@@ -0,0 +1,67 @@
+/**
+ * Design tokens — extend or override via ThemeProvider in @expotesting/state.
+ */
+
+export const palette = {
+  primary: '#6200EE',
+  primaryVariant: '#3700B3',
+  secondary: '#03DAC6',
+  background: '#FFFFFF',
+  surface: '#FFFFFF',
+  error: '#B00020',
+  onPrimary: '#FFFFFF',
+  onSecondary: '#000000',
+  onBackground: '#000000',
+  onSurface: '#000000',
+  onError: '#FFFFFF',
+  // neutrals
+  grey100: '#F5F5F5',
+  grey200: '#EEEEEE',
+  grey400: '#BDBDBD',
+  grey700: '#616161',
+  grey900: '#212121' };
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48 };
+
+export const radius = {
+  sm: 4,
+  md: 8,
+  lg: 16,
+  full: 9999 };
+
+export const typography = {
+  h1: { fontSize: 32, fontWeight: '700', lineHeight: 40 },
+  h2: { fontSize: 24, fontWeight: '700', lineHeight: 32 },
+  h3: { fontSize: 20, fontWeight: '600', lineHeight: 28 },
+  body: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
+  caption: { fontSize: 12, fontWeight: '400', lineHeight: 16 },
+  button: { fontSize: 14, fontWeight: '600', letterSpacing: 0.5 } };
+
+export const shadows = {
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2 },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    elevation: 4 },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 8 } };
+
+export const theme = { palette, spacing, radius, typography, shadows };
+

package/packages/core/src/utils/helpers.js

@@ -0,0 +1,93 @@
+/** Generic type guard — narrows `unknown` to a typed value. */
+export function isError(value){
+  return value instanceof Error;
+}
+
+/** Safely parse JSON — returns null on failure instead of throwing. */
+export function safeJsonParse(raw){
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Throttle a function — prevents it from being called more than once per `limit` ms.
+ * Useful for expensive event handlers (e.g., scroll listeners).
+ */
+export function throttle(
+  fn,
+  limit,
+) {
+  let lastCall = 0;
+  return (...args) => {
+    const now = Date.now();
+    if (now - lastCall >= limit) {
+      lastCall = now;
+      fn(...args);
+    }
+  };
+}
+
+/**
+ * Debounce a function — delays execution until `wait` ms after the last call.
+ * Useful for search inputs, form validation, etc.
+ */
+export function debounce(
+  fn,
+  wait,
+) {
+  let timer= null;
+
+  const debounced = (...args) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), wait);
+  };
+
+  debounced.cancel = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  return debounced;
+}
+
+/** Formats a date to a human-readable string (locale-aware). */
+export function formatDate(date, locale = 'en-US'){
+  return new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric' }).format(date);
+}
+
+/** Clamps a number between min and max. */
+export function clamp(value, min, max){
+  return Math.min(max, Math.max(min, value));
+}
+
+/** Generates a random alphanumeric ID (not cryptographically secure). */
+export function generateId(length = 8){
+  return Math.random().toString(36).substring(2, 2 + length);
+}
+
+/** Capitalises the first letter of a string. */
+export function capitalise(str){
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/** Groups an array of objects by a key. */
+export function groupBy(
+  array,
+  key,
+){
+  return array.reduce((acc, item) => {
+    const group = String(item[key]);
+    if (!acc[group]) acc[group] = [];
+    acc[group].push(item);
+    return acc;
+  }, {});
+}

package/packages/core/src/utils/index.js

@@ -0,0 +1,10 @@
+export {
+  isError,
+  safeJsonParse,
+  throttle,
+  debounce,
+  formatDate,
+  clamp,
+  generateId,
+  capitalise,
+  groupBy } from './helpers';

package/packages/device/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@expotesting/device",
+  "version": "1.0.0",
+  "description": "Camera, gallery, and location hooks using Expo APIs",
+  "main": "src/index.js",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {},
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.73",
+    "expo-camera": ">=15",
+    "expo-image-picker": ">=15",
+    "expo-location": ">=17"
+  },
+  "devDependencies": {
+    "expo-camera": "*",
+    "expo-image-picker": "*",
+    "expo-location": "*"
+  },
+  "license": "MIT"
+}