From 54fe6275afa94379ad0431ce8e3a172a28ee7bfc Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Thu, 29 May 2025 14:19:57 +0200
Subject: [PATCH] [react] feat: Added docs for components/Yaml

---
 packages/react/components/Yaml/index.mjs      | 14 ++++++++++-
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/yaml/_examples.js        | 18 +++++++++++++++
 .../packages/react/components/yaml/readme.mdx | 23 ++++++++++++++++---
 4 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/yaml/_examples.js

diff --git a/packages/react/components/Yaml/index.mjs b/packages/react/components/Yaml/index.mjs
index 538bb48b740..b54509b2ab5 100644
--- a/packages/react/components/Yaml/index.mjs
+++ b/packages/react/components/Yaml/index.mjs
@@ -3,6 +3,18 @@ import { Highlight } from '@freesewing/react/components/Highlight'
 import hljs from 'highlight.js/lib/common'
 import yaml from 'js-yaml'
 
+/**
+ * A component to code-highlight YAML data
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - Use this if you are not using props.json or props.js to pass the YAML data
+ * @param {object} [props.js = undefined] - Use this to pass the YAML data as Javascript Object
+ * @param {string} [props.json = undefined] - Use this to pass the YAML data as JSON
+ * @param {bool} [props.noCopy = false]  - Set this to true to not add the copy to clipboard button
+ * @param {string} [props.title = "YAML"] - Title for the highlight
+ * @returns {JSX.Element}
+ */
 export const Yaml = (props) => {
   let code
   if (props.json) code = yaml.dump(JSON.parse(props.json))
@@ -11,8 +23,8 @@ export const Yaml = (props) => {
 
   return (
     <Highlight
-      {...props}
       language="yaml"
+      {...props}
       raw={hljs.highlight(code, { language: 'yaml' }).value}
       copy={code}
     />
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index dfc69db9038..a66ef413c9b 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -42,3 +42,4 @@ jsdoc -c jsdoc.json components/Time/* > ../../sites/dev/prebuild/jsdoc/react/com
 jsdoc -c jsdoc.json components/Uuid/* > ../../sites/dev/prebuild/jsdoc/react/components/uuid.json
 jsdoc -c jsdoc.json components/Ux/* > ../../sites/dev/prebuild/jsdoc/react/components/ux.json
 jsdoc -c jsdoc.json components/Xray/* > ../../sites/dev/prebuild/jsdoc/react/components/xray.json
+jsdoc -c jsdoc.json components/Yaml/* > ../../sites/dev/prebuild/jsdoc/react/components/yaml.json
diff --git a/sites/dev/docs/reference/packages/react/components/yaml/_examples.js b/sites/dev/docs/reference/packages/react/components/yaml/_examples.js
new file mode 100644
index 00000000000..62f1b36ecf5
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/yaml/_examples.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Yaml } from '@freesewing/react/components/Yaml'
+
+export const YamlExample = () => <Yaml js={{
+  some: 'yaml',
+  data: 'here',
+  more: {
+    things: {
+      like: ['an', 'array'],
+      or: {
+        a: {
+          number: 12
+        }
+      }
+    }
+  }
+}} />
+
diff --git a/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx b/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx
index 848c9e57c7e..9fef24feac1 100644
--- a/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/yaml/readme.mdx
@@ -2,6 +2,23 @@
 title: Yaml
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.yaml.mjs'
+import { YamlExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Yaml** component family provides the following components:
+
+- [Yaml](#yaml)
+
+### Yaml
+
+<ComponentDocs docs={jsdoc.jsdocYaml} example={YamlExample} />
+
+</DocusaurusDoc>