chore: make error displays use tailwind for styling

Author: tstirrat15

src/components/EditorDisplay.tsx

@@ -9,6 +9,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 
 import { useMediaQuery } from "@/hooks/use-media-query";
+
 import { ScrollLocation, useCookieService } from "../services/cookieservice";
 import { DataStore, DataStoreItem, DataStoreItemKind } from "../services/datastore";
 import { LocalParseState } from "../services/localparse";

src/components/panels/errordisplays.tsx

@@ -1,6 +1,5 @@
 import "react-reflex/styles.css";
 
-import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
 import { Link } from "@tanstack/react-router";
 import { CircleX, MessageCircleWarning } from "lucide-react";
 
@@ -21,64 +20,20 @@ export const ERROR_SOURCE_TO_ITEM = {
   [DeveloperError_Source.UNKNOWN_SOURCE]: undefined,
 };
 
-const useErrorDisplayStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    validationError: {
-      border: 0,
-    },
-    foundVia: {
-      marginTop: theme.spacing(1),
-    },
-    foundViaList: {
-      margin: 0,
-      fontFamily: "Roboto Mono, monospace",
-      listStyleType: "none",
-      "& li::after": {
-        content: '" →"',
-      },
-      "& li:last-child::after": {
-        content: '""',
-      },
-    },
-    editorContainer: {
-      display: "grid",
-      alignItems: "center",
-      gridTemplateColumns: "auto 1fr",
-    },
-    dot: {
-      display: "inline-block",
-      marginRight: theme.spacing(1),
-      borderRadius: "50%",
-      width: "8px",
-      height: "8px",
-    },
-    progress: {
-      color: theme.palette.text.primary,
-    },
-    success: {
-      color: theme.palette.success.main,
-    },
-    gray: {
-      color: theme.palette.grey[500],
-    },
-    warning: {
-      color: theme.palette.warning.main,
-    },
-  }),
-);
-
 export function DeveloperErrorDisplay({ error }: { error: DeveloperError }) {
-  const classes = useErrorDisplayStyles();
   return (
     <Alert variant="destructive">
       <CircleX />
       <AlertTitle>{error.message}</AlertTitle>
       {error.path.length > 0 && (
         <AlertDescription>
           Found Via:
-          <ul className={classes.foundViaList}>
+          <ul className="">
             {error.path.map((item) => (
-              <li key={item}>{item}</li>
+              // NOTE: the \2192 here is the → character; tailwind needs it as an escape sequence.
+              <li className="after:content-['\2192'] after:ml-2 last:after:content-none" key={item}>
+                {item}
+              </li>
             ))}
           </ul>
         </AlertDescription>
@@ -96,72 +51,42 @@ export function DeveloperWarningDisplay({ warning }: { warning: DeveloperWarning
   );
 }
 
-const useSourceDisplayStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    link: {
-      color: theme.palette.text.primary,
-    },
-    validationErrorContext: {
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.default,
-    },
-  }),
-);
-
 export function DeveloperWarningSourceDisplay({ warning }: { warning: DeveloperWarning }) {
-  const classes = useSourceDisplayStyles();
-
   return (
-    <div className={classes.validationErrorContext}>
+    <div className="m-2">
       In
-      <Link className={classes.link} to={DataStorePaths.Schema()}>
-        Schema
-      </Link>
+      <Link to={DataStorePaths.Schema()}>Schema</Link>
       {/* NOTE: this is a guess; I think this was an unintentional omission. */}: {warning.message}
     </div>
   );
 }
 
 export function DeveloperSourceDisplay({ error }: { error: DeveloperError }) {
-  const classes = useSourceDisplayStyles();
-
   // TODO: unify with error source above.
   return (
     <div>
       {error.source === DeveloperError_Source.SCHEMA && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.Schema()}>
-            Schema
-          </Link>
-          :
+          <Link to={DataStorePaths.Schema()}>Schema</Link>:
         </div>
       )}
       {error.source === DeveloperError_Source.ASSERTION && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.Assertions()}>
-            Assertions
-          </Link>
-          :
+          <Link to={DataStorePaths.Assertions()}>Assertions</Link>:
         </div>
       )}
       {error.source === DeveloperError_Source.RELATIONSHIP && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.Relationships()}>
-            Test Data
-          </Link>
-          :
+          <Link to={DataStorePaths.Relationships()}>Test Data</Link>:
         </div>
       )}
       {error.source === DeveloperError_Source.VALIDATION_YAML && (
-        <div className={classes.validationErrorContext}>
+        <div className="m-2">
           In
-          <Link className={classes.link} to={DataStorePaths.ExpectedRelations()}>
-            Expected Relations
-          </Link>
-          :
+          <Link to={DataStorePaths.ExpectedRelations()}>Expected Relations</Link>:
         </div>
       )}
     </div>

src/hooks/use-media-query.ts

@@ -1,47 +1,42 @@
-import { useState, useLayoutEffect } from 'react'
+import { useState, useLayoutEffect } from "react";
 
 type UseMediaQueryOptions = {
-  defaultValue?: boolean
-  initializeWithValue?: boolean
-}
+  defaultValue?: boolean;
+  initializeWithValue?: boolean;
+};
 
 const getMatches = (query: string): boolean => {
-  return window.matchMedia(query).matches
-}
+  return window.matchMedia(query).matches;
+};
 
 export function useMediaQuery(
   query: string,
-  {
-    defaultValue = false,
-    initializeWithValue = true,
-  }: UseMediaQueryOptions = {},
+  { defaultValue = false, initializeWithValue = true }: UseMediaQueryOptions = {},
 ): boolean {
   const [matches, setMatches] = useState(() => {
     if (initializeWithValue) {
-      return getMatches(query)
+      return getMatches(query);
     }
-    return defaultValue
-  })
-
+    return defaultValue;
+  });
 
   useLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query)
+    const matchMedia = window.matchMedia(query);
 
     // Handles the change event of the media query.
     // Declared inside the layout effect so that we don't need
     // to worry about its identity.
-    const handleChange = () => setMatches(getMatches(query))
+    const handleChange = () => setMatches(getMatches(query));
 
     // Triggered at the first client-side load and if query changes
-    handleChange()
+    handleChange();
 
-    matchMedia.addEventListener('change', handleChange)
+    matchMedia.addEventListener("change", handleChange);
 
     return () => {
-      matchMedia.removeEventListener('change', handleChange)
-    }
-  }, [query])
+      matchMedia.removeEventListener("change", handleChange);
+    };
+  }, [query]);
 
-  return matches
+  return matches;
 }
-