@symbiote-native/cli 0.0.1 → 0.1.1

package/templates/styling/navigation/vue-tsx/stylesheet/App.tsx

@@ -1,26 +1,67 @@
 import { Screen, Stack, useStackNavigation } from '@symbiote-native/navigation/vue';
+import { ref } from 'vue';
 import { StyleSheet } from '@symbiote-native/vue';
 
-function MenuScreen() {
-  const navigation = useStackNavigation();
-
-  return (
-    <view style={styles.container}>
-      <text>Welcome to SymbioteNative!</text>
-      <pressable onPress={() => navigation.push('Details')}>
-        <text>Go to Details</text>
-      </pressable>
-    </view>
-  );
-}
-
-function DetailsScreen() {
-  return (
-    <view style={styles.container}>
-      <text>Details screen</text>
-    </view>
-  );
-}
+const MenuScreen = {
+  setup() {
+    const navigation = useStackNavigation();
+    const count = ref(0);
+
+    return () => (
+      <safe-area-view style={styles.screen}>
+        <view style={styles.brandRow}>
+          <image
+            style={[styles.brandLogo, styles.brandLogoReact]}
+            resizeMode="contain"
+            source={require('./assets/react-native-logo.png')}
+          />
+          <image style={styles.plusIcon} resizeMode="contain" source={require('./assets/plus-icon.png')} />
+          <image
+            style={[styles.brandLogo, styles.brandLogoVue]}
+            resizeMode="contain"
+            source={require('./assets/vue-logo.png')}
+          />
+        </view>
+        <text style={styles.title}>Welcome to SymbioteNative!</text>
+        <text style={styles.subtitle}>Framework-agnostic React Native, driven by Vue.</text>
+
+        <view style={styles.counterCard}>
+          <text style={styles.counterLabel}>TAPS</text>
+          <text style={styles.counterValue}>{count.value}</text>
+        </view>
+
+        <view style={styles.buttonRow}>
+          <pressable style={styles.buttonPrimary} onPress={() => count.value++}>
+            <text style={styles.buttonPrimaryText}>Tap me</text>
+          </pressable>
+          <pressable style={styles.buttonSecondary} onPress={() => navigation.value.push('Details')}>
+            <text style={styles.buttonSecondaryText}>Go to Details</text>
+          </pressable>
+        </view>
+      </safe-area-view>
+    );
+  },
+};
+
+const DetailsScreen = {
+  setup() {
+    const navigation = useStackNavigation();
+
+    return () => (
+      <safe-area-view style={styles.screen}>
+        <view style={styles.detailsCard}>
+          <text style={styles.detailsTitle}>You made it!</text>
+          <text style={styles.detailsBody}>
+            This screen was pushed by the Stack navigator — proof navigation actually works.
+          </text>
+        </view>
+        <pressable style={styles.buttonSecondary} onPress={() => navigation.value.pop()}>
+          <text style={styles.buttonSecondaryText}>Go back</text>
+        </pressable>
+      </safe-area-view>
+    );
+  },
+};
 
 export default {
   setup() {
@@ -34,5 +75,59 @@ export default {
 };
 
 const styles = StyleSheet.create({
-  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  screen: {
+    flex: 1,
+    backgroundColor: '#0b1622',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 24,
+    paddingVertical: 24,
+    paddingHorizontal: 32,
+  },
+  brandRow: { flexDirection: 'row', alignItems: 'center', gap: 28 },
+  brandLogo: { height: 64 },
+  brandLogoReact: { width: 70 },
+  brandLogoVue: { width: 74 },
+  plusIcon: { width: 48, height: 48 },
+  title: { color: '#ffffff', fontSize: 22, fontWeight: 'bold', textAlign: 'center' },
+  subtitle: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
+  counterCard: {
+    alignItems: 'center',
+    gap: 4,
+    paddingVertical: 20,
+    paddingHorizontal: 28,
+    borderRadius: 16,
+    backgroundColor: '#13243a',
+  },
+  counterLabel: { color: '#41506a', fontSize: 12, letterSpacing: 1 },
+  counterValue: { color: '#42b883', fontSize: 32, fontWeight: 'bold' },
+  buttonRow: { flexDirection: 'row', gap: 12 },
+  buttonPrimary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    backgroundColor: '#42b883',
+  },
+  buttonSecondary: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 22,
+    borderWidth: 1.5,
+    borderColor: '#41506a',
+  },
+  buttonPrimaryText: { color: '#0b1622', fontSize: 15, fontWeight: 'bold' },
+  buttonSecondaryText: { color: '#ffffff', fontSize: 15, fontWeight: 'bold' },
+  detailsCard: {
+    alignItems: 'center',
+    gap: 10,
+    padding: 24,
+    borderRadius: 16,
+    backgroundColor: '#13243a',
+  },
+  detailsTitle: { color: '#ffffff', fontSize: 18, fontWeight: 'bold' },
+  detailsBody: { color: '#cbd5e1', fontSize: 14, textAlign: 'center' },
 });

package/src/index.ts

@@ -1,70 +0,0 @@
-#!/usr/bin/env node
-import pc from 'picocolors';
-import { parseArgv } from './cli.js';
-import { runAdd } from './commands/add.js';
-import { runNew } from './commands/new.js';
-import { CliUsageError, NotSymbioteAppError } from './errors.js';
-import { EXPO_PACKAGE_LAYERS } from './expo-package-layers.js';
-// A static JSON import, not fs/createRequire: rolldown resolves and inlines it (relative to
-// this SOURCE file) into bundle.js at build time, so the published artifact needs no
-// package.json lookup at runtime at all — unlike a runtime `require('../package.json')`, which
-// breaks the moment the bundle no longer sits one directory level away from it (see git history).
-import pkg from '../package.json' with { type: 'json' };
-
-function printHelp(): void {
-  const expoPackageFlags = EXPO_PACKAGE_LAYERS.map(
-    layer => `--${layer.id}`,
-  ).join(', ');
-  console.log(`@symbiote-native/cli — scaffold a SymbioteNative app, or add it to an existing one.
-
-Usage:
-  npx @symbiote-native/cli new <app-name> [--framework react|vue|angular|solid|svelte] [--vue-flavor tsx|sfc]
-                      [--javascript] [--force] [--bundle-id com.example.app]
-                      [--styling css|css-modules|scss|less|stylus|stylesheet]
-                      [--navigation] [--expo-modules] [--testing] [--splash-screen] [--slider] [--pm npm|pnpm|yarn]
-                      [--<expo-package> ...]  (one per Expo-backed package, implies --expo-modules)
-  npx @symbiote-native/cli add [--navigation] [--expo-modules] [--testing] [--splash-screen] [--slider]
-                      [--<expo-package> ...] [--force] [--pm npm|pnpm|yarn]
-                      (run inside an existing @symbiote-native/* app)
-
-  npx @symbiote-native/cli --version   print the CLI version
-  npx @symbiote-native/cli --help      print this message
-
-<expo-package> flags: ${expoPackageFlags}
-
-Flags left out of either command are asked for interactively.`);
-}
-
-async function main(): Promise<void> {
-  const parsed = parseArgv(process.argv.slice(2));
-
-  switch (parsed.kind) {
-    case 'new':
-      await runNew(parsed);
-      return;
-    case 'add':
-      await runAdd(parsed);
-      return;
-    case 'help':
-      printHelp();
-      return;
-    case 'version':
-      console.log(pkg.version);
-      return;
-  }
-}
-
-main().catch((error: unknown) => {
-  if (error instanceof CliUsageError) {
-    console.error(pc.red(`@symbiote-native/cli: ${error.message}`));
-    process.exitCode = 1;
-    return;
-  }
-  if (error instanceof NotSymbioteAppError) {
-    console.error(pc.red(`@symbiote-native/cli: ${error.message}`));
-    process.exitCode = 1;
-    return;
-  }
-  console.error(pc.red('@symbiote-native/cli: unexpected error'), error);
-  process.exitCode = 1;
-});