From b1f3ee4cfd9a90dbf72ae44ea5949785227ba38d Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Mon, 4 Sep 2023 11:44:50 +0200
Subject: [PATCH] feat(org): Added loading examples

---
 sites/org/pages/typography.mjs   | 231 +++++++++++++++++++------------
 sites/shared/i18n/status/en.yaml |  18 +--
 sites/shared/i18n/toast/de.yaml  |   5 -
 sites/shared/i18n/toast/en.yaml  |   5 -
 sites/shared/i18n/toast/es.yaml  |   5 -
 sites/shared/i18n/toast/fr.yaml  |   5 -
 sites/shared/i18n/toast/nl.yaml  |   5 -
 sites/shared/i18n/toast/uk.yaml  |   5 -
 8 files changed, 153 insertions(+), 126 deletions(-)
 delete mode 100644 sites/shared/i18n/toast/de.yaml
 delete mode 100644 sites/shared/i18n/toast/en.yaml
 delete mode 100644 sites/shared/i18n/toast/es.yaml
 delete mode 100644 sites/shared/i18n/toast/fr.yaml
 delete mode 100644 sites/shared/i18n/toast/nl.yaml
 delete mode 100644 sites/shared/i18n/toast/uk.yaml

diff --git a/sites/org/pages/typography.mjs b/sites/org/pages/typography.mjs
index 2116449eebd..0403c5199a6 100644
--- a/sites/org/pages/typography.mjs
+++ b/sites/org/pages/typography.mjs
@@ -1,12 +1,17 @@
 // Dependencies
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Context
+import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
+// Hooks
+import { useContext } from 'react'
 // Components
 import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
 import { Popout } from 'shared/components/popout/index.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
+import { BoolYesIcon, BoolNoIcon } from 'shared/components/icons.mjs'
 
 // Translation namespaces used on this page
