Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Are there plans for @storybook/html and @storybook/addon-info to play nicely? #4832

Closed
Pickra opened this issue Nov 22, 2018 · 6 comments
Closed

Comments

@Pickra
Copy link
Contributor

Pickra commented Nov 22, 2018

Currently using @storybook/html and @storybook/addon-info breaks storybook. The combo gets an error Expecting an HTML snippet or DOM node from the story.

I would like to use @storybook/html to build HTML/CSS components and have the copy code to the clipboard feature from @storybook/addon-info. The other options in addon-info would be great too, but copy to the clipboard is my primary use case.

There are 2 closed issues that reference my needs #3985 + #2187. The latter mentions using vue, I attempted this but found it adds undesired complexity.

I appreciate all the work that has gone into storybook. Thank you to all the maintainers for their effort. I am unsure if I am able to work on this feature, I'm just curious if this has any priority.

Here is an example of how I'd like to use @storybook/html + @storybook/addon-info in a story...

import { storiesOf } from '@storybook/html';
import { withInfo } from '@storybook/addon-info';

storiesOf('My little pony', module)
  .addDecorator(withInfo)
  .add('Twilight Sparkle', () => `<div>Twilight Sparkle</div>`)

// OR

storiesOf('Unicorns', module)
  .add('Twilight Sparkle', withInfo('Twilight Sparkle')(() => `<div>Twilight Sparkle</div>`))

...and the desired result
screen shot 2018-11-22 at 12 22 14 pm

Thank you.

@shilman
Copy link
Member

shilman commented Nov 24, 2018

@Pickra Not in its current form. We're working on a much better approach to solving the problems addon-info addresses that will work with all frameworks. Unfortunately we don't have a timeline for that yet.

@Pickra
Copy link
Contributor Author

Pickra commented Nov 25, 2018

Cool @shilman, thanks for the speedy response.

@stale
Copy link

stale bot commented Dec 16, 2018

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Dec 16, 2018
@Pickra
Copy link
Contributor Author

Pickra commented Dec 16, 2018

Hey @shilman, I just wanted to mention that @kgroat and I built a solution in case anyone else was looking for something.
https://github.com/Pickra/copy-code-block
Thanks again!

@stale stale bot removed the inactive label Dec 16, 2018
@igor-dv
Copy link
Member

igor-dv commented Dec 29, 2018

Very cool! Wanna PR this to docs? we have a section for 3rd party addons.

@igor-dv igor-dv closed this as completed Dec 29, 2018
Pickra added a commit to Pickra/storybook that referenced this issue Dec 30, 2018
After creating a solution to [my issue](storybookjs#4832) @igor-dv suggested I add this here.
@shilman
Copy link
Member

shilman commented Mar 22, 2019

Will be fixed in #1147

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants