chore: update to latest eslint v9 config (#1522)

Closes #1276

Author: B4nan

apify-docs-theme/src/theme/ColorModeToggle/index.jsx

@@ -3,9 +3,9 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import clsx from 'clsx';
 import React from 'react';
 
-import styles from './styles.module.css';
 import IconDarkMode from '../Icon/DarkMode';
 import IconLightMode from '../Icon/LightMode';
+import styles from './styles.module.css';
 
 function ColorModeToggle({
     className,

apify-docs-theme/src/theme/Navbar/Content/index.jsx

@@ -11,8 +11,8 @@ import NavbarSearch from '@theme/Navbar/Search';
 import NavbarItem from '@theme/NavbarItem';
 import React from 'react';
 
-import styles from './styles.module.css';
 import SearchBar from '../../SearchBar';
+import styles from './styles.module.css';
 
 function NavbarItems({ items }) {
     return (

eslint.config.mjs

@@ -1,7 +1,7 @@
 import react from 'eslint-plugin-react';
 import globals from 'globals';
 
-import apify from '@apify/eslint-config';
+import apify from '@apify/eslint-config/ts';
 
 export default [
     {

package-lock.json

@@ -43,17 +43,17 @@
         "postinstall": "patch-package"
     },
     "devDependencies": {
-        "@apify/eslint-config": "0.5.0-beta.4",
+        "@apify/eslint-config": "^1.0.0",
         "@apify/tsconfig": "^0.1.0",
         "@rsbuild/plugin-styled-components": "^1.1.0",
         "@types/react": "^18.2.8",
         "babel-plugin-styled-components": "^2.1.4",
         "cross-env": "^7.0.3",
-        "eslint": "^9.19.0",
+        "eslint": "^9.24.0",
         "eslint-plugin-json": "^4.0.1",
         "eslint-plugin-markdown": "^5.1.0",
-        "eslint-plugin-react": "^7.37.4",
-        "eslint-plugin-react-hooks": "^5.1.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "fs-extra": "^11.1.1",
         "globals": "^16.0.0",
         "globby": "^14.0.0",
@@ -63,7 +63,7 @@
         "patch-package": "^8.0.0",
         "rimraf": "^6.0.0",
         "typescript": "5.8.3",
-        "typescript-eslint": "^8.22.0"
+        "typescript-eslint": "^8.29.1"
     },
     "dependencies": {
         "@apify/ui-library": "^0.62.0",
@@ -80,8 +80,8 @@
         "@redocly/cli": "^1.27.1",
         "ajv": "^8.17.1",
         "clsx": "^2.0.0",
-        "docusaurus-plugin-openapi-docs": "^4.3.2",
-        "docusaurus-theme-openapi-docs": "^4.3.2",
+        "docusaurus-plugin-openapi-docs": "^4.3.7",
+        "docusaurus-theme-openapi-docs": "^4.3.7",
         "form-data": "^4.0.0",
         "github-buttons": "^2.28.0",
         "postcss-preset-env": "^10.0.0",

package.json

@@ -4,10 +4,10 @@ import styled from 'styled-components';
 
 import { HorizontalTile, theme } from '@apify/ui-library';
 
-import styles from './styles.module.css';
 import ArrowRight20 from '../../pages/img/arrow-right-20.svg';
 import { Heading } from '../Heading';
 import { Text } from '../Text';
+import styles from './styles.module.css';
 
 const StyledHorizontalTile = styled(HorizontalTile)`
   height: 100%;

patches/docusaurus-plugin-openapi-docs+4.3.2.patch renamed to patches/docusaurus-plugin-openapi-docs+4.3.7.patch

@@ -1,8 +1,8 @@
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React, {
-    useState,
     useEffect,
+    useState,
 } from 'react';
 import styled from 'styled-components';
 

patches/docusaurus-theme-openapi-docs+4.3.2.patch renamed to patches/docusaurus-theme-openapi-docs+4.3.7.patch

@@ -1,11 +1,11 @@
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-import { VerticalTile, theme } from '@apify/ui-library';
+import { theme, VerticalTile } from '@apify/ui-library';
 
-import styles from './styles.module.css';
 import { Heading } from '../Heading';
 import { Text } from '../Text';
+import styles from './styles.module.css';
 
 interface CardWithIconProps {
     icon: React.ReactNode;

src/components/ActionCard/ActionCard.tsx

@@ -1,5 +1,5 @@
 import Link from '@docusaurus/Link';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import styles from './styles.module.css';
 

src/components/ActorTemplates/ActorTemplates.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type React from 'react';
 
-import styles from './styles.module.css';
 import { Heading } from '../Heading';
+import styles from './styles.module.css';
 
 interface HeroProps {
     heading: string;

src/components/CardWithIcon/CardWithIcon.tsx

@@ -7,10 +7,10 @@ import GitHubButton from 'react-github-btn';
 
 import { theme } from '@apify/ui-library';
 
-import styles from './styles.module.css';
 import CardWithImageAndContent from '../CardWithImageAndContent/ImageWithContent';
 import { Heading } from '../Heading';
 import { Text } from '../Text';
+import styles from './styles.module.css';
 
 const OpenSourceCards: React.FC = () => {
     const { colorMode } = useColorMode();

src/components/ChangeLog/ChangeLog.tsx

@@ -1,11 +1,11 @@
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
-import { VerticalTile, theme } from '@apify/ui-library';
+import { theme, VerticalTile } from '@apify/ui-library';
 
-import styles from './styles.module.css';
 import { Heading } from '../Heading';
 import { Text } from '../Text';
+import styles from './styles.module.css';
 
 interface PlainCardProps {
     icon: React.ReactNode;

src/components/Hero/Hero.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 
 import { theme } from '@apify/ui-library';
 
-import styles from './styles.module.css';
 import { Heading } from '../Heading';
 import { Text } from '../Text';
+import styles from './styles.module.css';
 
 interface SectionProps {
     heading?: string;

src/components/OpenSourceCards/OpenSourceCards.tsx

@@ -13,12 +13,12 @@ import {
     theme,
 } from '@apify/ui-library';
 
-import styles from './styles.module.css';
 import GitButton from '../../components/GitButton';
 import Hero from '../../components/Hero/Hero';
 import Section from '../../components/Section/Section';
 import Tabs from '../../components/Tabs';
 import UiLibraryWrapper from '../../components/UiLibraryWrapper';
+import styles from './styles.module.css';
 
 const SectionWrapper = styled(Section)`
     display: flex;