chore(build): move to react 18 + vite

src/components/App/App.test.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import App from "./App";
-
-test("renders learn react link", () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/App/index.ts

@@ -0,0 +1 @@
+export { default } from "./App";

src/components/Banner/Banner.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Medal } from "phosphor-react";
 import ReactGA from "react-ga";
 

src/components/Banner/index.ts

@@ -0,0 +1 @@
+export { default } from "./Banner";

src/components/ColorInput/ColorInput.tsx

@@ -1,14 +1,15 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 
-import { iconColorAtom } from "../../state/atoms";
-import { isDarkThemeSelector } from "../../state/selectors";
-import useThrottled from "../../hooks/useThrottled";
+import { iconColorAtom } from "@/state/atoms";
+import { isDarkThemeSelector } from "@/state/selectors";
+import useThrottled from "@/hooks/useThrottled";
+
 import "./ColorInput.css";
 
 type ColorInputProps = {};
 
-const ColorInput: React.FC<ColorInputProps> = () => {
+const ColorInput = (_: ColorInputProps) => {
   const [color, setColor] = useRecoilState(iconColorAtom);
   const isDark = useRecoilValue(isDarkThemeSelector);
 

src/components/ColorInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./ColorInput";

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,14 +1,15 @@
-import React, { ErrorInfo } from "react";
+import { Component, ErrorInfo, ReactNode } from "react";
 
 interface ErrorBoundaryProps {
-  fallback?: JSX.Element | React.ReactNode;
+  fallback?: JSX.Element | ReactNode;
+  children?: JSX.Element | ReactNode;
 }
 
 interface ErrorBoundaryState {
   errorMessage?: string;
 }
 
-export default class ErrorBoundary extends React.Component<
+export default class ErrorBoundary extends Component<
   ErrorBoundaryProps,
   ErrorBoundaryState
 > {
@@ -26,7 +27,7 @@ export default class ErrorBoundary extends React.Component<
     console.info(info);
   }
 
-  render(): JSX.Element | React.ReactNode {
+  render(): JSX.Element | ReactNode {
     if (this.state.errorMessage) {
       return this.props.fallback ?? <p>{this.state.errorMessage}</p>;
     }

src/components/ErrorBoundary/index.ts

@@ -0,0 +1 @@
+export { default } from "./ErrorBoundary";

src/components/Footer/Footer.tsx

@@ -1,15 +1,15 @@
-import React from "react";
 import { Coffee, Heart } from "phosphor-react";
 
-import uArrowUpLeft from "../../assets/u-arrow-up-left.svg";
-import markerGreen from "../../assets/marker-green.svg";
-import postIt from "../../assets/footer-mobile.svg";
-import Links from "../Links/Links";
+import Links from "@/components/Links/Links";
+
+import { ReactComponent as UArrowUpLeft } from "@/assets/u-arrow-up-left.svg";
+import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
+import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
 import "./Footer.css";
 
 type FooterProps = {};
 
-const Footer: React.FC<FooterProps> = () => {
+const Footer = (_: FooterProps) => {
   return (
     <footer>
       <div className="container">
@@ -23,7 +23,7 @@ const Footer: React.FC<FooterProps> = () => {
               ?.scrollIntoView({ behavior: "smooth", block: "start" });
           }}
         >
-          <img src={uArrowUpLeft} alt="" />
+          <UArrowUpLeft />
         </button>
         <div className="outro">
           <Links />
@@ -108,11 +108,11 @@ const Footer: React.FC<FooterProps> = () => {
               </a>{" "}
               by Mikhail Sharanda.
             </p>
-            <img id="marker-green" src={markerGreen} alt="" />
+            <MarkerGreen id="marker-green" />
           </div>
         </div>
         <div className="illustrations-footer">
-          <img id="post-it" src={postIt} width="878" height="667" alt="" />
+          <PostIt id="post-it" width="878" height="667" />
         </div>
       </div>
     </footer>

src/components/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Footer";

src/components/Header/Header.tsx

@@ -1,22 +1,22 @@
-import React from "react";
 import { ArrowCircleUpRight, ArrowCircleDown } from "phosphor-react";
 
-import markerPurple from "../../assets/marker-purple.svg";
-import paperclips from "../../assets/paperclips-header-mobile.svg";
-import paperclipsThree from "../../assets/paperclips-header.svg";
-import tablet from "../../assets/tablet.svg";
-import tabletSpec from "../../assets/tablet-spec.svg";
-import billiardBall from "../../assets/billiard-ball.svg";
-import billiardBallSpec from "../../assets/billiard-ball-spec.svg";
-import warning from "../../assets/warning.svg";
-import warningSpec from "../../assets/warning-spec.svg";
-import cuttingMat from "../../assets/cutting-mat.svg";
-import cuttingMatSpec from "../../assets/cutting-mat-spec.svg";
-import receipt from "../../assets/receipt.svg";
-import receiptSpec from "../../assets/receipt-spec.svg";
-import calculator from "../../assets/calculator.svg";
-import calculatorSpec from "../../assets/calculator-spec.svg";
-import Links from "../Links/Links";
+import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg";
+import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg";
+import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg";
+import { ReactComponent as Tablet } from "@/assets/tablet.svg";
+import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg";
+import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg";
+import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg";
+import { ReactComponent as Warning } from "@/assets/warning.svg";
+import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg";
+import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg";
+import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg";
+import { ReactComponent as Receipt } from "@/assets/receipt.svg";
+import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg";
+import { ReactComponent as Calculator } from "@/assets/calculator.svg";
+import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg";
+
+import Links from "@/components/Links";
 import "./Header.css";
 
 type HeaderProps = {};
@@ -33,25 +33,21 @@ const handleScrollToIcons = () =>
     .getElementById("toolbar")
     ?.scrollIntoView({ behavior: "smooth", block: "start" });
 
-const Header: React.FC<HeaderProps> = () => {
+const Header = (_: HeaderProps) => {
   return (
     <header>
       <div className="header-contents">
         <div className="illustrations-top">
-          <img src={markerPurple} id="marker-purple" alt="" />
-          <img src={paperclips} id="paperclips" alt="" />
-          <img src={paperclipsThree} id="paperclips-three" alt="" />
-          <img className="tablet" src={tabletSpec} alt="" />
-          <img className="tablet inspectable xray" src={tablet} alt="" />
-          <img className="billiard-ball" src={billiardBallSpec} alt="" />
-          <img
-            className="billiard-ball inspectable xray"
-            src={billiardBall}
-            alt=""
-          />
+          <MarkerPurple id="marker-purple" />
+          <PaperClips id="paperclips" />
+          <PaperClipsThree id="paperclips-three" />
+          <TabletSpec className="tablet" />
+          <Tablet className="tablet inspectable xray" />
+          <BilliardBallSpec className="billiard-ball" />
+          <BilliardBall className="billiard-ball inspectable xray" />
 
-          <img className="warning" src={warningSpec} alt="" />
-          <img className="warning inspectable xray" src={warning} alt="" />
+          <WarningSpec className="warning" />
+          <Warning className="warning inspectable xray" />
         </div>
         <div className="intro">
           <h2>
@@ -73,20 +69,12 @@ const Header: React.FC<HeaderProps> = () => {
           <Links />
         </div>
         <div className="illustrations-bottom">
-          <img className="cutting-mat" src={cuttingMatSpec} alt="" />
-          <img
-            className="cutting-mat inspectable xray"
-            src={cuttingMat}
-            alt=""
-          />
-          <img className="receipt" src={receiptSpec} alt="" />
-          <img className="receipt inspectable xray" src={receipt} alt="" />
-          <img className="calculator" src={calculatorSpec} alt="" />
-          <img
-            className="calculator inspectable xray"
-            src={calculator}
-            alt=""
-          />
+          <CuttingMatSpec className="cutting-mat" />
+          <CuttingMat className="cutting-mat inspectable xray" />
+          <ReceiptSpec className="receipt" />
+          <Receipt className="receipt inspectable xray" />
+          <CalculatorSpec className="calculator" />
+          <Calculator className="calculator inspectable xray" />
         </div>
       </div>
     </header>

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from "./Header";

src/components/IconGrid/DetailsPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, CSSProperties } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { useHotkeys } from "react-hotkeys-hook";
 import { motion } from "framer-motion";
@@ -12,11 +12,12 @@ import {
   iconSizeAtom,
   iconColorAtom,
   iconPreviewOpenAtom,
-} from "../../state/atoms";
-import useTransientState from "../../hooks/useTransientState";
+} from "@/state/atoms";
+import useTransientState from "@/hooks/useTransientState";
+import { IconEntry, SnippetType } from "@/lib";
+import { getCodeSnippets, supportsWeight } from "@/utils";
+
 import TagCloud from "./TagCloud";
-import { IconEntry, SnippetType } from "../../lib";
-import { getCodeSnippets, supportsWeight } from "../../utils";
 
 const panelVariants = {
   open: {
@@ -58,7 +59,7 @@ const renderedSnippets = [
   SnippetType.FLUTTER,
 ];
 
-const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
+const DetailsPanel = (props: InfoPanelProps) => {
   const { index, spans, isDark, entry } = props;
   const { name, Icon, categories, tags } = entry;
   const weight = useRecoilValue(iconWeightAtom);
@@ -78,10 +79,10 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
     [name]
   );
 
-  const buttonBarStyle: React.CSSProperties = {
+  const buttonBarStyle: CSSProperties = {
     color: isDark ? "white" : buttonColor,
   };
-  const snippetButtonStyle: React.CSSProperties =
+  const snippetButtonStyle: CSSProperties =
     weight === "duotone"
       ? { color: disabledColor, userSelect: "none" }
       : { color: buttonColor };

src/components/IconGrid/IconGrid.tsx

@@ -1,17 +1,18 @@
-import React, { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { motion, useAnimation } from "framer-motion";
 import { IconContext } from "phosphor-react";
 
-import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
+import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "@/state/atoms";
 import {
   filteredQueryResultsSelector,
   isDarkThemeSelector,
-} from "../../state/selectors";
-import useGridSpans from "../../hooks/useGridSpans";
+} from "@/state/selectors";
+import useGridSpans from "@/hooks/useGridSpans";
+import Notice from "@/components/Notice";
+
 import IconGridItem from "./IconGridItem";
 import TagCloud from "./TagCloud";
-import Notice from "../Notice/Notice";
 import "./IconGrid.css";
 
 const defaultSearchTags = [
@@ -26,7 +27,7 @@ const defaultSearchTags = [
 
 type IconGridProps = {};
 
-const IconGrid: React.FC<IconGridProps> = () => {
+const IconGrid = (_: IconGridProps) => {
   const weight = useRecoilValue(iconWeightAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);

src/components/IconGrid/IconGridItem.tsx

@@ -1,15 +1,11 @@
-import React, {
-  useRef,
-  useLayoutEffect,
-  useEffect,
-  MutableRefObject,
-} from "react";
+import { useRef, useLayoutEffect, useEffect, MutableRefObject } from "react";
 import { useRecoilState } from "recoil";
 import { motion, AnimatePresence } from "framer-motion";
 
-import { iconPreviewOpenAtom } from "../../state/atoms";
+import { IconEntry } from "@/lib";
+import { iconPreviewOpenAtom } from "@/state/atoms";
+
 import DetailsPanel from "./DetailsPanel";
-import { IconEntry } from "../../lib";
 
 interface IconGridItemProps {
   index: number;
@@ -31,7 +27,7 @@ const itemVariants = {
   }),
 };
 
-const IconGridItem: React.FC<IconGridItemProps> = (props) => {
+const IconGridItem = (props: IconGridItemProps) => {
   const { index, originOffset, entry } = props;
   const { name, Icon } = entry;
   const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);

src/components/IconGrid/TagCloud.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useSetRecoilState } from "recoil";
 
-import { searchQueryAtom } from "../../state/atoms";
+import { searchQueryAtom } from "@/state/atoms";
 import "./TagCloud.css";
 
 interface TagCloudProps {
@@ -10,7 +10,7 @@ interface TagCloudProps {
   isDark: boolean;
 }
 
-const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
+const TagCloud = ({ name, tags, isDark }: TagCloudProps) => {
   const setQuery = useSetRecoilState(searchQueryAtom);
   const handleTagClick = useCallback(
     (tag: string) => {

src/components/IconGrid/index.ts

@@ -0,0 +1 @@
+export { default } from "./IconGrid";

src/components/Links/Links.tsx

@@ -1,14 +1,13 @@
-import React from "react";
 import { OutboundLink } from "react-ga";
 import { ArrowElbowDownRight } from "phosphor-react";
 
-import { iconCount } from "../../lib/icons";
+import { iconCount } from "@/lib/icons";
 
 import "./Links.css";
 
 interface LinksProps {}
 
-const Links: React.FC<LinksProps> = () => {
+const Links = (_: LinksProps) => {
   return (
     <div className="links">
       <div>

src/components/Links/index.ts

@@ -0,0 +1 @@
+export { default } from "./Links";

src/components/Notice/Notice.tsx

@@ -1,21 +1,18 @@
-import React from "react";
+import { ReactNode } from "react";
 import { motion } from "framer-motion";
 import { useRecoilValue } from "recoil";
-
-import { isDarkThemeSelector } from "../../state/selectors";
-import { searchQueryAtom } from "../../state/atoms";
 import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
 
+import { isDarkThemeSelector } from "@/state/selectors";
+import { searchQueryAtom } from "@/state/atoms";
+
 interface NoticeProps {
   message?: string;
   type?: "wait" | "help" | "warn" | "none";
+  children?: ReactNode;
 }
 
-const Notice: React.FC<NoticeProps> = ({
-  message,
-  type = "warn",
-  children,
-}) => {
+const Notice = ({ message, type = "warn", children }: NoticeProps) => {
   const isDark = useRecoilValue(isDarkThemeSelector);
   const query = useRecoilValue(searchQueryAtom);
 

src/components/Notice/index.ts

@@ -0,0 +1 @@
+export { default } from "./Notice";

src/components/SearchInput/SearchInput.tsx

@@ -1,11 +1,17 @@
-import React, { useState, useEffect, useRef, MutableRefObject } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  MutableRefObject,
+  ReactNode,
+} from "react";
 import { useRecoilState } from "recoil";
 import { useDebounce } from "react-use";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Command, MagnifyingGlass, X, HourglassHigh } from "phosphor-react";
 import ReactGA from "react-ga";
 
-import { searchQueryAtom } from "../../state/atoms";
+import { searchQueryAtom } from "@/state/atoms";
 import "./SearchInput.css";
 
 const apple = /iPhone|iPod|iPad|Macintosh|MacIntel|MacPPC/i;
@@ -16,7 +22,7 @@ const isMobile = mobile.test(window.navigator.userAgent);
 
 type SearchInputProps = {};
 
-const SearchInput: React.FC<SearchInputProps> = () => {
+const SearchInput = (_: SearchInputProps) => {
   const [value, setValue] = useState<string>("");
   const [query, setQuery] = useRecoilState(searchQueryAtom);
   const inputRef =
@@ -94,7 +100,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   );
 };
 
-const Keys: React.FC<{}> = ({ children }) => (
+const Keys = ({ children }: { children?: ReactNode }) => (
   <div className="keys">{children}</div>
 );
 

src/components/SearchInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./SearchInput";

src/components/SettingsActions/SettingsActions.tsx

@@ -1,12 +1,13 @@
-import React from "react";
-import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
 import { useRecoilValue, useResetRecoilState } from "recoil";
-import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
-import "./SettingsActions.css";
-import useTransientState from "../../hooks/useTransientState";
-import { resetSettingsSelector } from "../../state/selectors";
+import { ArrowCounterClockwise, CheckCircle, Link } from "phosphor-react";
 
-const SettingsActions: React.FC = () => {
+import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "@/state/atoms";
+import useTransientState from "@/hooks/useTransientState";
+import { resetSettingsSelector } from "@/state/selectors";
+
+import "./SettingsActions.css";
+
+const SettingsActions = () => {
   const weight = useRecoilValue(iconWeightAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);

src/components/SettingsActions/index.ts

@@ -0,0 +1 @@
+export { default } from "./SettingsActions";

src/components/SizeInput/SizeInput.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { useRecoilState } from "recoil";
 
-import { iconSizeAtom } from "../../state/atoms";
+import { iconSizeAtom } from "@/state/atoms";
 import "./SizeInput.css";
 
 type SizeInputProps = {};
@@ -14,7 +14,7 @@ const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
   event.currentTarget.blur();
 };
 
-const SizeInput: React.FC<SizeInputProps> = () => {
+const SizeInput = (_: SizeInputProps) => {
   const [size, setSize] = useRecoilState(iconSizeAtom);
 
   const handleSizeChange = useCallback(

src/components/SizeInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./SizeInput";

src/components/StyleInput/StyleInput.tsx

@@ -1,10 +1,11 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useRecoilState } from "recoil";
 import Select from "react-dropdown-select";
 import { PencilLine } from "phosphor-react";
 import { IconStyle } from "@phosphor-icons/core";
 
-import { iconWeightAtom } from "../../state/atoms";
+import { iconWeightAtom } from "@/state/atoms";
+
 import "./StyleInput.css";
 
 type WeightOption = { key: string; value: IconStyle; icon: JSX.Element };
@@ -44,7 +45,7 @@ const options: WeightOption[] = [
 
 type StyleInputProps = {};
 
-const StyleInput: React.FC<StyleInputProps> = () => {
+const StyleInput = (_: StyleInputProps) => {
   const [style, setStyle] = useRecoilState(iconWeightAtom);
 
   const currentStyle = useMemo(

src/components/StyleInput/index.ts

@@ -0,0 +1 @@
+export { default } from "./StyleInput";

src/components/Toolbar/Toolbar.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
+import StyleInput from "@/components/StyleInput";
+import SearchInput from "@/components/SearchInput";
+import SizeInput from "@/components/SizeInput";
+import ColorInput from "@/components/ColorInput";
+import SettingsActions from "@/components/SettingsActions";
 import "./Toolbar.css";
-import StyleInput from "../StyleInput/StyleInput";
-import SearchInput from "../SearchInput/SearchInput";
-import SizeInput from "../SizeInput/SizeInput";
-import ColorInput from "../ColorInput/ColorInput";
-import SettingsActions from "../SettingsActions/SettingsActions";
 
 type ToolbarProps = {};
 

src/components/Toolbar/index.ts

@@ -0,0 +1 @@
+export { default } from "./Toolbar";