docs: add docs for built-in types

Author: pionxzh

docs/examples/JsonViewerCustomizeDate.tsx

@@ -0,0 +1,30 @@
+import { defineEasyType, JsonViewer } from '@textea/json-viewer'
+import type { FC } from 'react'
+
+import { useNextraTheme } from '../hooks/useTheme'
+
+const myDateType = defineEasyType<Date>({
+  is: (value) => value instanceof Date,
+  type: 'date',
+  colorKey: 'base0D',
+  Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}</>
+})
+
+const value = {
+  date: new Date('2023/04/12 12:34:56')
+}
+
+const Example: FC = () => {
+  const theme = useNextraTheme()
+  return (
+    <JsonViewer
+      rootName={false}
+      displaySize={false}
+      theme={theme}
+      value={value}
+      valueTypes={[myDateType]}
+    />
+  )
+}
+
+export default Example

docs/examples/JsonViewerToggleBoolean.tsx

@@ -0,0 +1,76 @@
+import type { JsonViewerOnChange } from '@textea/json-viewer'
+import { applyValue, booleanType, defineDataType, defineEasyType, JsonViewer } from '@textea/json-viewer'
+import type { FC } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+
+import { useNextraTheme } from '../hooks/useTheme'
+
+const value = {
+  agree: true,
+  disagree: false,
+  description: 'Click the ✔️ ❌ to toggle the boolean value'
+}
+
+export const JsonViewerToggleBoolean1: FC = () => {
+  const theme = useNextraTheme()
+  const [src, setSrc] = useState(value)
+  const onChange = useCallback<JsonViewerOnChange>(
+    (path, oldValue, newValue) => {
+      setSrc(src => applyValue(src, path, newValue))
+    }, [])
+
+  const toggleBoolType = useMemo(() => {
+    return defineDataType<boolean>({
+      ...booleanType,
+      Component: ({ value, path }) => (
+        <span onClick={() => onChange(path, value, !value)}>
+          {value ? '✔️' : '❌'}
+        </span>
+      )
+    })
+  }, [onChange])
+
+  return (
+    <JsonViewer
+      rootName={false}
+      displaySize={false}
+      theme={theme}
+      value={src}
+      onChange={onChange}
+      valueTypes={[toggleBoolType]}
+    />
+  )
+}
+
+export const JsonViewerToggleBoolean2: FC = () => {
+  const theme = useNextraTheme()
+  const [src, setSrc] = useState(value)
+  const onChange = useCallback<JsonViewerOnChange>(
+    (path, oldValue, newValue) => {
+      setSrc(src => applyValue(src, path, newValue))
+    }, [])
+
+  const toggleBoolType = useMemo(() => {
+    return defineEasyType<boolean>({
+      ...booleanType,
+      type: 'bool',
+      colorKey: 'base0E',
+      Renderer: ({ value, path }) => (
+        <span onClick={() => onChange(path, value, !value)}>
+          {value ? '✔️' : '❌'}
+        </span>
+      )
+    })
+  }, [onChange])
+
+  return (
+    <JsonViewer
+      rootName={false}
+      displaySize={false}
+      theme={theme}
+      value={src}
+      onChange={onChange}
+      valueTypes={[toggleBoolType]}
+    />
+  )
+}

docs/pages/how-to/_meta.json

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

docs/pages/how-to/built-in-types.mdx

@@ -0,0 +1,80 @@
+import { JsonViewerToggleBoolean1, JsonViewerToggleBoolean2 } from '../../examples/JsonViewerToggleBoolean'
+
+# Extend Built-in Data Types
+
+The following is a list of the built-in data types that can be extended:
+
+- `stringType`
+- `intType`
+- `floatType`
+- `booleanType`
+- `dateType`
+- `nanType`
+- `nullType`
+- `undefinedType`
+- `bigIntType`
+- `objectType`
+- `functionType`
+
+
+## Example
+
+### Displaying Boolean Values as Icons
+
+Suppose you want to display boolean values as icons (e.g., ✔️ or ❌) instead of the default `true` or `false`. There are two ways to accomplish this:
+
+1. Override the `Component` property of the built-in booleanType data type:
+
+
+<JsonViewerToggleBoolean1 />
+
+```tsx
+import { JsonViewer, defineDataType, booleanType } from '@textea/json-viewer'
+import { Button } from '@mui/material'
+
+const toggleBoolType = defineDataType<boolean>({
+  ...booleanType,
+  Component: ({ value }) => (
+    <span>{value ? '✔️' : '❌'}</span>
+  )
+})
+
+<JsonViewer
+  value={{
+    agree: true,
+    disagree: false,
+  }}
+  valueTypes={[toggleBoolType]}
+/>
+```
+[[Source Code]](https://github.com/TexteaInc/json-viewer/blob/main/docs/examples/JsonViewerToggleBoolean.tsx)
+
+2. Create a new data type with `defineEasyType`
+
+<JsonViewerToggleBoolean2 />
+
+```tsx
+import { defineEasyType, booleanType } from '@textea/json-viewer'
+
+const booleanType = defineEasyType<boolean>({
+  ...booleanType,
+  type: 'bool',
+  colorKey: 'base0E',
+  Renderer: ({ value }) => (
+    <span>{value ? '✔️' : '❌'}</span>
+  )
+})
+
+<JsonViewer
+  value={{
+    agree: true,
+    disagree: false,
+  }}
+  valueTypes={[toggleBoolType]}
+/>
+```
+[[Source Code]](https://github.com/TexteaInc/json-viewer/blob/main/docs/examples/JsonViewerToggleBoolean.tsx)
+
+Did you notice the difference between the two examples?
+
+`defineEasyType` is a helper function that creates data types with type labels and colors. So you only need to care about how the balue should be rendered. All other details will be automatically handled.