From c60e5bf109ac59b985255c185ff0e7f02fc42f4b Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 15:43:35 +0200 Subject: [PATCH] [react] feat: Added docs for context --- .../react/context/LoadingStatus/index.mjs | 13 +- .../react/context/loadingstatus/_examples.js | 40 +++++ .../react/context/loadingstatus/readme.mdx | 144 +++++++++++++++++- .../packages/react/context/modal/_examples.js | 16 ++ .../packages/react/context/modal/readme.mdx | 86 ++++++++++- 5 files changed, 287 insertions(+), 12 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/context/loadingstatus/_examples.js create mode 100644 sites/dev/docs/reference/packages/react/context/modal/_examples.js diff --git a/packages/react/context/LoadingStatus/index.mjs b/packages/react/context/LoadingStatus/index.mjs index 026bb8a12d0..d4160846c91 100644 --- a/packages/react/context/LoadingStatus/index.mjs +++ b/packages/react/context/LoadingStatus/index.mjs @@ -48,7 +48,7 @@ const LoadingStatus = ({ loadingStatus }) => { return (
{ const LoadingProgress = ({ val = 0, max = 1, msg }) => (
{msg} - +
) -/* - * 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 }) => { /* diff --git a/sites/dev/docs/reference/packages/react/context/loadingstatus/_examples.js b/sites/dev/docs/reference/packages/react/context/loadingstatus/_examples.js new file mode 100644 index 00000000000..79f71fcd55a --- /dev/null +++ b/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 ? : 'All done!', + i < 50 ? false : true, + true + ]), + i*25 + ) + } + + return ( +
+ + + + +
+ ) +} diff --git a/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx b/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx index 6026658867c..a29b5a570b2 100644 --- a/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx +++ b/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx @@ -1,7 +1,143 @@ --- -title: LoadingStatusContext +title: LoadingStatus --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' +import { LoadingExamples } from './_examples.js' + + + +The **LoadingStatus** context is used to set loading status across the FreeSewing web UI. + + +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. + + +## Examples + + + +## 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. + + +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. + + +### 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. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescriptionOptionalDefault Value
propsobjectAll component propsno`undefined`
props.msgstring|JSX.ElementThe loading messageyes`undefined`
props.valnumberThe current progress valueyes`0`
props.maxnumberThe maximum progress valueyes`1`
+ + + + + + +### 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`. + + diff --git a/sites/dev/docs/reference/packages/react/context/modal/_examples.js b/sites/dev/docs/reference/packages/react/context/modal/_examples.js new file mode 100644 index 00000000000..7a24e155b21 --- /dev/null +++ b/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 ( +
+ +
+ ) +} diff --git a/sites/dev/docs/reference/packages/react/context/modal/readme.mdx b/sites/dev/docs/reference/packages/react/context/modal/readme.mdx index be2896d79b6..394f26f0ad2 100644 --- a/sites/dev/docs/reference/packages/react/context/modal/readme.mdx +++ b/sites/dev/docs/reference/packages/react/context/modal/readme.mdx @@ -1,7 +1,85 @@ --- -title: ModalContext +title: Modal --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +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' + + + +The **Modal** context is used to set modal content across the FreeSewing web UI. + + +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. + + +## Examples + + + +
+The [ModalWrapper ](/reference/packages/react/components/modal/#modalwrapper) documentation has more examples. + +## 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. + + +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. + + +### 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`. + +