From d8705ecc75c92e0be252e03a058e54e311321a4a Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Thu, 29 May 2025 13:52:15 +0200
Subject: [PATCH] [react] feat: Added docs for components/Uuid

---
 packages/react/components/Uuid/index.mjs      | 24 +++++++++++--------
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/uuid/_examples.js        |  4 ++++
 .../packages/react/components/uuid/readme.mdx | 23 +++++++++++++++---
 4 files changed, 39 insertions(+), 13 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/uuid/_examples.js

diff --git a/packages/react/components/Uuid/index.mjs b/packages/react/components/Uuid/index.mjs
index 67c765c4907..2d423ede21a 100644
--- a/packages/react/components/Uuid/index.mjs
+++ b/packages/react/components/Uuid/index.mjs
@@ -1,25 +1,29 @@
 import React, { useState } from 'react'
 import { shortUuid } from '@freesewing/utils'
-import { Link } from '@freesewing/react/components/Link'
+import { Link as WebLink } from '@freesewing/react/components/Link'
 import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 
-/*
- * Displays a UUID, but shorter
+/**
+ * A component to display a short version of a (v4) UUID
  *
- * @param {object} props - All React props
- * @param {string} uuid - The UUID
- * @param {string} href - An optional href to make this UUID a link
- * @param {string} label - An optional label to show in the loading status
+ * @component
+ * @param {object} props - All component props
+ * @param {React.FC} [props.Link = false] - An optional framework-specific Link component
+ * @param {string} props.uuid - The UUID
+ * @param {string} [props.href = false] - An optional href to make this into a link
+ * @param {string} [props.label = false] - An optional label to pass to the CopyToClipboardButton
+ * @returns {JSX.Element}
  */
-export const Uuid = ({ uuid, href = false, label = false }) => {
+export const Uuid = ({ uuid, href = false, label = "UUID", Link = false }) => {
   const [full, setFull] = useState()
   const short = shortUuid(uuid)
+  if (!Link) Link = WebLink
 
   if (href === false)
     return (
       <span className="flex flex-row items-center">
         <span className="daisy-badge daisy-badge-secondary font-mono">{shortUuid(uuid)}</span>
-        <CopyToClipboardButton content={uuid} label="UUID" sup />
+        <CopyToClipboardButton content={uuid} label={label} sup />
       </span>
     )
 
@@ -28,7 +32,7 @@ export const Uuid = ({ uuid, href = false, label = false }) => {
       <Link href={href} title={uuid}>
         <span className="daisy-badge daisy-badge-secondary font-mono">{shortUuid(uuid)}</span>
       </Link>
-      <CopyToClipboardButton content={uuid} label="UUID" sup label />
+      <CopyToClipboardButton content={uuid} label={label} sup />
     </span>
   )
 }
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index b059f7d3207..fe7e2ec5f27 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -39,3 +39,4 @@ jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/co
 jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json
 jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json
 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
diff --git a/sites/dev/docs/reference/packages/react/components/uuid/_examples.js b/sites/dev/docs/reference/packages/react/components/uuid/_examples.js
new file mode 100644
index 00000000000..362da8e821a
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/uuid/_examples.js
@@ -0,0 +1,4 @@
+import React from 'react'
+import { Uuid } from '@freesewing/react/components/Uuid'
+
+export const UuidExample = () => <Uuid uuid="08bf6a94-6dfb-4921-b359-3b5f1bc51349" label="UUID with custom label" />
diff --git a/sites/dev/docs/reference/packages/react/components/uuid/readme.mdx b/sites/dev/docs/reference/packages/react/components/uuid/readme.mdx
index 428ae19888f..769c15ee074 100644
--- a/sites/dev/docs/reference/packages/react/components/uuid/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/uuid/readme.mdx
@@ -2,6 +2,23 @@
 title: Uuid
 ---
 
-:::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.uuid.mjs'
+import { UuidExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Uuid** component family provides the following components:
+
+- [Uuid](#uuid)
+
+### Uuid
+
+<ComponentDocs docs={jsdoc.jsdocUuid} example={UuidExample} />
+
+</DocusaurusDoc>