From 5ec2a2a1da9b8230aeeef7664445b3f658b1edc6 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Fri, 9 May 2025 17:47:03 +0200
Subject: [PATCH] [react] feat: Added docs for components/Admin

---
 packages/react/components/Admin/index.mjs     |  26 ++-
 packages/react/mkdocs.sh                      |   1 +
 .../react/components/account/_examples.js     |  70 ++++++-
 .../react/components/account/readme.mdx       | 173 +++++++++++++-----
 .../react/components/admin/readme.mdx         |  31 +++-
 .../react/components/button/_examples.js      |   5 +-
 sites/dev/src/components/component-docs.js    |  19 +-
 7 files changed, 255 insertions(+), 70 deletions(-)

diff --git a/packages/react/components/Admin/index.mjs b/packages/react/components/Admin/index.mjs
index 06781d5d447..cc3c94da275 100644
--- a/packages/react/components/Admin/index.mjs
+++ b/packages/react/components/Admin/index.mjs
@@ -18,7 +18,13 @@ import { Markdown } from '@freesewing/react/components/Markdown'
 import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { AccountStatus, UserRole } from '@freesewing/react/components/Account'
 
-export const SubscriberAdministration = ({ page }) => {
+/**
+ * A component to manage FreeSewing newsletter subscribers (requires admin role)
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
+export const SubscriberAdministration = () => {
   const [subscribers, setSubscribers] = useState()
   const [q, setQ] = useState()
   const [hits, setHits] = useState([])
@@ -106,6 +112,14 @@ export const SubscriberAdministration = ({ page }) => {
   )
 }
 
+/**
+ * A component to manage FreeSewing users (requires the admin role)
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
+ */
 export const UserAdministration = ({ Link = false }) => {
   const backend = useBackend()
 
@@ -154,7 +168,7 @@ export const UserAdministration = ({ Link = false }) => {
   )
 }
 
-export const Hits = ({ results, Link = false }) => {
+const Hits = ({ results, Link = false }) => {
   if (!Link) Link = WebLink
 
   return (
@@ -179,7 +193,7 @@ export const Hits = ({ results, Link = false }) => {
   )
 }
 
-export const User = ({ user, Link }) => {
+const User = ({ user, Link }) => {
   const { setModal } = useContext(ModalContext)
   const { setLoadingStatus } = useContext(LoadingStatusContext)
   const backend = useBackend()
@@ -274,7 +288,7 @@ export const User = ({ user, Link }) => {
   )
 }
 
-export const ImpersonateButton = ({ userId }) => {
+const ImpersonateButton = ({ userId }) => {
   const backend = useBackend()
   const { setLoadingStatus } = useContext(LoadingStatusContext)
   const { impersonate } = useAccount()
@@ -300,14 +314,14 @@ export const ImpersonateButton = ({ userId }) => {
   )
 }
 
-export const Row = ({ title, val }) => (
+const Row = ({ title, val }) => (
   <tr className="py-1">
     <td className="text-sm px-2 text-right font-bold">{title}</td>
     <td className="text-sm">{val}</td>
   </tr>
 )
 
-export const ManageUser = ({ userId }) => {
+const ManageUser = ({ userId }) => {
   // Hooks
   const backend = useBackend()
   const { setLoadingStatus } = useContext(LoadingStatusContext)
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index 6884d49772b..98c34734b6f 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -2,4 +2,5 @@
 mkdir -p ./docs/components
 
 jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json
+jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.json
 jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json
diff --git a/sites/dev/docs/reference/packages/react/components/account/_examples.js b/sites/dev/docs/reference/packages/react/components/account/_examples.js
index 42beab42cf3..4937246d6be 100644
--- a/sites/dev/docs/reference/packages/react/components/account/_examples.js
+++ b/sites/dev/docs/reference/packages/react/components/account/_examples.js
@@ -21,6 +21,23 @@ import {
   MsetCard,
   NewSet as NewSetExample,
   Newsletter as NewsletterExample,
+  Password as PasswordExample,
+  Pattern,
+  PatternCard,
+  Patterns as PatternsExample,
+  Reddit as RedditExample,
+  Reload as ReloadExample,
+  Remove as RemoveExample,
+  Restrict as RestrictExample,
+  Set as SetExample,
+  Sets as SetsExample,
+  Tiktok as TiktokExample,
+  Twitch as TwitchExample,
+  Units as UnitsExample,
+  UserId as UserIdExample,
+  Username as UsernameExample,
+  UserRole as UserRoleExample,
+  Website as WebsiteExample,
 } from '@freesewing/react/components/Account'
 
 const AccountStatusExample = () => (
@@ -32,10 +49,30 @@ const AccountStatusExample = () => (
       </tr>
     </thead>
     <tbody>
-      <tr><td>-2</td><td><AccountStatus status={-2} /></td></tr>
-      <tr><td>-1</td><td><AccountStatus status={-1} /></td></tr>
-      <tr><td>0</td><td><AccountStatus status={0} /></td></tr>
-      <tr><td>1</td><td><AccountStatus status={1} /></td></tr>
+      <tr>
+        <td>-2</td>
+        <td>
+          <AccountStatus status={-2} />
+        </td>
+      </tr>
+      <tr>
+        <td>-1</td>
+        <td>
+          <AccountStatus status={-1} />
+        </td>
+      </tr>
+      <tr>
+        <td>0</td>
+        <td>
+          <AccountStatus status={0} />
+        </td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>
+          <AccountStatus status={1} />
+        </td>
+      </tr>
     </tbody>
   </table>
 )
@@ -48,9 +85,10 @@ const BookmarkButtonExample = () => (
   />
 )
 
-const MsetCardExample = () => (
-  <MsetCard set={{ name: 'Example Set'}} />
-)
+const MsetCardExample = () => <MsetCard set={{ name: 'Example Set' }} />
+
+const PatternExample = () => <Pattern id={1} />
+const PatternCardExample = () => <PatternCard pattern={{ name: 'Example pattern' }} size="sm" />
 
 export {
   AccountStatusExample,
@@ -74,5 +112,21 @@ export {
   MsetCardExample,
   NewSetExample,
   NewsletterExample,
+  PasswordExample,
+  PatternExample,
+  PatternCardExample,
+  PatternsExample,
+  RedditExample,
+  ReloadExample,
+  RemoveExample,
+  RestrictExample,
+  SetExample,
+  SetsExample,
+  TiktokExample,
+  TwitchExample,
+  UnitsExample,
+  UserIdExample,
+  UsernameExample,
+  UserRoleExample,
+  WebsiteExample,
 }
-
diff --git a/sites/dev/docs/reference/packages/react/components/account/readme.mdx b/sites/dev/docs/reference/packages/react/components/account/readme.mdx
index 2756140513c..1289cc344ad 100644
--- a/sites/dev/docs/reference/packages/react/components/account/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/account/readme.mdx
@@ -4,7 +4,7 @@ title: Account
 
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
-import { MiniNote} from '@freesewing/react/components/Mini'
+import { MiniNote } from '@freesewing/react/components/Mini'
 import {
   jsdocAccountStatus as jsdocAccount,
   jsdocAccountStatus,
@@ -28,6 +28,23 @@ import {
   jsdocMsetCard,
   jsdocNewSet,
   jsdocNewsletter,
+  jsdocPassword,
+  jsdocPattern,
+  jsdocPatternCard,
+  jsdocPatterns,
+  jsdocReddit,
+  jsdocReload,
+  jsdocRemove,
+  jsdocRestrict,
+  jsdocSet,
+  jsdocSets,
+  jsdocTiktok,
+  jsdocTwitch,
+  jsdocUnits,
+  jsdocUserId,
+  jsdocUsername,
+  jsdocUserRole,
+  jsdocWebsite,
 } from '@site/prebuild/jsdoc/components.account.mjs'
 import {
   AccountStatusExample,
@@ -51,154 +68,224 @@ import {
   MsetCardExample,
   NewSetExample,
   NewsletterExample,
+  PasswordExample,
+  PatternExample,
+  PatternCardExample,
+  PatternsExample,
+  RedditExample,
+  ReloadExample,
+  RemoveExample,
+  RestrictExample,
+  SetExample,
+  SetsExample,
+  TiktokExample,
+  TwitchExample,
+  UnitsExample,
+  UserIdExample,
+  UsernameExample,
+  UserRoleExample,
+  WebsiteExample,
 } from './_examples.js'
 
 <DocusaurusDoc>
 
 The **Account** component family provides the following components:
 
-- [AccountStatus          ](#accountstatus)
-- [Apikeys                ](#apikeys)
-- [Avatar                 ](#avatar)
-- [Bio                    ](#bio)
-- [BookmarkButton         ](#bookmarkbutton)
-- [Bookmarks              ](#bookmarks)
-- [Compare                ](#compare)
-- [Consent                ](#consent)
-- [Control                ](#control)
-- [Email                  ](#email)
+- [AccountStatus ](#accountstatus)
+- [Apikeys ](#apikeys)
+- [Avatar ](#avatar)
+- [Bio ](#bio)
+- [BookmarkButton ](#bookmarkbutton)
+- [Bookmarks ](#bookmarks)
+- [Compare ](#compare)
+- [Consent ](#consent)
+- [Control ](#control)
+- [Email ](#email)
 - [EmailChangeConfirmation](#emailchanfirmation)
-- [Export                 ](#export)
-- [Github                 ](#github)
-- [ImportSet              ](#importset)
-- [Instagram              ](#instagram)
-- [Links                  ](#links)
-- [Mastodon               ](#mastodon)
-- [Mfa                    ](#mfa)
-- [MsetCard               ](#msetcard)
-- [NewSet                 ](#newset)
-- [Newsletter             ](#newslett)
-- [Password               ](#password)
-- [Pattern                ](#pattern)
-- [PatternCard            ](#patterncard)
-- [Patterns               ](#patterns)
-- [Reddit                 ](#reddit)
-- [Reload                 ](#reload)
-- [Remove                 ](#remove)
-- [Restrict               ](#restrict)
-- [Set                    ](#set)
-- [Sets                   ](#sets)
-- [Tiktok                 ](#tiktok)
-- [Twitch                 ](#twitch)
-- [Units                  ](#units)
-- [UserId                 ](#userid)
-- [Username               ](#username)
-- [UserRole               ](#userrole)
-- [Website                ](#website)
-
+- [Export ](#export)
+- [Github ](#github)
+- [ImportSet ](#importset)
+- [Instagram ](#instagram)
+- [Links ](#links)
+- [Mastodon ](#mastodon)
+- [Mfa ](#mfa)
+- [MsetCard ](#msetcard)
+- [NewSet ](#newset)
+- [Newsletter ](#newslett)
+- [Password ](#password)
+- [Pattern ](#pattern)
+- [PatternCard ](#patterncard)
+- [Patterns ](#patterns)
+- [Reddit ](#reddit)
+- [Reload ](#reload)
+- [Remove ](#remove)
+- [Restrict ](#restrict)
+- [Set ](#set)
+- [Sets ](#sets)
+- [Tiktok ](#tiktok)
+- [Twitch ](#twitch)
+- [Units ](#units)
+- [UserId ](#userid)
+- [Username ](#username)
+- [UserRole ](#userrole)
+- [Website ](#website)
 
 ## AccountStatus
+
 <ComponentDocs docs={jsdocAccountStatus} example={AccountStatusExample} />
 
 ## Apikeys
+
 <ComponentDocs docs={jsdocApikeys} example={ApikeysExample} />
 
 ## Avatar
+
 <ComponentDocs docs={jsdocAvatar} example={AvatarExample} />
 
 ## Bio
+
 <ComponentDocs docs={jsdocBio} example={BioExample} />
 
 ## BookmarkButton
+
 <ComponentDocs docs={jsdocBookmarkButton} example={BookmarkButtonExample} />
 
 ## Bookmarks
+
 <ComponentDocs docs={jsdocBookmarks} example={BookmarksExample} />
 
 ## Compare
+
 <ComponentDocs docs={jsdocCompare} example={CompareExample} />
 
 ## Consent
+
 <ComponentDocs docs={jsdocConsent} example={ConsentExample} />
 
 ## Control
+
 <ComponentDocs docs={jsdocControl} example={ControlExample} />
 
 ## Email
+
 <ComponentDocs docs={jsdocEmail} example={EmailExample} />
 
 ## EmailChangeConfirmation
+
 <MiniNote>
-#### Requires a valid callback URL
-This component will not work without the proper <code>id</code> and <code>check</code> URL paramters
-that come from a email confirmation link sent out from the FreeSewing backend.
+  #### Requires a valid callback URL This component will not work without the proper <code>id</code>{' '}
+  and <code>check</code> URL paramters that come from a email confirmation link sent out from the
+  FreeSewing backend.
 </MiniNote>
 
 <ComponentDocs docs={jsdocEmailChangeConfirmation} example={EmailChangeConfirmationExample} />
 
 ## Export
+
 <ComponentDocs docs={jsdocExport} example={ExportExample} />
 
 ## Github
+
 <ComponentDocs docs={jsdocGithub} example={GithubExample} />
 
 ## ImportSet
+
 <ComponentDocs docs={jsdocImportSet} example={ImportSetExample} />
 
 ## Instagram
+
 <ComponentDocs docs={jsdocInstagram} example={InstagramExample} />
 
 ## Links
+
 <ComponentDocs docs={jsdocLinks} example={LinksExample} />
 
 ## Mastodon
+
 <ComponentDocs docs={jsdocMastodon} example={MastodonExample} />
 
 ## Mfa
+
 <ComponentDocs docs={jsdocMfa} example={MfaExample} />
 
 ## MsetCard
+
 <ComponentDocs docs={jsdocMsetCard} example={MsetCardExample} />
 
 ## NewSet
+
 <ComponentDocs docs={jsdocNewSet} example={NewSetExample} />
 
 ## Newsletter
+
 <ComponentDocs docs={jsdocNewsletter} example={NewsletterExample} />
 
 ## Password
 
+<ComponentDocs docs={jsdocPassword} example={PasswordExample} />
+
 ## Pattern
 
+<ComponentDocs docs={jsdocPattern} example={PatternExample} />
+
 ## PatternCard
 
+<ComponentDocs docs={jsdocPatternCard} example={PatternCardExample} />
+
 ## Patterns
 
+<ComponentDocs docs={jsdocPatterns} example={PatternsExample} />
+
 ## Reddit
 
+<ComponentDocs docs={jsdocReddit} example={RedditExample} />
+
 ## Reload
 
+<ComponentDocs docs={jsdocReload} example={ReloadExample} />
+
 ## Remove
 
+<ComponentDocs docs={jsdocRemove} example={RemoveExample} />
+
 ## Restrict
 
+<ComponentDocs docs={jsdocRestrict} example={RestrictExample} />
+
 ## Set
 
+<ComponentDocs docs={jsdocSet} example={SetExample} />
+
 ## Sets
 
+<ComponentDocs docs={jsdocSets} example={SetsExample} />
+
 ## Tiktok
 
+<ComponentDocs docs={jsdocTiktok} example={TiktokExample} />
+
 ## Twitch
 
+<ComponentDocs docs={jsdocTwitch} example={TwitchExample} />
+
 ## Units
 
+<ComponentDocs docs={jsdocUnits} example={UnitsExample} />
+
 ## UserId
 
+<ComponentDocs docs={jsdocUserId} example={UserIdExample} />
+
 ## Username
 
+<ComponentDocs docs={jsdocUsername} example={UsernameExample} />
+
 ## UserRole
 
+<ComponentDocs docs={jsdocUserRole} example={UserRoleExample} />
+
 ## Website
 
-</DocusaurusDoc>
+<ComponentDocs docs={jsdocWebsite} example={WebsiteExample} />
 
+</DocusaurusDoc>
diff --git a/sites/dev/docs/reference/packages/react/components/admin/readme.mdx b/sites/dev/docs/reference/packages/react/components/admin/readme.mdx
index 4c333d24f6d..1501ee4d0f9 100644
--- a/sites/dev/docs/reference/packages/react/components/admin/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/admin/readme.mdx
@@ -2,6 +2,31 @@
 title: Admin
 ---
 
-:::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 {
+  jsdocSubscriberAdministration,
+  jsdocUserAdministration,
+} from '@site/prebuild/jsdoc/components.admin.mjs'
+import {
+  UserAdministration,
+  SubscriberAdministration
+} from '@freesewing/react/components/Admin'
+
+<DocusaurusDoc>
+
+The **Admin** component family provides the following components:
+
+- [SubscriberAdministration ](#subscriberadministration)
+- [UserAdministration ](#useradministration)
+
+## SubscriberAdministration
+
+<ComponentDocs docs={jsdocSubscriberAdministration} example={SubscriberAdministration} />
+
+## UserAdministration
+
+<ComponentDocs docs={jsdocUserAdministration} example={UserAdministration} />
+
+</DocusaurusDoc>
+
diff --git a/sites/dev/docs/reference/packages/react/components/button/_examples.js b/sites/dev/docs/reference/packages/react/components/button/_examples.js
index 60572763547..a1b670443d5 100644
--- a/sites/dev/docs/reference/packages/react/components/button/_examples.js
+++ b/sites/dev/docs/reference/packages/react/components/button/_examples.js
@@ -6,9 +6,7 @@ import { MiniNote } from '@freesewing/react/components/Mini'
 
 export const IconButtonExample = () => (
   <>
-    <MiniNote>
-      Note that this component will take up the full width made available to it.
-    </MiniNote>
+    <MiniNote>Note that this component will take up the full width made available to it.</MiniNote>
     <Highlight language="js">
       {[
         `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
@@ -36,4 +34,3 @@ export const IconButtonExample = () => (
     </IconButton>
   </>
 )
-
diff --git a/sites/dev/src/components/component-docs.js b/sites/dev/src/components/component-docs.js
index eb7d141d48a..00512c6cdd3 100644
--- a/sites/dev/src/components/component-docs.js
+++ b/sites/dev/src/components/component-docs.js
@@ -6,7 +6,8 @@ import { IconButton } from '@freesewing/react/components/Button'
 import { MiniNote } from '@freesewing/react/components/Mini'
 
 export const ComponentDocs = ({ docs, example }) => {
-  const Example = example ||  null
+  if (!docs) return <MiniNote>No docs passed in</MiniNote>
+  const Example = example || null
   return (
     <>
       <p>{docs.desc}</p>
@@ -19,10 +20,14 @@ export const ComponentDocs = ({ docs, example }) => {
           <Highlight language="js">{docs.importAs}</Highlight>
         </Tab>
         <Tab>
-          {docs.params
-            ? <p> The <code>{docs.name}</code> component takes the following props:</p>
-            : <MiniNote>This component does not take any props</MiniNote>
-          }
+          {docs.params ? (
+            <p>
+              {' '}
+              The <code>{docs.name}</code> component takes the following props:
+            </p>
+          ) : (
+            <MiniNote>This component does not take any props</MiniNote>
+          )}
           {docs.params ? <PropsTable docs={docs} /> : null}
         </Tab>
         <Tab>
@@ -68,7 +73,9 @@ const PropsTable = ({ docs }) => (
           <td>{prop.description}</td>
           <td>{prop.optional ? 'yes' : 'no'}</td>
           <td>
-            <code><DefaultPropValue value={prop.defaultvalue} /></code>
+            <code>
+              <DefaultPropValue value={prop.defaultvalue} />
+            </code>
           </td>
         </tr>
       ))}