💎 style: lint

ExpTechTW · Dec 23, 2024 · eb8e4a8 · eb8e4a8
1 parent 4eb540c
commit eb8e4a8
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 31 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -5,6 +5,7 @@ import { FlatCompat } from '@eslint/eslintrc';
 import importX from 'eslint-plugin-import-x';
 import js from '@eslint/js';
 import style from '@stylistic/eslint-plugin';
+import tailwind from 'eslint-plugin-readable-tailwind';
 import ts from 'typescript-eslint';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -50,6 +51,28 @@ export default ts.config(
       ],
     },
   },
+  {
+    files: ['**/*.{jsx,tsx}'],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      'readable-tailwind': tailwind,
+    },
+    rules: {
+      ...tailwind.configs.warning.rules,
+      'readable-tailwind/multiline': [
+        'warn',
+        {
+          group: 'newLine',
+        },
+      ],
+    },
+  },
   {
     languageOptions: {
       parserOptions: {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({ children }: Props) {
           disableTransitionOnChange
         >
           <AppHeader />
-          <main className="min-h-dvh flex flex-col items-center pt-16">
+          <main className="flex min-h-dvh flex-col items-center pt-16">
             {children}
           </main>
           <AppFooter />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,20 +1,27 @@
 import React from 'react';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { USER_NAME } from '~/config';
+import { REPO_USER, USER_NAME } from '~/config';
+import { Skeleton } from '@/components/ui/skeleton';
 
 export default function Page() {
   return (
-    <div className="container flex flex-col md:flex-row gap-8">
-      <aside className="flex flex-col gap-4 items-center">
-        <Avatar className="size-64">
+    <div className={`
+      container flex flex-col gap-8 p-4
+      md:flex-row md:p-8
+    `}
+    >
+      <aside className="flex flex-col items-center gap-4">
+        <Avatar className="size-56">
           <AvatarImage
             alt={USER_NAME}
-            src="https://avatars.githubusercontent.com/u/44525760?v=4"
+            src={`https://github.com/${REPO_USER}.png`}
           />
-          <AvatarFallback>W</AvatarFallback>
+          <AvatarFallback>
+            <Skeleton className="h-full w-full" />
+          </AvatarFallback>
         </Avatar>
-        <div className="text-4xl font-black">
+        <div className="text-3xl font-black">
           {USER_NAME}
         </div>
       </aside>

diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx
@@ -73,14 +73,28 @@ export function InfoBox({ type, title, children }: InfoBoxProps) {
   }
 
   return (
-    <div className={`my-4 rounded-lg border p-4 ${styles[type].container}`}>
+    <div className={`
+      my-4 rounded-lg border p-4
+      ${styles[type].container}
+    `}
+    >
       <div className="flex items-start">
         <div className={styles[type].icon}>{icons[type]}</div>
         <div className="ml-3 w-full">
-          <h5 className={`font-medium ${styles[type].title}`}>
+          <h5 className={`
+            font-medium
+            ${styles[type].title}
+          `}
+          >
             {title ?? defaultTitles[type]}
           </h5>
-          <div className={`mt-2 ${styles[type].content}`}>{children}</div>
+          <div className={`
+            mt-2
+            ${styles[type].content}
+          `}
+          >
+            {children}
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/app/header.tsx b/src/components/app/header.tsx
@@ -33,7 +33,10 @@ export default function AppHeader() {
   ];
 
   return (
-    <header className="h-16 flex items-center justify-center">
+    <header className={`
+      fixed inset-x-0 top-0 flex h-16 items-center justify-center border-b
+    `}
+    >
       <div className="container flex justify-between">
         <nav className="flex gap-2">
           {navigationItems.map((item) => (
@@ -49,7 +52,6 @@ export default function AppHeader() {
             </Button>
           ))}
         </nav>
-
         <ThemeSelector />
       </div>
     </header>

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -7,20 +7,41 @@ import { cn } from '@/lib/utils';
 import type { VariantProps } from 'class-variance-authority';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  `
+    inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
+    text-sm font-medium transition-colors
+    [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+    disabled:pointer-events-none disabled:opacity-50
+    focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+  `,
   {
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+          `
+            bg-primary text-primary-foreground shadow
+            hover:bg-primary/90
+          `,
         destructive:
-          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+          `
+            bg-destructive text-destructive-foreground shadow-sm
+            hover:bg-destructive/90
+          `,
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          `
+            border border-input bg-background shadow-sm
+            hover:bg-accent hover:text-accent-foreground
+          `,
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          `
+            bg-secondary text-secondary-foreground shadow-sm
+            hover:bg-secondary/80
+          `,
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: `
+          text-primary underline-offset-4
+          hover:underline
+        `,
       },
       size: {
         default: 'h-9 px-4 py-2',

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -27,7 +27,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      `
+        flex cursor-default select-none items-center gap-2 rounded-sm px-2
+        py-1.5 text-sm outline-none
+        [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+        data-[state=open]:bg-accent
+        focus:bg-accent
+      `,
       inset && 'pl-8',
       className,
     )}
@@ -47,7 +53,18 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      `
+        z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
+        text-popover-foreground shadow-lg
+        data-[side=bottom]:slide-in-from-top-2
+        data-[side=left]:slide-in-from-right-2
+        data-[side=right]:slide-in-from-left-2
+        data-[side=top]:slide-in-from-bottom-2
+        data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+        data-[state=closed]:zoom-out-95
+        data-[state=open]:animate-in data-[state=open]:fade-in-0
+        data-[state=open]:zoom-in-95
+      `,
       className,
     )}
     {...props}
@@ -65,8 +82,20 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        `
+          z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
+          text-popover-foreground shadow-md
+        `,
+        `
+          data-[side=bottom]:slide-in-from-top-2
+          data-[side=left]:slide-in-from-right-2
+          data-[side=right]:slide-in-from-left-2
+          data-[side=top]:slide-in-from-bottom-2
+          data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          data-[state=closed]:zoom-out-95
+          data-[state=open]:animate-in data-[state=open]:fade-in-0
+          data-[state=open]:zoom-in-95
+        `,
         className,
       )}
       {...props}
@@ -84,7 +113,13 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      `
+        relative flex cursor-default select-none items-center gap-2 rounded-sm
+        px-2 py-1.5 text-sm outline-none transition-colors
+        [&>svg]:size-4 [&>svg]:shrink-0
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+        focus:bg-accent focus:text-accent-foreground
+      `,
       inset && 'pl-8',
       className,
     )}
@@ -100,13 +135,21 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      `
+        relative flex cursor-default select-none items-center rounded-sm py-1.5
+        pl-8 pr-2 text-sm outline-none transition-colors
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+        focus:bg-accent focus:text-accent-foreground
+      `,
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className={`
+      absolute left-2 flex h-3.5 w-3.5 items-center justify-center
+    `}
+    >
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -124,12 +167,20 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      `
+        relative flex cursor-default select-none items-center rounded-sm py-1.5
+        pl-8 pr-2 text-sm outline-none transition-colors
+        data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+        focus:bg-accent focus:text-accent-foreground
+      `,
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className={`
+      absolute left-2 flex h-3.5 w-3.5 items-center justify-center
+    `}
+    >
       <DropdownMenuPrimitive.ItemIndicator>
         <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>

diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-primary/10', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }