refine-mantine 1.0.0-dev.1

package/src/hooks/useForm.ts

@@ -0,0 +1,271 @@
+import { get, has, set } from "@/utils/paths";
+import type { UseFormInput } from "@mantine/form";
+import {
+  type UseFormReturnType as UseMantineFormReturnType,
+  useForm as useMantineForm,
+} from "@mantine/form";
+import { useDebouncedCallback } from "@mantine/hooks";
+import {
+  type BaseRecord,
+  type HttpError,
+  type UseFormProps as UseFormCoreProps,
+  type UseFormReturnType as UseFormReturnTypeCore,
+  flattenObjectKeys,
+  useForm as useFormCore,
+  useRefineContext,
+  useTranslate,
+  useWarnAboutChange,
+} from "@refinedev/core";
+import type React from "react";
+import { useEffect } from "react";
+
+type FormVariableType<TVariables, TTransformed> = ReturnType<
+  NonNullable<
+    UseFormInput<
+      TVariables,
+      (values: TVariables) => TTransformed
+    >["transformValues"]
+  >
+>;
+
+export type UseFormReturnType<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables = Record<string, unknown>,
+  TTransformed = TVariables,
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
+> = UseMantineFormReturnType<
+  TVariables,
+  (values: TVariables) => TTransformed
+> & {
+  refineCore: UseFormReturnTypeCore<
+    TQueryFnData,
+    TError,
+    FormVariableType<TVariables, TTransformed>,
+    TData,
+    TResponse,
+    TResponseError
+  >;
+  saveButtonProps: {
+    disabled: boolean;
+    onClick: (e: React.PointerEvent<HTMLButtonElement>) => void;
+  };
+};
+
+export type UseFormProps<
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  TVariables = Record<string, unknown>,
+  TTransformed = TVariables,
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
+> = {
+  refineCoreProps?: UseFormCoreProps<
+    TQueryFnData,
+    TError,
+    FormVariableType<TVariables, TTransformed>,
+    TData,
+    TResponse,
+    TResponseError
+  > & {
+    warnWhenUnsavedChanges?: boolean;
+  };
+} & UseFormInput<TVariables, (values: TVariables) => TTransformed> & {
+    /**
+     * Disables server-side validation
+     * @default false
+     * @see {@link https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/}
+     */
+    disableServerSideValidation?: boolean;
+  };
+
+export const useForm = <
+  TQueryFnData extends BaseRecord = BaseRecord,
+  TError extends HttpError = HttpError,
+  // biome-ignore lint/suspicious/noExplicitAny: that's fine
+  TVariables extends Record<string, any> = Record<string, any>,
+  TTransformed = TVariables,
+  TData extends BaseRecord = TQueryFnData,
+  TResponse extends BaseRecord = TData,
+  TResponseError extends HttpError = TError,
+>({
+  refineCoreProps,
+  disableServerSideValidation: disableServerSideValidationProp = false,
+  ...rest
+}: UseFormProps<
+  TQueryFnData,
+  TError,
+  TVariables,
+  TTransformed,
+  TData,
+  TResponse,
+  TResponseError
+> = {}): UseFormReturnType<
+  TQueryFnData,
+  TError,
+  TVariables,
+  TTransformed,
+  TData,
+  TResponse,
+  TResponseError
+> => {
+  const { options } = useRefineContext();
+  const disableServerSideValidation =
+    options?.disableServerSideValidation || disableServerSideValidationProp;
+
+  const translate = useTranslate();
+
+  const warnWhenUnsavedChangesProp = refineCoreProps?.warnWhenUnsavedChanges;
+
+  const { warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine, setWarnWhen } =
+    useWarnAboutChange();
+  const warnWhenUnsavedChanges =
+    warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
+
+  const useMantineFormResult = useMantineForm<
+    TVariables,
+    (values: TVariables) => TTransformed
+  >({
+    ...rest,
+  });
+
+  const {
+    setValues,
+    onSubmit: onMantineSubmit,
+    isDirty,
+    resetDirty,
+    setFieldError,
+    values,
+  } = useMantineFormResult;
+
+  const useFormCoreResult = useFormCore<
+    TQueryFnData,
+    TError,
+    FormVariableType<TVariables, TTransformed>,
+    TData,
+    TResponse,
+    TResponseError
+  >({
+    ...refineCoreProps,
+    onMutationError: (error, _variables, _context) => {
+      if (disableServerSideValidation) {
+        refineCoreProps?.onMutationError?.(error, _variables, _context);
+        return;
+      }
+
+      const errors = error?.errors;
+
+      for (const key in errors) {
+        const fieldError = errors[key];
+
+        let newError = "";
+
+        if (Array.isArray(fieldError)) {
+          newError = fieldError.join(" ");
+        }
+
+        if (typeof fieldError === "string") {
+          newError = fieldError;
+        }
+
+        if (typeof fieldError === "boolean") {
+          newError = "Field is not valid.";
+        }
+
+        if (typeof fieldError === "object" && "key" in fieldError) {
+          const translatedMessage = translate(
+            fieldError.key,
+            fieldError.message,
+          );
+
+          newError = translatedMessage;
+        }
+        setFieldError(key, newError);
+      }
+
+      refineCoreProps?.onMutationError?.(error, _variables, _context);
+    },
+  });
+
+  const { query, formLoading, onFinish, onFinishAutoSave } = useFormCoreResult;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: code taken from refine, will check later
+  useEffect(() => {
+    if (typeof query?.data !== "undefined") {
+      // biome-ignore lint/suspicious/noExplicitAny: that's fine
+      const fields: any = {};
+
+      const registeredFields = flattenObjectKeys(rest.initialValues ?? {});
+
+      const data = query?.data?.data ?? {};
+
+      Object.keys(registeredFields).forEach((key) => {
+        const hasValue = has(data, key);
+        const dataValue = get(data, key);
+
+        if (hasValue) {
+          set(fields, key, dataValue);
+        }
+      });
+
+      setValues(fields);
+      resetDirty(fields);
+    }
+  }, [query?.data]);
+
+  const isValuesChanged = isDirty();
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: code taken from refine, will check later
+  useEffect(() => {
+    if (warnWhenUnsavedChanges) {
+      setWarnWhen(isValuesChanged);
+    }
+  }, [isValuesChanged]);
+
+  // workaround since refines auto save is buggy
+  // https://github.com/refinedev/refine/issues/7082
+  const handleAutoSave = useDebouncedCallback((transformedValues: TTransformed) => {
+    onFinishAutoSave(transformedValues)
+      .catch((error) => error);
+  }, refineCoreProps?.autoSave?.debounce ?? 1000);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: code taken from refine, will check later
+  useEffect(() => {
+    if (isValuesChanged && refineCoreProps?.autoSave && values) {
+      setWarnWhen(false);
+
+      const transformedValues = rest.transformValues
+        ? rest.transformValues(values)
+        : (values as unknown as TTransformed);
+
+      handleAutoSave(transformedValues);
+    }
+  }, [values]);
+
+  const onSubmit: (typeof useMantineFormResult)["onSubmit"] =
+    (handleSubmit, handleValidationFailure) => async (e) => {
+      setWarnWhen(false);
+      return await onMantineSubmit(handleSubmit, handleValidationFailure)(e);
+    };
+
+  const saveButtonProps = {
+    disabled: formLoading,
+    onClick: (e: React.PointerEvent<HTMLButtonElement>) => {
+      onSubmit(
+        (v) => onFinish(v).catch((error) => error),
+        () => false,
+        // @ts-expect-error event type is not compatible with pointer event
+      )(e);
+    },
+  };
+
+  return {
+    ...useMantineFormResult,
+    onSubmit,
+    refineCore: useFormCoreResult,
+    saveButtonProps,
+  };
+};

package/src/hooks/useOtp.ts

@@ -0,0 +1,45 @@
+
+import { useCallback, useEffect, useState } from "react";
+
+export type OtpHandler = ReturnType<typeof useOtp>;
+
+export const useOtp = () => {
+  const [otpPromise, setOtpPromise] = useState<{
+    resolve: (otp: string) => void;
+    reject: () => void;
+  }>();
+
+  useEffect(() => {
+    return () => {
+      otpPromise?.reject();
+    };
+  }, [otpPromise]);
+
+  const request = useCallback(() => {
+    return new Promise<string>((resolve, reject) => {
+      setOtpPromise({ resolve, reject });
+    });
+  }, []);
+
+  const reject = useCallback(() => {
+    otpPromise?.reject();
+    setOtpPromise(undefined);
+  }, [otpPromise]);
+
+  const resolve = useCallback(
+    (otp: string) => {
+      otpPromise?.resolve(otp);
+      setOtpPromise(undefined);
+    },
+    [otpPromise],
+  );
+
+  const isPending = !!otpPromise;
+
+  return {
+    isPending,
+    request,
+    reject,
+    resolve,
+  };
+};

package/src/index.ts

@@ -0,0 +1,36 @@
+// breadcrumbs
+export * from "@/components/breadcrumb/Breadcrumb";
+// buttons
+export * from "@/components/buttons/CreateButton";
+export * from "@/components/buttons/DeleteButton";
+export * from "@/components/buttons/EditButton";
+export * from "@/components/buttons/ListButton";
+export * from "@/components/buttons/RefreshButton";
+export * from "@/components/buttons/SaveButton";
+export * from "@/components/buttons/ShowButton";
+// crud
+export * from "@/components/crud/Create";
+export * from "@/components/crud/Edit";
+export * from "@/components/crud/List";
+export * from "@/components/crud/Show";
+// layout
+export * from "@/components/layout/Layout";
+// notification
+export * from "@/components/notification/Message";
+// table
+export * from "@/components/table/ColumnFilter";
+export * from "@/components/table/ColumnSorter";
+export * from "@/components/table/Table";
+// uncategorized components
+export * from "@/components/notification/AutoSaveIndicator";
+export * from "@/components/ColorSchemeToggle";
+// hooks
+export * from "@/hooks/useForm";
+export * from "@/hooks/useOtp";
+// pages
+export * from "@/pages/auth/LoginPage";
+export * from "@/pages/auth/RegisterPage";
+// providers
+export type * from "@/providers/authProvider";
+export * from "@/providers/notificationProvider";
+

