fix(react-typescript): non event props where missing in ts declaration

[christopherGdynia]

fix: restore TypeScript props on all React wrapper components

Problem

Since 3.0.0-beta.160, all component-specific props (variant, label, size, opened, etc.) are missing from the TypeScript types of every Scale React component. Event handlers like onScaleBlur work correctly, but props like label on <ScaleTextField> produce TS errors.

Root Cause: The @stencil/react-output-target dependency was declared as ^1.1.1, but consumers resolved it to v1.5.1. In that version, StencilReactComponent changed from 2 to 3 type parameters — the automatic prop extraction via Partial<Omit<Element, keyof HTMLElement>> was replaced with an explicit third Props generic that defaults to {}. Since the generated code only passed 2 type parameters, all component-specific props were lost.

Solution

• Upgrade @stencil/react-output-target to ~1.5.1 (pinned to patch range)
• Regenerate React wrappers — the v1.5.1 generator produces 3-parameter declarations with JSX.ComponentName as explicit Props type
• Add a post-build patch to re-export the JSX namespace from dist/components/index.d.ts
• Add type-level regression tests and CI integration

Changed Files

File	Description
packages/components/package.json	Upgraded @stencil/react-output-target from ^1.1.1 to ~1.5.1; added post-build script (node scripts/patch-custom-elements-types.js) to the build command
packages/components/framework-targets.ts	Added required clientModule: '@telekom/scale-components' option to reactOutputTarget() (mandatory in v1.5.x when hydrateModule is set)
packages/components/scripts/patch-custom-elements-types.js	New — Post-build script that appends export type { JSX } from '../types/components' to dist/components/index.d.ts, bridging the gap between where the v1.5.1 generator imports JSX types and where Stencil exports them
packages/components-react/package.json	Upgraded @stencil/react-output-target from ^1.1.1 to ~1.5.1; added test:types script
packages/components-react/src/components.server.ts	Regenerated — all components now use 3-param StencilReactComponent<Element, Events, JSX.Component> instead of 2-param declarations; includes clientModule and properties mappings for SSR
packages/components-react/__tests__/types.test.tsx	New — Type-level regression test (compile-only, not executed) covering 18 representative components with positive and negative (@ts-expect-error) assertions
packages/components-react/tsconfig.test.json	New — TypeScript config for type-checking the test file against the built dist/ output
.github/workflows/build-pr.yml	New job type-check-react — builds Stencil components + React wrappers, then runs test:types on every PR

Verification

# Rebuild and verify types
yarn workspace @telekom/scale-components build
yarn workspace @telekom/scale-components-react build
yarn workspace @telekom/scale-components-react test:types  # ✅ passes

Before fix:

<ScaleTextField label="Name" />  // ❌ TS error: Property 'label' does not exist
<ScaleAlert onScaleBlur={...} /> // ✅ works (events were unaffected)

After fix:

<ScaleTextField label="Name" />  // ✅ compiles
<ScaleAlert variant="informational" opened headline="Test" /> // ✅ compiles
<ScaleAlert nonExistentProp="x" /> // ❌ correctly errors

[Copilot]

Pull request overview

Fixes a regression where generated React wrapper TypeScript types no longer included component-specific props (e.g., label, variant, size) by aligning the repo with @stencil/react-output-target v1.5.x expectations and adding type-level regression checks.

Changes:

• Pin @stencil/react-output-target to ~1.5.1 and update Stencil React output target config (clientModule) to restore correct prop extraction/types.
• Add a post-build patch to re-export JSX from @telekom/scale-components/dist/components so generated wrappers can import it.
• Add compile-only TypeScript regression tests + CI job to ensure wrapper props remain correctly typed.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/components/scripts/patch-custom-elements-types.js	New post-build script to append a JSX type re-export into dist/components/index.d.ts.
packages/components/package.json	Pins output-target version and runs the patch script after stencil build.
packages/components/framework-targets.ts	Adds required clientModule option for Stencil React output target v1.5.x.
packages/components-react/package.json	Pins output-target version and adds test:types script for compile-only type checks.
packages/components-react/src/components.server.ts	Regenerated SSR wrappers/types for the newer output target.
packages/components-react/__tests__/types.test.tsx	New type-level regression tests asserting valid/invalid props on representative components.
packages/components-react/tsconfig.test.json	New TS config for running the type-level regression test against built dist/ typings.
.github/workflows/build-pr.yml	Adds type-check-react job to build + run the type-level regression test on PRs.

Comments suppressed due to low confidence (1)

packages/components/package.json:30

• The JSX re-export patch is only applied in the default build script. build:whitelabel and build:staging also run stencil build but won't run the patch, so those builds may still produce dist/components/index.d.ts without the needed JSX export. Consider applying the patch script to all build variants that generate dist/ outputs.

    "build": "stencil build --docs-readme && node scripts/patch-custom-elements-types.js",
    "build:whitelabel": "WHITELABEL=1 stencil build --docs-readme",
    "build:watch": "stencil build --watch --serve --config stencil-dev.config.ts",
    "build:staging": "stencil build --config stencil-staging.config.ts",
    "zip": "zip -vr telekom-scale-components-$npm_package_version.zip dist/ -x '*.DS_Store' 'dist/collection/**'",

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The file starts with a UTF-8 BOM (U+FEFF). This invisible character can cause noisy diffs and occasional tooling issues; please remove it so the file begins directly with /**.

Suggested change

	/**
	/**

[Copilot]

The header comment mentions the "dist-custom-elements" barrel, but this script patches dist/components/index.d.ts. Please update the comment to match the actual output path being modified to avoid confusion for future maintainers.

Suggested change

	* Post-build script: ensures the dist-custom-elements barrel
	* Post-build script: ensures dist/components/index.d.ts

[Copilot]

components.server.ts is exported via the react-server condition, but the file starts with 'use client';, which forces it to be treated as a client component/module (e.g., in Next.js) and can break server-only usage. This directive should be removed from the server entry file.

Suggested change

'use client';

[Copilot]

This file starts with a UTF-8 BOM (U+FEFF). Please remove it to avoid invisible-character diffs and potential issues with some tooling.

Suggested change

	{
	{

[Copilot]

This file starts with a UTF-8 BOM (U+FEFF). Please remove it to avoid invisible-character diffs and potential issues with some tooling.

Suggested change

	/**
	/**

[Copilot]

Project Prettier config sets singleQuote: true (.prettierrc). To keep consistency with the rest of the TS/TSX codebase, please switch these imports/strings to single quotes.