style: format code

.prettierrc.js

@@ -4,4 +4,5 @@ module.exports = {
   jsxSingleQuote: true,
   tabWidth: 2,
   semi: true,
+  trailingComma: 'all',
 };

src/components/NextImage.tsx

@@ -31,7 +31,7 @@ export default function NextImage({
   ...rest
 }: NextImageProps) {
   const [status, setStatus] = React.useState(
-    useSkeleton ? 'loading' : 'complete'
+    useSkeleton ? 'loading' : 'complete',
   );
   const widthIsSet = className?.includes('w-') ?? false;
 
@@ -43,7 +43,7 @@ export default function NextImage({
       <Image
         className={clsxm(
           imgClassName,
-          status === 'loading' && clsxm('animate-pulse', blurClassName)
+          status === 'loading' && clsxm('animate-pulse', blurClassName),
         )}
         src={src}
         width={width}

src/components/Tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
     className={clsxm(
       'z-50 overflow-hidden rounded-lg border border-typo-outline bg-white px-3 py-1.5 shadow-md',
       'animate-in fade-in-50 duration-100 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1',
-      className
+      className,
     )}
     {...props}
   />

src/components/buttons/TextButton.tsx

@@ -19,7 +19,7 @@ type TextButtonProps = {
 const TextButton = React.forwardRef<HTMLButtonElement, TextButtonProps>(
   (
     { children, className, size = 'base', variant = 'primary', ...rest },
-    ref
+    ref,
   ) => {
     return (
       <button
@@ -61,14 +61,14 @@ const TextButton = React.forwardRef<HTMLButtonElement, TextButtonProps>(
           ],
           'disabled:cursor-not-allowed disabled:brightness-105',
           //#endregion  //*======== Variant ===========
-          className
+          className,
         )}
         {...rest}
       >
         {children}
       </button>
     );
-  }
+  },
 );
 
 export default TextButton;

src/components/cards/MacCard.tsx

@@ -20,7 +20,7 @@ export default function MacCard({
       className={clsxm(
         'overflow-hidden rounded-lg',
         mode === 'light' && 'border border-typo-divider shadow-sm',
-        className
+        className,
       )}
       {...rest}
     >

src/components/cards/SimpleCard.tsx

@@ -22,7 +22,7 @@ export default function SimpleCard({
           size === 'sm' && ['p-4', 'rounded-lg'],
           size === 'base' && ['p-5', 'rounded-xl'],
         ],
-        className
+        className,
       )}
       {...rest}
     />

src/components/forms/Checkbox.tsx

@@ -70,7 +70,7 @@ export default function Checkbox({
             (readOnly || disabled) &&
               'cursor-not-allowed bg-gray-100 disabled:checked:bg-primary-400',
             error && 'border-danger-400 bg-danger-100',
-            size === 'sm' && 'h-3.5 w-3.5'
+            size === 'sm' && 'h-3.5 w-3.5',
           )}
           placeholder={placeholder}
           aria-describedby={name}

src/components/forms/DropzoneInput.tsx

@@ -70,13 +70,13 @@ export default function DropzoneInput({
         const acceptedFilesPreview = acceptedFiles.map((file: T) =>
           Object.assign(file, {
             preview: URL.createObjectURL(file),
-          })
+          }),
         );
 
         setFiles(
           files
             ? [...files, ...acceptedFilesPreview].slice(0, maxFiles)
-            : acceptedFilesPreview
+            : acceptedFilesPreview,
         );
 
         setValue(
@@ -86,12 +86,12 @@ export default function DropzoneInput({
             : acceptedFiles,
           {
             shouldValidate: true,
-          }
+          },
         );
         clearErrors(id);
       }
     },
-    [clearErrors, files, id, maxFiles, setError, setValue]
+    [clearErrors, files, id, maxFiles, setError, setValue],
   );
 
   React.useEffect(() => {
@@ -104,7 +104,7 @@ export default function DropzoneInput({
 
   const deleteFile = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    file: FileWithPreview
+    file: FileWithPreview,
   ) => {
     e.preventDefault();
     const newFiles = [...files];
@@ -184,7 +184,7 @@ export default function DropzoneInput({
                     'w-full cursor-pointer rounded-lg px-2 py-8',
                     error
                       ? 'dropzone-border-dash-error border-red-500 group-focus:border-red-500'
-                      : 'dropzone-border-dash group-focus:border-primary-500'
+                      : 'dropzone-border-dash group-focus:border-primary-500',
                   )}
                 >
                   <div className='space-y-1 text-center'>

src/components/forms/Radio.tsx

@@ -59,7 +59,7 @@ export default function Radio({
             'checked:bg-primary-500 checked:hover:bg-primary-600 checked:focus:bg-primary-500 checked:active:bg-primary-700',
             (readOnly || disabled) &&
               'cursor-not-allowed bg-gray-100 disabled:checked:bg-primary-400',
-            error && 'border-danger-400 bg-danger-100'
+            error && 'border-danger-400 bg-danger-100',
           )}
           placeholder={placeholder}
           aria-describedby={name}

src/components/forms/TextArea.tsx

@@ -55,7 +55,7 @@ export default function TextArea({
             'border-gray-300 focus:border-primary-500 focus:ring-primary-500',
             (readOnly || disabled) &&
               'cursor-not-allowed border-gray-300 bg-gray-100 focus:border-gray-300 focus:ring-0',
-            error && 'border-red-500 focus:border-red-500 focus:ring-red-500'
+            error && 'border-red-500 focus:border-red-500 focus:ring-red-500',
           )}
           placeholder={placeholder}
           aria-describedby={id}

src/components/links/ArrowLink.tsx

@@ -26,7 +26,7 @@ export default function ArrowLink<C extends React.ElementType>({
       className={clsxm(
         'group gap-[0.25em]',
         direction === 'left' && 'flex-row-reverse',
-        className
+        className,
       )}
     >
       <span>{children}</span>
@@ -40,7 +40,7 @@ export default function ArrowLink<C extends React.ElementType>({
           'relative',
           'transition-transform duration-200',
           direction === 'right' ? 'motion-safe:-translate-x-1' : 'rotate-180',
-          'group-hover:translate-x-0'
+          'group-hover:translate-x-0',
         )}
       >
         <path
@@ -55,7 +55,7 @@ export default function ArrowLink<C extends React.ElementType>({
           className={clsxm(
             'origin-left transition-all duration-200',
             'opacity-0 motion-safe:-translate-x-1',
-            'group-hover:translate-x-0 group-hover:opacity-100'
+            'group-hover:translate-x-0 group-hover:opacity-100',
           )}
         />
       </svg>

src/components/links/PrimaryLink.tsx

@@ -23,7 +23,7 @@ type PrimaryLinkProps = {
 const PrimaryLink = React.forwardRef<HTMLAnchorElement, PrimaryLinkProps>(
   (
     { className, children, size = 'base', variant = 'primary', ...rest },
-    ref
+    ref,
   ) => {
     return (
       <UnstyledLink
@@ -54,13 +54,13 @@ const PrimaryLink = React.forwardRef<HTMLAnchorElement, PrimaryLinkProps>(
             'focus-visible:ring-red-300',
           ],
           //#endregion  //*======== Variant ===========
-          className
+          className,
         )}
       >
         {children}
       </UnstyledLink>
     );
-  }
+  },
 );
 
 export default PrimaryLink;

src/components/links/UnderlineLink.tsx

@@ -16,13 +16,13 @@ const UnderlineLink = React.forwardRef<HTMLAnchorElement, UnstyledLinkProps>(
           'animated-underline custom-link inline-flex items-center font-medium',
           'focus:outline-none focus-visible:rounded focus-visible:ring focus-visible:ring-primary-500 focus-visible:ring-offset-2',
           'border-b border-dotted border-dark hover:border-black/0',
-          className
+          className,
         )}
       >
         {children}
       </UnstyledLink>
     );
-  }
+  },
 );
 
 export default UnderlineLink;

src/components/links/UnstyledLink.tsx

@@ -44,7 +44,7 @@ const UnstyledLink = React.forwardRef<HTMLAnchorElement, UnstyledLinkProps>(
         {children}
       </a>
     );
-  }
+  },
 );
 
 export default UnstyledLink;

src/components/popover/Popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       className={clsxm(
         'z-50 w-72 rounded-lg border border-gray-100 bg-white p-4 shadow-md outline-none',
         'animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2',
-        className
+        className,
       )}
       {...props}
     />

src/components/table/TOption.tsx

@@ -30,7 +30,7 @@ export default function TOption({
           'border-none outline-none focus:border-none focus:outline-none focus:ring-0',
           'h-[2.25rem] py-0 md:h-[2.5rem]',
           'focus-visible:ring focus-visible:ring-primary-400',
-          'active:bg-primary-100 disabled:bg-primary-100'
+          'active:bg-primary-100 disabled:bg-primary-100',
         )}
         value={value}
         onChange={onChange}

src/hooks/toast/useLoadingToast.tsx

@@ -8,7 +8,7 @@ import { useToasterStore } from 'react-hot-toast';
 export default function useLoadingToast(): boolean {
   const { toasts } = useToasterStore();
   const isLoading = toasts.some(
-    (toast) => toast.type === 'loading' && toast.visible
+    (toast) => toast.type === 'loading' && toast.visible,
   );
   return isLoading;
 }

src/hooks/toast/useMutationToast.tsx

@@ -15,7 +15,7 @@ type OptionType = {
 
 export default function useMutationToast<T, K>(
   mutation: UseMutationResult<T, AxiosError<ApiError>, K>,
-  customMessages: OptionType = {}
+  customMessages: OptionType = {},
 ) {
   const { data, isError, isLoading, error } = mutation;
 
@@ -37,7 +37,7 @@ export default function useMutationToast<T, K>(
           : toastMessage.error(error),
         {
           id: toastStatus.current,
-        }
+        },
       );
       toastStatus.current = 'done';
     } else if (isLoading) {

src/hooks/toast/useQueryToast.tsx

@@ -15,7 +15,7 @@ type OptionType = {
 
 export default function useQueryToast<T>(
   query: UseQueryResult<T, AxiosError<ApiError>>,
-  customMessages: OptionType = {}
+  customMessages: OptionType = {},
 ) {
   const { data, isError, isLoading, error } = query;
 
@@ -37,7 +37,7 @@ export default function useQueryToast<T>(
           : toastMessage.error(error),
         {
           id: toastStatus.current,
-        }
+        },
       );
       toastStatus.current = 'done';
     } else if (isLoading) {

src/hooks/useServerTable.tsx

@@ -23,7 +23,7 @@ export default function useServerTable<T extends object>({
             desc: sort.type === 'desc',
           },
         ]
-      : []
+      : [],
   );
 
   const [pagination, setPagination] = React.useState<PaginationState>({

src/lib/axios-mock.ts

@@ -7,8 +7,8 @@ import { UninterceptedApiError } from '@/types/api';
 const baseURL = process.env.NEXT_PUBLIC_MOCK_DEPLOYMENT_URL
   ? `https://${process.env.NEXT_PUBLIC_MOCK_DEPLOYMENT_URL}/api/mock`
   : process.env.NEXT_PUBLIC_VERCEL_URL
-  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/mock`
-  : 'http://localhost:3000/api/mock';
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api/mock`
+    : 'http://localhost:3000/api/mock';
 
 export const apiMock = axios.create({
   baseURL,
@@ -48,7 +48,7 @@ apiMock.interceptors.response.use(
       });
     }
     return Promise.reject(error);
-  }
+  },
 );
 
 export default apiMock;

