@refinedev/core 4.45.0 → 4.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +82 -0
  2. package/README.md +131 -123
  3. package/dist/components/authenticated/index.d.ts +34 -0
  4. package/dist/components/authenticated/index.d.ts.map +1 -1
  5. package/dist/components/gh-banner/index.d.ts.map +1 -1
  6. package/dist/components/gh-banner/styles.d.ts.map +1 -1
  7. package/dist/components/pages/auth/components/login/index.d.ts.map +1 -1
  8. package/dist/components/pages/auth/components/register/index.d.ts.map +1 -1
  9. package/dist/components/pages/welcome/index.d.ts.map +1 -1
  10. package/dist/esm/index.js +30 -49
  11. package/dist/esm/index.js.map +1 -1
  12. package/dist/hooks/data/useMany.d.ts +1 -1
  13. package/dist/hooks/data/useMany.d.ts.map +1 -1
  14. package/dist/hooks/data/useOne.d.ts +1 -1
  15. package/dist/hooks/data/useOne.d.ts.map +1 -1
  16. package/dist/hooks/form/useForm.d.ts +1 -1
  17. package/dist/hooks/form/useForm.d.ts.map +1 -1
  18. package/dist/hooks/show/useShow.d.ts +3 -3
  19. package/dist/hooks/show/useShow.d.ts.map +1 -1
  20. package/dist/hooks/useSelect/index.d.ts +3 -3
  21. package/dist/hooks/useSelect/index.d.ts.map +1 -1
  22. package/dist/iife/index.js +30 -49
  23. package/dist/iife/index.js.map +1 -1
  24. package/dist/index.js +30 -49
  25. package/dist/index.js.map +1 -1
  26. package/dist/interfaces/auth.d.ts +12 -0
  27. package/dist/interfaces/auth.d.ts.map +1 -1
  28. package/package.json +1 -1
  29. package/src/components/authenticated/index.tsx +118 -139
  30. package/src/components/gh-banner/index.tsx +238 -55
  31. package/src/components/gh-banner/styles.ts +26 -46
  32. package/src/components/pages/auth/components/login/index.tsx +110 -84
  33. package/src/components/pages/auth/components/register/index.tsx +88 -65
  34. package/src/components/pages/welcome/index.tsx +125 -124
  35. package/src/hooks/auth/useLogin/index.ts +4 -4
  36. package/src/hooks/auth/useLogout/index.ts +4 -4
  37. package/src/hooks/auth/useRegister/index.ts +5 -4
  38. package/src/hooks/data/useMany.ts +1 -1
  39. package/src/hooks/data/useOne.ts +1 -1
  40. package/src/hooks/form/useForm.ts +1 -1
  41. package/src/hooks/show/useShow.ts +3 -3
  42. package/src/hooks/useSelect/index.ts +3 -2
  43. package/src/interfaces/auth.tsx +12 -0
package/src/components/gh-banner/index.tsx CHANGED
@@ -1,6 +1,9 @@
1
- import React, { useEffect } from "react";
1
+ import React, { SVGProps, useEffect } from "react";
2
2
  import { CSSRules } from "./styles";
3
3
 
