@momo-kits/mcp-expo 2.0.0-beta.3 → 2.0.0-beta.5
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.
- package/.idea/copilot.data.migration.ask2agent.xml +6 -0
- package/.idea/mcp-expo.iml +9 -0
- package/.idea/misc.xml +6 -0
- package/.idea/modules.xml +8 -0
- package/.idea/vcs.xml +7 -0
- package/package.json +1 -1
- package/remote-server.mjs +1 -1
- package/template/App.tsx +155 -137
- package/template/package-lock.json +1262 -1201
- package/template/package.json +9 -6
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<module type="JAVA_MODULE" version="4">
|
|
3
|
+
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
|
4
|
+
<exclude-output />
|
|
5
|
+
<content url="file://$MODULE_DIR$" />
|
|
6
|
+
<orderEntry type="inheritedJdk" />
|
|
7
|
+
<orderEntry type="sourceFolder" forTests="false" />
|
|
8
|
+
</component>
|
|
9
|
+
</module>
|
package/.idea/misc.xml
ADDED
package/.idea/vcs.xml
ADDED
package/package.json
CHANGED
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', '--
|
|
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,193 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useMemo, useState } from 'react';
|
|
3
2
|
import {
|
|
4
|
-
|
|
5
|
-
Text,
|
|
6
|
-
StyleSheet,
|
|
3
|
+
SafeAreaView,
|
|
7
4
|
ScrollView,
|
|
8
5
|
StatusBar,
|
|
6
|
+
StyleSheet,
|
|
7
|
+
Text,
|
|
9
8
|
TouchableOpacity,
|
|
10
|
-
|
|
9
|
+
View,
|
|
11
10
|
} from 'react-native';
|
|
12
11
|
|
|
13
|
-
const
|
|
14
|
-
headline_default_bold
|
|
15
|
-
header_m_bold
|
|
16
|
-
header_default_bold
|
|
17
|
-
header_s_semibold
|
|
18
|
-
header_xs_semibold
|
|
19
|
-
body_default_regular
|
|
20
|
-
body_default_regularstrikethrought
|
|
21
|
-
description_default_regular
|
|
22
|
-
description_default_regularstrikethrought
|
|
23
|
-
description_xs_regular
|
|
24
|
-
description_xs_regularstrikethrought
|
|
25
|
-
label_default_medium
|
|
26
|
-
label_s_medium
|
|
27
|
-
label_xs_medium
|
|
28
|
-
action_default_bold
|
|
29
|
-
action_s_bold
|
|
30
|
-
action_xs_bold
|
|
31
|
-
action_xxs_bold
|
|
12
|
+
const TYPOGRAPHY = [
|
|
13
|
+
'headline_default_bold',
|
|
14
|
+
'header_m_bold',
|
|
15
|
+
'header_default_bold',
|
|
16
|
+
'header_s_semibold',
|
|
17
|
+
'header_xs_semibold',
|
|
18
|
+
'body_default_regular',
|
|
19
|
+
'body_default_regularstrikethrought',
|
|
20
|
+
'description_default_regular',
|
|
21
|
+
'description_default_regularstrikethrought',
|
|
22
|
+
'description_xs_regular',
|
|
23
|
+
'description_xs_regularstrikethrought',
|
|
24
|
+
'label_default_medium',
|
|
25
|
+
'label_s_medium',
|
|
26
|
+
'label_xs_medium',
|
|
27
|
+
'action_default_bold',
|
|
28
|
+
'action_s_bold',
|
|
29
|
+
'action_xs_bold',
|
|
30
|
+
'action_xxs_bold',
|
|
31
|
+
];
|
|
32
|
+
|
|
33
|
+
const TYPO_STYLE: Record<string, { fontSize: number; fontWeight: '400' | '500' | '600' | '700' }> = {
|
|
34
|
+
headline_default_bold: { fontSize: 32, fontWeight: '700' },
|
|
35
|
+
header_m_bold: { fontSize: 28, fontWeight: '700' },
|
|
36
|
+
header_default_bold: { fontSize: 24, fontWeight: '700' },
|
|
37
|
+
header_s_semibold: { fontSize: 20, fontWeight: '600' },
|
|
38
|
+
header_xs_semibold: { fontSize: 18, fontWeight: '600' },
|
|
39
|
+
body_default_regular: { fontSize: 16, fontWeight: '400' },
|
|
40
|
+
body_default_regularstrikethrought: { fontSize: 16, fontWeight: '400' },
|
|
41
|
+
description_default_regular: { fontSize: 14, fontWeight: '400' },
|
|
42
|
+
description_default_regularstrikethrought: { fontSize: 14, fontWeight: '400' },
|
|
43
|
+
description_xs_regular: { fontSize: 12, fontWeight: '400' },
|
|
44
|
+
description_xs_regularstrikethrought: { fontSize: 12, fontWeight: '400' },
|
|
45
|
+
label_default_medium: { fontSize: 16, fontWeight: '500' },
|
|
46
|
+
label_s_medium: { fontSize: 14, fontWeight: '500' },
|
|
47
|
+
label_xs_medium: { fontSize: 12, fontWeight: '500' },
|
|
48
|
+
action_default_bold: { fontSize: 16, fontWeight: '700' },
|
|
49
|
+
action_s_bold: { fontSize: 14, fontWeight: '700' },
|
|
50
|
+
action_xs_bold: { fontSize: 12, fontWeight: '700' },
|
|
51
|
+
action_xxs_bold: { fontSize: 11, fontWeight: '700' },
|
|
32
52
|
};
|
|
33
53
|
|
|
34
|
-
const
|
|
35
|
-
{
|
|
36
|
-
{
|
|
37
|
-
{
|
|
38
|
-
{
|
|
39
|
-
{
|
|
40
|
-
{
|
|
41
|
-
{ name: 'error', color: '#FF1744' },
|
|
54
|
+
const COLOR_PRESETS = [
|
|
55
|
+
{ key: 'default', value: '#1A1A1A' },
|
|
56
|
+
{ key: 'secondary', value: '#6B7280' },
|
|
57
|
+
{ key: 'disable', value: '#9CA3AF' },
|
|
58
|
+
{ key: 'momoPink', value: '#D82D8B' },
|
|
59
|
+
{ key: 'success', value: '#16A34A' },
|
|
60
|
+
{ key: 'error', value: '#DC2626' },
|
|
42
61
|
];
|
|
43
62
|
|
|
44
|
-
type Tab = 'typography' | 'color';
|
|
45
|
-
|
|
46
63
|
export default function App() {
|
|
47
|
-
const [
|
|
64
|
+
const [activeColor, setActiveColor] = useState(COLOR_PRESETS[0].value);
|
|
65
|
+
|
|
66
|
+
const rows = useMemo(() => TYPOGRAPHY, []);
|
|
48
67
|
|
|
49
68
|
return (
|
|
50
|
-
<
|
|
69
|
+
<SafeAreaView style={styles.safeArea}>
|
|
51
70
|
<StatusBar barStyle="dark-content" />
|
|
52
71
|
<View style={styles.header}>
|
|
53
|
-
<Text style={styles.title}>Text</Text>
|
|
54
|
-
<Text style={styles.subtitle}
|
|
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
|
-
))}
|
|
72
|
+
<Text style={styles.title}>Text Screen (Expo Preview)</Text>
|
|
73
|
+
<Text style={styles.subtitle}>Based on app/screens/Text/index.tsx</Text>
|
|
69
74
|
</View>
|
|
70
75
|
|
|
71
76
|
<ScrollView contentContainerStyle={styles.content}>
|
|
72
|
-
{
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
{style.fontSize}px / {style.fontWeight} / LH {style.lineHeight}
|
|
90
|
-
{style.textDecorationLine ? ' / strikethrough' : ''}
|
|
91
|
-
</Text>
|
|
92
|
-
</View>
|
|
93
|
-
))}
|
|
94
|
-
</View>
|
|
95
|
-
)}
|
|
77
|
+
<Text style={styles.sectionTitle}>Color</Text>
|
|
78
|
+
<View style={styles.colorRow}>
|
|
79
|
+
{COLOR_PRESETS.map(color => {
|
|
80
|
+
const selected = activeColor === color.value;
|
|
81
|
+
return (
|
|
82
|
+
<TouchableOpacity
|
|
83
|
+
key={color.key}
|
|
84
|
+
style={[styles.colorChip, selected && styles.colorChipSelected]}
|
|
85
|
+
onPress={() => setActiveColor(color.value)}
|
|
86
|
+
activeOpacity={0.8}
|
|
87
|
+
>
|
|
88
|
+
<View style={[styles.swatch, { backgroundColor: color.value }]} />
|
|
89
|
+
<Text style={styles.colorLabel}>{color.key}</Text>
|
|
90
|
+
</TouchableOpacity>
|
|
91
|
+
);
|
|
92
|
+
})}
|
|
93
|
+
</View>
|
|
96
94
|
|
|
97
|
-
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
95
|
+
<Text style={styles.sectionTitle}>Typography</Text>
|
|
96
|
+
{rows.map(name => {
|
|
97
|
+
const typo = TYPO_STYLE[name];
|
|
98
|
+
const isStrike = name.includes('strikethrought');
|
|
99
|
+
return (
|
|
100
|
+
<View key={name} style={styles.row}>
|
|
101
|
+
<Text
|
|
102
|
+
style={[
|
|
103
|
+
styles.demoText,
|
|
104
|
+
{
|
|
105
|
+
color: activeColor,
|
|
106
|
+
fontSize: typo?.fontSize ?? 14,
|
|
107
|
+
fontWeight: typo?.fontWeight ?? '400',
|
|
108
|
+
textDecorationLine: isStrike ? 'line-through' : 'none',
|
|
109
|
+
},
|
|
110
|
+
]}
|
|
111
|
+
>
|
|
112
|
+
{name}
|
|
113
|
+
</Text>
|
|
114
|
+
</View>
|
|
115
|
+
);
|
|
116
|
+
})}
|
|
117
117
|
</ScrollView>
|
|
118
|
-
</
|
|
118
|
+
</SafeAreaView>
|
|
119
119
|
);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
const styles = StyleSheet.create({
|
|
123
|
-
|
|
123
|
+
safeArea: {
|
|
124
|
+
flex: 1,
|
|
125
|
+
backgroundColor: '#FFFFFF',
|
|
126
|
+
},
|
|
124
127
|
header: {
|
|
125
|
-
|
|
126
|
-
|
|
128
|
+
paddingHorizontal: 16,
|
|
129
|
+
paddingTop: 8,
|
|
127
130
|
paddingBottom: 12,
|
|
128
|
-
backgroundColor: '#fff',
|
|
129
131
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
130
|
-
borderBottomColor: '#
|
|
132
|
+
borderBottomColor: '#E5E7EB',
|
|
131
133
|
},
|
|
132
|
-
title: {
|
|
133
|
-
|
|
134
|
-
|
|
134
|
+
title: {
|
|
135
|
+
fontSize: 20,
|
|
136
|
+
fontWeight: '700',
|
|
137
|
+
color: '#111827',
|
|
138
|
+
},
|
|
139
|
+
subtitle: {
|
|
140
|
+
marginTop: 4,
|
|
141
|
+
fontSize: 13,
|
|
142
|
+
color: '#6B7280',
|
|
143
|
+
},
|
|
144
|
+
content: {
|
|
145
|
+
padding: 16,
|
|
146
|
+
paddingBottom: 40,
|
|
147
|
+
},
|
|
148
|
+
sectionTitle: {
|
|
149
|
+
fontSize: 15,
|
|
150
|
+
fontWeight: '700',
|
|
151
|
+
color: '#111827',
|
|
152
|
+
marginBottom: 10,
|
|
153
|
+
marginTop: 8,
|
|
154
|
+
},
|
|
155
|
+
colorRow: {
|
|
135
156
|
flexDirection: 'row',
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
paddingBottom: 8,
|
|
157
|
+
flexWrap: 'wrap',
|
|
158
|
+
marginBottom: 18,
|
|
139
159
|
gap: 8,
|
|
140
160
|
},
|
|
141
|
-
|
|
161
|
+
colorChip: {
|
|
162
|
+
borderWidth: 1,
|
|
163
|
+
borderColor: '#E5E7EB',
|
|
164
|
+
borderRadius: 10,
|
|
142
165
|
paddingVertical: 8,
|
|
143
|
-
paddingHorizontal:
|
|
144
|
-
|
|
145
|
-
|
|
166
|
+
paddingHorizontal: 10,
|
|
167
|
+
flexDirection: 'row',
|
|
168
|
+
alignItems: 'center',
|
|
169
|
+
backgroundColor: '#FFF',
|
|
146
170
|
},
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
171
|
+
colorChipSelected: {
|
|
172
|
+
borderColor: '#111827',
|
|
173
|
+
},
|
|
174
|
+
swatch: {
|
|
175
|
+
width: 12,
|
|
176
|
+
height: 12,
|
|
177
|
+
borderRadius: 999,
|
|
178
|
+
marginRight: 6,
|
|
179
|
+
},
|
|
180
|
+
colorLabel: {
|
|
181
|
+
fontSize: 12,
|
|
182
|
+
color: '#111827',
|
|
153
183
|
fontWeight: '600',
|
|
154
|
-
color: '#1A1A1A',
|
|
155
|
-
marginBottom: 12,
|
|
156
184
|
},
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
marginBottom: 8,
|
|
185
|
+
row: {
|
|
186
|
+
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
187
|
+
borderBottomColor: '#E5E7EB',
|
|
188
|
+
paddingVertical: 10,
|
|
162
189
|
},
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
backgroundColor: '#fff',
|
|
166
|
-
borderRadius: 12,
|
|
167
|
-
padding: 16,
|
|
168
|
-
marginBottom: 8,
|
|
190
|
+
demoText: {
|
|
191
|
+
includeFontPadding: false,
|
|
169
192
|
},
|
|
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
193
|
});
|