diff --git a/docs/hooks/useTheme.ts b/docs/hooks/useTheme.ts
deleted file mode 100644
index 357f7c9c..00000000
--- a/docs/hooks/useTheme.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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
-}
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 03b0ef83..87cbfee0 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -1,8 +1,6 @@
import nextra from 'nextra'
const withNextra = nextra({
- theme: 'nextra-theme-docs',
- themeConfig: './theme.config.js',
staticImage: true,
defaultShowCopyCode: true
})
@@ -10,7 +8,6 @@ const withNextra = nextra({
/** @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
index ad70e13a..f7926586 100644
--- 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"
+}
\ No newline at end of file
diff --git a/docs/pages/_app.mdx b/docs/pages/_app.mdx
deleted file mode 100644
index 3e7701bf..00000000
--- a/docs/pages/_app.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-import 'nextra-theme-docs/style.css'
-
-export default function Nextra({ Component, pageProps }) {
- return
-}
diff --git a/docs/pages/_meta.json b/docs/pages/_meta.json
deleted file mode 100644
index 7799e59a..00000000
--- a/docs/pages/_meta.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "index": "Introduction",
- "apis": "API Reference",
- "how-to": "How-to guides",
- "migration": "Migration"
-}
diff --git a/docs/pages/how-to/_meta.json b/docs/pages/how-to/_meta.json
deleted file mode 100644
index 612d954d..00000000
--- a/docs/pages/how-to/_meta.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "data-types": "Defining Data Types",
- "built-in-types": "Extend Built-in Data Types",
- "styling": "Styling and Theming"
-}
diff --git a/docs/pages/migration/_meta.json b/docs/pages/migration/_meta.json
deleted file mode 100644
index 1997656a..00000000
--- a/docs/pages/migration/_meta.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "migration-v3": "Migrating to v3",
- "migration-v4": "Migrating to v4"
-}
diff --git a/docs/src/app/[[...mdxPath]]/layout.jsx b/docs/src/app/[[...mdxPath]]/layout.jsx
new file mode 100644
index 00000000..21eadc54
--- /dev/null
+++ 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 = Nextra 4.0 is released 🎉
+const navbar = (
+ @textea/json-viewer}
+ 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 (
+
+
+ {/* Your additional tags should be passed as `children` of `` element */}
+
+
+ MIT {year} © Textea, Inc.}
+ navbar={navbar}
+ pageMap={pageMap}
+ >
+ {children}
+
+
+
+ )
+}
diff --git a/docs/src/app/[[...mdxPath]]/page.jsx b/docs/src/app/[[...mdxPath]]/page.jsx
new file mode 100644
index 00000000..958b7fcd
--- /dev/null
+++ 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 (
+
+
+
+ )
+}
diff --git a/docs/src/app/full/layout.tsx b/docs/src/app/full/layout.tsx
new file mode 100644
index 00000000..ffe54545
--- /dev/null
+++ 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 (
+
+ {children}
+
+ )
+}
diff --git a/docs/pages/full/index.tsx b/docs/src/app/full/page.tsx
similarity index 98%
rename from docs/pages/full/index.tsx
rename to docs/src/app/full/page.tsx
index eab41964..29edbeea 100644
--- a/docs/pages/full/index.tsx
+++ b/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 = {
...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 (
-
+
{
-
+
```jsx
import { defineDataType } from '@textea/json-viewer'
@@ -87,9 +87,9 @@ const imageType = defineDataType({
})
```
-
+
-
+
```tsx
import { defineDataType } from '@textea/json-viewer'
@@ -117,7 +117,7 @@ const imageType = defineDataType({
})
```
-
+
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.
-
+
```jsx
import { defineDataType } from '@textea/json-viewer'
@@ -164,9 +164,9 @@ const urlType = defineDataType({
}
})
```
-
+
-
+
```tsx
import { defineDataType } from '@textea/json-viewer'
@@ -191,7 +191,7 @@ const urlType = defineDataType({
}
})
```
-
+
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.
-
+
```jsx
import { defineDataType, JsonViewer, stringType } from '@textea/json-viewer'
import { Button } from '@mui/material'
@@ -248,9 +248,9 @@ const linkType = defineDataType({
)
})
```
-
+
-
+
```tsx
import { defineDataType, JsonViewer, stringType } from '@textea/json-viewer'
import { Button } from '@mui/material'
@@ -278,7 +278,7 @@ const linkType = defineDataType({
)
})
```
-
+
### Customize the `Date` format
@@ -286,7 +286,7 @@ const linkType = defineDataType({
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.
-
+
```jsx
import { defineEasyType } from '@textea/json-viewer'
@@ -297,9 +297,9 @@ const myDateType = defineEasyType({
Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}>
})
```
-
+
-
+
```tsx
import { defineEasyType } from '@textea/json-viewer'
@@ -310,7 +310,7 @@ const myDateType = defineEasyType({
Renderer: ({ value }) => <>{value.toISOString().split('T')[0]}>
})
```
-
+
diff --git a/docs/pages/how-to/styling.mdx b/docs/src/content/how-to/styling.mdx
similarity index 100%
rename from docs/pages/how-to/styling.mdx
rename to docs/src/content/how-to/styling.mdx
diff --git a/docs/pages/index.mdx b/docs/src/content/index.mdx
similarity index 86%
rename from docs/pages/index.mdx
rename to docs/src/content/index.mdx
index b1dbd550..2c7c76b0 100644
--- a/docs/pages/index.mdx
+++ b/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.
- ``` npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled ```
- ``` yarn add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```
- ``` pnpm add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```
+ ``` npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled ```
+ ``` yarn add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```
+ ``` pnpm add @textea/json-viewer @mui/material @emotion/react @emotion/styled ```
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
new file mode 100644
index 00000000..11d28f20
--- /dev/null
+++ 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 b/docs/src/content/migration/migration-v3.mdx
similarity index 100%
rename from docs/pages/migration/migration-v3.mdx
rename to docs/src/content/migration/migration-v3.mdx
diff --git a/docs/pages/migration/migration-v4.mdx b/docs/src/content/migration/migration-v4.mdx
similarity index 100%
rename from docs/pages/migration/migration-v4.mdx
rename to docs/src/content/migration/migration-v4.mdx
diff --git a/docs/examples/JsonViewerCustomizeDate.tsx b/docs/src/examples/JsonViewerCustomizeDate.tsx
similarity index 83%
rename from docs/examples/JsonViewerCustomizeDate.tsx
rename to docs/src/examples/JsonViewerCustomizeDate.tsx
index 9cc5b3a8..a017e2cf 100644
--- a/docs/examples/JsonViewerCustomizeDate.tsx
+++ b/docs/src/examples/JsonViewerCustomizeDate.tsx
@@ -1,8 +1,8 @@
+'use client'
+
import { defineEasyType, JsonViewer } from '@textea/json-viewer'
import type { FC } from 'react'
-import { useNextraTheme } from '../hooks/useTheme'
-
const myDateType = defineEasyType({
is: (value) => value instanceof Date,
type: 'date',
@@ -15,12 +15,10 @@ const value = {
}
const Example: FC = () => {
- const theme = useNextraTheme()
return (
diff --git a/docs/examples/JsonViewerPreview.tsx b/docs/src/examples/JsonViewerPreview.tsx
similarity index 75%
rename from docs/examples/JsonViewerPreview.tsx
rename to docs/src/examples/JsonViewerPreview.tsx
index 8a7ef8fe..fde180ab 100644
--- a/docs/examples/JsonViewerPreview.tsx
+++ b/docs/src/examples/JsonViewerPreview.tsx
@@ -1,14 +1,12 @@
+'use client'
+
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 = (props) => {
- const theme = useNextraTheme()
return (
{
- const theme = useNextraTheme()
const [src, setSrc] = useState(value)
const onChange = useCallback(
(path, oldValue, newValue) => {
@@ -34,7 +33,6 @@ export const JsonViewerToggleBoolean1: FC = () => {
{
}
export const JsonViewerToggleBoolean2: FC = () => {
- const theme = useNextraTheme()
const [src, setSrc] = useState(value)
const onChange = useCallback(
(path, oldValue, newValue) => {
@@ -67,7 +64,6 @@ export const JsonViewerToggleBoolean2: FC = () => {
({
is: (value) => {
if (typeof value !== 'string') return false
@@ -31,12 +31,10 @@ const value = {
}
const Example: FC = () => {
- const theme = useNextraTheme()
return (
diff --git a/docs/examples/JsonViewerWithURL.tsx b/docs/src/examples/JsonViewerWithURL.tsx
similarity index 88%
rename from docs/examples/JsonViewerWithURL.tsx
rename to docs/src/examples/JsonViewerWithURL.tsx
index 70da42b8..6bd51e9a 100644
--- a/docs/examples/JsonViewerWithURL.tsx
+++ b/docs/src/examples/JsonViewerWithURL.tsx
@@ -1,8 +1,8 @@
+'use client'
+
import { defineDataType, JsonViewer } from '@textea/json-viewer'
import type { FC } from 'react'
-import { useNextraTheme } from '../hooks/useTheme'
-
const urlType = defineDataType({
is: (value) => value instanceof URL,
Component: (props) => {
@@ -30,12 +30,10 @@ const value = {
}
const Example: FC = () => {
- const theme = useNextraTheme()
return (
diff --git a/docs/examples/JsonViewerWithWidget.tsx b/docs/src/examples/JsonViewerWithWidget.tsx
similarity index 93%
rename from docs/examples/JsonViewerWithWidget.tsx
rename to docs/src/examples/JsonViewerWithWidget.tsx
index d7148994..fd0dfa2b 100644
--- a/docs/examples/JsonViewerWithWidget.tsx
+++ b/docs/src/examples/JsonViewerWithWidget.tsx
@@ -1,10 +1,10 @@
+'use client'
+
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) => (
//