[react] feat: Added docs for components/SignIn

packages/react/components/SignIn/index.mjs

@@ -30,11 +30,18 @@ import { MfaInput, StringInput, PasswordInput } from '@freesewing/react/componen
 import { H1, H2, H3, H4 } from '@freesewing/react/components/Heading'
 
 /*
- * This SignIn component holds the entire sign-in form
  *
  * @param {object} props - All React props
- * @param {function} props.onSuccess - Optional: A method to run when the sign in is successful
- * @param {function} props.silent - Optional: Silently login the user if we have a valid session
+ */
+
+/**
+ * The SignIn component holds the entire sign-in form
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {function} [props.onSuccess = false] - A method to run when the sign in is successful
+ * @param {boolean} [props.silent] - Silently login the user if we have a valid session
+ * @returns {JSX.Element}
  */
 export const SignIn = ({ onSuccess = false, silent = false }) => {
   const { account, setAccount, setToken, seenUser, setSeenUser } = useAccount()
@@ -331,6 +338,14 @@ const MfaForm = ({ mfaCode, setMfaCode, onSubmit, post = [] }) => (
   </WrapForm>
 )
 
+/**
+ * A component to handle the confirmation URL for a passwordless login 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 SignInConfirmation = ({ onSuccess = false }) => {
   // State
   const [error, setError] = useState(false)
@@ -349,6 +364,7 @@ export const SignInConfirmation = ({ onSuccess = false }) => {
   // Effects
   useEffect(() => {
     const newId = getSearchParam('id')
+    if (!newId) setError('noId')
     const newCheck = getSearchParam('check')
     if (newId !== id) setId(newId)
     if (newCheck !== check) setCheck(newCheck)
@@ -396,6 +412,7 @@ export const SignInConfirmation = ({ onSuccess = false }) => {
   }
 
   // Short-circuit errors
+  if (error === 'noId') return <Popout type="error" title="Invalid Sign In URL">You seem to have arrived on this page in a way that is not supported</Popout>
   if (error && mfa)
     return error === 'signInFailed' ? (
       <>
@@ -425,47 +442,3 @@ export const SignInConfirmation = ({ onSuccess = false }) => {
 
   return <p>fixme</p>
 }
-
-/*
- * This is the generic component that will handle the Oauth callback
- */
-export const OauthCallback = ({ provider = false }) => {
-  const [error, setError] = useState(false)
-  const backend = useBackend()
-  const { setAccount, setToken, setSeenUser } = useAccount()
-
-  // Handle callback
-  useEffect(() => {
-    const oauthFlow = async () => {
-      const state = getSearchParam('state')
-      const code = getSearchParam('state')
-      const [status, body] = await backend.oauthSignIn({ state, code, provider })
-      if (status === 200 && body.account && body.token) {
-        setAccount(body.account)
-        setToken(body.token)
-        setSeenUser(body.data.account.username)
-        navigate('/welcome', true)
-      } else setError(true)
-    }
-    oauthFlow()
-  }, [])
-
-  if (!provider) return <p>You must provide a provider prop to this component</p>
-
-  return error ? (
-    <>
-      <h2>Oh no, something went wrong</h2>
-      <p>
-        Please{' '}
-        <Link className={linkClasses} href="/support">
-          escalate this to support
-        </Link>
-      </p>
-    </>
-  ) : (
-    <>
-      <h2>One moment please</h2>
-      <Spinner className="tw:w-8 tw:h-8 tw:m-auto tw:animate-spin" />
-    </>
-  )
-}

packages/react/mkdocs.sh

@@ -32,3 +32,4 @@ jsdoc -c jsdoc.json components/Pattern/* > ../../sites/dev/prebuild/jsdoc/react/
 jsdoc -c jsdoc.json components/Popout/* > ../../sites/dev/prebuild/jsdoc/react/components/popout.json
 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

sites/dev/docs/reference/packages/react/components/signin/readme.mdx

@@ -2,6 +2,29 @@
 title: SignIn
 ---
 
-:::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.signin.mjs'
+import { SignIn, SignInConfirmation } from '@freesewing/react/components/SignIn'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **SignIn** component family provides the following components:
+
+- [SignIn](#signin)
+- [SignInConfirmation](#signinconfirmation)
+
+### SignIn
+
+<ComponentDocs docs={jsdoc.jsdocSignIn} example={SignIn} />
+
+### SignInConfirmation
+
+<ComponentDocs docs={jsdoc.jsdocSignInConfirmation} example={SignInConfirmation} />
+
+</DocusaurusDoc>
+