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,57 @@
+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;
+  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, text }: Props) {
+    return (
+      <span
+        class={style.modalHint}
+        onClick={(event) => {
+          // When the button is clicked, the event starts bubbling up
+          // which might cause unexpected behaviour
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }}
+      >
+        <button
+          class={style.modalButton}
+          onClick={this.onclick}
+          title="Learn more"
+        >
+          <InfoIcon></InfoIcon>
+          {text}
+        </button>
+        <Modal
+          ref={linkRef(this, 'modalComponent')}
+          icon={<InfoIcon></InfoIcon>}
+          title={modalTitle}
+          content={this.props.children as any}
+        ></Modal>
+      </span>
+    );
+  }
+}

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

@@ -0,0 +1,31 @@
+.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,120 @@
+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 { animateFrom, animateTo } from '../util';
+import { RoundedCrossIcon } from '../icons';
+
+interface Props {
+  icon: VNode;
+  title: string;
+  content: VNode;
+}
+
+interface State {}
+
+export default class Modal extends Component<Props, State> {
+  private dialogElement?: HTMLDialogElement;
+
+  componentDidMount() {
+    if (!this.dialogElement) throw new Error('Modal missing');
+  }
+
+  private _closeOnTransitionEnd = () => {
+    // If modal does not exist
+    if (!this.dialogElement) return;
+
+    this.dialogElement.close();
+  };
+
+  showModal() {
+    if (!this.dialogElement) throw Error('Modal missing');
+    if (this.dialogElement.open) return;
+
+    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 {
+      animateFrom(
+        this.dialogElement,
+        { opacity: 0 },
+        {
+          duration: 250,
+          easing: 'ease',
+          pseudoElement: '::backdrop',
+        },
+      );
+    } catch (e) {}
+  }
+
+  private _hideModal() {
+    if (!this.dialogElement) throw Error('Modal missing / hidden');
+    if (!this.dialogElement.open) return;
+
+    // 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: 'ease',
+        pseudoElement: '::backdrop',
+      });
+    } catch (e) {}
+    anim.onfinish = this._closeOnTransitionEnd;
+  }
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    // Default behaviour of <dialog> closes it instantly when you press Esc
+    // So we hijack it to smoothly hide the modal
+    if (event.key === 'Escape') {
+      this._hideModal();
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+
+  render({ title, icon, content }: Props, {}: State) {
+    return (
+      <dialog
+        class={style['modalDialog']}
+        ref={linkRef(this, 'dialogElement')}
+        onKeyDown={this._onKeyDown}
+        onClick={(event) => {
+          // Prevent clicks from leaking out of the dialog
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }}
+      >
+        <article class={style.article}>
+          <header class={style.header}>
+            <span class={style.modalIcon}>{icon}</span>
+            <span class={style.modalTitle}>{title}</span>
+            <button class={style.closeButton} onClick={() => this._hideModal()}>
+              <RoundedCrossIcon></RoundedCrossIcon>
+            </button>
+          </header>
+          <div class={style.contentContainer}>
+            <article class={style.content}>{content}</article>
+          </div>
+          <footer class={style.footer}></footer>
+        </article>
+      </dialog>
+    );
+  }
+}