https://github.com/ryan-haskell/elm-storybook-example

An example of how you can build a design system with Elm + Storybook!
https://github.com/ryan-haskell/elm-storybook-example

elm storybook

Last synced: 5 days ago
JSON representation

An example of how you can build a design system with Elm + Storybook!

• Host: GitHub
• URL: https://github.com/ryan-haskell/elm-storybook-example
• Owner: ryan-haskell
• Created: 2022-08-22T04:16:07.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-22T04:59:55.000Z (about 2 years ago)
• Last Synced: 2024-08-01T13:24:22.894Z (3 months ago)
• Topics: elm, storybook
• Language: Elm
• Homepage:
• Size: 883 KB
• Stars: 43
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-ccamel - ryan-haskell/elm-storybook-example - An example of how you can build a design system with Elm + Storybook! (Elm)

README

        
# elm-storybook-example

> An example for how you can use [Storybook](https://storybook.js.org) to build your next design system in [Elm](https://elm-lang.org)!

![A screenshot of an Elm "Sign up" button in Storybook](./screenshot.png)

## Try it out

__Note:__ This project requires [Node.js v16+](https://nodejs.org) (because it is powered by Vite 3.x)

```

npm start

```

## Features

- 🌳  Write your component examples in `.elm` files

- ❗️  See helpful compiler errors in browser (powered by [Vite](https://vitejs.dev)!)

- 📄  View the full Elm source code (in the "Source" tab)

- 🪵  Automatically log Elm messages (in the "Actions" tab)

- ♿️  Get accessibility feedback (in the "Accessibility" tab)

- ↕️  Define the order of stories (in `.storybook/preview.js`)

- 🎨  Import custom CSS files (in `.storybook/preview.js`)

## How it works

When you create an Elm module in `src/Stories`, the custom Storybook plugin will automatically add it to your Storybook.

For example, try creating a new file at `./src/Stories/HelloWorld.elm` with the following content:

```elm

module Stories.HelloWorld exposing (main)

import Html exposing (Html)

import Storybook.Story exposing (Story)

main : Story () msg

main =

    Storybook.Story.stateless

        { view = view

        }

view : Html msg

view =

    Html.text "Hello, world!"

```

Just like in a standard Storybook project, your `.storybook/preview.js` will allow you to import custom JS or CSS files for use in your project.

This file also lets you define the order that you want your stories to appear in the left sidebar.

Any edits to the `./static/style.css` will automatically show up in your browser– thanks to the work done by the folks in the Storybook + Vite communities ❤️