https://github.com/rnons/purescript-halogen-storybook

A library to assemble examples or develop components separately.
https://github.com/rnons/purescript-halogen-storybook

examples halogen purescript

Last synced: 17 days ago
JSON representation

A library to assemble examples or develop components separately.

• Host: GitHub
• URL: https://github.com/rnons/purescript-halogen-storybook
• Owner: rnons
• License: bsd-3-clause
• Created: 2018-01-18T13:47:16.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-05-03T14:29:22.000Z (almost 3 years ago)
• Last Synced: 2024-12-16T07:05:02.826Z (about 2 months ago)
• Topics: examples, halogen, purescript
• Language: PureScript
• Homepage: https://rnons.github.io/purescript-halogen-storybook/
• Size: 577 KB
• Stars: 37
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# purescript-halogen-storybook



  

  



A library to assemble examples or develop components separately.

[DEMO](https://rnons.github.io/purescript-halogen-storybook/)

You might be interested in [purescript-halogen-custom-element](https://github.com/nonbili/purescript-halogen-custom-element) which allows embedding Halogen components anywhere in an HTML or Markdown file.

## How to use

First define the stories. Each story consists of a name and a component. If the name is empty string, it will be rendered as the index page.

```purescript

import Foreign.Object as Object

import Halogen.Storybook (Stories, runStorybook, proxy)

stories :: forall m. Stories m

stories = Object.fromFoldable

  [ Tuple "" $ proxy ExpIndex.component -- override the index page

  , Tuple "count" $ proxy ExpCount.component

  , Tuple "input" $ proxy ExpInput.component

  ]

```

Then add a `runStorybook` line to your main function. That's it.

```purescript

main = HA.runHalogenAff do

  HA.awaitBody >>=

    runStorybook

      { stories

      , logo: Nothing  -- pass `Just HH.PlainHTML` to override the logo

      }

```

You need to include the CSS by yourself, use [Storybook.css](https://github.com/rnons/purescript-halogen-storybook/blob/master/examples/src/Storybook.css) as an example.