Replace entire codebase with homarr-labs/homarr

packages/modals/eslint.config.js

@@ -0,0 +1,5 @@
+import baseConfig from "@homarr/eslint-config/base";
+import reactConfig from "@homarr/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [...baseConfig, ...reactConfig];

packages/modals/index.ts

@@ -0,0 +1,2 @@
+export { ModalProvider, useModalAction, useConfirmModal } from "./src";
+export { createModal } from "./src/creator";

packages/modals/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@homarr/modals",
+  "version": "0.1.0",
+  "private": true,
+  "license": "Apache-2.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@homarr/prettier-config",
+  "dependencies": {
+    "@homarr/translation": "workspace:^0.1.0",
+    "@homarr/ui": "workspace:^0.1.0",
+    "@mantine/core": "^8.3.10",
+    "@mantine/hooks": "^8.3.10",
+    "react": "19.2.3"
+  },
+  "devDependencies": {
+    "@homarr/eslint-config": "workspace:^0.2.0",
+    "@homarr/prettier-config": "workspace:^0.1.0",
+    "@homarr/tsconfig": "workspace:^0.1.0",
+    "eslint": "^9.39.2",
+    "typescript": "^5.9.3"
+  }
+}

packages/modals/src/confirm-modal.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useState } from "react";
+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 { translateIfNecessary } from "@homarr/translation";
+import { useI18n } from "@homarr/translation/client";
+
+import { createModal } from "./creator";
+
+type MaybePromise<T> = T | Promise<T>;
+
+export interface ConfirmModalProps {
+  title: string;
+  children: ReactNode;
+  onConfirm?: () => MaybePromise<void>;
+  onCancel?: () => MaybePromise<void>;
+  closeOnConfirm?: boolean;
+  closeOnCancel?: boolean;
+  cancelProps?: ButtonProps & ComponentPropsWithoutRef<"button">;
+  confirmProps?: ButtonProps & ComponentPropsWithoutRef<"button">;
+  groupProps?: GroupProps;
+
+  labels?: {
+    confirm?: stringOrTranslation;
+    cancel?: stringOrTranslation;
+  };
+}
+
+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 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>) => {
+      if (typeof cancelProps?.onClick === "function") {
+        cancelProps.onClick(event);
+      }
+
+      if (typeof onCancel === "function") {
+        await onCancel();
+      }
+
+      if (closeOnCancel) {
+        actions.closeModal();
+      }
+    },
+    [cancelProps, onCancel, closeOnCancel, actions],
+  );
+
+  const handleConfirm = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      setLoading(true);
+
+      if (typeof confirmProps?.onClick === "function") {
+        confirmProps.onClick(event);
+      }
+
+      if (typeof onConfirm === "function") {
+        await onConfirm();
+      }
+
+      if (closeOnConfirm) {
+        actions.closeModal();
+      }
+      setLoading(false);
+    },
+    [confirmProps, onConfirm, closeOnConfirm, actions],
+  );
+
+  return (
+    <>
+      {children && <Box mb="md">{children}</Box>}
+
+      <Group justify="flex-end" {...groupProps}>
+        <Button variant="default" {...cancelProps} onClick={handleCancel}>
+          {cancelProps?.children ?? translateIfNecessary(t, cancelLabel)}
+        </Button>
+
+        <Button data-autofocus {...confirmProps} onClick={handleConfirm} color="red.9" loading={loading}>
+          {confirmProps?.children ?? translateIfNecessary(t, confirmLabel)}
+        </Button>
+      </Group>
+    </>
+  );
+}).withOptions({});

packages/modals/src/creator.ts

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

