From 1b1cacdea3a6fbe8f15667a7f05cdc9829af8f67 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sat, 24 May 2025 12:22:21 +0200
Subject: [PATCH] [react] feat: Added docs for components/Json

---
 packages/react/components/Json/index.mjs      |  9 +++++++++
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/json/_examples.js        | 20 +++++++++++++++++++
 .../packages/react/components/json/readme.mdx | 19 +++++++++++++++---
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/json/_examples.js

diff --git a/packages/react/components/Json/index.mjs b/packages/react/components/Json/index.mjs
index 82e927a5571..aa97ed0f59b 100644
--- a/packages/react/components/Json/index.mjs
+++ b/packages/react/components/Json/index.mjs
@@ -2,6 +2,15 @@ import React from 'react'
 import { Highlight } from '@freesewing/react/components/Highlight'
 import hljs from 'highlight.js/lib/common'
 
+/**
+ * A component to code-highlight JSON data
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {object} [props.js = undefined] - An optional Javascript Object to highlight
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
+ */
 export const Json = (props) => {
   const code = props.js ? JSON.stringify(props.js, null, 2) : props.children
 
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index ebda60e8f09..4a2c43c969e 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -15,3 +15,4 @@ jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/
 jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json
 jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json
 jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json
+jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json
diff --git a/sites/dev/docs/reference/packages/react/components/json/_examples.js b/sites/dev/docs/reference/packages/react/components/json/_examples.js
new file mode 100644
index 00000000000..b63da97ea52
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/json/_examples.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Json } from '@freesewing/react/components/Json'
+
+export const JsonExample = () => (
+  <Json js={{
+    pizzas: [
+      {
+        size: 'lg',
+        toppings: ['tomato', 'pineapple', 'chorizo', 'mozarella'],
+        crust: 'classic'
+      },
+      {
+        size: 'lg',
+        toppings: ['tomato', 'pineapple', 'cupped_chorizo', 'mozarella'],
+        crust: 'cheesy'
+      },
+    ],
+    pickup: false
+  }} />
+)
diff --git a/sites/dev/docs/reference/packages/react/components/json/readme.mdx b/sites/dev/docs/reference/packages/react/components/json/readme.mdx
index 3825329369a..8b04827cbdd 100644
--- a/sites/dev/docs/reference/packages/react/components/json/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/json/readme.mdx
@@ -1,7 +1,20 @@
 ---
 title: Json
 ---
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.json.mjs'
+import { JsonExample } from './_examples.js'
+
+
+<DocusaurusDoc>
+
+The __Json__ component family provides the following components:
+
+- [Json](#json)
+
+## Json
+<ComponentDocs docs={jsdoc.jsdocJson} example={JsonExample} />
+
+</DocusaurusDoc>
 
-:::note
-This page is yet to be created
-:::