Remove Stimulus dependency

app/helpers/pages_core/admin/content_tabs_helper.rb

@@ -31,8 +31,7 @@ def content_tab_tag(key, content)
                 class: "content-tab",
                 id: "content-tab-#{key}",
                 role: "tabpanel",
-                data: { tab: key,
-                        "main-target" => "tab" })
+                data: { tab: key })
       end
     end
   end

app/javascript/features/contentTabs.ts

@@ -0,0 +1,79 @@
+import readyHandler from "../lib/readyHandler";
+
+interface WindowState {
+  tabId: string;
+}
+
+function applyTabs() {
+  const tabLinks: HTMLAnchorElement[] = Array.from(
+    document.querySelectorAll(".content-tabs li a")
+  );
+  const tabs: HTMLDivElement[] = Array.from(
+    document.querySelectorAll(".content-tab")
+  );
+
+  const showTab = (tab: string | null) => {
+    tabLinks.forEach((l) => {
+      const parent = l.parentNode as HTMLUListElement | null;
+      if (parent) {
+        if (l.dataset.tab == tab) {
+          parent.classList.add("current");
+        } else {
+          parent.classList.remove("current");
+        }
+      }
+    });
+
+    tabs.forEach((t) => {
+      if (t.dataset.tab == tab) {
+        t.classList.remove("hidden");
+      } else {
+        t.classList.add("hidden");
+      }
+    });
+  };
+
+  const changeTab = (evt: MouseEvent) => {
+    evt.preventDefault();
+    const link = evt.target as HTMLAnchorElement;
+    if ("tab" in link.dataset) {
+      const tab = link.dataset.tab;
+      showTab(tab);
+      history.pushState(
+        { tabId: tab },
+        "",
+        `${window.location.pathname}#${tab}`
+      );
+    }
+  };
+
+  const stateHandler = (evt: PopStateEvent) => {
+    if (evt.state && "tabId" in evt.state) {
+      const { tabId } = evt.state as WindowState;
+      showTab(tabId);
+    }
+  };
+
+  if (tabLinks.length > 0 && tabs.length > 0) {
+    const tabNames = tabs.map((t) => t.dataset.tab);
+
+    tabLinks.forEach((l) => l.addEventListener("click", changeTab));
+
+    let initTab: string = null;
+    const tabExpression = /#(.*)$/;
+
+    if (document.location.toString().match(tabExpression)) {
+      const id = document.location.toString().match(tabExpression)[1];
+      if (tabNames.indexOf(id) !== -1) {
+        initTab = id;
+      }
+    }
+
+    showTab(initTab || tabs[0].dataset.tab);
+    window.addEventListener("popstate", stateHandler);
+  }
+}
+
+export default function contentTabs() {
+  readyHandler.ready(applyTabs);
+}

app/javascript/index.ts

@@ -1,14 +1,11 @@
 import { start as startRails } from "@rails/ujs";
-import { Application } from "@hotwired/stimulus";
 import "react_ujs";
 import { FC } from "react";
 
 import * as Components from "./components";
 
-import EditPageController from "./controllers/EditPageController";
-import MainController from "./controllers/MainController";
-
 import RichText from "./features/RichText";
+import contentTabs from "./features/contentTabs";
 
 export function registerComponent(name: string, component: FC) {
   window[name] = component;
@@ -19,11 +16,9 @@ export default function startPages() {
   for (const name in Components) {
     registerComponent(name, Components[name] as FC);
   }
-  RichText.start();
 
-  const application = Application.start();
-  application.register("edit-page", EditPageController);
-  application.register("main", MainController);
+  RichText.start();
+  contentTabs();
 }
 
 export * from "./components";

app/views/layouts/admin.html.erb

@@ -44,7 +44,7 @@
         <%= yield :main_wrapper %>
       <% else %>
         <div class="main-wrapper">
-          <main data-controller="main">
+          <main>
             <%= render(partial: "layouts/admin/page_header") %>
             <%= yield %>
           </main>

app/views/layouts/admin/_page_header.html.erb

@@ -13,8 +13,7 @@
           role="tablist">
         <% content_tabs.map do |t| %>
           <li id="content-tab-link-<%= t[:key] %>"
-              data-tab="<%= t[:key] %>"
-              data-main-target="link">
+              data-tab="<%= t[:key] %>">
             <% if t[:options][:disabled] == true %>
               <%= t[:name] %>
             <% else %>

package.json

@@ -8,10 +8,11 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["/dist/**/*"],
+  "files": [
+    "/dist/**/*"
+  ],
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.2.1",
-    "@hotwired/stimulus": "^3.2.2",
     "@rails/ujs": "^6.1.4-1",
     "@types/lodash": "^4.14.194",
     "@types/rails__ujs": "^6.0.1",

spec/helpers/pages_core/admin/admin_helper_spec.rb

@@ -11,8 +11,7 @@
     it "renders the tab" do
       expect(tab).to(
         eq("<div class=\"content-tab\" id=\"content-tab-foo\" " \
-           "role=\"tabpanel\" data-tab=\"foo\" " \
-           "data-main-target=\"tab\">Content</div>")
+           "role=\"tabpanel\" data-tab=\"foo\">Content</div>")
       )
     end
 

yarn.lock

@@ -17,7 +17,6 @@ __metadata:
   resolution: "@anyone-oslo/pages@workspace:."
   dependencies:
     "@fortawesome/fontawesome-free": "npm:^6.2.1"
-    "@hotwired/stimulus": "npm:^3.2.2"
     "@rails/ujs": "npm:^6.1.4-1"
     "@types/lodash": "npm:^4.14.194"
     "@types/rails__ujs": "npm:^6.0.1"
@@ -721,13 +720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hotwired/stimulus@npm:^3.2.2":
-  version: 3.2.2
-  resolution: "@hotwired/stimulus@npm:3.2.2"
-  checksum: 10/31b9dc3a36a73b87a30570d6e73d27b387a8f6c3caf934aedc4dc96e5b40dde8fc36d530e16056b3d590b1d31b8a13bc1fca002e83df838f1bf5148b188046de
-  languageName: node
-  linkType: hard
-
 "@humanwhocodes/config-array@npm:^0.11.14":
   version: 0.11.14
   resolution: "@humanwhocodes/config-array@npm:0.11.14"