⬆️ Feature: update internal dependencies (#428)

* ⬆️ Upgrade dependencies * 🐛 Fix broken stuff after dependencies upgrade - Add remove @next/mdx cause we use next-mdx-remote * 🎨 Lint and format * 🔖 Add changeset * 🔨 Update npm clean scripts * 💚 Update step order in Githuv action
juliencrn · Jan 18, 2024 · 7141d01 · 7141d01
1 parent 7342589
commit 7141d01
Show file tree

Hide file tree

Showing 29 changed files with 6,323 additions and 8,726 deletions.
diff --git a/.changeset/chilled-otters-leave.md b/.changeset/chilled-otters-leave.md
@@ -0,0 +1,7 @@
+---
+"eslint-config-custom": patch
+"usehooks-ts": patch
+"www": patch
+---
+
+Upgrade internal dependencies
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -1,8 +1,8 @@
-name: "Bug report 🐞"
+name: 'Bug report 🐞'
 description: >-
   Create a report to help us improve
-title: "[BUG]"
-labels: 
+title: '[BUG]'
+labels:
   - bug
 body:
   - type: textarea
@@ -12,7 +12,7 @@ body:
       description: A clear and concise description of what the bug is. Include any error messages or unexpected behaviors.
     validations:
       required: true
-      
+
   - type: textarea
     id: reproduce_steps
     attributes:

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -31,14 +31,14 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build
+        run: pnpm build
+
       - name: Lint
         run: pnpm lint
 
       - name: Types check
         run: pnpm types-check
 
-      - name: Build
-        run: pnpm build
-
       - name: Test
         run: pnpm test
diff --git a/apps/www/.eslintrc.js b/apps/www/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['next/core-web-vitals', 'custom'],
+}
diff --git a/apps/www/.eslintrc.json b/apps/www/.eslintrc.json
diff --git a/apps/www/next.config.mjs b/apps/www/next.config.mjs
@@ -1,39 +1,19 @@
-// import { withContentlayer } from "next-contentlayer"
-import mdx from '@next/mdx'
-import rehypeHighlight from 'rehype-highlight'
-import remarkCodeImport from 'remark-code-import'
-
 import './env.mjs'
-import sitemap from './next-sitemap.config.mjs'
-
-const withMDX = mdx({
-  extension: /\.mdx?$/,
-  options: {
-    // If you use remark-gfm, you'll need to use next.config.mjs
-    // as the package is ESM only
-    // https://github.com/remarkjs/remark-gfm#install
-    remarkPlugins: [],
-    rehypePlugins: [],
-    // If you use `MDXProvider`, uncomment the following line.
-    // providerImportSource: "@mdx-js/react",
-  },
-})
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // Configure pageExtensions to include md and mdx
-  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
-  // Optionally, add any other Next.js config below
   reactStrictMode: true,
   swcMinify: true,
-  env: {
-    sitemap,
-  },
+  transpilePackages: ['lucide-react'],
+
   // Allow fs
   // webpack(config) {
   //   config.resolve.fallback = { ...config.resolve.fallback, fs: false }
   //   return config
   // },
+  experimental: {
+    mdxRs: true,
+  },
 }
 
-export default withMDX(nextConfig)
+export default nextConfig
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -8,48 +8,44 @@
     "generate-sitemap": "rimraf public/sitemap.xml public/robots.txt && next-sitemap --config ./next-sitemap.config.mjs",
     "start": "next start",
     "lint": "next lint",
-    "clean": "rimraf .next generated .turbo",
-    "generate": "cd ../.. && pnpm copy-hooks && cd -"
+    "clean": "rimraf *.tsbuildinfo .next generated .turbo",
+    "generate": "cd ../.. && pnpm copy-hooks && cd -",
+    "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@mdx-js/loader": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.4.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
-    "@t3-oss/env-nextjs": "^0.2.2",
-    "class-variance-authority": "^0.6.0",
-    "clsx": "^1.2.1",
-    "date-fns": "^2.29.3",
+    "@t3-oss/env-nextjs": "^0.7.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.2.0",
     "gray-matter": "^4.0.3",
-    "highlight.js": "^11.8.0",
-    "lucide-react": "^0.223.0",
-    "next": "13.4.4",
+    "highlight.js": "^11.9.0",
+    "lucide-react": "^0.311.0",
+    "next": "14.0.4",
     "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rehype-highlight": "^6.0.0",
+    "rehype-highlight": "^7.0.0",
     "remark-code-import": "^1.2.0",
-    "tailwind-merge": "^1.12.0",
-    "tailwindcss": "3.3.2",
-    "tailwindcss-animate": "^1.0.5",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss": "3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "usehooks-ts": "workspace:*",
-    "zod": "^3.21.4"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@tailwindcss/line-clamp": "^0.4.4",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.41.0",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "autoprefixer": "10.4.16",
     "eslint-config-custom": "workspace:*",
