orb(ignite-cli): fix(cli): component generator template off in expo-r…

…outer (#2854 by @frankcalise)

* fix(boilerplate): add destinationDir to component template

* test(expo-router): inspect generator template files more closely

* fix(cli): update path in test model generator template

* fix(boilerplate): component sub dir tpl adjustment (95f76427f6cf07b7d7a8316ef78dfc8d173a44d7)

docs/ignite-cli/boilerplate/App.tsx.md

@@ -5,7 +5,7 @@ sidebar_position: 65
 
 # App.tsx
 
-`App.tsx` is the entry point for Expo / React Native itself. It is minimal on purpose - its only responsibiliy is to:
+`App.tsx` is the entry point for Expo / React Native itself. It is minimal on purpose - its only responsibility is to:
 
 - Setup the Splash Screen
 - Immediately load our app's root component

docs/ignite-cli/boilerplate/Boilerplate.md

@@ -95,7 +95,7 @@ Here lives the theme for your application, including spacing, colors, and typogr
 
 **[utils](./app/utils/Utils.md)**
 
-This is a great place to put miscellaneous helpers and utilities. Things like date helpers, formatters, etc. are often found here. However, it should only be used for things that are truely shared across your application. If a helper or utility is only used by a specific component or model, consider co-locating your helper with that component or model.
+This is a great place to put miscellaneous helpers and utilities. Things like date helpers, formatters, etc. are often found here. However, it should only be used for things that are truly shared across your application. If a helper or utility is only used by a specific component or model, consider co-locating your helper with that component or model.
 
 **[app.tsx](./app/app.tsx.md)**
 

docs/ignite-cli/boilerplate/app/components/TextField.md

@@ -6,7 +6,7 @@ sidebar_position: 40
 
 Ignite's `TextField` Component is an enhanced version of the built-in React Native [`TextInput`](https://reactnative.dev/docs/textinput) component. It consists of TextInput and a Text(./Text.md) label.
 
-With this component you will be able to standardise TextInput component across your app.
+With this component you will be able to standardize TextInput component across your app.
 
 ![textfield-component](https://github.com/user-attachments/assets/cfdc97dc-5692-4286-8682-9243ee0e7650)
 

docs/ignite-cli/boilerplate/app/models/Models.md

@@ -2,7 +2,7 @@
 
 Ignite's perhaps most distinctive feature is its use of [MobX-State-Tree](https://mobx-state-tree.js.org/) (MST). This is a powerful and full-featured state management library that allows you to create strongly-typed observable models that can be used throughout your app and rerender on update intelligently without using selectors.
 
-We have [very good reasons](../../../concept/MobX-State-Tree.md) for using MST, but if after reading that doc you're still not keen on using it, we also have an [Ignite Cookbook recipe](https://ignitecookbook.com/docs/recipes/Redux) for removing MST and using Redux instead.
+We have [very good reasons](../../../concept/MobX-State-Tree.md) for using MST, but if after reading that doc you're still not keen on using it, we also have an [Ignite Cookbook recipe](https://ignitecookbook.com/docs/recipes/Redux) for removing MST and using Redux or Zustand instead.
 
 ## RootStore
 

docs/ignite-cli/boilerplate/app/navigators/Navigation.md

@@ -102,4 +102,4 @@ Ignite's navigation setup also comes with some very useful [navigation utilities
 
 ## A note about Expo Router
 
-We are currently evaluating [Expo Router](https://docs.expo.dev/router/introduction/) to power Ignite's navigation system. It's a very promising project (built on React Navigation), but our philosophy is that nothing makes it into Ignite unless we've proven it in a full project (or two...or three...) first. We'll update this section when we have more information.
+We are currently evaluating [Expo Router](https://docs.expo.dev/router/introduction/) to power Ignite's navigation system. It's a very promising project (built on React Navigation), but our philosophy is that nothing makes it into Ignite unless we've proven it in a full project (or two...or three...) first. In the meantime we've added an experimental option to switch to Expo Router when igniting your project. We'll update this section when we have more information.

docs/ignite-cli/boilerplate/app/theme/Theming.md

@@ -105,7 +105,7 @@ const onThemeButtonPress = () => {
 }
 
 // Or you can let them use their deice's system setting: light/dark
-const resetThemeontextOverride = () => {
+const resetThemeContextOverride = () => {
   setThemeContextOverride(undefined)
 }
 ```
@@ -136,7 +136,7 @@ To have your app go back to respecting the user's device system setting, you can
 
 ## Hooking up the navigation theme
 
-Ignite uses `react-navigation` so it's already hooked up for use with your `NavigationController`! The `navigationTheme` variable returned from `useThemeProvider()` is a `react-navigation` heme object you can pass to the root `NavigtionController`.
+Ignite uses `react-navigation` so it's already hooked up for use with your `NavigationController`! The `navigationTheme` variable returned from `useThemeProvider()` is a `react-navigation` theme object you can pass to the root `NavigationController`.
 
 ```tsx
 const { navigationTheme } = useThemeProvider()
@@ -145,7 +145,7 @@ return <NavigationContainer theme={navigationTheme} {...props} />
 
 ## Integrating other styling and component libraries
 
-There are many component libraries that offer light/dark modes to their components. Here's an example of how to use `react-native-elements` with Ignite's theming system by exending their own `ThemeProvider`:
+There are many component libraries that offer light/dark modes to their components. Here's an example of how to use `react-native-elements` with Ignite's theming system by extending their own `ThemeProvider`:
 
 ```tsx
 import { colorsDark, colorsLight, customFontsToLoad } from "src/theme"

docs/ignite-cli/boilerplate/app/theme/typography.ts.md

@@ -1,5 +1,5 @@
 ---
-title: typeography.ts
+title: typography.ts
 ---
 
 # Fonts & Typography

docs/ignite-cli/boilerplate/app/utils/useAppTheme.tsx.md

@@ -64,7 +64,7 @@ const $plainObjectStyle: ViewStyle = {
 
 ### `navTheme`
 
-A `react-navigtion` [theme object](https://reactnavigation.org/docs/themes#built-in-themes). This is the same object you would pass to a `NavigationContainer` component.
+A `react-navigation` [theme object](https://reactnavigation.org/docs/themes#built-in-themes). This is the same object you would pass to a `NavigationContainer` component.
 
 ### `setThemeContextOverride`
 

docs/ignite-cli/boilerplate/plugins/Plugins.md

@@ -1,12 +1,12 @@
-## `app/plugins` Directory in Ignite Apps
+## `plugins` Directory in Ignite Apps
 
-The `app/plugins` directory is a dedicated space within the Ignite boilerplate for managing Expo Config Plugins. These plugins are used to customize the native configuration of your app without altering the native code directly.
+The `plugins` directory is a dedicated space within the Ignite boilerplate for managing Expo Config Plugins. These plugins are used to customize the native configuration of your app without altering the native code directly.
 
 ### Adding Custom Plugins
 
 To add a custom plugin:
 
-1. **Create a Plugin**: In `app/plugins`, define your plugin in a TypeScript file, exporting a function that modifies the ExpoConfig.
+1. **Create a Plugin**: In `plugins`, define your plugin in a TypeScript file, exporting a function that modifies the ExpoConfig.
 2. **Integrate the Plugin**: In `app.config.ts`, import your plugin and add it to the `plugins` array.
 
 Example:
@@ -19,7 +19,7 @@ plugins: [...existingPlugins, require("./plugins/yourCustomPlugin").yourCustomPl
 ## Key Points
 
 - Config plugins extend app configuration, automating native module integration.
-- Create plugins in `app/plugins` and add them to `app.config.ts`.
+- Create plugins in `plugins` and add them to `app.config.ts`.
 - For complex setups, refer to mods but use them with caution.
 
 For detailed information on creating and using config plugins, refer to [Expo's Config Plugins documentation](https://docs.expo.dev/config-plugins/introduction/).