Migrate to typescript

src/App.module.scss.d.ts

@@ -0,0 +1,6 @@
+export const appContainer: string;
+export const center: string;
+export const flexList: string;
+export const footer: string;
+export const layoutBox: string;
+export const title: string;

src/_common.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/components/BoxMessage.js

@@ -1,27 +0,0 @@
-import React from "react";
-import PropTypes from 'prop-types';
-
-import * as styles from "./BoxMessage.module.scss";
-
-const BoxMessage = (props) => {
-    return (
-        <div className={styles.boxMessage + " " + styles[props.color] + " " + (props.hideInPlace ? styles.hideInPlace : "")}>
-            {props.icon ? <div className={styles.icon}><props.icon/></div> : null}
-            <span className={styles.content}>{props.children}</span>
-        </div>
-    );
-}
-
-BoxMessage.defaultProps = {
-    "color": "blue",
-    "hideInPlace": false
-}
-
-BoxMessage.props = {
-    "children": PropTypes.array.isRequired,
-    "icon": PropTypes.object,
-    "color": PropTypes.string,
-    "hideInPlace": PropTypes.bool
-};
-
-export default BoxMessage;

src/components/BoxMessage.module.scss.d.ts

@@ -0,0 +1,9 @@
+export const boxMessage: string;
+export const center: string;
+export const flexList: string;
+export const hideInPlace: string;
+export const icon: string;
+export const jump: string;
+export const layoutBox: string;
+export const red: string;
+export const title: string;

src/components/BoxMessage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import * as styles from "./BoxMessage.module.scss";
+
+type Props = {
+    color: "red"
+    hideInPlace?: boolean
+    icon?: React.ReactNode
+}
+
+const BoxMessage = (props: React.PropsWithChildren<Props>) => {
+    return (
+        <div className={styles.boxMessage + " " + styles[props.color] + " " + (props.hideInPlace ? styles.hideInPlace : "")}>
+            {props.icon ? <div className={styles.icon}>{props.icon}</div> : null}
+            <span>{props.children}</span>
+        </div>
+    );
+}
+
+BoxMessage.defaultProps = {
+    "color": "red",
+    "hideInPlace": false
+}
+
+export default BoxMessage;

src/components/LanguageChooser.module.scss.d.ts

@@ -0,0 +1,6 @@
+export const active: string;
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const lChooser: string;
+export const title: string;

src/components/LanguageChooser.tsx

@@ -6,7 +6,12 @@ import { useTranslation } from 'react-i18next';
 
 import * as styles from "./LanguageChooser.module.scss";
 
