update list (end)

Author: slax57

docs_headless/src/content/docs/list/WithListContext.md

@@ -1,11 +1,8 @@
 ---
-layout: default
-title: "WithListContext"
+title: "<WithListContext>"
 storybook_path: ra-core-controller-list-withlistcontext--basic
 ---
 
-# `<WithListContext>`
-
 `<WithListContext>` executes its `render` function using the current `ListContext` as parameter. It's the render prop version of [the `useListContext` hook](./useListContext.md).
 
 Use it to render a list of records already fetched.
@@ -14,32 +11,34 @@ Use it to render a list of records already fetched.
 
 The most common use case for `<WithListContext>` is to build a custom list view on-the-fly, without creating a new component, in a place where records are available inside a `ListContext`. 
 
-For instance, a list of book tags fetched via [`<ReferenceArrayField>`](./ReferenceArrayField.md): 
+For instance, a list of book tags fetched via [`<ReferenceArrayFieldBase>`](../fields/ReferenceArrayFieldBase.md): 
 
 ```jsx
-import { List, DataTable, ReferenceArrayField, WithListContext } from 'react-admin';
-import { Chip, Stack } from '@mui/material';
+import { ListBase, WithListContext, ReferenceArrayFieldBase } from 'ra-core';
+import { DataTable } from './components';
 
 const BookList = () => (
-    <List>
+    <ListBase>
         <DataTable>
             <DataTable.Col source="id" />
             <DataTable.Col source="title" />
             <DataTable.Col source="tag_ids" label="Tags">
-                <ReferenceArrayField reference="tags" source="tag_ids">
+                <ReferenceArrayFieldBase reference="tags" source="tag_ids">
                     <WithListContext render={({ isPending, data }) => (
                         !isPending && (
-                            <Stack direction="row" spacing={1}>
+                            <div className="stack">
                                 {data.map(tag => (
-                                    <Chip key={tag.id} label={tag.name} />
+                                    <span key={tag.id} className="chip">
+                                        {tag.name}
+                                    </span>
                                 ))}
-                            </Stack>
+                            </div>
                         )
                     )} />
-                </ReferenceArrayField>
+                </ReferenceArrayFieldBase>
             </DataTable.Col>
         </DataTable>
-    </List>
+    </ListBase>
 );
 ```
 
