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

Consider swapping out devcards with Storybook. #303

Open
wildwestrom opened this issue Nov 6, 2021 · 8 comments
Open

Consider swapping out devcards with Storybook. #303

wildwestrom opened this issue Nov 6, 2021 · 8 comments

Comments

@wildwestrom
Copy link

wildwestrom commented Nov 6, 2021

It seems like Storybook has all of devcards' features and devcards doesn't seem very active.
If this seems like a good idea I'll work on it.

https://shaolang.github.io/posts/2021-02-14-storybook.js-with-shadow-cljs/

@filipesilva
Copy link
Owner

Heya!

Storybook indeed does a lot. I use it at my dayjob together together with the cljs compilation, but using JS components on storybook. I played around with that guide as well before, and didn't move forward much because I wasn't sure about how the general UX would be.

A big difference (I think) with that guide versus a plain storybook setup is that you need to specify each ns as an entry point. In that case it's acme.stories.header-stories. Storybook discovers these automatically.

Still might be worth it to use storybook instead. I'm finding it hard to maintain devcards as the default due to bhauman/devcards#168 and bhauman/devcards#163. \

I'd review a PR if you're interested in working on it!

@wildwestrom
Copy link
Author

Having to specify each namespace as an :entry is pretty annoying. I only skimmed the guide.

Is there another guide that shows how to integrate cljs with storybook? If not, maybe I can figure out an easier way to integrate storybook with cljs myself.

Either way, I'd love to work on this. I'd love to see this repo modernized.

@filipesilva
Copy link
Owner

I don't know of a better way to do it, no... at the end of the day I think it'd either require shadow-cljs to have a dynamic config to build the entries (e.g. how tests has ns-regexp), or have a way in the main entry point to find the others. Neither sounds super straightforward.

I might also be missing something important. Might be a good idea to ask Shadow-CLJS's author, he's very responsive in both the issue tracker and the clojurians slack.

Are there other things you think that fall within the bucket of modernizing this repo? I've held off on react etc dep updates because I was worried how devcards might break. Deps.edn is a good improvement but has some iffy interactions with Windows, where you need powershell to run any clj commands. I didn't really have anything else in mind myself.

@wildwestrom
Copy link
Author

wildwestrom commented Nov 9, 2021

I don't know of a better way to do it, no... at the end of the day I think it'd either require shadow-cljs to have a dynamic config to build the entries (e.g. how tests has ns-regexp), or have a way in the main entry point to find the others.

Using ns-regexp doesn't sound that bad, it's kind of a 'set it and forget it' solution.

Are there other things you think that fall within the bucket of modernizing this repo?

I was just thinking of keeping all the npm stuff up to date. I don't think it's necessary to add deps.edn either. I prefer it on my repos, but shadow-cljs largely takes care of it.

Might be a good idea to ask Shadow-CLJS's author, he's very responsive in both the issue tracker and the clojurians slack.

I'd like to hear @thheller's opinion as well.

Browsing the issue tracker, I found this gist as well: https://gist.github.com/ghostandthemachine/347d1a1c679615a93930e4fdb48d907e

@filipesilva
Copy link
Owner

ng-regexp isn't available for the :npm-module target, or other non-test formats iirc. But maybe it works?

The things that keeps moving me towards deps.edn in other projects is pinning to git, and using npm scripts that call clj -A for stuff like linting. I might take that one on myself.

@thheller
Copy link

thheller commented Nov 9, 2021

:ns-regexp works for :npm-module. Well, it was broken for a bit but was fixed a couple releases ago.

I have no opinion on Storybook otherwise. I have not used it myself.

@filipesilva
Copy link
Owner

@thheller that's really useful for this situation! Updated the docs to reflect that in shadow-cljs/shadow-cljs.github.io#72.

@DavidVujic
Copy link

DavidVujic commented Dec 1, 2021

Here's a fully working example repo that might help, using :ns-regex for the Storybook alias. https://github.com/DavidVujic/clojurescript-amplified

thheller pushed a commit to shadow-cljs/shadow-cljs.github.io that referenced this issue Jul 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants