Live Demo and performance documentation

README.md

@@ -43,7 +43,7 @@ Add `corex` to your `mix.exs` dependencies:
 ```elixir
 def deps do
   [
-    {:corex, "~> 0.1.0-alpha.19"}
+    {:corex, "~> 0.1.0-alpha.21"}
   ]
 end
 ```
@@ -355,22 +355,43 @@ In order to use the API, you must use an id on the component
   end
   ```
 
-## Components
-
-Now that Corex is installed, explore the component documentation:
-
-- [Accordion](https://hexdocs.pm/corex/Corex.Accordion.html)
-- [Checkbox](https://hexdocs.pm/corex/Corex.Checkbox.html)
-- [Clipboard](https://hexdocs.pm/corex/Corex.Clipboard.html)
-- [Collapsible](https://hexdocs.pm/corex/Corex.Collapsible.html)
-- [Combobox](https://hexdocs.pm/corex/Corex.Combobox.html)
-- [Date Picker](https://hexdocs.pm/corex/Corex.DatePicker.html)
-- [Dialog](https://hexdocs.pm/corex/Corex.Dialog.html)
-- [Select](https://hexdocs.pm/corex/Corex.Select.html)
-- [Switch](https://hexdocs.pm/corex/Corex.Switch.html)
-- [Tabs](https://hexdocs.pm/corex/Corex.Tabs.html)
-- [Toast](https://hexdocs.pm/corex/Corex.Toast.html)
-- [Toggle Group](https://hexdocs.pm/corex/Corex.ToggleGroup.html)
+## Performance
+
+By default Phoenix esbuild is set to bundle all the JS into a single file.
+
+### 1.Enable splitting
+
+In order to enable splitting add the following `--format=esm --splitting` to your esbuild config
+
+```elixir
+config :esbuild,
+  version: "0.25.4",
+  e2e: [
+    args:
+      ~w(js/app.js --bundle --format=esm --splitting --target=es2022 --outdir=../priv/static/assets/js --external:/fonts/* --external:/images/* --alias:@=.),
+    cd: Path.expand("../assets", __DIR__),
+    env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}
+  ]
+```
+
+Run `mix assets.build` and see the magic happening
+
+### 2.Enable gzip for Plug.Static
+
+In your `endpoint.ex` enable gzip for developement also
+
+```elexir
+  plug Plug.Static,
+    at: "/",
+    from: :e2e,
+    gzip: true,
+    only: E2eWeb.static_paths(),
+    raise_on_missing_only: code_reloading?
+```
+
+See the [Production guide](https://hexdocs.pm/corex/production.html) for the final build in production environnement
+
+## Documentation
 
 Full Hex Documentation is available at [http://hexdocs.pm/corex](http://hexdocs.pm/corex)
 

e2e/.tool-versions

@@ -0,0 +1,2 @@
+elixir 1.19.5-otp-28
+erlang 28.3.1

e2e/config/dev.exs

@@ -21,7 +21,7 @@ config :e2e, E2eWeb.Endpoint,
   # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
   http: [ip: {127, 0, 0, 1}],
   check_origin: false,
-  code_reloader: false,
+  code_reloader: true,
   debug_errors: true,
   secret_key_base: "JQ3bjpj3drUYoLh2G4QBZr8KpmxWvAJGLV6DZzv9mIRqOkQqhpZwtu9np9fwDeSX",
   watchers: [

e2e/lib/e2e_web/controllers/page_html/home.html.heex

@@ -40,7 +40,7 @@
       </a>
       <button
         phx-click={Corex.Dialog.set_open("menu-dialog", true)}
-        class="button md:button--lg w-full md:w-auto"
+        class="button md:button--lg w-full md:w-auto lg:hidden"
       >
         Examples
         <svg
@@ -59,6 +59,27 @@
           </path>
         </svg>
       </button>
+      <.button
+        href={~p"/#{@locale}/accordion"}
+        class="button md:button--lg w-full md:w-auto hidden lg:flex"
+      >
+        Examples
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+          >
+          </path>
+        </svg>
+      </.button>
     </div>
   </section>
 </Layouts.app>

e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex

@@ -5,10 +5,10 @@
   <section class="layout__section">
     <div class="layout__row">
       <button
-        phx-click={Corex.TreeView.set_expanded_value("my-tree", ["node_modules", "src"])}
+        phx-click={Corex.TreeView.set_expanded_value("my-tree", ["accordion", "checkbox"])}
         class="button button--sm"
       >
-        Expand node_modules & src
+        Expand Accordion & Checkbox
       </button>
       <button
         phx-click={Corex.TreeView.set_expanded_value("my-tree", [])}
@@ -17,10 +17,10 @@
         Collapse all
       </button>
       <button
-        phx-click={Corex.TreeView.set_selected_value("my-tree", ["package.json"])}
+        phx-click={Corex.TreeView.set_selected_value("my-tree", ["/#{@locale}/accordion"])}
         class="button button--sm"
       >
-        Select package.json
+        Select Controller (Accordion)
       </button>
       <button
         phx-click={Corex.TreeView.set_selected_value("my-tree", [])}

e2e/lib/e2e_web/endpoint.ex

@@ -15,20 +15,13 @@ defmodule E2eWeb.Endpoint do
     websocket: [connect_info: [:uri, session: @session_options]],
     longpoll: [connect_info: [:uri, session: @session_options]]
 
-  # Serve at "/" the static files from "priv/static" directory.
-  #
-  # When code reloading is disabled (e.g., in production),
-  # the `gzip` option is enabled to serve compressed
-  # static files generated by running `phx.digest`.
   plug Plug.Static,
     at: "/",
     from: :e2e,
-    gzip: not code_reloading?,
+    gzip: true,
     only: E2eWeb.static_paths(),
     raise_on_missing_only: code_reloading?
 
-  # plug Plug.Static, at: "/corex", from: {:corex, "priv/static"}
-
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.
   if code_reloading? do

e2e/lib/e2e_web/live/tree_view_live.ex

@@ -1,15 +1,54 @@
 defmodule E2eWeb.TreeViewLive do
   use E2eWeb, :live_view
 
-  def mount(_params, _session, socket) do
+  def mount(%{"locale" => locale} = _params, _session, socket) do
     socket =
       socket
       |> assign(:tree_expanded_value, nil)
       |> assign(:tree_selected_value, nil)
+      |> assign(:default_items, default_items(locale))
 
     {:ok, socket}
   end
 
+  defp default_items(locale) do
+    Corex.Tree.new([
+      [
+        label: "Accordion",
+        id: "accordion",
+        children: [
+          [label: "Controller", id: "/#{locale}/accordion"],
+          [label: "Live", id: "/#{locale}/live/accordion"],
+          [
+            label: "More",
+            id: "accordion-more",
+            children: [
+              [label: "Playground", id: "/#{locale}/playground/accordion"],
+              [label: "Controlled", id: "/#{locale}/controlled/accordion"],
+              [label: "Async", id: "/#{locale}/async/accordion"]
+            ]
+          ]
+        ]
+      ],
+      [
+        label: "Checkbox",
+        id: "checkbox",
+        children: [
+          [label: "Controller", id: "/#{locale}/checkbox"],
+          [label: "Live", id: "/#{locale}/live/checkbox"]
+        ]
+      ],
+      [
+        label: "Tree view",
+        id: "tree-view",
+        children: [
+          [label: "Controller", id: "/#{locale}/tree-view"],
+          [label: "Live", id: "/#{locale}/live/tree-view"]
+        ]
+      ]
+    ])
+  end
+
   def handle_event("set_expanded_value", %{"value" => value}, socket) do
     list = if value == "", do: [], else: String.split(value, ",")
     {:noreply, Corex.TreeView.set_expanded_value(socket, "my-tree", list)}
@@ -44,55 +83,65 @@ defmodule E2eWeb.TreeViewLive do
         <h2>Live View</h2>
       </div>
       <h3>Client Api</h3>
-      <div class="layout__row">
-        <button
-          phx-click={Corex.TreeView.set_expanded_value("my-tree", ["node_modules", "src"])}
-          class="button button--sm"
-        >
-          Expand node_modules & src
-        </button>
-        <button phx-click={Corex.TreeView.set_expanded_value("my-tree", [])} class="button button--sm">
-          Collapse all
-        </button>
-        <button
-          phx-click={Corex.TreeView.set_selected_value("my-tree", ["package.json"])}
-          class="button button--sm"
-        >
-          Select package.json
-        </button>
-        <button phx-click={Corex.TreeView.set_selected_value("my-tree", [])} class="button button--sm">
-          Clear selection
-        </button>
-      </div>
+      <section class="layout__section">
+        <div class="layout__row">
+          <button
+            phx-click={Corex.TreeView.set_expanded_value("my-tree", ["accordion", "checkbox"])}
+            class="button button--sm"
+          >
+            Expand Accordion & Checkbox
+          </button>
+          <button
+            phx-click={Corex.TreeView.set_expanded_value("my-tree", [])}
+            class="button button--sm"
+          >
+            Collapse all
+          </button>
+          <button
+            phx-click={Corex.TreeView.set_selected_value("my-tree", ["/#{@locale}/accordion"])}
+            class="button button--sm"
+          >
+            Select Controller (Accordion)
+          </button>
+          <button
+            phx-click={Corex.TreeView.set_selected_value("my-tree", [])}
+            class="button button--sm"
+          >
+            Clear selection
+          </button>
+        </div>
+      </section>
       <h3>Server Api</h3>
-      <div class="layout__row">
-        <button
-          phx-click="set_expanded_value"
-          value={Enum.join(["node_modules", "src"], ",")}
-          class="button button--sm"
-        >
-          Expand node_modules & src
-        </button>
-        <button phx-click="set_expanded_value" value="" class="button button--sm">
-          Collapse all
-        </button>
-        <button
-          phx-click="set_selected_value"
-          value="package.json"
-          class="button button--sm"
-        >
-          Select package.json
-        </button>
-        <button phx-click="set_selected_value" value="" class="button button--sm">
-          Clear selection
-        </button>
-        <button phx-click="get_expanded_value" class="button button--sm">
-          Get expanded value
-        </button>
-        <button phx-click="get_selected_value" class="button button--sm">
-          Get selected value
-        </button>
-      </div>
+      <section class="layout__section">
+        <div class="layout__row">
+          <button
+            phx-click="set_expanded_value"
+            value={Enum.join(["accordion", "checkbox"], ",")}
+            class="button button--sm"
+          >
+            Expand Accordion & Checkbox
+          </button>
+          <button phx-click="set_expanded_value" value="" class="button button--sm">
+            Collapse all
+          </button>
+          <button
+            phx-click="set_selected_value"
+            value={"/#{@locale}/accordion"}
+            class="button button--sm"
+          >
+            Select Controller (Accordion)
+          </button>
+          <button phx-click="set_selected_value" value="" class="button button--sm">
+            Clear selection
+          </button>
+          <button phx-click="get_expanded_value" class="button button--sm">
+            Get expanded value
+          </button>
+          <button phx-click="get_selected_value" class="button button--sm">
+            Get selected value
+          </button>
+        </div>
+      </section>
       <div :if={@tree_expanded_value != nil || @tree_selected_value != nil} class="layout__row">
         <p :if={@tree_expanded_value != nil}>
           Expanded value: <code>{inspect(@tree_expanded_value)}</code>
@@ -101,8 +150,16 @@ defmodule E2eWeb.TreeViewLive do
           Selected value: <code>{inspect(@tree_selected_value)}</code>
         </p>
       </div>
-      <.tree_view id="my-tree" class="tree-view" items={@default_items}>
-        <:label>My Documents</:label>
+      <.tree_view
+        id="my-tree"
+        class="tree-view"
+        redirect
+        items={@default_items}
+      >
+        <:label>Corex Components</:label>
+        <:indicator>
+          <.icon name="hero-chevron-right" />
+        </:indicator>
       </.tree_view>
     </Layouts.app>
     """

e2e/mix.exs

@@ -67,7 +67,7 @@ defmodule E2e.MixProject do
       {:jason, "~> 1.2"},
       {:dns_cluster, "~> 0.2.0"},
       {:bandit, "~> 1.5"},
-      {:corex, path: "../"},
+      {:corex, "~> 0.1.0-alpha.21"},
       {:wallaby, "~> 0.30", only: :test},
       {:a11y_audit, "~> 0.3.1", only: :test},
       {:flagpack, "~> 0.6.0"}