refactor(fe): add hide spin button util style (#2109)

* refactor(fe): add hide spin button util style, delete hide scroll bar plugin * fix(fe): fix pnpm lock file * chore(fe): add import type declaration
skkuding · Sep 24, 2024 · 3176a9f · 3176a9f
1 parent 811fa44
commit 3176a9f
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 44 deletions.
diff --git a/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx b/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx
@@ -181,7 +181,7 @@ export default function RegisterButton({
                   })}
                   type="number"
                   className={cn(
-                    'h-12 w-full [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                    'hide-spin-button h-12 w-full',
                     errors.invitationCode &&
                       'border-red-500 focus-visible:ring-red-500'
                   )}

diff --git a/apps/frontend/app/admin/_components/SwitchField.tsx b/apps/frontend/app/admin/_components/SwitchField.tsx
@@ -61,11 +61,7 @@ export default function SwitchField({
             id={name}
             type={type}
             placeholder={placeholder}
-            className={cn(
-              inputStyle,
-              'h-[36px] w-[380px]',
-              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
-            )}
+            className={cn(inputStyle, 'hide-spin-button h-[36px] w-[380px]')}
             {...register(name, {
               onChange: () => trigger(name)
             })}

diff --git a/apps/frontend/app/admin/contest/[id]/_components/Columns.tsx b/apps/frontend/app/admin/contest/[id]/_components/Columns.tsx
@@ -5,7 +5,6 @@ import OptionSelect from '@/components/OptionSelect'
 import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { GET_BELONGED_CONTESTS } from '@/graphql/contest/queries'
-import { cn } from '@/lib/utils'
 import type { Level } from '@/types/type'
 import { useQuery } from '@apollo/client'
 import type { ColumnDef, Row } from '@tanstack/react-table'
@@ -72,10 +71,7 @@ export const columns = (
       <div className="flex justify-center">
         <Input
           defaultValue={row.getValue('score')}
-          className={cn(
-            'w-[70px] focus-visible:ring-0',
-            '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none'
-          )}
+          className="hide-spin-button w-[70px] focus-visible:ring-0"
           type="number"
           min={0}
           onKeyDown={(e) => {

diff --git a/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx b/apps/frontend/app/admin/problem/_components/TestcaseItem.tsx
@@ -86,8 +86,7 @@ export default function TestcaseItem({
             type="number"
             min={0}
             className={cn(
-              'h-5 w-8 rounded-sm border text-center text-xs',
-              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+              'hide-spin-button h-5 w-8 rounded-sm border text-center text-xs',
               isInvalid(getValues('testcases')[index].scoreWeight)
                 ? 'border-red-500'
                 : 'border-gray-300'

diff --git a/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx b/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
@@ -140,7 +140,7 @@ export default function ResetPasswordEmailVerify() {
       <Input
         type="number"
         className={cn(
-          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+          'hide-spin-button',
           inputFocused && 'ring-1 focus-visible:ring-1 disabled:ring-0',
           errors.verificationCode || codeError
             ? 'ring-red-500 focus-visible:ring-red-500'

diff --git a/apps/frontend/components/auth/SignUpEmailVerify.tsx b/apps/frontend/components/auth/SignUpEmailVerify.tsx
@@ -193,7 +193,7 @@ export default function SignUpEmailVerify() {
           <Input
             type="number"
             className={cn(
-              'mt-2 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+              'hide-spin-button mt-2',
               'focus-visible:border-primary w-full focus-visible:ring-0',
               (errors.verificationCode || expired || codeError) &&
                 'border-red-500 focus-visible:border-red-500'

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -108,7 +108,6 @@
     "msw": "^2.4.1",
     "postcss": "^8.4.41",
     "tailwind-merge": "^2.5.2",
-    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.10",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.4",

diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
@@ -3,6 +3,7 @@ import typography from '@tailwindcss/typography'
 import type { Config } from 'tailwindcss'
 import animate from 'tailwindcss-animate'
 import defaultTheme from 'tailwindcss/defaultTheme'
+import type { PluginAPI } from 'tailwindcss/types/config'
 
 export default {
   darkMode: ['class'],
@@ -70,5 +71,21 @@ export default {
       }
     }
   },
-  plugins: [animate, typography, require('tailwind-scrollbar-hide')]
+  plugins: [
+    animate,
+    typography,
+    function ({ addUtilities }: { addUtilities: PluginAPI['addUtilities'] }) {
+      addUtilities({
+        '.hide-spin-button': {
+          appearance: 'textfield',
+          '&::-webkit-inner-spin-button': {
+            appearance: 'none'
+          },
+          '&::-webkit-outer-spin-button': {
+            appearance: 'none'
+          }
+        }
+      })
+    }
+  ]
 } satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml