@codeyam/codeyam-cli 0.1.0-staging.4c0c3c9 → 0.1.0-staging.5370992

package/codeyam-cli/templates/expo-react-native/MOBILE_SETUP.md

@@ -0,0 +1,204 @@
+# Expo + React Native Setup
+
+## Development
+
+This project uses **Expo** with **Expo Router** for file-based navigation and **NativeWind** (Tailwind CSS) for styling.
+
+### Web Development (used by CodeYam)
+
+```bash
+npm run dev
+```
+
+This starts the Expo web dev server. CodeYam uses this to preview your app and take screenshots.
+
+### Mobile Development
+
+```bash
+# iOS Simulator
+npm run ios
+
+# Android Emulator
+npm run android
+
+# Start Expo dev server (pick platform from menu)
+npm start
+```
+
+## Project Structure
+
+```
+app/                    # Expo Router file-based routes
+  _layout.tsx           # Root layout (status bar, navigation)
+  (tabs)/               # Tab-based navigation group
+    _layout.tsx         # Tab bar configuration
+    index.tsx           # Home tab
+    settings.tsx        # Settings tab
+components/             # Reusable components
+lib/
+  storage.ts            # AsyncStorage wrapper for persistent data
+```
+
+## Key Patterns
+
+### Navigation (Expo Router)
+
+Add new screens by creating files in `app/`:
+
+- `app/profile.tsx` — accessible at `/profile`
+- `app/items/[id].tsx` — dynamic route at `/items/123`
+
+### Data Fetching
+
+Use standard `fetch()` for API calls. CodeYam intercepts these to provide mock data during simulations:
+
+```tsx
+const response = await fetch('/api/items');
+const data = await response.json();
+```
+
+### Storage
+
+Use the typed storage helper for persistent data:
+
+```tsx
+import { storage } from '@/lib/storage';
+
+const items = await storage.get('items', []);
+await storage.set('items', [...items, newItem]);
+```
+
+### Styling (NativeWind)
+
+Use Tailwind classes on React Native components:
+
+```tsx
+<View className="flex-1 items-center justify-center bg-white p-4">
+  <Text className="text-lg font-bold text-gray-900">Hello</Text>
+</View>
+```
+
+## CodeYam Scenario Data
+
+### AsyncStorage Seeding
+
+AsyncStorage uses `localStorage` on web, so CodeYam's existing localStorage injection works automatically. Use the `localStorage` field in scenario JSON to pre-populate storage:
+
+```json
+{
+  "name": "With Saved Items",
+  "url": "/",
+  "dimensions": ["iPhone 16"],
+  "localStorage": {
+    "items": "[{\"id\":\"1\",\"title\":\"Buy groceries\",\"done\":false},{\"id\":\"2\",\"title\":\"Walk the dog\",\"done\":true}]"
+  }
+}
+```
+
+Values must be JSON strings (matching how AsyncStorage stores them). Your `storage.get()` calls will read this data normally.
+
+### API Mocking
+
+For apps that fetch from APIs, use relative URLs so CodeYam's proxy can intercept and mock them:
+
+```tsx
+// Use relative URLs — these go through the CodeYam proxy
+const response = await fetch('/api/items');
+```
+
+Then provide mock routes in your scenario data:
+
+```json
+{
+  "name": "With API Data",
+  "url": "/",
+  "dimensions": ["iPhone 16"],
+  "routes": {
+    "/api/items": {
+      "body": [{ "id": 1, "title": "First item" }],
+      "status": 200
+    }
+  }
+}
+```
+
+### Device Presets
+
+Mobile projects default to these screen sizes:
+
+| Preset            | Width | Height |
+| ----------------- | ----- | ------ |
+| iPhone 16         | 393   | 852    |
+| iPhone 16 Pro Max | 430   | 932    |
+| iPhone SE         | 375   | 667    |
+| Pixel 8           | 412   | 915    |
+| iPad mini         | 744   | 1133   |
+
+## Design Tokens (lib/theme.ts)
+
+All design tokens live in `lib/theme.ts` — this is the **single source of truth** for colors, spacing, typography, and border radius. Import and use in every component:
+
+```tsx
+import { theme } from '@/lib/theme';
+
+<View
+  style={{ backgroundColor: theme.colors.bgBase, padding: theme.spacing.lg }}
+>
+  <Text
+    style={{ fontSize: theme.fontSize.lg, color: theme.colors.textPrimary }}
+  >
+    Hello
+  </Text>
+</View>;
+```
+
+**Do NOT:**
+
+- Use CSS custom properties (`var(--token)`) — they don't work in React Native
+- Hardcode color strings or pixel values in components
+- Create a separate `globals.css` token system — `lib/theme.ts` is the only source
+
+When a design system is selected, populate `lib/theme.ts` with its tokens.
+
+## Testing
+
+Tests use Jest with the `jest-expo` preset. Run with:
+
+```bash
+npx jest                          # Run all tests
+npx jest app/hooks/useCounter.ts  # Run specific test file
+```
+
+The Jest config is in `package.json`. The `transformIgnorePatterns` is pre-configured to handle Expo and React Native module transforms — you should not need to modify it.
+
+## Web vs Native Differences
+
+The CodeYam editor previews your app via **Expo Web** (react-native-web in a browser). Some differences from native iOS/Android devices are expected:
+
+| Aspect           | Web Preview                                            | Native Device                                           |
+| ---------------- | ------------------------------------------------------ | ------------------------------------------------------- |
+| **Fonts**        | System fonts, may differ in weight/metrics/line-height | Loaded custom fonts (if added via expo-font)            |
+| **SafeAreaView** | No effect (no notch in browser)                        | Applies real safe area insets for notch, home indicator |
+| **Platform.OS**  | Returns `'web'`                                        | Returns `'ios'` or `'android'`                          |
+| **Shadows**      | Uses CSS `box-shadow` (works well)                     | Uses RN shadow props (iOS) or `elevation` (Android)     |
+| **Gestures**     | Mouse drag events                                      | Touch/swipe with inertia                                |
+| **StatusBar**    | No visible effect                                      | Controls device status bar appearance                   |
+| **Haptics**      | No-op                                                  | Real haptic feedback via `expo-haptics`                 |
+
+**The web preview is for layout and data verification.** Test final visual polish on a real device or simulator:
+
+```bash
+npm run ios       # iOS Simulator
+npm run android   # Android Emulator
+npm start         # Pick platform from Expo menu
+```
+
+## Building for Production
+
+```bash
+# Web
+npm run build:web
+
+# iOS/Android (requires EAS CLI)
+npx eas build
+```

package/codeyam-cli/templates/expo-react-native/README.md

@@ -0,0 +1,41 @@
+# Project Name
+
+Brief description of what this app does.
+
+## Setup
+
+```bash
+npm run setup
+```
+
+## Development
+
+Start the Expo dev server (web):
+
+```bash
+npm run dev
+```
+
+For native platforms:
+
+```bash
+npm run ios      # iOS simulator
+npm run android  # Android emulator
+```
+
+## Using CodeYam Editor
+
+This project was built with [CodeYam](https://codeyam.com). To launch the editor:
+
+```bash
+codeyam editor
+```
+
+## Scripts
+
+| Script            | Description                 |
+| ----------------- | --------------------------- |
+| `npm run setup`   | Install dependencies        |
+| `npm run dev`     | Start Expo dev server (web) |
+| `npm run ios`     | Run on iOS simulator        |
+| `npm run android` | Run on Android emulator     |

package/codeyam-cli/templates/expo-react-native/app/(tabs)/_layout.tsx

@@ -0,0 +1,33 @@
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#005C75',
+        headerStyle: { backgroundColor: '#f8fafc' },
+        headerTitleStyle: { fontWeight: '600' },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home-outline" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: 'Settings',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="settings-outline" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app/(tabs)/index.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native';
+
+export default function HomeScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-white p-6">
+      <Text className="text-2xl font-bold text-gray-900 mb-2">Welcome</Text>
+      <Text className="text-base text-gray-500 text-center">
+        Your Expo app is ready. Start building!
+      </Text>
+    </View>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app/(tabs)/settings.tsx

@@ -0,0 +1,12 @@
+import { View, Text } from 'react-native';
+
+export default function SettingsScreen() {
+  return (
+    <View className="flex-1 items-center justify-center bg-white p-6">
+      <Text className="text-2xl font-bold text-gray-900 mb-2">Settings</Text>
+      <Text className="text-base text-gray-500 text-center">
+        Configure your app preferences here.
+      </Text>
+    </View>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app/_layout.tsx

@@ -0,0 +1,13 @@
+import '../global.css';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <Stack screenOptions={{ headerShown: false }} />
+      <StatusBar style="auto" />
+    </SafeAreaProvider>
+  );
+}

package/codeyam-cli/templates/expo-react-native/app.json

@@ -0,0 +1,18 @@
+{
+  "expo": {
+    "name": "CodeYam Expo App",
+    "slug": "codeyam-expo-app",
+    "version": "1.0.0",
+    "scheme": "codeyam-expo-app",
+    "platforms": ["ios", "android", "web"],
+    "web": {
+      "bundler": "metro",
+      "output": "single",
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

package/codeyam-cli/templates/expo-react-native/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
+      'nativewind/babel',
+    ],
+  };
+};

package/codeyam-cli/templates/expo-react-native/gitignore

@@ -0,0 +1,12 @@
+node_modules/
+.expo/
+dist/
+web-build/
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+.env
+.env.local

package/codeyam-cli/templates/expo-react-native/global.css

@@ -0,0 +1,10 @@
+/* NativeWind / Tailwind utility layer.
+ *
+ * Design tokens are defined in lib/theme.ts — that is the single source
+ * of truth for colors, spacing, typography, and border radius.
+ * Do NOT define CSS custom properties here for design tokens.
+ * React Native components cannot read CSS variables.
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/codeyam-cli/templates/expo-react-native/lib/storage.ts

@@ -0,0 +1,32 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+/**
+ * Type-safe storage abstraction over AsyncStorage.
+ * Works on iOS, Android, and Web.
+ */
+export const storage = {
+  async get<T>(key: string, defaultValue: T): Promise<T> {
+    try {
+      const raw = await AsyncStorage.getItem(key);
+      return raw !== null ? JSON.parse(raw) : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  },
+
+  async set<T>(key: string, value: T): Promise<void> {
+    try {
+      await AsyncStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      // Storage write failed silently
+    }
+  },
+
+  async remove(key: string): Promise<void> {
+    try {
+      await AsyncStorage.removeItem(key);
+    } catch {
+      // Storage remove failed silently
+    }
+  },
+};

package/codeyam-cli/templates/expo-react-native/lib/theme.ts

@@ -0,0 +1,73 @@
+/**
+ * Design tokens — single source of truth for all styling.
+ *
+ * When a design system is selected (via .codeyam/design-system.md),
+ * populate these values from the design system's color palette,
+ * typography scale, and spacing rhythm.
+ *
+ * Import in every component:
+ *   import { theme } from '@/lib/theme';
+ *   <View style={{ backgroundColor: theme.colors.bgBase }}>
+ *
+ * Do NOT use CSS custom properties (var(--token)) in React Native.
+ * Do NOT hardcode color strings or pixel values in components.
+ */
+
+export const theme = {
+  colors: {
+    bgBase: '#f8fafc',
+    bgSurface: '#ffffff',
+    bgSurfaceRaised: '#ffffff',
+    bgInverse: '#1e293b',
+
+    textPrimary: '#0f172a',
+    textSecondary: '#475569',
+    textMuted: '#94a3b8',
+
+    border: '#e2e8f0',
+
+    accent: '#005C75',
+    accentLight: '#e0f2fe',
+  },
+
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    '2xl': 32,
+    '3xl': 48,
+  },
+
+  fontSize: {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+  },
+
+  fontWeight: {
+    normal: '400' as const,
+    medium: '500' as const,
+    semibold: '600' as const,
+    bold: '700' as const,
+  },
+
+  fontFamily: {
+    sans: 'System',
+    mono: 'monospace',
+  },
+
+  borderRadius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+  },
+};

package/codeyam-cli/templates/expo-react-native/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/codeyam-cli/templates/expo-react-native/nativewind-env.d.ts

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

package/codeyam-cli/templates/expo-react-native/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "codeyam-expo-app",
+  "version": "0.1.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "setup": "npm install",
+    "dev": "expo start --web",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "build:web": "expo export --platform web",
+    "test": "jest"
+  },
+  "dependencies": {
+    "expo": "~55.0.5",
+    "expo-router": "~55.0.4",
+    "expo-status-bar": "~55.0.4",
+    "expo-linking": "~55.0.7",
+    "expo-constants": "~55.0.7",
+    "expo-font": "~55.0.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-native": "0.83.2",
+    "react-native-web": "^0.21.0",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "@react-navigation/native": "^7.1.33",
+    "@expo/vector-icons": "^15.0.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "nativewind": "^4.2.2",
+    "tailwindcss": "^3.4.19"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "babel-preset-expo": "^55.0.10",
+    "typescript": "~5.9.2",
+    "jest": "^29.7.0",
+    "jest-expo": "~55.0.5",
+    "@testing-library/react-native": "^13.2.0"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "transformIgnorePatterns": [
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|nativewind)"
+    ]
+  }
+}

package/codeyam-cli/templates/expo-react-native/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/codeyam-cli/templates/expo-react-native/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}

