From fa5bad3d0717b54457e2c68d9d24dcb4fad9b50a Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sun, 25 May 2025 13:51:36 +0200
Subject: [PATCH] [react] feat: Added docs for components/Number

---
 packages/react/components/Number/index.mjs    | 13 +++++++++++--
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/number/_examples.js      | 19 +++++++++++++++++++
 .../react/components/number/readme.mdx        | 18 +++++++++++++++---
 4 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/number/_examples.js

diff --git a/packages/react/components/Number/index.mjs b/packages/react/components/Number/index.mjs
index ec47f5da623..6f06a05dfaf 100644
--- a/packages/react/components/Number/index.mjs
+++ b/packages/react/components/Number/index.mjs
@@ -1,10 +1,19 @@
 import React from 'react'
 
+/**
+ * A component to display a number or character inside a circle
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number|string} props.nr - The number to display
+ * @param {string} [props.color = secondary] - One of the DaisyUI color names
+ * @returns {JSX.Element}
+ */
 export const NumberCircle = ({ nr, color = 'secondary' }) => (
   <span
-    className={`p-2 w-8 h-8 flex flex-col items-center justify-center shrink-0 rounded-full text-center p-0 py-2 bg-${
+    className={`tw:p-2 tw:w-8 tw:h-8 tw:flex tw:flex-col tw:items-center tw:justify-center tw:shrink-0 tw:rounded-full tw:text-center tw:p-0 tw:py-2 tw:bg-${
       color
-    } text-${color}-content border-2 border-base-100`}
+    } tw:text-${color}-content tw:border-2 tw:border-base-100`}
   >
     {nr}
   </span>
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index 93a796e3982..3dc11d45ee0 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -25,3 +25,4 @@ jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/com
 jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json
 jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json
 jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json
+jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json
diff --git a/sites/dev/docs/reference/packages/react/components/number/_examples.js b/sites/dev/docs/reference/packages/react/components/number/_examples.js
new file mode 100644
index 00000000000..729936f7195
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/number/_examples.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import { NumberCircle } from '@freesewing/react/components/Number'
+
+const colors = ['primary', 'secondary', 'accent', 'neutral', 'success', 'warning', 'error', 'info']
+
+export const NumberCircleExample = () => (
+  <div className="tw:flex tw:flex-col tw:flex-wrap tw:gap-2 tw:items-start">
+    <div className="tw:p-2">
+      <b>Default props</b>
+      <NumberCircle nr="1" />
+    </div>
+    {colors.map((c, i) => (
+      <div className="tw:p-2" key={i}>
+        <b>color = {c}</b>
+        <NumberCircle nr={i} color={c}/>
+      </div>
+    ))}
+  </div>
+)
diff --git a/sites/dev/docs/reference/packages/react/components/number/readme.mdx b/sites/dev/docs/reference/packages/react/components/number/readme.mdx
index fa7f304f082..7460ea17e6c 100644
--- a/sites/dev/docs/reference/packages/react/components/number/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/number/readme.mdx
@@ -1,7 +1,19 @@
 ---
 title: Number
 ---
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.number.mjs'
+import { NumberCircleExample } from './_examples.js'
 
-:::note
-This page is yet to be created
-:::
+
+<DocusaurusDoc>
+
+The __Number__ component family provides the following components:
+
+- [NumberCircle](#numbercircle)
+
+## NumberCircle
+<ComponentDocs docs={jsdoc.jsdocNumberCircle} example={NumberCircleExample} />
+
+</DocusaurusDoc>