TexteaInc · pionxzh · Jun 1, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025
diff --git a/docs/hooks/useTheme.ts b/docs/hooks/useTheme.ts
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -1,16 +1,13 @@
 import nextra from 'nextra'
 
 const withNextra = nextra({
-  theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.js',
   staticImage: true,
   defaultShowCopyCode: true
 })
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  optimizeFonts: true,
   images: {
     domains: ['i.imgur.com', 'www.netlify.com']
   },

diff --git a/docs/package.json b/docs/package.json
@@ -12,16 +12,17 @@
   "dependencies": {
     "@textea/json-viewer": "workspace:^",
     "gray-matter": "^4.0.3",
-    "next": "^13.5.7",
-    "nextra": "2.13.3",
-    "nextra-theme-docs": "2.13.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "next": "^15.3.1",
+    "nextra": "^4.2.17",
+    "nextra-theme-docs": "^4.2.17",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
     "@types/node": "^20.17.9",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "typescript": "^5.7.2"
-  }
-}
+  },
+  "type": "module"
+}
diff --git a/docs/pages/_app.mdx b/docs/pages/_app.mdx
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
diff --git a/docs/pages/how-to/_meta.json b/docs/pages/how-to/_meta.json
diff --git a/docs/pages/migration/_meta.json b/docs/pages/migration/_meta.json
diff --git a/docs/src/app/[[...mdxPath]]/layout.jsx b/docs/src/app/[[...mdxPath]]/layout.jsx
@@ -0,0 +1,58 @@
+import 'nextra-theme-docs/style.css'
+
+import { Head } from 'nextra/components'
+import { getPageMap } from 'nextra/page-map'
+import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+
+const year = new Date().getFullYear()
+
+export const metadata = {
+  // Define your metadata here
+  // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+}
+
+// const banner = <Banner storageKey='some-key'>Nextra 4.0 is released 🎉</Banner>
+const navbar = (
+  <Navbar
+    logo={<b>@textea/json-viewer</b>}
+    logoLink='https://github.com/TexteaInc/json-viewer'
+    projectLink='https://github.com/TexteaInc/json-viewer'
+  />
+)
+
+const EXCLUDED_PAGES = [
+  '/full'
+]
+
+export default async function RootLayout ({ children }) {
+  const pageMap = (await getPageMap()).filter(page => !EXCLUDED_PAGES.includes(page.route))
+  return (
+    <html
+      // Not required, but good for SEO
+      lang='en'
+      // Required to be set
+      dir='ltr'
+      // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
+      suppressHydrationWarning
+    >
+      <Head>
+        {/* Your additional tags should be passed as `children` of `<Head>` element */}
+      </Head>
+      <body>
+        <Layout
+          feedback={{
+            labels: 'feedback',
+            content: 'Question? Give us feedback →'
+          }}
+          docsRepositoryBase='https://github.com/TexteaInc/json-viewer/tree/main/docs'
+          editLink='Edit this page on GitHub'
+          footer={<Footer>MIT {year} © Textea, Inc.</Footer>}
+          navbar={navbar}
+          pageMap={pageMap}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}
diff --git a/docs/src/app/[[...mdxPath]]/page.jsx b/docs/src/app/[[...mdxPath]]/page.jsx
@@ -0,0 +1,24 @@
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+
+import { useMDXComponents as getMDXComponents } from '../../mdx-components'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+export async function generateMetadata (props) {
+  const params = await props.params
+  const { metadata } = await importPage(params.mdxPath)
+  return metadata
+}
+
+const Wrapper = getMDXComponents().wrapper
+
+export default async function Page (props) {
+  const params = await props.params
+  const result = await importPage(params.mdxPath)
+  const { default: MDXContent, toc, metadata } = result
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}
diff --git a/docs/src/app/full/layout.tsx b/docs/src/app/full/layout.tsx
@@ -0,0 +1,18 @@
+import type React from 'react'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js'
+}
+
+export default function RootLayout ({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang='en'>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/docs/pages/full/index.tsx → docs/src/app/full/page.tsx b/docs/pages/full/index.tsx → docs/src/app/full/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import type { SvgIconProps } from '@mui/material'
 import {
   AppBar,
@@ -40,7 +42,7 @@ const allowedDomains = ['i.imgur.com']
 // this url is copied from: https://beta.reactjs.org/learn/passing-props-to-a-component
 const avatar = 'https://i.imgur.com/1bX5QH6.jpg'
 
-function aPlusB (a: number, b: number) {
+const aPlusB = function (a: number, b: number) {
   return a + b
 }
 const aPlusBConst = function (a: number, b: number) {
@@ -158,7 +160,7 @@ const LinkIcon = (props: SvgIconProps) => (
 
 const linkType: DataType<string> = {
   ...stringType,
-  is (value) {
+  is: (value) => {
     return typeof value === 'string' && value.startsWith('http')
   },
   PostComponent: (props) => (
@@ -220,7 +222,7 @@ const IndexPage: FC = () => {
     return () => clearInterval(id)
   }, [])
   return (
-    <div>
+    <div style={{ backgroundColor: 'white' }}>
       <AppBar>
         <Toolbar>
           <Typography
@@ -235,15 +237,16 @@ const IndexPage: FC = () => {
       </AppBar>
       <Box
         sx={{
+          color: 'text.primary',
           display: 'flex',
           alignItems: 'center',
           flexWrap: 'wrap',
           width: '100%',
           gap: '10px',
-          paddingX: '5px',
-          paddingY: '10px',
           minHeight: '64px',
-          marginTop: '64px'
+          paddingX: '5px',
+          pb: '10px',
+          mt: '64px'
         }}
       >
         <FormControlLabel

diff --git a/docs/src/content/_meta.js b/docs/src/content/_meta.js
@@ -0,0 +1,6 @@
+export default {
+  index: 'Introduction',
+  apis: 'API Reference',
+  'how-to': 'How-to guides',
+  migration: 'Migration'
+}
diff --git a/docs/pages/apis.mdx → docs/src/content/apis.mdx b/docs/pages/apis.mdx → docs/src/content/apis.mdx
diff --git a/docs/src/content/how-to/_meta.js b/docs/src/content/how-to/_meta.js
@@ -0,0 +1,5 @@
+export default {
+  'data-types': 'Defining Data Types',
+  'built-in-types': 'Extend Built-in Data Types',
+  styling: 'Styling and Theming'
+}
diff --git a/docs/pages/how-to/built-in-types.mdx → docs/src/content/how-to/built-in-types.mdx b/docs/pages/how-to/built-in-types.mdx → docs/src/content/how-to/built-in-types.mdx
diff --git a/docs/pages/how-to/data-types.mdx → docs/src/content/how-to/data-types.mdx b/docs/pages/how-to/data-types.mdx → docs/src/content/how-to/data-types.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from 'nextra-theme-docs'
+import { Tab, Tabs } from 'nextra/components'
 import JsonViewerWithURL from '../../examples/JsonViewerWithURL'
 import JsonViewerWithImage from '../../examples/JsonViewerWithImage'
 import JsonViewerWithWidget from '../../examples/JsonViewerWithWidget'
@@ -58,7 +58,7 @@ Suppose you have a JSON object that includes an image URL:
 If you want to preview images directly in your JSON, you can define a data type for images:
 
 <Tabs items={['JS', 'TS']}>
-  <Tab>
+  <Tabs.Tab>
 
 ```jsx
 import { defineDataType } from '@textea/json-viewer'
@@ -87,9 +87,9 @@ const imageType = defineDataType({
 })
 ```
 
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab>
+  <Tabs.Tab>
 ```tsx
 import { defineDataType } from '@textea/json-viewer'
 
@@ -117,7 +117,7 @@ const imageType = defineDataType<string>({
 })
 ```
 
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 And then use it like this:
@@ -139,7 +139,7 @@ And then use it like this:
 Let's add support for the [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) API.
 
 <Tabs items={['JS', 'TS']}>
-  <Tab>
+  <Tabs.Tab>
 ```jsx
 import { defineDataType } from '@textea/json-viewer'
 
@@ -164,9 +164,9 @@ const urlType = defineDataType({
   }
 })
 ```
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab>
+  <Tabs.Tab>
 ```tsx
 import { defineDataType } from '@textea/json-viewer'
 
@@ -191,7 +191,7 @@ const urlType = defineDataType<URL>({
   }
 })
 ```
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 And then use it like this:
@@ -220,7 +220,7 @@ Sometimes you might want to add a button to the value.
 In this example, we will **extend the built-in `stringType`** and add a button to open the link in a new tab.
 
 <Tabs items={['JS', 'TS']}>
-  <Tab>
+  <Tabs.Tab>
 ```jsx
 import { defineDataType, JsonViewer, stringType } from '@textea/json-viewer'
 import { Button } from '@mui/material'
@@ -248,9 +248,9 @@ const linkType = defineDataType({
   )
 })
 ```
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab>
+  <Tabs.Tab>
 ```tsx
 import { defineDataType, JsonViewer, stringType } from '@textea/json-viewer'
 import { Button } from '@mui/material'
@@ -278,15 +278,15 @@ const linkType = defineDataType<string>({
   )
 })
 ```
-  </Tab>
+  </Tabs.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>
+  <Tabs.Tab>
 ```jsx
 import { defineEasyType } from '@textea/json-viewer'
 
@@ -297,9 +297,9 @@ const myDateType = defineEasyType({
   Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}</>
 })
 ```
-  </Tab>
+  </Tabs.Tab>
 
-  <Tab>
+  <Tabs.Tab>
 ```tsx
 import { defineEasyType } from '@textea/json-viewer'
 
@@ -310,7 +310,7 @@ const myDateType = defineEasyType<Date>({
   Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}</>
 })
 ```
-  </Tab>
+  </Tabs.Tab>
 </Tabs>
 
 <JsonViewerCustomizeDate />
diff --git a/docs/pages/how-to/styling.mdx → docs/src/content/how-to/styling.mdx b/docs/pages/how-to/styling.mdx → docs/src/content/how-to/styling.mdx
diff --git a/docs/pages/index.mdx → docs/src/content/index.mdx b/docs/pages/index.mdx → docs/src/content/index.mdx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import Button from '@mui/material/Button'
-import { Tab, Tabs } from 'nextra-theme-docs'
+import { Tab, Tabs } from 'nextra/components'
 import { JsonViewerPreview } from '../examples/JsonViewerPreview'
 
 # @textea/json-viewer
@@ -18,9 +18,9 @@ import { JsonViewerPreview } from '../examples/JsonViewerPreview'
 `@textea/json-viewer` is using [Material-UI](https://mui.com/) as the base component library, so you need to install it and its peer dependencies first.
 
 <Tabs items={['npm', 'yarn', 'pnpm']}>
-  <Tab label="npm">``` npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled ```</Tab>
-  <Tab label="yarn">``` yarn add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```</Tab>
-  <Tab label="pnpm">``` pnpm add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```</Tab>
+  <Tabs.Tab label="npm">``` npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled ```</Tabs.Tab>
+  <Tabs.Tab label="yarn">``` yarn add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```</Tabs.Tab>
+  <Tabs.Tab label="pnpm">``` pnpm add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```</Tabs.Tab>
 </Tabs>
 
 You can also use it directly from a CDN:

diff --git a/docs/src/content/migration/_meta.js b/docs/src/content/migration/_meta.js
@@ -0,0 +1,4 @@
+export default {
+  'migration-v3': 'Migrating to v3',
+  'migration-v4': 'Migrating to v4'
+}
diff --git a/docs/pages/migration/migration-v3.mdx → docs/src/content/migration/migration-v3.mdx b/docs/pages/migration/migration-v3.mdx → docs/src/content/migration/migration-v3.mdx
diff --git a/docs/pages/migration/migration-v4.mdx → docs/src/content/migration/migration-v4.mdx b/docs/pages/migration/migration-v4.mdx → docs/src/content/migration/migration-v4.mdx