Merge branch 'main' into patch-4

.commitlintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "type-enum": [
+      2,
+      "always",
+      [
+        // Changes that affect the build system or dependency-only changes
+        "build",
+        // Changes to CI workflows
+        "ci",
+        // Documentation-only changes
+        "docs",
+        // A new feature
+        "feat",
+        //A bug fix
+        "fix",
+        // A code change that improves performance
+        "perf",
+        // A code change that neither fixes a bug nor adds a feature
+        "refactor",
+        // A commit that reverts a previous commit
+        "revert",
+        // Changes that do not affect the meaning of the code
+        "style",
+        // Adding missing tests or correcting existing tests
+        "test",
+      ],
+    ],
+    "scope-enum": [
+      2,
+      "always",
+      [
+        // Dependency-related changes
+        "deps",
+        // ESLint-related changes
+        "eslint",
+        // Prettier-related changes
+        "prettier",
+        // TypeScript-related changes
+        "typescript",
+        // Go-related changes
+        "golang",
+      ],
+    ],
+    "scope-empty": [1, "never"],
+  },
+};

.eslintrc.json

@@ -1,27 +1,31 @@
 {
   "$schema": "https://json.schemastore.org/eslintrc",
-  "plugins": ["@typescript-eslint", "tailwindcss"],
+  "plugins": ["tailwindcss"],
   "extends": [
     "next/core-web-vitals",
     "prettier",
-    "plugin:tailwindcss/recommended"
+    "plugin:tailwindcss/recommended",
+    "plugin:@next/next/recommended"
   ],
   "rules": {
     "@next/next/no-html-link-for-pages": "off",
     "react/jsx-key": "off",
     "tailwindcss/no-custom-classname": "off",
-    "tailwindcss/classnames-order": "off",
-    "tailwindcss/enforces-shorthand": "off",
-    "tailwindcss/no-unnecessary-arbitrary-value": "off"
+    "tailwindcss/classnames-order": "off"
   },
   "settings": {
     "tailwindcss": {
       "callees": ["cn", "cva"],
-      "config": "./tailwind.config.ts",
-      "classRegex": "^(class(Name)?|tw)$"
+      "config": "tailwind.config.ts"
     },
     "next": {
       "rootDir": "./"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
 }

.github/workflows/code-check.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 8.7.4
+          version: 9.14.2
 
       - name: Get pnpm store directory
         id: pnpm-cache
@@ -42,4 +42,4 @@ jobs:
         run: pnpm contentlayer build
 
       - name: Run typecheck
-        run: pnpm run typecheck
+        run: pnpm run typecheck

.husky/commit-msg

@@ -0,0 +1 @@
+pnpm commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.prettierignore

@@ -1,3 +1 @@
-node_modules
-.next
-.contentlayer
+pnpm-lock.yaml

README.md

@@ -16,10 +16,15 @@ I decided to make one myself. I hope you find it useful!
 This component is designed to handle phone inputs in your application. It
 includes the option to select a country along with the phone input.
 
-> [!WARNING] 
+> [!WARNING]
 > Before you dive in, just double-check that you're using version 1.0.0 of the cmdk package!
 
 ```tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { isValidPhoneNumber } from "react-phone-number-input";
+import { z } from "zod";
+
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -32,10 +37,6 @@ import {
 } from "@/components/ui/form";
 import { PhoneInput } from "@/components/ui/phone-input";
 import { toast } from "@/components/ui/use-toast";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { isValidPhoneNumber } from "react-phone-number-input";
-import { z } from "zod";
 
 const FormSchema = z.object({
   phone: z
@@ -66,7 +67,8 @@ export default function Hero() {
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-8 flex flex-col items-start">
+        className="flex flex-col items-start space-y-8"
+      >
         <FormField
           control={form.control}
           name="phone"

app/(home)/page.tsx

@@ -1,11 +1,14 @@
 "use client";
+
+import Link from "next/link";
+
 import Hero from "@/app/(home)/sections/hero";
 import Setup from "@/app/(home)/sections/setup";
 import { ModeToggle } from "@/components/mode-toggle";
 import { SvgIcons } from "@/components/svg-icons";
 import { buttonVariants } from "@/components/ui/button";
 import { siteConfig } from "@/config/site";
-import Link from "next/link";
+
 import Variants from "./sections/variants";
 
 export default function Home() {

app/(home)/sections/hero.tsx

@@ -1,3 +1,9 @@
+import Link from "next/link";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { isValidPhoneNumber } from "react-phone-number-input";
+import { z } from "zod";
+
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Form,
@@ -11,11 +17,6 @@ import {
 import { PhoneInput } from "@/components/ui/phone-input";
 import { toast } from "@/components/ui/use-toast";
 import { siteConfig } from "@/config/site";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-import { isValidPhoneNumber } from "react-phone-number-input";
-import { z } from "zod";
 
 const FormSchema = z.object({
   phone: z

app/(home)/sections/setup.tsx

@@ -1,3 +1,5 @@
+import { allSnippets, Snippet as SnippetType } from "contentlayer/generated";
+
 import CodeBlock from "@/components/code-block";
 import { Snippet } from "@/components/snippet";
 import {
@@ -6,7 +8,6 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Snippet as SnippetType, allSnippets } from "contentlayer/generated";
 
 const snippets: SnippetType[] = allSnippets.sort((a, b) => a.order - b.order);
 
@@ -20,7 +21,7 @@ export default function Setup() {
         <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
           Install Shadcn via CLI
         </h3>
-        <p className="[&amp;:not(:first-child)]:mt-6 text-normal leading-7">
+        <p className="text-normal leading-7 [&:not(:first-child)]:mt-6">
           Run the{" "}
           <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
             shadcn-ui
@@ -33,7 +34,7 @@ export default function Setup() {
         <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
           Install necessary Shadcn components:
         </h3>
-        <p className="[&amp;:not(:first-child)]:mt-6 text-normal leading-7">
+        <p className="text-normal leading-7 [&:not(:first-child)]:mt-6">
           Run the{" "}
           <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
             shadcn-ui

app/(home)/sections/variants.tsx

@@ -1,4 +1,3 @@
-import { PhoneInput } from "@/components/ui/phone-input";
 import { useState } from "react";
 import {
   Country,
@@ -8,6 +7,8 @@ import {
 } from "react-phone-number-input";
 import tr from "react-phone-number-input/locale/tr";
 
+import { PhoneInput } from "@/components/ui/phone-input";
+
 export default function Variants() {
   const [country, setCountry] = useState<Country>();
   const [phoneNumber, setPhoneNumber] = useState("");
@@ -21,7 +22,7 @@ export default function Variants() {
         <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
           With country
         </h3>
-        <p className="[&amp;:not(:first-child)]:mt-6 text-normal leading-7">
+        <p className="text-normal leading-7 [&:not(:first-child)]:mt-6">
           The phone input component can be used with a country select dropdown.
         </p>
         <div className="w-full">

app/layout.tsx

@@ -1,9 +1,12 @@
-import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "@/components/ui/toaster";
-import { Analytics } from "@vercel/analytics/react";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { Analytics } from "@vercel/analytics/react";
+
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toaster } from "@/components/ui/toaster";
+
 import { siteConfig } from "../config/site";
+
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });

app/robots.ts

@@ -1,4 +1,5 @@
 import { MetadataRoute } from "next";
+
 import { siteConfig } from "../config/site";
 
 export default function robots(): MetadataRoute.Robots {

app/sitemap.ts

@@ -1,4 +1,5 @@
 import { type MetadataRoute } from "next";
+
 import { siteConfig } from "../config/site";
 
 export default function sitemap(): MetadataRoute.Sitemap {

components/code-block.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+
 import CopyButton from "./copy-button";
 
 function CodeBlock({
@@ -20,8 +21,7 @@ function CodeBlock({
     <pre
       style={{ maxHeight: "500px", overflowY: "auto" }}
       className={cn(
-        `} relative h-full w-full whitespace-pre-wrap rounded-lg border bg-zinc-950 p-4 text-sm text-white/75
-          dark:bg-zinc-900 `,
+        `relative size-full whitespace-pre-wrap rounded-lg border bg-zinc-950 p-4 text-sm text-white/75 dark:bg-zinc-900`,
         className,
       )}
     >

components/copy-button.tsx

@@ -1,7 +1,9 @@
-import { cn } from "@/lib/utils";
-import { AnimatePresence, MotionConfig, motion } from "framer-motion";
-import { Check, Copy } from "lucide-react";
 import { useCallback, useState } from "react";
+import { AnimatePresence, motion, MotionConfig } from "framer-motion";
+import { Check, Copy } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
 import { Button } from "./ui/button";
 
 export default function CopyButton({
@@ -35,7 +37,7 @@ export default function CopyButton({
       aria-label="Copy code"
       variant="ghost"
       className={cn(
-        `absolute right-3 top-[0.6rem] z-50 flex h-8 w-8 items-center justify-center rounded-md p-0 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50`,
+        `absolute right-3 top-[0.6rem] z-50 flex size-8 items-center justify-center rounded-md p-0 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50`,
       )}
     >
       <MotionConfig transition={{ duration: 0.15 }}>
@@ -48,7 +50,7 @@ export default function CopyButton({
               key="check"
               variants={variants}
             >
-              <Check className="h-3 w-3" />
+              <Check className="size-3" />
             </motion.div>
           ) : (
             <motion.div
@@ -58,7 +60,7 @@ export default function CopyButton({
               key="copy"
               variants={variants}
             >
-              <Copy className="h-3 w-3" />
+              <Copy className="size-3" />
             </motion.div>
           )}
         </AnimatePresence>

components/mode-toggle.tsx

@@ -1,14 +1,16 @@
 "use client";
+
+import * as React from "react";
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
+import { useTheme } from "next-themes";
+
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
-import { useTheme } from "next-themes";
-import * as React from "react";
 
 export function ModeToggle() {
   const { setTheme } = useTheme();
@@ -21,8 +23,8 @@ export function ModeToggle() {
           size="icon"
           className="fixed right-4 top-4 z-50 bg-background"
         >
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

components/pre.tsx

@@ -1,6 +1,8 @@
-import { cn } from "@/lib/utils";
-import { Check, Copy } from "lucide-react";
 import React from "react";
+import { Check, Copy } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
 import { Button } from "./ui/button";
 
 export default function Pre({
@@ -36,12 +38,12 @@ export default function Pre({
       <Button
         variant="ghost"
         className={cn(
-          `absolute right-4 top-4 h-8 w-8 bg-transparent p-0 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50`,
+          `absolute right-4 top-4 size-8 bg-transparent p-0 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50`,
           copied && "text-foreground",
         )}
         onClick={onClick}
       >
-        {!copied ? <Copy className="h-3 w-3" /> : <Check className="h-3 w-3" />}
+        {!copied ? <Copy className="size-3" /> : <Check className="size-3" />}
       </Button>
       <pre
         ref={ref}