[Dependencies] new package for maps + moving a bunch of components to…

… `ui` (#432)

Closes DG-146

## What changed? Why?
Maps now have their own package, and tons of dependencies updated as a
result. Also moves a bunch more components to UI

apps/web/next.config.js

@@ -30,7 +30,7 @@ const nextConfig = {
     defaultLocale: 'en',
   },
   // Have to do this for each of the packages we import
-  transpilePackages: ['shared-core', 'api', 'ui'],
+  transpilePackages: ['shared-core', 'api', 'ui', 'ui-core'],
   experimental: {
     scrollRestoration: true,
   },

apps/web/package.json

@@ -17,36 +17,27 @@
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
-    "@fortawesome/react-fontawesome": "0.2.0",
     "@mui/material": "5.15.2",
     "@next/bundle-analyzer": "14.0.4",
-    "animate-css-grid": "1.5.1",
     "api": "workspace:*",
     "dotenv-mono": "1.3.13",
     "lucide-react": "0.303.0",
-    "mapbox-gl": "3.0.1",
+    "maps": "workspace:*",
     "next": "14.0.4",
     "og": "workspace:*",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
     "react-intersection-observer": "9.5.3",
-    "react-map-gl": "7.1.7",
     "shared-core": "workspace:*",
-    "sharp": "0.33.1",
     "swr": "2.2.4",
     "ui": "workspace:*",
     "webpack": "5.89.0",
     "wretch": "2.8.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "14.0.4",
-    "@types/mapbox-gl": "2.7.19",
-    "@types/node": "20.10.6",
     "@types/react": "18.2.46",
-    "@types/react-dom": "18.2.18",
     "eslint-config-dg": "workspace:*",
     "tsconfig": "workspace:*",
     "typescript": "5.3.3"

apps/web/src/components/Footer.tsx

@@ -3,8 +3,8 @@ import { Section } from 'ui/core/Section';
 import { Nav, NavGroup, NavItem } from 'ui/core/Nav';
 import { HorizontalStack } from 'ui/core/HorizontalStack';
 import type { Link as LinkType } from 'api/contentful/api.generated';
+import { Link } from 'ui/dependent/Link';
 import { useData } from 'api/useData';
-import { Link } from './Link';
 
 /**
  * Creates a singular footer link

apps/web/src/components/Header.tsx

@@ -4,9 +4,9 @@ import { Section } from 'ui/core/Section';
 import { Nav, NavGroup, NavItem } from 'ui/core/Nav';
 import type { SxProps } from 'ui/theme';
 import { useColorScheme } from 'ui/theme/useColorScheme';
-import { ScrollIndicatorContext } from 'components/ScrollIndicatorContext';
-import { ScrollUpButton } from 'components/ScrollUpButton';
-import { ColorSchemeToggle } from 'components/ColorSchemeToggle';
+import { ScrollIndicatorContext } from 'ui/core/ScrollIndicatorContext';
+import { ScrollUpButton } from 'ui/dependent/ScrollUpButton';
+import { ColorSchemeToggle } from 'ui/core/ColorSchemeToggle';
 import { Logo } from './Logo';
 
 type HeaderProps = {

apps/web/src/components/Logo.tsx

@@ -3,8 +3,8 @@ import { useContext } from 'react';
 import { Button } from '@mui/material';
 import { mixinSx } from 'ui/helpers/mixinSx';
 import type { SxProps } from 'ui/theme';
-import { ScrollIndicatorContext } from './ScrollIndicatorContext';
-import { Link } from './Link';
+import { ScrollIndicatorContext } from 'ui/core/ScrollIndicatorContext';
+import { Link } from 'ui/dependent/Link';
 
 /**
  * Aspect ratio'd 1:1 circle. Big, bold, and squished text for use as

apps/web/src/components/RichText.tsx

@@ -8,9 +8,9 @@ import type { SxProps } from 'ui/theme';
 import { PROJECT_MAX_IMAGE_DIMENSION } from 'ui/helpers/imageSizes';
 import { isLink, isProject } from 'api/contentful/parsers';
 import type { Asset, Entry, TextBlockContent } from 'api/contentful/api.generated';
+import { Image } from 'ui/dependent/Image';
+import { Link } from 'ui/dependent/Link';
 import { ProjectCard } from 'components/homepage/ProjectCard';
-import { Image } from './Image';
-import { Link } from './Link';
 
 type RichTextProps = TextBlockContent & {
   sx?: SxProps;

apps/web/src/components/errors/ErrorPageContents.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@mui/material';
 import { useRouter } from 'next/router';
-import { Link } from 'components/Link';
+import { Link } from 'ui/dependent/Link';
 import { useLinkWithName } from 'hooks/useLinkWithName';
 
 export type HasStatusCode = {

apps/web/src/components/homepage/Homepage.tsx

@@ -1,9 +1,8 @@
 import { useMemo, useRef } from 'react';
+import { ContentGrid } from 'ui/core/ContentGrid';
 import { useData } from 'api/useData';
-import { ContentGrid } from 'components/ContentGrid';
 import { MapPreviewCard } from 'components/homepage/MapPreviewCard';
 import { HOMEPAGE_TITLE, Meta } from 'components/Meta';
-import { useGridAnimation } from 'hooks/useGridAnimation';
 import { IntroCard } from './IntroCard';
 import { ProjectCard } from './ProjectCard';
 import { SpotifyCard } from './SpotifyCard';
@@ -25,22 +24,19 @@ export function Homepage() {
 
   // For animating grid items
   const gridRef = useRef<HTMLDivElement | null>(null);
-  const turnOnAnimation = useGridAnimation(gridRef);
 
   const projectCards =
-    projects?.map((project) => (
-      <ProjectCard key={project.title} {...project} turnOnAnimation={turnOnAnimation} />
-    )) ?? [];
+    projects?.map((project) => <ProjectCard key={project.title} {...project} />) ?? [];
 
   // These index into projectCards to splice in other cards
   const otherCards = useMemo(
     () => [
       { index: 0, card: <IntroCard key="intro" /> },
-      { index: 0, card: <MapPreviewCard key="map" turnOnAnimation={turnOnAnimation} /> },
+      { index: 0, card: <MapPreviewCard key="map" /> },
       { index: 2, card: <SpotifyCard key="spotify" /> },
       { index: 6, card: <StravaCard key="strava" /> },
     ],
-    [turnOnAnimation],
+    [],
   );
 
   return (

apps/web/src/components/homepage/IntroCard.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { useCurrentImageSizes } from 'ui/helpers/useCurrentImageSizes';
+import { ContentCard } from 'ui/dependent/ContentCard';
+import { HoverableContainer } from 'ui/core/HoverableContainer';
+import { Image } from 'ui/dependent/Image';
 import { useData } from 'api/useData';
-import { ContentCard } from 'components/ContentCard';
-import { HoverableContainer } from 'components/HoverableContainer';
-import { Image } from 'components/Image';
 import { RichText } from 'components/RichText';
 import { useLinkWithName } from 'hooks/useLinkWithName';
 

apps/web/src/components/homepage/MapPreviewCard.tsx

@@ -1,54 +1,16 @@
-import { Suspense, useState } from 'react';
 import dynamic from 'next/dynamic';
-import { useColorScheme } from 'ui/theme/useColorScheme';
+import { LazyLoadedMap } from 'maps/LazyLoadedMap';
 import { useData } from 'api/useData';
-import type { ContentCardProps } from 'components/ContentCard';
-import { MapContentCard } from 'components/maps/MapContentCard';
-
-type MapPreviewCardProps = Pick<ContentCardProps, 'turnOnAnimation'>;
 
 // Only render when you want to start importing this giant component
-const FullMapCard = dynamic(() => import('components/maps/FullMapCard'), {
+const FullMapCard = dynamic(() => import('maps/mapbox-gl/FullMapCard'), {
   suspense: true,
 });
 
 /**
  * Shows a preview of the full map card, to be fetched on hover.
  */
-export function MapPreviewCard({ turnOnAnimation }: MapPreviewCardProps) {
+export function MapPreviewCard() {
   const { data: location } = useData('location');
-  const { colorScheme } = useColorScheme();
-  const [showFullMapComponent, setShowFullMapComponent] = useState(false);
-
-  const backgroundImageUrl = colorScheme.isInitialized
-    ? (colorScheme.mode === 'light'
-        ? location?.backupImageUrls.light
-        : location?.backupImageUrls.dark) ?? null
-    : null;
-
-  // Loads the full map card on hover
-  const previewCard = (
-    <MapContentCard
-      backgroundImageUrl={backgroundImageUrl}
-      onMouseOver={() => {
-        setShowFullMapComponent(true);
-      }}
-      onTouchStart={() => {
-        setShowFullMapComponent(true);
-      }}
-      turnOnAnimation={turnOnAnimation}
-    />
-  );
-
-  return showFullMapComponent && location ? (
-    <Suspense fallback={previewCard}>
-      <FullMapCard
-        backgroundImageUrl={backgroundImageUrl}
-        location={location}
-        turnOnAnimation={turnOnAnimation}
-      />
-    </Suspense>
-  ) : (
-    previewCard
-  );
+  return <LazyLoadedMap FullMapCard={FullMapCard} location={location} />;
 }

apps/web/src/components/homepage/ProjectCard.tsx

@@ -1,17 +1,16 @@
 import { useState } from 'react';
 import { useCurrentImageSizes } from 'ui/helpers/useCurrentImageSizes';
 import type { Project } from 'api/contentful/api.generated';
-import type { ContentCardProps } from 'components/ContentCard';
-import { ContentCard } from 'components/ContentCard';
-import { HoverableContainer } from 'components/HoverableContainer';
-import { Image } from 'components/Image';
+import { ContentCard } from 'ui/dependent/ContentCard';
+import { HoverableContainer } from 'ui/core/HoverableContainer';
+import { Image } from 'ui/dependent/Image';
 
-type ProjectCardProps = Project & Pick<ContentCardProps, 'turnOnAnimation'>;
+type ProjectCardProps = Project;
 
 /**
  * Uses the `ContentCard` to show a project's details
  */
-export function ProjectCard({ title, layout, link, thumbnail, turnOnAnimation }: ProjectCardProps) {
+export function ProjectCard({ title, layout, link, thumbnail }: ProjectCardProps) {
   const [isHovered, setIsHovered] = useState(false);
   const { width, height, sizes, verticalSpan, horizontalSpan } = useCurrentImageSizes(layout);
 
@@ -31,7 +30,6 @@ export function ProjectCard({ title, layout, link, thumbnail, turnOnAnimation }:
           maxHeight: theme.shape.gridItemSize(0.75),
         },
       })}
-      turnOnAnimation={turnOnAnimation}
       verticalSpan={verticalSpan}
     >
       {thumbnail ? (

apps/web/src/components/homepage/SpotifyCard.tsx

@@ -1,5 +1,5 @@
+import { ContentCard } from 'ui/dependent/ContentCard';
 import { useData } from 'api/useData';
-import { ContentCard } from 'components/ContentCard';
 import { TrackListing } from 'components/spotify/TrackListing';
 
 /**

apps/web/src/components/homepage/StravaCard.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
+import { ContentCard } from 'ui/dependent/ContentCard';
 import { useData } from 'api/useData';
-import { ContentCard } from 'components/ContentCard';
 import { ActivityStats } from 'components/strava/ActivityStats';
 import { ActivityTypeWithIcon } from 'components/strava/ActivityTypeWithIcon';
 import { ActivityName } from 'components/strava/ActivityName';

apps/web/src/components/layouts/ErrorLayout.tsx

@@ -1,7 +1,7 @@
 import { Stack } from '@mui/material';
 import { Section } from 'ui/core/Section';
+import { Link } from 'ui/dependent/Link';
 import { Meta } from 'components/Meta';
-import { Link } from 'components/Link';
 
 type ErrorLayoutProps = {
   children: React.ReactNode;

apps/web/src/components/layouts/PageLayout.tsx

@@ -2,12 +2,12 @@ import { useRef } from 'react';
 import { SWRConfig } from 'swr';
 import { Container } from '@mui/material';
 import { Section } from 'ui/core/Section';
+import { ScrollIndicatorContext } from 'ui/core/ScrollIndicatorContext';
 import type { EndpointKey } from 'api/endpoints';
 import type { FetchedFallbackData } from 'api/fetchFallbackData';
 import { Footer } from 'components/Footer';
 import { Header } from 'components/Header';
 import { Meta } from 'components/Meta';
-import { ScrollIndicatorContext } from 'components/ScrollIndicatorContext';
 import { useShowScrollIndicator } from 'hooks/useShowScrollIndicator';
 
 /**