fixup!

Author: avivkeller

apps/site/package.json

@@ -80,7 +80,7 @@
     "vfile-matter": "~5.0.1"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "~3.0.0-rc.5",
+    "@eslint-react/eslint-plugin": "~3.0.0",
     "@flarelabs-net/wrangler-build-time-fs-assets-polyfilling": "^0.0.1",
     "@next/eslint-plugin-next": "16.2.1",
     "@node-core/remark-lint": "workspace:*",
@@ -92,21 +92,20 @@
     "@types/semver": "~7.7.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "dedent": "^1.7.2",
-    "eslint-config-next": "16.1.6",
-    "eslint-plugin-mdx": "~3.6.2",
+    "eslint-plugin-mdx": "~3.7.0",
     "global-jsdom": "^29.0.0",
     "handlebars": "4.7.8",
     "jsdom": "^29.0.0",
     "mdast-util-from-markdown": "^2.0.3",
     "nock": "^14.0.11",
     "remark-frontmatter": "^5.0.0",
-    "stylelint": "17.5.0",
+    "stylelint": "17.6.0",
     "stylelint-config-standard": "40.0.0",
     "stylelint-order": "8.1.1",
     "stylelint-selector-bem-pattern": "4.0.1",
     "tsx": "^4.21.0",
     "typescript": "catalog:",
-    "typescript-eslint": "~8.57.1",
+    "typescript-eslint": "~8.57.2",
     "user-agent-data-types": "0.4.2",
     "wrangler": "^4.74.0"
   },
@@ -124,4 +123,4 @@
   "engines": {
     "node": "24.x"
   }
-}
+}

package.json

@@ -51,7 +51,7 @@
     "prettier": "3.8.1",
     "prettier-plugin-tailwindcss": "0.7.2",
     "typescript": "catalog:",
-    "typescript-eslint": "~8.57.1"
+    "typescript-eslint": "~8.57.2"
   },
   "packageManager": "pnpm@10.28.2",
   "devEngines": {
@@ -66,4 +66,4 @@
       "onFail": "error"
     }
   }
-}
+}

packages/ui-components/__design__/platform-logos.stories.tsx

