CRUD component

docs/data/toolpad/core/all-components/all-components.md

@@ -2,8 +2,9 @@
 
 <p class="description">This page contains an index to the components included in Toolpad Core.</p>
 
+- [Account](/toolpad/core/react-account/)
 - [App Provider](/toolpad/core/react-app-provider/)
+- [CRUD](/toolpad/core/react-crud/)
 - [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
 - [Page Container](/toolpad/core/react-page-container/)
 - [Sign-in Page](/toolpad/core/react-sign-in-page/)
-- [Account](/toolpad/core/react-account/)

docs/data/toolpad/core/components/crud-page/crud-page.md → docs/data/toolpad/core/components/crud/crud.md

@@ -1,9 +1,10 @@
 ---
 productId: toolpad-core
-title: CRUD Page
+title: CRUD
+components: CRUD, CRUDProvider, List, Show, Create, Edit
 ---
 
-# CRUD Page 🚧
+# CRUD
 
 <p class="description">The CRUD component provides a UI for editable data sources. With deep-linkable, form-based pages.</p>
 

docs/data/toolpad/core/pages.ts

@@ -120,9 +120,8 @@ const pages: MuiPage[] = [
         subheader: 'Data',
         children: [
           {
-            pathname: '/toolpad/core/react-crud-page',
+            pathname: '/toolpad/core/react-crud',
             title: 'CRUD',
-            planned: true,
           },
           {
             pathname: '/toolpad/core/react-stat-card',

docs/data/toolpad/core/pagesApi.js

@@ -4,12 +4,18 @@ module.exports = [
   { pathname: '/toolpad/core/api/account-popover-header' },
   { pathname: '/toolpad/core/api/account-preview' },
   { pathname: '/toolpad/core/api/app-provider' },
+  { pathname: '/toolpad/core/api/create' },
+  { pathname: '/toolpad/core/api/crud' },
+  { pathname: '/toolpad/core/api/crud-provider' },
   { pathname: '/toolpad/core/api/dashboard-layout' },
   { pathname: '/toolpad/core/api/dialogs-provider' },
+  { pathname: '/toolpad/core/api/edit' },
+  { pathname: '/toolpad/core/api/list' },
   { pathname: '/toolpad/core/api/notifications-provider' },
   { pathname: '/toolpad/core/api/page-container' },
   { pathname: '/toolpad/core/api/page-header' },
   { pathname: '/toolpad/core/api/page-header-toolbar' },
+  { pathname: '/toolpad/core/api/show' },
   { pathname: '/toolpad/core/api/sign-in-button' },
   { pathname: '/toolpad/core/api/sign-in-page' },
   { pathname: '/toolpad/core/api/sign-out-button' },

docs/package.json

@@ -25,16 +25,16 @@
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.14.0",
     "@mui/base": "5.0.0-beta.68",
-    "@mui/docs": "6.3.1",
-    "@mui/icons-material": "6.3.1",
+    "@mui/docs": "6.4.1",
+    "@mui/icons-material": "6.4.1",
     "@mui/internal-markdown": "1.0.24",
     "@mui/joy": "5.0.0-beta.51",
     "@mui/lab": "6.0.0-beta.22",
-    "@mui/material": "6.3.1",
+    "@mui/material": "6.4.1",
     "@mui/material-nextjs": "6.3.1",
-    "@mui/styles": "6.3.1",
-    "@mui/system": "6.3.1",
-    "@mui/utils": "6.3.1",
+    "@mui/styles": "6.4.1",
+    "@mui/system": "6.4.1",
+    "@mui/utils": "6.4.1",
     "@mui/x-date-pickers": "7.25.0",
     "@mui/x-date-pickers-pro": "7.25.0",
     "@mui/x-license": "7.25.0",

docs/pages/toolpad/core/api/create.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './create.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/create',
+    false,
+    /\.\/create.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/create.json

@@ -0,0 +1,15 @@
+{
+  "props": {
+    "dataSource": { "type": { "name": "object" } },
+    "initialValues": { "type": { "name": "object" }, "default": "{}" },
+    "onSubmitSuccess": { "type": { "name": "func" } }
+  },
+  "name": "Create",
+  "imports": ["import { Create } from '@toolpad/core/CRUD';"],
+  "classes": [],
+  "muiName": "Create",
+  "filename": "/packages/toolpad-core/src/CRUD/Create.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-crud/\">CRUD</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/crud-provider.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './crud-provider.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/crud-provider',
+    false,
+    /\.\/crud-provider.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/crud-provider.json

@@ -0,0 +1,11 @@
+{
+  "props": { "dataSource": { "type": { "name": "object" }, "required": true } },
+  "name": "CRUDProvider",
+  "imports": ["import { CRUDProvider } from '@toolpad/core/CRUD';"],
+  "classes": [],
+  "muiName": "CRUDProvider",
+  "filename": "/packages/toolpad-core/src/CRUD/CRUDProvider.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-crud/\">CRUD</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/crud.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './crud.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs-toolpad/translations/api-docs/crud', false, /\.\/crud.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/crud.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "dataSource": { "type": { "name": "object" }, "required": true },
+    "rootPath": { "type": { "name": "string" }, "required": true },
+    "defaultValues": { "type": { "name": "object" }, "default": "{}" },
+    "initialPageSize": { "type": { "name": "number" }, "default": "100" }
+  },
+  "name": "CRUD",
+  "imports": [
+    "import { CRUD } from '@toolpad/core/CRUD';",
+    "import { CRUD } from '@toolpad/core';"
+  ],
+  "classes": [],
+  "muiName": "CRUD",
+  "filename": "/packages/toolpad-core/src/CRUD/CRUD.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-crud/\">CRUD</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/edit.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './edit.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs-toolpad/translations/api-docs/edit', false, /\.\/edit.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/edit.json

@@ -0,0 +1,14 @@
+{
+  "props": {
+    "dataSource": { "type": { "name": "object" } },
+    "onSubmitSuccess": { "type": { "name": "func" } }
+  },
+  "name": "Edit",
+  "imports": ["import { Edit } from '@toolpad/core/CRUD';"],
+  "classes": [],
+  "muiName": "Edit",
+  "filename": "/packages/toolpad-core/src/CRUD/Edit.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-crud/\">CRUD</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/list.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './list.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs-toolpad/translations/api-docs/list', false, /\.\/list.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/list.json

@@ -0,0 +1,34 @@
+{
+  "props": {
+    "dataSource": { "type": { "name": "object" } },
+    "initialPageSize": { "type": { "name": "number" }, "default": "100" },
+    "onCreateClick": { "type": { "name": "func" } },
+    "onEditClick": { "type": { "name": "func" } },
+    "onRowClick": { "type": { "name": "func" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ dataGrid?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ dataGrid?: elementType }" },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    }
+  },
+  "name": "List",
+  "imports": ["import { List } from '@toolpad/core/CRUD';"],
+  "slots": [
+    {
+      "name": "dataGrid",
+      "description": "The DataGrid component used to list the items.",
+      "default": "DataGrid",
+      "class": null
+    }
+  ],
+  "classes": [],
+  "muiName": "List",
+  "filename": "/packages/toolpad-core/src/CRUD/List.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-crud/\">CRUD</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/show.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './show.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs-toolpad/translations/api-docs/show', false, /\.\/show.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/show.json

@@ -0,0 +1,15 @@
+{
+  "props": {
+    "dataSource": { "type": { "name": "object" } },
+    "onDelete": { "type": { "name": "func" } },
+    "onEditClick": { "type": { "name": "func" } }
+  },
+  "name": "Show",
+  "imports": ["import { Show } from '@toolpad/core/CRUD';"],
+  "classes": [],
+  "muiName": "Show",
+  "filename": "/packages/toolpad-core/src/CRUD/Show.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-crud/\">CRUD</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/sign-in-button.json

@@ -178,6 +178,48 @@
       "isGlobal": false,
       "isDeprecated": true
     },
+    {
+      "key": "loading",
+      "className": "",
+      "description": "Styles applied to the root element if `loading={true}`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIconPlaceholder",
+      "className": "",
+      "description": "Styles applied to the loadingIconPlaceholder element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingIndicator",
+      "className": "",
+      "description": "Styles applied to the loadingIndicator element.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionCenter",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"center\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionEnd",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"end\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingPositionStart",
+      "className": "",
+      "description": "Styles applied to the root element if `loadingPosition=\"start\"`.",
+      "isGlobal": false
+    },
+    {
+      "key": "loadingWrapper",
+      "className": "",
+      "description": "Styles applied to the loadingWrapper element.",
+      "isGlobal": false
+    },
     {
       "key": "outlined",
       "className": "",