@samline/notify 0.1.0 → 0.1.6

package/src/vanilla/toasterManager.ts

@@ -1,132 +0,0 @@
-import { sileo, ToastItem } from '../core/index';
-import { animate } from 'motion';
-
-const POSITIONS = [
-  'top-left',
-  'top-center',
-  'top-right',
-  'bottom-left',
-  'bottom-center',
-  'bottom-right'
-] as const;
-
-export type Position = typeof POSITIONS[number];
-
-function createContainer(position: string, root: HTMLElement) {
-  const c = document.createElement('div');
-  c.className = 'sileo-toaster';
-  c.setAttribute('data-position', position);
-  c.setAttribute('role', 'status');
-  c.setAttribute('aria-live', 'polite');
-  return c;
-}
-
-function renderToast(item: ToastItem) {
-  const el = document.createElement('div');
-  el.className = 'sileo-toast';
-  el.dataset.id = item.id;
-  el.setAttribute('data-type', item.options.type || 'info');
-  el.style.opacity = '0';
-  el.style.transform = 'translateY(-6px)';
-
-  const body = document.createElement('div');
-  body.style.display = 'flex';
-  body.style.flexDirection = 'column';
-  body.style.flex = '1';
-
-  const header = document.createElement('div');
-  header.className = 'sileo-toast-header';
-  header.textContent = item.options.title || '';
-
-  body.appendChild(header);
-
-  if (item.options.description) {
-    const desc = document.createElement('div');
-    desc.className = 'sileo-toast-desc';
-    desc.textContent = item.options.description;
-    body.appendChild(desc);
-  }
-
-  el.appendChild(body);
-
-  if (item.options.button) {
-    const btn = document.createElement('button');
-    btn.className = 'sileo-toast-btn';
-    btn.textContent = item.options.button.title;
-    btn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      try {
-        if (item.options.button && typeof item.options.button.onClick === 'function') {
-          item.options.button.onClick();
-        }
-      } catch (err) { console.error(err); }
-    });
-    el.appendChild(btn);
-  }
-
-  const close = document.createElement('button');
-  close.className = 'sileo-toast-close';
-  close.innerHTML = '×';
-  close.addEventListener('click', () => sileo.dismiss(item.id));
-  el.appendChild(close);
-
-  if (typeof item.options.duration === 'number') {
-    if (item.options.duration > 0) {
-      setTimeout(() => sileo.dismiss(item.id), item.options.duration);
-    }
-  }
-
-  return el;
-}
-
-export function initToasters(root: HTMLElement = document.body, positions: Position[] = ['top-right']) {
-  const containers: Record<string, HTMLElement> = {};
-
-  positions.forEach((pos) => {
-    const c = createContainer(pos, root);
-    root.appendChild(c);
-    containers[pos] = c;
-  });
-
-  function rerender(items: ToastItem[]) {
-    positions.forEach((pos) => {
-      const container = containers[pos];
-      const visible = items.filter((t) => (t.options.position || 'top-right') === pos);
-
-      // Diff existing children and animate out removed toasts
-      const visibleIds = new Set(visible.map((v) => v.id));
-      const existing = Array.from(container.children) as HTMLElement[];
-
-      existing.forEach((child) => {
-        const id = child.dataset.id;
-        if (!id || !visibleIds.has(id)) {
-          // animate out then remove
-          animate(child, { opacity: 0, y: -8 }, { duration: 0.18 }).finished.then(() => child.remove());
-        }
-      });
-
-      // Add new items
-      visible.forEach((t) => {
-        if (!container.querySelector(`[data-id="${t.id}"]`)) {
-          const node = renderToast(t);
-          container.appendChild(node);
-          // animate in
-          requestAnimationFrame(() => {
-            animate(node, { opacity: [0, 1], y: [-6, 0] }, { duration: 0.24 });
-          });
-        }
-      });
-    });
-  }
-
-  const unsub = sileo.subscribe(rerender);
-
-  return {
-    destroy() {
-      unsub();
-      Object.values(containers).forEach((c) => c.remove());
-    }
-  };
-}
-
-export { POSITIONS };

package/src/vue/index.ts