src/lib/axios.ts

@@ -40,7 +40,7 @@ api.interceptors.response.use(
       });
     }
     return Promise.reject(error);
-  }
+  },
 );
 
 export default api;

src/lib/logger.ts

@@ -14,6 +14,6 @@ export default function logger(object: unknown, comment?: string): void {
     'color: #22D3EE',
     `${typeof window !== 'undefined' && window?.location.pathname}\n`,
     `=== ${comment ?? ''}\n`,
-    object
+    object,
   );
 }

src/lib/pagination.ts

@@ -1,7 +1,7 @@
 export function buildPaginationControl(
   currentPage: number,
   pageCount: number,
-  delta = 1
+  delta = 1,
 ) {
   const rangeWithDots: (number | string)[] = [];
 

src/lib/table.ts

@@ -41,5 +41,5 @@ export const buildPaginatedTableURL: BuildPaginationTableURL = ({
       arrayFormat: 'comma',
       skipEmptyString: true,
       ...options,
-    }
+    },
   );

src/lib/toast.ts

@@ -27,5 +27,5 @@ export const generateToastQuery = ({
       arrayFormat: 'comma',
       skipEmptyString: true,
       ...options,
-    }
+    },
   );

src/pages/api/mock/login.api.ts

@@ -16,7 +16,7 @@ export default async function login(req: NextApiRequest, res: NextApiResponse) {
           : res.status(500).json({
               message: `Simulasi error (${+errorRate * 100}% error rate)`,
             }),
-      1000
+      1000,
     );
   } else {
     res.status(405).json({ message: 'Method Not Allowed' });

src/pages/api/mock/select-options.api.ts

@@ -2,7 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(
   req: NextApiRequest,
-  res: NextApiResponse
+  res: NextApiResponse,
 ) {
   if (req.method === 'GET') {
     await sleep(2000);

src/pages/api/mock/users.api.ts

@@ -29,7 +29,7 @@ export default function getUsers(req: NextApiRequest, res: NextApiResponse) {
 
     data = keyword
       ? users.filter(
-          (user) => user.name.toUpperCase().indexOf(keyword.toUpperCase()) > -1
+          (user) => user.name.toUpperCase().indexOf(keyword.toUpperCase()) > -1,
         )
       : users;
 
@@ -62,7 +62,7 @@ export default function getUsers(req: NextApiRequest, res: NextApiResponse) {
             total: data.length,
           },
         }),
-      1000
+      1000,
     );
   } else {
     res.status(405).json({ message: 'Method Not Allowed' });