From 35063b96f23a09192b3ce016e8b27e48b4c169e2 Mon Sep 17 00:00:00 2001 From: kraftbj Date: Thu, 5 Sep 2024 14:44:45 +0000 Subject: [PATCH] ci: Check that React-using projects use react eslint rules (#39214) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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@d586800b8457f6106c1fecede9abf95d13ccfd24 --- CHANGELOG.md | 8 ++++++++ build/react/example.js | 32 +++++++++++++++++++++----------- package.json | 2 +- 3 files changed, 30 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 16049d1..b9db82c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/build/react/example.js b/build/react/example.js index 5974a4c..e832c22 100644 --- a/build/react/example.js +++ b/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 = ``; + 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 = ``; - 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; diff --git a/package.json b/package.json index 09bbc5d..ffbe7e4 100644 --- a/package.json +++ b/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": {