[react] feat: Added docs for components/Profile

packages/react/components/Profile/index.mjs

@@ -14,31 +14,36 @@ import { MiniWarning } from '@freesewing/react/components/Mini'
 import { KeyVal } from '@freesewing/react/components/KeyVal'
 import Markdown from 'react-markdown'
 
-/*
+/**
- * Component for the currently authenticated user's profile
+ * A component for to display the current user's profile.
  *
- * @params {object} props - All React props
+ * @component
- * @param {number} props.uid - The user ID for which to show the profile
+ * @param {object} props - All component props
- * @param {function} props.Link - An optional framework-specific Link component
+ * @param {React.FC} [props.Link = false] - An optional framework-specific Link component
+ * @param {function} [props.setTitle = false] - An optional method to set the page title
+ * @returns {JSX.Element}
  */
 export const OwnProfile = (props) => {
   const { account } = useAccount()
 
-  return <UserProfile uid={account.id} {...props} />
+  return <UserProfile {...props} uid={account.id} />
 }
 
-/*
+/**
- * Component for a user profile
+ * A component for to display a user profile. Either props.uid or props.fromUrl should be set.
  *
- * @params {object} props - All React props
+ * @component
- * @param {number} props.uid - The user ID for which to show the profile
+ * @param {object} props - All component props
- * @param {function} props.Link - An optional framework-specific Link component
+ * @param {boolean} [props.fromUrl = false] - Set this to the nbame of the search parameters in the URL to extract the UID from
+ * @param {React.FC} [props.Link = false] - An optional framework-specific Link component
+ * @param {function} [props.setTitle = false] - An optional method to set the page title
+ * @param {number} [props.uid = false] - The user ID for which to show the profile
+ * @returns {JSX.Element}
  */
 export const UserProfile = ({
   Link = false,
   setTitle = false,
   uid = false,
-  noBox = false,
   fromUrl = false,
 }) => {
   if (!uid && !fromUrl)
@@ -85,10 +90,12 @@ export const UserProfile = ({
   )
 }
 
-/*
+/**
- * Shows an avatar image
+ * A component to render an avatar image
  *
+ * @component
  * @param {string} ihash - The ihash of the account
+ * @returns {JSX.Element}
  */
 export const Avatar = ({ ihash }) => {
   const { setModal } = useContext(ModalContext)

packages/react/mkdocs.sh

@@ -30,3 +30,4 @@ jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/Patrons/* > ../../sites/dev/prebuild/jsdoc/react/components/patrons.json
 jsdoc -c jsdoc.json components/Pattern/* > ../../sites/dev/prebuild/jsdoc/react/components/pattern.json
 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

sites/dev/docs/reference/packages/react/components/profile/_examples.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import { Avatar, OwnProfile, UserProfile } from '@freesewing/react/components/Profile'
+
+export const AvatarExample = () => <Avatar ihash="7bf3d6a154885eb2c4f56e2bf54b3666d8fb634b72c07c971511816ed0298c79" />
+
+export const OwnProfileExample = OwnProfile
+export const UserProfileExample = () => <UserProfile uid={1} />

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

@@ -2,6 +2,33 @@
 title: Profile
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { ComponentDocs } from '@site/src/components/component-docs.js'
-:::
+import * as jsdoc from '@site/prebuild/jsdoc/components.profile.mjs'
+import { AvatarExample, OwnProfileExample, UserProfileExample } from './_examples.js'
+
+<DocusaurusDoc>
+
+- [Components](#components)
+
+## Components
+
+The **Json** component family provides the following components:
+
+- [Avatar](#avatar)
+- [OwnProfile](#ownprofile)
+- [UserProfile](#userprofile)
+
+### Avatar
+
+<ComponentDocs docs={jsdoc.jsdocAvatar} example={AvatarExample} />
+
+### OwnProfile
+
+<ComponentDocs docs={jsdoc.jsdocOwnProfile} example={OwnProfileExample} />
+
+### UserProfile
+
+<ComponentDocs docs={jsdoc.jsdocUserProfile} example={UserProfileExample} />
+
+</DocusaurusDoc>