add new type

src/frontend/src/components/nav/DetailDrawer.tsx

@@ -1,17 +1,10 @@
-import {
+import { ActionIcon, Divider, Drawer, Group, Stack, Text } from '@mantine/core';
-  ActionIcon,
-  Divider,
-  Drawer,
-  Group,
-  MantineSize,
-  Stack,
-  Text
-} from '@mantine/core';
 import { IconChevronLeft } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
 import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import type { To } from 'react-router-dom';
 
+import { UiSizeType } from '../../defaults/formatters';
 import { useLocalState } from '../../states/LocalState';
 import * as classes from './DetailDrawer.css';
 
@@ -26,7 +19,7 @@ export interface DrawerProps {
   position?: 'right' | 'left';
   renderContent: (id?: string) => React.ReactNode;
   urlPrefix?: string;
-  size?: MantineSize | (string & {}) | number;
+  size?: UiSizeType;
   closeOnEscape?: boolean;
 }
 

src/frontend/src/defaults/formatters.tsx

@@ -1,3 +1,4 @@
+import { MantineSize } from '@mantine/core';
 import dayjs from 'dayjs';
 
 import {
@@ -151,3 +152,5 @@ export function renderDate(date: string, options: renderDateOptionsType = {}) {
     return date;
   }
 }
+
+export type UiSizeType = MantineSize | (string & {}) | number;

src/frontend/src/hooks/UseForm.tsx

@@ -4,6 +4,7 @@ import { useId } from '@mantine/hooks';
 import { useEffect, useMemo, useRef } from 'react';
 
 import { ApiFormProps, OptionsApiForm } from '../components/forms/ApiForm';
+import { UiSizeType } from '../defaults/formatters';
 import { useModal } from './UseModal';
 
 /**
@@ -20,7 +21,7 @@ export interface ApiFormModalProps extends ApiFormProps {
   onClose?: () => void;
   onOpen?: () => void;
   closeOnClickOutside?: boolean;
-  size?: MantineSize | (string & {}) | number;
+  size?: UiSizeType;
 }
 
 /**

src/frontend/src/hooks/UseModal.tsx

@@ -1,13 +1,14 @@
-import { MantineSize, Modal } from '@mantine/core';
+import { Modal } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import React, { useCallback } from 'react';
 
 import { StylishText } from '../components/items/StylishText';
+import { UiSizeType } from '../defaults/formatters';
 
 export interface UseModalProps {
   title: string;
   children: React.ReactElement;
-  size?: MantineSize | (string & {}) | number;
+  size?: UiSizeType;
   onOpen?: () => void;
   onClose?: () => void;
   closeOnClickOutside?: boolean;

src/frontend/src/states/LocalState.tsx

@@ -1,7 +1,7 @@
-import { MantineSize } from '@mantine/core';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
+import { UiSizeType } from '../defaults/formatters';
 import { HostList } from './states';
 
 interface LocalStateProps {
@@ -18,7 +18,7 @@ interface LocalStateProps {
   primaryColor: string;
   whiteColor: string;
   blackColor: string;
-  radius: MantineSize | (string & {}) | number;
+  radius: UiSizeType;
   loader: string;
   setLoader: (value: string) => void;
   lastUsedPanels: Record<string, string>;