From f92a182992855b2afea54ebb8d9697d3f339c3da Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Thu, 29 May 2025 12:35:43 +0200
Subject: [PATCH] [react] feat: Added docs for components/Tab

---
 packages/react/components/Tab/index.mjs       | 29 +++++++++++++------
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/tab/_examples.js         | 12 ++++++++
 .../packages/react/components/tab/readme.mdx  | 28 ++++++++++++++++--
 4 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 sites/dev/docs/reference/packages/react/components/tab/_examples.js

diff --git a/packages/react/components/Tab/index.mjs b/packages/react/components/Tab/index.mjs
index 7c430fbe0f3..d973e458961 100644
--- a/packages/react/components/Tab/index.mjs
+++ b/packages/react/components/Tab/index.mjs
@@ -4,12 +4,17 @@ import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { KioskIcon } from '@freesewing/react/components/Icon'
 
 /**
- * FreeSewing Tabs component, typically used for dev examples
+ * A component to render Tabs, typically used for dev examples.
  *
- * @param {string} tabs - The list of tabs
- * @param {number} active - The nr of the active tab
- * @param {array} children - Content to render within the tabs
- * @param {bool} withModal - Set to true to load tab content in a modal window when kiosk icon is clicked
+ * Note that children MUST be at least two Tab components.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.tabs - The list of tabs
+ * @param {number} [props.active = 0] - The index of the active tab
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @param {bool} [props.withModal = false] - Set to true to load tab content in a modal window when kiosk icon is clicked
+ * @returns {JSX.Element}
  */
 export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) => {
   const { setModal } = useContext(ModalContext)
@@ -72,10 +77,16 @@ export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) =>
 }
 
 /**
- * FreeSewing Tab component, use it together with Tabs
+ * A component to render an individual Tab inside Tabs.
  *
- * @param {number} tabId - The ID of this tab
- * @param {number} activeTab - The ID of the active tab
- * @param {array} children - Content to render within the tab
+ * You should not use this component directly, or pass any props to it apart from children.
+ * Instead, use them as direct children in the Tabs component.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} props.activeTab - The id/index of the active tab (do not set this manually)
+ * @param {number} props.tabId - The id/index of this tab (do not set this manually)
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
  */
 export const Tab = ({ children, tabId, activeTab }) => (activeTab === tabId ? children : null)
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index 82fda19e5bf..57a9ecf4eb1 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -36,3 +36,4 @@ jsdoc -c jsdoc.json components/SignIn/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/SignUp/* > ../../sites/dev/prebuild/jsdoc/react/components/signup.json
 jsdoc -c jsdoc.json components/Spinner/* > ../../sites/dev/prebuild/jsdoc/react/components/spinner.json
 jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/components/stats.json
+jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json
diff --git a/sites/dev/docs/reference/packages/react/components/tab/_examples.js b/sites/dev/docs/reference/packages/react/components/tab/_examples.js
new file mode 100644
index 00000000000..e1a28a6ca17
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/tab/_examples.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Tab, Tabs } from '@freesewing/react/components/Tab'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const TabExample = () => <MiniNote>Do not use a Tab component on its own, but only as direct children of a Tabs component.</MiniNote>
+export const TabsExample = () => (
+  <Tabs tabs="Apple, Banana, Coconut">
+    <Tab>Apple tab</Tab>
+    <Tab>Banana tab</Tab>
+    <Tab>Coconut tab</Tab>
+  </Tabs>
+)
diff --git a/sites/dev/docs/reference/packages/react/components/tab/readme.mdx b/sites/dev/docs/reference/packages/react/components/tab/readme.mdx
index 27206fabb08..2493891cd4e 100644
--- a/sites/dev/docs/reference/packages/react/components/tab/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/tab/readme.mdx
@@ -2,6 +2,28 @@
 title: Tab
 ---
 
-:::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.tab.mjs'
+import { TabExample, TabsExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Tab** component family provides the following components:
+
+- [Tab](#tab)
+- [Tabs](#tabs)
+
+### Tab
+
+<ComponentDocs docs={jsdoc.jsdocTab} example={TabExample} />
+
+### Tabs
+
+<ComponentDocs docs={jsdoc.jsdocTabs} example={TabsExample} />
+
+</DocusaurusDoc>