General style and component refactor

eslint.config.js

@@ -61,4 +61,17 @@ export default [
       },
     },
   },
+  {
+    rules: {
+      'no-unused-expressions': 'off',
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+          allowTaggedTemplates: true,
+        },
+      ],
+    },
+  },
 ];

package.json

@@ -22,14 +22,14 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.1.5",
-    "@tanstack/react-query": "^5.59.19",
-    "@xyflow/react": "^12.3.4",
-    "aws-amplify": "^6.8.0",
+    "@heroicons/react": "^2.2.0",
+    "@tanstack/react-query": "^5.62.7",
+    "@xyflow/react": "^12.3.6",
+    "aws-amplify": "^6.10.3",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "dayjs": "^1.11.13",
-    "igv": "^3.0.9",
+    "igv": "^3.1.2",
     "mime-db": "^1.53.0",
     "openapi-fetch": "^0.13.0",
     "react": "^18.3.1",
@@ -38,14 +38,14 @@
     "react-flatpickr": "^3.10.13",
     "react-loading-skeleton": "^3.5.0",
     "react-router-dom": "^6.27.0",
-    "react-toastify": "^10.0.6",
-    "tailwind-merge": "^2.5.4",
+    "react-toastify": "^11.0.0",
+    "tailwind-merge": "^2.5.5",
     "unsplash-js": "^7.0.19"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/compat": "^1.2.2",
-    "@eslint/js": "^9.14.0",
+    "@eslint/js": "^9.17.0",
     "@storybook/addon-essentials": "^8.4.1",
     "@storybook/addon-interactions": "^8.4.1",
     "@storybook/addon-links": "^8.4.1",
@@ -60,28 +60,29 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-flatpickr": "^3.8.11",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.14.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-storybook": "^0.10.2",
     "globals": "^15.11.0",
-    "openapi-typescript": "^7.4.2",
+    "openapi-typescript": "^7.4.4",
     "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "rollup-plugin-visualizer": "^5.12.0",
     "storybook": "^8.4.1",
     "storybook-addon-remix-react-router": "^3.0.1",
     "storybook-react-context": "^0.7.0",
     "tailwindcss": "^3.4.14",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
     "vite": "^5.4.10",
     "vite-plugin-checker": "^0.8.0"
   },

prettier.config.js

@@ -14,4 +14,7 @@ export default {
   trailingComma: 'es5',
   useTabs: false,
   endOfLine: 'lf',
+
+  // tailwindcss
+  plugins: ['prettier-plugin-tailwindcss'],
 };

src/App.tsx

@@ -2,15 +2,18 @@ import Router from '@/router';
 import { ToastContainer } from 'react-toastify';
 import { AuthProvider } from '@/context/AmplifyAuthContext';
 import { ReactQueryClientProvider } from '@/context/QueryClientContext';
+import { ThemeProvider } from '@/context/ThemeContext';
 
 function App() {
   return (
-    <ReactQueryClientProvider>
-      <AuthProvider>
-        <ToastContainer />
-        <Router />
-      </AuthProvider>
-    </ReactQueryClientProvider>
+    <ThemeProvider>
+      <ReactQueryClientProvider>
+        <AuthProvider>
+          <ToastContainer />
+          <Router />
+        </AuthProvider>
+      </ReactQueryClientProvider>
+    </ThemeProvider>
   );
 }
 

src/components/common/backdrop/BackdropWithText.tsx

