{"id":13491039,"url":"https://github.com/phenixdigital/phoenix_storybook","last_synced_at":"2025-12-12T00:13:21.213Z","repository":{"id":48213978,"uuid":"515151179","full_name":"phenixdigital/phoenix_storybook","owner":"phenixdigital","description":"A pluggable storybook for your Phoenix components.","archived":false,"fork":false,"pushed_at":"2025-04-28T23:19:50.000Z","size":4667,"stargazers_count":783,"open_issues_count":20,"forks_count":72,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-29T23:42:11.935Z","etag":null,"topics":["elixir","liveview","phoenix","storybook"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phenixdigital.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["cblavier"]}},"created_at":"2022-07-18T11:14:03.000Z","updated_at":"2025-04-29T10:55:58.000Z","dependencies_parsed_at":"2023-07-13T08:29:18.132Z","dependency_job_id":"53a07916-7cb7-4de5-96f4-d102f72c38eb","html_url":"https://github.com/phenixdigital/phoenix_storybook","commit_stats":{"total_commits":830,"total_committers":38,"mean_commits":"21.842105263157894","dds":0.3650602409638555,"last_synced_commit":"443044a4449e9148917cfb12a64774769b0d510a"},"previous_names":["phenixdigital/phx_live_storybook"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenixdigital%2Fphoenix_storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenixdigital%2Fphoenix_storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenixdigital%2Fphoenix_storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenixdigital%2Fphoenix_storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phenixdigital","download_url":"https://codeload.github.com/phenixdigital/phoenix_storybook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251602596,"owners_count":21615956,"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","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":["elixir","liveview","phoenix","storybook"],"created_at":"2024-07-31T19:00:53.033Z","updated_at":"2025-12-12T00:13:21.182Z","avatar_url":"https://github.com/phenixdigital.png","language":"Elixir","funding_links":["https://github.com/sponsors/cblavier","https://ko-fi.com/C0C316P9FN'"],"categories":["Elixir","Recently Updated","Framework Components"],"sub_categories":["[Dec 16, 2024](/content/2024/12/16/README.md)"],"readme":"# PhoenixStorybook\n\n[![github](https://github.com/phenixdigital/phoenix_storybook/actions/workflows/elixir.yml/badge.svg)](https://github.com/phenixdigital/phoenix_storybook/actions/workflows/elixir.yml)\n[![codecov](https://codecov.io/gh/phenixdigital/phoenix_storybook/branch/main/graph/badge.svg)](https://codecov.io/gh/phenixdigital/phoenix_storybook)\n[![GitHub release](https://img.shields.io/github/v/release/phenixdigital/phoenix_storybook.svg)](https://hex.pm/packages/phoenix_storybook)\n\n📚 [Documentation](https://hexdocs.pm/phoenix_storybook)\n\u0026nbsp; - \u0026nbsp;\n🔎 [Demo](https://phoenix-storybook-demo.fly.dev/)\n\u0026nbsp; - \u0026nbsp;\n🎓 [Sample app](https://github.com/phenixdigital/phoenix_storybook_sample)\n\u0026nbsp; - \u0026nbsp;\n🍿 [Getting started video](https://www.youtube.com/watch?v=MTE7dLhkQ8Q)\n\u0026nbsp; - \u0026nbsp;\n🦊 [ElixirCasts](https://elixircasts.io/phoenix-storybook)\n\n---\n\n\u003ca href='https://ko-fi.com/C0C316P9FN' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n_I'm the sole maintainer of this project and work on it in my free time. Any tips would be appreciated!_\n\n---\n\n\u003c!-- MDOC !--\u003e\n\nPhoenixStorybook provides a [_storybook-like_](https://storybook.js.org) UI interface for your\nPhoenix components.\n\n- Explore all your components, and showcase them with different variations.\n- Browse your component's documentation, with their supported attributes.\n- Learn how components behave by using an interactive playground.\n\n![screenshot](https://github.com/phenixdigital/phoenix_storybook/raw/main/screenshots/screenshot-01.jpg)\n![screenshot](https://github.com/phenixdigital/phoenix_storybook/raw/main/screenshots/screenshot-02.jpg)\n\n## How does it work?\n\nPhoenixStorybook is mounted in your application router and serves its UI at the mounting point of\nyour choice.\n\nIt performs automatic discovery of your storybook content under a specified folder (`:content_path`)\nand then automatically generates a storybook navigation sidebar. Every module detected in your\ncontent folder will be loaded and identified as a storybook entry.\n\nThree kinds of stories are supported:\n\n- `component` to describe your stateless function components or your live_components.\n- `page` to write \u0026 document UI guidelines, or whatever content you want.\n- `example` to show how your components can be used and mixed in real UI pages.\n\n## Installation\n\nTo start using `PhoenixStorybook` in your phoenix application you will need to follow these steps:\n\n1. Add the `phoenix_storybook` dependency\n2. Run the generator\n\n### 1. Add the `phoenix_storybook` dependency\n\nAdd the following to your mix.exs and run mix deps.get:\n\n```elixir\ndef deps do\n  [\n    {:phoenix_storybook, \"~\u003e 0.8.0\"}\n  ]\nend\n```\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e When picking a github version of the library (instead of an official hex.pm release) you\n\u003e need the get the storybook's assets compiled.\n\u003e To do so, please run `mix dev.storybook`.\n\n### 2. Run the generator\n\nRun from the root of your application:\n\n```bash\n$\u003e mix deps.get\n$\u003e mix phx.gen.storybook\n```\n\nAnd you are ready to go!\n\nℹ️ If you prefer manual setup, please read the [setup guide](guides/setup.md).\n\n### Configuration\n\nOf all config settings, only the `:otp_app`, and `:content_path` keys are mandatory.\n\n```elixir\n# lib/my_app_web/storybook.ex\ndefmodule MyAppWeb.Storybook do\n  use PhoenixStorybook,\n    # OTP name of your application.\n    otp_app: :my_app,\n\n    # Path to your storybook stories (required).\n    content_path: Path.expand(\"../storybook\", __DIR__),\n\n    # Path to your JS asset, which will be loaded just before PhoenixStorybook's own\n    # JS. It's mainly intended to define your LiveView Hooks in `window.storybook.Hooks`.\n    # Remote path (not local file-system path) which means this file should be served\n    # by your own application endpoint.\n    js_path: \"/assets/storybook.js\",\n\n    # Path to your components stylesheet.\n    # Remote path (not local file-system path) which means this file should be served\n    # by your own application endpoint.\n    css_path: \"/assets/storybook.css\",\n\n    # This CSS class will be put on storybook container elements where your own styles should\n    # prevail. See the `guides/sandboxing.md` guide for more details.\n    sandbox_class: \"my-app-sandbox\",\n\n    # Custom storybook title. Default is \"Live Storybook\".\n    title: \"My Live Storybook\",\n\n    # Theme settings.\n    # Each theme must have a name, and an optional dropdown_class.\n    # When set, a dropdown is displayed in storybook header to let the user pick a theme.\n    # The dropdown_class is used to render the theme in the dropdown and identify which current\n    # theme is active.\n    #\n    # The chosen theme key will be passed as an assign to all components.\n    # ex: \u003c.component theme={:colorful}/\u003e\n    #\n    # The chosen theme class will also be added to the `.psb-sandbox` container.\n    # ex: \u003cdiv class=\"psb-sandbox theme-colorful\"\u003e...\u003c/div\u003e\n    #\n    # If no theme has been selected or if no theme is present in the URL the first one is enabled.\n    themes: [\n      default: [name: \"Default\"],\n      colorful: [name: \"Colorful\", dropdown_class: \"text-pink-400\"]\n    ],\n\n    # Color mode settings. Defaults to false and 'dark'.\n    color_mode: true,\n    color_mode_sandbox_dark_class: \"dark\",\n\n    # If you want to use custom FontAwesome icons.\n    font_awesome_plan: :pro, # default value is :free\n    font_awesome_kit_id: \"foo8b41bar4625\",\n    font_awesome_rendering: :webfont, # default value is :svg\n\n    # Set to `false` if you want to keep attributes \u0026 slot documentations in component page header.\n    # Defaults to `true`.\n    strip_doc_attributes: false,\n\n    # Story compilation mode, can be either `:eager` or `:lazy`.\n    # It defaults to `:lazy` in dev environment, `:eager` in other environments.\n    #   - When eager: all .story.exs \u0026 .index.exs files are compiled upfront.\n    #   - When lazy: only .index.exs files are compiled upfront and .story.exs are compile when the\n    #     matching story is loaded in UI.\n    compilation_mode: :eager,\n\n    # If you want to see debugging logs for storybooks compilation, set this to `true`. Default: `false`\n    compilation_debug: true\n  ]\n```\n\nAll settings can be overridden from your config files.\n\n```elixir\n# config/config.exs\nconfig :my_app, MyAppWeb.Storybook,\n  compilation_mode: :lazy,\n  compilation_debug: :true\n```\n\n`phoenix_storybook` can also be completely disabled, per environment, with the following settings:\n\n```elixir\n# config/config.exs\nconfig :phoenix_storybook, enabled: false\n```\n\nℹ️ Learn more on theming components in the [theming guide](guides/theming.md), icons in the\n[icons](guides/icons.md) guide and color mode in the [color modes guide](guides/color_modes.md).\n\n\u003c!-- MDOC !--\u003e\n\n## Storybook in production\n\nA few storybooks running in production:\n\n- [Phenix Groupe](https://storybook.phenixgroupe.com/)\n- [SaladUI](https://salad-storybook.fly.dev/)\n- [Doggo](https://doggo.wlyx.dev/)\n- [Tremorx](https://tremorx.fly.dev/)\n- [Bloom](https://bloom-ui.fly.dev/)\n- [DaisyUI Components](https://daisy-ui-components-site.fly.dev/storybook/welcome)\n\n## Contributing\n\nWe would love your PRs!\n\n1. Pull down phoenix_storybook to a directory next to your project (`../phoenix_storybook`).\n2. Change your mix file to point to this directory:\n\n```elixir\n{:phoenix_storybook, path: \"../phoenix_storybook\"},\n```\n\n3. Run dev.storybook mix task from your project\n\n```bash\n$\u003e mix dev.storybook\n```\n\nAnd make sure you read the [CONTRIBUTING](CONTRIBUTING.md) guide.\nThat should get you running against HEAD and ready to dig into the code!\n\n## License\n\nMIT License. Copyright (c) 2022\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenixdigital%2Fphoenix_storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphenixdigital%2Fphoenix_storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenixdigital%2Fphoenix_storybook/lists"}