Adding A Modal Component

package.json

@@ -18,7 +18,7 @@
     "@surma/rollup-plugin-off-main-thread": "^2.2.2",
     "@types/dedent": "^0.7.0",
     "@types/mime-types": "^2.1.1",
-    "@types/node": "^16.11.1",
+    "@types/node": "^16.18.38",
     "@web/rollup-plugin-import-meta-assets": "^1.0.6",
     "comlink": "^4.3.0",
     "cssnano": "^4.1.10",
@@ -45,9 +45,9 @@
     "rollup": "^2.38.0",
     "rollup-plugin-terser": "^7.0.2",
     "serve": "^11.3.2",
-    "typescript": "^4.4.4",
-    "which": "^2.0.2",
-    "wasm-feature-detect": "^1.2.11"
+    "typescript": "^4.8.3",
+    "wasm-feature-detect": "^1.2.11",
+    "which": "^2.0.2"
   },
   "lint-staged": {
     "*.{js,css,json,md,ts,tsx}": "prettier --write",

src/client/lazy-app/Modal/ModalHint/index.tsx

@@ -0,0 +1,56 @@
+import { h, Component, VNode } from 'preact';
+import Modal from '..';
+import { InfoIcon } from 'client/lazy-app/icons';
+import { linkRef } from 'shared/prerendered-app/util';
+
+import * as style from './style.css';
+import 'add-css:./style.css';
+
+interface Props {
+  modalTitle: string;
+  content: VNode;
+  text?: string;
+}
+
+interface State {}
+
+export default class ModalHint extends Component<Props, State> {
+  private modalComponent?: Modal;
+
+  private onclick = (event: Event) => {
+    if (!this.modalComponent)
+      throw new Error('ModalHint is missing a modalComponent');
+
+    // Stop bubbled events from triggering the modal
+    if (!(event.currentTarget as Element).matches('button')) return;
+
+    this.modalComponent.showModal();
+  };
+
+  render({ modalTitle, content }: Props) {
+    return (
+      <span
+        class={style.modalHint}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }}
+      >
+        <button
+          class={style.modalButton}
+          onClick={this.onclick}
+          title="Learn more"
+        >
+          <InfoIcon></InfoIcon>
+          {this.props.children}
+        </button>
+        <Modal
+          ref={linkRef(this, 'modalComponent')}
+          icon={<InfoIcon></InfoIcon>}
+          title={modalTitle}
+          content={content}
+        ></Modal>
+      </span>
+    );
+  }
+}

src/client/lazy-app/Modal/ModalHint/style.css

@@ -0,0 +1,31 @@
+span.modal-hint {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.modal-button {
+  composes: unbutton from global;
+
+  color: inherit;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  border-radius: 2px;
+}
+
+.modal-button:hover {
+  text-decoration: underline solid 1px currentColor;
+  text-underline-offset: 0.1em;
+}
+
+.modal-button:focus {
+  outline: white solid 1px;
+  outline-offset: 0.25em;
+}
+
+.modal-button > svg {
+  width: 1em;
+  height: 1em;
+}

src/client/lazy-app/Modal/index.tsx

@@ -0,0 +1,136 @@
+import { h, Component, VNode, Fragment } from 'preact';
+import * as style from './style.css';
+import 'add-css:./style.css';
+import { linkRef } from 'shared/prerendered-app/util';
+import { cleanSet } from '../util/clean-modify';
+import { animateTo } from '../util';
+
+interface Props {
+  icon: VNode;
+  title: string;
+  content: VNode;
+}
+
+interface State {
+  shown: boolean;
+}
+
+export default class Modal extends Component<Props, State> {
+  private dialogElement?: HTMLDialogElement;
+
+  componentDidMount() {
+    if (!this.dialogElement) throw new Error('Modal missing');
+
+    // Set inert by default
+    this.dialogElement.inert = true;
+
+    // Prevent events from leaking through the dialog
+    this.dialogElement.onclick = (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+  }
+
+  private _closeOnTransitionEnd = () => {
+    // If modal does not exist
+    if (!this.dialogElement) return;
+
+    this.dialogElement.close();
+    this.dialogElement.inert = true;
+    this.setState({ shown: false });
+  };
+
+  showModal() {
+    if (!this.dialogElement || this.dialogElement.open)
+      throw Error('Modal missing / already shown');
+
+    this.dialogElement.inert = false;
+    this.dialogElement.showModal();
+    // animate modal opening
+    animateTo(
+      this.dialogElement,
+      [
+        { opacity: 0, transform: 'translateY(50px)' },
+        { opacity: 1, transform: 'translateY(0px)' },
+      ],
+      { duration: 250, easing: 'ease' },
+    );
+    // animate modal::backdrop
+    // some browsers don't support ::backdrop, catch those errors
+    try {
+      animateTo(this.dialogElement, [{ opacity: 0 }, { opacity: 1 }], {
+        duration: 250,
+        easing: 'linear',
+        pseudoElement: '::backdrop',
+      });
+    } catch (e) {}
+    this.setState({ shown: true });
+  }
+
+  private _hideModal() {
+    if (!this.dialogElement || !this.dialogElement.open)
+      throw Error('Modal missing / hidden');
+
+    // animate modal closing
+    const anim = animateTo(
+      this.dialogElement,
+      { opacity: 0, transform: 'translateY(50px)' },
+      { duration: 250, easing: 'ease' },
+    );
+    // animate modal::backdrop
+    // some browsers don't support ::backdrop, catch those errors
+    try {
+      animateTo(this.dialogElement, [{ opacity: 0 }], {
+        duration: 250,
+        easing: 'linear',
+        pseudoElement: '::backdrop',
+      });
+    } catch (e) {}
+    anim.onfinish = this._closeOnTransitionEnd;
+  }
+
+  private _onKeyDown(e: KeyboardEvent) {
+    // Default behaviour of <dialog> closes it instantly when you press Esc
+    // So we hijack it to smoothly hide the modal
+    if (e.key === 'Escape') {
+      this._hideModal();
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  }
+
+  render({ title, icon, content }: Props, { shown }: State) {
+    return (
+      <dialog
+        ref={linkRef(this, 'dialogElement')}
+        onKeyDown={(e) => this._onKeyDown(e)}
+      >
+        {shown && (
+          <Fragment>
+            <header class={style.header}>
+              <span class={style.modalIcon}>{icon}</span>
+              <span class={style.modalTitle}>{title}</span>
+              <button
+                class={style.closeButton}
+                onClick={() => this._hideModal()}
+              >
+                <svg viewBox="0 0 480 480" fill="currentColor">
+                  <path
+                    d="M119.356 120L361 361M360.644 120L119 361"
+                    stroke="#fff"
+                    stroke-width="37"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </button>
+            </header>
+            <div class={style.contentContainer}>
+              <article class={style.content}>{content}</article>
+            </div>
+            <footer class={style.footer}></footer>
+          </Fragment>
+        )}
+      </dialog>
+    );
+  }
+}