feat: init next JsonViewer component

Author: himself65

examples/next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next/next.config.js

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  optimizeFonts: true,
+  experimental: {
+    externalDir: true
+  }
+}
+
+const withTM = require('next-transpile-modules')([], {
+  resolveSymlinks: true,
+  debug: false
+})
+
+module.exports = withTM(nextConfig)

examples/next/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@textea/json-viewer-example-next",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@textea/json-viewer": "workspace:^",
+    "next": "^12.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@textea/dev-kit": "^0.12.16",
+    "@types/node": "^18.7.17",
+    "@types/react": "^18.0.19",
+    "@types/react-dom": "^18.0.6",
+    "next-transpile-modules": "^9.0.0",
+    "typescript": "^4.8.3"
+  }
+}

examples/next/pages/index.tsx

@@ -0,0 +1,39 @@
+import { unstable_JsonViewer as JsonViewer } from '@textea/json-viewer'
+import type React from 'react'
+import { useCallback, useState } from 'react'
+
+import type { InteractionProps } from '../../../src/type'
+
+function aPlusB (a:number, b: number) {
+  return a + b
+}
+
+const example = {
+  string: 'this is a test string',
+  integer: 42,
+  array: [1, 2, 3, 'test', NaN],
+  float: 3.14159,
+  undefined,
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null
+  },
+  fn: aPlusB,
+  string_number: '1234',
+  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)
+  }, [])
+  return (
+    <div>
+      <JsonViewer src={src} onEdit={handleEdit}/>
+    </div>
+  )
+}
+
+export default IndexPage

examples/next/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@textea/dev-kit/config/tsconfig.root.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@textea/json-viewer": ["../../src/index"]
+    },
+    "jsx": "preserve",
+    "jsxImportSource": "react",
+    "noEmit": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

src/index.tsx

@@ -4,11 +4,16 @@ import { JsonViewer } from './components/JsonViewer'
 import { AddKeyRequest } from './components/ObjectKeyModal/AddKeyRequest'
 import { ValidationFailure } from './components/ValidationFailure'
 import { isTheme, toType } from './helpers/util'
+import { JsonViewer as unstable_JsonViewer } from './next'
 import ObjectAttributes from './stores/ObjectAttributes'
 // global theme
 import Theme from './themes/getStyle'
 import type { ReactJsonViewProps } from './type'
 
+export {
+  unstable_JsonViewer
+}
+
 // forward src through to JsonObject component
 class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
   constructor (props: ReactJsonViewProps) {
@@ -178,7 +183,8 @@ class ReactJsonView extends React.PureComponent<ReactJsonViewProps, any> {
 
     return (
       <div
-        className={'react-json-view' + `${className ? ' ' : ''}${className ?? ''}`}
+        className={'react-json-view' +
+          `${className ? ' ' : ''}${className ?? ''}`}
         style={{ ...Theme(theme, 'app-container').style, ...style }}
       >
         <ValidationFailure

src/next.tsx

@@ -0,0 +1,38 @@
+import { Box, createTheme, ThemeProvider } from '@mui/material'
+import type React from 'react'
+import { useEffect, useMemo } from 'react'
+
+import {
+  createJsonViewerStore,
+  JsonViewerProvider, useJsonViewerStoreApi
+} from './stores/JsonViewerStore'
+import type { ReactJsonViewProps } from './type'
+
+const JsonViewerInner: React.FC<ReactJsonViewProps> = (props) => {
+  const api = useJsonViewerStoreApi()
+  useEffect(() => {
+    api.setState(state => ({
+      ...state,
+      src: props.src
+    }))
+  }, [api, props.src])
+  // todo: still working on it
+  return (
+    <Box>
+      {JSON.stringify(props.src)}
+    </Box>
+  )
+}
+
+export const JsonViewer: React.FC<ReactJsonViewProps> = (props) => {
+  const theme = useMemo(() => createTheme({
+    // todo: inject theme based on base16
+  }), [])
+  return (
+    <ThemeProvider theme={theme}>
+      <JsonViewerProvider createStore={createJsonViewerStore}>
+        <JsonViewerInner {...props}/>
+      </JsonViewerProvider>
+    </ThemeProvider>
+  )
+}

src/stores/JsonViewerStore.ts

@@ -3,13 +3,13 @@ import createContext from 'zustand/context'
 import { combine } from 'zustand/middleware'
 
 // todo
-const createJsonViewerStore = (src: any) => create(combine({
-  src
+export const createJsonViewerStore = () => create(combine({
+  src: {}
 }, () => ({
   get: () => {},
   set: () => {}
 })))
-type JsonViewerStore = ReturnType<typeof createJsonViewerStore>
+export type JsonViewerStore = ReturnType<typeof createJsonViewerStore>
 
 export const {
   useStore: useJsonViewerStore,

src/type.d.ts

@@ -294,3 +294,6 @@ export type ThemeKeys =
 
 declare const JsonViewer: React.ComponentType<ReactJsonViewProps>
 export default JsonViewer
+
+// unstable components
+export const unstable_JsonViewer: React.FC<ReactJsonViewProps>

yarn.lock

@@ -1570,6 +1570,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@textea/json-viewer-example-next@workspace:examples/next":
+  version: 0.0.0-use.local
+  resolution: "@textea/json-viewer-example-next@workspace:examples/next"
+  dependencies:
+    "@textea/dev-kit": ^0.12.16
+    "@textea/json-viewer": "workspace:^"
+    "@types/node": ^18.7.17
+    "@types/react": ^18.0.19
+    "@types/react-dom": ^18.0.6
+    next: ^12.3.0
+    next-transpile-modules: ^9.0.0
+    react: ^18.2.0
+    react-dom: ^18.2.0
+    typescript: ^4.8.3
+  languageName: unknown
+  linkType: soft
+
 "@textea/json-viewer@workspace:., @textea/json-viewer@workspace:^":
   version: 0.0.0-use.local
   resolution: "@textea/json-viewer@workspace:."