design system workbench with lit element (webcomponents) and storybook from scratch in 1 hour

Follow me in this session on setting up a blueprint project for design system components to be made with lit element. I personally like the approach being demonstrated for its simplicity, maintainability and scalability.

Chapters
00:00:00 Starting mono repos with npm workspaces from scratch
00:01:33 Add lit element and vite
00:02:46 Add storybook
00:06:20 Customize storybook and remove unnecessary generated code
00:19:48 Use lit element with SCSS/Sass modules

Resources:

[Embee]

Thanks for creating this video, I am trying this out in 2024, with slightly different setup (directly from Storybook) and the './ds-badge' import was exactly what I was missing in my setup as well. The example code in the docs don't seem to mention this either!

[salva-dev]

Thanks!!. The only video I've found with storybook and lit. Thanks very much.

[ΔημητρηςΝουβακης]

Nice video! Huge favor could you provide the repo?

[jayakrishnanps]

Hi, can you please share a method to use play function using lit framework, i am getting error as the element not found while using lit

[dale_moore]

Is there no way to use the actual component JS file (ds-badge.ts in your example) to render the component in Storybook without having to basically recreate the markup in the Story? Makes no sense to me, but it looks like you struggled with the same issue, wondering why you had to include <ds-badge></ds-badge> in your Story render. As far as I can tell you can flat out comment out the "import './ds-badge';" and the component still renders in Storybook anyway. Don't get how this is testing the component when it's not using the component to render! Maybe I'm just missing something, my JS is weak.