create-pika-minigame 1.0.0

package/templates/package.json.template

@@ -0,0 +1,41 @@
+{
+  "name": "{{PROJECT_NAME_KEBAB}}",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Pika mini-game: {{PROJECT_NAME_PASCAL}}",
+  "main": "dev/index.js",
+  "scripts": {
+    "dev": "expo start",
+    "dev:ios": "expo run:ios",
+    "dev:android": "expo run:android",
+    "build:ios": "npx react-native webpack-bundle --platform ios --entry-file index.js --dev false --bundle-output build/outputs/ios/local/index.ios.bundle --assets-dest build/outputs/ios/local",
+    "build:android": "npx react-native webpack-bundle --platform android --entry-file index.js --dev false --bundle-output build/outputs/android/local/index.android.bundle --assets-dest build/outputs/android/local",
+    "serve:ios": "npx serve build/outputs/ios/remotes -l 9000 --cors",
+    "serve:android": "npx serve build/outputs/android/remotes -l 9000 --cors",
+    "deploy": "echo 'Configure your deployment in package.json scripts'",
+    "lint": "eslint src/ dev/",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "expo": "~52.0.0",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-native": "0.77.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"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@callstack/repack": "^5.0.0",
+    "@callstack/repack-plugin-reanimated": "^1.0.0",
+    "@types/react": "~18.3.0",
+    "typescript": "~5.3.0"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-native": "0.77.0",
+    "react-native-reanimated": "~3.16.0"
+  }
+}

package/templates/rspack.config.mjs

@@ -0,0 +1,81 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as Repack from '@callstack/repack';
+import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Rspack config for Module Federation remote.
+ *
+ * This bundles your mini-game as a remote that can be loaded
+ * by the Pika host app at runtime.
+ */
+export default Repack.defineRspackConfig((env) => {
+  const { mode, platform } = env;
+
+  return {
+    mode,
+    context: __dirname,
+    entry: './index.js',
+    output: {
+      path: `${__dirname}/build/outputs/${platform}/remotes`,
+      uniqueName: '{{PROJECT_NAME_SNAKE}}',
+      // Set this to your CDN URL for production builds:
+      // MF_PUBLIC_PATH=https://your-cdn.com/games/{{PROJECT_NAME_KEBAB}}/
+      publicPath: process.env.MF_PUBLIC_PATH || 'http://localhost:9000/',
+    },
+    resolve: {
+      ...Repack.getResolveOptions({ enablePackageExports: true }),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.[cm]?[jt]sx?$/,
+          type: 'javascript/auto',
+          use: {
+            loader: '@callstack/repack/babel-swc-loader',
+            parallel: true,
+            options: {},
+          },
+        },
+        ...Repack.getAssetTransformRules({ svg: 'svgr' }),
+      ],
+    },
+    plugins: [
+      new Repack.RepackPlugin({
+        extraChunks: [
+          {
+            include: /.*/,
+            type: 'remote',
+            outputPath: `build/outputs/${platform}/remotes`,
+          },
+        ],
+      }),
+      new ReanimatedPlugin({ unstable_disableTransform: true }),
+      new Repack.plugins.ModuleFederationPluginV2({
+        name: '{{PROJECT_NAME_SNAKE}}',
+        filename: '{{PROJECT_NAME_SNAKE}}.container.js.bundle',
+        dts: false,
+        exposes: {
+          './App': './src/App.tsx',
+        },
+        shared: {
+          react: { singleton: true, eager: false, requiredVersion: '18.3.1' },
+          'react-native': { singleton: true, eager: false, requiredVersion: '0.77.0' },
+          'react-native-reanimated': { singleton: true, eager: false },
+          'react-native-gesture-handler': { singleton: true, eager: false },
+          'react-native-safe-area-context': { singleton: true, eager: false },
+          'react-native-screens': { singleton: true, eager: false },
+          'react-native-svg': { singleton: true, eager: false },
+        },
+      }),
+    ],
+    ignoreWarnings: [
+      (warning) =>
+        /Critical dependency: require function is used/.test(warning.message) &&
+        /react-native-reanimated/.test(warning.module?.resource ?? ''),
+    ],
+  };
+});

