feature(components): react playgrounds (modular react architecture) (#228)

* docs(beta-components): remove Component Playground sections from documentation

* auto update snapshots (#220)

Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* refactor(stable-components): remove Component Playground sections from documentation

- Remove ComponentPlayground import statements from all component documentation files
- Delete Playground sections and interactive component examples from badge, button, checkbox, drawer, header, infotext, input, link, navigation-item, navigation, notification, radio, select, switch, tag, textarea, and tooltip component pages

* docs(components): remove unused component imports from documentation

- Remove unused component imports (DBAccordion, DBAccordionItem, DBBadge, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBDivider, DBInput, DBLink, DBNavigation, DBNavigationItem) from 18 component documentation files
- Keep only DBSection import which is actively used in documentation pages
- Reduce import clutter and improve code clarity across component guides

* docs(components): remove unused component imports and configs

- Remove CollapseButton and CollapsibleWrapper imports from accordion, card, custom-select, divider, popover, and section documentation
- Remove PropertiesTable imports from accordion, card, custom-select, divider, popover, and section documentation
- Remove component config imports (accordionConfig, backdropConfig, cardConfig, customSelectConfig, dividerConfig, popoverConfig, sectionConfig, stackConfig) from all affected component pages
- Clean up documentation files to remove references to deprecated Component Playground functionality

* feat(components): add ComponentPlayground system and integrate into documentation

- Create ComponentPlayground component system with interactive controls (CheckboxControl, SelectControl, TextControl)
- Add ComponentPlaygroundWrapper.astro for seamless Astro integration
- Implement dependency-engine.ts for managing component prop dependencies
- Add playground-init.ts and component-registry.ts for initialization and component mapping
- Add PlaygroundDebug.tsx and PreviewArea.tsx for debugging and preview functionality
- Integrate ComponentPlayground into all component documentation pages (badge, button, checkbox, drawer, header, infotext, input, link, navigation, notification, radio, select, switch, tag, textarea, tooltip)
- Update component config files to support playground functionality
- Remove order frontmatter from component documentation pages
- Add status field to drawer component documentation
- Update .gitignore to exclude .kiro directory
- Update DocumentationLayout.astro to support new playground system

* chore: update ComponentPlayground.tsx to work properly with configs

* chore: update package.json

* auto update snapshots (#271)

Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* chore: update all playgrounds

* auto update snapshots (#274)

Co-authored-by: Lea Perchermeier <lea.perchermeier@deutschebahn.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* docs: update CONTRIBUTING.md with environment setup instructions

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nicolas Merget <nicolas.merget@deutschebahn.com>

Author: 3 people

.gitignore

@@ -17,7 +17,8 @@ pnpm-debug.log*
 .DS_Store
 # jetbrains setting folder
 .idea/
-
+# kiro
+.kiro
 **/*/.env
 /playwright-report
 /tests/**/*-win32.png

CONTRIBUTING.md

@@ -6,7 +6,14 @@ We are committed to fostering a welcoming, respectful, and harassment-free envir
 
 ## Prepare
 
-_tbd_
+Get credentials for public usage from [Marketingportal](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/resources/db-theme) and add them to your [`.env` File](./.env) - see [`.env.template`](./.env.template).
+
+```shell
+pnpm install
+# it should run postinstall tasks from @db-ux/db-theme* by default, if not:
+# execute this tasks manually to decode the assets using the previously made setup:
+pnpm run decode-db-theme-assets
+```
 
 ## Start locally
 

content/pages/documentation/components/accordion.mdx

@@ -14,6 +14,7 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
 import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 Accordions group content into collapsible sections to save space and let users reveal details progressively. It is best for optional information and structured content where users do not need to see everything at once.
 
@@ -29,6 +30,14 @@ Accordions group content into collapsible sections to save space and let users r
 
 </DBSection>
 
+<DBSection spacing="small" width="auto">
+
+    ## Playground
+
+    <ComponentPlayground component="accordion" />
+
+</DBSection>
+
 <DBSection spacing="small" width="auto">
 
 ## Usage Hints

content/pages/documentation/components/badge.mdx

@@ -18,7 +18,7 @@ import ResourceCards from '@template/components/ResourceCards/ResourceCards.astr
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
 
-import { badgeConfig } from '@template/configs/badge.config.js';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 - Indicate status or state of an item (e.g. new, error, success)
 - Label or categorize content with a short descriptor
@@ -34,6 +34,14 @@ import { badgeConfig } from '@template/configs/badge.config.js';
 
 <DBSection spacing="small" width="auto">
 
+## Playground
+
+<ComponentPlayground component="badge" />
+
+</DBSection>
+
+<DBSection spacing="small" width="auto">
+
 ## Guidelines
 
 <CollapsibleWrapper collapsedHeight="320px">

content/pages/documentation/components/button.mdx

@@ -18,7 +18,7 @@ import ResourceCards from '@template/components/ResourceCards/ResourceCards.astr
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
 
-import { buttonConfig } from '@template/configs/button.config.js';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 - Trigger an action (e.g., Send, Save, Delete)
 - Indicate that interaction or confirmation is expected
@@ -34,6 +34,14 @@ import { buttonConfig } from '@template/configs/button.config.js';
 
 <DBSection spacing="small" width="auto">
 
+## Playground
+
+<ComponentPlayground component="button" />
+
+</DBSection>
+
+<DBSection spacing="small" width="auto">
+
 ## Guidelines
 
 <CollapsibleWrapper collapsedHeight="320px">
@@ -150,6 +158,8 @@ The small button in functional density has a height of 20 px. To meet accessibil
 
 ## FAQ
 
+Have a question about the Button component? We'll answer it and add frequently asked questions to this page.
+
 <QuestionForm componentName="Button" />
 
 </DBSection>

content/pages/documentation/components/card.mdx

@@ -14,6 +14,7 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
 import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 Cards group related content into a contained surface to improve scanning and create clear visual structure. They can be static for content grouping or interactive as an entry point to deeper content, but should stay simple and consistent.
 
@@ -29,6 +30,14 @@ Cards group related content into a contained surface to improve scanning and cre
 
 </DBSection>
 
+<DBSection spacing="small" width="auto">
+
+    ## Playground
+
+    <ComponentPlayground component="card" />
+
+</DBSection>
+
 <DBSection spacing="small" width="auto">
 
 ## Usage Hints
@@ -124,6 +133,8 @@ If the card is interactive, it must be keyboard reachable and expose correct sem
 
 ## FAQ
 
+Have a question about the card component? We'll answer it and add frequently asked questions to this page.
+
 <QuestionForm componentName="Card" />
 
 </DBSection>

content/pages/documentation/components/checkbox.mdx

@@ -18,7 +18,7 @@ import ResourceCards from '@template/components/ResourceCards/ResourceCards.astr
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
 
-import { checkboxConfig } from '@template/configs/checkbox.config.js';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 - Select multiple options from a list (e.g., notification channels)
 - Confirm consent or acknowledgment (e.g., accept terms)
@@ -34,6 +34,14 @@ import { checkboxConfig } from '@template/configs/checkbox.config.js';
 
 <DBSection spacing="small" width="auto">
 
+## Playground
+
+<ComponentPlayground component="checkbox" />
+
+</DBSection>
+
+<DBSection spacing="small" width="auto">
+
 ## Guidelines
 
 <CollapsibleWrapper collapsedHeight="320px">

content/pages/documentation/components/custom-select.mdx

@@ -14,6 +14,7 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
 import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 Custom Select is an advanced dropdown for choosing one or multiple predefined options with support for search, grouping, and showing selected values. Use it when a basic select is not sufficient due to option volume, selection complexity, or the need for better scanning and management of chosen items.
 
@@ -29,6 +30,14 @@ Custom Select is an advanced dropdown for choosing one or multiple predefined op
 
 </DBSection>
 
+<DBSection spacing="small" width="auto">
+
+    ## Playground
+
+    <ComponentPlayground component="customSelect" />
+
+</DBSection>
+
 <DBSection spacing="small" width="auto">
 
 ## Usage Hints
@@ -124,6 +133,8 @@ Enable search when the list is long or users know what they want. Use grouping o
 
 ## FAQ
 
+Have a question about the custom select component? We'll answer it and add frequently asked questions to this page.
+
 <QuestionForm componentName="Custom Select" />
 
 </DBSection>

content/pages/documentation/components/divider.mdx

@@ -14,6 +14,7 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
 import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 Divider is a thin horizontal or vertical line that separates UI elements into logical sections and improves layout clarity. It should be used sparingly and together with spacing and hierarchy to avoid visual clutter.
 
@@ -29,6 +30,14 @@ Divider is a thin horizontal or vertical line that separates UI elements into lo
 
 </DBSection>
 
+<DBSection spacing="small" width="auto">
+
+    ## Playground
+
+    <ComponentPlayground component="divider" />
+
+</DBSection>
+
 <DBSection spacing="small" width="auto">
 
 ## Usage Hints
@@ -90,6 +99,8 @@ Align dividers to the content container and grid. Avoid partial or "floating" di
 
 ## FAQ
 
+Have a question about the divider component? We'll answer it and add frequently asked questions to this page.
+
 <QuestionForm componentName="Divider" />
 
 </DBSection>

content/pages/documentation/components/drawer.mdx

@@ -6,8 +6,8 @@ headline: 'Drawer'
 title: 'Drawer'
 description: 'Drawer is a sliding panel that appears from the side, top, or bottom to show supplemental content or lightweight interactions while keeping the user in context. It is ideal for optional details and simple tasks, and must always be easy to dismiss.'
 align: start
-status: 'stable'
 toc: true
+status: 'stable'
 ---
 
 import { DBSection } from '@db-ux/react-core-components';
@@ -17,7 +17,7 @@ import GuidelineExample from '@template/components/GuidelineExample/GuidelineExa
 import ResourceCards from '@template/components/ResourceCards/ResourceCards.astro';
 import TeaserCard from '@template/components/TeaserCard/TeaserCard.astro';
 import QuestionForm from '@template/components/QuestionForm/QuestionForm.astro';
-import { drawerConfig } from '@template/configs/drawer.config.js';
+import ComponentPlayground from '@template/components/ComponentPlayground/ComponentPlaygroundWrapper.astro';
 
 - Show additional details or secondary information without leaving the current page
 - Provide simple, optional form inputs or quick edits in context
@@ -27,7 +27,42 @@ import { drawerConfig } from '@template/configs/drawer.config.js';
 
 ## Resources
 
-<ResourceCards path="?path=/docs/components-dbdrawer-density--docs" />
+<ResourceCards
+	resources={[
+		{
+			title: 'React',
+			description: 'TBD',
+			url: '#',
+			icon: 'react',
+		},
+		{
+			title: 'Vue',
+			description: 'TBD',
+			url: '#',
+			icon: 'vue',
+		},
+		{
+			title: 'Angular',
+			description: 'TBD',
+			url: '#',
+			icon: 'angular',
+		},
+		{
+			title: 'Web Components',
+			description: 'TBD',
+			url: '#',
+			icon: 'html5',
+		},
+	]}
+/>
+
+</DBSection>
+
+<DBSection spacing="small" width="auto">
+
+## Playground
+
+<ComponentPlayground component="drawer" />
 
 </DBSection>
 
@@ -115,6 +150,8 @@ Always provide a way to close the drawer, such as clicking outside the drawer ar
 
 ## FAQ
 
+Have a question about the Drawer component? We'll answer it and add frequently asked questions to this page.
+
 <QuestionForm componentName="Drawer" />
 
 </DBSection>