CLI: Component-driven React / Vue / Angular / Preact / Svelte templates

[shilman]

Issue: #10723

What I did

• Copy @dom & @tmeasday 's CLI template from https://github.com/chromaui/storybook-template-react
• Update to match latest Args recommendations & minor tweaks
• Rename 0.Introduction.stories.mdx to Introduction.stories.mdx
• Update main.js to order MDX first
• Set up action logging out of box
• Migrate Button to CSS

What's next

• Discussion here (comments welcome!)
• Apply to other frameworks (help pls @tooppaaa @yannbf ?)

How to test

Modify scripts/run-e2e.ts:

await exec(`node ../../storybook/lib/cli/dist/generate init`, { cwd });
// await exec(`npx -p @storybook/cli sb init --yes ${type}`, { cwd });

Then run:

yarn test:e2e-framework react

[shilman]

@tmeasday @tooppaaa @domyen I've updated the button to use CSS and it's working. If it looks good, I'll update the other ones. I'm not really up on CSS best practices.

@tmeasday the action stuff is already set up by @tooppaaa. i made it a little bit more specific and added an onClick propType to the template and it works.

[tooppaaa]

E2E added that covers

• should have Welcome story displayed
• should have 4 Button stories (check on classnames)
• should have 2 Header stories (check on button text content)
• should have 2 Page stories (check on button text + page content text)
• should display onClick when clicking on primary button

I applied a bit of changes and extended your work @shilman on CSS.
Happy to make changes but the earliest possible as we can start working on others framework using E2E green as target !

[shilman]

@tooppaaa These changes look great. 💯

[yannbf]

Won't typescript complain about this? ButtonProps does not contain all possible props for a button element, I might be wrong but I think you'd need to do something like:

export interface ButtonProps extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
    primary?: boolean;
    ....
}

[yannbf]

Is the empty args here just to show people they can use it or is it necessary? There's already an example in LoggedIn, so no need to add it, right? It might lead to people thinking that they always need to add an empty args to every story

[yannbf]

do you think it would be nice to add a small comment telling people that they can change this to other stuff like "^(on|handle)[A-Z].*" in case they use a different pattern, or even already just add that regex because it might useful anyway?

[yannbf]

maybe a hyperlink in the args would be useful for reference?

[yannbf]

I can confirm that http://componentdriven.org/ works now, not https though

…

-- Yann Braga Software Developer m: +31618338183 a: Amsterdam, Netherlands. w: github.com/yannbf e: yannbf@gmail.com <https://linkedin.com/in/yannbraga>

[shilman]

@tooppaaa @yannbf When I run the sample app (react, react_typescript) locally it looks like the CSS is not being applied properly. The "JS" props (backgroundColor, label, onClick) are working, but the CSS props (primary, size) are not. Tho the story is getting re-rendered and the DOM is changing AFAICT. I'm sure that this was working on my initial commits, but it doesn't seem to be working on rollback, so maybe it's due to a change elsewhere in SB .. or in CRA?

[tmeasday]

We should probably get the https sorted too huh

[tmeasday]

Fixed now, try https://componentdriven.org

[shilman]

I fixed a bunch of Vue/Angular bugs and this is pretty much ready to go.

Waiting on #11561 and discussion with @tmeasday to make sure this is the direction we want to go before merging, since it might be incompatible with storyshots.

[patrick-mcdougle]

This adds a hidden dependency on prop-types which is not installed during the CLI install process.