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<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(() => { 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 <summary>Show code</summary> ```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'; <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 /> diff --git a/packages/cypress-commands/Queries.mdx b/packages/cypress-commands/Queries.mdx index 8a26cce225b..0ff9e874cc4 100644 --- a/packages/cypress-commands/Queries.mdx +++ b/packages/cypress-commands/Queries.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 /> diff --git a/packages/cypress-commands/tsconfig.build.json b/packages/cypress-commands/tsconfig.build.json new file mode 100644 index 00000000000..fc8520e7376 --- /dev/null +++ b/packages/cypress-commands/tsconfig.build.json @@ -0,0 +1,3 @@ +{ + "extends": "./tsconfig.json" +} diff --git a/packages/cypress-commands/tsconfig.json b/packages/cypress-commands/tsconfig.json index 42ed5e4e817..8fa7868a413 100644 --- a/packages/cypress-commands/tsconfig.json +++ b/packages/cypress-commands/tsconfig.json @@ -4,10 +4,6 @@ "module": "NodeNext", "moduleResolution": "NodeNext", "noEmitOnError": true, - "baseUrl": ".", - "outDir": "./dist", - "declarationDir": "./dist", - "rootDir": "./src", "types": ["cypress"], "strict": true, "skipLibCheck": true diff --git a/packages/cypress-commands/tsconfig.typedoc.json b/packages/cypress-commands/tsconfig.typedoc.json index c28247523bd..b90fc83e04c 100644 --- a/packages/cypress-commands/tsconfig.typedoc.json +++ b/packages/cypress-commands/tsconfig.typedoc.json @@ -1,7 +1,4 @@ { "extends": "./tsconfig.json", - "compilerOptions": { - "rootDir": "." - }, - "include": ["src", "CommandsAndQueries.tsx"] + "include": ["src"] } diff --git a/packages/main/.babelrc.json b/packages/main/.babelrc.json index 1ddb1355e66..e72ed3c8b69 100644 --- a/packages/main/.babelrc.json +++ b/packages/main/.babelrc.json @@ -48,5 +48,5 @@ ] } }, - "ignore": ["**/*.cy.ts", "**/*.cy.tsx", "**/CodeGen.tsx", "**/*.stories.tsx"] + "ignore": ["dist", "**/*.cy.ts", "**/*.cy.tsx", "**/CodeGen.tsx", "**/*.stories.tsx"] } diff --git a/packages/main/package.json b/packages/main/package.json index 96c30abadfc..5001b157a95 100644 --- a/packages/main/package.json +++ b/packages/main/package.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" diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx index 885010c8f59..ae9a3d02925 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx @@ -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, diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx index af88ed9c7dd..ea01d7c24b2 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.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'; diff --git a/packages/main/src/components/Grid/Grid.stories.tsx b/packages/main/src/components/Grid/Grid.stories.tsx index 045bc5dda11..214f9aa9074 100644 --- a/packages/main/src/components/Grid/Grid.stories.tsx +++ b/packages/main/src/components/Grid/Grid.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; import { Grid } from './index.js'; const meta = { diff --git a/packages/main/src/components/Modals/Modals.stories.tsx b/packages/main/src/components/Modals/Modals.stories.tsx index 1e587894078..a5454027dd0 100644 --- a/packages/main/src/components/Modals/Modals.stories.tsx +++ b/packages/main/src/components/Modals/Modals.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from '@storybook/react'; -import React from 'react'; import { MessageBoxType } from '../../enums/index.js'; import { Bar, Button, MenuItem } from '../../webComponents/index.js'; import { Modals } from './index.js'; diff --git a/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx b/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx index 6a8eaba6abd..2b2d6a4c059 100644 --- a/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx +++ b/packages/main/src/components/SplitterLayout/SplitterLayout.stories.tsx @@ -1,7 +1,7 @@ import { SplitterElementContent } from '@sb/components/SplitterElementContent'; import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Button, FlexBox, Label, SegmentedButton, SegmentedButtonItem, SplitterElement, Text } from '../..'; import { SplitterLayout } from './index.js'; diff --git a/packages/main/src/internal/utils.cy.tsx b/packages/main/src/internal/utils.cy.tsx index e3cfc27f430..a314e41eb95 100644 --- a/packages/main/src/internal/utils.cy.tsx +++ b/packages/main/src/internal/utils.cy.tsx @@ -1,4 +1,4 @@ -import ValueState from '@ui5/webcomponents-base/dist/types/ValueState'; +import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import { expect } from 'chai'; import { Fragment, useRef } from 'react'; import { @@ -15,8 +15,8 @@ import { Title } from '../index.js'; import { useGetHeaderHeight } from '../webComponents/DynamicPage/helpers.js'; -import { flattenFragments } from './utils'; -import type { DynamicPageDomRef } from '@/packages/main/src'; +import type { DynamicPageDomRef } from '../webComponents/DynamicPage/index.js'; +import { flattenFragments } from './utils.js'; import './DynamicPageStickyHeader.css'; describe('utils', function () { diff --git a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx index be56851eac8..7901937d506 100644 --- a/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx +++ b/packages/main/src/webComponents/ColorPalettePopover/ColorPalettePopover.stories.tsx @@ -1,6 +1,6 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import React, { forwardRef, useEffect, useRef, useState } from 'react'; +import { forwardRef, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { Button } from '../Button'; import { ColorPaletteItem } from '../ColorPaletteItem'; diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx index 99933cfead7..a87f826c1fc 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx @@ -4,22 +4,22 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js'; import { spacing } from '@ui5/webcomponents-react-base'; import { useState } from 'react'; -import { FlexBox } from '../../components/FlexBox'; -import { Toolbar } from '../../components/Toolbar'; -import { ToolbarSpacer } from '../../components/ToolbarSpacer'; -import { FlexBoxDirection, ToolbarDesign } from '../../enums'; -import { Text } from '../../webComponents/Text'; -import { Avatar } from '../Avatar'; -import { Button } from '../Button'; -import { Card } from '../Card'; -import { Label } from '../Label'; -import { List } from '../List'; -import { ListItemStandard } from '../ListItemStandard'; -import { RatingIndicator } from '../RatingIndicator'; -import { ShellBar } from '../ShellBar'; -import { Title } from '../Title'; -import { FlexibleColumnLayout } from './index'; -import { CardHeader } from '@ui5/webcomponents-react'; +import { FlexBox } from '../../components/FlexBox/index.js'; +import { Toolbar } from '../../components/Toolbar/index.js'; +import { ToolbarSpacer } from '../../components/ToolbarSpacer/index.js'; +import { FlexBoxDirection, ToolbarDesign } from '../../enums/index.js'; +import { Text } from '../../webComponents/Text/index.js'; +import { Avatar } from '../Avatar/index.js'; +import { Button } from '../Button/index.js'; +import { Card } from '../Card/index.js'; +import { CardHeader } from '../CardHeader/index.js'; +import { Label } from '../Label/index.js'; +import { List } from '../List/index.js'; +import { ListItemStandard } from '../ListItemStandard/index.js'; +import { RatingIndicator } from '../RatingIndicator/index.js'; +import { ShellBar } from '../ShellBar/index.js'; +import { Title } from '../Title/index.js'; +import { FlexibleColumnLayout } from './index.js'; const meta = { title: 'Layouts & Floorplans / FlexibleColumnLayout', diff --git a/packages/main/src/webComponents/Icon/Icon.stories.tsx b/packages/main/src/webComponents/Icon/Icon.stories.tsx index 4dcc316f40a..ad1694f9fa3 100644 --- a/packages/main/src/webComponents/Icon/Icon.stories.tsx +++ b/packages/main/src/webComponents/Icon/Icon.stories.tsx @@ -1,3 +1,4 @@ +// @ts-expect-error: storybook can load json import cem from '@sb/custom-element-manifests/main.json'; import type { Meta, StoryObj } from '@storybook/react'; import employeeIcon from '@ui5/webcomponents-icons/dist/employee.js'; diff --git a/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx b/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx index c2ca8c3e058..60fa57903c8 100644 --- a/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx +++ b/packages/main/src/webComponents/MediaGallery/MediaGallery.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import MediaGalleryLayout from '@ui5/webcomponents-fiori/dist/types/MediaGalleryLayout.js'; import MediaGalleryMenuHorizontalAlign from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuHorizontalAlign.js'; import MediaGalleryMenuVerticalAlign from '@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuVerticalAlign.js'; -import React, { useRef } from 'react'; +import { useRef } from 'react'; import { MediaGalleryItem } from '../MediaGalleryItem/index.js'; import { Toast } from '../Toast/index.js'; import { MediaGallery } from './index.js'; diff --git a/packages/main/src/webComponents/Menu/Menu.stories.tsx b/packages/main/src/webComponents/Menu/Menu.stories.tsx index 2f64d5c3f0e..0802400fbaf 100644 --- a/packages/main/src/webComponents/Menu/Menu.stories.tsx +++ b/packages/main/src/webComponents/Menu/Menu.stories.tsx @@ -1,6 +1,6 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { Button } from '../Button/index.js'; import { MenuItem } from '../MenuItem/index.js'; import { Menu } from './index.js'; diff --git a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx index bcb33914cdf..ff4d594840f 100644 --- a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx +++ b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx @@ -1,9 +1,7 @@ -// @ts-expect-error: png's are not typed import image from '@sb/demoImages/Person.png'; import type { Meta, StoryObj } from '@storybook/react'; import addIcon from '@ui5/webcomponents-icons/dist/add.js'; import searchIcon from '@ui5/webcomponents-icons/dist/search.js'; -import React from 'react'; import { Avatar, Icon, Input, ListItemStandard, ShellBarItem } from '../index'; import { ShellBar } from './index'; diff --git a/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx b/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx index 7278bf786f3..dbee41dde6f 100644 --- a/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx +++ b/packages/main/src/webComponents/UploadCollection/UploadCollection.mdx @@ -28,7 +28,7 @@ To use this functionality the `onDrop` handler has to be manually adjusted.<br/> This example shows, how to dynamically render a `UploadCollectionItem` by dropping files into the `UploadCollection`: ```jsx -import React, { useState } from 'react'; +import { useState } from 'react'; import { Icon, Text, UploadCollection, UploadCollectionItem } from '@ui5/webcomponents-react'; export const UploadCollectionComponent = () => { diff --git a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx index 2c3fab1869f..4896912d5bd 100644 --- a/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx +++ b/packages/main/src/webComponents/ViewSettingsDialog/ViewSettingsDialog.stories.tsx @@ -1,6 +1,6 @@ import { isChromatic } from '@sb/utils'; import type { Meta, StoryObj } from '@storybook/react'; -import React, { forwardRef, useEffect, useRef } from 'react'; +import { forwardRef, useEffect, useRef } from 'react'; import { createPortal } from 'react-dom'; import type { ViewSettingsDialogPropTypes } from '../../index'; import { Button, FilterItem, FilterItemOption, SortItem } from '../../index'; diff --git a/packages/main/tsconfig.build.json b/packages/main/tsconfig.build.json new file mode 100644 index 00000000000..6442c817f23 --- /dev/null +++ b/packages/main/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "references": [ + { + "path": "../base/tsconfig.build.json" + } + ], + "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"] +} diff --git a/packages/main/tsconfig.json b/packages/main/tsconfig.json index 4d627c0a456..b0314282d66 100644 --- a/packages/main/tsconfig.json +++ b/packages/main/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, @@ -15,9 +9,8 @@ }, "references": [ { - "path": "../base" + "path": "../base/tsconfig.json" } ], - "include": ["src/**/*"], - "exclude": ["node_modules", "**/*.cy.ts", "**/*.cy.tsx", "**/*.stories.tsx"] + "include": ["src"] } diff --git a/tsconfig.base.json b/tsconfig.base.json index ee735594d67..51bb3f1c522 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -1,21 +1,21 @@ { "compilerOptions": { - "module": "esnext", + "module": "nodenext", + "moduleResolution": "nodenext", "target": "ES2021", "lib": ["ES2022", "dom"], "jsx": "react-jsx", - "baseUrl": ".", - "rootDir": ".", + "baseUrl": "${configDir}/src", + "rootDir": "${configDir}/src", "composite": true, "paths": { + "@/*": ["./*"], "@sb/*": ["./.storybook/*"], "@ui5/webcomponents-cypress-commands": ["./packages/cypress-commands/src/index.ts"], "@ui5/webcomponents-react": ["./packages/main/src/index.ts"], "@ui5/webcomponents-react-base": ["./packages/base/src/index.ts"], - "@ui5/webcomponents-react-charts": ["./packages/charts/src/index.ts"], - "@ui5/webcomponents-react/*": ["./packages/main/src/*"] + "@ui5/webcomponents-react-charts": ["./packages/charts/src/index.ts"] }, - "moduleResolution": "node", "forceConsistentCasingInFileNames": true, "strict": false, "allowSyntheticDefaultImports": true, @@ -24,6 +24,8 @@ "esModuleInterop": true, "resolveJsonModule": true, "declaration": true, - "skipLibCheck": true + "skipLibCheck": true, + "outDir": "${configDir}/dist", + "declarationDir": "${configDir}/dist" } } diff --git a/tsconfig.build.json b/tsconfig.build.json new file mode 100644 index 00000000000..7b79d30c347 --- /dev/null +++ b/tsconfig.build.json @@ -0,0 +1,24 @@ +{ + "extends": "./tsconfig.base.json", + "references": [ + { + "path": "./packages/base/tsconfig.build.json" + }, + { + "path": "./packages/main/tsconfig.build.json" + }, + { + "path": "./packages/charts/tsconfig.build.json" + }, + { + "path": "./packages/cypress-commands/tsconfig.build.json" + }, + { + "path": "./packages/cli/tsconfig.build.json" + }, + { + "path": "./packages/compat/tsconfig.build.json" + } + ], + "files": [] +} diff --git a/tsconfig.json b/tsconfig.json index 0e71aac30ef..4485c146700 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,23 +2,26 @@ "extends": "./tsconfig.base.json", "references": [ { - "path": "./packages/base" + "path": "./packages/base/tsconfig.json" }, { - "path": "./packages/main" + "path": "./packages/main/tsconfig.json" }, { - "path": "./packages/charts" + "path": "./packages/charts/tsconfig.json" }, { - "path": "./packages/cypress-commands" + "path": "./packages/cypress-commands/tsconfig.json" }, { - "path": "./packages/cli" + "path": "./packages/cli/tsconfig.json" }, { - "path": "./packages/compat" + "path": "./packages/compat/tsconfig.json" + }, + { + "path": "./tsconfig.spec.json" } ], - "files": [] + "files": ["vite.config.ts", ".storybook", "docs", "types.d.ts"] } diff --git a/tsconfig.node.json b/tsconfig.node.json deleted file mode 100644 index e2e4ab42447..00000000000 --- a/tsconfig.node.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "./tsconfig.base.json", - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "Node", - "allowSyntheticDefaultImports": true, - "jsx": "react-jsx" - }, - "include": [ - "vite.config.ts", - ".storybook", - "docs", - "packages/**/*.stories.tsx", - "packages/cypress-commands/CommandsAndQueries.tsx" - ] -} diff --git a/tsconfig.spec.json b/tsconfig.spec.json index 555caf318d4..1f2a528e3db 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -4,19 +4,7 @@ "lib": ["es2022", "dom"], "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"], "moduleResolution": "Node", - "jsx": "react-jsx", - "paths": { - "@/*": ["./*"] - } + "jsx": "react-jsx" }, - "include": [ - "cypress/**/*.ts", - "cypress/**/*.tsx", - "**/*.cy.ts", - "**/*.cy.tsx", - "cypress.config.ts", - "docs/knowledge-base/*.tsx", - "docs/knowledgeBaseExamples/*.tsx", - "vite.config.ts" - ] + "include": ["cypress", "**/*.cy.ts", "**/*.cy.tsx", "cypress.config.ts"] } diff --git a/types.d.ts b/types.d.ts index fdb899939c1..5e225d56803 100644 --- a/types.d.ts +++ b/types.d.ts @@ -1,4 +1,4 @@ -import { ComponentType, Context, Dispatch } from 'react'; +import type { ComponentType, Context, Dispatch } from 'react'; interface UpdateModalStateAction { type: 'set' | 'reset'; @@ -30,3 +30,17 @@ declare module '*.md' { const content: string; export default content; } + +declare module '*.png' { + const content: string; + export default content; +} +declare module '*.jpg' { + const content: string; + export default content; +} + +declare module '*.module.css' { + const content: Record<string, string>; + export default content; +}