docs: rename data-type to data-types

Author: pionxzh

docs/pages/apis.mdx

@@ -10,7 +10,7 @@
 | `sx`                         | `SxProps`                                                                                               | -         | [The `sx` prop](https://mui.com/system/getting-started/the-sx-prop/) lets you style elements inline, using values from the theme.                                                    |
 | `indentWidth`                | `number`                                                                                                | 3         | Indent width for nested objects                                                                                                                                                      |
 | `keyRenderer`                | `{when: (props) => boolean}`                                                                            | -         | Customize a key, if `keyRenderer.when` returns `true`.                                                                                                                               |
-| `valueTypes`                 | `ValueTypes`                                                                                            | -         | Customize the definition of data types. See [Defining Data Types](/how-to/data-type)                                                                                                 |
+| `valueTypes`                 | `ValueTypes`                                                                                            | -         | Customize the definition of data types. See [Defining Data Types](/how-to/data-types)                                                                                                 |
 | `onChange`                   | `(path, oldVal, newVal) => void`                                                                        | -         | Callback when value changed.                                                                                                                                                         |
 | `onCopy`                     | `(path, value) => void`                                                                                 | -         | Callback when value copied, you can use it to customize the copy behavior.<br />\*Note: you will have to write the data to the clipboard by yourself.                                |
 | `onSelect`                   | `(path, value) => void`                                                                                 | -         | Callback when value selected.                                                                                                                                                        |

docs/pages/how-to/_meta.json

@@ -1,5 +1,5 @@
 {
-  "data-type": "Defining Data Types",
+  "data-types": "Defining Data Types",
   "built-in-types": "Extend Built-in Data Types",
   "styling": "Styling and Theming"
 }

docs/pages/how-to/data-type.mdx renamed to docs/pages/how-to/data-types.mdx

@@ -2,6 +2,7 @@ import { Tab, Tabs } from 'nextra-theme-docs'
 import JsonViewerWithURL from '../../examples/JsonViewerWithURL'
 import JsonViewerWithImage from '../../examples/JsonViewerWithImage'
 import JsonViewerWithWidget from '../../examples/JsonViewerWithWidget'
+import JsonViewerCustomizeDate from '../../examples/JsonViewerCustomizeDate'
 
 # Defining data types for any data
 
@@ -273,3 +274,37 @@ const linkType = defineDataType<string>({
 ```
   </Tab>
 </Tabs>
+
+### Customize the `Date` format
+
+By default, `Date` values are displayed using the `toLocaleString` method. You will learn how to create a custom data type for `Date` and display it in a different format. We will use the enhanced `defineEasyType` function to simplify the process.
+
+<Tabs items={['JS', 'TS']}>
+  <Tab>
+```jsx
+import { defineEasyType } from '@textea/json-viewer'
+
+const myDateType = defineEasyType({
+  is: (value) => value instanceof Date,
+  type: 'date',
+  colorKey: 'base0D',
+  Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}</>
+})
+```
+  </Tab>
+
+  <Tab>
+```tsx
+import { defineEasyType } from '@textea/json-viewer'
+
+const myDateType = defineEasyType<Date>({
+  is: (value) => value instanceof Date,
+  type: 'date',
+  colorKey: 'base0D',
+  Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}</>
+})
+```
+  </Tab>
+</Tabs>
+
+<JsonViewerCustomizeDate />

docs/pages/migration/migration-v3.mdx

@@ -25,7 +25,7 @@ npm install @mui/material @emotion/react @emotion/styled
 
 `serialize` and `deserialize` have been added to datatype to support editing feature on any data type.
 
-As the result, `createDataType` has been renamed to `defineDataType` and the signature has been changed to accept an object instead of a long list of arguments. For more information, please refer to [Defining data types](/data-type.mdx).
+As the result, `createDataType` has been renamed to `defineDataType` and the signature has been changed to accept an object instead of a long list of arguments. For more information, please refer to [Defining data types](/data-types.mdx).
 
 ```diff
 - createDataType(

src/type.ts

@@ -145,7 +145,7 @@ export type JsonViewerProps<T = unknown> = {
   /**
    * Customize the definition of data types.
    *
-   * @see https://viewer.textea.io/how-to/data-type
+   * @see https://viewer.textea.io/how-to/data-types
    */
   valueTypes?: DataType<any>[]
   /** Callback when value changed. */