@wireservers-ui/react-natives 1.0.1 → 2.0.0
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/CHANGELOG.md +58 -0
- package/README.md +401 -99
- package/bin/cli.js +376 -376
- package/package.json +6 -2
package/bin/cli.js
CHANGED
|
@@ -1,376 +1,376 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
const { execSync } = require("child_process");
|
|
4
|
-
const fs = require("fs");
|
|
5
|
-
const path = require("path");
|
|
6
|
-
|
|
7
|
-
const args = process.argv.slice(2);
|
|
8
|
-
const command = args[0];
|
|
9
|
-
|
|
10
|
-
if (command !== "init") {
|
|
11
|
-
console.error(`Unknown command: ${command}`);
|
|
12
|
-
console.error("Usage: npx @wireservers-ui/react-natives init");
|
|
13
|
-
process.exit(1);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
const cwd = process.cwd();
|
|
17
|
-
|
|
18
|
-
// ── Detect package manager ─────────────────────────────────────────────────
|
|
19
|
-
function detectPackageManager() {
|
|
20
|
-
if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
|
|
21
|
-
if (fs.existsSync(path.join(cwd, "yarn.lock"))) return "yarn";
|
|
22
|
-
if (fs.existsSync(path.join(cwd, "bun.lockb"))) return "bun";
|
|
23
|
-
return "npm";
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const pm = detectPackageManager();
|
|
27
|
-
const installCmd = pm === "yarn" ? "yarn add" : `${pm} install`;
|
|
28
|
-
let needsReinstall = false;
|
|
29
|
-
|
|
30
|
-
function getInstalledReactVersion() {
|
|
31
|
-
const reactPkgPath = path.join(cwd, "node_modules", "react", "package.json");
|
|
32
|
-
if (!fs.existsSync(reactPkgPath)) return null;
|
|
33
|
-
|
|
34
|
-
try {
|
|
35
|
-
const reactPkg = JSON.parse(fs.readFileSync(reactPkgPath, "utf8"));
|
|
36
|
-
return typeof reactPkg.version === "string" ? reactPkg.version : null;
|
|
37
|
-
} catch {
|
|
38
|
-
return null;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
console.log(`\n🚀 Initializing @wireservers-ui/react-natives...\n`);
|
|
43
|
-
console.log(` Package manager: ${pm}`);
|
|
44
|
-
|
|
45
|
-
// ── 0. Create .npmrc for pnpm (Metro needs hoisted modules) ────────────────
|
|
46
|
-
if (pm === "pnpm") {
|
|
47
|
-
const npmrcPath = path.join(cwd, ".npmrc");
|
|
48
|
-
const npmrcLine = "node-linker=hoisted";
|
|
49
|
-
if (fs.existsSync(npmrcPath)) {
|
|
50
|
-
const existing = fs.readFileSync(npmrcPath, "utf8");
|
|
51
|
-
if (!existing.includes("node-linker")) {
|
|
52
|
-
fs.appendFileSync(npmrcPath, `\n${npmrcLine}\n`, "utf8");
|
|
53
|
-
console.log(
|
|
54
|
-
" ✏️ Added node-linker=hoisted to .npmrc (required by Metro)",
|
|
55
|
-
);
|
|
56
|
-
needsReinstall = true;
|
|
57
|
-
}
|
|
58
|
-
} else {
|
|
59
|
-
fs.writeFileSync(npmrcPath, `${npmrcLine}\n`, "utf8");
|
|
60
|
-
console.log(
|
|
61
|
-
" ✏️ Created .npmrc with node-linker=hoisted (required by Metro)",
|
|
62
|
-
);
|
|
63
|
-
needsReinstall = true;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// ── 1. Re-install with hoisted layout (pnpm only) ─────────────────────────
|
|
68
|
-
if (needsReinstall) {
|
|
69
|
-
console.log("\n📦 Re-installing with hoisted node_modules...\n");
|
|
70
|
-
try {
|
|
71
|
-
execSync(`${pm} install`, { cwd, stdio: "inherit" });
|
|
72
|
-
} catch {
|
|
73
|
-
console.error("Failed to reinstall. Run `pnpm install` manually.");
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
// ── 2. Install peer dependencies ───────────────────────────────────────────
|
|
78
|
-
console.log("\n📦 Installing peer dependencies...\n");
|
|
79
|
-
const reactVersion = getInstalledReactVersion();
|
|
80
|
-
const reactDomPackage = reactVersion
|
|
81
|
-
? `react-dom@${reactVersion}`
|
|
82
|
-
: "react-dom";
|
|
83
|
-
|
|
84
|
-
const peers = [
|
|
85
|
-
"nativewind@^4",
|
|
86
|
-
"tailwindcss@^3",
|
|
87
|
-
"tailwind-variants",
|
|
88
|
-
"tailwind-merge",
|
|
89
|
-
"react-native-reanimated",
|
|
90
|
-
"react-native-worklets",
|
|
91
|
-
"react-native-svg",
|
|
92
|
-
reactDomPackage,
|
|
93
|
-
"react-native-web",
|
|
94
|
-
];
|
|
95
|
-
|
|
96
|
-
try {
|
|
97
|
-
execSync(`${installCmd} ${peers.join(" ")}`, { cwd, stdio: "inherit" });
|
|
98
|
-
} catch {
|
|
99
|
-
console.error(
|
|
100
|
-
"Failed to install peer dependencies. You may need to install them manually:",
|
|
101
|
-
);
|
|
102
|
-
console.error(` ${installCmd} ${peers.join(" ")}`);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// ── 3. Create tailwind.config.js ───────────────────────────────────────────
|
|
106
|
-
const tailwindConfig = `/** @type {import('tailwindcss').Config} */
|
|
107
|
-
module.exports = {
|
|
108
|
-
content: [
|
|
109
|
-
"./App.{js,jsx,ts,tsx}",
|
|
110
|
-
"./app/**/*.{js,jsx,ts,tsx}",
|
|
111
|
-
"./components/**/*.{js,jsx,ts,tsx}",
|
|
112
|
-
"./node_modules/@wireservers-ui/react-natives/src/**/*.{js,jsx,ts,tsx}",
|
|
113
|
-
],
|
|
114
|
-
presets: [require("@wireservers-ui/react-natives/tailwind-preset")],
|
|
115
|
-
};
|
|
116
|
-
`;
|
|
117
|
-
|
|
118
|
-
writeIfMissing("tailwind.config.js", tailwindConfig);
|
|
119
|
-
|
|
120
|
-
// ── 4. Create global.css ───────────────────────────────────────────────────
|
|
121
|
-
const globalCss = `@tailwind base;
|
|
122
|
-
@tailwind components;
|
|
123
|
-
@tailwind utilities;
|
|
124
|
-
|
|
125
|
-
:root {
|
|
126
|
-
--color-primary-0: 255 255 255;
|
|
127
|
-
--color-primary-50: 238 237 253;
|
|
128
|
-
--color-primary-100: 214 211 249;
|
|
129
|
-
--color-primary-200: 172 166 242;
|
|
130
|
-
--color-primary-300: 132 122 235;
|
|
131
|
-
--color-primary-400: 105 95 233;
|
|
132
|
-
--color-primary-500: 80 70 230;
|
|
133
|
-
--color-primary-600: 63 55 198;
|
|
134
|
-
--color-primary-700: 47 41 163;
|
|
135
|
-
--color-primary-800: 33 29 128;
|
|
136
|
-
--color-primary-900: 22 20 96;
|
|
137
|
-
--color-primary-950: 13 11 64;
|
|
138
|
-
|
|
139
|
-
--color-secondary-0: 255 255 255;
|
|
140
|
-
--color-secondary-50: 241 241 243;
|
|
141
|
-
--color-secondary-100: 220 220 224;
|
|
142
|
-
--color-secondary-200: 186 186 194;
|
|
143
|
-
--color-secondary-300: 152 152 163;
|
|
144
|
-
--color-secondary-400: 121 121 137;
|
|
145
|
-
--color-secondary-500: 92 92 112;
|
|
146
|
-
--color-secondary-600: 72 72 92;
|
|
147
|
-
--color-secondary-700: 54 54 72;
|
|
148
|
-
--color-secondary-800: 38 38 54;
|
|
149
|
-
--color-secondary-900: 24 24 38;
|
|
150
|
-
--color-secondary-950: 14 14 24;
|
|
151
|
-
|
|
152
|
-
--color-tertiary-50: 250 245 255;
|
|
153
|
-
--color-tertiary-100: 243 232 255;
|
|
154
|
-
--color-tertiary-200: 222 200 252;
|
|
155
|
-
--color-tertiary-300: 196 160 246;
|
|
156
|
-
--color-tertiary-400: 168 120 238;
|
|
157
|
-
--color-tertiary-500: 140 80 228;
|
|
158
|
-
--color-tertiary-600: 114 58 200;
|
|
159
|
-
--color-tertiary-700: 90 40 170;
|
|
160
|
-
--color-tertiary-800: 68 28 138;
|
|
161
|
-
--color-tertiary-900: 48 18 106;
|
|
162
|
-
--color-tertiary-950: 30 8 72;
|
|
163
|
-
|
|
164
|
-
--color-error-0: 255 255 255;
|
|
165
|
-
--color-error-50: 254 242 242;
|
|
166
|
-
--color-error-100: 254 226 226;
|
|
167
|
-
--color-error-200: 252 165 165;
|
|
168
|
-
--color-error-300: 248 113 113;
|
|
169
|
-
--color-error-400: 240 82 82;
|
|
170
|
-
--color-error-500: 230 53 53;
|
|
171
|
-
--color-error-600: 204 37 37;
|
|
172
|
-
--color-error-700: 178 24 24;
|
|
173
|
-
--color-error-800: 150 16 16;
|
|
174
|
-
--color-error-900: 122 10 10;
|
|
175
|
-
--color-error-950: 80 5 5;
|
|
176
|
-
|
|
177
|
-
--color-success-0: 255 255 255;
|
|
178
|
-
--color-success-50: 237 252 241;
|
|
179
|
-
--color-success-100: 210 245 221;
|
|
180
|
-
--color-success-200: 147 226 172;
|
|
181
|
-
--color-success-300: 96 207 128;
|
|
182
|
-
--color-success-400: 56 189 92;
|
|
183
|
-
--color-success-500: 34 168 66;
|
|
184
|
-
--color-success-600: 24 140 52;
|
|
185
|
-
--color-success-700: 18 112 40;
|
|
186
|
-
--color-success-800: 14 88 32;
|
|
187
|
-
--color-success-900: 10 64 22;
|
|
188
|
-
--color-success-950: 5 40 12;
|
|
189
|
-
|
|
190
|
-
--color-warning-0: 255 255 255;
|
|
191
|
-
--color-warning-50: 255 249 235;
|
|
192
|
-
--color-warning-100: 255 240 198;
|
|
193
|
-
--color-warning-200: 252 217 119;
|
|
194
|
-
--color-warning-300: 247 195 56;
|
|
195
|
-
--color-warning-400: 240 176 14;
|
|
196
|
-
--color-warning-500: 220 155 6;
|
|
197
|
-
--color-warning-600: 182 123 4;
|
|
198
|
-
--color-warning-700: 145 96 4;
|
|
199
|
-
--color-warning-800: 112 72 5;
|
|
200
|
-
--color-warning-900: 82 52 6;
|
|
201
|
-
--color-warning-950: 48 30 4;
|
|
202
|
-
|
|
203
|
-
--color-info-0: 255 255 255;
|
|
204
|
-
--color-info-50: 240 248 255;
|
|
205
|
-
--color-info-100: 224 240 253;
|
|
206
|
-
--color-info-200: 168 213 248;
|
|
207
|
-
--color-info-300: 110 184 240;
|
|
208
|
-
--color-info-400: 66 158 232;
|
|
209
|
-
--color-info-500: 34 134 220;
|
|
210
|
-
--color-info-600: 22 110 190;
|
|
211
|
-
--color-info-700: 14 88 158;
|
|
212
|
-
--color-info-800: 10 68 126;
|
|
213
|
-
--color-info-900: 6 50 96;
|
|
214
|
-
--color-info-950: 2 32 64;
|
|
215
|
-
|
|
216
|
-
--color-typography-0: 255 255 255;
|
|
217
|
-
--color-typography-50: 245 245 245;
|
|
218
|
-
--color-typography-100: 229 229 229;
|
|
219
|
-
--color-typography-200: 212 212 212;
|
|
220
|
-
--color-typography-300: 163 163 163;
|
|
221
|
-
--color-typography-400: 140 140 140;
|
|
222
|
-
--color-typography-500: 115 115 115;
|
|
223
|
-
--color-typography-600: 82 82 82;
|
|
224
|
-
--color-typography-700: 64 64 64;
|
|
225
|
-
--color-typography-800: 38 38 38;
|
|
226
|
-
--color-typography-900: 23 23 23;
|
|
227
|
-
--color-typography-950: 10 10 10;
|
|
228
|
-
|
|
229
|
-
--color-outline-0: 255 255 255;
|
|
230
|
-
--color-outline-50: 245 245 245;
|
|
231
|
-
--color-outline-100: 229 229 229;
|
|
232
|
-
--color-outline-200: 212 212 212;
|
|
233
|
-
--color-outline-300: 196 196 196;
|
|
234
|
-
--color-outline-400: 163 163 163;
|
|
235
|
-
--color-outline-500: 140 140 140;
|
|
236
|
-
--color-outline-600: 115 115 115;
|
|
237
|
-
--color-outline-700: 82 82 82;
|
|
238
|
-
--color-outline-800: 51 51 51;
|
|
239
|
-
--color-outline-900: 33 33 33;
|
|
240
|
-
--color-outline-950: 18 18 18;
|
|
241
|
-
|
|
242
|
-
--color-background-0: 255 255 255;
|
|
243
|
-
--color-background-50: 249 249 249;
|
|
244
|
-
--color-background-100: 242 242 242;
|
|
245
|
-
--color-background-200: 228 228 228;
|
|
246
|
-
--color-background-300: 212 212 212;
|
|
247
|
-
--color-background-400: 189 189 189;
|
|
248
|
-
--color-background-500: 163 163 163;
|
|
249
|
-
--color-background-600: 115 115 115;
|
|
250
|
-
--color-background-700: 82 82 82;
|
|
251
|
-
--color-background-800: 51 51 51;
|
|
252
|
-
--color-background-900: 33 33 33;
|
|
253
|
-
--color-background-950: 18 18 18;
|
|
254
|
-
--color-background-error: 254 226 226;
|
|
255
|
-
--color-background-warning: 255 243 224;
|
|
256
|
-
--color-background-muted: 245 245 245;
|
|
257
|
-
--color-background-success: 228 247 235;
|
|
258
|
-
--color-background-info: 224 240 253;
|
|
259
|
-
|
|
260
|
-
--color-indicator-primary: 80 70 230;
|
|
261
|
-
--color-indicator-info: 34 134 220;
|
|
262
|
-
--color-indicator-error: 230 53 53;
|
|
263
|
-
}
|
|
264
|
-
`;
|
|
265
|
-
|
|
266
|
-
writeIfMissing("global.css", globalCss);
|
|
267
|
-
|
|
268
|
-
// ── 5. Create nativewind-env.d.ts ──────────────────────────────────────────
|
|
269
|
-
writeIfMissing(
|
|
270
|
-
"nativewind-env.d.ts",
|
|
271
|
-
'/// <reference types="nativewind/types" />\n',
|
|
272
|
-
);
|
|
273
|
-
|
|
274
|
-
// ── 6. Create/update metro.config.js ───────────────────────────────────────
|
|
275
|
-
const metroConfig = `const { getDefaultConfig } = require("expo/metro-config");
|
|
276
|
-
const { withNativeWind } = require("nativewind/metro");
|
|
277
|
-
|
|
278
|
-
const config = getDefaultConfig(__dirname);
|
|
279
|
-
|
|
280
|
-
module.exports = withNativeWind(config, { input: "./global.css" });
|
|
281
|
-
`;
|
|
282
|
-
|
|
283
|
-
writeFile("metro.config.js", metroConfig);
|
|
284
|
-
|
|
285
|
-
// ── 7. Create/update babel.config.js ───────────────────────────────────────
|
|
286
|
-
const babelConfig = `module.exports = function (api) {
|
|
287
|
-
api.cache(true);
|
|
288
|
-
return {
|
|
289
|
-
presets: [
|
|
290
|
-
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
|
291
|
-
"nativewind/babel",
|
|
292
|
-
],
|
|
293
|
-
};
|
|
294
|
-
};
|
|
295
|
-
`;
|
|
296
|
-
|
|
297
|
-
writeFile("babel.config.js", babelConfig);
|
|
298
|
-
|
|
299
|
-
// ── 8. Create the demo App.tsx ─────────────────────────────────────────────
|
|
300
|
-
const appTsx = `import "./global.css";
|
|
301
|
-
import React, { useState } from "react";
|
|
302
|
-
import { View, Text } from "react-native";
|
|
303
|
-
import {
|
|
304
|
-
Slider,
|
|
305
|
-
SliderTrack,
|
|
306
|
-
SliderFilledTrack,
|
|
307
|
-
SliderThumb,
|
|
308
|
-
} from "@wireservers-ui/react-natives";
|
|
309
|
-
|
|
310
|
-
export default function App() {
|
|
311
|
-
const [volume, setVolume] = useState(50);
|
|
312
|
-
|
|
313
|
-
return (
|
|
314
|
-
<View className="flex-1 items-center justify-center bg-background-0 px-8">
|
|
315
|
-
<Text className="text-2xl font-bold text-typography-900 mb-2">
|
|
316
|
-
Volume Control
|
|
317
|
-
</Text>
|
|
318
|
-
<Text className="text-lg text-typography-500 mb-8">
|
|
319
|
-
{volume}%
|
|
320
|
-
</Text>
|
|
321
|
-
<View className="w-full max-w-xs">
|
|
322
|
-
<Slider
|
|
323
|
-
value={volume}
|
|
324
|
-
onValueChange={setVolume}
|
|
325
|
-
min={0}
|
|
326
|
-
max={100}
|
|
327
|
-
size="lg"
|
|
328
|
-
>
|
|
329
|
-
<SliderTrack>
|
|
330
|
-
<SliderFilledTrack />
|
|
331
|
-
</SliderTrack>
|
|
332
|
-
<SliderThumb />
|
|
333
|
-
</Slider>
|
|
334
|
-
</View>
|
|
335
|
-
<Text className="text-sm text-typography-400 mt-6">
|
|
336
|
-
Drag the slider to adjust volume
|
|
337
|
-
</Text>
|
|
338
|
-
</View>
|
|
339
|
-
);
|
|
340
|
-
}
|
|
341
|
-
`;
|
|
342
|
-
|
|
343
|
-
writeFile("App.tsx", appTsx);
|
|
344
|
-
|
|
345
|
-
// ── Done ───────────────────────────────────────────────────────────────────
|
|
346
|
-
console.log("\n✅ Setup complete!\n");
|
|
347
|
-
console.log(" Created if missing (existing files were preserved):");
|
|
348
|
-
console.log(" • tailwind.config.js");
|
|
349
|
-
console.log(" • global.css (with theme variables)");
|
|
350
|
-
console.log(" • nativewind-env.d.ts");
|
|
351
|
-
console.log(" • metro.config.js");
|
|
352
|
-
console.log(" • babel.config.js");
|
|
353
|
-
console.log(" • App.tsx (volume slider demo)");
|
|
354
|
-
console.log("\n Run your app:\n");
|
|
355
|
-
console.log(" npx expo start --clear\n");
|
|
356
|
-
|
|
357
|
-
// ── Helpers ────────────────────────────────────────────────────────────────
|
|
358
|
-
function writeFile(name, content) {
|
|
359
|
-
const filePath = path.join(cwd, name);
|
|
360
|
-
if (fs.existsSync(filePath)) {
|
|
361
|
-
console.log(` ⏭️ ${name} already exists, skipping`);
|
|
362
|
-
return;
|
|
363
|
-
}
|
|
364
|
-
fs.writeFileSync(filePath, content, "utf8");
|
|
365
|
-
console.log(` ✏️ Created ${name}`);
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
function writeIfMissing(name, content) {
|
|
369
|
-
const filePath = path.join(cwd, name);
|
|
370
|
-
if (fs.existsSync(filePath)) {
|
|
371
|
-
console.log(` ⏭️ ${name} already exists, skipping`);
|
|
372
|
-
return;
|
|
373
|
-
}
|
|
374
|
-
fs.writeFileSync(filePath, content, "utf8");
|
|
375
|
-
console.log(` ✏️ Created ${name}`);
|
|
376
|
-
}
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const { execSync } = require("child_process");
|
|
4
|
+
const fs = require("fs");
|
|
5
|
+
const path = require("path");
|
|
6
|
+
|
|
7
|
+
const args = process.argv.slice(2);
|
|
8
|
+
const command = args[0];
|
|
9
|
+
|
|
10
|
+
if (command !== "init") {
|
|
11
|
+
console.error(`Unknown command: ${command}`);
|
|
12
|
+
console.error("Usage: npx @wireservers-ui/react-natives init");
|
|
13
|
+
process.exit(1);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const cwd = process.cwd();
|
|
17
|
+
|
|
18
|
+
// ── Detect package manager ─────────────────────────────────────────────────
|
|
19
|
+
function detectPackageManager() {
|
|
20
|
+
if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
|
|
21
|
+
if (fs.existsSync(path.join(cwd, "yarn.lock"))) return "yarn";
|
|
22
|
+
if (fs.existsSync(path.join(cwd, "bun.lockb"))) return "bun";
|
|
23
|
+
return "npm";
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const pm = detectPackageManager();
|
|
27
|
+
const installCmd = pm === "yarn" ? "yarn add" : `${pm} install`;
|
|
28
|
+
let needsReinstall = false;
|
|
29
|
+
|
|
30
|
+
function getInstalledReactVersion() {
|
|
31
|
+
const reactPkgPath = path.join(cwd, "node_modules", "react", "package.json");
|
|
32
|
+
if (!fs.existsSync(reactPkgPath)) return null;
|
|
33
|
+
|
|
34
|
+
try {
|
|
35
|
+
const reactPkg = JSON.parse(fs.readFileSync(reactPkgPath, "utf8"));
|
|
36
|
+
return typeof reactPkg.version === "string" ? reactPkg.version : null;
|
|
37
|
+
} catch {
|
|
38
|
+
return null;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
console.log(`\n🚀 Initializing @wireservers-ui/react-natives...\n`);
|
|
43
|
+
console.log(` Package manager: ${pm}`);
|
|
44
|
+
|
|
45
|
+
// ── 0. Create .npmrc for pnpm (Metro needs hoisted modules) ────────────────
|
|
46
|
+
if (pm === "pnpm") {
|
|
47
|
+
const npmrcPath = path.join(cwd, ".npmrc");
|
|
48
|
+
const npmrcLine = "node-linker=hoisted";
|
|
49
|
+
if (fs.existsSync(npmrcPath)) {
|
|
50
|
+
const existing = fs.readFileSync(npmrcPath, "utf8");
|
|
51
|
+
if (!existing.includes("node-linker")) {
|
|
52
|
+
fs.appendFileSync(npmrcPath, `\n${npmrcLine}\n`, "utf8");
|
|
53
|
+
console.log(
|
|
54
|
+
" ✏️ Added node-linker=hoisted to .npmrc (required by Metro)",
|
|
55
|
+
);
|
|
56
|
+
needsReinstall = true;
|
|
57
|
+
}
|
|
58
|
+
} else {
|
|
59
|
+
fs.writeFileSync(npmrcPath, `${npmrcLine}\n`, "utf8");
|
|
60
|
+
console.log(
|
|
61
|
+
" ✏️ Created .npmrc with node-linker=hoisted (required by Metro)",
|
|
62
|
+
);
|
|
63
|
+
needsReinstall = true;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// ── 1. Re-install with hoisted layout (pnpm only) ─────────────────────────
|
|
68
|
+
if (needsReinstall) {
|
|
69
|
+
console.log("\n📦 Re-installing with hoisted node_modules...\n");
|
|
70
|
+
try {
|
|
71
|
+
execSync(`${pm} install`, { cwd, stdio: "inherit" });
|
|
72
|
+
} catch {
|
|
73
|
+
console.error("Failed to reinstall. Run `pnpm install` manually.");
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// ── 2. Install peer dependencies ───────────────────────────────────────────
|
|
78
|
+
console.log("\n📦 Installing peer dependencies...\n");
|
|
79
|
+
const reactVersion = getInstalledReactVersion();
|
|
80
|
+
const reactDomPackage = reactVersion
|
|
81
|
+
? `react-dom@${reactVersion}`
|
|
82
|
+
: "react-dom";
|
|
83
|
+
|
|
84
|
+
const peers = [
|
|
85
|
+
"nativewind@^4",
|
|
86
|
+
"tailwindcss@^3",
|
|
87
|
+
"tailwind-variants",
|
|
88
|
+
"tailwind-merge",
|
|
89
|
+
"react-native-reanimated",
|
|
90
|
+
"react-native-worklets",
|
|
91
|
+
"react-native-svg",
|
|
92
|
+
reactDomPackage,
|
|
93
|
+
"react-native-web",
|
|
94
|
+
];
|
|
95
|
+
|
|
96
|
+
try {
|
|
97
|
+
execSync(`${installCmd} ${peers.join(" ")}`, { cwd, stdio: "inherit" });
|
|
98
|
+
} catch {
|
|
99
|
+
console.error(
|
|
100
|
+
"Failed to install peer dependencies. You may need to install them manually:",
|
|
101
|
+
);
|
|
102
|
+
console.error(` ${installCmd} ${peers.join(" ")}`);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// ── 3. Create tailwind.config.js ───────────────────────────────────────────
|
|
106
|
+
const tailwindConfig = `/** @type {import('tailwindcss').Config} */
|
|
107
|
+
module.exports = {
|
|
108
|
+
content: [
|
|
109
|
+
"./App.{js,jsx,ts,tsx}",
|
|
110
|
+
"./app/**/*.{js,jsx,ts,tsx}",
|
|
111
|
+
"./components/**/*.{js,jsx,ts,tsx}",
|
|
112
|
+
"./node_modules/@wireservers-ui/react-natives/src/**/*.{js,jsx,ts,tsx}",
|
|
113
|
+
],
|
|
114
|
+
presets: [require("@wireservers-ui/react-natives/tailwind-preset")],
|
|
115
|
+
};
|
|
116
|
+
`;
|
|
117
|
+
|
|
118
|
+
writeIfMissing("tailwind.config.js", tailwindConfig);
|
|
119
|
+
|
|
120
|
+
// ── 4. Create global.css ───────────────────────────────────────────────────
|
|
121
|
+
const globalCss = `@tailwind base;
|
|
122
|
+
@tailwind components;
|
|
123
|
+
@tailwind utilities;
|
|
124
|
+
|
|
125
|
+
:root {
|
|
126
|
+
--color-primary-0: 255 255 255;
|
|
127
|
+
--color-primary-50: 238 237 253;
|
|
128
|
+
--color-primary-100: 214 211 249;
|
|
129
|
+
--color-primary-200: 172 166 242;
|
|
130
|
+
--color-primary-300: 132 122 235;
|
|
131
|
+
--color-primary-400: 105 95 233;
|
|
132
|
+
--color-primary-500: 80 70 230;
|
|
133
|
+
--color-primary-600: 63 55 198;
|
|
134
|
+
--color-primary-700: 47 41 163;
|
|
135
|
+
--color-primary-800: 33 29 128;
|
|
136
|
+
--color-primary-900: 22 20 96;
|
|
137
|
+
--color-primary-950: 13 11 64;
|
|
138
|
+
|
|
139
|
+
--color-secondary-0: 255 255 255;
|
|
140
|
+
--color-secondary-50: 241 241 243;
|
|
141
|
+
--color-secondary-100: 220 220 224;
|
|
142
|
+
--color-secondary-200: 186 186 194;
|
|
143
|
+
--color-secondary-300: 152 152 163;
|
|
144
|
+
--color-secondary-400: 121 121 137;
|
|
145
|
+
--color-secondary-500: 92 92 112;
|
|
146
|
+
--color-secondary-600: 72 72 92;
|
|
147
|
+
--color-secondary-700: 54 54 72;
|
|
148
|
+
--color-secondary-800: 38 38 54;
|
|
149
|
+
--color-secondary-900: 24 24 38;
|
|
150
|
+
--color-secondary-950: 14 14 24;
|
|
151
|
+
|
|
152
|
+
--color-tertiary-50: 250 245 255;
|
|
153
|
+
--color-tertiary-100: 243 232 255;
|
|
154
|
+
--color-tertiary-200: 222 200 252;
|
|
155
|
+
--color-tertiary-300: 196 160 246;
|
|
156
|
+
--color-tertiary-400: 168 120 238;
|
|
157
|
+
--color-tertiary-500: 140 80 228;
|
|
158
|
+
--color-tertiary-600: 114 58 200;
|
|
159
|
+
--color-tertiary-700: 90 40 170;
|
|
160
|
+
--color-tertiary-800: 68 28 138;
|
|
161
|
+
--color-tertiary-900: 48 18 106;
|
|
162
|
+
--color-tertiary-950: 30 8 72;
|
|
163
|
+
|
|
164
|
+
--color-error-0: 255 255 255;
|
|
165
|
+
--color-error-50: 254 242 242;
|
|
166
|
+
--color-error-100: 254 226 226;
|
|
167
|
+
--color-error-200: 252 165 165;
|
|
168
|
+
--color-error-300: 248 113 113;
|
|
169
|
+
--color-error-400: 240 82 82;
|
|
170
|
+
--color-error-500: 230 53 53;
|
|
171
|
+
--color-error-600: 204 37 37;
|
|
172
|
+
--color-error-700: 178 24 24;
|
|
173
|
+
--color-error-800: 150 16 16;
|
|
174
|
+
--color-error-900: 122 10 10;
|
|
175
|
+
--color-error-950: 80 5 5;
|
|
176
|
+
|
|
177
|
+
--color-success-0: 255 255 255;
|
|
178
|
+
--color-success-50: 237 252 241;
|
|
179
|
+
--color-success-100: 210 245 221;
|
|
180
|
+
--color-success-200: 147 226 172;
|
|
181
|
+
--color-success-300: 96 207 128;
|
|
182
|
+
--color-success-400: 56 189 92;
|
|
183
|
+
--color-success-500: 34 168 66;
|
|
184
|
+
--color-success-600: 24 140 52;
|
|
185
|
+
--color-success-700: 18 112 40;
|
|
186
|
+
--color-success-800: 14 88 32;
|
|
187
|
+
--color-success-900: 10 64 22;
|
|
188
|
+
--color-success-950: 5 40 12;
|
|
189
|
+
|
|
190
|
+
--color-warning-0: 255 255 255;
|
|
191
|
+
--color-warning-50: 255 249 235;
|
|
192
|
+
--color-warning-100: 255 240 198;
|
|
193
|
+
--color-warning-200: 252 217 119;
|
|
194
|
+
--color-warning-300: 247 195 56;
|
|
195
|
+
--color-warning-400: 240 176 14;
|
|
196
|
+
--color-warning-500: 220 155 6;
|
|
197
|
+
--color-warning-600: 182 123 4;
|
|
198
|
+
--color-warning-700: 145 96 4;
|
|
199
|
+
--color-warning-800: 112 72 5;
|
|
200
|
+
--color-warning-900: 82 52 6;
|
|
201
|
+
--color-warning-950: 48 30 4;
|
|
202
|
+
|
|
203
|
+
--color-info-0: 255 255 255;
|
|
204
|
+
--color-info-50: 240 248 255;
|
|
205
|
+
--color-info-100: 224 240 253;
|
|
206
|
+
--color-info-200: 168 213 248;
|
|
207
|
+
--color-info-300: 110 184 240;
|
|
208
|
+
--color-info-400: 66 158 232;
|
|
209
|
+
--color-info-500: 34 134 220;
|
|
210
|
+
--color-info-600: 22 110 190;
|
|
211
|
+
--color-info-700: 14 88 158;
|
|
212
|
+
--color-info-800: 10 68 126;
|
|
213
|
+
--color-info-900: 6 50 96;
|
|
214
|
+
--color-info-950: 2 32 64;
|
|
215
|
+
|
|
216
|
+
--color-typography-0: 255 255 255;
|
|
217
|
+
--color-typography-50: 245 245 245;
|
|
218
|
+
--color-typography-100: 229 229 229;
|
|
219
|
+
--color-typography-200: 212 212 212;
|
|
220
|
+
--color-typography-300: 163 163 163;
|
|
221
|
+
--color-typography-400: 140 140 140;
|
|
222
|
+
--color-typography-500: 115 115 115;
|
|
223
|
+
--color-typography-600: 82 82 82;
|
|
224
|
+
--color-typography-700: 64 64 64;
|
|
225
|
+
--color-typography-800: 38 38 38;
|
|
226
|
+
--color-typography-900: 23 23 23;
|
|
227
|
+
--color-typography-950: 10 10 10;
|
|
228
|
+
|
|
229
|
+
--color-outline-0: 255 255 255;
|
|
230
|
+
--color-outline-50: 245 245 245;
|
|
231
|
+
--color-outline-100: 229 229 229;
|
|
232
|
+
--color-outline-200: 212 212 212;
|
|
233
|
+
--color-outline-300: 196 196 196;
|
|
234
|
+
--color-outline-400: 163 163 163;
|
|
235
|
+
--color-outline-500: 140 140 140;
|
|
236
|
+
--color-outline-600: 115 115 115;
|
|
237
|
+
--color-outline-700: 82 82 82;
|
|
238
|
+
--color-outline-800: 51 51 51;
|
|
239
|
+
--color-outline-900: 33 33 33;
|
|
240
|
+
--color-outline-950: 18 18 18;
|
|
241
|
+
|
|
242
|
+
--color-background-0: 255 255 255;
|
|
243
|
+
--color-background-50: 249 249 249;
|
|
244
|
+
--color-background-100: 242 242 242;
|
|
245
|
+
--color-background-200: 228 228 228;
|
|
246
|
+
--color-background-300: 212 212 212;
|
|
247
|
+
--color-background-400: 189 189 189;
|
|
248
|
+
--color-background-500: 163 163 163;
|
|
249
|
+
--color-background-600: 115 115 115;
|
|
250
|
+
--color-background-700: 82 82 82;
|
|
251
|
+
--color-background-800: 51 51 51;
|
|
252
|
+
--color-background-900: 33 33 33;
|
|
253
|
+
--color-background-950: 18 18 18;
|
|
254
|
+
--color-background-error: 254 226 226;
|
|
255
|
+
--color-background-warning: 255 243 224;
|
|
256
|
+
--color-background-muted: 245 245 245;
|
|
257
|
+
--color-background-success: 228 247 235;
|
|
258
|
+
--color-background-info: 224 240 253;
|
|
259
|
+
|
|
260
|
+
--color-indicator-primary: 80 70 230;
|
|
261
|
+
--color-indicator-info: 34 134 220;
|
|
262
|
+
--color-indicator-error: 230 53 53;
|
|
263
|
+
}
|
|
264
|
+
`;
|
|
265
|
+
|
|
266
|
+
writeIfMissing("global.css", globalCss);
|
|
267
|
+
|
|
268
|
+
// ── 5. Create nativewind-env.d.ts ──────────────────────────────────────────
|
|
269
|
+
writeIfMissing(
|
|
270
|
+
"nativewind-env.d.ts",
|
|
271
|
+
'/// <reference types="nativewind/types" />\n',
|
|
272
|
+
);
|
|
273
|
+
|
|
274
|
+
// ── 6. Create/update metro.config.js ───────────────────────────────────────
|
|
275
|
+
const metroConfig = `const { getDefaultConfig } = require("expo/metro-config");
|
|
276
|
+
const { withNativeWind } = require("nativewind/metro");
|
|
277
|
+
|
|
278
|
+
const config = getDefaultConfig(__dirname);
|
|
279
|
+
|
|
280
|
+
module.exports = withNativeWind(config, { input: "./global.css" });
|
|
281
|
+
`;
|
|
282
|
+
|
|
283
|
+
writeFile("metro.config.js", metroConfig);
|
|
284
|
+
|
|
285
|
+
// ── 7. Create/update babel.config.js ───────────────────────────────────────
|
|
286
|
+
const babelConfig = `module.exports = function (api) {
|
|
287
|
+
api.cache(true);
|
|
288
|
+
return {
|
|
289
|
+
presets: [
|
|
290
|
+
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
|
291
|
+
"nativewind/babel",
|
|
292
|
+
],
|
|
293
|
+
};
|
|
294
|
+
};
|
|
295
|
+
`;
|
|
296
|
+
|
|
297
|
+
writeFile("babel.config.js", babelConfig);
|
|
298
|
+
|
|
299
|
+
// ── 8. Create the demo App.tsx ─────────────────────────────────────────────
|
|
300
|
+
const appTsx = `import "./global.css";
|
|
301
|
+
import React, { useState } from "react";
|
|
302
|
+
import { View, Text } from "react-native";
|
|
303
|
+
import {
|
|
304
|
+
Slider,
|
|
305
|
+
SliderTrack,
|
|
306
|
+
SliderFilledTrack,
|
|
307
|
+
SliderThumb,
|
|
308
|
+
} from "@wireservers-ui/react-natives";
|
|
309
|
+
|
|
310
|
+
export default function App() {
|
|
311
|
+
const [volume, setVolume] = useState(50);
|
|
312
|
+
|
|
313
|
+
return (
|
|
314
|
+
<View className="flex-1 items-center justify-center bg-background-0 px-8">
|
|
315
|
+
<Text className="text-2xl font-bold text-typography-900 mb-2">
|
|
316
|
+
Volume Control
|
|
317
|
+
</Text>
|
|
318
|
+
<Text className="text-lg text-typography-500 mb-8">
|
|
319
|
+
{volume}%
|
|
320
|
+
</Text>
|
|
321
|
+
<View className="w-full max-w-xs">
|
|
322
|
+
<Slider
|
|
323
|
+
value={volume}
|
|
324
|
+
onValueChange={setVolume}
|
|
325
|
+
min={0}
|
|
326
|
+
max={100}
|
|
327
|
+
size="lg"
|
|
328
|
+
>
|
|
329
|
+
<SliderTrack>
|
|
330
|
+
<SliderFilledTrack />
|
|
331
|
+
</SliderTrack>
|
|
332
|
+
<SliderThumb />
|
|
333
|
+
</Slider>
|
|
334
|
+
</View>
|
|
335
|
+
<Text className="text-sm text-typography-400 mt-6">
|
|
336
|
+
Drag the slider to adjust volume
|
|
337
|
+
</Text>
|
|
338
|
+
</View>
|
|
339
|
+
);
|
|
340
|
+
}
|
|
341
|
+
`;
|
|
342
|
+
|
|
343
|
+
writeFile("App.tsx", appTsx);
|
|
344
|
+
|
|
345
|
+
// ── Done ───────────────────────────────────────────────────────────────────
|
|
346
|
+
console.log("\n✅ Setup complete!\n");
|
|
347
|
+
console.log(" Created if missing (existing files were preserved):");
|
|
348
|
+
console.log(" • tailwind.config.js");
|
|
349
|
+
console.log(" • global.css (with theme variables)");
|
|
350
|
+
console.log(" • nativewind-env.d.ts");
|
|
351
|
+
console.log(" • metro.config.js");
|
|
352
|
+
console.log(" • babel.config.js");
|
|
353
|
+
console.log(" • App.tsx (volume slider demo)");
|
|
354
|
+
console.log("\n Run your app:\n");
|
|
355
|
+
console.log(" npx expo start --clear\n");
|
|
356
|
+
|
|
357
|
+
// ── Helpers ────────────────────────────────────────────────────────────────
|
|
358
|
+
function writeFile(name, content) {
|
|
359
|
+
const filePath = path.join(cwd, name);
|
|
360
|
+
if (fs.existsSync(filePath)) {
|
|
361
|
+
console.log(` ⏭️ ${name} already exists, skipping`);
|
|
362
|
+
return;
|
|
363
|
+
}
|
|
364
|
+
fs.writeFileSync(filePath, content, "utf8");
|
|
365
|
+
console.log(` ✏️ Created ${name}`);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
function writeIfMissing(name, content) {
|
|
369
|
+
const filePath = path.join(cwd, name);
|
|
370
|
+
if (fs.existsSync(filePath)) {
|
|
371
|
+
console.log(` ⏭️ ${name} already exists, skipping`);
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
fs.writeFileSync(filePath, content, "utf8");
|
|
375
|
+
console.log(` ✏️ Created ${name}`);
|
|
376
|
+
}
|