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.

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 https://github.com/cloudoperators/juno/issues/243

Testing Instructions

1. Check Storybook

Checklist

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

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 373931f66ee9826c72259a2e170e4f275335cee4

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[bot]]

PR Preview Action v1.4.8 :---: :rocket: Deployed preview to https://cloudoperators.github.io/juno/pr-preview/pr-606/ on branch gh-pages at 2024-11-25 15:25 UTC

[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! 💪