Implement MVP for Gregorian calendar

2025-04-24 09:41:57 -04:00 · 2024-05-12 02:47:15 -04:00 · 2024-05-12 02:47:15 -04:00 · beb8b28ac0
parent 37599c1969
commit beb8b28ac0
13 changed files with 373 additions and 0 deletions
--- a/gcal/README.md
+++ b/gcal/README.md
@ -0,0 +1 @@
+# Gregorian Calendar
--- a/gcal/config-overrides.js
+++ b/gcal/config-overrides.js
@ -0,0 +1,9 @@
+const {aliasWebpack, aliasJest} = require('react-app-alias-ex');
+
+const options = {};
+module.exports = aliasWebpack(options);
+module.exports.jest = function (config) {
+  const result = aliasJest(options)(config);
+  result.moduleDirectories.unshift(require('path').resolve(__dirname, '../node_modules'));
+  return result;
+};
--- a/gcal/package.json
+++ b/gcal/package.json
@ -0,0 +1,51 @@
+{
+  "name": "gcal",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^16.11.24",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "bootstrap": "~5.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^12.4.0",
+    "typescript": "^4.5.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/bootstrap": "^5.1.9",
+    "react-app-alias-ex": "^2.1.0",
+    "react-app-rewired": "^2.2.1"
+  }
+}
--- a/gcal/public/index.html
+++ b/gcal/public/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <link rel="canonical" href="%PUBLIC_URL%/"/>
+    <title>Gregorian Calendar</title>
+</head>
+<body>
+<nav class="navbar navbar-expand-md navbar-light">
+    <div class="container">
+        <a class="navbar-brand" href="#">Gregorian Calendar</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-anchors"
+                aria-controls="nav-anchors" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="nav-anchors">
+            <ul class="nav navbar-nav mr-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="#explanation">Explanation</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="https://frcal.qt.ax">French Republican Calendar</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<footer class="footer">
+    <div class="container">
+        <p class="text-muted">Copyright &copy; 2022<%= new Date().getFullYear() > 2022 ? `–${new Date().getFullYear()}`
+            : '' %>
+            <a href="https://quantum5.ca">Quantum</a>.
+            Licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPLv3</a>.
+            Source code available on <a href="https://github.com/quantum5/qcal">GitHub</a>.<br>
+        </p>
+    </div>
+</footer>
+<script>
+  (function(j,u,l,i,a,n,c){j['GoogleAnalyticsObject']=a;j[a]=j[a]||function(){
+    (j[a].q=j[a].q||[]).push(arguments)},j[a].l=1*new Date();n=u.createElement(l),
+    c=u.getElementsByTagName(l)[0];n.async=1;n.src=i;c.parentNode.insertBefore(n,c)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-102581070-4', 'auto');
+  ga('send', 'pageview');
+</script>
+</body>
+</html>
--- a/gcal/public/robots.txt
+++ b/gcal/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/gcal/src/App.tsx
+++ b/gcal/src/App.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+import {Calendar} from './Calendar';
+import {JulianMonth} from '@common/gregorian';
+import {DayChanger} from '@common/ui/DayChanger';
+import {jdnJulian} from '@common/julian';
+import MonthBasedApp from '@common/ui/MonthBasedApp';
+
+export default class App extends MonthBasedApp<number, JulianMonth> {
+    override parseYearMonth(year: string, month: string) {
+        if (+month < 1 || +month > 12)
+            return null;
+        return {year: +year, month: +month as JulianMonth};
+    }
+
+    override defaultSelector(todayJDN: number) {
+        const [year, month] = jdnJulian(todayJDN);
+        return {year, month};
+    }
+
+    render() {
+        const {selector: {year, month}, todayJDN} = this.state;
+        return <>
+            <Calendar
+                year={year} month={month} todayJDN={todayJDN}
+                onSwitch={(year, month) => this.setState({selector: {year, month}})}/>
+
+            <DayChanger onDateChange={this.onDateChange}/>
+        </>;
+    }
+}
--- a/gcal/src/Calendar.scss
+++ b/gcal/src/Calendar.scss
@ -0,0 +1,7 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/grid';
+@import '@common/ui/consts.scss';
+@import '@common/ui/MonthBasedCalendar.scss';
+@import '@common/ui/SevenDayWeek.scss';
--- a/gcal/src/Calendar.tsx
+++ b/gcal/src/Calendar.tsx
@ -0,0 +1,157 @@
+import React from 'react';
+import './Calendar.scss';
+import {
+    formatJG,
+    gregorianJDN,
+    gregorianMonthDays,
+    jdnGregorian,
+    JulianDay,
+    JulianMonth,
+    monthName,
+    weekdayNames,
+} from '@common/gregorian';
+import {jdnLongCount} from '@common/longCount';
+import {jdnJulian, julianJDN, julianMonthDays} from '@common/julian';
+import {frDateFormat, frEndJD, frStartJD, jdnFrench} from '@common/french';
+import {useMobileTooltipProps} from '@common/ui/MobileTooltip';
+import {MonthBasedCalendar} from '@common/ui/MonthBasedCalendar';
+
+type JulianYear = number;
+
+type MonthProps = {
+    year: JulianYear;
+    month: JulianMonth;
+};
+
+type DateProps = MonthProps & {
+    day: JulianDay;
+};
+
+function WeekdayName({name}: { name: string }): JSX.Element {
+    return <div className="WeekdayName">{name}</div>;
+}
+
+function DayDetail({jdn}: { jdn: number }): JSX.Element {
+    const lc = jdnLongCount(jdn);
+    const mobile = useMobileTooltipProps();
+    return <div className="DayDetail">
+        <div className="DayDetail-jdn"><abbr title="Julian day number" {...mobile}>JD</abbr> {jdn}</div>
+        <div className="DayDetail-julian">
+            <abbr title="Julian date" {...mobile}>J.</abbr>{' '}
+            {formatJG(jdnJulian(jdn))}
+        </div>
+        {lc && <div className="DayDetail-lc">
+          <abbr title="Mesoamerican long count date" {...mobile}>LC</abbr>{' '}
+            {lc.join('.\u200b')}
+        </div>}
+        {jdn >= frStartJD && jdn <= frEndJD && <div className="DayDetail-fr">
+          <abbr title="French Republican Calendar" {...mobile}>FR</abbr>{' '}
+            {frDateFormat(jdnFrench(jdn))}
+        </div>}
+    </div>;
+}
+
+function Day({year, month, day, todayJDN}: DateProps & { todayJDN: number }): JSX.Element {
+    const jdn = gregorianJDN(year, month, day);
+    return <div className={`Day NormalDay ${jdn === todayJDN ? 'Day-today' : ''}`}>
+        <div className="Day-name">{day}</div>
+        <div className="Day-weekday">{weekdayNames[(jdn + 1) % 7]}</div>
+        <DayDetail jdn={jdn}/>
+    </div>;
+}
+
+function Month({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element {
+    const decadeHeads = weekdayNames.map((name, i) => <WeekdayName key={i} name={name}/>);
+    const firstJDN = gregorianJDN(year, month, 1);
+    const firstWeekday = (firstJDN + 1) % 7;
+    const daysTotal = gregorianMonthDays(year, month);
+    return <div className="Month">
+        <div className="Month-weekdayHead">{decadeHeads}</div>
+        <div className="Month-days">{
+            Array.from(Array(6).keys()).flatMap(i => {
+                if (i * 7 - firstWeekday + 1 > daysTotal)
+                    return [];
+                return Array.from(Array(7).keys()).map(j => {
+                    const day = i * 7 + j - firstWeekday + 1 as JulianDay;
+                    if (day < 1 || day > daysTotal)
+                        return <div key={j} className="DayFiller"/>;
+                    return <div key={j} className="DayOuter">
+                        <Day year={year} month={month} day={day} todayJDN={todayJDN}/>
+                    </div>;
+                });
+            })
+        }</div>
+    </div>;
+}
+
+export class Calendar extends MonthBasedCalendar<JulianYear, JulianMonth> {
+    override parseYear(year: string): JulianYear {
+        return +year;
+    }
+
+    override parseMonth(month: string): JulianMonth {
+        return +month as JulianMonth;
+    }
+
+    override yearToString(year: JulianYear): string {
+        return year.toString();
+    }
+
+    override monthToString(month: JulianMonth): string {
+        return month.toString();
+    }
+
+    private goToNormalized(year: number, month: number) {
+        while (month < 1) {
+            --year;
+            month += 12;
+        }
+
+        while (month > 12) {
+            ++year;
+            month -= 12;
+        }
+
+        this.goTo(year, month as JulianMonth);
+    }
+
+    override prevYear = () => {
+        this.goToNormalized(this.props.year - 1, this.props.month);
+    };
+
+    override prevMonth = () => {
+        this.goToNormalized(this.props.year, this.props.month - 1);
+    };
+
+    override nextYear = () => {
+        this.goToNormalized(this.props.year + 1, this.props.month);
+    };
+
+    override nextMonth = () => {
+        this.goToNormalized(this.props.year, this.props.month + 1);
+    };
+
+    override isValidYear(year: string): boolean {
+        return /^-?\d+/.test(year);
+    }
+
+    override jdnLookup(jdn: number): { year: JulianYear; month: JulianMonth } {
+        const [year, month] = jdnGregorian(jdn);
+        return {year, month};
+    }
+
+    override monthName(year: JulianYear, month: JulianMonth): string {
+        return `${monthName(month)} ${year}`;
+    }
+
+    override renderMonthOptions(): JSX.Element[] {
+        return Array.from(Array(12).keys()).map(i => {
+            const month = i + 1 as JulianMonth;
+            return <option key={i} value={month}>{monthName(month)}</option>;
+        });
+    }
+
+    override renderBody(): JSX.Element {
+        return <Month year={this.props.year} month={this.props.month} todayJDN={this.props.todayJDN}/>
+    }
+}
--- a/gcal/src/index.tsx
+++ b/gcal/src/index.tsx
@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'bootstrap/js/dist/collapse';
+import '@common/ui/index.scss';
+import App from './App';
+import reportWebVitals from '@common/ui/reportWebVitals';
+import {MobileTooltipProvider} from '@common/ui/MobileTooltip';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <MobileTooltipProvider>
+            <App/>
+        </MobileTooltipProvider>
+    </React.StrictMode>,
+    document.getElementById('root'),
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/gcal/src/react-app-env.d.ts
+++ b/gcal/src/react-app-env.d.ts
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/gcal/src/setupTests.ts
+++ b/gcal/src/setupTests.ts
@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/gcal/tsconfig.json
+++ b/gcal/tsconfig.json
@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.paths.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/gcal/tsconfig.paths.json
+++ b/gcal/tsconfig.paths.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@common/*": ["../common/src/*"]
+    }
+  }
+}