@refinedev/core 4.45.0 → 4.45.1
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.
- package/CHANGELOG.md +8 -0
- package/README.md +97 -73
- package/dist/components/gh-banner/index.d.ts.map +1 -1
- package/dist/components/gh-banner/styles.d.ts.map +1 -1
- package/dist/esm/index.js +30 -49
- package/dist/esm/index.js.map +1 -1
- package/dist/iife/index.js +30 -49
- package/dist/iife/index.js.map +1 -1
- package/dist/index.js +30 -49
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/gh-banner/index.tsx +238 -55
- package/src/components/gh-banner/styles.ts +26 -46
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @refinedev/core
|
|
2
2
|
|
|
3
|
+
## 4.45.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#5289](https://github.com/refinedev/refine/pull/5289) [`0d1e269c0283`](https://github.com/refinedev/refine/commit/0d1e269c02837bea4c1df3f4a56dfad52974bd7a) Thanks [@alicanerdurmaz](https://github.com/alicanerdurmaz)! - feat: `<GitHubBanner />` styles updated.
|
|
8
|
+
|
|
9
|
+
fix: `<GitHubBanner />` hydration error. #5295
|
|
10
|
+
|
|
3
11
|
## 4.45.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
<div align="center" style="margin: 30px;">
|
|
1
|
+
<div align="center">
|
|
4
2
|
<a href="https://refine.dev/">
|
|
5
|
-
|
|
3
|
+
<img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
|
|
6
4
|
</a>
|
|
7
|
-
|
|
8
|
-
<br
|
|
5
|
+
|
|
6
|
+
<br/>
|
|
7
|
+
<br/>
|
|
9
8
|
|
|
10
9
|
<div align="center">
|
|
11
10
|
<a href="https://refine.dev">Home Page</a> |
|
|
@@ -16,83 +15,96 @@
|
|
|
16
15
|
</div>
|
|
17
16
|
</div>
|
|
18
17
|
|
|
19
|
-
<br
|
|
18
|
+
<br/>
|
|
19
|
+
<br/>
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
|
|
22
|
+
<div align="center"><strong>Build your <a href="https://reactjs.org/">React</a>-based CRUD applications, without constraints.</strong><br>An open-source, headless web application framework developed with flexibility in mind.
|
|
22
23
|
|
|
23
24
|
<br />
|
|
24
25
|
<br />
|
|
25
26
|
|
|
26
|
-
[](https://discord.gg/refine)
|
|
27
|
-
[](https://twitter.com/refine_dev)
|
|
28
|
-
|
|
29
|
-
<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine-3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100% open source React framework to build web apps 3x faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
|
30
|
-
|
|
31
27
|
</div>
|
|
32
28
|
|
|
33
29
|
<div align="center">
|
|
34
30
|
|
|
35
31
|
[](https://github.com/refinedev/awesome-refine)
|
|
36
|
-
[](https://codeclimate.com/github/pankod/refine/maintainability)
|
|
37
|
-
[](https://codeclimate.com/github/pankod/refine/test_coverage)
|
|
38
32
|
[](https://www.npmjs.com/package/@refinedev/core)
|
|
39
|
-
[](https://www.npmjs.com/package/@refinedev/core)
|
|
40
33
|
[](https://github.com/refinedev/refine/commits/master)
|
|
41
34
|
[](CODE_OF_CONDUCT.md)
|
|
42
35
|
|
|
36
|
+
[](https://discord.gg/refine)
|
|
37
|
+
[](https://twitter.com/refine_dev)
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine-3" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=362220&theme=light&period=daily" alt="refine - 100% open source React framework to build web apps 3x faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
|
|
41
|
+
|
|
43
42
|
</div>
|
|
44
43
|
|
|
45
44
|
<br/>
|
|
46
|
-
<a href="https://refine.dev/">
|
|
47
|
-
<picture>
|
|
48
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/18739364/200257042-3f2aa7f7-a07f-4824-8d2a-b25f26b6fd32.png">
|
|
49
|
-
<img alt="how-works-refine" src="https://user-images.githubusercontent.com/18739364/200257209-8fc0c8b1-2568-453e-873f-00513434deed.png">
|
|
50
|
-
</picture>
|
|
51
|
-
</a>
|
|
52
45
|
|
|
53
|
-
|
|
46
|
+
[](https://refine.dev)
|
|
47
|
+
|
|
48
|
+
## What is Refine?
|
|
54
49
|
|
|
55
|
-
**
|
|
56
|
-
It eliminates repetitive tasks demanded by **CRUD** operations and provides industry standard solutions for critical parts like **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
|
|
50
|
+
**Refine** is a meta **React** framework that enables the rapid✨ development of a wide range of web applications.
|
|
57
51
|
|
|
58
|
-
|
|
52
|
+
From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of **CRUD** application.
|
|
53
|
+
|
|
54
|
+
Refine's internal hooks and components simplify the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including **authentication**, **access control**, **routing**, **networking**, **state management**, and **i18n**.
|
|
55
|
+
|
|
56
|
+
**Refine** is _headless by design_, thereby offering unlimited styling and customization options.
|
|
59
57
|
|
|
60
58
|
## What do you mean by "headless" ?
|
|
61
59
|
|
|
62
|
-
Instead of being a
|
|
60
|
+
Instead of being limited to a set of pre-styled components, **Refine** provides collections of helper `hooks`, `components`, `providers`, and more. Since business logic and the UI are completely decoupled, you can customize the UI without constraints.
|
|
63
61
|
|
|
64
|
-
**
|
|
62
|
+
It means that **Refine** just works _seamlessly_ with any _custom designs_ or _UI frameworks_. Thanks to it's headless architecture, you can use popular CSS frameworks like [TailwindCSS](https://tailwindcss.com/) or even create your own styles from scratch.
|
|
65
63
|
|
|
66
|
-
|
|
64
|
+
Refine also provides integrations with [Ant Design](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/) to get you started quickly. These libraries are a set of components that are nicely integrated with the headless `@refinedev/core` package.
|
|
67
65
|
|
|
68
|
-
|
|
66
|
+
### Headless in Routing
|
|
69
67
|
|
|
70
|
-
|
|
68
|
+
For the routing, Refine's headless approach shines too. It doesn't tie you to a single routing method or library. Instead, it offers a simple routing interface with built-in integrations for popular libraries.
|
|
71
69
|
|
|
72
|
-
|
|
73
|
-
<img src="https://user-images.githubusercontent.com/18739364/204285956-cc20fa11-b769-4bd5-b8f6-9c05a283ac85.gif" style="width:267px;" />
|
|
74
|
-
</a>
|
|
70
|
+
This means you can use Refine seamlessly on different platforms like React Native, Electron, Next.js, Remix, etc. without any extra setup steps.
|
|
75
71
|
|
|
76
|
-
|
|
77
|
-
<img src="https://user-images.githubusercontent.com/18739364/204285047-8f24f1f4-65ea-4952-83ed-81e92cdd5b90.gif" style="width:200px;" />
|
|
78
|
-
</a>
|
|
72
|
+
## ⚡ Try Refine
|
|
79
73
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
74
|
+
Refine's [browser-based app scaffolder](https://refine.dev/#playground) enables you to build a Refine app through an interactive, step-by-step process in your browser.
|
|
75
|
+
|
|
76
|
+
You have the freedom to select your preferred libraries and frameworks, and the tool generates a ready-to-download boilerplate code. This feature not only lets you preview and tweak your project on the fly but also accelerates the overall development workflow.
|
|
83
77
|
|
|
84
78
|
<br/>
|
|
85
|
-
<br/>
|
|
86
79
|
|
|
87
|
-
|
|
80
|
+
<div align="center">
|
|
81
|
+
<a href="https://refine.dev/#playground" target="_blank">
|
|
82
|
+
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/create-refine-project.gif" />
|
|
83
|
+
</a>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
## Use cases
|
|
87
|
+
|
|
88
|
+
**Refine** shines on _data-intensive⚡_ enterprise B2B applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, it can also power _customer-facing_ applications like **storefronts**.
|
|
89
|
+
|
|
90
|
+
You can take a look at some live examples that can be built using **refine** from scratch:
|
|
91
|
+
|
|
92
|
+
- [Fully-functional CRM Application](https://example.crm.refine.dev/)
|
|
93
|
+
- [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
|
|
94
|
+
- [Win95 Style Admin panel 🪟](https://win95.refine.dev/)
|
|
95
|
+
- [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
|
|
96
|
+
- [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
|
|
97
|
+
- [Storefront](https://s.refine.dev/readme-ssr-storefront)
|
|
88
98
|
|
|
89
|
-
[👉
|
|
99
|
+
[👉 Refer to most popular real use case examples](https://refine.dev/docs/examples/)
|
|
100
|
+
|
|
101
|
+
[👉 More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
|
|
90
102
|
|
|
91
103
|
## Key Features
|
|
92
104
|
|
|
93
105
|
⚙️ Zero-config, **one-minute setup** with a **single CLI command**
|
|
94
106
|
|
|
95
|
-
🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/refinedev/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [
|
|
107
|
+
🔌 Connectors for **15+ backend services** including [REST API](https://github.com/refinedev/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/refinedev/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/refinedev/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/refinedev/refine/tree/master/packages/airtable), [Strapi](https://github.com/refinedev/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/refinedev/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/refinedev/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/refinedev/refine/tree/master/packages/supabase), [Hasura](https://github.com/refinedev/refine/tree/master/packages/hasura), [Appwrite](https://github.com/refinedev/refine/tree/master/packages/appwrite), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query), [Firebase](https://firebase.google.com/), [Sanity](https://www.sanity.io/), and [Directus](https://directus.io/).
|
|
96
108
|
|
|
97
109
|
🌐 **SSR support** with **Next.js** or **Remix**
|
|
98
110
|
|
|
@@ -114,17 +126,18 @@ You can take a look at some live examples that can be built using **refine** fro
|
|
|
114
126
|
|
|
115
127
|
⌛️ Built-in CLI with time-saving features
|
|
116
128
|
|
|
117
|
-
💻
|
|
129
|
+
💻 Refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
|
|
118
130
|
|
|
119
131
|
✅ Full **test coverage**
|
|
120
132
|
|
|
121
133
|
## Quick Start
|
|
122
134
|
|
|
123
|
-
|
|
124
|
-
|
|
135
|
+
There are two ways to create a Refine app: either by using the `create refine-app` CLI tool or the [browser-based app scaffolder](https://refine.dev/#playground).
|
|
136
|
+
|
|
137
|
+
To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command.
|
|
125
138
|
|
|
126
139
|
```
|
|
127
|
-
npm create refine-app@latest --
|
|
140
|
+
npm create refine-app@latest -- -o refine-antd
|
|
128
141
|
```
|
|
129
142
|
|
|
130
143
|
Once the setup is complete, navigate to the project folder and start your project with:
|
|
@@ -133,19 +146,31 @@ Once the setup is complete, navigate to the project folder and start your projec
|
|
|
133
146
|
npm run dev
|
|
134
147
|
```
|
|
135
148
|
|
|
149
|
+
|
|
136
150
|
<br/>
|
|
137
151
|
|
|
138
|
-
Your **
|
|
152
|
+
Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
|
|
139
153
|
|
|
140
|
-
<a href="http://localhost:
|
|
154
|
+
<a href="http://localhost:5173"></a>
|
|
141
155
|
|
|
142
156
|
<br/>
|
|
143
157
|
|
|
144
|
-
|
|
158
|
+
|
|
159
|
+
> Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
|
|
160
|
+
>
|
|
161
|
+
>```
|
|
162
|
+
>npm create refine-app@latest
|
|
163
|
+
>```
|
|
164
|
+
|
|
165
|
+
Let's consume a public `fake REST API` and add two resources (_blog_posts_ and _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
|
|
145
166
|
|
|
146
167
|
```tsx title="src/App.tsx"
|
|
147
168
|
import { Refine } from "@refinedev/core";
|
|
148
|
-
import {
|
|
169
|
+
import {
|
|
170
|
+
notificationProvider,
|
|
171
|
+
ErrorComponent,
|
|
172
|
+
ThemedLayout,
|
|
173
|
+
} from "@refinedev/antd";
|
|
149
174
|
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
|
|
150
175
|
import dataProvider from "@refinedev/simple-rest";
|
|
151
176
|
|
|
@@ -164,11 +189,11 @@ const App: React.FC = () => {
|
|
|
164
189
|
notificationProvider={notificationProvider}
|
|
165
190
|
resources={[
|
|
166
191
|
{
|
|
167
|
-
name: "
|
|
168
|
-
list: "/posts",
|
|
169
|
-
show: "/posts/show/:id",
|
|
170
|
-
create: "/posts/create",
|
|
171
|
-
edit: "/posts/edit/:id",
|
|
192
|
+
name: "blog_posts",
|
|
193
|
+
list: "/blog-posts",
|
|
194
|
+
show: "/blog-posts/show/:id",
|
|
195
|
+
create: "/blog-posts/create",
|
|
196
|
+
edit: "/blog-posts/edit/:id",
|
|
172
197
|
meta: { canDelete: true },
|
|
173
198
|
},
|
|
174
199
|
{
|
|
@@ -181,13 +206,13 @@ const App: React.FC = () => {
|
|
|
181
206
|
<Routes>
|
|
182
207
|
<Route
|
|
183
208
|
element={
|
|
184
|
-
<
|
|
209
|
+
<ThemedLayout>
|
|
185
210
|
<Outlet />
|
|
186
|
-
</
|
|
211
|
+
</ThemedLayout>
|
|
187
212
|
}
|
|
188
213
|
>
|
|
189
214
|
<Route index element={<NavigateToResource />} />
|
|
190
|
-
<Route path="posts">
|
|
215
|
+
<Route path="blog-posts">
|
|
191
216
|
<Route index element={<AntdInferencer />} />
|
|
192
217
|
<Route
|
|
193
218
|
path="show/:id"
|
|
@@ -219,43 +244,42 @@ export default App;
|
|
|
219
244
|
|
|
220
245
|
<br/>
|
|
221
246
|
|
|
222
|
-
🚀 Thanks to **refine Inferencer package**, it guesses the configuration to use for the `list`, `show`, `create`, and `edit` pages based on the data fetched from the API and generates the pages automatically.
|
|
223
247
|
|
|
224
|
-
|
|
248
|
+
🚀 The [**Refine Inferencer package**](https://refine.dev/docs/packages/documentation/inferencer/) automatically generates `list`, `show`, `create`, and `edit` pages by guessing configurations from API data. We've used it here for a quick, clear start, but you can also choose to code your pages from scratch instead of using the Inferencer feature.
|
|
249
|
+
|
|
250
|
+
Now, you should see the output as a table populated with `blog_posts` & `category` data:
|
|
225
251
|
|
|
226
|
-
|
|
252
|
+
|
|
227
253
|
|
|
228
254
|
<br/>
|
|
229
255
|
|
|
230
|
-
You can get the auto-generated
|
|
256
|
+
You can get the auto-generated page codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing them with the Inferencer components.
|
|
231
257
|
|
|
232
258
|
## Next Steps
|
|
233
259
|
|
|
234
260
|
👉 Jump to [Tutorial](https://refine.dev/docs/tutorial/introduction/index/) to continue your work and turn the example into a full-blown CRUD application.
|
|
235
261
|
|
|
236
|
-
👉 Visit [Learn the Basics
|
|
262
|
+
👉 Visit the [Learn the Basics page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
|
|
237
263
|
|
|
238
264
|
👉 Read more on [Advanced Tutorials
|
|
239
265
|
](https://refine.dev/docs/advanced-tutorials/) for different usage scenarios.
|
|
240
266
|
|
|
241
|
-
👉 See the real-life [
|
|
267
|
+
👉 See the real-life [CRM Application](https://example.crm.refine.dev/) project built using Refine.
|
|
242
268
|
|
|
243
|
-
👉 Play with interactive [
|
|
269
|
+
👉 Play with interactive [examples](https://refine.dev/docs/examples/).
|
|
244
270
|
|
|
245
|
-
## Stargazers
|
|
246
271
|
|
|
247
|
-
[](https://github.com/refinedev/refine/stargazers)
|
|
248
272
|
|
|
249
273
|
## Contribution
|
|
250
274
|
|
|
251
|
-
[👉 Refer to contribution docs for more information](https://refine.dev/docs/contributing/#ways-to-contribute)
|
|
275
|
+
[👉 Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
|
|
252
276
|
|
|
253
|
-
If you have any doubts related to the project or want to discuss something, then join our [Discord
|
|
277
|
+
If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
|
|
254
278
|
|
|
255
|
-
##
|
|
279
|
+
## Contributors ♥️
|
|
256
280
|
|
|
257
281
|
<a href="https://github.com/refinedev/refine/graphs/contributors">
|
|
258
|
-
<img src="https://contrib.rocks/image?repo=refinedev/refine" />
|
|
282
|
+
<img src="https://contrib.rocks/image?repo=refinedev/refine&max=400&columns=20" />
|
|
259
283
|
</a>
|
|
260
284
|
|
|
261
285
|
## License
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/index.tsx"],"names":[],"mappings":";AAMA,eAAO,MAAM,YAAY,mBA+HxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/gh-banner/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,UA6CpB,CAAC"}
|