From 96fda7267021a9bb4be89744a2e37ad44231aa8b Mon Sep 17 00:00:00 2001 From: Infinite Red CI Date: Wed, 27 Nov 2024 02:03:43 +0000 Subject: [PATCH] orb(ignite-cli): fix(cli): component generator template off in expo-router (#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 | 2 +- docs/ignite-cli/boilerplate/Boilerplate.md | 2 +- docs/ignite-cli/boilerplate/app/components/TextField.md | 2 +- docs/ignite-cli/boilerplate/app/models/Models.md | 2 +- docs/ignite-cli/boilerplate/app/navigators/Navigation.md | 2 +- docs/ignite-cli/boilerplate/app/theme/Theming.md | 6 +++--- docs/ignite-cli/boilerplate/app/theme/typography.ts.md | 2 +- docs/ignite-cli/boilerplate/app/utils/useAppTheme.tsx.md | 2 +- docs/ignite-cli/boilerplate/plugins/Plugins.md | 8 ++++---- 9 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/ignite-cli/boilerplate/App.tsx.md b/docs/ignite-cli/boilerplate/App.tsx.md index 4d9f74b5..f3078a5c 100644 --- a/docs/ignite-cli/boilerplate/App.tsx.md +++ b/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 diff --git a/docs/ignite-cli/boilerplate/Boilerplate.md b/docs/ignite-cli/boilerplate/Boilerplate.md index 69c46801..490ef875 100644 --- a/docs/ignite-cli/boilerplate/Boilerplate.md +++ b/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)** diff --git a/docs/ignite-cli/boilerplate/app/components/TextField.md b/docs/ignite-cli/boilerplate/app/components/TextField.md index 419a05ed..136104eb 100644 --- a/docs/ignite-cli/boilerplate/app/components/TextField.md +++ b/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) diff --git a/docs/ignite-cli/boilerplate/app/models/Models.md b/docs/ignite-cli/boilerplate/app/models/Models.md index 53404f32..d9059589 100644 --- a/docs/ignite-cli/boilerplate/app/models/Models.md +++ b/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 diff --git a/docs/ignite-cli/boilerplate/app/navigators/Navigation.md b/docs/ignite-cli/boilerplate/app/navigators/Navigation.md index 59d89a8a..4f7ffc3c 100644 --- a/docs/ignite-cli/boilerplate/app/navigators/Navigation.md +++ b/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. diff --git a/docs/ignite-cli/boilerplate/app/theme/Theming.md b/docs/ignite-cli/boilerplate/app/theme/Theming.md index 967be80b..1e3cd425 100644 --- a/docs/ignite-cli/boilerplate/app/theme/Theming.md +++ b/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 ## 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" diff --git a/docs/ignite-cli/boilerplate/app/theme/typography.ts.md b/docs/ignite-cli/boilerplate/app/theme/typography.ts.md index 8df0b513..0c248463 100644 --- a/docs/ignite-cli/boilerplate/app/theme/typography.ts.md +++ b/docs/ignite-cli/boilerplate/app/theme/typography.ts.md @@ -1,5 +1,5 @@ --- -title: typeography.ts +title: typography.ts --- # Fonts & Typography diff --git a/docs/ignite-cli/boilerplate/app/utils/useAppTheme.tsx.md b/docs/ignite-cli/boilerplate/app/utils/useAppTheme.tsx.md index 71c4463e..d4d7a36b 100644 --- a/docs/ignite-cli/boilerplate/app/utils/useAppTheme.tsx.md +++ b/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` diff --git a/docs/ignite-cli/boilerplate/plugins/Plugins.md b/docs/ignite-cli/boilerplate/plugins/Plugins.md index aee851a8..39089fbf 100644 --- a/docs/ignite-cli/boilerplate/plugins/Plugins.md +++ b/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/).