Storybook: Can I use Storybook without any JS framework to design my LESS framework?

[TotomInc]

I've just discovered storybook which is amazing and I would really like to use it to design a LESS/CSS framework. I wanted to know if it's possible to use storybook without any JS framework such as Vue, Angular, ... but only to display each component without user interaction, kind of a dev-environment. I've found nothing about it in the docs or in the issues, can someone explain if it's possible and how to setup it?

[MXTcomunica]

I'm also interested in this (using SASS + twig).

In particular, can storybook generate a styleguide with this component structure? E.g.:

    |__ component_1
          |__ component_1.scss
          |__ component_1.twig
    |__ component_2
          |__ ....

Thank you

[Hypnosphi]

You can use storybook for vue without actually using any of vue features and just pass plain html as template:

import { storiesOf } from '@storybook/vue';

storiesOf('MySnippets', module)
  .add('hello', () => {
    template: '<div class="hello">Hello World</div>'
  })

[TotomInc]

@Hypnosphi cannot this be a feature inside storybook? It can be useful to implement a way to use storybook without any JS framework.

[Hypnosphi]

What's wrong with my suggestion? It doesn't require you to _use_ vue, only to add it to devDependencies

You can also use storybook for polymer (currently in alpha) in a similar way:
https://storybooks-polymer.netlify.com/?selectedKind=Custom%7CMethods%20for%20rendering&selectedStory=html%20string&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

[tmeasday]

OTOH it would not be hard to add @storybook/js I suppose @Hypnosphi?

[Hypnosphi]

I'd rather call it @storybook/html

[TotomInc]

@Hypnosphi there is nothing wrong with your suggestion, but it looks like a workaround to make it work without any framework. I know storybook was initially designed to be used with a js framework, but can't we make a version of it (like the polymer version) to use it without any js framework?

How would I setup storybook for this usage?

[brodybits]

On Wed, Mar 7, 2018 at 1:44 AM, Thomas Cazade [e-mail]
wrote:

@Hypnosphi https://github.com/hypnosphi there is nothing wrong with
your suggestion, but it looks like a workaround to make it work without any
framework. I know storybook was initially designed to be used with a js
framework, but can't we make a version of it (like the polymer version) to
use it without any js framework?

@storybook/vanilla? (I would also favor @storybook/html)

[TotomInc]

Any plans on this?

[igor-dv]

I think it won't happen before the 3.4 release. Let's estimate for the next release. Wana help with it? Actually, it's ok to start working on it before 😉

I'd rather call it @storybook/html

Here is my list of names 😄

• @storybook/natural
• @storybook/naked
• @storybook/free
• @storybook/vegan

[TotomInc]

@storybook/natural looks great, I tried to get into the codebase of storybook to see if I can do something. I'll try again soon and see if I can contribute to this! 😄

[igor-dv]

@TotomInc , we've done a bit of refactoring moving common parts to @storybook/core, so it's much easier now to create a new framework (or a lack of framework) support.

[Hypnosphi]

I'm going to start working on it after #3261 gets merged

[dietergeerts]

Wouldn't it be great if storybook was framework independent? Of course, that means that for the actual examples, we'll need something to work with the framework used in the examples, but the overal structure should not mind the framework being used. This would be so much more future proof and would allow for easier development.

I came here because after years of using Fabricator, I'm in search of something similar, with more control over the bundling etc... Fabricator is great, but the problem with it is that it hides bundling/compiling/transpiling etc... and with the speed that JavaScript is progressing on that part, it becomes impossible to keep up with it.

So a system that will build the toolkit/styleguide/dev-environment that can be used with any framework/bundling/... tools is something I'm after. I thought of creating my own for a while, but something like that takes time, and I'm short of that due to sickness. And there are already a dozen solutions out there, from where I think this one (StoryBook) is the best one.

So are there any plans of removing the framework-dependency in the future?

[Hypnosphi]

AFAIK @ndelangen is working on something like that in https://github.com/storybooks/SBNext/tree/POC-bundler and he welcomes assistance

[dietergeerts]

Nice. That would be exactly what I am after. Would love to contribute, and if anything comes out of it, I will deprecate my Fabricator Builder project to redirect to the new StoryBook then. I'll contact @ndelangen to see how I can help out.

[ndelangen]

🎉

[Hypnosphi]

@storybook/html released as 4.0.0-alpha.6

[neginbasiri]

My project is mixture of
React components + ejs/handlebar templates... I am wondering if there is an example of using storybook/html and React app together? Also how to get the webpack generate html using proper template loaders and provide storybook/html those generated html. Any example config?

[Hypnosphi]

1) Unfortunately, there's currently no way to view components from different frameworks in one storybook, so you need two separate storybooks
2) You can use custom webpack config for that. Which template engine do you use?

[ndelangen]

https://storybook.canny.io/roadmap/p/add-ability-to-run-multiple-frameworks-in-1-storybook

[Rilliano]

You can use storybook for vue without actually using any of vue features and just pass plain html as template:

import { storiesOf } from '@storybook/vue';

storiesOf('MySnippets', module)
  .add('hello', () => {
    template: '<div class="hello">Hello World</div>'
  })

I'm also interested in this (using SASS + twig).

In particular, can storybook generate a styleguide with this component structure? E.g.:

    |__ component_1
          |__ component_1.scss
          |__ component_1.twig
    |__ component_2
          |__ ....

Thank you

Here is nice boilerplate setup u can use
https://github.com/JungleMinds/JM_Basic-Twig-Project