@@ -16,10 +16,10 @@ const installMethodIcons = [Docker, Homebrew, NVM, Choco, N, Volta];
 export const PlatformLogos: StoryObj = {
   render: () => (
     <div className="flex flex-row gap-4">
-      {[osIcons, installMethodIcons].map((icons, idx) => (
-        <div key={idx} className="flex flex-col items-center gap-4">
-          {icons.map((Icon, index) => (
-            <Icon key={index} width={64} height={64} />
+      {[osIcons, installMethodIcons].map(icons => (
+        <div key={icons.length} className="flex flex-col items-center gap-4">
+          {icons.map(Icon => (
+            <Icon key={Icon.name || Icon.displayName} width={64} height={64} />
           ))}
         </div>
       ))}

packages/ui-components/__design__/social-logos.stories.tsx

@@ -19,10 +19,13 @@ const socialIcons = [
 export const SocialMediaLogos: StoryObj = {
   render: () => (
     <div className="flex flex-row gap-4">
-      {socialIcons.map((group, idx) => (
-        <div key={idx} className="flex flex-col items-center gap-4">
-          {group.map((Icon, index) => (
-            <Icon key={index} width={64} height={64} />
+      {socialIcons.map(group => (
+        <div
+          key={group.map(i => i.name || i.displayName).join()}
+          className="flex flex-col items-center gap-4"
+        >
+          {group.map(Icon => (
+            <Icon key={Icon.name || Icon.displayName} width={64} height={64} />
           ))}
         </div>
       ))}

packages/ui-components/__design__/table.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 const tableData = [
-  ['Data 1', 'Data 2', 'Data 3'],
-  ['Data 1', 'Data 2', 'Data 3'],
-  ['Data 1', 'Data 2', 'Data 3'],
+  { id: 'row-1', cells: ['Data 1', 'Data 2', 'Data 3'] },
+  { id: 'row-2', cells: ['Data 1', 'Data 2', 'Data 3'] },
+  { id: 'row-3', cells: ['Data 1', 'Data 2', 'Data 3'] },
 ];
 
 export const Table: StoryObj = {
@@ -12,16 +12,16 @@ export const Table: StoryObj = {
       <table>
         <thead>
           <tr>
-            {['Column 1', 'Column 2', 'Column 3'].map((col, idx) => (
-              <th key={idx}>{col}</th>
+            {['Column 1', 'Column 2', 'Column 3'].map(col => (
+              <th key={col}>{col}</th>
             ))}
           </tr>
         </thead>
         <tbody>
-          {tableData.map((row, rowIndex) => (
-            <tr key={rowIndex}>
-              {row.map((cell, cellIndex) => (
-                <td key={cellIndex}>{cell}</td>
+          {tableData.map(row => (
+            <tr key={row.id}>
+              {row.cells.map(cell => (
+                <td key={`${row.id}-${cell}`}>{cell}</td>
               ))}
             </tr>
           ))}

packages/ui-components/package.json

@@ -65,7 +65,7 @@
     "typescript": "catalog:"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "~3.0.0-rc.5",
+    "@eslint-react/eslint-plugin": "~3.0.0",
     "@storybook/addon-styling-webpack": "~3.0.0",
     "@storybook/addon-themes": "~10.2.19",
     "@storybook/addon-webpack5-compiler-swc": "~4.0.2",
@@ -75,7 +75,7 @@
     "cross-env": "catalog:",
     "concurrently": "9.2.1",
     "css-loader": "7.1.2",
-    "eslint-plugin-storybook": "10.0.7",
+    "eslint-plugin-storybook": "10.3.3",
     "global-jsdom": "29.0.0",
     "postcss-loader": "8.2.1",
     "storybook": "~10.2.19",
@@ -109,4 +109,4 @@
   "engines": {
     "node": ">=20"
   }
-}
+}

packages/ui-components/src/Common/BaseCodeBox/index.tsx

@@ -47,8 +47,10 @@ const transformCode = <T extends ReactElement<PropsWithChildren>>(
         const columns = line.split(' ');
 
         return [
+          // eslint-disable-next-line @eslint-react/no-array-index-key -- lines from split string have no stable ID
           <span key={lineIndex} className="line">
             {columns.map((column, columnIndex) => (
+              // eslint-disable-next-line @eslint-react/no-array-index-key -- columns from split string have no stable ID
               <Fragment key={columnIndex}>
                 <span>{column}</span>
                 {columnIndex < columns.length - 1 && <span> </span>}

packages/ui-components/src/Common/ChangeHistory/index.tsx

@@ -39,12 +39,12 @@ const ChangeHistory: FC<ChangeHistoryProps> = ({
         aria-label={ariaLabel}
       >
         <div className={styles.dropdownContentInner}>
-          {changes.map((change, index) => {
+          {changes.map(change => {
             const MenuItem = change.url ? As : 'div';
 
             return (
               <MenuItem
-                key={index}
+                key={change.label}
                 className={styles.dropdownItem}
                 role="menuitem"
                 tabIndex={0}

packages/ui-components/src/Common/Search/Results/Skeleton/index.tsx

@@ -8,8 +8,8 @@ import styles from './index.module.css';
 const SearchResultsSkeleton: FC = () => (
   <SearchResults.Loading>
     <div className={styles.skeletonWrapper}>
-      {[...Array(3)].map((_, index) => (
-        <div key={index} className={styles.skeletonItem}>
+      {['skeleton-1', 'skeleton-2', 'skeleton-3'].map(id => (
+        <div key={id} className={styles.skeletonItem}>
           <div
             className={classNames(styles.skeletonAnim, styles.skeletonAvatar)}
           />

packages/ui-components/src/Common/Search/Suggestions/index.tsx

@@ -20,8 +20,8 @@ const SearchSuggestions: FC<SearchSuggestionsProps> = ({
 }) => (
   <Suggestions.Wrapper className={wrapper}>
     {label && <p className={styles.suggestionsTitle}>{label}</p>}
-    {suggestions.map((suggestion, i) => (
-      <Suggestions.Item key={i} {...props} className={className}>
+    {suggestions.map(suggestion => (
+      <Suggestions.Item key={suggestion} {...props} className={className}>
         <SparklesIcon />
         {suggestion}
       </Suggestions.Item>