Chakra UIの廃止とTailwind CSSへの移行

view/next-project/.eslintrc.json

@@ -8,10 +8,9 @@
     "plugin:import/typescript",
     "plugin:react-hooks/recommended",
     "plugin:storybook/recommended",
-    "plugin:tailwindcss/recommended",
     "prettier"
   ],
-  "plugins": ["@typescript-eslint", "unused-imports", "import", "react-hooks", "tailwindcss"],
+  "plugins": ["@typescript-eslint", "unused-imports", "import", "react-hooks"],
   "parser": "@typescript-eslint/parser",
   "env": {
     "node": true,

view/next-project/package.json

@@ -15,10 +15,6 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.12",
-    "@chakra-ui/react": "^2.0.0",
-    "@emotion/react": "^11.6.0",
-    "@emotion/styled": "^11.6.0",
     "@fontsource/noto-sans-jp": "^4.5.2",
     "@pdf-lib/fontkit": "^1.1.1",
     "@react-pdf/renderer": "^3.4.0",
@@ -29,7 +25,6 @@
     "date-fns": "^2.30.0",
     "file-saver": "^2.0.5",
     "formidable": "^3.5.1",
-    "framer-motion": "^5.3.0",
     "fs": "^0.0.1-security",
     "lorem-ipsum": "^2.0.4",
     "minio": "^7.1.3",

view/next-project/src/components/budget_managements/AddBudgetManagementModal.tsx

@@ -1,12 +1,9 @@
-import { useRouter } from 'next/router';
-import * as React from 'react';
-import { Dispatch, SetStateAction, useState } from 'react';
-import { FC } from 'react';
+import { Dispatch, FC, SetStateAction, useState } from 'react';
 import { RiCloseCircleLine } from 'react-icons/ri';
 
-import { usePostFestivalItems, usePostFinancialRecords, usePostDivisions } from '@/generated/hooks';
+import { usePostDivisions, usePostFestivalItems, usePostFinancialRecords } from '@/generated/hooks';
 import { Year } from '@/type/common';
-import { PrimaryButton, Input, Modal } from '@components/common';
+import { Input, Modal, PrimaryButton } from '@components/common';
 
 import formatNumber from '../common/Formatter';
 
@@ -36,8 +33,6 @@ const AddBudgetManagementModal: FC<ModalProps> = (props) => {
   const [festivalItemName, setFestivalItemName] = useState('');
   const [amount, setAmount] = useState<number | null>(null);
 
-  const router = useRouter();
-
   const closeModal = () => {
     props.setShowModal(false);
   };
@@ -97,9 +92,10 @@ const AddBudgetManagementModal: FC<ModalProps> = (props) => {
       if (onSuccess) {
         onSuccess();
       }
-    } catch (error: any) {
-      console.error('登録エラー:', error.message);
-      alert(`登録エラー: ${error.message}`);
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : '不明なエラー';
+      console.error('登録エラー:', errorMessage);
+      alert(`登録エラー: ${errorMessage}`);
     }
   };
 

view/next-project/src/components/budget_managements/BudgetManagement.tsx

@@ -7,9 +7,9 @@ import PrimaryButton from '@/components/common/OutlinePrimaryButton/OutlinePrima
 import { useGetDivisions, useGetFestivalItems, useGetFinancialRecords } from '@/generated/hooks';
 import { Year } from '@/type/common';
 
-import formatNumber from '../common/Formatter';
 import OpenDeleteModalButton from './OpenDeleteModalButton';
 import OpenEditModalButton from './OpenEditModalButton';
+import formatNumber from '../common/Formatter';
 
 import type {
   Division,
@@ -44,7 +44,7 @@ export default function BudgetManagement(props: Props) {
     division_id: divisionId ?? undefined,
   };
 
-  const [selectedYear, setSelectedYear] = useState<Year>(
+  const [selectedYear, _setSelectedYear] = useState<Year>(
     // 本番環境では、2025のyear_idを1にします
     years ? years[years.length - 1] : { id: 1, year: 2025 },
   );
@@ -148,7 +148,7 @@ export default function BudgetManagement(props: Props) {
     }
   }, [financialRecordId, divisionId, selectedYear.id, financialRecords, divisions]);
 
-  const handleRowClick = (item: any) => {
+  const handleRowClick = (item: { id?: number }) => {
     if (financialRecordId === null) {
       setQueryState({ financialRecordId: item.id, divisionId: null, festivalItemId: null });
       return;

view/next-project/src/components/budget_managements/DeleteBudgetManagementModal.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { Dispatch, SetStateAction } from 'react';
-import { FC } from 'react';
+import { Dispatch, FC, SetStateAction } from 'react';
 import { RiCloseCircleLine } from 'react-icons/ri';
 
 import {
-  useDeleteFinancialRecordsId,
   useDeleteDivisionsId,
   useDeleteFestivalItemsId,
+  useDeleteFinancialRecordsId,
 } from '@/generated/hooks';
-import { PrimaryButton, Modal } from '@components/common';
+import { Modal, PrimaryButton } from '@components/common';
 
 export interface ModalProps {
   setShowModal: Dispatch<SetStateAction<boolean>>;
@@ -54,8 +53,9 @@ const DeleteBudgetManagementModal: FC<ModalProps> = (props) => {
       if (onSuccess) {
         onSuccess();
       }
-    } catch (error: any) {
-      alert(`削除エラー: ${error.message}`);
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : '不明なエラー';
+      alert(`削除エラー: ${errorMessage}`);
     }
   };
 

view/next-project/src/components/budget_managements/EditBudgetManagementModal.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { FC } from 'react';
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 import { RiCloseCircleLine } from 'react-icons/ri';
 
 import {
-  useGetFinancialRecordsId,
   useGetDivisionsId,
   useGetFestivalItemsId,
-  usePutFinancialRecordsId,
+  useGetFinancialRecordsId,
   usePutDivisionsId,
   usePutFestivalItemsId,
+  usePutFinancialRecordsId,
 } from '@/generated/hooks';
-import { PrimaryButton, Input, Modal } from '@components/common';
+import { Input, Modal, PrimaryButton } from '@components/common';
 
 import formatNumber from '../common/Formatter';
 
@@ -91,8 +90,9 @@ const EditBudgetManagementModal: FC<ModalProps> = (props) => {
       if (onSuccess) {
         onSuccess();
       }
-    } catch (error: any) {
-      alert(`登録エラー: ${error.message}`);
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : '不明なエラー';
+      alert(`登録エラー: ${errorMessage}`);
     }
   };
 

view/next-project/src/components/common/BureauLabel/BureauLabel.tsx

@@ -11,7 +11,7 @@ const BureauLabel: React.FC<BureauLabelProps> = (props) => {
     const bureau = BUREAUS_WITH_EN.find((bureau) => bureau.name === bureauName);
     if (!bureau) return 'other';
     return bureau.name_en;
-  }, []);
+  }, [bureauName]);
 
   return (
     <Label isOutline color={bureauEn}>

view/next-project/src/components/common/Card/Card.tsx

@@ -12,7 +12,7 @@ function Card(props: Props): JSX.Element {
     <div className={clsx('mx-auto', props.w ? props.w : 'md:w-4/5')} onClick={props.onClick}>
       <div
         className={clsx(
-          'm-2 rounded-lg border border-black-300 border-opacity-10 px-2 shadow-md md:m-10 md:px-10',
+          'm-2 rounded-lg border border-opacity-10 px-2 shadow-md md:m-10 md:px-10',
         )}
       >
         {props.children}

view/next-project/src/components/common/ChakraUIDropdown.tsx

@@ -1,54 +1,64 @@
-import { Button, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
-import React from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { RiArrowDropDownLine } from 'react-icons/ri';
 
-import { useUserStore } from '@/store';
-
 interface Props {
   title: string;
   onClick?: () => void;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const Dropdown = (props: Props) => {
-  const user = useUserStore((state) => state.user);
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, []);
 
   return (
-    <Menu>
-      <MenuButton
-        variant='outline'
-        as={Button}
-        rightIcon={<RiArrowDropDownLine />}
-        color='white'
-        borderColor='white'
-        bg='transparent'
-        _hover={{ color: '#023859', bgColor: '#fff' }}
-        _active={{ color: '#023859', bgColor: '#fff' }}
+    <div ref={dropdownRef} className='relative'>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className='border-white-0 text-white-0 hover:bg-white-0 hover:text-primary-4 flex items-center gap-1 rounded-md border bg-transparent px-3 py-2 transition-colors'
       >
-        <div className='flex flex-row gap-3'>
+        <div className='flex flex-row items-center gap-3'>
           {props.children}
-          <span suppressHydrationWarning className='hidden md:block'>
+          <span suppressHydrationWarning className='hidden text-base font-bold md:block'>
+            {props.title}
+          </span>
+        </div>
+        <RiArrowDropDownLine size={20} />
+      </button>
+
+      {isOpen && (
+        <div className='bg-white-0 absolute right-0 z-50 mt-2 w-48 rounded-md border py-1 shadow-lg'>
+          <span
+            suppressHydrationWarning
+            className='text-black-300 mx-auto block w-fit pb-2 md:hidden'
+          >
             {props.title}
           </span>
+          <button
+            onClick={() => {
+              props.onClick?.();
+              setIsOpen(false);
+            }}
+            className='text-primary-4 w-full px-4 py-2 text-left transition-colors hover:bg-gray-100'
+          >
+            ログアウト
+          </button>
         </div>
-      </MenuButton>
-      <MenuList>
-        <span
-          suppressHydrationWarning
-          className='mx-auto block w-fit pb-2 text-black-300 md:hidden'
-        >
-          {props.title}
-        </span>
-        <MenuItem
-          style={{ color: '#023859' }}
-          onClick={() => {
-            props.onClick && props.onClick();
-          }}
-        >
-          <p>ログアウト</p>
-        </MenuItem>
-      </MenuList>
-    </Menu>
+      )}
+    </div>
   );
 };
 

view/next-project/src/components/common/DownloadButton.tsx

@@ -1,7 +1,8 @@
-import { Tooltip } from '@chakra-ui/react';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { IoMdDownload } from 'react-icons/io';
 
+import { Tooltip } from '@/components/common';
+
 interface Props {
   onClick?: () => void;
   isDisabled?: boolean;
@@ -20,7 +21,7 @@ const DownloadButton = (props: Props) => {
   }, [isDisabled]);
 
   return (
-    <Tooltip label={tooltip} hasArrow>
+    <Tooltip label={tooltip}>
       <button
         disabled={isDisabled}
         className={`${buttonClass} flex size-6 min-w-0 items-center justify-center rounded-full`}

view/next-project/src/components/common/FormControl/FormControl.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import React, { createContext, useContext } from 'react';
+
+interface FormControlContextValue {
+  id?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+}
+
+const FormControlContext = createContext<FormControlContextValue>({});
+
+export const useFormControlContext = () => useContext(FormControlContext);
+
+interface FormControlProps {
+  id?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+function FormControl({
+  id,
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  children,
+  className,
+}: FormControlProps): JSX.Element {
+  return (
+    <FormControlContext.Provider value={{ id, isRequired, isDisabled, isInvalid }}>
+      <div className={clsx('w-full', className)}>{children}</div>
+    </FormControlContext.Provider>
+  );
+}
+
+export default FormControl;