chore: enable examples workflow

.github/workflows/example-apps.yml

@@ -1,13 +1,17 @@
-name: Test Example Apps
+name: Validate Example Apps
 
-on: [workflow_dispatch]
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: ['**']
 
 jobs:
   test-example:
     strategy:
       matrix:
-        node: [18, 20, 22]
-        example: [basic, react-navigation]
+        example: [basic]
+
     name: Test Example
     runs-on: ubuntu-latest
     timeout-minutes: 10
@@ -18,8 +22,14 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 20
           cache: 'yarn'
 
       - name: Install and build
-        run: cd examples/${{ matrix.example }} && yarn install && yarn test
+        run: yarn --cwd examples/${{ matrix.example }} install
+
+      - name: Type Check
+        run: yarn --cwd examples/${{ matrix.example }} typecheck
+
+      - name: Test
+        run: yarn --cwd examples/${{ matrix.example }} test

examples/basic/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@callstack"
+}

examples/basic/components/LoginForm.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View, Text, TextInput, Pressable, ActivityIndicator } from 'react-native';
+import { theme } from '../theme';
 
 type Props = {
   onLoginSuccess: (user: string) => void;
@@ -77,7 +78,7 @@ export function LoginForm({ onLoginSuccess }: Props) {
  * @param password The password to authenticate.
  * @returns username if the username and password are correct, null otherwise.
  */
-async function authUser(username: string, password: string): Promise<string | null> {
+function authUser(username: string, password: string): Promise<string | null> {
   return new Promise((resolve) =>
     setTimeout(() => {
       const hasValidCredentials = username === 'admin' && password === 'admin1';
@@ -98,17 +99,17 @@ const styles = StyleSheet.create({
   },
   textLabel: {
     fontSize: 16,
-    color: '#444',
+    color: theme.colors.label,
   },
   textInput: {
     fontSize: 20,
     padding: 8,
     marginVertical: 8,
-    borderColor: 'black',
+    borderColor: theme.colors.text,
     borderWidth: 1,
   },
   button: {
-    backgroundColor: '#3256a8',
+    backgroundColor: theme.colors.button,
     padding: 16,
     alignItems: 'center',
     justifyContent: 'center',
@@ -118,10 +119,10 @@ const styles = StyleSheet.create({
   buttonText: {
     fontSize: 20,
     fontWeight: '600',
-    color: 'white',
+    color: theme.colors.buttonText,
   },
   validator: {
-    color: 'red',
+    color: theme.colors.validator,
     fontSize: 18,
     marginTop: 8,
   },

examples/basic/package.json

@@ -7,6 +7,7 @@
     "web": "expo start --web",
     "eject": "expo eject",
     "test": "jest",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -20,7 +21,10 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@testing-library/react-native": "^12.4.0",
+    "@types/eslint": "^8.56.10",
+    "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
+    "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "react-test-renderer": "18.2.0",
     "typescript": "^5.3.0"

examples/basic/theme.ts

@@ -0,0 +1,32 @@
+export const theme = {
+  colors: {
+    button: '#3256a8',
+    buttonText: '#ffffff',
+    validator: '#d0421b',
+    text: '#333333',
+    label: '#666666',
+  },
+  spacing: {
+    s: 8,
+    m: 16,
+    l: 24,
+    xl: 40,
+  },
+  textVariants: {
+    header: {
+      fontSize: 32,
+      fontFamily: 'System',
+      color: 'text',
+    },
+    title: {
+      fontSize: 24,
+      fontFamily: 'System',
+      color: 'text',
+    },
+    body: {
+      fontSize: 16,
+      fontFamily: 'System',
+      color: 'text',
+    },
+  },
+};