From 0655b393c827c2122713c22c8d3856fe2cd384fd Mon Sep 17 00:00:00 2001 From: jmejiamu Date: Mon, 8 Jul 2024 13:27:44 -0700 Subject: [PATCH] Docs: Add screenshots of each component in docs --- docs/ignite-cli/_category_.json | 4 +- .../boilerplate/app/components/AutoImage.md | 14 ++- .../boilerplate/app/components/Button.md | 38 +++++-- .../boilerplate/app/components/Card.md | 42 ++++++-- .../boilerplate/app/components/EmptyState.md | 33 ++++++- .../boilerplate/app/components/Header.md | 93 ++++++++++++++---- .../boilerplate/app/components/Icon.md | 6 +- .../boilerplate/app/components/ListItem.md | 4 + .../boilerplate/app/components/Text.md | 12 ++- .../boilerplate/app/components/TextField.md | 52 ++++++++-- .../boilerplate/app/components/Toggle.md | 57 +++++++++-- static/img/autoimage-component.png | Bin 0 -> 67229 bytes static/img/button-component.png | Bin 0 -> 100327 bytes static/img/card-component-01.png | Bin 0 -> 77365 bytes static/img/card-component-02.png | Bin 0 -> 89942 bytes static/img/card-component-03.png | Bin 0 -> 61377 bytes static/img/empty-state.png | Bin 0 -> 69057 bytes static/img/header-component.png | Bin 0 -> 52121 bytes static/img/icon-component.png | Bin 0 -> 82709 bytes static/img/listitem-component.png | Bin 0 -> 66253 bytes static/img/text-component.png | Bin 0 -> 67806 bytes static/img/textfield-component.png | Bin 0 -> 75690 bytes static/img/toggle-component.png | Bin 0 -> 71888 bytes 23 files changed, 286 insertions(+), 69 deletions(-) create mode 100644 static/img/autoimage-component.png create mode 100644 static/img/button-component.png create mode 100644 static/img/card-component-01.png create mode 100644 static/img/card-component-02.png create mode 100644 static/img/card-component-03.png create mode 100644 static/img/empty-state.png create mode 100644 static/img/header-component.png create mode 100644 static/img/icon-component.png create mode 100644 static/img/listitem-component.png create mode 100644 static/img/text-component.png create mode 100644 static/img/textfield-component.png create mode 100644 static/img/toggle-component.png diff --git a/docs/ignite-cli/_category_.json b/docs/ignite-cli/_category_.json index d5208722..38fcbc41 100644 --- a/docs/ignite-cli/_category_.json +++ b/docs/ignite-cli/_category_.json @@ -1,8 +1,8 @@ { - "label": "Ignite", + "label": "ignite-cli", "link": null, "customProps": { - "description": "Infinite Red's hottest boilerplate for React Native.", + "description": "", "projectName": "ignite-cli", "sidebar": { "type": "autogenerated", diff --git a/docs/ignite-cli/boilerplate/app/components/AutoImage.md b/docs/ignite-cli/boilerplate/app/components/AutoImage.md index b53d6aa5..14975e34 100644 --- a/docs/ignite-cli/boilerplate/app/components/AutoImage.md +++ b/docs/ignite-cli/boilerplate/app/components/AutoImage.md @@ -6,9 +6,15 @@ 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](../../../../../static/img/autoimage-component.png) + +# Usage + ```tsx ``` @@ -16,7 +22,7 @@ Ignite's `AutoImage` Component is an enhanced version of the built-in React Nati `AutoImage` uses a `useAutoImage` hook to calculate the image's dimensions when you have a specific values you need to constrain the image within. This hook is also available for use in your own components. ```tsx -const { width, height } = useAutoImage(uri, maxWidth, maxHeight) +const { width, height } = useAutoImage(uri, maxWidth, maxHeight); ``` ## Props @@ -29,7 +35,9 @@ These props are used to constrain the image to a specific size. Use `maxWidth` o ```tsx diff --git a/docs/ignite-cli/boilerplate/app/components/Button.md b/docs/ignite-cli/boilerplate/app/components/Button.md index 458bfa82..585f5f7e 100644 --- a/docs/ignite-cli/boilerplate/app/components/Button.md +++ b/docs/ignite-cli/boilerplate/app/components/Button.md @@ -6,6 +6,10 @@ 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](../../../../../static/img/button-component.png) + +# Usage + ```tsx