build(app): upgrade to next 13 and upgrade other dependencies

cholazzzb · Aug 11, 2023 · 1257e32 · 1257e32
1 parent 7ae41bc
commit 1257e32
Show file tree

Hide file tree

Showing 29 changed files with 3,031 additions and 8,941 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,7 +1,6 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "plugin:storybook/recommended",
     "prettier"
   ]
 }
diff --git a/components/Animation.tsx b/components/Animation.tsx
@@ -1,4 +1,4 @@
-import styles from "./Animation.module.css";
+import styles from './Animation.module.css';
 
 type BlinkProps = {
   children: React.ReactNode;

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,16 +1,12 @@
-import Image from "next/image";
-import styles from "./Button.module.css";
+import Image from 'next/legacy/image';
+import styles from './Button.module.css';
 
 type FloatingButtonProps = {
   color?: string;
   onClick?: () => void;
   iconSrc: string;
 };
-export const FloatingButton = ({
-  onClick,
-  iconSrc,
-}: FloatingButtonProps) => {
-
+export const FloatingButton = ({ onClick, iconSrc }: FloatingButtonProps) => {
   return (
     <button
       className={`${styles.floatingButton} ${styles.green}`}
@@ -30,17 +26,17 @@ export const FloatingButton = ({
 
 type IconButtonProps = {
   color?: string;
-  size?: "small" | "medium" | "large";
+  size?: 'small' | 'medium' | 'large';
   iconSrc: string;
   onClick?: () => void;
 };
 export const IconButton = ({
-  color = "white",
-  size = "small",
+  color = 'white',
+  size = 'small',
   onClick,
   iconSrc,
 }: IconButtonProps) => {
-  const sizeVal = size === "small" ? 25 : size === "medium" ? 35 : 45;
+  const sizeVal = size === 'small' ? 25 : size === 'medium' ? 35 : 45;
 
   return (
     <button

diff --git a/components/Card.module.css b/components/Card.module.css
@@ -49,4 +49,4 @@
   align-items: flex-end;
   justify-content: center;
   width: 100%;
-}
+}
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import styles from "./Card.module.css";
+import { ReactNode } from 'react';
+import styles from './Card.module.css';
 
 type CardProps = {
   width?: number;
@@ -15,11 +15,11 @@ export const Card = ({ width = 300, children }: CardProps) => {
 
 type CardHeadProps = {
   children?: ReactNode;
-  justify?: "justifyCenter" | "justifyBetween";
+  justify?: 'justifyCenter' | 'justifyBetween';
 };
 export const CardHead = ({
   children,
-  justify = "justifyCenter",
+  justify = 'justifyCenter',
 }: CardHeadProps) => {
   return (
     <div className={`${styles.cardHead} ${styles[justify]}`}>{children}</div>
@@ -38,10 +38,10 @@ export const RowCard = ({ children }: RowCardProps) => {
 };
 
 type ColCardProps = {
-  padding?: "small" | "medium" | "large";
+  padding?: 'small' | 'medium' | 'large';
   children?: ReactNode;
 };
-export const ColCard = ({ padding = "small", children }: ColCardProps) => {
+export const ColCard = ({ padding = 'small', children }: ColCardProps) => {
   return (
     <div className={`${styles.colCard} ${styles[padding]}`}>{children}</div>
   );

diff --git a/components/Chip.module.css b/components/Chip.module.css
@@ -11,7 +11,7 @@
   margin-bottom: 8px;
 }
 
-.white{
+.white {
   background-color: #fff;
 }
 

diff --git a/components/Chip.tsx b/components/Chip.tsx
@@ -1,11 +1,11 @@
-import styles from "./Chip.module.css";
+import styles from './Chip.module.css';
 
 type ChipProps = {
   children: React.ReactNode;
   color?: string;
 };
 
-const Chip = ({ children, color = "black" }: ChipProps) => {
+const Chip = ({ children, color = 'black' }: ChipProps) => {
   return <div className={`${styles.chip} ${styles[color]}`}>{children}</div>;
 };
 

diff --git a/components/Collection.tsx b/components/Collection.tsx
@@ -1,8 +1,8 @@
-import { Box } from "@chakra-ui/react";
-import { Children, ReactNode } from "react";
-import AutoSizer from "react-virtualized-auto-sizer";
-import { FixedSizeList as List } from "react-window";
-import styles from "./Collection.module.css";
+import { Box } from '@chakra-ui/react';
+import { Children, ReactNode } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList as List } from 'react-window';
+import styles from './Collection.module.css';
 
 type VerticalCollectionProps = {
   children: ReactNode;

diff --git a/components/Divider.tsx b/components/Divider.tsx
@@ -1,7 +1,7 @@
-import styles from "./Divider.module.css";
+import styles from './Divider.module.css';
 
 type DividerProps = {
-  type: "horizontal" | "vertical";
+  type: 'horizontal' | 'vertical';
 };
 
 const Divider = ({ type }: DividerProps) => {

diff --git a/components/ImageContainer.tsx b/components/ImageContainer.tsx
@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import styles from "./ImageContainer.module.css";
+import { ReactNode } from 'react';
+import styles from './ImageContainer.module.css';
 
 type ImageContainerProps = {
   size: number;
@@ -10,7 +10,7 @@ type ImageContainerProps = {
 const ImageContainer = ({ size, shape, children }: ImageContainerProps) => {
   let containerStyle;
   switch (shape) {
-    case "round":
+    case 'round':
       containerStyle = styles.round;
       break;
 

diff --git a/components/Modal.module.css b/components/Modal.module.css
@@ -36,7 +36,7 @@
   border-top-right-radius: 40px;
 }
 
-.modalBody{
+.modalBody {
   display: flex;
   flex-direction: column;
-}
+}
diff --git a/components/Modal.tsx b/components/Modal.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from "react";
-import { IconButton } from "./Button";
-import styles from "./Modal.module.css";
+import { ReactNode } from 'react';
+import { IconButton } from './Button';
+import styles from './Modal.module.css';
 
 type ModalProps = {
   children: ReactNode;

diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -1,4 +1,4 @@
-import styles from "./Navigation.module.css";
+import styles from './Navigation.module.css';
 
 const Navigation = () => {
   return <div className={styles.navigation}>Coba</div>;

diff --git a/components/Typography.module.css b/components/Typography.module.css
@@ -1,8 +1,8 @@
-@import url("https://fonts.googleapis.com/css?family=Caveat|Righteous&display=swap");
+@import url('https://fonts.googleapis.com/css?family=Caveat|Righteous&display=swap');
 
 .animatedText {
-  font-family: "Righteous", cursive;
-  background: url("../public/images/text-animation.gif") center center no-repeat;
+  font-family: 'Righteous', cursive;
+  background: url('../public/images/text-animation.gif') center center no-repeat;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: cover;
@@ -11,12 +11,12 @@
   color: transparent;
 }
 
-.large{
+.large {
   font-size: 30px;
 }
 
-.small{
+.small {
   font-size: 15px;
   display: flex;
   align-items: center;
-}
+}
diff --git a/components/Typography.tsx b/components/Typography.tsx
@@ -1,23 +1,23 @@
-import { ReactNode } from "react";
-import styles from "./Typography.module.css";
+import { ReactNode } from 'react';
+import styles from './Typography.module.css';
 
 type TypographyProps = {
   type?: string;
   children: ReactNode;
 };
 
-const Typography = ({ type="small", children }: TypographyProps) => {
+const Typography = ({ type = 'small', children }: TypographyProps) => {
   let textStyle;
   switch (type) {
-    case "animated-text":
+    case 'animated-text':
       textStyle = styles.animatedText;
       break;
 
-    case "small":
+    case 'small':
       textStyle = styles.small;
       break;
 
-    case "large":
+    case 'large':
       textStyle = styles.large;
       break;
 

diff --git a/components/about/AccompCard.tsx b/components/about/AccompCard.tsx
@@ -31,21 +31,18 @@ const AccompCard = ({ data }: AccompCardProps) => {
         <Typography>{data.description}</Typography>
         <Typography>
           See the idea:
-          <Link href={data.link}>
-            <a
-              className={styles.link}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {data.link}
-            </a>
+          <Link
+            href={data.link}
+            className={styles.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {data.link}
           </Link>
         </Typography>
         <Typography>
-          <Link href="/pdf/AIC.pdf">
-            <a target="_blank" rel="noopener noreferrer">
-              <IconButton iconSrc="/icons/link.svg" />
-            </a>
+          <Link href="/pdf/AIC.pdf" target="_blank" rel="noopener noreferrer">
+            <IconButton iconSrc="/icons/link.svg" />
           </Link>
         </Typography>
       </ColCard>

diff --git a/components/about/ExpCard.tsx b/components/about/ExpCard.tsx
@@ -30,10 +30,8 @@ const ExpCard = ({ data }: ExpCardProps) => {
           <Typography key={task}>{task}</Typography>
         ))}
         <Typography>Tech Stacks: {data.techs}</Typography>
-        <Link href="/pdf/webTA.pdf">
-          <a target="_blank" rel="noopener noreferrer">
-            <IconButton iconSrc="/icons/link.svg" />
-          </a>
+        <Link href="/pdf/webTA.pdf" target="_blank" rel="noopener noreferrer">
+          <IconButton iconSrc="/icons/link.svg" />
         </Link>
       </ColCard>
     </div>

diff --git a/components/about/HomeButton.tsx b/components/about/HomeButton.tsx
@@ -1,27 +1,25 @@
 import Link from 'next/link';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import ImageContainer from 'components/ImageContainer';
 import styles from './HomeButton.module.css';
 import { Blink } from 'components/Animation';
 
 const ProjectButton = () => {
   return (
     <Link href="/">
-      <a>
-        <button className={styles.homeButton}>
-          Home
-          <Blink>
-            <ImageContainer size={20} shape="round">
-              <Image
-                src="/icons/right.svg"
-                alt="icon-button"
-                layout="fill"
-                objectFit="cover"
-              />
-            </ImageContainer>
-          </Blink>
-        </button>
-      </a>
+      <button className={styles.homeButton}>
+        Home
+        <Blink>
+          <ImageContainer size={20} shape="round">
+            <Image
+              src="/icons/right.svg"
+              alt="icon-button"
+              layout="fill"
+              objectFit="cover"
+            />
+          </ImageContainer>
+        </Blink>
+      </button>
     </Link>
   );
 };

diff --git a/components/home/AboutButton.tsx b/components/home/AboutButton.tsx
@@ -1,27 +1,25 @@
 import Link from 'next/link';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import ImageContainer from 'components/ImageContainer';
 import styles from './AboutButton.module.css';
 import { Blink } from 'components/Animation';
 
 const AboutButton = () => {
   return (
     <Link href="/about">
-      <a>
-        <button className={styles.aboutButton}>
-          <Blink>
-            <ImageContainer size={20} shape="round">
-              <Image
-                src="/icons/left.svg"
-                alt="icon-button"
-                layout="fill"
-                objectFit="cover"
-              />
-            </ImageContainer>
-          </Blink>
-          About
-        </button>
-      </a>
+      <button className={styles.aboutButton}>
+        <Blink>
+          <ImageContainer size={20} shape="round">
+            <Image
+              src="/icons/left.svg"
+              alt="icon-button"
+              layout="fill"
+              objectFit="cover"
+            />
+          </ImageContainer>
+        </Blink>
+        About
+      </button>
     </Link>
   );
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
       margin-bottom: 8px;
     }
-    .white{
+    .white {
       background-color: #fff;
     }
@@ Expand Down @@