refine-mantine 1.0.0-dev.1

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

@@ -0,0 +1,83 @@
+import { Box, NumberInput, Select, SimpleGrid, Textarea, TextInput } from "@mantine/core";
+import { useSelect } from "@refinedev/core";
+import { IconCurrencyEuro } from "@tabler/icons-react";
+import { useForm } from "@/hooks/useForm";
+import { Create } from "./Create";
+
+export default {
+  title: 'Crud/Create',
+  component: Create,
+};
+
+interface Category {
+  id: number;
+  title: string;
+}
+
+export const Default = () => {
+  const {
+    refineCore: { formLoading },
+    getInputProps,
+    saveButtonProps,
+  } = useForm({
+    initialValues: {
+      name: "",
+      description: "",
+      price: 0,
+      material: "",
+      category: {
+        id: null
+      },
+    },
+  });
+
+  const { options, onSearch } = useSelect<Category>({
+    resource: "categories",
+    optionLabel: category => category.title, 
+    optionValue: category => category.id.toString(),
+    debounce: 500,
+  });
+
+  return (
+    <Create
+      saveButtonProps={saveButtonProps}
+      isLoading={formLoading}
+      resource="products"
+    >
+      <SimpleGrid cols={2}>
+        <Box>
+          <TextInput
+            label="Name"
+            mb="sm"
+            {...getInputProps("name")}
+          />
+          <NumberInput
+            label="Price"
+            mb="sm"
+            rightSection={<IconCurrencyEuro size={18}/>}
+            {...getInputProps("price")}
+          />
+          <TextInput
+            label="Material"
+            mb="sm"
+            {...getInputProps("material")}
+          />
+          <Select
+            label="Category"
+            data={options}
+            searchable
+            onSearchChange={onSearch}
+            {...getInputProps("category.id")}
+          />
+        </Box>
+        <Box>
+          <Textarea
+            label="Description"
+            rows={6}
+            {...getInputProps("description")}
+          />
+        </Box>
+      </SimpleGrid>
+    </Create>
+  );
+}

package/src/components/crud/Create.tsx

@@ -0,0 +1,146 @@
+import {
+  ActionIcon,
+  Box,
+  type BoxProps,
+  Card,
+  type CardProps,
+  Group,
+  type GroupProps,
+  LoadingOverlay,
+  Stack,
+  Title,
+} from "@mantine/core";
+import {
+  useBack,
+  useRefineContext,
+  useResourceParams,
+  useTranslate,
+  useUserFriendlyName,
+} from "@refinedev/core";
+import {
+  type RefineCrudCreateProps,
+  RefinePageHeaderClassNames,
+} from "@refinedev/ui-types";
+import { IconArrowLeft } from "@tabler/icons-react";
+import type React from "react";
+import {
+  SaveButton,
+  type SaveButtonProps,
+} from "@/components/buttons/SaveButton";
+import { Breadcrumb } from "../breadcrumb/Breadcrumb";
+
+export type CreateProps = RefineCrudCreateProps<
+  SaveButtonProps,
+  GroupProps,
+  GroupProps,
+  CardProps,
+  GroupProps,
+  BoxProps
+>;
+
+export const Create: React.FC<CreateProps> = (props) => {
+  const {
+    children,
+    saveButtonProps: saveButtonPropsFromProps,
+    isLoading,
+    resource: resourceFromProps,
+    footerButtons: footerButtonsFromProps,
+    footerButtonProps,
+    headerButtons: headerButtonsFromProps,
+    headerButtonProps,
+    wrapperProps,
+    contentProps,
+    headerProps,
+    goBack: goBackFromProps,
+    breadcrumb: breadcrumbFromProps,
+    title,
+  } = props;
+  const translate = useTranslate();
+  const { options: { breadcrumb: globalBreadcrumb } = {} } = useRefineContext();
+
+  const back = useBack();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  const { resource, identifier } = useResourceParams({
+    resource: resourceFromProps,
+  });
+
+  const breadcrumb =
+    typeof breadcrumbFromProps === "undefined"
+      ? globalBreadcrumb
+      : breadcrumbFromProps;
+
+  const breadcrumbComponent =
+    typeof breadcrumb !== "undefined" ? breadcrumb : <Breadcrumb />;
+
+  const saveButtonProps: SaveButtonProps = {
+    ...(isLoading ? { disabled: true } : {}),
+    ...saveButtonPropsFromProps,
+  };
+
+  const loadingOverlayVisible = isLoading ?? saveButtonProps?.disabled ?? false;
+
+  const defaultFooterButtons = <SaveButton {...saveButtonProps} />;
+
+  const buttonBack =
+    goBackFromProps === (false || null) ? null : (
+      <ActionIcon variant="subtle" onClick={back}>
+        {typeof goBackFromProps !== "undefined" ? (
+          goBackFromProps
+        ) : (
+          <IconArrowLeft />
+        )}
+      </ActionIcon>
+    );
+
+  const headerButtons = headerButtonsFromProps
+    ? typeof headerButtonsFromProps === "function"
+      ? headerButtonsFromProps({
+          defaultButtons: null,
+        })
+      : headerButtonsFromProps
+    : null;
+
+  const footerButtons = footerButtonsFromProps
+    ? typeof footerButtonsFromProps === "function"
+      ? footerButtonsFromProps({
+          defaultButtons: defaultFooterButtons,
+          saveButtonProps,
+        })
+      : footerButtonsFromProps
+    : defaultFooterButtons;
+
+  return (
+    <Card p="md" {...wrapperProps}>
+      <LoadingOverlay visible={loadingOverlayVisible} zIndex={1000} />
+      <Group justify="space-between" {...headerProps}>
+        <Stack gap="xs">
+          {breadcrumbComponent}
+          <Group gap="xs">
+            {buttonBack}
+            {title ?? (
+              <Title order={3} className={RefinePageHeaderClassNames.Title}>
+                {translate(
+                  `${identifier}.titles.create`,
+                  `Create ${getUserFriendlyName(
+                    resource?.meta?.label ?? identifier,
+                    "singular",
+                  )}`,
+                )}
+              </Title>
+            )}
+          </Group>
+        </Stack>
+        <Group gap="xs" {...headerButtonProps}>
+          {headerButtons}
+        </Group>
+      </Group>
+      <Box pt="sm" {...contentProps}>
+        {children}
+      </Box>
+      <Group justify="right" gap="xs" mt="md" {...footerButtonProps}>
+        {footerButtons}
+      </Group>
+    </Card>
+  );
+};

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

