refine-mantine 1.7.0-dev.1 → 1.7.0-dev.10

package/dist/index.d.ts

@@ -194,7 +194,7 @@ declare const FileField: React.FC<UrlFieldProps>;
 declare const PhoneField: React.FC<UrlFieldProps>;
 //#endregion
 //#region src/components/layout/Layout.d.ts
-interface LayoutProps {
+interface LayoutProps$1 {
   children: ReactNode$1;
   shellProps?: AppShellProps;
   headerProps?: AppShellHeaderProps;
@@ -216,7 +216,27 @@ interface LayoutLocale {
   label: string;
   icon?: ReactNode$1;
 }
-declare const Layout: React.FC<LayoutProps>;
+declare const Layout: React.FC<LayoutProps$1>;
+//#endregion
+//#region src/components/layout/LayoutMinimal.d.ts
+interface LayoutProps {
+  children: ReactNode$1;
+  shellProps?: AppShellProps;
+  headerProps?: AppShellHeaderProps;
+  navbarProps?: AppShellNavbarProps;
+  navbarConfiguration?: Partial<AppShellNavbarConfiguration>;
+  navbarMenuProps?: AppShellSectionProps;
+  navbarFooterProps?: AppShellSectionProps;
+  mainProps?: AppShellMainProps;
+  hideNavbar?: boolean;
+  footer?: ReactNode$1;
+  footerProps?: AppShellFooterProps;
+  locales?: LayoutLocale[];
+  renderHeader?: (toggle: () => void) => ReactNode$1;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode$1;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode$1;
+}
+declare const LayoutMinimal: React.FC<LayoutProps>;
 //#endregion
 //#region src/components/notification/AutoSaveIndicator.d.ts
 interface AutoSaveIndicatorProps {
@@ -332,6 +352,8 @@ type LoginPageProps = {
   registerLink?: string;
   forgotPasswordLink?: string;
   validate?: FormValidateInput<LoginForm>;
+  onBeforeLogin?: (args: LoginArgs) => void | Promise<void>;
+  onBeforeProviderLogin?: (args: LoginArgs) => void | Promise<void>;
   wrapperProps?: StackProps;
   scrollAreaProps?: ScrollAreaProps;
   emailFieldProps?: TextInputProps;
@@ -411,6 +433,9 @@ interface UpdatePasswordPageProps {
 }
 declare const UpdatePasswordPage: React.FC<UpdatePasswordPageProps>;
 //#endregion
+//#region src/pages/auth/DefaultTitle.d.ts
+declare const DefaultTitle: () => react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/pages/NotFound.d.ts
 interface NotFoundProps {
   returnTo: string;
@@ -423,4 +448,4 @@ declare const authProvider: AuthProvider;
 //#region src/providers/notificationProvider.d.ts
 declare const notificationProvider: () => NotificationProvider;
 //#endregion
-export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, CloneButton, CloneButtonProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, Empty, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, NotFound, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, RegistrationVerificationPage, RegistrationVerificationPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UpdatePasswordPage, UpdatePasswordPageProps, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, CloneButton, CloneButtonProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DefaultTitle, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, Empty, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, Layout, LayoutLocale, LayoutMinimal, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, NotFound, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, RegistrationVerificationPage, RegistrationVerificationPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UpdatePasswordPage, UpdatePasswordPageProps, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };

package/dist/index.js

@@ -952,18 +952,23 @@ const Show = (props) => {
 			/* @__PURE__ */ jsxs(Group, {
 				justify: "space-between",
 				align: "center",
+				wrap: "nowrap",
 				...headerProps,
 				children: [/* @__PURE__ */ jsxs(Stack, {
 					gap: "xs",
 					children: [breadcrumbComponent, /* @__PURE__ */ jsxs(Group, {
 						gap: "xs",
+						wrap: "nowrap",
 						children: [buttonBack, /* @__PURE__ */ jsx(Title, {
 							order: 3,
+							lineClamp: 2,
+							textWrap: "balance",
 							children: title ?? translate(`${identifier}.titles.show`, `Show ${getUserFriendlyName(resource?.meta?.label ?? identifier, "singular")}`)
 						})]
 					})]
 				}), /* @__PURE__ */ jsx(Group, {
 					...headerButtonProps,
+					wrap: "nowrap",
 					children: headerButtons
 				})]
 			}),
@@ -1103,7 +1108,7 @@ const Layout = (p) => {
 						to: "/",
 						style: { all: "unset" },
 						children: /* @__PURE__ */ jsxs(Group, { children: [defaultIcon, /* @__PURE__ */ jsx(Text, { children: defaultText })] })
-					})] }), /* @__PURE__ */ jsxs(Group, { children: [p.locales && /* @__PURE__ */ jsx(Locales, { locales: p.locales }), /* @__PURE__ */ jsx(Tooltip, {
+					})] }), /* @__PURE__ */ jsxs(Group, { children: [p.locales && /* @__PURE__ */ jsx(Locales$1, { locales: p.locales }), /* @__PURE__ */ jsx(Tooltip, {
 						label: computedColorScheme === "dark" ? translate("layout.header.lightMode", "Light mode") : translate("layout.header.darkMode", "Dark mode"),
 						children: /* @__PURE__ */ jsx(ActionIcon, {
 							onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
@@ -1181,7 +1186,7 @@ const MenuItem = (p) => {
 		}, p.item.key)
 	}, p.item.key);
 };
-const Locales = (p) => {
+const Locales$1 = (p) => {
 	const { changeLocale, getLocale } = useTranslation();
 	const locale = getLocale();
 	return /* @__PURE__ */ jsxs(Menu, {
@@ -1196,6 +1201,284 @@ const Locales = (p) => {
 	});
 };
 
+//#endregion
+//#region src/components/layout/LayoutMinimal.tsx
+const LayoutMinimal = (p) => {
+	const [opened, { toggle, close }] = useDisclosure();
+	const { title: { icon: defaultIcon, text: defaultText } = {} } = useRefineOptions();
+	const { data: identity } = useGetIdentity();
+	const menu = useMenu();
+	const { mutate: logout } = useLogout();
+	const { setColorScheme } = useMantineColorScheme();
+	const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+	const translate = useTranslate();
+	const languageLabel = translate("layout.navbar.languageLabel", "Language");
+	const colorSchemeLabel = computedColorScheme === "dark" ? translate("layout.header.lightMode", "Light mode") : translate("layout.header.darkMode", "Dark mode");
+	const handleLogout = useCallback(() => {
+		logout();
+	}, [logout]);
+	return /* @__PURE__ */ jsxs(AppShell, {
+		header: { height: {
+			base: 60,
+			sm: 0
+		} },
+		navbar: {
+			width: {
+				base: 260,
+				sm: 80
+			},
+			breakpoint: "sm",
+			collapsed: {
+				mobile: !opened || p.hideNavbar,
+				desktop: p.hideNavbar
+			},
+			...p.navbarConfiguration
+		},
+		padding: "md",
+		...p.shellProps,
+		children: [
+			/* @__PURE__ */ jsx(AppShell.Header, {
+				p: "md",
+				...p.headerProps,
+				hiddenFrom: "sm",
+				children: p.renderHeader ? p.renderHeader(toggle) : /* @__PURE__ */ jsx(Group, {
+					justify: "space-between",
+					children: /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(Burger, {
+						opened,
+						onClick: toggle,
+						size: "sm",
+						hidden: p.hideNavbar
+					}), /* @__PURE__ */ jsx(Anchor, {
+						component: Link,
+						to: "/",
+						style: { all: "unset" },
+						children: /* @__PURE__ */ jsxs(Group, { children: [defaultIcon, defaultText ? /* @__PURE__ */ jsx(Text, { children: defaultText }) : null] })
+					})] })
+				})
+			}),
+			/* @__PURE__ */ jsxs(AppShell.Navbar, {
+				...p.navbarProps,
+				children: [
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						visibleFrom: "sm",
+						p: "md",
+						children: /* @__PURE__ */ jsx(Stack, {
+							align: "center",
+							gap: "xs",
+							children: /* @__PURE__ */ jsx(Tooltip, {
+								label: defaultText ?? translate("layout.navbar.homeLabel", "Home"),
+								position: "right",
+								transitionProps: { duration: 0 },
+								children: /* @__PURE__ */ jsx(Anchor, {
+									component: Link,
+									to: "/",
+									style: { all: "unset" },
+									children: /* @__PURE__ */ jsx(Stack, {
+										align: "center",
+										gap: 2,
+										children: defaultIcon
+									})
+								})
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						component: ScrollArea,
+						grow: true,
+						mt: "xs",
+						...p.navbarMenuProps,
+						visibleFrom: "sm",
+						children: p.renderMenu ? p.renderMenu(menu) : /* @__PURE__ */ jsx(Stack, {
+							align: "center",
+							gap: 0,
+							children: menu.menuItems.map((item) => /* @__PURE__ */ jsx(MenuItemIcon, {
+								item,
+								selectedKey: menu.selectedKey,
+								onClick: close
+							}, item.key))
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						component: ScrollArea,
+						grow: true,
+						mt: "xs",
+						...p.navbarMenuProps,
+						hiddenFrom: "sm",
+						children: p.renderMenu ? p.renderMenu(menu) : /* @__PURE__ */ jsx(Stack, {
+							gap: "xs",
+							children: menu.menuItems.map((item) => /* @__PURE__ */ jsx(MenuItemFull, {
+								item,
+								selectedKey: menu.selectedKey,
+								onClick: close
+							}, item.key))
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						pb: "sm",
+						...p.navbarFooterProps,
+						visibleFrom: "sm",
+						children: p.renderIdentity ? p.renderIdentity(identity, handleLogout) : /* @__PURE__ */ jsxs(Stack, {
+							align: "center",
+							gap: "xs",
+							children: [
+								p.locales && /* @__PURE__ */ jsx(Locales, {
+									locales: p.locales,
+									variant: "icon",
+									label: languageLabel
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									label: colorSchemeLabel,
+									position: "right",
+									transitionProps: { duration: 0 },
+									children: /* @__PURE__ */ jsx(ActionIcon, {
+										onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+										"aria-label": translate("layout.header.toggleColorScheme", "Toggle color scheme"),
+										variant: "subtle",
+										size: "xl",
+										children: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconSun, {
+											stroke: 1.5,
+											size: 22
+										}) : /* @__PURE__ */ jsx(IconMoon, {
+											stroke: 1.5,
+											size: 22
+										})
+									})
+								}),
+								/* @__PURE__ */ jsx(Tooltip, {
+									label: translate("layout.navbar.signOutLabel", "Sign out"),
+									position: "right",
+									transitionProps: { duration: 0 },
+									children: /* @__PURE__ */ jsx(ActionIcon, {
+										onClick: handleLogout,
+										"aria-label": translate("layout.navbar.signOutLabel", "Sign out"),
+										variant: "subtle",
+										size: "xl",
+										children: /* @__PURE__ */ jsx(IconLogout, { size: 20 })
+									})
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(AppShell.Section, {
+						pb: "sm",
+						...p.navbarFooterProps,
+						hiddenFrom: "sm",
+						children: /* @__PURE__ */ jsxs(Stack, {
+							gap: "xs",
+							children: [
+								p.locales && /* @__PURE__ */ jsx(Locales, {
+									locales: p.locales,
+									variant: "full",
+									label: languageLabel
+								}),
+								/* @__PURE__ */ jsx(NavLink, {
+									onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+									leftSection: computedColorScheme === "light" ? /* @__PURE__ */ jsx(IconSun, {
+										stroke: 1.5,
+										size: 18
+									}) : /* @__PURE__ */ jsx(IconMoon, {
+										stroke: 1.5,
+										size: 18
+									}),
+									label: colorSchemeLabel,
+									variant: "subtle"
+								}),
+								p.renderIdentity ? p.renderIdentity(identity, handleLogout) : /* @__PURE__ */ jsx(NavLink, {
+									onClick: handleLogout,
+									leftSection: identity?.avatar ? /* @__PURE__ */ jsx(Avatar, { src: identity.avatar }) : /* @__PURE__ */ jsx(IconLogout, { size: 18 }),
+									label: translate("layout.navbar.signOutLabel", "Sign out"),
+									description: identity?.email ? translate("layout.navbar.signOutDescription", { email: identity.email }, `Signed in as ${identity.email}`) : void 0,
+									variant: "filled",
+									active: true
+								})
+							]
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				...p.mainProps,
+				children: p.children
+			}),
+			/* @__PURE__ */ jsx(AppShell.Footer, {
+				...p.footerProps,
+				children: p.footer
+			})
+		]
+	});
+};
+const MenuItemIcon = (p) => {
+	const { listUrl } = useNavigation();
+	const isSelected = p.item.key === p.selectedKey;
+	const label = p.item.meta?.label ?? p.item.label ?? p.item.name;
+	return /* @__PURE__ */ jsx(CanAccess, {
+		resource: p.item.name,
+		action: "list",
+		params: { resource: p.item },
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			label,
+			position: "right",
+			transitionProps: { duration: 0 },
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				component: Link,
+				to: listUrl(p.item.name),
+				variant: isSelected ? "filled" : "subtle",
+				size: "xl",
+				mb: "xs",
+				bd: 0,
+				onClick: p.onClick,
+				children: p.item.meta?.icon ?? /* @__PURE__ */ jsx(IconList, { size: 20 })
+			}, p.item.key)
+		})
+	}, p.item.key);
+};
+const MenuItemFull = (p) => {
+	const { listUrl } = useNavigation();
+	const isSelected = p.item.key === p.selectedKey;
+	const label = p.item.meta?.label ?? p.item.label ?? p.item.name;
+	return /* @__PURE__ */ jsx(CanAccess, {
+		resource: p.item.name,
+		action: "list",
+		params: { resource: p.item },
+		children: /* @__PURE__ */ jsx(NavLink, {
+			label,
+			leftSection: p.item.meta?.icon ?? /* @__PURE__ */ jsx(IconList, { size: 18 }),
+			active: isSelected,
+			component: Link,
+			to: listUrl(p.item.name),
+			onClick: p.onClick
+		}, p.item.key)
+	}, p.item.key);
+};
+const Locales = (p) => {
+	const { changeLocale, getLocale } = useTranslation();
+	const locale = getLocale();
+	return /* @__PURE__ */ jsxs(Menu, {
+		shadow: "md",
+		width: 200,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: p.variant === "icon" ? /* @__PURE__ */ jsx(Tooltip, {
+			label: p.label,
+			position: "right",
+			transitionProps: { duration: 0 },
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				"aria-label": p.label,
+				variant: "subtle",
+				size: "xl",
+				children: /* @__PURE__ */ jsx(IconLanguage, {})
+			})
+		}) : /* @__PURE__ */ jsx(NavLink, {
+			label: p.label,
+			leftSection: /* @__PURE__ */ jsx(IconLanguage, { size: 18 }),
+			component: "button"
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: p.locales.map(({ label, lang, icon }) => /* @__PURE__ */ jsx(Menu.Item, {
+			leftSection: icon,
+			onClick: () => changeLocale(lang),
+			rightSection: lang === locale ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : void 0,
+			children: label
+		}, lang)) })]
+	});
+};
+
 //#endregion
 //#region src/components/notification/Message.tsx
 const Message = ({ message, description, undoLabel, undoableTime = 5, undoableTimeout = 0, notificationProps, actioniconProps, buttonProps, onUndo }) => /* @__PURE__ */ jsx(Notification, {
@@ -1626,25 +1909,30 @@ const LoginPage = (p) => {
 			...p.validate
 		}
 	});
-	const handleProviderLogin = useCallback((provider) => {
-		login.mutate({
+	const handleProviderLogin = useCallback(async (provider) => {
+		const loginArgs = {
 			providerName: provider.name,
 			translate,
 			...p.mutationVariables
-		});
+		};
+		await p.onBeforeProviderLogin?.(loginArgs);
+		login.mutate(loginArgs);
 	}, [
 		login,
 		translate,
-		p.mutationVariables
+		p.mutationVariables,
+		p.onBeforeProviderLogin
 	]);
-	const handleLogin = onSubmit(({ email, password }) => {
-		login.mutate({
+	const handleLogin = onSubmit(async ({ email, password }) => {
+		const loginArgs = {
 			email,
 			password,
 			otpHandler: p.otpHandler,
 			translate,
 			...p.mutationVariables
-		});
+		};
+		await p.onBeforeLogin?.(loginArgs);
+		login.mutate(loginArgs);
 	});
 	return /* @__PURE__ */ jsx(Stack, {
 		h: "100vh",
@@ -2140,4 +2428,4 @@ const notificationProvider = () => {
 };
 
 //#endregion
-export { AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, Empty, ExportButton, FileField, ForgotPasswordPage, ImportButton, Layout, List, ListButton, LoginPage, Message, NotFound, PhoneField, RefreshButton, RegisterPage, RegistrationVerificationPage, SaveButton, Show, ShowButton, Table, UpdatePasswordPage, UrlField, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DefaultTitle, DeleteButton, Edit, EditButton, EmailField, Empty, ExportButton, FileField, ForgotPasswordPage, ImportButton, Layout, LayoutMinimal, List, ListButton, LoginPage, Message, NotFound, PhoneField, RefreshButton, RegisterPage, RegistrationVerificationPage, SaveButton, Show, ShowButton, Table, UpdatePasswordPage, UrlField, notificationProvider, useForm, useOtp };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "refine-mantine",
-  "version": "1.7.0-dev.1",
+  "version": "1.7.0-dev.10",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/crud/Show.story.tsx

@@ -82,3 +82,17 @@ export const Default = () => {
   );
 }
 
+export const LongTitle = () => (
+  <Show
+    title="Show user profile details with a very long resource title that should stay on one line without pushing the layout out of place"
+    headerButtons={() =>
+      <ButtonGroup>
+        <RefreshButton />
+        <CloneButton />
+        <EditButton />
+        <DeleteButton />
+      </ButtonGroup>
+    }
+  >
+  </Show>
+);

package/src/components/crud/Show.tsx

@@ -186,12 +186,12 @@ export const Show: React.FC<ShowProps> = (props) => {
   return (
     <Card p="md" {...wrapperProps}>
       <LoadingOverlay visible={loadingOverlayVisible} />
-      <Group justify="space-between" align="center" {...headerProps}>
+      <Group justify="space-between" align="center"  wrap="nowrap" {...headerProps}>
         <Stack gap="xs">
           {breadcrumbComponent}
-          <Group gap="xs">
+          <Group gap="xs" wrap="nowrap">
             {buttonBack}
-            <Title order={3}>
+            <Title order={3} lineClamp={2} textWrap="balance">
               {title ??
                 translate(
                   `${identifier}.titles.show`,
@@ -203,7 +203,7 @@ export const Show: React.FC<ShowProps> = (props) => {
             </Title>
           </Group>
         </Stack>
-        <Group {...headerButtonProps}>{headerButtons}</Group>
+        <Group {...headerButtonProps} wrap="nowrap">{headerButtons}</Group>
       </Group>
       <Box pt="sm" {...contentProps}>
         {children}

package/src/components/layout/LayoutMinimal.story.tsx

@@ -0,0 +1,42 @@
+import { Image } from "@mantine/core";
+import type { Meta } from "@storybook/react";
+import { LayoutMinimal } from "./LayoutMinimal";
+
+export default {
+  title: "Components/LayoutMinimal",
+  component: LayoutMinimal,
+} satisfies Meta<typeof LayoutMinimal>;
+
+export const FullLayout = () => <LayoutMinimal>Hello World</LayoutMinimal>;
+
+export const WithLocaleChange = () => (
+  <LayoutMinimal
+    locales={[
+      {
+        label: "English",
+        lang: "en",
+        icon: <Image h={18} src="https://flagsapi.com/US/flat/64.png" />,
+      },
+      {
+        label: "Deutsch",
+        lang: "de",
+        icon: <Image h={18} src="https://flagsapi.com/DE/flat/64.png" />,
+      },
+    ]}
+  >
+    Hello World
+  </LayoutMinimal>
+);
+
+export const WithFooter = () => (
+  <LayoutMinimal
+    footer={
+      <div style={{ padding: 12, textAlign: "center" }}>
+        Footer content
+      </div>
+    }
+    footerProps={{ height: 48, withBorder: true }}
+  >
+    Hello World
+  </LayoutMinimal>
+);

package/src/components/layout/LayoutMinimal.tsx

@@ -0,0 +1,365 @@
+import {
+  ActionIcon,
+  Anchor,
+  AppShell,
+  type AppShellFooterProps,
+  type AppShellHeaderProps,
+  type AppShellMainProps,
+  type AppShellNavbarConfiguration,
+  type AppShellNavbarProps,
+  type AppShellProps,
+  type AppShellSectionProps,
+  Avatar,
+  Burger,
+  Group,
+  Menu,
+  NavLink,
+  ScrollArea,
+  Stack,
+  Text,
+  Tooltip,
+  useComputedColorScheme,
+  useMantineColorScheme
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import {
+  type BaseRecord,
+  CanAccess,
+  Link,
+  type TreeMenuItem,
+  useGetIdentity,
+  useLogout,
+  useMenu,
+  useNavigation,
+  useRefineOptions,
+  useTranslate,
+  useTranslation,
+} from "@refinedev/core";
+import { IconCheck, IconLanguage, IconList, IconLogout, IconMoon, IconSun } from "@tabler/icons-react";
+import { type ReactNode, useCallback } from "react";
+import type { LayoutLocale } from "./Layout";
+
+interface LayoutProps {
+  children: ReactNode;
+  shellProps?: AppShellProps;
+  headerProps?: AppShellHeaderProps;
+  navbarProps?: AppShellNavbarProps;
+  navbarConfiguration?: Partial<AppShellNavbarConfiguration>; 
+  navbarMenuProps?: AppShellSectionProps;
+  navbarFooterProps?: AppShellSectionProps;
+  mainProps?: AppShellMainProps;
+  hideNavbar?: boolean;
+  footer?: ReactNode;
+  footerProps?: AppShellFooterProps;
+  locales?: LayoutLocale[];
+  renderHeader?: (toggle: ()=> void) => ReactNode;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode;
+}
+
+export const LayoutMinimal: React.FC<LayoutProps> = (p) => {
+  const [opened, { toggle, close }] = useDisclosure();
+  const { title: { icon: defaultIcon, text: defaultText } = {} } =
+    useRefineOptions();
+  const { data: identity } = useGetIdentity();
+  const menu = useMenu();
+  const { mutate: logout } = useLogout();
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
+  const translate = useTranslate();
+  const languageLabel = translate("layout.navbar.languageLabel", "Language");
+  const colorSchemeLabel = computedColorScheme === 'dark'
+    ? translate("layout.header.lightMode", 'Light mode')
+    : translate("layout.header.darkMode", 'Dark mode');
+
+  const handleLogout = useCallback(() => {
+    logout();
+  }, [logout]);
+
+  return (
+    <AppShell
+      header={{
+        height: { base: 60, sm: 0 },
+      }}
+      navbar={{
+        width: { base: 260, sm: 80 },
+        breakpoint: "sm",
+        collapsed: {
+          mobile: !opened || p.hideNavbar,
+          desktop: p.hideNavbar,
+        },
+        ...p.navbarConfiguration,
+      }}
+      padding="md"
+      {...p.shellProps}
+    >
+      <AppShell.Header p="md" {...p.headerProps} hiddenFrom="sm">
+        {p.renderHeader ? (
+          p.renderHeader(toggle)
+        ) : (
+          <Group justify="space-between">
+            <Group>
+              <Burger opened={opened} onClick={toggle} size="sm" hidden={p.hideNavbar} />
+              <Anchor
+                component={Link as React.FC<{ to: string, children: ReactNode }>}
+                to="/"
+                style={{all: "unset"}}
+              >
+                <Group>
+                  {defaultIcon}
+                  {defaultText ? <Text>{defaultText}</Text> : null}
+                </Group>
+              </Anchor>
+            </Group>
+          </Group>
+        )}
+      </AppShell.Header>
+
+      <AppShell.Navbar {...p.navbarProps}>
+        <AppShell.Section visibleFrom="sm" p="md">
+          <Stack align="center" gap="xs">
+            <Tooltip label={defaultText ?? translate("layout.navbar.homeLabel", "Home")} position="right" transitionProps={{ duration: 0 }}>
+              <Anchor
+                component={Link as React.FC<{ to: string, children: ReactNode }>}
+                to="/"
+                style={{all: "unset"}}
+              >
+                <Stack align="center" gap={2}>
+                  {defaultIcon}
+                </Stack>
+              </Anchor>
+            </Tooltip>
+          </Stack>
+        </AppShell.Section>
+
+        <AppShell.Section
+          component={ScrollArea}
+          grow
+          mt="xs"
+          {...p.navbarMenuProps}
+          visibleFrom="sm"
+        >
+          {p.renderMenu ? (
+            p.renderMenu(menu)
+          ) : (
+            <Stack align="center" gap={0}>
+              {menu.menuItems.map((item) => (
+                <MenuItemIcon
+                  item={item}
+                  key={item.key}
+                  selectedKey={menu.selectedKey}
+                  onClick={close}
+                />
+              ))}
+            </Stack>
+          )}
+        </AppShell.Section>
+
+        <AppShell.Section
+          component={ScrollArea}
+          grow
+          mt="xs"
+          {...p.navbarMenuProps}
+          hiddenFrom="sm"
+        >
+          {p.renderMenu ? (
+            p.renderMenu(menu)
+          ) : (
+            <Stack gap="xs">
+              {menu.menuItems.map((item) => (
+                <MenuItemFull
+                  item={item}
+                  key={item.key}
+                  selectedKey={menu.selectedKey}
+                  onClick={close}
+                />
+              ))}
+            </Stack>
+          )}
+        </AppShell.Section>
+
+        <AppShell.Section pb="sm" {...p.navbarFooterProps} visibleFrom="sm">
+          {p.renderIdentity ? (
+            p.renderIdentity(identity, handleLogout)
+          ) : (
+            <Stack align="center" gap="xs">
+              {p.locales && (
+                <Locales locales={p.locales} variant="icon" label={languageLabel} />
+              )}
+              <Tooltip label={colorSchemeLabel} position="right" transitionProps={{ duration: 0 }}>
+                <ActionIcon
+                  onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
+                  aria-label={translate("layout.header.toggleColorScheme", "Toggle color scheme")}
+                  variant="subtle"
+                  size="xl"
+                >
+                  {computedColorScheme === "light"
+                    ? <IconSun stroke={1.5} size={22} />
+                    : <IconMoon stroke={1.5} size={22} />}
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip label={translate("layout.navbar.signOutLabel", "Sign out")} position="right" transitionProps={{ duration: 0 }}>
+                <ActionIcon
+                  onClick={handleLogout}
+                  aria-label={translate("layout.navbar.signOutLabel", "Sign out")}
+                  variant="subtle"
+                  size="xl"
+                >
+                  <IconLogout size={20} />
+                </ActionIcon>
+              </Tooltip>
+            </Stack>
+          )}
+        </AppShell.Section>
+
+        <AppShell.Section pb="sm" {...p.navbarFooterProps} hiddenFrom="sm">
+          <Stack gap="xs">
+            {p.locales && (
+              <Locales locales={p.locales} variant="full" label={languageLabel} />
+            )}
+            <NavLink
+              onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
+              leftSection={computedColorScheme === "light"
+                ? <IconSun stroke={1.5} size={18} />
+                : <IconMoon stroke={1.5} size={18} />}
+              label={colorSchemeLabel}
+              variant="subtle"
+            />
+            {p.renderIdentity ? (
+              p.renderIdentity(identity, handleLogout)
+            ) : (
+              <NavLink
+                onClick={handleLogout}
+                leftSection={identity?.avatar ? <Avatar src={identity.avatar} /> : <IconLogout size={18} />}
+                label={translate("layout.navbar.signOutLabel", "Sign out")}
+                description={
+                  identity?.email
+                    ? translate("layout.navbar.signOutDescription", { email: identity.email }, `Signed in as ${identity.email}`)
+                    : undefined
+                }
+                variant="filled"
+                active
+              />
+            )}
+          </Stack>
+        </AppShell.Section>
+      </AppShell.Navbar>
+
+      <AppShell.Main {...p.mainProps}>
+        {p.children}
+      </AppShell.Main>
+      
+      <AppShell.Footer {...p.footerProps}>
+        {p.footer}
+      </AppShell.Footer>
+    </AppShell>
+  );
+};
+
+const MenuItemIcon = (p: {
+  item: TreeMenuItem;
+  selectedKey?: string;
+  onClick: () => void;
+}) => {
+  const { listUrl } = useNavigation();
+  const isSelected = p.item.key === p.selectedKey;
+  const label = p.item.meta?.label ?? p.item.label ?? p.item.name;
+
+  return (
+    <CanAccess
+      key={p.item.key}
+      resource={p.item.name}
+      action="list"
+      params={{
+        resource: p.item,
+      }}
+    >
+      <Tooltip label={label} position="right" transitionProps={{ duration: 0 }}>
+        <ActionIcon
+          key={p.item.key}
+          component={Link as React.FC<{ to: string, onClick: () => void }>}
+          to={listUrl(p.item.name)}
+          variant={isSelected ? "filled" : "subtle"}
+          size="xl"
+          mb="xs"
+          bd={0}
+          onClick={p.onClick}
+        >
+          {p.item.meta?.icon ?? <IconList size={20} />}
+        </ActionIcon>
+      </Tooltip>
+    </CanAccess>
+  );
+};
+
+const MenuItemFull = (p: {
+  item: TreeMenuItem;
+  selectedKey?: string;
+  onClick: () => void;
+}) => {
+  const { listUrl } = useNavigation();
+  const isSelected = p.item.key === p.selectedKey;
+  const label = p.item.meta?.label ?? p.item.label ?? p.item.name;
+
+  return (
+    <CanAccess
+      key={p.item.key}
+      resource={p.item.name}
+      action="list"
+      params={{
+        resource: p.item,
+      }}
+    >
+      <NavLink
+        key={p.item.key}
+        label={label}
+        leftSection={p.item.meta?.icon ?? <IconList size={18} />}
+        active={isSelected}
+        component={Link as React.FC<{ to: string, onClick: () => void }>}
+        to={listUrl(p.item.name)}
+        onClick={p.onClick}
+      />
+    </CanAccess>
+  );
+};
+
+const Locales = (p: {
+  locales: LayoutLocale[];
+  variant: "icon" | "full";
+  label: string;
+}) => {
+  const { changeLocale, getLocale } = useTranslation();
+  const locale = getLocale();
+
+  return (
+    <Menu shadow="md" width={200}>
+      <Menu.Target>
+        {p.variant === "icon" ? (
+          <Tooltip label={p.label} position="right" transitionProps={{ duration: 0 }}>
+            <ActionIcon aria-label={p.label} variant="subtle" size="xl">
+              <IconLanguage />
+            </ActionIcon>
+          </Tooltip>
+        ) : (
+          <NavLink
+            label={p.label}
+            leftSection={<IconLanguage size={18} />}
+            component="button"
+          />
+        )}
+      </Menu.Target>
+      <Menu.Dropdown>
+        {p.locales.map(({label, lang, icon}) => (
+          <Menu.Item
+            key={lang}
+            leftSection={icon}
+            onClick={() => changeLocale(lang)}
+            rightSection={lang === locale ? <IconCheck size={14} /> : undefined}
+          >
+            {label}
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

package/src/index.ts

@@ -28,6 +28,7 @@ export * from "@/components/fields/PhoneField";
 export * from "@/components/fields/UrlField";
 // layout
 export * from "@/components/layout/Layout";
+export * from "@/components/layout/LayoutMinimal";
 // notification
 export * from "@/components/notification/AutoSaveIndicator";
 export * from "@/components/notification/Message";
@@ -44,6 +45,7 @@ export * from "@/pages/auth/LoginPage";
 export * from "@/pages/auth/RegisterPage";
 export * from "@/pages/auth/RegistrationVerificationPage";
 export * from "@/pages/auth/UpdatePasswordPage";
+export * from "@/pages/auth/DefaultTitle";
 export * from "@/pages/NotFound";
 // providers
 export type * from "@/providers/authProvider";

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

@@ -0,0 +1,15 @@
+import { Stack } from "@mantine/core";
+import type { Meta } from "@storybook/react";
+import { DefaultTitle } from "./DefaultTitle";
+
+export default {
+  title: "Auth/DefaultTitle",
+  component: DefaultTitle,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof DefaultTitle>;
+
+export const Basic = () => <DefaultTitle />;

package/src/pages/auth/LoginPage.tsx

@@ -49,6 +49,8 @@ export type LoginPageProps = {
   registerLink?: string;
   forgotPasswordLink?: string;
   validate?: FormValidateInput<LoginForm>;
+  onBeforeLogin?: (args: LoginArgs) => void | Promise<void>;
+  onBeforeProviderLogin?: (args: LoginArgs) => void | Promise<void>;
   // customization
   wrapperProps?: StackProps;
   scrollAreaProps?: ScrollAreaProps;
@@ -98,22 +100,26 @@ export const LoginPage: React.FC<LoginPageProps> = (p) => {
     },
   });
 
-  const handleProviderLogin = useCallback((provider: OAuthProvider) => {
-    login.mutate({
+  const handleProviderLogin = useCallback(async (provider: OAuthProvider) => {
+    const loginArgs = {
       providerName: provider.name,
       translate,
       ...p.mutationVariables
-    });
-  }, [login, translate, p.mutationVariables]);
+    };
+    await p.onBeforeProviderLogin?.(loginArgs);
+    login.mutate(loginArgs);
+  }, [login, translate, p.mutationVariables, p.onBeforeProviderLogin]);
 
-  const handleLogin = onSubmit(({ email, password }) => {
-    login.mutate({
+  const handleLogin = onSubmit(async ({ email, password }) => {
+    const loginArgs = {
       email,
       password,
       otpHandler: p.otpHandler,
       translate,
       ...p.mutationVariables,
-    });
+    };
+    await p.onBeforeLogin?.(loginArgs);
+    login.mutate(loginArgs);
   });
 
   return (