chore: update ESLint configuration and improve code structure (#515)

* chore: update ESLint configuration and improve code structure

* chore: comment out ESLint configuration in Rollup config

* fix build issues

* chore: optimize icon rendering in timeline components using useMemo

* refactor: improve list item click handling with useCallback

.gitignore

@@ -47,3 +47,7 @@ react-test-bed
 
 # Ignore Gradle build output directory
 build
+
+## Panda
+styled-system
+styled-system-studio

eslint.config.mjs

@@ -0,0 +1,73 @@
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import _import from 'eslint-plugin-import';
+import react from 'eslint-plugin-react';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import jsxA11Y from 'eslint-plugin-jsx-a11y';
+import typescriptSortKeys from 'eslint-plugin-typescript-sort-keys';
+import sortKeysFix from 'eslint-plugin-sort-keys-fix';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  allConfig: js.configs.all,
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  {
+    ignores: ['src/demo/*', 'src/assets/*', 'src/examples/*'],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      'plugin:import/typescript',
+      'plugin:react/recommended',
+      'prettier',
+      'plugin:react/jsx-runtime',
+    ),
+  ),
+  {
+    languageOptions: {
+      ecmaVersion: 12,
+
+      globals: {
+        ...globals.browser,
+      },
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+
+      sourceType: 'module',
+    },
+
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      import: fixupPluginRules(_import),
+      'jsx-a11y': jsxA11Y,
+      react: fixupPluginRules(react),
+      'sort-keys-fix': sortKeysFix,
+      'typescript-sort-keys': typescriptSortKeys,
+    },
+
+    rules: {
+      'sort-keys-fix/sort-keys-fix': 'error',
+      'typescript-sort-keys/interface': 'error',
+      'typescript-sort-keys/string-enum': 'error',
+    },
+
+    settings: {
+      react: {
+        version: '18.1.0',
+      },
+    },
+  },
+];

package.json

@@ -21,8 +21,8 @@
     "cypress:runner": "start-server-and-test start http://localhost:4444 cypress:record",
     "cypress:test": "start-server-and-test start http://localhost:4444 cypress",
     "cypress:quiet": "cypress run --quiet --headless",
-    "eslint": "eslint src/**/*.{tsx,ts}",
-    "fix-js": "eslint src/**/*.{tsx,ts} --fix",
+    "eslint": "eslint src/**/*.{tsx,ts} --no-warn-ignored",
+    "fix-js": "eslint src/**/*.{tsx,ts} --fix --no-warn-ignored",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:all": "pnpm eslint && pnpm lint:css && pnpm lint",
@@ -67,6 +67,9 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@emotion/babel-plugin": "^11.13.5",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.19.0",
     "@jest/types": "^29.6.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-buble": "^1.0.3",
@@ -108,6 +111,7 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-typescript-sort-keys": "^3.3.0",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
     "intersection-observer": "^0.12.2",
     "jsdom": "^26.0.0",