From 2dfb2b7ecb9e10ffdc1aa45af460d589620a4eff Mon Sep 17 00:00:00 2001
From: SuperSuperDev <steven@supersuperstore.com>
Date: Sat, 7 Aug 2021 20:42:35 +0700
Subject: [PATCH] feat!: use typescript

---
 .eslintrc                                     |  4 +++
 components/{Button.jsx => Button.tsx}         | 12 +++++++-
 components/{CustomLink.jsx => CustomLink.tsx} |  6 ++--
 components/{Nav.jsx => Nav.tsx}               | 10 +++++--
 components/{Seo.jsx => Seo.tsx}               | 28 +++++++++++++-----
 .../{UnstyledLink.jsx => UnstyledLink.tsx}    | 12 ++++++--
 jsconfig.json                                 | 11 -------
 lib/helper.js                                 |  3 --
 lib/helper.ts                                 |  3 ++
 next-env.d.ts                                 |  3 ++
 package.json                                  |  6 ++--
 pages/{_app.js => _app.tsx}                   |  0
 pages/{_document.js => _document.tsx}         |  0
 pages/{index.jsx => index.tsx}                | 10 +++----
 tsconfig.json                                 | 24 +++++++++++++++
 yarn.lock                                     | 29 +++++++++++++++++++
 16 files changed, 122 insertions(+), 39 deletions(-)
 rename components/{Button.jsx => Button.tsx} (51%)
 rename components/{CustomLink.jsx => CustomLink.tsx} (76%)
 rename components/{Nav.jsx => Nav.tsx} (73%)
 rename components/{Seo.jsx => Seo.tsx} (71%)
 rename components/{UnstyledLink.jsx => UnstyledLink.tsx} (70%)
 delete mode 100644 jsconfig.json
 delete mode 100644 lib/helper.js
 create mode 100644 lib/helper.ts
 create mode 100644 next-env.d.ts
 rename pages/{_app.js => _app.tsx} (100%)
 rename pages/{_document.js => _document.tsx} (100%)
 rename pages/{index.jsx => index.tsx} (84%)
 create mode 100644 tsconfig.json

diff --git a/.eslintrc b/.eslintrc
index 359893e..f72ff5c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,5 +8,9 @@
   "rules": {
     "no-unused-vars": "warn",
     "no-console": "warn"
+  },
+  "globals": {
+    "React": true,
+    "JSX": true
   }
 }
diff --git a/components/Button.jsx b/components/Button.tsx
similarity index 51%
rename from components/Button.jsx
rename to components/Button.tsx
index 2058bb2..0fce62c 100644
--- a/components/Button.jsx
+++ b/components/Button.tsx
@@ -1,6 +1,16 @@
 import clsx from 'clsx';
 
