@wireservers-ui/react-natives 2.0.0 → 2.0.2-rc.0

package/bin/cli.js

@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+/* eslint-env node */
+/* global require, process, console */
 
 const { execSync } = require("child_process");
 const fs = require("fs");
@@ -6,6 +8,7 @@ const path = require("path");
 
 const args = process.argv.slice(2);
 const command = args[0];
+const force = args.includes("--force");
 
 if (command !== "init") {
   console.error(`Unknown command: ${command}`);
@@ -15,6 +18,36 @@ if (command !== "init") {
 
 const cwd = process.cwd();
 
+function isExpoProject(dir) {
+  const pkgPath = path.join(dir, "package.json");
+  if (!fs.existsSync(pkgPath)) return false;
+
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+    const deps = {
+      ...(pkg.dependencies || {}),
+      ...(pkg.devDependencies || {}),
+    };
+    return Boolean(deps.expo || deps["expo-router"] || deps["react-native"]);
+  } catch {
+    return false;
+  }
+}
+
+if (!isExpoProject(cwd)) {
+  console.error(
+    "\n❌ @wireservers-ui/react-natives init must be run inside an Expo project folder.",
+  );
+  console.error("   Example:");
+  console.error("   mkdir -p demos/react-natives");
+  console.error(
+    "   npx create-expo-app@latest demos/react-natives/project --template blank-typescript",
+  );
+  console.error("   cd demos/react-natives/project");
+  console.error("   npx @wireservers-ui/react-natives@2.0.1 init\n");
+  process.exit(1);
+}
+
 // ── Detect package manager ─────────────────────────────────────────────────
 function detectPackageManager() {
   if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) return "pnpm";
@@ -83,6 +116,7 @@ const reactDomPackage = reactVersion
 
 const peers = [
   "nativewind@^4",
+  "babel-preset-expo",
   "tailwindcss@^3",
   "tailwind-variants",
   "tailwind-merge",
@@ -272,11 +306,25 @@ writeIfMissing(
 );
 
 // ── 6. Create/update metro.config.js ───────────────────────────────────────
-const metroConfig = `const { getDefaultConfig } = require("expo/metro-config");
+const metroConfig = `/* eslint-env node */
+const path = require("path");
+const { getDefaultConfig } = require("expo/metro-config");
 const { withNativeWind } = require("nativewind/metro");
 
 const config = getDefaultConfig(__dirname);
 
+config.resolver.unstable_enableSymlinks = true;
+config.resolver.nodeModulesPaths = [path.resolve(__dirname, "node_modules")];
+
+try {
+  const wsuiPackagePath = path.dirname(
+    require.resolve("@wireservers-ui/react-natives/package.json"),
+  );
+  config.watchFolders = [...new Set([...(config.watchFolders || []), wsuiPackagePath])];
+} catch {
+  // No-op if package is not resolvable yet.
+}
+
 module.exports = withNativeWind(config, { input: "./global.css" });
 `;
 
@@ -340,7 +388,7 @@ export default function App() {
 }
 `;
 
-writeFile("App.tsx", appTsx);
+writeStarterFile("App.tsx", appTsx);
 
 // ── Done ───────────────────────────────────────────────────────────────────
 console.log("\n✅ Setup complete!\n");
@@ -357,12 +405,16 @@ console.log("     npx expo start --clear\n");
 // ── Helpers ────────────────────────────────────────────────────────────────
 function writeFile(name, content) {
   const filePath = path.join(cwd, name);
-  if (fs.existsSync(filePath)) {
-    console.log(`   ⏭️  ${name} already exists, skipping`);
+  if (fs.existsSync(filePath) && !force) {
+    console.log(
+      `   ⏭️  ${name} already exists, skipping (use --force to overwrite)`,
+    );
     return;
   }
+
+  const action = fs.existsSync(filePath) ? "Updated" : "Created";
   fs.writeFileSync(filePath, content, "utf8");
-  console.log(`   ✏️  Created ${name}`);
+  console.log(`   ✏️  ${action} ${name}`);
 }
 
 function writeIfMissing(name, content) {
@@ -374,3 +426,29 @@ function writeIfMissing(name, content) {
   fs.writeFileSync(filePath, content, "utf8");
   console.log(`   ✏️  Created ${name}`);
 }
+
+function writeStarterFile(name, content) {
+  const filePath = path.join(cwd, name);
+  if (!fs.existsSync(filePath)) {
+    fs.writeFileSync(filePath, content, "utf8");
+    console.log(`   ✏️  Created ${name}`);
+    return;
+  }
+
+  const existing = fs.readFileSync(filePath, "utf8");
+  if (looksLikeDefaultExpoScreen(existing)) {
+    fs.writeFileSync(filePath, content, "utf8");
+    console.log(`   ✏️  Updated ${name} with WireServers slider demo`);
+    return;
+  }
+
+  console.log(`   ⏭️  ${name} has custom content, keeping existing file`);
+}
+
+function looksLikeDefaultExpoScreen(source) {
+  return (
+    source.includes("Open up App.tsx") ||
+    source.includes("Edit App.tsx") ||
+    source.includes("StatusBar")
+  );
+}

package/bin/init.js

@@ -0,0 +1,470 @@
+#!/usr/bin/env node
+/* eslint-env node */
+/* global require, process, console */
+
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const cwd = process.cwd();
+const force = process.argv.includes("--force");
+
+const green = (s) => `\x1b[32m${s}\x1b[0m`;
+const yellow = (s) => `\x1b[33m${s}\x1b[0m`;
+const cyan = (s) => `\x1b[36m${s}\x1b[0m`;
+const bold = (s) => `\x1b[1m${s}\x1b[0m`;
+const dim = (s) => `\x1b[2m${s}\x1b[0m`;
+
+function write(filename, content) {
+  const filepath = path.join(cwd, filename);
+  if (fs.existsSync(filepath) && !force) {
+    console.log(
+      yellow("  skip  ") +
+        filename +
+        dim(" (already exists — use --force to overwrite)"),
+    );
+    return;
+  }
+  fs.mkdirSync(path.dirname(filepath), { recursive: true });
+  fs.writeFileSync(filepath, content, "utf8");
+  console.log(green("  create") + " " + filename);
+}
+
+function writeStarter(filename, content) {
+  const filepath = path.join(cwd, filename);
+  if (!fs.existsSync(filepath) || force) {
+    fs.mkdirSync(path.dirname(filepath), { recursive: true });
+    fs.writeFileSync(filepath, content, "utf8");
+    console.log(green("  create") + " " + filename);
+    return;
+  }
+
+  const existing = fs.readFileSync(filepath, "utf8");
+  if (looksLikeDefaultExpoStarter(existing)) {
+    fs.writeFileSync(filepath, content, "utf8");
+    console.log(green("  update") + " " + filename);
+    return;
+  }
+
+  console.log(
+    yellow("  skip  ") +
+      filename +
+      dim(" (custom content detected — use --force to overwrite)"),
+  );
+}
+
+function looksLikeDefaultExpoStarter(source) {
+  return (
+    source.includes("Open up App.tsx") ||
+    source.includes("Edit App.tsx") ||
+    source.includes("StatusBar") ||
+    source.includes("ParallaxScrollView") ||
+    source.includes("HelloWave")
+  );
+}
+
+// ─── Detect project type ──────────────────────────────────────────────────────
+
+const hasExpoRouter = fs.existsSync(path.join(cwd, "app"));
+
+const tailwindContent = hasExpoRouter
+  ? ['    "./app/**/*.{ts,tsx}"', '    "./components/**/*.{ts,tsx}"']
+  : ['    "./App.{ts,tsx}"', '    "./components/**/*.{ts,tsx}"'];
+
+// ─── Generated file contents ──────────────────────────────────────────────────
+
+const TAILWIND_CONFIG = `const wirePreset = require("@wireservers-ui/react-natives/tailwind-preset");
+module.exports = {
+  content: [
+${tailwindContent.join(",\n")},
+    "./node_modules/@wireservers-ui/react-natives/src/**/*.{ts,tsx}",
+  ],
+  presets: [wirePreset],
+};
+`;
+
+const GLOBAL_CSS = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary-0: 228 228 255;
+  --color-primary-50: 206 204 255;
+  --color-primary-100: 183 180 255;
+  --color-primary-200: 159 155 255;
+  --color-primary-300: 134 128 255;
+  --color-primary-400: 108 99 243;
+  --color-primary-500: 80 70 230;
+  --color-primary-600: 62 53 205;
+  --color-primary-700: 46 38 180;
+  --color-primary-800: 33 26 155;
+  --color-primary-900: 22 17 130;
+  --color-primary-950: 15 10 105;
+
+  --color-secondary-0: 253 253 253;
+  --color-secondary-50: 243 243 243;
+  --color-secondary-100: 233 233 233;
+  --color-secondary-200: 213 213 213;
+  --color-secondary-300: 193 193 193;
+  --color-secondary-400: 163 163 163;
+  --color-secondary-500: 115 115 115;
+  --color-secondary-600: 82 82 82;
+  --color-secondary-700: 64 64 64;
+  --color-secondary-800: 38 38 38;
+  --color-secondary-900: 23 23 23;
+  --color-secondary-950: 10 10 10;
+
+  --color-tertiary-50: 255 244 236;
+  --color-tertiary-100: 255 225 204;
+  --color-tertiary-200: 255 197 153;
+  --color-tertiary-300: 255 168 102;
+  --color-tertiary-400: 255 140 51;
+  --color-tertiary-500: 255 111 0;
+  --color-tertiary-600: 219 93 0;
+  --color-tertiary-700: 183 76 0;
+  --color-tertiary-800: 146 60 0;
+  --color-tertiary-900: 110 44 0;
+  --color-tertiary-950: 73 29 0;
+
+  --color-error-0: 255 242 242;
+  --color-error-50: 254 226 226;
+  --color-error-100: 254 202 202;
+  --color-error-200: 252 165 165;
+  --color-error-300: 248 113 113;
+  --color-error-400: 239 68 68;
+  --color-error-500: 220 38 38;
+  --color-error-600: 185 28 28;
+  --color-error-700: 153 27 27;
+  --color-error-800: 127 29 29;
+  --color-error-900: 100 20 20;
+  --color-error-950: 69 10 10;
+
+  --color-success-0: 240 253 244;
+  --color-success-50: 220 252 231;
+  --color-success-100: 187 247 208;
+  --color-success-200: 134 239 172;
+  --color-success-300: 74 222 128;
+  --color-success-400: 34 197 94;
+  --color-success-500: 22 163 74;
+  --color-success-600: 21 128 61;
+  --color-success-700: 22 101 52;
+  --color-success-800: 20 83 45;
+  --color-success-900: 17 68 37;
+  --color-success-950: 5 46 22;
+
+  --color-warning-0: 255 252 240;
+  --color-warning-50: 254 249 195;
+  --color-warning-100: 254 240 138;
+  --color-warning-200: 253 224 71;
+  --color-warning-300: 250 204 21;
+  --color-warning-400: 234 179 8;
+  --color-warning-500: 202 138 4;
+  --color-warning-600: 161 98 7;
+  --color-warning-700: 133 77 14;
+  --color-warning-800: 113 63 18;
+  --color-warning-900: 90 52 18;
+  --color-warning-950: 66 32 6;
+
+  --color-info-0: 240 249 255;
+  --color-info-50: 224 242 254;
+  --color-info-100: 186 230 253;
+  --color-info-200: 125 211 252;
+  --color-info-300: 56 189 248;
+  --color-info-400: 14 165 233;
+  --color-info-500: 2 132 199;
+  --color-info-600: 3 105 161;
+  --color-info-700: 7 89 133;
+  --color-info-800: 12 74 110;
+  --color-info-900: 12 64 93;
+  --color-info-950: 8 47 73;
+
+  --color-typography-0: 255 255 255;
+  --color-typography-50: 245 245 245;
+  --color-typography-100: 229 229 229;
+  --color-typography-200: 212 212 212;
+  --color-typography-300: 163 163 163;
+  --color-typography-400: 140 140 140;
+  --color-typography-500: 115 115 115;
+  --color-typography-600: 82 82 82;
+  --color-typography-700: 64 64 64;
+  --color-typography-800: 38 38 38;
+  --color-typography-900: 23 23 23;
+  --color-typography-950: 10 10 10;
+
+  --color-outline-0: 255 255 255;
+  --color-outline-50: 245 245 245;
+  --color-outline-100: 229 229 229;
+  --color-outline-200: 212 212 212;
+  --color-outline-300: 163 163 163;
+  --color-outline-400: 140 140 140;
+  --color-outline-500: 115 115 115;
+  --color-outline-600: 82 82 82;
+  --color-outline-700: 64 64 64;
+  --color-outline-800: 38 38 38;
+  --color-outline-900: 23 23 23;
+  --color-outline-950: 10 10 10;
+
+  --color-background-0: 255 255 255;
+  --color-background-50: 246 246 246;
+  --color-background-100: 237 237 237;
+  --color-background-200: 219 219 219;
+  --color-background-300: 185 185 185;
+  --color-background-400: 163 163 163;
+  --color-background-500: 140 140 140;
+  --color-background-600: 115 115 115;
+  --color-background-700: 82 82 82;
+  --color-background-800: 64 64 64;
+  --color-background-900: 38 38 38;
+  --color-background-950: 23 23 23;
+  --color-background-error: 254 226 226;
+  --color-background-warning: 254 249 195;
+  --color-background-muted: 245 245 245;
+  --color-background-success: 220 252 231;
+  --color-background-info: 224 242 254;
+
+  --color-indicator-primary: 80 70 230;
+  --color-indicator-info: 2 132 199;
+  --color-indicator-error: 220 38 38;
+}
+`;
+
+const METRO_CONFIG = `/* eslint-env node */
+const path = require("path");
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+const config = getDefaultConfig(__dirname);
+
+config.resolver.unstable_enableSymlinks = true;
+config.resolver.nodeModulesPaths = [path.resolve(__dirname, "node_modules")];
+
+try {
+  const wsuiPackagePath = path.dirname(
+    require.resolve("@wireservers-ui/react-natives/package.json"),
+  );
+  config.watchFolders = [...new Set([...(config.watchFolders || []), wsuiPackagePath])];
+} catch {
+  // No-op if package is not resolvable yet.
+}
+
+module.exports = withNativeWind(config, { input: "./global.css" });
+`;
+
+const BABEL_CONFIG = `module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};
+`;
+
+const NATIVEWIND_ENV = `/// <reference types="nativewind/types" />\n`;
+
+const APP_TSX = `import "./global.css";
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+import {
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+} from "@wireservers-ui/react-natives";
+
+export default function App() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <View className="flex-1 items-center justify-center bg-background-0 px-8">
+      <Text className="text-2xl font-bold text-typography-900 mb-2">
+        WireServers Slider
+      </Text>
+      <Text className="text-base text-typography-500 mb-8">{value}%</Text>
+
+      <View className="w-full max-w-xs">
+        <Slider value={value} onValueChange={setValue} min={0} max={100} size="lg">
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </View>
+    </View>
+  );
+}
+`;
+
+const ROUTER_INDEX_TSX = `import "../global.css";
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+import {
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+} from "@wireservers-ui/react-natives";
+
+export default function HomeScreen() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <View className="flex-1 items-center justify-center bg-background-0 px-8">
+      <Text className="text-2xl font-bold text-typography-900 mb-2">
+        WireServers Slider
+      </Text>
+      <Text className="text-base text-typography-500 mb-8">{value}%</Text>
+
+      <View className="w-full max-w-xs">
+        <Slider value={value} onValueChange={setValue} min={0} max={100} size="lg">
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </View>
+    </View>
+  );
+}
+`;
+
+// ─── Metro Windows ESM patch ──────────────────────────────────────────────────
+//
+// Metro calls `await import(absolutePath)` with a raw Windows path (D:\...).
+// Node 22+'s ESM loader requires file:// URLs on Windows, so this throws
+// ERR_UNSUPPORTED_ESM_URL_SCHEME. The patch converts the path via pathToFileURL.
+// It lives in .metro-patch.js and runs as a postinstall script so it survives
+// future `npm install` calls that would overwrite node_modules.
+
+const METRO_PATCH_SCRIPT = `#!/usr/bin/env node
+'use strict';
+const fs   = require('fs');
+const path = require('path');
+
+const target = path.join(__dirname, 'node_modules/metro-config/src/loadConfig.js');
+if (!fs.existsSync(target)) process.exit(0);
+
+const src = fs.readFileSync(target, 'utf8');
+if (src.includes('pathToFileURL')) process.exit(0); // already patched
+
+const patched = src.replace(
+  /await import\\(absolutePath\\)/g,
+  'await import(require("url").pathToFileURL(absolutePath).href)'
+);
+if (patched === src) process.exit(0); // pattern not found — nothing to do
+
+fs.writeFileSync(target, patched, 'utf8');
+console.log('  patched metro-config/src/loadConfig.js (Windows ESM URL fix)');
+`;
+
+// ─── babel.config.js ─────────────────────────────────────────────────────────
+
+function handleBabelConfig() {
+  const filepath = path.join(cwd, "babel.config.js");
+
+  if (!fs.existsSync(filepath)) {
+    fs.writeFileSync(filepath, BABEL_CONFIG, "utf8");
+    console.log(green("  create") + " babel.config.js");
+    return;
+  }
+
+  const existing = fs.readFileSync(filepath, "utf8");
+  if (
+    existing.includes("jsxImportSource") &&
+    existing.includes("nativewind/babel")
+  ) {
+    console.log(green("  ok    ") + " babel.config.js");
+    return;
+  }
+
+  // create-expo-app ships a single-preset babel.config.js — overwrite it
+  if (/presets:\s*\[['"]babel-preset-expo['"]\]/.test(existing)) {
+    fs.writeFileSync(filepath, BABEL_CONFIG, "utf8");
+    console.log(green("  update") + " babel.config.js");
+    return;
+  }
+
+  // Complex existing config — show manual instructions
+  console.log(
+    yellow("  manual") + " babel.config.js — add NativeWind manually:",
+  );
+  console.log(
+    dim(
+      '    presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"]',
+    ),
+  );
+}
+
+// ─── package.json — add postinstall ──────────────────────────────────────────
+
+function addPostinstall() {
+  const pkgPath = path.join(cwd, "package.json");
+  if (!fs.existsSync(pkgPath)) return;
+
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  pkg.scripts = pkg.scripts || {};
+
+  const existing = pkg.scripts.postinstall || "";
+  if (existing.includes(".metro-patch.js")) {
+    console.log(green("  ok    ") + " package.json postinstall");
+    return;
+  }
+
+  pkg.scripts.postinstall = existing
+    ? `${existing} && node .metro-patch.js`
+    : "node .metro-patch.js";
+
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
+  console.log(green("  update") + " package.json postinstall");
+}
+
+// ─── Install nativewind + tailwindcss ────────────────────────────────────────
+//
+// Runs npm install which also triggers postinstall, applying the Metro patch.
+
+function installDeps() {
+  console.log(cyan("\n  Installing required setup dependencies...\n"));
+  try {
+    execSync("npm install nativewind@4 tailwindcss@3 babel-preset-expo", {
+      cwd,
+      stdio: "inherit",
+    });
+  } catch {
+    console.log(
+      yellow("\n  warn  ") +
+        " npm install failed — run it manually to finish setup",
+    );
+  }
+}
+
+// ─── Run ─────────────────────────────────────────────────────────────────────
+
+console.log(bold("\n@wireservers-ui/react-natives init\n"));
+
+if (hasExpoRouter) {
+  console.log(cyan("  Detected Expo Router") + "\n");
+}
+
+write("tailwind.config.js", TAILWIND_CONFIG);
+write("global.css", GLOBAL_CSS);
+write("metro.config.js", METRO_CONFIG);
+handleBabelConfig();
+write("nativewind-env.d.ts", NATIVEWIND_ENV);
+if (hasExpoRouter) {
+  writeStarter("app/index.tsx", ROUTER_INDEX_TSX);
+} else {
+  writeStarter("App.tsx", APP_TSX);
+}
+write(".metro-patch.js", METRO_PATCH_SCRIPT);
+addPostinstall();
+installDeps();
+
+console.log(
+  "\n" +
+    bold("Done.") +
+    " Run " +
+    cyan("npx expo start --clear") +
+    " to get started.\n",
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireservers-ui/react-natives",
-  "version": "2.0.0",
+  "version": "2.0.2-rc.0",
   "description": "A comprehensive React Native component library built with NativeWind and Tailwind Variants",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/accordion/accordion-content.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useAccordionContext } from './accordion';
-import { useAccordionItemContext } from './accordion-item';
-import type { AccordionContentProps } from './types';
-import { accordionContentStyle } from './styles';
-
-export const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AccordionContentProps
->(({ className, children, ...props }, ref) => {
-  const { size } = useAccordionContext();
-  const { isExpanded } = useAccordionItemContext();
-
-  if (!isExpanded) {
-    return null;
-  }
-
-  return (
-    <View
-      ref={ref}
-      className={accordionContentStyle({ size, class: className })}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-});
-
-AccordionContent.displayName = 'AccordionContent';
+import React from 'react';
+import { View } from 'react-native';
+import { useAccordionContext } from './accordion';
+import { useAccordionItemContext } from './accordion-item';
+import type { AccordionContentProps } from './types';
+import { accordionContentStyle } from './styles';
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionContentProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useAccordionContext();
+  const { isExpanded } = useAccordionItemContext();
+
+  if (!isExpanded) {
+    return null;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={accordionContentStyle({ size, class: className })}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+AccordionContent.displayName = 'AccordionContent';