@@ -48,32 +47,35 @@ const BookList = () => (
 The equivalent with `useListContext` would require an intermediate component:
 
 ```jsx
-import { List, DataTable, ReferenceArrayField, WithListContext } from 'react-admin';
+import { ListBase, useListContext, ReferenceArrayFieldBase } from 'ra-core';
+import { DataTable } from './components';
 
 const BookList = () => (
-    <List>
+    <ListBase>
         <DataTable>
             <DataTable.Col source="id" />
             <DataTable.Col source="title" />
             <DataTable.Col label="Tags" source="tag_ids">
-                <ReferenceArrayField reference="tags" source="tag_ids">
+                <ReferenceArrayFieldBase reference="tags" source="tag_ids">
                     <TagList />
-                </ReferenceArrayField>
+                </ReferenceArrayFieldBase>
             </DataTable.Col>
         </DataTable>
-    </List>
+    </ListBase>
 );
 
 const TagList = () => {
     const { isPending, data } = useListContext();
     return isPending 
         ? null
         : (
-            <Stack direction="row" spacing={1}>
+            <div className="stack">
                 {data.map(tag => (
-                    <Chip key={tag.id} label={tag.name} />
+                    <span key={tag.id} className="chip">
+                        {tag.name}
+                    </span>
                 ))}
-            </Stack>
+            </div>
         );
 };
 ```
@@ -141,22 +143,19 @@ As a reminder, the [`ListContext`](./useListContext.md) is an object with the fo
 
 ## Availability
 
-Whenever you use a react-admin component to fetch a list of records, react-admin stores the data in a [`ListContext`](./useListContext.md). Consequently, `<WithListContext>` works in any component that is a descendant of:
+Whenever you use a ra-core component to fetch a list of records, ra-core stores the data in a [`ListContext`](./useListContext.md). Consequently, `<WithListContext>` works in any component that is a descendant of:
 
-- the [`<List>`](./ListBase.md), [`<InfiniteList>`](./InfiniteList.md), and [`<ListBase>`](./ListBase.md) components
-- the [`<ArrayField>`](./ArrayField.md) component
-- the [`<ReferenceManyField>`](./ReferenceManyField.md) component
-- the [`<ReferenceArrayField>`](./ReferenceArrayField.md) component
+- the [`<ListBase>`](./ListBase.md) component
+- the [`<ReferenceArrayFieldBase>`](../fields/ReferenceArrayFieldBase.md) component
 
 ## Building a Chart
 
 A common use case is to build a chart based on the list data. For instance, the following component fetches a list of fruit prices (using `<ListBase>`), and draws a line chart with the data using [Echarts](https://echarts.apache.org/en/index.html):
 
 ![Chart based on ListContext](../img/WithListContext-chart.png)
 
-{% raw %}
 ```jsx
-import { ListBase, WithListContext } from 'react-admin';
+import { ListBase, WithListContext } from 'ra-core';
 import * as echarts from 'echarts';
 
 const FruitChart = () => (
@@ -216,18 +215,17 @@ const LineChart = ({ data }) => {
     return <div ref={chartRef} style={{ height: 300, width: 700 }} />;
 };
 ```
-{% endraw %}
 
 ## Building a Refresh Button
 
 Another use case is to create a button that refreshes the current list. As the [`ListContext`](./useListContext.md) exposes the `refetch` function, it's as simple as:
 
 ```jsx
-import { WithListContext } from 'react-admin'; 
+import { WithListContext } from 'ra-core'; 
 
 const RefreshListButton = () => (
     <WithListContext render={({ refetch }) => (
         <button onClick={refetch}>Refresh</button>
     )} />
 );
-```
+```

docs_headless/src/content/docs/list/useList.md

@@ -1,13 +1,10 @@
 ---
-layout: default
 title: "useList"
 ---
 
-# `useList`
-
 The `useList` hook allows to create a `ListContext` based on local data. `useList` creates callbacks for sorting, paginating, filtering, and selecting records from an array.
 
-Thanks to it, you can display your data inside a [`<DataTable>`](./DataTable.md), a [`<SimpleList>`](./SimpleList.md) or an [`<EditableDatagrid>`](./EditableDatagrid.md).
+Thanks to it, you can display your data inside your own list components.
 
 ## Usage
 
@@ -17,8 +14,8 @@ Thanks to it, you can display your data inside a [`<DataTable>`](./DataTable.md)
 import {
     useList,
     ListContextProvider,
-    DataTable,
-} from 'react-admin';
+} from 'ra-core';
+import { DataTable } from './DataTable';
 
 const data = [
     { id: 1, name: 'Arnold' },
@@ -42,7 +39,8 @@ const MyComponent = () => {
 If you use it with data coming from the `dataProvider`, don't forget to pass the `isPending` prop so that it only manipulates the data once it's available:
 
 ```jsx
-import { useGetList, useList } from 'react-admin';
+import { useGetList, useList, ListContextProvider } from 'ra-core';
+import { DataTable } from './DataTable';
 
 const MyComponent = () => {
     const { data, isPending } = useGetList(
@@ -140,10 +138,11 @@ const { data } = useList({
 
 ## `isFetching`
 
-This value ends up in the return value. It is used by list iterators (like `<DataTable>`) to know when to display a loading indicator.
+This value ends up in the return value. It is used by list iterators to know when to display a loading indicator.
 
 ```jsx
-import { useGetList, useList } from 'react-admin';
+import { useGetList, useList, ListContextProvider } from 'ra-core';
+import { DataTable } from './DataTable';
 
 const MyComponent = () => {
     const { data, isFetching } = useGetList(
@@ -164,15 +163,15 @@ const MyComponent = () => {
 
 ## `isPending`
 
-This value ends up in the return value. It is used by list iterators (like `<DataTable>`) to know when to display a loading indicator.
+This value ends up in the return value. It is used by list iterators to know when to display a loading indicator.
 
 ```jsx
 import {
     useGetList,
     useList,
     ListContextProvider,
-    DataTable,
-} from 'react-admin';
+} from 'ra-core';
+import { DataTable } from './DataTable';
 
 const MyComponent = () => {
     const { data, isPending } = useGetList(

docs_headless/src/content/docs/list/useListContext.md

@@ -1,56 +1,47 @@
 ---
-layout: default
 title: "useListContext"
 ---
 
-# `useListContext`
-
-Whenever react-admin displays a List, it creates a `ListContext` to store the list data, as well as filters, pagination, sort state, and callbacks to update them.
+Whenever ra-core displays a List, it creates a `ListContext` to store the list data, as well as filters, pagination, sort state, and callbacks to update them.
 
 The `ListContext` is available to descendants of:
 
-- `<List>`,
-- `<ListGuesser>`,
 - `<ListBase>`,
-- `<ReferenceArrayField>`,
-- `<ReferenceManyField>`
+- `<ReferenceArrayFieldBase>`,
+- `<ReferenceManyFieldBase>`
 
-All descendant components can therefore access the list context, using the `useListContext` hook. As a matter of fact, react-admin's `<DataTable>`, `<FilterForm>`, and `<Pagination>` components all use the `useListContext` hook.
+All descendant components can therefore access the list context, using the `useListContext` hook.
 
 ## Usage
 
-Call `useListContext` in a component, then use this component as a descendant of a `List` component.
+Call `useListContext` in a component, then use this component as a descendant of a list component.
 
 ```jsx
 // in src/posts/Aside.js
-import { Typography } from '@mui/material';
-import { useListContext } from 'react-admin';
+import { useListContext } from 'ra-core';
 
 export const Aside = () => {
     const { data, isPending } = useListContext();
     if (isPending) return null;
     return (
         <div>
-            <Typography variant="h6">Posts stats</Typography>
-            <Typography variant="body2">
+            <h6>Posts stats</h6>
+            <p>
                 Total views: {data.reduce((sum, post) => sum + post.views, 0)}
-            </Typography>
+            </p>
         </div>
     );
 };
 
 // in src/posts/PostList.js
-import { List, DataTable } from 'react-admin';
+import { ListBase } from 'ra-core';
 import Aside from './Aside';
 
 export const PostList = () => (
-    <List aside={<Aside />}>
-        <DataTable>
-            <DataTable.Col source="id" />
-            <DataTable.Col source="title" />
-            <DataTable.Col source="views" />
-        </DataTable>
-    </List>
+    <ListBase>
+        <Aside />
+        {/* My list content */}
+    </ListBase>
 );
 ```
 
@@ -100,17 +91,16 @@ const {
 `useListContext` often forces you to create a new component just to access the list context. If you prefer a declarative approach based on render props, you can use [the `<WithListContext>` component](./WithListContext.md) instead:
 
 ```jsx
-import { WithListContext } from 'react-admin';
-import { Typography } from '@mui/material';
+import { WithListContext } from 'ra-core';
 
 export const Aside = () => (
     <WithListContext render={({ data, isPending }) => 
         !isPending && (
             <div>
-                <Typography variant="h6">Posts stats</Typography>
-                <Typography variant="body2">
+                <h6>Posts stats</h6>
+                <p>
                     Total views: {data.reduce((sum, post) => sum + post.views, 0)}
-                </Typography>
+                </p>
             </div>
     )} />
 );
@@ -128,7 +118,7 @@ You can use it to update the filters in a custom filter component:
 
 ```jsx
 import { useState } from 'react';
-import { useListContext } from 'react-admin';
+import { useListContext } from 'ra-core';
 
 const CustomFilter = () => {
     const { filterValues, setFilters } = useListContext();
@@ -162,8 +152,7 @@ const CustomFilter = () => {
 The `useListContext` hook accepts a generic parameter for the record type:
 
 ```tsx
-import { Typography } from '@mui/material';
-import { List, DataTable, useListContext } from 'react-admin';
+import { ListBase, useListContext } from 'ra-core';
 
 type Post = {
     id: number;
@@ -176,36 +165,30 @@ export const Aside = () => {
     if (isPending) return null;
     return (
         <div>
-            <Typography variant="h6">Posts stats</Typography>
-            <Typography variant="body2">
+            <h6>Posts stats</h6>
+            <p>
                 {/* TypeScript knows that posts is of type Post[] */}
                 Total views: {posts.reduce((sum, post) => sum + post.views, 0)}
-            </Typography>
+            </p>
         </div>
     );
 };
 
 export const PostList = () => (
-    <List aside={<Aside />}>
-        <DataTable>
-            <DataTable.Col source="id" />
-            <DataTable.Col source="title" />
-            <DataTable.Col source="views" />
-        </DataTable>
-    </List>
+    <ListBase>
+        <Aside />
+        {/* My list content */}
+    </ListBase>
 );
 ```
 
 ## Recipes
 
 You can find many usage examples of `useListContext` in the documentation, including:
 
-- [Adding a Side Component with `<List actions>`](./List.md#aside)
-- [Building a Custom Actions Bar via `<List actions>`](./List.md#actions)
-- [Building a Custom Empty Page via `<List empty>`](./List.md#empty)
 - [Building a Custom Filter](./FilteringTutorial.md#building-a-custom-filter)
 - [Building a Custom Sort Control](./ListTutorial.md#building-a-custom-sort-control)
 - [Building a Custom Pagination Control](./ListTutorial.md#building-a-custom-pagination)
-- [Building a Custom Iterator](./ListTutorial.md#building-a-custom-iterator)
+- [Building a Custom List Layout](./ListTutorial.md#building-a-custom-list-layout)
 
-**Tip**: [`<ReferenceManyField>`](./ReferenceManyField.md), as well as other relationship-related components, also implement a `ListContext`. That means you can use a `<DataTable>` of a `<Pagination>` inside these components!
+**Tip**: [`<ReferenceManyFieldBase>`](../fields/ReferenceManyFieldBase.md), as well as other relationship-related components, also implement a `ListContext`. That means you can use custom list components inside these components!