Fix many linting issues

__tests__/components/MiradorTextOverlay.test.js

@@ -125,7 +125,7 @@ describe('MiradorTextOverlay', () => {
     } = renderOverlay({ pageTexts });
     viewer.handlers['update-viewport']();
     const overlays = Array.of(...viewer.canvas.querySelectorAll('div > svg:first-of-type')).map(
-      (e) => e.parentElement
+      (e) => e.parentElement,
     );
     expect(overlays[0]).toHaveStyle({
       transform: 'translate(52.95000000000001px, 72.9px) scale(1.33)',

__tests__/components/OverlaySettings.test.js

@@ -22,20 +22,24 @@ const mockTheme = {
 
 // Mocked MUI slider for easier testing, taken from
 // https://stackoverflow.com/a/61628815 (CC BY-SA 4.0)
-jest.mock('@material-ui/core/Slider', () => (props) => {
-  const { id, name, min, max, onChange } = props;
-  return (
-    <input
-      data-testid="opacity-slider"
-      type="range"
-      id={id}
-      name={name}
-      min={min}
-      max={max}
-      onChange={(event) => onChange(event, event.target.value)}
-    />
-  );
-});
+jest.mock(
+  '@material-ui/core/Slider',
+  () =>
+    function (props) {
+      const { id, name, min, max, onChange } = props;
+      return (
+        <input
+          data-testid="opacity-slider"
+          type="range"
+          id={id}
+          name={name}
+          min={min}
+          max={max}
+          onChange={(event) => onChange(event, event.target.value)}
+        />
+      );
+    },
+);
 
 /** Render a bubble to the testing screen */
 function renderSettings(props = {}, renderFn = render) {
@@ -67,7 +71,7 @@ function renderSettings(props = {}, renderFn = render) {
         {...props}
         windowTextOverlayOptions={options}
       />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
   return { rerender, options, updateOptionsMock };
 }
@@ -209,7 +213,7 @@ describe('TextOverlaySettingsBubble', () => {
   it('should be positioned lower if mirador-image-tools is enabled', () => {
     renderSettings({ imageToolsEnabled: true });
     expect(
-      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement
+      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement,
     ).toHaveStyle('top: 66px');
   });
 

__tests__/components/PageTextDisplay.test.js

@@ -66,24 +66,24 @@ describe('PageTextDisplay', () => {
     renderPage({ visible: false });
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
     expect(screen.getByText(svgTextMatcher('another secondWord on another line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
   });
 
   it('should not re-render by itself when the opacity changes', () => {
     const { rerender } = renderPage();
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
     renderPage({ opacity: 0.25 }, rerender);
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
   });
 
@@ -92,11 +92,11 @@ describe('PageTextDisplay', () => {
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).not.toBeNull();
     renderPage(
       { source: 'http://example.com/pages/2', lines: lineFixtures.withoutSpans, opacity: 0.25 },
-      rerender
+      rerender,
     );
     expect(screen.getByText('a word on a line')).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.25);'
+      'fill: rgba(0, 0, 0, 0.25);',
     );
   });
 

__tests__/lib/ocrFormats.test.js

@@ -11,7 +11,7 @@ import contentAsTextAnnos from '../../__fixtures__/anno_iifv2.json';
  * https://stackoverflow.com/a/53464807 (CC-BY-SA)
  */
 const closeTo = (expected, precision = 1) => ({
-  asymmetricMatch: (actual) => Math.abs(expected - actual) < Math.pow(10, -precision) / 2,
+  asymmetricMatch: (actual) => Math.abs(expected - actual) < 10 ** -precision / 2,
 });
 
 describe('parsing ALTO', () => {
@@ -49,7 +49,7 @@ describe('parsing ALTO', () => {
 
   it('should convert style nodes to proper CSS', () => {
     expect(parsed.lines[96].spans[16].style).toBe(
-      'font-family: Times New Roman;font-style: italic'
+      'font-family: Times New Roman;font-style: italic',
     );
   });
 });

__tests__/state/sagas.test.js

@@ -222,7 +222,7 @@ describe('Fetching external annotation sources', () => {
       .put(
         receiveAnnotation(targetId, annotationId, {
           resources: [{ resource: simpleExternalContent }],
-        })
+        }),
       )
       .run());
 
@@ -245,7 +245,7 @@ describe('Fetching external annotation sources', () => {
               },
             },
           ],
-        })
+        }),
       )
       .run());
 

src/components/MiradorTextOverlay.js

@@ -29,16 +29,8 @@ class MiradorTextOverlay extends Component {
 
   /** Register OpenSeadragon callback when viewport changes */
   componentDidUpdate(prevProps) {
-    const {
-      enabled,
-      viewer,
-      pageTexts,
-      textColor,
-      bgColor,
-      useAutoColors,
-      visible,
-      selectable,
-    } = this.props;
+    const { enabled, viewer, pageTexts, textColor, bgColor, useAutoColors, visible, selectable } =
+      this.props;
     let { opacity } = this.props;
 
     this.patchAnnotationOverlay();
@@ -152,7 +144,7 @@ class MiradorTextOverlay extends Component {
       this.renderRefs[itemNo].current.updateTransforms(
         img.viewportToImageZoom(viewportZoom),
         vpBounds.x * canvasWorldScale - canvasWorldOffset,
-        vpBounds.y * canvasWorldScale
+        vpBounds.y * canvasWorldScale,
       );
     }
   }
@@ -272,7 +264,7 @@ class MiradorTextOverlay extends Component {
           );
         })}
       </div>,
