refine-mantine 1.7.0-dev.2 → 1.7.0-dev.4

package/dist/index.d.ts

@@ -194,6 +194,31 @@ declare const FileField: React.FC<UrlFieldProps>;
 declare const PhoneField: React.FC<UrlFieldProps>;
 //#endregion
 //#region src/components/layout/Layout.d.ts
+interface LayoutProps$1 {
+  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$1[];
+  renderHeader?: (toggle: () => void) => ReactNode$1;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode$1;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode$1;
+}
+interface LayoutLocale$1 {
+  lang: string;
+  label: string;
+  icon?: ReactNode$1;
+}
+declare const Layout: React.FC<LayoutProps$1>;
+//#endregion
+//#region src/components/layout/LayoutMinimal.d.ts
 interface LayoutProps {
   children: ReactNode$1;
   shellProps?: AppShellProps;
@@ -216,7 +241,7 @@ interface LayoutLocale {
   label: string;
   icon?: ReactNode$1;
 }
-declare const Layout: React.FC<LayoutProps>;
+declare const LayoutMinimal: React.FC<LayoutProps>;
 //#endregion
 //#region src/components/notification/AutoSaveIndicator.d.ts
 interface AutoSaveIndicatorProps {
@@ -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, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, Empty, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, Layout, 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

@@ -1103,7 +1103,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 +1181,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 +1196,282 @@ 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, {
+						...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, {
+						...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, {
@@ -2140,4 +2416,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, 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.2",
+  "version": "1.7.0-dev.4",
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",

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

@@ -1,6 +1,6 @@
 import { Image } from "@mantine/core";
 import type { Meta } from "@storybook/react";
-import { Layout as LayoutMinimal } from "./LayoutMinimal";
+import { LayoutMinimal } from "./LayoutMinimal";
 
 export default {
   title: "Components/LayoutMinimal",

package/src/components/layout/LayoutMinimal.tsx

@@ -62,7 +62,7 @@ export interface LayoutLocale {
   icon?: ReactNode;
 }
 
-export const Layout: React.FC<LayoutProps> = (p) => {
+export const LayoutMinimal: React.FC<LayoutProps> = (p) => {
   const [opened, { toggle, close }] = useDisclosure();
   const { title: { icon: defaultIcon, text: defaultText } = {} } =
     useRefineOptions();

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";