Merge branch 'master' into feature/improve-use-intersection-observer

.changeset/eight-buses-rush.md

@@ -0,0 +1,9 @@
+---
+'usehooks-ts': minor
+---
+
+Improve `useOnClickOutside`:
+
+- Prevent handling callback when clicking on a not connected element (#374 by @hooriza)
+- Add support to accept multiple references
+- Add support for touch events in addition to mouse events

.changeset/empty-waves-admire.md

@@ -0,0 +1,7 @@
+---
+"eslint-config-custom": minor
+"usehooks-ts": minor
+"www": minor
+---
+
+chore: Updated dependencies

.changeset/giant-shrimps-draw.md

@@ -0,0 +1,5 @@
+---
+'usehooks-ts': patch
+---
+
+fix: `useScript` failed to remove script from cache when passing `removeOnUnmount` prop (#354 by @ShanSenanayake)

.changeset/heavy-numbers-cross.md

@@ -0,0 +1,5 @@
+---
+"www": minor
+---
+
+various improvements to the site

.changeset/old-dragons-drive.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+use tsup as bundler instead of transpiling with tsc (@BlankParticle)

.github/workflows/ci.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - '**'
+  pull_request:
 
 env:
   NODE_VERSION: 20

apps/www/next.config.mjs

@@ -1,19 +1,6 @@
 import './env.mjs'
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
-  transpilePackages: ['lucide-react'],
-
-  // Allow fs
-  // webpack(config) {
-  //   config.resolve.fallback = { ...config.resolve.fallback, fs: false }
-  //   return config
-  // },
-  experimental: {
-    mdxRs: true,
-  },
-}
+const nextConfig = {}
 
 export default nextConfig

apps/www/package.json

@@ -12,18 +12,17 @@
     "generate": "cd ../.. && pnpm copy-hooks && cd -"
   },
   "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@next/third-parties": "^14.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.9.0",
-    "lucide-react": "^0.316.0",
+    "lucide-react": "^0.319.0",
     "next": "14.1.0",
     "next-mdx-remote": "^4.4.1",
