@momo-kits/mcp-expo 2.0.0-beta.2 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/mcp-expo",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "MCP server: push AI-generated code to Expo and get LAN URL for Expo Go demo",
   "type": "module",
   "main": "server.mjs",

package/remote-server.mjs

@@ -97,8 +97,23 @@ async function ensureDeps() {
   }
 }
 
+async function killPort(port) {
+  try {
+    const { execSync } = await import('child_process');
+    const pids = execSync(`lsof -ti:${port} 2>/dev/null`, { encoding: 'utf8' }).trim();
+    if (pids) {
+      for (const pid of pids.split('\n')) {
+        try { process.kill(parseInt(pid), 'SIGTERM'); } catch {}
+      }
+      log(`Killed existing processes on port ${port}: ${pids.replace(/\n/g, ', ')}`);
+      await new Promise(r => setTimeout(r, 1000));
+    }
+  } catch {}
+}
+
 async function startExpoMetro() {
   await ensureDeps();
+  await killPort(8081);
 
   return new Promise((resolve, reject) => {
     let settled = false;

package/template/App.tsx

@@ -1,161 +1,61 @@
 
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, ScrollView, StyleSheet, ActivityIndicator, Alert } from 'react-native';
-
-const Colors = {
-  primary: '#D82D8B',
-  danger: '#E53935',
-  white: '#FFFFFF',
-  black: '#1A1A1A',
-  textSecondary: '#6D6D6D',
-  textDisable: '#BDBDBD',
-  bgSurface: '#FFFFFF',
-  bgTonal: '#FCE4F0',
-  bgDisable: '#F0F0F0',
-  borderDefault: '#E0E0E0',
-  sectionBg: '#F5F5F5',
-};
-
-const SizeConfig: Record<string, any> = {
-  large:  { height: 48, px: 16, minWidth: 128, radius: 8, fontSize: 16 },
-  medium: { height: 36, px: 12, minWidth: 80,  radius: 8, fontSize: 14 },
-  small:  { height: 28, px: 8,  minWidth: 60,  radius: 8, fontSize: 12 },
-};
-
-function getTypeStyle(type: string) {
-  switch (type) {
-    case 'primary': return { bg: Colors.primary, text: Colors.white, border: '' };
-    case 'tonal': return { bg: Colors.bgTonal, text: Colors.primary, border: '' };
-    case 'secondary': return { bg: Colors.bgSurface, text: Colors.black, border: Colors.borderDefault };
-    case 'outline': return { bg: Colors.bgSurface, text: Colors.primary, border: Colors.primary };
-    case 'text': return { bg: 'transparent', text: Colors.primary, border: '' };
-    case 'danger': return { bg: Colors.danger, text: Colors.white, border: '' };
-    case 'disabled': return { bg: Colors.bgDisable, text: Colors.textDisable, border: '' };
-    default: return { bg: Colors.primary, text: Colors.white, border: '' };
-  }
-}
-
-function KitButton(props: { title: string; type?: string; size?: string; full?: boolean; loading?: boolean; onPress?: () => void }) {
-  const { title = 'Button', type = 'primary', size = 'large', full = true, loading = false, onPress } = props;
-  const s = SizeConfig[size] || SizeConfig.large;
-  const t = getTypeStyle(type);
-  const isDisabled = type === 'disabled' || loading;
-
-  const containerStyle: any = {
-    height: s.height,
-    paddingHorizontal: s.px,
-    minWidth: s.minWidth,
-    borderRadius: s.radius,
-    backgroundColor: t.bg,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-    opacity: loading ? 0.75 : 1,
-    alignSelf: full ? 'stretch' : 'flex-start',
-  };
-
-  if (t.border) {
-    containerStyle.borderWidth = 1;
-    containerStyle.borderColor = t.border;
-  }
-
-  return (
-    <TouchableOpacity activeOpacity={0.7} disabled={isDisabled} onPress={onPress} style={containerStyle}>
-      {loading && <ActivityIndicator size="small" color={t.text} style={{ marginRight: 8 }} />}
-      <Text style={{ color: t.text, fontSize: s.fontSize, fontWeight: '700' }}>{title}</Text>
-    </TouchableOpacity>
-  );
-}
-
-function App() {
-  const [loadingId, setLoadingId] = useState('');
-
-  const simulateLoading = (id: string) => {
-    setLoadingId(id);
-    setTimeout(() => setLoadingId(''), 2000);
-  };
-
-  const types = ['primary', 'tonal', 'secondary', 'outline', 'text', 'danger', 'disabled'];
-  const sizes = ['large', 'medium', 'small'];
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView, StatusBar } from 'react-native';
 
+export default function App() {
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: '#FFF' }} contentContainerStyle={{ padding: 20, paddingTop: 60 }}>
-      <Text style={{ fontSize: 28, fontWeight: '800', color: Colors.black, marginBottom: 4 }}>Button</Text>
-      <Text style={{ fontSize: 14, color: Colors.textSecondary, marginBottom: 24 }}>@momo-kits/foundation</Text>
-
-      <Text style={styles.sectionTitle}>TYPES</Text>
-      <View style={styles.section}>
-        {types.map((type) => (
-          <View key={type} style={{ marginBottom: 10 }}>
-            <KitButton title={type.charAt(0).toUpperCase() + type.slice(1)} type={type} onPress={() => Alert.alert('Pressed', type)} />
-          </View>
-        ))}
-      </View>
-
-      <Text style={styles.sectionTitle}>SIZES</Text>
-      <View style={styles.section}>
-        {sizes.map((size) => (
-          <View key={size} style={{ marginBottom: 10 }}>
-            <KitButton title={size + ' (' + SizeConfig[size].height + 'px)'} size={size} onPress={() => Alert.alert('Size', size)} />
-          </View>
-        ))}
-      </View>
-
-      <Text style={styles.sectionTitle}>WIDTH</Text>
-      <View style={styles.section}>
-        <View style={{ marginBottom: 10 }}>
-          <KitButton title="Full Width (default)" full={true} onPress={() => {}} />
-        </View>
-        <KitButton title="Auto Width" full={false} onPress={() => {}} />
-      </View>
-
-      <Text style={styles.sectionTitle}>LOADING STATE</Text>
-      <View style={styles.section}>
-        {['primary', 'secondary', 'danger'].map((type) => (
-          <View key={type} style={{ marginBottom: 10 }}>
-            <KitButton
-              title={loadingId === type ? 'Loading...' : 'Tap to load (' + type + ')'}
-              type={type}
-              loading={loadingId === type}
-              onPress={() => simulateLoading(type)}
-            />
-          </View>
-        ))}
-      </View>
-
-      <Text style={styles.sectionTitle}>SIZE x TYPE</Text>
-      <View style={styles.section}>
-        {sizes.map((size) => (
-          <View key={size}>
-            <Text style={{ fontSize: 12, fontWeight: '600', color: Colors.textSecondary, marginBottom: 6 }}>{size}</Text>
-            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
-              {['primary', 'tonal', 'outline', 'danger'].map((type) => (
-                <KitButton key={size + type} title={type.slice(0, 3).toUpperCase()} type={type} size={size} full={false} onPress={() => {}} />
-              ))}
-            </View>
-          </View>
-        ))}
-      </View>
-
-      <View style={{ height: 48 }} />
-    </ScrollView>
+    <View style={styles.container}>
+      <StatusBar barStyle="dark-content" />
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.title}>Text Component</Text>
+        <Text style={styles.subtitle}>@momo-kits/foundation</Text>
+
+        <Text style={styles.sectionHeader}>Typography Scale</Text>
+
+        <Text style={{ fontSize: 28, fontWeight: '700', lineHeight: 36, color: '#1A1A1A', marginBottom: 12 }}>headline_default_bold</Text>
+        <Text style={{ fontSize: 24, fontWeight: '700', lineHeight: 32, color: '#1A1A1A', marginBottom: 12 }}>header_m_bold</Text>
+        <Text style={{ fontSize: 20, fontWeight: '700', lineHeight: 28, color: '#1A1A1A', marginBottom: 12 }}>header_default_bold</Text>
+        <Text style={{ fontSize: 18, fontWeight: '600', lineHeight: 24, color: '#1A1A1A', marginBottom: 12 }}>header_s_semibold</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', lineHeight: 22, color: '#1A1A1A', marginBottom: 12 }}>header_xs_semibold</Text>
+        <Text style={{ fontSize: 16, fontWeight: '400', lineHeight: 24, color: '#1A1A1A', marginBottom: 12 }}>body_default_regular</Text>
+        <Text style={{ fontSize: 16, fontWeight: '400', lineHeight: 24, color: '#1A1A1A', marginBottom: 12, textDecorationLine: 'line-through' }}>body_default_strikethrough</Text>
+        <Text style={{ fontSize: 14, fontWeight: '400', lineHeight: 20, color: '#1A1A1A', marginBottom: 12 }}>description_default_regular</Text>
+        <Text style={{ fontSize: 12, fontWeight: '400', lineHeight: 16, color: '#1A1A1A', marginBottom: 12 }}>description_xs_regular</Text>
+        <Text style={{ fontSize: 16, fontWeight: '500', lineHeight: 22, color: '#1A1A1A', marginBottom: 12 }}>label_default_medium</Text>
+        <Text style={{ fontSize: 14, fontWeight: '500', lineHeight: 20, color: '#1A1A1A', marginBottom: 12 }}>label_s_medium</Text>
+        <Text style={{ fontSize: 12, fontWeight: '500', lineHeight: 16, color: '#1A1A1A', marginBottom: 12 }}>label_xs_medium</Text>
+        <Text style={{ fontSize: 16, fontWeight: '700', lineHeight: 22, color: '#1A1A1A', marginBottom: 12 }}>action_default_bold</Text>
+        <Text style={{ fontSize: 14, fontWeight: '700', lineHeight: 20, color: '#1A1A1A', marginBottom: 12 }}>action_s_bold</Text>
+        <Text style={{ fontSize: 12, fontWeight: '700', lineHeight: 16, color: '#1A1A1A', marginBottom: 12 }}>action_xs_bold</Text>
+        <Text style={{ fontSize: 10, fontWeight: '700', lineHeight: 14, color: '#1A1A1A', marginBottom: 12 }}>action_xxs_bold</Text>
+
+        <Text style={styles.sectionHeader}>Colors</Text>
+
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#1A1A1A', marginBottom: 8 }}>default</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#7A7A7A', marginBottom: 8 }}>secondary</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#B8B8B8', marginBottom: 8 }}>disable</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#D82D8B', marginBottom: 8 }}>primary</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#00C853', marginBottom: 8 }}>success</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#FF9100', marginBottom: 8 }}>warning</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#FF1744', marginBottom: 8 }}>error</Text>
+        <Text style={{ fontSize: 16, fontWeight: '600', color: '#2979FF', marginBottom: 8 }}>info</Text>
+      </ScrollView>
+    </View>
   );
 }
 
-export default App;
-
 const styles = StyleSheet.create({
-  sectionTitle: {
+  container: { flex: 1, backgroundColor: '#FAFAFA' },
+  content: { padding: 20, paddingTop: 60, paddingBottom: 40 },
+  title: { fontSize: 28, fontWeight: '700', color: '#1A1A1A' },
+  subtitle: { fontSize: 13, color: '#999', marginTop: 4, marginBottom: 24 },
+  sectionHeader: {
     fontSize: 13,
-    fontWeight: '600',
-    color: '#6D6D6D',
-    letterSpacing: 0.5,
-    marginTop: 24,
-    marginBottom: 12,
-  },
-  section: {
-    backgroundColor: '#F5F5F5',
-    borderRadius: 12,
-    padding: 16,
+    fontWeight: '700',
+    color: '#D82D8B',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginTop: 20,
+    marginBottom: 16,
   },
 });