From 641310494ee0377e06aa26df9ac985f321b00d2f Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Mon, 15 Apr 2024 21:15:14 +0200
Subject: [PATCH] add new type

---
 src/frontend/src/components/nav/DetailDrawer.tsx | 13 +++----------
 src/frontend/src/defaults/formatters.tsx         |  3 +++
 src/frontend/src/hooks/UseForm.tsx               |  3 ++-
 src/frontend/src/hooks/UseModal.tsx              |  5 +++--
 src/frontend/src/states/LocalState.tsx           |  4 ++--
 5 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/components/nav/DetailDrawer.tsx b/src/frontend/src/components/nav/DetailDrawer.tsx
index 57f001899b..add9aea45d 100644
--- a/src/frontend/src/components/nav/DetailDrawer.tsx
+++ b/src/frontend/src/components/nav/DetailDrawer.tsx
@@ -1,17 +1,10 @@
-import {
-  ActionIcon,
-  Divider,
-  Drawer,
-  Group,
-  MantineSize,
-  Stack,
-  Text
-} from '@mantine/core';
+import { ActionIcon, Divider, Drawer, Group, 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;
 }
 
diff --git a/src/frontend/src/defaults/formatters.tsx b/src/frontend/src/defaults/formatters.tsx
index 563a67fdaf..395f950d45 100644
--- a/src/frontend/src/defaults/formatters.tsx
+++ b/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;
diff --git a/src/frontend/src/hooks/UseForm.tsx b/src/frontend/src/hooks/UseForm.tsx
index 492226e81f..b1ec9fc231 100644
--- a/src/frontend/src/hooks/UseForm.tsx
+++ b/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;
 }
 
 /**
diff --git a/src/frontend/src/hooks/UseModal.tsx b/src/frontend/src/hooks/UseModal.tsx
index 5c99fe4088..cb122df6b4 100644
--- a/src/frontend/src/hooks/UseModal.tsx
+++ b/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;
diff --git a/src/frontend/src/states/LocalState.tsx b/src/frontend/src/states/LocalState.tsx
index 9eb51c8350..39d75fc0f3 100644
--- a/src/frontend/src/states/LocalState.tsx
+++ b/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>;