-const LanguageChooser = (props) => {
+type Props = {
+    active?: boolean
+    onDone: () => void
+}
+
+const LanguageChooser = (props: Props) => {
     const { t, i18n } = useTranslation();
 
     return ReactDOM.createPortal(

src/components/LinkBox.module.scss.d.ts

@@ -0,0 +1,9 @@
+export const center: string;
+export const flexList: string;
+export const highlight: string;
+export const layoutBox: string;
+export const lbIcon: string;
+export const lbText: string;
+export const linkBox: string;
+export const small: string;
+export const title: string;

src/components/LinkBox.tsx

@@ -1,17 +1,25 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import PropTypes from 'prop-types';
 
 import * as styles from "./LinkBox.module.scss";
 
-const LinkBox = (props) => {
+type Props = {
+    to: string
+    text: string
+    icon: React.ReactNode
+    small?: boolean
+    highlight?: boolean
+    external?: boolean
+}
+
+const LinkBox = (props: Props) => {
     return (!props.external ?
         <Link className={styles.linkBox + (props.small ? " "+styles.small : "") + (props.highlight ? " "+styles.highlight : "")} to={props.to}>
-            <div className={styles.lbIcon}><props.icon/></div>
+            <div className={styles.lbIcon}>{props.icon}</div>
             <span className={styles.lbText}>{props.text}</span>
         </Link> :
         <a className={styles.linkBox + (props.small ? " "+styles.small : "") + (props.highlight ? " "+styles.highlight : "")} href={props.to}>
-            <div className={styles.lbIcon}><props.icon/></div>
+            <div className={styles.lbIcon}>{props.icon}</div>
             <span className={styles.lbText}>{props.text}</span>
         </a>
     );
@@ -23,13 +31,4 @@ LinkBox.defaultProps = {
     "external": false
 }
 
-LinkBox.props = {
-    "to": PropTypes.string,
-    "text": PropTypes.string.isRequired,
-    "icon": PropTypes.object.isRequired,
-    "small": PropTypes.bool,
-    "highlight": PropTypes.bool,
-    "external": PropTypes.bool
-};
-
 export default LinkBox;

src/components/Navigation.module.scss.d.ts

@@ -0,0 +1,6 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const navigation: string;
+export const spacer: string;
+export const title: string;

src/helpers/prerenderedLoadable.js

@@ -2,7 +2,7 @@ import React from "react";
 import loadable from "@loadable/component";
 import { PrerenderedComponent } from "react-prerendered-component";
 
-const prerenderedLoadable = dynamicImport => {
+const prerenderedLoadable = (dynamicImport) => {
     const LoadableComponent = loadable(dynamicImport);
         return React.memo(props => (
         // you can use the `.preload()` method from react-loadable or react-imported-component`

src/index.scss.d.ts

@@ -0,0 +1,5 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const root: string;
+export const title: string;

src/pages/About.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/pages/Home.module.scss.d.ts

@@ -0,0 +1,8 @@
+export const center: string;
+export const flexList: string;
+export const heroBox: string;
+export const heroPretitle: string;
+export const heroSubtitle: string;
+export const heroTitle: string;
+export const layoutBox: string;
+export const title: string;

src/pages/Home.tsx

@@ -19,13 +19,13 @@ const HomePage = () => {
                 <span className={styles.heroSubtitle}>{t("home.heroSubtitle")}</span>
             </div>
         </div>
-        <main className={styles.categoryBox}>
+        <main>
             <div className={styles.layoutBox}>
                 <span className={styles.title}>{t("tools.toolCategories")}</span>
 
                 <div className={styles.flexList}>
-                    <LinkBox to={"/tools"} text={t("tools.categories.everything")} icon={List} />
-                    <LinkBox to={"/tools/cryptography"} text={t("tools.categories.cryptography")} icon={Binary} />
+                    <LinkBox to={"/tools"} text={t("tools.categories.everything")} icon={<List/>} />
+                    <LinkBox to={"/tools/cryptography"} text={t("tools.categories.cryptography")} icon={<Binary/>} />
                     {/*<LinkBox to={"/tools/osm"} text={"OSM"} icon={Map} />*/}
                 </div>
             </div>

src/pages/NotFound.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/pages/Tools.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/pages/Tools.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import * as styles from "./Tools.module.scss";
 import LinkBox from "../components/LinkBox";
 
-import { tools } from "../tools/tools.json";
+import tools from "../tools/tools";
 import { Helmet } from "react-helmet";
 
 const ToolsPage = () => {
@@ -23,19 +23,19 @@ const ToolsPage = () => {
 
     return <>
         <Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>
-        <main className={styles.categoryBox}>
+        <main>
             <div className={styles.layoutBox}>
                 <span className={styles.title}>{t("tools.toolList")}</span>
 
                 <div className={styles.flexList}>
-                    <LinkBox to={"/tools"} text={t("tools.categories.everything")} icon={icons.List} small={true} highlight={category == null} />
-                    <LinkBox to={"/tools/cryptography"} text={t("tools.categories.cryptography")} icon={icons.Binary} small={true} highlight={category === "cryptography"} />
+                    <LinkBox to={"/tools"} text={t("tools.categories.everything")} icon={<icons.List/>} small={true} highlight={category == null} />
+                    <LinkBox to={"/tools/cryptography"} text={t("tools.categories.cryptography")} icon={<icons.Binary/>} small={true} highlight={category === "cryptography"} />
                     {/*<LinkBox to={"/tools/osm"} text={"OSM"} icon={icons["Map"]} small={true} highlight={category === "osm"} />*/}
                 </div>
 
                 <div className={styles.flexList}>
                     {toolList.map((tool, i) => {
-                        return (<LinkBox key={"tool"+i} external={tool.external} to={tool.external ? tool.url : "/tool/"+tool.urlname} text={tool.name} icon={icons[tool.icon]} />);
+                        return (<LinkBox key={"tool"+i} external={tool.external} to={(tool.external ? tool.url : "/tool/"+tool.urlname) || ""} text={tool.name} icon={<tool.icon />} />);
                     })}
 
                     {toolList.length === 0 ? <span>{t("tools.noresults")}</span> : null}

src/tools/cyphers_and_cryptography/base64/Base64Tool.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/tools/cyphers_and_cryptography/base64/Base64Tool.tsx

@@ -13,11 +13,13 @@ const Base64Tool = () => {
 
     useEffect(() => {
         if(!reversed) {
+            // @ts-ignore
             const buf = new Buffer.from(input)
             setOutput(buf.toString("base64"))
         }
 
         if(reversed) {
+            // @ts-ignore
             const buf = new Buffer.from(output, "base64")
             setInput(buf.toString("utf-8"))
         }

src/tools/cyphers_and_cryptography/rot/RotTool.module.scss.d.ts

@@ -0,0 +1,4 @@
+export const center: string;
+export const flexList: string;
+export const layoutBox: string;
+export const title: string;

src/tools/cyphers_and_cryptography/rot/RotTool.tsx

@@ -22,9 +22,9 @@ const RotTool = () => {
         let max = 122; // This is z
         let range = max - min; // The length of the alphabet
 
-        let rotInput = reversed ? output.toLowerCase() : input.toLowerCase();
+        let rotInputStr = reversed ? output.toLowerCase() : input.toLowerCase();
 
-        rotInput = rotInput.split('');
+        let rotInput = rotInputStr.split('');
         
         let hasOutOfRange = false;
 
@@ -46,9 +46,9 @@ const RotTool = () => {
 
         setOutOfRangeWarning(hasOutOfRange);
 
-        rotOut = rotOut.join('').toUpperCase();
+        let rotOutStr = rotOut.join('').toUpperCase();
 
-        reversed ? setInput(rotOut) : setOutput(rotOut)
+        reversed ? setInput(rotOutStr) : setOutput(rotOutStr)
     }, [input, output, reversed, offset])
     
     return (
@@ -62,7 +62,7 @@ const RotTool = () => {
 
                 <p><Trans i18nKey={"tools.cryptography.rot.description"} components={{wikipedia: <a href="https://en.wikipedia.org/wiki/ROT13">xxx</a>, pre: <pre/>}} /></p>
 
-                <BoxMessage icon={AlertOctagon} color="red" hideInPlace={!outOfRangeWarning}>{t("tools.cryptography.rot.outOfRangeWarning")}</BoxMessage>
+                <BoxMessage icon={<AlertOctagon/>} color="red" hideInPlace={!outOfRangeWarning}>{t("tools.cryptography.rot.outOfRangeWarning")}</BoxMessage>
 
                 <label htmlFor="rot-input">{t("tools.cryptography.common.cleartext")}</label>
                 <textarea id="rot-input" placeholder={t("tools.cryptography.common.cleartext")} onChange={(e) => {setReversed(false); setInput(e.currentTarget.value.toUpperCase());}} value={input}></textarea>

src/tools/tools.ts

@@ -1,10 +1,11 @@
-{
-    "tools": [
+import {Smile, PlusSquare, Binary} from "lucide-react"
+
+const tools = [
         {
             "name": "Test01",
             "external": true,
             "url": "https://kevink.dev",
-            "icon": "Smile",
+            "icon": Smile,
             "category": "osm",
             "hidden": true
         },
@@ -12,7 +13,7 @@
             "name": "ROT-N",
             "external": false,
             "urlname": "rot",
-            "icon": "PlusSquare",
+            "icon": PlusSquare,
             "category": "cryptography",
             "hidden": false,
             "keywords": "rot, rot-n, caesar, rotation, cryptography, encryption, decryption"
@@ -21,10 +22,11 @@
             "name": "Base64",
             "external": false,
             "urlname": "base64",
-            "icon": "Binary",
+            "icon": Binary,
             "category": "cryptography",
             "hidden": false,
             "keywords": "binary, base64, base, 64, cryptography, encryption, decryption"
         }
     ]
-}
+
+export default tools