chore(ui): migrate Panel, PanelBody and PanelFooter components to Typescript

[guoda-puidokaite]

Summary

• Migrated Panel, PanelBody and PanelFooter 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.
• Exposed deprecated .js components as Portal is used (which is in progress).
• Improved Storybook types and documentation. NOTE: Please make sure to check the old code for correct types. Live Storybook is incorrect.
• NOTE: Removed ContentArea and ContentAreaWrapper from Stories already as they're deprecated.

Changes Made

TypeScript Migration:

• Converted Panel, PanelBody and PanelFooter components files to TypeScript.
• Added comprehensive type annotations.
• Added old .js components to the deprecated_js folder.
• Exported deprecated components as Portal is used (which is in progress).

Refactoring:

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

Testing:

• Added edge cases:
  • Panel
    • Rendering panel without props
    • Rendering panel with undefined className
    • Rendering panel without a heading
    • Clicking close button when panel is already closed
    • Double-click on close button
  • PanelBody
    • Render without any props
    • Render with null children
    • Render with undefined children
    • Applies default styles
    • Renders multiple children
    • Renders no children
  • PanelFooter
    • Render without any props
    • Applies default styles
    • Renders multiple children
    • Renders no children
• Organised tests by what they check for better readability and maintenance.
• Verified components behaviour using Storybook.
• Updated tests to use vitest.

Documentation:

• Improved Storybook documentation types and comments.

Release:

• Generated a changeset file.

Related Issues

• Closes [TASK](ui): Migrate Panel(All related like Body and footer) component to TypeScript #243

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: 6af2b12

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-27 13:36 UTC

[barsukov]

Great job and few breaking changes :)

[guoda-puidokaite]

Hey, @barsukov.
I've marked this PR as a draft. Having issues with the stories, need to find a solution once I've some time after training.
The blocking change is very helpful though 🙏. Might even be related to the issue I'm facing. Thank You for the early review! 💪

[barsukov]

LGTM!

[ArtieReus]

reviewing :)

[ArtieReus]

lgtm

[barsukov]

LGTM