[EPIC](ui): Inconsistencies and Improvement Collection

[edda]

Description

This epic serves as a central place to gather and document any inconsistencies, potential improvements, or refactoring ideas for the design system’s UI component library. The goal is to identify areas where the component library could be enhanced for better developer experience, API consistency, and overall usability. This epic will act as an initial collection hub, capturing insights and ideas as they arise.

Objectives

Identify Component Inconsistencies:
Collect and document any inconsistencies found within the component APIs, naming conventions, or component behaviors to ensure a more cohesive library.

Gather Refactoring Ideas:
Record ideas for refactoring or restructuring components to improve the developer experience, maintainability, and performance of the design system.

Collection

• Get an overview of all components' APIs and identify inconsistencies, e.g. different prop names for the same or similar attribute/behaviour, prop type inconsistencies across components
• [Feature Improvement](ui): Improve user feedback when text can't be copied #572
• useEffect refactoring, evaluate where they might not be necessary, add linting rules for useEffect(eslint-plugin-react-hooks). Example: chore(ui): migrate NativeSelect, NativeSelectOption and NativeSelectOptionGroup components to TypeScript #599 (comment)
• useMemo, useEffect and state refactoring.
• Imports unification(related to vite, exports package.json).
• Unification of components that depends on each other but not Layout(Select, Tooltip etc.)
• Usage of waitFor and userClick in tests(chore(ui): migrate Select component to TypeScript #571 (comment))
• Badge Improvements: chore(ui): migrate Box component to Typescript #532 (comment) and [TASK](ui): Migrate Box component to TypeScript #214 (comment)
• Consider allowing passing a specific z-index for portal root to AppShell to override the default
• chore(ui): migrate AppShellProvider and CodeBlock to TypeScript #547 (comment)
• Switch chore(ui): migrate Switch component to Typescript #586 (review)
• NativeSelect (some issues similar as Switch) [TASK](ui): Migrate NativeSelect(All related) component to TypeScript #240 (comment)
• Investigate [EPIC](ui): Inconsistencies and Improvement Collection #570 (comment)
• chore(ui): migrate Switch component to Typescript #586 (comment)
• Incorrect type in ContextMenu chore(ui): migrate ContextMenu component to Typescript #596 (comment)
• NativeSelect invalid/valid props [TASK](ui): Migrate NativeSelect(All related) component to TypeScript #240
• For some elements, we could make sure children are only elements (and props) we expect, if parent only works with those children chore(ui): migrate ComboBox component to typescript #589 (comment) e.g. ComboBox
• Story grouping chore(ui): migrate NativeSelect, NativeSelectOption and NativeSelectOptionGroup components to TypeScript #599 (comment)
• Textarea component name to TextArea (consistency)
• Form [TASK](ui): Migrate Form(All Related) component to TypeScript  #228 (comment) (similar to [TASK](ui): Migrate Switch component to TypeScript  #255 (comment))
• consider graceful failure on missing context for components (chore(ui): migrate ComboBox component to typescript #589 (comment))
• Storybook doesn't automatically pick up ReactNode as type and reverts to any. Force this in storybook configs: f1fa290 for all converted components
• Why have label and children in ComboBoxOption, both of type string?
• Refactor Pagination component. Hige components, kept refactor to minimum. UX should also be evaluated.
• DateTimePicker date prop improvements:, restrict types to DateTimeOption chore(ui): migrate DateTimePicker to TypeScript #640 (comment). Also improve disable, value and locale.
• ContentContainer not centered https://cloudoperators.github.io/juno/?path=/story/internal-contentcontainer--centered