package/src/main.tsx

@@ -0,0 +1,4 @@
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

package/src/pages/auth/DefaultTitle.tsx

@@ -0,0 +1,13 @@
+import { Stack } from "@mantine/core";
+import { useRefineOptions } from "@refinedev/core";
+
+export const DefaultTitle = () => {
+  const { title } = useRefineOptions();
+
+  return (
+    <Stack align="center" mb="lg">
+      {title.icon}
+      {title.text}
+    </Stack>
+  );
+}

package/src/pages/auth/ForgotPasswordPage.story.tsx

@@ -0,0 +1,14 @@
+import { ForgotPasswordPage } from './ForgotPasswordPage';
+
+export default {
+  title: 'Auth/ForgotPasswordPage',
+  component: ForgotPasswordPage,
+};
+
+export const Basic = () =>
+  <ForgotPasswordPage />;
+
+export const WithLoginLink = () =>
+  <ForgotPasswordPage
+    loginLink="/login"
+  />;

package/src/pages/auth/ForgotPasswordPage.tsx

@@ -0,0 +1,128 @@
+/** biome-ignore-all lint/correctness/useUniqueElementIds: test ids for playwright */
+import {
+  Anchor,
+  Button,
+  type ButtonProps,
+  Card,
+  type CardProps,
+  LoadingOverlay,
+  type LoadingOverlayProps,
+  ScrollArea,
+  type ScrollAreaProps,
+  Stack,
+  type StackProps,
+  Text,
+  TextInput,
+  type TextInputProps,
+  Title
+} from "@mantine/core";
+import { type FormValidateInput, isEmail } from "@mantine/form";
+import { Link, useForgotPassword, useTranslate } from "@refinedev/core";
+import { IconAt } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import { useForm } from "@/hooks/useForm";
+import { DefaultTitle } from "./DefaultTitle";
+
+export interface ForgotPasswordPageProps {
+  loginLink?: string;
+  validate?: FormValidateInput<ForgotPasswordForm>;
+  // customization
+  wrapperProps?: StackProps;
+  scrollAreaProps?: ScrollAreaProps;
+  emailFieldProps?: TextInputProps;
+  cardProps?: CardProps;
+  loadingOverlayProps?: LoadingOverlayProps;
+  submitButtonProps?: ButtonProps;
+  // components
+  icon?: ReactNode;
+  title?: ReactNode;
+}
+
+export interface ForgotPasswordForm {
+  email: string;
+} 
+
+export const ForgotPasswordPage: React.FC<ForgotPasswordPageProps> = (p: {
+  loginLink?: string;
+  validate?: FormValidateInput<ForgotPasswordForm>;
+  // customization
+  wrapperProps?: StackProps;
+  scrollAreaProps?: ScrollAreaProps;
+  emailFieldProps?: TextInputProps;
+  cardProps?: CardProps;
+  loadingOverlayProps?: LoadingOverlayProps;
+  submitButtonProps?: ButtonProps;
+  // components
+  icon?: ReactNode;
+  title?: ReactNode;
+}) => {
+  const translate = useTranslate();
+  const { mutate: forgotPassword, isPending } = useForgotPassword();
+
+  const { getInputProps, onSubmit, key } = useForm({
+    initialValues: {
+      email: "",
+    },
+    validate: {
+      email: isEmail(
+        translate("pages.login.invalidEmail", "Email is not valid")
+      ),
+    },
+    ...p.validate,
+  });
+  
+  const handleResetPassword = onSubmit(({ email }) => {
+    forgotPassword({ email, translate });
+  });
+
+  return (
+    <Stack h="100vh" align="center" justify="center" {...p.wrapperProps}>
+      <ScrollArea type="never" {...p.scrollAreaProps}>
+        {p.icon ?? <DefaultTitle />}
+        <Card shadow="sm" padding="lg" radius="md" withBorder {...p.cardProps}>
+          <LoadingOverlay
+            visible={isPending }
+            {...p.loadingOverlayProps}
+          />
+          {p.title ?? (
+            <Title order={5} mb="lg" ta="center">
+              {translate("pages.forgotPassword.title", "Reset your password")}
+            </Title>
+          )}
+          <form onSubmit={handleResetPassword}>
+            <TextInput
+              mb="lg"
+              type="email"
+              label={translate("pages.forgotPassword.fields.email", "Email")}
+              leftSection={<IconAt size={18} />}
+              placeholder={translate("pages.forgotPassword.fields.emailPlaceholder", "name@example.com")}
+              key={key("email")}
+              {...getInputProps("email")}
+              {...p.emailFieldProps}
+            />
+            <Button
+              fullWidth
+              variant="outline"
+              type="submit"
+              {...p.submitButtonProps}
+            >
+              {translate("pages.forgotPassword.buttons.submit", "Send reset instructions")}
+            </Button>
+            {p.loginLink &&
+              <Text mt="lg" size="xs" ta="center">
+                {translate(
+                  "pages.register.buttons.haveAccount",
+                  "Have an account? ",
+                )}{" "}
+                {/** biome-ignore lint/suspicious/noExplicitAny: that's fine */}
+                <Anchor component={Link as any} to={p.loginLink}>
+                  {translate("pages.login.signin", "Sign in")}
+                </Anchor>
+              </Text>
+            }
+          </form> 
+        </Card>
+      </ScrollArea>
+    </Stack>
+  );
+};

