[react] feat: Added docs for components/Json

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
 

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

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
+  }} />
+)

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
-:::