@@ -18,7 +18,7 @@ const BackdropWithText: FC<BackdropWithTextProps> = ({
 
   return (
     <div
-      className={`absolute inset-0 flex items-center justify-center z-50 bg-magpie-light-75 transition-opacity duration-200 ease-in-out text-indigo-500 font-medium ${className} ${isShow ? 'bg-opacity-80' : 'bg-opacity-0'}`}
+      className={`absolute inset-0 z-50 flex items-center justify-center bg-magpie-light-75 font-medium text-indigo-500 transition-opacity duration-200 ease-in-out ${className} ${isShow ? 'bg-opacity-80' : 'bg-opacity-0'}`}
     >
       <SpinnerWithText text={text} />
     </div>

src/components/common/badges/StatusBadge.tsx

@@ -1,14 +1,17 @@
+/* eslint-disable react-refresh/only-export-components */
+// https://github.com/ArnaudBarre/eslint-plugin-react-refresh/issues/25#issuecomment-1729071347
+
 import { Badge, getBadgeType } from '.';
 import { StatusIcon } from '../statusIcon';
 import { classNames } from '@/utils/commonUtils';
 
 const StatusBadge = ({ status }: { status: string }) => {
   return (
-    <Badge status={status} className='flex flex-row items-center h-7'>
-      <div className='pr-2 '>
+    <Badge status={status} className='flex h-7 flex-row items-center'>
+      <div className='pr-2'>
         <StatusIcon
           status={status}
-          className={classNames('animate-none ', statusTextColor(getBadgeType(status)))}
+          className={classNames('animate-none', statusTextColor(getBadgeType(status)))}
         ></StatusIcon>
       </div>
       <span>{status}</span>

src/components/common/buttons/Button.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode, MouseEventHandler } from 'react';
 import { classNames } from '@/utils/commonUtils';
+import { Tooltip } from '@/components/common/tooltips';
 
 export interface ButtonProps {
   type?: 'primary' | 'secondary' | 'light' | 'green' | 'red' | 'yellow' | 'gray';
@@ -9,6 +10,10 @@ export interface ButtonProps {
   onClick?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
   disabled?: boolean;
+  loading?: boolean;
+  tooltip?: string;
+  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
+  tooltipBackground?: 'light' | 'dark';
 }
 
 const Button: FC<ButtonProps> = ({
@@ -19,72 +24,94 @@ const Button: FC<ButtonProps> = ({
   onClick,
   className = '',
   disabled = false,
+  loading = false,
+  tooltip,
+  tooltipPosition = 'top',
+  tooltipBackground = 'dark',
 }) => {
   const baseStyles =
-    'font-normal text-center py-1.5 px-3 text-sm shadow-sm transition-colors duration-300 transform focus:outline-none focus:ring-opacity-80 flex items-center gap-x-2 ';
+    'relative inline-flex gap-2 items-center justify-center font-medium tracking-wide transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-offset-2 active:transform active:scale-90 disabled:opacity-70 disabled:cursor-not-allowed disabled:transform-none';
+
   const typeStyles: { [key: string]: string } = {
     primary:
-      ' text-white bg-blue-700' +
-      ' hover:bg-blue-800' +
-      ' focus:ring-1 focus:ring-blue-300' +
-      ' dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
+      'text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600' +
+      ' shadow-md hover:shadow-lg',
     secondary:
-      ' text-blue-700 bg-white' +
-      ' border border-blue-700' +
-      ' hover:bg-gray-100 hover:text-blue-700' +
-      ' focus:z-10 focus:ring-1 focus:ring-blue-300' +
-      ' dark:focus:ring-blue-700 dark:bg-gray-800 dark:text-blue-700 dark:border-gray-600 dark:hover:text-blue-700 dark:hover:bg-gray-700',
+      'text-blue-700 bg-blue-100 hover:bg-blue-200 focus:ring-blue-500 dark:bg-blue-200 dark:hover:bg-blue-300' +
+      ' dark:text-blue-800',
     light:
-      ' text-gray-900 bg-white' +
-      ' border border-gray-300' +
-      ' hover:bg-gray-100' +
-      ' focus:ring-1 focus:ring-gray-100 ' +
-      ' dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
+      'text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-100' +
+      ' dark:hover:bg-gray-700 border border-gray-300 dark:border-gray-600',
     green:
-      ' text-white bg-green-700' +
-      ' hover:bg-green-800' +
-      ' focus:ring-1 focus:ring-green-300' +
-      ' dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+      'text-white bg-green-600 hover:bg-green-700 focus:ring-green-500 dark:bg-green-500 dark:hover:bg-green-600' +
+      ' shadow-md hover:shadow-lg',
     red:
-      ' text-white bg-red-700 ' +
-      ' hover:bg-red-800' +
-      ' focus:ring-1 focus:ring-red-300' +
-      ' dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
+      'text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-600' +
+      ' shadow-md hover:shadow-lg',
     yellow:
-      ' text-white bg-yellow-400' +
-      ' hover:bg-yellow-500' +
-      ' focus:ring-1 focus:ring-yellow-300' +
-      ' dark:focus:ring-yellow-900',
-    gray: 'text-gray-500' + ' hover:bg-magpie-light-50' + ' focus:ring-1 focus:ring-blue-500/50',
+      'text-white bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-500 dark:bg-yellow-400 dark:hover:bg-yellow-500' +
+      ' shadow-md hover:shadow-lg',
+    gray:
+      'text-gray-700 bg-gray-100 hover:bg-gray-200 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100' +
+      ' dark:hover:bg-gray-600',
   };
 
   const sizeStyles: { [key: string]: string } = {
-    xs: ' text-xs px-2 py-1 ',
-    sm: ' text-sm px-3 py-1.5 ',
-    md: ' text-md px-4 py-2 ',
-    lg: ' text-lg px-5 py-2.5 ',
+    xs: 'text-xs px-2.5 py-1.5',
+    sm: 'text-sm px-3 py-2',
+    md: 'text-base px-4 py-2',
+    lg: 'text-lg px-6 py-3',
   };
 
-  const roundedStyles = rounded ? ' rounded-full ' : ' rounded ';
-  const disabledStyles = disabled ? ' opacity-50 cursor-not-allowed hover:!bg-transparent' : ' ';
-
-  return (
+  const button = (
     <button
       type='button'
       className={classNames(
         baseStyles,
         typeStyles[type],
         sizeStyles[size],
-        roundedStyles,
-        disabledStyles,
+        rounded ? 'rounded-full' : 'rounded',
+        disabled ? 'cursor-not-allowed opacity-50 hover:!bg-transparent' : ' ',
+        loading ? 'cursor-wait' : ' ',
         className
       )}
       onClick={onClick}
       disabled={disabled}
     >
-      {children}
+      {loading ? (
+        <span className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <svg className='h-5 w-5 animate-spin' viewBox='0 0 24 24'>
+            <circle
+              className='opacity-25'
+              cx='12'
+              cy='12'
+              r='10'
+              stroke='currentColor'
+              strokeWidth='4'
+              fill='none'
+            />
+            <path
+              className='opacity-75'
+              fill='currentColor'
+              d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z'
+            />
+          </svg>
+        </span>
+      ) : (
+        children
+      )}
     </button>
   );
+
+  if (tooltip) {
+    return (
+      <Tooltip text={tooltip} position={tooltipPosition} background={tooltipBackground}>
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
 };
 
 export default Button;

src/components/common/buttons/IconButton.tsx

@@ -3,13 +3,13 @@ import { Tooltip } from '@/components/common/tooltips';
 
 export interface IconButtonProps {
   icon: ReactNode;
-  tooltip?: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   type?: 'primary' | 'secondary' | 'light' | 'green' | 'red' | 'yellow' | 'gray';
   disabled?: boolean;
   className?: string;
+  tooltip?: string;
   tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
-  tooltipBackground?: 'gray' | 'white';
+  tooltipBackground?: 'light' | 'dark';
 }
 
 const IconButton: FC<IconButtonProps> = ({
@@ -19,7 +19,7 @@ const IconButton: FC<IconButtonProps> = ({
   disabled = false,
   className = '',
   tooltipPosition = 'top',
-  tooltipBackground = 'white',
+  tooltipBackground = 'dark',
 }) => {
   const baseIconButtonStyles =
     'p-1.5 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100';

src/components/common/checkbox/Checkbox.tsx

@@ -23,7 +23,7 @@ const Checkbox: FC<CheckboxProps> = ({ className, checked, onChange, disabled, l
         checked={isChecked}
         onChange={onChange}
         disabled={disabled || false}
-        className='group p-[1px] size-4 rounded border bg-gray-100 border-gray-300 cursor-pointer data-[checked]:bg-blue-600 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-400 data-[disabled]:cursor-not-allowed'
+        className='group size-4 cursor-pointer rounded border border-gray-300 bg-gray-100 p-[1px] data-[disabled]:cursor-not-allowed data-[checked]:bg-blue-600 data-[disabled]:bg-gray-100 data-[disabled]:text-gray-400'
       >
         <svg
           className='stroke-white opacity-0 group-data-[checked]:opacity-100'
@@ -40,8 +40,8 @@ const Checkbox: FC<CheckboxProps> = ({ className, checked, onChange, disabled, l
       </CheckboxComponent>
       <Label
         className={classNames(
-          'py-2 text-sm font-normal rounded',
-          disabled ? 'text-gray-500 cursor-not-allowed ' : 'text-gray-900 cursor-pointer '
+          'rounded py-2 text-sm font-normal',
+          disabled ? 'cursor-not-allowed text-gray-500' : 'cursor-pointer text-gray-900'
         )}
       >
         {label}

src/components/common/datepicker/DateRangePicker.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { FC, useEffect, useState } from 'react';
 import Flatpickr from 'react-flatpickr';
 import type { DateTimePickerProps } from 'react-flatpickr';
@@ -51,10 +53,12 @@ const DateRangePicker: FC<DateRangePickerProps> = ({ align, startDate, endDate,
     },
   };
 
+  const FlatpickrComponent = Flatpickr as any;
+
   return (
     <div className='relative'>
-      <Flatpickr
-        className='form-input !pl-9 dark:bg-slate-800  hover:text-slate-600 hover:bg-magpie-light-25 dark:text-slate-300 dark:hover:text-slate-200 font-medium w-[15.5rem] rounded-lg border-0 bg-white py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6'
+      <FlatpickrComponent
+        className='form-input w-[15.5rem] rounded-lg border-0 bg-white py-1.5 !pl-9 font-medium text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 hover:bg-magpie-light-25 hover:text-slate-600 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-slate-200'
         options={options}
         value={
           selectedStartDate && selectedEndDate
@@ -66,9 +70,9 @@ const DateRangePicker: FC<DateRangePickerProps> = ({ align, startDate, endDate,
         onOpen={() => setIsOpen(true)}
         onClose={() => setIsOpen(false)}
       />
-      <div className='absolute inset-0 right-auto flex items-center pointer-events-none'>
+      <div className='pointer-events-none absolute inset-0 right-auto flex items-center'>
         <svg
-          className='w-4 h-4 fill-current text-slate-500 dark:text-slate-400 ml-3'
+          className='ml-3 h-4 w-4 fill-current text-slate-500 dark:text-slate-400'
           viewBox='0 0 16 16'
         >
           <path d='M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z' />