From fc6dc236bddbdbe465913f265714d20e6449d5c9 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Sat, 10 Oct 2026 13:07:26 -0400 Subject: [PATCH 1/2] feat: add interactive controls (button, switch, text input) Tap button with a counter, a Dark accent switch and a name input that echoes back, so agents can tap and type in the tutorial. Colors live in theme.js. --- App.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- theme.js | 6 +++++ 2 files changed, 77 insertions(+), 5 deletions(-) diff --git a/App.js b/App.js index 9feed7a..a65e228 100644 --- a/App.js +++ b/App.js @@ -1,21 +1,79 @@ -import { useEffect } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { useEffect, useState } from 'react'; +import { KeyboardAvoidingView, Platform, Pressable, StyleSheet, Switch, Text, TextInput, View } from 'react-native'; -import { backgroundColor, titleColor } from './theme'; +import { + accentColor, + backgroundColor, + buttonColor, + buttonTextColor, + darkAccentColor, + inputBorderColor, + titleColor, +} from './theme'; if (__DEV__) console.info('[stim:readiness] pending'); export default function App() { + const [count, setCount] = useState(0); + const [dark, setDark] = useState(false); + const [name, setName] = useState(''); + useEffect(() => { console.log(`[stim:tutorial] started title=${titleColor} background=${backgroundColor}`); if (__DEV__) console.info('[stim:readiness] ready'); }, []); return ( - + Stim Tutorial Edit theme.js and save. - + + + + Tapped {count} {count === 1 ? 'time' : 'times'} + + + Hello, {name.trim() || 'world'} + + + + setCount((n) => n + 1)} + style={[styles.button, { backgroundColor: buttonColor }]} + > + Tap me + + + + Dark accent + + + + + ); } @@ -23,4 +81,12 @@ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 }, title: { fontSize: 44, fontWeight: '700', marginBottom: 8 }, subtitle: { fontSize: 16, color: '#6b7280' }, + card: { alignSelf: 'stretch', borderRadius: 12, padding: 16, marginTop: 32, gap: 4 }, + cardText: { fontSize: 18, color: '#1f2937' }, + cardTextDark: { color: '#ffffff' }, + button: { alignSelf: 'stretch', borderRadius: 12, paddingVertical: 14, marginTop: 16, alignItems: 'center' }, + buttonText: { fontSize: 18, fontWeight: '600' }, + row: { alignSelf: 'stretch', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 }, + label: { fontSize: 18, color: '#1f2937' }, + input: { alignSelf: 'stretch', borderWidth: 1, borderRadius: 12, padding: 12, fontSize: 18, marginTop: 16 }, }); diff --git a/theme.js b/theme.js index 4067899..406aba5 100644 --- a/theme.js +++ b/theme.js @@ -1,2 +1,8 @@ export const titleColor = '#1f2937'; export const backgroundColor = '#ffffff'; + +export const buttonColor = '#2563eb'; +export const buttonTextColor = '#ffffff'; +export const accentColor = '#e0e7ff'; +export const darkAccentColor = '#312e81'; +export const inputBorderColor = '#d1d5db'; From 579ea6a091b0781ef40a7c82b6b2e005900be7ed Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Sat, 10 Oct 2026 13:08:53 -0400 Subject: [PATCH 2/2] feat: theme text colors, pressed state and name capitalization --- App.js | 24 ++++++++++++++---------- theme.js | 3 +++ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/App.js b/App.js index a65e228..4326264 100644 --- a/App.js +++ b/App.js @@ -7,7 +7,10 @@ import { buttonColor, buttonTextColor, darkAccentColor, + darkTextColor, inputBorderColor, + mutedColor, + textColor, titleColor, } from './theme'; @@ -29,16 +32,16 @@ export default function App() { style={[styles.container, { backgroundColor }]} > Stim Tutorial - Edit theme.js and save. + Edit theme.js and save. - + Tapped {count} {count === 1 ? 'time' : 'times'} - + Hello, {name.trim() || 'world'} @@ -48,13 +51,13 @@ export default function App() { accessibilityRole="button" accessibilityLabel="Tap me" onPress={() => setCount((n) => n + 1)} - style={[styles.button, { backgroundColor: buttonColor }]} + style={({ pressed }) => [styles.button, { backgroundColor: buttonColor, opacity: pressed ? 0.7 : 1 }]} > Tap me - Dark accent + Dark accent ); @@ -80,13 +85,12 @@ export default function App() { const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 }, title: { fontSize: 44, fontWeight: '700', marginBottom: 8 }, - subtitle: { fontSize: 16, color: '#6b7280' }, + subtitle: { fontSize: 16 }, card: { alignSelf: 'stretch', borderRadius: 12, padding: 16, marginTop: 32, gap: 4 }, - cardText: { fontSize: 18, color: '#1f2937' }, - cardTextDark: { color: '#ffffff' }, + cardText: { fontSize: 18 }, button: { alignSelf: 'stretch', borderRadius: 12, paddingVertical: 14, marginTop: 16, alignItems: 'center' }, buttonText: { fontSize: 18, fontWeight: '600' }, row: { alignSelf: 'stretch', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 }, - label: { fontSize: 18, color: '#1f2937' }, + label: { fontSize: 18 }, input: { alignSelf: 'stretch', borderWidth: 1, borderRadius: 12, padding: 12, fontSize: 18, marginTop: 16 }, }); diff --git a/theme.js b/theme.js index 406aba5..9b16e27 100644 --- a/theme.js +++ b/theme.js @@ -6,3 +6,6 @@ export const buttonTextColor = '#ffffff'; export const accentColor = '#e0e7ff'; export const darkAccentColor = '#312e81'; export const inputBorderColor = '#d1d5db'; +export const textColor = '#1f2937'; +export const mutedColor = '#6b7280'; +export const darkTextColor = '#ffffff';