feat!: use typescript

SuperSuperDev · Aug 7, 2021 · 2dfb2b7 · 2dfb2b7
1 parent 65af118
commit 2dfb2b7
Show file tree

Hide file tree

Showing 16 changed files with 122 additions and 39 deletions.
diff --git 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 → components/Button.tsx b/components/Button.jsx → 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 → components/CustomLink.tsx b/components/CustomLink.jsx → 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 → components/Nav.tsx b/components/Nav.jsx → 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 → components/Seo.tsx b/components/Seo.jsx → 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 → components/UnstyledLink.tsx b/components/UnstyledLink.jsx → components/UnstyledLink.tsx
@@ -1,13 +1,21 @@
 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,
   href,
   openNewTab = undefined,
   className,
   ...rest
-}) {
+}: UnstyledLinkProps) {
   const isNewTab =
     openNewTab !== undefined
       ? openNewTab

diff --git a/jsconfig.json b/jsconfig.json
diff --git a/lib/helper.js b/lib/helper.js
diff --git a/lib/helper.ts 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
@@ -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
@@ -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 → pages/_app.tsx b/pages/_app.js → pages/_app.tsx
diff --git a/pages/_document.js → pages/_document.tsx b/pages/_document.js → pages/_document.tsx
diff --git a/pages/index.jsx → pages/index.tsx b/pages/index.jsx → 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
@@ -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
@@ -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 @@ [email protected]:
   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"