@croacroa/react-native-template 1.0.0

package/maestro/README.md

@@ -0,0 +1,113 @@
+# Maestro E2E Tests
+
+This directory contains end-to-end tests using [Maestro](https://maestro.mobile.dev/).
+
+## Setup
+
+### Install Maestro
+
+```bash
+# macOS
+brew install maestro
+
+# Or using curl
+curl -Ls "https://get.maestro.mobile.dev" | bash
+```
+
+### Prerequisites
+
+- iOS Simulator or Android Emulator running
+- App built and installed on the device/emulator
+
+## Running Tests
+
+### Run all tests
+
+```bash
+maestro test maestro/flows/
+```
+
+### Run a specific test
+
+```bash
+maestro test maestro/flows/login.yaml
+```
+
+### Run with a specific app ID
+
+```bash
+APP_ID=com.yourcompany.app maestro test maestro/flows/
+```
+
+### Run in CI mode
+
+```bash
+maestro test --format junit --output results.xml maestro/flows/
+```
+
+## Test Structure
+
+```
+maestro/
+├── config.yaml          # Global configuration
+├── README.md            # This file
+└── flows/
+    ├── login.yaml       # Login flow tests
+    ├── register.yaml    # Registration flow tests
+    ├── navigation.yaml  # Navigation tests
+    └── offline.yaml     # Offline mode tests
+```
+
+## Writing Tests
+
+### Basic test structure
+
+```yaml
+appId: ${APP_ID}
+name: My Test
+tags:
+  - smoke
+---
+- launchApp
+- tapOn: "Button Text"
+- assertVisible: "Expected Text"
+```
+
+### Common commands
+
+- `launchApp` - Launch the app
+- `tapOn` - Tap on an element
+- `inputText` - Enter text
+- `assertVisible` - Assert element is visible
+- `scrollUntilVisible` - Scroll until element is found
+- `waitForAnimationToEnd` - Wait for animations
+- `back` - Press back button
+
+### Tips
+
+1. Use `waitForAnimationToEnd` after navigation
+2. Use `clearState: true` in `launchApp` for clean tests
+3. Use `optional: true` for elements that may not always appear
+4. Use tags to organize and filter tests
+
+## CI Integration
+
+### GitHub Actions example
+
+```yaml
+- name: Run E2E Tests
+  run: |
+    maestro test --format junit --output results.xml maestro/flows/
+
+- name: Upload Test Results
+  uses: actions/upload-artifact@v3
+  with:
+    name: e2e-results
+    path: results.xml
+```
+
+## Resources
+
+- [Maestro Documentation](https://maestro.mobile.dev/)
+- [CLI Reference](https://maestro.mobile.dev/reference/cli)
+- [Command Reference](https://maestro.mobile.dev/reference/commands)

package/maestro/config.yaml

@@ -0,0 +1,35 @@
+# Maestro Configuration
+# https://maestro.mobile.dev/reference/configuration
+
+# Default app ID (can be overridden with env vars)
+appId: com.croacroa.app
+
+# Environment variables
+env:
+  APP_ID: ${APP_ID:-com.croacroa.app}
+  API_URL: ${API_URL:-http://localhost:3000}
+
+# Test execution settings
+executionOrder:
+  continueOnFailure: false
+  retryFailedTests: 1
+
+# Screenshots
+screenshots:
+  enabled: true
+  directory: ./maestro/screenshots
+
+# Video recording
+video:
+  enabled: true
+  directory: ./maestro/videos
+
+# Timeouts
+timeouts:
+  launchApp: 30000
+  waitForAnimationToEnd: 5000
+
+# Device settings
+device:
+  locale: en_US
+  orientation: portrait

package/maestro/flows/login.yaml

@@ -0,0 +1,62 @@
+appId: ${APP_ID}
+name: Login Flow
+tags:
+  - auth
+  - smoke
+---
+# Login Flow Test
+# Tests the complete login experience
+
+- launchApp:
+    clearState: true
+
+# Wait for app to load
+- waitForAnimationToEnd
+
+# Verify we're on the login screen
+- assertVisible: "Sign In"
+- assertVisible: "Sign in to continue"
+
+# Test empty form submission
+- tapOn: "Sign In"
+- assertVisible: "required"
+
+# Enter invalid email
+- tapOn:
+    text: "Email"
+- inputText: "invalid-email"
+- tapOn: "Sign In"
+- assertVisible: "valid email"
+
+# Clear and enter valid credentials
+- clearText
+- inputText: "test@example.com"
+
+# Enter password
+- tapOn:
+    text: "Password"
+- inputText: "password123"
+
+# Toggle password visibility
+- tapOn:
+    id: "password-toggle"
+- assertVisible: "password123"
+- tapOn:
+    id: "password-toggle"
+
+# Submit the form
+- tapOn:
+    text: "Sign In"
+    index: 1
+
+# Wait for loading
+- waitForAnimationToEnd:
+    timeout: 5000
+
+# Verify successful login (should see home screen)
+- assertVisible: "Welcome back"
+
+# Verify we're on the authenticated section
+- assertVisible:
+    text: "Home"
+    optional: true

package/maestro/flows/navigation.yaml

@@ -0,0 +1,68 @@
+appId: ${APP_ID}
+name: Navigation Flow
+tags:
+  - navigation
+  - smoke
+---
+# Navigation Flow Test
+# Tests navigation between main screens
+
+- launchApp:
+    clearState: true
+
+# Login first
+- tapOn:
+    text: "Email"
+- inputText: "test@example.com"
+- tapOn:
+    text: "Password"
+- inputText: "password123"
+- tapOn:
+    text: "Sign In"
+    index: 1
+- waitForAnimationToEnd:
+    timeout: 5000
+
+# Verify we're on home
+- assertVisible: "Home"
+
+# Navigate to Profile
+- tapOn: "Profile"
+- waitForAnimationToEnd
+- assertVisible: "Profile"
+- assertVisible: "test@example.com"
+
+# Navigate to Settings
+- tapOn: "Settings"
+- waitForAnimationToEnd
+- assertVisible: "Settings"
+- assertVisible: "Appearance"
+- assertVisible: "Theme"
+
+# Test theme toggle
+- tapOn: "Theme"
+- waitForAnimationToEnd
+- assertVisible: "Dark"
+- tapOn: "Dark"
+- waitForAnimationToEnd
+
+# Go back
+- back
+- assertVisible: "Settings"
+
+# Navigate back to Home
+- tapOn: "Home"
+- waitForAnimationToEnd
+- assertVisible: "Home"
+
+# Test sign out
+- tapOn: "Profile"
+- waitForAnimationToEnd
+- scrollUntilVisible:
+    element: "Sign Out"
+    direction: DOWN
+- tapOn: "Sign Out"
+- waitForAnimationToEnd
+
+# Verify we're back on login
+- assertVisible: "Sign In"

package/maestro/flows/offline.yaml

@@ -0,0 +1,60 @@
+appId: ${APP_ID}
+name: Offline Mode Flow
+tags:
+  - offline
+  - edge-case
+---
+# Offline Mode Test
+# Tests app behavior when offline
+
+- launchApp:
+    clearState: true
+
+# Login while online
+- tapOn:
+    text: "Email"
+- inputText: "test@example.com"
+- tapOn:
+    text: "Password"
+- inputText: "password123"
+- tapOn:
+    text: "Sign In"
+    index: 1
+- waitForAnimationToEnd:
+    timeout: 5000
+
+# Verify login successful
+- assertVisible: "Home"
+
+# Enable airplane mode (simulates offline)
+- setAirplaneMode:
+    enabled: true
+
+# Wait for offline detection
+- waitForAnimationToEnd:
+    timeout: 3000
+
+# Verify offline indicator appears
+- assertVisible:
+    text: "offline"
+    optional: true
+
+# Try to perform an action that requires network
+- tapOn: "Profile"
+- waitForAnimationToEnd
+
+# The cached data should still be visible
+- assertVisible: "Profile"
+
+# Disable airplane mode
+- setAirplaneMode:
+    enabled: false
+
+# Wait for reconnection
+- waitForAnimationToEnd:
+    timeout: 5000
+
+# Verify back online
+- assertVisible:
+    text: "online"
+    optional: true

package/maestro/flows/register.yaml

@@ -0,0 +1,94 @@
+appId: ${APP_ID}
+name: Registration Flow
+tags:
+  - auth
+  - smoke
+---
+# Registration Flow Test
+# Tests the complete signup experience
+
+- launchApp:
+    clearState: true
+
+# Navigate to registration
+- tapOn: "Sign Up"
+- waitForAnimationToEnd
+
+# Verify we're on register screen
+- assertVisible: "Create Account"
+- assertVisible: "Join us today"
+
+# Test validation - empty form
+- scrollUntilVisible:
+    element: "Sign Up"
+    direction: DOWN
+- tapOn:
+    text: "Sign Up"
+    index: 1
+- assertVisible: "required"
+
+# Enter name
+- tapOn:
+    text: "Name"
+- inputText: "Test User"
+
+# Enter email
+- tapOn:
+    text: "Email"
+- inputText: "newuser@example.com"
+
+# Enter password (too short)
+- tapOn:
+    text: "Password"
+    index: 0
+- inputText: "short"
+- tapOn:
+    text: "Confirm Password"
+- inputText: "short"
+
+# Try to submit - should show password length error
+- tapOn:
+    text: "Sign Up"
+    index: 1
+- assertVisible: "8 characters"
+
+# Fix password
+- tapOn:
+    text: "Password"
+    index: 0
+- clearText
+- inputText: "SecurePass123"
+
+# Enter mismatched confirm password
+- tapOn:
+    text: "Confirm Password"
+- clearText
+- inputText: "DifferentPass123"
+
+- tapOn:
+    text: "Sign Up"
+    index: 1
+- assertVisible: "match"
+
+# Fix confirm password
+- tapOn:
+    text: "Confirm Password"
+- clearText
+- inputText: "SecurePass123"
+
+# Submit the form
+- tapOn:
+    text: "Sign Up"
+    index: 1
+
+# Wait for registration
+- waitForAnimationToEnd:
+    timeout: 5000
+
+# Verify successful registration
+- assertVisible: "Account created"
+
+# Verify we're logged in
+- assertVisible:
+    text: "Home"
+    optional: true

package/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./global.css" });

package/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "@croacroa/react-native-template",
+  "version": "1.0.0",
+  "description": "Production-ready React Native template with Expo, authentication, i18n, offline support, and more",
+  "main": "expo-router/entry",
+  "author": "Croacroa <contact@croacroa.dev>",
+  "license": "MIT",
+  "homepage": "https://github.com/croacroa-dev-team/template-react-native#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/croacroa-dev-team/template-react-native.git"
+  },
+  "bugs": {
+    "url": "https://github.com/croacroa-dev-team/template-react-native/issues"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "template",
+    "typescript",
+    "nativewind",
+    "tailwind",
+    "zustand",
+    "react-query",
+    "authentication",
+    "i18n",
+    "offline",
+    "biometrics",
+    "push-notifications",
+    "sentry",
+    "production-ready"
+  ],
+  "scripts": {
+    "start": "expo start",
+    "dev": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "build:dev": "eas build --profile development",
+    "build:preview": "eas build --profile preview",
+    "build:prod": "eas build --profile production",
+    "submit:ios": "eas submit --platform ios",
+    "submit:android": "eas submit --platform android",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,json,md}\"",
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.0",
+    "@gorhom/bottom-sheet": "^4.6.0",
+    "@hookform/resolvers": "^3.6.0",
+    "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-native-community/netinfo": "^11.3.2",
+    "@sentry/react-native": "^7.8.0",
+    "@tanstack/query-async-storage-persister": "^5.51.1",
+    "@tanstack/react-query": "^5.51.1",
+    "@tanstack/react-query-persist-client": "^5.51.1",
+    "bottleneck": "^2.19.5",
+    "burnt": "^0.12.2",
+    "clsx": "^2.1.1",
+    "expo": "~52.0.0",
+    "expo-constants": "~17.0.0",
+    "expo-dev-client": "~5.0.0",
+    "expo-device": "~7.0.0",
+    "expo-font": "~13.0.0",
+    "expo-image": "~2.0.0",
+    "expo-linking": "~7.0.0",
+    "expo-local-authentication": "~15.0.0",
+    "expo-localization": "~15.0.0",
+    "expo-notifications": "~0.29.0",
+    "expo-router": "~4.0.0",
+    "expo-secure-store": "~14.0.0",
+    "expo-splash-screen": "~0.29.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-system-ui": "~4.0.0",
+    "expo-updates": "~0.26.0",
+    "i18next": "^23.0.0",
+    "nativewind": "^4.0.1",
+    "react": "18.3.1",
+    "react-hook-form": "^7.52.1",
+    "react-i18next": "^14.0.0",
+    "react-native": "0.76.0",
+    "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.0.0",
+    "react-native-worklets": "^0.7.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.4",
+    "zod": "^3.23.8",
+    "zustand": "^4.5.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@storybook/addon-essentials": "^8.1.0",
+    "@storybook/addon-react-native-web": "^0.0.24",
+    "@storybook/react": "^8.1.0",
+    "@storybook/react-webpack5": "^8.1.0",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.5.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-expo": "^8.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-expo": "~52.0.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "storybook": "^8.1.0",
+    "typescript": "^5.3.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
+  "files": [
+    "app",
+    "assets",
+    "components",
+    "constants",
+    "hooks",
+    "i18n",
+    "services",
+    "stores",
+    "types",
+    "utils",
+    "scripts",
+    "maestro",
+    "docs",
+    ".storybook",
+    ".github",
+    "__tests__",
+    "app.config.ts",
+    "babel.config.js",
+    "eas.json",
+    "global.css",
+    "jest.config.js",
+    "metro.config.js",
+    "nativewind-env.d.ts",
+    "tailwind.config.js",
+    "tsconfig.json",
+    ".env.example",
+    ".eslintrc.js",
+    ".prettierrc",
+    ".gitignore",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}