chore: Set up Phoenix Storybook

.formatter.exs

@@ -2,5 +2,10 @@
   import_deps: [:ecto, :ecto_sql, :phoenix],
   subdirectories: ["priv/*/migrations"],
   plugins: [Phoenix.LiveView.HTMLFormatter],
-  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
+  inputs: [
+    "*.{heex,ex,exs}",
+    "{config,lib,test}/**/*.{heex,ex,exs}",
+    "priv/*/seeds.exs",
+    "storybook/**/*.exs"
+  ]
 ]

config/config.exs

@@ -39,7 +39,7 @@ config :esbuild,
   version: "0.17.11",
   default: [
     args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js js/storybook.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
@@ -54,6 +54,14 @@ config :tailwind,
       --output=../priv/static/assets/app.css
     ),
     cd: Path.expand("../assets", __DIR__)
+  ],
+  storybook: [
+    args: ~w(
+      --config=tailwind.config.js
+      --input=css/storybook.css
+      --output=../priv/static/assets/storybook.css
+    ),
+    cd: Path.expand("../assets", __DIR__)
   ]
 
 # Configures Elixir's Logger

config/dev.exs

@@ -24,7 +24,8 @@ config :medical_transcription, MedicalTranscriptionWeb.Endpoint,
   secret_key_base: "3ICLTmbvFUJcjcL/6pzpRWgbD1UicqH03RCiGipnenfWVkzUOT6jf8pjD6u4Xa++",
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
-    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
+    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
+    storybook_tailwind: {Tailwind, :install_and_run, [:storybook, ~w(--watch)]}
   ]
 
 # ## SSL Support
@@ -56,11 +57,12 @@ config :medical_transcription, MedicalTranscriptionWeb.Endpoint,
     patterns: [
       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
       ~r"priv/gettext/.*(po)$",
-      ~r"lib/medical_transcription_web/(controllers|live|components)/.*(ex|heex)$"
+      ~r"lib/medical_transcription_web/(controllers|live|components)/.*(ex|heex)$",
+      ~r"storybook/.*(exs)$"
     ]
   ]
 
-# Enable dev routes for dashboard and mailbox
+# Enable dev routes for dashboard, mailbox, and Phoenix storybook
 config :medical_transcription, dev_routes: true
 
 # Do not include metadata nor timestamps in development logs

lib/medical_transcription_web/router.ex

@@ -1,5 +1,6 @@
 defmodule MedicalTranscriptionWeb.Router do
   use MedicalTranscriptionWeb, :router
+  import PhoenixStorybook.Router
 
   pipeline :browser do
     plug :accepts, ["html"]
@@ -40,5 +41,15 @@ defmodule MedicalTranscriptionWeb.Router do
       live_dashboard "/dashboard", metrics: MedicalTranscriptionWeb.Telemetry
       forward "/mailbox", Plug.Swoosh.MailboxPreview
     end
+
+    scope "/" do
+      storybook_assets()
+    end
+
+    scope "/", MedicalTranscriptionWeb do
+      pipe_through :browser
+
+      live_storybook("/storybook", backend_module: MedicalTranscriptionWeb.Storybook)
+    end
   end
 end