feat: add eslint-plugin-ssr-friendly (#15903)

* feat: add eslint-plugin-ssr-friendly

* fix: eslint ssr-friendly errors

* chore: ignore test and story files

* chore: remove ignore line from story and test files

* fix: undo menu changes and add comment

config/eslint-config-carbon/internal.js

@@ -15,5 +15,6 @@ module.exports = {
     require.resolve('./plugins/storybook'),
     require.resolve('./plugins/testing-library'),
     require.resolve('./plugins/eslint-plugin-playwright'),
+    require.resolve('./plugins/eslint-plugin-ssr-friendly'),
   ],
 };

config/eslint-config-carbon/package.json

@@ -47,6 +47,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-ssr-friendly": "^1.3.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.0.1",
     "eslint-restricted-globals": "^0.2.0"

config/eslint-config-carbon/plugins/eslint-plugin-ssr-friendly.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2018, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = {
+  plugins: ['ssr-friendly'],
+  ignorePatterns: ['*.stories.js', '*-test.js'],
+  overrides: [
+    {
+      extends: ['plugin:ssr-friendly/recommended'],
+      files: ['*.js', '*.ts', '*.tsx'],
+    },
+  ],
+};

packages/react/src/components/Menu/Menu.tsx

@@ -112,6 +112,8 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu(
     onOpen,
     open,
     size = 'sm',
+    // TODO: #16004
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     target = document.body,
     x = 0,
     y = 0,

packages/react/src/components/Slider/Slider.Skeleton.tsx

@@ -6,9 +6,10 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useState } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 import classNames from 'classnames';
 import { LowerHandle, UpperHandle } from './SliderHandles';
 
@@ -36,7 +37,12 @@ const SliderSkeleton = ({
   ...rest
 }: SliderSkeletonProps) => {
   const prefix = usePrefix();
-  const isRtl = document?.dir === 'rtl';
+  const [isRtl, setIsRtl] = useState(false);
+
+  useIsomorphicEffect(() => {
+    setIsRtl(document ? document.dir === 'rtl' : false);
+  }, []);
+
   const containerClasses = classNames(
     `${prefix}--slider-container`,
     `${prefix}--skeleton`,

packages/react/src/internal/environment.js

@@ -12,6 +12,8 @@
  */
 export const canUseDOM = !!(
   typeof window !== 'undefined' &&
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   window.document &&
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   window.document.createElement
 );

packages/react/src/internal/keyboard/navigation.js

@@ -40,6 +40,7 @@ export const getNextIndex = (key, index, arrayLength) => {
 export const DOCUMENT_POSITION_BROAD_PRECEDING =
   // Checks `typeof Node` for `react-docgen`
   typeof Node !== 'undefined' &&
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 
 /**
@@ -49,6 +50,7 @@ export const DOCUMENT_POSITION_BROAD_PRECEDING =
 export const DOCUMENT_POSITION_BROAD_FOLLOWING =
   // Checks `typeof Node` for `react-docgen`
   typeof Node !== 'undefined' &&
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
   Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 
 /**

yarn.lock

@@ -13280,6 +13280,7 @@ __metadata:
     eslint-plugin-prettier: "npm:^5.0.0"
     eslint-plugin-react: "npm:^7.32.2"
     eslint-plugin-react-hooks: "npm:^4.6.0"
+    eslint-plugin-ssr-friendly: "npm:^1.3.0"
     eslint-plugin-storybook: "npm:^0.8.0"
     eslint-plugin-testing-library: "npm:^6.0.1"
     eslint-restricted-globals: "npm:^0.2.0"
@@ -13534,6 +13535,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-ssr-friendly@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "eslint-plugin-ssr-friendly@npm:1.3.0"
+  dependencies:
+    globals: "npm:^13.8.0"
+  peerDependencies:
+    eslint: ">=0.8.0"
+  checksum: 10/d93b87fa3e4a816931374edb69da030a54a9673f2ed3bd33110ed0c51b689ffc9d817964dc1b86467b4bbd8ff0bf15d13b43e57d71878d7b818b52eb14074aaf
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-storybook@npm:^0.8.0":
   version: 0.8.0
   resolution: "eslint-plugin-storybook@npm:0.8.0"
@@ -15202,7 +15214,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globals@npm:^13.19.0, globals@npm:^13.23.0":
+"globals@npm:^13.19.0, globals@npm:^13.23.0, globals@npm:^13.8.0":
   version: 13.24.0
   resolution: "globals@npm:13.24.0"
   dependencies: