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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/remote-server.mjs +16 -1
  3. package/template/App.tsx +148 -134
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/mcp-expo",
3
- "version": "2.0.0-beta.2",
3
+ "version": "2.0.0-beta.3",
4
4
  "description": "MCP server: push AI-generated code to Expo and get LAN URL for Expo Go demo",
5
5
  "type": "module",
6
6
  "main": "server.mjs",
package/remote-server.mjs CHANGED
@@ -97,8 +97,23 @@ async function ensureDeps() {
97
97
  }
98
98
  }
99
99
 
100
+ async function killPort(port) {
101
+ try {
102
+ const { execSync } = await import('child_process');
103
+ const pids = execSync(`lsof -ti:${port} 2>/dev/null`, { encoding: 'utf8' }).trim();
104
+ if (pids) {
105
+ for (const pid of pids.split('\n')) {
106
+ try { process.kill(parseInt(pid), 'SIGTERM'); } catch {}
107
+ }
108
+ log(`Killed existing processes on port ${port}: ${pids.replace(/\n/g, ', ')}`);
109
+ await new Promise(r => setTimeout(r, 1000));
110
+ }
111
+ } catch {}
112
+ }
113
+
100
114
  async function startExpoMetro() {
101
115
  await ensureDeps();
116
+ await killPort(8081);
102
117
 
103
118
  return new Promise((resolve, reject) => {
104
119
  let settled = false;
@@ -112,7 +127,7 @@ async function startExpoMetro() {
112
127
 
113
128
  log(`Starting Expo Metro in ${TEMPLATE_DIR}...`);
114
129
 
115
- metroProcess = spawn('npx', ['expo', 'start', '--lan', '--port', '8081'], {
130
+ metroProcess = spawn('npx', ['expo', 'start', '--tunnel', '--port', '8081'], {
116
131
  cwd: TEMPLATE_DIR,
117
132
  stdio: ['pipe', 'pipe', 'pipe'],
118
133
  env: { ...process.env, FORCE_COLOR: '0' },
package/template/App.tsx CHANGED
@@ -1,161 +1,175 @@
1
1
 
2
2
  import React, { useState } from 'react';
3
- import { View, Text, TouchableOpacity, ScrollView, StyleSheet, ActivityIndicator, Alert } from 'react-native';
4
-
5
- const Colors = {
6
- primary: '#D82D8B',
7
- danger: '#E53935',
8
- white: '#FFFFFF',
9
- black: '#1A1A1A',
10
- textSecondary: '#6D6D6D',
11
- textDisable: '#BDBDBD',
12
- bgSurface: '#FFFFFF',
13
- bgTonal: '#FCE4F0',
14
- bgDisable: '#F0F0F0',
15
- borderDefault: '#E0E0E0',
16
- sectionBg: '#F5F5F5',
3
+ import {
4
+ View,
5
+ Text,
6
+ StyleSheet,
7
+ ScrollView,
8
+ StatusBar,
9
+ TouchableOpacity,
10
+ Platform,
11
+ } from 'react-native';
12
+
13
+ const Typography: Record<string, { fontSize: number; fontWeight: string; lineHeight: number; textDecorationLine?: string }> = {
14
+ headline_default_bold: { fontSize: 28, fontWeight: '700', lineHeight: 36 },
15
+ header_m_bold: { fontSize: 22, fontWeight: '700', lineHeight: 28 },
16
+ header_default_bold: { fontSize: 20, fontWeight: '700', lineHeight: 26 },
17
+ header_s_semibold: { fontSize: 18, fontWeight: '600', lineHeight: 24 },
18
+ header_xs_semibold: { fontSize: 16, fontWeight: '600', lineHeight: 22 },
19
+ body_default_regular: { fontSize: 16, fontWeight: '400', lineHeight: 24 },
20
+ body_default_regularstrikethrought: { fontSize: 16, fontWeight: '400', lineHeight: 24, textDecorationLine: 'line-through' },
21
+ description_default_regular: { fontSize: 14, fontWeight: '400', lineHeight: 20 },
22
+ description_default_regularstrikethrought: { fontSize: 14, fontWeight: '400', lineHeight: 20, textDecorationLine: 'line-through' },
23
+ description_xs_regular: { fontSize: 12, fontWeight: '400', lineHeight: 18 },
24
+ description_xs_regularstrikethrought: { fontSize: 12, fontWeight: '400', lineHeight: 18, textDecorationLine: 'line-through' },
25
+ label_default_medium: { fontSize: 16, fontWeight: '500', lineHeight: 22 },
26
+ label_s_medium: { fontSize: 14, fontWeight: '500', lineHeight: 20 },
27
+ label_xs_medium: { fontSize: 12, fontWeight: '500', lineHeight: 18 },
28
+ action_default_bold: { fontSize: 16, fontWeight: '700', lineHeight: 22 },
29
+ action_s_bold: { fontSize: 14, fontWeight: '700', lineHeight: 20 },
30
+ action_xs_bold: { fontSize: 12, fontWeight: '700', lineHeight: 18 },
31
+ action_xxs_bold: { fontSize: 10, fontWeight: '700', lineHeight: 16 },
17
32
  };
18
33
 
19
- const SizeConfig: Record<string, any> = {
20
- large: { height: 48, px: 16, minWidth: 128, radius: 8, fontSize: 16 },
21
- medium: { height: 36, px: 12, minWidth: 80, radius: 8, fontSize: 14 },
22
- small: { height: 28, px: 8, minWidth: 60, radius: 8, fontSize: 12 },
23
- };
34
+ const TextColors = [
35
+ { name: 'default', color: '#1A1A1A' },
36
+ { name: 'secondary', color: '#7A7A7A' },
37
+ { name: 'disable', color: '#B8B8B8' },
38
+ { name: 'primary', color: '#D82D8B' },
39
+ { name: 'success', color: '#00C853' },
40
+ { name: 'warning', color: '#FF9100' },
41
+ { name: 'error', color: '#FF1744' },
42
+ ];
24
43
 
25
- function getTypeStyle(type: string) {
26
- switch (type) {
27
- case 'primary': return { bg: Colors.primary, text: Colors.white, border: '' };
28
- case 'tonal': return { bg: Colors.bgTonal, text: Colors.primary, border: '' };
29
- case 'secondary': return { bg: Colors.bgSurface, text: Colors.black, border: Colors.borderDefault };
30
- case 'outline': return { bg: Colors.bgSurface, text: Colors.primary, border: Colors.primary };
31
- case 'text': return { bg: 'transparent', text: Colors.primary, border: '' };
32
- case 'danger': return { bg: Colors.danger, text: Colors.white, border: '' };
33
- case 'disabled': return { bg: Colors.bgDisable, text: Colors.textDisable, border: '' };
34
- default: return { bg: Colors.primary, text: Colors.white, border: '' };
35
- }
36
- }
44
+ type Tab = 'typography' | 'color';
37
45
 
38
- function KitButton(props: { title: string; type?: string; size?: string; full?: boolean; loading?: boolean; onPress?: () => void }) {
39
- const { title = 'Button', type = 'primary', size = 'large', full = true, loading = false, onPress } = props;
40
- const s = SizeConfig[size] || SizeConfig.large;
41
- const t = getTypeStyle(type);
42
- const isDisabled = type === 'disabled' || loading;
43
-
44
- const containerStyle: any = {
45
- height: s.height,
46
- paddingHorizontal: s.px,
47
- minWidth: s.minWidth,
48
- borderRadius: s.radius,
49
- backgroundColor: t.bg,
50
- alignItems: 'center',
51
- justifyContent: 'center',
52
- flexDirection: 'row',
53
- opacity: loading ? 0.75 : 1,
54
- alignSelf: full ? 'stretch' : 'flex-start',
55
- };
56
-
57
- if (t.border) {
58
- containerStyle.borderWidth = 1;
59
- containerStyle.borderColor = t.border;
60
- }
46
+ export default function App() {
47
+ const [activeTab, setActiveTab] = useState<Tab>('typography');
61
48
 
62
49
  return (
63
- <TouchableOpacity activeOpacity={0.7} disabled={isDisabled} onPress={onPress} style={containerStyle}>
64
- {loading && <ActivityIndicator size="small" color={t.text} style={{ marginRight: 8 }} />}
65
- <Text style={{ color: t.text, fontSize: s.fontSize, fontWeight: '700' }}>{title}</Text>
66
- </TouchableOpacity>
67
- );
68
- }
69
-
70
- function App() {
71
- const [loadingId, setLoadingId] = useState('');
72
-
73
- const simulateLoading = (id: string) => {
74
- setLoadingId(id);
75
- setTimeout(() => setLoadingId(''), 2000);
76
- };
77
-
78
- const types = ['primary', 'tonal', 'secondary', 'outline', 'text', 'danger', 'disabled'];
79
- const sizes = ['large', 'medium', 'small'];
80
-
81
- return (
82
- <ScrollView style={{ flex: 1, backgroundColor: '#FFF' }} contentContainerStyle={{ padding: 20, paddingTop: 60 }}>
83
- <Text style={{ fontSize: 28, fontWeight: '800', color: Colors.black, marginBottom: 4 }}>Button</Text>
84
- <Text style={{ fontSize: 14, color: Colors.textSecondary, marginBottom: 24 }}>@momo-kits/foundation</Text>
85
-
86
- <Text style={styles.sectionTitle}>TYPES</Text>
87
- <View style={styles.section}>
88
- {types.map((type) => (
89
- <View key={type} style={{ marginBottom: 10 }}>
90
- <KitButton title={type.charAt(0).toUpperCase() + type.slice(1)} type={type} onPress={() => Alert.alert('Pressed', type)} />
91
- </View>
92
- ))}
50
+ <View style={styles.container}>
51
+ <StatusBar barStyle="dark-content" />
52
+ <View style={styles.header}>
53
+ <Text style={styles.title}>Text</Text>
54
+ <Text style={styles.subtitle}>@momo-kits/foundation</Text>
93
55
  </View>
94
56
 
95
- <Text style={styles.sectionTitle}>SIZES</Text>
96
- <View style={styles.section}>
97
- {sizes.map((size) => (
98
- <View key={size} style={{ marginBottom: 10 }}>
99
- <KitButton title={size + ' (' + SizeConfig[size].height + 'px)'} size={size} onPress={() => Alert.alert('Size', size)} />
100
- </View>
57
+ <View style={styles.tabRow}>
58
+ {(['typography', 'color'] as Tab[]).map(tab => (
59
+ <TouchableOpacity
60
+ key={tab}
61
+ style={[styles.tab, activeTab === tab && styles.tabActive]}
62
+ onPress={() => setActiveTab(tab)}
63
+ >
64
+ <Text style={[styles.tabText, activeTab === tab && styles.tabTextActive]}>
65
+ {tab.charAt(0).toUpperCase() + tab.slice(1)}
66
+ </Text>
67
+ </TouchableOpacity>
101
68
  ))}
102
69
  </View>
103
70
 
104
- <Text style={styles.sectionTitle}>WIDTH</Text>
105
- <View style={styles.section}>
106
- <View style={{ marginBottom: 10 }}>
107
- <KitButton title="Full Width (default)" full={true} onPress={() => {}} />
108
- </View>
109
- <KitButton title="Auto Width" full={false} onPress={() => {}} />
110
- </View>
111
-
112
- <Text style={styles.sectionTitle}>LOADING STATE</Text>
113
- <View style={styles.section}>
114
- {['primary', 'secondary', 'danger'].map((type) => (
115
- <View key={type} style={{ marginBottom: 10 }}>
116
- <KitButton
117
- title={loadingId === type ? 'Loading...' : 'Tap to load (' + type + ')'}
118
- type={type}
119
- loading={loadingId === type}
120
- onPress={() => simulateLoading(type)}
121
- />
71
+ <ScrollView contentContainerStyle={styles.content}>
72
+ {activeTab === 'typography' && (
73
+ <View>
74
+ <Text style={styles.sectionTitle}>Typography Scale</Text>
75
+ {Object.entries(Typography).map(([name, style]) => (
76
+ <View key={name} style={styles.typoCard}>
77
+ <Text
78
+ style={{
79
+ fontSize: style.fontSize,
80
+ fontWeight: style.fontWeight as any,
81
+ lineHeight: style.lineHeight,
82
+ textDecorationLine: (style.textDecorationLine as any) || 'none',
83
+ color: '#1A1A1A',
84
+ }}
85
+ >
86
+ {name}
87
+ </Text>
88
+ <Text style={styles.meta}>
89
+ {style.fontSize}px / {style.fontWeight} / LH {style.lineHeight}
90
+ {style.textDecorationLine ? ' / strikethrough' : ''}
91
+ </Text>
92
+ </View>
93
+ ))}
122
94
  </View>
123
- ))}
124
- </View>
125
-
126
- <Text style={styles.sectionTitle}>SIZE x TYPE</Text>
127
- <View style={styles.section}>
128
- {sizes.map((size) => (
129
- <View key={size}>
130
- <Text style={{ fontSize: 12, fontWeight: '600', color: Colors.textSecondary, marginBottom: 6 }}>{size}</Text>
131
- <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
132
- {['primary', 'tonal', 'outline', 'danger'].map((type) => (
133
- <KitButton key={size + type} title={type.slice(0, 3).toUpperCase()} type={type} size={size} full={false} onPress={() => {}} />
134
- ))}
135
- </View>
95
+ )}
96
+
97
+ {activeTab === 'color' && (
98
+ <View>
99
+ <Text style={styles.sectionTitle}>Text Colors</Text>
100
+ {TextColors.map(item => (
101
+ <View key={item.name} style={styles.colorCard}>
102
+ <View style={styles.colorRow}>
103
+ <View style={[styles.colorDot, { backgroundColor: item.color }]} />
104
+ <View style={styles.colorInfo}>
105
+ <Text style={[styles.colorSample, { color: item.color }]}>
106
+ The quick brown fox jumps over the lazy dog
107
+ </Text>
108
+ <Text style={styles.colorMeta}>
109
+ {item.name} — {item.color}
110
+ </Text>
111
+ </View>
112
+ </View>
113
+ </View>
114
+ ))}
136
115
  </View>
137
- ))}
138
- </View>
139
-
140
- <View style={{ height: 48 }} />
141
- </ScrollView>
116
+ )}
117
+ </ScrollView>
118
+ </View>
142
119
  );
143
120
  }
144
121
 
145
- export default App;
146
-
147
122
  const styles = StyleSheet.create({
123
+ container: { flex: 1, backgroundColor: '#F8F8F8' },
124
+ header: {
125
+ paddingTop: Platform.OS === 'ios' ? 60 : 48,
126
+ paddingHorizontal: 20,
127
+ paddingBottom: 12,
128
+ backgroundColor: '#fff',
129
+ borderBottomWidth: StyleSheet.hairlineWidth,
130
+ borderBottomColor: '#E0E0E0',
131
+ },
132
+ title: { fontSize: 28, fontWeight: '700', color: '#1A1A1A' },
133
+ subtitle: { fontSize: 13, color: '#999', marginTop: 2 },
134
+ tabRow: {
135
+ flexDirection: 'row',
136
+ backgroundColor: '#fff',
137
+ paddingHorizontal: 16,
138
+ paddingBottom: 8,
139
+ gap: 8,
140
+ },
141
+ tab: {
142
+ paddingVertical: 8,
143
+ paddingHorizontal: 16,
144
+ borderRadius: 20,
145
+ backgroundColor: '#F0F0F0',
146
+ },
147
+ tabActive: { backgroundColor: '#D82D8B' },
148
+ tabText: { fontSize: 14, fontWeight: '500', color: '#666' },
149
+ tabTextActive: { color: '#fff' },
150
+ content: { padding: 16, paddingBottom: 40 },
148
151
  sectionTitle: {
149
- fontSize: 13,
152
+ fontSize: 18,
150
153
  fontWeight: '600',
151
- color: '#6D6D6D',
152
- letterSpacing: 0.5,
153
- marginTop: 24,
154
+ color: '#1A1A1A',
154
155
  marginBottom: 12,
155
156
  },
156
- section: {
157
- backgroundColor: '#F5F5F5',
157
+ typoCard: {
158
+ backgroundColor: '#fff',
159
+ borderRadius: 12,
160
+ padding: 16,
161
+ marginBottom: 8,
162
+ },
163
+ meta: { fontSize: 11, color: '#999', marginTop: 6 },
164
+ colorCard: {
165
+ backgroundColor: '#fff',
158
166
  borderRadius: 12,
159
167
  padding: 16,
168
+ marginBottom: 8,
160
169
  },
170
+ colorRow: { flexDirection: 'row', alignItems: 'center' },
171
+ colorDot: { width: 32, height: 32, borderRadius: 16, marginRight: 12 },
172
+ colorInfo: { flex: 1 },
173
+ colorSample: { fontSize: 15, fontWeight: '500', lineHeight: 22 },
174
+ colorMeta: { fontSize: 11, color: '#999', marginTop: 4 },
161
175
  });