General style and component refactor

Makefile

@@ -27,3 +27,6 @@ deploy-dev:
 	@aws lambda invoke \
     --function-name CodeBuildEnvConfigLambdaBeta \
     response.json
+
+storybook:
+	@yarn run storybook

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

@@ -1,6 +1,6 @@
 {
   "name": "orca-ui",
-  "packageManager": "yarn@4.5.0",
+  "packageManager": "yarn@4.6.0",
   "private": true,
   "version": "0.0.1",
   "type": "module",
@@ -23,30 +23,30 @@
   },
   "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.12.1",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "dayjs": "^1.11.13",
-    "igv": "^3.0.9",
+    "igv": "^3.1.3",
     "mime-db": "^1.53.0",
-    "openapi-fetch": "^0.13.0",
+    "openapi-fetch": "^0.13.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "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.3",
+    "tailwind-merge": "^2.6.0",
     "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",
@@ -61,28 +61,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.18.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-hooks": "^5.1.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.10",
     "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/accordion/Accordion.tsx

@@ -0,0 +1,49 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { ReactNode } from 'react';
+
+interface AccordionProps {
+  title: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  chevronPosition?: 'left' | 'right';
+  className?: string;
+}
+
+const Accordion = ({
+  title,
+  children,
+  defaultOpen = true,
+  chevronPosition = 'left',
+  className,
+}: AccordionProps) => {
+  return (
+    <Disclosure as='div' defaultOpen={defaultOpen} className={className}>
+      <div className='border-b border-gray-200 dark:border-gray-700'>
+        <DisclosureButton className='group flex w-full items-center justify-between gap-2 rounded-lg px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700'>
+          {chevronPosition === 'left' && (
+            <ChevronRightIcon
+              className={`h-5 w-5 shrink-0 text-gray-500 transition-transform group-data-[open]:rotate-90 dark:text-gray-400`}
+            />
+          )}
+
+          {title}
+
+          {chevronPosition === 'right' && (
+            <ChevronRightIcon
+              className={`h-5 w-5 shrink-0 text-gray-500 transition-transform group-data-[open]:rotate-90 dark:text-gray-400`}
+            />
+          )}
+        </DisclosureButton>
+
+        <DisclosurePanel className='px-4 py-3 text-sm text-gray-500 dark:text-gray-400' transition>
+          <div className='origin-top transition duration-200 ease-out data-[closed]:-translate-y-2 data-[closed]:opacity-0'>
+            {children}
+          </div>
+        </DisclosurePanel>
+      </div>
+    </Disclosure>
+  );
+};
+
+export default Accordion;

src/components/common/accordion/index.tsx

@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+
+export { Accordion };

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;