VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(org): Added loading examples

Browse source
This commit is contained in:
joostdecock 2023-09-04 11:44:50 +02:00
parent 2106a38154
commit b1f3ee4cfd
8 changed files with 153 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

231
sites/org/pages/typography.mjs
View file

@ -1,12 +1,17 @@
// Dependencies // Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
// Context
import { LoadingStatusContext } from 'shared/context/loading-status-context.mjs'
// Hooks
import { useContext } from 'react'
// Components // Components
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { Popout } from 'shared/components/popout/index.mjs' import { Popout } from 'shared/components/popout/index.mjs'
import { Collapse } from 'shared/components/collapse.mjs' import { Collapse } from 'shared/components/collapse.mjs'
import { BoolYesIcon, BoolNoIcon } from 'shared/components/icons.mjs'
// Translation namespaces used on this page // Translation namespaces used on this page
const namespaces = [...new Set(pageNs)] const ns = pageNs
// Re-use this // Re-use this
const p = ( const p = (
@ -16,100 +21,150 @@ const p = (
</p> </p>
) )
const TypographyPage = ({ page }) => ( const TypographyPage = ({ page }) => {
<PageWrapper {...page} title="Typography"> const { setLoadingStatus, loading, LoadingProgress } = useContext(LoadingStatusContext)
<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> const loadingProgression = () => {
<p>It&apos;s a good starting point for theme development.</p> let delay = 0
<h2>Headings (this is h2)</h2> for (let i = 1; i < 51; i++) {
{p} {p} delay += 25
<h3>This is h3</h3> window.setTimeout(
{p} {p} () =>
<h4>This is h4</h4> setLoadingStatus(
{p} {p} i === 50
<h5>This is h5</h5> ? [true, 'All done!', true, true]
{p} {p} : [true, <LoadingProgress val={i} max={50} msg={`Herding cats: ${i}/50`} />]
<h6>This is h6</h6> ),
{p} {p} delay
<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> return (
<div className="flex flex-row gap-2 flex-wrap"> <PageWrapper {...page} title="Typography">
<button className="btn btn-neutral">Neutral button</button> <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-base xl:pl-4">
<button className="btn btn-primary">Primary button</button> <p>This typography page shows an overview of different elements and how they are styled.</p>
<button className="btn btn-secondary">Secondary button</button> <p>It&apos;s a good starting point for theme development.</p>
<button className="btn btn-accent">Accent button</button> <h2>Headings (this is h2)</h2>
</div> {p} {p}
<h3>State button styles</h3> <h3>This is h3</h3>
<div className="flex flex-row gap-2 flex-wrap"> {p} {p}
<button className="btn btn-info">Info button</button> <h4>This is h4</h4>
<button className="btn btn-success">Success button</button> {p} {p}
<button className="btn btn-warning">Warning button</button> <h5>This is h5</h5>
<button className="btn btn-error">Error button</button> {p} {p}
</div> <h6>This is h6</h6>
<h3>Other button styles</h3> {p} {p}
<div className="flex flex-row gap-2 flex-wrap"> <h2>Links and buttons</h2>
<button className="btn btn-ghost">Ghost button</button> <p>
<button className="btn btn-link">Link button</button> A regular link <a href="#">looks like this</a>, whereas buttons look like this:
</div> </p>
<h3>Outlined button styles</h3> <h3>Main button styles</h3>
<div className="flex flex-row gap-2 flex-wrap"> <div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-outline btn-neutral">Neutral button</button> <button className="btn btn-neutral">Neutral button</button>
<button className="btn btn-outline btn-primary">Primary button</button> <button className="btn btn-primary">Primary button</button>
<button className="btn btn-outline btn-secondary">Secondary button</button> <button className="btn btn-secondary">Secondary button</button>
<button className="btn btn-outline btn-accent">Accent button</button> <button className="btn btn-accent">Accent button</button>
</div> </div>
<h3>Button sizes</h3> <h3>State button styles</h3>
<div className="flex flex-row gap-2 flex-wrap"> <div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-primary btn-lg">Large</button> <button className="btn btn-info">Info button</button>
<button className="btn btn-primary">Normal</button> <button className="btn btn-success">Success button</button>
<button className="btn btn-primary btn-sm">Small</button> <button className="btn btn-warning">Warning button</button>
<button className="btn btn-primary btn-xs">Tiny</button> <button className="btn btn-error">Error button</button>
<button className="btn btn-primary btn-lg btn-wide">Large wide</button> </div>
<button className="btn btn-primary btn-wide">Normal wide</button> <h3>Other button styles</h3>
<button className="btn btn-primary btn-sm btn-wide">Small wide</button> <div className="flex flex-row gap-2 flex-wrap">
<button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button> <button className="btn btn-ghost">Ghost button</button>
</div> <button className="btn btn-link">Link button</button>
<h2>Popouts</h2> </div>
<p>The Popout component is what powers various custom MDX components under the hood:</p> <h3>Outlined button styles</h3>
{['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map((type) => { <div className="flex flex-row gap-2 flex-wrap">
const props = {} <button className="btn btn-outline btn-neutral">Neutral button</button>
props[type] = true <button className="btn btn-outline btn-primary">Primary button</button>
return ( <button className="btn btn-outline btn-secondary">Secondary button</button>
<div key={type}> <button className="btn btn-outline btn-accent">Accent button</button>
<h3 className="capitalize">{type}</h3> </div>
<Popout {...props}> <h3>Button sizes</h3>
<h5>I am the {type} title</h5> <div className="flex flex-row gap-2 flex-wrap">
{p} <button className="btn btn-primary btn-lg">Large</button>
</Popout> <button className="btn btn-primary">Normal</button>
</div> <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>
<h2>Collapse</h2> <button className="btn btn-primary btn-wide">Normal wide</button>
{['primary', 'secondary', 'accent', 'neutral', 'success', 'info', 'warning', 'error'].map( <button className="btn btn-primary btn-sm btn-wide">Small wide</button>
(color) => ( <button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
<Collapse </div>
title={`A ${color} collapse`} <h2>Popouts</h2>
openTitle={`An open ${color} collapse`} <p>The Popout component is what powers various custom MDX components under the hood:</p>
color={color} {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map((type) => {
key={color} 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> Start loading
</Collapse> </button>
) <button
)} className="btn btn-success"
</div> onClick={() => setLoadingStatus([true, 'status:nailedIt', true, true])}
</PageWrapper> >
) 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 default TypographyPage
export async function getStaticProps({ locale }) { export async function getStaticProps({ locale }) {
return { return {
props: { props: {
...(await serverSideTranslations(locale, namespaces)), ...(await serverSideTranslations(locale, ns)),
page: { page: {
locale, locale,
path: ['typography'], path: ['typography'],

18
sites/shared/i18n/status/en.yaml
View file

@ -1,12 +1,14 @@
updatingSettings: Updating settings
settingsSaved: Settings saved
backendError: Backend returned an error 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 contactingBackend: Contacting the FreeSewing backend
dataLoaded: Loaded data from the FreeSewing backend
contactingGitHub: Contacting GitHub contactingGitHub: Contacting GitHub
contactingGoogle: Contacting Google 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

5
sites/shared/i18n/toast/de.yaml
View file

@ -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

5
sites/shared/i18n/toast/en.yaml
View file

@ -1,5 +0,0 @@
updatingSettings: Updating settings
settingsSaved: Settings saved
backendError: Backend returned an error
copiedToClipboard: Copied to clipboard
processingUpdate: Processing update

5
sites/shared/i18n/toast/es.yaml
View file

@ -1,5 +0,0 @@
updatingSettings: Updating settings
settingsSaved: Settings saved
backendError: Backend returned an error
copiedToClipboard: Copiado al portapapeles
processingUpdate: Processing update

5
sites/shared/i18n/toast/fr.yaml
View file

@ -1,5 +0,0 @@
updatingSettings: Updating settings
settingsSaved: Settings saved
backendError: Backend returned an error
copiedToClipboard: Copié dans le presse-papier
processingUpdate: Processing update

5
sites/shared/i18n/toast/nl.yaml
View file

@ -1,5 +0,0 @@
updatingSettings: Updating settings
settingsSaved: Settings saved
backendError: Backend returned an error
copiedToClipboard: Gekopieerd naar het klembord
processingUpdate: Processing update

5
sites/shared/i18n/toast/uk.yaml
View file

@ -1,5 +0,0 @@
updatingSettings: Updating settings
settingsSaved: Settings saved
backendError: Backend returned an error
copiedToClipboard: Скопійовано в буфер обміну
processingUpdate: Processing update