emotion: Logs

coder · aslilac · Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit d84bf880497c10a2f57a24ffe5895e87b1e64949
@@ -1,10 +1,9 @@
-import { makeStyles } from "@mui/styles";
-import { LogLevel } from "api/typesGenerated";
+import { type Interpolation, type Theme } from "@emotion/react";
+import type { LogLevel } from "api/typesGenerated";
 import dayjs from "dayjs";
-import { FC, useMemo } from "react";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
+import { type FC, type ReactNode, useMemo } from "react";
 import AnsiToHTML from "ansi-to-html";
+import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 
 export interface Line {
   time: string;
@@ -24,19 +23,17 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
   lines,
   className = "",
 }) => {
-  const styles = useStyles();
-
   return (
-    <div className={combineClasses([className, styles.root])}>
-      <div className={styles.scrollWrapper}>
+    <div css={styles.root} className={className}>
+      <div css={styles.scrollWrapper}>
         {lines.map((line, idx) => (
-          <div className={combineClasses([styles.line, line.level])} key={idx}>
+          <div css={[styles.line, line.level]} key={idx}>
             {!hideTimestamps && (
               <>
-                <span className={styles.time}>
+                <span css={styles.time}>
                   {dayjs(line.time).format(`HH:mm:ss.SSS`)}
                 </span>
-                <span className={styles.space} />
+                <span css={styles.space} />
               </>
             )}
             <span>{line.output}</span>
@@ -56,39 +53,32 @@ export const LogLine: FC<{
   hideTimestamp?: boolean;
   number?: number;
   style?: React.CSSProperties;
-  sourceIcon?: JSX.Element;
+  sourceIcon?: ReactNode;
   maxNumber?: number;
 }> = ({ line, hideTimestamp, number, maxNumber, sourceIcon, style }) => {
-  const styles = useStyles();
   const output = useMemo(() => {
     return convert.toHtml(line.output.split(/\r/g).pop() as string);
   }, [line.output]);
   const isUsingLineNumber = number !== undefined;
 
   return (
     <div
-      className={combineClasses([
-        styles.line,
-        line.level,
-        isUsingLineNumber && styles.lineNumber,
-      ])}
+      css={[styles.line, isUsingLineNumber && styles.lineNumber]}
+      className={line.level}
       style={style}
     >
       {sourceIcon}
       {!hideTimestamp && (
         <>
           <span
-            className={combineClasses([
-              styles.time,
-              isUsingLineNumber && styles.number,
-            ])}
+            css={[styles.time, isUsingLineNumber && styles.number]}
             style={{
               minWidth: `${maxNumber ? maxNumber.toString().length - 1 : 0}em`,
             }}
           >
             {number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)}
           </span>
-          <span className={styles.space} />
+          <span css={styles.space} />
         </>
       )}
       <span
@@ -100,8 +90,8 @@ export const LogLine: FC<{
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const styles = {
+  root: (theme) => ({
     minHeight: 156,
     padding: theme.spacing(1, 0),
     borderRadius: theme.shape.borderRadius,
@@ -112,11 +102,11 @@ const useStyles = makeStyles((theme) => ({
       borderBottom: `1px solid ${theme.palette.divider}`,
       borderRadius: 0,
     },
-  },
+  }),
   scrollWrapper: {
     minWidth: "fit-content",
   },
-  line: {
+  line: (theme) => ({
     wordBreak: "break-all",
     display: "flex",
     alignItems: "center",
@@ -139,24 +129,24 @@ const useStyles = makeStyles((theme) => ({
     "&.warn": {
       backgroundColor: theme.palette.warning.dark,
     },
-  },
-  lineNumber: {
+  }),
+  lineNumber: (theme) => ({
     paddingLeft: theme.spacing(2),
-  },
-  space: {
+  }),
+  space: (theme) => ({
     userSelect: "none",
     width: theme.spacing(3),
     display: "block",
     flexShrink: 0,
-  },
-  time: {
+  }),
+  time: (theme) => ({
     userSelect: "none",
     whiteSpace: "pre",
     display: "inline-block",
     color: theme.palette.text.secondary,
-  },
-  number: {
+  }),
+  number: (theme) => ({
     width: theme.spacing(4),
     textAlign: "right",
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;