Fix linting issues

package.json

@@ -79,4 +79,4 @@
     "trailingComma": "none",
     "arrowParens": "avoid"
   }
-}
+}

src/ui/widgets/Arc/arc.test.tsx

@@ -22,17 +22,18 @@ describe("<ArcComponent />", (): void => {
     expect(svg.props.viewBox).toEqual("0 0 100 100");
 
     const pathArray = svg.children as Array<ReactTestRendererJSON>;
-    console.log(pathArray);
     // Default fills, expect border path and fill of arc
     expect(pathArray.length).toEqual(2);
     // Filled arc
-    expect(pathArray[0].props.d).toEqual("M 50 50\nL 100 50\nA 50 50 0 0 1 50 100\nZ");
+    expect(pathArray[0].props.d).toEqual(
+      "M 50 50\nL 100 50\nA 50 50 0 0 1 50 100\nZ"
+    );
     expect(pathArray[0].props.fill).toEqual("rgba(200,1,60,255)");
     expect(pathArray[0].props.stroke).toEqual("rgba(200,1,60,255)");
     // BOrder
     expect(pathArray[1].props.d).toEqual("M 100 50\nA 50 50 0 0 1 50 100");
     expect(pathArray[1].props.fill).toEqual("transparent");
-    expect(pathArray[1].props.stroke).toEqual("rgba(0,1,255,255)");
+    expect(pathArray[1].props.stroke).toEqual("rgba(0,0,255,255)");
   });
 
   test("create arc of angle > 180 degrees", (): void => {
@@ -59,7 +60,7 @@ describe("<ArcComponent />", (): void => {
     for (let i = 0; i < pathArray.length; i++) {
       if (i % 2) {
         // Even numbers are border elements
-        expect(pathArray[i].props.stroke).toEqual("rgba(0,100,200,255)");
+        expect(pathArray[i].props.stroke).toEqual("rgba(0,0,255,255)");
       } else {
         // Odd numbers are filled arc elements
         expect(pathArray[i].props.fill).toEqual("rgba(45,1,180,255)");

src/ui/widgets/Arc/arc.tsx

@@ -30,7 +30,6 @@ export const ArcComponent = (
     width = 100,
     height = 100,
     backgroundColor = Color.fromRgba(30, 144, 255),
-    foregroundColor,
     fill = true,
     startAngle = 0,
     totalAngle = 90,
@@ -84,7 +83,8 @@ export const ArcComponent = (
       const arc = [
         `M ${radiusX} ${radiusY}`, // Set point
         `L ${startPos.join(" ")}`, // Line
-        `A ${radiusX} ${radiusY} ${startAngle} 0 ${negAngle ? 0 : 1
+        `A ${radiusX} ${radiusY} ${startAngle} 0 ${
+          negAngle ? 0 : 1
         } ${endPos.join(" ")}`, // Make line elliptical
         "Z" // Close path
       ];
@@ -103,22 +103,27 @@ export const ArcComponent = (
 
     const border = [
       `M ${startPos.join(" ")}`, // Set start point on arc
-      `A ${radiusX} ${radiusY} ${startAngle} 0 ${negAngle ? 0 : 1
+      `A ${radiusX} ${radiusY} ${startAngle} 0 ${
+        negAngle ? 0 : 1
       } ${endPos.join(" ")}` // Draw elliptical line
     ];
     elements.push(
       <path
         className={classes.BorderPath}
         d={border.join("\n")}
-        stroke={foregroundColor?.toString()}
+        stroke={lineColor.toString()}
         fill="transparent"
         key={`border${idx}`}
         strokeWidth={lineWidth}
       ></path>
     );
   });
   return (
-    <svg className={classes.Arc} viewBox={`0 0 ${width} ${height}`} overflow={"visible"}>
+    <svg
+      className={classes.Arc}
+      viewBox={`0 0 ${width} ${height}`}
+      overflow={"visible"}
+    >
       {elements}
     </svg>
   );

src/ui/widgets/BoolButton/boolButton.tsx

@@ -176,8 +176,9 @@ export function createLed(
     backgroundColor: color,
     top: ledY,
     left: ledX,
-    boxShadow: `inset ${ledDiameter / 4}px ${ledDiameter / 4}px ${ledDiameter * 0.4
-      }px rgba(255,255,255,.5)`,
+    boxShadow: `inset ${ledDiameter / 4}px ${ledDiameter / 4}px ${
+      ledDiameter * 0.4
+    }px rgba(255,255,255,.5)`,
     visibility: "hidden"
   };
 

src/ui/widgets/ByteMonitor/byteMonitor.tsx

@@ -108,9 +108,8 @@ export const ByteMonitorComponent = (
     if (effect3d) {
       // For ellipse, border is different in 3D. For square it is the same
       // but the LED has a shadow
-      style[
-        "backgroundImage"
-      ] = `radial-gradient(circle at top left, white, ${data ? onColor?.toString() : offColor?.toString()
+      style["backgroundImage"] = `radial-gradient(circle at top left, white, ${
+        data ? onColor?.toString() : offColor?.toString()
       })`;
       if (!squareLed) {
         style["borderColor"] = "transparent";

src/ui/widgets/Display/display.tsx

@@ -71,7 +71,9 @@ export const DisplayComponent = (
   }
   return (
     <MacroContext.Provider value={displayMacroContext}>
-      <div style={style} className="display">{props.children}</div>
+      <div style={style} className="display">
+        {props.children}
+      </div>
     </MacroContext.Provider>
   );
 };

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -108,8 +108,8 @@ function bobParseBorder(props: any): Border {
 
 /**
  * Parse file for Embedded Display widgets
- * @param props 
- * @returns 
+ * @param props
+ * @returns
  */
 function bobParseFile(props: any): OpiFile {
   const filename = opiParseString(props.file);
@@ -134,9 +134,7 @@ function bobParsePoints(props: any): Points {
   const points: Array<Point> = [];
   props.point.forEach((point: any) => {
     const pointData = point._attributes;
-    points.push(
-      new Point(Number(pointData["x"]), Number(pointData["y"]))
-    );
+    points.push(new Point(Number(pointData["x"]), Number(pointData["y"])));
   });
   return new Points(points);
 }
@@ -179,7 +177,7 @@ const BOB_COMPLEX_PARSERS: ComplexParserDict = {
   position: bobParsePosition,
   border: bobParseBorder,
   alarmSensitive: opiParseAlarmSensitive,
-  file: bobParseFile,
+  file: bobParseFile
 };
 
 export function parseBob(

src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx

@@ -58,11 +58,11 @@ export const EmbeddedDisplay = (
 
   // Get the screen height and width. If not provided then set to
   // the window height and width, repectively.
-  let heightString = getOptionalValue(
+  const heightString = getOptionalValue(
     description.position.height,
     `${String(window.innerHeight)}px`
   );
-  let widthString = getOptionalValue(
+  const widthString = getOptionalValue(
     description.position.width,
     `${String(window.innerWidth)}px`
   );
@@ -72,7 +72,7 @@ export const EmbeddedDisplay = (
   switch (resize) {
     case "scroll-content":
       // Give the display scrollbars if needed
-      overflow = "auto"
+      overflow = "auto";
       break;
     case "size-content":
       // Resize the content
@@ -95,7 +95,7 @@ export const EmbeddedDisplay = (
   }
 
   let scaleFactorX = "1";
-  let scaleFactorY = "1"
+  let scaleFactorY = "1";
   if (applyAutoZoomToFit) {
     // Height and width from parsed opi file will always take the form
     // "<num>px" so trim
@@ -115,7 +115,7 @@ export const EmbeddedDisplay = (
     // For everything except stretch-content, scale equally in both directions
     if (resize !== "stretch-content") {
       scaleHeightVal = minScaleFactor;
-      scaleWidthVal = minScaleFactor
+      scaleWidthVal = minScaleFactor;
     }
     scaleFactorX = String(scaleWidthVal);
     scaleFactorY = String(scaleHeightVal);
@@ -156,7 +156,7 @@ export const EmbeddedDisplay = (
       children: [description],
       scaling: [scaleFactorX, scaleFactorY],
       autoZoomToFit: applyAutoZoomToFit,
-      scalingOrigin: props.scalingOrigin,
+      scalingOrigin: props.scalingOrigin
     });
   } catch (e) {
     const message = `Error loading ${props.file.path}: ${e}.`;
@@ -170,7 +170,7 @@ export const EmbeddedDisplay = (
   const embeddedDisplayMacros = props.file.macros ?? {};
   const embeddedDisplayMacroContext: MacroContextType = {
     // Currently not allowing changing the macros of an embedded display.
-    updateMacro: (key: string, value: string): void => { },
+    updateMacro: (key: string, value: string): void => {},
     macros: {
       ...parentMacros, // lower priority
       ...embeddedDisplayMacros, // higher priority

src/ui/widgets/LED/led.tsx

@@ -41,7 +41,7 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
     lineColor = Color.fromRgba(50, 50, 50, 178),
     width = 20,
     alarmSensitive = false,
-    bit = -1,
+    bit = -1
   } = props;
 
   const style: CSSProperties = {};
@@ -58,7 +58,7 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
     }
   }
   style["backgroundColor"] = ledOn ? onColor?.toString() : offColor?.toString();
-  style["border"] = `2px solid ${lineColor.toString()}`
+  style["border"] = `2px solid ${lineColor.toString()}`;
 
   if (width) {
     // make sizes similar to size in CS-Studio, five taken

src/ui/widgets/Line/line.tsx

@@ -57,8 +57,9 @@ export const LineComponent = (props: LineComponentProps): JSX.Element => {
   let markerConfig = <></>;
   const linePoints = points ? points.values : [];
   if (arrows) {
-    arrowSize = `M 0 0 L ${arrowLength} ${arrowLength / 4} L 0 ${arrowLength / 2
-      } ${fillArrow ? "z" : ""}`; // add z to close path if filling
+    arrowSize = `M 0 0 L ${arrowLength} ${arrowLength / 4} L 0 ${
+      arrowLength / 2
+    } ${fillArrow ? "z" : ""}`; // add z to close path if filling
     switch (arrows) {
       // Arrow from
       case 1:

src/ui/widgets/Polygon/polygon.test.tsx

@@ -52,6 +52,5 @@ describe("<PolygonComponent />", (): void => {
     const polygons = svg.children as Array<ReactTestRendererJSON>;
     expect(polygons.length).toEqual(1);
     expect(polygons[0].props.points).toEqual("");
-
   });
 });

src/ui/widgets/Shape/shape.tsx

@@ -40,15 +40,17 @@ export const ShapeComponent = (
     cornerWidth = 0
   } = props;
   // Calculate radii of corners
-  let cornerRadius = `${cornerWidth}px / ${cornerHeight}px`;
+  const cornerRadius = `${cornerWidth}px / ${cornerHeight}px`;
   const style = {
     ...commonCss(props),
     width: width,
     height: height,
     borderRadius: cornerRadius,
     border: `${lineWidth}px solid ${lineColor.toString()}`,
     transform: props.shapeTransform ?? "",
-    backgroundColor: props.transparent ? "transparent" : backgroundColor.toString()
+    backgroundColor: props.transparent
+      ? "transparent"
+      : backgroundColor.toString()
   };
   return <div style={style} />;
 };