@refinedev/core 4.44.12 → 4.45.1

package/dist/interfaces/autoSave.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { BaseRecord, HttpError, UpdateResponse } from ".";
 import { UseUpdateReturnType } from "../hooks/data/useUpdate";
 export declare type AutoSaveProps<TVariables> = {
@@ -13,6 +14,7 @@ export declare type AutoSaveReturnType<TData extends BaseRecord = BaseRecord, TE
     autoSaveProps: Pick<UseUpdateReturnType<TData, TError, TVariables>, "data" | "error" | "status">;
     onFinishAutoSave: (values: TVariables) => Promise<UpdateResponse<TData> | void> | void;
 };
+export declare type AutoSaveIndicatorElements = Partial<Record<"success" | "error" | "loading" | "idle", React.ReactNode>>;
 export declare type AutoSaveIndicatorProps<TData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables = {}> = {
     /**
      * The data returned by the update request.
@@ -26,5 +28,9 @@ export declare type AutoSaveIndicatorProps<TData extends BaseRecord = BaseRecord
      * The status of the update request.
      */
     status: UseUpdateReturnType<TData, TError, TVariables>["status"];
+    /**
+     * The elements to display for each status.
+     */
+    elements?: AutoSaveIndicatorElements;
 };
 //# sourceMappingURL=autoSave.d.ts.map

package/dist/interfaces/autoSave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autoSave.d.ts","sourceRoot":"","sources":["../../src/interfaces/autoSave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,oBAAY,aAAa,CAAC,UAAU,IAAI;IACpC,QAAQ,CAAC,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC;QAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;CACL,CAAC;AAEF,oBAAY,kBAAkB,CAC1B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,GAAG,EAAE,IACf;IACA,aAAa,EAAE,IAAI,CACf,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAC9C,MAAM,GAAG,OAAO,GAAG,QAAQ,CAC9B,CAAC;IACF,gBAAgB,EAAE,CACd,MAAM,EAAE,UAAU,KACjB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD,CAAC;AAEF,oBAAY,sBAAsB,CAC9B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,GAAG,EAAE,IACf;IACA;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9D;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IAChE;;OAEG;IACH,MAAM,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;CACpE,CAAC"}
+{"version":3,"file":"autoSave.d.ts","sourceRoot":"","sources":["../../src/interfaces/autoSave.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,oBAAY,aAAa,CAAC,UAAU,IAAI;IACpC,QAAQ,CAAC,EAAE;QACP,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC;QAC9C,mBAAmB,CAAC,EAAE,OAAO,CAAC;QAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;CACL,CAAC;AAEF,oBAAY,kBAAkB,CAC1B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,GAAG,EAAE,IACf;IACA,aAAa,EAAE,IAAI,CACf,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAC9C,MAAM,GAAG,OAAO,GAAG,QAAQ,CAC9B,CAAC;IACF,gBAAgB,EAAE,CACd,MAAM,EAAE,UAAU,KACjB,OAAO,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD,CAAC;AAEF,oBAAY,yBAAyB,GAAG,OAAO,CAC3C,MAAM,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CACpE,CAAC;AAEF,oBAAY,sBAAsB,CAC9B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,MAAM,SAAS,SAAS,GAAG,SAAS,EACpC,UAAU,GAAG,EAAE,IACf;IACA;;OAEG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9D;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IAChE;;OAEG;IACH,MAAM,EAAE,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;CACxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.44.12",
+  "version": "4.45.1",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "sideEffects": false,

package/refine.config.js

@@ -73,6 +73,16 @@ module.exports = {
                     },
                 ],
             },
+            {
+                group: "Other",
+                label: "AutoSaveIndicator",
+                files: [
+                    {
+                        src: "./src/components/autoSaveIndicator/index.tsx",
+                        dest: "./components/autoSaveIndicator.tsx",
+                    },
+                ],
+            },
         ],
         transform: (content) => {
             let newContent = content;

package/src/components/autoSaveIndicator/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { AutoSaveIndicatorProps } from "../../interfaces";
+import { useTranslate } from "@hooks/translate";
+
+export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
+    status,
+    elements: {
+        success = <Message key="autoSave.success" defaultMessage="saved" />,
+        error = (
+            <Message key="autoSave.error" defaultMessage="auto save failure" />
+        ),
+        loading = <Message key="autoSave.loading" defaultMessage="saving..." />,
+        idle = (
+            <Message key="autoSave.idle" defaultMessage="waiting for changes" />
+        ),
+    } = {},
+}) => {
+    switch (status) {
+        case "success":
+            return <>{success}</>;
+        case "error":
+            return <>{error}</>;
+        case "loading":
+            return <>{loading}</>;
+        default:
+            return <>{idle}</>;
+    }
+};
+
+const Message = ({
+    key,
+    defaultMessage,
+}: {
+    key: string;
+    defaultMessage: string;
+}) => {
+    const translate = useTranslate();
+
+    return <span>{translate(key, defaultMessage)}</span>;
+};

package/src/components/gh-banner/index.tsx

@@ -1,6 +1,9 @@
-import React, { useEffect } from "react";
+import React, { SVGProps, useEffect } from "react";
 import { CSSRules } from "./styles";
 
