[react] feat: Added docs for components/Modal

packages/react/components/Modal/index.mjs

@@ -12,17 +12,19 @@ const slideClasses = {
 /**
  * This component wraps modal content, making sure the layout is ok and handling transitions
  *
- * @param {object} props - All React props
+ * @component
- * @param {array} children - Content to render inside the modal
+ * @param {object} props - All component props
- * @param {string} flex - Flexbox direction (row or col)
+ * @param {JSX.Element} props.children - The component children, will be rendered inside the mini tip
- * @param {string} justify - Flexbox justify value
+ * @param {string} [props.flex = row] - Flexbox direction (row or col)
- * @param {string} items - Flexbox items value
+ * @param {string} [props.justify = center] - Flexbox justify value
- * @param {string} bg - Background
+ * @param {string} [props.items = center] - Flexbox items value
- * @param {string} bgOpacity - Background opacity
+ * @param {string} [props.bg = neutral] - Background color (one of the DaisyUI named colors)
- * @param {bool} bare - Set true to not handle layout
+ * @param {string} [props.bgOpacity = 70] - Background opacity
- * @param {bool} keepOpenOnClick - Set to true to prevent a click in the modal content to close the modal
+ * @param {bool} [props.bare = false] - Set true to not handle layout within the wrapper
- * @param {string} slideFrom - Direction to slide in from
+ * @param {bool} [keepOpenOnClick = false] - Set to true to prevent a click in the modal content from closing the modal
- * @param {bool} fullWidth - Set to true to not constrain the width
+ * @param {string} [slideFrom = left] - Direction to slide in from on mobile
+ * @param {bool} [fullWidth = false] - Set to true to not constrain the width
+ * @returns {JSX.Element}
  */
 export const ModalWrapper = ({
   children = null,

packages/react/mkdocs.sh

@@ -22,3 +22,4 @@ jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/re
 jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/components/link.json
 jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json
 jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/components/mini.json
+jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json

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

@@ -0,0 +1,73 @@
+import React, { useContext } from 'react'
+import { ModalContext } from '@freesewing/react/context/Modal'
+import { ModalWrapper } from '@freesewing/react/components/Modal'
+import { MiniTip } from '@freesewing/react/components/Mini'
+
+export const ModalWrapperExample = () => {
+  const { setModal, clearModal } = useContext(ModalContext)
+
+  return (
+    <div className="tw:flex tw:flex-row tw:gap-2 tw:flex-wrap">
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper><Content /></ModalWrapper>)}
+      >default props</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper justify='end'><Content /></ModalWrapper>)}
+      >justify = end</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper items='end'><Content /></ModalWrapper>)}
+      >items = end</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper bg='warning'><Content /></ModalWrapper>)}
+      >bg = warning</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper bgOpacity={25}><Content /></ModalWrapper>)}
+      >bgOpacity = 25</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper bare><Content /></ModalWrapper>)}
+      >bare</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper bare flex="col"><Content /></ModalWrapper>)}
+      >bare & flex = col</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper fullWidth><Content /></ModalWrapper>)}
+      >fullWidth</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper keepOpenOnClick>
+          <Content />
+          <MiniTip>Click outside the modal content to close this.</MiniTip>
+        </ModalWrapper>)}
+      >keepOpenOnClick</button>
+      <button
+        className="tw:daisy-btn tw:daisy-btn-primary"
+        onClick={() => setModal(<ModalWrapper slideFrom="bottom"><Content /></ModalWrapper>)}
+      >slideFrom = bottom (mobile only)</button>
+    </div>
+  )
+}
+
+const Content = () => (
+  <>
+    <div>
+      <h4>Title 1</h4>
+      <p>Some modal content here</p>
+    </div>
+    <div>
+      <h4>Title 2</h4>
+      <p>Some modal content here</p>
+    </div>
+    <div>
+      <h4>Title 3</h4>
+      <p>Some modal content here</p>
+    </div>
+  </>
+)

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

@@ -2,6 +2,20 @@
 title: Modal
 ---
 
-:::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.modal.mjs'
+import { ModalWrapperExample } from './_examples.js'
+
+
+<DocusaurusDoc>
+
+The __Modal component family provides the following components:
+
+- [ModalWrapper](#modalwrapper)
+
+## ModalWrapper
+<ComponentDocs docs={jsdoc.jsdocModalWrapper} example={ModalWrapperExample} />
+
+
+</DocusaurusDoc>