@symbiote-native/cli 0.0.1

package/templates/styling/js/angular/css-modules/src/App.ts

@@ -0,0 +1,25 @@
+import { Component, signal } from '@angular/core';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import stylesModule from './App.module.css';
+
+@Component({
+  selector: 'symbiote-angular-app',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <view [class]="containerClass">
+      <text>Welcome to SymbioteNative!</text>
+      <pressable (press)="increment()">
+        <text>Taps: {{ count() }}</text>
+      </pressable>
+    </view>
+  `,
+})
+export class AppComponent {
+  readonly containerClass = stylesModule.container;
+  readonly count = signal(0);
+
+  increment(): void {
+    this.count.set(this.count() + 1);
+  }
+}

package/templates/styling/js/angular/stylesheet/src/App.ts

@@ -0,0 +1,26 @@
+import { Component, signal } from '@angular/core';
+import { SYMBIOTE_ELEMENTS, StyleSheet } from '@symbiote-native/angular';
+
+@Component({
+  selector: 'symbiote-angular-app',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <view [style]="styles.container">
+      <text>Welcome to SymbioteNative!</text>
+      <pressable (press)="increment()">
+        <text>Taps: {{ count() }}</text>
+      </pressable>
+    </view>
+  `,
+})
+export class AppComponent {
+  readonly styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+  readonly count = signal(0);
+
+  increment(): void {
+    this.count.set(this.count() + 1);
+  }
+}

package/templates/styling/js/react/css-modules/App.jsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import styles from './App.module.css';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <view className={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count}</text>
+      </pressable>
+    </view>
+  );
+}

package/templates/styling/js/react/css-modules/App.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import styles from './App.module.css';
+
+export default function App() {
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <view className={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count}</text>
+      </pressable>
+    </view>
+  );
+}

