Refactor input-text stories into focused, snapshot-ready components

[Copilot]

✅ Restructure Input-Text Stories - Complete

Successfully restructured the Input-Text component stories into smaller, more focused examples as requested in the issue.

Changes Made:

• Created new story files:

  • basic.tsx - Simple examples (Label+Value, with error, disabled, and icons with squirrel/home)
  • message-types.tsx - All message types (Info, Error, Warning, Success) [Snapshot]
  • placeholder.tsx - Placeholder examples [Snapshot]
  • disabled.tsx - Disabled state examples [Snapshot]
  • readonly.tsx - Readonly state examples [Snapshot]
  • access-short-key.tsx - Access key and short key examples [Snapshot]
  • hide-label.tsx - Hide-label feature with error and combined fields [Snapshot]
  • Updated hide-msg.tsx - Hide-msg feature with error and combined fields [Snapshot]
  • Kept text-formatter.tsx - Text formatter examples (no changes)
  • Updated smart-button.tsx - Smart button feature with clearer icons (search/check instead of arrows) [Snapshot]
  • Updated expert-slot.tsx - More complex example with badges and icons
  • Kept select-range.tsx - Select range sample (no changes)

• Updated routing configuration:

  • Updated packages/samples/react/src/components/input-text/routes.ts with all new stories

• Updated snapshot test configuration:

  • Updated packages/tools/visual-tests/tests/sample-app.routes.js with appropriate snapshot configurations for marked stories

• Removed shared code:

  • Deleted partials/cases.tsx and partials/variants.tsx to keep examples self-contained and easier to learn

• Validated changes:

  • All stories render correctly in development mode
  • TypeScript compilation passes (excluding pre-existing unrelated issues)
  • Code is properly formatted

Story Structure:

The stories are now organized as follows:

1. basic - Simple examples with icon sample (squirrel/home icons)
2. message-types - All message types [Snapshot]
3. placeholder - Various placeholder examples [Snapshot]
4. disabled - Disabled states [Snapshot]
5. readonly - Readonly states [Snapshot]
6. access-short-key - Keyboard shortcuts [Snapshot]
7. hide-label - Hide-label feature with combinations [Snapshot]
8. hide-msg - Hide-msg feature with combinations [Snapshot]
9. text-formatter - Text formatting examples (IBAN, Currency)
10. smart-button - Smart button with clearer icons (search/check) [Snapshot]
11. expert-slot - Expert slot with complex content
12. select-range - Selection manipulation examples

All snapshot configurations have been added to sample-app.routes.js as required. All examples are now self-contained within their respective files with no shared partials.

Screenshots

Basic story with icon example:

Changes overview (icon example, smart-button icons, and new hide-label story):

• Fixes Input-text in kleinere Stories aufteilen #8873

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Input-text in kleinere Stories aufteilen</issue_title>
<issue_description>Die Storys der Input-Text-Komponente sollen wie folgt neu strukturiert werden:

• Basic
  • einfach (Label und Value)
  • mit Fehlermeldung
  • disabled
• Alle Meldungstypen (Info, Fehler, Warnung, Erfolgreich) [Snapshot]
• Platzhalter [Snapshot]
• Disabled [Snapshot]
• Readonly [Snapshot]
• Access und Short-Key [Snapshot]
• Hide-label mit den vorhandenen Kombinationen (mit Error und combined fields) [Snapshot]
• Text-Formatter-Beispiele
• Smart-Button [Snapshot]
• Expertenslot mit einem komplexeren Beispiel als nur Text
• Select range sample belassen.

Die Snapshot-Tests sollen angepasst werden (packages/tools/visual-tests/tests/sample-app.routes.js). Die Storys sind markiert, welche Snapshots erhalten sollen.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Input-text in kleinere Stories aufteilen #8873

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[laske185]

@copilot The aim of the examples is to make them easy to learn. Therefore, all the necessary data for the story should be contained directly in one file. There should be no partials or shared code. Please remove the following files in the partials subfolder:

• cases.tsx
• variants.tsx
  Duplicate code is acceptable in the examples.

[Copilot]

@copilot The aim of the examples is to make them easy to learn. Therefore, all the necessary data for the story should be contained directly in one file. There should be no partials or shared code. Pl...

Removed the partials folder containing cases.tsx and variants.tsx. All examples are now self-contained within their respective story files. (a6ae2b9)

[github-actions]

🚀 MCP preview deployed to Vercel: https://kolibri-j15yeszda-public-ui-kolibri-mcp.vercel.app

[github-actions]

Netlify Draft Deployment
URL: https://691f0bba6094e6213b26771c--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/projects/kolibri-public-ui/deploys/691f0bba6094e6213b26771c

[laske185]

@copilot add a new story for the hide-label feature. Change the icons in the smart-button sample. The arrows are confusing.

[Copilot]

@copilot add a new story for the hide-label feature. Change the icons in the smart-button sample. The arrows are confusing.

Created a new hide-label story demonstrating the feature with basic usage, error states, and combined fields. Changed smart-button icons from arrows to search/check icons for clarity. (2e1da1b)