+const text =
+    "If you find Refine useful, you can contribute to its growth by giving it a star on GitHub";
+
 export const GitHubBanner = () => {
     useEffect(() => {
         const styleTag = document.createElement("style");
@@ -12,69 +15,256 @@ export const GitHubBanner = () => {
 
     return (
         <div
-            className="banner"
+            className="banner bg-top-announcement"
             style={{
-                flexDirection: "row",
-                justifyContent: "center",
-                alignItems: "center",
-                position: "relative",
-                padding: "8px 16px",
-                backgroundColor: "#0d0d0d",
-                borderBottom: "1px solid rgba(255, 255, 255, 0.15)",
+                width: "100%",
+                height: "48px",
             }}
         >
-            {/* sider offset for center alignment */}
             <div
                 style={{
-                    width: "200px",
+                    position: "relative",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    paddingLeft: "200px",
+                    width: "100%",
+                    maxWidth: "100vw",
+                    height: "100%",
+                    borderBottom: "1px solid #47ebeb26",
                 }}
-            />
-            <a
-                className="gh-link"
-                href="https://s.refine.dev/github-support"
-                target="_blank"
-                rel="noreferrer"
             >
                 <div
-                    className="content"
+                    className="top-announcement-mask"
                     style={{
-                        position: "relative",
-                        zIndex: 2,
-                        color: "#fff",
-                        display: "flex",
-                        flexDirection: "row",
-                        gap: "8px",
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        width: "100%",
+                        height: "100%",
+                        borderBottom: "1px solid #47ebeb26",
                     }}
                 >
-                    <span
-                        className="wizard"
+                    <div
                         style={{
+                            position: "relative",
+                            width: "960px",
+                            height: "100%",
                             display: "flex",
-                            flexDirection: "row",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            width: "32px",
-                            height: "32px",
-                            fontSize: "32px",
-                            lineHeight: "32px",
+                            justifyContent: "space-between",
+                            margin: "0 auto",
                         }}
                     >
-                        🧙‍♂️
-                    </span>
-                    <span
-                        className="text"
-                        style={{
-                            padding: "4px 0",
-                            fontSize: "16px",
-                            lineHeight: "24px",
-                            textShadow: "0px 0px 4px rgba(255, 255, 255, 0.5)",
-                        }}
-                    >
-                        refine grants your wishes! Please give us a ⭐️ on
-                        GitHub to keep the magic going.
-                    </span>
+                        <div
+                            style={{
+                                width: "calc(50% - 300px)",
+                                height: "100%",
+                                position: "relative",
+                            }}
+                        >
+                            <GlowSmall
+                                style={{
+                                    animationDelay: "1.5s",
+                                    position: "absolute",
+                                    top: "2px",
+                                    right: "220px",
+                                }}
+                                id={"1"}
+                            />
+                            <GlowSmall
+                                style={{
+                                    animationDelay: "1s",
+                                    position: "absolute",
+                                    top: "8px",
+                                    right: "100px",
+                                    transform: "rotate(180deg)",
+                                }}
+                                id={"2"}
+                            />
+                            <GlowBig
+                                style={{
+                                    position: "absolute",
+                                    right: "10px",
+                                }}
+                                id={"3"}
+                            />
+                        </div>
+
+                        <div
+                            style={{
+                                width: "calc(50% - 300px)",
+                                height: "100%",
+                                position: "relative",
+                            }}
+                        >
+                            <GlowSmall
+                                style={{
+                                    animationDelay: "2s",
+                                    position: "absolute",
+                                    top: "6px",
+                                    right: "180px",
+                                    transform: "rotate(180deg)",
+                                }}
+                                id={"4"}
+                            />
+                            <GlowSmall
+                                style={{
+                                    animationDelay: "0.5s",
+                                    transitionDelay: "1.3s",
+                                    position: "absolute",
+                                    top: "2px",
+                                    right: "40px",
+                                }}
+                                id={"5"}
+                            />
+                            <GlowBig
+                                style={{
+                                    position: "absolute",
+                                    right: "-70px",
+                                }}
+                                id={"6"}
+                            />
+                        </div>
+                    </div>
                 </div>
-            </a>
+                <Text text={text} />
+            </div>
         </div>
     );
 };
+
+const Text = ({ text }: { text: string }) => {
+    return (
+        <a
+            className="gh-link"
+            href="https://s.refine.dev/github-support"
+            target="_blank"
+            rel="noreferrer"
+            style={{
+                position: "absolute",
+                height: "100%",
+                padding: "0 60px",
+                display: "flex",
+                flexWrap: "nowrap",
+                whiteSpace: "nowrap",
+                justifyContent: "center",
+                alignItems: "center",
+                backgroundImage:
+                    "linear-gradient(90deg, rgba(31, 63, 72, 0.00) 0%, #1F3F48 10%, #1F3F48 90%, rgba(31, 63, 72, 0.00) 100%)",
+            }}
+        >
+            <div
+                style={{
+                    color: "#fff",
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: "8px",
+                }}
+            >
+                <span
+                    style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }}
+                >
+                    ⭐️
+                </span>
+                <span
+                    className="text"
+                    style={{
+                        fontSize: "16px",
+                        lineHeight: "24px",
+                    }}
+                >
+                    {text}
+                </span>
+                <span
+                    style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }}
+                >
+                    ⭐️
+                </span>
+            </div>
+        </a>
+    );
+};
+
+const GlowSmall = ({ style, ...props }: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={80}
+            height={40}
+            fill="none"
+            style={{
+                opacity: 1,
+                animation:
+                    "top-announcement-glow 1s ease-in-out infinite alternate",
+                ...style,
+            }}
+        >
+            <circle
+                cx={40}
+                r={40}
+                fill={`url(#${props.id}-a)`}
+                fillOpacity={0.5}
+            />
+            <defs>
+                <radialGradient
+                    id={`${props.id}-a`}
+                    cx={0}
+                    cy={0}
+                    r={1}
+                    gradientTransform="matrix(0 40 -40 0 40 0)"
+                    gradientUnits="userSpaceOnUse"
+                >
+                    <stop stopColor="#47EBEB" />
+                    <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
+                </radialGradient>
+            </defs>
+        </svg>
+    );
+};
+
+const GlowBig = ({ style, ...props }: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={120}
+        height={48}
+        fill="none"
+        {...props}
+        style={{
+            opacity: 1,
+            animation:
+                "top-announcement-glow 1s ease-in-out infinite alternate",
+            ...style,
+        }}
+    >
+        <circle
+            cx={60}
+            cy={24}
+            r={60}
+            fill={`url(#${props.id}-a)`}
+            fillOpacity={0.5}
+        />
+        <defs>
+            <radialGradient
+                id={`${props.id}-a`}
+                cx={0}
+                cy={0}
+                r={1}
+                gradientTransform="matrix(0 60 -60 0 60 24)"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#47EBEB" />
+                <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
+            </radialGradient>
+        </defs>
+    </svg>
+);

