upgrade packages

riipandi · Jul 1, 2022 · 9dd7017 · 9dd7017 · vercel · Jul 1, 2022
1 parent bc8705c
commit 9dd7017
Show file tree

Hide file tree

Showing 7 changed files with 396 additions and 493 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # essentials
 /node_modules
+/.fleet
 /.pnp
 .pnp.js
 .DS_Store

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-tailwind-starter",
-  "version": "12.14.0",
+  "version": "12.15.0",
   "private": true,
   "scripts": {
     "dev": "next dev --port ${PORT:=3000}",
@@ -13,43 +13,41 @@
   "dependencies": {
     "@fontsource/epilogue": "^4.5.8",
     "@fontsource/jetbrains-mono": "^4.5.9",
-    "@headlessui/react": "^1.6.4",
+    "@headlessui/react": "^1.6.5",
     "@heroicons/react": "^1.0.6",
-    "@tabler/icons": "^1.70.0",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.2",
     "date-fns": "^2.28.0",
-    "framer-motion": "^6.3.11",
-    "next": "12.1.6",
-    "next-plausible": "^3.1.9",
+    "framer-motion": "^6.3.16",
+    "next": "12.2.0",
+    "next-plausible": "^3.2.0",
     "next-themes": "^0.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "tailwindcss": "^3.0.24"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "^3.1.4"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "18.0.5",
-    "@types/tailwindcss": "^3.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@types/tailwindcss": "^3.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
     "autoprefixer": "^10.4.7",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "~8.18.0",
-    "eslint-config-next": "12.1.6",
+    "eslint-config-next": "12.2.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-tailwindcss": "^3.5.2",
+    "eslint-plugin-tailwindcss": "^3.6.0",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "typescript": "^4.7.4"
   },
   "prettier": {
     "jsxSingleQuote": true,
-    "printWidth": 110,
     "semi": false,
     "singleQuote": true,
     "trailingComma": "es5",

diff --git a/src/components/elements/ScrollUp.tsx b/src/components/elements/ScrollUp.tsx
@@ -1,4 +1,4 @@
-import { IconArrowUp } from '@tabler/icons'
+import { ArrowUpIcon } from '@heroicons/react/outline'
 
 import useIsScrolled from '@/hooks/useIsScrolled'
 
@@ -14,7 +14,7 @@ const ScrollUp = () => {
           className='fixed bottom-5 right-6 inline-flex cursor-pointer items-center rounded bg-black px-3 py-2 text-xs text-white transition duration-500 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-black/90'
         >
           Back to top
-          <IconArrowUp strokeWidth={2} className='ml-1 -mr-1 h-4 w-4' />
+          <ArrowUpIcon strokeWidth={2} className='ml-1 -mr-1 h-4 w-4' />
         </div>
       )}
     </div>

diff --git a/src/components/elements/ThemeSwitcher.tsx b/src/components/elements/ThemeSwitcher.tsx
@@ -1,5 +1,5 @@
 import { Switch } from '@headlessui/react'
-import { IconBrightnessHalf, IconMoonStars } from '@tabler/icons'
+import { MoonIcon, SunIcon } from '@heroicons/react/outline'
 import { useTheme } from 'next-themes'
 import React, { useEffect, useState } from 'react'
 
@@ -44,21 +44,25 @@ const ThemeSwitcher = ({ asToggle = false, iconSize = 5, ...props }: Props) => {
         >
           <span
             className={classNames(
-              theme === 'dark' ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200',
+              theme === 'dark'
+                ? 'opacity-0 ease-out duration-100'
+                : 'opacity-100 ease-in duration-200',
               'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'
             )}
             aria-hidden='true'
           >
-            <IconBrightnessHalf strokeWidth={2} className='h-3 w-3 text-gray-300' />
+            <SunIcon strokeWidth={2} className='h-3 w-3 text-gray-300' />
           </span>
           <span
             className={classNames(
-              theme === 'dark' ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100',
+              theme === 'dark'
+                ? 'opacity-100 ease-in duration-200'
+                : 'opacity-0 ease-out duration-100',
               'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity'
             )}
             aria-hidden='true'
           >
-            <IconMoonStars strokeWidth={2} className='h-3 w-3 text-secondary-600' />
+            <MoonIcon strokeWidth={2} className='h-3 w-3 text-secondary-600' />
           </span>
         </span>
       </Switch>
@@ -69,15 +73,15 @@ const ThemeSwitcher = ({ asToggle = false, iconSize = 5, ...props }: Props) => {
     <button type='button' onClick={handleChange} {...props}>
       <span className='sr-only'>Toggle Dark Mode</span>
       {isDark ? (
-        <IconMoonStars
+        <MoonIcon
           strokeWidth={2}
           className={classNames(
             iconSize ? `w-${iconSize} h-${iconSize}` : 'w-5 h-5',
             'dark:text-primary-50 dark:hover:text-primary-200'
           )}
         />
       ) : (
-        <IconBrightnessHalf
+        <SunIcon
           strokeWidth={2}
           className={classNames(
             iconSize ? `w-${iconSize} h-${iconSize}` : 'w-5 h-5',

diff --git a/src/pages/empty.tsx b/src/pages/empty.tsx
@@ -1,19 +1,28 @@
-import { IconArrowBigLeftLine } from '@tabler/icons'
+import { ArrowLeftIcon } from '@heroicons/react/outline'
 
 import { Anchor } from '@/components/elements'
 import { PageLayout } from '@/components/site-layout'
 
-export default function About() {
+export default function EmptyPage() {
   return (
-    <PageLayout title='Empty page' className='content-wrapper flex flex-col lg:mt-10'>
+    <PageLayout
+      title='Empty page'
+      className='content-wrapper flex flex-col lg:mt-10'
+    >
       <section className='mx-auto w-full'>
-        <h1 className='text-2xl font-bold text-primary-500 lg:text-3xl'>This page are coming soon</h1>
+        <h1 className='text-2xl font-bold text-primary-500 lg:text-3xl'>
+          This page are coming soon
+        </h1>
         <p className='mt-4 text-lg'>
-          This page is currently a draft. Look back later to see what&rsquo;s changed.
+          This page is currently a draft. Look back later to see what&rsquo;s
+          changed.
         </p>
         <div className='mt-8'>
-          <Anchor href='/' className='btn btn--primary btn--sm inline-flex items-center'>
-            <IconArrowBigLeftLine strokeWidth={1.8} className='-ml-1 h-4 w-4' />
+          <Anchor
+            href='/'
+            className='btn btn--primary btn--sm inline-flex items-center'
+          >
+            <ArrowLeftIcon strokeWidth={1.8} className='-ml-1 h-4 w-4' />
             <span>Back to homepage</span>
           </Anchor>
         </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -23,7 +23,10 @@ export default function Home() {
               Pre-configured with TailwindUI and some additional components.
             </p>
             <div className='mx-auto flex justify-center space-x-4 py-8'>
-              <Anchor href='/empty' className='btn btn--primary btn--md inline-block px-5 text-sm'>
+              <Anchor
+                href='/empty'
+                className='btn btn--primary btn--md inline-block px-5 text-sm'
+              >
                 Empty page
               </Anchor>
               <Anchor