chore: update ts config structure (#6008)

Author: MarcusNotheis

.eslintrc.yml

@@ -41,17 +41,16 @@ rules:
         order: asc
         caseInsensitive: true
   import/no-duplicates: 'error'
-  import/no-unresolved: 'error'
+  import/no-unresolved: 'off'
 overrides:
   # add config for all TypeScript files
   - files:
       - '*.ts'
       - '*.tsx'
     parserOptions:
-      project:
-        - './tsconfig.spec.json'
-        - './tsconfig.node.json'
-        - './packages/*/tsconfig.json'
+      EXPERIMENTAL_useProjectService:
+        # TODO https://github.com/typescript-eslint/typescript-eslint/issues/9450
+        maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 1000
     plugins:
       - '@typescript-eslint'
     extends:
@@ -124,7 +123,6 @@ overrides:
     rules:
       '@typescript-eslint/no-empty-function': 'off'
       'import/order': 'warn'
-      'import/no-unresolved': 'off'
       'react/no-unescaped-entities': 'off'
       '@typescript-eslint/unbound-method': 'warn'
       'react/display-name': 'off'

packages/cypress-commands/CommandsAndQueries.tsx renamed to .storybook/components/CommandsAndQueries.tsx

@@ -6,3 +6,4 @@ export * from './ProductsTable';
 export * from './ProjectTemplate';
 export * from './TableOfContent';
 export * from './LabelWithWrapping';
+export * from './CommandsAndQueries';

.storybook/components/index.ts

@@ -1,7 +1,10 @@
 import { DocsContext } from '@storybook/blocks';
 import { useContext, useMemo } from 'react';
+// @ts-expect-error: storybook can handle this
 import cemFiori from './custom-element-manifests/fiori.json';
+// @ts-expect-error: storybook can handle this
 import cemMain from './custom-element-manifests/main.json';
+
 export const isChromatic = process.env.STORYBOOK_ENV === 'chromatic';
 
 export const MAPPED_THEMES = [
@@ -23,19 +26,22 @@ export const excludePropsForAbstract = ['className', 'style'];
 
 export function useGetCem() {
   const docsContext = useContext(DocsContext);
+  // @ts-expect-error: private but existing
   const { attachedCSFFiles } = docsContext;
 
-  const storyTagsSet: Set<string> | undefined = attachedCSFFiles?.size
-    ? Array.from(attachedCSFFiles).reduce((acc, cur) => {
-        const tags: string[] | undefined = cur?.meta?.tags;
-        if (tags?.length) {
-          tags.forEach((tag) => {
-            acc.add(tag);
-          });
-        }
-        return acc;
-      }, new Set<string>())
-    : undefined;
+  const storyTagsSet = new Set<string>();
+
+  if (attachedCSFFiles?.size) {
+    Array.from(attachedCSFFiles).forEach((cur) => {
+      // @ts-expect-error: private but existing
+      const tags: string[] | undefined = cur?.meta?.tags;
+      if (tags?.length) {
+        tags.forEach((tag) => {
+          storyTagsSet.add(tag);
+        });
+      }
+    });
+  }
 
   const storyTags = storyTagsSet?.size ? Array.from(storyTagsSet) : [];
   const packageAnnotation = storyTags?.find((tag) => tag.startsWith('package:'));
@@ -46,6 +52,7 @@ export function useGetCem() {
       return cemFiori;
   }
 }
+
 const replaceSubComps = {
   ListItemBase: ['ListItemStandard', 'ListItemCustom', 'ListItemGroup'],
   InputSuggestionItem: ['SuggestionItem', 'SuggestionGroupItem'],
@@ -83,6 +90,7 @@ function findSubComponentsRecursively(moduleName: string, cem: any): string[] {
 
   return Array.from(subComponentsSet);
 }
+
 export function useGetSubComponentsOfModule(moduleName: string) {
   const cem = useGetCem(); // Assuming useGetCem() is defined elsewhere
   return useMemo(() => {

.storybook/utils.ts

@@ -1,4 +1,4 @@
-import codeCoverageTask from '@cypress/code-coverage/task';
+import codeCoverageTask from '@cypress/code-coverage/task.js';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({

cypress.config.ts

@@ -21,7 +21,7 @@ You can then create a form with UI5 Web Components for React as follows. Also, y
     <summary>Show code</summary>
 
 ```jsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   ThemeProvider,
   Form,

docs/Formhandling.mdx

@@ -148,7 +148,7 @@ You can find all available interfaces of the main package [here](https://github.
 Small app with a popover opened by clicking a button including type declarations:
 
 ```tsx
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import type { ButtonPropTypes, PopoverDomRef, PopoverPropTypes } from '@ui5/webcomponents-react';
 import { ThemeProvider, Button, Popover } from '@ui5/webcomponents-react';
 

docs/Welcome.mdx

@@ -77,7 +77,6 @@ In order to reuse our central styling approach, you can import the `ThemingParam
 You can then create a custom component by following this recipe:
 
 ```tsx
-import React from 'react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import './MyCustomElement.css';
 

docs/knowledge-base/Styling.mdx

@@ -10,14 +10,14 @@
     "start:watcher": "lerna run watch:css",
     "start:storybook": "storybook dev -p 6006",
     "setup": "lerna run build:i18n && lerna run build:css && lerna run build:css-bundle && rimraf node_modules/@types/mocha",
-    "build": "yarn setup && tsc --build && lerna run build:client && lerna run build:wrapper && lerna run build:ssr",
+    "build": "yarn setup && tsc --build tsconfig.build.json && lerna run build:client && lerna run build:wrapper && lerna run build:ssr",
     "build:storybook": "lerna run build:i18n && yarn create-cypress-commands-docs && storybook build -o .out",
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",
     "test:cypress": "cypress run --component --browser chrome",
     "test:cypress:open": "CYPRESS_COVERAGE=false cypress open --component --browser chrome",
     "test": "yarn test:prepare && yarn test:cypress",
-    "clean": "tsc --build --clean && rimraf temp .out && lerna run clean",
+    "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.cjs \"packages/**/*.{js,jsx,ts,tsx,mdx,json,md}\"",
     "lint": "eslint packages --ext .ts,.tsx",

package.json

@@ -1,9 +1,10 @@
+import { ObjectStatus } from '@ui5/webcomponents-react';
 import { useReducer } from 'react';
-import { ObjectStatus } from '@/packages/main/src';
 
 interface CondRenderCompProps {
   testid?: string;
 }
+
 const CondRenderComp = ({ testid }: CondRenderCompProps) => {
   const [visible, toggle] = useReducer((prev) => !prev, true);
   return (

packages/base/src/hooks/useStylesheet.cy.tsx

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx"]
+}

packages/base/tsconfig.build.json

@@ -1,15 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
     "strict": true,
-    "noImplicitAny": false,
-    "rootDir": "./src"
+    "noImplicitAny": false
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx"]
+  "include": ["src"]
 }

packages/base/tsconfig.json

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps.js';
 import { LineChart } from './LineChart.js';
 

packages/charts/src/components/LineChart/LineChart.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import React from 'react';
 import { Invention, TimingFigure } from './examples/Annotations.js';
 import { dummyDataSet, dummyDiscreteDataSet, inventionDataset, schedulingEDFData } from './examples/Dataset.js';
 import { TimelineChart } from './TimelineChart.js';

packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "references": [
+    {
+      "path": "../base/tsconfig.build.json"
+    },
+    {
+      "path": "../main/tsconfig.build.json"
+    }
+  ],
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+}

packages/charts/tsconfig.build.json

@@ -1,21 +1,12 @@
 {
   "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src"
-  },
   "references": [
     {
-      "path": "../base"
+      "path": "../base/tsconfig.json"
     },
     {
-      "path": "../main"
+      "path": "../main/tsconfig.json"
     }
   ],
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+  "include": ["src"]
 }

packages/charts/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}

packages/cli/tsconfig.build.json

@@ -3,13 +3,7 @@
   "compilerOptions": {
     "target": "es2022",
     "lib": ["ES2023", "dom"],
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
     "noEmitOnError": true,
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "strict": true,
     "types": ["node"],
     "skipLibCheck": true

packages/cli/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "references": [
+    {
+      "path": "../base/tsconfig.build.json"
+    },
+    {
+      "path": "../main/tsconfig.build.json"
+    }
+  ],
+  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+}

packages/compat/tsconfig.build.json

@@ -1,25 +1,18 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "strict": true,
     "noImplicitAny": false,
     "strictNullChecks": false,
     "isolatedModules": true
   },
   "references": [
     {
-      "path": "../base"
+      "path": "../base/tsconfig.json"
     },
     {
-      "path": "../main"
+      "path": "../main/tsconfig.json"
     }
   ],
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"]
+  "include": ["src/**/*"]
 }

packages/compat/tsconfig.json

@@ -1,7 +1,6 @@
-import { Footer, TableOfContent } from '@sb/components';
+import { CommandsAndQueries, Footer, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/addon-docs';
 import API from './api.json';
-import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 
 <Meta title="Commands" />
 
@@ -12,7 +11,7 @@ import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 Here you can find all available Commands of the `@ui5/webcomponents-cypress-commands` package.
 
 <CommandsAndQueries
-  api={API.children.find((file) => file.name === 'src/commands')?.children?.[0]?.children?.[0]?.children ?? []}
+  api={API.children.find((file) => file.name === 'commands')?.children?.[0]?.children?.[0]?.children ?? []}
 />
 
 <Footer />

packages/cypress-commands/Commands.mdx

@@ -1,7 +1,6 @@
-import { Footer, TableOfContent } from '@sb/components';
+import { CommandsAndQueries, Footer, TableOfContent } from '@sb/components';
 import { Meta } from '@storybook/addon-docs';
 import API from './api.json';
-import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 
 <Meta title="Queries" />
 
@@ -12,7 +11,7 @@ import { CommandsAndQueries } from './CommandsAndQueries.tsx';
 Here you can find all available Queries of the `@ui5/webcomponents-cypress-commands` package.
 
 <CommandsAndQueries
-  api={API.children.find((file) => file.name === 'src/queries')?.children?.[0]?.children?.[0]?.children ?? []}
+  api={API.children.find((file) => file.name === 'queries')?.children?.[0]?.children?.[0]?.children ?? []}
 />
 
 <Footer />

packages/cypress-commands/Queries.mdx

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}

packages/cypress-commands/tsconfig.build.json

@@ -4,10 +4,6 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noEmitOnError": true,
-    "baseUrl": ".",
-    "outDir": "./dist",
-    "declarationDir": "./dist",
-    "rootDir": "./src",
     "types": ["cypress"],
     "strict": true,
     "skipLibCheck": true

packages/cypress-commands/tsconfig.json

@@ -1,7 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "."
-  },
-  "include": ["src", "CommandsAndQueries.tsx"]
+  "include": ["src"]
 }

packages/cypress-commands/tsconfig.typedoc.json

@@ -48,5 +48,5 @@
       ]
     }
   },
