feat: add mitosis examples to generate storybook files next to showcase examples

[nmerget]

Proposed changes

The goal of this PR is to centralize all example definitions in Mitosis and automatically generate showcase outputs for all targets (React, Angular, Vue, Patternhub).

The PR provides

• a central example contract (*.examples.meta.ts that represents a typed metadata file for all examples, including identifiers, display names, grouping, and Storybook mappings)
• Mitosis-based showcase generation (created new *.showcase.lite.tsx components that consume the metadata, generate the corresponding React, Angular, and Vue showcase files and ensures a consistent structure across all frameworks)
• Showcase plugin architecture (plugin mechanism that provides the correct showcase component depending on the host context)
• Patternhub routing integration (updated routing so the button component now uses the new generated showcases and example pages)
• Output and build adjustments (correct file extensions and include generated meta files)

Types of changes

• Bugfix (non-breaking change that fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (improvements to existing components or architectural decisions)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Further comments

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/feat-examples-plugins

[changeset-bot]

⚠️ No Changeset found

Latest commit: 141ce91

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

Pull request overview

This PR refactors the showcase architecture to use Mitosis-based examples that can generate both showcase and Storybook files. The key change is moving from JSON-based configuration files to .lite.tsx example files that are compiled to framework-specific code, establishing a single source of truth for component examples across showcases and Storybooks.

Key Changes

• Introduces Mitosis-based showcase architecture with .lite.tsx example files for the Button component
• Adds path alias configuration (@components) across all showcase projects for cleaner imports
• Removes JSON-based configuration (showcases/shared/button.json) in favor of TypeScript example files
• Creates reusable showcase wrapper components for consistent presentation across platforms

Reviewed changes

Copilot reviewed 95 out of 113 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/components/src/components/button/showcase/button.showcase.lite.tsx	New main showcase component for Button using Mitosis
packages/components/src/components/button/examples/*.lite.tsx	Individual example components for each Button variant/property
packages/components/src/components/button/examples/button.examples.meta.ts	Metadata defining all button examples with IDs and grouping
packages/components/src/shared/showcase/*.lite.tsx	Reusable wrapper components for showcase presentation
packages/components/configs/mitosis.showcase.config.cjs	New Mitosis configuration for compiling showcase files
showcases/shared/showcase-plugins.tsx	Plugin system for registering and retrieving showcase components
showcases/*/tsconfig.json	Path alias configuration for @components across all showcases
showcases/*/vite.config.ts	Vite alias configuration for @components
storybooks/react-storybook/src/stories/Variant.stories.tsx	Updated to use actual DBButton component
showcases/patternhub/scripts/generate-docs-mdx.js	Removed old code generation logic
output/*/tsconfig.json	Excludes showcase/example files from compilation
__snapshots__/button/showcase/**/*.yaml	Updated snapshots reflecting reordered examples

[mfranzke]

@michaelmkraus these seem to be middle instead of bottom aligned so some elements are now positioned centered instead of block-end. Is this expected and should have happened like this with this PR ?

[michaelmkraus]

No, that change is not intentional.
The centered vs. block-end alignment in the snapshot looks like an unintended side effect, likely coming from a shared wrapper that DBInput also uses. I’ll double-check the affected CSS.

[michaelmkraus]

Found the relevant CSS and reverted it.

[mfranzke]

I've seen your revert and even also the regenerated screenshots with commit c45938e. Now they are all top-aligned, but some of those seem to have been middle aligned, as still some screenshots show differences to the previous state of those reference screenshots …

[mfranzke]

@michaelmkraus could you please add a description to this PR ? Why we did this change, on the expected outcome and a summary of the changes as well as what we need to do differently (in our processes) afterwards.

[mfranzke]

I've seen your revert and even also the regenerated screenshots with commit c45938e. Now they are all top-aligned, but some of those seem to have been middle aligned, as still some screenshots show differences to the previous state of those reference screenshots …

[mfranzke]

what for do we need this try / catch here ? The commit message only states "fix: issue with version-switcher.tsx".

[michaelmkraus]

I think the try-catch is used to catch errors in the async calls. Right now, the errors are only logged. Later, we should handle the error instead of failing silently.