Configure ssr-friendly eslint plugin (#3164)

* Configure ssr-friendly eslint plugin

* Fix ssr lint error

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'plugin:github/browser',
     'plugin:primer-react/recommended',
     'plugin:import/typescript',
+    'plugin:ssr-friendly/recommended',
   ],
   settings: {
     react: {
@@ -233,6 +234,8 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': 'off',
         'primer-react/no-deprecated-colors': ['error', {skipImportCheck: true}],
         'no-redeclare': 'off',
+        'ssr-friendly/no-dom-globals-in-module-scope': 'off',
+        'ssr-friendly/no-dom-globals-in-react-fc': 'off',
       },
     },
   ],

package.json

@@ -195,6 +195,7 @@
     "eslint-plugin-primer-react": "2.0.3",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-ssr-friendly": "1.2.0",
     "eslint-plugin-storybook": "0.6.11",
     "eslint-plugin-testing-library": "5.10.2",
     "fast-glob": "3.2.12",

src/PageLayout/useStickyPaneHeight.ts

@@ -109,7 +109,9 @@ export function useStickyPaneHeight() {
 // no longer be needed
 //
 // @see https://bugs.webkit.org/show_bug.cgi?id=242758
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 const supportsTouchCallout = canUseDOM ? CSS.supports('-webkit-touch-callout', 'none') : false
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 const supportsDVH = canUseDOM ? CSS.supports('max-height', '100dvh') && supportsTouchCallout : false
 
 /**

src/stories/Overlay.stories.tsx

@@ -385,7 +385,7 @@ export const MemexIssueOverlay = () => {
           onClickOutside={() => setOverlayOpen(false)}
           returnFocusRef={linkRef}
           top={0}
-          left={window.innerWidth - 480}
+          left="calc(100vw - 480px)"
         >
           <Box sx={{p: 4, height: '100vh'}}>
             <Box sx={{display: 'flex', alignItems: 'center', gap: 1, mb: 2}}>

src/utils/environment.js

@@ -3,4 +3,5 @@
  *
  * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
  */
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement)

src/utils/useIsomorphicLayoutEffect.ts

@@ -2,7 +2,9 @@ import {useEffect, useLayoutEffect} from 'react'
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' &&
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   typeof window.document !== 'undefined' &&
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   typeof window.document.createElement !== 'undefined'
     ? useLayoutEffect
     : useEffect