Elm 버전 Storybook, Bibliopola를 만들었습니다!

스토리북 사용하셨습니까? 불행히도 나는 Storybook 자체를 사용한 적이 없지만 Elm에서 비슷한 도구를 사용하여 UI 구동으로 개발을 진행하는 것이 상당히 좋은 느낌이었기 때문에 자신 용으로 도구를 만들어 보았습니다. .
view 를 쓴 파일에 Bibliopola의 main을 쓰면 그 1 파일만으로 사용할 수 있는 툴입니다

문서

특징

pure Elm

elm install miyamoen/bibliopola

Elm 소스 코드에 직접 Bibliopola에 대한 메인 쓰기 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에서도 트위터 하지만 좋기 때문에 들어 주세요. 감사합니다.