refine-mantine 1.0.0-dev.1

package/src/pages/auth/LoginPage.tsx

@@ -0,0 +1,256 @@
+import {
+  Anchor,
+  Button,
+  type ButtonProps,
+  Card,
+  type CardProps,
+  Center,
+  Collapse,
+  Divider,
+  Input,
+  LoadingOverlay,
+  type LoadingOverlayProps,
+  PinInput,
+  type PinInputProps,
+  ScrollArea,
+  type ScrollAreaProps,
+  Stack,
+  type StackProps,
+  Text,
+  TextInput,
+  type TextInputProps,
+  Title
+} from "@mantine/core";
+import { type FormValidateInput, isEmail, isNotEmpty, useForm } from "@mantine/form";
+import { Link, type OAuthProvider, type LoginFormTypes as RefineLoginFormTypes, useLogin, useTranslate } from "@refinedev/core";
+import { IconAt, IconLockPassword } from "@tabler/icons-react";
+import { type ReactNode, useCallback } from "react";
+import type { OtpHandler } from "@/hooks/useOtp";
+import { DefaultTitle } from "./DefaultTitle";
+
+export type TranslateFn = ReturnType<typeof useTranslate>;
+
+export interface LoginArgs {
+  providerName?: string; // providerName prop is used by several AuthPage implementations
+  email?: string;
+  password?: string;
+  otpHandler?: OtpHandler;
+  translate?: TranslateFn;
+  [key: string]: unknown;
+}
+
+export interface OAuthProviderMantine extends OAuthProvider {
+  buttonProps?: ButtonProps;
+} 
+
+export type LoginPageProps = {
+  providers?: OAuthProviderMantine[];
+  mutationVariables?: RefineLoginFormTypes;
+  registerLink?: string;
+  forgotPasswordLink?: string;
+  validate?: FormValidateInput<LoginForm>;
+  // customization
+  wrapperProps?: StackProps;
+  scrollAreaProps?: ScrollAreaProps;
+  emailFieldProps?: TextInputProps;
+  passwordFieldProps?: TextInputProps;
+  cardProps?: CardProps;
+  loadingOverlayProps?: LoadingOverlayProps;
+  otpInputProps?: PinInputProps;
+  submitButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  // components
+  icon?: ReactNode;
+  title?: ReactNode;
+  // otp promise handler
+  otpHandler?: OtpHandler;
+} & (
+  {
+    method: "oauth";
+    providers: OAuthProvider[];
+  } | {
+    method: "otp" | "mfa" | "password";
+  }
+);
+
+interface LoginForm {
+  email: string;
+  password: string;
+}
+
+export const LoginPage: React.FC<LoginPageProps> = (p) => {
+  const translate = useTranslate();
+  const login = useLogin<LoginArgs>();
+
+  const { getInputProps, onSubmit, key } = useForm<LoginForm>({
+    initialValues: {
+      email: "",
+      password: "",
+    },
+    validate: {
+      email: isEmail(
+        translate("pages.login.validate.invalidEmail", "Email is not valid")
+      ),
+      password: (p.method === "password" || p.method === "mfa")
+        ? isNotEmpty(translate("pages.login.validate.passwordRequired", "Password is required"))
+        : undefined,
+      ...p.validate,
+    },
+  });
+
+  const handleProviderLogin = useCallback((provider: OAuthProvider) => {
+    login.mutate({
+      providerName: provider.name,
+      translate,
+      ...p.mutationVariables
+    });
+  }, [login, translate, p.mutationVariables]);
+
+  const handleLogin = onSubmit(({ email, password }) => {
+    login.mutate({
+      email,
+      password,
+      otpHandler: p.otpHandler,
+      translate,
+      ...p.mutationVariables,
+    });
+  });
+
+  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={login.isPending && !p.otpHandler?.isPending}
+            {...p.loadingOverlayProps}
+          />
+          {p.title ?? (
+            <Title order={5} mb="lg" ta="center">
+              {translate("pages.login.title", "Sign in to your account")}
+            </Title>
+          )}
+          <Collapse in={!p.otpHandler?.isPending}>
+            {p.providers?.length && (
+              <Providers
+                providers={p.providers}
+                withDivider={p.method !== "oauth"}
+                onClickProvider={handleProviderLogin}
+              />
+            )}
+          </Collapse>
+          {p.method !== "oauth" && (
+            <form onSubmit={handleLogin}>
+              <Collapse in={!p.otpHandler?.isPending}>
+                <TextInput
+                  mb="xs"
+                  type="email"
+                  label={translate("pages.login.fields.email", "Email")}
+                  leftSection={<IconAt size={18} />}
+                  placeholder={translate("pages.login.fields.emailPlaceholder", "name@example.com")}
+                  key={key("email")}
+                  {...getInputProps("email")}
+                  {...p.emailFieldProps}
+                />
+                {(p.method === "mfa" || p.method === "password") && (
+                  <TextInput
+                    label={translate("pages.login.fields.password", "Password")}
+                    leftSection={<IconLockPassword size={18} />}
+                    placeholder={translate("pages.login.fields.passwordPlaceholder", "●●●●●●●●")}
+                    type="password"
+                    key={key("password")}
+                    {...getInputProps("password")}
+                    {...p.passwordFieldProps}
+                  />
+                )}
+                {p.forgotPasswordLink &&
+                  <Text size="xs" mt="xs" ta="end">
+                    {/** biome-ignore lint/suspicious/noExplicitAny: refines type is messed up */}
+                    <Anchor component={Link as any} to={p.forgotPasswordLink}>
+                      {translate( "pages.login.buttons.forgotPassword", "Forgot password?")}
+                    </Anchor>
+                  </Text>
+                }
+                <Button
+                  fullWidth
+                  mt="lg"
+                  type="submit"
+                  {...p.submitButtonProps}
+                >
+                  {translate("pages.login.signin", "Login")}
+                </Button>
+                {p.registerLink &&
+                  <Text mt="lg" size="xs" ta="center">
+                    {translate("pages.login.buttons.noAccount", "Don’t have an account?")}
+                    {" "}
+                    {/** biome-ignore lint/suspicious/noExplicitAny: that's fine */}
+                    <Anchor component={Link as any} to={p.registerLink}>
+                      {translate("pages.login.register", "Sign up")}
+                    </Anchor>
+                  </Text>
+                }
+              </Collapse>
+              <Collapse in={!!p.otpHandler?.isPending}>
+                <Input.Wrapper
+                  label={translate("pages.login.fields.otp", "Enter or paste your auth token")}
+                >
+                  <Center>
+                    <PinInput
+                      type="number"
+                      oneTimeCode
+                      disabled={login.isPending && !p.otpHandler?.isPending}
+                      onComplete={p.otpHandler?.resolve}
+                      {...p.otpInputProps}
+                    />
+                  </Center>
+                </Input.Wrapper>
+                <Button
+                  fullWidth
+                  mt="lg"
+                  variant="outline"
+                  onClick={p.otpHandler?.reject}
+                  {...p.cancelButtonProps}
+                >
+                  {translate("pages.login.buttons.cancel", "Cancel")}
+                </Button>
+              </Collapse>
+            </form>
+          )}
+        </Card>
+      </ScrollArea>
+    </Stack>
+  );
+};
+
+const Providers = (p: {
+  providers: OAuthProviderMantine[];
+  withDivider: boolean;
+  onClickProvider: (provider: OAuthProvider) => void;
+}) => {
+  const translate = useTranslate();
+
+  return (
+    <>
+      <Stack gap={8}>
+        {p.providers.map((provider) =>
+          <Button
+            key={provider.name}
+            fullWidth
+            leftSection={provider.icon}
+            onClick={() => p.onClickProvider(provider)}
+            {...provider.buttonProps}
+          >
+            {provider.label ?? provider.name}
+          </Button>
+        )}
+      </Stack>
+      {p.withDivider && (
+        <Divider
+          my="md"
+          labelPosition="center"
+          label={translate("pages.login.divider", "or")}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,18 @@
+import { RegisterPage } from './RegisterPage';
+
+export default {
+  title: 'Auth/RegisterPage',
+  component: RegisterPage,
+};
+
+export const WithPassword = () =>
+  <RegisterPage />;
+
+export const WithPasswordConfirmation = () =>
+  <RegisterPage withConfirmation />;
+
+export const WithLink = () =>
+  <RegisterPage
+    withConfirmation
+    loginLink="/login"
+  />;

package/src/pages/auth/RegisterPage.tsx

@@ -0,0 +1,151 @@
+import {
+  Anchor,
+  Button,
+  type ButtonProps,
+  Card,
+  type CardProps,
+  LoadingOverlay,
+  type LoadingOverlayProps,
+  type PinInputProps,
+  ScrollArea,
+  type ScrollAreaProps,
+  Stack,
+  type StackProps,
+  Text,
+  TextInput,
+  type TextInputProps,
+  Title
+} from "@mantine/core";
+import { type FormValidateInput, isEmail, isNotEmpty, useForm } from "@mantine/form";
+import { Link, type RegisterFormTypes, useRegister, useTranslate } from "@refinedev/core";
+import { IconAt, IconLockPassword } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import { DefaultTitle } from "./DefaultTitle";
+
+export interface RegisterPageProps {
+    withConfirmation?: boolean;
+    mutationVariables?: RegisterFormTypes;
+    loginLink?: string;
+    validate?: FormValidateInput<RegisterForm>;
+    // props
+    wrapperProps?: StackProps;
+    scrollAreaProps?: ScrollAreaProps;
+    emailFieldProps?: TextInputProps;
+    passwordFieldProps?: TextInputProps;
+    passwordConfirmationFieldProps?: TextInputProps;
+    cardProps?: CardProps;
+    loadingOverlayProps?: LoadingOverlayProps;
+    otpInputProps?: PinInputProps;
+    submitButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
+    // components
+    icon?: ReactNode;
+    title?: ReactNode;
+}
+
+export interface RegisterForm {
+  email: string;
+  password: string;
+  passwordConfirmation: string;
+}
+
+export const RegisterPage: React.FC<RegisterPageProps> = (p) => {
+  const translate = useTranslate();
+
+  const { getInputProps, onSubmit, key } = useForm<RegisterForm>({
+    initialValues: {
+      email: "",
+      password: "",
+      passwordConfirmation: "",
+    },
+    validate: {
+      email: isEmail(
+        translate("pages.register.validate.invalidEmail", "Email is not valid")
+      ),
+      password: isNotEmpty(translate("pages.register.validate.passwordRequired", "Password is required")),
+      passwordConfirmation: (value, form) =>
+        p.withConfirmation && form.password !== value
+          ? translate("pages.register.validate.passwordMismatch", "Passwords do not match")
+          : undefined,
+      ...p.validate,
+    },
+  });
+
+  const register = useRegister<RegisterFormTypes>();
+
+  const handleSubmit = onSubmit(({ email, password }) => {
+    register.mutate({  email, password, ...p.mutationVariables });
+  });
+
+  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={register.isPending}
+            {...p.loadingOverlayProps}
+          />
+          {p.title ?? (
+            <Title order={5} mb="lg" ta="center">
+              {translate("pages.register.title", "Sign up for your account")}
+            </Title>
+          )}
+          <form onSubmit={handleSubmit}>
+            <TextInput
+              mb="xs"
+              type="email"
+              label={translate("pages.register.email", "Email")}
+              leftSection={<IconAt size={18} />}
+              placeholder={translate("pages.register.emailPlaceholder", "name@example.com")}
+              key={key("email")}
+              {...getInputProps("email")}
+              {...p.emailFieldProps}
+            />
+            <TextInput
+              mb="sm" 
+              label={translate("pages.register.password", "Password")}
+              leftSection={<IconLockPassword size={18} />}
+              placeholder={translate("pages.register.passwordPlaceholder", "●●●●●●●●")}
+              type="password"
+              key={key("password")}
+              {...getInputProps("password")}
+              {...p.passwordFieldProps}
+            />
+            {p.withConfirmation && (
+              <TextInput
+                mb="sm" 
+                label={translate("pages.register.passwordConfirmation", "Confirm Password")}
+                leftSection={<IconLockPassword size={18} />}
+                placeholder={translate("pages.register.passwordConfirmationPlaceholder", "●●●●●●●●")}
+                type="password"
+                key={key("passwordConfirmation")}
+                {...getInputProps("passwordConfirmation")}
+                {...p.passwordConfirmationFieldProps}
+              />
+            )}
+            <Button
+              mt="lg"
+              fullWidth
+              type="submit"
+              disabled={register.isPending}
+              {...p.submitButtonProps}
+            >
+              {translate("pages.register.submit", "Sign up")}
+            </Button>
+          </form>
+          {p.loginLink &&
+            <Text mt="lg" size="xs" ta="center">
+              {translate("pages.register.haveAccount", "Have an account?")}
+              {" "}
+              {/** biome-ignore lint/suspicious/noExplicitAny: refines types are messed up */}
+              <Anchor component={Link as any} to={p.loginLink}>
+                {translate("pages.register.login", "Sign in")}
+              </Anchor>
+            </Text>
+          }
+        </Card>
+      </ScrollArea>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,27 @@
+import { hasLength } from '@mantine/form';
+import { UpdatePasswordPage } from './UpdatePasswordPage';
+
+export default {
+  title: 'Auth/UpdatePasswordPage',
+  component: UpdatePasswordPage,
+};
+
+export const WithPasswordConfirmation = () =>
+  <UpdatePasswordPage />;
+
+export const WithAsterisk = () =>
+  <UpdatePasswordPage
+    passwordFieldProps={{
+      withAsterisk: true,
+    }}
+    confirmPasswordFieldProps={{
+      withAsterisk: true,
+    }}
+  />;
+
+export const WithCustomValidation = () =>
+  <UpdatePasswordPage
+    validate={{
+      password: hasLength({ min: 2, max: 10 }, 'Password must be 2-10 characters long'),
+    }}
+  />;

package/src/pages/auth/UpdatePasswordPage.tsx

@@ -0,0 +1,124 @@
+import {
+  Button,
+  type ButtonProps,
+  Card,
+  type CardProps,
+  LoadingOverlay,
+  type LoadingOverlayProps,
+  Stack,
+  type StackProps,
+  TextInput,
+  type TextInputProps,
+  Title,
+} from "@mantine/core";
+import { type FormValidateInput, isNotEmpty } from "@mantine/form";
+import {
+  type UpdatePasswordFormTypes,
+  useParsed,
+  useTranslate,
+  useUpdatePassword,
+} from "@refinedev/core";
+import { IconLockPassword } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+import { useForm } from "@/hooks/useForm";
+import { DefaultTitle } from "./DefaultTitle";
+
+export interface UpdatePasswordPageProps {
+    mutationVariables?: UpdatePasswordFormTypes;
+    validate?: FormValidateInput<UpdatePasswordFormTypes>;
+    withToken?: boolean;
+    // props
+    wrapperProps?: StackProps;
+    passwordFieldProps?: TextInputProps;
+    confirmPasswordFieldProps?: TextInputProps;
+    cardProps?: CardProps;
+    loadingOverlayProps?: LoadingOverlayProps;
+    submitButtonProps?: ButtonProps;
+    // components
+    icon?: ReactNode;
+    title?: ReactNode;
+}
+
+export const UpdatePasswordPage: React.FC<UpdatePasswordPageProps> = (p) => {
+  const translate = useTranslate();
+  const { mutate: updatePassword, isPending } = useUpdatePassword();
+
+  const { params } = useParsed<{ token: string }>();
+  const token = params?.token;
+
+  const { getInputProps, onSubmit, key } = useForm({
+    initialValues: {
+      password: "",
+      confirmPassword: "",
+    },
+    validate: {
+      password: isNotEmpty(translate("pages.updatePassword.validate.passwordRequired", "Password is required")),
+      confirmPassword: (value, form) =>
+        form.password !== value
+        ? translate("pages.updatePassword.validate.passwordMismatch", "Passwords do not match")
+        : undefined,
+      ...p.validate,
+    },
+  });
+  
+  const handleSubmit = onSubmit(({password, confirmPassword}) => {
+    if (!p.withToken || token) {
+      updatePassword({
+        password,
+        confirmPassword,
+        token,
+        translate,
+      });
+    }
+  });
+
+  return (
+    <Stack h="100vh" align="center" justify="center" {...p.wrapperProps}>
+      {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.updatePassword.title", "Update Password")}
+          </Title>
+        )}
+        <form onSubmit={handleSubmit}>
+          <TextInput
+            mb="sm" 
+            label={translate("pages.updatePassword.fields.password", "New Password")}
+            leftSection={<IconLockPassword size={18} />}
+            placeholder="●●●●●●●●"
+            type="password"
+            key={key("password")}
+            {...getInputProps("password")}
+            {...p.passwordFieldProps}
+          />
+          <TextInput
+            mb="lg" 
+            label={translate(
+              "pages.updatePassword.fields.confirmPassword",
+              "Confirm New Password",
+            )}
+            leftSection={<IconLockPassword size={18} />}
+            placeholder="●●●●●●●●"
+            type="password"
+            key={key("confirmPassword")}
+            {...getInputProps("confirmPassword")}
+            {...p.confirmPasswordFieldProps}
+          />
+          <Button
+            type="submit"
+            fullWidth
+            disabled={isPending}
+            {...p.submitButtonProps}
+          >
+            {translate("pages.updatePassword.buttons.submit", "Update")}
+          </Button>
+        </form>
+      </Card>
+    </Stack>
+  );
+};

package/src/pages/category/CategoryCreate.tsx

@@ -0,0 +1 @@
+export const CategoryCreate = () => <></>;

package/src/pages/category/CategoryEdit.tsx

@@ -0,0 +1 @@
+export const CategoryEdit = () => <></>;

package/src/pages/category/CategoryList.tsx

@@ -0,0 +1 @@
+export const CategoryList = () => <></>;

package/src/pages/category/CategoryShow.tsx

@@ -0,0 +1 @@
+export const CategoryShow = () => <></>;

package/src/pages/product/ProductCreate.tsx

@@ -0,0 +1 @@
+export const ProductCreate = () => <></>;

package/src/pages/product/ProductEdit.tsx

@@ -0,0 +1 @@
+export const ProductEdit = () => <></>;

package/src/pages/product/ProductList.tsx

@@ -0,0 +1 @@
+export const ProductList = () => <></>;

package/src/pages/product/ProductShow.tsx

@@ -0,0 +1 @@
+export const ProductShow = () => <></>;