makethisbetter 1.0.0

package/src/widget/pet.test.ts

@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { MakeThisBetter } from '../index'
+
+vi.mock('html-to-image', () => ({
+  toPng: vi.fn(async () => 'data:image/png;base64,AA=='),
+}))
+
+describe('Pet mode', () => {
+  afterEach(() => {
+    MakeThisBetter.destroy()
+    vi.restoreAllMocks()
+    document.body.innerHTML = ''
+  })
+
+  it('renders pet entry instead of tab when entryMode is pet', () => {
+    MakeThisBetter.init({
+      projectKey: 'proj_test',
+      entryMode: 'pet',
+      apiUrl: 'https://api.example.com/api/v1',
+    })
+
+    const shadow = document.getElementById('mtb-widget-host')!.shadowRoot!
+    expect(shadow.querySelector('.mtb-pet')).toBeTruthy()
+    expect(shadow.querySelector('.mtb-tab')).toBeNull()
+  })
+
+  it('shows speech bubble on the pet', () => {
+    MakeThisBetter.init({
+      projectKey: 'proj_test',
+      entryMode: 'pet',
+      apiUrl: 'https://api.example.com/api/v1',
+    })
+
+    const shadow = document.getElementById('mtb-widget-host')!.shadowRoot!
+    const bubble = shadow.querySelector('.mtb-pet-bubble')
+    expect(bubble).toBeTruthy()
+    expect(bubble!.textContent).toBe('Need help?')
+  })
+
+  it('opens annotation mode on pet click', () => {
+    MakeThisBetter.init({
+      projectKey: 'proj_test',
+      entryMode: 'pet',
+      apiUrl: 'https://api.example.com/api/v1',
+    })
+
+    const shadow = document.getElementById('mtb-widget-host')!.shadowRoot!
+    shadow.querySelector<HTMLDivElement>('.mtb-pet')!.click()
+    expect(shadow.querySelector('.mtb-overlay')).toBeTruthy()
+    expect(shadow.querySelector('.mtb-toolbar')).toBeTruthy()
+  })
+
+  it('renders tab by default (no entryMode)', () => {
+    MakeThisBetter.init({
+      projectKey: 'proj_test',
+      apiUrl: 'https://api.example.com/api/v1',
+    })
+
+    const shadow = document.getElementById('mtb-widget-host')!.shadowRoot!
+    expect(shadow.querySelector('.mtb-tab')).toBeTruthy()
+    expect(shadow.querySelector('.mtb-pet')).toBeNull()
+  })
+})

package/src/widget/pet.ts

