refactor(pages/*): Partially migrate to TypeScript (#398)

cesium · Oct 19, 2022 · 62125e3 · 62125e3
1 parent b96f0d0
commit 62125e3
Show file tree

Hide file tree

Showing 33 changed files with 3,969 additions and 2,185 deletions.
diff --git a/components/moonstone/utils/Input/index.jsx → components/moonstone/utils/Input/index.tsx b/components/moonstone/utils/Input/index.jsx → components/moonstone/utils/Input/index.tsx
@@ -1,6 +1,14 @@
-import { forwardRef } from "react";
+import { forwardRef, InputHTMLAttributes } from "react";
 
-export default forwardRef(function Input(
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  text: string;
+  autocomplete?: string;
+  fgColor: string;
+  bgColor: string;
+  enabled?: boolean;
+}
+
+export default forwardRef<HTMLInputElement, Props>(function Input(
   {
     text,
     id,
@@ -12,6 +20,7 @@ export default forwardRef(function Input(
     bgColor,
     onChange,
     enabled,
+    ...rest
   },
   ref
 ) {
@@ -46,6 +55,7 @@ export default forwardRef(function Input(
           onChange={onChange}
           disabled={enabled == false}
           ref={ref}
+          {...rest}
         />
       </div>
     </div>

diff --git a/components/moonstone/utils/Return/index.jsx → components/moonstone/utils/Return/index.tsx b/components/moonstone/utils/Return/index.jsx → components/moonstone/utils/Return/index.tsx
@@ -1,6 +1,10 @@
 import Link from "next/link";
 
-export default function Return({ componentStyle }) {
+interface Props {
+  componentStyle?: string;
+}
+
+export default function Return({ componentStyle }: Props) {
   return (
     <Link href="/">
       <a

diff --git a/components/utils/Button/index.jsx b/components/utils/Button/index.jsx
diff --git a/components/utils/Button/index.tsx b/components/utils/Button/index.tsx
@@ -0,0 +1,27 @@
+import { ButtonHTMLAttributes } from "react";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  customStyle: string;
+}
+
+export default function Button({
+  text,
+  type,
+  disabled,
+  onClick,
+  customStyle,
+  ...rest
+}: Props) {
+  return (
+    <button
+      onClick={onClick}
+      type={type}
+      disabled={disabled}
+      className={`${customStyle} w-full items-center rounded-full border px-4 py-4 text-center font-iregular text-sm shadow-sm`}
+      {...rest}
+    >
+      {text}
+    </button>
+  );
+}
diff --git a/components/website/speakers/Schedule/index.jsx b/components/website/speakers/Schedule/index.jsx
@@ -106,14 +106,14 @@ export default function Schedule(props) {
   };
 
   return (
-    <section className="spacing bg-secondary relative pb-20 lg:pt-10 2xl:grid 2xl:grid-cols-2">
+    <section className="spacing relative bg-secondary pb-20 lg:pt-10 2xl:grid 2xl:grid-cols-2">
       <div className="relative z-50 mb-10 grid place-items-center text-white sm:flex sm:flex-col md:mr-10 md:place-items-start">
         <Day date={date} previousDay={previous_day} nextDay={next_day} />
-        <p className="text-md font-iregular mt-10 w-5/6 md:px-20">
+        <p className="text-md mt-10 w-5/6 font-iregular md:px-20">
           During this week, you have the opportunity to interact with many
           recognized speakers, national, international and notorious companies!
         </p>
-        <p className="text-md font-iregular mt-4 w-5/6 md:px-20">
+        <p className="text-md mt-4 w-5/6 font-iregular md:px-20">
           You can get to know them better here.
         </p>
       </div>

diff --git a/components/website/team/Organization/index.jsx b/components/website/team/Organization/index.jsx
@@ -1,5 +1,5 @@
 import useInView from "react-cool-inview";
-import Fade from "react-reveal/Fade";
+import { motion as Motion } from "framer-motion";
 import Card from "/components/utils/Card";
 import SeiAnimation from "./Animation";
 
@@ -30,7 +30,11 @@ function Animation() {
     /* We need to have height set in order for inView to work properly */
     <div ref={observe} style={{ height: "25px" }}>
       {inView ? (
-        <Fade bottom>
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ y: -15, opacity: 1 }}
+          transition={{ duration: 1 }}
+        >
           <div className={`-mt-6 ${styles.cardfooter} border-b-2 border-white`}>
             <Card
               img="/images/mascot-footer.svg"
@@ -41,7 +45,7 @@ function Animation() {
               first place
             </Card>
           </div>
-        </Fade>
+        </Motion.div>
       ) : (
         <></>
       )}

diff --git a/components/website/utils/Footer/index.jsx → components/website/utils/Footer/index.tsx b/components/website/utils/Footer/index.jsx → components/website/utils/Footer/index.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from "react";
+import React, { ReactNode, useState } from "react";
 import useInView from "react-cool-inview";
-import Fade from "react-reveal/Fade";
+import { motion as Motion } from "framer-motion";
 
 import Image from "next/image";
 import Link from "next/link";
 