packages/modals/src/index.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
+import { getDefaultZIndex, Modal } from "@mantine/core";
+import { randomId } from "@mantine/hooks";
+
+import type { stringOrTranslation } from "@homarr/translation";
+import { translateIfNecessary } from "@homarr/translation";
+import { useI18n } from "@homarr/translation/client";
+
+import type { ConfirmModalProps } from "./confirm-modal";
+import { ConfirmModal } from "./confirm-modal";
+import type { ModalsState, ModalStateWithReference } from "./reducer";
+import { modalReducer } from "./reducer";
+import type { inferInnerProps, ModalDefinition } from "./type";
+
+interface ModalContextProps {
+  openModalInner: <TModal extends ModalDefinition>(props: {
+    modal: TModal;
+    innerProps: inferInnerProps<TModal>;
+    options: OpenModalOptions;
+  }) => void;
+  closeModal: (id: string) => void;
+}
+
+export const ModalContext = createContext<ModalContextProps | null>(null);
+
+export const ModalProvider = ({ children }: PropsWithChildren) => {
+  const [state, dispatch] = useReducer(modalReducer, {
+    modals: [],
+    current: null,
+  });
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const closeModal = useCallback(
+    (id: string, canceled?: boolean) => {
+      dispatch({ type: "CLOSE", modalId: id, canceled });
+    },
+    [dispatch],
+  );
+
+  const openModalInner: ModalContextProps["openModalInner"] = useCallback(
+    ({ modal, innerProps, options }) => {
+      const id = randomId();
+      const { title, ...rest } = options;
+      dispatch({
+        type: "OPEN",
+        modal: {
+          id,
+          modal,
+          props: {
+            ...modal.options,
+            ...rest,
+            defaultTitle: title ?? modal.options.defaultTitle,
+            innerProps,
+          },
+        },
+      });
+      return id;
+    },
+    [dispatch],
+  );
+
+  const handleCloseModal = useCallback(() => state.current && closeModal(state.current.id), [closeModal, state]);
+
+  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} />
+      ))}
+
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+interface ActiveModalProps {
+  modal: ModalStateWithReference;
+  state: ModalsState;
+  handleCloseModal: () => void;
+}
+
+const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
+  const t = useI18n();
+
+  // The below code is used to animate the modal when it opens (using the transition)
+  // It is necessary as transition is not working when the modal is directly mounted and run
+  const [opened, setOpened] = useState(false);
+  useEffect(() => {
+    setTimeout(() => setOpened(true), 0);
+  }, []);
+
+  const { defaultTitle: _ignored, ...otherModalProps } = modal.reference.modalProps;
+
+  return (
+    <Modal
+      key={modal.id}
+      zIndex={getDefaultZIndex("modal") + 1}
+      style={{
+        userSelect: modal.id === state.current?.id ? undefined : "none",
+      }}
+      styles={{
+        title: {
+          fontSize: "1.25rem",
+          fontWeight: 500,
+        },
+        inner: {
+          display: modal.id === state.current?.id ? undefined : "none",
+        },
+      }}
+      trapFocus={modal.id === state.current?.id}
+      {...otherModalProps}
+      title={translateIfNecessary(t, modal.props.defaultTitle)}
+      opened={opened}
+      onClose={handleCloseModal}
+    >
+      {modal.reference.content}
+    </Modal>
+  );
+};
+
+interface OpenModalOptions {
+  keepMounted?: boolean;
+  title?: stringOrTranslation;
+}
+
+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) => {
+      // void actually is undefined
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      context.openModalInner({ modal, innerProps, options: options ?? {} });
+    },
+  };
+};
+
+export const useConfirmModal = () => {
+  const { openModal } = useModalAction(ConfirmModal);
+
+  return {
+    openConfirmModal: (props: ConfirmModalProps) => openModal(props, { title: props.title }),
+  };
+};

packages/modals/src/reducer.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useContext } from "react";
+
+import { ModalContext } from ".";
+import type { ModalDefinition, ModalState } from "./type";
+
+export type ModalStateWithReference = ModalState & {
+  /**
+   * Reference to modal component instance
+   * Used so the modal can be persisted between navigating in newer modals
+   */
+  reference: ReturnType<typeof getModal>;
+};
+
+export interface ModalsState {
+  modals: ModalStateWithReference[];
+
+  /**
+   * Modal that is currently open or was the last open one.
+   * Keeping the last one is necessary for providing a clean exit transition.
+   */
+  current: ModalStateWithReference | null;
+}
+
+interface OpenAction {
+  type: "OPEN";
+  modal: ModalState;
+}
+
+interface CloseAction {
+  type: "CLOSE";
+  modalId: string;
+  canceled?: boolean;
+}
+
+interface CloseAllAction {
+  type: "CLOSE_ALL";
+  canceled?: boolean;
+}
+
+export const modalReducer = (state: ModalsState, action: OpenAction | CloseAction | CloseAllAction): ModalsState => {
+  switch (action.type) {
+    case "OPEN": {
+      const newModal = {
+        ...action.modal,
+        reference: getModal(action.modal),
+      };
+      return {
+        current: newModal,
+        modals: [...state.modals, newModal],
+      };
+    }
+    case "CLOSE": {
+      const modal = state.modals.find((modal) => modal.id === action.modalId);
+      if (!modal) {
+        return state;
+      }
+
+      modal.props.onClose?.();
+
+      const remainingModals = state.modals.filter((modal) => modal.id !== action.modalId);
+
+      return {
+        current: remainingModals[remainingModals.length - 1] ?? state.current,
+        modals: remainingModals,
+      };
+    }
+    case "CLOSE_ALL": {
+      if (!state.modals.length) {
+        return state;
+      }
+
+      // Resolve modal stack from top to bottom
+      state.modals
+        .concat()
+        .reverse()
+        .forEach((modal) => {
+          modal.props.onClose?.();
+        });
+
+      return {
+        current: state.current,
+        modals: [],
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+const getModal = <TModal extends ModalDefinition>(modal: ModalState<TModal>) => {
+  const ModalContent = modal.modal.component;
+
+  const { innerProps, ...rest } = modal.props;
+  const FullModal = () => {
+    const context = useContext(ModalContext);
+
+    if (!context) {
+      throw new Error("Modal component used outside of modal context");
+    }
+
+    return (
+      <ModalContent
+        innerProps={innerProps}
+        actions={{
+          closeModal: () => context.closeModal(modal.id),
+        }}
+      />
+    );
+  };
+
+  return {
+    modalProps: rest,
+    content: <FullModal />,
+  };
+};

packages/modals/src/type.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import type { ModalProps } from "@mantine/core";
+
+import type { stringOrTranslation } from "@homarr/translation";
+
+export type ModalComponent<TInnerProps> = (props: {
+  actions: { closeModal: () => void };
+  innerProps: TInnerProps;
+}) => ReactNode;
+
+export type CreateModalOptions = Pick<
+  ModalOptions<unknown>,
+  | "size"
+  | "fullScreen"
+  | "centered"
+  | "keepMounted"
+  | "withCloseButton"
+  | "zIndex"
+  | "scrollAreaComponent"
+  | "yOffset"
+  | "transitionProps"
+  | "closeOnClickOutside"
+  | "closeOnEscape"
+> & {
+  defaultTitle: stringOrTranslation;
+};
+
+export interface ModalDefinition {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  component: ModalComponent<any>;
+  options: Partial<CreateModalOptions>;
+}
+
+type ModalOptions<TInnerProps> = Partial<Omit<ModalProps, "opened">> & {
+  innerProps: TInnerProps;
+  defaultTitle?: stringOrTranslation;
+};
+
+export interface ModalState<TModal extends ModalDefinition = ModalDefinition> {
+  id: string;
+  modal: TModal;
+  props: ModalOptions<inferInnerProps<TModal>>;
+}
+
+export type inferInnerProps<TModal extends ModalDefinition> =
+  TModal["component"] extends ModalComponent<infer P> ? P : never;

packages/modals/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@homarr/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "*.tsx", "src"],
+  "exclude": ["node_modules"]
+}