Upgrade deps, add storybook (#4947)

* Add `<.dropdown_item>`

* Make the ellipsis menu functional again

* Upgrade deps so that storybook can be added

* Add storybook and dropdown story

* Remove lingering warnings/errors

* Add color mode to storybook

* Use new liveview used_input? function

* Alpine improvements

* Add select input to storybook

* Bring back `render_form` for CRM

* Configure eslint so it can see deps

* Remove LiveViewTest patch

* Fix test for phoenix liveview 1.0

* Build assets in prod

* Fix tests

* Attempt to fix lint error

* Add explicit text color to input

* mix format

* Format after merge master

* Add moduledocs

* Only run storybook in production

* Update storybook dependency

* Mix format

.formatter.exs

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

Dockerfile

@@ -41,6 +41,7 @@ COPY tracker ./tracker
 COPY priv ./priv
 COPY lib ./lib
 COPY extra ./extra
+COPY storybook ./storybook
 
 RUN npm run deploy --prefix ./tracker && \
   mix assets.deploy && \

assets/.eslintrc.json

@@ -50,6 +50,9 @@
     "import/resolver": {
       "typescript": {
         "alwaysTryTypes": true // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+      },
+      "node": {
+        "moduleDirectory": ["node_modules", "../deps"]
       }
     },
     "react": {

assets/css/storybook.css

@@ -0,0 +1,14 @@
+@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/liveview/live_socket.js

@@ -1,7 +1,11 @@
+// eslint-disable-next-line import/no-unresolved
 import "phoenix_html"
-import Alpine from 'alpinejs'
+// eslint-disable-next-line import/no-unresolved
 import { Socket } from "phoenix"
+// eslint-disable-next-line import/no-unresolved
 import { LiveSocket } from "phoenix_live_view"
+// eslint-disable-next-line import/no-unresolved
+import Alpine from 'alpinejs'
 
 let csrfToken = document.querySelector("meta[name='csrf-token']")
 let websocketUrl = document.querySelector("meta[name='websocket-url']")

assets/js/storybook.js

@@ -0,0 +1,39 @@
+import Alpine from 'alpinejs'
+import dropdown from "./liveview/dropdown"
+
+// 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 };
+// })();
+
+
+window.Alpine = Alpine
+document.addEventListener('DOMContentLoaded', () => {
+  window.Alpine.start();
+});
+
+document.addEventListener('alpine:init', () => {
+  window.Alpine.data('dropdown', dropdown)
+});
+
+
+ (function () {
+   window.storybook = {
+     LiveSocketOptions: {
+       dom: {
+         onBeforeElUpdated(from, to) {
+           if (from._x_dataStack) {
+             window.Alpine.clone(from, to)
+           }
+         }
+       }
+     }
+   };
+ })();

assets/package.json

@@ -30,9 +30,6 @@
     "d3": "^7.9.0",
     "dayjs": "^1.11.7",
     "iframe-resizer": "^4.3.2",
-    "phoenix": "^1.7.2",
-    "phoenix_html": "^3.3.1",
-    "phoenix_live_view": "^0.18.18",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-flatpickr": "3.10.5",

assets/tailwind.config.js

@@ -14,6 +14,7 @@ module.exports = {
     "max-w-screen-xl"
   ],
   darkMode: 'class',
+  important: '.plausible',
   theme: {
     container: {
       center: true,
@@ -51,7 +52,6 @@ module.exports = {
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),
-    plugin(({ addVariant }) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
     plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
     plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),

config/config.exs

@@ -20,7 +20,7 @@ config :esbuild,
   version: "0.17.11",
   default: [
     args:
-      ~w(js/app.js js/dashboard.tsx js/embed.host.js js/embed.content.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/js --define:BUILD_EXTRA=true),
+      ~w(js/app.js js/storybook.js js/dashboard.tsx js/embed.host.js js/embed.content.js --bundle --target=es2017 --loader:.js=jsx --outdir=../priv/static/js --define:BUILD_EXTRA=true),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
@@ -34,6 +34,14 @@ config :tailwind,
       --output=../priv/static/css/app.css
     ),
     cd: Path.expand("../assets", __DIR__)
+  ],
+  storybook: [
+    args: ~w(
+    --config=tailwind.config.js
+    --input=css/storybook.css
+    --output=../priv/static/css/storybook.css
+  ),
+    cd: Path.expand("../assets", __DIR__)
   ]
 
 config :ua_inspector,

config/dev.exs

@@ -8,6 +8,7 @@ config :plausible, PlausibleWeb.Endpoint,
   watchers: [
     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
     tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
+    storybook_tailwind: {Tailwind, :install_and_run, [:storybook, ~w(--watch)]},
     npm: ["--prefix", "assets", "run", "typecheck", "--", "--watch", "--preserveWatchOutput"],
     npm: [
       "run",
@@ -21,7 +22,8 @@ config :plausible, PlausibleWeb.Endpoint,
     ],
     patterns: [
       ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
-      ~r"lib/plausible_web/(controllers|live|components|templates|views|plugs)/.*(ex|heex)$"
+      ~r"lib/plausible_web/(controllers|live|components|templates|views|plugs)/.*(ex|heex)$",
+      ~r"storybook/.*(exs)$"
     ]
   ]
 

config/runtime.exs

@@ -969,3 +969,5 @@ unless s3_disabled? do
     exports_bucket: s3_env_value.("S3_EXPORTS_BUCKET"),
     imports_bucket: s3_env_value.("S3_IMPORTS_BUCKET")
 end
+
+config :phoenix_storybook, enabled: env !== "prod"

extra/lib/plausible_web/live/funnel_settings.ex

@@ -48,15 +48,15 @@ defmodule PlausibleWeb.Live.FunnelSettings do
       <.flash_messages flash={@flash} />
 
       <%= if @setup_funnel? do %>
-        <%= live_render(
+        {live_render(
           @socket,
           PlausibleWeb.Live.FunnelSettings.Form,
           id: "funnels-form",
           session: %{
             "domain" => @domain,
             "funnel_id" => @funnel_id
           }
-        ) %>
+        )}
       <% end %>
       <div :if={@goal_count >= Funnel.min_steps()}>
         <.live_component

extra/lib/plausible_web/live/funnel_settings/form.ex

@@ -64,7 +64,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
             class="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8"
           >
             <.title class="mb-6">
-              <%= if @funnel, do: "Edit", else: "Add" %> Funnel
+              {if @funnel, do: "Edit", else: "Add"} Funnel
             </.title>
 
             <.input
@@ -136,7 +136,7 @@ defmodule PlausibleWeb.Live.FunnelSettings.Form do
                     length(@step_ids) > map_size(@selections_made)
                 }
               >
-                <span><%= if @funnel, do: "Update", else: "Add" %> Funnel</span>
+                <span>{if @funnel, do: "Update", else: "Add"} Funnel</span>
               </.button>
             </div>
           </.form>

extra/lib/plausible_web/live/funnel_settings/list.ex

@@ -22,11 +22,11 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
         <.table rows={@funnels}>
           <:tbody :let={funnel}>
             <.td truncate>
-              <span class="font-medium"><%= funnel.name %></span>
+              <span class="font-medium">{funnel.name}</span>
             </.td>
             <.td hide_on_mobile>
               <span class="text-gray-500 dark:text-gray-400">
-                <%= funnel.steps_count %>-step funnel
+                {funnel.steps_count}-step funnel
               </span>
             </.td>
             <.td actions>

extra/lib/plausible_web/views/help_scout_view.ex

@@ -17,15 +17,15 @@ defmodule PlausibleWeb.HelpScoutView do
 
       <%= if @conn.assigns[:error] do %>
         <p>
-          Failed to get details: <%= @error %>
+          Failed to get details: {@error}
         </p>
       <% else %>
         <div class="status">
           <p class="label">
             Status
           </p>
           <p class="value">
-            <a href={@status_link} target="_blank"><%= @status_label %></a>
+            <a href={@status_link} target="_blank">{@status_label}</a>
           </p>
         </div>
 
@@ -34,13 +34,13 @@ defmodule PlausibleWeb.HelpScoutView do
             Plan
           </p>
           <p class="value">
-            <a href={@plan_link} target="_blank"><%= @plan_label %></a>
+            <a href={@plan_link} target="_blank">{@plan_label}</a>
           </p>
         </div>
 
         <div class="sites">
           <p class="label">
-            Owner of <b><a href={@sites_link} target="_blank"><%= @sites_count %> sites</a></b>
+            Owner of <b><a href={@sites_link} target="_blank">{@sites_count} sites</a></b>
           </p>
           <p class="value"></p>
         </div>
@@ -51,7 +51,7 @@ defmodule PlausibleWeb.HelpScoutView do
           </p>
 
           <div class="value">
-            <%= Phoenix.HTML.Format.text_to_html(@notes, escape: true) %>
+            {PhoenixHTMLHelpers.Format.text_to_html(@notes, escape: true)}
           </div>
         </div>
       <% end %>
@@ -64,7 +64,7 @@ defmodule PlausibleWeb.HelpScoutView do
     <.layout>
       <%= if @conn.assigns[:error] do %>
         <p>
-          Failed to run search: <%= @error %>
+          Failed to run search: {@error}
         </p>
       <% else %>
         <div class="search">
@@ -82,7 +82,7 @@ defmodule PlausibleWeb.HelpScoutView do
                 onclick={"loadContent('/helpscout/show?#{URI.encode_query(email: user.email, conversation_id: @conversation_id, customer_id: @customer_id)}')"}
                 href="#"
               >
-                <%= user.email %> (<%= user.sites_count %> sites)
+                {user.email} ({user.sites_count} sites)
               </a>
             </li>
           </ul>
@@ -160,7 +160,7 @@ defmodule PlausibleWeb.HelpScoutView do
 
         <body>
           <div id="content">
-            <%= render_slot(@inner_block) %>
+            {render_slot(@inner_block)}
           </div>
 
           <script type="text/javascript">

lib/plausible/billing/ecto/feature.ex

@@ -33,7 +33,7 @@ end
 
 defmodule Plausible.Billing.Ecto.FeatureList do
   @moduledoc """
-  Ecto type representing a list of features. This is a proxy for 
+  Ecto type representing a list of features. This is a proxy for
   `{:array, Plausible.Billing.Ecto.Feature}` and is required for Kaffy to
   render the HTML input correctly.
   """
@@ -52,23 +52,16 @@ defmodule Plausible.Billing.Ecto.FeatureList do
       for mod <- Plausible.Billing.Feature.list(), not mod.free?() do
         [
           {:safe, ~s(<label style="padding-right: 15px;">)},
-          Phoenix.HTML.Tag.tag(
-            :input,
-            name: Phoenix.HTML.Form.input_name(form, field) <> "[]",
-            id: Phoenix.HTML.Form.input_id(form, field, mod.name()),
-            type: "checkbox",
-            value: mod.name(),
-            style: "margin-right: 3px;",
-            checked: mod in features
-          ),
+          {:safe,
+           ~s(<input type="checkbox" name="#{form.name}[#{field}][]" "#{form.name}_#{field}_#{mod.name()}" value="#{mod.name()}" style="margin-right: 3px;" #{if mod in features, do: "checked", else: ""}>)},
           mod.display_name(),
           {:safe, ~s(</label>)}
         ]
       end
 
     [
       {:safe, ~s(<div class="form-group">)},
-      Phoenix.HTML.Form.label(form, field),
+      {:safe, ~s(<label for="#{form.name}_#{field}">#{Phoenix.Naming.humanize(field)}</label>)},
       {:safe, ~s(<div class="form-control">)},
       checkboxes,
       {:safe, ~s(</div>)},

lib/plausible/billing/ecto/limit.ex

@@ -25,14 +25,9 @@ defmodule Plausible.Billing.Ecto.Limit do
 
     [
       {:safe, ~s(<div class="form-group">)},
-      Phoenix.HTML.Form.label(form, field),
-      Phoenix.HTML.Form.number_input(form, field,
-        class: "form-control",
-        name: "#{form.name}[#{field}]",
-        id: "#{form.name}_#{field}",
-        value: value,
-        min: -1
-      ),
+      {:safe, ~s(<label for="#{form.name}_#{field}">#{Phoenix.Naming.humanize(field)}</label>)},
+      {:safe,
+       ~s(<input id="#{form.name}_#{field}" name="#{form.name}[#{field}]" class="form-control" value="#{value}" min="-1" type="number" />)},
       {:safe, ~s(<p class="help_text">Use -1 for unlimited.</p>)},
       {:safe, ~s(</div>)}
     ]

lib/plausible_web.ex

@@ -60,7 +60,6 @@ defmodule PlausibleWeb do
 
       use Phoenix.Component
 
-      import PlausibleWeb.ErrorHelpers
       import PlausibleWeb.Components.Generic
       import PlausibleWeb.Live.Components.Form
       alias PlausibleWeb.Router.Helpers, as: Routes