[react] feat: Added docs for components/Uuid

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

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

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" />

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>