orb(ignite-cli): docs: add component screenshots (#2739 by @jmejiamu)

Co-authored-by: Frank Calise <[email protected]> (e2bd8a0dfc6f3523dfef734c2934817066eb647b)

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

@@ -6,6 +6,8 @@ sidebar_position: 30
 
 Ignite's `AutoImage` Component is an enhanced version of the built-in React Native [Image](https://reactnative.dev/docs/image) component. It automatically resizes the image view to fit a max width or height constraint
 
+![autoimage-component](https://github.com/user-attachments/assets/8fba1f1d-81d2-4f0d-84bb-8286b048ff16)
+
 ```tsx
 <AutoImage
   source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}

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

@@ -6,6 +6,8 @@ sidebar_position: 31
 
 The `Button` component is a wrapper around the [`Pressable`](https://reactnative.dev/docs/pressable) component. Any prop that can be passed to `Pressable` can be passed to `Button` and it will be forwarded. `Button` renders a button with given text in a [`Text`](./Text.md) component or children. It allows you to specify the preset style of the button, you can override both the `Pressable` and `Text` styles.
 
+![button-component](https://github.com/user-attachments/assets/485e0fe9-caba-4477-ae29-39bd30107809)
+
 ```tsx
 <Button
   text="Click It"

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

@@ -30,6 +30,8 @@ The `Card` component is intended to be used for vertically aligned related conte
 
 The `preset` prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: `default` and `reversed`.
 
+![card-component-01](https://github.com/user-attachments/assets/e5a19ec9-b426-428e-ae19-a1086dc2e4bc)
+
 ```tsx
 <Card preset="reversed" heading="Card Heading" content="Card Content" footer="Card Footer" />
 ```
@@ -38,6 +40,8 @@ The `preset` prop is used to set the preset container style of the card. This af
 
 The `verticalAlignment` prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: `top`, `center`, `space-between`, and `force-footer-bottom`. `force-footer-bottom` behaves like `top`, but will force the footer to the bottom of the card.
 
+![card-component-02](https://github.com/user-attachments/assets/e5e9f331-6c4d-4ce3-833d-a00fdf7244f1)
+
 ```tsx
 <Card
   verticalAlignment="space-between"
@@ -51,6 +55,8 @@ The `verticalAlignment` prop is used to set the vertical alignment of the card's
 
 The `LeftComponent` and `RightComponent` props are used to set the component that will be aligned to the left or right of the card body, respectively.
 
+![card-component-03](https://github.com/user-attachments/assets/68df8495-ee9b-452f-b86f-b39ee76a052c)
+
 ```tsx
 <Card
   LeftComponent={

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

@@ -29,6 +29,7 @@ The `EmptyState` component is to be used when there is no data to display, usual
 ### `preset`
 
 The `preset` prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: `generic`.
+![empty-state](https://github.com/user-attachments/assets/aa8bca01-24f2-45e5-977d-5f6ac949d580)
 
 ```tsx
 <EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />

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

@@ -6,6 +6,8 @@ sidebar_position: 34
 
 The `Header` component is a component that will appear at the top of your screen. It is used to hold navigation buttons and the screen title.
 
+![header-component](https://github.com/user-attachments/assets/ab308ec1-21e8-41dc-a7f3-bbc6cac866e0)
+
 ```tsx
 <Header
   titleTx="header.title"

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

@@ -6,6 +6,8 @@ sidebar_position: 35
 
 Ignite's `Icon` Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If `onPress` is passed, it will wrap the icon in a [`TouchableOpacity`](https://reactnative.dev/docs/touchableopacity) component, otherwise it will use a [`View`](https://reactnative.dev/docs/view) component.
 
+![icon-component](https://github.com/user-attachments/assets/25888c72-8bd9-4cbd-b55f-909b0f6b0bca)
+
 ```tsx
 <Icon icon="ladybug" onPress={() => Alert.alert("Hello")} />
 ```

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

@@ -6,6 +6,8 @@ sidebar_position: 36
 
 The `ListItem` component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside.
 
+![listitem-component](https://github.com/user-attachments/assets/009aed59-5597-4d0b-b861-972608ddb8ea)
+
 ```tsx
 <ListItem height={50} />
 ```

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

@@ -8,6 +8,8 @@ Ignite's `Text` Component is an enhanced version of the built-in React Native [`
 
 By enhancing the Ignite Text component and using it across your app, you can make sure the right fonts, font weight, and other styles and behaviors are shared across your whole app.
 
+![text-component](https://github.com/user-attachments/assets/61277e64-c530-4043-93fe-5da41c9e9351)
+
 ## Props
 
 ### `text`

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

@@ -8,6 +8,8 @@ Ignite's `TextField` Component is an enhanced version of the built-in React Nati
 
 With this component you will be able to standardise TextInput component across your app.
 
+![textfield-component](https://github.com/user-attachments/assets/cfdc97dc-5692-4286-8682-9243ee0e7650)
+
 ```tsx
 import { TextField } from '../components';
 

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

@@ -6,6 +6,8 @@ sidebar_position: 41
 
 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, and exposes style props for every element.
 
+![toggle-component](https://github.com/user-attachments/assets/ffbbe61e-9aea-4895-ab19-d38f76b3e379)
+
 ## Props
 
 ### `variant`

docs/react-native-mlkit/contributing/_category_.json

@@ -3,6 +3,7 @@
   "position": 1000,
   "link": {
     "type": "generated-index",
-    "description": "How to run the included example application."
+    "description": "How to run the included example application.",
+    "slug": "/react-native-mlkit/contributing/list"
   }
-}
+}

docs/react-native-mlkit/document-scanner/_category_.json

@@ -3,6 +3,7 @@
   "position": 500,
   "link": {
     "type": "generated-index",
-    "description": "Scan documents with your camera"
+    "description": "Scan documents with your camera",
+    "slug": "/react-native-mlkit/document-scanner/list"
   }
-}
+}

docs/react-native-mlkit/face-detection/_category_.json

@@ -3,6 +3,7 @@
   "position": 100,
   "link": {
     "type": "generated-index",
-    "description": "Label images with TFLite Models"
+    "description": "Label images with TFLite Models",
+    "slug": "/react-native-mlkit/face-detection/list"
   }
-}
+}

docs/react-native-mlkit/image-labeling/_category_.json

@@ -3,6 +3,7 @@
   "position": 200,
   "link": {
     "type": "generated-index",
-    "description": "Label images with TFLite Models"
+    "description": "Label images with TFLite Models",
+    "slug": "/react-native-mlkit/image-labeling/list"
   }
-}
+}

docs/react-native-mlkit/object-detection/_category_.json

@@ -1,8 +1,9 @@
 {
   "label": "Object Detection",
-  "position":400,
+  "position": 400,
   "link": {
     "type": "generated-index",
-    "description": "Detect Object"
+    "description": "Detect Object",
+    "slug": "/react-native-mlkit/object-detection/list"
   }
-}
+}

docs/react-native-mlkit/running-the-example-app/_category_.json

@@ -3,6 +3,7 @@
   "position": 99,
   "link": {
     "type": "generated-index",
-    "description": "How to run the included example application."
+    "description": "How to run the included example application.",
+    "slug": "/react-native-mlkit/running-the-example-app/list"
   }
-}
+}