chore: move react specific eslint configs into react-sdk

packages/browser-sdk/eslint.config.js

@@ -1,10 +1,16 @@
 const base = require("@bucketco/eslint-config");
+const preactConfig = require("eslint-config-preact");
+
+const compatPlugin = require("eslint-plugin-compat");
+const reactPlugin = require("eslint-plugin-react");
+const reactHooksPlugin = require("eslint-plugin-react-hooks");
 
 module.exports = [
   ...base,
   {
     // Preact projects
-    files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
+    files: ["**/*.tsx"],
+
     settings: {
       react: {
         // We only care about marking h() as being a used variable.
@@ -13,10 +19,18 @@ module.exports = [
         version: "16.0",
       },
     },
+    plugins: {
+      compat: compatPlugin,
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+    },
     rules: {
+      ...preactConfig.rules,
       // Ignore React attributes that are not valid in Preact.
       // Alternatively, we could use the preact/compat alias or turn off the rule.
       "react/no-unknown-property": ["off"],
+      "no-unused-vars": ["off"],
+      "react/no-danger": ["off"],
     },
   },
   { ignores: ["dist/", "example/"] },

packages/browser-sdk/package.json

@@ -50,6 +50,7 @@
     "@vitest/coverage-v8": "^2.0.4",
     "c8": "~10.1.3",
     "eslint": "^9.21.0",
+    "eslint-config-preact": "^1.5.0",
     "http-server": "^14.1.1",
     "jsdom": "^24.1.0",
     "msw": "^2.3.4",

packages/browser-sdk/src/feedback/ui/FeedbackForm.tsx

@@ -90,8 +90,7 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
     if (headerRef.current === null) return;
     if (expandedContentRef.current === null) return;
 
-    containerRef.current.style.maxHeight =
-      headerRef.current.clientHeight + "px";
+    containerRef.current.style.maxHeight = `${headerRef.current.clientHeight}px`;
 
     expandedContentRef.current.style.position = "absolute";
     expandedContentRef.current.style.opacity = "0";
@@ -103,11 +102,11 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
     if (headerRef.current === null) return;
     if (expandedContentRef.current === null) return;
 
-    containerRef.current.style.maxHeight =
+    containerRef.current.style.maxHeight = `${
       headerRef.current.clientHeight + // Header height
       expandedContentRef.current.clientHeight + // Comment + Button Height
-      10 + // Gap height
-      "px";
+      10 // Gap height
+    }px`;
 
     expandedContentRef.current.style.position = "relative";
     expandedContentRef.current.style.opacity = "1";
@@ -121,8 +120,7 @@ export const FeedbackForm: FunctionComponent<FeedbackFormProps> = ({
 
     formRef.current.style.opacity = "0";
     formRef.current.style.pointerEvents = "none";
-    containerRef.current.style.maxHeight =
-      submittedRef.current.clientHeight + "px";
+    containerRef.current.style.maxHeight = `${submittedRef.current.clientHeight}px`;
 
     // Fade in "submitted" step once container has resized
     setTimeout(() => {

packages/browser-sdk/src/feedback/ui/StarRating.tsx

@@ -52,7 +52,7 @@ const scores = [
   },
 ] as const;
 
-type Score = (typeof scores)[number];
+type ScoreNumber = (typeof scores)[number];
 
 export type StarRatingProps = {
   name: string;
@@ -118,7 +118,7 @@ const Score = ({
   isSelected: boolean;
   name: string;
   onChange?: h.JSX.GenericEventHandler<HTMLInputElement>;
-  score: Score;
+  score: ScoreNumber;
   t: FeedbackTranslations;
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);

packages/eslint-config/base.js

@@ -7,8 +7,6 @@ const globals = require("globals");
 const tsPlugin = require("@typescript-eslint/eslint-plugin");
 const tsParser = require("@typescript-eslint/parser");
 const prettierConfig = require("eslint-config-prettier");
-const reactPlugin = require("eslint-plugin-react");
-const hooksPlugin = require("eslint-plugin-react-hooks");
 
 module.exports = [
   {
@@ -29,8 +27,6 @@ module.exports = [
       import: importsPlugin,
       "unused-imports": unusedImportsPlugin,
       "simple-import-sort": sortImportsPlugin,
-      react: reactPlugin,
-      "react-hooks": hooksPlugin,
     },
     languageOptions: {
       globals: {
@@ -62,38 +58,6 @@ module.exports = [
     rules: {
       ...jsPlugin.configs.recommended.rules,
       ...importsPlugin.configs.recommended.rules,
-      ...reactPlugin.configs.recommended.rules,
-      ...hooksPlugin.configs.recommended.rules,
-
-      "react/jsx-key": [
-        "error",
-        {
-          checkFragmentShorthand: true,
-        },
-      ],
-      "react/self-closing-comp": ["error"],
-      "react/prefer-es6-class": ["error"],
-      "react/prefer-stateless-function": ["warn"],
-      "react/no-did-mount-set-state": ["error"],
-      "react/no-did-update-set-state": ["error"],
-      "react/jsx-filename-extension": [
-        "warn",
-        {
-          extensions: [".mdx", ".jsx", ".tsx"],
-        },
-      ],
-      "react/react-in-jsx-scope": ["off"],
-      "react/jsx-sort-props": [
-        "error",
-        {
-          callbacksLast: true,
-          shorthandFirst: false,
-          shorthandLast: true,
-          ignoreCase: true,
-          noSortAlphabetically: false,
-          reservedFirst: true,
-        },
-      ],
 
       // Imports
       "unused-imports/no-unused-vars": [

packages/eslint-config/package.json

@@ -16,6 +16,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.2.0",
     "prettier": "^3.5.2",
     "typescript": "^5.7.3"
   }

packages/react-sdk/eslint.config.js

@@ -1,3 +1,50 @@
 const base = require("@bucketco/eslint-config");
+const reactPlugin = require("eslint-plugin-react");
+const hooksPlugin = require("eslint-plugin-react-hooks");
 
-module.exports = [...base, { ignores: ["dist/", "dev/"] }];
+module.exports = [
+  ...base,
+  { ignores: ["dist/", "dev/"] },
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...hooksPlugin.configs.recommended.rules,
+
+      "react/jsx-key": [
+        "error",
+        {
+          checkFragmentShorthand: true,
+        },
+      ],
+      "react/self-closing-comp": ["error"],
+      "react/prefer-es6-class": ["error"],
+      "react/prefer-stateless-function": ["warn"],
+      "react/no-did-mount-set-state": ["error"],
+      "react/no-did-update-set-state": ["error"],
+      "react/jsx-filename-extension": [
+        "warn",
+        {
+          extensions: [".mdx", ".jsx", ".tsx"],
+        },
+      ],
+      "react/react-in-jsx-scope": ["off"],
+      "react/jsx-sort-props": [
+        "error",
+        {
+          callbacksLast: true,
+          shorthandFirst: false,
+          shorthandLast: true,
+          ignoreCase: true,
+          noSortAlphabetically: false,
+          reservedFirst: true,
+        },
+      ],
+    },
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": hooksPlugin,
+    },
+  },
+];