{"id":13561889,"url":"https://github.com/ryan-haskell/elm-storybook-example","last_synced_at":"2025-10-28T06:09:17.907Z","repository":{"id":65932031,"uuid":"527408049","full_name":"ryan-haskell/elm-storybook-example","owner":"ryan-haskell","description":"An example of how you can build a design system with Elm + Storybook!","archived":false,"fork":false,"pushed_at":"2022-08-22T04:59:55.000Z","size":904,"stargazers_count":44,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-19T01:39:15.814Z","etag":null,"topics":["elm","storybook"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryan-haskell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-22T04:16:07.000Z","updated_at":"2025-03-19T18:08:35.000Z","dependencies_parsed_at":"2023-02-16T22:25:16.568Z","dependency_job_id":null,"html_url":"https://github.com/ryan-haskell/elm-storybook-example","commit_stats":null,"previous_names":["ryan-haskell/elm-storybook-example","ryannhg/elm-storybook-example"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/ryan-haskell/elm-storybook-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-storybook-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-storybook-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-storybook-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-storybook-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryan-haskell","download_url":"https://codeload.github.com/ryan-haskell/elm-storybook-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-storybook-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266606577,"owners_count":23955308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","storybook"],"created_at":"2024-08-01T13:01:02.282Z","updated_at":"2025-10-28T06:09:12.890Z","avatar_url":"https://github.com/ryan-haskell.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# elm-storybook-example\n\u003e An example for how you can use [Storybook](https://storybook.js.org) to build your next design system in [Elm](https://elm-lang.org)!\n\n![A screenshot of an Elm \"Sign up\" button in Storybook](./screenshot.png)\n\n## Try it out\n\n__Note:__ This project requires [Node.js v16+](https://nodejs.org) (because it is powered by Vite 3.x)\n\n```\nnpm start\n```\n\n## Features\n\n- 🌳  Write your component examples in `.elm` files\n- ❗️  See helpful compiler errors in browser (powered by [Vite](https://vitejs.dev)!)\n- 📄  View the full Elm source code (in the \"Source\" tab)\n- 🪵  Automatically log Elm messages (in the \"Actions\" tab)\n- ♿️  Get accessibility feedback (in the \"Accessibility\" tab)\n- ↕️  Define the order of stories (in `.storybook/preview.js`)\n- 🎨  Import custom CSS files (in `.storybook/preview.js`)\n\n\n\n## How it works\n\nWhen you create an Elm module in `src/Stories`, the custom Storybook plugin will automatically add it to your Storybook.\n\n\nFor example, try creating a new file at `./src/Stories/HelloWorld.elm` with the following content:\n\n```elm\nmodule Stories.HelloWorld exposing (main)\n\nimport Html exposing (Html)\nimport Storybook.Story exposing (Story)\n\n\nmain : Story () msg\nmain =\n    Storybook.Story.stateless\n        { view = view\n        }\n\n\nview : Html msg\nview =\n    Html.text \"Hello, world!\"\n\n```\n\nJust 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.\n\nThis file also lets you define the order that you want your stories to appear in the left sidebar.\n\nAny 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 ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-haskell%2Felm-storybook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryan-haskell%2Felm-storybook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-haskell%2Felm-storybook-example/lists"}