diff --git a/CHANGELOG.md b/CHANGELOG.md index 50d2e78a01f..1431d870245 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,18 @@ # Changelog +## 5.9.1 + +* Fix `` empty throws error when used in standalone mode ([#10812](https://github.com/marmelab/react-admin/pull/10812)) ([fzaninotto](https://github.com/fzaninotto)) +* Fix `` does not allow to put a button in the column's header ([#10802](https://github.com/marmelab/react-admin/pull/10802)) ([slax57](https://github.com/slax57)) +* [Doc] Add link to storybook in page toc for components and hooks that have storybook ([#10819](https://github.com/marmelab/react-admin/pull/10819)) ([jonathanarnault](https://github.com/jonathanarnault)) +* [Doc] Add team wiki to demos documentation ([#10816](https://github.com/marmelab/react-admin/pull/10816)) ([jonathanarnault](https://github.com/jonathanarnault)) +* [Doc] Fix anchors and code examples ([#10807](https://github.com/marmelab/react-admin/pull/10807)) ([WiXSL](https://github.com/WiXSL)) +* [Doc] Fix `` default value and example ([#10806](https://github.com/marmelab/react-admin/pull/10806)) ([slax57](https://github.com/slax57)) +* [Doc] Add `` documentation ([#10800](https://github.com/marmelab/react-admin/pull/10800)) ([Madeorsk](https://github.com/Madeorsk)) +* [Chore] Sync tips from tips repository ([#10815](https://github.com/marmelab/react-admin/pull/10815)) ([jonathanarnault](https://github.com/jonathanarnault)) +* [Chore] Migrate stories to use DataTable ([#10804](https://github.com/marmelab/react-admin/pull/10804)) ([slax57](https://github.com/slax57)) +* [Chore] Avoid vercel deployment for `gh-pages` branch ([#10803](https://github.com/marmelab/react-admin/pull/10803)) ([djhi](https://github.com/djhi)) + ## 5.9.0 * Add support for customization with MUI theme to inputs ([#10772](https://github.com/marmelab/react-admin/pull/10772)) ([Madeorsk](https://github.com/Madeorsk)) diff --git a/docs/Admin.md b/docs/Admin.md index d6d4fdc6c30..828b94030c6 100644 --- a/docs/Admin.md +++ b/docs/Admin.md @@ -1,6 +1,7 @@ --- layout: default title: "The Admin Component" +storybook_path: react-admin-admin--basic --- # `` diff --git a/docs/AppBar.md b/docs/AppBar.md index 1eb0036a01d..e1080ffaf52 100644 --- a/docs/AppBar.md +++ b/docs/AppBar.md @@ -1,6 +1,7 @@ --- layout: default title: "The AppBar Component" +storybook_path: ra-ui-materialui-layout-appbar--basic --- # `` diff --git a/docs/ArrayField.md b/docs/ArrayField.md index 11fa69dbb1d..49c2e7e6a5f 100644 --- a/docs/ArrayField.md +++ b/docs/ArrayField.md @@ -1,6 +1,7 @@ --- layout: default title: "The ArrayField Component" +storybook_path: ra-ui-materialui-fields-arrayfield--basic --- # `` diff --git a/docs/ArrayInput.md b/docs/ArrayInput.md index 9570fb582b7..c073b959e49 100644 --- a/docs/ArrayInput.md +++ b/docs/ArrayInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The ArrayInput Component" +storybook_path: ra-ui-materialui-input-arrayinput--basic --- # `` diff --git a/docs/AutocompleteArrayInput.md b/docs/AutocompleteArrayInput.md index 684212827ce..4792feee749 100644 --- a/docs/AutocompleteArrayInput.md +++ b/docs/AutocompleteArrayInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The AutocompleteArrayInput Component" +storybook_path: ra-ui-materialui-input-autocompletearrayinput--basic --- # `` diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md index b6611955506..1aa47f30fb4 100644 --- a/docs/AutocompleteInput.md +++ b/docs/AutocompleteInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The AutocompleteInput Component" +storybook_path: ra-ui-materialui-input-autocompleteinput--basic --- # `` diff --git a/docs/BooleanField.md b/docs/BooleanField.md index 26c371bf00b..0818e57170b 100644 --- a/docs/BooleanField.md +++ b/docs/BooleanField.md @@ -1,6 +1,7 @@ --- layout: default title: "The BooleanField Component" +storybook_path: ra-ui-materialui-fields-booleanfield--basic --- # `` diff --git a/docs/BooleanInput.md b/docs/BooleanInput.md index d470f04868f..6bdc4459c25 100644 --- a/docs/BooleanInput.md +++ b/docs/BooleanInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The BooleanInput Component" +storybook_path: ra-ui-materialui-input-booleaninput--basic --- # `` diff --git a/docs/CanAccess.md b/docs/CanAccess.md index 17921df1f39..d9ee8098bda 100644 --- a/docs/CanAccess.md +++ b/docs/CanAccess.md @@ -1,6 +1,7 @@ --- layout: default title: "CanAccess" +storybook_path: ra-core-auth-canaccess--basic --- # `` diff --git a/docs/CheckboxGroupInput.md b/docs/CheckboxGroupInput.md index 347ffbca35d..37934f75213 100644 --- a/docs/CheckboxGroupInput.md +++ b/docs/CheckboxGroupInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The CheckboxGroupInput Component" +storybook_path: ra-ui-materialui-input-checkboxgroupinput--basic --- # `` diff --git a/docs/ChipField.md b/docs/ChipField.md index 3c1a2e84f93..c94d7fabde7 100644 --- a/docs/ChipField.md +++ b/docs/ChipField.md @@ -1,6 +1,7 @@ --- layout: default title: "The ChipField Component" +storybook_path: ra-ui-materialui-fields-chipfield--basic --- # `` diff --git a/docs/Configurable.md b/docs/Configurable.md index dc1349afa05..8148dc46664 100644 --- a/docs/Configurable.md +++ b/docs/Configurable.md @@ -1,6 +1,7 @@ --- layout: default title: "The Configurable Component" +storybook_path: ra-ui-materialui-preferences-configurable--basic --- # `` diff --git a/docs/Confirm.md b/docs/Confirm.md index 5a3b9c350e4..98be0ab8bb7 100644 --- a/docs/Confirm.md +++ b/docs/Confirm.md @@ -1,6 +1,7 @@ --- layout: default title: "The Confirm Component" +storybook_path: ra-ui-materialui-layout-confirm--back-click --- # `` diff --git a/docs/Count.md b/docs/Count.md index 2ef2e8ad7e4..0d3a5920d25 100644 --- a/docs/Count.md +++ b/docs/Count.md @@ -1,6 +1,7 @@ --- layout: default title: "The Count Component" +storybook_path: ra-ui-materialui-list-count--basic --- # `` diff --git a/docs/Create.md b/docs/Create.md index 1f364827571..26491acb05e 100644 --- a/docs/Create.md +++ b/docs/Create.md @@ -1,6 +1,7 @@ --- layout: default title: "The Create Component" +storybook_path: ra-ui-materialui-detail-create--basic --- # `` diff --git a/docs/CreateBase.md b/docs/CreateBase.md index 4175a7172f2..6edae3d4d9d 100644 --- a/docs/CreateBase.md +++ b/docs/CreateBase.md @@ -1,6 +1,7 @@ --- layout: default title: "The CreateBase Component" +storybook_path: ra-core-controller-createbase--default-title --- # `` diff --git a/docs/CustomRoutes.md b/docs/CustomRoutes.md index 5f76babc5bc..03739db22ee 100644 --- a/docs/CustomRoutes.md +++ b/docs/CustomRoutes.md @@ -1,6 +1,7 @@ --- layout: default title: "The CustomRoutes Component" +storybook_path: ra-core-core-customroutes--authenticated-custom-route --- # `` diff --git a/docs/DataTable.md b/docs/DataTable.md index a1cf42ef80c..61f56550c56 100644 --- a/docs/DataTable.md +++ b/docs/DataTable.md @@ -1,12 +1,15 @@ --- layout: default title: "The DataTable Component" +storybook_path: ra-ui-materialui-list-datatable--basic --- # `` The `` component renders a list of records as a table. It supports sorting, row selection for bulk actions, a collapsible panel, hiding and reordering columns, dynamic row and cell styles, and more. + + ## Usage Use `` inside a `ListContext` (e.g., as a descendent of [``](./List.md#list) or [``](./ReferenceManyField.md)). Define the table columns with its children using `` components: @@ -141,7 +144,7 @@ const PostList = () => ( ``` {% endraw %} -**Tip**: `` also lets you customize the table [header](#header) and [footer](#footer) components. +**Tip**: `` also lets you customize the table [header](#head) and [footer](#foot) components. ## `bulkActionButtons` @@ -691,6 +694,33 @@ const PostList = () => ( **Tip**: To handle sorting in your custom DataTable head component, check out the [Building a custom sort control](./ListTutorial.md#building-a-custom-sort-control) section. +## `hiddenColumns` + +By default, `` renders all `` children. Use the `hiddenColumns` property to set hidden columns by default. + +```tsx +import { ColumnsButton, TopToolbar, List, DataTable } from 'react-admin'; + +const PostListActions = () => ( + + + +) + +const PostList = () => ( + }> + + + + + + + +); +``` + +Using `hiddenColumns` instead of removing `` elements allows hidden columns to be displayed again using a ``, as explained in the [Hiding or Reordering Columns](#hiding-or-reordering-columns) section. + ## `hover` By default, when a user hovers over a row, the background color changes to indicate the row is active. Set the `hover` prop to `false` to disable this behavior. @@ -714,7 +744,7 @@ Using the `isRowExpandable` prop, you can customize which rows can have a collap For instance, this code shows an expand button only for rows that have a detail to show: ```tsx -import { List, DataTable useRecordContext } from 'react-admin'; +import { List, DataTable, useRecordContext } from 'react-admin'; const PostPanel = () => { const record = useRecordContext(); @@ -960,13 +990,13 @@ Additional props are passed to [the MUI ``](https://mui.com/material- ### `align` -Table cells are right-aligned by default. To left-align a column, set the `align` prop to `"left"`. This is useful for numeric columns: +Table cells are left-aligned by default. To right-align a column, set the `align` prop to `"right"`. This is useful for numeric columns: ```tsx ``` @@ -1616,7 +1646,7 @@ An action column should not be sortable, so you don't need to specify a `source` ```tsx - + ``` @@ -1652,9 +1682,9 @@ const ProductList = () => ( - + - + @@ -1686,9 +1716,9 @@ As this is quite verbose, you may prefer using the `` component from t - Users must have the `'read'` permission on a resource column to see it in the export: ```jsx -{ action: "read", resource: `${resource}.${source}` }. +{ action: "read", resource: `${resource}.${source}` } // or -{ action: "read", resource: `${resource}.*` }. +{ action: "read", resource: `${resource}.*` } ``` - Users must have the `'delete'` permission on the resource to see the ``. @@ -1757,7 +1787,7 @@ const ProductList = () => ( **Tip**: Adding the 'read' permission for the resource itself doesn't grant the 'read' permission on the columns. If you want a user to see all possible columns, add the 'read' permission on columns using a wildcard: ```jsx -{ action: "read", resource: "products.*" }. +{ action: "read", resource: "products.*" } ``` ## Typescript diff --git a/docs/Datagrid.md b/docs/Datagrid.md index dce4f99fdce..d7f45abfff7 100644 --- a/docs/Datagrid.md +++ b/docs/Datagrid.md @@ -1,11 +1,12 @@ --- layout: default title: "The Datagrid Component" +storybook_path: ra-ui-materialui-list-datagrid--basic --- # `` -> **Note:** React-admin v5.8.0 introduced a successor to `` called [``](./DataTable.md). It offers a better developer experience by removing child inspection, and avoids 'polluting' the field components with props only serving in datagrid columns (e.g. sortBy, label, etc). Hence, we recommend using `` instead of `` for new projects. `` is of course still available for backward compatibility. +> **Note:** React-admin v5.8.0 introduced a successor to `` called [``](./DataTable.md). It offers a better developer experience by removing child inspection, and avoids 'polluting' the field components with props only serving in datagrid columns (e.g. sortBy, label, etc). Hence, we recommend using `` instead of `` for new projects. `` is of course still available for backward compatibility. If you want to migrate to ``, we offer a [codemod](./DataTable.md#migrating-from-datagrid-to-datatable) that makes it easier. The `` component renders a list of records as a table. It supports sorting, row selection for bulk actions, and an expand panel. It is usually used as a descendant of the [``](./List.md#list) and [``](./ReferenceManyField.md) components. Outside these components, it must be used inside a `ListContext`. diff --git a/docs/DateField.md b/docs/DateField.md index d3db89c0e73..01fdf1b573d 100644 --- a/docs/DateField.md +++ b/docs/DateField.md @@ -1,6 +1,7 @@ --- layout: default title: "The DateField Component" +storybook_path: ra-ui-materialui-fields-datefield--basic --- # `` diff --git a/docs/DateInput.md b/docs/DateInput.md index b1b15acdf72..627c2055517 100644 --- a/docs/DateInput.md +++ b/docs/DateInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The DateInput Component" +storybook_path: ra-ui-materialui-input-dateinput--basic --- # `` diff --git a/docs/DateTimeInput.md b/docs/DateTimeInput.md index a8164fbbc50..52bb761e9c4 100644 --- a/docs/DateTimeInput.md +++ b/docs/DateTimeInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The DateTimeInput Component" +storybook_path: ra-ui-materialui-input-datetimeinput--basic --- # `` diff --git a/docs/Demos.md b/docs/Demos.md index 9adf0914f28..fc7dc926bfd 100644 --- a/docs/Demos.md +++ b/docs/Demos.md @@ -232,6 +232,35 @@ If you want to see what react-admin is capable of, or if you want to learn from +
+ Kanban Board +
+ +

