Showcase - Add Mock::App component in showcase to easily mock a product application in a frameless page

[didoo]

📌 Summary

This is a porting of https://github.com/hashicorp/hds-plus/pull/41 in HDS (with some tweaks, that later I'll port back to HDS+).

The idea comes from the observation of how much code @KristinLBradley (and then @philrenaud) had to write (copy&paste) to mock a "product application" in a frameless page.

That's why I've decided to abstract away all that code in a Mock::App so that ultimately to render this page:

it's enough to write this code:

<Mock::App>
  <:main as |M|>
    <M.PageHeader />
    <M.LongTextContent />
  </:main>
</Mock::App>

Note: I've used the Mock namespace because in the future we may want to mock other complex UI parts (tables with filter and pagination, forms, etc)

🛠️ Detailed description

In this PR I have:

• added Mock::App component for showcase
  • removed an extra file from showcase types folder (leftover?)
• converted existing “demo” frameless pages to use Mock::App

Preview of the converted pages:

• AppFrame showcase
• frameless demo-full-app-frame-with-side-nav
• frameless demo-full-app-frame-with-app-header
• frameless demo-full-app-frame-with-app-header-and-app-side-nav

(for the last two, I have used placeholders instead of the AppHeader/AppSideNav, for the time being; we can easily add these components to the Mock::App and demo pages, if/when we will publish the AppHeader/AppSideNav components)

---

👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Nov 1, 2024 6:53pm
hds-website	✅ Ready (Inspect)	Visit Preview	Nov 1, 2024 6:53pm

[alex-ju]

Looking good overall – it should save us some time with future extensive page mocks.

[KristinLBradley]

This looks great and should be very convenient to use, thanks!