Migrate from Flow to TypeScript (#548)

Author: captainsafia

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": ["next/babel"],
   "plugins": [
-    "transform-flow-strip-types",
     [
       "styled-components",
       {

.flowconfig

@@ -9,5 +9,5 @@ jobs:
         with:
           node-version: '22'
       - run: yarn
-      - run: NODE_OPTIONS=--openssl-legacy-provider yarn build
-      - run: yarn flow
+      - run: yarn build
+      - run: yarn type-check

.github/workflows/ci-workflow.yml

@@ -1,20 +1,20 @@
 import styled, { css } from "styled-components";
-import { animations } from "@common/constants";
+import { animations, spacing } from "@common/constants";
 import { sif } from "@common/styled";
 
 const Delay = () => styled.div`
-${sif("xl")(css`
-  animation-delay: 2s;
-`)}
-${sif("l")(css`
-  animation-delay: 1s;
-`)}
+  ${sif("xl")(css`
+    animation-delay: 2s;
+  `)}
+  ${sif("l")(css`
+    animation-delay: 1s;
+  `)}
 ${sif("m")(css`
-  animation-delay: 0.5s;
-`)}
+    animation-delay: 0.5s;
+  `)}
 ${sif("s")(css`
-  animation-delay: 0.25s;
-`)}
+    animation-delay: 0.25s;
+  `)}
 `;
 
 const FadeIn = () => styled.div`

common/animations.js renamed to common/animations.ts

@@ -1,14 +1,14 @@
-function shadeColor(color, percent, rgb) {
+function shadeColor(color: string, percent: number, rgb?: boolean): string {
   if (color == null) {
     console.error("Null color is getting passed to darken");
   }
   var R = parseInt(color.substring(1, 3), 16);
   var G = parseInt(color.substring(3, 5), 16);
   var B = parseInt(color.substring(5, 7), 16);
 
-  R = parseInt((R * (100 + percent)) / 100);
-  G = parseInt((G * (100 + percent)) / 100);
-  B = parseInt((B * (100 + percent)) / 100);
+  R = Math.floor((R * (100 + percent)) / 100);
+  G = Math.floor((G * (100 + percent)) / 100);
+  B = Math.floor((B * (100 + percent)) / 100);
 
   R = R < 255 ? R : 255;
   G = G < 255 ? G : 255;
@@ -23,9 +23,13 @@ function shadeColor(color, percent, rgb) {
   return "#" + RR + GG + BB;
 }
 
-export const darken = (color, percent, rgb) =>
+export const darken = (color: string, percent: number, rgb?: boolean): string =>
   shadeColor(color, -1 * percent, rgb);
-export const lighten = (color, percent, rgb) => shadeColor(color, percent, rgb);
+export const lighten = (
+  color: string,
+  percent: number,
+  rgb?: boolean
+): string => shadeColor(color, percent, rgb);
 let mainColor = "#334865";
 let colorTextBase = "#313131"; // Default text color
 let primaryColor = "#5764c6";
@@ -60,7 +64,6 @@ export const colors = {
   primaryColor,
   linkColor,
   bgColor,
-  colorTextBase,
   darkPrimaryColor,
   lightPrimaryColor,
   darkColor,
@@ -81,5 +84,5 @@ export const colors = {
   // Meta colors
   codeColor,
   lightCodeColor,
-  highlightColor
+  highlightColor,
 };

common/colors.js renamed to common/colors.ts

@@ -15,20 +15,20 @@ const animations = {
   timingAnimation,
   timingAnimationDelay,
   easing,
-  transition
+  transition,
 };
 
 const fonts = {
   headings: `"Nunito", sans-serif`,
   body: `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
-  Roboto`
+  Roboto`,
 };
 
 const spacing = {
   unit,
   gutter,
   globalWidth,
-  headerHeight
+  headerHeight,
 };
 
 const effects = {
@@ -63,7 +63,7 @@ const effects = {
     colors.mainColor,
     25,
     true
-  )}, 0.5)`
+  )}, 0.5)`,
 };
 
 export { spacing, fonts, effects, animations };

