chore: update prettier configuration for print width (#519)

* feat: update prettier configuration for print width

* chore: apply code formatting to entire repository

* fix: remove build files

* fix: format issue

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/modals/src/confirm-modal.tsx

@@ -3,10 +3,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import type { ButtonProps, GroupProps } from "@mantine/core";
 import { Box, Button, Group } from "@mantine/core";
 
-import type {
-  stringOrTranslation,
-  TranslationFunction,
-} from "@homarr/translation";
+import type { stringOrTranslation, TranslationFunction } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
@@ -31,70 +28,50 @@ export interface ConfirmModalProps {
   };
 }
 
-export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(
-  ({ actions, innerProps }) => {
-    const [loading, setLoading] = useState(false);
-    const t = useI18n();
-    const {
-      children,
-      onConfirm,
-      onCancel,
-      cancelProps,
-      confirmProps,
-      groupProps,
-      labels,
-    } = innerProps;
+export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ actions, innerProps }) => {
+  const [loading, setLoading] = useState(false);
+  const t = useI18n();
+  const { children, onConfirm, onCancel, cancelProps, confirmProps, groupProps, labels } = innerProps;
 
-    const closeOnConfirm = innerProps.closeOnConfirm ?? true;
-    const closeOnCancel = innerProps.closeOnCancel ?? true;
+  const closeOnConfirm = innerProps.closeOnConfirm ?? true;
+  const closeOnCancel = innerProps.closeOnCancel ?? true;
 
-    const cancelLabel =
-      labels?.cancel ?? ((t: TranslationFunction) => t("common.action.cancel"));
-    const confirmLabel =
-      labels?.confirm ??
-      ((t: TranslationFunction) => t("common.action.confirm"));
+  const cancelLabel = labels?.cancel ?? ((t: TranslationFunction) => t("common.action.cancel"));
+  const confirmLabel = labels?.confirm ?? ((t: TranslationFunction) => t("common.action.confirm"));
 
-    const handleCancel = useCallback(
-      async (event: React.MouseEvent<HTMLButtonElement>) => {
-        typeof cancelProps?.onClick === "function" &&
-          cancelProps?.onClick(event);
-        typeof onCancel === "function" && (await onCancel());
-        closeOnCancel && actions.closeModal();
-      },
-      [cancelProps?.onClick, onCancel, actions.closeModal],
-    );
+  const handleCancel = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      typeof cancelProps?.onClick === "function" && cancelProps?.onClick(event);
+      typeof onCancel === "function" && (await onCancel());
+      closeOnCancel && actions.closeModal();
+    },
+    [cancelProps?.onClick, onCancel, actions.closeModal],
+  );
 
-    const handleConfirm = useCallback(
-      async (event: React.MouseEvent<HTMLButtonElement>) => {
-        setLoading(true);
-        typeof confirmProps?.onClick === "function" &&
-          confirmProps?.onClick(event);
-        typeof onConfirm === "function" && (await onConfirm());
-        closeOnConfirm && actions.closeModal();
-        setLoading(false);
-      },
-      [confirmProps?.onClick, onConfirm, actions.closeModal],
-    );
+  const handleConfirm = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      setLoading(true);
+      typeof confirmProps?.onClick === "function" && confirmProps?.onClick(event);
+      typeof onConfirm === "function" && (await onConfirm());
+      closeOnConfirm && actions.closeModal();
+      setLoading(false);
+    },
+    [confirmProps?.onClick, onConfirm, actions.closeModal],
+  );
 
-    return (
-      <>
-        {children && <Box mb="md">{children}</Box>}
+  return (
+    <>
+      {children && <Box mb="md">{children}</Box>}
 
-        <Group justify="flex-end" {...groupProps}>
-          <Button variant="default" {...cancelProps} onClick={handleCancel}>
-            {cancelProps?.children || translateIfNecessary(t, cancelLabel)}
-          </Button>
+      <Group justify="flex-end" {...groupProps}>
+        <Button variant="default" {...cancelProps} onClick={handleCancel}>
+          {cancelProps?.children || translateIfNecessary(t, cancelLabel)}
+        </Button>
 
-          <Button
-            {...confirmProps}
-            onClick={handleConfirm}
-            color="red.9"
-            loading={loading}
-          >
-            {confirmProps?.children || translateIfNecessary(t, confirmLabel)}
-          </Button>
-        </Group>
-      </>
-    );
-  },
-).withOptions({});
+        <Button {...confirmProps} onClick={handleConfirm} color="red.9" loading={loading}>
+          {confirmProps?.children || translateIfNecessary(t, confirmLabel)}
+        </Button>
+      </Group>
+    </>
+  );
+}).withOptions({});

packages/modals/src/creator.ts

@@ -1,8 +1,6 @@
 import type { CreateModalOptions, ModalComponent } from "./type";
 
-export const createModal = <TInnerProps>(
-  component: ModalComponent<TInnerProps>,
-) => {
+export const createModal = <TInnerProps>(component: ModalComponent<TInnerProps>) => {
   return {
     withOptions: (options: Partial<CreateModalOptions>) => {
       return {

packages/modals/src/index.tsx

@@ -1,15 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
 import { getDefaultZIndex, Modal } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
 
@@ -76,19 +68,12 @@ export const ModalProvider = ({ children }: PropsWithChildren) => {
     [closeModal, state.current?.id],
   );
 
-  const activeModals = state.modals.filter(
-    (modal) => modal.id === state.current?.id || modal.props.keepMounted,
-  );
+  const activeModals = state.modals.filter((modal) => modal.id === state.current?.id || modal.props.keepMounted);
 
   return (
     <ModalContext.Provider value={{ openModalInner, closeModal }}>
       {activeModals.map((modal) => (
-        <ActiveModal
-          key={modal.id}
-          modal={modal}
-          state={state}
-          handleCloseModal={handleCloseModal}
-        />
+        <ActiveModal key={modal.id} modal={modal} state={state} handleCloseModal={handleCloseModal} />
       ))}
 
       {children}
@@ -112,8 +97,7 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
     setTimeout(() => setOpened(true), 0);
   }, []);
 
-  const { defaultTitle: _ignored, ...otherModalProps } =
-    modal.reference.modalProps;
+  const { defaultTitle: _ignored, ...otherModalProps } = modal.reference.modalProps;
 
   return (
     <Modal
@@ -145,18 +129,13 @@ interface OpenModalOptions {
   title?: stringOrTranslation;
 }
 
-export const useModalAction = <TModal extends ModalDefinition>(
-  modal: TModal,
-) => {
+export const useModalAction = <TModal extends ModalDefinition>(modal: TModal) => {
   const context = useContext(ModalContext);
 
   if (!context) throw new Error("ModalContext is not provided");
 
   return {
-    openModal: (
-      innerProps: inferInnerProps<TModal>,
-      options: OpenModalOptions | void,
-    ) => {
+    openModal: (innerProps: inferInnerProps<TModal>, options: OpenModalOptions | void) => {
       context.openModalInner({ modal, innerProps, options: options ?? {} });
     },
   };
@@ -166,7 +145,6 @@ export const useConfirmModal = () => {
   const { openModal } = useModalAction(ConfirmModal);
 
   return {
-    openConfirmModal: (props: ConfirmModalProps) =>
-      openModal(props, { title: props.title }),
+    openConfirmModal: (props: ConfirmModalProps) => openModal(props, { title: props.title }),
   };
 };

packages/modals/src/reducer.tsx

@@ -39,10 +39,7 @@ interface CloseAllAction {
   canceled?: boolean;
 }
 
-export const modalReducer = (
-  state: ModalsState,
-  action: OpenAction | CloseAction | CloseAllAction,
-): ModalsState => {
+export const modalReducer = (state: ModalsState, action: OpenAction | CloseAction | CloseAllAction): ModalsState => {
   switch (action.type) {
     case "OPEN": {
       const newModal = {
@@ -62,9 +59,7 @@ export const modalReducer = (
 
       modal.props.onClose?.();
 
-      const remainingModals = state.modals.filter(
-        (modal) => modal.id !== action.modalId,
-      );
+      const remainingModals = state.modals.filter((modal) => modal.id !== action.modalId);
 
       return {
         current: remainingModals[remainingModals.length - 1] || state.current,
@@ -95,9 +90,7 @@ export const modalReducer = (
   }
 };
 
-const getModal = <TModal extends ModalDefinition>(
-  modal: ModalState<TModal>,
-) => {
+const getModal = <TModal extends ModalDefinition>(modal: ModalState<TModal>) => {
   const ModalContent = modal.modal.component;
 
   const { innerProps, ...rest } = modal.props;