refine-mantine 1.2.1 → 1.3.0

package/package.json

@@ -25,6 +25,7 @@
     "@tabler/icons-react": "^3.34.1",
     "@tanstack/react-query": "^5.87.4",
     "@tanstack/react-table": "^8.21.3",
+    "dayjs": "^1.11.19",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.0.2",
@@ -52,6 +53,7 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.1.0",
+    "dayjs": "^1.11.19",
     "husky": "^9.1.7",
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "1.18.0",
@@ -87,5 +89,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.2.1"
+  "version": "1.3.0"
 }

package/src/components/fields/BooleanField.story.tsx

@@ -0,0 +1,38 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { BooleanField } from "./BooleanField";
+
+export default {
+  title: 'Fields/BooleanField',
+  component: BooleanField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof BooleanField>;
+
+export const Default = () =>
+  <BooleanField value={true} />;
+
+export const CustomLabel = () =>
+  <BooleanField
+    value={false}
+    falseLabel="Value not selected"
+    trueLabel="Value selected"
+  />;
+
+export const CustomIcon = () =>
+  <BooleanField
+    value={false}
+    falseIcon={<IconX />}
+    trueIcon={<IconCheck />}
+  />;
+
+export const CustomColor = () =>
+  <BooleanField
+    value={false}
+    falseIconProps={{ fill: "red" }}
+    trueIconProps={{ fill: "green" }}
+  />;

package/src/components/fields/BooleanField.tsx

@@ -0,0 +1,33 @@
+import { Tooltip } from "@mantine/core";
+import type { TooltipBaseProps } from "@mantine/core/lib/components/Tooltip/Tooltip.types";
+import { IconCircleCheckFilled, IconCircleXFilled, ReactNode, type IconProps } from "@tabler/icons-react";
+
+export interface BooleanFieldProps {
+  value: boolean;
+  trueLabel?: string;
+  falseLabel?: string;
+  trueIcon?: ReactNode;
+  falseIcon?: ReactNode;
+  trueIconProps?: IconProps;
+  falseIconProps?: IconProps;
+  tootlipProps?: TooltipBaseProps;
+}
+
+export const BooleanField: React.FC<BooleanFieldProps> = ({
+  value,
+  trueLabel = "true",
+  falseLabel = "false",
+  trueIcon,
+  falseIcon,
+  trueIconProps,
+  falseIconProps,
+  tootlipProps,
+}) => (
+  <Tooltip label={value ? trueLabel : falseLabel} {...tootlipProps}>
+    <span>
+      {value
+        ? trueIcon ?? <IconCircleCheckFilled size={18} {...trueIconProps} />
+        : falseIcon ?? <IconCircleXFilled size={18} {...falseIconProps} />}
+    </span>
+  </Tooltip>
+);

package/src/components/fields/DateField.story.tsx

@@ -0,0 +1,46 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import "dayjs/locale/de";
+import { DateField } from "./DateField";
+
+export default {
+  title: 'Fields/DateField',
+  component: DateField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof DateField>;
+
+export const Default = () =>
+  <DateField value="2025-12-05T14:41:31" />;
+
+export const Small = () =>
+  <DateField
+    value="2025-12-05T14:41:31"
+    textProps={{size: "xs"}}
+  />;
+
+export const Color = () =>
+  <DateField
+    value="2025-12-05T14:41:31"
+    textProps={{ c: "teal" }}
+  />;
+
+export const Format = () =>
+  <DateField
+    value="2025-12-05T14:41:31"
+    // https://day.js.org/docs/en/display/format
+    format="LLLL"
+  />;
+
+export const Locale = () => (
+  <DateField
+    value="2025-12-05T14:41:31"
+    // https://day.js.org/docs/en/display/format
+    format="LLLL"
+    // importing "dayjs/locale/de" is required to work properly 
+    locale="de"
+  />
+);

package/src/components/fields/DateField.tsx

@@ -0,0 +1,29 @@
+import { Text, TextProps } from "@mantine/core";
+import type { ConfigType } from "dayjs";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+
+export interface DateFieldProps {
+  value: ConfigType;
+  locale?: string;
+  format?: string;
+  textProps?: TextProps;
+}
+
+dayjs.extend(LocalizedFormat);
+const defaultLocale = dayjs.locale();
+
+export const DateField: React.FC<DateFieldProps> = ({
+  value,
+  locale,
+  format: dateFormat = "L",
+  textProps,
+}) => (
+  <Text {...textProps}>
+    {value
+      ? dayjs(value)
+          .locale(locale ?? defaultLocale)
+          .format(dateFormat)
+      : ""}
+  </Text>
+);

package/src/components/fields/EmailField.story.tsx

@@ -0,0 +1,84 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { EmailField } from "./EmailField";
+
+export default {
+  title: 'Fields/EmailField',
+  component: EmailField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof EmailField>;
+
+export const Default = () =>
+  <EmailField value="test@example.com" />;
+
+export const Colors = () =>
+  <>
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "indigo"}}
+    />
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "cyan"}}
+    />
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "teal"}}
+    />
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "xs"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "sm"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "md"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "lg"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "xl"}}
+    />
+  </>;
+
+export const Truncated = () =>
+  <EmailField
+    value="firstname.lastname@verylongdomain.tld"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const Gradient = () =>
+  <EmailField
+    value="test@example.com"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+  <EmailField
+    value="test@example.com"
+    iconProps={{
+      display: "none",
+    }}
+  />;

