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

---
 packages/react/components/SignUp/index.mjs    | 21 ++++++++++++++
 packages/react/mkdocs.sh                      |  1 +
 .../react/components/signup/readme.mdx        | 29 +++++++++++++++++--
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/packages/react/components/SignUp/index.mjs b/packages/react/components/SignUp/index.mjs
index b1c426c69ea..c26e838ae00 100644
--- a/packages/react/components/SignUp/index.mjs
+++ b/packages/react/components/SignUp/index.mjs
@@ -27,7 +27,16 @@ import { EmailInput } from '@freesewing/react/components/Input'
 import { IconButton } from '@freesewing/react/components/Button'
 import { Spinner } from '@freesewing/react/components/Spinner'
 import { Consent } from '@freesewing/react/components/Account'
+import { Popout } from '@freesewing/react/components/Popout'
 
+/**
+ * The SignUp component holds the entire sign-up form
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {boolean} [props.embed = false] - Set this tot rue to use a H2 level heading instead of H1 so the form can be embedded in an existing page
+ * @returns {JSX.Element}
+ */
 export const SignUp = ({ embed = false }) => {
   // State
   const [email, setEmail] = useState('')
@@ -186,19 +195,31 @@ export const SignUp = ({ embed = false }) => {
   )
 }
 
+/**
+ * A component to handle the confirmation URL for a passwordless signup link (aka magic link).
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {function} [props.onSuccess = false] - A method to run when the sign in is successful
+ * @returns {JSX.Element}
+ */
 export const SignUpConfirmation = ({ onSuccess = false }) => {
   // State
   const [id, setId] = useState()
+  const [error, setError] = useState(false)
   const [check, setCheck] = useState()
 
   // Effects
   useEffect(() => {
     const newId = getSearchParam('id')
+    if (!newId) setError('noId')
     const newCheck = getSearchParam('check')
     if (newId !== id) setId(newId)
     if (newCheck !== check) setCheck(newCheck)
   }, [id, check])
 
+  // Short-circuit errors
+  if (error === 'noId') return <Popout type="error" title="Invalid Sign Up URL">You seem to have arrived on this page in a way that is not supported</Popout>
   // If we do not (yet) have the data, show a loader
   if (!id || !check)
     return (
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index c39c3730b9d..c78e7e8b19f 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -33,3 +33,4 @@ jsdoc -c jsdoc.json components/Popout/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/Profile/* > ../../sites/dev/prebuild/jsdoc/react/components/profile.json
 jsdoc -c jsdoc.json components/Role/* > ../../sites/dev/prebuild/jsdoc/react/components/role.json
 jsdoc -c jsdoc.json components/SignIn/* > ../../sites/dev/prebuild/jsdoc/react/components/signin.json
+jsdoc -c jsdoc.json components/SignUp/* > ../../sites/dev/prebuild/jsdoc/react/components/signup.json
diff --git a/sites/dev/docs/reference/packages/react/components/signup/readme.mdx b/sites/dev/docs/reference/packages/react/components/signup/readme.mdx
index fa4e3a9cd48..c061147974c 100644
--- a/sites/dev/docs/reference/packages/react/components/signup/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/signup/readme.mdx
@@ -2,6 +2,29 @@
 title: SignUp
 ---
 
-:::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.signup.mjs'
+import { SignUp, SignUpConfirmation } from '@freesewing/react/components/SignUp'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **SignUp** component family provides the following components:
+
+- [SignUp](#signup)
+- [SignUpConfirmation](#signupconfirmation)
+
+### SignUp
+
+<ComponentDocs docs={jsdoc.jsdocSignUp} example={SignUp} />
+
+### SignUpConfirmation
+
+<ComponentDocs docs={jsdoc.jsdocSignUpConfirmation} example={SignUpConfirmation} />
+
+</DocusaurusDoc>
+