From ae91c61111d85fd710878293a0590ce3a0ebcc3a Mon Sep 17 00:00:00 2001
From: Mathias Polligkeit <git@woylie.de>
Date: Wed, 13 Dec 2023 08:07:09 +0900
Subject: [PATCH] add instructions for storybook

---
 README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/README.md b/README.md
index 69808bef..2a1ddff4 100644
--- a/README.md
+++ b/README.md
@@ -15,11 +15,53 @@ def deps do
 end
 ```
 
+### Gettext
+
 To allow Doggo to translate certain strings such as form field errors with
 Gettext, set your Gettext module in `config/config.exs`:
 
     config :doggo, gettext: MyApp.Gettext
 
+### Storybook
+
+The library is equipped with story modules for
+[Phoenix Storybook](https://hex.pm/packages/phoenix_storybook). After you
+followed the installation instructions of Phoenix Storybook, you can configure a
+storybook module for Doggo in your application as follows:
+
+```elixir
+defmodule MyAppWeb.Storybook.Doggo do
+  use PhoenixStorybook,
+    otp_app: :my_app_web,
+    content_path: Path.join(:code.priv_dir(:doggo), "/storybook"),
+    title: "Doggo Storybook",
+    css_path: "/assets/storybook.css",
+    js_path: "/assets/storybook.js",
+    sandbox_class: "my-app-web"
+end
+```
+
+The important option here is `content_path`, which points to the storybook
+directory in the `priv` folder of Doggo. Adjust the rest of the option to the
+needs of your application.
+
+In your router, add the Doggo storybook as a second storybook and change the
+path of your application storybook to avoid path conflicts.
+
+```elixir
+scope "/", MyAppWeb do
+  pipe_through :browser
+
+  live_storybook("/storybook/app", backend_module: MyAppWeb.Storybook)
+
+  live_storybook("/storybook/doggo",
+    backend_module: MyAppWeb.Storybook.Doggo,
+    session_name: :live_storybook_doggo,
+    pipeline: false
+  )
+end
+```
+
 ## Design decisions
 
 - Favor semantic HTML elements over CSS classes for structure and clarity.