@symbiote-native/cli 0.0.1

package/templates/styling/navigation/solid/css-modules/App.tsx

@@ -0,0 +1,32 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/solid';
+import styles from './App.module.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <view class={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => navigation().push('Details')}>
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <view class={styles.container}>
+      <text>Details screen</text>
+    </view>
+  );
+}
+
+export default function App() {
+  return (
+    <Stack initialRouteName="Menu">
+      <Stack.Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+      <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+    </Stack>
+  );
+}

package/templates/styling/navigation/solid/stylesheet/App.jsx

@@ -0,0 +1,36 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/solid';
+import { StyleSheet } from '@symbiote-native/solid';
+
+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>
+  );
+}
+
+export default function App() {
+  return (
+    <Stack initialRouteName="Menu">
+      <Stack.Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+      <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+    </Stack>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/templates/styling/navigation/solid/stylesheet/App.tsx

@@ -0,0 +1,36 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/solid';
+import { StyleSheet } from '@symbiote-native/solid';
+
+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>
+  );
+}
+
+export default function App() {
+  return (
+    <Stack initialRouteName="Menu">
+      <Stack.Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+      <Stack.Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+    </Stack>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/templates/styling/navigation/svelte/css-modules/DetailsScreen.svelte

@@ -0,0 +1,7 @@
+<script>
+  import styles from './App.module.css';
+</script>
+
+<view class={styles.container}>
+  <text>Details screen</text>
+</view>

package/templates/styling/navigation/svelte/css-modules/DetailsScreen.typescript.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import styles from './App.module.css';
+</script>
+
+<view class={styles.container}>
+  <text>Details screen</text>
+</view>

package/templates/styling/navigation/svelte/css-modules/MenuScreen.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { useStackNavigation } from '@symbiote-native/navigation/svelte';
+  import styles from './App.module.css';
+
+  const navigation = useStackNavigation();
+</script>
+
+<view class={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => navigation.current.push('Details')}>
+    <text>Go to Details</text>
+  </pressable>
+</view>

package/templates/styling/navigation/svelte/css-modules/MenuScreen.typescript.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { useStackNavigation } from '@symbiote-native/navigation/svelte';
+  import styles from './App.module.css';
+
+  const navigation = useStackNavigation();
+</script>
+
+<view class={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => navigation.current.push('Details')}>
+    <text>Go to Details</text>
+  </pressable>
+</view>

package/templates/styling/navigation/svelte/stylesheet/DetailsScreen.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { StyleSheet } from '@symbiote-native/svelte';
+
+  const styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+</script>
+
+<view style={styles.container}>
+  <text>Details screen</text>
+</view>

package/templates/styling/navigation/svelte/stylesheet/DetailsScreen.typescript.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { StyleSheet } from '@symbiote-native/svelte';
+
+  const styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+</script>
+
+<view style={styles.container}>
+  <text>Details screen</text>
+</view>

package/templates/styling/navigation/svelte/stylesheet/MenuScreen.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { useStackNavigation } from '@symbiote-native/navigation/svelte';
+  import { StyleSheet } from '@symbiote-native/svelte';
+
+  const navigation = useStackNavigation();
+  const styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+</script>
+
+<view style={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => navigation.current.push('Details')}>
+    <text>Go to Details</text>
+  </pressable>
+</view>

package/templates/styling/navigation/svelte/stylesheet/MenuScreen.typescript.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useStackNavigation } from '@symbiote-native/navigation/svelte';
+  import { StyleSheet } from '@symbiote-native/svelte';
+
+  const navigation = useStackNavigation();
+  const styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+</script>
+
+<view style={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => navigation.current.push('Details')}>
+    <text>Go to Details</text>
+  </pressable>
+</view>

package/templates/styling/navigation/vue-sfc/css-modules/DetailsScreen.typescript.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import styles from './App.module.css';
+</script>
+
+<template>
+  <view :class="styles.container">
+    <text>Details screen</text>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/css-modules/DetailsScreen.vue

@@ -0,0 +1,9 @@
+<script setup>
+import styles from './App.module.css';
+</script>
+
+<template>
+  <view :class="styles.container">
+    <text>Details screen</text>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/css-modules/MenuScreen.typescript.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
+import styles from './App.module.css';
+
+const navigation = useStackNavigation();
+</script>
+
+<template>
+  <view :class="styles.container">
+    <text>Welcome to SymbioteNative!</text>
+    <pressable @press="() => navigation.push('Details')">
+      <text>Go to Details</text>
+    </pressable>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/css-modules/MenuScreen.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
+import styles from './App.module.css';
+
+const navigation = useStackNavigation();
+</script>
+
+<template>
+  <view :class="styles.container">
+    <text>Welcome to SymbioteNative!</text>
+    <pressable @press="() => navigation.push('Details')">
+      <text>Go to Details</text>
+    </pressable>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/stylesheet/DetailsScreen.typescript.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { StyleSheet } from '@symbiote-native/vue';
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+</script>
+
+<template>
+  <view :style="styles.container">
+    <text>Details screen</text>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/stylesheet/DetailsScreen.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { StyleSheet } from '@symbiote-native/vue';
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+</script>
+
+<template>
+  <view :style="styles.container">
+    <text>Details screen</text>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/stylesheet/MenuScreen.typescript.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
+import { StyleSheet } from '@symbiote-native/vue';
+
+const navigation = useStackNavigation();
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+</script>
+
+<template>
+  <view :style="styles.container">
+    <text>Welcome to SymbioteNative!</text>
+    <pressable @press="() => navigation.push('Details')">
+      <text>Go to Details</text>
+    </pressable>
+  </view>
+</template>

package/templates/styling/navigation/vue-sfc/stylesheet/MenuScreen.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { useStackNavigation } from '@symbiote-native/navigation/vue';
+import { StyleSheet } from '@symbiote-native/vue';
+
+const navigation = useStackNavigation();
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});
+</script>
+
+<template>
+  <view :style="styles.container">
+    <text>Welcome to SymbioteNative!</text>
+    <pressable @press="() => navigation.push('Details')">
+      <text>Go to Details</text>
+    </pressable>
+  </view>
+</template>

