upgrade rest of dependencies

.eslintrc.cjs

@@ -34,6 +34,7 @@ module.exports = {
         'plugin:prettier/recommended',
         'plugin:testing-library/react',
         'plugin:jest-dom/recommended',
+        'plugin:tailwindcss/recommended',
       ],
       rules: {
         'no-restricted-imports': [

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn lint-staged

generators/component/index.js → generators/component/index.cjs

@@ -5,7 +5,7 @@ const featuresDir = path.join(process.cwd(), 'src/features');
 const features = fs.readdirSync(featuresDir);
 
 /**
- * 
+ *
  * @type {import('plop').PlopGenerator}
  */
 module.exports = {
@@ -20,19 +20,19 @@ module.exports = {
       type: 'list',
       name: 'feature',
       message: 'Which feature does this component belong to?',
-      choices: ['ROOT', ...features],
+      choices: ['components', ...features],
       when: () => features.length > 0,
     },
     {
       type: 'input',
       name: 'folder',
       message: 'folder in components',
-      when: ({ feature }) => !feature || feature === 'ROOT',
+      when: ({ feature }) => !feature || feature === 'components',
     },
   ],
   actions: (answers) => {
     const componentGeneratePath =
-      !answers.feature || answers.feature === 'ROOT'
+      !answers.feature || answers.feature === 'components'
         ? 'src/components/{{folder}}'
         : 'src/features/{{feature}}/components';
     return [

package.json

@@ -8,8 +8,8 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest --maxConcurrency=1",
-    "postinstall": "husky install",
-    "lint": "eslint --fix --ignore-path .gitignore",
+    "prepare": "husky",
+    "lint": "eslint src --fix --ignore-path .gitignore",
     "prettier": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx)\"",
     "format": "npm run prettier -- --write",
     "check-types": "tsc --project tsconfig.json --pretty --noEmit",
@@ -20,18 +20,16 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
-    "@heroicons/react": "^1.0.1",
+    "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^3.3.4",
     "@ngneat/falso": "^7.2.0",
-    "@tanstack/react-query": "^4.29.15",
-    "@tanstack/react-query-devtools": "^4.29.15",
+    "@tanstack/react-query": "^5.32.0",
+    "@tanstack/react-query-devtools": "^5.32.0",
     "axios": "^1.6.8",
-    "clsx": "^1.1.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
-    "dompurify": "^2.2.9",
-    "history": "^5.0.0",
-    "intersection-observer": "^0.12.0",
-    "marked": "^2.0.7",
+    "dompurify": "^3.1.1",
+    "marked": "^12.0.2",
     "nanoid": "^5.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -57,13 +55,13 @@
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.5",
     "@testing-library/user-event": "^14.5.2",
-    "@types/dompurify": "^2.2.2",
-    "@types/marked": "^2.0.3",
+    "@types/dompurify": "^3.0.5",
+    "@types/marked": "^6.0.0",
     "@types/node": "^20.12.7",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "6",
-    "@typescript-eslint/parser": "6",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.19",
     "eslint": "8",
@@ -76,13 +74,14 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-tailwindcss": "^3.15.1",
     "eslint-plugin-testing-library": "^6.2.2",
-    "husky": "^6.0.0",
+    "husky": "^9.0.11",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.0.0",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^15.2.2",
     "msw": "^2.2.14",
-    "plop": "^2.7.4",
+    "plop": "^4.0.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "storybook": "^8.0.9",

src/components/Elements/Button/Button.tsx

@@ -45,7 +45,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         type={type}
         className={clsx(
-          'flex justify-center items-center border border-gray-300 disabled:opacity-70 disabled:cursor-not-allowed rounded-md shadow-sm font-medium focus:outline-none hover:opacity-80',
+          'flex items-center justify-center rounded-md border border-gray-300 font-medium shadow-sm hover:opacity-80 focus:outline-none disabled:cursor-not-allowed disabled:opacity-70',
           variants[variant],
           sizes[size],
           className

src/components/Elements/ConfirmationDialog/ConfirmationDialog.tsx

@@ -1,4 +1,4 @@
-import { ExclamationIcon, InformationCircleIcon } from '@heroicons/react/outline';
+import { ExclamationCircleIcon, InformationCircleIcon } from '@heroicons/react/16/solid';
 import * as React from 'react';
 
 import { Button } from '@/components/Elements/Button';
@@ -42,21 +42,21 @@ export const ConfirmationDialog = ({
     <>
       {trigger}
       <Dialog isOpen={isOpen} onClose={close} initialFocus={cancelButtonRef}>
-        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+        <div className="inline-block overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="sm:flex sm:items-start">
             {icon === 'danger' && (
-              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                <ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+              <div className="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10">
+                <ExclamationCircleIcon className="size-6 text-red-600" aria-hidden="true" />
               </div>
             )}
 
             {icon === 'info' && (
-              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                <InformationCircleIcon className="h-6 w-6 text-blue-600" aria-hidden="true" />
+              <div className="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:size-10">
+                <InformationCircleIcon className="size-6 text-blue-600" aria-hidden="true" />
               </div>
             )}
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-              <DialogTitle as="h3" className="text-lg leading-6 font-medium text-gray-900">
+            <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+              <DialogTitle as="h3" className="text-lg font-medium leading-6 text-gray-900">
                 {title}
               </DialogTitle>
               {body && (
@@ -66,11 +66,11 @@ export const ConfirmationDialog = ({
               )}
             </div>
           </div>
-          <div className="mt-4 flex space-x-2 justify-end">
+          <div className="mt-4 flex justify-end space-x-2">
             <Button
               type="button"
               variant="inverse"
-              className="w-full inline-flex justify-center rounded-md border focus:ring-1 focus:ring-offset-1 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+              className="inline-flex w-full justify-center rounded-md border focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:mt-0 sm:w-auto sm:text-sm"
               onClick={close}
               ref={cancelButtonRef}
             >

src/components/Elements/Dialog/Dialog.stories.tsx

@@ -25,16 +25,16 @@ export const Demo: StoryFn = () => {
     <>
       <Button onClick={open}>Open Modal</Button>
       <Dialog isOpen={isOpen} onClose={close} initialFocus={cancelButtonRef}>
-        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-            <DialogTitle as="h3" className="text-lg leading-6 font-medium text-gray-900">
+        <div className="inline-block overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+            <DialogTitle as="h3" className="text-lg font-medium leading-6 text-gray-900">
               Modal Title
             </DialogTitle>
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
             <Button
               type="button"
-              className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+              className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
               onClick={close}
               ref={cancelButtonRef}
             >

src/components/Elements/Dialog/Dialog.tsx

@@ -1,6 +1,5 @@
 import { Dialog as UIDialog, Transition } from '@headlessui/react';
 import * as React from 'react';
-import 'intersection-observer';
 
 type DialogProps = {
   isOpen: boolean;
@@ -20,12 +19,12 @@ export const Dialog = ({ isOpen, onClose, children, initialFocus }: DialogProps)
         <UIDialog
           as="div"
           static
-          className="fixed z-10 inset-0 overflow-y-auto"
+          className="relative z-10"
           open={isOpen}
           onClose={onClose}
           initialFocus={initialFocus}
         >
-          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -35,24 +34,24 @@ export const Dialog = ({ isOpen, onClose, children, initialFocus }: DialogProps)
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <UIDialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+              <div className="fixed inset-0 bg-gray-500/75 transition-opacity" />
             </Transition.Child>
 
-            {/* This element is to trick the browser into centering the modal contents. */}
-            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-              &#8203;
-            </span>
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              {children}
-            </Transition.Child>
+            <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+              <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                <Transition.Child
+                  as={React.Fragment}
+                  enter="ease-out duration-300"
+                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                  enterTo="opacity-100 translate-y-0 sm:scale-100"
+                  leave="ease-in duration-200"
+                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                >
+                  {children}
+                </Transition.Child>
+              </div>
+            </div>
           </div>
         </UIDialog>
       </Transition.Root>

src/components/Elements/Drawer/Drawer.tsx

@@ -1,8 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
-import { XIcon } from '@heroicons/react/outline';
+import { XMarkIcon } from '@heroicons/react/16/solid';
 import clsx from 'clsx';
 import * as React from 'react';
-import 'intersection-observer';
 
 const sizes = {
   sm: 'max-w-md',
@@ -34,13 +33,13 @@ export const Drawer = ({
       <Dialog
         as="div"
         static
-        className="fixed inset-0 overflow-hidden z-40"
+        className="fixed inset-0 z-40 overflow-hidden"
         open={isOpen}
         onClose={onClose}
       >
         <div className="absolute inset-0 overflow-hidden">
           <Dialog.Overlay className="absolute inset-0" />
-          <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
+          <div className="fixed inset-y-0 right-0 flex max-w-full pl-10">
             <Transition.Child
               as={React.Fragment}
               enter="transform transition ease-in-out duration-300 sm:duration-300"
@@ -51,29 +50,27 @@ export const Drawer = ({
               leaveTo="translate-x-full"
             >
               <div className={clsx('w-screen', sizes[size])}>
-                <div className="h-full divide-y divide-gray-200 flex flex-col bg-white shadow-xl">
-                  <div className="min-h-0 flex-1 flex flex-col py-6 overflow-y-scroll">
+                <div className="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
+                  <div className="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6">
                     <div className="px-4 sm:px-6">
                       <div className="flex items-start justify-between">
                         <Dialog.Title className="text-lg font-medium text-gray-900">
                           {title}
                         </Dialog.Title>
-                        <div className="ml-3 h-7 flex items-center">
+                        <div className="ml-3 flex h-7 items-center">
                           <button
-                            className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                            className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                             onClick={onClose}
                           >
                             <span className="sr-only">Close panel</span>
-                            <XIcon className="h-6 w-6" aria-hidden="true" />
+                            <XMarkIcon className="size-6" aria-hidden="true" />
                           </button>
                         </div>
                       </div>
                     </div>
-                    <div className="mt-6 relative flex-1 px-4 sm:px-6">{children}</div>
-                  </div>
-                  <div className="flex-shrink-0 px-4 py-4 flex justify-end space-x-2">
-                    {renderFooter()}
+                    <div className="relative mt-6 flex-1 px-4 sm:px-6">{children}</div>
                   </div>
+                  <div className="flex shrink-0 justify-end space-x-2 p-4">{renderFooter()}</div>
                 </div>
               </div>
             </Transition.Child>

src/components/Elements/MDPreview/MDPreview.tsx

@@ -1,5 +1,5 @@
 import createDOMPurify from 'dompurify';
-import marked from 'marked';
+import { parse } from 'marked';
 
 const DOMPurify = createDOMPurify(window);
 
@@ -10,9 +10,9 @@ export type MDPreviewProps = {
 export const MDPreview = ({ value = '' }: MDPreviewProps) => {
   return (
     <div
-      className="p-2 w-full prose prose-indigo"
+      className="prose prose-indigo w-full p-2"
       dangerouslySetInnerHTML={{
-        __html: DOMPurify.sanitize(marked(value)),
+        __html: DOMPurify.sanitize(parse(value) as string),
       }}
     />
   );

src/components/Elements/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { ArchiveIcon } from '@heroicons/react/outline';
+import { ArchiveBoxIcon } from '@heroicons/react/16/solid';
 import * as React from 'react';
 
 type TableColumn<Entry> = {
@@ -15,8 +15,8 @@ export type TableProps<Entry> = {
 export const Table = <Entry extends { id: string }>({ data, columns }: TableProps<Entry>) => {
   if (!data?.length) {
     return (
-      <div className="flex flex-col items-center justify-center text-gray-500 bg-white h-80">
-        <ArchiveIcon className="w-16 h-16" />
+      <div className="flex h-80 flex-col items-center justify-center bg-white text-gray-500">
+        <ArchiveBoxIcon className="size-16" />
         <h4>No Entries Found</h4>
       </div>
     );
@@ -33,7 +33,7 @@ export const Table = <Entry extends { id: string }>({ data, columns }: TableProp
                     <th
                       key={column.title + index}
                       scope="col"
-                      className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase"
+                      className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                     >
                       {column.title}
                     </th>
@@ -46,7 +46,7 @@ export const Table = <Entry extends { id: string }>({ data, columns }: TableProp
                     {columns.map(({ Cell, field, title }, columnIndex) => (
                       <td
                         key={title + columnIndex}
-                        className="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap"
+                        className="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900"
                       >
                         {Cell ? <Cell entry={entry} /> : `${entry[field]}`}
                       </td>

src/components/Form/InputField.tsx

@@ -16,7 +16,7 @@ export const InputField = (props: InputFieldProps) => {
       <input
         type={type}
         className={clsx(
-          'appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm',
+          'block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm',
           className
         )}
         {...registration}

src/components/Form/SelectField.tsx

@@ -23,7 +23,7 @@ export const SelectField = (props: SelectFieldProps) => {
       <select
         name="location"
         className={clsx(
-          'mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md',
+          'mt-1 block w-full rounded-md border-gray-600 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm',
           className
         )}
         defaultValue={defaultValue}