[react] feat: Added docs for components/Docusaurus

packages/react/components/Docusaurus/index.mjs

@@ -16,16 +16,25 @@ import {
 } from '@freesewing/react/components/Icon'
 import { Layout as DefaultLayout } from '@freesewing/react/components/Layout'
 
-/*
- * This component should be the top level of a Docusaurus page
+/**
+ * This component should be the top level of a Docusaurus page where you want access to context.
  *
  * This sets up the various context providers before
  * passing all props down to the InnerPageWrapper.
  * This is required because the context providers need to
- * be setup for the modal and loading state work we do in the InnerPageWrapper
- *
+ * be set up for the modal and loading state work.
  * We also re-use the Docusaurus Layout component here, which needs to be at
- * the top level of the page
+ * the top level of the page.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.DocusaurusLayout - The docusaurus layout to apply
+ * @param {React.Component} props.Layout - The layout to apply inside docusaurus
+ * @param {JSX.Element} props.children - The component children
+ * @param {array} props.crumbs - The page breadcrumbs
+ * @param {string} props.description - The page description
+ * @param {string} props.title - The page title
+ * @returns {JSX.Element}
  */
 export const DocusaurusPage = (props) => {
   const DocusaurusLayout = props.DocusaurusLayout
@@ -42,14 +51,23 @@ export const DocusaurusPage = (props) => {
   )
 }
 
-/*
+/**
  * This component should be the top level of any Docusaurus content that's not
- * a full page where you want access to context (typically account pages and so on)
+ * a full page where you want access to context (typically account pages and so on).
  *
  * This sets up the various context providers before
  * passing all props down to the InnerPageWrapper.
  * This is required because the context providers need to
  * be setup for the modal and loading state work we do in the InnerPageWrapper
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Layout - The layout to apply inside docusaurus
+ * @param {JSX.Element} props.children - The component children
+ * @param {array} props.crumbs - The page breadcrumbs
+ * @param {string} props.description - The page description
+ * @param {string} props.title - The page title
+ * @returns {JSX.Element}
  */
 export const DocusaurusDoc = (props) => (
   <ModalContextProvider>
@@ -94,6 +112,19 @@ const InnerDocusaurusPage = ({
   )
 }
 
+/**
+ * A component to render (some) custom navbar items in Docusaurus
+ *
+ * This can be used to swizzle the default NavbarItem in Docusaurus.
+ * You should pass it in the default NavbarItem and it will use that
+ * for all but the following: account, designs, docs, blog, showcase, forum
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.id - The navbar item ID
+ * @param {React.Component} props.Default - The default NavbarItem component to use
+ * @returns {JSX.Element}
+ */
 export const NavbarItem = (props) => {
   const { id, Default } = props
 

packages/react/mkdocs.sh

@@ -8,3 +8,4 @@ jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/react/components/collection.json
 jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json
 jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json
+jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Popout } from '@freesewing/react/components/Popout'
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'
+import { NavbarItem as FreeSewingNavbarItem } from '@freesewing/react/components/Docusaurus'
+import Link from '@docusaurus/Link'
+
+export const DocusaurusPageExample = () => (
+  <Popout note>
+    <h4>This is not an example</h4>
+    <p>We cannot safely include this example in a page. But <a href="https://freesewing.org/signin/">the sign in page</a> is an example where this component is used.</p>
+    <p>Essentially, use this if you want to use the components from <code>@freesewing/react</code> inside Docusaurus, and you do not want the standard <em>docs</em> layout (no sidebar).
+    </p>
+  </Popout>
+)
+
+export const DocusaurusDocExample = () => (
+  <Popout type="note">
+  </Popout>
+)
+
+const NavbarItem = ComponentTypes.default
+export const NavbarItemExample = () => (
+
+  <>
+    <NavbarItem id="test" label="Default NavbarItem" href="#" />
+    <FreeSewingNavbarItem id="account" Default={NavbarItem} label="Custom NavbarItem (account)" href="#" Link={Link} />
+  </>
+)
+

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

@@ -2,6 +2,34 @@
 title: Docusaurus
 ---
 
-:::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 {
+  jsdocDocusaurusDoc,
+  jsdocDocusaurusPage,
+  jsdocNavbarItem,
+} from '@site/prebuild/jsdoc/components.docusaurus.mjs'
+import {
+  DocusaurusDocExample,
+  DocusaurusPageExample,
+  NavbarItemExample,
+} from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Docusaurus** component family provides the following components:
+
+- [DocusaurusDoc](#docusaurusdoc)
+- [DocusaurusPage](#docusauruspage)
+- [NavbarItem](#navbaritem)
+
+## DocusaurusDoc
+<ComponentDocs docs={jsdocDocusaurusDoc} example={DocusaurusDocExample} />
+
+## DocusaurusPage
+<ComponentDocs docs={jsdocDocusaurusPage} example={DocusaurusPageExample} />
+
+## NavbarItem
+<ComponentDocs docs={jsdocNavbarItem} example={NavbarItemExample} />
+
+</DocusaurusDoc>