orb(ignite-cli): Merge pull request #2803 from infinitered/lindboe/v1…

…0-to-master

Ignite X release commit (4ac8ca87a84aa85d2daf21f83f30bc21552d134c)

docs/ignite-cli/Guide.md

@@ -18,22 +18,22 @@ In order to start a new Ignite project, you can use the CLI. No need to install
 npx ignite-cli@latest new PizzaApp
 ```
 
-It'll walk you through several questions.
+It'll walk you through several prompts to configure your package manager, navigation library and state management. Or you can simply take all the defaults via `--yes` and jump right into the demo application.
 
 Once it's up and running, you can use the Ignite CLI to [generate](./concept/Generators.md) components, screens, MST models, and more.
 
 Running into errors? have a look at [Troubleshooting](./cli/Troubleshooting.md)
 
 ### Ignite Boilerplate
 
-Your new Ignite project (whether you start with Expo or not) comes with a full stack of useful libraries, pre-set up for you so you can start coding.
+Your new Ignite project comes with a full stack of useful libraries, pre-set up for you so you can start coding. Some of the following are optional, but this list details the default options:
 
 - React Native
 - React Navigation
 - MobX-State-Tree [(Why not Redux?)](./concept/MobX-State-Tree.md)
 - MobX-React-Lite
 - TypeScript
-- AsyncStorage (integrated with MST for restoring state)
+- React Native MMKV (integrated with MST for restoring state)
 - apisauce (to talk to REST servers)
 - Reactotron-ready (and pre-integrated with MST)
 - Supports Expo (and Expo web) out of the box
@@ -64,7 +64,7 @@ Check out the [Components](./boilerplate/app/components/Components.md) documenta
 
 ### Testing
 
-Ignite is pre-configured to use Jest for unit tests.
+Ignite is pre-configured to use Jest for unit tests and [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) for component tests.
 
 Ignite includes samples of UI end-to-end tests using [Maestro](https://maestro.mobile.dev/). See our [Ignite Cookbook recipe](https://ignitecookbook.com/docs/recipes/MaestroSetup) for setup and walkthrough of the test samples or check out Maestro's docs on [Installing Maestro](https://maestro.mobile.dev/getting-started/installing-maestro) to run the flows.
 
@@ -76,19 +76,32 @@ Ignite's approach to styling is, like many other things in Ignite, straightforwa
 
 We don't use `StyleSheet.create()` as a general rule, as it doesn't provide any real benefits over bare objects.
 
-We instead use a strategy of constants, colocated with our components, camelCase and prefixed with `$`, and typed with TypeScript:
+We instead use a strategy of constants, co-located with our components, camelCase and prefixed with `$`, and typed with TypeScript:
 
 ```tsx
 import { View, ViewStyle } from "react-native"
-import { palette } from "../theme"
+import { useAppTheme } from "@/utils/useAppTheme"
+import type { ThemedStyle } from "@/theme"
 
-const $container: ViewStyle = {
+// This is a themed style that you must wrap with `themed()` to pass the style object.
+const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
   flex: 1,
-  backgroundColor: palette.bgColor,
+  backgroundColor: colors.palette.bgColor,
+})
+
+// This is a non-themed style
+const $innerView: ViewStyle{
+  backgroundColor: '#fff',
+  alignItems: "center",
 }
 
 const MyComponent = () => {
-  return <View style={$container}>...</View>
+  const { themed } = useAppTheme()
+  return (
+    <View style={themed($container)}>
+    <View style={$innerView}>...</View>
+    </View>
+  )
 }
 ```
 

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

@@ -11,7 +11,7 @@ The `Button` component is a wrapper around the [`Pressable`](https://reactnative
 ```tsx
 <Button
   text="Click It"
-  tx="button.clickIt"
+  tx="button:clickIt"
   preset="default"
   onPress={() => Alert.alert("pressed")}
   style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
@@ -38,7 +38,7 @@ The `text` prop is required if `tx` or `children` are not provided. This is the
 The `tx` prop is required if `text` or `children` are not provided. This is the translation key to be used to translate the text.
 
 ```tsx
-<Button tx="button.clickMe" />
+<Button tx="button:clickMe" />
 ```
 
 ### `children`
@@ -56,7 +56,7 @@ The `children` prop is required if no `tx` or `text` prop is passed. This is the
 The `preset` prop is optional. This is the preset style of the button. It can be one of the following built-in options: `default`, `filled`, `reversed`
 
 ```tsx
-<Button preset="default" tx="button.clickMe" />
+<Button preset="default" tx="button:clickMe" />
 ```
 
 To make a custom preset, add a key to the `$viewPresets`, `$textPresets`, `$pressedViewPresets` and `$pressedTextPresets` objects in `app/components/Button.tsx` and then pass the name of the preset to the `preset` prop.

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

@@ -91,7 +91,7 @@ The `heading` prop is used to set the heading text of the card.
 The `headingTx` prop is used to set the heading text of the card using a translation key.
 
 ```tsx
-<Card headingTx="card.heading" content="Card Content" footer="Card Footer" />
+<Card headingTx="card:heading" content="Card Content" footer="Card Footer" />
 ```
 
 ### `headingTxOptions`
@@ -100,7 +100,7 @@ The `headingTxOptions` prop is used to set the options for the translation key u
 
 ```tsx
 <Card
-  headingTx="card.heading"
+  headingTx="card:heading"
   headingTxOptions={{ count: 2 }}
   content="Card Content"
   footer="Card Footer"
@@ -158,7 +158,7 @@ The `content` prop is used to set the content text of the card.
 The `contentTx` prop is used to set the content text of the card using a translation key.
 
 ```tsx
-<Card heading="Card Heading" contentTx="card.content" footer="Card Footer" />
+<Card heading="Card Heading" contentTx="card:content" footer="Card Footer" />
 ```
 
 ### `contentTxOptions`
@@ -168,7 +168,7 @@ The `contentTxOptions` prop is used to set the options for the translation key u
 ```tsx
 <Card
   heading="Card Heading"
-  contentTx="card.content"
+  contentTx="card:content"
   contentTxOptions={{ count: 2 }}
   footer="Card Footer"
 />
@@ -225,7 +225,7 @@ The `footer` prop is used to set the footer text of the card.
 The `footerTx` prop is used to set the footer text of the card using a translation key.
 
 ```tsx
-<Card heading="Card Heading" content="Card Content" footerTx="card.footer" />
+<Card heading="Card Heading" content="Card Content" footerTx="card:footer" />
 ```
 
 ### `footerTxOptions`
@@ -236,7 +236,7 @@ The `footerTxOptions` prop is used to set the options for the translation key us
 <Card
   heading="Card Heading"
   content="Card Content"
-  footerTx="card.footer"
+  footerTx="card:footer"
   footerTxOptions={{ count: 2 }}
 />
 ```

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

@@ -0,0 +1,21 @@
+---
+sidebar_position: 32
+---
+
+import ToggleProps from './\_toggle_props.mdx';
+
+# Checkbox
+
+The `Checkbox` component provides a simple way to collect user input for a boolean value.
+
+## Checkbox Props
+
+### `icon`
+
+The `icon` is a prop for the checkbox variant that allows you to customize the icon used for the "on" state.
+
+```tsx
+<Checkbox icon="ladybug" />
+```
+
+<ToggleProps componentName="Checkbox" />

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

@@ -31,7 +31,7 @@ This is a component that renders a [`TouchableOpacity`](https://reactnative.dev/
 ```tsx
 <Button
   text="Click It"
-  tx="button.clickIt"
+  tx="button:clickIt"
   preset="primary"
   onPress={() => Alert.alert("pressed")}
   style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
@@ -71,6 +71,23 @@ The `Card` component is useful for displaying related information in a contained
 
 [Full Card Component Documentation](./Card.md)
 
+### Checkbox
+
+The `Checkbox` component is useful for displaying a user's choice for a boolean value.
+
+```tsx
+<Checkbox
+  value={value}
+  icon="check"
+  onValueChange={setValue}
+  labelTx="signup:rememberMe"
+  labelStyle={{ color: "#a511dc" }}
+  containerStyle={{ backgroundColor: "#fff" }}
+/>
+```
+
+[Full Checkbox Component Documentation](./Checkbox.md)
+
 ### EmptyState
 
 The `EmptyState` component can be used when there is no data to display and direct the user on how to proceed.
