SAP · Lukas742 · May 22, 2025 · May 21, 2025 · May 21, 2025
@@ -2,8 +2,6 @@ import { addons } from '@storybook/manager-api';
 import { Fiori4ReactTheme } from './theme';
 
 addons.setConfig({
-  //todo: check error
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   theme: Fiori4ReactTheme,
   /**
    * show story component as full screen

@@ -32,9 +32,9 @@ const preview: Preview = {
 
       useEffect(() => {
         if (language === 'local') {
-          setLanguage(null);
+          void setLanguage(null);
         } else {
-          setLanguage(language);
+          void setLanguage(language);
         }
       }, [language]);
 
@@ -48,11 +48,11 @@ const preview: Preview = {
 
       useEffect(() => {
         document.querySelector('html').setAttribute('dir', direction);
-        applyDirection();
+        void applyDirection();
       }, [direction]);
 
       useEffect(() => {
-        setTheme(theme);
+        void setTheme(theme);
       }, [theme]);
 
       return (

@@ -139,7 +139,7 @@ export const ThemeableCSSVars = () => {
           onChange={(e) => {
             const theme = e.detail.selectedOption.dataset.value;
             setCurrentTheme(theme);
-            setTheme(theme);
+            void setTheme(theme);
           }}
         >
           {MAPPED_THEMES.map(({ title, value }) => (

@@ -1,5 +1,5 @@
-// @ts-check
-
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
 import eslint from '@eslint/js';
 import importPlugin from 'eslint-plugin-import';
 import noOnlyTests from 'eslint-plugin-no-only-tests';
@@ -24,16 +24,17 @@ const ignorePatterns = {
     'packages/main/src/generated',
     'packages/cypress-commands/dist',
     '**/generated',
-    '**/scripts',
-    '**/shared',
-    '**/examples',
-    '**/templates',
     '**/*.module.css.ts',
     '.yarn',
+    '.out/**',
+    '**/out/**',
+    '**/examples',
+    '**/templates',
   ],
 };
 
 const config = tseslint.config(
+  includeIgnoreFile(fileURLToPath(new URL('.gitignore', import.meta.url))),
   ignorePatterns,
   eslint.configs.recommended,
   // typescript-eslint shared configs
@@ -249,16 +250,11 @@ const config = tseslint.config(
   },
 
   {
-    files: ['packages/cli/**/*, scripts/**/*', '.github/**/*', 'config/**/*'],
+    files: ['packages/cli/**/*', 'scripts/**/*', '.github/**/*', 'config/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,
       },
-      parserOptions: {
-        projectService: {
-          allowDefaultProject: ['config/*.js', '.github/*.mjs'],
-        },
-      },
     },
   },
 
@@ -268,6 +264,7 @@ const config = tseslint.config(
       '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/no-unsafe-call': 'off',
       '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
     },
   },

@@ -19,7 +19,7 @@
     "clean": "tsc --build --clean && tsc --build tsconfig.build.json --clean && rimraf temp .out && lerna run clean",
     "clean:remove-modules": "yarn clean && rimraf node_modules",
     "prettier:all": "prettier --write --config ./prettier.config.js \"**/*\"",
-    "lint": "eslint packages",
+    "lint": "eslint .",
     "lerna:version-dryrun": "lerna version --conventional-graduate --no-git-tag-version --no-push",
     "wrappers:main": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
     "wrappers:fiori": "node packages/cli/dist/bin/index.js create-wrappers --packageName @ui5/webcomponents-fiori --out ./packages/main/src/webComponents --additionalComponentNote 'This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)'",
@@ -61,6 +61,7 @@
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
     "@cypress/code-coverage": "3.14.2",
+    "@eslint/compat": "1.2.9",
     "@eslint/js": "9.27.0",
     "@semantic-release/github": "11.0.2",
     "@testing-library/cypress": "10.0.3",
@@ -83,7 +84,7 @@
     "eslint-plugin-no-only-tests": "3.3.0",
     "eslint-plugin-prettier": "5.4.0",
     "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "beta",
+    "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-storybook": "0.12.0",
     "glob": "11.0.2",
     "globals": "16.1.0",

@@ -9,11 +9,10 @@ const __dirname = path.dirname(__filename);
 
 const transformerDir = path.resolve(__dirname, 'transforms');
 
