diff --git a/.eslintrc.yml b/.eslintrc.yml index 424118c319a..7e8184400fc 100644 --- a/.eslintrc.yml +++ b/.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' diff --git a/packages/cypress-commands/CommandsAndQueries.tsx b/.storybook/components/CommandsAndQueries.tsx similarity index 100% rename from packages/cypress-commands/CommandsAndQueries.tsx rename to .storybook/components/CommandsAndQueries.tsx diff --git a/.storybook/components/index.ts b/.storybook/components/index.ts index d23a2c05d41..0e534af2725 100644 --- a/.storybook/components/index.ts +++ b/.storybook/components/index.ts @@ -6,3 +6,4 @@ export * from './ProductsTable'; export * from './ProjectTemplate'; export * from './TableOfContent'; export * from './LabelWithWrapping'; +export * from './CommandsAndQueries'; diff --git a/.storybook/utils.ts b/.storybook/utils.ts index e208c0ca86c..ec1f7b77652 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.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 | 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()) - : undefined; + const storyTagsSet = new Set(); + + 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(() => { diff --git a/cypress.config.ts b/cypress.config.ts index cf3008c3a05..1926aa3aea4 100644 --- a/cypress.config.ts +++ b/cypress.config.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({ diff --git a/docs/Formhandling.mdx b/docs/Formhandling.mdx index bdc11338f00..bbc0f63102c 100644 --- a/docs/Formhandling.mdx +++ b/docs/Formhandling.mdx @@ -21,7 +21,7 @@ You can then create a form with UI5 Web Components for React as follows. Also, y Show code ```jsx -import React, { useState } from 'react'; +import { useState } from 'react'; import { ThemeProvider, Form, diff --git a/docs/Welcome.mdx b/docs/Welcome.mdx index 37abfbd943a..cbbc628f8cd 100644 --- a/docs/Welcome.mdx +++ b/docs/Welcome.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'; diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx index 499fa40f68e..1701e505bd5 100644 --- a/docs/knowledge-base/Styling.mdx +++ b/docs/knowledge-base/Styling.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'; diff --git a/package.json b/package.json index 1bc5919c6ff..cf2332f5a68 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/base/src/hooks/useStylesheet.cy.tsx b/packages/base/src/hooks/useStylesheet.cy.tsx index 768080eb2e9..8c1b9dcc9b1 100644 --- a/packages/base/src/hooks/useStylesheet.cy.tsx +++ b/packages/base/src/hooks/useStylesheet.cy.tsx @@ -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 ( diff --git a/packages/base/tsconfig.build.json b/packages/base/tsconfig.build.json new file mode 100644 index 00000000000..087137a4e3c --- /dev/null +++ b/packages/base/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx"] +} diff --git a/packages/base/tsconfig.json b/packages/base/tsconfig.json index fb2958c502b..77ecddb1c36 100644 --- a/packages/base/tsconfig.json +++ b/packages/base/tsconfig.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"] } diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx index 2fff420a1de..4ebe61c6f48 100644 --- a/packages/charts/src/components/LineChart/LineChart.stories.tsx +++ b/packages/charts/src/components/LineChart/LineChart.stories.tsx @@ -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'; diff --git a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx b/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx index 129de7703c2..01df003343f 100644 --- a/packages/charts/src/components/TimelineChart/TimeLineChart.stories.tsx +++ b/packages/charts/src/components/TimelineChart/TimeLineChart.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'; diff --git a/packages/charts/tsconfig.build.json b/packages/charts/tsconfig.build.json new file mode 100644 index 00000000000..0604991aae0 --- /dev/null +++ b/packages/charts/tsconfig.build.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"] +} diff --git a/packages/charts/tsconfig.json b/packages/charts/tsconfig.json index d9595df4b37..3a30b0c87a8 100644 --- a/packages/charts/tsconfig.json +++ b/packages/charts/tsconfig.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"] } diff --git a/packages/cli/tsconfig.build.json b/packages/cli/tsconfig.build.json new file mode 100644 index 00000000000..fc8520e7376 --- /dev/null +++ b/packages/cli/tsconfig.build.json @@ -0,0 +1,3 @@ +{ + "extends": "./tsconfig.json" +} diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json index d43f5335060..fb2b71c6908 100644 --- a/packages/cli/tsconfig.json +++ b/packages/cli/tsconfig.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 diff --git a/packages/compat/tsconfig.build.json b/packages/compat/tsconfig.build.json new file mode 100644 index 00000000000..0604991aae0 --- /dev/null +++ b/packages/compat/tsconfig.build.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"] +} diff --git a/packages/compat/tsconfig.json b/packages/compat/tsconfig.json index f925a869df1..69bb5f8ccbf 100644 --- a/packages/compat/tsconfig.json +++ b/packages/compat/tsconfig.json @@ -1,12 +1,6 @@ { "extends": "../../tsconfig.base.json", "compilerOptions": { - "module": "NodeNext", - "moduleResolution": "NodeNext", - "baseUrl": ".", - "outDir": "./dist", - "declarationDir": "./dist", - "rootDir": "./src", "strict": true, "noImplicitAny": false, "strictNullChecks": false, @@ -14,12 +8,11 @@ }, "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/**/*"] } diff --git a/packages/cypress-commands/Commands.mdx b/packages/cypress-commands/Commands.mdx index 8fab554ead0..7e4ec531a6b 100644 --- a/packages/cypress-commands/Commands.mdx +++ b/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'; @@ -12,7 +11,7 @@ import { CommandsAndQueries } from './CommandsAndQueries.tsx'; Here you can find all available Commands of the `@ui5/webcomponents-cypress-commands` package. file.name === 'src/commands')?.children?.[0]?.children?.[0]?.children ?? []} + api={API.children.find((file) => file.name === 'commands')?.children?.[0]?.children?.[0]?.children ?? []} />