4
+ const text =
5
+ "If you find Refine useful, you can contribute to its growth by giving it a star on GitHub";
6
+
4
7
  export const GitHubBanner = () => {
5
8
  useEffect(() => {
6
9
  const styleTag = document.createElement("style");
@@ -10,78 +13,258 @@ export const GitHubBanner = () => {
10
13
  );
11
14
  }, []);
12
15
 
13
-
14
- const texts = ["Be a part of our journey. Star Refine on GitHub!", "Join our community. Star Refine on GitHub!", "Let's elevate Refine together. Star us on GitHub!", "Enhance Refine's reach. Give us a star on GitHub!"]
15
-
16
16
  return (
17
17
  <div
18
- className="banner"
18
+ className="banner bg-top-announcement"
19
19
  style={{
20
- flexDirection: "row",
21
- justifyContent: "center",
22
- alignItems: "center",
23
- position: "relative",
24
- padding: "8px 16px",
25
- backgroundColor: "#0d0d0d",
26
- borderBottom: "1px solid rgba(255, 255, 255, 0.15)",
20
+ width: "100%",
21
+ height: "48px",
27
22
  }}
28
23
  >
29
- {/* sider offset for center alignment */}
30
24
  <div
31
25
  style={{
32
- width: "200px",
26
+ position: "relative",
27
+ display: "flex",
28
+ justifyContent: "center",
29
+ alignItems: "center",
30
+ paddingLeft: "200px",
31
+ width: "100%",
32
+ maxWidth: "100vw",
33
+ height: "100%",
34
+ borderBottom: "1px solid #47ebeb26",
33
35
  }}
34
- />
35
- <a
36
- className="gh-link"
37
- href="https://s.refine.dev/github-support"
38
- target="_blank"
39
- rel="noreferrer"
40
36
  >
41
37
  <div
42
- className="content"
38
+ className="top-announcement-mask"
43
39
  style={{
44
- position: "relative",
45
- zIndex: 2,
46
- color: "#fff",
47
- display: "flex",
48
- flexDirection: "row",
49
- gap: "8px",
40
+ position: "absolute",
41
+ left: 0,
42
+ top: 0,
43
+ width: "100%",
44
+ height: "100%",
45
+ borderBottom: "1px solid #47ebeb26",
50
46
  }}
51
47
  >
52
- <span
48
+ <div
53
49
  style={{
50
+ position: "relative",
51
+ width: "960px",
52
+ height: "100%",
54
53
  display: "flex",
55
- flexDirection: "row",
56
- justifyContent: "center",
57
- alignItems: "center",
58
- }}
59
- >
60
- ⭐️
61
- </span>
62
- <span
63
- className="text"
64
- style={{
65
- padding: "4px 0",
66
- fontSize: "16px",
67
- lineHeight: "24px",
68
- textShadow: "0px 0px 4px rgba(255, 255, 255, 0.5)",
54
+ justifyContent: "space-between",
55
+ margin: "0 auto",
69
56
  }}
70
57
  >
71
- {texts[Math.floor(Math.random() * texts.length)]}
72
- </span>
73
- <span
74
- style={{
75
- display: "flex",
76
- flexDirection: "row",
77
- justifyContent: "center",
78
- alignItems: "center",
79
- }}
80
- >
81
- ⭐️
82
- </span>
58
+ <div
59
+ style={{
60
+ width: "calc(50% - 300px)",
61
+ height: "100%",
62
+ position: "relative",
63
+ }}
64
+ >
65
+ <GlowSmall
66
+ style={{
67
+ animationDelay: "1.5s",
68
+ position: "absolute",
69
+ top: "2px",
70
+ right: "220px",
71
+ }}
72
+ id={"1"}
73
+ />
74
+ <GlowSmall
75
+ style={{
76
+ animationDelay: "1s",
77
+ position: "absolute",
78
+ top: "8px",
79
+ right: "100px",
80
+ transform: "rotate(180deg)",
81
+ }}
82
+ id={"2"}
83
+ />
84
+ <GlowBig
85
+ style={{
86
+ position: "absolute",
87
+ right: "10px",
88
+ }}
89
+ id={"3"}
90
+ />
91
+ </div>
92
+
93
+ <div
94
+ style={{
95
+ width: "calc(50% - 300px)",
96
+ height: "100%",
97
+ position: "relative",
98
+ }}
99
+ >
100
+ <GlowSmall
101
+ style={{
102
+ animationDelay: "2s",
103
+ position: "absolute",
104
+ top: "6px",
105
+ right: "180px",
106
+ transform: "rotate(180deg)",
107
+ }}
108
+ id={"4"}
109
+ />
110
+ <GlowSmall
111
+ style={{
112
+ animationDelay: "0.5s",
113
+ transitionDelay: "1.3s",
114
+ position: "absolute",
115
+ top: "2px",
116
+ right: "40px",
117
+ }}
118
+ id={"5"}
119
+ />
120
+ <GlowBig
121
+ style={{
122
+ position: "absolute",
123
+ right: "-70px",
124
+ }}
125
+ id={"6"}
126
+ />
127
+ </div>
128
+ </div>
83
129
  </div>
84
- </a>
130
+ <Text text={text} />
131
+ </div>
85
132
  </div>
86
133
  );
87
134
  };
