docs: Add description for all pages

jpedroschmitz · jpedroschmitz · commit 6b5683251233 · 2021-01-13T10:22:39.000-03:00
diff --git a/docs/src/docs/examples/checkbox.mdx b/docs/src/docs/examples/checkbox.mdx
@@ -1,5 +1,6 @@
 ---
 title: Checkbox
+description: How to create a Checkbox with Unform
 ---
 
 > ⚠️ All examples below are using **TypeScript**, if you're not using it you can simply remove all type definitions as the `React.FC<Props>` from component definition.
diff --git a/docs/src/docs/examples/file-input.mdx b/docs/src/docs/examples/file-input.mdx
@@ -1,5 +1,6 @@
 ---
 title: File Input
+description: How to create a File Input with Unform
 ---
 
 Enable your users to upload images or another files using Unform.
@@ -11,7 +12,13 @@ Enable your users to upload images or another files using Unform.
 Simple image input with preview before upload.
 
 ```tsx
-import React, { ChangeEvent, useRef, useEffect, useCallback, useState }  from 'react';
+import React, {
+  ChangeEvent,
+  useRef,
+  useEffect,
+  useCallback,
+  useState,
+} from 'react';
 
 import { useField } from '@unform/core';
 
@@ -50,19 +57,14 @@ const ImageInput: React.FC<InputProps> = ({ name, ...rest }) => {
       },
       setValue(_: HTMLInputElement, value: string) {
         setPreview(value);
-      }
-    })
+      },
+    });
   }, [fieldName, registerField]);
 
   return (
     <>
-      { preview && <img src={preview} alt="Preview" width="100" /> }
-      <input
-        type="file"
-        ref={inputRef}
-        onChange={handlePreview}
-        {...rest}
-      />
+      {preview && <img src={preview} alt="Preview" width="100" />}
+      <input type="file" ref={inputRef} onChange={handlePreview} {...rest} />
     </>
   );
 };
diff --git a/docs/src/docs/examples/react-datepicker.mdx b/docs/src/docs/examples/react-datepicker.mdx
@@ -1,5 +1,6 @@
 ---
 title: React DatePicker
+description: Learn how to use React DatePicker with Unform
 ---
 
 [React DatePicker](https://reactdatepicker.com/) is a very simple library that provides a fully customizable Date & Time input with a cool picker.
diff --git a/docs/src/docs/examples/react-input-mask.mdx b/docs/src/docs/examples/react-input-mask.mdx
@@ -1,5 +1,6 @@
 ---
 title: React Input Mask
+description: Learn how to use React Input Mask with Unform
 ---
 
 [React Input Mask](https://github.com/sanniassin/react-input-mask) offers an easy way to add masks to inputs.
diff --git a/docs/src/docs/examples/react-native-input-mask.mdx b/docs/src/docs/examples/react-native-input-mask.mdx
@@ -1,5 +1,6 @@
 ---
 title: React Native Input Mask
+description: Learn how to use React Native Input Mask with Unform
 ---
 
 [React Native Masked Text](https://github.com/benhurott/react-native-masked-text) offers an easy way to add masks to inputs.
diff --git a/docs/src/docs/examples/react-select.mdx b/docs/src/docs/examples/react-select.mdx
@@ -1,5 +1,6 @@
 ---
 title: React Select
+description: Learn how to use React Select with Unform
 ---
 
 [React Select](https://react-select.com/) is the coolest ReactJS custom `<select>` library.
diff --git a/docs/src/docs/examples/react-simple-code-editor.mdx b/docs/src/docs/examples/react-simple-code-editor.mdx
@@ -1,5 +1,6 @@
 ---
 title: React Simple Code Editor
+description: Learn how to use React Simple Code Editor with Unform
 ---
 
 [React Simple Code Editor](http://satya164.xyz/react-simple-code-editor/) is a cool library focused on providing a simple way to add a code input source to user.
diff --git a/docs/src/docs/guides/basic-form.mdx b/docs/src/docs/guides/basic-form.mdx
@@ -1,5 +1,6 @@
 ---
 title: Basic form
+description: Creating a basic form using Unform
 ---
 
 Let's suppose you're creating a sign in form with two fields, `email` and `password`.
diff --git a/docs/src/docs/guides/complex-structures.mdx b/docs/src/docs/guides/complex-structures.mdx
@@ -1,5 +1,6 @@
 ---
 title: Complex structures
+description: Learn to create complex form structures using Unform
 ---
 
 Most of the time, the form structure is based on how data is received or restored from the back-end including relationships and complex data structures.
diff --git a/docs/src/docs/guides/get-set-field-error.mdx b/docs/src/docs/guides/get-set-field-error.mdx
@@ -1,5 +1,6 @@
 ---
 title: Get/set field error
+description: Using the get/set field error on Unform
 ---
 
 Unform provides an easy way to set or access input error using form reference.
diff --git a/docs/src/docs/guides/get-set-field-value.mdx b/docs/src/docs/guides/get-set-field-value.mdx
@@ -1,5 +1,6 @@
 ---
 title: Get/set field value
+description: Using the get/set field value on Unform
 ---
 
 Unform provides an easy way to set or access input data using form reference.
diff --git a/docs/src/docs/guides/initial-data.mdx b/docs/src/docs/guides/initial-data.mdx
@@ -1,5 +1,6 @@
 ---
 title: Initial data
+description: Providing initial data on Unform
 ---
 
 To provide custom initial data to inputs you can provide an `initialData` prop to `<Form />`:
diff --git a/docs/src/docs/guides/manual-form-submit.mdx b/docs/src/docs/guides/manual-form-submit.mdx
@@ -1,5 +1,6 @@
 ---
 title: Manual form submit
+description: Manually submitting a form using the submitForm method
 ---
 
 With Unform you can submit your form without a submit button using the `submitForm` function exposed by form reference.
diff --git a/docs/src/docs/guides/react-native.mdx b/docs/src/docs/guides/react-native.mdx
@@ -1,5 +1,6 @@
 ---
 title: React Native
+description: Get started with Unform in React Native apps
 ---
 
 The Unform API is almost identic between web and mobile, below you can see an example of an Input and a Form using Unform and React Native.
@@ -11,11 +12,7 @@ In React Native we need to use `TextInput` provided by the `react-native` packag
 Also, to keep the field uncontrolled, that is, don't store it's value within a state, we need to track input changes and save its value inside the input reference.
 
 ```jsx title=Input.js lineNumbers=true