-  "ignore": ["**/*.cy.ts", "**/*.cy.tsx", "**/CodeGen.tsx", "**/*.stories.tsx"]
+  "ignore": ["dist", "**/*.cy.ts", "**/*.cy.tsx", "**/CodeGen.tsx", "**/*.stories.tsx"]
 }

packages/main/.babelrc.json

@@ -44,9 +44,9 @@
   "scripts": {
     "clean": "rimraf dist tmp wrappers ssr",
     "build:i18n": "node scripts/generateI18n.mjs",
-    "build:client": "babel src --out-dir dist --extensions .ts,.tsx --env-name client && tsc --declarationDir dist",
-    "build:ssr": "babel src --out-dir ssr --extensions .ts,.tsx --env-name ssr && tsc --declarationDir ssr",
-    "build:wrapper": "babel src --out-dir wrappers --extensions .ts,.tsx --env-name wrapper && tsc --declarationDir wrappers",
+    "build:client": "babel src --out-dir dist --extensions .ts,.tsx --env-name client && tsc --project tsconfig.build.json --declarationDir dist",
+    "build:ssr": "babel src --out-dir ssr --extensions .ts,.tsx --env-name ssr && tsc --project tsconfig.build.json --declarationDir ssr",
+    "build:wrapper": "babel src --out-dir wrappers --extensions .ts,.tsx --env-name wrapper && tsc --project tsconfig.build.json --declarationDir wrappers",
     "build:css": "postcss --base src --dir dist/css src/**/*.css",
     "build:css-bundle": "node ../../config/merge-css-modules.js",
     "watch:css": "yarn build:css --watch"

packages/main/package.json

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/edit.js';
 import '@ui5/webcomponents-icons/dist/settings.js';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -4,7 +4,7 @@ import dataManualSelect from '@sb/mockData/FriendsManualSelect25.json';
 import dataTree from '@sb/mockData/FriendsTree.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import InputType from '@ui5/webcomponents/dist/types/InputType.js';
-import React, { useReducer, useState } from 'react';
+import { useReducer, useState } from 'react';
 import { AnalyticalTableSelectionMode, FlexBoxAlignItems, FlexBoxDirection } from '../../enums';
 import { Button, CheckBox, Input, Label, ToggleButton, Text } from '../../webComponents';
 import { FlexBox } from '../FlexBox';

packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Grid } from './index.js';
 
 const meta = {