Extend composite components from shoelace web components

[spwoodcock]

• I was creating a radio-btn-group component and found myself writing too much boilerplate.
• Shoelace.style has some fantastic low level components already designed.
• Instead of creating all of these low level components, I thought we could extend shoelace, passing in our style/theme, and creating composite components (header, footer, toolbar, sidebar, etc).
• Then we can have a HOT layout fully formed around the edge of the screen, with the viewport in the center being for the page content.
• This worked for all examples: svelte, vue, react.

Todo

• Fix loading the web components in storybook.
• We need to find a good approach for using Tailwind with shoelace.
  • Info on theming: https://shoelace.style/getting-started/themes
  • But this approach does not work well with Tailwind: how to style shoelace components with tailwind shoelace-style/shoelace#1259
  • Option 1: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
  • Option 2: css-in-js with twind: https://www.npmjs.com/package/@twind/with-web-components
  • Option 3: I'm sure there are other ways!

Testing

pnpm install
pnpm run build
cd examples/react
pnpm install
pnpm run dev

View the react toolbar at http://localhost:3000

[JoltCode]

@spwoodcock I've just had a thought - I think we could use UnoCSS instead? UnoCSS support the ::part syntax, which would solve the issue that would prevent us from using TailwindCSS. And, we're already using UnoCSS for the web component styling, so it's good that it should work with styling the shoelace components too!

https://unocss.dev/integrations/vite#part-built-in-support

[spwoodcock]

Fantastic idea 😁

I was a bit hung up on using Tailwind, but Uno is fantastic & we can use exactly the same syntax as Tailwind if I'm not mistaken.

It's a seamless transition!

[JoltCode]

All looks great - we just need to migrate to UnoCSS now! 👍

Also, we should probably add a classnames prop, which can be used to add classrooms to specific children of the parent component? I've seen this with other UI libs, and seems good 😄

[spwoodcock]

Completely agree!

I think the code for adding extra class names may still be there, but just commented out. If no, it's easy to add back in.

I won't have much time to work in this over the next few days, but plan to put in a big shift when I'm back from holidays in May 😄

Ideally we will use this components immediately in the drone tasking manager, with the header probably being the most crucial to start 👍

[JoltCode]

Completely agree!

I think the code for adding extra class names may still be there, but just commented out. If no, it's easy to add back in.

I won't have much time to work in this over the next few days, but plan to put in a big shift when I'm back from holidays in May 😄

Ideally we will use this components immediately in the drone tasking manager, with the header probably being the most crucial to start 👍

Oh awesome - will take a look!

No worries, chat on Monday, hope you have a great weekend! 😄

And that's great, sounds like a plan! 🚀

[spwoodcock]

Merging this to make a temp release.

We can work on adding UnoCSS & adding a classnames prop in another PR 👍