From 756b71433c684e8147e81d82f3a3f5d1e2d821b5 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sun, 28 May 2023 12:51:33 +1000 Subject: [PATCH] Use Temporal polyfill to implement availability viewer structure --- frontend/package.json | 3 +- frontend/src/app/how-to/page.module.scss | 50 ++++ frontend/src/app/how-to/page.tsx | 74 ++++++ .../AvailabilityViewer/AvailabilityViewer.jsx | 235 ------------------ .../AvailabilityViewer.module.scss | 169 +++++++++++++ .../AvailabilityViewer.styles.js | 185 -------------- .../AvailabilityViewer/AvailabilityViewer.tsx | 218 ++++++++++++++++ frontend/src/components/Legend/Legend.jsx | 56 ----- .../{Legend.styles.js => Legend.module.scss} | 37 ++- frontend/src/components/Legend/Legend.tsx | 43 ++++ frontend/src/components/Loading/Loading.jsx | 5 - .../src/components/Loading/Loading.styles.js | 35 --- frontend/src/components/Stats/Stats.tsx | 8 +- .../TimeRangeField/TimeRangeField.tsx | 14 +- frontend/src/i18n/options.ts | 2 +- frontend/src/stores/settingsStore.ts | 5 +- frontend/src/utils/calculateAvailability.ts | 43 ++++ frontend/src/utils/calculateColumns.ts | 25 ++ frontend/src/utils/calculateRows.ts | 26 ++ frontend/src/utils/convertTimesToDates.ts | 54 ++++ frontend/src/utils/detectBrowser.ts | 1 + frontend/src/utils/index.ts | 4 + frontend/tsconfig.json | 1 + frontend/yarn.lock | 26 +- 24 files changed, 768 insertions(+), 551 deletions(-) create mode 100644 frontend/src/app/how-to/page.module.scss create mode 100644 frontend/src/app/how-to/page.tsx delete mode 100644 frontend/src/components/AvailabilityViewer/AvailabilityViewer.jsx create mode 100644 frontend/src/components/AvailabilityViewer/AvailabilityViewer.module.scss create mode 100644 frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx delete mode 100644 frontend/src/components/Legend/Legend.jsx rename frontend/src/components/Legend/{Legend.styles.js => Legend.module.scss} (50%) create mode 100644 frontend/src/components/Legend/Legend.tsx delete mode 100644 frontend/src/components/Loading/Loading.jsx delete mode 100644 frontend/src/components/Loading/Loading.styles.js create mode 100644 frontend/src/utils/calculateAvailability.ts create mode 100644 frontend/src/utils/calculateColumns.ts create mode 100644 frontend/src/utils/calculateRows.ts create mode 100644 frontend/src/utils/convertTimesToDates.ts diff --git a/frontend/package.json b/frontend/package.json index 537397c..c490d33 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "@azure/msal-browser": "^2.37.0", - "@giraugh/tools": "^1.5.0", + "@giraugh/tools": "^1.6.0", + "@js-temporal/polyfill": "^0.4.4", "@microsoft/microsoft-graph-client": "^3.0.5", "accept-language": "^3.0.18", "dayjs": "^1.11.7", diff --git a/frontend/src/app/how-to/page.module.scss b/frontend/src/app/how-to/page.module.scss new file mode 100644 index 0000000..ec33746 --- /dev/null +++ b/frontend/src/app/how-to/page.module.scss @@ -0,0 +1,50 @@ +.step { + text-decoration-color: var(--primary); + text-decoration-style: solid; + text-decoration-line: underline; + margin-top: 30px; +} + +.fakeCalendar { + user-select: none; + + & div { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-gap: 2px; + } + & div:first-of-type span { + display: flex; + align-items: center; + justify-content: center; + padding: 3px 0; + font-weight: bold; + user-select: none; + opacity: .7; + @media (max-width: 350px) { + font-size: 12px; + } + } + & div:last-of-type span { + border: 1px solid var(--primary); + display: flex; + align-items: center; + justify-content: center; + padding: 10px 0; + color: #FFF; + background-color: var(--primary); + + &:first-of-type { + border-start-start-radius: 3px; + border-end-start-radius: 3px; + color: inherit; + background-color: var(--surface); + } + &:last-of-type { + border-end-end-radius: 3px; + border-start-end-radius: 3px; + color: inherit; + background-color: var(--surface); + } + } +} diff --git a/frontend/src/app/how-to/page.tsx b/frontend/src/app/how-to/page.tsx new file mode 100644 index 0000000..36c3774 --- /dev/null +++ b/frontend/src/app/how-to/page.tsx @@ -0,0 +1,74 @@ +import { Trans } from 'react-i18next/TransWithoutContext' +import { Metadata } from 'next' +import Link from 'next/link' +import { range } from '@giraugh/tools' + +import AvailabilityViewer from '/src/components/AvailabilityViewer/AvailabilityViewer' +import Button from '/src/components/Button/Button' +import Content from '/src/components/Content/Content' +import Header from '/src/components/Header/Header' +import { P } from '/src/components/Paragraph/Text' +import Section from '/src/components/Section/Section' +import TimeRangeField from '/src/components/TimeRangeField/TimeRangeField' +import Video from '/src/components/Video/Video' +import { useTranslation } from '/src/i18n/server' + +import styles from './page.module.scss' + +export const generateMetadata = async (): Promise => { + const { t } = await useTranslation('help') + + return { + title: t('name'), + } +} + +const Page = async () => { + const { t, i18n } = await useTranslation(['common', 'help']) + + return <> + + {/* @ts-expect-error Async Server Component */} +
+ +

{t('help:name')}

+ +