package/src/pages/auth/LoginPage.story.tsx

@@ -0,0 +1,98 @@
+import type { Meta } from "@storybook/react";
+import { IconBrandApple, IconBrandFacebook, IconBrandGoogle } from '@tabler/icons-react';
+import { useOtp } from '@/hooks/useOtp';
+import { LoginPage } from './LoginPage';
+
+export default {
+  title: 'Auth/LoginPage',
+  component: LoginPage,
+} satisfies Meta<typeof LoginPage>;
+
+export const WithPassword = () =>
+  <LoginPage method='password' />;
+
+export const WithProviders = () =>
+  <LoginPage
+    method='oauth'
+    providers={[{
+      name: "google",
+      label: "Continue with Google",
+      icon: <IconBrandGoogle />,
+      buttonProps: {
+        color: "red",
+      }
+    }, {
+      name: "facebook",
+      label: "Continue with the Facebook",
+      icon: <IconBrandFacebook />,
+      buttonProps: {
+        color: "blue",
+      }
+    }, {
+      name: "apple",
+      label: "Continue with Apple",
+      icon: <IconBrandApple />,
+      buttonProps: {
+        color: "gray",
+      }
+    }]}
+  />;
+
+export const WithProvidersAndPassword = () =>
+  <LoginPage
+    method='password'
+    providers={[{
+      name: "google",
+      label: "Continue with Google",
+      icon: <IconBrandGoogle />,
+      buttonProps: {
+        color: "red",
+      }
+    }]}
+  />;
+
+export const WithProvidersAndOtp = () => {
+  const otpHandler = useOtp();
+
+  return (
+    <LoginPage
+      method='otp'
+      otpHandler={otpHandler}
+      providers={[{
+        name: "google",
+        label: "Continue with Google",
+        icon: <IconBrandGoogle />,
+        buttonProps: {
+          color: "red",
+        }
+      }]}
+    />
+  );
+}
+
+export const WithProvidersAndMfa = () => {
+  const otpHandler = useOtp();
+
+  return (
+    <LoginPage
+      method='mfa'
+      otpHandler={otpHandler}
+      otpInputProps={{ length: 6 }}
+      providers={[{
+        name: "google",
+        label: "Continue with Google",
+        icon: <IconBrandGoogle />,
+        buttonProps: {
+          color: "red",
+        }
+      }]}
+    />
+  );
+}
+
+export const WithLinks = () =>
+  <LoginPage
+    method="password"
+    registerLink="/register"
+    forgotPasswordLink="/forgot-password"
+  />;