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
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'],

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

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

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