[react] feat: Added docs for components/Admin

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)

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

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,
 }
-

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

@@ -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,6 +68,23 @@ 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>
@@ -96,109 +130,162 @@ The **Account** component family provides the following components:
 - [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>

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>
+

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>
   </>
 )
-

sites/dev/src/components/component-docs.js

@@ -6,6 +6,7 @@ import { IconButton } from '@freesewing/react/components/Button'
 import { MiniNote } from '@freesewing/react/components/Mini'
 
 export const ComponentDocs = ({ docs, example }) => {
+  if (!docs) return <MiniNote>No docs passed in</MiniNote>
   const Example = example || null
   return (
     <>
@@ -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>
       ))}