-      viewer.canvas
+      viewer.canvas,
     );
   }
 }

src/components/PageTextDisplay.js

@@ -172,16 +172,22 @@ class PageTextDisplay extends React.Component {
      * how to render lines and spans, sorry :-/ */
     const isGecko = runningInGecko();
     // eslint-disable-next-line require-jsdoc
-    let LineWrapper = ({ children }) => <text style={textStyle}>{children}</text>;
+    function LineWrapper({ children }) {
+      return <text style={textStyle}>{children}</text>;
+    }
     // eslint-disable-next-line react/jsx-props-no-spreading, require-jsdoc
-    let SpanElem = (props) => <tspan {...props} />;
+    function SpanElem(props) {
+      return <tspan {...props} />;
+    }
     if (isGecko) {
       // NOTE: Gecko really works best with a flattened bunch of text nodes. Wrapping the
       //       lines in a <g>, e.g. breaks text selection in similar ways to the below
       //       WebKit-specific note, for some reason ¯\_(ツ)_/¯
       LineWrapper = React.Fragment;
       // eslint-disable-next-line react/jsx-props-no-spreading, require-jsdoc
-      SpanElem = (props) => <text style={textStyle} {...props} />;
+      SpanElem = function (props) {
+        return <text style={textStyle} {...props} />;
+      };
     }
     return (
       <div ref={this.containerRef} style={containerStyle}>
@@ -244,7 +250,7 @@ class PageTextDisplay extends React.Component {
                 >
                   {line.text}
                 </text>
-              )
+              ),
             )}
           </g>
         </svg>

src/components/settings/ButtonContainer.js

