Merge pull request #111 from htbkoo/upgrade-react-scripts

Upgraded `react-scripts` to `4.0.3`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-personal-portfolio",
-  "version": "0.6.2",
+  "version": "0.7.3",
   "private": true,
   "homepage": "https://htbkoo.github.io/personal-portfolio",
   "scripts": {
@@ -17,6 +17,15 @@
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "plugins": [
+      "only-warn"
+    ]
+  },
   "browserslist": [
     ">0.2%",
     "not dead",
@@ -49,15 +58,16 @@
     "@types/cheerio": "0.22.30",
     "@types/jest": "26.0.20",
     "@types/node": "14.14.20",
-    "@types/react": "17.0.33",
-    "@types/react-dom": "17.0.10",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
     "args": "^5.0.0",
     "cross-env": "^5.2.0",
+    "eslint-plugin-only-warn": "^1.0.3",
     "jest-when": "^2.2.0",
     "mv": "^2.1.1",
     "prettier": "^2.2.1",
     "prop-types": "15.7.2",
-    "react-scripts": "3.4.4",
+    "react-scripts": "4.0.3",
     "rimraf": "^2.6.3",
     "typescript": "4.6.3"
   },

src/components/about/AboutInformation.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 }));
 
-export default () => {
+const AboutInformation = () => {
     const classes = useStyles();
     return (
         <Paper className={classes.root}>
@@ -72,3 +72,4 @@ export default () => {
         );
     }
 };
+export default AboutInformation;

src/components/about/AboutPanel.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import Section from "../common/Section";
 import AboutInformation from "./AboutInformation";
 
-export default () => (
+const AboutPanel = () => (
     <Section
         id="about"
         hasDivider={false}
@@ -13,3 +13,4 @@ export default () => (
         <AboutInformation />
     </Section>
 );
+export default AboutPanel;

src/components/common/Section.tsx

@@ -31,14 +31,14 @@ interface SectionProps {
     isBodyOpaque?: boolean;
 }
 
-export default ({
-    id,
-    title,
-    subtitle,
-    hasDivider = false,
-    isBodyOpaque = false,
-    children,
-}: PropsWithChildren<SectionProps>) => {
+const Section = ({
+                     id,
+                     title,
+                     subtitle,
+                     hasDivider = false,
+                     isBodyOpaque = false,
+                     children,
+                 }: PropsWithChildren<SectionProps>) => {
     const classes = useStyles();
     return (
         <div id={id} className={classes.section}>
@@ -51,6 +51,7 @@ export default ({
         </div>
     );
 };
+export default Section;
 
 function optionalTitle(title?: string) {
     return optionalTypography({ text: title, variant: "h3" });

src/components/contact/ContactIcon.tsx

@@ -27,7 +27,7 @@ interface ContactIconProps {
     cappedIconSize?: ContactIconSize;
 }
 
-export default ({ metadata, cappedIconSize }: ContactIconProps) => {
+const ContactIcon = ({ metadata, cappedIconSize }: ContactIconProps) => {
     const classes = useStyles({ cappedIconSize });
     return (
         <div className={classes.icon}>
@@ -41,3 +41,4 @@ export default ({ metadata, cappedIconSize }: ContactIconProps) => {
         </div>
     );
 };
+export default ContactIcon;

src/components/contact/ContactPanel.tsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 }));
 
-export default () => {
+const ContactPanel = () => {
     const classes = useStyles();
     return (
         <Section id="contact" hasDivider={true} title="Contact" subtitle="Check me out at the following!">
@@ -43,6 +43,7 @@ export default () => {
         </Section>
     );
 };
+export default ContactPanel;
 
 function GitHubIcon() {
     const color = useGitHubMarkImgColorBasedOnTheme();

src/components/page/DrawerItemsWithScrollspy.tsx

@@ -52,7 +52,7 @@ interface DrawerItemsWithScrollspyProps {
 
 const EMPIRICAL_OFFSET = -80;
 
-export default (props: DrawerItemsWithScrollspyProps) => {
+const DrawerItemsWithScrollspy = (props: DrawerItemsWithScrollspyProps) => {
     const classes = useStyles();
     const { items } = props;
 
@@ -85,6 +85,7 @@ export default (props: DrawerItemsWithScrollspyProps) => {
         </React.Fragment>
     );
 };
+export default DrawerItemsWithScrollspy;
 
 function itemToHref(item: string): string {
     return `#${item.replace(/ /g, "-").toLowerCase()}`;

src/components/page/OldVersionLinkButton.tsx

@@ -11,11 +11,12 @@ const useStyles = makeStyles((theme: Theme) => ({
 
 const OLD_VERSION_URL = "https://codepen.io/htbkoo/";
 
-export default () => {
+const OldVersionLinkButton = () => {
     const classes = useStyles();
     return (
         <Button href={OLD_VERSION_URL} variant="contained" color="secondary" className={classes.button}>
             View on CodePen
         </Button>
     );
 };
+export default OldVersionLinkButton;

src/components/page/PageDrawer.tsx

@@ -23,7 +23,7 @@ interface PageDrawerProps {
     sectionConfigs: SectionMetadata[];
 }
 
-export default (props: PageDrawerProps) => {
+const PageDrawer = (props: PageDrawerProps) => {
     const classes = useStyles();
     const { sectionConfigs } = props;
 
@@ -40,6 +40,7 @@ export default (props: PageDrawerProps) => {
         </Drawer>
     );
 };
+export default PageDrawer;
 
 function asItems(sectionConfigs: SectionMetadata[]): string[] {
     return sectionConfigs.map((config) => config.name);

src/components/page/PageMain.tsx

@@ -25,7 +25,7 @@ interface PageMainProps {
     sectionConfigs: SectionMetadata[];
 }
 
-export default (props: PageMainProps) => {
+const PageMain = (props: PageMainProps) => {
     const classes = useStyles();
     const { sectionConfigs } = props;
 
@@ -42,3 +42,4 @@ export default (props: PageMainProps) => {
         </main>
     );
 };
+export default PageMain;

src/components/page/PortfolioPage.tsx

@@ -30,7 +30,7 @@ interface PortfolioPageProps {
     sectionConfigs: SectionMetadata[];
 }
 
-export default ({ sectionConfigs }: PortfolioPageProps) => {
+const PortfolioPage = ({ sectionConfigs }: PortfolioPageProps) => {
     const [drawerOpen, setDrawerOpen] = useState(false);
 
     const handleDrawerToggle = () => setDrawerOpen((prevDrawerOpen) => !prevDrawerOpen);
@@ -56,3 +56,4 @@ export default ({ sectionConfigs }: PortfolioPageProps) => {
         </div>
     );
 };
+export default PortfolioPage;

src/components/page/ResponsivePageDrawer.tsx

@@ -48,7 +48,7 @@ const DrawerContent = ({ items }: { items: string[] }) => {
     );
 };
 
-export default (props: ResponsivePageDrawerProps) => {
+const ResponsivePageDrawer = (props: ResponsivePageDrawerProps) => {
     const classes = useStyles();
     const theme = useTheme();
 
@@ -83,3 +83,4 @@ export default (props: ResponsivePageDrawerProps) => {
         </>
     );
 };
+export default ResponsivePageDrawer;

src/components/portfolio/DirectlyDisplayHtmlContentPortfolio.tsx

@@ -4,7 +4,7 @@ import { PortfolioProps } from "./PortfolioProps";
 
 interface DirectlyDisplayHtmlContentPortfolioProps extends PortfolioProps {}
 
-export default (props: DirectlyDisplayHtmlContentPortfolioProps) => {
+const DirectlyDisplayHtmlContentPortfolio = (props: DirectlyDisplayHtmlContentPortfolioProps) => {
     const { title, link, content } = props;
     return (
         <div>
@@ -15,3 +15,4 @@ export default (props: DirectlyDisplayHtmlContentPortfolioProps) => {
         </div>
     );
 };
+export default DirectlyDisplayHtmlContentPortfolio;

src/components/portfolio/EmbeddedPenPortfolio.tsx

@@ -27,7 +27,7 @@ const MAPPING_HEIGHTS: { [b in Breakpoint]: number } = {
     xl: 768,
 };
 
-export default (props: EmbeddedPenPortfolioProps) => {
+const EmbeddedPenPortfolio = (props: EmbeddedPenPortfolioProps) => {
     const classes = useStyles();
     const width = useWidth();
 
@@ -50,3 +50,4 @@ export default (props: EmbeddedPenPortfolioProps) => {
         </div>
     );
 };
+export default EmbeddedPenPortfolio;

src/components/portfolio/EmbeddedPenPortfolios.tsx

@@ -12,7 +12,7 @@ interface Props {
     rssFeedUrl: string;
 }
 
-export default ({ parser, rssFeedUrl }: Props) => {
+const EmbeddedPenPortfolios = ({ parser, rssFeedUrl }: Props) => {
     const [loaded, setLoaded] = useState(false);
     const [items, setItems] = useState<Items[]>([]);
 
@@ -43,3 +43,4 @@ export default ({ parser, rssFeedUrl }: Props) => {
         </div>
     );
 };
+export default EmbeddedPenPortfolios;

src/components/portfolio/PortfoliosPanel.tsx

@@ -15,7 +15,7 @@ interface PortfoliosPanelProps {
     portfoliosFactory: PortfoliosFactory;
 }
 
-export default ({ portfoliosFactory }: PortfoliosPanelProps) => {
+const PortfoliosPanel = ({ portfoliosFactory }: PortfoliosPanelProps) => {
     const classes = useStyles();
 
     const [portfolios, setPortfolios] = useState<React.ReactNode>([]);
@@ -30,3 +30,4 @@ export default ({ portfoliosFactory }: PortfoliosPanelProps) => {
         </Section>
     );
 };
+export default PortfoliosPanel;

tsconfig.json

@@ -14,12 +14,13 @@
     "strict": true,
     "noImplicitAny": false,
     "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "react-jsx",
   },
   "include": [
     "src"