-import React, {
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { TextInput } from 'react-native';
 import { useField } from '@unform/core';
@@ -62,7 +59,7 @@ function Input({ name, ...rest }) {
       {...rest}
     />
   );
-};
+}
 
 export default Input;
 ```
diff --git a/docs/src/docs/guides/reset-form.mdx b/docs/src/docs/guides/reset-form.mdx
@@ -1,5 +1,6 @@
 ---
 title: Reset form
+description: Manually reseting a form using the resetForm method
 ---
 
 There are two ways to reset all form data:
diff --git a/docs/src/docs/guides/validation.mdx b/docs/src/docs/guides/validation.mdx
@@ -1,5 +1,6 @@
 ---
 title: Validation
+description: Learn to validate forms using Yup on Unform
 ---
 
 Unform **does not includes validation by default**, so you can choose the best library that fits for you.
@@ -54,8 +55,12 @@ export default function SignIn() {
       formRef.current.setErrors({});
 
       const schema = Yup.object().shape({
-        email: Yup.string().email().required(),
-        password: Yup.string().min(6).required(),
+        email: Yup.string()
+          .email()
+          .required(),
+        password: Yup.string()
+          .min(6)
+          .required(),
       });
 
       await schema.validate(data, {
@@ -81,7 +86,7 @@ export default function SignIn() {
     <Form ref={formRef} onSubmit={handleSubmit}>
       ...
     </Form>
-  )
+  );
 }
 ```
 
diff --git a/docs/src/docs/recipes/accessing-field-ref.mdx b/docs/src/docs/recipes/accessing-field-ref.mdx
@@ -1,5 +1,6 @@
 ---
 title: Accessing field ref
+description: Accessing a field ref by using the getFieldRef method
 ---
 
 To access a single field reference you can use the `getFieldRef` function exposed inside form reference.
diff --git a/docs/src/docs/recipes/accessing-form-event.mdx b/docs/src/docs/recipes/accessing-form-event.mdx
@@ -1,5 +1,6 @@
 ---
 title: Accessing form event
+description: Accessing form events on Unform
 ---
 
 In web, you can access the form event in the 3rd parameter of the submit function.
diff --git a/docs/src/docs/recipes/accessing-form-ref.mdx b/docs/src/docs/recipes/accessing-form-ref.mdx
@@ -1,5 +1,6 @@
 ---
 title: Accessing form reference
+description: Learn to access a form reference using Unform
 ---
 
 Unform exposes a various helper functions through the form reference.
diff --git a/docs/src/docs/recipes/clear-input-error-on-focus.mdx b/docs/src/docs/recipes/clear-input-error-on-focus.mdx
@@ -1,5 +1,6 @@
 ---
 title: Clear input error on focus
+description: Learn to clean input errors on focus by using the clearError method
 ---
 
 Unform exposes a function called `clearError` within `useField` hook, so use it inside `onFocus` and it's done.
diff --git a/docs/src/docs/recipes/simple-input.mdx b/docs/src/docs/recipes/simple-input.mdx
@@ -1,5 +1,6 @@
 ---
 title: Simple input
+description: Creating a simple input with Unform
 ---
 
 Simple input
diff --git a/docs/src/docs/recipes/styled-components.mdx b/docs/src/docs/recipes/styled-components.mdx
@@ -1,5 +1,6 @@
 ---
 title: Usage with Styled Components
+description: Integrating Unform with Styled Components
 ---
 
 As with Unform you create your own components for input sources, you can customize the inputs with any styling library you want or even with pure CSS.
diff --git a/docs/src/docs/recipes/typescript.mdx b/docs/src/docs/recipes/typescript.mdx
@@ -1,5 +1,6 @@
 ---
 title: Usage with TypeScript
+description: Learn how can you use Unform with TypeScript
 ---
 
 Unform exposes all type definitions from within it's packages, so it's not necessary to install `@types` dependencies.
