posts/2021-02-14-storybook.js-with-shadow-cljs/

[utterances-bot]

Bit by bit

Storybook.JS is a very interesting development tool from JavaScript ecosystem1. This tutorial shows how we can use it with Shadow-CLJS. The code resides at storybook.js-with-shadow-cljs repo. Prerequisites The tutorial uses the following: Java version 11 Node.js version 14.15.4 Reagent version 1.0.0 Shadow-CLJS version 2.11.8 Storybook.JS version 6.1.17 Make sure the first two are installed prior the tutorial. The others will be installed along the way. Getting a simple React app running Let’s create the scaffold to kick-start:

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

[galaux]

Hey ! Thanks for the instructive article.

I'm curious to know whether you tried to use Storybook templates and Args? This would be handy to enable Controls.

I've tried adapting your article's code with this Gist but I must be missing something because I just can't get Storybook to render my components.

[shaolang]

Hey, thanks!

I'm developing a small (incomplete) little library to ease the writing of stories. Making it support templates and args are definitely a to-do. The only thing hindering that from happening is my job. LOL.

I'll check out your gist to help you figure out why yours isn't rendering.

[galaux]

In the meantime, I realized I could get away with much simpler code (can't remember where I stole these functions though):

(defn ->params
  [^js args]
  (js->clj args :keywordize-keys true))

(defn ->default
  [options]
  (-> options
      (update :component r/reactify-component)
      clj->js))

(def ^:export default
  (->default {:title     "Atoms/Button"
              :component button
              :args      {:disabled? false
                          :on-click  #(js/console.log "Clicked!")}
              :argTypes  {:variant  {:control {:type "radio"}
                                     :options ["primary"
                                               "secondary"
                                               "danger"]}
                          :on-click {:action "clicked!"}}}))

(defn ^:export primary
  [args]
  (let [params    (->params args)
        disabled? (:disabled? params)
        variant   (:variant params)
        on-click  (:on-click params)]
    (r/as-element
      [button
       {:variant   (keyword variant)
        :on-click  on-click
        :disabled? disabled?}
       "Primary"])))

[polydevuk]

With upgraded libs it doesn't work. Just get a browser page with "Cannot GET /".

[galaux]

@polydevuk: when Storybook gives me this error, I run it with --no-manager-cache which usually fixes the problem.

[zoedsoupe]

I followed this post and came up with this error:

Cannot read properties of undefined (reading 'cljs$core$IFn$_invoke$arity$2')
TypeError: Cannot read properties of undefined (reading 'cljs$core$IFn$_invoke$arity$2')
    at push../public/js/stories/design_system.components.js.design_system.components.text.cljs$core$IFn$_invoke$arity$variadic (http://localhost:65372/main.iframe.bundle.js:12027:49)
    at cmp.design_system$components$text [as reagentRender] (http://localhost:65372/main.iframe.bundle.js:12021:40)
    at http://localhost:65372/main.iframe.bundle.js:13974:20
    at Object.reagent$impl$component$wrap_render [as wrap_render] (http://localhost:65372/main.iframe.bundle.js:13985:6)
    at Object.reagent$impl$component$do_render [as do_render] (http://localhost:65372/main.iframe.bundle.js:14066:35)
    at http://localhost:65372/main.iframe.bundle.js:14291:41
    at Object.reagent$ratom$in_context [as in_context] (http://localhost:65372/main.iframe.bundle.js:16950:84)
    at Object.reagent$ratom$deref_capture [as deref_capture] (http://localhost:65372/main.iframe.bundle.js:16966:27)
    at Object.reagent$ratom$run_in_reaction [as run_in_reaction] (http://localhost:65372/main.iframe.bundle.js:18199:27)
    at cmp.reagent$impl$component$wrap_funs_$_render [as render] (http://localhost:65372/main.iframe.bundle.js:14290:30)

My repo can be found at https://github.com/peapescarte/design-system