135
+
136
+ const Text = ({ text }: { text: string }) => {
137
+ return (
138
+ <a
139
+ className="gh-link"
140
+ href="https://s.refine.dev/github-support"
141
+ target="_blank"
142
+ rel="noreferrer"
143
+ style={{
144
+ position: "absolute",
145
+ height: "100%",
146
+ padding: "0 60px",
147
+ display: "flex",
148
+ flexWrap: "nowrap",
149
+ whiteSpace: "nowrap",
150
+ justifyContent: "center",
151
+ alignItems: "center",
152
+ backgroundImage:
153
+ "linear-gradient(90deg, rgba(31, 63, 72, 0.00) 0%, #1F3F48 10%, #1F3F48 90%, rgba(31, 63, 72, 0.00) 100%)",
154
+ }}
155
+ >
156
+ <div
157
+ style={{
158
+ color: "#fff",
159
+ display: "flex",
160
+ flexDirection: "row",
161
+ gap: "8px",
162
+ }}
163
+ >
164
+ <span
165
+ style={{
166
+ display: "flex",
167
+ flexDirection: "row",
168
+ justifyContent: "center",
169
+ alignItems: "center",
170
+ }}
171
+ >
172
+ ⭐️
173
+ </span>
174
+ <span
175
+ className="text"
176
+ style={{
177
+ fontSize: "16px",
178
+ lineHeight: "24px",
179
+ }}
180
+ >
181
+ {text}
182
+ </span>
183
+ <span
184
+ style={{
185
+ display: "flex",
186
+ flexDirection: "row",
187
+ justifyContent: "center",
188
+ alignItems: "center",
189
+ }}
190
+ >
191
+ ⭐️
192
+ </span>
193
+ </div>
194
+ </a>
195
+ );
196
+ };
197
+
198
+ const GlowSmall = ({ style, ...props }: SVGProps<SVGSVGElement>) => {
199
+ return (
200
+ <svg
201
+ xmlns="http://www.w3.org/2000/svg"
202
+ width={80}
203
+ height={40}
204
+ fill="none"
205
+ style={{
206
+ opacity: 1,
207
+ animation:
208
+ "top-announcement-glow 1s ease-in-out infinite alternate",
209
+ ...style,
210
+ }}
211
+ >
212
+ <circle
213
+ cx={40}
214
+ r={40}
215
+ fill={`url(#${props.id}-a)`}
216
+ fillOpacity={0.5}
217
+ />
218
+ <defs>
219
+ <radialGradient
220
+ id={`${props.id}-a`}
221
+ cx={0}
222
+ cy={0}
223
+ r={1}
224
+ gradientTransform="matrix(0 40 -40 0 40 0)"
225
+ gradientUnits="userSpaceOnUse"
226
+ >
227
+ <stop stopColor="#47EBEB" />
228
+ <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
229
+ </radialGradient>
230
+ </defs>
231
+ </svg>
232
+ );
233
+ };
234
+
235
+ const GlowBig = ({ style, ...props }: SVGProps<SVGSVGElement>) => (
236
+ <svg
237
+ xmlns="http://www.w3.org/2000/svg"
238
+ width={120}
239
+ height={48}
240
+ fill="none"
241
+ {...props}
242
+ style={{
243
+ opacity: 1,
244
+ animation:
245
+ "top-announcement-glow 1s ease-in-out infinite alternate",
246
+ ...style,
247
+ }}
248
+ >
249
+ <circle
250
+ cx={60}
251
+ cy={24}
252
+ r={60}
253
+ fill={`url(#${props.id}-a)`}
254
+ fillOpacity={0.5}
255
+ />
256
+ <defs>
257
+ <radialGradient
258
+ id={`${props.id}-a`}
259
+ cx={0}
260
+ cy={0}
261
+ r={1}
262
+ gradientTransform="matrix(0 60 -60 0 60 24)"
263
+ gradientUnits="userSpaceOnUse"
264
+ >
265
+ <stop stopColor="#47EBEB" />
266
+ <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
267
+ </radialGradient>
268
+ </defs>
269
+ </svg>
270
+ );
package/src/components/gh-banner/styles.ts CHANGED
@@ -1,4 +1,24 @@
1
1
  export const CSSRules = [
2
+ `
3
+ .bg-top-announcement {
4
+ border-bottom: 1px solid rgba(71, 235, 235, 0.15);
5
+ background: radial-gradient(
6
+ 218.19% 111.8% at 0% 0%,
7
+ rgba(71, 235, 235, 0.1) 0%,
8
+ rgba(71, 235, 235, 0.2) 100%
9
+ ),
10
+ #14141f;
11
+ }
12
+ `,
13
+ `
14
+ .top-announcement-mask {
15
+ mask-image: url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/hexagon.svg);
16
+ -webkit-mask-image: url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/hexagon.svg);
17
+ mask-repeat: repeat;
18
+ -webkit-mask-repeat: repeat;
19
+ background: rgba(71, 235, 235, 0.25);
20
+ }
21
+ `,
2
22
  `
3
23
  .banner {
4
24
  display: flex;
@@ -7,60 +27,20 @@ export const CSSRules = [
7
27
  }
8
28
  }`,
9
29
  `
10
- .banner::before,
11
- .banner::after {
12
- content: '';
13
- position: absolute;
14
- top: 0;
15
- left: 0;
16
- width: 100%;
17
- height: 100%;
18
- }
19
- `,
20
- `
21
- .banner::before {
22
- background-image: linear-gradient(
23
- 270deg,
24
- rgba(255, 76, 77, 0.35) 0%,
25
- rgba(255, 153, 51, 0.35) 12.5%,
26
- rgba(255, 191, 0, 0.35) 25%,
27
- rgba(38, 217, 127, 0.35) 37.5%,
28
- rgba(71, 235, 235, 0.35) 50%,
29
- rgba(0, 128, 255, 0.35) 62.5%,
30
- rgba(51, 51, 255, 0.35) 75%,
31
- rgba(128, 0, 255, 0.35) 87.5%,
32
- rgba(237, 94, 201, 0.35) 100%
33
- );
34
- background-position: 0 0;
35
- background-size: 200% 100%;
36
- background-repeat: repeat-x;
37
- animation: bgpos 4s linear infinite;
38
- }
39
- `,
40
- `
41
- .banner::after {
42
- background: linear-gradient(
43
- 180deg,
44
- rgba(13, 13, 13, 0.85) 0%,
45
- rgba(13, 13, 13, 0) 100%
46
- );
30
+ .gh-link, .gh-link:hover, .gh-link:active, .gh-link:visited, .gh-link:focus {
31
+ text-decoration: none;
32
+ z-index: 9;
47
33
  }
48
34
  `,
49
35
  `
50
- @keyframes bgpos {
36
+ @keyframes top-announcement-glow {
51
37
  0% {
52
- background-position: 0 0;
38
+ opacity: 1;
53
39
  }
54
40
 
55
41
  100% {
56
- background-position: -200% 0;
42
+ opacity: 0;
57
43
  }
58
44
  }
59
45
  `,
60
- `
61
- .gh-link, .gh-link:hover, .gh-link:active, .gh-link:visited, .gh-link:focus {
62
- text-decoration: none;
63
- z-index: 9;
64
- }
65
- `,
66
46
  ];