package/templates/styling/js/react/stylesheet/App.jsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { StyleSheet } from '@symbiote-native/react';
+
+export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <view style={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count}</text>
+      </pressable>
+    </view>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/templates/styling/js/react/stylesheet/App.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { StyleSheet } from '@symbiote-native/react';
+
+export default function App() {
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <view style={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count}</text>
+      </pressable>
+    </view>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/templates/styling/js/solid/css-modules/App.jsx

@@ -0,0 +1,15 @@
+import { createSignal } from 'solid-js';
+import styles from './App.module.css';
+
+export default function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <view class={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count()}</text>
+      </pressable>
+    </view>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { createSignal } from 'solid-js';
+import styles from './App.module.css';
+
+export default function App() {
+  const [count, setCount] = createSignal<number>(0);
+
+  return (
+    <view class={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count()}</text>
+      </pressable>
+    </view>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js';
+import { StyleSheet } from '@symbiote-native/solid';
+
+export default function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <view style={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count()}</text>
+      </pressable>
+    </view>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

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

@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js';
+import { StyleSheet } from '@symbiote-native/solid';
+
+export default function App() {
+  const [count, setCount] = createSignal<number>(0);
+
+  return (
+    <view style={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => setCount((value) => value + 1)}>
+        <text>Taps: {count()}</text>
+      </pressable>
+    </view>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/templates/styling/js/svelte/css-modules/App.svelte

@@ -0,0 +1,12 @@
+<script>
+  import styles from './App.module.css';
+
+  let count = $state(0);
+</script>
+
+<view class={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => count++}>
+    <text>Taps: {count}</text>
+  </pressable>
+</view>

package/templates/styling/js/svelte/css-modules/App.typescript.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import styles from './App.module.css';
+
+  let count = $state<number>(0);
+</script>
+
+<view class={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => count++}>
+    <text>Taps: {count}</text>
+  </pressable>
+</view>

package/templates/styling/js/svelte/stylesheet/App.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { StyleSheet } from '@symbiote-native/svelte';
+
+  let count = $state(0);
+  const styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+</script>
+
+<view style={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => count++}>
+    <text>Taps: {count}</text>
+  </pressable>
+</view>

package/templates/styling/js/svelte/stylesheet/App.typescript.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { StyleSheet } from '@symbiote-native/svelte';
+
+  let count = $state<number>(0);
+  const styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+</script>
+
+<view style={styles.container}>
+  <text>Welcome to SymbioteNative!</text>
+  <pressable onPress={() => count++}>
+    <text>Taps: {count}</text>
+  </pressable>
+</view>

package/templates/styling/js/vue-sfc/css-modules/App.typescript.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import styles from './App.module.css';
+
+const count = ref<number>(0);
+</script>
+
+<template>
+  <view :class="styles.container">
+    <text>Welcome to SymbioteNative!</text>
+    <pressable @press="count++">
+      <text>Taps: {{ count }}</text>
+    </pressable>
+  </view>
+</template>

package/templates/styling/js/vue-sfc/css-modules/App.vue

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

package/templates/styling/js/vue-sfc/stylesheet/App.typescript.vue

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

package/templates/styling/js/vue-sfc/stylesheet/App.vue

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

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

@@ -0,0 +1,16 @@
+import { ref } from '@vue/runtime-core';
+import styles from './App.module.css';
+
+export default {
+  setup() {
+    const count = ref(0);
+    return () => (
+      <view class={styles.container}>
+        <text>Welcome to SymbioteNative!</text>
+        <pressable onPress={() => count.value++}>
+          <text>Taps: {count.value}</text>
+        </pressable>
+      </view>
+    );
+  },
+};

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

@@ -0,0 +1,16 @@
+import { ref } from '@vue/runtime-core';
+import styles from './App.module.css';
+
+export default {
+  setup() {
+    const count = ref(0);
+    return () => (
+      <view class={styles.container}>
+        <text>Welcome to SymbioteNative!</text>
+        <pressable onPress={() => count.value++}>
+          <text>Taps: {count.value}</text>
+        </pressable>
+      </view>
+    );
+  },
+};

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

@@ -0,0 +1,20 @@
+import { ref } from '@vue/runtime-core';
+import { StyleSheet } from '@symbiote-native/vue';
+
+export default {
+  setup() {
+    const count = ref(0);
+    return () => (
+      <view style={styles.container}>
+        <text>Welcome to SymbioteNative!</text>
+        <pressable onPress={() => count.value++}>
+          <text>Taps: {count.value}</text>
+        </pressable>
+      </view>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

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

@@ -0,0 +1,20 @@
+import { ref } from '@vue/runtime-core';
+import { StyleSheet } from '@symbiote-native/vue';
+
+export default {
+  setup() {
+    const count = ref(0);
+    return () => (
+      <view style={styles.container}>
+        <text>Welcome to SymbioteNative!</text>
+        <pressable onPress={() => count.value++}>
+          <text>Taps: {count.value}</text>
+        </pressable>
+      </view>
+    );
+  },
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/templates/styling/navigation/angular/css-modules/src/DetailsScreen.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import stylesModule from './App.module.css';
+
+@Component({
+  selector: 'DetailsScreen',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <view [class]="containerClass">
+      <text>Details screen</text>
+    </view>
+  `,
+})
+export class DetailsScreen {
+  readonly containerClass = stylesModule.container;
+}

package/templates/styling/navigation/angular/css-modules/src/MenuScreen.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { SYMBIOTE_ELEMENTS } from '@symbiote-native/angular';
+import { injectStackNavigation } from '@symbiote-native/navigation/angular';
+import stylesModule from './App.module.css';
+
+@Component({
+  selector: 'MenuScreen',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <view [class]="containerClass">
+      <text>Welcome to SymbioteNative!</text>
+      <pressable (press)="navigation.push('Details')">
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  `,
+})
+export class MenuScreen {
+  readonly containerClass = stylesModule.container;
+  readonly navigation = injectStackNavigation();
+}

package/templates/styling/navigation/angular/stylesheet/src/DetailsScreen.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { SYMBIOTE_ELEMENTS, StyleSheet } from '@symbiote-native/angular';
+
+@Component({
+  selector: 'DetailsScreen',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <view [style]="styles.container">
+      <text>Details screen</text>
+    </view>
+  `,
+})
+export class DetailsScreen {
+  readonly styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+}

package/templates/styling/navigation/angular/stylesheet/src/MenuScreen.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { SYMBIOTE_ELEMENTS, StyleSheet } from '@symbiote-native/angular';
+import { injectStackNavigation } from '@symbiote-native/navigation/angular';
+
+@Component({
+  selector: 'MenuScreen',
+  standalone: true,
+  imports: [SYMBIOTE_ELEMENTS],
+  template: `
+    <view [style]="styles.container">
+      <text>Welcome to SymbioteNative!</text>
+      <pressable (press)="navigation.push('Details')">
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  `,
+})
+export class MenuScreen {
+  readonly styles = StyleSheet.create({
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  });
+  readonly navigation = injectStackNavigation();
+}

package/templates/styling/navigation/react/css-modules/App.jsx

@@ -0,0 +1,32 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import styles from './App.module.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <view className={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => navigation.push('Details')}>
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <view className={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/react/css-modules/App.tsx

@@ -0,0 +1,32 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import styles from './App.module.css';
+
+function MenuScreen() {
+  const navigation = useStackNavigation();
+
+  return (
+    <view className={styles.container}>
+      <text>Welcome to SymbioteNative!</text>
+      <pressable onPress={() => navigation.push('Details')}>
+        <text>Go to Details</text>
+      </pressable>
+    </view>
+  );
+}
+
+function DetailsScreen() {
+  return (
+    <view className={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/react/stylesheet/App.jsx

@@ -0,0 +1,36 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import { StyleSheet } from '@symbiote-native/react';
+
+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/react/stylesheet/App.tsx

@@ -0,0 +1,36 @@
+import { Stack, useStackNavigation } from '@symbiote-native/navigation/react';
+import { StyleSheet } from '@symbiote-native/react';
+
+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/css-modules/App.jsx

@@ -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>
+  );
+}