chore: add custom MonthPicker

Author: openscript

apps/frontend/package.json

@@ -23,7 +23,6 @@
     "@quassel/ui": "workspace:*",
     "@tanstack/react-query": "^5.62.0",
     "@tanstack/react-router": "^1.85.0",
-    "dayjs": "^1.11.13",
     "nanostores": "^0.11.3",
     "openapi-fetch": "^0.13.1",
     "openapi-react-query": "^0.2.6",

apps/frontend/src/components/questionnaire/PeriodForm.tsx

@@ -2,7 +2,6 @@ import { useForm } from "@mantine/form";
 import { Button, Flex, MonthPicker, Stack, TextInput } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
-import dayjs from "dayjs";
 import { useEffect } from "react";
 
 export type PeriodFormValues = {
@@ -16,7 +15,7 @@ type PeriodFormProps = {
   actionLabel: string;
 };
 
-export const messages = i18n("periodForm", {
+const messages = i18n("periodForm", {
   labelTitle: "Title",
 });
 
@@ -25,11 +24,7 @@ export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
 
   const f = useForm<PeriodFormValues>({
     initialValues: period,
-    transformValues(values) {
-      values.range[1] = dayjs(values.range[1]).utc().endOf("month").toDate();
-
-      return values;
-    },
+    mode: "uncontrolled",
   });
 
   useEffect(() => {
@@ -43,7 +38,7 @@ export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
     <form onSubmit={f.onSubmit((values) => onSave(values))}>
       <Stack>
         <Flex justify="center">
-          <MonthPicker {...f.getInputProps("range")} size="md" type="range" numberOfColumns={2} />
+          <MonthPicker {...f.getInputProps("range")} size="md" type="range" numberOfColumns={2} selectEndOfMonth />
         </Flex>
         <TextInput {...f.getInputProps("title")} label={t.labelTitle} />
         <Button type="submit">{actionLabel}</Button>

apps/frontend/src/main.tsx

@@ -5,8 +5,6 @@ import { ThemeProvider } from "@quassel/ui";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { routeTree } from "./routeTree.gen.ts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
 
 const queryClient = new QueryClient();
 const router = createRouter({ routeTree, context: { queryClient }, defaultPreload: "intent", defaultPreloadStaleTime: 0 });
@@ -17,8 +15,6 @@ declare module "@tanstack/react-router" {
   }
 }
 
-dayjs.extend(utc);
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx

@@ -5,7 +5,7 @@ import { PeriodForm, PeriodFormValues } from "../../../../components/questionnai
 import { $api } from "../../../../stores/api";
 import { $questionnaire } from "../../../../stores/questionnaire";
 
-export const messages = i18n("questionnaireNew", {
+const messages = i18n("questionnaireNew", {
   title: "Create new period of life",
   formAction: "Create",
 });

libs/ui/package.json

@@ -30,6 +30,7 @@
     "@mantine/dates": "^7.14.3",
     "@mantine/hooks": "^7.14.3",
     "@tabler/icons-react": "3.17.0",
+    "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

libs/ui/src/components/MonthPicker.tsx

@@ -1,7 +1,29 @@
-import { MonthPicker as MantineMonthPicker, MonthPickerProps as MantineMonthPickerProps } from "@mantine/dates";
+import {
+  DatePickerType,
+  DatesRangeValue,
+  DateValue,
+  MonthPicker as MantineMonthPicker,
+  MonthPickerProps as MantineMonthPickerProps,
+} from "@mantine/dates";
+import dayjs from "dayjs";
 
-type MonthPickerProps = MantineMonthPickerProps;
+interface MonthPickerProps<Type extends DatePickerType = "default"> extends MantineMonthPickerProps<Type> {
+  selectEndOfMonth?: boolean;
+}
+
+function isRangeValue(date: DateValue | DatesRangeValue | Date[]): date is DatesRangeValue {
+  return Array.isArray(date) && date.length === 2;
+}
+
+export function MonthPicker<Type extends DatePickerType = "default">({ selectEndOfMonth, ...rest }: MonthPickerProps<Type>) {
+  const onChange: MonthPickerProps<Type>["onChange"] = (date) => {
+    if (rest.type === "range" && isRangeValue(date) && selectEndOfMonth) {
+      const [start, end] = date;
+      const newDate = [start, dayjs(end).utc().endOf("month").toDate()];
+      date = newDate as typeof date;
+    }
+    rest.onChange!(date);
+  };
 
-export function MonthPicker(props: MonthPickerProps) {
-  return <MantineMonthPicker {...props} />;
+  return <MantineMonthPicker {...rest} onChange={rest.onChange ? onChange : undefined} />;
 }

libs/ui/src/index.ts

@@ -33,6 +33,7 @@ export { ThemeProvider } from "./theme/ThemeProvider";
 
 // custom components
 export { Brand } from "./components/Brand";
+export { MonthPicker } from "./components/MonthPicker";
 
 // external components
 export {
@@ -57,8 +58,6 @@ export {
   useMantineTheme,
 } from "@mantine/core";
 
-export { MonthPicker } from "@mantine/dates";
-
 export {
   IconLogout,
   IconUsers,

libs/ui/src/theme/ThemeProvider.tsx

@@ -1,7 +1,10 @@
 import { MantineProvider, MantineThemeOverride, MantineProviderProps } from "@mantine/core";
 import "./Theme.css";
 import { DatesProvider } from "@mantine/dates";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 
+dayjs.extend(utc);
 type ThemeProviderProps = MantineProviderProps;
 
 export const theme: MantineThemeOverride = {

libs/ui/vite.config.ts

@@ -17,6 +17,8 @@ export default defineConfig({
       external: ["react", "react-dom"],
       output: {
         globals: {
+          dayjs: "dayjs",
+          "dayjs/plugin/utc": "dayjsPluginUtc",
           react: "React",
           "react/jsx-runtime": "jsxRuntime",
           "@mantine/core": "mantineCore",