Elm版Storybook, Bibliopolaを作りました！
Storybookは使ったことありますか？残念ながらわたしはStorybook自体を使ったことはないんですが、Elmで似たようなツールを使ってUI駆動で開発を進めるのが結構いい感じだったので自分用にツールを作ってみました。
viewを書いたファイルにBibliopolaのmainを書くとその1ファイルだけで使えるツールです
特徴
- pure Elm
elm install miyamoen/bibliopola- Elmソースコードに直接Bibliopola用のmain書いて
elm reactorで開くだけ
- 1ファイルで始めれる
-
elm-uiを使っている
- Bibliopolaを使う人がelm-uiを使う必要はないんですが、ちょっとAPI足りない
使い方
See examples.
HelloYou.elm
module Hello exposing (book, view)
import Bibliopola exposing (..)
import Bibliopola.Story as Story
import Element exposing (Element, text)
view : String -> Element msg
view name =
text <| "Hello, " ++ name
book : Book
book =
intoBook "HelloYou" identity view -- : IntoBook msg (String -> Element msg)
|> addStory (Story.build "name" identity [ "spam", "egg", "ham" ]) -- : IntoBook msg (Element msg)
|> buildBook -- : Book
-- |> withFrontCover (view "Bibliopola") -- Add first view of Book
main : Bibliopola.Program
main =
fromBook book
Book typeはviewを持ってて、引数のStory渡して作ります。BookからProgramが作れるのでそれをコンパイルすればBibliopolaが動く感じです
Atomic Design的にUIを各ファイルに分けているのなら、それぞれのファイルにbookとmainを書いておけばelm reactorで実際のviewを引数を変えながらみることができます
Elmでは引数の型も指定されているし、同じファイルに書くことでメンテナンスされないということもないのでそれなりに楽に使えるかな、と思っています
Shelf
Shelf型もあって作ったbookをまとめて一覧にしたいときはこれを使います
上に貼ったdemoの左にあるファイルツリーがShelfです
elm-ui以外で使う
elm-cssや普通のcssファイルの読み込みについては特にサポートしてません。Bibliopolaは普通のElmアプリケーションになるので自分でビルド作っていただければ…
基本的にelm-uiで使う想定です
終わりに
宣伝ですが、elm-jpでは毎週オンラインでもくもく会をやっていたり、ガイドの翻訳をしたりしています
よかったらここからDiscordに参加してみてください
不具合とか提案とか聞きたいこととかあったらdiscordでもtwitterでもいいので聞いてください。よろしくお願いします