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

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 +1 -1
  3. package/template/App.tsx +44 -158
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/mcp-expo",
3
- "version": "2.0.0-beta.3",
3
+ "version": "2.0.0-beta.4",
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
@@ -127,7 +127,7 @@ async function startExpoMetro() {
127
127
 
128
128
  log(`Starting Expo Metro in ${TEMPLATE_DIR}...`);
129
129
 
130
- metroProcess = spawn('npx', ['expo', 'start', '--tunnel', '--port', '8081'], {
130
+ metroProcess = spawn('npx', ['expo', 'start', '--lan', '--port', '8081'], {
131
131
  cwd: TEMPLATE_DIR,
132
132
  stdio: ['pipe', 'pipe', 'pipe'],
133
133
  env: { ...process.env, FORCE_COLOR: '0' },
package/template/App.tsx CHANGED
@@ -1,175 +1,61 @@
1
1
 
2
- import React, { useState } from 'react';
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 },
32
- };
33
-
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
- ];
43
-
44
- type Tab = 'typography' | 'color';
2
+ import React from 'react';
3
+ import { View, Text, StyleSheet, ScrollView, StatusBar } from 'react-native';
45
4
 
46
5
  export default function App() {
47
- const [activeTab, setActiveTab] = useState<Tab>('typography');
48
-
49
6
  return (
50
7
  <View style={styles.container}>
51
8
  <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>
55
- </View>
56
-
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>
68
- ))}
69
- </View>
70
-
71
9
  <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
- ))}
94
- </View>
95
- )}
10
+ <Text style={styles.title}>Text Component</Text>
11
+ <Text style={styles.subtitle}>@momo-kits/foundation</Text>
96
12
 
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
- ))}
115
- </View>
116
- )}
13
+ <Text style={styles.sectionHeader}>Typography Scale</Text>
14
+
15
+ <Text style={{ fontSize: 28, fontWeight: '700', lineHeight: 36, color: '#1A1A1A', marginBottom: 12 }}>headline_default_bold</Text>
16
+ <Text style={{ fontSize: 24, fontWeight: '700', lineHeight: 32, color: '#1A1A1A', marginBottom: 12 }}>header_m_bold</Text>
17
+ <Text style={{ fontSize: 20, fontWeight: '700', lineHeight: 28, color: '#1A1A1A', marginBottom: 12 }}>header_default_bold</Text>
18
+ <Text style={{ fontSize: 18, fontWeight: '600', lineHeight: 24, color: '#1A1A1A', marginBottom: 12 }}>header_s_semibold</Text>
19
+ <Text style={{ fontSize: 16, fontWeight: '600', lineHeight: 22, color: '#1A1A1A', marginBottom: 12 }}>header_xs_semibold</Text>
20
+ <Text style={{ fontSize: 16, fontWeight: '400', lineHeight: 24, color: '#1A1A1A', marginBottom: 12 }}>body_default_regular</Text>
21
+ <Text style={{ fontSize: 16, fontWeight: '400', lineHeight: 24, color: '#1A1A1A', marginBottom: 12, textDecorationLine: 'line-through' }}>body_default_strikethrough</Text>
22
+ <Text style={{ fontSize: 14, fontWeight: '400', lineHeight: 20, color: '#1A1A1A', marginBottom: 12 }}>description_default_regular</Text>
23
+ <Text style={{ fontSize: 12, fontWeight: '400', lineHeight: 16, color: '#1A1A1A', marginBottom: 12 }}>description_xs_regular</Text>
24
+ <Text style={{ fontSize: 16, fontWeight: '500', lineHeight: 22, color: '#1A1A1A', marginBottom: 12 }}>label_default_medium</Text>
25
+ <Text style={{ fontSize: 14, fontWeight: '500', lineHeight: 20, color: '#1A1A1A', marginBottom: 12 }}>label_s_medium</Text>
26
+ <Text style={{ fontSize: 12, fontWeight: '500', lineHeight: 16, color: '#1A1A1A', marginBottom: 12 }}>label_xs_medium</Text>
27
+ <Text style={{ fontSize: 16, fontWeight: '700', lineHeight: 22, color: '#1A1A1A', marginBottom: 12 }}>action_default_bold</Text>
28
+ <Text style={{ fontSize: 14, fontWeight: '700', lineHeight: 20, color: '#1A1A1A', marginBottom: 12 }}>action_s_bold</Text>
29
+ <Text style={{ fontSize: 12, fontWeight: '700', lineHeight: 16, color: '#1A1A1A', marginBottom: 12 }}>action_xs_bold</Text>
30
+ <Text style={{ fontSize: 10, fontWeight: '700', lineHeight: 14, color: '#1A1A1A', marginBottom: 12 }}>action_xxs_bold</Text>
31
+
32
+ <Text style={styles.sectionHeader}>Colors</Text>
33
+
34
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#1A1A1A', marginBottom: 8 }}>default</Text>
35
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#7A7A7A', marginBottom: 8 }}>secondary</Text>
36
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#B8B8B8', marginBottom: 8 }}>disable</Text>
37
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#D82D8B', marginBottom: 8 }}>primary</Text>
38
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#00C853', marginBottom: 8 }}>success</Text>
39
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#FF9100', marginBottom: 8 }}>warning</Text>
40
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#FF1744', marginBottom: 8 }}>error</Text>
41
+ <Text style={{ fontSize: 16, fontWeight: '600', color: '#2979FF', marginBottom: 8 }}>info</Text>
117
42
  </ScrollView>
118
43
  </View>
119
44
  );
120
45
  }
121
46
 
122
47
  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
- },
48
+ container: { flex: 1, backgroundColor: '#FAFAFA' },
49
+ content: { padding: 20, paddingTop: 60, paddingBottom: 40 },
132
50
  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 },
151
- sectionTitle: {
152
- fontSize: 18,
153
- fontWeight: '600',
154
- color: '#1A1A1A',
155
- marginBottom: 12,
156
- },
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',
166
- borderRadius: 12,
167
- padding: 16,
168
- marginBottom: 8,
51
+ subtitle: { fontSize: 13, color: '#999', marginTop: 4, marginBottom: 24 },
52
+ sectionHeader: {
53
+ fontSize: 13,
54
+ fontWeight: '700',
55
+ color: '#D82D8B',
56
+ textTransform: 'uppercase',
57
+ letterSpacing: 1,
58
+ marginTop: 20,
59
+ marginBottom: 16,
169
60
  },
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 },
175
61
  });