docs: Create the first examples

examples/README.md

@@ -0,0 +1,12 @@
+# Examples
+
+This folder contains Unform examples for different types of components. All of
+them were tested and may work properly. You can also customize them for your
+needs, hiding labels, styling error messages, etc.
+
+| Name     | Link                                                                  |
+| -------- | --------------------------------------------------------------------- |
+| Input    | [JavaScript](./input.js) - [TypeScript](./typescript/input.tsx)       |
+| Radio    | [JavaScript](./radio.js) - [TypeScript](./typescript/radio.tsx)       |
+| Textarea | [JavaScript](./textarea.js) - [TypeScript](./typescript/textarea.tsx) |
+| Checkbox | [JavaScript](./checkbox.js) - [TypeScript](./typescript/checkbox.tsx) |

examples/checkbox.js

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react'
+
+import { useField } from '@unform/core'
+import { Form } from '@unform/web'
+
+/**
+ * This example renders one checkbox. If you want to render multiple options,
+ * check the other checkbox example, or adapt this one.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+function Checkbox({ name, value, label, ...rest }) {
+  const inputRef = useRef()
+  const { fieldName, defaultValue, registerField, error } = useField(name)
+
+  const defaultChecked = defaultValue === value
+
+  useEffect(() => {
+    registerField({
+      name: fieldName,
+      ref: inputRef,
+      getValue: ref => {
+        return ref.current.checked
+      },
+      clearValue: ref => {
+        /**
+         * If you want to change the default checked for false or true,
+         * you can do so here. In this example, when resetting the form,
+         * the checkbox goes back to its initial state.
+         */
+        ref.current.checked = defaultChecked
+      },
+      setValue: (ref, value) => {
+        ref.current.checked = value
+      },
+    })
+  }, [defaultValue, fieldName, registerField, defaultChecked])
+
+  return (
+    <div>
+      <input
+        defaultChecked={defaultChecked}
+        ref={inputRef}
+        value={value}
+        type="checkbox"
+        id={fieldName}
+        {...rest}
+      />
+
+      <label htmlFor={fieldName} key={fieldName}>
+        {label}
+      </label>
+
+      {error && <span>{error}</span>}
+    </div>
+  )
+}
+
+/**
+ * Usage
+ */
+export default function App() {
+  const formRef = useRef(null)
+
+  function handleSubmit(data) {
+    /**
+     * {
+     *   privacy: true || false
+     * }
+     */
+    console.log(data)
+  }
+
+  return (
+    <Form ref={formRef} onSubmit={handleSubmit}>
+      <Checkbox
+        name="privacy"
+        value="consent"
+        label="I agree with the privacy policy"
+      />
+
+      <button type="submit">Submit</button>
+    </Form>
+  )
+}

examples/input.js