common/constants.js renamed to common/constants.ts

@@ -1,7 +1,8 @@
-!(function() {
+// @ts-nocheck
+!(function () {
   function e(e, t) {
     var n = new XMLHttpRequest();
-    (n.onreadystatechange = function() {
+    (n.onreadystatechange = function () {
       4 === n.readyState && t(n.responseText);
     }),
       n.open("GET", e, !0),
@@ -14,9 +15,9 @@
   window.CSS || (window.CSS = {}),
     "paintWorklet" in window.CSS ||
       t(window.CSS, "paintWorklet", {
-        get: function() {
+        get: function () {
           return n || (n = new F());
-        }
+        },
       });
   var r = "css-paint-polyfill",
     i = document.createElement(r);
@@ -26,7 +27,8 @@
   var a = o.sheet,
     s = i.style,
     l = [],
-    u = /(paint\(|-moz-element\(#paint-|-webkit-canvas\(paint-|[('"]blob:[^'"#]+#paint=|[('"]data:image\/paint-)/,
+    u =
+      /(paint\(|-moz-element\(#paint-|-webkit-canvas\(paint-|[('"]blob:[^'"#]+#paint=|[('"]data:image\/paint-)/,
     c = "getCSSCanvasContext" in document,
     d = (s.backgroundImage = "-moz-element(#" + r + ")") === s.backgroundImage;
   s.cssText = "";
@@ -36,7 +38,7 @@
       "function" == typeof Promise
         ? Promise.prototype.then.bind(Promise.resolve())
         : setTimeout,
-    h = function() {
+    h = function () {
       return window.devicePixelRatio || 1;
     },
     g = {},
@@ -73,7 +75,7 @@
           toRemove: [],
           counters: {},
           isNew: !1,
-          sheetId: null
+          sheetId: null,
         },
         n = 0;
       n < e.length;
@@ -87,7 +89,7 @@
     }
     for (var i = t.toRemove.length; i--; ) delete m[t.toRemove[i].key];
     t.toProcess.length > 0 &&
-      (function(e) {
+      (function (e) {
         for (var t = document.querySelectorAll(e), n = 0; n < t.length; n++)
           N(t[n]);
       })(t.toProcess.join(", "));
@@ -175,7 +177,7 @@
   function L(e, t, n) {
     for (
       var r = e.length,
-        i = function() {
+        i = function () {
           --r || t.apply(null, n || l);
         },
         o = 0;
@@ -191,7 +193,7 @@
     return (
       null == n &&
         ((n = e.$$paintId = ++D),
-        (function(e) {
+        (function (e) {
           if (!0 === p) return;
           if (e.style.ownerElement === e) return;
           t(e.style, "ownerElement", { value: e });
@@ -238,9 +240,9 @@
     e.$$paintPending = !1;
   }
   var z = {
-      get: function(e) {
+      get: function (e) {
         return e in E ? E[e] : (E[e] = k.getPropertyValue(e));
-      }
+      },
     },
     D = 0;
   function M(e, t) {
@@ -253,7 +255,7 @@
     for (
       var s = {
           width: parseFloat(z.get("width")),
-          height: parseFloat(z.get("height"))
+          height: parseFloat(z.get("height")),
         },
         l = h(),
         u = e.$$paintedProperties,
@@ -264,7 +266,8 @@
       for (
         var v = r[p],
           f = z.get(v),
-          m = /(,|\b|^)url\((['"]?)((?:-moz-element\(#|-webkit-canvas\()paint-\d+-([^;,]+)\)|(?:data:image\/paint-|blob:[^'"#]+#paint=)([^"';, ]+)[;,].*?)\2\)(,|\b|$)/g,
+          m =
+            /(,|\b|^)url\((['"]?)((?:-moz-element\(#|-webkit-canvas\()paint-\d+-([^;,]+)\)|(?:data:image\/paint-|blob:[^'"#]+#paint=)([^"';, ]+)[;,].*?)\2\)(,|\b|$)/g,
           y = "",
           b = 0,
           w = [],
@@ -362,12 +365,12 @@
   function B(e, t, n) {
     e.setProperty(t, n, "important");
   }
-  var F = function() {
+  var F = function () {
     v(w);
     var e = document.createElement("x-a");
     document.body.appendChild(e);
     var n = !1;
-    new MutationObserver(function(e) {
+    new MutationObserver(function (e) {
       if (!0 !== n) {
         n = !0;
         for (var t = 0; t < e.length; t++) {
@@ -381,40 +384,40 @@
       }
     }).observe(document.body, { childList: !0, attributes: !0, subtree: !0 }),
       (e.style.cssText = "color: red;"),
-      setTimeout(function() {
+      setTimeout(function () {
         if (((p = "$$paintPending" in e), document.body.removeChild(e), !p)) {
           var n = Object.getOwnPropertyDescriptor(
               CSSStyleDeclaration.prototype,
               "cssText"
             ),
             r = n.set;
-          (n.set = function(e) {
+          (n.set = function (e) {
             return this.ownerElement && N(this.ownerElement), r.call(this, e);
           }),
             t(CSSStyleDeclaration.prototype, "cssText", n);
         }
       });
   };
-  F.prototype.addModule = function(n) {
+  F.prototype.addModule = function (n) {
     var r = this;
-    e(n, function(e) {
+    e(n, function (e) {
       var n = {
-        registerPaint: function(e, t) {
-          !(function(e, t, n) {
+        registerPaint: function (e, t) {
+          !(function (e, t, n) {
             g[e] = {
               worklet: n,
               Painter: t,
               properties: t.inputProperties
                 ? [].slice.call(t.inputProperties)
                 : [],
               bit: 0,
-              instances: []
+              instances: [],
             };
           })(e, t, { context: n, realm: o });
-        }
+        },
       };
       t(n, "devicePixelRatio", { get: h }), (n.self = n);
-      var o = new function(e, t) {
+      var o = new (function (e, t) {
         var n = document.createElement("iframe");
         (n.style.cssText =
           "position:absolute; left:0; top:-999px; width:1px; height:1px;"),
@@ -434,7 +437,7 @@
         ),
           i.body.appendChild(l),
           (this.exec = r.$hook(e, console));
-      }(n, i);
+      })(n, i);
       (e = (r.transpile || String)(e)), o.exec(e);
     });
   };

common/css-paint-polyfill.js renamed to common/css-paint-polyfill.ts

@@ -1,26 +1,27 @@
-// @flow
-
-import type { Context } from "next";
+import type { GetServerSidePropsContext, NextPageContext } from "next";
+import type { Platform } from "../../types/platform";
 
 import "isomorphic-fetch";
 
-const EXTENSIONS = {
+const EXTENSIONS: Record<Platform, string> = {
   macOS: ".dmg",
   Linux: ".AppImage",
-  Windows: ".exe"
+  Windows: ".exe",
 };
 
-export function detectPlatform(ctx: Context): Platform {
+export function detectPlatform(
+  ctx: GetServerSidePropsContext | NextPageContext
+): Platform {
   if (ctx.req && ctx.req.headers) {
     // Server side
     const ua = ctx.req.headers["user-agent"];
-    if (/Windows/.test(ua)) {
+    if (ua && /Windows/.test(ua)) {
       return "Windows";
-    } else if (/Linux/.test(ua)) {
+    } else if (ua && /Linux/.test(ua)) {
       return "Linux";
     }
     // Client side
-  } else if (navigator.platform) {
+  } else if (typeof navigator !== "undefined" && navigator.platform) {
     if (/Win/.test(navigator.platform)) {
       return "Windows";
     } else if (/Linux/.test(navigator.platform)) {
@@ -38,7 +39,7 @@ export async function getDownloadUrl(platform: Platform): Promise<string> {
     );
     const json = await res.json();
 
-    const asset = json.assets.find(asset => {
+    const asset = json.assets.find((asset: any) => {
       return asset.browser_download_url.endsWith(EXTENSIONS[platform]);
     });