### 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: