chore: Run `mix phx.gen.storybook`

assets/css/storybook.css

@@ -0,0 +1,15 @@
+/* This is your custom storybook stylesheet. */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/*
+ * Put your component styling within the Tailwind utilities layer. 
+ * See the https://hexdocs.pm/phoenix_storybook/sandboxing.html guide for more info.
+ */
+
+@layer utilities {
+  * {
+    font-family: system-ui;
+  }
+}

assets/js/storybook.js

@@ -0,0 +1,35 @@
+// If your components require any hooks or custom uploaders, or if your pages
+// require connect parameters, uncomment the following lines and declare them as
+// such:
+//
+// import * as Hooks from "./hooks";
+// import * as Params from "./params";
+// import * as Uploaders from "./uploaders";
+
+// (function () {
+//   window.storybook = { Hooks, Params, Uploaders };
+// })();
+
+
+// If your components require alpinejs, you'll need to start
+// alpine after the DOM is loaded and pass in an onBeforeElUpdated
+// 
+// import Alpine from 'alpinejs'
+// window.Alpine = Alpine
+// document.addEventListener('DOMContentLoaded', () => {
+//   window.Alpine.start();
+// });
+
+// (function () {
+//   window.storybook = {
+//     LiveSocketOptions: {
+//       dom: {
+//         onBeforeElUpdated(from, to) {
+//           if (from._x_dataStack) {
+//             window.Alpine.clone(from, to)
+//           }
+//         }
+//       }
+//     }
+//   };
+// })();

lib/medical_transcription_web/storybook.ex

@@ -0,0 +1,9 @@
+defmodule MedicalTranscriptionWeb.Storybook do
+  use PhoenixStorybook,
+    otp_app: :medical_transcription_web,
+    content_path: Path.expand("../../storybook", __DIR__),
+    # assets path are remote path, not local file-system paths
+    css_path: "/assets/storybook.css",
+    js_path: "/assets/storybook.js",
+    sandbox_class: "medical-transcription-web"
+end

storybook/_root.index.exs

@@ -0,0 +1,16 @@
+defmodule Storybook.Root do
+  # See https://hexdocs.pm/phoenix_storybook/PhoenixStorybook.Index.html for full index
+  # documentation.
+
+  use PhoenixStorybook.Index
+
+  def folder_icon, do: {:fa, "book-open", :light, "psb-mr-1"}
+  def folder_name, do: "Storybook"
+
+  def entry("welcome") do
+    [
+      name: "Welcome Page",
+      icon: {:fa, "hand-wave", :thin}
+    ]
+  end
+end

storybook/core_components/button.story.exs

@@ -0,0 +1,28 @@
+defmodule Storybook.CoreComponents.Button do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &MedicalTranscriptionWeb.CoreComponents.button/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: ["Button"]
+      },
+      %Variation{
+        id: :custom_class,
+        attributes: %{
+          class: "rounded-full bg-indigo-500 hover:bg-indigo-600"
+        },
+        slots: ["Disabled"]
+      },
+      %Variation{
+        id: :disabled,
+        attributes: %{
+          disabled: true
+        },
+        slots: ["Disabled"]
+      }
+    ]
+  end
+end

storybook/core_components/flash.story.exs

@@ -0,0 +1,47 @@
+defmodule Storybook.CoreComponents.Flash do
+  use PhoenixStorybook.Story, :component
+  alias MedicalTranscriptionWeb.CoreComponents
+
+  def function, do: &CoreComponents.flash/1
+  def imports, do: [{CoreComponents, [button: 1, show: 1]}]
+
+  def template do
+    """
+    <.button phx-click={show("#:variation_id")} psb-code-hidden>
+      Open flash
+    </.button>
+    <.psb-variation/>
+    """
+  end
+
+  def variations do
+    [
+      %Variation{
+        id: :info_no_title,
+        attributes: %{
+          kind: :info,
+          hidden: true
+        },
+        slots: ["Info message"]
+      },
+      %Variation{
+        id: :error_with_title,
+        attributes: %{
+          kind: :error,
+          hidden: true,
+          title: "Flash title"
+        },
+        slots: ["Error message"]
+      },
+      %Variation{
+        id: :no_close_button,
+        attributes: %{
+          kind: :info,
+          hidden: true,
+          close: false
+        },
+        slots: ["Info message"]
+      }
+    ]
+  end
+end

storybook/core_components/header.story.exs

@@ -0,0 +1,37 @@
+defmodule Storybook.CoreComponents.Header do
+  use PhoenixStorybook.Story, :component
+  alias MedicalTranscriptionWeb.CoreComponents
+
+  def function, do: &CoreComponents.header/1
+  def imports, do: [{CoreComponents, button: 1}]
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: [
+          "Hello World"
+        ]
+      },
+      %Variation{
+        id: :with_a_subtitle,
+        slots: [
+          "Hello World",
+          "<:subtitle>I'm a header subtitle</:subtitle>"
+        ]
+      },
+      %Variation{
+        id: :with_actions,
+        slots: [
+          "Hello World",
+          "<:subtitle>I'm a header subtitle</:subtitle>",
+          """
+          <:actions>
+            <.button>Link</.button>
+          </:actions>
+          """
+        ]
+      }
+    ]
+  end
+end

storybook/core_components/input.story.exs

@@ -0,0 +1,41 @@
+defmodule Storybook.CoreComponents.Input do
+  use PhoenixStorybook.Story, :component
+  alias MedicalTranscriptionWeb.CoreComponents
+
+  def function, do: &CoreComponents.input/1
+  def imports, do: [{CoreComponents, [simple_form: 1]}]
+
+  def template do
+    """
+    <.simple_form :let={f} for={%{}} as={:story} class="w-full">
+      <.psb-variation-group field={f[:field]}/>
+    </.simple_form>
+    """
+  end
+
+  def variations do
+    [
+      %VariationGroup{
+        id: :basic_inputs,
+        variations:
+          for type <- ~w(text textarea number date color range checkbox)a do
+            %Variation{
+              id: type,
+              attributes: %{
+                type: to_string(type),
+                label: String.capitalize("#{type} input")
+              }
+            }
+          end
+      },
+      %Variation{
+        id: :select,
+        attributes: %{
+          label: "Select input",
+          type: "select",
+          options: ["Option 1", "Option 2", "Option 3"]
+        }
+      }
+    ]
+  end
+end

storybook/core_components/list.story.exs

@@ -0,0 +1,17 @@
+defmodule Storybook.CoreComponents.List do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &MedicalTranscriptionWeb.CoreComponents.list/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: [
+          ~s|<:item title="Title">Elixir</:item>|,
+          ~s|<:item title="Rating">5/5</:item>|
+        ]
+      }
+    ]
+  end
+end

storybook/core_components/modal.story.exs

@@ -0,0 +1,25 @@
+defmodule Storybook.CoreComponents.Modal do
+  use PhoenixStorybook.Story, :component
+  alias MedicalTranscriptionWeb.CoreComponents
+
+  def function, do: &CoreComponents.modal/1
+  def imports, do: [{CoreComponents, [button: 1, hide_modal: 1, show_modal: 1]}]
+
+  def template do
+    """
+    <.button phx-click={show_modal(":variation_id")} psb-code-hidden>
+      Open modal
+    </.button>
+    <.psb-variation/>
+    """
+  end
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: ["Modal body"]
+      }
+    ]
+  end
+end

storybook/core_components/table.story.exs

@@ -0,0 +1,41 @@
+defmodule Storybook.CoreComponents.Table do
+  use PhoenixStorybook.Story, :component
+  alias MedicalTranscriptionWeb.CoreComponents
+
+  def function, do: &CoreComponents.table/1
+  def aliases, do: [Storybook.CoreComponents.Table.User]
+
+  def variations do
+    [
+      %Variation{
+        id: :table,
+        attributes: %{
+          rows:
+            {:eval,
+             ~s"""
+             [
+               %User{id: 1, username: "jose"},
+               %User{id: 2, username: "chris"}
+             ]
+             """}
+        },
+        slots: [
+          """
+          <:col :let={user} label="Id">
+            <%= user.id %>
+          </:col>
+          """,
+          """
+          <:col :let={user} label="User name">
+            <%= user.username %>
+          </:col>
+          """
+        ]
+      }
+    ]
+  end
+end
+
+defmodule Storybook.CoreComponents.Table.User do
+  defstruct [:id, :username]
+end

storybook/examples/core_components.story.exs

@@ -0,0 +1,84 @@
+defmodule Storybook.Examples.CoreComponents do
+  use PhoenixStorybook.Story, :example
+  import MedicalTranscriptionWeb.CoreComponents
+
+  alias Phoenix.LiveView.JS
+
+  def doc do
+    "An example of what you can achieve with Phoenix core components."
+  end
+
+  defstruct [:id, :first_name, :last_name]
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok,
+     assign(socket,
+       current_id: 2,
+       users: [
+         %__MODULE__{id: 1, first_name: "Jose", last_name: "Valim"},
+         %__MODULE__{
+           id: 2,
+           first_name: "Chris",
+           last_name: "McCord"
+         }
+       ]
+     )}
+  end
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <.header>
+      List of users
+      <:subtitle>Feel free to add any missing user!</:subtitle>
+      <:actions>
+        <.button phx-click={show_modal("new-user-modal")}>Create user</.button>
+      </:actions>
+    </.header>
+    <.table id="user-table" rows={@users}>
+      <:col :let={user} label="Id">
+        <%= user.id %>
+      </:col>
+      <:col :let={user} label="First name">
+        <%= user.first_name %>
+      </:col>
+      <:col :let={user} label="Last name">
+        <%= user.last_name %>
+      </:col>
+    </.table>
+    <.modal id="new-user-modal">
+      <.header>
+        Create new user
+        <:subtitle>This won't be persisted into DB, memory only</:subtitle>
+      </.header>
+      <.simple_form
+        :let={f}
+        for={%{}}
+        as={:user}
+        phx-submit={JS.push("save_user") |> hide_modal("new-user-modal")}
+      >
+        <.input field={f[:first_name]} label="First name" />
+        <.input field={f[:last_name]} label="Last name" />
+        <:actions>
+          <.button>Save user</.button>
+        </:actions>
+      </.simple_form>
+    </.modal>
+    """
+  end
+
+  @impl true
+  def handle_event("save_user", %{"user" => params}, socket) do
+    user = %__MODULE__{
+      first_name: params["first_name"],
+      last_name: params["last_name"],
+      id: socket.assigns.current_id + 1
+    }
+
+    {:noreply,
+     socket
+     |> update(:users, &(&1 ++ [user]))
+     |> update(:current_id, &(&1 + 1))}
+  end
+end

storybook/welcome.story.exs

@@ -0,0 +1,100 @@
+defmodule Storybook.MyPage do
+  # See https://hexdocs.pm/phoenix_storybook/PhoenixStorybook.Story.html for full story
+  # documentation.
+  use PhoenixStorybook.Story, :page
+
+  def doc, do: "Your very first steps into using Phoenix Storybook"
+
+  # Declare an optional tab-based navigation in your page:
+  def navigation do
+    [
+      {:welcome, "Welcome", {:fa, "hand-wave", :thin}},
+      {:components, "Components", {:fa, "toolbox", :thin}},
+      {:sandboxing, "Sandboxing", {:fa, "box-check", :thin}},
+      {:icons, "Icons", {:fa, "icons", :thin}}
+    ]
+  end
+
+  # This is a dummy fonction that you should replace with your own HEEx content.
+  def render(assigns = %{tab: :welcome}) do
+    ~H"""
+    <div class="psb-welcome-page">
+      <p>
+        We generated your storybook with an example of a page and a component.
+        Explore the generated <code class="psb-inline">*.story.exs</code>
+        files in your <code class="inline">/storybook</code>
+        directory. When you're ready to add your own, just drop your new story & index files into the same directory and refresh your storybook.
+      </p>
+
+      <p>
+        Here are a few docs you might be interested in:
+      </p>
+
+      <.description_list items={[
+        {"Create a new Story", doc_link("Story")},
+        {"Display components using Variations", doc_link("Stories.Variation")},
+        {"Group components using VariationGroups", doc_link("Stories.VariationGroup")},
+        {"Organize the sidebar with Index files", doc_link("Index")}
+      ]} />
+
+      <p>
+        This should be enough to get you started, but you can use the tabs in the upper-right corner of this page to <strong>check out advanced usage guides</strong>.
+      </p>
+    </div>
+    """
+  end
+
+  def render(assigns = %{tab: guide}) when guide in ~w(components sandboxing icons)a do
+    assigns =
+      assign(assigns,
+        guide: guide,
+        guide_content: PhoenixStorybook.Guides.markup("#{guide}.md")
+      )
+
+    ~H"""
+    <p class="md:psb-text-lg psb-leading-relaxed psb-text-slate-400 psb-w-full psb-text-left psb-mb-4 psb-mt-2 psb-italic">
+      <a
+        class="hover:text-indigo-700"
+        href={"https://hexdocs.pm/phoenix_storybook/#{@guide}.html"}
+        target="_blank"
+      >
+        This and other guides are also available on HexDocs.
+      </a>
+    </p>
+    <div class="psb-welcome-page psb-border-t psb-border-gray-200 psb-pt-4">
+      <%= Phoenix.HTML.raw(@guide_content) %>
+    </div>
+    """
+  end
+
+  defp description_list(assigns) do
+    ~H"""
+    <div class="psb-w-full md:psb-px-8">
+      <div class="md:psb-border-t psb-border-gray-200 psb-px-4 psb-py-5 sm:psb-p-0 md:psb-my-6 psb-w-full">
+        <dl class="sm:psb-divide-y sm:psb-divide-gray-200">
+          <%= for {dt, link} <- @items do %>
+            <div class="psb-py-4 sm:psb-grid sm:psb-grid-cols-3 sm:psb-gap-4 sm:psb-py-5 sm:psb-px-6 psb-max-w-full">
+              <dt class="psb-text-base psb-font-medium psb-text-indigo-700">
+                <%= dt %>
+              </dt>
+              <dd class="psb-mt-1 psb-text-base psb-text-slate-400 sm:psb-col-span-2 sm:psb-mt-0 psb-group psb-cursor-pointer psb-max-w-full">
+                <a
+                  class="group-hover:psb-text-indigo-700 psb-max-w-full psb-inline-block psb-truncate"
+                  href={link}
+                  target="_blank"
+                >
+                  <%= link %>
+                </a>
+              </dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+    </div>
+    """
+  end
+
+  defp doc_link(page) do
+    "https://hexdocs.pm/phoenix_storybook/PhoenixStorybook.#{page}.html"
+  end
+end