@refinedev/core 4.47.2 → 4.48.0

package/src/components/pages/config-success/index.tsx

@@ -3,292 +3,281 @@ import React, { useState } from "react";
 import { useMediaQuery } from "@definitions/helpers";
 
 type CardInfo = {
-    title: string;
-    description: string;
-    link: string;
-    iconUrl: string;
+  title: string;
+  description: string;
+  link: string;
+  iconUrl: string;
 };
 
 const cards: CardInfo[] = [
-    {
-        title: "Documentation",
-        description:
-            "Learn about the technical details of using Refine in your projects.",
-        link: "https://refine.dev/docs",
-        iconUrl:
-            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/book.svg",
-    },
-    {
-        title: "Tutorial",
-        description:
-            "Learn how to use Refine by building a fully-functioning CRUD app, from scratch to full launch.",
-        link: "https://refine.dev/tutorial",
-        iconUrl:
-            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/hat.svg",
-    },
-    {
-        title: "Templates",
-        description:
-            "Explore a range of pre-built templates, perfect everything from admin panels to dashboards and CRMs.",
-        link: "https://refine.dev/templates",
-        iconUrl:
-            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/application.svg",
-    },
-    {
-        title: "Community",
-        description:
-            "Join our Discord community and keep up with the latest news.",
-        link: "https://discord.gg/refine",
-        iconUrl:
-            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/discord.svg",
-    },
+  {
+    title: "Documentation",
+    description:
+      "Learn about the technical details of using Refine in your projects.",
+    link: "https://refine.dev/docs",
+    iconUrl:
+      "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/book.svg",
+  },
+  {
+    title: "Tutorial",
+    description:
+      "Learn how to use Refine by building a fully-functioning CRUD app, from scratch to full launch.",
+    link: "https://refine.dev/tutorial",
+    iconUrl:
+      "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/hat.svg",
+  },
+  {
+    title: "Templates",
+    description:
+      "Explore a range of pre-built templates, perfect everything from admin panels to dashboards and CRMs.",
+    link: "https://refine.dev/templates",
+    iconUrl:
+      "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/application.svg",
+  },
+  {
+    title: "Community",
+    description: "Join our Discord community and keep up with the latest news.",
+    link: "https://discord.gg/refine",
+    iconUrl:
+      "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/discord.svg",
+  },
 ];
 
 /**
  * It is a page that welcomes you after the configuration is completed.
  */
 export const ConfigSuccessPage: React.FC = () => {
-    const isTablet = useMediaQuery("(max-width: 1010px)");
-    const isMobile = useMediaQuery("(max-width: 650px)");
+  const isTablet = useMediaQuery("(max-width: 1010px)");
+  const isMobile = useMediaQuery("(max-width: 650px)");
 
-    const getGridTemplateColumns = () => {
-        if (isMobile) {
-            return "1, 280px";
-        } else if (isTablet) {
-            return "2, 280px";
-        } else {
-            return "4, 1fr";
-        }
-    };
+  const getGridTemplateColumns = () => {
+    if (isMobile) {
+      return "1, 280px";
+    }
+    if (isTablet) {
+      return "2, 280px";
+    }
+    return "4, 1fr";
+  };
 
-    const getHeaderFontSize = () => {
-        if (isMobile) {
-            return "32px";
-        } else if (isTablet) {
-            return "40px";
-        } else {
-            return "48px";
-        }
-    };
+  const getHeaderFontSize = () => {
+    if (isMobile) {
+      return "32px";
+    }
+    if (isTablet) {
+      return "40px";
+    }
+    return "48px";
+  };
 
-    const getSubHeaderFontSize = () => {
-        if (isMobile) {
-            return "16px";
-        } else if (isTablet) {
-            return "20px";
-        } else {
-            return "24px";
-        }
-    };
+  const getSubHeaderFontSize = () => {
+    if (isMobile) {
+      return "16px";
+    }
+    if (isTablet) {
+      return "20px";
+    }
+    return "24px";
+  };
 
-    return (
+  return (
+    <div
+      style={{
+        position: "fixed",
+        zIndex: 10,
+        inset: 0,
+        overflow: "auto",
+        width: "100dvw",
+        height: "100dvh",
+      }}
+    >
+      <div
+        style={{
+          overflow: "hidden",
+          position: "relative",
+          backgroundSize: "cover",
+          backgroundRepeat: "no-repeat",
+          background: isMobile
+            ? "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(88.89% 50% at 50% 100%, rgba(38, 217, 127, 0.10) 0%, rgba(38, 217, 127, 0.00) 100%), radial-gradient(88.89% 50% at 50% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%), #1D1E30"
+            : isTablet
+              ? "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(66.67% 50% at 50% 100%, rgba(38, 217, 127, 0.10) 0%, rgba(38, 217, 127, 0.00) 100%), radial-gradient(66.67% 50% at 50% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%), #1D1E30"
+              : "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(35.56% 50% at 50% 100%, rgba(38, 217, 127, 0.12) 0%, rgba(38, 217, 127, 0) 100%), radial-gradient(35.56% 50% at 50% 0%, rgba(71, 235, 235, 0.18) 0%, rgba(71, 235, 235, 0) 100%), #1D1E30",
+          minHeight: "100%",
+          minWidth: "100%",
+          fontFamily: "Arial",
+          color: "#FFFFFF",
+        }}
+      >
         <div
+          style={{
+            zIndex: 2,
+            position: "absolute",
+            width: isMobile ? "400px" : "800px",
+            height: "552px",
+            opacity: "0.5",
+            background:
+              "url(https://refine.ams3.cdn.digitaloceanspaces.com/assets/welcome-page-hexagon.png)",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "contain",
+            top: "0",
+            left: "50%",
+            transform: "translateX(-50%)",
+          }}
+        />
+        <div style={{ height: isMobile ? "40px" : "80px" }} />
+        <div style={{ display: "flex", justifyContent: "center" }}>
+          <div
             style={{
-                position: "fixed",
-                zIndex: 10,
-                inset: 0,
-                overflow: "auto",
-                width: "100dvw",
-                height: "100dvh",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: isMobile ? "112px 58px" : "224px 116px",
+              backgroundImage:
+                "url(https://refine.ams3.cdn.digitaloceanspaces.com/assets/refine-logo.svg)",
+              width: isMobile ? 112 : 224,
+              height: isMobile ? 58 : 116,
             }}
+          />
+        </div>
+        <div
+          style={{
+            height: isMobile ? "120px" : isTablet ? "200px" : "30vh",
+            minHeight: isMobile ? "120px" : isTablet ? "200px" : "200px",
+          }}
+        />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "16px",
+            textAlign: "center",
+          }}
+        >
+          <h1
+            style={{
+              fontSize: getHeaderFontSize(),
+              fontWeight: 700,
+              margin: "0px",
+            }}
+          >
+            Welcome Aboard!
+          </h1>
+          <h4
+            style={{
+              fontSize: getSubHeaderFontSize(),
+              fontWeight: 400,
+              margin: "0px",
+            }}
+          >
+            Your configuration is completed.
+          </h4>
+        </div>
+        <div style={{ height: "64px" }} />
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: `repeat(${getGridTemplateColumns()})`,
+            justifyContent: "center",
+            gap: "48px",
+            paddingRight: "16px",
+            paddingLeft: "16px",
+            paddingBottom: "32px",
+            maxWidth: "976px",
+            margin: "auto",
+          }}
         >
