[react] feat: Added docs for context

packages/react/context/LoadingStatus/index.mjs

@@ -48,7 +48,7 @@ const LoadingStatus = ({ loadingStatus }) => {
 
   return (
     <div
-      className="tw:fixed tw:bottom-14 tw:md:top-28 tw:left-0 tw:w-full tw:z-50 tw:md:px-4 tw:md:mx-auto"
+      className="tw:fixed tw:bottom-14 tw:md:bottom-auto tw:md:top-28 tw:left-0 tw:z-50 tw:md:px-4 tw:w-full"
       style={{ zIndex: 500 }}
     >
       <div
@@ -69,12 +69,17 @@ const LoadingStatus = ({ loadingStatus }) => {
 const LoadingProgress = ({ val = 0, max = 1, msg }) => (
   <div className="tw:flex tw:flex-col tw:gap-2 tw:w-full tw:grow-0">
     {msg}
-    <progress className="tw:progress tw:progress-white" value={val} max={max}></progress>
+    <progress className="tw:daisy-progress tw:text-info-content" value={val} max={max}></progress>
   </div>
 )
 
-/*
+/**
- * The Context provider
+ * The LoadingStatus context provider
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set
+ * @returns {JSX.Element}
  */
 export const LoadingStatusContextProvider = ({ children }) => {
   /*

sites/dev/docs/reference/packages/react/context/loadingstatus/_examples.js

@@ -0,0 +1,40 @@
+import React, { useContext } from 'react'
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+
+export const LoadingExamples = () => {
+  const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
+
+  const progressExample = () => {
+    window.setTimeout(
+      setLoadingStatus([true, "All done!", true, true]),
+      1500
+    )
+    for (let i=0; i<51; i++) window.setTimeout(
+      () => setLoadingStatus([
+        true,
+        i < 50 ? <LoadingProgress msg="Herding cats" val={i} max={50} /> : 'All done!',
+        i < 50 ? false : true,
+        true
+      ]),
+      i*25
+    )
+  }
+
+  return (
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:gap-2">
+      <button
+        onClick={() => setLoadingStatus([true, "Success, will fade away", true, true])}
+        className="tw:daisy-btn tw:daisy-btn-success"
+      >Show Success Example</button>
+      <button
+        onClick={() => setLoadingStatus([true, "Error, will fade away", true, false])}
+        className="tw:daisy-btn tw:daisy-btn-error"
+      >Show Error Example</button>
+      <button
+        onClick={() => setLoadingStatus([true, "I won't go away, but will make way for a different loading status", false, true])}
+        className="tw:daisy-btn tw:daisy-btn-secondary"
+      >Show Permanent Status</button>
+      <button onClick={progressExample} className="tw:daisy-btn tw:daisy-btn-primary">Show Progress Example</button>
+    </div>
+  )
+}

sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx

@@ -1,7 +1,143 @@
 ---
-title: LoadingStatusContext
+title: LoadingStatus
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { Popout } from '@freesewing/react/components/Popout'
-:::
+import { Tab, Tabs } from '@freesewing/react/components/Tab'
+import { LoadingExamples } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **LoadingStatus** context is used to set loading status across the FreeSewing web UI.
+
+<Popout type="tip">
+As with all React context, the provider should wrap the content in which you
+want to use the context.
+
+When using one of the high-level wrappers like
+[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
+or
+[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
+the context provider is already loaded.
+</Popout>
+
+## Examples
+
+<LoadingExamples />
+
+## Components
+
+The **LoadingStatus** context provides the following components:
+
+- [LoadingStatusContext](#loadingstatuscontext)
+- [LoadingStatusContextProvider](#loadingstatuscontextprovider)
+
+### LoadingStatusContext
+
+This is the context itself to be passed to `React.useContext()`.
+
+```js
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+
+const MyComponent = () => {
+  const {
+    loading,
+    LoadingStatus,
+    LoadingProgress,
+    setLoadingStatus,
+  } = useContext(LoadingStatusContext)
+
+  // ...
+}
+```
+
+The returned object holds the following:
+
+### context.loading
+
+This is a boolean that is `true` when we are currently in a loading state, or `false` when not.
+
+### context.LoadingStatus
+
+This is the component that renders the actual loading status message.
+
+<Popout type="tip">
+When using one of the high-level wrappers like
+[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
+or
+[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
+the LoadingStatus component is already loaded.
+As such, so you typically do not need to use this.
+</Popout>
+
+### context.LoadingProgress
+
+This is a helper component to display a loading message with a progress bar.
+Although you still need to update the loading state yourself to generate a true progress example.
+
+<Tabs tabs="Props, Examples">
+<Tab>
+  <table>
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+        <th>Optional</th>
+        <th>Default Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>props</td>
+        <td>object</td>
+        <td>All component props</td>
+        <td>no</td>
+        <td>`undefined`</td>
+      </tr>
+      <tr>
+        <td>props.msg</td>
+        <td>string|JSX.Element</td>
+        <td>The loading message</td>
+        <td>yes</td>
+        <td>`undefined`</td>
+      </tr>
+      <tr>
+        <td>props.val</td>
+        <td>number</td>
+        <td>The current progress value</td>
+        <td>yes</td>
+        <td>`0`</td>
+      </tr>
+      <tr>
+        <td>props.max</td>
+        <td>number</td>
+        <td>The maximum progress value</td>
+        <td>yes</td>
+        <td>`1`</td>
+      </tr>
+    </tbody>
+  </table>
+</Tab>
+<Tab>
+  <LoadingExamples />
+</Tab>
+</Tabs>
+
+### context.setLoadingStatus
+
+This is the method to be used to set the loading status:
+```js
+setLoadingStatus([
+  show=false,
+  msg=null,
+  fade=true
+  success=true,
+])
+```
+### LoadingStatusContextProvider
+
+This is the context provider, it does not take any props apart from `props.children`.
+
+</DocusaurusDoc>

sites/dev/docs/reference/packages/react/context/modal/_examples.js

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react'
+import { ModalContext } from '@freesewing/react/context/Modal'
+import { ModalWrapper } from '@freesewing/react/components/Modal'
+
+export const ModalExamples = () => {
+  const { setModal, clearModal } = useContext(ModalContext)
+
+  return (
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:items-center tw:gap-2">
+      <button
+        onClick={() => setModal(<ModalWrapper><h1>Hello, I am modal</h1></ModalWrapper>)}
+        className="tw:daisy-btn tw:daisy-btn-primary"
+      >Show Example</button>
+    </div>
+  )
+}

sites/dev/docs/reference/packages/react/context/modal/readme.mdx

@@ -1,7 +1,85 @@
 ---
-title: ModalContext
+title: Modal
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { Popout } from '@freesewing/react/components/Popout'
-:::
+import { MiniTip } from '@freesewing/react/components/Mini'
+import { Tab, Tabs } from '@freesewing/react/components/Tab'
+import { ModalExamples } from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Modal** context is used to set modal content across the FreeSewing web UI.
+
+<Popout type="tip">
+As with all React context, the provider should wrap the content in which you
+want to use the context.
+
+When using one of the high-level wrappers like
+[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
+or
+[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
+the context provider is already loaded.
+</Popout>
+
+## Examples
+
+<ModalExamples />
+
+<br />
+<MiniTip>The [ModalWrapper ](/reference/packages/react/components/modal/#modalwrapper) documentation has more examples.</MiniTip>
+
+## Components
+
+The **Modal** context provides the following components:
+
+- [ModalContext](#modalcontext)
+- [ModalContextProvider](#modalcontextprovider)
+
+### ModalContext
+
+This is the context itself to be passed to `React.useContext()`.
+
+```js
+import { ModalContext } from '@freesewing/react/context/Modal'
+
+const MyComponent = () => {
+  const {
+    clearModal,
+    modalContent,
+    setModal,
+  } = useContext(ModalContext)
+
+  // ...
+}
+```
+
+The returned object holds the following:
+
+### context.clearModal
+
+Call this method to clear the modal content.
+
+### context.modalContent
+
+This holds the current modal content.
+
+<Popout type="tip">
+When using one of the high-level wrappers like
+[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc)
+or
+[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage)
+the modal content will automatically be displayed. If not, you need to render it yoursel
+using this value.
+</Popout>
+
+### context.setModal
+
+Call this method to set the modal content. The only parameter is the content to set.
+
+### ModalContextProvider
+
+This is the context provider, it does not take any props apart from `props.children`.
+
+</DocusaurusDoc>