package/src/components/fields/EmailField.tsx

@@ -0,0 +1,9 @@
+import { IconMailShare } from "@tabler/icons-react";
+import { UrlField, UrlFieldProps } from "./UrlField";
+
+export const EmailField: React.FC<UrlFieldProps> = (props) =>
+  <UrlField
+    icon={IconMailShare}
+    {...props}
+    anchorProps={{ href: `mailto:${props.value}`, ...props.anchorProps }}
+  />;

package/src/components/fields/FileField.story.tsx

@@ -0,0 +1,91 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { IconPhotoDown } from "@tabler/icons-react";
+import { FileField } from "./FileField";
+
+export default {
+  title: 'Fields/FileField',
+  component: FileField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof FileField>;
+
+export const Default = () =>
+  <FileField value="https://github.com/kruschid/refine-mantine">refine-mantine</FileField>;
+
+export const Colors = () =>
+  <>
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "indigo"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "cyan"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "teal"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xs"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "sm"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "md"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "lg"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xl"}}
+    />
+  </>;
+
+export const Truncated = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const Gradient = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    iconProps={{
+      display: "none",
+    }}
+  />;
+
+export const CustomIcon = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    icon={IconPhotoDown}
+  />;

package/src/components/fields/FileField.tsx

@@ -0,0 +1,8 @@
+import { IconFileDownloadFilled } from "@tabler/icons-react";
+import { UrlField, UrlFieldProps } from "./UrlField";
+
+export const FileField: React.FC<UrlFieldProps> = (props) =>
+  <UrlField
+    icon={IconFileDownloadFilled}
+    {...props}
+  />;

package/src/components/fields/PhoneField.story.tsx

@@ -0,0 +1,96 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { PhoneField } from "./PhoneField";
+
+export default {
+  title: 'Fields/PhoneField',
+  component: PhoneField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof PhoneField>;
+
+export const Default = () =>
+  <PhoneField value="+05890000111">0-589-0000111</PhoneField>;
+
+export const Colors = () =>
+  <>
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "indigo"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "cyan"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "teal"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "xs"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "sm"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "md"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "lg"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "xl"}}
+    />
+  </>
+
+export const WithTarget = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{target: "_blank"}}
+  />;
+
+export const Truncated = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const WithTitle = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{title: "refine-mantine"}}
+  />;
+
+export const Gradient = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+    <PhoneField
+    value="+05890000111"
+    iconProps={{
+      display: "none",
+    }}
+  />;

package/src/components/fields/PhoneField.tsx

@@ -0,0 +1,9 @@
+import { IconPhoneOutgoing } from "@tabler/icons-react";
+import { UrlField, UrlFieldProps } from "./UrlField";
+
+export const PhoneField: React.FC<UrlFieldProps> = (props) =>
+  <UrlField
+    icon={IconPhoneOutgoing}
+    {...props}
+    anchorProps={{ href: `tel:${props.value}`, ...props.anchorProps }}
+  />;

package/src/components/fields/UrlField.story.tsx

@@ -0,0 +1,96 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { UrlField } from "./UrlField";
+
+export default {
+  title: 'Fields/UrlField',
+  component: UrlField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof UrlField>;
+
+export const Default = () =>
+  <UrlField value="https://github.com/kruschid/refine-mantine">refine-mantine</UrlField>;
+
+export const Colors = () =>
+  <>
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "indigo"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "cyan"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "teal"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xs"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "sm"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "md"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "lg"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xl"}}
+    />
+  </>
+
+export const WithTarget = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{target: "_blank"}}
+  />;
+
+export const Truncated = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const WithTitle = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{title: "refine-mantine"}}
+  />;
+
+export const Gradient = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+    <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    iconProps={{
+      display: "none",
+    }}
+  />;

package/src/components/fields/UrlField.tsx

@@ -0,0 +1,47 @@
+import { Anchor, AnchorProps, PolymorphicComponentProps, Text, TextProps } from "@mantine/core";
+import { IconExternalLink, IconProps, ReactNode } from "@tabler/icons-react";
+
+export interface UrlFieldProps {
+  value: string;
+  children?: ReactNode;
+  anchorProps?: PolymorphicComponentProps<"a", AnchorProps>;
+  textProps?: TextProps;
+  iconProps?: IconProps;
+  icon?: React.FC<IconProps>;
+}
+
+export const UrlField: React.FC<UrlFieldProps> = ({
+  children,
+  value,
+  anchorProps,
+  textProps,
+  icon,
+  iconProps,
+}) => {
+  const Icon = icon ?? IconExternalLink;
+
+  return (
+    <Anchor
+      href={value}
+      style={{display: "inline-flex", alignItems: "center"}}
+      {...anchorProps}
+    >
+      <Text {...textProps}>
+        {children ?? value}
+      </Text>
+      <Icon
+        size={
+          textProps?.size === "xs" ? 12 
+          : textProps?.size === "sm" ? 14
+          : textProps?.size === "md" ? 16
+          : textProps?.size === "lg" ? 18
+          : textProps?.size === "xl" ? 20
+          : 16
+        }
+        style={{ marginLeft: 4, flexShrink: 0 }}
+        aria-hidden
+        {...iconProps}
+      />
+    </Anchor>
+  );
+}

package/src/components/table/Table.story.tsx

@@ -1,9 +1,12 @@
-import { Badge, NumberFormatter, Select, Text } from "@mantine/core";
+import { ActionIconGroup, Badge, NumberFormatter, Select, Text } from "@mantine/core";
 import { type CrudOperators, useSelect } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import type { Meta } from "@storybook/react";
 import type { ColumnDef } from "@tanstack/react-table";
-import { use, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
+import { DeleteButton } from "../buttons/DeleteButton";
+import { EditButton } from "../buttons/EditButton";
+import { ShowButton } from "../buttons/ShowButton";
 import { Table } from "./Table";
 
 export default {
@@ -30,7 +33,7 @@ interface CategoryRecord {
 type ProductRecordKey = keyof ProductRecord;
 
 const useTableProps = () => {
-const categories = useSelect<CategoryRecord>({
+  const categories = useSelect<CategoryRecord>({
     resource: "categories",
     optionLabel: category => category.title, 
     optionValue: category => category.id.toString(),
@@ -117,6 +120,22 @@ const categories = useSelect<CategoryRecord>({
             {categoryMap[row.original.category.id] ?? "uncategorized"} 
           </Badge>
       },
+      {
+        id: "id" satisfies ProductRecordKey,
+        enableColumnFilter: false,
+        enableSorting: false,
+        header: "Actions",
+        cell: ({ row }) => (
+          <ActionIconGroup>
+            <ShowButton hideText recordItemId={row.original.id} />
+            <EditButton
+              hideText
+              recordItemId={row.original.id}
+            />
+            <DeleteButton hideText recordItemId={row.original.id} />
+          </ActionIconGroup>
+        ),
+      },
     ],
     [categoryMap, CategoryFilter],
   );

package/src/components/table/Table.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, Table as MantineTable, Pagination, TableProps, TableScrollContainerProps } from "@mantine/core";
+import { Box, Group, Table as MantineTable, Pagination, type TableProps } from "@mantine/core";
 import type { BaseRecord, HttpError } from "@refinedev/core";
 import type { UseTableReturnType } from "@refinedev/react-table";
 import { flexRender } from "@tanstack/react-table";