├── .husky ├── .gitignore ├── post-merge ├── pre-commit └── commit-msg ├── lib └── helper.js ├── public ├── favicon │ ├── favicon.ico │ ├── large-og.jpg │ ├── apple-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── ms-icon-70x70.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── apple-icon-precomposed.png │ ├── browserconfig.xml │ └── manifest.json └── fonts │ └── inter-var-latin.woff2 ├── postcss.config.js ├── .vscode └── settings.json ├── jsconfig.json ├── .eslintrc ├── pages ├── _app.js ├── index.jsx ├── _document.js ├── yup.jsx └── inputs.jsx ├── .prettierrc.js ├── vercel.json ├── components ├── Button.jsx ├── HashLink.jsx ├── CustomLink.jsx ├── UnstyledLink.jsx ├── Nav.jsx ├── ImageLightbox.jsx ├── Input.jsx ├── TextArea.jsx ├── Seo.jsx ├── PasswordInput.jsx ├── Select.jsx ├── ReactSelect.jsx ├── DatePicker.jsx └── Dropzone.jsx ├── .gitignore ├── .prettierignore ├── commitlint.config.js ├── tailwind.config.js ├── package.json ├── README.md └── styles └── globals.css /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/post-merge: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn lint-staged -------------------------------------------------------------------------------- /lib/helper.js: -------------------------------------------------------------------------------- 1 | export function classNames(...classes) { 2 | return classes.filter(Boolean).join(' '); 3 | } 4 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/favicon.ico -------------------------------------------------------------------------------- /public/favicon/large-og.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/large-og.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon.png -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /public/fonts/inter-var-latin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/fonts/inter-var-latin.woff2 -------------------------------------------------------------------------------- /public/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /public/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /public/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /public/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /public/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /public/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/theodorusclarence/rhf-input/HEAD/public/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "css.validate": false, 3 | "editor.formatOnSave": true, 4 | "editor.tabSize": 2, 5 | "prettier.tabWidth": 2 6 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "moduleResolution": "node", 3 | "compilerOptions": { 4 | "jsx": "preserve", 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/*": ["*"] 8 | } 9 | }, 10 | "exclude": ["node_modules", ".next"] 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": ["eslint:recommended", "next"], 8 | "rules": { 9 | "no-unused-vars": "warn", 10 | "no-console": "warn" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import 'react-image-lightbox/style.css'; 2 | import '@/styles/globals.css'; 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default MyApp; 13 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'always', 3 | singleQuote: true, 4 | jsxSingleQuote: true, 5 | tabWidth: 2, 6 | overrides: [ 7 | { 8 | files: '*.mdx', 9 | options: { 10 | tabWidth: 2, 11 | }, 12 | }, 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "headers": [ 3 | { 4 | "source": "/fonts/inter-var-latin.woff2", 5 | "headers": [ 6 | { 7 | "key": "Cache-Control", 8 | "value": "public, max-age=31536000, immutable" 9 | } 10 | ] 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /public/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /components/Button.jsx: -------------------------------------------------------------------------------- 1 | import { classNames } from '@/lib/helper'; 2 | 3 | export default function Button({ children, className = '', ...rest }) { 4 | return ( 5 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /components/HashLink.jsx: -------------------------------------------------------------------------------- 1 | import { classNames } from '@/lib/helper'; 2 | import UnstyledLink from './UnstyledLink'; 3 | 4 | export default function HashLink({ className, children, ...rest }) { 5 | return ( 6 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /components/CustomLink.jsx: -------------------------------------------------------------------------------- 1 | import { classNames } from '@/lib/helper'; 2 | import UnstyledLink from './UnstyledLink'; 3 | 4 | export default function CustomLink({ children, className = '', ...rest }) { 5 | return ( 6 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 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 | # next.js 12 | .next 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | // TODO Add Scope Enum Here 5 | // 'scope-enum': [2, 'always', ['yourscope', 'yourscope']], 6 | 'type-enum': [ 7 | 2, 8 | 'always', 9 | [ 10 | 'feat', 11 | 'fix', 12 | 'BREAKING CHANGE', 13 | 'docs', 14 | 'chore', 15 | 'style', 16 | 'refactor', 17 | 'ci', 18 | 'test', 19 | 'perf', 20 | 'vercel', 21 | ], 22 | ], 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { fontFamily } = require('tailwindcss/defaultTheme'); 2 | 3 | module.exports = { 4 | mode: 'jit', 5 | purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'], 6 | darkMode: false, // or 'media' or 'class' 7 | theme: { 8 | extend: { 9 | fontFamily: { 10 | primary: ['Inter', ...fontFamily.sans], 11 | }, 12 | colors: { 13 | primary: { 14 | 400: '#00E0F3', 15 | 500: '#00c4fd', 16 | }, 17 | dark: '#222222', 18 | }, 19 | }, 20 | }, 21 | variants: { 22 | extend: {}, 23 | }, 24 | plugins: [require('@tailwindcss/forms')], 25 | }; 26 | -------------------------------------------------------------------------------- /components/UnstyledLink.jsx: -------------------------------------------------------------------------------- 1 | import { classNames } from '@/lib/helper'; 2 | import Link from 'next/link'; 3 | 4 | export default function UnstyledLink({ children, href, className, ...rest }) { 5 | const isInternalLink = href && (href.startsWith('/') || href.startsWith('#')); 6 | 7 | if (isInternalLink) { 8 | return ( 9 | 10 | 11 | {children} 12 | 13 | 14 | ); 15 | } 16 | 17 | return ( 18 | 25 | {children} 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /components/Nav.jsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | 3 | const links = [ 4 | { href: '/', label: 'Route' }, 5 | { href: '/', label: 'Route' }, 6 | ]; 7 | 8 | export default function Nav() { 9 | return ( 10 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /public/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /components/ImageLightbox.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import Lightbox from 'react-image-lightbox'; 3 | 4 | export default function ImageLightbox({ src, alt, ...rest }) { 5 | const [index, setIndex] = useState(0); 6 | const [isOpen, setIsOpen] = useState(false); 7 | 8 | const images = typeof src === 'string' ? [src] : [...src]; 9 | 10 | return ( 11 | <> 12 | 19 | {isOpen && ( 20 | setIsOpen(false)} 25 | onMovePrevRequest={() => 26 | setIndex( 27 | (prevIndex) => (prevIndex + images.length - 1) % images.length 28 | ) 29 | } 30 | onMoveNextRequest={() => 31 | setIndex((prevIndex) => (prevIndex + 1) % images.length) 32 | } 33 | /> 34 | )} 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-tailwind-starter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "prepare": "husky install", 10 | "lint": "next lint" 11 | }, 12 | "dependencies": { 13 | "@hookform/resolvers": "^2.6.0", 14 | "@tailwindcss/forms": "^0.3.3", 15 | "autoprefixer": "^10.2.1", 16 | "next": "^11.0.0", 17 | "postcss": "^8.2.4", 18 | "react": "^17.0.2", 19 | "react-datepicker": "^4.1.1", 20 | "react-dom": "^17.0.2", 21 | "react-dropzone": "^11.3.4", 22 | "react-hook-form": "^7.10.1", 23 | "react-icons": "^4.2.0", 24 | "react-image-lightbox": "^5.1.4", 25 | "react-select": "^4.3.1", 26 | "yup": "^0.32.9" 27 | }, 28 | "devDependencies": { 29 | "@commitlint/cli": "^12.1.4", 30 | "@commitlint/config-conventional": "^12.1.4", 31 | "eslint": "^7.29.0", 32 | "eslint-config-next": "^11.0.1", 33 | "husky": "^6.0.0", 34 | "lint-staged": "^11.0.0", 35 | "prettier": "^2.3.0", 36 | "tailwindcss": "^2.2.2" 37 | }, 38 | "lint-staged": { 39 | "**/*.{js,jsx,ts,tsx}": [ 40 | "yarn prettier --write" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /pages/index.jsx: -------------------------------------------------------------------------------- 1 | import Seo from '@/components/Seo'; 2 | import CustomLink from '@/components/CustomLink'; 3 | 4 | const pageList = [ 5 | { label: 'Using Yup as schema validator', route: '/yup' }, 6 | { label: 'Collection of inputs', route: '/inputs' }, 7 | { label: 'Multi Step Form', route: 'https://clarence.link/stepform' }, 8 | ]; 9 | 10 | export default function Home() { 11 | return ( 12 | <> 13 | 14 | 15 |
16 |
17 |
18 |

React Hook Form Default Inputs

19 | 23 | See the repository 24 | 25 | 26 |
27 |

List

28 |
    29 | {pageList.map(({ label, route }) => ( 30 |
  • 31 | 32 | {label} 33 | 34 |
    • 35 | ))} 36 |
37 |
38 |
39 |
40 |
41 | © {new Date().getFullYear()} By{' '} 42 | 43 | Theodorus Clarence 44 | {' '} 45 | &{' '} 46 | 47 | Muhammad Rizqi Tsani 48 | 49 |
50 |
51 | 52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /components/Input.jsx: -------------------------------------------------------------------------------- 1 | import { useFormContext } from 'react-hook-form'; 2 | import { HiExclamationCircle } from 'react-icons/hi'; 3 | 4 | import { classNames } from '@/lib/helper'; 5 | 6 | export default function Input({ 7 | label, 8 | placeholder = '', 9 | helperText = '', 10 | id, 11 | type = 'text', 12 | readOnly = false, 13 | validation, 14 | ...rest 15 | }) { 16 | const { 17 | register, 18 | formState: { errors }, 19 | } = useFormContext(); 20 | 21 | return ( 22 |
23 | 26 |
27 | 45 | 46 | {errors[id] && ( 47 |
48 | 49 |
50 | )} 51 |
52 |
53 | {helperText !== '' && ( 54 |

{helperText}

55 | )} 56 | {errors[id] && ( 57 | {errors[id].message} 58 | )} 59 |
60 |
61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /components/TextArea.jsx: -------------------------------------------------------------------------------- 1 | import { useFormContext } from 'react-hook-form'; 2 | import { HiExclamationCircle } from 'react-icons/hi'; 3 | 4 | import { classNames } from '@/lib/helper'; 5 | 6 | export default function TextArea({ 7 | label, 8 | placeholder = '', 9 | helperText = '', 10 | id, 11 | type = 'text', 12 | readOnly = false, 13 | validation, 14 | ...rest 15 | }) { 16 | const { 17 | register, 18 | formState: { errors }, 19 | } = useFormContext(); 20 | 21 | return ( 22 |
23 | 26 |
27 |