-export default function Button({ children, className = '', ...rest }) {
+type ButtonProps = {
+  href: string;
+  children: React.ReactChild | string;
+  className?: string;
+} & React.ComponentPropsWithoutRef<'button'>;
+
+export default function Button({
+  children,
+  className = '',
+  ...rest
+}: ButtonProps) {
   return (
     <button
       {...rest}
diff --git a/components/CustomLink.jsx b/components/CustomLink.tsx
similarity index 76%
rename from components/CustomLink.jsx
rename to components/CustomLink.tsx
index 9679d92..54c7a50 100644
--- a/components/CustomLink.jsx
+++ b/components/CustomLink.tsx
@@ -1,16 +1,14 @@
 import clsx from 'clsx';
-import UnstyledLink from './UnstyledLink';
+import UnstyledLink, { UnstyledLinkProps } from './UnstyledLink';
 
 export default function CustomLink({
   children,
-  openNewTab = undefined,
   className = '',
   ...rest
-}) {
+}: UnstyledLinkProps) {
   return (
     <UnstyledLink
       {...rest}
-      openNewTab={openNewTab}
       className={clsx(
         'inline-flex items-center font-bold hover:text-primary-400 animated-underline',
         className
diff --git a/components/Nav.jsx b/components/Nav.tsx
similarity index 73%
rename from components/Nav.jsx
rename to components/Nav.tsx
index 5f6e685..4799b50 100644
--- a/components/Nav.jsx
+++ b/components/Nav.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import UnstyledLink from './UnstyledLink';
 
 const links = [
   { href: '/', label: 'Route' },
@@ -17,9 +18,12 @@ export default function Nav() {
         <ul className='flex items-center justify-between space-x-4'>
           {links.map(({ href, label }) => (
             <li key={`${href}${label}`}>
-              <Link href={href}>
-                <a className='text-white hover:text-green-400'>{label}</a>
-              </Link>
+              <UnstyledLink
+                href={href}
+                className='text-white hover:text-green-400'
+              >
+                {label}
+              </UnstyledLink>
             </li>
           ))}
         </ul>
diff --git a/components/Seo.jsx b/components/Seo.tsx
similarity index 71%
rename from components/Seo.jsx
rename to components/Seo.tsx
index a491156..23c0083 100644
--- a/components/Seo.jsx
+++ b/components/Seo.tsx
@@ -1,18 +1,30 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-export default function Seo(props) {
+const defaultMeta = {
+  title: 'Next.js Tailwind Starter',
+  site_name: 'Next.js Tailwind Starter',
+  description: 'A template for Next.js and Tailwindcss by Theodorus Clarence',
+  url: 'https://theodorusclarence.com',
+  image: 'https://theodorusclarence.com/favicon/large-og.jpg',
+  type: 'website',
+  robots: 'follow, index',
+};
+
+type SeoProps = {
+  date?: string;
+  templateTitle?: string;
+} & Partial<typeof defaultMeta>;
+
+export default function Seo(props: SeoProps) {
   const router = useRouter();
   const meta = {
-    title: 'Next.js Tailwind Starter',
-    site_name: 'Next.js Tailwind Starter',
-    description: 'A template for Next.js and Tailwindcss by Theodorus Clarence',
-    url: 'https://theodorusclarence.com',
-    image: 'https://theodorusclarence.com/favicon/large-og.jpg',
-    type: 'website',
-    robots: 'follow, index',
+    ...defaultMeta,
     ...props,
   };
+  meta['title'] = props.templateTitle
+    ? `${props.templateTitle} | ${meta.site_name}`
+    : meta.title;
 
   return (
     <Head>
diff --git a/components/UnstyledLink.jsx b/components/UnstyledLink.tsx
similarity index 70%
rename from components/UnstyledLink.jsx
rename to components/UnstyledLink.tsx
index 4ecf5d6..63717d7 100644
--- a/components/UnstyledLink.jsx
+++ b/components/UnstyledLink.tsx
@@ -1,5 +1,13 @@
 import clsx from 'clsx';
-import Link from 'next/link';
+import Link, { LinkProps } from 'next/link';
+
+export type UnstyledLinkProps = {
+  href: string;
+  children: React.ReactChild | string;
+  openNewTab?: boolean;
+  className?: string;
+} & React.ComponentPropsWithoutRef<'a'> &
+  LinkProps;
 
 export default function UnstyledLink({
   children,
@@ -7,7 +15,7 @@ export default function UnstyledLink({
   openNewTab = undefined,
   className,
   ...rest
-}) {
+}: UnstyledLinkProps) {
   const isNewTab =
     openNewTab !== undefined
       ? openNewTab
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index fa98f53..0000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "moduleResolution": "node",
-  "compilerOptions": {
-    "jsx": "preserve",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["*"]
-    }
-  },
-  "exclude": ["node_modules", ".next"]
-}
diff --git a/lib/helper.js b/lib/helper.js
deleted file mode 100644
index 36ea49b..0000000
--- a/lib/helper.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
diff --git a/lib/helper.ts b/lib/helper.ts
new file mode 100644
index 0000000..8972ab0
--- /dev/null
+++ b/lib/helper.ts
@@ -0,0 +1,3 @@
+export function classNames(...classes: string[]): string {
+  return classes.filter(Boolean).join(' ');
+}
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..c6643fd
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
diff --git a/package.json b/package.json
index 7b70395..c69f8f9 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-tailwind-starter",
+  "name": "ts-nextjs-tailwind-starter",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -21,12 +21,14 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
+    "@types/react": "^17.0.16",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.0.1",
     "husky": "^7.0.1",
     "lint-staged": "^11.1.2",
     "prettier": "^2.3.0",
-    "tailwindcss": "^2.2.7"
+    "tailwindcss": "^2.2.7",
+    "typescript": "^4.3.5"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
diff --git a/pages/_app.js b/pages/_app.tsx
similarity index 100%
rename from pages/_app.js
rename to pages/_app.tsx
diff --git a/pages/_document.js b/pages/_document.tsx
similarity index 100%
rename from pages/_document.js
rename to pages/_document.tsx
diff --git a/pages/index.jsx b/pages/index.tsx
similarity index 84%
rename from pages/index.jsx
rename to pages/index.tsx
index feb922a..5263d7c 100644
--- a/pages/index.jsx
+++ b/pages/index.tsx
@@ -4,21 +4,21 @@ import CustomLink from '@/components/CustomLink';
 export default function Home() {
   return (
     <>
-      <Seo />
+      <Seo templateTitle='Home' />
 
       <main>
         <section className='bg-dark'>
           <div className='flex flex-col items-center justify-center min-h-screen text-white layout'>
             <h1>
-              <CustomLink href='https://github.com/theodorusclarence/nextjs-tailwind-starter'>
-                NextJS Tailwind Starter
+              <CustomLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
+                Typescript NextJS Tailwind Starter
               </CustomLink>
             </h1>
             <p className='mb-4'></p>
             <a
               target='_blank'
               rel='noopener noreferrer'
-              href='https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fnextjs-tailwind-starter'
+              href='https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Ftheodorusclarence%2Fts-nextjs-tailwind-starter'
             >
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src='https://vercel.com/button' alt='Deploy with Vercel' />
@@ -28,7 +28,7 @@ export default function Home() {
             </div>
             <footer className='absolute text-gray-500 bottom-2'>
               © {new Date().getFullYear()} By{' '}
-              <CustomLink href='https://theodorusclarence.com?ref=nextstarter'>
+              <CustomLink href='https://theodorusclarence.com?ref=tsnextstarter'>
                 Theodorus Clarence
               </CustomLink>
             </footer>
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c86150c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "moduleResolution": ["node_modules", ".next", "node"]
+}
diff --git a/yarn.lock b/yarn.lock
index 305b2c3..55c7de8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,6 +343,25 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react@^17.0.16":
+  version "17.0.16"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.16.tgz#056f40c45645761527baeb7d89d842a6abdf285a"
+  integrity sha512-3kCUiOOlQTwUUvjNFkbBTWMTxdTGybz/PfjCw9JmaRGcEDBQh+nGMg7/E9P2rklhJuYVd25IYLNcvqgSPCPksg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@typescript-eslint/parser@^4.20.0":
   version "4.28.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.28.0.tgz#2404c16751a28616ef3abab77c8e51d680a12caa"
@@ -1164,6 +1183,11 @@ cssnano-simple@2.0.0:
   dependencies:
     cssnano-preset-simple "^2.0.0"
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
@@ -4180,6 +4204,11 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+typescript@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"