feat: next component

examples/basic/pages/index.tsx

@@ -1,18 +1,21 @@
-import JsonViewer from '@textea/json-viewer'
+import { TextField } from '@mui/material'
+import {
+  applyValue,
+  JsonViewer,
+  JsonViewerOnChange
+} from '@textea/json-viewer'
 import type React from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
-import type { InteractionProps } from '../../../src/type'
-
-function aPlusB (a:number, b: number) {
+function aPlusB (a: number, b: number) {
   return a + b
 }
 
 const example = {
-  string: 'this is a test string',
+  string: 'this is a string',
   integer: 42,
-  array: [1, 2, 3, 'test', NaN],
-  float: 3.14159,
+  array: [19, 19, 810, 'test', NaN],
+  float: 114.514,
   undefined,
   object: {
     'first-child': true,
@@ -21,17 +24,50 @@ const example = {
   },
   fn: aPlusB,
   string_number: '1234',
+  timer: 0,
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)')
 }
 
 const IndexPage: React.FC = () => {
-  const [src, setSrc] = useState<object>(() => example)
-  const handleEdit = useCallback((update: InteractionProps) => {
-    setSrc(update.updated_src)
+  const [indent, setIndent] = useState(2)
+  const [src, setSrc] = useState(() => example)
+  useEffect(() => {
+    const loop = () => {
+      setSrc(src => ({
+        ...src,
+        timer: src.timer + 1
+      }))
+    }
+    const id = setInterval(loop, 1000)
+    return () => {
+      clearInterval(id)
+    }
   }, [])
   return (
     <div>
-      <JsonViewer src={src} onEdit={handleEdit}/>
+      <TextField
+        value={indent}
+        type='number'
+        onChange={
+          event => {
+            const indent = parseInt(event.target.value)
+            if (indent > -1 && indent < 10) {
+              setIndent(indent)
+            }
+          }
+        }
+      />
+      <JsonViewer
+        value={src}
+        indentWidth={indent}
+        onChange={
+          useCallback<JsonViewerOnChange>(
+            (path, oldValue, newValue) => {
+              setSrc(src => applyValue(src, path, newValue))
+            }, []
+          )
+        }
+      />
     </div>
   )
 }

package.json

@@ -23,7 +23,7 @@
     "tree-view",
     "treeview"
   ],
-  "types": "src/type.d.ts",
+  "types": "dist/src/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {
@@ -35,7 +35,6 @@
     }
   },
   "files": [
-    "src/**.d.ts",
     "dist"
   ],
   "scripts": {