@@ -0,0 +1,67 @@
+import type { ShadowContainer } from './shadow'
+import type { I18nMessages } from '../i18n'
+import { BRAND_COLOR } from '../styles'
+
+export class PetEntry {
+  private el: HTMLDivElement
+  private bubble: HTMLDivElement
+  private onClick: () => void
+
+  constructor(
+    shadow: ShadowContainer,
+    messages: I18nMessages,
+    onClick: () => void,
+  ) {
+    this.onClick = onClick
+
+    this.el = shadow.el<HTMLDivElement>('div', 'mtb-pet')
+    this.el.innerHTML = this.buildSVG()
+    this.el.setAttribute('role', 'button')
+    this.el.setAttribute('aria-label', messages.tab)
+    this.el.tabIndex = 0
+
+    this.bubble = shadow.el<HTMLDivElement>('div', 'mtb-pet-bubble')
+    this.bubble.textContent = messages.pet.bubble
+    this.el.appendChild(this.bubble)
+
+    this.el.addEventListener('click', this.onClick)
+    this.el.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        this.onClick()
+      }
+    })
+
+    shadow.append(this.el)
+  }
+
+  private buildSVG(): string {
+    return `<svg class="mtb-pet-svg" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="24" cy="28" r="16" fill="${BRAND_COLOR}"/>
+      <circle cx="24" cy="28" r="14" fill="#10b981"/>
+      <circle cx="19" cy="25" r="3" fill="#fff"/>
+      <circle cx="29" cy="25" r="3" fill="#fff"/>
+      <circle cx="20" cy="24.5" r="1.5" fill="#064e3b"/>
+      <circle cx="30" cy="24.5" r="1.5" fill="#064e3b"/>
+      <ellipse cx="19.5" cy="23.5" rx="0.8" ry="0.6" fill="#fff" opacity="0.7"/>
+      <ellipse cx="29.5" cy="23.5" rx="0.8" ry="0.6" fill="#fff" opacity="0.7"/>
+      <path d="M20 31 Q24 34 28 31" stroke="#064e3b" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+      <circle cx="15" cy="30" r="2.5" fill="${BRAND_COLOR}" opacity="0.4"/>
+      <circle cx="33" cy="30" r="2.5" fill="${BRAND_COLOR}" opacity="0.4"/>
+      <path d="M14 17 Q16 12 20 15" stroke="#10b981" stroke-width="2" stroke-linecap="round" fill="none"/>
+      <path d="M34 17 Q32 12 28 15" stroke="#10b981" stroke-width="2" stroke-linecap="round" fill="none"/>
+    </svg>`
+  }
+
+  setActive(active: boolean): void {
+    this.el.classList.toggle('active', active)
+    if (active) {
+      this.bubble.classList.add('hidden')
+    }
+  }
+
+  destroy(): void {
+    this.el.removeEventListener('click', this.onClick)
+    this.el.remove()
+  }
+}

package/src/widget/shadow.test.ts

@@ -0,0 +1,25 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { ShadowContainer } from './shadow'
+
+describe('ShadowContainer', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('mounts widget styles inside a shadow root', () => {
+    const shadow = new ShadowContainer()
+
+    expect(document.getElementById('mtb-widget-host')?.shadowRoot).toBe(shadow.root)
+    expect(shadow.root.querySelector('style')).toBeInstanceOf(HTMLStyleElement)
+
+    shadow.destroy()
+  })
+
+  it('stores configured theme on the host', () => {
+    const shadow = new ShadowContainer('dark')
+
+    expect(document.getElementById('mtb-widget-host')?.getAttribute('data-mtb-theme')).toBe('dark')
+
+    shadow.destroy()
+  })
+})

package/src/widget/shadow.ts

@@ -0,0 +1,41 @@
+import cssText from '../styles/widget.css?inline'
+import type { MakeThisBetterConfig } from '../types'
+
+export class ShadowContainer {
+  private host: HTMLElement
+  readonly root: ShadowRoot
+
+  constructor(theme: MakeThisBetterConfig['theme'] = 'auto') {
+    this.host = document.createElement('div')
+    this.host.id = 'mtb-widget-host'
+    this.host.style.cssText = 'position:fixed;top:0;left:0;width:0;height:0;overflow:visible;z-index:2147483646;'
+    this.host.setAttribute('data-mtb-theme', theme)
+    document.body.appendChild(this.host)
+
+    this.root = this.host.attachShadow({ mode: 'open' })
+
+    const style = document.createElement('style')
+    style.textContent = cssText
+    this.root.appendChild(style)
+  }
+
+  el<T extends HTMLElement = HTMLElement>(tag: string, className?: string): T {
+    const el = document.createElement(tag) as T
+    if (className) el.className = className
+    return el
+  }
+
+  append(...nodes: Node[]): void {
+    for (const n of nodes) this.root.appendChild(n)
+  }
+
+  remove(...nodes: Node[]): void {
+    for (const n of nodes) {
+      if (n.parentNode === this.root) this.root.removeChild(n)
+    }
+  }
+
+  destroy(): void {
+    document.body.removeChild(this.host)
+  }
+}

