Phoenix Storybook

https://hexdocs.pm/phoenix_storybook/v0.9.3/
Admin
Phoenix Storybook provides a storybook-like UI interface for Phoenix components, allowing users to...
Tokens:1,955
Snippets:7
Trust Score:9.7
Update:11 months ago
Show doc for...
Tokens:
Raw
### Installing PhoenixStorybook Dependency and Generator in Elixir

Source: https://hexdocs.pm/phoenix_storybook/v0.9.3/phoenix_storybook/PhoenixStorybook

This snippet demonstrates adding the PhoenixStorybook dependency to a Phoenix application's mix.exs file and running the necessary Mix commands to install and generate the storybook setup. The dependency fetch is handled via mix deps.get, followed by the generator for automatic configuration. It supports Elixir-based Phoenix apps and requires the otp_app and content_path in configuration; limitations include needing manual asset compilation for GitHub versions.

```Elixir
def deps do
  [
    {:phoenix_storybook, "~> 0.9.0"}
  ]
end
```

```Shell
mix deps.get
```

```Shell
mix phx.gen.storybook
```

--------------------------------

### Configure Phoenix Storybook Module

Source: https://hexdocs.pm/phoenix_storybook/v0.9.3/phoenix_storybook/PhoenixStorybook

Defines the `MyAppWeb.Storybook` module using the `PhoenixStorybook` macro. This configuration sets up essential paths, theming, color modes, and compilation behavior for the storybook.

```elixir
defmodule MyAppWeb.Storybook do
  use PhoenixStorybook,
    # OTP name of your application.
    otp_app: :my_app,

    # Path to your storybook stories (required).
    content_path: Path.expand("../storybook", __DIR__),

    # Path to your JS asset, which will be loaded just before PhoenixStorybook's own
    # JS. It's mainly intended to define your LiveView Hooks in `window.storybook.Hooks`.
    # Remote path (not local file-system path) which means this file should be served
    # by your own application endpoint.
    js_path: "/assets/storybook.js",

    # Path to your components stylesheet.
    # Remote path (not local file-system path) which means this file should be served by your own
    # application endpoint.
    # This stylesheet is loaded within the `app` CSS layer. Layer ordering is:
    # @layer reset, theme, app, utilities;
    css_path: "/assets/storybook.css",

    # This CSS class will be put on storybook container elements where your own styles should
    # prevail. See the `guides/sandboxing.md` guide for more details.
    sandbox_class: "my-app-sandbox",

    # Custom storybook title. Default is "Live Storybook".
    title: "My Live Storybook",

    # Theme settings.
    # Each theme must have a name, and an optional dropdown_class.
    # When set, a dropdown is displayed in storybook header to let the user pick a theme.
    # The dropdown_class is used to render the theme in the dropdown and identify which current
    # theme is active.
    #
    # The chosen theme key will be passed as an assign to all components.
    # ex: <.component theme={:colorful}/>
    #
    # The chosen theme class will also be added to the `.psb-sandbox` container.
    # ex: <div class="psb-sandbox theme-colorful">...</div>
    #
    # If no theme has been selected or if no theme is present in the URL the first one is enabled.
    themes: [
      default: [name: "Default"],
      colorful: [name: "Colorful", dropdown_class: "text-pink-400"]
    ],

    # Color mode settings. Defaults to false and 'dark'.
    color_mode: true,
    color_mode_sandbox_dark_class: "dark",

    # If you want to use custom FontAwesome icons.
    font_awesome_plan: :pro, # default value is :free
    font_awesome_kit_id: "foo8b41bar4625",
    font_awesome_rendering: :webfont, # default value is :svg

    # Set to `false` if you want to keep attributes & slot documentations in component page header.
    # Defaults to `true`.
    strip_doc_attributes: false,

    # Story compilation mode, can be either `:eager` or `:lazy`.
    # It defaults to `:lazy` in dev environment, `:eager` in other environments.
    #   - When eager: all .story.exs & .index.exs files are compiled upfront.
    #   - When lazy: only .index.exs files are compiled upfront and .story.exs are compile when the
    #     matching story is loaded in UI.
    compilation_mode: :eager,

    # If you want to see debugging logs for storybooks compilation, set this to `true`. Default: `false`
    compilation_debug: true
  ]

```

--------------------------------

### Enable/Disable Phoenix Storybook Application

Source: https://hexdocs.pm/phoenix_storybook/v0.9.3/phoenix_storybook/PhoenixStorybook

Configures the `:phoenix_storybook` application itself, controlling its enabled state and asset handling like gzipping and fingerprinting.

```elixir
# default: `true`
config :phoenix_storybook, enabled: false

# default: `false`
config :phoenix_storybook, gzip_assets: true

# default: `false`
config :phoenix_storybook, fingerprint_assets: true
```

--------------------------------

### Override Storybook Compilation Mode

Source: https://hexdocs.pm/phoenix_storybook/v0.9.3/phoenix_storybook/PhoenixStorybook

Configures the storybook compilation mode to be `:lazy` and enables compilation debugging in the application's configuration file.

```elixir
config :my_app, MyAppWeb.Storybook,
  compilation_mode: :lazy,
  compilation_debug: :true
```
Tokens:
Raw