refine-mantine 1.5.0 → 1.6.0

package/dist/index.css

@@ -0,0 +1,35 @@
+.root {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.label {
+  text-align: center;
+  font-weight: 500;
+  font-size: 38px;
+  line-height: 1;
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+  color: var(--mantine-color-gray-2);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: 32px;
+  }
+}
+
+.description {
+  max-width: 500px;
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  font-family: 'Outfit', var(--mantine-font-family);
+  text-align: center;
+  font-weight: 500;
+  font-size: 38px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: 32px;
+  }
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ActionIconProps, AnchorProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PolymorphicComponentProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps, TextProps } from "@mantine/core";
-import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, UpdatePasswordFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, UseImportInputPropsType, useMenu, useTranslate } from "@refinedev/core";
+import { ActionIconProps, AnchorProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PolymorphicComponentProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps, TextProps, ThemeIconProps } from "@mantine/core";
+import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, TitleProps, UpdatePasswordFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, UseImportInputPropsType, useMenu, useTranslate } from "@refinedev/core";
 import { IconProps, ReactNode } from "@tabler/icons-react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import React$1, { ReactNode as ReactNode$1 } from "react";
@@ -129,6 +129,17 @@ declare const Create: React$1.FC<CreateProps>;
 type EditProps = RefineCrudEditProps<SaveButtonProps, DeleteButtonProps, GroupProps, GroupProps, CardProps, GroupProps, BoxProps, Record<never, never>, RefreshButtonProps, ListButtonProps>;
 declare const Edit: React$1.FC<EditProps>;
 //#endregion
+//#region src/components/crud/Empty.d.ts
+interface EmptyProps {
+  createButtonProps?: CreateButtonProps;
+  icon?: ReactNode;
+  themeIconProps?: ThemeIconProps;
+  titleProps?: TitleProps;
+  importButtonProps?: ImportButtonProps;
+  stackProps?: StackProps;
+}
+declare const Empty: React.FC<EmptyProps>;
+//#endregion
 //#region src/components/crud/List.d.ts
 type ListProps = RefineCrudListProps<CreateButtonProps, GroupProps, CardProps, GroupProps, BoxProps, ListExtraProps>;
 interface ListExtraProps {
@@ -387,10 +398,16 @@ interface UpdatePasswordPageProps {
 }
 declare const UpdatePasswordPage: React.FC<UpdatePasswordPageProps>;
 //#endregion
+//#region src/pages/NotFound.d.ts
+interface NotFoundProps {
+  returnTo: string;
+}
+declare const NotFound: React.FC<NotFoundProps>;
+//#endregion
 //#region src/providers/authProvider.d.ts
 declare const authProvider: AuthProvider;
 //#endregion
 //#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, ExportButton, ExportButtonProps, FileField, ForgotPasswordForm, ForgotPasswordPage, ForgotPasswordPageProps, ImportButton, ImportButtonProps, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, 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, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, NotFound, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UpdatePasswordPage, UpdatePasswordPageProps, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger, Button, ButtonGroup, Card, Center, Collapse, Divider, Group, Input, Loader, LoadingOverlay, Menu, NavLink, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, Title, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger, Button, ButtonGroup, Card, Center, Collapse, Container, Divider, Group, Input, Loader, LoadingOverlay, Menu, NavLink, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, ThemeIcon, Title, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 import { CanAccess, Link, flattenObjectKeys, matchResourceFromRoute, useBack, useBreadcrumb, useCloneButton, useCreateButton, useDeleteButton, useEditButton, useExportButton, useForgotPassword, useForm as useForm$1, useGetIdentity, useGo, useImportButton, useLink, useListButton, useLogin, useLogout, useMenu, useMutationMode, useNavigation, useParsed, useRefineContext, useRefineOptions, useRefreshButton, useRegister, useResourceParams, useSaveButton, useShowButton, useToPath, useTranslate, useTranslation, useUpdatePassword, useUserFriendlyName, useWarnAboutChange } from "@refinedev/core";
-import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFileExport, IconFileImport, IconFilter, IconHome, IconLanguage, IconLibraryPlus, IconList, IconLockPassword, IconLogout, IconMailShare, IconMoon, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
+import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFileExport, IconFileImport, IconFilter, IconGhost3Filled, IconHome, IconLanguage, IconLibraryPlus, IconList, IconLockPassword, IconLogout, IconMailShare, IconMoon, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
@@ -798,6 +798,34 @@ const Edit = (props) => {
 	});
 };
 
+//#endregion
+//#region src/components/crud/Empty.tsx
+const Empty = ({ stackProps, icon, themeIconProps, titleProps, createButtonProps, importButtonProps }) => {
+	const { resource, identifier } = useResourceParams();
+	const getUserFriendlyName = useUserFriendlyName();
+	const t = useTranslate();
+	const resourcePlural = getUserFriendlyName(identifier ?? "resource", "plural");
+	return /* @__PURE__ */ jsxs(Stack, {
+		align: "center",
+		gap: "md",
+		...stackProps,
+		children: [
+			/* @__PURE__ */ jsx(ThemeIcon, {
+				variant: "light",
+				size: "xl",
+				...themeIconProps,
+				children: icon ?? resource?.meta?.icon ?? /* @__PURE__ */ jsx(IconGhost3Filled, {})
+			}),
+			/* @__PURE__ */ jsx(Title, {
+				order: 4,
+				...titleProps,
+				children: t(`${identifier}.titles.empty`, `No ${resourcePlural} Yet`)
+			}),
+			/* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(CreateButton, { ...createButtonProps }), importButtonProps && /* @__PURE__ */ jsx(ImportButton, { ...importButtonProps })] })
+		]
+	});
+};
+
 //#endregion
 //#region src/components/crud/List.tsx
 const List = (props) => {
@@ -1941,6 +1969,46 @@ const UpdatePasswordPage = (p) => {
 	});
 };
 
