From 0a345b3347b1b585a491648c7ec9513dc593508d Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Thu, 29 May 2025 14:12:20 +0200
Subject: [PATCH] [react] feat: Added docs for components/Xray

---
 packages/react/components/Pattern/index.mjs   |  4 +--
 packages/react/components/Xray/index.mjs      | 20 +++++++++--
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/xray/_examples.js        | 10 ++++++
 .../packages/react/components/xray/readme.mdx | 36 +++++++++++++++++--
 5 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/xray/_examples.js

diff --git a/packages/react/components/Pattern/index.mjs b/packages/react/components/Pattern/index.mjs
index d344951772d..bee2e647b8b 100644
--- a/packages/react/components/Pattern/index.mjs
+++ b/packages/react/components/Pattern/index.mjs
@@ -17,7 +17,7 @@ import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs
 import { Link as WebLink } from '@freesewing/react/components/Link'
 
 /**
- * Default pattern components that you can override
+ * Default Pattern components that you can override
  *
  * @public
  * @constant
@@ -45,7 +45,7 @@ const defaultComponents = {
  * @param {JSX.Element} props.children - The component children, if they are set, we will not render any stacks
  * @param {string} [props.className = 'freesewing pattern'] - SVG classes to set on the SVG element
  * @param {object} [props.components = {}] - Any custom components to use in the pattern
- * @param {object} [props.string = {}] - Strings to use for translation
+ * @param {object} [props.strings = {}] - Strings to use for translation
  * @param {object} props.renderProps - The pattern's renderProps as generated by FreeSewing core
  * @returns {JSX.Element}
  */
diff --git a/packages/react/components/Xray/index.mjs b/packages/react/components/Xray/index.mjs
index 85f4ad1026c..6099b60678c 100644
--- a/packages/react/components/Xray/index.mjs
+++ b/packages/react/components/Xray/index.mjs
@@ -3,14 +3,30 @@ import { defaultComponents as patternComponents } from '@freesewing/react/compon
 import { PointXray } from './point.mjs'
 import { PathXray } from './path.mjs'
 
-/*
- * Allow people to override these components
+/**
+ * Default Xray components that you can override
+ *
+ * @public
+ * @constant
  */
 const defaultComponents = {
   Point: PointXray,
   Path: PathXray,
 }
 
+/**
+ * A component to code-highlight JSON data
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The component children, if they are set, we will not render any stacks
+ * @param {string} [props.className = 'freesewing pattern'] - SVG classes to set on the SVG element
+ * @param {object} [props.components = {}] - Any custom components to use in the pattern
+ * @param {object} [props.drillProps = {}] - Any additional props to pass down
+ * @param {object} [props.strings = {}] - Strings to use for translation
+ * @param {object} props.renderProps - The pattern's renderProps as generated by FreeSewing core
+ * @returns {JSX.Element}
+ */
 export const Xray = forwardRef((props, ref) => {
   if (!props.renderProps) return null
 
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index eed6bb19d25..dfc69db9038 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -41,3 +41,4 @@ jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/co
 jsdoc -c jsdoc.json components/Time/* > ../../sites/dev/prebuild/jsdoc/react/components/time.json
 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
diff --git a/sites/dev/docs/reference/packages/react/components/xray/_examples.js b/sites/dev/docs/reference/packages/react/components/xray/_examples.js
new file mode 100644
index 00000000000..eefcc5240cd
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/xray/_examples.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const Example = () => (
+  <MiniNote>
+    Components in the Xray family are tightly coupled with FreeSewing pattern structure.
+    Stand-alone examples are not provided as they are not very relevant.
+  </MiniNote>
+)
+
diff --git a/sites/dev/docs/reference/packages/react/components/xray/readme.mdx b/sites/dev/docs/reference/packages/react/components/xray/readme.mdx
index 8208918f631..3fcdab87405 100644
--- a/sites/dev/docs/reference/packages/react/components/xray/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/xray/readme.mdx
@@ -2,6 +2,36 @@
 title: Xray
 ---
 
-:::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 { ConstantDocs } from '@site/src/components/constant-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.xray.mjs'
+import * as cdoc from '@site/prebuild/jsdoc/constants.xray.mjs'
+import { Example } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+- [Constants](#constants)
+
+## Components
+
+The **Xray** component family provides the following components:
+
+- [Xray](#json)
+
+### Xray
+
+<ComponentDocs docs={jsdoc.jsdocXray} example={Example} />
+
+## Constants
+
+The **Xray** family exports the following constants:
+
+- [defaultComponents](defaultcomponents)
+
+### defaultComponents
+
+<ConstantDocs docs={cdoc.jsdocdefaultComponents} />
+
+</DocusaurusDoc>