Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/miyamoen/bibliopola
UI catalog for Elm inspired by the storybook
https://github.com/miyamoen/bibliopola
elm elm-lang storybook style-elements
Last synced: 3 months ago
JSON representation
UI catalog for Elm inspired by the storybook
- Host: GitHub
- URL: https://github.com/miyamoen/bibliopola
- Owner: miyamoen
- License: bsd-3-clause
- Created: 2018-07-25T13:28:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-29T19:12:01.000Z (over 3 years ago)
- Last Synced: 2024-10-01T09:19:40.999Z (3 months ago)
- Topics: elm, elm-lang, storybook, style-elements
- Language: Elm
- Homepage: https://miyamoen.github.io/bibliopola/
- Size: 384 KB
- Stars: 8
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
UI Catalog for Elm applications built by [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/) inspired by Storybook
* [demo — Bibliopola on Bibliopola](https://miyamoen.github.io/bibliopola/)
* [package document](http://package.elm-lang.org/packages/miyamoen/bibliopola/latest)
## Features
* UI Catalog that shows `view` functions for development with atomic design.
* Pure Elm tool. Only `elm install miyamoen/bibliopola`.
* Bibliopola make main `Program`, so you can use `elm make` or `elm reactor`, and so on.
* Start to write single Elm file that has `view` finctions.
## How to Use
See [examples](https://github.com/miyamoen/bibliopola/tree/master/examples).
```sh
git clone https://github.com/miyamoen/bibliopola.git
cd bibliopola
elm reactor
```
In browser, open , then go to `examples` folder.
### Hello, Bibliopola
> `view` that takes no arguments
Open `Hello.elm` file.
Your `view` function:
```elm
view : Element msg
view =
text "Hello, Bibliopola"
```
On top left corner, "Hello, Bibliopola" shows up.
First of all, create a `Book`:
```elm
book : Book
book =
bookWithFrontCover "Hello" view
```
`Book` type requires `view`. `bookWithFrontCover` requires book title such as "Hello" and `view` that has type of `Element`. Bibliopola shows a front cover of book at first.
Now, create main `Program`:
```elm
main : Bibliopola.Program
main =
fromBook book
```
First Bibliopola has been finished!
> **note:** a word of 'Bibliopola' means a book shop in Latin.
### Hello, your name
> `view` that takes one argument
Open `HelloYou.elm` file.
This book does not specify a front cover, then book icon shows up. To click, you can see "Hello, spam". You can select options with select box at the bottom of the screen.
Your `view` function:
```elm
view : String -> Element msg
view name =
text <| "Hello, " ++ name
```
It takes one argument, `String`.
```elm
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
```
`IntoBook msg view` type used for building `Book`. First argument of `intoBook`, `String`, is book title. Second argument, `msg -> String`, is for message logger. Last srgument is your `view` function.
In Bibliopola, arguments of `view` is called `Story`. `Story a` type means that Story has list of type `a` and this list is options for argument of `view` function.
At last, `buildBook` turns `IntoBook` to `Book`.