@refinedev/core - npm Package Compare versions

Comparing version 4.45.0 to 4.45.1

package.json

 {
   "name": "@refinedev/core",
-  "version": "4.45.0",
+  "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.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -1,9 +0,8 @@
-<br/>
-
-<div align="center" style="margin: 30px;">
+<div align="center">
 <a href="https://refine.dev/">
-  <img src="https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png"   style="width:250px;" align="center" />
+    <img alt="refine logo" src="https://refine.ams3.cdn.digitaloceanspaces.com/readme/refine-readme-banner.png">
 </a>
-<br />
-<br />
+  
+<br/>
+<br/>
 
@@ -19,14 +18,11 @@ <div align="center">
 
-<br />
+<br/>
+<br/>
 
-<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.
 
+<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.
+
 <br />
 <br />
 
-[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
-[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
-
-<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;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&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-
 </div>
@@ -37,57 +33,73 @@
 [![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)
-[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)
-[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)
 [![npm version](https://img.shields.io/npm/v/@refinedev/core.svg)](https://www.npmjs.com/package/@refinedev/core)
-[![npm](https://img.shields.io/npm/dm/@refinedev/core)](https://www.npmjs.com/package/@refinedev/core)
 [![](https://img.shields.io/github/commit-activity/m/refinedev/refine)](https://github.com/refinedev/refine/commits/master)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)
 
+[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/refine)
+[![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)](https://twitter.com/refine_dev)
+
+
+<a href="https://www.producthunt.com/posts/refine-3?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-refine&#0045;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&#0037;&#0032;open&#0032;source&#0032;React&#0032;framework&#0032;to&#0032;build&#0032;web&#0032;apps&#0032;3x&#0032;faster | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
 </div>
 
 <br/>
-<a href="https://refine.dev/">
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/18739364/200257042-3f2aa7f7-a07f-4824-8d2a-b25f26b6fd32.png">
-  <img alt="how-works-refine" src="https://user-images.githubusercontent.com/18739364/200257209-8fc0c8b1-2568-453e-873f-00513434deed.png">
-</picture>
-</a>
 
-## What is refine?
+[![how-refine-works](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/new-diagram.jpg)](https://refine.dev)
 
-**refine** is a React-based framework for the rapid ✨ development of web applications.
-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**.
+## What is Refine?
 
-**refine** is _headless by design_, thereby offering unlimited styling and customization options.
+**Refine** is a meta **React** framework that enables the rapid✨ development of a wide range of web applications.
 
+From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of **CRUD** application.
+
+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**.
+
+**Refine** is _headless by design_, thereby offering unlimited styling and customization options.
+
 ## What do you mean by "headless" ?
 
-Instead of being a limited set of pre-styled components, **refine** is a collection of helper `hooks`, `components`, and `providers`. They are all decoupled from _UI components_ and _business logic_, so that they never keep you from customizing your _UI_ or coding your own flow.
+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.
 
-**refine** seamlessly works with any **custom design** or **UI framework** that you favor. For convenience, it ships with ready-made integrations for [Ant Design System](https://ant.design/), [Material UI](https://mui.com/material-ui/getting-started/overview/), [Mantine](https://mantine.dev/), and [Chakra UI](https://chakra-ui.com/).
+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.
 
-## Use cases
+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.
 
-**refine** shines on _data-intensive⚡_ applications like **admin panels**, **dashboards** and **internal tools**. Thanks to the built-in **SSR support**, **refine** can also power _customer-facing_ applications like **storefronts**.
+### Headless in Routing
 
-You can take a look at some live examples that can be built using **refine** from scratch:
+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.
 
-<a href="https://s.refine.dev/readme-admin-panel" target="_blank">
- <img src="https://user-images.githubusercontent.com/18739364/204285956-cc20fa11-b769-4bd5-b8f6-9c05a283ac85.gif"   style="width:267px;"  />
-</a>
+This means you can use Refine seamlessly on different platforms like React Native, Electron, Next.js, Remix, etc. without any extra setup steps.
 
- <a href="https://s.refine.dev/readme-medium-clone" target="_blank">
-<img src="https://user-images.githubusercontent.com/18739364/204285047-8f24f1f4-65ea-4952-83ed-81e92cdd5b90.gif"   style="width:200px;"  />
-</a>
+## ⚡ Try Refine
 
- <a href="https://s.refine.dev/readme-ssr-storefront" target="_blank">
-<img src="https://user-images.githubusercontent.com/18739364/204285039-1ce0cb06-fbf8-4704-89c9-2e004620c9a8.gif"   style="width:200px;"  />
-</a>
+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. 
 
+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.
+
 <br/>
-<br/>
 
-[👉 Refer to most popular real use case examples](https://refine.dev/examples/)
+<div align="center">
+<a href="https://refine.dev/#playground" target="_blank">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-07-25-refine-primereact/create-refine-project.gif"    />
+</a>
+</div>
 
-[👉 More **refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples/)
+## Use cases
 
+**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**.
+
+You can take a look at some live examples that can be built using **refine** from scratch:
+
+-   [Fully-functional CRM Application](https://example.crm.refine.dev/)
+-   [Fully-functional Admin Panel](https://s.refine.dev/readme-admin-panel)
+-   [Win95 Style Admin panel 🪟](https://win95.refine.dev/)
+-   [Medium Clone - Real World Example](https://s.refine.dev/readme-medium-clone)
+-   [Multitenancy Example](https://multi-tenancy-strapi.refine.dev/)
+-   [Storefront](https://s.refine.dev/readme-ssr-storefront)
+
+[👉 Refer to most popular real use case examples](https://refine.dev/docs/examples/)
+
+[👉 More **Refine** powered different usage scenarios can be found here](https://refine.dev/docs/examples#other-examples)
+
 ## Key Features
@@ -97,3 +109,3 @@
 
-🔌 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), [Firebase](https://firebase.google.com/), [Nestjs-Query](https://github.com/refinedev/refine/tree/master/packages/nestjs-query) and [Directus](https://directus.io/).
+🔌 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/).
 
@@ -120,3 +132,3 @@ 🌐 **SSR support** with **Next.js** or **Remix**
 
-💻 refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
+💻 Refine [Devtools](https://github.com/refinedev/refine/blob/master/packages/devtools/README.md) - dive deeper into your app and provide useful insights
 
@@ -127,7 +139,8 @@ ✅ Full **test coverage**
 
-The fastest way to get started with **refine** is by using the `create refine-app` project starter tool.
-Run the following command to create a new **refine** project configured with [Ant Design System](https://ant.design/) as the default UI framework:
+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).
 
+To quickly start a Refine project with [Ant Design](https://ant.design/) as the default UI framework, run the following command. 
+
 ```
-npm create refine-app@latest -- --preset refine-antd
+npm create refine-app@latest -- -o refine-antd
 ```
@@ -141,15 +154,27 @@
 
+
 <br/>
 
-Your **refine** application will be accessible at [http://localhost:3000](http://localhost:3000):
+Your **Refine** application will be accessible at [http://localhost:5173](http://localhost:5173):
 
-<a href="http://localhost:3000">![Welcome on board](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/welcome-on-board.png)</a>
+<a href="http://localhost:5173">![Welcome on board](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/welcome.png)</a>
 
 <br/>
 
-Let's consume a public `fake REST API` and add two resources (_posts_, _categories_) to our project. Replace the contents of `src/App.tsx` with the following code:
 
+> Note: The command above uses pre-set options for ease. For a different tech stack, simply run:
+>
+>```
+>npm create refine-app@latest
+>```
+
+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:
+
 ```tsx title="src/App.tsx"
 import { Refine } from "@refinedev/core";
-import { Layout, notificationProvider, ErrorComponent } from "@refinedev/antd";
+import {
+    notificationProvider,
+    ErrorComponent,
+    ThemedLayout,
+} from "@refinedev/antd";
 import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";
@@ -173,7 +198,7 @@ import dataProvider from "@refinedev/simple-rest";
                     {
-                        name: "posts",
-                        list: "/posts",
-                        show: "/posts/show/:id",
-                        create: "/posts/create",
-                        edit: "/posts/edit/:id",
+                        name: "blog_posts",
+                        list: "/blog-posts",
+                        show: "/blog-posts/show/:id",
+                        create: "/blog-posts/create",
+                        edit: "/blog-posts/edit/:id",
                         meta: { canDelete: true },
@@ -191,9 +216,9 @@ },
                         element={
-                            <Layout>
+                            <ThemedLayout>
                                 <Outlet />
-                            </Layout>
+                            </ThemedLayout>
                         }
                     >
                         <Route index element={<NavigateToResource />} />
-                        <Route path="posts">
+                        <Route path="blog-posts">
                             <Route index element={<AntdInferencer />} />
@@ -230,11 +255,12 @@ <Route
 
-🚀 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.
 
-Now, you should see the output as a table populated with `post` & `category` data:
+🚀 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.
 
-![First example result](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/readme-quick-start.png)
+Now, you should see the output as a table populated with `blog_posts` & `category` data:
 
+![First example result](https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/readme-quick-start-2.png)
+
 <br/>
 
-You can get the auto-generated pages codes by clicking the `Show Code` button on each page. Afterward, simply pass the pages to the `resources` array by replacing with the Inferencer components.
+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.
 
@@ -245,3 +271,3 @@ ## Next Steps
 
-👉 Visit [Learn the Basics Page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
+👉 Visit the [Learn the Basics page](https://refine.dev/docs/getting-started/overview/) to get informed about the fundamental concepts.
 
@@ -251,20 +277,18 @@ 👉 Read more on [Advanced Tutorials
 
-👉 See the real-life [Finefoods Demo](https://refine.dev/demo/) project.
+👉 See the real-life [CRM Application](https://example.crm.refine.dev/) project built using Refine.
 
-👉 Play with interactive [Examples](https://refine.dev/docs/examples/)
+👉 Play with interactive [examples](https://refine.dev/docs/examples/).
 
-## Stargazers
 
-[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)
 
 ## Contribution
 
-[👉 Refer to contribution docs for more information](https://refine.dev/docs/contributing/#ways-to-contribute)
+[👉 Refer to the contribution docs for more information.](https://refine.dev/docs/contributing/#ways-to-contribute)
 
-If you have any doubts related to the project or want to discuss something, then join our [Discord Server](https://discord.gg/refine).
+If you have any doubts related to the project or want to discuss something, then join our [Discord server](https://discord.gg/refine).
 
-## Our ♥️ Contributors
+## Contributors ♥️
 
 <a href="https://github.com/refinedev/refine/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=refinedev/refine" />
+  <img src="https://contrib.rocks/image?repo=refinedev/refine&max=400&columns=20" />
 </a>
@@ -271,0 +295,0 @@

src/components/gh-banner/styles.ts

 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 {
@@ -10,58 +30,18 @@ display: flex;
     `
-    .banner::before,
-    .banner::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+    .gh-link, .gh-link:hover, .gh-link:active, .gh-link:visited, .gh-link:focus {
+        text-decoration: none;
+        z-index: 9;
     }
     `,
     `
-    .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%
-        );
-    }
-    `,
-    `
-    @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;
-    }
-    `,
 ];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3932296

increased by0.96%

Lines of code

24055

increased by0.55%

Number of lines in readme file

288

increased by9.09%

No dependency changes