-    "eslint-config-next": "13.4.4",
-    "next-sitemap": "^4.0.7",
-    "postcss": "8.4.24",
-    "rimraf": "^5.0.1",
-    "typescript": "5.0.4"
+    "eslint-config-next": "14.0.4",
+    "next-sitemap": "^4.2.3",
+    "postcss": "8.4.33",
+    "typescript": "5.3.3"
   }
 }
diff --git a/apps/www/src/app/(docs)/introduction/page.tsx b/apps/www/src/app/(docs)/introduction/page.tsx
@@ -1,5 +1,6 @@
 import { DocsPageHeader } from '@/components/docs-page-header'
-import { H2, Mdx } from '@/components/remote-mdx'
+import { Mdx } from '@/components/remote-mdx'
+import { H2 } from '@/components/ui/components'
 
 export default async function IntroductionPage() {
   return (

diff --git a/apps/www/src/app/(docs)/react-hook/[slug]/page.tsx b/apps/www/src/app/(docs)/react-hook/[slug]/page.tsx
@@ -3,11 +3,12 @@ import { notFound } from 'next/navigation'
 
 import { DocsPageHeader } from '@/components/docs-page-header'
 import { DocsPager } from '@/components/paper'
-import { H2, Mdx } from '@/components/remote-mdx'
+import { Mdx } from '@/components/remote-mdx'
 import {
   DashboardTableOfContents,
   TableOfContents,
 } from '@/components/table-of-content'
+import { H2 } from '@/components/ui/components'
 import { siteConfig } from '@/config/site'
 import { getPost, getPosts } from '@/lib/mdx'
 

diff --git a/apps/www/src/app/(marketing)/page.tsx b/apps/www/src/app/(marketing)/page.tsx
@@ -1,13 +1,13 @@
-import { Icon } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
 import Link from 'next/link'
 
 import { Icons } from '@/components/icons'
 import { buttonVariants } from '@/components/ui/button'
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
 
-interface Feature {
-  icon: Icon
+type Feature = {
+  icon: LucideIcon
   title: string
   content: string
 }
@@ -84,13 +84,6 @@ export default async function IndexPage() {
     <>
       <section className="space-y-6 pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
         <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
-          {/* <Link
-            href={'#'}
-            className="rounded-2xl bg-muted px-4 py-1.5 text-sm font-medium"
-            target="_blank"
-          >
-            Follow along on Twitter
-          </Link> */}
           <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
             {siteConfig.name}
           </h1>

diff --git a/apps/www/src/app/globals.css b/apps/www/src/app/globals.css
@@ -79,6 +79,8 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
   }
 }
diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import type { Metadata, Viewport } from 'next'
 import { Inter as FontSans } from 'next/font/google'
 import localFont from 'next/font/local'
 
@@ -21,7 +22,18 @@ interface RootLayoutProps {
   children: React.ReactNode
 }
 
-export const metadata = {
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: 'white' },
+    { media: '(prefers-color-scheme: dark)', color: 'black' },
+  ],
+}
+
+export const metadata: Metadata = {
+  metadataBase: new URL(siteConfig.url),
+  alternates: {
+    canonical: '/',
+  },
   title: {
     default: siteConfig.name,
     template: `%s | ${siteConfig.name}`,
@@ -35,30 +47,28 @@ export const metadata = {
     },
   ],
   creator: 'juliencrn',
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' },
-  ],
+
   openGraph: {
     type: 'website',
     locale: 'en_US',
     url: siteConfig.url,
     title: siteConfig.name,
     description: siteConfig.description,
     siteName: siteConfig.name,
+    images: [siteConfig.ogImage],
   },
   twitter: {
     card: 'summary_large_image',
     title: siteConfig.name,
     description: siteConfig.description,
-    images: [`${siteConfig.url}/og.jpg`],
+    images: [siteConfig.ogImage],
   },
   icons: {
     icon: '/favicon.ico',
     shortcut: '/favicon-16x16.png',
     apple: '/apple-touch-icon.png',
   },
-  manifest: `${siteConfig.url}/site.webmanifest`,
+  manifest: '/site.webmanifest',
 }
 
 export default function RootLayout({ children }: RootLayoutProps) {

diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx
@@ -1,5 +1,4 @@
 import {
-  type Icon as LucideIcon,
   AlertTriangle,
   ArrowRight,
   BookOpenCheck,
@@ -33,8 +32,6 @@ import {
   Zap,
 } from 'lucide-react'
 
-export type Icon = LucideIcon
-
 export const Icons = {
   logo: Flame,
   close: X,