{"_id":"@pankod/refine-ui-types","_rev":"31-ba13d33ce658c4d46979d6f97f8aa61c","name":"@pankod/refine-ui-types","dist-tags":{"next":"0.15.0","latest":"0.16.0"},"versions":{"0.2.0":{"name":"@pankod/refine-ui-types","version":"0.2.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --dts --format esm,cjs,iife --legacy-output","build":"tsup --dts --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.36.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.2.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Iypp48/FA/EACEUikDrvhFfhH5O7h7/WMoPkdzHwWgYDayCqAedjbZ+K5pvqGZvR7Yodd3KVwig01SAInQYYsw==","shasum":"ac85256f1dd04fcbd55e2acf709a707849df7ec7","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.2.0.tgz","fileCount":21,"unpackedSize":48726,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrjsFvkjj8O7182dx4fNwhXRHCsuyAY+Smo0Pu7cxpBAiBLhyPh1nHUH/jd2VcMl0wqziTjFD8+f+0Wwy7hqJ2OQw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi640tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo43g//S+ePZHwlh3SrlIRndNnBGtIJJ79SII+uKuY6YQM/ADn0EoDB\r\naXKG9msoXSm+p78A2ViAr1VxaPEbWjUm4ccRKnJ+Ov3G/5w527wryYCQcaFE\r\nw9jz9OviEaSJhEA1ZM6mJI6BvUOljFVY3ltoqwILECM76+m5NglxYBI07ERA\r\neUdk4jComRF0WBAf7V6kNPZYsIAdu2m5EeS84z/1mwjRo0501hvUTucvTYnH\r\nltUpiZ7K5a6AE+EukaZLkwxGL30VqciyJSroemkyyOuYl30C+2+3Y0Lflauv\r\nE72Cv2Xt7qCA5HJwHMyXAuLjBpJjQbSIPloaK80J8sfgLeJAQnDe5BylAmwi\r\nC7fgNTfg1Jvee0GEkv5bTT7DGihKIXO10hqQNSqxplf9UzeyRPBasGr4yAHE\r\npUmz+yFewqjVvZymlh9Ca2Q4kGsbuZ+7+E7NhZA47hb72dXrHVvNfL6pMdCf\r\nzloeS7n9aSaDvQHhm4xwgrVAs2ObSJnqbkBSJgeUHRRRJe7B4U0r+bLB51lF\r\n2CnJCgy/qlwQGRMcKs/Rl0bFoQ/fSWxxckn43aEEdHdQHBRCFZnwODCn3FlF\r\nxVrLHhOBHFJM2FQ6DzB1JAFf2VRjnLWCpg/ewACJoV44wh7qOT/7Y9w2sfOj\r\nJsfFW3lwfD5en0sjWM4ADXF4IW2auOKY/Nc=\r\n=d728\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.2.0_1659604269618_0.6082987549954597"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.3.0":{"name":"@pankod/refine-ui-types","version":"0.3.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --dts --format esm,cjs,iife --legacy-output","build":"tsup --dts --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.56.2","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.3.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-pVa1Fp04HrYv6Y9LmTPqJuYp5IQXRTXtsHPfqChl5jRm5pGC/rTz2Eisl2t+dTOneWbkoilccOS/eh3748lNGg==","shasum":"3c49178591cf5d0bf5a63c7eaf628718b187f7dd","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.3.0.tgz","fileCount":21,"unpackedSize":49016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPUtj9RBwBi5aMYvaEWROLMLO18PpuNTn2Iouwzj2BRAiEAkjQGCIsJVOYG7YAtBhatwoIPOzKMTDV+dErlYG8HvWY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi68L0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6UQ//USTzv/A6BX2vBYHY6Jp3ibJqUMN36WqrgQ+5jWSywoRl6eFv\r\nhLoI2DVj8jREOFVy3Zf5drog0JF6Hcug/h1xrh/7W9BUkuM5LIjsGuFrocoi\r\nbMcTkhaCYXFQuJNy9MKVjNlatjiDvhs9Jb+RK7UaZkfCAoL9R+LCVoIMFEEx\r\nLaMZ+8BjtLZ451POQDIwaUo4vYNrVMDMRVsH5BQJChrjCn5TwefCzqSZZjP+\r\nlNu/5v2gbb9J2m3YCo9L7k7sIaqoriu3N2oWO1DEEt7K0+kCA5sZK2jhKKLk\r\nSvNV8jwN/IXus54ZmBb3WWwC52o68aL6lLaec1k3D+sDL1+gi2Ywy6WT3kkx\r\noTTASXoGiJZ80GgYhQFdvmhAkp79y0wr74wX7sohl/I+OxT9xPAlgo/+VqFN\r\nI41fw55mPSLdsLdnuiBu0Akedzvxb41xVj15WJpkoA6liMDZsTT+CemSsT2u\r\nRWKbaNz+nGksCKHYb2X2sdfs48gSuaQhX6QAiL8CPGopiTGWot6L1QmwDjAz\r\npoxUZlS4+keTjiMLbTU7bBMgv3GiWQIwx7p4IMWLHvtlMJFWcFndHA3BDlGj\r\nvcdfl5z5gy25cYGR5e00V+Vg4yD+QnNpe8N8XKJFgFckdO+I4jiZWDHFWs40\r\n1ExD3hv8LAy6ouA+FpXGQMFQfQa5uEGpsWY=\r\n=q+61\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.3.0_1659618036643_0.8234800799212401"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.4.0":{"name":"@pankod/refine-ui-types","version":"0.4.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.66.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.4.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-7Ma1jSAZjjoWgSoG4yESg6csGtc/j5vdYVpsE0zLSa2qarMvFxA9SN7yrWaRopsMfC+wblF3qr3kN/S4KOalmA==","shasum":"91ddb78614e4873d0d8a5bb7f99ce28f7ca6dfc1","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.4.0.tgz","fileCount":38,"unpackedSize":62942,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwhYX7SXSk9kcY7krVLYxQGIn1vM9/kz2+buZ+OqnqOAiEAtZ6WYg3Uz476+5fjaAUC0FRJvVxqmucozL3gvb96HYw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF0l/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrcw//ZKQHXJZGm2fGzvg4PDiSXVfYEt8mTPRfv1ag8QfrDQYhI5Yq\r\nqF/pImjKAJa172draxdJc5DFSlcSr8urzi00yHw5s5LgEUqrsPSSBglv//Aa\r\nD74oHTMK5PdPcXolXZXPJygzZUvc4Iio6uSeaPbGmbpjP1+8+figU2iUMLsn\r\nWtiFoKMQq69dnBXVEgbPaUsOxDl4atDocplSstT4ewe+BpW6YktOhBPrfxa9\r\nzvRHzl56609vmegTixVa5yiMyPztq2YntUsJg97XUZtJ9gDv6vsg16KNL0nJ\r\ncs6GFEPDtwIlt0ktyc+FImfBdXdz5XJhjzVC5AJGCzMQ88BmMrxinAaT9JFq\r\nNue4rP94e5tdqP2LS9jk9Kxn74Bmz3p4X7mJc4QKlQILtsJV8dtMY/FL5960\r\nuAltjZR2s/eEY5I1JBzpzQwEIx6tC6kfMLhG0bhX8Smei58VlYrk78NF+TK3\r\ntCi2I0LvVx2tum5Q1Mx39cDsY8gfs0wj10ArQ7iH7ApGWgQKTpe9rHvSXmhP\r\nKlOtr+h/6zqrvaJDmCDcG2jAiXJnuVHAY/zzsAD+EEYLBHAdAGEPCcfhLljU\r\nEFIJRSpXuaPIyBmhKEi5/O0IRI5MDEutPcp+olND/DLRagd2KbTr++iLwJ7H\r\n4ltJOPHucQ8PRRgXVCksdZhzT1g8FUQiC+w=\r\n=Rhvy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.4.0_1662470526843_0.9290735847083655"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.5.0":{"name":"@pankod/refine-ui-types","version":"0.5.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.67.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.5.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-xasnN1OzPb5IjY7KspDhG6upX0N1wAcP+zMrRr0fbiAeLho80N1i1mk3Bpw92jwRynzwt5qfF9eWfzYITxkLzg==","shasum":"be9b69364865aa8add49c72860abe2169e0ceb63","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.5.0.tgz","fileCount":37,"unpackedSize":60896,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErASAA8e/URrOSi13xM3B27JBOvzK7uoaVlR0xNypVeAiEA10/ajCLsRGO+XOB1FwkExQkTldHocZaHnKEtHcqlpII="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGFZWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopdxAAiHJuW+LOJu2PDR1Ka4BeCsUKd67xcsaH1TGadhqvlPaAuGU7\r\nWkfAgnKcH2O4y1i++TcxcijYn2VAXRw1IvqNsCh1E4mfsUM6TR6QFGhZRs+k\r\npCtlPZTWubsS5JF2osCojlCiDIAx+ckvEHqHufI/efoMENDmeJYw4OExbFUq\r\noUJUoouHpG7MkhstWVoQPKHydRpO/6fwcXnpTfO50lQf+BmlL3Aur4IKXBrl\r\n9jC/4YqhWjyy9aAnaTmqzVwHNF/PoBI5y40IrE8yjxhzRIkXUfDIjFBH26q/\r\nlfeGB+1ooWrdGQYKzdbtzq1iBgm1iDeRg9yDN9pOetSdFSWF6RSpArgHkl72\r\nrEXwT4ME+eC4yEmjr/qkIEwjcOa+8CD4fsqDhD+jDtgHfms5NvIIx5j35cYY\r\nuseJVnDNmi9FEnc1mzPfi+8y1N1Ipb63U+fsaq/cX7tgAC4LK87sVgp9U19q\r\nPdJmJ9gLHMWV2P6Epd6I1EpKoxjCLJT0aO6+WTBkkATKZNXFYhiatRgfLKuA\r\nb3k+ZnAf6x9WC0DPoFRb41ISFfWNwy/t8EJuc5XM/9cYHCT2gwuuVLRYcQP0\r\nfXQAEpufvl/qF6GSEFmchCGE1PFPEukXS+Krs+wzef1hnp5wWhm+mqiwwkhz\r\nLOgLvYOgUsAcYQ8bUbCWqJSNX/ZFpGc6z1s=\r\n=nAT8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.5.0_1662539350067_0.45609581573958935"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.6.0":{"name":"@pankod/refine-ui-types","version":"0.6.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.67.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.6.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-B3wso0wUClnsbfy+PgKpaRz/MPhcKq6WKwz46777zICAgugsY2oqttVNr0PJMKmKtlufBKPAH4jCevr7BuAnlA==","shasum":"25c9460a698ca6996ee051605fe8e784604282fe","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.6.0.tgz","fileCount":37,"unpackedSize":61793,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/0gZIlo1OSvCINPqS1dyD3hMMV7w2FBDoNTOjQEkvWAiEAg2ey2kE+3bti4/31CrqQzacF2Dagy9fBQPbsSZkLoNQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjHvvIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9Dg//VaWZgCRFizVpUeVBjrdECGXSUwGBIVesGa7ilBZ7jPfktK0C\r\noH716FK2HgS39V4Uo1e80ODOZ8/pdMse1rFkgTi95tI6ToJKM+/N2ZMZhU9d\r\nSMorO1G+yz1RvVaAuwZQUGR2xSHGkqsiyuMShMb5r0T83K9OZzU49qjPwECN\r\njvKQTmynhzdxIum+VOkFUj2PlMwIPhFN0o7edE7sAF3N8N4RrnXAa+l4kPuS\r\nhXu+0Zbq3lofX+DZexM3maK2biCKLQzERvQ5tD91/fsH8SBRzdEAkRZjF3VL\r\nwY0g+mKgsI+GPxHHJjIenOs47Z3BdXISpKK2Q9qnEdPwCIzv89N24t/UvEd5\r\npXBV/bGTLaXTbF7nL3Ag6OkXlqaTU9VR1EmCWZVGF1kSJXui+z8RXE2HEdsU\r\noBrDjEv5D6yX8o/EGFXT6ts2Z7KF5yxVJx5zVRWzPldfcoqu8eVHPlifqs4z\r\nT7Sf6rKeaHm6ffrqdIePl+s3Z86P7hGVj1i6wkW0+OdP2PzOrEvgaRwptKxN\r\nkgU3/ykEUlhJW7VstM7jyG6TAKK55e8jfzv/GUrHW/IuNGP3mYwhrk/PYhzS\r\nsPqLzTE4j5KGdIBYpdqDBQfvMideXVEbGDsZuY4szaGXXu1ReRbF94sLDcZv\r\nkUfs6KHHJfYT3FizciSZY3TAg2UojhxLG00=\r\n=06Es\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.6.0_1662974920744_0.1140230948674279"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.6.1":{"name":"@pankod/refine-ui-types","version":"0.6.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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.67.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.6.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-fFIei5rEP1CDrCNLQV6Egu1ArZ2aUiQP9TD9NZxzfRLIvg2RcDGt4E3M/pk7+EMXz+JMm3EA6B1bj6DuWRK0mA==","shasum":"d1512f22208c396c25c1afadf8cda317490c8196","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.6.1.tgz","fileCount":37,"unpackedSize":62179,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUB8eZmP1vrA+ZqkngX0nj19UWBIHaqc+3DHgLa6N0WAiAwnPkG9hKBtmPXsViAGMzoh+FAosxZY6eeOtIFrNOXOg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIHQqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoR8hAAh7Ybcfb+0lbr2G6HkcOJiS5ITjpSig8AmaH0nqAoj1kKRwmH\r\n9n/GCgGEaBMmx3k96aw1hp5Fnt379BXZl1BQwkKTs/dHZaVDV3n4UOQHolBh\r\nvJ43UY0aEf9uUroeSlzLh/7jdaBUhEPQFsoNdaC59CdXgGKtWWdx8vRXh3AT\r\ngtlr3rFScW4BZNPmTHEMCuN/GNbpn4l/AYCYEXUeWliuHn3y+YdlgcOIPUUZ\r\n9PQl1T/scVynPQ0ETXd9sBgEjqXGrUzUuwXx1+qsIqEYk8/TNp8zF0e/LFmU\r\n7QZEJor37DGYkcbTVUKvUjhp4HhXbKwICdv5VTVZIK82v24iJmTejgz14/xl\r\ncU5sgsC3f6fOwZh3Lxh2i0508Ajt8HB66e6o5dOit1Is/tM2XqEH+FiEa/rr\r\nYZJfOj+3er7DgCvcMR5HQgjwyLmZ3HUS0E4txYvB3qTCz42N0/LUxQ/2uazJ\r\nh+djGbXE7zAopZwowI7XxXkn9UfImlU69FZ1HxgxVi6w3rJCZr+C4ggTqRu+\r\n4ur8+skaptBDLV450BSuGrpFwA1mQEOnYqxRcc+voCzQgbWaXsAGibWC5+hQ\r\nkDbd80wj+vq97hGMLKana2T945w5xTslMhEmsUBzBy72o41FdRbiMZ/6lmwV\r\nDC7m5J2xmDUZc/g1bYdS1Jd5+eVfgymBflI=\r\n=EqQq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.6.1_1663071274455_0.006555431537066836"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.6.2":{"name":"@pankod/refine-ui-types","version":"0.6.2","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.69.7","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.6.2","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-EZcIJxu2Q6YjEfqiQr1OnMaUfD7/kGW2usVvBKRfzio4jvaQs0ZTcRqxzt8nrtuZigmHtlna4kEFA6McXIWQZg==","shasum":"c6a94f129c01a01cb0695d8fe2008b72eb994c67","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.6.2.tgz","fileCount":40,"unpackedSize":81226,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4xzfRYg8cuk7zzlAeqiva12QyFF9d1/mqD6Wxk73k+AiEArcFYbvpB6DZnijVgAMzkhZ2z09nC26Z6IS2bOqPy9JY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIKMAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIjxAAlyUYeY9XsAzK3hinw8c1ne3wCFZrOoTxhb0J7LXay3JLpT1K\r\nFbOkt4xB7gZlGDeEPDuWcM4W8A5vmkJu3vKbwBIdstv8UbMGCbQjRloBUrZM\r\nRzLFJkxS45NKyrXqSCSQX0ydXNqzqe67ruPPyryAoYOy25l/MJGA8AedfC9c\r\nhaW23pUcFVSpFlWfx2vb33exmCec1NUr//G3IvSIBzGO5+kE9GZAPIWFEc9y\r\nxQjDtIUBqM9dBXd5PIJ4fNGfZAlhZnD9VMJi+J/aJHw7LiquNcIft99b+v3l\r\nCLQEfFQ7NY6IHLR6lnbYTIJLpDVkboUyXndnn9GmCavyhDyjaiprwLrGIzH4\r\njC7oltt6mkPHcvSxd4UvJGarRJtbWhMXfUIO08M4qIOn2BVs1qQX6+ALA9/w\r\n8MCjuqpRZkBoOyGl6i55F8ucvXUf1vsMfPJexQnNoiaJBRfFEV6ZNgJqr3O4\r\nclHvEqZNTxWgCdxfv4+9V+JT0G0MHVmDVVGy6OUCAqMhOxSFm1WCLN/XOY/t\r\n4uDhP01k7eeIzPZ4kMzYEdTM5GlqVK4APV2X8J70u6cAkxlmi81xxWGT1Utg\r\nDrObdXnJ7o9AzYBSaEhnibTzh2Xw55QHvwpqdio+PmpKa+/GswLdcyHb3Anb\r\nMxsdA8NuKvypYyT0TU9FUQuJfn51VC+A8+8=\r\n=pptH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.6.2_1663083264335_0.7020700189569513"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.7.0":{"name":"@pankod/refine-ui-types","version":"0.7.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.69.9","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.7.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-A//VZVqFM5ojsMlqeP/HNRi8O9rbFVehJRh8yztDDqPqBrK4wJZwQoPDyRtE2XehSY/MQ6xQKpHY0mPF8LElHQ==","shasum":"5c4b9abed10d242c5390d6456df896385a5cabbe","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.7.0.tgz","fileCount":40,"unpackedSize":82854,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBJjws7+JPotMRF15KvIR3cWRRL2f4VQFgC5ormYmFHgIgHWm9wYnesP60m8WnXgi9IjFh14xwmGy1Venp9NBWLR0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIeA9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJQQ//QOOwuGxA0mnbs544Ot3Tk/ploHfELNRKs+Ao8OH8j6ZOAi5X\r\n/4rWhaULRIVeL5uR+ggV/6z9xtqhWhG8qyJwgsooD7pL1rck0ohRV0lTfvZy\r\nr6AP/v9OQuYbi06+tarqFZzj2Qi5Au129wGUgQROzH0d1MentLL5mQ3NJ4xt\r\nzrhg7wo8NYWMUOQlQgw4yiL4wDVHlK9bzOKgsB9GV7QGZpGhClSyycWVq2Ca\r\nd9N5jpiFuKuX/7Md2kY3p0dSJCh9/B1FGL+yt6m3gMw0U5kQllI9xXR0VC1S\r\nIFKQSEv9wFqUjDxRUpWqoINYKxfGcEkh7ZZrNfl2CC7ZqlZwUlJ+MruVzmZK\r\nu/mDKqqzvzPmSa/12y0eHa0rkWWytHGtPWHjuI987ZQyl0b5W9fcZAgyOSxI\r\nXjOD8csz/efVVDZFzKjrKExqEgFDSw27FJpbaZPXuTO3Zs9S25oyltosLwpV\r\n/6Lx5xz6j4z9RU6du6/jX3F79b5eAaiDY4yXdmoeNKHrlS9IAXsoe96B4oVA\r\n9je6aEBT0N+VNFxupWQ//G0OBb7CuziXs0qcXwcRezUO/pWAlSXxI7A+sfyR\r\nXjXqGoi1RhO4kD2eG8nDspuOlHvLTqbMoRDvCyfDveQNGjKDiGEWVy1jc91r\r\n5r+H39eZwRLs2jMQTX9m62+snAgDEEebLt0=\r\n=G5DY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.7.0_1663164477571_0.5892755424652063"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.8.0":{"name":"@pankod/refine-ui-types","version":"0.8.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.69.9","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.8.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-RxjRsYY/UwP46GG2eZmMIIakAf6sbCi0HQopcf+QH7UsJ3ac7UZIJLU96bc1nw+kd8Excz3Rh0qDbGh4eLXXeg==","shasum":"51a141eac208795ce42d66217b59b113bd911cee","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.8.0.tgz","fileCount":40,"unpackedSize":84750,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEykhtf00X/UjZQXX3atMSN+ljmI9yo9drIXjITvoipyAiEAxZEfBFLdKN1AjGzOnWGGtVWXSMoNM/I0S6IIoiDQ5A0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIvdPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdOxAAlvG/+6C8uBPv5whq3tjcSGEZDHIoPEZNE6T9eXeoyCsDyZGW\r\n0oGDEd/tkRpzi3qfuquYGXI+agl0h4Kre3oA6BP/ewgsenHsDE28J19cPeDJ\r\n5SjeqdHXqrNa4MY1hnMuWs4hJ68tZ4E9HYSHZtZw2K7A82CH0Bnqpc9YTSOE\r\nT8i38AECp9Umc6uIfXnGyktDPzj3zV5lyE4jIBm5/k2237zp9XP8iAS0YGBo\r\nTuodM4VN2yK5lOS6Kudw2/tSPBYCjTPljBGCzD4oBD5hYco3j4rYxI2+WgJ8\r\nQD/se/Z327YgFHlniqezYQrmEWAiZ1y/ThvfZHFsZkSTqtOWPJUGlb8e0Tix\r\nQAdGxrtxmbmNI2iP2fX1wB/CYTUUp+GFpUcg3LMx2oY3Qd4P7yj/lLSr4k/K\r\nBP2m1kPUDXhHOrT+f1h5GW+urIGuTU9E4s+0BEL0IGXQPzytZRIwuaPlmk9h\r\n3JGrmx4Bgetat5dKqbCDZJflXFtG7+wI1im8+m+JtwTKVj0pg2zvlI52sTRy\r\nBXtS3t+z3YCZdkumj+z1g7yb81qbvxiPR1ldNIw305+D+tYYXjngm6nZyIV5\r\nWhwpYxX2JcJoNnnIjmo/wH8ee6ndHG9GIX1hyu4qhAjiKmL55UKadwpFcthm\r\nyPIgyOHFFVlDxxAprfRr3ETo7Nu6haA8inc=\r\n=30La\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.8.0_1663235918837_0.2415493144799814"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.9.0":{"name":"@pankod/refine-ui-types","version":"0.9.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.69.9","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.9.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-KqI2B/f6RNKCfar16mZMOHSWZk4UaLujifhI5PYbRzJHlMZKXdwS3cLKfRLXd+Zcrng1lBPllQa2HMLSXjTTmA==","shasum":"85c6302a1bedf591ede73a39b26b010de76e8a8b","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.9.0.tgz","fileCount":40,"unpackedSize":84932,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbyKvh22odhiu2M5OTJuHq2plueJYify9O23QD0v/rFAiEAjkpM4XrHxPcL9R2oNpaqHSCDiUhOpY7Szsq5Ixy6BVE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIvx3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriKRAAlyqFilmH6tCuXXwG/mzEYEoOjidpsWVFijm4+K0L7x4XUKcM\r\n4K32tF2+AGdUpi915Hbs/FxOkbqNGX3GbwLHrtSiQ0+DkgUOmfuzrnFJHqkC\r\nFCBo8B6/m/4eT6hYyStbrPJ1Povlb+pIvMFYU8lboWPKKexlGoCMR5AF7MIj\r\nrgJDGA6ddJcAgMKoyFdZ1pJquuagDzcc9CpVc5jH6RC+E0cth/L4gCXaqRv9\r\nVRW5Z/GnQiv9juw0tloPzaK80C8nzwndc/MOq6ioeYKqJBl+WIFaj6k5WRyQ\r\neya1X5xgt8D1Kwtlp0U3WRgBGRU8t0lRlpH0Vk4q+r3M2KG09Tq3Tl3VeX2u\r\nU4XkKtDgW+YxLfzGr2fSO3BwKBDXbtoeBYYC4cSZQy5BrN58Cz/nw5+b7pW3\r\nXfD+nkH4oEmc2Ui289jB6v1DmBk6HmuTfGP9WpfaIlNATQKm6zq2YRnJbjKh\r\n3kLndbFRolSOhSZyB9eDDk6UV62Sh6YS9PZ+ODOO3in3PeCx+yEu5CTn4HV0\r\ndIKKJ3/f2QXThKujjGW9DbJHmQYgoXCiFPFAC2kegCqd5+Ce4btBUAWzCj7Q\r\nDv15DfmxWoOnfU1q/5BaV4Vj3SyR6ZvS4ZOhyJp808ymVvtJNXVcWrgFbPAn\r\nGhcEpuVnwMOWzDiYabNNiNyac5N5djZcnG4=\r\n=KQCx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.9.0_1663237238839_0.6221063708928811"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.9.1":{"name":"@pankod/refine-ui-types","version":"0.9.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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.70.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.9.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-EQJ41s/fygD4R2Hj8JxVgvXx8vCDxE9Uf0otEpnU+LumrPIuOnjFDz90XfBfsgpha+naZB9q32aMGvMx9sZ75w==","shasum":"1599f7e12c8d87cd86dc2a8ee83a9927f51f9f8c","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.9.1.tgz","fileCount":40,"unpackedSize":82400,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5xsfUZ+mplJLHIFjFJKiuXKVoN/ke8fr1Nyh3jjVDBAiA+AtHOL2DBy4KSh0el3/95IOyL3OFrCE/m8h4t9mMMfQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKeaWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHjA//UK2brua+MgYSYUWsBo8hykUWjwpNA1Tr4l0pjZgi8FXJ3C99\r\nZNy/iKGRJtremTUha5sIAUjdqelSQlV9qxE35qdnVFyhWLeKNSEtVdDgFGYe\r\nAW4ufRhShcJwCCBcilR/Umf8VRBSHEno/0S6n/eah5tnADJLIJKGpkMIquZM\r\n1l92j6mytgN8WQr2jhQyO3J73OJ/0ihbLJHYgsGW0Q/zISG1dqag4Y9P1piT\r\nuRPbUbP0IfoDxU+5dMIPq+BFqZWxcS6Fv1gqiQTqTzL/Lkd3yjTY0PVG2C0M\r\nsocUwxfBBra9hO61hJmdBvnx5lJ0beocyhKTDaXK+AEMxgwgnkwiyd+TxFfc\r\nWFs27ckDsM43nMNVvMcN/UQ+XEHkAXLo9qxQqz2q7FtwWok5Cy9DdYihTLl0\r\nWdof0ssaTVCV3pf/b1+NWqTukc0UI/v3cVPNffuLZ0gEaM0X0l/UnTPsPclc\r\nCoAmG9RK93hnPtbrtK74VXadZElkCmFftVUMU9E1OVS2xSIChvopJK5oCxb0\r\nDbfqKenD+9Txhd9Sgtbq3D+urnYLbsQHnteBIVy7CBZnjuw4zroEbRa0GPd8\r\nJbq/EujG75VXZe0CK+tMzPL4PIpcPNE/2wubTmjV88mLm2IhReSqx8yCk/rj\r\nNA97UrcTD4EoAD2+YV3Fg5kpyietULtYh/4=\r\n=yCpt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.9.1_1663690390600_0.9759407926023385"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.9.2":{"name":"@pankod/refine-ui-types","version":"0.9.2","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.71.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.9.2","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-j6PnVK7gmtOUeo6WteSQA9jFtIa4Le/MNbJFm2abF9VGjSFoVLJj61U4ZTbx6kO22Dsd0s6wDgVCvGxNN0oNxA==","shasum":"8f99f229b253256b2815d631595c408661e23f22","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.9.2.tgz","fileCount":40,"unpackedSize":82711,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0l+UVCBOeXrJhDGQV4RnXO5c+CypAy6zGnqs9tAOHsQIhAM1BblsKir4K+MC3Im4gaAaNkRl49ZidL4gW3SYprCLZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKrLgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlvxAAkF4t45LrO8RBs87SG34GAgQxjvUMc0TgXko1LJa1UxRHSlmT\r\nLW3R71lYWVweBq8injHBmkxyxNeA2kGfi0DJd7g2LKTpIh6hv6KVvqByaMeP\r\n57r7jFAvEsiz4v1q5A+g3XpW0DzlrpMxvDLkHUZ88SdL37/a1HqP23TPbmLd\r\nL2vK9ebqf3eCmjcBbrAoF4YDdU3P79oBKToyVgV/nSRK4gViNZK9oketcTJp\r\n/peVgDaLDHdg58+BHbnoUF9BsboOWt+hnOTZ3BGO4IjMBzj1jMmczvfNSFFW\r\nj0ygXNYbRFfBKQ8pWac+ksviqlub1OzOUWdsSeb2dsX8mjgT72CGXCIi7vOA\r\nxBFqb80faw1GLivEg1rnQslZw8uapHtSDa3ckT8FM0x9S5l7e6meCSoNFlHX\r\nfCpTgBOwqTKcM50pE8rvg16RNJn1zeAZprNp7r3mTSD2MZYQ1DuA3Y96Gu5l\r\nUxHWWDo+DVDzfHHXJQ7YZ9G98DPlEgFvlk61BCXU66QUXFnVWevRO7hc4wOr\r\nzaGce4E+woEE+O7xsOcFJnlKWTP6ZfERWy1x8Y3pLvWV8/flVNLe1JD/oWfM\r\nbMzquozYI6/vythkWuvl3aziFolWf1WmvP9Dqof3ojabvmpnswh0srDxELV/\r\nOHu4uOj3KBmJhOkSmkeXFI6z8YpnwR0uAxA=\r\n=jUVV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.9.2_1663742688487_0.21149687318537258"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.10.0":{"name":"@pankod/refine-ui-types","version":"0.10.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.71.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.10.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-oQC6m7j8DkUVaAJVAc0pkeijJ3pRfmagkL2bNwNEji8NGv6v+IVisb+FrLsfiHJzZIIQ05uL12kcP8cMj7N/MA==","shasum":"ea8b35c2e31ca47c800d7ad7427ad1a1dfb00c6d","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.10.0.tgz","fileCount":40,"unpackedSize":83543,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPA0ia9Uo0W/XZcP9fgnRQf5S++at4cdrSPhzexrfWXAiEA5uYnKsGKeYFAxFsM0Lh7bzc2dGqvthpGw+8gNtSyo/g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKtU0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGZw/+MIsmAo1/z6YXNUhfpTnC5YZI9DSjbHxzEXT4wJNsb34HnMoR\r\nI59M2Rl8ZU1KxmucSuTbcT+kSygrkP/D9l++gJf8JsCZc7ThHeBY2hMgjB0J\r\nczLQulXtvLVDDQX5RXEAzvSZKRlSn2u+4eMj4Oxmoi5D53dot27CZ1RXpu+s\r\nHjOXHiCmcAwVeBfximwz/eTH85qNDZsi+WIxdU0N3NBnonD4LHjJxEepVUDT\r\nnBxFrZSipeShbPrXs5SU5pLdLqCNHVw4JVjTfBYgO5hl/C0y42cxiKCIno6m\r\nLiENLy1I2GPam2VOgC1IXIeCgvQfWpLdAQdJPeDovURb5HqkGF5iZoRZn0ze\r\njP3V1FOROTraS1+0OlWGHCL2D+w3lcMwIOuUQp7/3CmkFPqNWmZ4Q3XWwWLO\r\nkwQCnkTI7ZSYJVzKfXjJyJMUj77v5yRJI8YuRL4ZN3/jJxOxZc59P1eA44s/\r\not8cwc71mnFXQ/3ARjZAdPXAfzYhCLdm49cSYhz3pjYwXuWIvFBhhkocG6WI\r\nvFqw3uUy32MY1oiTJsSOzpVQ+vUwjEH6OZPpnC/DB6QBrqgV31IEN2EaJ5P1\r\nAqpVIWwCChhrTPtwYnHzsxVPzT3lCykvQWZiWFu72xPHDGCSYjfgrTpNm1Jt\r\nvvQ+pYh+2NmauRcx0/tglvYYnKYVekK7r6c=\r\n=OJVl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.10.0_1663751475841_0.25996932854140686"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.0":{"name":"@pankod/refine-ui-types","version":"0.11.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.71.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.11.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-W9LAws4Vpg5w1cooSgvnAaZP3uamdR68qks48Vk/lVmFUpAP+v+mI9YnqEanqdvqGKzX7dBIejrcoeEWsAS9gQ==","shasum":"a6b6e95d4ddffe59b282600f52bae2618bcdc03f","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.0.tgz","fileCount":40,"unpackedSize":83629,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCi2Sz+Qg/39oY8SeWQfllslPIyLEAKOpUR6O13Dc517wIgOodIKCzlvde8y+dyR4CIsXPSo/4Rjgb4sqpQ5ZIvuHA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKtzEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo50g/+NrD3mqdpT6PbLKN0OrLAIDDOSkors1FtUMaQL59wfT0sWhe9\r\n77MVI1msmYuogw8tZhYlHAhxGM+eswkF+MPNoSACHHYmxwkniVZ0jv7ZPBJo\r\ngLTLvvpR2Wp8F+JG6KX5rh2ai02nHxGAA1DcChSJV3GNO9wnmdjSciChYhsQ\r\nd7B96kYm9bfMSUlHPAVyA/BLolvD3RdmPj26a91nke8HQGOHK2ZZerwwy7wO\r\nHWqpLDgsPMx+aRY0SNu31LG8Z55pH4eKyQwdYXL/FB139YbU8y0iWBzXmkdm\r\nsMCbdy0FtB9hXaDTu6Keca7haxnWr2X+oDXu5c1Td+KsTQeUhvy+BoMakq1H\r\n1QF2sCTB60IM0KoYFq4cDKc0nctiDoHAIgJ/qBU8WQS4bWP41845PRDZ1sKW\r\n5nAKkU01HMPN3DZEpFCcBWyiyVtcQP3ev3/Jbi8yKa0gggKeo0LpoHWudbUC\r\nnLbHVZDAvDmLrtXSVREjb5MgSU9ajZ3dK9Y480fyO1IFHJ78cxA9Ll7dCEN7\r\nkTILfC0BXjL9jGstKXZG9V0LD1avhIeMTaVEBx6ynW4+twQembBIkSPpXgOd\r\nFYjx50JG7aeRFHBiNaZ/SSxF10r/jeX6CT2SeqsTfpyC/M0spOIIy7ei3mtm\r\nSjkJxj8psnJPdYnDMOZb0Go87Kxo7KbO/8Q=\r\n=FhYF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"aydinakyol","email":"aydinakyol11@gmail.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.0_1663753412492_0.1706918414905647"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.1":{"name":"@pankod/refine-ui-types","version":"0.11.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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.74.1","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<a href=\"https://www.producthunt.com/posts/refine-open-source-react-framework?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-refine-open-source-react-framework\" target=\"_blank\"><img src=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=319164&theme=light\" alt=\"refine: Open Source React Framework - Focus your business logic. refine will do the rest. | Product Hunt\" style=\"width: 250px; height: 54px;\" width=\"250\" height=\"54\" /></a>\n\n[![Meercode CI Score](https://meercode.io/badge/pankod/refine?type=ci-score&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Meercode CI Success Rate](https://meercode.io/badge/pankod/refine?type=ci-success-rate&branch=master&token=2ZiT8YsoJgt57JB23NYwXrFY3rJHZboT&lastDay=31)](https://meercode.io/)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.11.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-seCbA5k7wdhM9NbRjxZbeDHDAfKPhDNTpsmYzaFvfYM6REZN6WXHcYx8UlSAcUKxZR0Cm3gGZn58NyB8bB0bag==","shasum":"f847aa3814949dc995974948f9877821a1b795e5","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.1.tgz","fileCount":40,"unpackedSize":83747,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3qaGm68RVsm4RZAo5Il955wfEYSIm12ZwnF6/sXGB3wIgEM95elLYF1wpPMO8IZExqSGuMnjH8PayvzMhix/rLZo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/OLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/hg//WOIAKPxFaiusqTGmYzZ8LMpRIRtbBoHyohDOcxU6Fn6grGvn\r\nNC2ln4jVMlLFgpAXNaK9vIkXafZ1+nufBSOQB2cCS1GBGTT0OsMfMgj0aQGQ\r\nhxThRb+sZpDcS90yAejAOS2m5mZnzsSi/3JLlpfUaOGryykx6+iCjySBx83H\r\ngLfgecsQnHSv5sqfPa7V2MxEo5+ddLeiNc7nH/YzXgLgmPNQoviswYcas+Za\r\nEZRisk99k7jpLIdcoYlblcInOq7IvhMIZRUdqOOCpFsGEG2nw9CH2F+NSqkL\r\nWYDC5ArmjUsgE4TL+MQV8sz/aO6WgglaVD/PFqF5FUgauxij5HzHrqShkl6n\r\nt+UVwQEx6d8iAQbsDGBIG6RVrS+DQYKa+cjmZ/nat1CoLtaU0pHtD7xwoGRc\r\nrUiuaQixNj2Q57dqQTimkZdzn5kJYeKKjEa2TYm4V4oOUnVgoF2c56VdogVE\r\nFA13+F3HL1/96A8t968i7m7QU2lPwQ6p6kYDAKzqYVYZQ66MR/30LTXHvsyy\r\n85/ZH8fBWqQeIZK1UiP1JGwnDu0m3sJUkBg1q19uM+7fANZvvdG6v79WtTQT\r\na5EnseJ03ts3pNyZSrl1+/Yk1kO55LOn4WEJiI88luzBijIpeAE8nB9HGION\r\nf4ZoBBhFcBn29RxeFCjybciLDaWo8FBftTM=\r\n=g4s0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.1_1664349066953_0.3145666130736313"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.2":{"name":"@pankod/refine-ui-types","version":"0.11.2","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.74.2","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.11.2","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-SeX+ES5yUFiDPwrIOcufYKO/TvtlTJRLPz/wG+xVhZnVAnhREHt/yqq5ZxBU+WfrLiEmMxMNFBP9bgGojZ/twA==","shasum":"6198b408d2b8c181e6a6fd3a45de4cc079b68df1","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.2.tgz","fileCount":40,"unpackedSize":83899,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfCb6ywrw/ZraOqD/D4Cx6GSM4Q/HbtB5Y7qjfVOQY1QIhAL+ZUFMBXO7K9cn5uUhkTiE77ocou2amMivwXkoZ0IDK"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNA4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKNw//QdnolE3rpy3B/CKK7tdC8FtY3XYnls18eQPGJXy/m+957GeQ\r\nKFI9DPW91KN2NOrOY7z5Tem8dPoaiqv9nL3EeGLQVew3a52P/rEf1QYUTiYq\r\nYlQ7xJylQpiKjBQQTPcW1InTEVp5fZmV4ZZzQpE9r7u7wN46vGkZn4Dfmg+K\r\npRkR3QwNrPQpogdm7V8Y/1GPSErlOTE4tQC4+cS60xM8jNizxIq3m7iij+5d\r\nMHgeCsUJMwkCKqQrnrhoi72zsYFdIfCzrhc6qWPnHN8s7OZQyb4293+NuJNJ\r\nkz4IyMAN38UAYB8CXx7C8EjWneouoVyGDlluNgNMCgKugWyDMAb/a2FWDzXF\r\n0LHBoB1ZFdoEmYVb0vOfxP2MKcne/FiMbXY8QTfGzOQRasZMgRnmY3Kc3MIm\r\njlLA9hhoi4yj7KWqfHDY4VWwyfjKw8XpY36ipPmyDdsQtu2UuanBK2k7xN6a\r\nmZ7RI7YlWOQ1pKffcT80nk+JwEDpjk/0ZzcuvDIRvx9l4EhGJFDX3si6G60/\r\ne3G8BYksJo4lfudKJngCDh97vWVj0voAwODesz7ajD6Isqbyz/60tw+0Yzsh\r\nxXHYj/z099ewDd6fpkuRDfLkG1BaOTtTzgWTW0vxqB0F0HG6rLjXndIjjFWJ\r\n8RuThtrQZVG06U9f5n87Oz4q3JS/cB7o1wM=\r\n=ZhQ9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.2_1664355877087_0.40155629030912987"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.4":{"name":"@pankod/refine-ui-types","version":"0.11.4","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.74.2","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.11.4","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-D/ATYwmK1/5H+W6l2hCA/Ec90yktcAUhGOD2AJ/l1AwXrZYpznFp3O6yFvvtalbXIcaX7ScbPM496S17IjbDnA==","shasum":"fcf4eba944efc80c881f54f853a572631b7923d8","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.4.tgz","fileCount":37,"unpackedSize":80934,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoOBJv/5ujK3YxhHniKFj+10l8PuhgEJJWBu39gZ28dAiEA1tjwSW28/vlA3z++eA+Q2l1L2F9Q6lKxqCNvrr3jBfg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSAOGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO1w//eDvCLVuODOTVEaXR2Z94HOo+ggLxrCO7icHpj4ioig5ov6/W\r\nefDgaj6U2oB+g/YRkVm3ksdPVAFA8nqbjSTrNvQg1YCDmIfKEXe2MxWuXUld\r\nmUbMc8L9P8JmpB3qj9L4u9ZrKZQj4ShR6DGxK1ZtZfyIcq0RfR8jgbCwhV2N\r\nsSkzlK7pYq6i7WZAGYcsqj0uchqH4eqGGMqwKUo7KjT03cRE12EEB86S2m/B\r\n4JBW+IgpE8tsthDTOK9TD0fDzGwPQ3rAmAXCDfaPVVJVEG1Xq1TVvHWFYTeg\r\nzm+jOyxGAt2XlB9cSDdojBM5Vk9nwfCLH4uyRGWCPnNYyKAiqcS9aGeOL53N\r\np5mVwAldJ6VG2EicPChDBI0dinH4NDcBELXWWPp71DOq1nkKEzY+jPjHowlt\r\nWDqJfhhwPSHrFaRpqRP8kDP90/3PaltPAh+AEHkANimkpIRnGqhp7RPGQOxT\r\nDNYUfrh4vJg6DjyzfWXV32LNxY+L4YOx8F8XqeklgjvD/pxxFnKIvlMwbk5X\r\n87ky19pYjV0PKfkLjjeY754EI1AHAPDTlNavPAXJw8pAiV5MQDPgYU1co1Db\r\ngh0NFW8qfvKWVr4wQfe+HxjBFcz4go2YfqsmkiQ+cFW4DPIkoWsa0soUItj+\r\nXUTtHZ48Zaj+W1l40rzhPpWyqUdAF2QGBqg=\r\n=eeDK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.4_1665663877949_0.4026868141148363"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.3":{"name":"@pankod/refine-ui-types","version":"0.11.3","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.74.2","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<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>\n\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.11.3","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Zb2QpiPTbt4vlk4vqFxJ+E13swr8tbfxVTcErz67H9JYk9n9YfDbDDSw3lz2Gfzq+NGgGpm3VNJadfI+4WsgbA==","shasum":"e58b1f8a398fa510ef96ec0975b18e5697d6d058","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.3.tgz","fileCount":37,"unpackedSize":80848,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+4VHWD2v+DmxVD4qJQ2+yNeZWGnToCYUkaqUCyWW/3wIgDk7RePNdppkmtk48Yw0A04RlMjPvbWeh0pLPtToMvrg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSAUSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqnlg//TVJrpkxA2k8j6zFTevyB1xvlTGY1ugVMqZwJ0JoihhUuGSCL\r\n7k+6yzXeI5PTeYjPidFESJ3RLko0Rh8cFnDVkaUxqv0koWs/grsxZ1ALqfuB\r\nQOR78TqeMiaZRsIC9RAroyPKSVveZ59i4oP3RB6/A0oK+cy/+BgofW2XNLG0\r\nhKwftBnAbvj/DPH5lafq7nMSR9Heh0VXQsc4hw2Ayz1p0TEwdhZt5BkJTN2y\r\nPbCBpYPGaLdootI7eU5AuNlcefYirMX72hTm1x2sIl0EHx41Xj17OvsDwIpd\r\ntTGmhw+BVKJLLnTsBGAAQ4VTyxNBlt2yPOUUsQZNGd5bnTDuniMQta1mX32B\r\nhFKPG3aYwQRkpCgW3zjPZ94hZzbXq4tCVdoIKgA6kpTKX/cnr3HupfkazrH1\r\ng4f2cAYAKOK8WYEGDlWb7A0oGpPk1C4tDsHuBA9Daty5IT4EblCW1uYF6kKV\r\nyVauSoHFNjIZrujixg8ATzxdpJx194A9BpurSHIYzQL8266YYUpMJBQp8i0C\r\nocjFz9sqyexiFRuczO2jepr/J8sNZAIFN0hPBZNJ5DbJIJbt8QilmoUrVMbs\r\nZ8lK77yJnRNw5H4lw7gfSqOQhFJHnxbZOpnPsCK5wcEuJl4DQnfr9WEPxOOK\r\nCHVr0pdPoOwPL6DiGMpS3JsmooqRD3a9K2U=\r\n=9Pn9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.3_1665664274320_0.12803370740503972"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.5":{"name":"@pankod/refine-ui-types","version":"0.11.5","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.85.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/pankod/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://refine.dev/demo/\">Demo</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/pankod/refine/projects/1\">Roadmap</a> | \n    <a href=\"https://refine.dev/docs/examples/tutorial/\">Examples</a> | \n    <a href=\"https://refine.dev/enterprise/\">Enterprise</a> | \n    <a href=\"https://discord.gg/UuU3XCc3J5\">Discord</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<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>\n\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://www.pankod.com\">Pankod</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [REST API](https://github.com/pankod/refine/tree/master/packages/simple-rest), [GraphQL](https://github.com/pankod/refine/tree/master/packages/graphql), [NestJs CRUD](https://github.com/pankod/refine/tree/master/packages/nestjsx-crud), [Airtable](https://github.com/pankod/refine/tree/master/packages/airtable), [Strapi](https://github.com/pankod/refine/tree/master/packages/strapi), [Strapi v4](https://github.com/pankod/refine/tree/master/packages/strapi-v4), [Strapi GraphQL](https://github.com/pankod/refine/tree/master/packages/strapi-graphql), [Supabase](https://github.com/pankod/refine/tree/master/packages/supabase), [Hasura](https://github.com/pankod/refine/tree/master/packages/hasura), [Appwrite](https://github.com/pankod/refine/tree/master/packages/appwrite), [Firebase](https://firebase.google.com/), [Directus](https://directus.io/) and [Altogic](https://github.com/pankod/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/pankod/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/pankod/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for pankod/refine](https://reporoster.com/stars/pankod/refine)](https://github.com/pankod/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present Pankod\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.11.5","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-JyZwKyfgfzUZFUzADTOtn+YJMdPm85Go2bnmmvK1gUIazg+AsKwrq47wgx7LvpS+sAeQ3yOZgmKD96kUQ9LQuw==","shasum":"3d267965ac3218f2335c09c0e4a7c48548f9a26e","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.5.tgz","fileCount":37,"unpackedSize":84727,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbV9OjK0OtAvqJyFFPc45AZ3oFsU3IeN4Dyn1820CsRAiA7hYW2VNe1DfFDH5V1cl14IVD9bc0bDsexmylKov97KQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTUIRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFHhAAnn1T2zJK8Toa4DxJ1U2Gda/9lkk0hqaL814d6MDC91GlaBuC\r\n6t5iCGJoH9kXf1P+LeKjYWlTRPhRk0d/mm6JdhKQA1NXjKK49EAcNDpZK0gt\r\nk/c+KmLolgSBAvZKMJK/4LkFv5ZLhcWqUW1eEifYin1aJyZ28JMkhPwnlw9G\r\nbB4t9eDXFGOXL+JPxcd+30IXWK4Tu5DB5HYIJQg6eQ8f8C6y/mWYpEz+hQc+\r\nKtYgoCA0dWUKOuimm/U6+5Xkwnf9VaC4dID37dstVEZaq7z92Fx59Tx7lNV7\r\nwGX8E4gGz3Qs1aRul2BsUCvwjVFOHlJL5Qd5Rz507aMNJ5xj9F7A8Q6jYBDp\r\n8IZELI+RXMceArDQYnqHOt85tBOUviy9x9KV1Kk+FZEc9nZhJ7YswIMO+I5N\r\nan7azI0RsellF9AB+w8QktD7VyMA7L1zKqSiRAxTmYZMPyCiW0lwptHw6Zcf\r\npwMOV//+UhBLXinO/fpiF0Xma5MGgV8wFQvJ7de4LsSZHiWnZzDOmu0fX/23\r\nvLXliAJlBcb28SD2Y477vLs9MnHoS4QMZeEWnmzHWJvQK0Gi1JApboRzDF/W\r\naNkfrsGQmeTWuaQXPe2bQoX1ZZ5FPoTcIzzU08vBZDNC+AkN/hEk1HFowOc2\r\neV3oRTqIdepRr7PNChfpHzwDPHhNGd4dB74=\r\n=q/Ij\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.5_1666007569207_0.02269019928446081"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.11.6":{"name":"@pankod/refine-ui-types","version":"0.11.6","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.86.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"Pankod"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.11.6","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-SXV68wEFXy7CwmVAxviy4TivThABvVj1sxX0WsGuUmaQ2Ot4FRUboEFqpvqS+uWDXryCH4fXW9H63DOvoWww0A==","shasum":"8b8b24aae5e7e41c127c7728aaade469aeb19896","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.11.6.tgz","fileCount":37,"unpackedSize":84858,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUD/VmFBwg2OhLBjzFTaj6OCheCvlRrE1W9bBm1yjPQAIgZAvKCGdKe0m2JW+Jn0vUizH+wqt5VCO1GE9ARe8c9dQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTUkcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoILRAAjijtGJlRENYAjSFZuBHKxKI6GpSgE2qZccpygMOkv5ki0nNo\r\ncCSCXSKEaVCdxbbWD1LU3AaUv8V2gSMFwMXaadNpLgvEOKmnxzbTPmOv0LKE\r\nQaMR8HObG64n5qe4ZPNv/Hsh9HlRyNkV0ALQKFtx1/0UUy3JmrLkBy9GOPPd\r\nubO5ktcG17lM3crsLGWeaY8SfihN36jE8cOOF30Ug0FSNmCB7CUXaH1b2h1z\r\nLG+ynz+F8VyyA8jk6QDicvGeEnYjE7jK1HrbSZ/HhGBG4aTkgITxHBS/UhKP\r\nWSZrjZCsYupfIYnoIcPnL12F/BBBPBRJZxupL63Z7fuwfSyRItUb+2E7VH93\r\nxZjdamFb7BoO7L9Qj2Vk+PTs37pCXwJNQum1II1N0KwuO54TUEOyfNi53LFS\r\nkVnDcjaxRvUczUoaJB0HDBN0mWqDSz3s4dXoG0oKNbhaOV32z+30WYbhasm2\r\ns0ohOatxlnyTinRy1bIuaqAjAaSQdFSXirNUKIBn5OOyFc8WOcWpNVStymfx\r\nZPjJ9CXT4Glle3LL+/z4mWw6XkqXex14fECUWiTQZC7Rk6c99u36KI+dq2kk\r\nK6sDZyAzMe3cN1GXHpEsbq01+dm+ea/en076vlaxhk5zn4SzhkWOATB6r1yY\r\ncE2s9aK9HcGH7Lp4dXAaPxE/rWVj55t0SoQ=\r\n=qoKE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.11.6_1666009372101_0.9366087356381578"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.13.0":{"name":"@pankod/refine-ui-types","version":"0.13.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.86.1","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"refine"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://discord.gg/refine\">Discord</a> |\n    <a href=\"https://refine.dev/examples/\">Examples</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/refinedev/refine/projects/1\">Roadmap</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<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>\n\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://refine.dev\">refine</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [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/), [Directus](https://directus.io/) and [Altogic](https://github.com/refinedev/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **superplate** tool with the following command:\n\n```\nnpx superplate-cli -p refine-react tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/refinedev/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present refine\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.13.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-EJtZh7/6enHn/EPtEh1OHijwbiqEzlhBBIqvaSZ89uIBLF9gQfq2T+m8C9nGm5SKdnMGpQjc+eP5mSCAMlEmOw==","shasum":"790828e99740111f2eca2dc3496e757bdca383f9","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.13.0.tgz","fileCount":37,"unpackedSize":86769,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYLlke5Lh/5SjtQDUdOL/zNWzLYQTuLUXQ/X2TKBuVTAiBVMvcpkbpaehDx9vLA8Quk1kWbOX1ZsxF0Dii/awl6lw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFrCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrB7A/8CY9682T2psVz3+z/ND5P8rkhabLdO+wevWbFYWZiFe+hhyPv\r\nHhjCGX1t8s9gBCZTN0M7FTdAndo+lxJiu+fq5/gOd8sXvcW2zOTmRozrJUoY\r\nYjTJWyJeTKaXBSPNc+JSYHe8TqhM+2OIzIisaSIAao0E5gAxvos3nB6sIKQl\r\ntBkfMFzpd+ilJFS7ieNZausb2C4zEJdclJA/vS2JA1h3OzlXkbS2DDhhkNvd\r\nSgwRhhI18Cqp2hLwFbrDh1zkF2lyjB4/Ey4o8OTojY7+KBxC6R4A0s1qb35S\r\nWY5irvP8dGDwCW+Udg+LyNAWeEIDwMw5gCc8JGz7mm5DfiwCe1D5pMePkjIT\r\nNCNMxbLOdjNCI8wKQDdoF94fCqjlsZhGrU8qyfHbFm3YIjQnwMDUg4JVXXeY\r\nlHlINhywcwet9NYQf+e4A+GJJE/TedPxcekqtj3ZUubF05+Sdmxn+bQ4MGmq\r\nDiKquOvOkPBnRQQJVhHXC78uyJopzTrtNJmzdpsG9oY+QS/JTjeYKjU0zq+0\r\nyvWJY3Ac7+hkgn7PHlO7gmUyPT2J7RiE1boLFqm7d9jzCJnRFIblPx3hwJZS\r\n49ZCdZFNZIXFlTIdA3hH3Xy3G/lWNvW7i2E2MJu8RgYBTOQJXPNz5Vrvn+ut\r\ncjVpRWMli8gp0k66dAV/8//WTWrd9jerxV0=\r\n=Qbgx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"alicanerdurmaz","email":"alicanerdurmaz@gmail.com"},{"name":"salihozdmr","email":"salihozdemir94@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.13.0_1666210498343_0.4713035769766274"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.14.0":{"name":"@pankod/refine-ui-types","version":"0.14.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.86.2","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"refine"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.14.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ejbohvR+wDZWu16zyABzHGz1L/54y/rWGhxhETGsk9DkcULSohVfSiVdA5zKd6wyUsYSzJYMrgdfKMyGkbysPQ==","shasum":"fd97458a1bedbc3ac58ebea688cfeff2354cc74d","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.14.0.tgz","fileCount":37,"unpackedSize":87909,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAkCobNVczT77dzZLR41vuwpR913XeWDxeFD6xCaAN8wIhALMRCAt2qgt0lPl0OxuMW2dLLoyIcwxIPU5O9P1500Tq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQIEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBBQ//VYNyFIQUjJ9EQuqbc4OOqmG0gr8p87eLX9w9xpOdZ30QCxIF\r\nauGy6gkTew7O3VD53BfG+Cv08pOAInIeVf9EDKUhGE64sAwhy+YjTnBqkqy+\r\nzMDt9u3HgycUDBd/1nejHCJMAQyujfxxxWEk5SENFq6iV6Na8W7vHlOwZ/Vg\r\n8rEyY5qr9qe9r/R+HUS5Jhmvu3+poQg6nNW3A0nsvNdn5Fz1ETq+SncDz0da\r\n0ESGiW+8rsbc3kxYCho0h9sYrZL4ihRpU+kwtnOTnoVVgffhoNtwwlbQB9u6\r\nckR05ccf/jXcQq6LbcbJvl2jjxdzlDm2F0+dhflwzKSvcbo3jCv6aQ+GdrQS\r\npWIbgj9AEikve4zY9cTuZtGx9dmr4tQAnCG4cij4vDoGPsHKMQ5o4WNCKLmE\r\nLIJ6dsifJE2jR+81WlJLBEBS6o5U/a+wolmxTi0lrLwphbd/Po53BFoq8qU3\r\ndcEF6n/x02vvwtkPXN0tTq2OAuwwHHtiZyDNgHYbkA2F8WZillH6DZDtL1K1\r\nns5qYPqV3OznMd8c+2gG3anbtPnCoW34B1VZbXW8/aYmq5RixMT/CmZJTrFk\r\njLhk/c57ZpBgY2+JtyqEeOzGIo+/3YPLVgToDSXs7x3DQay5qe47j9txQGzs\r\nJDmWZq1S4bO9NTTXpp2SaP1ciVerlLxLp+Q=\r\n=GzCO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"alicanerdurmaz","email":"alicanerdurmaz@gmail.com"},{"name":"salihozdmr","email":"salihozdemir94@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.14.0_1666253316646_0.5732958922950799"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.14.1":{"name":"@pankod/refine-ui-types","version":"0.14.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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.90.5","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"refine"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://discord.gg/refine\">Discord</a> |\n    <a href=\"https://refine.dev/examples/\">Examples</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/refinedev/refine/projects/1\">Roadmap</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<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>\n\n[![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://refine.dev\">refine</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 **Backend Agnostic** : Connects to any custom backend. Built-in support for [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/), [Directus](https://directus.io/) and [Altogic](https://github.com/refinedev/refine/tree/master/packages/altogic).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **create refine-app** CLI  tool with the following command:\n\n```\nnpm create refine-app tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/refinedev/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present refine\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.14.1","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-XbKaRUeO4G18EXvaPn0vbRraQHqRoI1XUB2JCJFkQG8Hckl6m13HKNBcP7eUp4Io3Yzm3Uhz82oHDxerouX1AA==","shasum":"d27d7f191955db9e1b4f13581b707fc0b55e6033","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.14.1.tgz","fileCount":37,"unpackedSize":88455,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0fIO0OLIQ0ucUipI5rVPV+kUmzPfVMthYmirhazpbJgIgBeWn5SfMcDrL+knPDDmvwdNkrF0G3hC+0AZ5reWL5I4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaaOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcPg//QvsRw9RSASv/6nmk0z5sLvgdINF7MNibsmsRbd1prYyn9vdt\r\n28YGEdE1BSitq7bUoKo2BaRP35QjNdZd+QbC4243KCgpAwrERIGeDF3F06gm\r\n+UBGuNJkqmBtuRY/0RMJSG8MQGZKG3zpn77opzS9gY+2N9ByT9EHz2gHDdEw\r\n4Xyg+iaAY8FNnwgIEaTzviU7UlW11Q/8ICku8+u6BCNL45mshBQAG9dV4E+6\r\n6VskcO3uGJuDqQ3bu29l9I1n4JfmrqBtdcS7ZC9znOzi7x7+qY1M/Upp9rnz\r\naKAuPddVqOQ6mWr1+wmnp1KhZqq5W5kO6NWPRzYCtI7oIkcelkNbwNVVgGC/\r\nMR0aek9fDYbo8EU0fi6orJ5GyUQ59yL3YOTMCAGBULal8eDajet/q1j1j5KX\r\nSRluvwXEkY9zkRWnqZRBsA0mzvdnS9jzZLBswdyIj/0BJRxVY8C+juQpa0cO\r\nSitJ60wU53HeP40DgZ5wlgEgMH0X5fN9fgePeoZNoowsgjytE6/QpdmBe+FT\r\nOvsvCSj+6jeADCSjph6uOXuORBdgBZTICDXirsEk3/DmRq/n69EMctcB+Qp5\r\nREl7Li3e5KtUYJYG1s1a7BSaO2WZZqMGtIQkUEB1QYy4cuIQaWrB4U44TFp0\r\nY/j7A901QnUYxKbTNNEuBmniv8C5l0WwE38=\r\n=4HUt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"alicanerdurmaz","email":"alicanerdurmaz@gmail.com"},{"name":"salihozdmr","email":"salihozdemir94@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.14.1_1671014029998_0.22144805906563914"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.14.2":{"name":"@pankod/refine-ui-types","version":"0.14.2","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build"},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.90.6","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"refine"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.14.2","_nodeVersion":"16.18.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-e8Hr629rejp2x4eB++02aINCHNyGUptJidcHzHtYTT2n5TOfcmtRUs/apmsROmBGfGoc9r6rgCr5A7gEDUs3uQ==","shasum":"42432592925e8d1f1e93ef01ca33aa28ddc6cc36","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.14.2.tgz","fileCount":37,"unpackedSize":89006,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyB0Uzr5U/ul7FdtXI/tk8fedm9bIwhDuiozyU0fHkrAIhAJdZCyA2Ig7CoPAF1egxdhbknFTU0iBBsU82H8fPHNu7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbmtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOlQ/+IGVR876/64IWy3R1CSALPWkB+kcpZCJpVH3L6npITCHmSqaU\r\n8wwLgvSVxtgROacxLla0+viwHcCfjjl060Hmxo35n+XqaC1N6uJVnC86oGPj\r\nT+SBK/a11oN+u8LAbH9NLyz6MMH98iIWDweYLVaIFhtjeG403iQl7jzqWkTy\r\nbP0NJcLxvfoctvCACLK0FRWUyClB3r4+cL9akIZDrzWJVUED0T7N1A754xvE\r\nVWrT4DyJ2vASL2vbYE6J42gtgWiEdSEnOKNSAdStuAQcrrBaXkG0XAFduASq\r\npKtXh7Ms2VGi/efo8Cnfg6c9ITxK24aRu2cm+jol6v4w3J6FRYfVHh1e4dtQ\r\nsF5DL/Vy/DlD2m5z+qL2oQXoQar3c3NkChXxo8znj5l1aEPtSsfjPgz90SMM\r\ndYOifX+BxivkBn907CUL6hNL1oAn4kwQbX//W4D/kd2avKXNvckhzRoSwGZI\r\nY3X89ay8onwbwSA/Yb/uba4Xoya2Q/HBG5+pqH6fqX5gIpx68z60raTwJZR8\r\n8B/C1GbyGe63BDgYCiWZ8zFWNQgfwcdxZLC1xJRNYF5qAZGbQTWeCzOi5hhC\r\nuAjQL0UvA8gshZHIC0GflEtuA/DlAInVdZ3kgol5VjA1i726YPreukRxCzzy\r\nlmo8AjHvPnX145/8TCgcmttEOPmOjvzxzzA=\r\n=+Lp1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"alicanerdurmaz","email":"alicanerdurmaz@gmail.com"},{"name":"salihozdmr","email":"salihozdemir94@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.14.2_1671018925246_0.33660735396406594"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.15.0":{"name":"@pankod/refine-ui-types","version":"0.15.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build","postinstall":"echo \"refine v4 is released 🎉 \nThe new version is 100% backward compatible. You can upgrade to v4 with a single command! \nSee the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x \n\""},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.102.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"refine"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://discord.gg/refine\">Discord</a> |\n    <a href=\"https://refine.dev/examples/\">Examples</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/refinedev/refine/projects/1\">Roadmap</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<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>\n\n[![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://refine.dev\">refine</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 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/), and [Directus](https://directus.io/).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **create refine-app** CLI  tool with the following command:\n\n```\nnpm create refine-app@latest tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/refinedev/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present refine\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md","_id":"@pankod/refine-ui-types@0.15.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-SXq2tgZQacYwzfG0RZs04Q9Fw75X7hRaSJqzMNzXeYNrgyQLJH4D1/txDUyvECHUwCmkbkgdHqGUB6cNLjoS2w==","shasum":"1d9a6d37df020c7c7ffb65cf8204abb5629e9793","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.15.0.tgz","fileCount":37,"unpackedSize":89832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF29zGQTbxqFyStqom31KrvJCSO7xSXLncsp1Mc4XDVpAiBvy7qqLtWOybgGngN+5DSCxoTCR+w8FGKjUJuCzHt55A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDzKOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqNw/8C2/fqnmXgKjHf7RSOOPoX0KScSaTMf2tUF0EJy0gzTpglNwq\r\n6vEnwOpZrRRhKDJsYM/TSThkjlMAHszFN07aC57eDnfFRWmOQcqoVO1lawkr\r\nQCG1aQx9vWVvTLcSEtiKfKUHEDXbaZ9UncMMyxYz0eAj5EnkNOjg9S8WgN9O\r\nnFor5AYPzU5cgqcWfIjGKFjO0lvZcjyFDIyXHB7azOoRBbscBg0BXtSllnsD\r\nt8LtHNGSnaCFRAS7TW54bBgEQvxCkhIai5PUSzSRBKz/OThoBXclBveTxCiV\r\n7Aw9pKAsCVDCkI31seC2U0sMK6PVIPRgWoRj3Ey1VoFaIf69KhPlBDVdVBIz\r\nkAi+YmMHwRTtWf07lFLTIZzdMHngpaSufuzzVhAtY+ETLeuB18bP+odxx0kh\r\n1yezrNezm2Z4GHLbm6elSDleqXAfS2gS7nZVdoHKjEtUGL24FjRcoYXXIUZg\r\n6lv6FtK3IUeBAQ458rfXiwHkkdqNF6R2h2dqYUVD7ju+eX2r/LRp7cPkiAFO\r\nyp2zdKeowptfWqSiV/IX5oR2TzeVoOCdUTsVLYEmawDOlwibD1gz2fAUccE2\r\n72jNHv9KM5Fw3BJrwjR/GQD7tx5RTnnTCVVWkzpPjX9c/8QmjLqKioosXe5Q\r\n69d1KIUuCUBcO21zFg6TumHwxei1mSv1QP0=\r\n=/FiH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"willico","email":"batuhanwilhelm@gmail.com"},{"name":"alicanerdurmaz","email":"alicanerdurmaz@gmail.com"},{"name":"salihozdmr","email":"salihozdemir94@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.15.0_1678717581866_0.38892341829513466"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"},"0.16.0":{"name":"@pankod/refine-ui-types","version":"0.16.0","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,"main":"dist/index.js","module":"dist/esm/index.js","typings":"dist/index.d.ts","scripts":{"start":"tsup --watch --format esm,cjs,iife --legacy-output","build":"tsup --format esm,cjs,iife --minify --legacy-output","test":"echo \"no tests\"","prepare":"npm run build","postinstall":"echo \"refine v4 is released 🎉 \nThe new version is 100% backward compatible. You can upgrade to v4 with a single command! \nSee the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x \n\""},"peerDependencies":{"@pankod/refine-core":"^3.36.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"devDependencies":{"@esbuild-plugins/node-resolve":"^0.1.4","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tsup":"^5.11.13","typescript":"^4.7.4"},"dependencies":{"@pankod/refine-core":"^3.103.0","dayjs":"^1.10.7","tslib":"^2.3.1"},"author":{"name":"refine"},"license":"MIT","gitHead":"829f5a516f98c06f666d6be3e6e6099c75c07719","publishConfig":{"access":"public"},"_id":"@pankod/refine-ui-types@0.16.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-uDbxXwEYoX9U9EUqgkHs4kGwkZbESjfaqutRWhAcHVmLpDcPkDcBlxMEmBpT/6fOkM9q6Mzh21es1Y8RgfGCBQ==","shasum":"f1de597781f3e749ac6fb0a7cd2ff840b19d62f0","tarball":"https://registry.npmjs.org/@pankod/refine-ui-types/-/refine-ui-types-0.16.0.tgz","fileCount":37,"unpackedSize":90514,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAlgSCv8/7ksq714+xNiXDPFWFU0khLEuI09hz28tlXAiEAhh1rUEJvuZnWOHdhRN0RgOPu0Jx5zGajk4991Zfh3eY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEB39ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiDA/6Axtrw9+kfD1dfyfdNUB0o7akY9Q5OVyhFhjfN2EaPadUWER3\r\nMMYcZFn+YlZGPUYTKAraJYw1IHa6GbO3K1+d8XCtkarUsHb4ogJmGukBZMC3\r\nzsliAa0pg8RaSqxeB22ELgkbJ8V1093EEFJX3IWIXMhFefLRjdxsEbvWxXFm\r\nFAGtXl6UpwqaJHLBNtcgi2SI7oaIdHRzVqFQsHH7OPqNxEKFER2JRLvKKpH1\r\niF2gjYkqp7qdiTiW00vEICzudD1DvXDccTJtgAZ8+I0G79K4X+lcQEQ/3muO\r\n4rxFO/1FqapGTPmiBJ5og8V7C8shrto+qMkrzK0m1K7/OJ1mE0Bl7tFk+kGW\r\nQ5JeF7AuUZ+u3QUxmS9CJ5z36JBg94ow9MvLMfLxw38qdLJKnhhD0EfxcRiR\r\nYF6gpdhLEWtO9C8WVMNcwCVXQT/Ew2hCGVekfK/NIh9eHKD+xu13sGr/AKem\r\nj8YzAq7OYQRWa9siKWYbPFoLkzjT+lGcgrWTBPuWooilRrJ6mXcNAeIOBD6L\r\nqA0EHmfBjoP9Mc9vd8tFb/iBJALGk57yyTfGRVXBVw3s/3pvhQSlO3GG2J+4\r\n4XXMyNl68Fjk3wECp2q7R5IkQzvK5H03alo9jI4sGqu+9twJr/7dTzo01lVU\r\n6pA1s+sGIwQxnDFAo4EJ+GhvSFswMQLMCSQ=\r\n=AhaX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"omerfarukaplak","email":"omer@pankod.com"},"directories":{},"maintainers":[{"name":"willico","email":"batuhanwilhelm@gmail.com"},{"name":"alicanerdurmaz","email":"alicanerdurmaz@gmail.com"},{"name":"salihozdmr","email":"salihozdemir94@gmail.com"},{"name":"omerfarukaplak","email":"omer@pankod.com"},{"name":"pankodbot","email":"bot@pankod.com"},{"name":"yildirayyunlu","email":"yildirayyunlu@gmail.com"},{"name":"aliemirsen","email":"senaliemir@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/refine-ui-types_0.16.0_1678777853421_0.9744092945053859"},"_hasShrinkwrap":false,"deprecated":"refine v4 is released 🎉 The new version is 100% backward compatible. You can upgrade to v4 with a single command! See the migration guide here: https://refine.dev/docs/migration-guide/3x-to-4x"}},"time":{"created":"2022-08-04T09:11:09.553Z","0.2.0":"2022-08-04T09:11:09.809Z","modified":"2023-11-02T07:54:31.463Z","0.3.0":"2022-08-04T13:00:36.844Z","0.4.0":"2022-09-06T13:22:07.033Z","0.5.0":"2022-09-07T08:29:10.256Z","0.6.0":"2022-09-12T09:28:40.898Z","0.6.1":"2022-09-13T12:14:34.667Z","0.6.2":"2022-09-13T15:34:24.566Z","0.7.0":"2022-09-14T14:07:57.778Z","0.8.0":"2022-09-15T09:58:38.992Z","0.9.0":"2022-09-15T10:20:39.069Z","0.9.1":"2022-09-20T16:13:10.730Z","0.9.2":"2022-09-21T06:44:48.693Z","0.10.0":"2022-09-21T09:11:16.038Z","0.11.0":"2022-09-21T09:43:32.672Z","0.11.1":"2022-09-28T07:11:07.113Z","0.11.2":"2022-09-28T09:04:37.274Z","0.11.4":"2022-10-13T12:24:38.195Z","0.11.3":"2022-10-13T12:31:14.521Z","0.11.5":"2022-10-17T11:52:49.419Z","0.11.6":"2022-10-17T12:22:52.251Z","0.13.0":"2022-10-19T20:14:58.516Z","0.14.0":"2022-10-20T08:08:36.799Z","0.14.1":"2022-12-14T10:33:50.206Z","0.14.2":"2022-12-14T11:55:25.401Z","0.15.0":"2023-03-13T14:26:22.074Z","0.16.0":"2023-03-14T07:10:53.598Z"},"maintainers":[{"email":"batuhanwilhelm@gmail.com","name":"willico"},{"email":"alicanerdurmaz@gmail.com","name":"alicanerdurmaz"},{"email":"omer@pankod.com","name":"omerfarukaplak"},{"email":"bot@pankod.com","name":"pankodbot"},{"email":"senaliemir@gmail.com","name":"aliemirsen"}],"description":"refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.","author":{"name":"refine"},"license":"MIT","readme":"<div align=\"center\" style=\"margin: 30px;\">\n<a href=\"https://refine.dev/\">\n  <img src=\"https://refine.ams3.cdn.digitaloceanspaces.com/refine_logo.png\"   style=\"width:250px;\" align=\"center\" />\n</a>\n<br />\n<br />\n\n<div align=\"center\">\n    <a href=\"https://refine.dev\">Home Page</a> |\n    <a href=\"https://discord.gg/refine\">Discord</a> |\n    <a href=\"https://refine.dev/examples/\">Examples</a> | \n    <a href=\"https://refine.dev/blog/\">Blog</a> | \n    <a href=\"https://refine.dev/docs/\">Documentation</a> | \n    <a href=\"https://github.com/refinedev/refine/projects/1\">Roadmap</a>\n</div>\n\n</div>\n<br/>\n\n<div align=\"center\"><strong>refine</strong> is a <a href=\"https://reactjs.org/\">React</a>-based framework for building internal tools, rapidly. ✨ It ships with <a href=\"https://ant.design/\">Ant Design System</a>, an enterprise-level UI toolkit.</div>\n\n<br />\n\n<div align=\"center\">\n\n[![Discord](https://img.shields.io/discord/837692625737613362.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/UuU3XCc3J5)\n![Twitter Follow](https://img.shields.io/twitter/follow/refine_dev?style=social)\n\n<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>\n\n[![Awesome](https://github.com/refinedev/awesome-refine/raw/main/images/badge.svg)](https://github.com/refinedev/awesome-refine)\n[![Maintainability](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/maintainability)](https://codeclimate.com/github/pankod/refine/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/99a65a191bdd26f4601c/test_coverage)](https://codeclimate.com/github/pankod/refine/test_coverage)\n[![npm version](https://img.shields.io/npm/v/@pankod/refine-mui.svg)](https://www.npmjs.com/package/@pankod/refine-mui)\n[![npm](https://img.shields.io/npm/dm/@pankod/refine-mui)](https://www.npmjs.com/package/@pankod/refine-antd)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](code_of_conduct.md)\n\n\n</div>\n\n<div align=\"center\">\n  <sub>Created by <a href=\"https://refine.dev\">refine</a></sub>\n</div>\n\n## About\n\n[**refine**](https://refine.dev/) offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## Documentation\n\nFor more detailed information and usage, refer to the [refine documentation](https://refine.dev/docs/).\n\n## What is refine?\n\n**refine** is a [React](https://reactjs.org/)-based framework for building internal tools, rapidly. :sparkles: It ships with [Ant Design System](https://ant.design/), an enterprise-level UI toolkit.\n\nRefine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to _admin panels_, _B2B applications_ and _dashboards_.\n\n## What is a \"headless\" Framework?\n**refine** is a **headless** React framework, which means all out-of-the-box features(**Routing**, **Networking**, **Authentication**, **Authorization**, **State Management**, **Realtime**, **i18n**, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.\n\n- Customization & Extensibility -  UI is a completely customizable area and each developer uses different solutions. **refine** features does not restrict or interfere with your UI structure. **refine** allows the you to design and customizable the UI based on their unique use case.\n\n- Separation of Concerns - **refine** as a framework, is not responsible for your UI and is independent.\n\n- Maintenance - By removing the API surface to support every UI use case, **refine** easy to use and update/maintain is simple.\n\n###\n\n## Key features\n\n🔥 **Headless** : Works with any UI framework\n\n⚙️ **Zero-configuration**: One-line setup with [superplate](https://github.com/pankod/superplate). It takes less than a minute to start a project.\n\n📦 **Out-of-the-box** : Routing, networking, authentication, state management, i18n and UI.\n\n🔌 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/), and [Directus](https://directus.io/).\n\n📝 **Native Typescript Core** : You can always opt out for plain JavaScript.\n\n🐜 **Enterprise UI** : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)\n\n📝 **Boilerplate-free Code** : Keeps your codebase clean and readable.\n\n## Motivation\n\nHigher-level frontend frameworks can save you a lot time, but they typically offer you a trade-off between speed and flexibility.\n\nAfter many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how **refine** is born.\n\n**refine** is a collection of helper `hooks`, `components` and `providers`. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.\n\nAs **refine** is totally _unopinionated_ about UI and logic, it's strongly _opinionated_ about three parts of your application:\n\n1. **API Networking**\n2. **State Management**\n3. **Authentication & Authorization**\n\nWe believe, these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.\n\n**refine** guarantees you a perfect implementation of these building blocks in your project, so you can focus on your development.\n\n## Architecture\n\n**refine** makes extensive use of [hooks](https://reactjs.org/docs/hooks-reference.html#gatsby-focus-wrapper) as a default way for interacting with your components.\nUnder the hood, **refine** relies heavily to [React Query](https://react-query.tanstack.com/) for data handling, caching and state management.\nAccess to external sources and API's happen via providers which are basically plug-in type components for extendibility.\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/refine_architecture.png\" width=\"400px\" />\n</div>\n\n## Benchmark\n\nAfter releasing the first internal versions, we had the chance to migrate some of our _React_ projects to **refine**.\nIn addition to **shorter development** times and **overall performance gains**, we've measured significant reduction in project size.\n\n**refine** makes your codebase significantly smaller, by eliminating redundant code such as _reducers_, _actions_ and _unit tests_. Below is a size comparison for an example project:\n\n<br/>\n\n<div align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/refinedev/refine/master/documentation/static/img/getting-started/benchmark.png\" width=\"400px\" align=\"center\" />\n</div>\n\n## Quick Start\n\nRun the **create refine-app** CLI  tool with the following command:\n\n```\nnpm create refine-app@latest tutorial\n```\n\nFollow the _CLI wizard_ to select options and start creating your project.\n\nAfter setup is complete, navigate to the project folder and start your project with:\n\n```\nnpm run dev\n```\n\nYour **refine** application will be accessible at [http://localhost:3000](http://localhost:3000).\n\nReplace the contents of `App.tsx` with the following code:\n\n```tsx title=\"App.tsx\"\nimport React from \"react\";\nimport { Refine, useOne } from \"@pankod/refine-core\";\nimport {\n    Layout,\n    ErrorComponent,\n    LightTheme,\n    ThemeProvider,\n    notificationProvider,\n    RefineSnackbarProvider,\n    CssBaseline,\n    GlobalStyles,\n} from \"@pankod/refine-mui\";\nimport routerProvider from \"@pankod/refine-react-router-v6\";\nimport dataProvider from \"@pankod/refine-simple-rest\";\n\nconst App: React.FC = () => {\n    return (\n        <ThemeProvider theme={LightTheme}>\n            <CssBaseline />\n            <GlobalStyles styles={{ html: { WebkitFontSmoothing: \"auto\" } }} />\n            <RefineSnackbarProvider>\n                <Refine\n                    routerProvider={routerProvider}\n                    dataProvider={dataProvider(\n                        \"https://api.fake-rest.refine.dev\",\n                    )}\n                    notificationProvider={notificationProvider}\n                    Layout={Layout}\n                    catchAll={<ErrorComponent />}\n                    resources={[{ name: \"posts\", list: PostList }]}\n                />\n            </RefineSnackbarProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const PostList: React.FC = () => {\n    const getOne = React.useCallback(useOne, []);\n    const columns = React.useMemo<GridColumns<IPost>>(\n        () => [\n            {\n                field: \"id\",\n                headerName: \"ID\",\n                type: \"number\",\n                width: 50,\n            },\n            { field: \"title\", headerName: \"Title\", minWidth: 400, flex: 1 },\n            {\n                field: \"category.id\",\n                headerName: \"Category\",\n                type: \"number\",\n                headerAlign: \"left\",\n                align: \"left\",\n                minWidth: 250,\n                flex: 0.5,\n                valueGetter: ({ row }) => {\n                    const { data } = getOne<ICategory>({\n                        resource: \"categories\",\n                        id: row.category.id,\n                    });\n                    return data?.data.title;\n                },\n            },\n            { field: \"status\", headerName: \"Status\", minWidth: 120, flex: 0.3 },\n            {\n                field: \"actions\",\n                headerName: \"Actions\",\n                renderCell: function render({ row }) {\n                    return <EditButton hideText recordItemId={row.id} />;\n                },\n                align: \"center\",\n                headerAlign: \"center\",\n                minWidth: 80,\n            },\n        ],\n        [getOne],\n    );\n\n    const { dataGridProps } = useDataGrid<IPost>({\n        columns,\n    });\n\n    return (\n        <List>\n            <DataGrid {...dataGridProps} autoHeight />\n        </List>\n    );\n};\n\nexport default App;\n```\n\n```tsx title=\"interfaces.d.ts\"\ninterface IPost {\n    title: string;\n    createdAt: string;\n    category: { id: number };\n}\n\ninterface ICategory {\n    id: number;\n    title: string;\n}\n```\n\n## Roadmap\nYou can find Refine's <a href=\"https://github.com/refinedev/refine/projects/1\">Public Roadmap here!</a> \n\n## Stargazers\n\n[![Stargazers repo roster for refinedev/refine](https://reporoster.com/stars/refinedev/refine)](https://github.com/refinedev/refine/stargazers)\n\n## Contribution\n\nIf you have a bug to report, do not hesitate to file an issue.\n\nIf you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.\n\n## License\n\nLicensed under the MIT License, Copyright © 2021-present refine\n\n## Special Thanks\n\n[React Admin](https://marmelab.com/react-admin/) has been a great source of ideas and inspiration for refine. Big thanks to friends at [Marmelab](https://marmelab.com) for the amazing work they are doing.\n","readmeFilename":"README.md"}