chore: refactor mantine/form usage

openscript · openscript · commit b6ac812a92b1 · 2024-12-15T16:46:03.000Z
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -20,21 +20,20 @@
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
-    "@mantine/form": "^7.15.1",
     "@nanostores/i18n": "^0.12.2",
     "@nanostores/persistent": "^0.10.2",
     "@nanostores/react": "^0.8.2",
     "@quassel/ui": "workspace:*",
     "@tanstack/react-query": "^5.62.7",
-    "@tanstack/react-router": "^1.88.0",
+    "@tanstack/react-router": "^1.90.0",
     "nanostores": "^0.11.3",
     "openapi-fetch": "0.13.3",
     "openapi-react-query": "0.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@tanstack/router-devtools": "^1.88.0",
+    "@tanstack/router-devtools": "^1.90.0",
     "@tanstack/router-plugin": "^1.87.13",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
diff --git a/apps/frontend/src/components/questionnaire/PeriodForm.tsx b/apps/frontend/src/components/questionnaire/PeriodForm.tsx
@@ -1,5 +1,4 @@
-import { useForm } from "@mantine/form";
-import { Button, Flex, formatDate, getNext, InputError, MonthPicker, Stack, TextInput } from "@quassel/ui";
+import { Button, Flex, formatDate, getNext, InputError, MonthPicker, Stack, TextInput, useForm } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
diff --git a/apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx b/apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx
@@ -1,5 +1,4 @@
-import { isInRange, isNotEmpty, useForm } from "@mantine/form";
-import { Button, Group, Stack, TimeInput, NumberInput, ActionIcon, IconMinus } from "@quassel/ui";
+import { Button, Group, Stack, TimeInput, NumberInput, ActionIcon, IconMinus, isInRange, isNotEmpty, useForm } from "@quassel/ui";
 import { i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
diff --git a/apps/frontend/src/routes/_auth/administration/carers/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/carers/edit.$id.tsx
@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
-import { useForm } from "@mantine/form";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
 
 type FormValues = components["schemas"]["CarerMutationDto"];
diff --git a/apps/frontend/src/routes/_auth/administration/carers/new.tsx b/apps/frontend/src/routes/_auth/administration/carers/new.tsx
@@ -1,6 +1,5 @@
-import { useForm } from "@mantine/form";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { $api } from "../../../../stores/api";
 import { components } from "../../../../api.gen";
 
diff --git a/apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/languages/edit.$id.tsx
@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
-import { useForm } from "@mantine/form";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
 
 type FormValues = components["schemas"]["LanguageMutationDto"];
diff --git a/apps/frontend/src/routes/_auth/administration/languages/new.tsx b/apps/frontend/src/routes/_auth/administration/languages/new.tsx
@@ -1,6 +1,5 @@
-import { useForm } from "@mantine/form";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { $api } from "../../../../stores/api";
 import { components } from "../../../../api.gen";
 
diff --git a/apps/frontend/src/routes/_auth/administration/participants/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/participants/edit.$id.tsx
@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
-import { useForm } from "@mantine/form";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
 
 type FormValues = components["schemas"]["ParticipantMutationDto"];
diff --git a/apps/frontend/src/routes/_auth/administration/participants/new.tsx b/apps/frontend/src/routes/_auth/administration/participants/new.tsx
@@ -1,6 +1,5 @@
-import { useForm } from "@mantine/form";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { $api } from "../../../../stores/api";
 import { components } from "../../../../api.gen";
 
diff --git a/apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx
@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
-import { useForm } from "@mantine/form";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
 
 type FormValues = components["schemas"]["QuestionnaireMutationDto"];
diff --git a/apps/frontend/src/routes/_auth/administration/studies/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/studies/edit.$id.tsx
@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
-import { useForm } from "@mantine/form";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
 
 type FormValues = components["schemas"]["StudyMutationDto"];
diff --git a/apps/frontend/src/routes/_auth/administration/studies/new.tsx b/apps/frontend/src/routes/_auth/administration/studies/new.tsx
@@ -1,6 +1,5 @@
-import { useForm } from "@mantine/form";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { Button, TextInput } from "@quassel/ui";
+import { Button, TextInput, useForm } from "@quassel/ui";
 import { $api } from "../../../../stores/api";
 import { components } from "../../../../api.gen";
 
diff --git a/apps/frontend/src/routes/_auth/administration/users/edit.$id.tsx b/apps/frontend/src/routes/_auth/administration/users/edit.$id.tsx
@@ -1,9 +1,8 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components, userMutationDtoRoleValues } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
-import { useForm } from "@mantine/form";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, PasswordInput, Select, TextInput } from "@quassel/ui";
+import { Button, PasswordInput, Select, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
 
 type FormValues = components["schemas"]["UserMutationDto"];
diff --git a/apps/frontend/src/routes/_auth/administration/users/new.tsx b/apps/frontend/src/routes/_auth/administration/users/new.tsx
@@ -1,7 +1,6 @@
-import { useForm } from "@mantine/form";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { components, userCreationDtoRoleValues } from "../../../../api.gen";
-import { Button, PasswordInput, Select, TextInput } from "@quassel/ui";
+import { Button, PasswordInput, Select, TextInput, useForm } from "@quassel/ui";
 import { $api } from "../../../../stores/api";
 
 type FormValues = components["schemas"]["UserCreationDto"];
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/remarks.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/remarks.tsx
@@ -1,8 +1,7 @@
-import { Button, Group, Stack, Textarea } from "@quassel/ui";
+import { Button, Group, Stack, Textarea, useForm } from "@quassel/ui";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
-import { useForm } from "@mantine/form";
 import { $api } from "../../../../../stores/api";
 import { useEffect } from "react";
 
diff --git a/apps/frontend/src/routes/_auth/questionnaire/index.tsx b/apps/frontend/src/routes/_auth/questionnaire/index.tsx
@@ -1,8 +1,7 @@
-import { Button, Stack, TextInput } from "@quassel/ui";
+import { Button, Stack, TextInput, useForm } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../stores/i18n";
 import { useStore } from "@nanostores/react";
-import { useForm } from "@mantine/form";
 import { $api } from "../../../stores/api";
 import { $questionnaire } from "../../../stores/questionnaire";
 
diff --git a/apps/frontend/src/routes/session.tsx b/apps/frontend/src/routes/session.tsx
@@ -1,8 +1,7 @@
-import { Button, Container, Paper, PasswordInput, TextInput, Title } from "@quassel/ui";
+import { Button, Container, Paper, PasswordInput, TextInput, Title, useForm } from "@quassel/ui";
 import { createFileRoute, redirect, useLocation, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../stores/i18n";
 import { useStore } from "@nanostores/react";
-import { useForm } from "@mantine/form";
 import { $session } from "../stores/session";
 import { $api } from "../stores/api";
 
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
@@ -7,6 +7,9 @@ export default defineConfig({
   server: {
     port: 3001,
   },
+  build: {
+    chunkSizeWarningLimit: 1000,
+  },
   clearScreen: false,
   plugins: [react(), TanStackRouterVite({ quoteStyle: "double", semicolons: true })],
 });
diff --git a/libs/ui/package.json b/libs/ui/package.json
@@ -26,16 +26,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@mantine/core": "^7.15.1",
-    "@mantine/dates": "^7.15.1",
-    "@mantine/hooks": "^7.15.1",
-    "@tabler/icons-react": "3.24.0",
+    "@mantine/core": "7.14.3",
+    "@mantine/dates": "7.14.3",
+    "@mantine/form": "7.14.3",
+    "@mantine/hooks": "7.14.3",
+    "@tabler/icons-react": "3.25.0",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -1,4 +1,4 @@
-// Theme
+// quassel theme
 import "@mantine/core/styles/global.css";
 import "@mantine/core/styles/ScrollArea.css";
 import "@mantine/core/styles/UnstyledButton.css";
@@ -32,6 +32,9 @@ import "@mantine/dates/styles.css";
 
 export { ThemeProvider } from "./theme/ThemeProvider";
 
+// custom ui helpers
+export { formatDate, getTime, getDateFromTimeAndWeekday, getNext } from "./utils/date";
+
 // custom components
 export { Brand } from "./components/Brand";
 export { MonthPicker } from "./components/MonthPicker";
@@ -69,6 +72,8 @@ export { TimeInput } from "@mantine/dates";
 
 export { useDisclosure } from "@mantine/hooks";
 
+export { useForm, isInRange, isNotEmpty } from "@mantine/form";
+
 export {
   IconLogout,
   IconUsers,
@@ -81,5 +86,3 @@ export {
   IconMapSearch,
   IconMinus,
 } from "@tabler/icons-react";
-
-export { formatDate, getTime, getDateFromTimeAndWeekday, getNext } from "./utils/date";
diff --git a/package.json b/package.json
@@ -19,11 +19,11 @@
   "license": "MIT",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@nestjs/cli": "^10.4.9",
     "@nx-tools/container-metadata": "^6.1.1",
     "@nx-tools/nx-container": "^6.2.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