package/codeyam-cli/templates/hooks/staleness-check.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+# Staleness check hook - runs after file edits to check if related rules need review
+# Receives JSON input via stdin with tool info
+
+set -e
+
+# Read the input JSON
+INPUT=$(cat)
+
+# Extract the file path that was edited
+FILE_PATH=$(echo "$INPUT" | jq -r '.tool_input.file_path // .tool_input.path // empty' 2>/dev/null)
+
+if [ -z "$FILE_PATH" ]; then
+  exit 0  # No file path, nothing to check
+fi
+
+# Find rules that match this file path
+RULES_DIR="${CLAUDE_PROJECT_DIR}/.claude/rules"
+
+if [ ! -d "$RULES_DIR" ]; then
+  exit 0  # No rules directory
+fi
+
+# Search for rules whose paths might match the edited file
+MATCHING_RULES=""
+while IFS= read -r -d '' rule_file; do
+  # Extract paths from frontmatter
+  PATHS=$(sed -n '/^---$/,/^---$/p' "$rule_file" | grep -E "^\s*-\s*'" | sed "s/.*'\(.*\)'.*/\1/")
+
+  for pattern in $PATHS; do
+    # Simple check if the file might match the pattern
+    if [[ "$FILE_PATH" == *"${pattern%%\**}"* ]]; then
+      MATCHING_RULES="$MATCHING_RULES\n- $(basename "$rule_file")"
+      break
+    fi
+  done
+done < <(find "$RULES_DIR" -name "*.md" -print0 2>/dev/null)
+
+if [ -n "$MATCHING_RULES" ]; then
+  echo "📋 Modified file may have related rules that need review:$MATCHING_RULES"
+fi
+
+exit 0

package/codeyam-cli/templates/isolation-route/expo-router.tsx.template

@@ -0,0 +1,54 @@
+/**
+ * CodeYam Isolation Route — Expo Router
+ *
+ * Place this file at: app/isolated-components/ComponentName.tsx
+ * URL: /isolated-components/ComponentName?s=ScenarioName
+ *
+ * This route renders a single component with scenario-specific props,
+ * enabling isolated component preview and screenshot capture.
+ */
+
+import { useLocalSearchParams } from 'expo-router';
+import { View, Text } from 'react-native';
+import { theme } from '@/lib/theme';
+// import YourComponent from '@/app/components/YourComponent';
+
+// Define scenarios: map scenario names to component props
+const scenarios: Record<string, Record<string, unknown>> = {
+  Default: {
+    // props for the default scenario
+  },
+  // Add more scenarios here
+};
+
+export default function ComponentIsolation() {
+  const { s } = useLocalSearchParams<{ s: string }>();
+  const scenarioName = s || 'Default';
+  const props = scenarios[scenarioName];
+
+  if (!props) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text style={{ fontFamily: theme.fontFamily.mono, color: '#e74c3c' }}>
+          Unknown scenario: {scenarioName}
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: theme.colors.bgBase,
+      }}
+    >
+      <View nativeID="codeyam-capture" style={{ maxWidth: 384 }}>
+        {/* <YourComponent {...props} /> */}
+        <Text>Replace with your component</Text>
+      </View>
+    </View>
+  );
+}