@@ -0,0 +1,173 @@
+import { Box, NumberInput, Select, SimpleGrid, Textarea, TextInput } from "@mantine/core";
+import { useSelect } from "@refinedev/core";
+import { IconCurrencyEuro } from "@tabler/icons-react";
+import { useForm } from "@/hooks/useForm";
+import { Edit } from "./Edit";
+
+export default {
+  title: 'Crud/Edit',
+  component: Edit,
+};
+
+interface Category {
+  id: number;
+  title: string;
+}
+
+export const Default = () => {
+  const {
+    values,
+    refineCore: { formLoading },
+    getInputProps,
+    saveButtonProps,
+  } = useForm({
+    refineCoreProps: {
+      // [WORKAROUND-START]
+      // these hardcoded params are only for demonstration purpose, please don't use these in your app
+      resource: "products",
+      id: 11,
+      action: "edit",
+      // [WORKAROUND-END]
+    },
+    initialValues: {
+      name: "",
+      description: "",
+      price: 0,
+      material: "",
+      category: {
+        id: null
+      },
+    },
+  });
+
+  const { options, onSearch } = useSelect<Category>({
+    resource: "categories",
+    optionLabel: category => category.title, 
+    optionValue: category => category.id.toString(),
+    debounce: 200,
+  });
+
+  return (
+    <Edit
+      saveButtonProps={saveButtonProps}
+      isLoading={formLoading}
+    >
+      <SimpleGrid cols={2}>
+        <Box>
+          <TextInput
+            label="Name"
+            mb="sm"
+            {...getInputProps("name")}
+          />
+          <NumberInput
+            label="Price"
+            mb="sm"
+            rightSection={<IconCurrencyEuro size={18}/>}
+            {...getInputProps("price")}
+          />
+          <TextInput
+            label="Material"
+            mb="sm"
+            {...getInputProps("material")}
+          />
+          <Select
+            label="Category"
+            data={options}
+            searchable
+            onSearchChange={onSearch}
+            {...getInputProps("category.id")}
+            value={String(values.category.id)}
+          />
+        </Box>
+        <Box>
+          <Textarea
+            label="Description"
+            rows={6}
+            {...getInputProps("description")}
+          />
+        </Box>
+      </SimpleGrid>
+    </Edit>
+  );
+}
+
+export const WithAutoSave = () => {
+const {
+    values,
+    refineCore: { autoSaveProps },
+    getInputProps,
+    saveButtonProps,
+  } = useForm({
+    refineCoreProps: {
+      autoSave: {
+        enabled: true,
+        debounce: 1000,
+      },
+      // [WORKAROUND-START]
+      // these hardcoded params are only for demonstration purpose, please don't use these in your app
+      resource: "products",
+      id: 11,
+      action: "edit",
+      // [WORKAROUND-END]
+    },
+    initialValues: {
+      name: "",
+      description: "",
+      price: 0,
+      material: "",
+      category: {
+        id: null
+      },
+    },
+  });
+
+  const { options, onSearch } = useSelect<Category>({
+    resource: "categories",
+    optionLabel: category => category.title, 
+    optionValue: category => category.id.toString(),
+    debounce: 200,
+  });
+
+  return (
+    <Edit
+      saveButtonProps={saveButtonProps}
+      autoSaveProps={autoSaveProps}
+    >
+      <SimpleGrid cols={2}>
+        <Box>
+          <TextInput
+            label="Name"
+            mb="sm"
+            {...getInputProps("name")}
+          />
+          <NumberInput
+            label="Price"
+            mb="sm"
+            rightSection={<IconCurrencyEuro  size={18}/>}
+            {...getInputProps("price")}
+          />
+          <TextInput
+            label="Material"
+            mb="sm"
+            {...getInputProps("material")}
+          />
+          <Select
+            label="Category"
+            data={options}
+            searchable
+            onSearchChange={onSearch}
+            {...getInputProps("category.id")}
+            value={String(values.category.id)}
+          />
+        </Box>
+        <Box>
+          <Textarea
+            label="Description"
+            rows={6}
+            {...getInputProps("description")}
+          />
+        </Box>
+      </SimpleGrid>
+    </Edit>
+  );
+}

