[react] feat: Added docs for components/Patrons

packages/react/components/Patrons/index.mjs

@@ -4,6 +4,18 @@ import { linkClasses } from '@freesewing/utils'
 import React, { useEffect, useState } from 'react'
 import { useAccount } from '@freesewing/react/hooks/useAccount'
 
+/**
+ * A component to ask people to support FreeSewing financially
+ *
+ * This component will pass down all props to the Subscribe component
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {boolean} [props.dense = undefined] - Whether to render a more dense view
+ * @param {object} [props.js = undefined] - An optional Javascript Object to highlight
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
+ */
 export const PleaseSubscribe = (props = {}) => (
   <div
     className={`tw:max-w-7xl tw:m-auto tw:px-0 tw:-mt-12 tw:mb-24 ${props.dense ? '' : 'tw:md:my-24'}`}
@@ -20,6 +32,13 @@ export const PleaseSubscribe = (props = {}) => (
   </div>
 )
 
+/**
+ * A component that shows a plea for financial support
+ *
+ * @component
+ * @param {object} props - All component props
+ * @returns {JSX.Element}
+ */
 export const Plea = () => (
   <div className="tw:md:pt-8 tw:pb-8 tw:lg:py-12 tw:max-w-prose tw:w-full tw:m-auto">
     <h2 className="tw:text-inherit tw:mb-4">
@@ -71,6 +90,17 @@ const PaypalFormBody = ({ amount, period, currency }) => (
   </>
 )
 
+/**
+ * A component to set up a finciancial subscription to FreeSewing, also can handle one-time donations
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} [props.color = secondary] - One of the DaisyUI colors
+ * @param {boolean} [props.subscribeOnly = undefined] - Set this to true to remove the option to make a one-time donation
+ * @param {number} [props.amountPreset = 25] - The amount to preset
+ * @param {number} [props.periodPreset = m] - The period to preset
+ * @returns {JSX.Element}
+ */
 export const Subscribe = ({
   color = 'secondary',
   subscribeOnly,
@@ -190,6 +220,15 @@ export const Subscribe = ({
   )
 }
 
+/**
+ * A component that renders the signed name for joost, the FreeSewing maintainer, as SVG
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} [props.className = 'tw:w-32'] - Allows you to override the styling, including the size
+ * @param {number} [props.stroke = 0] - An optional stroke width
+ * @returns {JSX.Element}
+ */
 export const Joost = ({ className = 'tw:w-32', stroke = 0 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

packages/react/mkdocs.sh

@@ -26,3 +26,4 @@ jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/co
 jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json
 jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json
 jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json
+jsdoc -c jsdoc.json components/Patrons/* > ../../sites/dev/prebuild/jsdoc/react/components/patrons.json

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

@@ -1,7 +1,31 @@
 ---
 title: Patrons
 ---
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.patrons.mjs'
+import { Joost, Plea, PleaseSubscribe, Subscribe } from '@freesewing/react/components/Patrons'
 
-:::note
-This page is yet to be created
-:::
+
+<DocusaurusDoc>
+
+The __Patrons__ component family provides the following components:
+
+- [Joost](#joost)
+- [Plea](#plea)
+- [PleaseSubscribe](#pleasesubscribe)
+- [Subscribe](#subscribe)
+
+## Joost
+<ComponentDocs docs={jsdoc.jsdocJoost} example={Joost} />
+
+## Plea
+<ComponentDocs docs={jsdoc.jsdocPlea} example={Plea} />
+
+## PleaseSubscribe
+<ComponentDocs docs={jsdoc.jsdocPleaseSubscribe} example={PleaseSubscribe} />
+
+## Subscribe
+<ComponentDocs docs={jsdoc.jsdocSubscribe} example={Subscribe} />
+
+</DocusaurusDoc>