feat: integrate prettier, eslint, husky, commitlint and lint-staged (#55

)
omeralpi · Nov 20, 2024 · 93a120a · 93a120a
2 parents bd85af1 + ae4a5d2
commit 93a120a
Show file tree

Hide file tree

Showing 30 changed files with 2,679 additions and 1,559 deletions.
diff --git a/.commitlintrc.js b/.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"],
+  },
+};
diff --git a/.eslintrc.json b/.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": "error"
   },
   "settings": {
     "tailwindcss": {
       "callees": ["cn", "cva"],
-      "config": "./tailwind.config.ts",
-      "classRegex": "^(class(Name)?|tw)$"
+      "config": "tailwind.config.cjs"
     },
     "next": {
       "rootDir": "./"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
 }
diff --git a/.github/workflows/code-check.yml b/.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.0.0
 
       - name: Get pnpm store directory
         id: pnpm-cache

diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -0,0 +1 @@
+pnpm commitlint --edit "$1"
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+pnpm lint-staged
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ 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
@@ -66,7 +66,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"

diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -23,14 +23,14 @@ export default function Home() {
             <h3 className="mb-6 whitespace-nowrap font-medium">On this page</h3>
             <ul className="flex flex-col gap-2">
               <li>
-                <a href="#setup" className="font-light text-muted-foreground">
+                <a href="#setup" className="text-muted-foreground font-light">
                   Setup
                 </a>
               </li>
               <li>
                 <a
                   href="#variants"
-                  className="font-light text-muted-foreground"
+                  className="text-muted-foreground font-light"
                 >
                   Variants
                 </a>
@@ -41,7 +41,7 @@ export default function Home() {
       </div>
       <footer className="border-t py-6 md:px-8 md:py-0">
         <div className="container flex max-w-5xl flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-          <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
+          <p className="text-muted-foreground text-center text-sm leading-loose md:text-left">
             Built by{" "}
             <a
               href={siteConfig.links.twitter}
@@ -54,7 +54,7 @@ export default function Home() {
             .
           </p>
           <div className="flex flex-wrap items-center justify-center gap-3 text-center">
-            <div className="text-sm text-muted-foreground">Also available:</div>
+            <div className="text-muted-foreground text-sm">Also available:</div>
             <Link
               href="https://shadcn-vue-phone-input.vercel.app"
               className={buttonVariants({

diff --git a/app/(home)/sections/hero.tsx b/app/(home)/sections/hero.tsx
@@ -49,7 +49,7 @@ export default function Hero() {
           <h1 className="scroll-m-20 text-4xl font-bold tracking-tight">
             Shadcn Phone Input
           </h1>
-          <p className="max-w-[450px] text-muted-foreground">
+          <p className="text-muted-foreground max-w-[450px]">
             An implementation of a Phone Input component for <b>React</b>, built
             on top of Shadcn UI&apos;s input component.
           </p>
@@ -77,7 +77,7 @@ export default function Hero() {
 
         <div id="try" className="w-full py-8">
           <div className="relative my-4 flex w-full flex-col space-y-2">
-            <div className="preview relative mt-2 flex min-h-[350px] w-full items-start justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+            <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[350px] w-full items-start justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
               <Form {...form}>
                 <form
                   onSubmit={form.handleSubmit(onSubmit)}

diff --git a/app/(home)/sections/setup.tsx b/app/(home)/sections/setup.tsx
@@ -20,9 +20,9 @@ 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">
+          <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
             shadcn-ui
           </code>{" "}
           init command to setup your project:
@@ -33,9 +33,9 @@ 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">
+          <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
             shadcn-ui
           </code>{" "}
           add command to add the necessary shadcn components to your project:

diff --git a/app/(home)/sections/variants.tsx b/app/(home)/sections/variants.tsx
@@ -21,14 +21,14 @@ 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">
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             Summary
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <PhoneInput
               value={phoneNumber}
               onChange={setPhoneNumber}
@@ -40,7 +40,7 @@ export default function Variants() {
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             Setting default country
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <PhoneInput
               value={phoneNumber}
               onChange={setPhoneNumber}
@@ -53,7 +53,7 @@ export default function Variants() {
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             Internationalization
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <PhoneInput
               value={phoneNumber}
               onChange={setPhoneNumber}
@@ -66,7 +66,7 @@ export default function Variants() {
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             Force international format
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <PhoneInput
               value={phoneNumber}
               onChange={setPhoneNumber}
@@ -79,7 +79,7 @@ export default function Variants() {
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             Force national format
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <PhoneInput
               value={phoneNumber}
               onChange={setPhoneNumber}
@@ -93,7 +93,7 @@ export default function Variants() {
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             initialValueFormat
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <PhoneInput
               value={phoneNumber}
               onChange={setPhoneNumber}
@@ -106,7 +106,7 @@ export default function Variants() {
           <h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">
             Formatting value
           </h3>
-          <div className="preview relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <div className="preview ring-offset-background focus-visible:ring-ring relative mt-2 flex min-h-[200px] w-full items-center justify-center rounded-md border p-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2">
             <div>
               <PhoneInput
                 value={phoneNumber}

diff --git a/components/code-block.tsx b/components/code-block.tsx
@@ -20,8 +20,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,
       )}
     >

diff --git a/components/copy-button.tsx b/components/copy-button.tsx
@@ -35,7 +35,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 +48,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 +58,7 @@ export default function CopyButton({
               key="copy"
               variants={variants}
             >
-              <Copy className="h-3 w-3" />
+              <Copy className="size-3" />
             </motion.div>
           )}
         </AnimatePresence>

diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
@@ -19,10 +19,10 @@ export function ModeToggle() {
         <Button
           variant="outline"
           size="icon"
-          className="fixed right-4 top-4 z-50 bg-background"
+          className="bg-background fixed right-4 top-4 z-50"
         >
-          <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>

diff --git a/components/pre.tsx b/components/pre.tsx
@@ -36,17 +36,17 @@ 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}
         className={cn(
-          "overflow-auto rounded-lg border border-border bg-zinc-950 p-4 text-sm text-white/80 dark:bg-zinc-900",
+          "border-border overflow-auto rounded-lg border bg-zinc-950 p-4 text-sm text-white/80 dark:bg-zinc-900",
           className,
         )}
         {...props}

diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
@@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDown className="size-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
     {...props}
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -5,15 +5,15 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -23,7 +23,7 @@ const buttonVariants = cva(
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        icon: "size-10",
       },
     },
     defaultVariants: {