@@ -1,61 +0,0 @@
-import { App, defineComponent, h, onMounted, ref } from 'vue';
-import { notify, sileo } from '../core/index';
-import type { ToastItem } from '../core/index';
-import { animate } from 'motion';
-
-export const Toaster = defineComponent({
-  props: { position: { type: String, default: 'top-right' } },
-  setup(props) {
-    const toasts = ref<ToastItem[]>([]);
-    let unsub: (() => void) | null = null;
-    onMounted(() => {
-      unsub = sileo.subscribe((items) => { toasts.value = items.filter((t) => (t.options.position || 'top-right') === props.position); });
-    });
-    const handleDismiss = async (id: string) => {
-      const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement | null;
-      if (el) {
-        try {
-          const a = animate(el, { opacity: [1, 0], transform: ['translateY(0px)', 'translateY(-8px)'] }, { duration: 0.15 });
-          await (a as any).finished;
-        } catch (e) { /* ignore */ }
-      }
-      sileo.dismiss(id);
-    };
-    // animate in newly added toasts after render
-    const lastIds = ref<string[]>([]);
-    import('vue').then(({ nextTick }) => {
-      // watch toasts and animate new ones
-      const stop = (require('vue') as any).watch(toasts, async () => {
-        await nextTick();
-        const ids = toasts.value.map(t => t.id);
-        const added = ids.filter(id => !lastIds.value.includes(id));
-        added.forEach(id => {
-          const el = document.querySelector(`[data-id="${id}"]`) as HTMLElement | null;
-          if (el) {
-            el.style.opacity = '0';
-            el.style.transform = 'translateY(-6px)';
-            try { animate(el, { opacity: [0,1], transform: ['translateY(-6px)','translateY(0px)'] }, { duration: 0.22 }); } catch (e) {}
-          }
-        });
-        lastIds.value = ids;
-      }, { deep: true });
-    }).catch(() => {});
-    return () => h('div', { class: 'sileo-toaster', 'data-position': props.position }, toasts.value.map((t) => h('div', { key: t.id, class: 'sileo-toast', 'data-type': t.options.type }, [
-      h('div', { style: { flex: '1' } }, [
-        h('div', { class: 'sileo-toast-header' }, t.options.title),
-        t.options.description ? h('div', { class: 'sileo-toast-desc' }, t.options.description) : null
-      ]),
-      t.options.button ? h('button', { class: 'sileo-toast-btn', onClick: (e: Event) => { e.stopPropagation(); t.options.button!.onClick(); handleDismiss(t.id); } }, t.options.button.title) : null,
-      h('button', { class: 'sileo-toast-close', onClick: () => handleDismiss(t.id) }, '×')
-    ])));
-  }
-});
-
-export default {
-  install(app: App) {
-    app.config.globalProperties.$sileo = sileo;
-    // expose notify as well on the app for convenience
-    (app.config.globalProperties as any).$notify = notify;
-    app.component('SileoToaster', Toaster as any);
-  }
-};

package/test/smoke/no-bundler.test.ts

@@ -1,10 +0,0 @@
-import { existsSync } from 'fs';
-import { describe, it, expect } from 'vitest';
-import { resolve } from 'path';
-
-describe('no-bundler UMD bundle', () => {
-  it('dist/notify.umd.js should exist', () => {
-    const p = resolve(__dirname, '../../dist/notify.umd.js');
-    expect(existsSync(p)).toBe(true);
-  });
-});

package/test/smoke/svelte.test.ts

@@ -1,12 +0,0 @@
-import { readFileSync, existsSync } from 'fs';
-import { describe, it, expect } from 'vitest';
-import { resolve } from 'path';
-
-describe('svelte toaster smoke', () => {
-  it('src/svelte/Toaster.svelte contains use:animateIn or motion import', () => {
-    const p = resolve(__dirname, '../../src/svelte/Toaster.svelte');
-    expect(existsSync(p)).toBe(true);
-    const txt = readFileSync(p, 'utf-8');
-    expect(/use:animateIn|from\s+['"]motion['"]/.test(txt)).toBe(true);
-  });
-});

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",
-    "module": "ESNext",
-    "declaration": true,
-    "outDir": "dist",
-    "strict": true,
-    "moduleResolution": "Node",
-    "jsx": "react-jsx",
-    "jsxImportSource": "react",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["src/**/*"]
-}