packages

packages/mui/src/components/fields/boolean/index.spec.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { fieldBooleanTests } from "@refinedev/ui-tests";
+
+import { render, fireEvent } from "@test";
+
+import { BooleanField } from "./";
+
+describe("BooleanField", () => {
+  fieldBooleanTests.bind(this)(BooleanField);
+
+  describe("BooleanField with default props values", () => {
+    const initialValues = [true, false, "true", "false", "", undefined];
+
+    const results = ["true", "false", "true", "true", "false", "false"];
+
+    initialValues.forEach((element, index) => {
+      const testName =
+        index === 2 || index === 3 || index === 4
+          ? `"${initialValues[index]}"`
+          : initialValues[index];
+
+      it(`renders boolean field value(${testName}) with correct tooltip text and icon`, async () => {
+        const baseDom = render(
+          <div data-testid="default-field">
+            <BooleanField value={element} />
+          </div>,
+        );
+
+        fireEvent.mouseOver(baseDom.getByTestId("default-field").children[0]);
+
+        expect(await baseDom.findByText(results[index])).toBeInTheDocument();
+      });
+    });
+  });
+});

packages/mui/src/components/fields/boolean/index.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import Tooltip from "@mui/material/Tooltip";
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+import type { BooleanFieldProps } from "../types";
+
+/**
+ * This field is used to display boolean values. It uses the {@link https://mui.com/material-ui/react-tooltip/#main-content `<Tooltip>`} values from Materila UI.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/boolean} for more details.
+ */
+export const BooleanField: React.FC<BooleanFieldProps> = ({
+  value,
+  valueLabelTrue = "true",
+  valueLabelFalse = "false",
+  trueIcon,
+  falseIcon,
+  svgIconProps,
+  ...rest
+}) => {
+  return (
+    <Tooltip title={value ? valueLabelTrue : valueLabelFalse} {...rest}>
+      {value ? (
+        <span>{trueIcon ?? <CheckOutlined {...svgIconProps} />}</span>
+      ) : (
+        <span>{falseIcon ?? <CloseOutlined {...svgIconProps} />}</span>
+      )}
+    </Tooltip>
+  );
+};

packages/mui/src/components/fields/date/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldDateTests } from "@refinedev/ui-tests";
+
+import { DateField } from "./";
+
+describe("DateField", () => {
+  fieldDateTests.bind(this)(DateField);
+});

packages/mui/src/components/fields/date/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import dayjs from "dayjs";
+
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+
+import Typography from "@mui/material/Typography";
+
+import type { DateFieldProps } from "../types";
+
+dayjs.extend(LocalizedFormat);
+
+const defaultLocale = dayjs.locale();
+
+/**
+ * This field is used to display dates. It uses {@link https://day.js.org/docs/en/display/format `Day.js`} to display date format and
+ * Material UI {@link https://mui.com/material-ui/react-typography/#main-content `<Typography>`} component
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/date} for more details.
+ */
+export const DateField: React.FC<DateFieldProps> = ({
+  value,
+  locales,
+  format: dateFormat = "L",
+  ...rest
+}) => {
+  return (
+    <Typography variant="body2" {...rest}>
+      {value
+        ? dayjs(value)
+            .locale(locales || defaultLocale)
+            .format(dateFormat)
+        : ""}
+    </Typography>
+  );
+};

packages/mui/src/components/fields/email/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldEmailTests } from "@refinedev/ui-tests";
+
+import { EmailField } from "./";
+
+describe("EmailField", () => {
+  fieldEmailTests.bind(this)(EmailField);
+});

packages/mui/src/components/fields/email/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+
+import type { EmailFieldProps } from "../types";
+
+/**
+ * This field is used to display email values. It uses the {@link https://mui.com/material-ui/react-typography/#main-content `<Typography>` }
+ * and {@link https://mui.com/material-ui/react-link/#main-content `<Link>`} components from Material UI.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/email} for more details.
+ */
+export const EmailField: React.FC<EmailFieldProps> = ({ value, ...rest }) => {
+  return (
+    <Typography variant="body2">
+      <Link href={`mailto:${value}`} {...rest}>
+        {value}
+      </Link>
+    </Typography>
+  );
+};