-import Social from "/components/website/utils/Social";
-import Card from "/components/utils/Card";
+import Social from "@components/website/utils/Social";
+import Card from "@components/utils/Card";
 
 import styles from "./style.module.css";
 
@@ -22,7 +22,12 @@ function DefaultAnimation() {
   );
 }
 
-function Animation({ text }) {
+interface IAnimationProps {
+  children: ReactNode;
+  text: string | JSX.Element;
+}
+
+function Animation({ text }: IAnimationProps) {
   const { observe, inView } = useInView({
     threshold: 0.25,
     onChange: ({ observe, unobserve }) => {
@@ -35,7 +40,11 @@ function Animation({ text }) {
     /* We need to have height set in order for inView to work properly */
     <div ref={observe} style={{ height: "25px" }}>
       {inView ? (
-        <Fade bottom>
+        <Motion.div
+          initial={{ opacity: 0 }}
+          animate={{ y: -15, opacity: 1 }}
+          transition={{ duration: 1 }}
+        >
           <div className={`-mt-6 ${styles.cardfooter}`}>
             <Card
               img="/images/mascot-footer.svg"
@@ -45,17 +54,23 @@ function Animation({ text }) {
               {text}
             </Card>
           </div>
-        </Fade>
+        </Motion.div>
       ) : (
         <></>
       )}
     </div>
   );
 }
 
-export default function Footer(props) {
-  const [setAnimation] = useState(false);
-  const { ref, inView } = useInView({
+interface IFooterProps {
+  children?: ReactNode;
+  color: string;
+  footerAnimationText?: string;
+}
+
+export default function Footer(props: IFooterProps) {
+  const [_, setAnimation] = useState(false);
+  const { observe, inView } = useInView({
     onEnter: () => {
       setAnimation(true);
     },
@@ -64,19 +79,21 @@ export default function Footer(props) {
     },
   });
 
-  let color = inView
-    ? { transition: "background 2s ease", background: "#181818" }
-    : "";
+  let color = inView && {
+    transition: "background 2s ease",
+    background: "#181818",
+  };
 
   return (
     <div
       className={`spacing ${styles.bgTransition} bg-${props.color}`}
-      ref={ref}
+      ref={observe}
       style={{ ...color, overflowY: "hidden" }}
     >
       <div className="justify-center lg:flex">
         <div className="flex-1">
           <div className="flex justify-center font-ibold lg:justify-start">
+            {/* eslint-disable-next-line jsx-a11y/alt-text */}
             <Image
               className="lg:flex-1"
               src="/images/sei-logo.svg"
@@ -116,8 +133,8 @@ export default function Footer(props) {
       <div className="invisible -mt-20 flex justify-center pb-10 lg:visible">
         <Animation
           text={
-            props.animationText != undefined ? (
-              props.animationText
+            props.footerAnimationText != undefined ? (
+              props.footerAnimationText
             ) : (
               <DefaultAnimation />
             )

diff --git a/...ebsite/utils/UnderlineAnimation/index.jsx → ...ebsite/utils/UnderlineAnimation/index.tsx b/...ebsite/utils/UnderlineAnimation/index.jsx → ...ebsite/utils/UnderlineAnimation/index.tsx
@@ -1,10 +1,20 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, ReactNode, useCallback } from "react";
 
-import Card from "/components/utils/Card";
+import Card from "@components/utils/Card";
 
 import styles from "./style.module.css";
 
-export default function UnderlineAnimation({ children, text, afterText }) {
+interface Props {
+  children: ReactNode;
+  text: string;
+  afterText?: string;
+}
+
+export default function UnderlineAnimation({
+  children,
+  text,
+  afterText,
+}: Props) {
   const extendedMargin = -240;
   const retractedMargin = -12;
   const speed = 4;
@@ -17,7 +27,7 @@ export default function UnderlineAnimation({ children, text, afterText }) {
 
   const [st, updateState] = useState(defaultState);
 
-  const scrollDown = () => {
+  const scrollDown = useCallback(() => {
     if (st.margin == retractedMargin) {
       updateState({
         status: 0,
@@ -29,9 +39,9 @@ export default function UnderlineAnimation({ children, text, afterText }) {
         margin: st.margin + speed,
       });
     }
-  };
+  }, [retractedMargin, st.margin, st.status]);
 
-  const scrollUp = () => {
+  const scrollUp = useCallback(() => {
     if (st.margin == extendedMargin) {
       updateState({
         status: 0,
@@ -43,15 +53,15 @@ export default function UnderlineAnimation({ children, text, afterText }) {
         margin: st.margin - speed,
       });
     }
-  };
+  }, [extendedMargin, st.margin, st.status]);
 
   useEffect(() => {
     if (st.status == 1) {
       setTimeout(scrollDown, 1000 / fps);
     } else if (st.status == 3) {
       setTimeout(scrollUp, 1000 / fps);
     }
-  }, [st]);
+  }, [scrollDown, scrollUp, st]);
 
   return (
     <span className="relative z-10 inline-block h-auto w-auto leading-none md:mt-4">

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.