-const namespaces = [...new Set(pageNs)]
+const ns = pageNs
 
 // Re-use this
 const p = (
@@ -16,100 +21,150 @@ const p = (
   </p>
 )
 
-const TypographyPage = ({ page }) => (
-  <PageWrapper {...page} title="Typography">
-    <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-base xl:pl-4">
-      <p>This typography page shows an overview of different elements and how they are styled.</p>
-      <p>It&apos;s a good starting point for theme development.</p>
-      <h2>Headings (this is h2)</h2>
-      {p} {p}
-      <h3>This is h3</h3>
-      {p} {p}
-      <h4>This is h4</h4>
-      {p} {p}
-      <h5>This is h5</h5>
-      {p} {p}
-      <h6>This is h6</h6>
-      {p} {p}
-      <h2>Links and buttons</h2>
-      <p>
-        A regular link <a href="#">looks like this</a>, whereas buttons look like this:
-      </p>
-      <h3>Main button styles</h3>
-      <div className="flex flex-row gap-2 flex-wrap">
-        <button className="btn btn-neutral">Neutral button</button>
-        <button className="btn btn-primary">Primary button</button>
-        <button className="btn btn-secondary">Secondary button</button>
-        <button className="btn btn-accent">Accent button</button>
-      </div>
-      <h3>State button styles</h3>
-      <div className="flex flex-row gap-2 flex-wrap">
-        <button className="btn btn-info">Info button</button>
-        <button className="btn btn-success">Success button</button>
-        <button className="btn btn-warning">Warning button</button>
-        <button className="btn btn-error">Error button</button>
-      </div>
-      <h3>Other button styles</h3>
-      <div className="flex flex-row gap-2 flex-wrap">
-        <button className="btn btn-ghost">Ghost button</button>
-        <button className="btn btn-link">Link button</button>
-      </div>
-      <h3>Outlined button styles</h3>
-      <div className="flex flex-row gap-2 flex-wrap">
-        <button className="btn btn-outline btn-neutral">Neutral button</button>
-        <button className="btn btn-outline btn-primary">Primary button</button>
-        <button className="btn btn-outline btn-secondary">Secondary button</button>
-        <button className="btn btn-outline btn-accent">Accent button</button>
-      </div>
-      <h3>Button sizes</h3>
-      <div className="flex flex-row gap-2 flex-wrap">
-        <button className="btn btn-primary btn-lg">Large</button>
-        <button className="btn btn-primary">Normal</button>
-        <button className="btn btn-primary btn-sm">Small</button>
-        <button className="btn btn-primary btn-xs">Tiny</button>
-        <button className="btn btn-primary btn-lg btn-wide">Large wide</button>
-        <button className="btn btn-primary btn-wide">Normal wide</button>
-        <button className="btn btn-primary btn-sm btn-wide">Small wide</button>
-        <button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
-      </div>
-      <h2>Popouts</h2>
-      <p>The Popout component is what powers various custom MDX components under the hood:</p>
-      {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map((type) => {
-        const props = {}
-        props[type] = true
-        return (
-          <div key={type}>
-            <h3 className="capitalize">{type}</h3>
-            <Popout {...props}>
-              <h5>I am the {type} title</h5>
-              {p}
-            </Popout>
-          </div>
-        )
-      })}
-      <h2>Collapse</h2>
-      {['primary', 'secondary', 'accent', 'neutral', 'success', 'info', 'warning', 'error'].map(
-        (color) => (
-          <Collapse
-            title={`A ${color} collapse`}
-            openTitle={`An open ${color} collapse`}
-            color={color}
-            key={color}
+const TypographyPage = ({ page }) => {
+  const { setLoadingStatus, loading, LoadingProgress } = useContext(LoadingStatusContext)
+
+  const loadingProgression = () => {
+    let delay = 0
+    for (let i = 1; i < 51; i++) {
+      delay += 25
+      window.setTimeout(
+        () =>
+          setLoadingStatus(
+            i === 50
+              ? [true, 'All done!', true, true]
+              : [true, <LoadingProgress val={i} max={50} msg={`Herding cats: ${i}/50`} />]
+          ),
+        delay
+      )
+    }
+  }
+
+  return (
+    <PageWrapper {...page} title="Typography">
+      <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-base xl:pl-4">
+        <p>This typography page shows an overview of different elements and how they are styled.</p>
+        <p>It&apos;s a good starting point for theme development.</p>
+        <h2>Headings (this is h2)</h2>
+        {p} {p}
+        <h3>This is h3</h3>
+        {p} {p}
+        <h4>This is h4</h4>
+        {p} {p}
+        <h5>This is h5</h5>
+        {p} {p}
+        <h6>This is h6</h6>
+        {p} {p}
+        <h2>Links and buttons</h2>
+        <p>
+          A regular link <a href="#">looks like this</a>, whereas buttons look like this:
+        </p>
+        <h3>Main button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-neutral">Neutral button</button>
+          <button className="btn btn-primary">Primary button</button>
+          <button className="btn btn-secondary">Secondary button</button>
+          <button className="btn btn-accent">Accent button</button>
+        </div>
+        <h3>State button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-info">Info button</button>
+          <button className="btn btn-success">Success button</button>
+          <button className="btn btn-warning">Warning button</button>
+          <button className="btn btn-error">Error button</button>
+        </div>
+        <h3>Other button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-ghost">Ghost button</button>
+          <button className="btn btn-link">Link button</button>
+        </div>
+        <h3>Outlined button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-outline btn-neutral">Neutral button</button>
+          <button className="btn btn-outline btn-primary">Primary button</button>
+          <button className="btn btn-outline btn-secondary">Secondary button</button>
+          <button className="btn btn-outline btn-accent">Accent button</button>
+        </div>
+        <h3>Button sizes</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-primary btn-lg">Large</button>
+          <button className="btn btn-primary">Normal</button>
+          <button className="btn btn-primary btn-sm">Small</button>
+          <button className="btn btn-primary btn-xs">Tiny</button>
+          <button className="btn btn-primary btn-lg btn-wide">Large wide</button>
+          <button className="btn btn-primary btn-wide">Normal wide</button>
+          <button className="btn btn-primary btn-sm btn-wide">Small wide</button>
+          <button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
+        </div>
+        <h2>Popouts</h2>
+        <p>The Popout component is what powers various custom MDX components under the hood:</p>
+        {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map((type) => {
+          const props = {}
+          props[type] = true
+          return (
+            <div key={type}>
+              <h3 className="capitalize">{type}</h3>
+              <Popout {...props}>
+                <h5>I am the {type} title</h5>
+                {p}
+              </Popout>
+            </div>
+          )
+        })}
+        <h2>Collapse</h2>
+        {['primary', 'secondary', 'accent', 'neutral', 'success', 'info', 'warning', 'error'].map(
+          (color) => (
+            <Collapse
+              title={`A ${color} collapse`}
+              openTitle={`An open ${color} collapse`}
+              color={color}
+              key={color}
+            >
+              <p>I am a collapse in the {color} color</p>
+            </Collapse>
+          )
+        )}
+        <h2>Loading state</h2>
+        <p className="flex flex-row items-center flex-wrap gap-2">
+          Loading: {loading ? <BoolYesIcon /> : <BoolNoIcon />}
+        </p>
+        <div className="flex flex-row flex-wrap gap-2">
+          <button
+            className="btn btn-primary"
+            onClick={() => setLoadingStatus([true, 'status:contactingBackend'])}
           >
-            <p>I am a collapse in the {color} color</p>
-          </Collapse>
-        )
-      )}
-    </div>
-  </PageWrapper>
-)
+            Start loading
+          </button>
+          <button
+            className="btn btn-success"
+            onClick={() => setLoadingStatus([true, 'status:nailedIt', true, true])}
+          >
+            Stop loading, success
+          </button>
+          <button
+            className="btn btn-error"
+            onClick={() => setLoadingStatus([true, 'status:backendProblem', true, false])}
+          >
+            Stop loading, failure
+          </button>
+          <button className="btn btn-neutral" onClick={() => setLoadingStatus([false])}>
+            Stop loading, abruptly
+          </button>
+          <button className="btn btn-accent" onClick={() => loadingProgression()}>
+            Show loading progression
+          </button>
+        </div>
+      </div>
+    </PageWrapper>
+  )
+}
 
 export default TypographyPage
 
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, namespaces)),
+      ...(await serverSideTranslations(locale, ns)),
       page: {
         locale,
         path: ['typography'],
diff --git a/sites/shared/i18n/status/en.yaml b/sites/shared/i18n/status/en.yaml
index 28c85aed74d..ca08d5fa689 100644
--- a/sites/shared/i18n/status/en.yaml
+++ b/sites/shared/i18n/status/en.yaml
@@ -1,12 +1,14 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
 backendError: Backend returned an error
-copiedToClipboard: Copied to clipboard
-processingUpdate: Processing update
-generatingPdf: Generating your PDF, one moment please
-pdfReady: PDF generated
-pdfFailed: An unexpected error occured while generating your PDF
 contactingBackend: Contacting the FreeSewing backend
-dataLoaded: Loaded data from the FreeSewing backend
 contactingGitHub: Contacting GitHub
 contactingGoogle: Contacting Google
+copiedToClipboard: Copied to clipboard
+dataLoaded: Loaded data from the FreeSewing backend
+generatingPdf: Generating your PDF, one moment please
+nailedIt: Nailed it!
+pdfFailed: An unexpected error occured while generating your PDF
+pdfReady: PDF generated
+processingUpdate: Processing update
+settingsSaved: Settings saved
+updatingSettings: Updating settings
+
diff --git a/sites/shared/i18n/toast/de.yaml b/sites/shared/i18n/toast/de.yaml
deleted file mode 100644
index 11c4ee7832b..00000000000
--- a/sites/shared/i18n/toast/de.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Einstellungen gespeichert
-backendError: Backend hat einen Fehler zurückgegeben
-copiedToClipboard: In die Zwischenablage kopiert
-processingUpdate: Processing update
diff --git a/sites/shared/i18n/toast/en.yaml b/sites/shared/i18n/toast/en.yaml
deleted file mode 100644
index b5853b4ca5c..00000000000
--- a/sites/shared/i18n/toast/en.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Copied to clipboard
-processingUpdate: Processing update
diff --git a/sites/shared/i18n/toast/es.yaml b/sites/shared/i18n/toast/es.yaml
deleted file mode 100644
index 601a92e24c4..00000000000
--- a/sites/shared/i18n/toast/es.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Copiado al portapapeles
-processingUpdate: Processing update
diff --git a/sites/shared/i18n/toast/fr.yaml b/sites/shared/i18n/toast/fr.yaml
deleted file mode 100644
index e5b479c7955..00000000000
--- a/sites/shared/i18n/toast/fr.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Copié dans le presse-papier
-processingUpdate: Processing update
diff --git a/sites/shared/i18n/toast/nl.yaml b/sites/shared/i18n/toast/nl.yaml
deleted file mode 100644
index 542b63ab85f..00000000000
--- a/sites/shared/i18n/toast/nl.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Gekopieerd naar het klembord
-processingUpdate: Processing update
diff --git a/sites/shared/i18n/toast/uk.yaml b/sites/shared/i18n/toast/uk.yaml
deleted file mode 100644
index cc445357fed..00000000000
--- a/sites/shared/i18n/toast/uk.yaml
+++ /dev/null
@@ -1,5 +0,0 @@
-updatingSettings: Updating settings
-settingsSaved: Settings saved
-backendError: Backend returned an error
-copiedToClipboard: Скопійовано в буфер обміну
-processingUpdate: Processing update