@momentco-ai/moment-sdk 0.2.2-dev.17 → 0.3.0-dev.18

package/examples/shared/boot.js

@@ -0,0 +1,166 @@
+import { DEMO_FIXTURES } from './fixtures.js';
+
+const LOG_ID = 'demo-log';
+let packageMetaPromise;
+
+function getPackageMeta() {
+  if (!packageMetaPromise) {
+    packageMetaPromise = fetch('/package-meta.json')
+      .then((response) => response.json())
+      .catch(() => ({
+        version: 'latest',
+        cdnUrl: 'https://cdn.jsdelivr.net/npm/@momentco-ai/moment-sdk',
+      }));
+  }
+  return packageMetaPromise;
+}
+
+function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[data-demo-sdk-src="${src}"]`);
+    if (existing) {
+      resolve();
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = src;
+    script.async = true;
+    script.dataset.demoSdkSrc = src;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error(`Failed to load SDK: ${src}`));
+    document.head.appendChild(script);
+  });
+}
+
+export function appendLog(message, tone = 'muted') {
+  const panel = document.getElementById(LOG_ID);
+  if (!panel) return;
+  const line = document.createElement('p');
+  line.className = `log-line log-line--${tone}`;
+  line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+  panel.prepend(line);
+}
+
+function wireCopyButtons() {
+  document.querySelectorAll('[data-copy-target]').forEach((button) => {
+    button.addEventListener('click', async () => {
+      const targetId = button.getAttribute('data-copy-target');
+      const target = targetId ? document.getElementById(targetId) : null;
+      if (!target) return;
+      try {
+        await navigator.clipboard.writeText(target.textContent?.trim() ?? '');
+        const label = button.textContent;
+        button.textContent = 'Copied';
+        setTimeout(() => {
+          button.textContent = label;
+        }, 1500);
+      } catch {
+        appendLog('Clipboard copy failed', 'error');
+      }
+    });
+  });
+}
+
+export function mountNav({ title } = {}) {
+  const bar = document.getElementById('demo-nav');
+  if (!bar) return;
+
+  bar.innerHTML = `
+    <nav class="demo-breadcrumb" aria-label="Examples">
+      <a href="/">Examples</a>${title ? ` / <span>${title}</span>` : ''}
+    </nav>
+  `;
+}
+
+export async function initDemoSdk() {
+  appendLog('Loading SDK…');
+  await loadScript('/moment-sdk.js');
+
+  if (!window.MomentSdk) {
+    throw new Error('MomentSdk global not found after script load');
+  }
+
+  const sdk = new window.MomentSdk({
+    onSuccess: (result) => {
+      appendLog(`onSuccess → ${JSON.stringify(result)}`, 'success');
+    },
+    onError: (result) => {
+      appendLog(`onError → ${JSON.stringify(result)}`, 'error');
+    },
+    onClose: (result) => {
+      appendLog(`onClose → ${result.result}`, 'muted');
+    },
+    onAnalytics: (event) => {
+      appendLog(`analytics → ${event.event}`, 'muted');
+    },
+  });
+
+  sdk.rebind();
+  appendLog('MomentSdk ready — click a trigger button', 'success');
+  wireCopyButtons();
+  return sdk;
+}
+
+export function renderMomentCards(container, moments, teamSlug) {
+  const root = typeof container === 'string' ? document.querySelector(container) : container;
+  if (!root) return;
+
+  root.innerHTML = moments
+    .map(
+      (moment) => `
+      <article class="card">
+        <div class="card-info">
+          <div class="card-title">${moment.title}</div>
+          <div class="card-meta">${moment.date} · <code>${moment.slug}</code></div>
+        </div>
+        <button
+          type="button"
+          class="moment-sync-trigger"
+          data-moment-team-slug="${teamSlug}"
+          data-moment-slug="${moment.slug}"
+          data-moment-trigger-type="moment"
+        >
+          Add to Calendar
+        </button>
+      </article>
+    `,
+    )
+    .join('');
+}
+
+export function mountLogPanel(label = 'SDK callbacks') {
+  const host = document.getElementById('demo-log-host');
+  if (!host) return;
+  host.innerHTML = `
+    <section class="section">
+      <h2>${label}</h2>
+      <div id="${LOG_ID}" class="log-panel" aria-live="polite">
+        <p class="log-line log-line--muted">Waiting for SDK events…</p>
+      </div>
+    </section>
+  `;
+}
+
+export async function embedSnippetHtml({ triggerType, momentSlug, listSlug, label }) {
+  const meta = await getPackageMeta();
+  const attrs = [
+    `class="moment-sync-trigger"`,
+    `data-moment-team-slug="${DEMO_FIXTURES.teamSlug}"`,
+    `data-moment-trigger-type="${triggerType}"`,
+  ];
+  if (momentSlug) attrs.push(`data-moment-slug="${momentSlug}"`);
+  if (listSlug) attrs.push(`data-moment-list-slug="${listSlug}"`);
+
+  return `<!-- Moment SDK trigger -->
+<button type="button"
+  ${attrs.join('\n  ')}
+>${label ?? 'Add to Calendar'}</button>
+
+<script src="${meta.cdnUrl}"></script>
+<script>
+  new MomentSdk({
+    onSuccess: (r) => console.log('Synced', r),
+    onError: (r) => console.error('Failed', r),
+  });
+</script>`;
+}

package/examples/shared/demo.css

@@ -0,0 +1,270 @@
+:root {
+  color-scheme: light;
+  --bg: #fafaf9;
+  --surface: #ffffff;
+  --border: #e7e5e4;
+  --text: #1c1917;
+  --muted: #78716c;
+  --accent: #171717;
+  --accent-soft: #f5f5f4;
+  --code: #44403c;
+  --success: #15803d;
+  --error: #b91c1c;
+  --radius: 12px;
+  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+}
+
+.demo-shell {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 32px 20px 48px;
+}
+
+.demo-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.demo-breadcrumb {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.demo-breadcrumb a {
+  text-decoration: none;
+}
+
+.demo-breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+.demo-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.pill strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.pill a {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+h1 {
+  margin: 0 0 8px;
+  font-size: 28px;
+  letter-spacing: -0.02em;
+}
+
+.lead {
+  margin: 0 0 28px;
+  color: var(--muted);
+  font-size: 15px;
+}
+
+.card-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.card-info {
+  min-width: 0;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.card-meta {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.hero-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+}
+
+.moment-sync-trigger,
+.demo-btn {
+  flex-shrink: 0;
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  background: var(--accent);
+  color: #fff;
+  padding: 10px 16px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.moment-sync-trigger:hover,
+.demo-btn:hover {
+  opacity: 0.92;
+}
+
+.hub-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.hub-card {
+  display: block;
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  text-decoration: none;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.hub-card:hover {
+  border-color: #d6d3d1;
+  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.06);
+}
+
+.hub-card h2 {
+  margin: 0 0 6px;
+  font-size: 18px;
+}
+
+.hub-card p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.section {
+  margin-top: 32px;
+}
+
+.section h2 {
+  margin: 0 0 12px;
+  font-size: 16px;
+}
+
+.log-panel {
+  margin-top: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: #0c0a09;
+  color: #e7e5e4;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.6;
+  max-height: 220px;
+  overflow: auto;
+  padding: 12px;
+}
+
+.log-line {
+  margin: 0 0 6px;
+  word-break: break-word;
+}
+
+.log-line--success {
+  color: #86efac;
+}
+
+.log-line--error {
+  color: #fca5a5;
+}
+
+.log-line--muted {
+  color: #a8a29e;
+}
+
+.snippet {
+  position: relative;
+  margin-top: 8px;
+}
+
+.snippet pre {
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--accent-soft);
+  overflow-x: auto;
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--code);
+}
+
+.copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
+  padding: 4px 10px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.copy-btn:hover {
+  background: var(--bg);
+}

package/examples/shared/fixtures.js

@@ -0,0 +1,24 @@
+/**
+ * Demo slugs for the sdk-demo fixture brand.
+ * Update here when your Moment account uses different slugs.
+ */
+export const DEMO_FIXTURES = {
+  teamSlug: 'sdk-demo',
+  moments: [
+    {
+      slug: 'sdk-demo-moment-1',
+      title: 'SDK Demo - Moment 1',
+      date: 'Jun 1, 2027 · 10:00 AM ET',
+    },
+    {
+      slug: 'copy-sdk-demo-moment-1',
+      title: 'SDK Demo - Moment 2',
+      date: 'Jun 1, 2028 · 10:00 AM ET',
+    },
+  ],
+  collection: {
+    slug: 'sdk-demo-collection',
+    title: 'SDK Demo Collection',
+    description: 'Curated set of demo events for list-level sync.',
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentco-ai/moment-sdk",
-  "version": "0.2.2-dev.17",
+  "version": "0.3.0-dev.18",
   "type": "module",
   "description": "Embeddable calendar sync widget for external team websites",
   "author": "Moment Co. <support@momentco.ai> (https://momentco.ai)",
@@ -38,8 +38,14 @@
       "default": "./dist/moment-sdk.js"
     }
   },
+  "bin": {
+    "moment-sdk-examples": "./examples/serve.mjs"
+  },
   "files": [
-    "dist"
+    "dist",
+    "examples",
+    "CHANGELOG.md",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public",
@@ -56,6 +62,7 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "quality": "pnpm run type-check && pnpm run lint && pnpm run format",
+    "examples": "pnpm build && node examples/serve.mjs",
     "prepare": "husky"
   },
   "devDependencies": {