Learning about SB

[tall tusk]

Hello, I recently started working on Lit (web components) and yesterday started looking into Storybook. The package.json says it is open-wc/storybook. I assume it is related to web component. I saw some files with *.stories.js . My question is

• what is best place to learn storybook for web components like Lit
• Can I create a html based story inside of a web component directory which has .stories.js like mention here https://storybook.js.org/docs/html/get-started/whats-a-story

[copper dove]

You probably want to use the web components version of Storybook. You can start here: https://storybook.js.org/docs/web-components/get-started/install

That way you can write stories like so:

// Button.stories.js

import { html } from 'lit';

export default {
  title: 'Button',
  component: 'demo-button',
};

export const Primary = {
  render: () => html`<demo-button primary></demo-button>`,
};

[tall tusk]

Why there is a html version of sb? I spend a day but it is JS not html. isn't it?

Am I able to create function using vanila JS that can change background from select menu?

[copper dove]

Storybook html is for straight up html. You write stories that return HTML elements. You can certainly load WC there but you're responsible to loading JS. Storybook WC gives makes it easier to write stories using lit.

Am I able to create function using vanila JS that can change background from select menu?
background of what? And is the select menu the story that you're writing?

[copper dove]

Also, we're always looking for ways to improve our docs. Do you have any suggestions for how we can make it clear what SB HTML is for?

[tall tusk]

I just started to look into SB so I m just 3 days into knowing SB, what I have found, SB HTML shld be say SB vanila JS

[river socket]

I think it is much more for tools like Bootstrap or Foundation or even a CSS library where no JS is required. I think calling it "Vanilla JS" would not be accurate.

[tall tusk]

@river socket Have a look at this video https://www.youtube.com/watch?v=yM7ermifGU8 from time (33-35 roughly) in which @craggy ivy does support what I said.

I say it coz I spend hours sourcing for a non-react and more simplied video tutorial on SB but nothing, seem like everyone wanna put out videos about react coz it sells fast

obviously I m not pointing out what video, @craggy ivy did a amazing job on that video for making understand but I feel there need more documentation which isn't framework or library dependent

[river socket]

I agree with that. Part of that is because Storybook was originally a React tool and later opened up to other frameworks. The other reason is that React is still very popular. I mostly use it for Vue and Web Components, so I would love to see more content for those. That's something I am hoping to contribute to in the near future.

I also created these helpers specifically for making the web component experience in Storybook easier. They may be helpful for you.

https://www.npmjs.com/package/wc-storybook-helpers

[tall tusk]

Me too, I am looking forward to document as video on YT so someone else doesn't have to go trhough the pain I went (still going 😆 )