├── src ├── react-app-env.d.ts ├── components │ ├── Form │ │ ├── textarea │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── checkbox │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── radio │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── react-dropzone │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── index.ts │ │ ├── react-phone-number-input │ │ │ └── index.tsx │ │ └── react-select │ │ │ ├── SelectInput │ │ │ └── index.tsx │ │ │ └── AsyncSelectInput │ │ │ └── index.tsx │ └── Button │ │ ├── index.tsx │ │ └── styles.ts ├── services │ └── api.ts ├── index.tsx ├── pages │ ├── ReactDropzone │ │ ├── styles.ts │ │ └── index.tsx │ ├── ReactSelect │ │ ├── styles.ts │ │ └── index.tsx │ ├── Checkbox │ │ ├── styles.ts │ │ └── index.tsx │ ├── Radio │ │ ├── styles.ts │ │ └── index.tsx │ ├── ReactPhoneNumberInput │ │ ├── styles.ts │ │ └── index.tsx │ ├── TextArea │ │ ├── styles.ts │ │ └── index.tsx │ └── _layouts │ │ └── default │ │ ├── styles.ts │ │ └── index.tsx ├── App.tsx ├── styles │ └── global.ts ├── routes │ ├── Route.tsx │ └── index.tsx └── assets │ └── logo-unform.svg ├── public ├── favicon.ico └── index.html ├── prettier.config.js ├── .editorconfig ├── .gitignore ├── tsconfig.json ├── LICENSE ├── .github └── workflows │ └── blank.yml ├── .eslintrc.json ├── package.json └── README.md /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliasGcf/unform-examples/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | trailingComma: 'all', 4 | arrowParens: 'avoid', 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Form/textarea/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | 5 | `; 6 | -------------------------------------------------------------------------------- /src/services/api.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const api = axios.create({ 4 | baseURL: 'https://api.github.com', 5 | }); 6 | 7 | export default api; 8 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /src/components/Form/checkbox/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Label = styled.label` 4 | font-size: 18px; 5 | color: #f4ede8; 6 | 7 | input { 8 | margin-right: 8px; 9 | } 10 | `; 11 | -------------------------------------------------------------------------------- /src/components/Form/radio/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Label = styled.label` 4 | font-size: 18px; 5 | color: #f4ede8; 6 | 7 | input { 8 | margin-right: 8px; 9 | } 10 | `; 11 | -------------------------------------------------------------------------------- /src/pages/ReactDropzone/styles.ts: -------------------------------------------------------------------------------- 1 | import { Form } from '@unform/web'; 2 | import styled from 'styled-components'; 3 | 4 | export const UnForm = styled(Form)` 5 | padding: 24px; 6 | border-radius: 10px; 7 | background: #3e3b47; 8 | 9 | button { 10 | margin-top: 16px; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /src/pages/ReactSelect/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Form } from '@unform/web'; 3 | 4 | export const UnForm = styled(Form)` 5 | padding: 24px; 6 | border-radius: 10px; 7 | background: #3e3b47; 8 | 9 | button { 10 | margin-top: 16px; 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /src/pages/Checkbox/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Form } from '@unform/web'; 3 | 4 | export const UnForm = styled(Form)` 5 | padding: 24px; 6 | border-radius: 10px; 7 | background: #3e3b47; 8 | 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | `; 13 | -------------------------------------------------------------------------------- /src/pages/Radio/styles.ts: -------------------------------------------------------------------------------- 1 | import { Form } from '@unform/web'; 2 | import styled from 'styled-components'; 3 | 4 | export const UnForm = styled(Form)` 5 | padding: 24px; 6 | border-radius: 10px; 7 | background: #3e3b47; 8 | 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | `; 13 | -------------------------------------------------------------------------------- /src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ButtonHTMLAttributes } from 'react'; 2 | 3 | import { ButtonContainer } from './styles'; 4 | 5 | type ButtonProps = ButtonHTMLAttributes; 6 | 7 | const Button: React.FC = ({ children, ...rest }) => { 8 | return {children}; 9 | }; 10 | 11 | export default Button; 12 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { HashRouter } from 'react-router-dom'; 3 | 4 | import Routes from './routes'; 5 | import GlobalStyle from './styles/global'; 6 | 7 | const App: React.FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | export default App; 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/components/Form/react-dropzone/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | background: #232129; 5 | color: #fff; 6 | padding: 24px 16px; 7 | border-radius: 10px; 8 | 9 | cursor: pointer; 10 | 11 | ul { 12 | li { 13 | margin-left: 8px; 14 | } 15 | margin-bottom: 16px; 16 | } 17 | 18 | p { 19 | font-weight: 500; 20 | font-size: 16px; 21 | } 22 | `; 23 | -------------------------------------------------------------------------------- /src/components/Form/index.ts: -------------------------------------------------------------------------------- 1 | export { default as SelectInput } from './react-select/SelectInput'; 2 | export { default as AsyncSelectInput } from './react-select/AsyncSelectInput'; 3 | export { default as CheckboxInput } from './checkbox'; 4 | export { default as RadioInput } from './radio'; 5 | export { default as DropzoneInput } from './react-dropzone'; 6 | export { default as TextAreaInput } from './textarea'; 7 | export { default as PhoneNumberInput } from './react-phone-number-input'; 8 | -------------------------------------------------------------------------------- /src/pages/ReactPhoneNumberInput/styles.ts: -------------------------------------------------------------------------------- 1 | import { Form } from '@unform/web'; 2 | import styled from 'styled-components'; 3 | 4 | export const UnForm = styled(Form)` 5 | padding: 24px; 6 | border-radius: 10px; 7 | background: #3e3b47; 8 | 9 | input { 10 | padding: 8px 0 8px 8px; 11 | border-radius: 10px; 12 | border: none; 13 | 14 | margin-left: 8px; 15 | } 16 | 17 | .PhoneInputCountryIconImg, 18 | .PhoneInputCountrySelectArrow { 19 | color: #fbc131; 20 | } 21 | `; 22 | -------------------------------------------------------------------------------- /src/styles/global.ts: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | 3 | export default createGlobalStyle` 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | outline: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background: #6633cc; 13 | color: #000; 14 | -webkit-font-smoothing: antialiased; 15 | } 16 | 17 | body, input, button { 18 | font-family: 'Roboto', sans-serif; 19 | font-size: 16px; 20 | } 21 | 22 | button { 23 | cursor: pointer; 24 | } 25 | `; 26 | -------------------------------------------------------------------------------- /src/components/Button/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ButtonContainer = styled.button` 4 | height: 40px; 5 | width: 100%; 6 | background: #fbc131; 7 | padding: 0px 16px; 8 | border-radius: 10px; 9 | border: none; 10 | font-size: 18px; 11 | font-weight: 500; 12 | 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | 17 | cursor: pointer; 18 | 19 | transition: background 0.3s; 20 | 21 | :hover { 22 | background: #cc9d29; 23 | } 24 | `; 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | Unform examples 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/TextArea/styles.ts: -------------------------------------------------------------------------------- 1 | import { Form } from '@unform/web'; 2 | import styled from 'styled-components'; 3 | 4 | export const UnForm = styled(Form)` 5 | padding: 24px; 6 | border-radius: 10px; 7 | background: #3e3b47; 8 | 9 | display: flex; 10 | flex-direction: column; 11 | 12 | textarea { 13 | width: 100%; 14 | height: 150px; 15 | 16 | max-height: 300px; 17 | min-height: 56px; 18 | 19 | margin-bottom: 16px; 20 | border-radius: 10px; 21 | 22 | padding: 8px; 23 | 24 | font-family: 'Roboto', sans-serif; 25 | font-size: 16px; 26 | resize: vertical; 27 | } 28 | `; 29 | -------------------------------------------------------------------------------- /src/routes/Route.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | RouteProps as ReactDOMRouteProps, 4 | Route as ReactDOMRoute, 5 | } from 'react-router-dom'; 6 | 7 | import DefaultLayout from '../pages/_layouts/default'; 8 | 9 | interface RouteProps extends ReactDOMRouteProps { 10 | component: React.ComponentType; 11 | } 12 | 13 | const Route: React.FC = ({ component: Component, ...rest }) => { 14 | const Layout = DefaultLayout; 15 | 16 | return ( 17 | { 20 | return ( 21 | 22 | 23 | 24 | ); 25 | }} 26 | /> 27 | ); 28 | }; 29 | 30 | export default Route; 31 | -------------------------------------------------------------------------------- /src/pages/_layouts/default/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Form as Unform } from '@unform/web'; 3 | 4 | export const Container = styled.div` 5 | height: 100vh; 6 | 7 | > h1 { 8 | font-size: 24px; 9 | color: #fff; 10 | margin-bottom: 16px; 11 | } 12 | 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | flex-direction: column; 17 | 18 | img { 19 | margin-bottom: 32px; 20 | } 21 | `; 22 | 23 | export const Wrapper = styled.div` 24 | max-width: 450px; 25 | width: 100%; 26 | `; 27 | 28 | export const Form = styled(Unform)` 29 | max-width: 450px; 30 | width: 100%; 31 | 32 | margin-bottom: 40px; 33 | 34 | button { 35 | margin-top: 16px; 36 | } 37 | `; 38 | -------------------------------------------------------------------------------- /src/components/Form/textarea/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, InputHTMLAttributes } from 'react'; 2 | import { useField } from '@unform/core'; 3 | 4 | interface Props extends InputHTMLAttributes { 5 | name: string; 6 | } 7 | 8 | const TextAreaInput: React.FC = ({ name, ...rest }) => { 9 | const inputRef = useRef(null); 10 | const { fieldName, registerField, defaultValue = '' } = useField(name); 11 | 12 | useEffect(() => { 13 | registerField({ 14 | name: fieldName, 15 | ref: inputRef.current, 16 | path: 'value', 17 | }); 18 | }, [registerField, fieldName]); 19 | 20 | return