wip[org]: More work on account pages

packages/react/components/Docusaurus/index.mjs

@@ -0,0 +1,85 @@
+import React, { useContext } from 'react'
+import {
+  LoadingStatusContext,
+  LoadingStatusContextProvider,
+} from '@freesewing/react/context/LoadingStatus'
+import { ModalContext, ModalContextProvider } from '@freesewing/react/context/Modal'
+import { Layout as DefaultLayout } from '@freesewing/react/components/Layout'
+
+/*
+ * This component should be the top level of a Docusaurus page
+ *
+ * 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
+ *
+ * We also re-use the Docusaurus Layout component here, which needs to be at
+ * the top level of the page
+ */
+export const DocusaurusPage = (props) => {
+  const DocusaurusLayout = props.DocusaurusLayout
+  return DocusaurusLayout ? (
+    <DocusaurusLayout title={props.title} description={props.description}>
+      <ModalContextProvider>
+        <LoadingStatusContextProvider>
+          <InnerDocusaurusPage {...props} />
+        </LoadingStatusContextProvider>
+      </ModalContextProvider>
+    </DocusaurusLayout>
+  ) : (
+    <p>You need to pass in the DocusaurusLayout component</p>
+  )
+}
+
+/*
+ * This component should be the top level of a Docusaurus doc (mdx)
+ * 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
+ */
+export const DocusaurusDoc = (props) => (
+  <ModalContextProvider>
+    <LoadingStatusContextProvider>
+      <InnerDocusaurusPage {...props} Layout={false} />
+    </LoadingStatusContextProvider>
+  </ModalContextProvider>
+)
+
+/*
+ * This component needs to be a child of the ContextWrapper
+ *
+ * @param {object} props - All React props
+ * @param {function} Layout - A specific React component to use for a non-default Layout
+ * @param {array} children - Child components / content
+ * @param {array} crumbs - An array to construct breadcrumbs from
+ * @param {string} description - Description for the page metadata
+ * @param {string} title - Description for the page title
+ */
+const InnerDocusaurusPage = ({
+  Layout = DefaultLayout,
+  children = [],
+  crumbs = [],
+  description = 'Free Bespoke Sewing Patterns',
+  title = 'FreeSewing',
+}) => {
+  /*
+   * Set up contexts
+   */
+  const { modalContent } = useContext(ModalContext)
+  const { LoadingStatus } = useContext(LoadingStatusContext)
+
+  /*
+   * Return inner page wrapper
+   */
+  return (
+    <div className="tailwind-container">
+      <LoadingStatus />
+      {Layout ? <Layout {...{ title, description, crumbs }}>{children}</Layout> : children}
+      {typeof modalContent === 'function' ? modalContent() : modalContent}
+    </div>
+  )
+}