packages/mui/src/components/fields/file/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldFileTests } from "@refinedev/ui-tests";
+
+import { FileField } from "./";
+
+describe("FileField", () => {
+  fieldFileTests.bind(this)(FileField);
+});

packages/mui/src/components/fields/file/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { UrlField } from "@components";
+
+import type { FileFieldProps } from "../types";
+
+/**
+ * This field is used to display files and  uses Material UI {@link https://mui.com/material-ui/react-typography/#main-content `<Typography>`}  and {@link https://mui.com/material-ui/react-link/#main-content `<Link>`} components.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/file} for more details.
+ */
+export const FileField: React.FC<FileFieldProps> = ({
+  title,
+  src,
+  ...rest
+}) => {
+  return (
+    <UrlField value={src} title={title} {...rest}>
+      {title ?? src}
+    </UrlField>
+  );
+};

packages/mui/src/components/fields/index.ts

@@ -0,0 +1,10 @@
+export { TextFieldComponent } from "./text";
+export { TagField } from "./tag";
+export { EmailField } from "./email";
+export { BooleanField } from "./boolean";
+export { DateField } from "./date";
+export { FileField } from "./file";
+export { UrlField } from "./url";
+export { NumberField } from "./number";
+export { MarkdownField } from "./markdown";
+export * from "./types";

packages/mui/src/components/fields/markdown/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldMarkdownTests } from "@refinedev/ui-tests";
+
+import { MarkdownField } from "./";
+
+describe("MarkdownField", () => {
+  fieldMarkdownTests.bind(this)(MarkdownField);
+});

packages/mui/src/components/fields/markdown/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+
+import type { MarkdownFieldProps } from "../types";
+
+/**
+ * This field lets you display markdown content. It supports {@link https://github.github.com/gfm/ GitHub Flavored Markdown}.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/markdown} for more details.
+ */
+export const MarkdownField: React.FC<MarkdownFieldProps> = ({ value = "" }) => {
+  // There's an issue related with the type inconsistency of the `remark-gfm` and `remark-rehype` packages, we need to cast the `gfm` as any. (https://github.com/orgs/rehypejs/discussions/63)
+  return (
+    <ReactMarkdown
+      remarkPlugins={[gfm] as unknown as ReactMarkdown.PluggableList}
+    >
+      {value}
+    </ReactMarkdown>
+  );
+};

packages/mui/src/components/fields/number/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldNumberTests } from "@refinedev/ui-tests";
+
+import { NumberField } from "./";
+
+describe("NumberField", () => {
+  fieldNumberTests.bind(this)(NumberField);
+});

packages/mui/src/components/fields/number/index.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+
+import type { NumberFieldProps } from "../types";
+
+function toLocaleStringSupportsOptions() {
+  return !!(
+    typeof Intl === "object" &&
+    Intl &&
+    typeof Intl.NumberFormat === "function"
+  );
+}
+
+/**
+ * This field is used to display a number formatted according to the browser locale, right aligned. and uses {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl `Intl`} to display date format
+ * and Material UI {@link https://mui.com/material-ui/react-typography/#main-content `<Typography>`} component.
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/number} for more details.
+ */
+export const NumberField: React.FC<NumberFieldProps> = ({
+  value,
+  locale,
+  options,
+  ...rest
+}) => {
+  const number = Number(value);
+
+  return (
+    <Typography variant="body2" {...rest}>
+      {toLocaleStringSupportsOptions()
+        ? number.toLocaleString(locale, options)
+        : number}
+    </Typography>
+  );
+};

packages/mui/src/components/fields/tag/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldTagTests } from "@refinedev/ui-tests";
+
+import { TagField } from "./";
+
+describe("TagField", () => {
+  fieldTagTests.bind(this)(TagField);
+});

