[Monorepo] move a bit more code to UI (#421)

Closes DG-134

## What changed? Why?
Moves a bit more code out to UI/shared-core around helpers and
formatting. Also fixes caching weirdness with eslint since turbo caching
is plenty

apps/web/package.json

@@ -7,7 +7,7 @@
     "build:analyze": "ANALYZE=true next build",
     "build:serve": "next start",
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc",
     "clean": "rm -rf .next"
   },
@@ -40,7 +40,6 @@
     "sharp": "0.33.1",
     "swr": "2.2.4",
     "ui": "workspace:*",
-    "use-breakpoint": "4.0.1",
     "webpack": "5.89.0"
   },
   "devDependencies": {

apps/web/src/components/ColorSchemeIcon.tsx

@@ -1,8 +1,8 @@
 import { Moon, Sun, RefreshCw } from 'lucide-react';
 import type { Theme } from '@mui/material';
 import { Box, IconButton, Tooltip } from '@mui/material';
-import { useColorScheme } from 'hooks/useColorScheme';
-import type { ColorSchemeMode } from 'hooks/useColorScheme';
+import { useColorScheme } from 'ui/theme/useColorScheme';
+import type { ColorSchemeMode } from 'ui/theme/useColorScheme';
 
 type ColorSchemeIconProps = {
   /**

apps/web/src/components/ColorSchemeToggle.tsx

@@ -1,6 +1,6 @@
 import { Stack, Switch, switchClasses } from '@mui/material';
+import { useColorScheme } from 'ui/theme/useColorScheme';
 import { ColorSchemeIcon } from 'components/ColorSchemeIcon';
-import { useColorScheme } from 'hooks/useColorScheme';
 
 const HEIGHT_PX = 24;
 const WIDTH_PX = 48;

apps/web/src/components/ContentCard.tsx

@@ -3,8 +3,8 @@ import type { Theme } from '@mui/material';
 import { Card, Typography } from '@mui/material';
 import { mixinSx } from 'ui/helpers/mixinSx';
 import type { SxProps } from 'ui/theme';
+import { truncated } from 'ui/helpers/truncated';
 import type { Link } from 'api/types/generated/contentfulApi.generated';
-import { truncated } from 'helpers/truncated';
 import { ContentWrappingLink } from './ContentWrappingLink';
 
 export type ContentCardProps = Pick<

apps/web/src/components/ContentWrappingLink.tsx

@@ -1,6 +1,6 @@
+import type { SxProps } from 'ui/theme';
 import type { Link as LinkType } from 'api/types/generated/contentfulApi.generated';
 import { Link } from 'components/Link';
-import type { SxProps } from 'ui/theme';
 
 type ContentWrappingLinkProps = Pick<React.ComponentProps<'div'>, 'children'> & {
   /**

apps/web/src/components/Header.tsx

@@ -3,10 +3,10 @@ import { Box, alpha } from '@mui/material';
 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 { useColorScheme } from 'hooks/useColorScheme';
 import { Logo } from './Logo';
 
 type HeaderProps = {

apps/web/src/components/Image.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 import NextImage from 'next/image';
-import { BREAKPOINT_MAX_SIZES } from 'appConstants/imageSizes';
+import { BREAKPOINT_MAX_SIZES } from 'ui/helpers/imageSizes';
 import type { Asset } from 'api/types/generated/contentfulApi.generated';
 
 type ImageProps = Partial<Asset> & {

apps/web/src/components/Link.tsx

@@ -9,8 +9,8 @@ import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
 import NextLink from 'next/link';
 import type { LinkProps as MuiLinkProps, ButtonProps } from '@mui/material';
 import { Link as MuiLink, Tooltip, Button } from '@mui/material';
-import { FaIcon } from 'components/FaIcon';
 import type { SxProps } from 'ui/theme';
+import { FaIcon } from 'components/FaIcon';
 
 type BaseLinkProps = {
   title?: string;

apps/web/src/components/RichText.tsx

@@ -4,11 +4,11 @@ import type { Document, NodeData } from '@contentful/rich-text-types';
 import { BLOCKS, INLINES } from '@contentful/rich-text-types';
 import { Divider, Stack, Typography } from '@mui/material';
 import { isNotNullish } from 'shared-core/helpers/typeguards';
-import { PROJECT_MAX_IMAGE_DIMENSION } from 'appConstants/imageSizes';
+import type { SxProps } from 'ui/theme';
+import { PROJECT_MAX_IMAGE_DIMENSION } from 'ui/helpers/imageSizes';
 import { isLink, isProject } from 'api/parsers';
 import type { Asset, Entry, TextBlockContent } from 'api/types/generated/contentfulApi.generated';
 import { ProjectCard } from 'components/homepage/ProjectCard';
-import type { SxProps } from 'ui/theme';
 import { Image } from './Image';
 import { Link } from './Link';
 

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

@@ -1,11 +1,11 @@
 import { useState } from 'react';
+import { useCurrentImageSizes } from 'ui/helpers/useCurrentImageSizes';
 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';
-import { useCurrentImageSizes } from 'hooks/useCurrentImageSizes';
 
 /**
  * Width of the intro image on small screens

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

@@ -1,9 +1,9 @@
 import { Suspense, useState } from 'react';
 import dynamic from 'next/dynamic';
+import { useColorScheme } from 'ui/theme/useColorScheme';
 import { useData } from 'api/useData';
 import type { ContentCardProps } from 'components/ContentCard';
 import { MapContentCard } from 'components/maps/MapContentCard';
-import { useColorScheme } from 'hooks/useColorScheme';
 
 type MapPreviewCardProps = Pick<ContentCardProps, 'turnOnAnimation'>;
 

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

@@ -1,10 +1,10 @@
 import { useState } from 'react';
+import { useCurrentImageSizes } from 'ui/helpers/useCurrentImageSizes';
 import type { Project } from 'api/types/generated/contentfulApi.generated';
 import type { ContentCardProps } from 'components/ContentCard';
 import { ContentCard } from 'components/ContentCard';
 import { HoverableContainer } from 'components/HoverableContainer';
 import { Image } from 'components/Image';
-import { useCurrentImageSizes } from 'hooks/useCurrentImageSizes';
 
 type ProjectCardProps = Project & Pick<ContentCardProps, 'turnOnAnimation'>;
 

apps/web/src/components/maps/Map.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef } from 'react';
 import type { MapRef } from 'react-map-gl';
 import { AttributionControl, Map as MapGL } from 'react-map-gl';
 import { Box, useTheme } from '@mui/material';
+import { useColorScheme } from 'ui/theme/useColorScheme';
 import type { MapLocation } from 'api/types/MapLocation';
-import { useColorScheme } from 'hooks/useColorScheme';
 import { StandardControls } from './StandardControls';
 
 export type MapProps = {

apps/web/src/components/maps/MapContentCard.tsx

@@ -1,7 +1,7 @@
 import type { CardProps } from '@mui/material';
+import { mixinSx } from 'ui/helpers/mixinSx';
 import type { ContentCardProps } from 'components/ContentCard';
 import { ContentCard } from 'components/ContentCard';
-import { mixinSx } from 'ui/helpers/mixinSx';
 
 // In px, the min/max size of the card - matches standard size
 const MIN_DIMENSION = 297;

apps/web/src/components/maps/Marker.tsx

@@ -1,6 +1,6 @@
 import { Marker as MapMarker } from 'react-map-gl';
 import { Box } from '@mui/material';
-import { MAP_MARKER_IMAGE_SIZE } from 'appConstants/imageSizes';
+import { MAP_MARKER_IMAGE_SIZE } from 'ui/helpers/imageSizes';
 import type { MapLocation } from 'api/types/MapLocation';
 import { Image } from 'components/Image';
 

apps/web/src/components/spotify/ArtistList.tsx

@@ -3,10 +3,10 @@
 
 import { Fragment } from 'react';
 import { Typography } from '@mui/material';
+import { truncated } from 'ui/helpers/truncated';
 import type { Artist } from 'api/types/spotify/Track';
 import { Link } from 'components/Link';
 import { useLinkWithName } from 'hooks/useLinkWithName';
-import { truncated } from 'helpers/truncated';
 
 type ArtistListProps = {
   artists: Array<Artist>;

apps/web/src/components/spotify/TrackTitle.tsx

@@ -1,9 +1,9 @@
 import { Typography } from '@mui/material';
-import { Link } from 'components/Link';
-import { useLinkWithName } from 'hooks/useLinkWithName';
 import type { SxProps } from 'ui/theme';
-import { truncated } from 'helpers/truncated';
+import { truncated } from 'ui/helpers/truncated';
 import { mixinSx } from 'ui/helpers/mixinSx';
+import { useLinkWithName } from 'hooks/useLinkWithName';
+import { Link } from 'components/Link';
 
 type TrackTitleProps = {
   trackTitle: string;

apps/web/src/components/strava/ActivityDescription.tsx

@@ -1,5 +1,5 @@
+import { truncated } from 'ui/helpers/truncated';
 import { useData } from 'api/useData';
-import { truncated } from 'helpers/truncated';
 import { Link } from 'components/Link';
 
 /**

apps/web/src/components/strava/ActivityName.tsx

@@ -1,8 +1,8 @@
-import { useData } from 'api/useData';
-import { truncated } from 'helpers/truncated';
-import { Link } from 'components/Link';
+import { truncated } from 'ui/helpers/truncated';
 import { mixinSx } from 'ui/helpers/mixinSx';
 import type { SxProps } from 'ui/theme';
+import { Link } from 'components/Link';
+import { useData } from 'api/useData';
 
 /**
  * Formatted link for the activity name

apps/web/src/components/strava/ActivityStats.tsx

@@ -1,10 +1,10 @@
 import { faStrava } from '@fortawesome/free-brands-svg-icons/faStrava';
 import { Typography } from '@mui/material';
 import { HorizontalStack } from 'ui/core/HorizontalStack';
+import { formattedDistance } from 'shared-core/helpers/formattedDistance';
 import { useData } from 'api/useData';
 import { FaIcon } from 'components/FaIcon';
 import { useRelativeTimeFormat } from 'hooks/useRelativeTimeFormat';
-import { useFormattedDistance } from 'hooks/useFormattedDistance';
 
 /**
  * Shows a horizontal stack of stats for the latest strava activity
@@ -16,7 +16,7 @@ export function ActivityStats() {
     fromDate: activity?.start_date,
     capitalized: true,
   });
-  const formattedDistance = useFormattedDistance({ distanceInMeters: activity?.distance });
+  const distance = formattedDistance({ distanceInMeters: activity?.distance });
 
   if (!activity?.start_date || !activity.distance) {
     return null;
@@ -36,7 +36,7 @@ export function ActivityStats() {
         }}
       >
         <FaIcon icon={faStrava} />
-        <Typography variant="caption">{formattedDistance}</Typography>
+        <Typography variant="caption">{distance}</Typography>
       </HorizontalStack>
       <Typography variant="caption">{formattedDate}</Typography>
     </HorizontalStack>

apps/web/src/og/OpenGraphImage.tsx

@@ -1,5 +1,5 @@
-import { BackgroundPattern } from 'og/BackgroundPattern';
 import { COLORS } from 'ui/theme/color';
+import { BackgroundPattern } from 'og/BackgroundPattern';
 
 export const TEXT_FONT = 'SF Pro Text';
 export const LOGO_FONT = 'SF Pro Text Black';

packages/api/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "dependencies": {

packages/codegen/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "codegen": "graphql-codegen --config config.ts",
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "devDependencies": {

packages/db/package.json

@@ -10,7 +10,7 @@
     "build:analyze": "pscale connect dg --port 3309",
     "db": "sequelize",
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "dependencies": {

packages/eslint-config-dg/package.json

@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "devDependencies": {

apps/web/src/hooks/useFormattedDistance.ts → packages/shared-core/helpers/formattedDistance.ts

@@ -14,7 +14,7 @@ function metersToMiles(value: number) {
  * Converts meters to miles and outputs a nicely formatted string
  * for display usage.
  */
-export function useFormattedDistance({
+export function formattedDistance({
   distanceInMeters,
 }: {
   distanceInMeters: number | undefined | null;

packages/shared-core/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "devDependencies": {

apps/web/src/helpers/truncated.ts → packages/ui/helpers/truncated.ts

@@ -1,4 +1,4 @@
-import type { SxProps } from 'ui/theme';
+import type { SxProps } from '@mui/material';
 
 /**
  * Returns styling to use to truncate to a specified number of

apps/web/src/hooks/useCurrentImageSizes.ts → packages/ui/helpers/useCurrentImageSizes.ts

@@ -1,9 +1,5 @@
 import { useBreakpoint } from 'use-breakpoint';
-import {
-  BREAKPOINTS_MIN_SIZES,
-  PROJECT_2X_IMAGE_SIZES,
-  PROJECT_IMAGE_SIZES,
-} from 'appConstants/imageSizes';
+import { BREAKPOINTS_MIN_SIZES, PROJECT_2X_IMAGE_SIZES, PROJECT_IMAGE_SIZES } from './imageSizes';
 
 /**
  * Grabs the current breakpoint and returns the appropriate image sizes for the current

packages/ui/package.json

@@ -3,13 +3,14 @@
   "private": true,
   "scripts": {
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "dependencies": {
     "@mui/material": "5.15.1",
     "react": "18.2.0",
-    "shared-core": "workspace:*"
+    "shared-core": "workspace:*",
+    "use-breakpoint": "4.0.1"
   },
   "devDependencies": {
     "@types/react": "18.2.45",

packages/webhooks/package.json

@@ -7,7 +7,7 @@
     "dev": "brew upgrade cloudflared && cloudflared --loglevel fatal tunnel run dg",
     "webhook": "NODE_ENV=development tsx webhookCommand.ts",
     "format": "prettier --write .",
-    "lint": "eslint . --cache --fix",
+    "lint": "eslint . --fix",
     "lint:types": "tsc"
   },
   "devDependencies": {