universal-modal-monorepo 1.0.0

package/packages/universal-modal-web-component/src/universal-modal-element.ts

@@ -0,0 +1,424 @@
+import {
+  CSS_CLASSES,
+  ModalEngine,
+  type CloseReason,
+  type ModalHostElements,
+  type ModalPlacement,
+  type ModalRole,
+  type ModalSize,
+} from '@poluru-labs/universal-modal';
+
+const observed = [
+  'open',
+  'size',
+  'placement',
+  'title',
+  'description',
+  'persistent',
+  'close-on-esc',
+  'close-on-backdrop',
+  'show-close-icon',
+  'role',
+  'confirm-text',
+  'cancel-text',
+  'hide-actions',
+  'loading',
+  'z-index-base',
+] as const;
+
+type ObservedAttr = (typeof observed)[number];
+
+function boolAttr(value: string | null): boolean {
+  return value !== null && value !== 'false';
+}
+
+/**
+ * `<universal-modal>` custom element.
+ *
+ * Light-DOM children are projected by moving them into the modal panel
+ * (not cloning), so event listeners and form state keep working.
+ *
+ * Slots: `header`, default (body), `footer`
+ * Events: `beforeOpen`, `afterOpen`, `beforeClose`, `afterClose`, `confirm`, `cancel`, `openChange`
+ */
+export class UniversalModalElement extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return [...observed];
+  }
+
+  private engine: ModalEngine | null = null;
+  private hostEls: ModalHostElements | null = null;
+  private titleEl: HTMLHeadingElement | null = null;
+  private descriptionEl: HTMLParagraphElement | null = null;
+  private defaultActions: HTMLElement | null = null;
+  private ready = false;
+  private opening = false;
+  private closing = false;
+
+  connectedCallback(): void {
+    if (this.ready) return;
+    this.ready = true;
+
+    // Ensure upgrades wait for children to be available.
+    if (this.childNodes.length === 0) {
+      queueMicrotask(() => this.initialize());
+      return;
+    }
+    this.initialize();
+  }
+
+  disconnectedCallback(): void {
+    this.engine?.destroy();
+    this.hostEls?.root.remove();
+    this.engine = null;
+    this.hostEls = null;
+    this.titleEl = null;
+    this.descriptionEl = null;
+    this.defaultActions = null;
+    this.ready = false;
+  }
+
+  attributeChangedCallback(
+    name: ObservedAttr,
+    oldValue: string | null,
+    newValue: string | null,
+  ): void {
+    if (oldValue === newValue || !this.engine || !this.hostEls) return;
+
+    if (name === 'open') {
+      if (boolAttr(newValue)) {
+        if (!this.engine.isOpen && !this.opening) void this.openFromAttr();
+      } else if (this.engine.isOpen && !this.closing) {
+        void this.engine.close('programmatic');
+      }
+      return;
+    }
+
+    if (name === 'loading') {
+      this.engine.setLoading(boolAttr(newValue));
+      return;
+    }
+
+    this.applyOptions();
+  }
+
+  async open(): Promise<boolean> {
+    if (!this.engine) this.initialize();
+    if (!this.engine || this.engine.isOpen || this.opening) return false;
+
+    this.opening = true;
+    try {
+      const ok = await this.engine.open();
+      if (ok && !this.hasAttribute('open')) {
+        this.setAttribute('open', '');
+      }
+      return ok;
+    } finally {
+      this.opening = false;
+    }
+  }
+
+  async close(reason: CloseReason = 'programmatic'): Promise<boolean> {
+    if (!this.engine || !this.engine.isOpen || this.closing) return false;
+
+    this.closing = true;
+    try {
+      return await this.engine.close(reason);
+    } finally {
+      this.closing = false;
+    }
+  }
+
+  async confirm(): Promise<void> {
+    await this.engine?.confirm();
+  }
+
+  async cancel(): Promise<void> {
+    await this.engine?.cancel();
+  }
+
+  get isOpen(): boolean {
+    return this.engine?.isOpen ?? false;
+  }
+
+  private async openFromAttr(): Promise<void> {
+    this.opening = true;
+    try {
+      await this.engine?.open();
+    } finally {
+      this.opening = false;
+    }
+  }
+
+  private initialize(): void {
+    if (this.engine) return;
+
+    this.engine = new ModalEngine({
+      ...this.readOptions(),
+      // Content is projected from light DOM; avoid HTML injection factories.
+      header: undefined,
+      body: undefined,
+      footer: undefined,
+    });
+
+    this.hostEls = this.buildHost();
+    this.projectLightDom();
+    this.applyOptions();
+    this.engine.attach(this.hostEls);
+    document.body.appendChild(this.hostEls.root);
+    this.wireEvents();
+
+    // Keep the host out of layout; modal lives on document.body.
+    this.style.display = 'none';
+
+    if (this.hasAttribute('open')) {
+      void this.openFromAttr();
+    }
+  }
+
+  private readOptions() {
+    return {
+      id: this.id || undefined,
+      size: (this.getAttribute('size') as ModalSize) || undefined,
+      placement: (this.getAttribute('placement') as ModalPlacement) || undefined,
+      title: this.getAttribute('title') || undefined,
+      description: this.getAttribute('description') || undefined,
+      persistent: this.hasAttribute('persistent'),
+      closeOnEsc: this.hasAttribute('close-on-esc')
+        ? boolAttr(this.getAttribute('close-on-esc'))
+        : undefined,
+      closeOnBackdrop: this.hasAttribute('close-on-backdrop')
+        ? boolAttr(this.getAttribute('close-on-backdrop'))
+        : undefined,
+      showCloseIcon: this.hasAttribute('show-close-icon')
+        ? boolAttr(this.getAttribute('show-close-icon'))
+        : undefined,
+      role: (this.getAttribute('role') as ModalRole) || undefined,
+      confirmText: this.getAttribute('confirm-text') || undefined,
+      cancelText: this.getAttribute('cancel-text') || undefined,
+      hideActions: this.hasAttribute('hide-actions'),
+      zIndexBase: this.hasAttribute('z-index-base')
+        ? Number(this.getAttribute('z-index-base'))
+        : undefined,
+    };
+  }
+
+  private applyOptions(): void {
+    if (!this.engine || !this.hostEls) return;
+
+    const opts = this.readOptions();
+    this.engine.updateOptions(opts);
+
+    const { panel, header, footer, closeButton, confirmButton, cancelButton } = this.hostEls;
+    panel.dataset.size = opts.size ?? 'md';
+    panel.dataset.placement = opts.placement ?? 'center';
+
+    if (closeButton) {
+      closeButton.hidden = opts.showCloseIcon === false;
+    }
+
+    const hasCustomHeader = Boolean(header?.querySelector('[data-um-projected="header"]'));
+    if (!hasCustomHeader && this.titleEl && this.descriptionEl && header) {
+      const title = opts.title ?? '';
+      const description = opts.description ?? '';
+      this.titleEl.textContent = title;
+      this.titleEl.hidden = !title;
+      this.titleEl.id = `${this.engine.id}-title`;
+      this.descriptionEl.textContent = description;
+      this.descriptionEl.hidden = !description;
+      this.descriptionEl.id = `${this.engine.id}-description`;
+      header.hidden = !title && !description;
+    }
+
+    if (confirmButton) {
+      const spinner = confirmButton.querySelector(`.${CSS_CLASSES.spinner}`);
+      confirmButton.textContent = opts.confirmText ?? 'Confirm';
+      if (spinner) confirmButton.appendChild(spinner);
+    }
+    if (cancelButton) cancelButton.textContent = opts.cancelText ?? 'Cancel';
+
+    const hasCustomFooter = Boolean(footer?.querySelector('[data-um-projected="footer"]'));
+    if (this.defaultActions) {
+      this.defaultActions.hidden = Boolean(opts.hideActions) || hasCustomFooter;
+    }
+    if (footer) {
+      footer.hidden = Boolean(opts.hideActions) && !hasCustomFooter;
+    }
+  }
+
+  private projectLightDom(): void {
+    if (!this.hostEls) return;
+
+    const { header, body, footer } = this.hostEls;
+    const projected = Array.from(this.childNodes);
+
+    const headerNodes: Node[] = [];
+    const footerNodes: Node[] = [];
+    const bodyNodes: Node[] = [];
+
+    for (const node of projected) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node as HTMLElement;
+        const slot = el.getAttribute('slot');
+        if (slot === 'header') {
+          el.setAttribute('data-um-projected', 'header');
+          headerNodes.push(el);
+          continue;
+        }
+        if (slot === 'footer') {
+          el.setAttribute('data-um-projected', 'footer');
+          footerNodes.push(el);
+          continue;
+        }
+        bodyNodes.push(el);
+        continue;
+      }
+      if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+        bodyNodes.push(node);
+      }
+    }
+
+    if (header) {
+      if (headerNodes.length) {
+        header.replaceChildren(...headerNodes);
+        header.hidden = false;
+      } else {
+        header.replaceChildren();
+        if (this.titleEl) header.appendChild(this.titleEl);
+        if (this.descriptionEl) header.appendChild(this.descriptionEl);
+      }
+    }
+
+    if (body) {
+      body.replaceChildren(...bodyNodes);
+    }
+
+    if (footer) {
+      footer.replaceChildren();
+      if (footerNodes.length) {
+        footer.append(...footerNodes);
+        footer.hidden = false;
+      } else if (this.defaultActions) {
+        footer.appendChild(this.defaultActions);
+        footer.hidden = this.hasAttribute('hide-actions');
+      } else {
+        footer.hidden = true;
+      }
+    }
+  }
+
+  private buildHost(): ModalHostElements {
+    const root = document.createElement('div');
+    root.className = CSS_CLASSES.root;
+    root.hidden = true;
+    root.setAttribute('aria-hidden', 'true');
+
+    const backdrop = document.createElement('div');
+    backdrop.className = CSS_CLASSES.backdrop;
+    backdrop.setAttribute('data-um-backdrop', '');
+
+    const dialog = document.createElement('div');
+    dialog.className = CSS_CLASSES.dialog;
+
+    const panel = document.createElement('div');
+    panel.className = CSS_CLASSES.panel;
+
+    const closeButton = document.createElement('button');
+    closeButton.type = 'button';
+    closeButton.className = CSS_CLASSES.close;
+    closeButton.setAttribute('aria-label', 'Close dialog');
+    closeButton.innerHTML =
+      '<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M6.4 6.4l11.2 11.2M17.6 6.4L6.4 17.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+
+    const header = document.createElement('div');
+    header.className = CSS_CLASSES.header;
+
+    this.titleEl = document.createElement('h2');
+    this.titleEl.className = CSS_CLASSES.title;
+
+    this.descriptionEl = document.createElement('p');
+    this.descriptionEl.className = CSS_CLASSES.description;
+
+    const body = document.createElement('div');
+    body.className = CSS_CLASSES.body;
+
+    const footer = document.createElement('div');
+    footer.className = CSS_CLASSES.footer;
+
+    const cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.className = CSS_CLASSES.cancel;
+
+    const confirmButton = document.createElement('button');
+    confirmButton.type = 'button';
+    confirmButton.className = CSS_CLASSES.confirm;
+    const spinner = document.createElement('span');
+    spinner.className = CSS_CLASSES.spinner;
+    spinner.setAttribute('aria-hidden', 'true');
+    confirmButton.appendChild(spinner);
+
+    this.defaultActions = document.createElement('div');
+    this.defaultActions.className = CSS_CLASSES.actions;
+    this.defaultActions.append(cancelButton, confirmButton);
+
+    panel.append(closeButton, header, body, footer);
+    dialog.appendChild(panel);
+    root.append(backdrop, dialog);
+
+    return {
+      root,
+      backdrop,
+      dialog,
+      panel,
+      header,
+      body,
+      footer,
+      closeButton,
+      confirmButton,
+      cancelButton,
+    };
+  }
+
+  private wireEvents(): void {
+    if (!this.engine) return;
+
+    const forward = (type: string, detail?: unknown) => {
+      this.dispatchEvent(
+        new CustomEvent(type, {
+          detail,
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    };
+
+    this.engine.on('beforeOpen', () => forward('beforeOpen'));
+    this.engine.on('afterOpen', () => forward('afterOpen'));
+    this.engine.on('beforeClose', (reason) => forward('beforeClose', reason));
+    this.engine.on('afterClose', (reason) => {
+      if (this.hasAttribute('open')) this.removeAttribute('open');
+      forward('afterClose', reason);
+    });
+    this.engine.on('confirm', () => forward('confirm'));
+    this.engine.on('cancel', () => forward('cancel'));
+    this.engine.on('openChange', (open) => forward('openChange', open));
+    this.engine.on('loadingChange', (loading) => {
+      if (loading) this.setAttribute('loading', '');
+      else this.removeAttribute('loading');
+      forward('loadingChange', loading);
+    });
+  }
+}
+
+export function defineUniversalModal(tag = 'universal-modal'): void {
+  if (typeof customElements === 'undefined') return;
+  if (!customElements.get(tag)) {
+    customElements.define(tag, UniversalModalElement);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'universal-modal': UniversalModalElement;
+  }
+}

package/packages/universal-modal-web-component/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/universal-modal-web-component/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: { index: 'src/index.ts' },
+  format: ['esm', 'cjs'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ['@poluru-labs/universal-modal'],
+});

package/scripts/copy-styles.mjs

@@ -0,0 +1,11 @@
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const source = resolve(root, 'src/styles/modal.css');
+const target = resolve(root, 'dist/styles.css');
+
+mkdirSync(dirname(target), { recursive: true });
+copyFileSync(source, target);
+console.log('Copied styles → dist/styles.css');

package/scripts/serve-examples.mjs

@@ -0,0 +1,48 @@
+import { createServer } from 'node:http';
+import { readFile } from 'node:fs/promises';
+import { extname, join, normalize } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = join(fileURLToPath(new URL('.', import.meta.url)), '..');
+const port = Number(process.env.PORT || 8080);
+
+const types = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.ts': 'text/plain; charset=utf-8',
+  '.tsx': 'text/plain; charset=utf-8',
+  '.vue': 'text/plain; charset=utf-8',
+};
+
+createServer(async (req, res) => {
+  try {
+    const url = new URL(req.url || '/', `http://localhost:${port}`);
+    let pathname = decodeURIComponent(url.pathname);
+    if (pathname === '/') pathname = '/examples/index.html';
+
+    const filePath = normalize(join(root, pathname.replace(/^\//, '')));
+    if (!filePath.startsWith(root)) {
+      res.writeHead(403).end('Forbidden');
+      return;
+    }
+
+    const data = await readFile(filePath);
+    res.writeHead(200, {
+      'Content-Type': types[extname(filePath)] || 'application/octet-stream',
+    });
+    res.end(data);
+  } catch {
+    res.writeHead(404).end('Not found');
+  }
+}).listen(port, () => {
+  console.log(`Examples server: http://localhost:${port}`);
+  console.log(`Hub:            http://localhost:${port}/examples/index.html`);
+  console.log(`Vanilla:        http://localhost:${port}/examples/vanilla/index.html`);
+  console.log(`Web Component:  http://localhost:${port}/examples/web-component/index.html`);
+  console.log(`React:          http://localhost:${port}/examples/react/index.html`);
+  console.log(`Vue:            http://localhost:${port}/examples/vue/index.html`);
+  console.log(`Angular:        http://localhost:${port}/examples/angular/index.html`);
+});