package/src/components/pages/auth/components/login/index.tsx CHANGED
@@ -19,6 +19,7 @@ export const LoginPage: React.FC<LoginProps> = ({
19
19
  renderContent,
20
20
  formProps,
21
21
  title = undefined,
22
+ hideForm,
22
23
  }) => {
23
24
  const routerType = useRouterType();
24
25
  const Link = useLink();
@@ -79,96 +80,121 @@ export const LoginPage: React.FC<LoginProps> = ({
79
80
  {translate("pages.login.title", "Sign in to your account")}
80
81
  </h1>
81
82
  {renderProviders()}
82
- <hr />
83
- <form
84
- onSubmit={(e) => {
85
- e.preventDefault();
86
- login({ email, password, remember });
87
- }}
88
- {...formProps}
89
- >
90
- <div
91
- style={{
92
- display: "flex",
93
- flexDirection: "column",
94
- padding: 25,
95
- }}
96
- >
97
- <label htmlFor="email-input">
98
- {translate("pages.login.fields.email", "Email")}
99
- </label>
100
- <input
101
- id="email-input"
102
- name="email"
103
- type="text"
104
- size={20}
105
- autoCorrect="off"
106
- spellCheck={false}
107
- autoCapitalize="off"
108
- required
109
- value={email}
110
- onChange={(e) => setEmail(e.target.value)}
111
- />
112
- <label htmlFor="password-input">
113
- {translate("pages.login.fields.password", "Password")}
114
- </label>
115
- <input
116
- id="password-input"
117
- type="password"
118
- name="password"
119
- required
120
- size={20}
121
- value={password}
122
- onChange={(e) => setPassword(e.target.value)}
123
- />
124
- {rememberMe ?? (
125
- <>
126
- <label htmlFor="remember-me-input">
83
+ {!hideForm && (
84
+ <>
85
+ <hr />
86
+ <form
87
+ onSubmit={(e) => {
88
+ e.preventDefault();
89
+ login({ email, password, remember });
90
+ }}
91
+ {...formProps}
92
+ >
93
+ <div
94
+ style={{
95
+ display: "flex",
96
+ flexDirection: "column",
97
+ padding: 25,
98
+ }}
99
+ >
100
+ <label htmlFor="email-input">
101
+ {translate("pages.login.fields.email", "Email")}
102
+ </label>
103
+ <input
104
+ id="email-input"
105
+ name="email"
106
+ type="text"
107
+ size={20}
108
+ autoCorrect="off"
109
+ spellCheck={false}
110
+ autoCapitalize="off"
111
+ required
112
+ value={email}
113
+ onChange={(e) => setEmail(e.target.value)}
114
+ />
115
+ <label htmlFor="password-input">
127
116
  {translate(
128
- "pages.login.buttons.rememberMe",
129
- "Remember me",
117
+ "pages.login.fields.password",
118
+ "Password",
130
119
  )}
131
- <input
132
- id="remember-me-input"
133
- name="remember"
134
- type="checkbox"
135
- size={20}
136
- checked={remember}
137
- value={remember.toString()}
138
- onChange={() => {
139
- setRemember(!remember);
140
- }}
141
- />
142
120
  </label>
143
- </>
144
- )}
145
- <br />
146
- {forgotPasswordLink ??
147
- renderLink(
148
- "/forgot-password",
149
- translate(
150
- "pages.login.buttons.forgotPassword",
151
- "Forgot password?",
152
- ),
153
- )}
154
- <input
155
- type="submit"
156
- value={translate("pages.login.signin", "Sign in")}
157
- />
158
- {registerLink ?? (
159
- <span>
160
- {translate(
161
- "pages.login.buttons.noAccount",
162
- "Don’t have an account?",
163
- )}{" "}
164
- {renderLink(
165
- "/register",
166
- translate("pages.login.register", "Sign up"),
121
+ <input
122
+ id="password-input"
123
+ type="password"
124
+ name="password"
125
+ required
126
+ size={20}
127
+ value={password}
128
+ onChange={(e) => setPassword(e.target.value)}
129
+ />
130
+ {rememberMe ?? (
131
+ <>
132
+ <label htmlFor="remember-me-input">
133
+ {translate(
134
+ "pages.login.buttons.rememberMe",
135
+ "Remember me",
136
+ )}
137
+ <input
138
+ id="remember-me-input"
139
+ name="remember"
140
+ type="checkbox"
141
+ size={20}
142
+ checked={remember}
143
+ value={remember.toString()}
144
+ onChange={() => {
145
+ setRemember(!remember);
146
+ }}
147
+ />
148
+ </label>
149
+ </>
150
+ )}
151
+ <br />
152
+ {forgotPasswordLink ??
153
+ renderLink(
154
+ "/forgot-password",
155
+ translate(
156
+ "pages.login.buttons.forgotPassword",
157
+ "Forgot password?",
158
+ ),
159
+ )}
160
+ <input
161
+ type="submit"
162
+ value={translate(
163
+ "pages.login.signin",
164
+ "Sign in",
165
+ )}
166
+ />
167
+ {registerLink ?? (
168
+ <span>
169
+ {translate(
170
+ "pages.login.buttons.noAccount",
171
+ "Don’t have an account?",
172
+ )}{" "}
173
+ {renderLink(
174
+ "/register",
175
+ translate(
176
+ "pages.login.register",
177
+ "Sign up",
178
+ ),
179
+ )}
180
+ </span>
167
181
  )}
168
- </span>
182
+ </div>
183
+ </form>
184
+ </>
185
+ )}
186
+ {registerLink !== false && hideForm && (
187
+ <div style={{ textAlign: "center" }}>
188
+ {translate(
189
+ "pages.login.buttons.noAccount",
190
+ "Don’t have an account?",
191
+ )}{" "}
192
+ {renderLink(
193
+ "/register",
194
+ translate("pages.login.register", "Sign up"),
169
195
  )}
170
196
  </div>
171
- </form>
197
+ )}
172
198
  </div>
173
199
  );
174
200