package/src/widget/tab.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from 'vitest'
+import { FeedbackTab } from './tab'
+import { ShadowContainer } from './shadow'
+import { getMessages } from '../i18n'
+
+function setupTab(position: 'left' | 'right' = 'right') {
+  const shadow = new ShadowContainer()
+  const onClick = vi.fn()
+  const messages = getMessages('en')
+  const tab = new FeedbackTab(shadow, messages, position, onClick)
+
+  return { shadow, tab, onClick, messages }
+}
+
+describe('FeedbackTab', () => {
+  it('renders button with feedback text', () => {
+    const { shadow, tab, messages } = setupTab()
+
+    const btn = shadow.root.querySelector<HTMLButtonElement>('.mtb-tab')
+    expect(btn).toBeTruthy()
+    expect(btn!.textContent).toBe(messages.tab)
+    expect(btn!.getAttribute('aria-label')).toBe(messages.tab)
+
+    tab.destroy()
+    shadow.destroy()
+  })
+
+  it('positions on right by default (no left class)', () => {
+    const { shadow, tab } = setupTab('right')
+
+    const btn = shadow.root.querySelector<HTMLButtonElement>('.mtb-tab')!
+    expect(btn.classList.contains('left')).toBe(false)
+
+    tab.destroy()
+    shadow.destroy()
+  })
+
+  it('adds left class when position is left', () => {
+    const { shadow, tab } = setupTab('left')
+
+    const btn = shadow.root.querySelector<HTMLButtonElement>('.mtb-tab')!
+    expect(btn.classList.contains('left')).toBe(true)
+
+    tab.destroy()
+    shadow.destroy()
+  })
+
+  it('calls onClick when button is clicked', () => {
+    const { shadow, tab, onClick } = setupTab()
+
+    shadow.root.querySelector<HTMLButtonElement>('.mtb-tab')!.click()
+    expect(onClick).toHaveBeenCalledOnce()
+
+    tab.destroy()
+    shadow.destroy()
+  })
+
+  it('setActive toggles active class', () => {
+    const { shadow, tab } = setupTab()
+    const btn = shadow.root.querySelector<HTMLButtonElement>('.mtb-tab')!
+
+    tab.setActive(true)
+    expect(btn.classList.contains('active')).toBe(true)
+
+    tab.setActive(false)
+    expect(btn.classList.contains('active')).toBe(false)
+
+    tab.destroy()
+    shadow.destroy()
+  })
+
+  it('destroy removes element from shadow root', () => {
+    const { shadow, tab } = setupTab()
+
+    expect(shadow.root.querySelector('.mtb-tab')).toBeTruthy()
+    tab.destroy()
+    expect(shadow.root.querySelector('.mtb-tab')).toBeNull()
+
+    shadow.destroy()
+  })
+
+  it('destroy removes click listener', () => {
+    const { shadow, tab, onClick } = setupTab()
+
+    tab.destroy()
+    const btn = shadow.root.querySelector('.mtb-tab')
+    expect(btn).toBeNull()
+    expect(onClick).not.toHaveBeenCalled()
+
+    shadow.destroy()
+  })
+})

package/src/widget/tab.ts

@@ -0,0 +1,31 @@
+import type { ShadowContainer } from './shadow'
+import type { I18nMessages } from '../i18n'
+
+export class FeedbackTab {
+  private el: HTMLButtonElement
+  private onClick: () => void
+
+  constructor(
+    shadow: ShadowContainer,
+    messages: I18nMessages,
+    position: 'left' | 'right',
+    onClick: () => void,
+  ) {
+    this.onClick = onClick
+    this.el = shadow.el<HTMLButtonElement>('button', 'mtb-tab')
+    if (position === 'left') this.el.classList.add('left')
+    this.el.textContent = messages.tab
+    this.el.setAttribute('aria-label', messages.tab)
+    this.el.addEventListener('click', onClick)
+    shadow.append(this.el)
+  }
+
+  setActive(active: boolean): void {
+    this.el.classList.toggle('active', active)
+  }
+
+  destroy(): void {
+    this.el.removeEventListener('click', this.onClick)
+    this.el.remove()
+  }
+}