@@ -0,0 +1,138 @@
+import { useRef, useEffect } from 'react'
+
+import { useField } from '@unform/core'
+import { Form } from '@unform/web'
+
+/**
+ * This input component supports many <input> types, including:
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+ *  - text
+ *  - number
+ *  - color
+ *  - date
+ *  - datetime-local
+ *  - email
+ *  - hidden
+ *  - time
+ *  - month
+ *  - password
+ *  - range
+ *  - search
+ *  - tel
+ *  - url
+ *  - week
+ *
+ * Don't use it with the type `submit` or `reset`; otherwise, bugs will occur.
+ */
+function Input({ name, type, label, value, ...rest }) {
+  const inputRef = useRef(null)
+  const { fieldName, defaultValue, registerField, error } = useField(name)
+
+  /**
+   * If you add a value to the input, it will be considered the default
+   * This is useful when you have a `<input type="hidden" />`
+   *
+   * You can also remove it and use the `initialData` or set dynamically.
+   */
+  const defaultInputValue = value || defaultValue
+
+  useEffect(() => {
+    registerField({
+      name: fieldName,
+      ref: inputRef,
+      getValue: ref => {
+        return ref.current.value
+      },
+      setValue: (ref, value) => {
+        ref.current.value = value
+      },
+      clearValue: ref => {
+        ref.current.value = ''
+      },
+    })
+  }, [fieldName, registerField])
+
+  return (
+    <div>
+      <label htmlFor={fieldName}>{label}</label>
+
+      <input
+        type={type || 'text'}
+        id={fieldName}
+        ref={inputRef}
+        defaultValue={defaultInputValue}
+        {...rest}
+      />
+
+      {error && <span>{error}</span>}
+    </div>
+  )
+}
+
+/**
+ * Usage
+ */
+export default function App() {
+  const formRef = useRef(null)
+
+  function handleSubmit(data) {
+    console.log(data)
+  }
+
+  return (
+    <Form ref={formRef} onSubmit={handleSubmit}>
+      <Input label="Name" name="name" />
+      <Input label="Choose a color" name="color" type="color" />
+      <Input label="Choose a number" name="number" type="number" />
+      <Input name="secret" type="hidden" value="teste" />
+      <Input label="email" name="email" type="email" />
+      <Input label="Month" name="month" type="month" min="2020-09" />
+      <Input
+        label="Telephone"
+        name="telephone"
+        type="tel"
+        placeholder="Ex: XX-XXXXX-XXXX"
+        pattern="[0-9]{2}-[0-9]{5}-[0-9]{4}"
+      />
+      <Input label="password" name="password" type="password" />
+      <Input label="time" name="time" type="time" min="09:00" max="18:00" />
+      <Input
+        label="website"
+        placeholder="https://example.com"
+        pattern="https://.*"
+        name="website"
+        type="url"
+      />
+      <Input
+        label="week"
+        min="2021-W01"
+        max="2021-W52"
+        name="week"
+        type="week"
+      />
+      <Input
+        label="date"
+        min="2021-01-01"
+        max="2021-12-31"
+        name="date"
+        type="date"
+      />
+      <Input
+        label="meeting-time"
+        min="2020-06-07T00:00"
+        max="2020-06-14T00:00"
+        name="meeting"
+        type="datetime-local"
+      />
+      <Input
+        label="search"
+        aria-label="Search through site content"
+        name="search"
+        type="search"
+      />
+      <Input type="range" name="volume" label="Volume" min="0" max="10" />
+
+      <button type="submit">Submit</button>
+    </Form>
+  )
+}

examples/radio.js

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react'
+
+import { useField } from '@unform/core'
+import { Form } from '@unform/web'
+
+/**
+ * This is a Radio component that supports rendering multiple options.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
+ */
+function Radio({ name, label, options, ...rest }) {
+  const inputRefs = useRef([])
+  const { fieldName, registerField, defaultValue = '', error } = useField(name)
+
+  useEffect(() => {
+    registerField({
+      name: fieldName,
+      ref: inputRefs,
+      getValue: refs => {
+        return refs.current.find(input => input?.checked)?.value
+      },
+      setValue: (refs, id) => {
+        const inputRef = refs.current.find(ref => ref.id === id)
+        if (inputRef) inputRef.checked = true
+      },
+      clearValue: refs => {
+        const inputRef = refs.current.find(ref => ref.checked === true)
+        if (inputRef) inputRef.checked = false
+      },
+    })
+  }, [fieldName, registerField])
+
+  return (
+    <div>
+      {label && <p>{label}</p>}
+
+      {options.map((option, index) => (
+        <span key={option.id}>
+          <input
+            type="radio"
+            ref={ref => {
+              inputRefs.current[index] = ref
+            }}
+            id={option.id}
+            name={name}
+            defaultChecked={defaultValue.includes(option.id)}
+            value={option.value}
+            {...rest}
+          />
+
+          <label htmlFor={option.id} key={option.id}>
+            {option.label}
+          </label>
+        </span>
+      ))}
+
+      {error && <span>{error}</span>}
+    </div>
+  )
+}
+
+/**
+ * Usage
+ */
+export default function App() {
+  const formRef = useRef(null)
+
+  function handleSubmit(data) {
+    /**
+     * {
+     *   username: 'jpedroschmitz'
+     * }
+     */
+    console.log(data)
+  }
+
+  const radioOptions = [
+    { id: 'jpedroschmitz', value: 'jpedroschmitz', label: 'jpedroschmitz' },
+    { id: 'rocketseat', value: 'rocketseat', label: 'Rocketseat' },
+  ]
+
+  return (
+    <Form ref={formRef} onSubmit={handleSubmit}>
+      <Radio name="username" label="Choose a username" options={radioOptions} />
+
+      <button type="submit">Submit</button>
+    </Form>
+  )
+}