package/templates/src/App.tsx

@@ -0,0 +1,215 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { TopBar, Button, Card } from './components';
+import { semantic, space, typography, color, radius } from './tokens';
+import { GameProps, Screen } from './types';
+
+/**
+ * {{PROJECT_NAME_PASCAL}} - Main App Component
+ *
+ * This is your mini-game entry point. The host app loads this component
+ * and passes the `host` bridge for native capabilities.
+ *
+ * In dev mode (yarn dev), the host is mocked so you can test standalone.
+ */
+const App: React.FC<GameProps> = ({ onExit, onGameOver, host }) => {
+  const [screen, setScreen] = useState<Screen>('home');
+  const [score, setScore] = useState(0);
+
+  const handleStartGame = useCallback(() => {
+    setScreen('game');
+    setScore(0);
+  }, []);
+
+  const handleGameComplete = useCallback((finalScore: number) => {
+    setScore(finalScore);
+    setScreen('result');
+    onGameOver?.({ score: finalScore });
+  }, [onGameOver]);
+
+  const handlePlayAgain = useCallback(() => {
+    setScreen('home');
+    setScore(0);
+  }, []);
+
+  // Home Screen
+  if (screen === 'home') {
+    return (
+      <View style={styles.container}>
+        <TopBar
+          left="close"
+          onLeftPress={onExit}
+          right={<Text style={styles.badge}>{{PROJECT_NAME_PASCAL}}</Text>}
+        />
+        <View style={styles.body}>
+          <Text style={styles.title}>Welcome!</Text>
+          <Text style={styles.subtitle}>
+            This is your mini-game template. Edit App.tsx to build your game.
+          </Text>
+
+          <Card style={styles.infoCard}>
+            <View style={styles.cardContent}>
+              <Text style={styles.cardTitle}>Getting Started</Text>
+              <Text style={styles.cardText}>
+                1. Edit this file to create your game{'\n'}
+                2. Use tokens.ts for consistent styling{'\n'}
+                3. Use components/ for UI elements{'\n'}
+                4. Host bridge in types.ts for native features
+              </Text>
+            </View>
+          </Card>
+
+          <Button
+            label="Start Game"
+            variant="primary"
+            size="lg"
+            fullWidth
+            onPress={handleStartGame}
+            style={styles.startButton}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  // Game Screen (placeholder - build your game logic here)
+  if (screen === 'game') {
+    return (
+      <View style={styles.container}>
+        <TopBar
+          left="back"
+          onLeftPress={() => setScreen('home')}
+          title="Playing..."
+        />
+        <View style={styles.body}>
+          <Text style={styles.title}>Game Screen</Text>
+          <Text style={styles.subtitle}>
+            Build your game mechanics here!
+          </Text>
+
+          <View style={styles.gameArea}>
+            <Text style={styles.emoji}>🎮</Text>
+            <Text style={styles.gameText}>
+              Use host.pronunciation for voice features,{'\n'}
+              or add your own game logic.
+            </Text>
+          </View>
+
+          <Button
+            label="Complete Game (Score: 85)"
+            variant="primary"
+            size="lg"
+            fullWidth
+            onPress={() => handleGameComplete(85)}
+            style={styles.startButton}
+          />
+        </View>
+      </View>
+    );
+  }
+
+  // Result Screen
+  return (
+    <View style={styles.container}>
+      <TopBar title="Results" />
+      <View style={styles.body}>
+        <Text style={styles.emoji}>🎉</Text>
+        <Text style={styles.title}>Great Job!</Text>
+        <Text style={styles.scoreText}>{score}</Text>
+        <Text style={styles.subtitle}>points</Text>
+
+        <Button
+          label="Play Again"
+          variant="primary"
+          size="lg"
+          fullWidth
+          onPress={handlePlayAgain}
+          style={styles.startButton}
+        />
+        <Button
+          label="Exit"
+          variant="secondary"
+          size="md"
+          fullWidth
+          onPress={onExit}
+          style={styles.exitButton}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: semantic.bg,
+  },
+  badge: {
+    color: semantic.textSecondary,
+    fontSize: typography.tag.size,
+  },
+  body: {
+    flex: 1,
+    paddingHorizontal: space[5],
+    paddingTop: space[8],
+    alignItems: 'center',
+  },
+  title: {
+    color: semantic.text,
+    fontSize: typography.title1.size,
+    fontWeight: typography.title1.fontWeight,
+    marginBottom: space[2],
+    textAlign: 'center',
+  },
+  subtitle: {
+    color: semantic.textSecondary,
+    fontSize: typography.body.size,
+    textAlign: 'center',
+    marginBottom: space[6],
+  },
+  infoCard: {
+    width: '100%',
+    marginBottom: space[8],
+  },
+  cardContent: {
+    padding: space[4],
+  },
+  cardTitle: {
+    color: semantic.text,
+    fontSize: typography.title2.size,
+    fontWeight: typography.title2.fontWeight,
+    marginBottom: space[3],
+  },
+  cardText: {
+    color: semantic.textSecondary,
+    fontSize: typography.caption.size,
+    lineHeight: 22,
+  },
+  startButton: {
+    marginTop: space[4],
+  },
+  exitButton: {
+    marginTop: space[3],
+  },
+  gameArea: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emoji: {
+    fontSize: 64,
+    marginBottom: space[4],
+  },
+  gameText: {
+    color: semantic.textSecondary,
+    fontSize: typography.body.size,
+    textAlign: 'center',
+  },
+  scoreText: {
+    color: color.cyan[400],
+    fontSize: typography.display.size,
+    fontWeight: typography.display.fontWeight,
+  },
+});
+
+export default App;

package/templates/src/components/Button.tsx

@@ -0,0 +1,117 @@
+import React, { useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  ActivityIndicator,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { color, semantic, space, radius } from '../tokens';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps {
+  label: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const VARIANT_STYLE = {
+  primary: { bg: color.cyan[400], text: color.white },
+  secondary: { bg: semantic.surfaceElevated, text: color.white },
+  danger: { bg: color.red[400], text: color.white },
+  ghost: { bg: 'transparent', text: color.cyan[400], border: color.cyan[400] },
+};
+
+const SIZE_STYLE = {
+  sm: { height: 40, paddingH: space[4], fontSize: 13 },
+  md: { height: 50, paddingH: space[6], fontSize: 15 },
+  lg: { height: 60, paddingH: space[8], fontSize: 17 },
+};
+
+export function Button({
+  label,
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled = false,
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  onPress,
+  style,
+}: ButtonProps) {
+  const v = VARIANT_STYLE[variant];
+  const s = SIZE_STYLE[size];
+  const inactive = disabled || loading;
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const pressIn = () => {
+    if (inactive) return;
+    Animated.timing(scale, { toValue: 0.96, duration: 80, useNativeDriver: true }).start();
+  };
+
+  const pressOut = () => {
+    if (inactive) return;
+    Animated.spring(scale, { toValue: 1, friction: 8, tension: 200, useNativeDriver: true }).start();
+  };
+
+  return (
+    <Pressable
+      onPress={inactive ? undefined : onPress}
+      onPressIn={pressIn}
+      onPressOut={pressOut}
+      style={[styles.pressable, fullWidth && styles.fullWidth, style]}
+    >
+      <Animated.View
+        style={[
+          styles.face,
+          {
+            height: s.height,
+            paddingHorizontal: s.paddingH,
+            backgroundColor: v.bg,
+            borderRadius: radius.xl,
+            opacity: inactive ? 0.5 : 1,
+            transform: [{ scale }],
+          },
+          'border' in v && { borderWidth: 1, borderColor: v.border },
+        ]}
+      >
+        {loading ? (
+          <ActivityIndicator size="small" color={v.text} />
+        ) : (
+          <View style={styles.content}>
+            {leftIcon && <View style={styles.iconLeft}>{leftIcon}</View>}
+            <Text style={[styles.label, { fontSize: s.fontSize, color: v.text }]}>
+              {label.toUpperCase()}
+            </Text>
+            {rightIcon && <View style={styles.iconRight}>{rightIcon}</View>}
+          </View>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: { alignSelf: 'flex-start' },
+  fullWidth: { alignSelf: 'stretch' },
+  face: { alignItems: 'center', justifyContent: 'center' },
+  content: { flexDirection: 'row', alignItems: 'center', gap: space[2] },
+  label: { fontWeight: '800', letterSpacing: 0.8 },
+  iconLeft: {},
+  iconRight: {},
+});
+
+export default Button;

package/templates/src/components/Card.tsx

@@ -0,0 +1,86 @@
+import React, { useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { semantic, space, radius } from '../tokens';
+
+export type CardVariant = 'default' | 'elevated';
+export type CardPadding = 'default' | 'none';
+
+export interface CardProps {
+  variant?: CardVariant;
+  padding?: CardPadding;
+  onPress?: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const PADDING_MAP = { default: space[4], none: 0 };
+
+export function Card({
+  variant = 'default',
+  padding: paddingProp = 'default',
+  onPress,
+  disabled = false,
+  children,
+  style,
+}: CardProps) {
+  const cardPadding = PADDING_MAP[paddingProp];
+  const interactive = !!onPress && !disabled;
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const pressIn = () => {
+    if (!interactive) return;
+    Animated.timing(scale, { toValue: 0.98, duration: 100, useNativeDriver: true }).start();
+  };
+
+  const pressOut = () => {
+    if (!interactive) return;
+    Animated.spring(scale, { toValue: 1, friction: 8, tension: 200, useNativeDriver: true }).start();
+  };
+
+  const cardContent = (
+    <Animated.View
+      style={[
+        styles.face,
+        {
+          backgroundColor: variant === 'elevated' ? semantic.surfaceElevated : semantic.surface,
+          borderRadius: radius.lg,
+          padding: cardPadding,
+          opacity: disabled ? 0.5 : 1,
+          transform: [{ scale }],
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={disabled ? undefined : onPress}
+        onPressIn={pressIn}
+        onPressOut={pressOut}
+        disabled={disabled}
+      >
+        {cardContent}
+      </Pressable>
+    );
+  }
+
+  return cardContent;
+}
+
+const styles = StyleSheet.create({
+  face: { overflow: 'hidden' },
+});
+
+export default Card;

package/templates/src/components/Spinner.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { color } from '../tokens';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface SpinnerProps {
+  size?: SpinnerSize;
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZE_STYLE = {
+  sm: { diameter: 16, stroke: 2 },
+  md: { diameter: 24, stroke: 3 },
+  lg: { diameter: 40, stroke: 4 },
+  xl: { diameter: 80, stroke: 5 },
+};
+
+export function Spinner({ size = 'md', color: spinnerColor = color.cyan[400], style }: SpinnerProps) {
+  const s = SIZE_STYLE[size];
+  const rotation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotation, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }),
+    ).start();
+    return () => rotation.stopAnimation();
+  }, [rotation]);
+
+  const spin = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
+
+  return (
+    <Animated.View
+      style={[{ width: s.diameter, height: s.diameter, transform: [{ rotate: spin }] }, style]}
+      accessibilityLabel="Loading"
+    >
+      <View
+        style={[
+          styles.circle,
+          { width: s.diameter, height: s.diameter, borderRadius: s.diameter / 2, borderWidth: s.stroke, borderColor: 'rgba(255,255,255,0.1)' },
+        ]}
+      />
+      <View
+        style={[
+          styles.arc,
+          {
+            width: s.diameter,
+            height: s.diameter,
+            borderRadius: s.diameter / 2,
+            borderWidth: s.stroke,
+            borderTopColor: spinnerColor,
+            borderRightColor: spinnerColor,
+            borderBottomColor: 'transparent',
+            borderLeftColor: 'transparent',
+          },
+        ]}
+      />
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  circle: { position: 'absolute' },
+  arc: { position: 'absolute' },
+});
+
+export default Spinner;