@@ -101,7 +118,7 @@ The `Header` component is a component that will appear at the top of your screen
 
 ```tsx
 <Header
-  headerTx="header.title"
+  headerTx="header:title"
   headerText="Header Title"
   leftIcon="back"
   rightIcon="bullet"
@@ -131,6 +148,22 @@ This is a component that renders an icon.
 
 [Full Icon Component Documentation](./Icon.md)
 
+### Radio
+
+The `Radio` component is useful for displaying a user's choice for a boolean value.
+
+```tsx
+<Radio
+  value={value}
+  onValueChange={setValue}
+  labelTx="signup:rememberMe"
+  labelStyle={{ color: "#a511dc" }}
+  containerStyle={{ backgroundColor: "#fff" }}
+/>
+```
+
+[Full Radio Component Documentation](./Radio.md)
+
 ### Screen
 
 This is a component that renders a screen. It is used to wrap your entire screen, and handles scrolling, [safe areas](https://reactnavigation.org/docs/handling-safe-area/), and keyboard avoiding behavior.
@@ -144,14 +177,31 @@ This is a component that renders a screen. It is used to wrap your entire screen
 
 [Full Screen Component Documentation](./Screen.md)
 
+### Switch
+
+The `Switch` component is useful for displaying a user's choice for a boolean value.
+
+```tsx
+<Switch
+  value={value}
+  accessibilityMode="icon"
+  onValueChange={setValue}
+  labelTx="signup:rememberMe"
+  labelStyle={{ color: "#a511dc" }}
+  containerStyle={{ backgroundColor: "#fff" }}
+/>
+```
+
+[Full Switch Component Documentation](./Switch.md)
+
 ### Text
 
 This is an enhanced version of the built-in React Native Text component. It adds internationalization and property presets.
 
 ```tsx
 <Text
   preset="header"
-  tx="welcome.header"
+  tx="welcome:header"
   txOptions={{
     name: rootStore.currentUser.name,
   }}
@@ -171,8 +221,8 @@ const inputRef = useRef()
 <TextField
   value={input}
   onChangeText={setInput}
-  labelTx="signup.name"
-  placeholderTx="signup.nameplaceholder"
+  labelTx="signup:name"
+  placeholderTx="signup:nameplaceholder"
   style={$header}
   inputStyle={$inputStyle}
   preset="default"
@@ -182,23 +232,6 @@ const inputRef = useRef()
 
 [Full Text Component Documentation](./TextField.md)
 
-### Toggle
-
-This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button.
-
-```tsx
-<Toggle
-  variant="checkbox"
-  value={value}
-  onValueChange={setValue}
-  labelTx="signup.rememberMe"
-  labelStyle={{ color: "#a511dc" }}
-  containerStyle={{ backgroundColor: "#fff" }}
-/>
-```
-
-[Full Toggle Component Documentation](./Toggle.md)
-
 ## Custom Components
 
 Ignite includes a generator for creating custom components. If the built in components don't fit your needs, you can create your own.

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

@@ -99,7 +99,7 @@ The `headingTx` prop is used to set the heading text of the EmptyState using a t
 
 ```tsx
 <EmptyState
-  headingTx="EmptyState.heading"
+  headingTx="EmptyState:heading"
   content="EmptyState Content"
   button="EmptyState Button"
 />
@@ -111,7 +111,7 @@ The `headingTxOptions` prop is used to set the options for the translation key u
 
 ```tsx
 <EmptyState
-  headingTx="EmptyState.heading"
+  headingTx="EmptyState:heading"
   headingTxOptions={{ count: 2 }}
   content="EmptyState Content"
   button="EmptyState Button"
@@ -159,7 +159,7 @@ The `contentTx` prop is used to set the content text of the EmptyState using a t
 ```tsx
 <EmptyState
   heading="EmptyState Heading"
-  contentTx="EmptyState.content"
+  contentTx="EmptyState:content"
   button="EmptyState Button"
 />
 ```
@@ -171,7 +171,7 @@ The `contentTxOptions` prop is used to set the options for the translation key u
 ```tsx
 <EmptyState
   heading="EmptyState Heading"
-  contentTx="EmptyState.content"
+  contentTx="EmptyState:content"
   contentTxOptions={{ count: 2 }}
   button="EmptyState Button"
 />
@@ -219,7 +219,7 @@ The `buttonTx` prop is used to set the button text of the EmptyState using a tra
 <EmptyState
   heading="EmptyState Heading"
   content="EmptyState Content"
-  buttonTx="EmptyState.button"
+  buttonTx="EmptyState:button"
 />
 ```
 
@@ -231,7 +231,7 @@ The `buttonTxOptions` prop is used to set the options for the translation key us
 <EmptyState
   heading="EmptyState Heading"
   content="EmptyState Content"
-  buttonTx="EmptyState.button"
+  buttonTx="EmptyState:button"
   buttonTxOptions={{ count: 2 }}
 />
 ```