package/src/components/gh-banner/styles.ts

@@ -1,4 +1,24 @@
 export const CSSRules = [
+    `
+    .bg-top-announcement {
+        border-bottom: 1px solid rgba(71, 235, 235, 0.15);
+        background: radial-gradient(
+                218.19% 111.8% at 0% 0%,
+                rgba(71, 235, 235, 0.1) 0%,
+                rgba(71, 235, 235, 0.2) 100%
+            ),
+            #14141f;
+    }
+    `,
+    `
+    .top-announcement-mask {
+        mask-image: url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/hexagon.svg);
+        -webkit-mask-image: url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/hexagon.svg);
+        mask-repeat: repeat;
+        -webkit-mask-repeat: repeat;
+        background: rgba(71, 235, 235, 0.25);
+    }
+    `,
     `
     .banner {
         display: flex;
@@ -7,60 +27,20 @@ export const CSSRules = [
         }
     }`,
     `
-    .banner::before,
-    .banner::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-    `,
-    `
-    .banner::before {
-        background-image: linear-gradient(
-            270deg,
-            rgba(255, 76, 77, 0.35) 0%,
-            rgba(255, 153, 51, 0.35) 12.5%,
-            rgba(255, 191, 0, 0.35) 25%,
-            rgba(38, 217, 127, 0.35) 37.5%,
-            rgba(71, 235, 235, 0.35) 50%,
-            rgba(0, 128, 255, 0.35) 62.5%,
-            rgba(51, 51, 255, 0.35) 75%,
-            rgba(128, 0, 255, 0.35) 87.5%,
-            rgba(237, 94, 201, 0.35) 100%
-        );
-        background-position: 0 0;
-        background-size: 200% 100%;
-        background-repeat: repeat-x;
-        animation: bgpos 4s linear infinite;
-      }
-    `,
-    `
-    .banner::after {
-        background: linear-gradient(
-          180deg,
-          rgba(13, 13, 13, 0.85) 0%,
-          rgba(13, 13, 13, 0) 100%
-        );
+    .gh-link, .gh-link:hover, .gh-link:active, .gh-link:visited, .gh-link:focus {
+        text-decoration: none;
+        z-index: 9;
     }
     `,
     `
-    @keyframes bgpos {
+    @keyframes top-announcement-glow {
         0% {
-            background-position: 0 0;
+            opacity: 1;
         }
 
         100% {
-            background-position: -200% 0;
+            opacity: 0;
         }
     }
     `,
-    `
-    .gh-link, .gh-link:hover, .gh-link:active, .gh-link:visited, .gh-link:focus {
-        text-decoration: none;
-        z-index: 9;
-    }
-    `,
 ];

package/src/components/index.ts

@@ -7,3 +7,4 @@ export { Authenticated } from "./authenticated";
 export { RouteChangeHandler } from "./routeChangeHandler";
 export { CanAccess, CanAccessProps } from "./canAccess";
 export { GitHubBanner } from "./gh-banner";
+export { AutoSaveIndicator } from "./autoSaveIndicator";

package/src/interfaces/autoSave.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { BaseRecord, HttpError, UpdateResponse } from ".";
 import { UseUpdateReturnType } from "../hooks/data/useUpdate";
 
@@ -25,6 +26,10 @@ export type AutoSaveReturnType<
     ) => Promise<UpdateResponse<TData> | void> | void;
 };
 
+export type AutoSaveIndicatorElements = Partial<
+    Record<"success" | "error" | "loading" | "idle", React.ReactNode>
+>;
+
 export type AutoSaveIndicatorProps<
     TData extends BaseRecord = BaseRecord,
     TError extends HttpError = HttpError,
@@ -42,4 +47,8 @@ export type AutoSaveIndicatorProps<
      * The status of the update request.
      */
     status: UseUpdateReturnType<TData, TError, TVariables>["status"];
+    /**
+     * The elements to display for each status.
+     */
+    elements?: AutoSaveIndicatorElements;
 };