+// eslint-disable-next-line @typescript-eslint/require-await
 export default async function runCodemod(transform: string, inputDir: string, useTypeScript: boolean) {
   if (!SUPPORTED_TRANSFORMERS.includes(transform)) {
-    // eslint-disable-next-line no-console
     console.error('Invalid transform choice, pick one of:');
-    // eslint-disable-next-line no-console
     console.error(SUPPORTED_TRANSFORMERS.map((x) => '- ' + x).join('\n'));
     process.exit(1);
   }
@@ -32,7 +31,6 @@ export default async function runCodemod(transform: string, inputDir: string, us
 
   jscodeshiftOptions.push('--ignore-pattern=**/node_modules/**');
 
-  // eslint-disable-next-line no-console
   console.log(`Executing 'npx jscodeshift ${jscodeshiftOptions.join(' ')} ${inputDir}'`);
   childProcess.spawnSync('npx', ['jscodeshift', ...jscodeshiftOptions, inputDir], {
     stdio: 'inherit',

@@ -1,4 +1,6 @@
-import type { API, ASTPath, Collection, FileInfo, JSCodeshift, JSXElement, Options } from 'jscodeshift';
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-require-imports, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access,import/order */
+
+import type { API, ASTPath, Collection, FileInfo, JSCodeshift, JSXElement } from 'jscodeshift';
 
 const config = require('./codemodConfig.json');
 
@@ -70,7 +72,7 @@ function extractValueFromProp(
   return null;
 }
 
-export default function transform(file: FileInfo, api: API, options?: Options): string | undefined {
+export default function transform(file: FileInfo, api: API): string | undefined {
   const j = api.jscodeshift;
   const root = j(file.source);
 

@@ -12,7 +12,7 @@ export enum RenderingPhase {
 export abstract class AbstractRenderer {
   public readonly phase!: RenderingPhase;
 
-  public prepare(context: WebComponentWrapper) {
+  public prepare(_context: WebComponentWrapper) {
     // optional
   }
   abstract render(context: WebComponentWrapper): string;

@@ -8,7 +8,7 @@ import {
 } from '../../util/formatters.js';
 import { resolveReferenceImports } from '../../util/referenceResolver.js';
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
-import { WebComponentWrapper } from './WebComponentWrapper.js';
+import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
 const loggedTypes = new Set<string>();
 

@@ -2,7 +2,7 @@ import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal.d.ts'
 import dedent from 'dedent';
 import { sinceFilter, snakeCaseToCamelCase, summaryFormatter } from '../../util/formatters.js';
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
-import { WebComponentWrapper } from './WebComponentWrapper.js';
+import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
 export class ComponentRenderer extends AbstractRenderer {
   public phase = RenderingPhase.component;

@@ -3,7 +3,7 @@ import dedent from 'dedent';
 import { mapWebComponentTypeToPrimitive, propDescriptionFormatter, sinceFilter } from '../../util/formatters.js';
 import { resolveReferenceImports } from '../../util/referenceResolver.js';
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
-import { WebComponentWrapper } from './WebComponentWrapper.js';
+import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
 const loggedTypes = new Set<string>();
 

@@ -1,6 +1,6 @@
 import dedent from 'dedent';
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
-import { WebComponentWrapper } from './WebComponentWrapper.js';
+import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
 export class ExportsRenderer extends AbstractRenderer {
   public phase = RenderingPhase.exports;

@@ -1,6 +1,6 @@
 import dedent from 'dedent';
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
-import { WebComponentWrapper } from './WebComponentWrapper.js';
+import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
 function sortAndMergeMembers(members: Set<string>) {
   return Array.from(members)
@@ -38,7 +38,7 @@ export class ImportsRenderer extends AbstractRenderer {
           regularImports += `{ ${sortAndMergeMembers(config.named)} }`;
         }
 
-        let imports = [];
+        const imports = [];
         if (regularImports.length > 0) {
           imports.push(`import ${regularImports} from '${module}';`);
         }

@@ -8,7 +8,7 @@ import {
 } from '../../util/formatters.js';
 import { resolveReferenceImports } from '../../util/referenceResolver.js';
 import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
-import { WebComponentWrapper } from './WebComponentWrapper.js';
+import type { WebComponentWrapper } from './WebComponentWrapper.js';
 
 export class PropTypesRenderer extends AbstractRenderer {
   public phase = RenderingPhase.props;

@@ -1,4 +1,5 @@
-import { AbstractRenderer, RenderingPhase } from './AbstractRenderer.js';
+import type { AbstractRenderer } from './AbstractRenderer.js';
+import { RenderingPhase } from './AbstractRenderer.js';
 
 interface ImportConfig {
   default: string | null;

@@ -1,6 +1,6 @@
-import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal.d.ts';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
+import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types-internal.d.ts';
 import { setGlobalTagNameMap } from '../../util/formatters.js';
 import { recursiveManifestResolver } from '../../util/recursiveManifestResolver.js';
 import { AttributesRenderer } from './AttributesRenderer.js';

@@ -3,6 +3,7 @@ import { rename, readdir, writeFile } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+// eslint-disable-next-line import/default
 import prettier from 'prettier';
 import prettierConfig from '../../../prettier.config.js';
 

@@ -102,7 +102,7 @@ const kitchenSinkArgs = {
       disableFilters: true,
       disableSortBy: true,
       Cell: (instance) => {
-        const { cell, row, webComponentsReactProperties } = instance;
+        const { _cell, _row, webComponentsReactProperties } = instance;
         const { loading, showOverlay } = webComponentsReactProperties;
         // disable buttons if overlay is active or the table is loading, to prevent focus
         const disabled = loading || showOverlay;

@@ -14,6 +14,13 @@ const options = {
 
 const { values } = parseArgs({ options });
 
+if (typeof values.directory !== 'string') {
+  throw new Error('Expected --directory to be a string');
+}
+if (typeof values.basePath !== 'string') {
+  throw new Error('Expected --basePath to be a string');
+}
+
 const storybookDir = resolve(process.cwd(), values.directory);
 const stories = readFileSync(resolve(storybookDir, 'index.json'), 'utf-8');
 const storiesJson = JSON.parse(stories);
@@ -26,7 +33,7 @@ const docs = Object.values(storiesJson.entries)
     return `?path=/docs/${story.id}`;
   });
 
-const lastModified = new Date().toISOString().replace(/T[\d:\.]+Z/, '');
+const lastModified = new Date().toISOString().replace(/T[\d:.]+Z/, '');
 let sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n`;
 sitemap += `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n`;
 sitemap += `    <url>\n`;

@@ -1,8 +1,9 @@
 import { writeFileSync } from 'fs';
-import ThemingParameters from '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/variables.json' with { type: 'json' };
-import PATHS from '../config/paths.js';
 import path from 'path';
+import ThemingParameters from '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/variables.json' with { type: 'json' };
+// eslint-disable-next-line import/default
 import prettier from 'prettier';
+import PATHS from '../config/paths.js';
 import prettierConfig from '../prettier.config.js';
 
 let fileContent = `/* eslint-disable camelcase */

@@ -29,6 +29,6 @@ export default VersionInfo;
   await fs.writeFile('src/generated/VersionInfo.ts', fileContent);
 };
 
-generate().then(() => {
+void generate().then(() => {
   console.log('Version info file generated.');
 });
@@ -1,6 +1,6 @@
-import versionInfo from '@ui5/webcomponents-base/dist/generated/VersionInfo.js';
 import fs from 'node:fs';
-import path, { basename } from 'node:path';
+import path from 'node:path';
+import versionInfo from '@ui5/webcomponents-base/dist/generated/VersionInfo.js';
 
 // patched version of: import scopeVariables from '@ui5/webcomponents-tools/lib/css-processors/scope-variables.mjs';
 function scopeVariables(cssText, packageJSON) {

@@ -27,8 +27,11 @@
     },
     {
       "path": "./.storybook/tsconfig.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
     }
   ],
-  "files": ["vite.config.ts", "types.d.ts", "prettier.config.js"],
-  "include": [".storybook", "docs", "config"]
+  "files": ["vite.config.ts", "types.d.ts"],
+  "include": ["docs"]
 }
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "allowJs": true
+  },
+  "include": ["scripts", "config", ".github"],
+  "files": ["prettier.config.js"]
+}
@@ -4,7 +4,8 @@
     "lib": ["es2022", "dom"],
     "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"],
     "moduleResolution": "Node",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "composite": true
   },
   "include": ["cypress", "**/*.cy.ts", "**/*.cy.tsx", "cypress.config.ts"]
 }