Team Wiki

+

A Team Wiki board built with React-admin Enterprise Edition

+ +
+
+
+

Demo

+

Source code

+
+
+
+
+ Developer Portal +
+ +

Developer portal

+

Interactive documentation and rights administration for an API gateway

+ +
+
+
+

Source code

+
+
+
## E-commerce @@ -414,11 +443,32 @@ The source shows how to implement the following features: - [InPlace Edition](https://github.com/djhi/atomic-pm/blob/main/src/ra/EditInPlaceInput.tsx) - [Drag & drop](https://github.com/djhi/atomic-pm/blob/main/src/boards/BoardShow.tsx) +## Team Wiki + +A Team Wiki board built with React-admin Enterprise edition. + +[![Team wiki](./img/team-wiki.jpg)](https://marmelab.com/team-wiki/) + +* Demo: [https://marmelab.com/team-wiki/](https://marmelab.com/team-wiki/) +* Source code: [https://github.com/marmelab/team-wiki](https://github.com/marmelab/team-wiki) + +It leverages the following Enterprise Edition features: +- [Navigation](https://react-admin-ee.marmelab.com/documentation/ra-navigation) +- [History](https://react-admin-ee.marmelab.com/documentation/ra-history) +- [Markdown](https://react-admin-ee.marmelab.com/documentation/ra-markdown) +- [Search](https://react-admin-ee.marmelab.com/documentation/ra-search) +- [Tree](https://react-admin-ee.marmelab.com/documentation/ra-tree) + +The source shows how to implement the following features: +- [AppBar with Custom Navigation and Search](https://github.com/marmelab/team-wiki/blob/main/src/layout/AppBar.tsx) +- [Customizing the Markdown Input](https://github.com/marmelab/team-wiki/blob/main/src/inputs/PageMarkdownInput.tsx) +- [Custom List](https://github.com/marmelab/team-wiki/blob/main/src/resources/pages/PageList.tsx) + ## Broadcom Layer 7 API Hub A framework built on top of react-admin for building developer portals. -
+[![Broadcom API Hub](https://marmelab.com/static/bcb26e245e6e50e8f13631a156727d2e/46097/API_Hub.png)](https://github.com/CAAPIM/APIHub) * Source code: [https://github.com/CAAPIM/APIHub](https://github.com/CAAPIM/APIHub) diff --git a/docs/Edit.md b/docs/Edit.md index 6b434f5c999..6fd1b4fbf31 100644 --- a/docs/Edit.md +++ b/docs/Edit.md @@ -1,6 +1,7 @@ --- layout: default title: "The Edit Component" +storybook_path: ra-ui-materialui-detail-edit--basic --- # `` diff --git a/docs/EditBase.md b/docs/EditBase.md index b2ff5c7f49f..0d820c6a258 100644 --- a/docs/EditBase.md +++ b/docs/EditBase.md @@ -1,6 +1,7 @@ --- layout: default title: "The EditBase Component" +storybook_path: ra-core-controller-editbase--default-title --- # `` diff --git a/docs/EmailField.md b/docs/EmailField.md index 092609ba9b1..64e25d48d17 100644 --- a/docs/EmailField.md +++ b/docs/EmailField.md @@ -1,6 +1,7 @@ --- layout: default title: "The EmailField Component" +storybook_path: ra-ui-materialui-fields-emailfield--basic --- # `` diff --git a/docs/FileInput.md b/docs/FileInput.md index ebc4edd6b5c..8fa00a8b3f5 100644 --- a/docs/FileInput.md +++ b/docs/FileInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The FileInput Component" +storybook_path: ra-ui-materialui-input-fileinput--basic --- # `` diff --git a/docs/FilterButton.md b/docs/FilterButton.md index 427aaa650a5..dff53610817 100644 --- a/docs/FilterButton.md +++ b/docs/FilterButton.md @@ -1,6 +1,7 @@ --- layout: default title: "The FilterButton Component" +storybook_path: ra-ui-materialui-list-filter-filterbutton--basic --- # `` diff --git a/docs/FilterList.md b/docs/FilterList.md index 227e0d6da04..0c0ad81716c 100644 --- a/docs/FilterList.md +++ b/docs/FilterList.md @@ -1,6 +1,7 @@ --- layout: default title: "The FilterList Component" +storybook_path: ra-ui-materialui-list-filter-filterlist--basic --- # `` diff --git a/docs/FilterLiveForm.md b/docs/FilterLiveForm.md index 1c994a6138e..c2573f52a27 100644 --- a/docs/FilterLiveForm.md +++ b/docs/FilterLiveForm.md @@ -1,6 +1,7 @@ --- layout: default title: "FilterLiveForm" +storybook_path: ra-ui-materialui-list-filter-filterliveform--with-filter-list-section --- # `` diff --git a/docs/FilterLiveSearch.md b/docs/FilterLiveSearch.md index c5fdac864ac..d7a0849bc37 100644 --- a/docs/FilterLiveSearch.md +++ b/docs/FilterLiveSearch.md @@ -1,6 +1,7 @@ --- layout: default title: "The FilterLiveSearch Component" +storybook_path: ra-ui-materialui-list-filter-filterlivesearch--basic --- # `` diff --git a/docs/Form.md b/docs/Form.md index d37da0f304d..bf5e0ff2374 100644 --- a/docs/Form.md +++ b/docs/Form.md @@ -1,6 +1,7 @@ --- layout: default title: "Form" +storybook_path: ra-core-form-form--basic --- # `
` diff --git a/docs/FunctionField.md b/docs/FunctionField.md index bda53d03a90..7063beaeee6 100644 --- a/docs/FunctionField.md +++ b/docs/FunctionField.md @@ -1,6 +1,7 @@ --- layout: default title: "The FunctionField Component" +storybook_path: ra-ui-materialui-fields-functionfield--basic --- # `` diff --git a/docs/ImageInput.md b/docs/ImageInput.md index 83c8e093ecc..08651df61ff 100644 --- a/docs/ImageInput.md +++ b/docs/ImageInput.md @@ -1,6 +1,7 @@ --- layout: default title: "The ImageInput Component" +storybook_path: ra-ui-materialui-input-imageinput--basic --- # `` diff --git a/docs/InPlaceEditor.md b/docs/InPlaceEditor.md index 64fe5a689f7..177bd1c71ec 100644 --- a/docs/InPlaceEditor.md +++ b/docs/InPlaceEditor.md @@ -1,6 +1,7 @@ --- layout: default title: "The InPlaceEditor Component" +storybook_path: ra-ui-materialui-input-inplaceeditor--complex --- # `` @@ -158,7 +159,7 @@ For example, to render a `` in read mode, you can use the following The component to render in edit mode. By default, it's a `` using the `source` prop. -You can use any [input component](./Input.md) instead, as it renders in a ``. You will probably need to tweak the input variant, margin and style so that it matches the style of the read mode component. +You can use any [input component](./Inputs.md) instead, as it renders in a ``. You will probably need to tweak the input variant, margin and style so that it matches the style of the read mode component.