update typescript

components/Theme.js

@@ -0,0 +1,153 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+exports.useThemeContext = exports.ThemeProvider = exports.emptyPalette = exports.PALETTE_NAMES = void 0;
+var react_1 = require("react");
+exports.PALETTE_NAMES = [
+    "--primary-background",
+    "--secondary-background",
+    "--primary-accent",
+    "--primary-accent-soft",
+    "--primary-accent-light",
+    "--primary-accent-lighter",
+    "--primary-accent-lightest",
+    "--secondary-accent",
+    "--secondary-accent-light",
+    "--primary-heading",
+    "--secondary-heading",
+    "--primary-title",
+    "--primary-subtitle",
+    "--secondary-subtitle",
+    "--primary-text",
+    "--text",
+    "--text-light",
+    "--author-text",
+    "--info-text",
+    "--mini-event-card-text",
+    "--form-invalid",
+    "--warning-background",
+    "--warning-text",
+    "--input-background",
+    "--input-placeholder-text",
+    "--input-text",
+    "--icon",
+    "--code-background",
+    "--button-background",
+    "--footer-background",
+    "--card-background",
+    "--table-header",
+    "--table-section",
+    "--navbar-page-overlay",
+    "--link",
+    "--link-hover",
+    "--blue-gradient",
+    "--border",
+    "--marker",
+];
+exports.emptyPalette = exports.PALETTE_NAMES.reduce(function (partial, varName) {
+    var _a;
+    return (__assign(__assign({}, partial), (_a = {}, _a[varName] = "#c4e0f8", _a)));
+}, {});
+var ThemeContext = react_1.createContext(undefined);
+function ThemeProvider(props) {
+    var update = useForcedUpdate();
+    var _a = react_1.useState(undefined), themeName = _a[0], setThemeName = _a[1];
+    var setTheme = function (input) {
+        if (typeof input === "string") {
+            exports.PALETTE_NAMES.forEach(function (name) {
+                return document.body.style.setProperty(name, "var(--" + input + name + ")");
+            });
+            savePalette(getCurrentPalette(input));
+            setThemeName(input);
+        }
+        else {
+            var properties = Object.keys(input);
+            properties.forEach(function (property) {
+                var _a, _b;
+                return document.body.style.setProperty(property, (_b = (_a = input[property]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : null);
+            });
+            setThemeName("custom");
+        }
+        update();
+    };
+    react_1.useEffect(function () {
+        var customPalette = getSavedPalette();
+        if (customPalette == null) {
+            var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            if (prefersDark) {
+                setTheme("dark");
+            }
+            else {
+                setTheme("light");
+            }
+        }
+        else {
+            setTheme(customPalette);
+            setThemeName("custom");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (<ThemeContext.Provider value={themeName == null
+            ? undefined
+            : {
+                theme: {
+                    name: themeName,
+                    get palette() {
+                        return getCurrentPalette(themeName);
+                    }
+                },
+                setTheme: setTheme,
+                save: function () { return savePalette(getCurrentPalette(themeName)); },
+                clearSaved: clearSavedPalette
+            }}>
+      {props.children}
+    </ThemeContext.Provider>);
+}
+exports.ThemeProvider = ThemeProvider;
+function useThemeContext() {
+    return react_1.useContext(ThemeContext);
+}
+exports.useThemeContext = useThemeContext;
+function themePropertyName(name, themeName) {
+    return "--" + themeName + name;
+}
+function getCurrentPalette(themeName) {
+    var styles = getComputedStyle(document.body);
+    if (themeName === "light" || themeName === "dark") {
+        return exports.PALETTE_NAMES.reduce(function (partial, name) {
+            var _a;
+            return (__assign(__assign({}, partial), (_a = {}, _a[name] = styles
+                .getPropertyValue(themePropertyName(name, themeName))
+                .trim(), _a)));
+        }, {});
+    }
+    return exports.PALETTE_NAMES.reduce(function (partial, name) {
+        var _a;
+        return (__assign(__assign({}, partial), (_a = {}, _a[name] = styles.getPropertyValue(name).trim(), _a)));
+    }, {});
+}
+function useForcedUpdate() {
+    var _a = react_1.useState(true), fakeState = _a[0], setFakeState = _a[1];
+    return function () { return setFakeState(!fakeState); };
+}
+var STORAGE_KEY = "csc-theme-palette";
+function getSavedPalette() {
+    var raw = localStorage.getItem(STORAGE_KEY);
+    return raw == null ? undefined : JSON.parse(raw);
+}
+function savePalette(palette) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(palette));
+}
+function clearSavedPalette() {
+    localStorage.removeItem(STORAGE_KEY);
+}

package.json

@@ -41,14 +41,14 @@
     "@types/mdx-js__react": "^1.5.3",
     "@types/node": "^16.9.1",
     "@types/react": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "4.28.4",
-    "@typescript-eslint/parser": "4.28.4",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "5.22.0",
+    "@typescript-eslint/parser": "5.22.0",
+    "eslint": "8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "gray-matter": "^4.0.3",
     "ical-generator": "^3.0.0",
     "postcss": "^8.3.0",
@@ -56,6 +56,6 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-preset-env": "^7.0.0",
     "ts-node": "^10.2.1",
-    "typescript": "4.3.5"
+    "typescript": "4.6.4"
   }
 }