-            <div
-                style={{
-                    overflow: "hidden",
-                    position: "relative",
-                    backgroundSize: "cover",
-                    backgroundRepeat: "no-repeat",
-                    background: isMobile
-                        ? "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(88.89% 50% at 50% 100%, rgba(38, 217, 127, 0.10) 0%, rgba(38, 217, 127, 0.00) 100%), radial-gradient(88.89% 50% at 50% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%), #1D1E30"
-                        : isTablet
-                        ? "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(66.67% 50% at 50% 100%, rgba(38, 217, 127, 0.10) 0%, rgba(38, 217, 127, 0.00) 100%), radial-gradient(66.67% 50% at 50% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%), #1D1E30"
-                        : "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(35.56% 50% at 50% 100%, rgba(38, 217, 127, 0.12) 0%, rgba(38, 217, 127, 0) 100%), radial-gradient(35.56% 50% at 50% 0%, rgba(71, 235, 235, 0.18) 0%, rgba(71, 235, 235, 0) 100%), #1D1E30",
-                    minHeight: "100%",
-                    minWidth: "100%",
-                    fontFamily: "Arial",
-                    color: "#FFFFFF",
-                }}
-            >
-                <div
-                    style={{
-                        zIndex: 2,
-                        position: "absolute",
-                        width: isMobile ? "400px" : "800px",
-                        height: "552px",
-                        opacity: "0.5",
-                        background:
-                            "url(https://refine.ams3.cdn.digitaloceanspaces.com/assets/welcome-page-hexagon.png)",
-                        backgroundRepeat: "no-repeat",
-                        backgroundSize: "contain",
-                        top: "0",
-                        left: "50%",
-                        transform: "translateX(-50%)",
-                    }}
-                />
-                <div style={{ height: isMobile ? "40px" : "80px" }}></div>
-                <div style={{ display: "flex", justifyContent: "center" }}>
-                    <div
-                        style={{
-                            backgroundRepeat: "no-repeat",
-                            backgroundSize: isMobile
-                                ? "112px 58px"
-                                : "224px 116px",
-                            backgroundImage:
-                                "url(https://refine.ams3.cdn.digitaloceanspaces.com/assets/refine-logo.svg)",
-                            width: isMobile ? 112 : 224,
-                            height: isMobile ? 58 : 116,
-                        }}
-                    />
-                </div>
-                <div
-                    style={{
-                        height: isMobile
-                            ? "120px"
-                            : isTablet
-                            ? "200px"
-                            : "30vh",
-                        minHeight: isMobile
-                            ? "120px"
-                            : isTablet
-                            ? "200px"
-                            : "200px",
-                    }}
-                ></div>
-                <div
-                    style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: "16px",
-                        textAlign: "center",
-                    }}
-                >
-                    <h1
-                        style={{
-                            fontSize: getHeaderFontSize(),
-                            fontWeight: 700,
-                            margin: "0px",
-                        }}
-                    >
-                        Welcome Aboard!
-                    </h1>
-                    <h4
-                        style={{
-                            fontSize: getSubHeaderFontSize(),
-                            fontWeight: 400,
-                            margin: "0px",
-                        }}
-                    >
-                        Your configuration is completed.
-                    </h4>
-                </div>
-                <div style={{ height: "64px" }}></div>
-                <div
-                    style={{
-                        display: "grid",
-                        gridTemplateColumns: `repeat(${getGridTemplateColumns()})`,
-                        justifyContent: "center",
-                        gap: "48px",
-                        paddingRight: "16px",
-                        paddingLeft: "16px",
-                        paddingBottom: "32px",
-                        maxWidth: "976px",
-                        margin: "auto",
-                    }}
-                >
-                    {cards.map((card) => (
-                        <Card key={`welcome-page-${card.title}`} card={card} />
-                    ))}
-                </div>
-            </div>
+          {cards.map((card) => (
+            <Card key={`welcome-page-${card.title}`} card={card} />
+          ))}
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 type CardProps = {
-    card: CardInfo;
+  card: CardInfo;
 };
 
 const Card: React.FC<CardProps> = ({ card }) => {
-    const { title, description, iconUrl, link } = card;
+  const { title, description, iconUrl, link } = card;
 
-    const [isHover, setIsHover] = useState(false);
+  const [isHover, setIsHover] = useState(false);
 
-    return (
-        <div
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <a
+          onPointerEnter={() => setIsHover(true)}
+          onPointerLeave={() => setIsHover(false)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            color: "#fff",
+            textDecoration: "none",
+          }}
+          href={link}
+        >
+          <div
             style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "16px",
+              width: "16px",
+              height: "16px",
+              backgroundPosition: "center",
+              backgroundSize: "contain",
+              backgroundRepeat: "no-repeat",
+              backgroundImage: `url(${iconUrl})`,
             }}
-        >
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                }}
-            >
-                <a
-                    onPointerEnter={() => setIsHover(true)}
-                    onPointerLeave={() => setIsHover(false)}
-                    style={{
-                        display: "flex",
-                        alignItems: "center",
-                        color: "#fff",
-                        textDecoration: "none",
-                    }}
-                    href={link}
-                >
-                    <div
-                        style={{
-                            width: "16px",
-                            height: "16px",
-                            backgroundPosition: "center",
-                            backgroundSize: "contain",
-                            backgroundRepeat: "no-repeat",
-                            backgroundImage: `url(${iconUrl})`,
-                        }}
-                    />
-                    <span
-                        style={{
-                            fontSize: "16px",
-                            fontWeight: 700,
-                            marginLeft: "13px",
-                            marginRight: "14px",
-                        }}
-                    >
-                        {title}
-                    </span>
-                    <svg
-                        style={{
-                            transition:
-                                "transform 0.5s ease-in-out, opacity 0.2s ease-in-out",
-                            ...(isHover && {
-                                transform: "translateX(4px)",
-                                opacity: 1,
-                            }),
-                        }}
-                        width="12"
-                        height="8"
-                        fill="none"
-                        opacity="0.5"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M7.293.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 5H1a1 1 0 0 1 0-2h7.586L7.293 1.707a1 1 0 0 1 0-1.414Z"
-                            fill="#fff"
-                        />
-                    </svg>
-                </a>
-            </div>
-            <span
-                style={{
-                    fontSize: "12px",
-                    opacity: 0.5,
-                    lineHeight: "16px",
-                }}
-            >
-                {description}
-            </span>
-        </div>
-    );
+          />
+          <span
+            style={{
+              fontSize: "16px",
+              fontWeight: 700,
+              marginLeft: "13px",
+              marginRight: "14px",
+            }}
+          >
+            {title}
+          </span>
+          <svg
+            style={{
+              transition:
+                "transform 0.5s ease-in-out, opacity 0.2s ease-in-out",
+              ...(isHover && {
+                transform: "translateX(4px)",
+                opacity: 1,
+              }),
+            }}
+            width="12"
+            height="8"
+            fill="none"
+            opacity="0.5"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.293.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 5H1a1 1 0 0 1 0-2h7.586L7.293 1.707a1 1 0 0 1 0-1.414Z"
+              fill="#fff"
+            />
+          </svg>
+        </a>
+      </div>
+      <span
+        style={{
+          fontSize: "12px",
+          opacity: 0.5,
+          lineHeight: "16px",
+        }}
+      >
+        {description}
+      </span>
+    </div>
+  );
 };