-    "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rehype-highlight": "^7.0.0",
@@ -37,7 +36,7 @@
   "devDependencies": {
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "20.11.10",
+    "@types/node": "20.11.13",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "autoprefixer": "10.4.17",

apps/www/src/app/(docs)/layout.tsx

@@ -2,9 +2,8 @@ import '../globals.css'
 
 import Link from 'next/link'
 
-import { Icons } from '@/components/icons'
+import { GitHub } from '@/components/icons'
 import { MainNav } from '@/components/main-nav'
-import { ModeToggle } from '@/components/mode-toggle'
 // import { DocsSearch } from "@/components/search"
 import { DocsSidebarNav } from '@/components/sidebar-nav'
 import { docsConfig } from '@/config/docs'
@@ -31,10 +30,9 @@ export default function DocsLayout({ children }: DocsLayoutProps) {
                 rel="noreferrer"
                 className="flex"
               >
-                <Icons.gitHub className="h-6 w-6 my-auto" />
+                <GitHub className="h-6 w-6 my-auto" />
                 <span className="sr-only">GitHub</span>
               </Link>
-              <ModeToggle />
             </nav>
           </div>
         </div>

apps/www/src/app/(docs)/react-hook/[slug]/page.tsx

@@ -69,7 +69,7 @@ const PostLayout = ({ params }: { params: { slug: string } }) => {
 
   return (
     <main className="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]">
-      <div className="mx-auto w-full min-w-0">
+      <div className="mx-auto w-full min-w-0 grid">
         <DocsPageHeader
           id="introduction"
           className="scroll-m-20"

apps/www/src/app/(marketing)/layout.tsx

@@ -1,8 +1,7 @@
 import Link from 'next/link'
 
-import { Icons } from '@/components/icons'
+import { GitHub } from '@/components/icons'
 import { MainNav } from '@/components/main-nav'
-import { ModeToggle } from '@/components/mode-toggle'
 import { marketingConfig } from '@/config/marketing'
 import { siteConfig } from '@/config/site'
 
@@ -25,10 +24,9 @@ export default async function MarketingLayout({
               rel="noreferrer"
               className="flex"
             >
-              <Icons.gitHub className="h-6 w-6 my-auto" />
+              <GitHub className="h-6 w-6 my-auto" />
               <span className="sr-only">GitHub</span>
             </Link>
-            <ModeToggle />
           </nav>
         </div>
       </header>

apps/www/src/app/(marketing)/page.tsx

@@ -1,7 +1,15 @@
 import type { LucideIcon } from 'lucide-react'
 import Link from 'next/link'
 
-import { Icons } from '@/components/icons'
+import {
+  Code,
+  GitHub,
+  Globe,
+  Leaf,
+  Puzzle,
+  Unplug,
+  Zap,
+} from '@/components/icons'
 import { buttonVariants } from '@/components/ui/button'
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
@@ -14,37 +22,37 @@ type Feature = {
 
 const features: Feature[] = [
   {
-    icon: Icons.zap,
+    icon: Zap,
     title: 'Lightweight',
     content:
       'usehooks-ts is a tiny library without any dependencies, ensuring a lean and efficient solution.',
   },
   {
-    icon: Icons.unplug,
+    icon: Unplug,
     title: 'Type-Safe',
     content:
       'Catch compile-time errors with ease and unlock strong typing benefits.',
   },
   {
-    icon: Icons.leaf,
+    icon: Leaf,
     title: 'Tree-Shakable',
     content:
       'Eliminating unused code and delivering leaner bundles for lightning-fast load times.',
   },
   {
-    icon: Icons.puzzle,
+    icon: Puzzle,
     title: 'Easy to Use',
     content:
       'Get started in no time! Explore comprehensive documentation and rich examples.',
   },
   {
-    icon: Icons.code,
+    icon: Code,
     title: 'Developer-Friendly',
     content:
       "Simplify development with an intuitive and powerful API. Don't repeat yourself.",
   },
   {
-    icon: Icons.globe,
+    icon: Globe,
     title: 'Open-Source',
     content:
       'Join the vibrant community! Collaborate, contribute, and unlock endless possibilities together.',
@@ -173,7 +181,7 @@ export default async function IndexPage() {
               className="flex"
             >
               <div className="flex h-10 w-10 items-center justify-center space-x-2 rounded-md border border-muted bg-muted">
-                <Icons.gitHub className="h-6 w-6" />
+                <GitHub className="h-6 w-6" />
               </div>
               <div className="flex items-center">
                 <div className="h-4 w-4 border-y-8 border-l-0 border-r-8 border-solid border-muted border-y-transparent"></div>

apps/www/src/app/globals.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+@import 'highlight.js/styles/github.css' screen;
+@import 'highlight.js/styles/github-dark.css' screen and
+  (prefers-color-scheme: dark);
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -36,37 +40,39 @@
     --radius: 0.5rem;
   }
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: 224 71% 4%;
+      --foreground: 213 31% 91%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+      --muted: 223 47% 11%;
+      --muted-foreground: 215.4 16.3% 56.9%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+      --popover: 224 71% 4%;
+      --popover-foreground: 215 20.2% 65.1%;
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+      --card: 224 71% 4%;
+      --card-foreground: 213 31% 91%;
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+      --border: 216 34% 17%;
+      --input: 216 34% 17%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+      --primary: 210 40% 98%;
+      --primary-foreground: 222.2 47.4% 1.2%;
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+      --secondary: 222.2 47.4% 11.2%;
+      --secondary-foreground: 210 40% 98%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+      --accent: 216 34% 17%;
+      --accent-foreground: 210 40% 98%;
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+      --destructive: 0 63% 31%;
+      --destructive-foreground: 210 40% 98%;
 
-    --ring: 216 34% 17%;
+      --ring: 216 34% 17%;
 
-    --radius: 0.5rem;
+      --radius: 0.5rem;
+    }
   }
 }
 
@@ -76,6 +82,12 @@
   }
   html {
     scroll-behavior: smooth;
+
+    color-scheme: light;
+
+    @media (prefers-color-scheme: dark) {
+      color-scheme: dark;
+    }
   }
   body {
     @apply bg-background text-foreground;

apps/www/src/app/layout.tsx

@@ -1,10 +1,9 @@
+import { GoogleAnalytics } from '@next/third-parties/google'
 import type { Metadata, Viewport } from 'next'
 import { Inter as FontSans } from 'next/font/google'
 import localFont from 'next/font/local'
 
 import './globals.css'
-import { Analytics } from '@/components/analytics'
-import { ThemeProvider } from '@/components/theme-provider'
 import { siteConfig } from '@/config/site'
 import { cn } from '@/lib/utils'
 
@@ -74,7 +73,6 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head></head>
       <body
         suppressHydrationWarning
         className={cn(
@@ -83,10 +81,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
           fontHeading.variable,
         )}
       >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          {children}
-          <Analytics />
-        </ThemeProvider>
+        {children}
+
+        {process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID && (
+          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID} />
+        )}
       </body>
     </html>
   )