From 8c9fa0ba3957f0b05e0a5d85934bba1eebc1caa7 Mon Sep 17 00:00:00 2001 From: Doguhan Ozgur Akca Date: Wed, 26 Jul 2023 18:13:22 +0300 Subject: [PATCH 1/4] docs: rest of antd hooks --- .../antd/hooks/list/useSimpleList.md | 144 +++++++++--------- .../antd/hooks/table/useEditableTable.md | 28 ++-- .../antd/hooks/table/useTable.md | 144 +++++++++--------- .../api-reference/antd/hooks/ui/useModal.md | 4 +- .../antd/migration-guide/v4-to-v5.md | 8 +- 5 files changed, 158 insertions(+), 170 deletions(-) diff --git a/documentation/docs/api-reference/antd/hooks/list/useSimpleList.md b/documentation/docs/api-reference/antd/hooks/list/useSimpleList.md index 71dc43a7ef90..e2a2b187304b 100644 --- a/documentation/docs/api-reference/antd/hooks/list/useSimpleList.md +++ b/documentation/docs/api-reference/antd/hooks/list/useSimpleList.md @@ -9,15 +9,15 @@ import SortingLivePreview from "./sorting-live-preview.md"; import FilteringLivePreview from "./filtering-live-preview.md"; import SearchLivePreview from "./search-live-preview.md"; -By using `useSimpleList`, you can get properties that are compatible with Ant Design [``](https://ant.design/components/list/) component. All features such as sorting, filtering, and pagination come out of the box. Under the hood it uses [`useTable`](/docs/api-reference/core/hooks/useTable/) for the fetch. +By using `useSimpleList`, you can get properties that are compatible with the Ant Design's [``](https://ant.design/components/list/) component. All features such as sorting, filtering, and pagination come out of the box. `useSimpleList` uses [`useTable`](/docs/api-reference/core/hooks/useTable/) under the hood for the fetch. -For all the other features, you can refer to the Ant Design [``](https://ant.design/components/list/) documentation. +For all the other features, you can refer to the Ant Design's [``](https://ant.design/components/list/) documentation. ## Basic Usage In the following example, we will show how to use `useSimpleList` to list the products. -It returns `listProps` which is compatible with Ant Design `` component. By default, it reads [`resource`](#resource) from the current URL. +It returns `listProps` which is compatible with the Ant Design's `` component. By default, it reads the [`resource`](#resource) from the current URL. @@ -29,6 +29,7 @@ It also syncs the pagination state with the URL if you enable the [`syncWithLoca If you want to make a change in the pagination of the ``. You should pass the pagination object of the `listProps` to the pagination property of the `` as below. You can override the values of the pagination object as your need. + ```tsx // ... const { listProps } = useSimpleList(); @@ -51,7 +52,7 @@ return ( ``` :::info -By default, pagination happens on the server side. If you want to do pagination handling on the client side, you can pass the pagination.mode property and set it to "client". Also, you can disable the pagination by setting the "off". +By default, pagination happens on the server side. If you want to do pagination handling on the client side, you can pass the pagination.mode property and set it to "client". You can also disable the pagination by setting it to "off". ::: ## Sorting @@ -72,23 +73,27 @@ It also syncs the filtering state with the URL if you enable the [`syncWithLocat ## Search -We can use [`onSearch`](#onsearch) property and [`searchFormProps`](#searchformprops) return value to make a custom filter form. `onSearch` is a function that is called when the form is submitted. `searchFormProps` is a property that is passed to the [`
`](https://ant.design/components/form) component. +We can use the [`onSearch`](#onsearch) property and the [`searchFormProps`](#searchformprops) return value to make a custom filter form. `onSearch` is a function that is called when the form is submitted. `searchFormProps` is a property that is passed to the [``](https://ant.design/components/form) component. ## Realtime Updates -> This feature is only available if you use a [Live Provider](/docs/api-reference/core/providers/live-provider). +:::caution +This feature is only available if you use a [Live Provider](/docs/api-reference/core/providers/live-provider). +::: When the `useSimpleList` hook is mounted, it will call the `subscribe` method from the `liveProvider` with some parameters such as `channel`, `resource` etc. It is useful when you want to subscribe to live updates. -[Refer to the `liveProvider` documentation for more information →](/docs/api-reference/core/providers/live-provider) +> For more information, refer to the [`liveProvider` documentation →](/docs/api-reference/core/providers/live-provider) ## Properties ### `resource` -The `useSimpleList` passes the `resource` to the `dataProvider` as a param. This parameter is usually used as an API endpoint path. It all depends on how to handle the resources in your `dataProvider`. See the [`creating a data provider`](/api-reference/core/providers/data-provider.md#creating-a-data-provider) section for an example of how resources are handled. +The `useSimpleList` passes the `resource` to the `dataProvider` as a param. This parameter is usually used as an API endpoint path. It all depends on how to handle the resources in your `dataProvider`. + +Refer to the [`creating a data provider`](/api-reference/core/providers/data-provider.md#creating-a-data-provider) documentation for an example of how resources are handled. The `resource` value is inferred from the current route where the component or the hook is used. It can be overridden by passing the `resource` prop. @@ -144,9 +149,7 @@ If you have multiple resources with the same name, you can pass the `identifier` ### `pagination.current` -> Default: `1` - -Sets the initial value of the page index. +Sets the initial value of the page index. It is `1` by default. ```tsx useSimpleList({ @@ -158,9 +161,7 @@ useSimpleList({ ### `pagination.pageSize` -> Default: `10` - -Sets the initial value of the page size. +Sets the initial value of the page size. It is `10` by default. ```tsx useSimpleList({ @@ -172,9 +173,7 @@ useSimpleList({ ### `pagination.mode` -> Default: `"server"` - -It can be `"off"`, `"server"` or `"client"`. +It can be `"off"`, `"server"` or `"client"`. It is `"server"` by default. - **"off":** Pagination is disabled. All records will be fetched. - **"client":** Pagination is done on the client side. All records will be fetched and then the records will be paginated on the client side. @@ -192,7 +191,7 @@ useSimpleList({ Sets the initial value of the sorter. The `initial` is not permanent. It will be cleared when the user changes the sorter. If you want to set a permanent value, use the `sorters.permanent` prop. -[Refer to the `CrudSorting` interface for more information →](docs/api-reference/core/interfaceReferences#crudsorting) +> For more information, refer to the [`CrudSorting` interface documentation →](docs/api-reference/core/interfaceReferences#crudsorting) ```tsx useSimpleList({ @@ -211,7 +210,7 @@ useSimpleList({ Sets the permanent value of the sorter. The `permanent` is permanent and unchangeable. It will not be cleared when the user changes the sorter. If you want to set a temporary value, use the `sorters.initial` prop. -[Refer to the `CrudSorting` interface for more information →](docs/api-reference/core/interfaceReferences#crudsorting) +> For more information, refer to the [`CrudSorting` interface documentation →](docs/api-reference/core/interfaceReferences#crudsorting) ```tsx useSimpleList({ @@ -230,7 +229,7 @@ useSimpleList({ Sets the initial value of the filter. The `initial` is not permanent. It will be cleared when the user changes the filter. If you want to set a permanent value, use the `filters.permanent` prop. -[Refer to the `CrudFilters` interface for more information →](/docs/api-reference/core/interfaceReferences#crudfilters) +> For more information, refer to the [`CrudFilters` →](/docs/api-reference/core/interfaceReferences#crudfilters) ```tsx useSimpleList({ @@ -250,7 +249,7 @@ useSimpleList({ Sets the permanent value of the filter. The `permanent` is permanent and unchangeable. It will not be cleared when the user changes the filter. If you want to set a temporary value, use the `filters.initial` prop. -[Refer to the `CrudFilters` interface for more information →](/docs/api-reference/core/interfaceReferences#crudfilters) +> For more information, refer to the [`CrudFilters` →](/docs/api-reference/core/interfaceReferences#crudfilters) ```tsx useSimpleList({ @@ -268,9 +267,7 @@ useSimpleList({ ### `filters.defaultBehavior` -> Default: `merge` - -The filtering behavior can be set to either `"merge"` or `"replace"`. +The filtering behavior can be set to either `"merge"` or `"replace"`. It is `merge` by default. - When the filter behavior is set to `"merge"`, it will merge the new filter with the existing filters. This means that if the new filter has the same column as an existing filter, the new filter will replace the existing filter for that column. If the new filter has a different column than the existing filters, it will be added to the existing filters. @@ -288,9 +285,7 @@ useSimpleList({ ### `syncWithLocation` -> Default: `false` - -When you use the syncWithLocation feature, the `useSimpleList`'s state (e.g. sort order, filters, pagination) is automatically encoded in the query parameters of the URL, and when the URL changes, the `useSimpleList` state is automatically updated to match. This makes it easy to share list states across different routes or pages and allows users to bookmark or share links to specific table views. +When you use the syncWithLocation feature, the `useSimpleList`'s state (e.g. sort order, filters, pagination) is automatically encoded in the query parameters of the URL, and when the URL changes, the `useSimpleList` state is automatically updated to match. This makes it easy to share list states across different routes or pages and allows users to bookmark or share links to specific table views. `syncWithLocation` is set to `false` by default. Also, you can set this value globally on the [``][refine swl] component. @@ -302,7 +297,7 @@ useSimpleList({ ### `queryOptions` -`useSimpleList` uses [`useTable`](/docs/api-reference/core/hooks/useTable/) hook to fetch data. You can pass [`queryOptions`](https://tanstack.com/query/v4/docs/react/reference/useQuery). +`useSimpleList` uses the [`useTable`](/docs/api-reference/core/hooks/useTable/) hook to fetch data. You can pass the [`queryOptions`](https://tanstack.com/query/v4/docs/react/reference/useQuery) to it like this: ```tsx useSimpleList({ @@ -319,7 +314,7 @@ useSimpleList({ - Customizing the data provider methods for specific use cases. - Generating GraphQL queries using plain JavaScript Objects (JSON). -[Refer to the `meta` section of the General Concepts documentation for more information →](/docs/api-reference/general-concepts/#meta) +> For more information, refer to the [`meta` section of the General Concepts documentation for more information →](/docs/api-reference/general-concepts/#meta) In the following example, we pass the `headers` property in the `meta` object to the `create` method. With similar logic, you can pass any properties to specifically handle the data provider methods. @@ -362,7 +357,7 @@ const myDataProvider = { ### `dataProviderName` -If there is more than one `dataProvider`, you can specify which one to use by passing the `dataProviderName` prop. It is useful when you have a different data provider for different resources. +If there is more than one `dataProvider`, you can specify which one to use by passing the `dataProviderName` prop. This is useful when you have a different data provider for different resources. ```tsx useSimpleList({ @@ -372,7 +367,9 @@ useSimpleList({ ### `successNotification` -> [`NotificationProvider`](/docs/api-reference/core/providers/notification-provider/) is required for this prop to work. +:::caution +[`NotificationProvider`](/docs/api-reference/core/providers/notification-provider/) is required for this prop to work. +::: After data is fetched successfully, `useSimpleList` can call the `open` function from `NotificationProvider` to show a success notification. With this prop, you can customize the success notification. @@ -390,7 +387,9 @@ useSimpleList({ ### `errorNotification` -> [`NotificationProvider`](/docs/api-reference/core/providers/notification-provider/) is required for this prop to work. +:::caution +[`NotificationProvider`](/docs/api-reference/core/providers/notification-provider/) is required for this prop to work. +::: After data fetching is failed, `useSimpleList` will call the `open` function from `NotificationProvider` to show an error notification. With this prop, you can customize the error notification. @@ -408,10 +407,13 @@ useSimpleList({ ### `liveMode` -> [`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +:::caution +[`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +::: + +Determines whether to update data automatically (`"auto"`) or not (`"manual"`) if a related live event is received. It can be used to update and show data in Realtime throughout your app. -Determines whether to update data automatically ("auto") or not ("manual") if a related live event is received. It can be used to update and show data in Realtime throughout your app. -For more information about live mode, please check the [Live / Realtime](/docs/api-reference/core/providers/live-provider/#livemode) page. +> For more information, refer to the [Live / Realtime documentation →](/docs/api-reference/core/providers/live-provider/#livemode) ```tsx useSimpleList({ @@ -421,7 +423,9 @@ useSimpleList({ ### `onLiveEvent` -> [`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +:::caution +[`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +::: The callback function is executed when new events from a subscription have arrived. @@ -435,7 +439,9 @@ useSimpleList({ ### `liveParams` -> [`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +:::caution +[`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +::: Params to pass to liveProvider's [subscribe](/docs/api-reference/core/providers/live-provider/#subscribe) method. @@ -443,7 +449,7 @@ Params to pass to liveProvider's [subscribe](/docs/api-reference/core/providers/ When [`searchFormProps.onFinish`](#searchformprops) is called, the `onSearch` function is called with the values of the form. The `onSearch` function should return [`CrudFilters | Promise`][crudfilters]. When the `onSearch` function is called, the current page will be set to 1. -It's useful when you want to filter the data with multiple fields by using the `` component. +`onSearch` is useful when you want to filter the data with multiple fields by using the `` component. ```tsx // ... @@ -491,9 +497,7 @@ return ( Use `pagination.current` instead. ::: -> Default: `1` - -Sets the initial value of the page index. +Sets the initial value of the page index. It is set to `1` by default. ```tsx useSimpleList({ @@ -507,9 +511,7 @@ useSimpleList({ Use `pagination.pageSize` instead. ::: -> Default: `10` - -Sets the initial value of the page size. +Sets the initial value of the page size. It is set to `10` by default. ```tsx useSimpleList({ @@ -523,9 +525,7 @@ useSimpleList({ Use `pagination.mode` instead. ::: -> Default: `true` - -Determines whether to use server-side pagination or not. +Determines whether to use server-side pagination or not. It is set to `true` by default. ```tsx useSimpleList({ @@ -541,7 +541,7 @@ Use `sorters.initial` instead. Sets the initial value of the sorter. The `initialSorter` is not permanent. It will be cleared when the user changes the sorter. If you want to set a permanent value, use the `permanentSorter` prop. -[Refer to the `CrudSorting` interface for more information →](docs/api-reference/core/interfaceReferences#crudsorting) +> For more information, refer to the [`CrudSorting` interface documentation →](docs/api-reference/core/interfaceReferences#crudsorting) ```tsx useSimpleList({ @@ -562,7 +562,7 @@ Use `sorters.permanent` instead. Sets the permanent value of the sorter. The `permanentSorter` is permanent and unchangeable. It will not be cleared when the user changes the sorter. If you want to set a temporary value, use the `initialSorter` prop. -[Refer to the `CrudSorting` interface for more information →](docs/api-reference/core/interfaceReferences#crudsorting) +> For more information, refer to the [`CrudSorting` interface documentation →](docs/api-reference/core/interfaceReferences#crudsorting) ```tsx useSimpleList({ @@ -583,7 +583,7 @@ Use `filters.initial` instead. Sets the initial value of the filter. The `initialFilter` is not permanent. It will be cleared when the user changes the filter. If you want to set a permanent value, use the `permanentFilter` prop. -[Refer to the `CrudFilters` interface for more information →](/docs/api-reference/core/interfaceReferences#crudfilters) +> For more information, refer to the [`CrudFilters` interface documentation →](/docs/api-reference/core/interfaceReferences#crudfilters) ```tsx useSimpleList({ @@ -605,7 +605,7 @@ Use `filters.permanent` instead. Sets the permanent value of the filter. The `permanentFilter` is permanent and unchangeable. It will not be cleared when the user changes the filter. If you want to set a temporary value, use the `initialFilter` prop. -[Refer to the `CrudFilters` interface for more information →](/docs/api-reference/core/interfaceReferences#crudfilters) +> For more information, refer to the [`CrudFilters` interface documentation →](/docs/api-reference/core/interfaceReferences#crudfilters) ```tsx useSimpleList({ @@ -625,9 +625,7 @@ useSimpleList({ Use `filters.defaultBehavior` instead. ::: -> Default: `merge` - -The filtering behavior can be set to either `"merge"` or `"replace"`. +The filtering behavior can be set to either `"merge"` or `"replace"`. It is set to `merge` by default. - When the filter behavior is set to `"merge"`, it will merge the new filter with the existing filters. This means that if the new filter has the same column as an existing filter, the new filter will replace the existing filter for that column. If the new filter has a different column than the existing filters, it will be added to the existing filters. @@ -643,8 +641,8 @@ useSimpleList({ ### `overtimeOptions` -If you want loading overtime for the request, you can pass the `overtimeOptions` prop to the this hook. It is useful when you want to show a loading indicator when the request takes too long. -`interval` is the time interval in milliseconds. `onInterval` is the function that will be called on each interval. +If you want the loading overtime for the request, you can pass the `overtimeOptions` prop to the this hook. It is useful if you want to show a loading indicator when the request takes too long. +`interval` is the time interval in milliseconds while `onInterval` is the function that will be called on each interval. Return `overtime` object from this hook. `elapsedTime` is the elapsed time in milliseconds. It becomes `undefined` when the request is completed. @@ -668,11 +666,11 @@ console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ... ### `queryResult` -Returned values from [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. +`queryResult` is the returned values from [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. ### `searchFormProps` -It returns [``](https://ant.design/components/form/) instance of Ant Design. When `searchFormProps.onFinish` is called, it will trigger [`onSearch`](#onsearch) function. +`searchFormProps` returns the [``](https://ant.design/components/form/) instance of Ant Design. When `searchFormProps.onFinish` is called, it will trigger [`onSearch`](#onsearch) function. You can also use `searchFormProps.form.submit` to submit the form manually. It's useful when you want to create a filter form for your ``. @@ -723,23 +721,23 @@ return ( #### `dataSource` -Contains the data to be displayed in the list. Values fetched with [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. +`dataSource` contains the data to be displayed in the list. Values are fetched with the [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. #### `loading` -Indicates whether the data is being fetched. +`loading` indicates whether the data is being fetched or not. #### `pagination` -Returns pagination configuration values(pageSize, current, position, etc.). +`pagination` returns the pagination configuration values(pageSize, current, position, etc.). ### `sorters` -Current [sorters state][crudsorting]. +`sorters` is the current [sorters state][crudsorting]. ### `setSorters` -A function to set current [sorters state][crudsorting]. +`setSorters` is a function to set the current[sorters state][crudsorting]. ```tsx (sorters: CrudSorting) => void; @@ -747,7 +745,7 @@ A function to set current [sorters state][crudsorting]. ### `filters` -Current [filters state][crudfilters]. +`filters` is the current [filters state][crudfilters]. ### `setFilters` @@ -755,11 +753,11 @@ Current [filters state][crudfilters]. ((filters: CrudFilters, behavior?: SetFilterBehavior) => void) & ((setter: (prevFilters: CrudFilters) => CrudFilters) => void) ``` -A function to set current [filters state][crudfilters]. +`setFilters` is a function to set the current [filters state][crudfilters]. ### `current` -Current page index state. If pagination is disabled, it will be `undefined`. +`current` is the current page index state. If pagination is disabled, it will be `undefined`. ### `setCurrent` @@ -767,11 +765,11 @@ Current page index state. If pagination is disabled, it will be `undefined`. React.Dispatch> | undefined; ``` -A function to set the current page index state. If pagination is disabled, it will be `undefined`. +`setCurrent` is a function to set the current page index state. If pagination is disabled, it will be `undefined`. ### `pageSize` -Current page size state. If pagination is disabled, it will be `undefined`. +`pageSize` is the current page size state. If pagination is disabled, it will be `undefined`. ### `setPageSize` @@ -779,11 +777,11 @@ Current page size state. If pagination is disabled, it will be `undefined`. React.Dispatch> | undefined; ``` -A function to set the current page size state. If pagination is disabled, it will be `undefined`. +`setPageSize` is a function to set the current page size state. If pagination is disabled, it will be `undefined`. ### `pageCount` -Total page count state. If pagination is disabled, it will be `undefined`. +`pageCount` is the total page count state. If pagination is disabled, it will be `undefined`. ### `createLinkForSyncWithLocation` @@ -791,7 +789,7 @@ Total page count state. If pagination is disabled, it will be `undefined`. (params: SyncWithLocationParams) => string; ``` -A function creates accessible links for `syncWithLocation`. It takes an [SyncWithLocationParams][syncwithlocationparams] as parameters. +`createLinkForSyncWithLocation` is a function that creates accessible links for `syncWithLocation`. It takes an [SyncWithLocationParams][syncwithlocationparams] as parameters. ### `overtime` @@ -808,7 +806,7 @@ console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ... Use `sorters` instead. ::: -Current [sorters state][crudsorting]. +`sorter` is the current [sorters state][crudsorting]. ### ~~`setSorter`~~ @@ -816,7 +814,7 @@ Current [sorters state][crudsorting]. Use `setSorters` instead. ::: -A function to set current [sorters state][crudsorting]. +`setSorter` is a function to set current [sorters state][crudsorting]. ```tsx (sorters: CrudSorting) => void; diff --git a/documentation/docs/api-reference/antd/hooks/table/useEditableTable.md b/documentation/docs/api-reference/antd/hooks/table/useEditableTable.md index f51adfcf1eb7..11640980a13f 100644 --- a/documentation/docs/api-reference/antd/hooks/table/useEditableTable.md +++ b/documentation/docs/api-reference/antd/hooks/table/useEditableTable.md @@ -6,15 +6,15 @@ source: packages/antd/src/hooks/table/useTable import LivePreview from "./\_partial-use-editable-table-live-preview.md"; -`useEditeableTable` allows you to implement the edit feature on the [``][table] with ease. Return properties that can be used on Ant Desing's [`
`][table] and [``][form] components. +`useEditeableTable` allows you to implement the edit feature on the [`
`][table] with ease and returns properties that can be used on Ant Desing's [`
`][table] and [``][form] components. :::info -`useEditeableTable` hook is extended from [`useTable`][usetable] hook from the [`@refinedev/antd`](https://github.com/refinedev/refine/tree/next/packages/antd) package. This means that you can use all the features of [`useTable`][usetable] hook. +`useEditeableTable` hook is extended from the [`useTable`][usetable] hook from the [`@refinedev/antd`](https://github.com/refinedev/refine/tree/next/packages/antd) package. This means that you can use all the features of [`useTable`][usetable] hook. ::: ## Basic Usage -Here is an example of how to use `useEditableTable` hook. We will explain in detail the usage of the hook in the following sections: +Here is an example of how to use `useEditableTable` hook. We will explain the details of this example and hooks usage in the following sections. @@ -232,7 +232,8 @@ With this, when a user clicks on the edit button, `isEditing(lineId)` will turn :::tip By giving the `` component a unique `render` property, you can render the value in that column however you want. -Refer to [``][table.column] documentation for more information. + +For more information, refer to the [`` documentation →][table.column] ::: ### Editing by clicking to row @@ -298,15 +299,14 @@ export const PostList: React.FC = () => { ## Properties :::tip - All `useForm` and [`useTable`][usetable] properties are available in `useEditableTable`. You can read the documentation of [`useForm`][useform] and [`useTable`][usetable] for more information. +::: ### `autoSubmitClose` -> Default: `true` +`autoSubmitClose` makes the table's row close after a succecful submit. It is `true` by default. -When `true`, table's row will be closed after successful submit. -To do that, `useEditableTable` automatically calls `setId` function with `undefined` after successful submit. +For this effect, `useEditableTable` automatically calls the `setId` function with `undefined` after successful submit. ```tsx const editableTable = useEditableTable({ @@ -314,8 +314,6 @@ const editableTable = useEditableTable({ }); ``` -::: - ## Return Values :::tip @@ -326,9 +324,9 @@ All `useForm` and [`useTable`][usetable] return values are available in `useEdit ### `cancelButtonProps` -Returns the props for needed by the ``. +`cancelButtonProps` returns the props for needed by the ``. -By default, `onClick` function is overridden by `useEditableTable`. When is triggered it will call `useForm's` `setId` function with `undefined`. +By default, the `onClick` function is overridden by `useEditableTable`. Which will call `useForm's` `setId` function with `undefined` when called. ```tsx cancelButtonProps: () => ButtonProps; @@ -336,15 +334,15 @@ cancelButtonProps: () => ButtonProps; ### `editButtonProps` -Takes `id` as a parameter and returns the props needed by the ``. +`editButtonProps` takes `id` as a parameter and returns the props needed by the ``. -By default, `onClick` function is overridden by `useEditableTable`. When is triggered it will call `useForm's` `setId` function with the given `id`. +By default, the `onClick` function is overridden by `useEditableTable`. Which will call `useForm's` `setId` function with the given `id` when called. ```tsx editButtonProps: (id: BaseKey) => ButtonProps; ``` -Returns a function that takes an `id` as a parameter and returns the props for the edit button. +It also returns a function that takes an `id` as a parameter and returns the props for the edit button. ### `isEditing` diff --git a/documentation/docs/api-reference/antd/hooks/table/useTable.md b/documentation/docs/api-reference/antd/hooks/table/useTable.md index 0c8da6cb2f0c..16b78829bd38 100644 --- a/documentation/docs/api-reference/antd/hooks/table/useTable.md +++ b/documentation/docs/api-reference/antd/hooks/table/useTable.md @@ -27,11 +27,11 @@ In basic usage, `useTable` returns the data as it comes from the endpoint. By de ## Pagination -This feature comes out of the box with the `tableProps.pagination`. It generates the pagination links for the `
` component instead of react state and overrides `
`'s `pagination.itemRender` value. It also syncs the pagination state with the URL. +This feature comes out of the box with the `tableProps.pagination`. It generates the pagination links for the `
` component instead of react state and overrides `
`'s `pagination.itemRender` value. It also syncs the pagination state with the URL if you enable the [`syncWithLocation`](#syncwithlocation). -If you want to make a change in the pagination of the `
`. You should pass the pagination object of the `tableProps` to the pagination property of the `
` as below. You can override the values of the pagination object as your need. +If you want to make a change in the pagination of the `
`. You should pass the pagination object of the `tableProps` to the pagination property of the `
` as below. You can override the values of the pagination object depending on your needs. ```tsx const { tableProps } = useTable(); @@ -139,17 +139,19 @@ const { tableProps, sorters, filters } = useTable({ ## Search -We can use [`onSearch`](#onsearch) and [`searchFormProps`](#searchformprops) properties to make custom filter form. `onSearch` is a function that is called when the form is submitted. `searchFormProps` is a property that is passed to the [``](https://ant.design/components/form) component. +We can use the [`onSearch`](#onsearch) and [`searchFormProps`](#searchformprops) properties to make custom filter form. `onSearch` is a function that is called when the form is submitted. `searchFormProps` is a property that is passed to the [``](https://ant.design/components/form) component. ## Realtime Updates -> This feature is only available if you use a [Live Provider](/docs/api-reference/core/providers/live-provider). +:::caution +This feature is only available if you use a [Live Provider](/docs/api-reference/core/providers/live-provider). +::: When the `useTable` hook is mounted, it will call the `subscribe` method from the `liveProvider` with some parameters such as `channel`, `resource` etc. It is useful when you want to subscribe to live updates. -[Refer to the `liveProvider` documentation for more information →](/docs/api-reference/core/providers/live-provider) +> For more information, refer to the [`liveProvider` documentation →](/docs/api-reference/core/providers/live-provider) ## Properties @@ -174,7 +176,7 @@ useTable({ If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -> For more information, refer to the [`identifier` of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) ### `onSearch` @@ -225,9 +227,7 @@ useTable({ ### `pagination.current` -> Default: `1` - -Sets the initial value of the page index. +Sets the initial value of the page index. It is set to `1` by default. ```tsx useTable({ @@ -239,9 +239,7 @@ useTable({ ### `pagination.pageSize` -> Default: `10` - -Sets the initial value of the page size. +Sets the initial value of the page size. It is set to `10` by default. ```tsx useTable({ @@ -253,9 +251,7 @@ useTable({ ### `pagination.mode` -> Default: `"server"` - -It can be `"off"`, `"server"` or `"client"`. +It can be `"off"`, `"server"` or `"client"`. It is set to `"server"` by default. - **"off":** Pagination is disabled. All records will be fetched. - **"client":** Pagination is done on the client side. All records will be fetched and then the records will be paginated on the client side. @@ -273,7 +269,7 @@ useTable({ Sets the initial value of the sorter. The `initial` is not permanent. It will be cleared when the user changes the sorter. If you want to set a permanent value, use the `sorters.permanent` prop. -[Refer to the `CrudSorting` interface for more information →](docs/api-reference/core/interfaceReferences#crudsorting) +> For more information, refer to the [`CrudSorting` interface documentation →](docs/api-reference/core/interfaceReferences#crudsorting) ```tsx useTable({ @@ -292,7 +288,7 @@ useTable({ Sets the permanent value of the sorter. The `permanent` is permanent and unchangeable. It will not be cleared when the user changes the sorter. If you want to set a temporary value, use the `sorters.initial` prop. -[Refer to the `CrudSorting` interface for more information →](docs/api-reference/core/interfaceReferences#crudsorting) +> For more information, refer to the [`CrudSorting` interface documentation →](docs/api-reference/core/interfaceReferences#crudsorting) ```tsx useTable({ @@ -309,9 +305,7 @@ useTable({ ### `sorters.mode` -> Default: `"server"` - -It can be `"off"`, or `"server"`. +It can be `"off"`, or `"server"`. It is `"server"` by default. - **"off":** `sorters` are not sent to the server. You can use the `sorters` value to sort the records on the client side. - **"server":**: Sorting is done on the server side. Records will be fetched by using the `sorters` value. @@ -328,7 +322,7 @@ useTable({ Sets the initial value of the filter. The `initial` is not permanent. It will be cleared when the user changes the filter. If you want to set a permanent value, use the `filters.permanent` prop. -[Refer to the `CrudFilters` interface for more information →](/docs/api-reference/core/interfaceReferences#crudfilters) +> For more information, refer to the [`CrudFilters` interface documentation →](/docs/api-reference/core/interfaceReferences#crudfilters) ```tsx useTable({ @@ -348,7 +342,7 @@ useTable({ Sets the permanent value of the filter. The `permanent` is permanent and unchangeable. It will not be cleared when the user changes the filter. If you want to set a temporary value, use the `filters.initial` prop. -[Refer to the `CrudFilters` interface for more information →](/docs/api-reference/core/interfaceReferences#crudfilters) +> For more information, refer to the [`CrudFilters` interface documentation →](/docs/api-reference/core/interfaceReferences#crudfilters) ```tsx useTable({ @@ -386,9 +380,7 @@ useTable({ ### `filters.mode` -> Default: `"server"` - -It can be `"off"` or `"server"`. +It can be `"off"` or `"server"`. It is `"server"` by default. - **"off":** `filters` are not sent to the server. You can use the `filters` value to filter the records on the client side. - **"server":**: Filters are done on the server side. Records will be fetched by using the `filters` value. @@ -403,9 +395,7 @@ useTable({ ### `syncWithLocation` -> Default: `false` - -When you use the syncWithLocation feature, the `useTable`'s state (e.g. sort order, filters, pagination) is automatically encoded in the query parameters of the URL, and when the URL changes, the `useTable` state is automatically updated to match. This makes it easy to share table state across different routes or pages, and to allow users to bookmark or share links to specific table views. +When you use the `syncWithLocation` feature, the `useTable`'s state (e.g. sort order, filters, pagination) is automatically encoded in the query parameters of the URL, and when the URL changes, the `useTable` state is automatically updated to match. This makes it easy to share table state across different routes or pages, and to allow users to bookmark or share links to specific table views. It is set to `false` by default. Also, you can set this value globally on [``][refine swl] component. @@ -417,7 +407,7 @@ useTable({ ### `queryOptions` -`useTable` uses [`useList`](/docs/api-reference/core/hooks/data/useList/) hook to fetch data. You can pass [`queryOptions`](https://tanstack.com/query/v4/docs/react/reference/useQuery). +`useTable` uses the [`useList`](/docs/api-reference/core/hooks/data/useList/) hook to fetch data. You can pass the [`queryOptions`](https://tanstack.com/query/v4/docs/react/reference/useQuery) to it like this: ```tsx useTable({ @@ -434,7 +424,7 @@ useTable({ - Customizing the data provider methods for specific use cases. - Generating GraphQL queries using plain JavaScript Objects (JSON). -[Refer to the `meta` section of the General Concepts documentation for more information →](/docs/api-reference/general-concepts/#meta) +> For more information, refer to the [`meta` section of the General Concepts documentation →](/docs/api-reference/general-concepts/#meta) In the following example, we pass the `headers` property in the `meta` object to the `create` method. With similar logic, you can pass any properties to specifically handle the data provider methods. @@ -477,7 +467,9 @@ const myDataProvider = { ### `successNotification` -> [`NotificationProvider`][notification-provider] is required for this prop to work. +:::caution +[`NotificationProvider`][notification-provider] is required for this prop to work. +::: After data is fetched successfully, `useTable` can call `open` function from [`NotificationProvider`][notification-provider] to show a success notification. With this prop, you can customize the success notification. @@ -495,7 +487,9 @@ useTable({ ### `errorNotification` -> [`NotificationProvider`][notification-provider] is required for this prop to work. +:::caution +[`NotificationProvider`][notification-provider] is required for this prop to work. +::: After data fetching is failed, `useTable` will call `open` function from [`NotificationProvider`][notification-provider] to show an error notification. With this prop, you can customize the error notification. @@ -513,10 +507,13 @@ useTable({ ### `liveMode` -> [`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +:::caution +[`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +::: + +`liveMode` determines whether to update data automatically ("auto") or not ("manual") if a related live event is received. It can be used to update and show data in Realtime throughout your app. -Determines whether to update data automatically ("auto") or not ("manual") if a related live event is received. It can be used to update and show data in Realtime throughout your app. -For more information about live mode, please check [Live / Realtime](/docs/api-reference/core/providers/live-provider/#livemode) page. +> For more information, refer to the [Live / Realtime documentation →](/docs/api-reference/core/providers/live-provider/#livemode) ```tsx useTable({ @@ -526,7 +523,9 @@ useTable({ ### `onLiveEvent` -> [`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +:::caution +[`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +::: The callback function is executed when new events from a subscription have arrived. @@ -540,14 +539,17 @@ useTable({ ### `liveParams` -> [`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +:::caution +[`LiveProvider`](/docs/api-reference/core/providers/live-provider/) is required for this prop to work. +::: Params to pass to liveProvider's [subscribe](/docs/api-reference/core/providers/live-provider/#subscribe) method. ### `overtimeOptions` -If you want loading overtime for the request, you can pass the `overtimeOptions` prop to the this hook. It is useful when you want to show a loading indicator when the request takes too long. -`interval` is the time interval in milliseconds. `onInterval` is the function that will be called on each interval. +If you want the loading overtime for the request, you can pass the `overtimeOptions` prop to the this hook. It is useful when you want to show a loading indicator when the request takes too long. + +`interval` is the time interval in milliseconds while `onInterval` is the function that will be called on each interval. Return `overtime` object from this hook. `elapsedTime` is the elapsed time in milliseconds. It becomes `undefined` when the request is completed. @@ -573,9 +575,7 @@ console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ... Use `pagination.current` instead. ::: -> Default: `1` - -Sets the initial value of the page index. +Sets the initial value of the page index. It is set to `1` by default. ```tsx useTable({ @@ -589,9 +589,7 @@ useTable({ Use `pagination.pageSize` instead. ::: -> Default: `10` - -Sets the initial value of the page size. +Sets the initial value of the page size. It is set to `10` by default. ```tsx useTable({ @@ -605,9 +603,7 @@ useTable({ Use `pagination.mode` instead. ::: -> Default: `true` - -Determines whether to use server-side pagination or not. +Determines whether to use server-side pagination or not. It is set to `true` by default. ```tsx useTable({ @@ -699,9 +695,7 @@ useTable({ Use `filters.defaultBehavior` instead. ::: -> Default: `merge` - -The filtering behavior can be set to either `"merge"` or `"replace"`. +The filtering behavior can be set to either `"merge"` or `"replace"`. It is set to `merge` by default. - When the filter behavior is set to `"merge"`, it will merge the new filter with the existing filters. This means that if the new filter has the same column as an existing filter, the new filter will replace the existing filter for that column. If the new filter has a different column than the existing filters, it will be added to the existing filters. @@ -719,13 +713,15 @@ useTable({ ### `tableProps` -The props needed by the [`
`][table] component. +`tableProps` are the props needed by the [`
`][table] component. #### `onChange` -The callback function is executed when a user interacts(filter, sort, etc.) with the table. +The `onChange` callback function is executed when a user interacts(filter, sort, etc.) with the table. -> 🚨 `useTable` handles sorting, filtering, and pagination with this function. If you override this function, you need to handle these operations manually. +:::caution +`useTable` handles sorting, filtering, and pagination with this function. If you override this function, you need to handle these operations manually. +::: ```tsx const { tableProps } = useTable() @@ -737,25 +733,23 @@ const { tableProps } = useTable() #### `dataSource` -Contains the data to be displayed in the table. Values fetched with [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. +`dataSource` contains the data to be displayed in the table. Values fetched with [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. #### `loading` -Indicates whether the data is being fetched. +`loading` indicates whether the data is being fetched. #### `pagination` -Returns pagination configuration values(pageSize, current, position, etc.). +`pagination` returns the pagination configuration values(pageSize, current, position, etc.). #### `scroll` -> Default: `{ x: true }` - -Whether the table can be scrollable. +`scroll` is for making the table scrollable or not. It is set to `{ x: true }` by default. ### `searchFormProps` -It returns [``](https://ant.design/components/form/) instance of Ant Design. When `searchFormProps.onFinish` is called, it will trigger [`onSearch`](#onsearch) function. +`searchFormProps` returns [``](https://ant.design/components/form/) instance of Ant Design. When `searchFormProps.onFinish` is called, it will trigger [`onSearch`](#onsearch) function. You can also use `searchFormProps.form.submit` to submit the form manually. It's useful when you want to create a filter form for your `
`. @@ -809,15 +803,15 @@ const PostList: React.FC = () => { ### `tableQueryResult` -Returned values from [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. +`tableQueryResult` are the returned values from [`useList`](/docs/api-reference/core/hooks/data/useList/) hook. ### `sorters` -Current [sorters state][crudsorting]. +`sorters` is the current [sorters state][crudsorting]. ### `setSorters` -A function to set current [sorters state][crudsorting]. +`setSorters` is a function to set current [sorters state][crudsorting]. ```tsx (sorters: CrudSorting) => void; @@ -825,7 +819,7 @@ A function to set current [sorters state][crudsorting]. ### `filters` -Current [filters state][crudfilters]. +`filters` is the current [filters state][crudfilters]. ### `setFilters` @@ -833,11 +827,11 @@ Current [filters state][crudfilters]. ((filters: CrudFilters, behavior?: SetFilterBehavior) => void) & ((setter: (prevFilters: CrudFilters) => CrudFilters) => void) ``` -A function to set current [filters state][crudfilters]. +`setFilters` is a function to set current [filters state][crudfilters]. ### `current` -Current page index state. If pagination is disabled, it will be `undefined`. +`current` is the current page index state. If pagination is disabled, it will be `undefined`. ### `setCurrent` @@ -845,11 +839,11 @@ Current page index state. If pagination is disabled, it will be `undefined`. React.Dispatch> | undefined; ``` -A function to set the current page index state. If pagination is disabled, it will be `undefined`. +`setCurrent` is a function to set the current page index state. If pagination is disabled, it will be `undefined`. ### `pageSize` -Current page size state. If pagination is disabled, it will be `undefined`. +`pageSize` is the current page size state. If pagination is disabled, it will be `undefined`. ### `setPageSize` @@ -857,11 +851,11 @@ Current page size state. If pagination is disabled, it will be `undefined`. React.Dispatch> | undefined; ``` -A function to set the current page size state. If pagination is disabled, it will be `undefined`. +`setPageSize` is a function to set the current page size state. If pagination is disabled, it will be `undefined`. ### `pageCount` -Total page count state. If pagination is disabled, it will be `undefined`. +`pageCount` is the total page count state. If pagination is disabled, it will be `undefined`. ### `createLinkForSyncWithLocation` @@ -869,7 +863,7 @@ Total page count state. If pagination is disabled, it will be `undefined`. (params: SyncWithLocationParams) => string; ``` -A function creates accessible links for `syncWithLocation`. It takes an [SyncWithLocationParams][syncwithlocationparams] as parameters. +`createLinkForSyncWithLocation` is a function creates accessible links for `syncWithLocation`. It takes an [SyncWithLocationParams][syncwithlocationparams] as parameters. ### `overtime` @@ -886,7 +880,7 @@ console.log(overtime.elapsedTime); // undefined, 1000, 2000, 3000 4000, ... Use `sorters` instead. ::: -Current [sorters state][crudsorting]. +`sorter` is the current [sorters state][crudsorting]. ### ~~`setSorter`~~ @@ -894,7 +888,7 @@ Current [sorters state][crudsorting]. Use `setSorters` instead. ::: -A function to set current [sorters state][crudsorting]. +`setSorter` is a function to set the current [sorters state][crudsorting]. ```tsx (sorters: CrudSorting) => void; @@ -904,7 +898,7 @@ A function to set current [sorters state][crudsorting]. ### How can I handle relational data? -You can use [`useMany`](/docs/api-reference/core/hooks/data/useMany/) hook to fetch relational data and filter `
` by categories with help of [`useSelect`](http://localhost:3000/docs/api-reference/antd/hooks/field/useSelect/) +You can use the [`useMany`](/docs/api-reference/core/hooks/data/useMany/) hook to fetch relational data and filter `
` by categories with the help of [`useSelect`](http://localhost:3000/docs/api-reference/antd/hooks/field/useSelect/) diff --git a/documentation/docs/api-reference/antd/hooks/ui/useModal.md b/documentation/docs/api-reference/antd/hooks/ui/useModal.md index 41706efb75ed..0c4ac4529585 100644 --- a/documentation/docs/api-reference/antd/hooks/ui/useModal.md +++ b/documentation/docs/api-reference/antd/hooks/ui/useModal.md @@ -40,7 +40,7 @@ export const PostList: React.FC = () => {
-Here, we show a button somewhere on the page and use `show` on it's onClick callback to trigger opening of the ``. When the user clicks on the button, the `` appears. +Here, we show a button somewhere on the page and use `show` on it's `onClick` callback to trigger opening of the ``. When the user clicks on the button, the `` appears. ## API Reference @@ -55,5 +55,3 @@ Here, we show a button somewhere on the page and use `show` on it's onClick call | show | Returns the visibility state of the Modal | `() => void` | | close | A function that can open the modal | `() => void` | | modalProps | Specify a function that can close the modal | `() => void` | - -[modal]: https://ant.design/components/modal/#API diff --git a/documentation/docs/api-reference/antd/migration-guide/v4-to-v5.md b/documentation/docs/api-reference/antd/migration-guide/v4-to-v5.md index 1c0842e462f7..bd9a3eef90f0 100644 --- a/documentation/docs/api-reference/antd/migration-guide/v4-to-v5.md +++ b/documentation/docs/api-reference/antd/migration-guide/v4-to-v5.md @@ -3,11 +3,11 @@ id: v4-to-v5 title: Migration Guide --- -Ant Design released a new major version as a v5. This document will help you upgrade from antd 4.x version to antd 5.x version. +Ant Design released a new major version, v5. This document will help you upgrade from antd 4.x version to antd 5.x version. Ant Design removed `less` and adopted `CSS-in-JS` for better support of dynamic themes. So now, the bottom layer uses [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs) instead of `less` as a solution. -Some components are removed or renamed, and some APIs are changed. +Some components were removed or renamed, and some APIs are changed. Some of the changes are: @@ -16,7 +16,7 @@ Some of the changes are: - `moment.js` is replaced with `day.js`. - `less` is removed from `antd` package. -> For more information, please refer to [Ant Design Migration Guide](https://ant.design/docs/react/migration-v5). +> For more information, please refer to [Ant Design's own migration guide](https://ant.design/docs/react/migration-v5). :::info A little more clarification @@ -40,7 +40,7 @@ values={[ -⚡️ You can easily update **refine** packages with **refine** CLI [`update`](https://refine.dev/docs/packages/documentation/cli/#update) command. +⚡️ You can easily update **refine** packages with the **refine** CLI [`update`](https://refine.dev/docs/packages/documentation/cli/#update) command. ```bash npm run refine update From 7464c774e223fcba192299baab2ff8859cb6b441 Mon Sep 17 00:00:00 2001 From: Doguhan Ozgur Akca Date: Mon, 31 Jul 2023 12:56:13 +0300 Subject: [PATCH 2/4] docs: all api files except mui --- .../docs/api-reference/antd/theming.md | 14 ++- .../chakra-ui/components/auth-page.md | 15 +-- .../components/auto-save-indicator.md | 2 +- .../components/basic-views/create.md | 39 +++--- .../chakra-ui/components/basic-views/edit.md | 52 ++++---- .../chakra-ui/components/basic-views/list.md | 24 ++-- .../chakra-ui/components/basic-views/show.md | 40 +++---- .../chakra-ui/components/breadcrumb.md | 6 +- .../chakra-ui/components/buttons/clone.md | 10 +- .../chakra-ui/components/buttons/create.md | 10 +- .../chakra-ui/components/buttons/delete.md | 14 +-- .../chakra-ui/components/buttons/edit.md | 2 +- .../chakra-ui/components/buttons/export.md | 4 +- .../chakra-ui/components/buttons/import.md | 4 +- .../chakra-ui/components/buttons/list.md | 6 +- .../chakra-ui/components/buttons/refresh.md | 4 +- .../chakra-ui/components/buttons/save.md | 4 +- .../chakra-ui/components/buttons/show.md | 4 +- .../chakra-ui/components/fields/date.md | 2 +- .../chakra-ui/components/fields/email.md | 2 +- .../chakra-ui/components/fields/number.md | 2 +- .../chakra-ui/components/fields/tag.md | 4 +- .../chakra-ui/components/fields/text.md | 4 +- .../chakra-ui/components/fields/url.md | 4 +- .../chakra-ui/components/inferencer.md | 15 ++- .../chakra-ui/components/themed-layout.md | 33 +++--- .../docs/api-reference/chakra-ui/theming.md | 17 ++- .../mantine/components/auth-page.md | 17 ++- .../mantine/components/auto-save-indicator.md | 2 +- .../mantine/components/basic-views/create.md | 39 +++--- .../mantine/components/basic-views/edit.md | 54 ++++----- .../mantine/components/basic-views/list.md | 28 ++--- .../mantine/components/basic-views/show.md | 40 +++---- .../mantine/components/breadcrumb.md | 5 +- .../mantine/components/buttons/clone.md | 6 +- .../mantine/components/buttons/create.md | 10 +- .../mantine/components/buttons/delete.md | 14 +-- .../mantine/components/buttons/edit.md | 6 +- .../mantine/components/buttons/export.md | 2 +- .../mantine/components/buttons/import.md | 4 +- .../mantine/components/buttons/list.md | 8 +- .../mantine/components/buttons/refresh.md | 8 +- .../mantine/components/buttons/save.md | 4 +- .../mantine/components/buttons/show.md | 10 +- .../mantine/components/inferencer.md | 12 +- .../mantine/components/themed-layout.md | 19 +-- .../mantine/hooks/form/useDrawerForm.md | 54 ++++----- .../mantine/hooks/form/useForm.md | 112 ++++++++++-------- .../mantine/hooks/form/useModalForm.md | 44 ++++--- .../mantine/hooks/form/useStepsForm.md | 15 +-- .../mantine/hooks/useSelect/index.md | 65 ++++++---- .../docs/api-reference/mantine/theming.md | 13 +- 52 files changed, 468 insertions(+), 460 deletions(-) diff --git a/documentation/docs/api-reference/antd/theming.md b/documentation/docs/api-reference/antd/theming.md index 2df1371738b6..e7cacb053e73 100644 --- a/documentation/docs/api-reference/antd/theming.md +++ b/documentation/docs/api-reference/antd/theming.md @@ -38,17 +38,17 @@ const App: React.FC = () => { :::info -If you want to see how themes change the look of the application, check out this [example.](/docs/examples/themes/refine-themes-antd/) +If you want to see how themes change the look of the application, check out this [example →](/docs/examples/themes/refine-themes-antd/) ::: ## Theme customization -The [``](https://ant.design/components/config-provider/#components-config-provider-demo-theme) component can be used to change the theme. It is not required if you decide to use the default theme. You can also use `RefineThemes` provided by **refine**. +You can use either the [``](https://ant.design/components/config-provider/#components-config-provider-demo-theme) component or the `RefineThemes` provided by **refine** to change the theme. This is not required if you decide to use the default theme. ### Overriding the themes -You can override or extend the default themes, or create your own themes. Here is how you create your own: +You can not only override or extend the default themes, but also create your own, just like this: ```tsx import { Refine } from "@refinedev/core"; @@ -90,13 +90,15 @@ const App: React.FC = () => { ### Use Preset Algorithms -Themes with different styles can be quickly generated by modifying the algorithm. Ant Design 5.0 provides three sets of [preset algorithms by default](https://ant.design/docs/react/customize-theme#theme-presets), which are the default algorithm: `theme.defaultAlgorithm`, the dark algorithm: `theme.darkAlgorithm` and the compact algorithm: `theme.compactAlgorithm`. You can switch between algorithms by modifying the algorithm property of theme in [``](https://ant.design/components/config-provider/#components-config-provider-demo-theme). +Themes with different styles can be quickly generated by modifying the algorithm. Ant Design 5.0 provides three sets of [preset algorithms by default](https://ant.design/docs/react/customize-theme#theme-presets): the default algorithm `theme.defaultAlgorithm`, the dark algorithm `theme.darkAlgorithm` and the compact algorithm `theme.compactAlgorithm`. + +You can switch between algorithms by modifying the algorithm property of theme in [``](https://ant.design/components/config-provider/#components-config-provider-demo-theme). > For more information, refer to the [Ant Design documentation on customizing themes→](https://ant.design/docs/react/customize-theme#use-preset-algorithms) #### Switching to dark theme -Let's start with adding a switch to the `Header` component. +Let's start with adding a switch to the `Header` component: ```tsx import { Space, Button } from "antd"; @@ -126,7 +128,7 @@ const Header: FC = (props) => { }; ``` -Then, we can use the `theme` property of the `ConfigProvider` component to switch between light and dark themes. +Then, we can use the `theme` property of the `ConfigProvider` component to switch between light and dark themes: ```tsx import { Refine } from "@refinedev/core"; diff --git a/documentation/docs/api-reference/chakra-ui/components/auth-page.md b/documentation/docs/api-reference/chakra-ui/components/auth-page.md index e06457cecff1..05cc1fe26a4b 100644 --- a/documentation/docs/api-reference/chakra-ui/components/auth-page.md +++ b/documentation/docs/api-reference/chakra-ui/components/auth-page.md @@ -9,7 +9,7 @@ source: packages/chakra-ui/src/components/pages/auth/index.tsx `` component from **refine** for **Chakra UI** contains authentication pages that can be used to login, register, forgot password and update password. -Before using `` component you need to add [authProvider](/api-reference/core/providers/auth-provider.md) that will be used to handle authentication. +Before using the `` component you need to add [authProvider](/api-reference/core/providers/auth-provider.md) that will be used to handle authentication. :::info-tip Swizzle You can swizzle this component to customize it with the [**refine CLI**](/docs/packages/documentation/cli) @@ -128,7 +128,7 @@ const GithubIcon = ( ## Usage -`` component can be used like this: +The `` component can be used like this: ```tsx live url=http://localhost:3000/login previewHeight=600px setInitialRoutes(["/login"]); @@ -762,7 +762,7 @@ const MyLoginPage = () => { ### `wrapperProps` -`wrapperProps` uses for passing props to the wrapper component. In the example below you can see that the background color is changed with `wrapperProps` +`wrapperProps` is used for passing props to the wrapper component. In the example below you can see that the background color is changed with `wrapperProps` ```tsx const MyLoginPage = () => { @@ -780,7 +780,7 @@ const MyLoginPage = () => { ### `contentProps` -`contentProps` uses for passing props to the content component which is the card component. In the example below you can see that the title, header and content styles are changed with `contentProps`. +`contentProps` is used for passing props to the content component which is the card component. In the example below you can see that the title, header and content styles are changed with `contentProps`. ```tsx const MyLoginPage = () => { @@ -798,7 +798,7 @@ const MyLoginPage = () => { ### `formProps` -`formProps` uses for passing props to the form component. In the example below you can see that the `initialValues` are changed with `formProps` and also the `onSubmit` function is changed. +`formProps` is used for passing props to the form component. In the example below you can see that the `initialValues` are changed with `formProps` and also the `onSubmit` function is changed. ```tsx const MyLoginPage = () => { @@ -867,7 +867,7 @@ const MyLoginPage = () => { ### `renderContent` -`renderContent` uses to render the form content and [title](#title). You can use this property to render your own content or `renderContent` gives you default content and title you can use to add some extra elements to the content. +`renderContent` is used to render the form content and [title](#title). You can use this property to render your own content or `renderContent` gives you default content and title you can use to add some extra elements to the content. ```tsx import { Box, Heading } from "@chakra-ui/react"; @@ -945,6 +945,3 @@ interface FormPropsType extends UseFormProps { [register]: /docs/api-reference/core/providers/auth-provider/#register [forgot-password]: /docs/api-reference/core/providers/auth-provider/#forgotpassword [update-password]: /docs/api-reference/core/providers/auth-provider/#updatepassword -[get-permissions]: /docs/api-reference/core/providers/auth-provider/#getpermissions- -[check-auth]: /docs/api-reference/core/providers/auth-provider/#check- -[logout]: /docs/api-reference/core/providers/auth-provider/#logout- diff --git a/documentation/docs/api-reference/chakra-ui/components/auto-save-indicator.md b/documentation/docs/api-reference/chakra-ui/components/auto-save-indicator.md index ad5f43879a6d..5a558b818f5c 100644 --- a/documentation/docs/api-reference/chakra-ui/components/auto-save-indicator.md +++ b/documentation/docs/api-reference/chakra-ui/components/auto-save-indicator.md @@ -6,7 +6,7 @@ description: component shows `autoSave` status on edit actio source: packages/chakra-ui/src/components/autoSaveIndicator/index.tsx --- -`` component from **refine** for **Chakra UI** can be used to communicate auto-save status to the user. +`` component from **refine** for **Chakra UI** can be used to communicate auto-save status to the user. Simple usage is as follows: diff --git a/documentation/docs/api-reference/chakra-ui/components/basic-views/create.md b/documentation/docs/api-reference/chakra-ui/components/basic-views/create.md index 648580e9edde..128f80819a0f 100644 --- a/documentation/docs/api-reference/chakra-ui/components/basic-views/create.md +++ b/documentation/docs/api-reference/chakra-ui/components/basic-views/create.md @@ -41,9 +41,9 @@ interface IPost { } ``` -`` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page. +`` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like action buttons and being able to give titles to the page. -We'll show what `` does using properties with examples. +We will show what `` does using properties with examples. ```tsx live url=http://localhost:3000/posts/create previewHeight=420px hideCode setInitialRoutes(["/posts/create"]); @@ -149,14 +149,14 @@ render( ``` :::info-tip Swizzle -You can swizzle this component to customize it with the [**refine CLI**](/docs/packages/documentation/cli) +You can swizzle this component with the [**refine CLI**](/docs/packages/documentation/cli) to customize it. ::: ## Properties ### `title` -It allows adding title inside the `` component. if you don't pass title props it uses "Create" prefix and singular resource name by default. For example, for the `/posts/create` resource, it will be "Create post". +`title` allows the addition of titles inside the `` component by passing title props. If you don't pass title props, however, it uses the "Create" prefix and the singular resource name by default. For example, for the `/posts/create` resource, it would be "Create post". ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); @@ -199,9 +199,7 @@ render( ### `saveButtonProps` -`` component has a default button that submits the form. If you want to customize this button you can use the `saveButtonProps` property like the code below. - -[Refer to the `` documentation for detailed usage. →](/api-reference/chakra-ui/components/buttons/save.md) +`saveButtonProps` can be used to customize the default button of the `` component that submits the form: ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); @@ -241,6 +239,8 @@ render( ); ``` +> For more information, refer to the [`` documentation →](/api-reference/chakra-ui/components/buttons/save.md) + ### `resource` The `` component reads the `resource` information from the route by default. If you want to use a custom resource for the `` component, you can use the `resource` prop. @@ -295,7 +295,7 @@ render( If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -> For more information, refer to the [`identifier` of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) ### `goBack` @@ -387,8 +387,6 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. -[Refer to the `Breadcrumb` documentation for detailed usage. →](/api-reference/chakra-ui/components/breadcrumb.md) - :::tip This feature can be managed globally via the `` component's [options](/docs/api-reference/core/components/refine-config/#breadcrumb) ::: @@ -439,11 +437,12 @@ render( ); ``` +> For more information, refer to the [`Breadcrumb` documentation →](/api-reference/chakra-ui/components/breadcrumb.md) + ### `wrapperProps` If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is ``s and `wrapperProps` can get every attribute that `` can get. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); @@ -490,12 +489,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerProps` If you want to customize the header of the `` component, you can use the `headerProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); import { Refine } from "@refinedev/core"; @@ -541,12 +540,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `contentProps` If you want to customize the content of the `` component, you can use the `contentProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/create previewHeight=320px setInitialRoutes(["/posts/create"]); import { Refine } from "@refinedev/core"; @@ -592,6 +591,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerButtons` You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. @@ -654,8 +655,6 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); import { Refine } from "@refinedev/core"; @@ -703,6 +702,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `footerButtons` By default, the `` component has a [``][save-button] at the header. @@ -823,8 +824,6 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/create previewHeight=280px setInitialRoutes(["/posts/create"]); import { Refine } from "@refinedev/core"; @@ -872,6 +871,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ## API Reference ### Props diff --git a/documentation/docs/api-reference/chakra-ui/components/basic-views/edit.md b/documentation/docs/api-reference/chakra-ui/components/basic-views/edit.md index 68f2b6c4360c..a11dbe65b97e 100644 --- a/documentation/docs/api-reference/chakra-ui/components/basic-views/edit.md +++ b/documentation/docs/api-reference/chakra-ui/components/basic-views/edit.md @@ -43,7 +43,7 @@ interface IPost { } ``` -`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button. +`` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button. We will show what `` does using properties with examples. @@ -169,7 +169,7 @@ You can swizzle this component to customize it with the [**refine CLI**](/docs/p ### `title` -It allows adding titles inside the `` component. if you don't pass title props it uses the "Edit" prefix and singular resource name by default. For example, for the "posts" resource, it will be "Edit post". +`title` allows the addition of titles inside the `` component. if you don't pass title props it uses the "Edit" prefix and singular resource name by default. For example, for the "posts" resource, it would be "Edit post". ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); @@ -214,11 +214,7 @@ render( ### `saveButtonProps` -The `` component has a save button by default. If you want to customize this button you can use the `saveButtonProps` property like the code below. - -Clicking on the save button will submit your form. - -[Refer to the `` documentation for detailed usage. →](/api-reference/chakra-ui/components/buttons/save.md) +`saveButtonProps` can be used to customize the default button of the `` component that submits the form: ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); @@ -260,13 +256,13 @@ render( ); ``` -### `canDelete` and `deleteButtonProps` +> For more information, refer to the [`` documentation →](/api-reference/chakra-ui/components/buttons/save.md) -`canDelete` allows us to add the delete button inside the `` component. If the resource has the `canDelete` property,refine adds the delete button by default. If you want to customize this button you can use the `deleteButtonProps` property like the code below. +### `canDelete` and `deleteButtonProps` -When clicked on, the delete button executes the `useDelete` method provided by the `dataProvider`. +`canDelete` allows us to add the delete button inside the `` component that executes the `useDelete` method provided by the `dataProvider` when clicked on. -[Refer to the `` documentation for detailed usage. →](/api-reference/chakra-ui/components/buttons/delete.md) +If the resource has the `canDelete` property, **refine** adds the delete button by default. If you want to customize this button, you can use the `deleteButtonProps` property like the code below. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); @@ -367,7 +363,7 @@ render( ); ``` -[Refer to the `usePermission` documentation for detailed usage. →](/api-reference/core/hooks/authentication/usePermissions.md) +> For more information, refer to the [`` →](/api-reference/chakra-ui/components/buttons/delete.md) and [`usePermission` →](/api-reference/core/hooks/authentication/usePermissions.md) documentations ### `resource` @@ -423,7 +419,7 @@ render( If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -> For more information, refer to the [`identifier` of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) ### `recordItemId` @@ -512,9 +508,7 @@ The `` component needs the `id` information for the `` to w ### `mutationMode` -Determines which mode mutation will have while executing ``. - -[Refer to the mutation mode docs for further information. →](/advanced-tutorials/mutation-mode.md) +`mutationMode` determines which mode the mutation will have while executing ``. ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); @@ -588,7 +582,7 @@ render( ### `dataProviderName` -If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property. +If not specified, **refine** will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property. ```tsx import { Refine } from "@refinedev/core"; @@ -713,8 +707,6 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. -[Refer to the `Breadcrumb` documentation for detailed usage. →](/api-reference/chakra-ui/components/breadcrumb.md) - :::tip This feature can be managed globally via the `` component's [options](/docs/api-reference/core/components/refine-config/#breadcrumb) ::: @@ -768,12 +760,12 @@ render( ); ``` +> For more information, refer to the [`Breadcrumb` documentation →](/api-reference/chakra-ui/components/breadcrumb.md) + ### `wrapperProps` If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is ``s and `wrapperProps` can get every attribute that `` can get. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); import { Refine } from "@refinedev/core"; @@ -823,11 +815,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerProps` If you want to customize the header of the `` component, you can use the `headerProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); @@ -877,11 +870,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `contentProps` If you want to customize the content of the `` component, you can use the `contentProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); @@ -932,6 +926,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerButtons` By default, the `` component has a [``][list-button] and a [``][refresh-button] at the header. @@ -940,7 +936,7 @@ You can customize the buttons at the header by using the `headerButtons` propert :::caution -If "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. +If the "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. ::: @@ -1059,8 +1055,6 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); import { Refine } from "@refinedev/core"; @@ -1116,6 +1110,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `footerButtons` By default, the `` component has a [``][save-button] and a [``][delete-button] at the footer. @@ -1251,8 +1247,6 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -[Refer to the `Space` documentation from Ant Design for detailed usage. →](https://ant.design/components/space/) - ```tsx live url=http://localhost:3000/posts/edit/123 previewHeight=280px setInitialRoutes(["/posts/edit/123"]); import { Refine } from "@refinedev/core"; @@ -1303,6 +1297,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `autoSaveProps` You can use the auto save feature of the `` component by using the `autoSaveProps` property. diff --git a/documentation/docs/api-reference/chakra-ui/components/basic-views/list.md b/documentation/docs/api-reference/chakra-ui/components/basic-views/list.md index 8c8cce06d1d3..1dcc4baff396 100644 --- a/documentation/docs/api-reference/chakra-ui/components/basic-views/list.md +++ b/documentation/docs/api-reference/chakra-ui/components/basic-views/list.md @@ -34,7 +34,7 @@ interface IPost { } ``` -`` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like a create button or giving the page titles. +`` provides us a layout to display the page. It does not contain any logic and just adds extra functionalities like a create button or giving the page titles. We will show what `` does using properties with examples. @@ -267,7 +267,7 @@ render( If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -> For more information, refer to the [`identifier` of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) ### `canCreate` and `createButtonProps` @@ -376,8 +376,6 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. -[Refer to the `Breadcrumb` documentation for detailed usage. →](/api-reference/chakra-ui/components/breadcrumb.md) - :::tip This feature can be managed globally via the `` component's [options](/docs/api-reference/core/components/refine-config/#breadcrumb) ::: @@ -432,12 +430,12 @@ render( ); ``` +> For more information, refer to the [`Breadcrumb` documentation →](/api-reference/chakra-ui/components/breadcrumb.md) + ### `wrapperProps` If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is ``s and `wrapperProps` can get every attribute that `` can get. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); import { Refine } from "@refinedev/core"; @@ -484,12 +482,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerProps` If you want to customize the header of the `` component, you can use the `headerProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); import { Refine } from "@refinedev/core"; @@ -536,12 +534,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `contentProps` If you want to customize the content of the `` component, you can use the `contentProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); import { Refine } from "@refinedev/core"; @@ -588,6 +586,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerButtons` By default, the `` component has a [``][create-button] at the header. @@ -709,8 +709,6 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts previewHeight=280px setInitialRoutes(["/posts"]); import { Refine } from "@refinedev/core"; @@ -763,6 +761,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ## API Reference ### Props diff --git a/documentation/docs/api-reference/chakra-ui/components/basic-views/show.md b/documentation/docs/api-reference/chakra-ui/components/basic-views/show.md index b5075118e10f..fd757c0e4c28 100644 --- a/documentation/docs/api-reference/chakra-ui/components/basic-views/show.md +++ b/documentation/docs/api-reference/chakra-ui/components/basic-views/show.md @@ -43,7 +43,7 @@ interface IPost { } ``` -`` provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button or giving title to the page. +`` provides us a layout for displaying the page. It does not contain any logic and just adds extra functionalities like a refresh button or giving title to the page. We will show what `` does using properties with examples. @@ -128,14 +128,14 @@ render( ``` :::info-tip Swizzle -You can swizzle this component to customize it with the [**refine CLI**](/docs/packages/documentation/cli) +You can swizzle this component with the [**refine CLI**](/docs/packages/documentation/cli) to customize it. ::: ## Properties ### `title` -It allows adding a title for the `` component. if you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post". +`title` allows the addition of titles inside the `` component. If you don't pass title props it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post". ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=420px hideCode setInitialRoutes(["/posts/show/123"]); @@ -232,7 +232,7 @@ render( If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -> For more information, refer to the [`identifier` of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) ### `canDelete` and `canEdit` @@ -342,7 +342,7 @@ render( ); ``` -[Refer to the `usePermission` documentation for detailed usage. →](/api-reference/core/hooks/authentication/usePermissions.md) +> For more information, refer to the [`usePermission` documentation →](/api-reference/core/hooks/authentication/usePermissions.md) ### `recordItemId` @@ -424,7 +424,7 @@ The `` component needs the `id` information for the `` to w ### `dataProviderName` -If not specified, Refine will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property. +If not specified, **refine** will use the default data provider. If you have multiple data providers and want to use a different one, you can use the `dataProviderName` property. ```tsx import { Refine } from "@refinedev/core"; @@ -548,8 +548,6 @@ render( To customize or disable the breadcrumb, you can use the `breadcrumb` property. By default it uses the `Breadcrumb` component from `@refinedev/chakra-ui` package. -[Refer to the `Breadcrumb` documentation for detailed usage. →](/api-reference/chakra-ui/components/breadcrumb.md) - :::tip This feature can be managed globally via the `` component's [options](/docs/api-reference/core/components/refine-config/#breadcrumb) ::: @@ -606,12 +604,12 @@ render( ); ``` +> For more information, refer to the [`Breadcrumb` documentation →](/api-reference/chakra-ui/components/breadcrumb.md) + ### `wrapperProps` If you want to customize the wrapper of the `` component, you can use the `wrapperProps` property. For `@refinedev/chakra-ui` wrapper element is ``s and `wrapperProps` can get every attribute that `` can get. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); import { Refine } from "@refinedev/core"; @@ -660,12 +658,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI #8594](https://chakra-ui.com/docs/components/box/usage) + ### `headerProps` If you want to customize the header of the `` component, you can use the `headerProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); import { Refine } from "@refinedev/core"; @@ -713,12 +711,12 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `contentProps` If you want to customize the content of the `` component, you can use the `contentProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); import { Refine } from "@refinedev/core"; @@ -767,15 +765,17 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `headerButtons` -By default, the `` component has a [``][list-button], [``][edit-button], [``][delete-button], and, [``][refresh-button] at the header. +By default, the `` component has a [``][list-button], [``][edit-button], [``][delete-button], and a[``][refresh-button] at the header. You can customize the buttons at the header by using the `headerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons, deleteButtonProps, editButtonProps, listButtonProps, refreshButtonProps }) => React.ReactNode` which you can use to keep the existing buttons and add your own. :::caution -If "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. +If the "list" resource is not defined, the [``][list-button] will not render and `listButtonProps` will be `undefined`. If [`canDelete`](#candelete-and-canedit) is `false`, the [``][delete-button] will not render and `deleteButtonProps` will be `undefined`. @@ -919,8 +919,6 @@ render( You can customize the wrapper element of the buttons at the header by using the `headerButtonProps` property. -[Refer to the `Box` documentation from Chakra UI for detailed usage. →](https://chakra-ui.com/docs/components/box/usage) - ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); import { Refine } from "@refinedev/core"; @@ -975,6 +973,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ### `footerButtons` You can customize the buttons at the footer by using the `footerButtons` property. It accepts `React.ReactNode` or a render function `({ defaultButtons }) => React.ReactNode` which you can use to keep the existing buttons and add your own. @@ -1039,8 +1039,6 @@ render( You can customize the wrapper element of the buttons at the footer by using the `footerButtonProps` property. -[Refer to the `Space` documentation from Ant Design for detailed usage. →](https://ant.design/components/space/) - ```tsx live url=http://localhost:3000/posts/show/123 previewHeight=280px setInitialRoutes(["/posts/show/123"]); import { Refine } from "@refinedev/core"; @@ -1094,6 +1092,8 @@ render( ); ``` +> For more information, refer to the [`Box` documentation from Chakra UI →](https://chakra-ui.com/docs/components/box/usage) + ## API Reference ### Props diff --git a/documentation/docs/api-reference/chakra-ui/components/breadcrumb.md b/documentation/docs/api-reference/chakra-ui/components/breadcrumb.md index 5332e38df292..eed273cd7bae 100644 --- a/documentation/docs/api-reference/chakra-ui/components/breadcrumb.md +++ b/documentation/docs/api-reference/chakra-ui/components/breadcrumb.md @@ -5,15 +5,15 @@ sidebar_label: Breadcrumb swizzle: true --- -A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. `` component built with Chakra UI [Breadcrumb][chakra-ui-breadcrumb] components using the [`useBreadcrumb`](/api-reference/core/hooks/useBreadcrumb.md) hook. +A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. `` component was built with the Chakra UI [Breadcrumb][chakra-ui-breadcrumb] components using the [`useBreadcrumb`](/api-reference/core/hooks/useBreadcrumb.md) hook. :::info-tip Swizzle -You can swizzle this component to customize it with the [**refine CLI**](/docs/packages/documentation/cli) +You can swizzle this component with the [**refine CLI**](/docs/packages/documentation/cli) to customize it. ::: :::info Legacy Behavior (Dashboard Page) -In earlier versions of **refine**, `` component had accepted `DashboardPage` which could be used to add an index page to your app. With the changes in `routerProvider` API of **refine**, `DashboardPage` is deprecated. You can now define an index route yourself manually by your router package. +In the earlier versions of **refine**, `` component had accepted `DashboardPage` which could be used to add an index page to your app. With the changes in `routerProvider` API of **refine**, `DashboardPage` is deprecated. You can now define an index route yourself manually with your router package. In earlier versions, the home icon in the `Breadcrumb` was created by the `DashboardPage`, now it is rendered if you define a an action route as `/` in any one of your resources. It will be rendered with the home icon regardless of the current route. You can also hide the home icon by setting `showHome` to `false`. diff --git a/documentation/docs/api-reference/chakra-ui/components/buttons/clone.md b/documentation/docs/api-reference/chakra-ui/components/buttons/clone.md index c95d8ba77cac..05037b6aa6a9 100644 --- a/documentation/docs/api-reference/chakra-ui/components/buttons/clone.md +++ b/documentation/docs/api-reference/chakra-ui/components/buttons/clone.md @@ -237,7 +237,7 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/api-re ### `resource` -It is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path. +`resource` is used to redirect the app to the `clone` action of the given resource name. By default, the app redirects to the inferred resource's `clone` action path. ```tsx live url=http://localhost:3000 previewHeight=200px setInitialRoutes(["/"]); @@ -286,7 +286,7 @@ Clicking the button will trigger the `clone` method of [`useNavigation`](/api-re If you have multiple resources with the same name, you can pass the `identifier` instead of the `name` of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the `name` of the resource defined in the `` component. -> For more information, refer to the [`identifier` of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) +> For more information, refer to the [`identifier` section of the `` component documentation →](/docs/api-reference/core/components/refine-config#identifier) ### `meta` @@ -302,7 +302,7 @@ const MyComponent = () => { ### `hideText` -It is used to show and not show the text of the button. When `true`, only the button icon is visible. +`hideText` is used to show and not show the text of the button. When `true`, only the button icon is visible. ```tsx live url=http://localhost:3000 previewHeight=200px setInitialRoutes(["/"]); @@ -340,7 +340,7 @@ render( ### `accessControl` -This prop can be used to skip access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/api-reference/core/providers/accessControl-provider.md) is provided to [``](/api-reference/core/components/refine-config.md) +The `accessControl` prop can be used to skip the access control check with its `enabled` property or to hide the button when the user does not have the permission to access the resource with `hideIfUnauthorized` property. This is relevant only when an [`accessControlProvider`](/api-reference/core/providers/accessControl-provider.md) is provided to [``](/api-reference/core/components/refine-config.md) ```tsx import { CloneButton } from "@refinedev/chakra-ui"; @@ -358,7 +358,7 @@ export const MyListComponent = () => { > `resourceNameOrRouteName` prop is deprecated. Use `resource` prop instead. -It is used to redirect the app to the `/clone` endpoint of the given resource name. By default, the app redirects to a URL with `/clone` defined by the name property of the resource object. +`resourceNameOrRouteName` is used to redirect the app to the `/clone` endpoint of the given resource name. By default, the app redirects to a URL with `/clone` defined by the name property of the resource object. ```tsx live url=http://localhost:3000 previewHeight=200px setInitialRoutes(["/"]); diff --git a/documentation/docs/api-reference/chakra-ui/components/buttons/create.md b/documentation/docs/api-reference/chakra-ui/components/buttons/create.md index 979c54600f39..ed235ffb59d5 100644 --- a/documentation/docs/api-reference/chakra-ui/components/buttons/create.md +++ b/documentation/docs/api-reference/chakra-ui/components/buttons/create.md @@ -46,7 +46,7 @@ const CreatePage = () => { }; ``` -`` uses UI's [`