chore(ui): migrate NativeSelect, NativeSelectOption and NativeSelectOptionGroup components to TypeScript

[guoda-puidokaite]

Summary

• Migrated NativeSelect, NativeSelectOption and NativeSelectOptionGroup components to TypeScript, enhancing code quality, maintainability, and scalability.
• Utilised static typing to minimize runtime errors and improve the development experience.
• Refactored the components for cleaner, more maintainable code.
• Kept NativeSelect and NativeSelectOption components for use in Javascript files.
• Note bugs and improvements found: [TASK](ui): Migrate NativeSelect(All related) component to TypeScript #240 (comment) for improvement epic.

Changes Made

TypeScript Migration:

• Converted NativeSelect, NativeSelectOption and NativeSelectOptionGroup components files to TypeScript.
• Added comprehensive type annotations.
• Moved deprecated NativeSelect and NativeSelectOption components to /deprecated_js for Javascript files.
• Exported migrated components instead of deprecated.

Refactoring:

• Made necessary adjustments to address TypeScript-detected issues.
• Further refactored for cleaner and more understandable code.

Testing:

• Added edge cases:
  • Native Select
    • Without children
    • Multiple SelectOptionGroup components
    • Without value or label
  • Native Select Option
    • No value or label provided
    • Number type for value and label
  • Native Select Option Group
    • Empty label prop
    • undefined` children
    • Multiple children of different types
    • Empty component
    • Invalid props
• Organised tests by what they check for better readability and maintenance.
• Verified components behaviour using Storybook.
• Updated tests to use vitest.

Documentation:

• Updated Storybook documentation.

Release:

• Generated a changeset file.

Related Issues

• Closes [TASK](ui): Migrate NativeSelect(All related) component to TypeScript #240

Testing Instructions

1. Check Storybook

Checklist

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings or errors.

[changeset-bot]

🦋 Changeset detected

Latest commit: 441ae7a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudoperators/juno-ui-components	Minor

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-11-13 15:14 UTC

[andypf]

Overall, this looks great to me! I’ve added just a few comments for consideration.

[andypf]

Great Job!

[barsukov]

I leave it as a comment, all good few little comments left do not wanna block 🥇

[andypf]

👍

[ArtieReus]

I hope this hasn’t been mentioned already, but I just noticed that the default value for NativeSelect is set to Unnamed Select instead of an empty string. Is this intentional?

[ArtieReus]

I hope this hasn’t been mentioned already, but I just noticed that the default value for NativeSelect is set to Unnamed Select instead of an empty string. Is this intentional?

sorry... i just have been pointed that it is already clarified.
#599 (comment)

[ArtieReus]

Should the label not being defaulted to empty string?

[guoda-puidokaite]

Should the label not being defaulted to empty string?

Thanks for the review! We're not currently doing this. But I definitely think it's a good idea to introduce it, making sure it's always safely handled as a string. Good catch.

[ArtieReus]

lgtm

[andypf]

LGTM