Fifthtry

How To Use Storybook

Storybook was build for two main use cases:

  1. Frontend development can start before backend is ready.
  2. Act as a demonstration of different states of UI for educational and other purposes.

Resuming from our quick start tutorial, let’s say you have not yet implemented the backend (src/routes/index.rs etc), or want to see how the UI would look like if the message field contains a really long string.

You can go to http://127.0.0.1:3000/storybook/.

You will that a few “stories” are already configured in frontend/Storybook.elm:

Note that the /storybook/ URLs work only when the server is started in test mode using cargo run -- --test. You can use the alias serve as a replacement for this command.

module Storybook exposing (main)

import Json.Encode as JE
import Pages.Index as Index
import Realm.Storybook as RSB exposing (Story)


main =
    RSB.app 
        { stories = stories, title = "Realm-Starter" }


stories : List ( String, List Story )
stories =
    [ ( "Index"
      , [ index "count_42"
            "Count = 42"
            { message = "hello world", count = 42 }
        , index "big_message"
            "Big Message"
            { message = "hello world, its really nice to meet you!"
            , count = 2
            }
        ]
      )
    ]


index : String -> String -> Index.Config -> Story
index id title c =
    { id = id
    , title = title
    , pageTitle = title
    , elmId = "Pages.Index"
    , config =
        JE.object
            [ ( "count", JE.int c.count )
            , ( "message", JE.string c.message ) 
            ]
    }

We have configured two “stories”, “Count = 42” and “Big Message”, under the heading “Index”. We have hard coded the config values, so we do not have to have any backend present, and can put anything there.

In the storybook you can view how the page looks like with the respective states. You can see both in “desktop” mode and in “mobile” mode (mobile mode is nothing but a viewport width shrunk to 414px).

The storybook supports “auto-reload”, so if you modify the elm code, it will automatically recompile elm, and reload the browser.

Table Of Content

What is Realm?

A Bit On Motivation

Routing is Hard

What does Realm do?

Backend Data And Type Safety

Tutorial

Quick Start Realm Tutorial

In Depth Tutorial (not ready)

Nix
Shell
Doit
Hello Rust
Hello Elm
Hello Static Files
Hello Server Side Rendering
Pre-Commit Hooks

Routing, Request And Response

Frontend, Data, Navigation, And APIs

How To Guides

File Upload

Backend: S3 File Upload
Authenticated File Serving
Frontend: Uploading Files From Elm

How to use storybook?

How to implement “loading..”?

Docs

Realm.In

Realm.Storybook.Story

realm::In

realm::Context

realm::Result

realm.magicSlice

realm::RequestConfig

Environment Variables

Internals - Only for Realm Developers, not Users

“Realm DATA”
iFrame Controller
Shutdown Routine
Testing Internals

Change Log

Get Realm Starter Working

Transparent Offline Feature

How to make http requests in Realm?

Development

Replay Testing

Tutorial: ToDo App

Realm Testing

Enhance Realm Starter

Double Load Issue

Deploy To Heroku Button

End failure

Realm-Starter Github Template

Proposal: Tracker And Visit

Proposal: Activity Store

Proposal: Bundling

Proposal: Retry On Network Error

Storybook: Editable JSON

Storybook: Notes

Storybook: Reference

Backlog

Readings

Change Log

How to Publish

Testing

Code Snippets

Skip rustfmt For Some Section

Close Modal Dialog When Clicked Outside

Ignoring Lints In Python

Ignoring Lints (clippy and rustc warnings) In Rust

Handle DateTime in Rust & Elm

Handle CiText value read in Rust

Transport Enum Type to and fro Rust/Elm through JSON