package/templates/styling/navigation/vue-tsx/css-modules/App.jsx

@@ -0,0 +1,34 @@
+import { Screen, Stack, useStackNavigation } from '@symbiote-native/navigation/vue';
+import styles from './App.module.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <view class={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => navigation.push('Details')}>
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <view class={styles.container}>
+      <text>Details screen</text>
+    </view>
+  );
+}
+
+export default {
+  setup() {
+    return () => (
+      <Stack initialRouteName="Menu">
+        <Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+        <Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+      </Stack>
+    );
+  },
+};

package/templates/styling/navigation/vue-tsx/css-modules/App.tsx

@@ -0,0 +1,34 @@
+import { Screen, Stack, useStackNavigation } from '@symbiote-native/navigation/vue';
+import styles from './App.module.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <view class={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => navigation.push('Details')}>
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <view class={styles.container}>
+      <text>Details screen</text>
+    </view>
+  );
+}
+
+export default {
+  setup() {
+    return () => (
+      <Stack initialRouteName="Menu">
+        <Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+        <Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+      </Stack>
+    );
+  },
+};

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

@@ -0,0 +1,38 @@
+import { Screen, Stack, useStackNavigation } from '@symbiote-native/navigation/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>
+  );
+}
+
+export default {
+  setup() {
+    return () => (
+      <Stack initialRouteName="Menu">
+        <Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+        <Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+      </Stack>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

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

@@ -0,0 +1,38 @@
+import { Screen, Stack, useStackNavigation } from '@symbiote-native/navigation/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>
+  );
+}
+
+export default {
+  setup() {
+    return () => (
+      <Stack initialRouteName="Menu">
+        <Screen name="Menu" component={MenuScreen} options={{ title: 'Home' }} />
+        <Screen name="Details" component={DetailsScreen} options={{ title: 'Details' }} />
+      </Stack>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});