chore: upgrade eslint-config-trendmicro and fix lint errors

.github/workflows/ci-release.yml

@@ -12,7 +12,6 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
 permissions: {}
 
@@ -24,6 +23,7 @@ jobs:
       contents: write       # to create release (changesets/action)
       issues: write         # to post issue comments (changesets/action)
       pull-requests: write  # to create pull request (changesets/action)
+      id-token: write       # to request OIDC token for npm Trusted Publishing
     name: Release
     runs-on: ubuntu-latest
     steps:
@@ -38,6 +38,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 24
+          registry-url: 'https://registry.npmjs.org'
       - name: Install Dependencies
         id: install-dependencies
         run: yarn install
@@ -57,4 +58,4 @@ jobs:
           publish: yarn ci-publish
         env:
           GITHUB_TOKEN: ${{ env.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ env.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true

codecov.yml

@@ -3,9 +3,13 @@ coverage:
   status:
     project:
       default:
-        target: auto 
-        threshold: 2%
+        target: auto
+        threshold: 1%
+        removed_code_behavior: adjust_base
+        if_ci_failed: error
+        if_not_found: success
     patch:
       default:
-        target: auto 
-        threshold: 2%
+        target: auto
+        threshold: 5%
+        informational: true

examples/react-template/package.json

@@ -7,15 +7,15 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^15.0.0",
     "del-cli": "^5.0.0",
-    "eslint": "^8.25.0",
-    "eslint-config-trendmicro": "^3.0.0",
-    "eslint-plugin-import": "latest",
-    "eslint-plugin-jsx-a11y": "latest",
-    "eslint-plugin-react": "latest",
-    "eslint-plugin-react-hooks": "latest",
+    "eslint": "^9.26.0",
+    "eslint-config-trendmicro": "^4.1.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "jest-watch-typeahead": "^2.2.1",
     "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"

packages/changelog-github/package.json

@@ -33,7 +33,7 @@
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
     "eslint": "^9.26.0",
-    "eslint-config-trendmicro": "^4.0.0",
+    "eslint-config-trendmicro": "^4.4.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",

packages/codemod/eslint.config.mjs

@@ -25,7 +25,7 @@ export default defineConfig([
       'build',
       'dist',
       'node_modules',
-      '__fixtures__',
+      '**/__fixtures__/**',
     ],
   },
 ]);

packages/codemod/package.json

@@ -35,7 +35,7 @@
     "@trendmicro/babel-config": "^1.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^9.26.0",
-    "eslint-config-trendmicro": "^4.0.0",
+    "eslint-config-trendmicro": "^4.4.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",

packages/mcp/package.json

@@ -65,7 +65,7 @@
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
     "eslint": "^9.26.0",
-    "eslint-config-trendmicro": "^4.0.0",
+    "eslint-config-trendmicro": "^4.4.1",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-import": "^2.32.0",
     "globals": "^15.0.0",

packages/mcp/src/__tests__/server.test.ts

@@ -68,7 +68,7 @@ describe('createMcpServer', () => {
 The description of the tool contains the available packages, as listed below:
 - @tonic-ui/react@2.0.0
 
-1. Pick the most suitable package from the above list, and use that as the \"packages\" argument for this tool's execution, to get the docs content. If it's just one, let it be an array with one package.
+1. Pick the most suitable package from the above list, and use that as the "packages" argument for this tool's execution, to get the docs content. If it's just one, let it be an array with one package.
 2. Analyze the URLs listed in the content.
 3. Then use "fetch-pages" tool to fetch specific documentation pages relevant to the user's question with the subsequent tool call.`);
 

packages/mcp/src/utils.ts

@@ -33,7 +33,7 @@ async function fetchFromUrl(urlString: string): Promise<string> {
     return content;
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : String(error);
-    throw new Error(`Failed to fetch ${urlString}: ${errorMessage}`);
+    throw new Error(`Failed to fetch ${urlString}: ${errorMessage}`, { cause: error });
   }
 }
 
@@ -89,9 +89,7 @@ async function loadFromFilePath(
     }
     for (const ext of extensions) {
       const candidate = filePath + ext;
-      // eslint-disable-next-line no-await-in-loop
       if (await exists(candidate)) {
-        // eslint-disable-next-line no-await-in-loop
         return await fs.readFile(candidate, 'utf-8');
       }
     }
@@ -110,7 +108,7 @@ export function trimTrailingSlashAndWhitespace(url: string | undefined): string
   if (typeof url !== 'string') {
     return '';
   }
-  return url.replace(/[\/\s]+$/, '');
+  return url.replace(/[\/\s]+$/, ''); // eslint-disable-line no-useless-escape
 }
 
 /**
@@ -176,7 +174,6 @@ export async function processUrls(
     let error;
 
     try {
-      // eslint-disable-next-line no-await-in-loop
       content = await _processUrl(url);
     } catch (err) {
       error = err;

packages/react-base/babel.config.js

@@ -12,6 +12,23 @@ module.exports = {
   ],
   presets: [
     '@babel/preset-env',
+    /**
+     * @babel/preset-react
+     *
+     * - `runtime: 'automatic'`
+     *     Babel auto-injects the JSX runtime import, so JSX files no longer need
+     *     `import React from 'react'`. Named imports are still required for React APIs:
+     *       - `import { useState, useRef, forwardRef, memo } from 'react'` ✅ still needed
+     *       - `import React from 'react'`                                   ❌ not needed
+     *
+     * - `importSource: '@emotion/react'`
+     *     Selects which JSX runtime to use:
+     *       - `@emotion/react/jsx-runtime` (with importSource) — enables Emotion's `css` prop
+     *       - `react/jsx-runtime`          (default)
+     *
+     * These two options are independent. `runtime` removes the need for `import React`;
+     * `importSource` controls which runtime handles the JSX transform.
+     */
     ['@babel/preset-react', {
       'runtime': 'automatic',
       'importSource': '@emotion/react',

packages/react-base/package.json

@@ -46,7 +46,7 @@
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
     "eslint": "^9.26.0",
-    "eslint-config-trendmicro": "^4.0.0",
+    "eslint-config-trendmicro": "^4.4.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",

packages/react-base/src/box/__tests__/Box.test.js

@@ -1,7 +1,6 @@
 import { testA11y } from '@tonic-ui/react-base/test-utils/accessibility';
 import { render } from '@tonic-ui/react-base/test-utils/render';
 import { Box } from '@tonic-ui/react-base/src';
-import React from 'react';
 
 describe('Box', () => {
   it('should render correctly', async () => {

packages/react-docs/babel.config.js

@@ -12,6 +12,23 @@ module.exports = {
   ],
   presets: [
     '@babel/preset-env',
+    /**
+     * @babel/preset-react
+     *
+     * - `runtime: 'automatic'`
+     *     Babel auto-injects the JSX runtime import, so JSX files no longer need
+     *     `import React from 'react'`. Named imports are still required for React APIs:
+     *       - `import { useState, useRef, forwardRef, memo } from 'react'` ✅ still needed
+     *       - `import React from 'react'`                                   ❌ not needed
+     *
+     * - `importSource: '@emotion/react'`
+     *     Selects which JSX runtime to use:
+     *       - `@emotion/react/jsx-runtime` (with importSource) — enables Emotion's `css` prop
+     *       - `react/jsx-runtime`          (default)
+     *
+     * These two options are independent. `runtime` removes the need for `import React`;
+     * `importSource` controls which runtime handles the JSX transform.
+     */
     ['@babel/preset-react', {
       'runtime': 'automatic',
       'importSource': '@emotion/react',

packages/react-docs/components/BaseTable.js

@@ -20,7 +20,7 @@ import {
   useTheme,
 } from '@tonic-ui/react';
 import { dataAttr } from '@tonic-ui/utils';
-import React, { Fragment, forwardRef, useEffect, useState } from 'react';
+import { Fragment, forwardRef, useEffect, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 /**
@@ -148,7 +148,6 @@ const BaseTable = forwardRef((
     );
   };
 
-  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data,
     columns,
@@ -317,8 +316,7 @@ const BaseTable = forwardRef((
                       >
                         {header.isPlaceholder
                           ? null
-                          : flexRender(header.column.columnDef.header, header.getContext())
-                        }
+                          : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableCell>
                     );
                   })}

packages/react-docs/components/BorderedBox.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, useColorMode } from '@tonic-ui/react';
 
 const BorderedBox = (props) => {

packages/react-docs/components/CodeBlock.js

@@ -9,9 +9,8 @@ import {
 } from '@tonic-ui/utils';
 import useClipboard from '../hooks/useClipboard';
 import { ensureString } from 'ensure-type';
-import React from 'react';
 import { LiveProvider, LiveEditor } from 'react-live';
-import { themes } from "prism-react-renderer"
+import { themes } from 'prism-react-renderer';
 
 const CodeBlock = ({ code: codeProp, language, ...rest }) => {
   const theme = useTheme();

packages/react-docs/components/ColorPalette.js

@@ -2,7 +2,6 @@ import { Box, Flex, Stack, useTheme } from '@tonic-ui/react';
 import {
   ensureString,
 } from 'ensure-type';
-import React from 'react';
 
 const ColorPalette = ({ hue }) => {
   const theme = useTheme();

packages/react-docs/components/ColorStyleBlock.js

@@ -6,7 +6,6 @@ import {
   useColorMode,
   useColorStyle,
 } from '@tonic-ui/react';
-import React from 'react';
 
 const baseWidth = 120;
 const baseHeight = 120;
@@ -69,7 +68,7 @@ const ColorStyleBlock = ({
       <Box
         mb="3x"
       >
-        {colorLabel && (
+        {colorLabel ? (
           <Text
             color={primaryTextColor}
             fontSize="md"
@@ -78,7 +77,7 @@ const ColorStyleBlock = ({
           >
             {colorLabel}
           </Text>
-        )}
+        ) : null}
       </Box>
       {colorTokens.length > 0 && (
         <>

packages/react-docs/components/ColorStyleBody.js

@@ -9,7 +9,6 @@ import {
 } from 'ensure-type';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
-import React from 'react';
 import ColorStyleBlock from './ColorStyleBlock';
 
 const baseWidth = 180;

packages/react-docs/components/ColorStyleContent.js

@@ -2,7 +2,6 @@ import {
   Box,
   useColorMode,
 } from '@tonic-ui/react';
-import React from 'react';
 
 const ColorStyleContent = (props) => {
   const [colorMode] = useColorMode();

packages/react-docs/components/ColorStyleHeader.js

@@ -3,7 +3,6 @@ import {
   useColorMode,
   useColorStyle,
 } from '@tonic-ui/react';
-import React from 'react';
 
 const ColorStyleHeader = (props) => {
   const [colorMode] = useColorMode();

packages/react-docs/components/Demo.js

@@ -20,8 +20,8 @@ import {
   merge,
 } from '@tonic-ui/utils';
 import { useRouter } from 'next/router';
-import { themes } from "prism-react-renderer"
-import React, { Fragment, useEffect, useCallback, useReducer } from 'react';
+import { themes } from 'prism-react-renderer'
+import { Fragment, useEffect, useCallback, useReducer } from 'react';
 import { LiveProvider, LiveEditor } from 'react-live';
 import useClipboard from '../hooks/useClipboard';
 import CodeSandboxIcon from '../icons/CodeSandboxIcon';
@@ -125,8 +125,7 @@ const Demo = ({
         <IconButton
           data-track={showSourceCode
             ? `Code|hide_source|${x({ path: router.pathname })}`
-            : `Code|show_source|${x({ path: router.pathname })}`
-          }
+            : `Code|show_source|${x({ path: router.pathname })}`}
           onClick={toggleShowSourceCode}
         >
           <Tooltip label={showSourceCode ? 'Hide the source' : 'Show the source'}>

packages/react-docs/components/FormGroup.js

@@ -1,5 +1,4 @@
 import { Box } from '@tonic-ui/react';
-import React from 'react';
 
 const FormGroup = (props) => (
   <Box mb="4x" {...props} />

packages/react-docs/components/GlobalStyles.js

@@ -4,7 +4,6 @@ import {
   useColorStyle,
   useTheme,
 } from '@tonic-ui/react';
-import React from 'react';
 
 const GlobalStyles = () => {
   const [colorMode] = useColorMode();

packages/react-docs/components/Header.js

@@ -23,7 +23,7 @@ import {
 } from '@tonic-ui/react-icons';
 import { ensureString } from 'ensure-type';
 import NextLink from 'next/link';
-import React, { forwardRef, useCallback, useEffect } from 'react';
+import { forwardRef, useCallback, useEffect } from 'react';
 import useTrack from '../hooks/useTrack';
 import CodeSandboxIcon from '../icons/CodeSandboxIcon';
 import GitHubIcon from '../icons/GitHubIcon';
@@ -158,7 +158,7 @@ const Header = forwardRef((
               lg: 'block',
             }}
           >
-            <NextLink href={`/`} legacyBehavior passHref>
+            <NextLink href="/" legacyBehavior passHref>
               <Link
                 data-track="Header|click_landing_page"
                 color={colorStyle.color.primary}
@@ -234,8 +234,7 @@ const Header = forwardRef((
                   >
                     {(key === version)
                       ? <>{value?.label}<Space width="2x" />✓</>
-                      : value?.label
-                    }
+                      : value?.label}
                   </MenuItem>
                 ))}
                 <MenuDivider />
@@ -251,7 +250,7 @@ const Header = forwardRef((
             </Menu>
           </Box>
           <ButtonBase
-            data-track={`Header|click_codesandbox`}
+            data-track="Header|click_codesandbox"
             onClick={() => handleClickOpenInCodeSandbox()}
             title="Open in CodeSandbox"
             sx={{

packages/react-docs/components/IconButton.js

@@ -2,7 +2,7 @@ import {
   ButtonBase,
   useColorMode,
 } from '@tonic-ui/react';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 const IconButton = forwardRef((props, ref) => {
   const [colorMode] = useColorMode();