### 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:
...
# # 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 ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.