package/src/components/pages/error/index.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 
 import {
-    useNavigation,
-    useTranslate,
-    useResource,
-    useGo,
-    useRouterType,
+  useNavigation,
+  useTranslate,
+  useResource,
+  useGo,
+  useRouterType,
 } from "@hooks";
 
 /**
@@ -15,50 +15,50 @@ import {
  * @see {@link https://refine.dev/docs/packages/documentation/routers/} for more details.
  */
 export const ErrorComponent: React.FC = () => {
-    const [errorMessage, setErrorMessage] = useState<string>();
-    const translate = useTranslate();
-    const { push } = useNavigation();
-    const go = useGo();
-    const routerType = useRouterType();
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const translate = useTranslate();
+  const { push } = useNavigation();
+  const go = useGo();
+  const routerType = useRouterType();
 
-    const { resource, action } = useResource();
+  const { resource, action } = useResource();
 
-    useEffect(() => {
-        if (resource && action) {
-            setErrorMessage(
-                translate(
-                    "pages.error.info",
-                    {
-                        action: action,
-                        resource: resource.name,
-                    },
-                    `You may have forgotten to add the "${action}" component to "${resource.name}" resource.`,
-                ),
-            );
-        }
-    }, [resource, action]);
+  useEffect(() => {
+    if (resource && action) {
+      setErrorMessage(
+        translate(
+          "pages.error.info",
+          {
+            action: action,
+            resource: resource.name,
+          },
+          `You may have forgotten to add the "${action}" component to "${resource.name}" resource.`,
+        ),
+      );
+    }
+  }, [resource, action]);
 
-    return (
-        <>
-            <h1>
-                {translate(
-                    "pages.error.404",
-                    undefined,
-                    "Sorry, the page you visited does not exist.",
-                )}
-            </h1>
-            {errorMessage && <p>{errorMessage}</p>}
-            <button
-                onClick={() => {
-                    if (routerType === "legacy") {
-                        push("/");
-                    } else {
-                        go({ to: "/" });
-                    }
-                }}
-            >
-                {translate("pages.error.backHome", undefined, "Back Home")}
-            </button>
-        </>
-    );
+  return (
+    <>
+      <h1>
+        {translate(
+          "pages.error.404",
+          undefined,
+          "Sorry, the page you visited does not exist.",
+        )}
+      </h1>
+      {errorMessage && <p>{errorMessage}</p>}
+      <button
+        onClick={() => {
+          if (routerType === "legacy") {
+            push("/");
+          } else {
+            go({ to: "/" });
+          }
+        }}
+      >
+        {translate("pages.error.backHome", undefined, "Back Home")}
+      </button>
+    </>
+  );
 };