docs: add detailed documents for usage and migration

Author: pionxzh

README.md

@@ -40,10 +40,6 @@ yarn add @textea/json-viewer
 pnpm add @textea/json-viewer
 ```
 
-### Type Declaration
-
-see [src/type.ts](src/type.ts)
-
 ### Basic Example
 
 ```jsx
@@ -70,11 +66,6 @@ const Component = () => (
     value={object}
     // just define it
     valueTypes={[
-      {
-        is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
-        Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
-      },
-      // or
       defineDataType({
         is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
         Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} />

docs/components/JsonViewerPreview.tsx

@@ -0,0 +1,18 @@
+import type { JsonViewerProps } from '@textea/json-viewer'
+import { JsonViewer } from '@textea/json-viewer'
+import type { FC } from 'react'
+
+import { useNextraTheme } from '../hooks/useTheme'
+
+export const JsonViewerPreview: FC<JsonViewerProps> = (props) => {
+  const theme = useNextraTheme()
+  return (
+    <JsonViewer
+      theme={theme}
+      sx={{
+        fontSize: 12
+      }}
+      value={props.value}
+    />
+  )
+}

docs/examples/JsonViewerPreview.tsx

@@ -0,0 +1,46 @@
+import { defineDataType, JsonViewer } from '@textea/json-viewer'
+import type { FC } from 'react'
+
+import { useNextraTheme } from '../hooks/useTheme'
+
+const imageType = defineDataType<string>({
+  is: (value) => {
+    if (typeof value !== 'string') return false
+    try {
+      const url = new URL(value)
+      return url.pathname.endsWith('.jpg')
+    } catch (_) {
+      return false
+    }
+  },
+  Component: (props) => {
+    return (
+      <img
+        height={48}
+        width={48}
+        src={props.value}
+        alt={props.value}
+        style={{ display: 'inline-block' }}
+      />
+    )
+  }
+})
+
+const value = {
+  image: 'https://i.imgur.com/1bX5QH6.jpg'
+}
+
+const Example: FC = () => {
+  const theme = useNextraTheme()
+  return (
+    <JsonViewer
+      rootName={false}
+      displaySize={false}
+      theme={theme}
+      value={value}
+      valueTypes={[imageType]}
+    />
+  )
+}
+
+export default Example

docs/examples/JsonViewerWithImage.tsx

@@ -0,0 +1,45 @@
+import { defineDataType, JsonViewer } from '@textea/json-viewer'
+import type { FC } from 'react'
+
+import { useNextraTheme } from '../hooks/useTheme'
+
+const urlType = defineDataType<URL>({
+  is: (value) => value instanceof URL,
+  Component: (props) => {
+    const url = props.value.toString()
+    return (
+      <a
+        href={url}
+        target='_blank'
+        rel='noopener noreferrer'
+        style={{
+          cursor: 'pointer',
+          color: '#1976d2',
+          textDecoration: 'underline'
+        }}
+      >
+        {url}
+      </a>
+    )
+  }
+})
+
+const value = {
+  string: 'this is a string',
+  url: new URL('https://example.com')
+}
+
+const Example: FC = () => {
+  const theme = useNextraTheme()
+  return (
+    <JsonViewer
+      rootName={false}
+      displaySize={false}
+      theme={theme}
+      value={value}
+      valueTypes={[urlType]}
+    />
+  )
+}
+
+export default Example

docs/examples/JsonViewerWithURL.tsx

@@ -0,0 +1,58 @@
+import type { SvgIconProps } from '@mui/material'
+import { Button, SvgIcon } from '@mui/material'
+import { defineDataType, JsonViewer, stringType } from '@textea/json-viewer'
+import type { FC } from 'react'
+
+import { useNextraTheme } from '../hooks/useTheme'
+
+const LinkIcon = (props: SvgIconProps) => (
+  // <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' strokeWidth='2' stroke='currentColor' fill='none' strokeLinecap='round' strokeLinejoin='round'>
+  <SvgIcon {...props}>
+    <path stroke='none' d='M0 0h24v24H0z' fill='none'></path>
+    <path stroke='currentcolor' d='M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5' fill='none'></path>
+    <path stroke='currentcolor' d='M10 14l10 -10'></path>
+    <path stroke='currentcolor' d='M15 4l5 0l0 5' fill='none'></path>
+  </SvgIcon>
+)
+
+const linkType = defineDataType<string>({
+  ...stringType,
+  is (value) {
+    return typeof value === 'string' && value.startsWith('http')
+  },
+  PostComponent: (props) => (
+    <Button
+      variant='contained'
+      size='small'
+      href={props.value}
+      target='_blank'
+      rel='noopener noreferrer'
+      sx={{
+        display: 'inline-block',
+        marginLeft: 1
+      }}
+    >
+      Open
+      <LinkIcon sx={{ strokeWidth: 2 }} />
+    </Button>
+  )
+})
+
+const value = {
+  link: 'http://example.com'
+}
+
+const Example: FC = () => {
+  const theme = useNextraTheme()
+  return (
+    <JsonViewer
+      rootName={false}
+      displaySize={false}
+      theme={theme}
+      value={value}
+      valueTypes={[linkType]}
+    />
+  )
+}
+
+export default Example

docs/examples/JsonViewerWithWidget.tsx

@@ -0,0 +1,8 @@
+import type { JsonViewerTheme } from '@textea/json-viewer'
+import { useTheme } from 'nextra-theme-docs'
+
+export function useNextraTheme () {
+  const { theme, systemTheme } = useTheme()
+  const currentTheme = (theme === 'system' ? systemTheme : theme) as JsonViewerTheme
+  return currentTheme
+}

docs/hooks/useTheme.ts

@@ -0,0 +1,5 @@
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

docs/pages/_app.mdx

@@ -1,3 +1,6 @@
 {
-  "index": "Introduction"
+  "index": "Introduction",
+  "apis": "API Reference",
+  "how-to": "How-to guides",
+  "migration": "Migration"
 }