From e453d4fb4bbbc92fd844683805d9aa6faf7be81f Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Thu, 27 Feb 2025 18:57:03 +0100
Subject: [PATCH] refactor: use external CSS file MenuStyle and ShowRegion
 stories

Previously, the CSS was included programmatically in the document, which is not the best way to add CSS in the storybook
context. In this case, the CSS was added each time the story was rendered, so the CSS definition was added multiple
times

The stories now use external CSS and use imports to include them. This removes the duplicated includes in the DOM and
makes the thing easier to understand by using standard practices.

Notice that the Scrollbars story is still using the former way of including custom CSS.
It is not functional and requires additional work. So, it will be updated later.
---
 packages/html/stories/MenuStyle.stories.ts  | 46 +--------------------
 packages/html/stories/ShowRegion.stories.ts | 45 +-------------------
 packages/html/stories/css/menu-style.css    | 36 ++++++++++++++++
 packages/html/stories/css/show-region.css   |  1 +
 4 files changed, 41 insertions(+), 87 deletions(-)
 create mode 100644 packages/html/stories/css/menu-style.css
 create mode 100644 packages/html/stories/css/show-region.css

diff --git a/packages/html/stories/MenuStyle.stories.ts b/packages/html/stories/MenuStyle.stories.ts
index 9e2dd301b3..8548705bd6 100644
--- a/packages/html/stories/MenuStyle.stories.ts
+++ b/packages/html/stories/MenuStyle.stories.ts
@@ -47,46 +47,8 @@ import { globalTypes, globalValues } from './shared/args.js';
 import { configureImagesBasePath, createGraphContainer } from './shared/configure.js';
 // style required by RubberBand and MaxPopupMenu
 import '@maxgraph/core/css/common.css';
-
-// Use custom CSS for the popup menu
-const CSS_TEMPLATE = `
-body div.mxPopupMenu {
-  -webkit-box-shadow: 3px 3px 6px #C0C0C0;
-  -moz-box-shadow: 3px 3px 6px #C0C0C0;
-  box-shadow: 3px 3px 6px #C0C0C0;
-  background: white;
-  position: absolute;
-  border: 3px solid #e7e7e7;
-  padding: 3px;
-}
-body table.mxPopupMenu {
-  border-collapse: collapse;
-  margin: 0px;
-}
-body tr.mxPopupMenuItem {
-  color: black;
-  cursor: default;
-}
-body td.mxPopupMenuItem {
-  padding: 6px 60px 6px 30px;
-  font-family: Arial;
-  font-size: 10pt;
-}
-body td.mxPopupMenuIcon {
-  background-color: white;
-  padding: 0px;
-}
-body tr.mxPopupMenuItemHover {
-  background-color: #eeeeee;
-  color: black;
-}
-table.mxPopupMenu hr {
-  border-top: solid 1px #cccccc;
-}
-table.mxPopupMenu tr {
-  font-size: 4pt;
-}
-`;
+// custom style for Popup Menu
+import './css/menu-style.css';
 
 export default {
   title: 'Misc/MenuStyle',
@@ -101,10 +63,6 @@ export default {
 const Template = ({ label, ...args }: Record<string, string>) => {
   configureImagesBasePath();
 
-  const styleElm = document.createElement('style');
-  styleElm.innerText = CSS_TEMPLATE;
-  document.head.appendChild(styleElm);
-
   const container = createGraphContainer(args);
 
   // Disables built-in context menu
diff --git a/packages/html/stories/ShowRegion.stories.ts b/packages/html/stories/ShowRegion.stories.ts
index c2a81b8c9b..bbfef8319d 100644
--- a/packages/html/stories/ShowRegion.stories.ts
+++ b/packages/html/stories/ShowRegion.stories.ts
@@ -44,45 +44,8 @@ import {
 import { createGraphContainer } from './shared/configure.js';
 // style required by RubberBand and MaxPopupMenu
 import '@maxgraph/core/css/common.css';
-
-const CSS_TEMPLATE = `
-body div.mxPopupMenu {
-  -webkit-box-shadow: 3px 3px 6px #C0C0C0;
-  -moz-box-shadow: 3px 3px 6px #C0C0C0;
-  box-shadow: 3px 3px 6px #C0C0C0;
-  background: white;
-  position: absolute;
-  border: 3px solid #e7e7e7;
-  padding: 3px;
-}
-body table.mxPopupMenu {
-  border-collapse: collapse;
-  margin: 0px;
-}
-body tr.mxPopupMenuItem {
-  color: black;
-  cursor: default;
-}
-body td.mxPopupMenuItem {
-  padding: 6px 60px 6px 30px;
-  font-family: Arial;
-  font-size: 10pt;
-}
-body td.mxPopupMenuIcon {
-  background-color: white;
-  padding: 0px;
-}
-body tr.mxPopupMenuItemHover {
-  background-color: #eeeeee;
-  color: black;
-}
-table.mxPopupMenu hr {
-  border-top: solid 1px #cccccc;
-}
-table.mxPopupMenu tr {
-  font-size: 4pt;
-}
-`;
+// custom style for Popup Menu
+import './css/show-region.css';
 
 export default {
   title: 'Misc/ShowRegion',
@@ -97,10 +60,6 @@ export default {
 };
 
 const Template = ({ label, ...args }: Record<string, string>) => {
-  const styleElm = document.createElement('style');
-  styleElm.innerText = CSS_TEMPLATE;
-  document.head.appendChild(styleElm);
-
   const mainDiv = document.createElement('div');
   const divMessage = document.createElement('div');
   divMessage.innerHTML =
diff --git a/packages/html/stories/css/menu-style.css b/packages/html/stories/css/menu-style.css
new file mode 100644
index 0000000000..cba17a40a8
--- /dev/null
+++ b/packages/html/stories/css/menu-style.css
@@ -0,0 +1,36 @@
+body div.mxPopupMenu {
+    -webkit-box-shadow: 3px 3px 6px #C0C0C0;
+    -moz-box-shadow: 3px 3px 6px #C0C0C0;
+    box-shadow: 3px 3px 6px #C0C0C0;
+    background: white;
+    position: absolute;
+    border: 3px solid #e7e7e7;
+    padding: 3px;
+}
+body table.mxPopupMenu {
+    border-collapse: collapse;
+    margin: 0;
+}
+body tr.mxPopupMenuItem {
+    color: black;
+    cursor: default;
+}
+body td.mxPopupMenuItem {
+    padding: 6px 60px 6px 30px;
+    font-family: Arial, sans-serif;
+    font-size: 10pt;
+}
+body td.mxPopupMenuIcon {
+    background-color: white;
+    padding: 0;
+}
+body tr.mxPopupMenuItemHover {
+    background-color: #eeeeee;
+    color: black;
+}
+table.mxPopupMenu hr {
+    border-top: solid 1px #cccccc;
+}
+table.mxPopupMenu tr {
+    font-size: 4pt;
+}
diff --git a/packages/html/stories/css/show-region.css b/packages/html/stories/css/show-region.css
new file mode 100644
index 0000000000..b839a79e72
--- /dev/null
+++ b/packages/html/stories/css/show-region.css
@@ -0,0 +1 @@
+@import "menu-style.css";