[Lit] Bootstrap an example app with lit-next and TypeScript

[gaetanmaisse]

Work summary

The current kitchen sink for web components is really basic and hasn't been updated for a while. It would be really useful for Storybook devs to have a more complete + up to date kitchen sink for the lit ecosystem.

To do so I would be great to take a look at other, more up to date, example like Vue, Angular, Svelte ones and set up a fresh lit app using more or less the same "structure"/same base components. It will help us when we will be working on feature coverage of Storybook lit.

Plus, new major versions of lit should be out "soon" and already quite stable versions are available so I think it worth using them directly. We should also add TypeScript to our setup to cover as most case as possible. And finally, it could worth going with Storybook Webpack 5 builder directly?

Also, the current examples were bootstrap manually once but we don't know exactly how and so it's really hard to rebootstrap them now in the same fashion. A great thing would be to bootstrap the new lit example programmatically and also setup an E2E test at the same time with the command used for the example, and doing so ideally, one day, we would be able to regenerate/update the example automatically.

Bonus:
In an ideal world, the Yarn 2 Migration PR #13907 would have been merged and so it would be great:

• if this example was using Yarn 2 PnP from day 1, ensuring compatibility and POC to apply it on other examples later
• if we can manage to have this example in the monorepo BUT NOT related to existing Yarn workspaces. --> See with @gaetanmaisse for details

Recap:

• lit-next
• Webpack 5 builder?
• Scripted bootstrap?
• Yarn PnP?

Where to start

One more time @brion-fuller already start something 💪🏻 : brion-fuller@f038204

Acceptance criteria

• As a Storybook dev I should be able to checkout the branch, install deps, go to the bootstrapped example and run Storybook properly 🚀

Who to contact

@gaetanmaisse @yannbf @brion-fuller

[shilman]

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.22 containing PR #14600 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.