add wrapper for mantine useForm

.vscode/settings.json

@@ -50,6 +50,7 @@
         "@mantine/modals",
         "@mantine/dates",
         "@mantine/hooks",
+        "@mantine/form",
         "@radix-ui/react-context-menu"
     ],
     "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

src/renderer/features/login/routes/login-route.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
 import { useState } from 'react';
@@ -22,6 +21,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
 import { AuthenticationResponse, ServerListItemWithCredential } from '/@/shared/types/domain-types';
 import { ServerType, toServerType } from '/@/shared/types/types';
 

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { openModal } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import orderBy from 'lodash/orderBy';
@@ -17,6 +16,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
+import { useForm } from '/@/shared/hooks/use-form';
 import {
     InternetProviderLyricSearchResponse,
     LyricSource,

src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -31,6 +30,7 @@ import { Table } from '/@/shared/components/table/table';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
 import {
     Playlist,
     PlaylistListSort,

src/renderer/features/playlists/components/create-playlist-form.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -18,6 +17,7 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { Textarea } from '/@/shared/components/textarea/textarea';
 import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
 import { CreatePlaylistBody, ServerType, SongListSort } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';
 
@@ -168,7 +168,6 @@ export const CreatePlaylistForm = ({ onCancel }: CreatePlaylistFormProps) => {
                     <Stack pt="1rem">
                         <Text>Query Editor</Text>
                         <PlaylistQueryBuilder
-                            isSaving={mutation.isPending}
                             limit={undefined}
                             query={undefined}
                             ref={queryBuilderRef}

src/renderer/features/playlists/components/playlist-query-builder.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { useQuery } from '@tanstack/react-query';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
@@ -34,6 +33,7 @@ import { NumberInput } from '/@/shared/components/number-input/number-input';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Select } from '/@/shared/components/select/select';
 import { Stack } from '/@/shared/components/stack/stack';
+import { useForm } from '/@/shared/hooks/use-form';
 import { PlaylistListSort, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { QueryBuilderGroup, QueryBuilderRule } from '/@/shared/types/types';
 

src/renderer/features/playlists/components/save-as-playlist-form.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { useTranslation } from 'react-i18next';
 
 import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
@@ -10,6 +9,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
 import {
     CreatePlaylistBody,
     CreatePlaylistResponse,

src/renderer/features/playlists/components/update-playlist-form.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { useTranslation } from 'react-i18next';
 
@@ -16,6 +15,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { TextInput } from '/@/shared/components/text-input/text-input';
 import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
 import {
     PlaylistDetailResponse,
     ServerListItem,

src/renderer/features/servers/components/add-server-form.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
@@ -21,6 +20,7 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 import { Text } from '/@/shared/components/text/text';
 import { toast } from '/@/shared/components/toast/toast';
 import { useFocusTrap } from '/@/shared/hooks/use-focus-trap';
+import { useForm } from '/@/shared/hooks/use-form';
 import { AuthenticationResponse, ServerListItemWithCredential } from '/@/shared/types/domain-types';
 import { DiscoveredServerItem, ServerType, toServerType } from '/@/shared/types/types';
 

src/renderer/features/servers/components/edit-server-form.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { closeAllModals } from '@mantine/modals';
 import isElectron from 'is-electron';
 import { useState } from 'react';
@@ -18,6 +17,7 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
 import { toast } from '/@/shared/components/toast/toast';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { useFocusTrap } from '/@/shared/hooks/use-focus-trap';
+import { useForm } from '/@/shared/hooks/use-form';
 import {
     AuthenticationResponse,
     ServerListItem,

src/renderer/features/sharing/components/share-item-context-modal.tsx

@@ -1,4 +1,3 @@
-import { useForm } from '@mantine/form';
 import { closeModal, ContextModalProps } from '@mantine/modals';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +11,7 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Switch } from '/@/shared/components/switch/switch';
 import { Textarea } from '/@/shared/components/textarea/textarea';
 import { toast } from '/@/shared/components/toast/toast';
+import { useForm } from '/@/shared/hooks/use-form';
 
 export const ShareItemContextModal = ({
     id,

src/shared/hooks/use-form.ts

@@ -0,0 +1,3 @@
+import { useForm as useMantineForm } from '@mantine/form';
+
+export const useForm = useMantineForm;