+//#endregion
+//#region src/pages/NotFound.module.css
+var NotFound_module_default = {};
+
+//#endregion
+//#region src/pages/NotFound.tsx
+const NotFound = ({ returnTo }) => {
+	const t = useTranslate();
+	return /* @__PURE__ */ jsxs(Container, {
+		className: NotFound_module_default.root,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: NotFound_module_default.label,
+				children: t("pages.notFound.label", "404")
+			}),
+			/* @__PURE__ */ jsx(Title, {
+				className: NotFound_module_default.title,
+				children: t("pages.notFound.title", "You have found a secret place.")
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				size: "lg",
+				ta: "center",
+				className: NotFound_module_default.description,
+				children: t("pages.notFound.description", "Unfortunately, this is only a 404 page. You may have mistyped the address, or the page has been moved to another URL.")
+			}),
+			/* @__PURE__ */ jsx(Group, {
+				justify: "center",
+				children: /* @__PURE__ */ jsx(Button, {
+					component: Link,
+					to: returnTo,
+					variant: "subtle",
+					size: "md",
+					children: t("pages.notFound.button", "Take me back to home page")
+				})
+			})
+		]
+	});
+};
+
 //#endregion
 //#region src/providers/notificationProvider.tsx
 const notificationProvider = () => {
@@ -2029,4 +2097,4 @@ const notificationProvider = () => {
 };
 
 //#endregion
-export { AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, ExportButton, FileField, ForgotPasswordPage, ImportButton, Layout, List, ListButton, LoginPage, Message, PhoneField, RefreshButton, RegisterPage, 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, List, ListButton, LoginPage, Message, NotFound, PhoneField, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, UpdatePasswordPage, UrlField, notificationProvider, useForm, useOtp };

package/package.json

@@ -93,5 +93,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.5.0"
+  "version": "1.6.0"
 }

package/src/components/crud/Empty.tsx

@@ -32,7 +32,7 @@ export const Empty: React.FC<EmptyProps> = ({
         {icon ?? resource?.meta?.icon ?? <IconGhost3Filled />}
       </ThemeIcon>
       <Title order={4} {...titleProps}>
-        {t(`${identifier}.titles.list`, `No ${resourcePlural} Yet`)}
+        {t(`${identifier}.titles.empty`, `No ${resourcePlural} Yet`)}
       </Title>
       <Group>
         <CreateButton {...createButtonProps} />

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "@/components/ColorSchemeToggle";
 // crud
 export * from "@/components/crud/Create";
 export * from "@/components/crud/Edit";
+export * from "@/components/crud/Empty";
 export * from "@/components/crud/List";
 export * from "@/components/crud/Show";
 // fields
@@ -42,6 +43,7 @@ export * from "@/pages/auth/ForgotPasswordPage";
 export * from "@/pages/auth/LoginPage";
 export * from "@/pages/auth/RegisterPage";
 export * from "@/pages/auth/UpdatePasswordPage";
+export * from "@/pages/NotFound";
 // providers
 export type * from "@/providers/authProvider";
 export * from "@/providers/notificationProvider";

package/src/pages/NotFound.module.css

@@ -0,0 +1,35 @@
+.root {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.label {
+  text-align: center;
+  font-weight: 500;
+  font-size: 38px;
+  line-height: 1;
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+  color: var(--mantine-color-gray-2);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: 32px;
+  }
+}
+
+.description {
+  max-width: 500px;
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  font-family: 'Outfit', var(--mantine-font-family);
+  text-align: center;
+  font-weight: 500;
+  font-size: 38px;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: 32px;
+  }
+}

package/src/pages/NotFound.story.tsx

@@ -0,0 +1,9 @@
+import { NotFound } from './NotFound';
+
+export default {
+  title: 'Pages/NotFound',
+  component: NotFound,
+};
+
+export const WithPasswordConfirmation = () =>
+  <NotFound returnTo='/' />;

package/src/pages/NotFound.tsx

@@ -0,0 +1,43 @@
+import { Button, Container, Group, Text, Title } from '@mantine/core';
+import { Link, useTranslate } from '@refinedev/core';
+import classes from './NotFound.module.css';
+
+interface NotFoundProps {
+  returnTo: string;
+}
+
+export const NotFound: React.FC<NotFoundProps> = ({
+  returnTo
+}) => {
+  const t = useTranslate();
+  
+  return (
+    <Container className={classes.root}>
+      <div className={classes.label}>
+        {t("pages.notFound.label", "404")}
+      </div>
+      <Title className={classes.title}>
+        {t("pages.notFound.title", "You have found a secret place.")}
+      </Title>
+      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
+        {t(
+          "pages.notFound.description",
+          "Unfortunately, this is only a 404 page. You may have mistyped the address, or the page has been moved to another URL."
+        )}
+      </Text>
+      <Group justify="center">
+        <Button
+          component={Link as  React.FC<{ to: string }>}
+          to={returnTo}
+          variant="subtle"
+          size="md"
+        >
+          {t(
+            "pages.notFound.button",
+            "Take me back to home page"
+          )}
+        </Button>
+      </Group>
+    </Container>
+  );
+}