@refinedev/antd 5.37.4 → 6.0.0

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

@@ -1,29 +1,29 @@
 import React from "react";
 import { LoginPageProps, useActiveAuthProvider } from "@refinedev/core";
 import {
-    Row,
-    Col,
-    Layout,
-    Card,
-    Typography,
-    Form,
-    Input,
-    Button,
-    Checkbox,
+  Row,
+  Col,
+  Layout,
+  Card,
+  Typography,
+  Form,
+  Input,
+  Button,
+  Checkbox,
 } from "antd";
 import { useLogin, useTranslate } from "@refinedev/core";
 
 import {
-    layoutStyles,
-    containerStyles,
-    titleStyles,
-    imageContainer,
+  layoutStyles,
+  containerStyles,
+  titleStyles,
+  imageContainer,
 } from "./styles";
 
 export interface ILoginForm {
-    username: string;
-    password: string;
-    remember: boolean;
+  username: string;
+  password: string;
+  remember: boolean;
 }
 
 /**
@@ -33,139 +33,113 @@ export interface ILoginForm {
  * @see {@link https://refine.dev/docs/api-reference/core/components/refine-config/#loginpage} for more details.
  */
 export const LoginPage: React.FC<LoginPageProps> = () => {
-    const [form] = Form.useForm<ILoginForm>();
-    const translate = useTranslate();
+  const [form] = Form.useForm<ILoginForm>();
+  const translate = useTranslate();
 
-    const authProvider = useActiveAuthProvider();
-    const { mutate: login, isLoading } = useLogin<ILoginForm>({
-        v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
-    });
+  const authProvider = useActiveAuthProvider();
+  const { mutate: login, isLoading } = useLogin<ILoginForm>({
+    v3LegacyAuthProviderCompatible: Boolean(authProvider?.isLegacy),
+  });
 
-    const CardTitle = (
-        <Typography.Title level={3} style={titleStyles}>
-            {translate("pages.login.title", "Sign in your account")}
-        </Typography.Title>
-    );
+  const CardTitle = (
+    <Typography.Title level={3} style={titleStyles}>
+      {translate("pages.login.title", "Sign in your account")}
+    </Typography.Title>
+  );
 
-    return (
-        <Layout style={layoutStyles}>
-            <Row
-                justify="center"
-                align="middle"
-                style={{
-                    height: "100vh",
+  return (
+    <Layout style={layoutStyles}>
+      <Row
+        justify="center"
+        align="middle"
+        style={{
+          height: "100vh",
+        }}
+      >
+        <Col xs={22}>
+          <div style={containerStyles}>
+            <div style={imageContainer}>
+              <img
+                src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+                alt="Refine Logo"
+              />
+            </div>
+            <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
+              <Form<ILoginForm>
+                layout="vertical"
+                form={form}
+                onFinish={(values) => {
+                  login(values);
                 }}
-            >
-                <Col xs={22}>
-                    <div style={containerStyles}>
-                        <div style={imageContainer}>
-                            <img
-                                src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
-                                alt="Refine Logo"
-                            />
-                        </div>
-                        <Card title={CardTitle} headStyle={{ borderBottom: 0 }}>
-                            <Form<ILoginForm>
-                                layout="vertical"
-                                form={form}
-                                onFinish={(values) => {
-                                    login(values);
-                                }}
-                                requiredMark={false}
-                                initialValues={{
-                                    remember: false,
-                                }}
-                            >
-                                <Form.Item
-                                    name="username"
-                                    label={translate(
-                                        "pages.login.username",
-                                        "Username",
-                                    )}
-                                    rules={[{ required: true }]}
-                                >
-                                    <Input
-                                        size="large"
-                                        placeholder={translate(
-                                            "pages.login.username",
-                                            "Username",
-                                        )}
-                                    />
-                                </Form.Item>
-                                <Form.Item
-                                    name="password"
-                                    label={translate(
-                                        "pages.login.password",
-                                        "Password",
-                                    )}
-                                    rules={[{ required: true }]}
-                                    style={{ marginBottom: "12px" }}
-                                >
-                                    <Input
-                                        type="password"
-                                        placeholder="●●●●●●●●"
-                                        size="large"
-                                    />
-                                </Form.Item>
-                                <div style={{ marginBottom: "12px" }}>
-                                    <Form.Item
-                                        name="remember"
-                                        valuePropName="checked"
-                                        noStyle
-                                    >
-                                        <Checkbox
-                                            style={{
-                                                fontSize: "12px",
-                                            }}
-                                        >
-                                            {translate(
-                                                "pages.login.remember",
-                                                "Remember me",
-                                            )}
-                                        </Checkbox>
-                                    </Form.Item>
+                requiredMark={false}
+                initialValues={{
+                  remember: false,
+                }}
+              >
+                <Form.Item
+                  name="username"
+                  label={translate("pages.login.username", "Username")}
+                  rules={[{ required: true }]}
+                >
+                  <Input
+                    size="large"
+                    placeholder={translate("pages.login.username", "Username")}
+                  />
+                </Form.Item>
+                <Form.Item
+                  name="password"
+                  label={translate("pages.login.password", "Password")}
+                  rules={[{ required: true }]}
+                  style={{ marginBottom: "12px" }}
+                >
+                  <Input type="password" placeholder="●●●●●●●●" size="large" />
+                </Form.Item>
+                <div style={{ marginBottom: "12px" }}>
+                  <Form.Item name="remember" valuePropName="checked" noStyle>
+                    <Checkbox
+                      style={{
+                        fontSize: "12px",
+                      }}
+                    >
+                      {translate("pages.login.remember", "Remember me")}
+                    </Checkbox>
+                  </Form.Item>
 
-                                    <a
-                                        style={{
-                                            float: "right",
-                                            fontSize: "12px",
-                                        }}
-                                        href="#"
-                                    >
-                                        {translate(
-                                            "pages.login.forgotPassword",
-                                            "Forgot password?",
-                                        )}
-                                    </a>
-                                </div>
-                                <Button
-                                    type="primary"
-                                    size="large"
-                                    htmlType="submit"
-                                    loading={isLoading}
-                                    block
-                                >
-                                    {translate("pages.login.signin", "Sign in")}
-                                </Button>
-                            </Form>
-                            <div style={{ marginTop: 8 }}>
-                                <Typography.Text style={{ fontSize: 12 }}>
-                                    {translate(
-                                        "pages.login.noAccount",
-                                        "Don’t have an account?",
-                                    )}{" "}
-                                    <a href="#" style={{ fontWeight: "bold" }}>
-                                        {translate(
-                                            "pages.login.signup",
-                                            "Sign up",
-                                        )}
-                                    </a>
-                                </Typography.Text>
-                            </div>
-                        </Card>
-                    </div>
-                </Col>
-            </Row>
-        </Layout>
-    );
+                  <a
+                    style={{
+                      float: "right",
+                      fontSize: "12px",
+                    }}
+                    href="#"
+                  >
+                    {translate(
+                      "pages.login.forgotPassword",
+                      "Forgot password?",
+                    )}
+                  </a>
+                </div>
+                <Button
+                  type="primary"
+                  size="large"
+                  htmlType="submit"
+                  loading={isLoading}
+                  block
+                >
+                  {translate("pages.login.signin", "Sign in")}
+                </Button>
+              </Form>
+              <div style={{ marginTop: 8 }}>
+                <Typography.Text style={{ fontSize: 12 }}>
+                  {translate("pages.login.noAccount", "Don’t have an account?")}{" "}
+                  <a href="#" style={{ fontWeight: "bold" }}>
+                    {translate("pages.login.signup", "Sign up")}
+                  </a>
+                </Typography.Text>
+              </div>
+            </Card>
+          </div>
+        </Col>
+      </Row>
+    </Layout>
+  );
 };

package/src/components/pages/login/styles.ts

@@ -1,25 +1,25 @@
 import { CSSProperties } from "react";
 
 export const layoutStyles: CSSProperties = {
-    background: `radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)`,
-    backgroundSize: "cover",
+  background: "radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%)",
+  backgroundSize: "cover",
 };
 
 export const containerStyles: CSSProperties = {
-    maxWidth: "408px",
-    margin: "auto",
+  maxWidth: "408px",
+  margin: "auto",
 };
 
 export const titleStyles: CSSProperties = {
-    textAlign: "center",
-    color: "#626262",
-    fontSize: "30px",
-    letterSpacing: "-0.04em",
+  textAlign: "center",
+  color: "#626262",
+  fontSize: "30px",
+  letterSpacing: "-0.04em",
 };
 
 export const imageContainer: CSSProperties = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: "28px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginBottom: "28px",
 };

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

@@ -4,33 +4,33 @@ import { Row, Col, Typography, Space, Button } from "antd";
 import { ReadOutlined, FolderOutlined, TeamOutlined } from "@ant-design/icons";
 
 const styles: { [key: string]: React.CSSProperties } = {
-    root: {
-        height: "100vh",
-        backgroundImage:
-            "url('https://refine.ams3.cdn.digitaloceanspaces.com/login-background/background.png')",
-        backgroundSize: "cover",
-        backgroundColor: "#331049",
-    },
-    title: {
-        color: "white",
-        fontWeight: 800,
-        fontSize: "64px",
-        marginBottom: "8px",
-    },
-    p1: {
-        color: "white",
-        marginBottom: 0,
-        fontSize: "20px",
-        fontWeight: "bold",
-    },
-    p2: {
-        color: "white",
-        fontSize: "20px",
-    },
-    code: {
-        backgroundColor: "white",
-        color: "#331049",
-    },
+  root: {
+    height: "100vh",
+    backgroundImage:
+      "url('https://refine.ams3.cdn.digitaloceanspaces.com/login-background/background.png')",
+    backgroundSize: "cover",
+    backgroundColor: "#331049",
+  },
+  title: {
+    color: "white",
+    fontWeight: 800,
+    fontSize: "64px",
+    marginBottom: "8px",
+  },
+  p1: {
+    color: "white",
+    marginBottom: 0,
+    fontSize: "20px",
+    fontWeight: "bold",
+  },
+  p2: {
+    color: "white",
+    fontSize: "20px",
+  },
+  code: {
+    backgroundColor: "white",
+    color: "#331049",
+  },
 };
 
 /**
@@ -39,57 +39,49 @@ const styles: { [key: string]: React.CSSProperties } = {
  * @deprecated `ReadyPage` is deprecated and will be removed in the next major release.
  */
 export const ReadyPage: React.FC<RefineReadyPageProps> = () => {
-    return (
-        <Row align="middle" justify="center" style={styles.root}>
-            <Col style={{ textAlign: "center" }}>
-                <img
-                    style={{ marginBottom: "48px" }}
-                    src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
-                    alt="Refine Logo"
-                />
-                <Typography.Title style={styles.title}>
-                    Welcome on board
-                </Typography.Title>
-                <p style={styles.p1}>Your configuration is completed.</p>
-                <p style={styles.p2}>
-                    Now you can get started by adding your resources to the{" "}
-                    <code style={styles.code}>{`resources`}</code> property of{" "}
-                    <code style={styles.code}>{`<Refine>`}</code>
-                </p>
-                <Space
-                    size="large"
-                    wrap
-                    style={{ marginTop: "70px", justifyContent: "center" }}
-                >
-                    <a
-                        href="https://refine.dev"
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        <Button size="large" icon={<ReadOutlined />}>
-                            Documentation
-                        </Button>
-                    </a>
-                    <a
-                        href="https://refine.dev/examples"
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        <Button size="large" icon={<FolderOutlined />}>
-                            Examples
-                        </Button>
-                    </a>
-                    <a
-                        href="https://discord.gg/refine"
-                        target="_blank"
-                        rel="noreferrer"
-                    >
-                        <Button size="large" icon={<TeamOutlined />}>
-                            Community
-                        </Button>
-                    </a>
-                </Space>
-            </Col>
-        </Row>
-    );
+  return (
+    <Row align="middle" justify="center" style={styles.root}>
+      <Col style={{ textAlign: "center" }}>
+        <img
+          style={{ marginBottom: "48px" }}
+          src="https://refine.ams3.cdn.digitaloceanspaces.com/logo/refine.svg"
+          alt="Refine Logo"
+        />
+        <Typography.Title style={styles.title}>
+          Welcome on board
+        </Typography.Title>
+        <p style={styles.p1}>Your configuration is completed.</p>
+        <p style={styles.p2}>
+          Now you can get started by adding your resources to the{" "}
+          <code style={styles.code}>{"resources"}</code> property of{" "}
+          <code style={styles.code}>{"<Refine>"}</code>
+        </p>
+        <Space
+          size="large"
+          wrap
+          style={{ marginTop: "70px", justifyContent: "center" }}
+        >
+          <a href="https://refine.dev" target="_blank" rel="noreferrer">
+            <Button size="large" icon={<ReadOutlined />}>
+              Documentation
+            </Button>
+          </a>
+          <a
+            href="https://refine.dev/examples"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <Button size="large" icon={<FolderOutlined />}>
+              Examples
+            </Button>
+          </a>
+          <a href="https://discord.gg/refine" target="_blank" rel="noreferrer">
+            <Button size="large" icon={<TeamOutlined />}>
+              Community
+            </Button>
+          </a>
+        </Space>
+      </Col>
+    </Row>
+  );
 };

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

@@ -6,5 +6,5 @@ import { WelcomePage as WelcomePageFromCore } from "@refinedev/core";
  * @deprecated `WelcomePage` is deprecated. Use `WelcomePage` from `@refinedev/core` instead.
  */
 export const WelcomePage: React.FC = () => {
-    return <WelcomePageFromCore />;
+  return <WelcomePageFromCore />;
 };