@@ -34,10 +34,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Container for a settings button */
-const ButtonContainer = ({ children, withBorder, paddingPrev, paddingNext }) => {
+function ButtonContainer({ children, withBorder, paddingPrev, paddingNext }) {
   const classes = useStyles({ withBorder, paddingPrev, paddingNext });
   return <div className={classes.root}>{children}</div>;
-};
+}
 ButtonContainer.propTypes = {
   children: PropTypes.node.isRequired,
   withBorder: PropTypes.bool,

src/components/settings/ColorInput.js

@@ -37,7 +37,7 @@ const useStyles = makeStyles({
 });
 
 /** Input to select a color */
-const ColorInput = ({ color, onChange, title, autoColors, className }) => {
+function ColorInput({ color, onChange, title, autoColors, className }) {
   const classes = useStyles({ color, autoColors });
   // We rely on the browser behavior that clicking on an input's label is equivalent
   // to clicking the input to show a custom color picker button.
@@ -65,7 +65,7 @@ const ColorInput = ({ color, onChange, title, autoColors, className }) => {
       />
     </label>
   );
-};
+}
 ColorInput.propTypes = {
   className: PropTypes.string,
   color: PropTypes.string.isRequired,

src/components/settings/ColorWidget.js

@@ -57,15 +57,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Widget to update text and background color */
-const ColorWidget = ({
-  textColor,
-  bgColor,
-  onChange,
-  t,
-  pageColors,
-  useAutoColors,
-  containerId,
-}) => {
+function ColorWidget({ textColor, bgColor, onChange, t, pageColors, useAutoColors, containerId }) {
   const showResetButton =
     !useAutoColors && pageColors && pageColors.some((c) => c && (c.textColor || c.bgColor));
   const classes = useStyles({ showResetButton });
@@ -118,7 +110,7 @@ const ColorWidget = ({
       />
     </div>
   );
-};
+}
 ColorWidget.propTypes = {
   containerId: PropTypes.string.isRequired,
   textColor: PropTypes.string.isRequired,
@@ -130,7 +122,7 @@ ColorWidget.propTypes = {
     PropTypes.shape({
       textColor: PropTypes.string,
       bgColor: PropTypes.string,
-    })
+    }),
   ).isRequired,
 };
 

src/components/settings/OpacityWidget.js

@@ -33,7 +33,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Widget to control the opacity of the displayed text */
-const OpacityWidget = ({ opacity, onChange, t }) => {
+function OpacityWidget({ opacity, onChange, t }) {
   const classes = useStyles();
   const theme = useTheme();
   const isSmallDisplay = useMediaQuery(theme.breakpoints.down('sm'));
@@ -54,7 +54,7 @@ const OpacityWidget = ({ opacity, onChange, t }) => {
       />
     </div>
   );
-};
+}
 OpacityWidget.propTypes = {
   opacity: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,

src/components/settings/OverlaySettings.js

@@ -46,7 +46,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Control text overlay settings  */
-const OverlaySettings = ({
+function OverlaySettings({
   windowTextOverlayOptions,
   imageToolsEnabled,
   textsAvailable,
@@ -55,7 +55,7 @@ const OverlaySettings = ({
   t,
   pageColors,
   containerId,
-}) => {
+}) {
   const {
     enabled,
     visible,
@@ -221,7 +221,7 @@ const OverlaySettings = ({
       {!isSmallDisplay && toggleButton}
     </div>
   );
-};
+}
 
 OverlaySettings.propTypes = {
   containerId: PropTypes.string.isRequired,
@@ -236,7 +236,7 @@ OverlaySettings.propTypes = {
     PropTypes.shape({
       textColor: PropTypes.string,
       bgColor: PropTypes.string,
-    })
+    }),
   ).isRequired,
 };
 

src/lib/color.js

@@ -35,7 +35,7 @@ function luminance([r, g, b]) {
     if (vSrgb <= 0.03928) {
       return vSrgb / 12.92;
     }
-    return Math.pow((vSrgb + 0.055) / 1.055, 2.4);
+    return ((vSrgb + 0.055) / 1.055) ** 2.4;
   });
   return colors[0] * 0.2126 + colors[1] * 0.7152 + colors[2] * 0.0722;
 }

src/lib/ocrFormats.js

@@ -80,7 +80,7 @@ export function parseHocr(hocrText, referenceSize) {
     const scaledHeight = Math.round(scaleFactorX * pageSize[3]);
     if (scaledWidth !== referenceSize.width || scaledHeight !== referenceSize.height) {
       console.warn(
-        `Differing scale factors for x and y axis: x=${scaleFactorX}, y=${scaleFactorY}`
+        `Differing scale factors for x and y axis: x=${scaleFactorX}, y=${scaleFactorY}`,
       );
     }
     scaleFactor = scaleFactorX;
@@ -350,7 +350,7 @@ export function parseIiifAnnotations(annos, imgSize) {
   const lineAnnos = annos.filter(
     (anno) =>
       anno.textGranularity === 'line' || // IIIF Text Granularity
-      anno.dcType === 'Line' // Europeana
+      anno.dcType === 'Line', // Europeana
   );
   const targetAnnos = lineAnnos.length > 0 ? lineAnnos : annos;
   const boxes = targetAnnos.map((anno) => {