package/src/components/crud/Edit.tsx

@@ -0,0 +1,236 @@
+import {
+  ActionIcon,
+  Box,
+  type BoxProps,
+  Card,
+  type CardProps,
+  Group,
+  type GroupProps,
+  LoadingOverlay,
+  Stack,
+  Title,
+} from "@mantine/core";
+import {
+  useBack,
+  useGo,
+  useMutationMode,
+  useRefineContext,
+  useResourceParams,
+  useToPath,
+  useTranslate,
+  useUserFriendlyName,
+} from "@refinedev/core";
+import {
+  type RefineCrudEditProps,
+  RefinePageHeaderClassNames,
+} from "@refinedev/ui-types";
+import { IconArrowLeft } from "@tabler/icons-react";
+import type React from "react";
+import { Breadcrumb } from "@/components/breadcrumb/Breadcrumb";
+import {
+  DeleteButton,
+  type DeleteButtonProps,
+} from "@/components/buttons/DeleteButton";
+import {
+  ListButton,
+  type ListButtonProps,
+} from "@/components/buttons/ListButton";
+import {
+  RefreshButton,
+  type RefreshButtonProps,
+} from "@/components/buttons/RefreshButton";
+import {
+  SaveButton,
+  type SaveButtonProps,
+} from "@/components/buttons/SaveButton";
+import { AutoSaveIndicator } from "@/components/notification/AutoSaveIndicator";
+
+export type EditProps = RefineCrudEditProps<
+  SaveButtonProps,
+  DeleteButtonProps,
+  GroupProps,
+  GroupProps,
+  CardProps,
+  GroupProps,
+  BoxProps,
+  Record<never, never>,
+  RefreshButtonProps,
+  ListButtonProps
+>;
+
+export const Edit: React.FC<EditProps> = (props) => {
+  const {
+    children,
+    resource: resourceFromProps,
+    recordItemId,
+    deleteButtonProps: deleteButtonPropsFromProps,
+    mutationMode: mutationModeFromProps,
+    saveButtonProps: saveButtonPropsFromProps,
+    canDelete,
+    dataProviderName,
+    isLoading,
+    footerButtons: footerButtonsFromProps,
+    footerButtonProps,
+    headerButtons: headerButtonsFromProps,
+    headerButtonProps,
+    wrapperProps,
+    contentProps,
+    headerProps,
+    goBack: goBackFromProps,
+    breadcrumb: breadcrumbFromProps,
+    title,
+    autoSaveProps,
+  } = props;
+  const translate = useTranslate();
+  const { options: { breadcrumb: globalBreadcrumb } = {} } = useRefineContext();
+  const { mutationMode: mutationModeContext } = useMutationMode();
+  const mutationMode = mutationModeFromProps ?? mutationModeContext;
+
+  const back = useBack();
+  const go = useGo();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  const {
+    resource,
+    id: idFromParams,
+    identifier,
+  } = useResourceParams({
+    resource: resourceFromProps,
+  });
+
+  const goListPath = useToPath({
+    resource,
+    action: "list",
+  });
+
+  const id = recordItemId ?? idFromParams;
+
+  const breadcrumb =
+    typeof breadcrumbFromProps === "undefined"
+      ? globalBreadcrumb
+      : breadcrumbFromProps;
+
+  const hasList = resource?.list && !recordItemId;
+
+  const isDeleteButtonVisible =
+    canDelete ?? (resource?.meta?.canDelete || deleteButtonPropsFromProps);
+
+  const breadcrumbComponent =
+    typeof breadcrumb !== "undefined" ? breadcrumb : <Breadcrumb />;
+
+  const loadingOverlayVisible =
+    isLoading ?? false;
+
+  const listButtonProps: ListButtonProps | undefined = hasList
+    ? {
+        ...(isLoading ? { disabled: true } : {}),
+        resource: identifier,
+      }
+    : undefined;
+
+  const refreshButtonProps: RefreshButtonProps = {
+    ...(isLoading ? { disabled: true } : {}),
+    resource: identifier,
+    recordItemId: id,
+    dataProviderName,
+  };
+
+  const deleteButtonProps: DeleteButtonProps | undefined = isDeleteButtonVisible
+    ? ({
+        ...(isLoading ? { disabled: true } : {}),
+        resource: identifier,
+        mutationMode,
+        onSuccess: () => {
+          go({ to: goListPath });
+        },
+        recordItemId: id,
+        dataProviderName,
+        ...deleteButtonPropsFromProps,
+      } as const)
+    : undefined;
+
+  const saveButtonProps: SaveButtonProps = {
+    ...(isLoading ? { disabled: true } : {}),
+    ...saveButtonPropsFromProps,
+  };
+
+  const defaultHeaderButtons = (
+    <>
+      {autoSaveProps && <AutoSaveIndicator {...autoSaveProps} />}
+      {hasList && <ListButton {...listButtonProps} />}
+      <RefreshButton {...refreshButtonProps} />
+    </>
+  );
+
+  const defaultFooterButtons = (
+    <>
+      {isDeleteButtonVisible && <DeleteButton {...deleteButtonProps} />}
+      <SaveButton {...saveButtonProps} />
+    </>
+  );
+
+  const buttonBack =
+    goBackFromProps === false || goBackFromProps === null ? null : (
+      <ActionIcon variant="subtle" onClick={back}>
+        {typeof goBackFromProps !== "undefined" ? (
+          goBackFromProps
+        ) : (
+          <IconArrowLeft />
+        )}
+      </ActionIcon>
+    );
+
+  const headerButtons = headerButtonsFromProps
+    ? typeof headerButtonsFromProps === "function"
+      ? headerButtonsFromProps({
+          defaultButtons: defaultHeaderButtons,
+          listButtonProps,
+          refreshButtonProps,
+        })
+      : headerButtonsFromProps
+    : defaultHeaderButtons;
+
+  const footerButtons = footerButtonsFromProps
+    ? typeof footerButtonsFromProps === "function"
+      ? footerButtonsFromProps({
+          defaultButtons: defaultFooterButtons,
+          deleteButtonProps,
+          saveButtonProps,
+        })
+      : footerButtonsFromProps
+    : defaultFooterButtons;
+
+  return (
+    <Card p="md" {...wrapperProps}>
+      <LoadingOverlay visible={loadingOverlayVisible} zIndex={1000} />
+      <Group justify="space-between" {...headerProps}>
+        <Stack gap="xs">
+          {breadcrumbComponent}
+          <Group gap="xs">
+            {buttonBack}
+            {title ?? (
+              <Title order={3} className={RefinePageHeaderClassNames.Title}>
+                {translate(
+                  `${identifier}.titles.edit`,
+                  `Edit ${getUserFriendlyName(
+                    resource?.meta?.label ?? identifier,
+                    "singular",
+                  )}`,
+                )}
+              </Title>
+            )}
+          </Group>
+        </Stack>
+        <Group gap="xs" {...headerButtonProps}>
+          {headerButtons}
+        </Group>
+      </Group>
+      <Box pt="sm" {...contentProps}>
+        {children}
+      </Box>
+      <Group justify="right" gap="xs" mt="md" {...footerButtonProps}>
+        {footerButtons}
+      </Group>
+    </Card>
+  );
+};