ci: Check that React-using projects use react eslint rules (#39214)

I noticed that several of our projects are using React but did not have
our `jetpack-js-tools/eslintrc/react` eslint ruleset enabled. This adds
a linting check for that, and enables it on most of the projects where
it was not enabled.

For a few I instead added a `@todo` comment about turning it on, due to
a lot of cleanup being needed in order to successfully do so. I hope
people more familiar with React and these projects will follow up on
that.

* js-packages/ai-client:
   32 × react/jsx-no-bind
   33 × react-hooks/exhaustive-deps
* packages/videopress:
    8 × react-hooks/rules-of-hooks
   69 × react-hooks/exhaustive-deps
  157 × react/jsx-no-bind
* plugins/boost:
    1 × react/no-danger
   81 × react/jsx-no-bind
* plugins/crm:
    1 × react-hooks/rules-of-hooks
    2 × react/jsx-no-bind
    3 × react-hooks/exhaustive-deps

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/10722474820

Upstream-Ref: Automattic/jetpack@d586800

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.1.8-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Fixed
+- Address React usage issues found by eslint in example.tsx.
+
 ## [3.1.7] - 2024-08-23
 ### Changed
 - Internal updates.
@@ -149,6 +156,7 @@
 
 - Build: Refactored (aligned build system with Gridicons).
 
+[3.1.8-alpha]: https://github.com/Automattic/social-logos/compare/v3.1.7...v3.1.8-alpha
 [3.1.7]: https://github.com/Automattic/social-logos/compare/v3.1.6...v3.1.7
 [3.1.6]: https://github.com/Automattic/social-logos/compare/v3.1.5...v3.1.6
 [3.1.5]: https://github.com/Automattic/social-logos/compare/v3.1.4...v3.1.5

build/react/example.js

@@ -6,6 +6,22 @@ const react_1 = require("react");
 const social_logo_1 = require("./social-logo");
 const social_logo_data_1 = require("./social-logo-data");
 require("../css/example.css");
+/**
+ * An example React component that displays a single social logo.
+ *
+ * @param {object}  props               - The properties.
+ * @param {string}  props.name          - Logo name.
+ * @param {number}  props.iconSize      - Icon size.
+ * @param {boolean} props.showIconNames - Whether to show icon names.
+ * @return {React.Component} The `SocialLogoItemExample` component.
+ */
+function SocialLogoItemExample({ name, iconSize, showIconNames }) {
+    const handleClick = (0, react_1.useCallback)(() => {
+        const code = `<SocialLogo icon="${name}" size="${iconSize}" />`;
+        window.prompt('Copy component code:', code);
+    }, [iconSize, name]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(social_logo_1.SocialLogo, { icon: name, size: iconSize, onClick: handleClick }), showIconNames && (0, jsx_runtime_1.jsx)("p", { children: name })] }, name));
+}
 /**
  * An example React component that displays all the social logos.
  *
@@ -15,19 +31,13 @@ function SocialLogosExample() {
     const [useSmallIcons, setUseSmallIcons] = (0, react_1.useState)(false);
     const [showIconNames, setShowIconNames] = (0, react_1.useState)(true);
     const iconSize = useSmallIcons ? 24 : 48;
-    const handleClick = name => {
-        const code = `<SocialLogo icon="${name}" size="${iconSize}" />`;
-        window.prompt('Copy component code:', code);
-    };
-    const handleSmallIconsToggle = e => {
+    const handleSmallIconsToggle = (0, react_1.useCallback)(e => {
         setUseSmallIcons(e.target.checked);
-    };
-    const handleIconNamesToggle = e => {
+    }, [setUseSmallIcons]);
+    const handleIconNamesToggle = (0, react_1.useCallback)(e => {
         setShowIconNames(e.target.checked);
-    };
-    const allSocialLogos = social_logo_data_1.SocialLogoData.map(logo => {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(social_logo_1.SocialLogo, { icon: logo.name, size: iconSize, onClick: handleClick.bind(this, logo.name) }), showIconNames && (0, jsx_runtime_1.jsx)("p", { children: logo.name })] }, logo.name));
-    });
+    }, [setShowIconNames]);
+    const allSocialLogos = social_logo_data_1.SocialLogoData.map(logo => ((0, jsx_runtime_1.jsx)(SocialLogoItemExample, { name: logo.name, iconSize: iconSize, showIconNames: showIconNames })));
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "social-logos-example" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Social Logos" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "display-control-group" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "display-control" }, { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Small icons" }), (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "switch" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", onChange: handleSmallIconsToggle, checked: useSmallIcons }), (0, jsx_runtime_1.jsx)("span", { className: "handle" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "display-control" }, { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Icon names" }), (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "switch" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", onChange: handleIconNamesToggle, checked: showIconNames }), (0, jsx_runtime_1.jsx)("span", { className: "handle" }), (0, jsx_runtime_1.jsx)("span", { className: "switch-label", "data-on": "On", "data-off": "Off" })] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "icons" }, { children: allSocialLogos })), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://github.com/Automattic/social-logos" }, { children: "GitHub" })) })] })));
 }
 exports.default = SocialLogosExample;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "social-logos",
-	"version": "3.1.7",
+	"version": "3.1.8-alpha",
 	"description": "A repository of all the social logos used on WordPress.com.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/social-logos/",
 	"bugs": {