packages/mui/src/components/fields/tag/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Chip from "@mui/material/Chip";
+
+import type { TagFieldProps } from "../types";
+
+/**
+ * This field lets you display a value in a tag. It uses Material UI {@link https://mui.com/material-ui/react-chip/#main-content `<Chip>`} component.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/tag} for more details.
+ */
+export const TagField: React.FC<TagFieldProps> = ({ value, ...rest }) => {
+  return <Chip label={value?.toString()} {...rest} />;
+};

packages/mui/src/components/fields/text/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldTextTests } from "@refinedev/ui-tests";
+
+import { TextFieldComponent } from "./";
+
+describe("TextField", () => {
+  fieldTextTests.bind(this)(TextFieldComponent);
+});

packages/mui/src/components/fields/text/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+
+import type { TextFieldProps } from "../types";
+
+/**
+ * This field lets you show basic text. It uses Materail UI {@link https://mui.com/material-ui/react-typography/#main-content `<Typography>`} component.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/text} for more details.
+ */
+const TextField: React.FC<TextFieldProps> = ({ value, ...rest }) => {
+  return (
+    <Typography variant="body2" {...rest}>
+      {value}
+    </Typography>
+  );
+};
+
+export { TextField as TextFieldComponent };

packages/mui/src/components/fields/types.ts

@@ -0,0 +1,49 @@
+import type { ReactChild, ReactNode } from "react";
+
+import type { ChipProps } from "@mui/material/Chip";
+import type { LinkProps } from "@mui/material/Link";
+import type { SvgIconProps } from "@mui/material/SvgIcon";
+import type { TooltipProps } from "@mui/material/Tooltip";
+import type { TypographyProps } from "@mui/material/Typography";
+
+import type {
+  RefineFieldBooleanProps,
+  RefineFieldDateProps,
+  RefineFieldEmailProps,
+  RefineFieldFileProps,
+  RefineFieldMarkdownProps,
+  RefineFieldNumberProps,
+  RefineFieldTagProps,
+  RefineFieldTextProps,
+  RefineFieldUrlProps,
+} from "@refinedev/ui-types";
+
+import type { ConfigType } from "dayjs";
+
+export type BooleanFieldProps = RefineFieldBooleanProps<
+  unknown,
+  Omit<TooltipProps, "title" | "children">,
+  { svgIconProps?: SvgIconProps }
+>;
+
+export type DateFieldProps = RefineFieldDateProps<ConfigType, TypographyProps>;
+
+export type EmailFieldProps = RefineFieldEmailProps<ReactNode, LinkProps>;
+
+export type FileFieldProps = RefineFieldFileProps<LinkProps>;
+
+export type MarkdownFieldProps = RefineFieldMarkdownProps<string | undefined>;
+
+export type NumberFieldProps = RefineFieldNumberProps<
+  ReactChild,
+  TypographyProps
+>;
+
+export type TagFieldProps = RefineFieldTagProps<ReactNode, ChipProps>;
+
+export type TextFieldProps = RefineFieldTextProps<ReactNode, TypographyProps>;
+
+export type UrlFieldProps = RefineFieldUrlProps<
+  string | undefined,
+  LinkProps & TypographyProps
+>;

packages/mui/src/components/fields/url/index.spec.tsx

@@ -0,0 +1,7 @@
+import { fieldUrlTests } from "@refinedev/ui-tests";
+
+import { UrlField } from "./";
+
+describe("UrlField", () => {
+  fieldUrlTests.bind(this)(UrlField);
+});

packages/mui/src/components/fields/url/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+
+import type { UrlFieldProps } from "../types";
+
+/**
+ * This field lets you embed a link.It uses the {@link https://mui.com/material-ui/react-typography/#main-content `<Typography>` }
+ * and {@link https://mui.com/material-ui/react-link/#main-content `<Link>`} components from Material UI.
+ * You can pass a URL in its `value` property and you can show a text in its place by passing any `children`.
+ *
+ * @see {@link https://refine.dev/docs/api-reference/mui/components/fields/url} for more details.
+ */
+export const UrlField: React.FC<UrlFieldProps> = ({
+  children,
+  value,
+  ...rest
+}) => {
+  return (
+    <Typography variant="body2">
+      <Link href={value} {...rest}>
+        {children ?? value}
+      </Link>
+    </Typography>
+  );
+};