@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/notification/notification-service.ts

@@ -0,0 +1,324 @@
+import { $sounds, type Feeling } from '../audio'
+import SchmancyNotification, { NotificationType } from './notification'
+
+export interface NotificationOptions {
+	id?: string
+	title?: string
+	message: string
+	type?: NotificationType
+	duration?: number
+	closable?: boolean
+	playSound?: boolean
+	showProgress?: boolean
+}
+
+const typeToFeeling: Record<NotificationType, Feeling> = {
+	info: 'curious',
+	success: 'content',
+	warning: 'anxious',
+	error: 'disappointed',
+}
+
+// Track last mouse position
+let lastClickPosition = { x: window.innerWidth - 100, y: 50 }
+
+// Global mousedown listener to track click position
+if (typeof window !== 'undefined') {
+	window.addEventListener(
+		'mousedown',
+		(e: MouseEvent) => {
+			lastClickPosition = { x: e.clientX, y: e.clientY }
+		},
+		{ capture: true, passive: true },
+	)
+}
+
+// Track current notification element
+let currentNotification: SchmancyNotification | null = null
+
+/**
+ * Notification service for centralized notification management.
+ * Provides a simple API for showing notifications.
+ */
+export class NotificationService {
+	private static instance: NotificationService
+	private notificationStack: string[] = []
+	private audioVolume = 0.1
+
+	// Default notification options
+	private static DEFAULT_OPTIONS: Partial<NotificationOptions> = {
+		duration: 1000, // 1 seconds - long enough to be readable
+		closable: true,
+		playSound: true,
+	}
+
+	// Type-specific default durations (in milliseconds)
+	private static TYPE_DURATIONS: Record<NotificationType, number> = {
+		success: 1500, // 1.5 seconds - quick confirmation
+		info: 2000, // 2 seconds - informational
+		warning: 2500, // 2.5 seconds - needs attention
+		error: 2500, // 2.5 seconds - important
+	}
+
+	// Private constructor for singleton pattern
+	private constructor() {
+		$sounds.setVolume(this.audioVolume)
+	}
+
+	/**
+	 * Get the singleton instance
+	 */
+	public static getInstance(): NotificationService {
+		if (!NotificationService.instance) {
+			NotificationService.instance = new NotificationService()
+		}
+		return NotificationService.instance
+	}
+
+	/**
+	 * Show a notification
+	 * @returns The ID of the created notification
+	 */
+	public notify(options: NotificationOptions): string {
+		// Apply default options
+		const completeOptions = {
+			...NotificationService.DEFAULT_OPTIONS,
+			...options,
+			// Override with duraton from options if provided, otherwise use default
+			duration: options.duration ?? NotificationService.DEFAULT_OPTIONS.duration,
+		}
+
+		const id = completeOptions.id || `notification-${Date.now()}-${Math.floor(Math.random() * 10000)}`
+
+		// Add to stack for tracking
+		this.notificationStack.push(id)
+
+		// Remove existing notification if any (only 1 at a time)
+		if (currentNotification) {
+			currentNotification.remove()
+			currentNotification = null
+		}
+
+		// Create the notification element directly
+		const notification = document.createElement('sch-notification') as SchmancyNotification
+		notification.id = id
+		notification.title = completeOptions.title || ''
+		notification.message = completeOptions.message
+		notification.type = completeOptions.type || 'info'
+		notification.duration = completeOptions.duration ?? 1000
+		notification.closable = completeOptions.closable !== false
+		notification.playSound = false // We handle sound here
+		notification.showProgress = completeOptions.showProgress || false
+		notification.startPosition = { ...lastClickPosition }
+
+		// Play sound if enabled
+		if (completeOptions.playSound !== false) {
+			$sounds.play(typeToFeeling[notification.type])
+		}
+
+		// Listen for close event
+		notification.addEventListener('close', () => {
+			const index = this.notificationStack.indexOf(id)
+			if (index > -1) {
+				this.notificationStack.splice(index, 1)
+			}
+			notification.remove()
+			if (currentNotification === notification) {
+				currentNotification = null
+			}
+		})
+
+		// Append to body
+		document.body.appendChild(notification)
+		currentNotification = notification
+
+		return id
+	}
+
+	/**
+	 * Dismiss a notification
+	 * @param id Optional notification ID. If not provided, dismisses the most recent notification
+	 */
+	public dismiss(id?: string): void {
+		let targetId: string | undefined
+
+		if (id) {
+			// Remove specific notification from stack
+			const index = this.notificationStack.indexOf(id)
+			if (index > -1) {
+				this.notificationStack.splice(index, 1)
+				targetId = id
+			}
+		} else {
+			// Remove most recent notification (last in stack)
+			targetId = this.notificationStack.pop()
+		}
+
+		if (targetId && currentNotification && currentNotification.id === targetId) {
+			currentNotification.close()
+		}
+	}
+
+	/**
+	 * Update a notification's content
+	 */
+	public update(id: string, options: Partial<NotificationOptions>): void {
+		if (currentNotification && currentNotification.id === id) {
+			if (options.title !== undefined) currentNotification.title = options.title
+			if (options.message !== undefined) currentNotification.message = options.message
+			if (options.type !== undefined) currentNotification.type = options.type
+		}
+	}
+
+	/**
+	 * Show an info notification
+	 */
+	public info(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
+		return this.notify({
+			message: message ?? '',
+			type: 'info',
+			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.info) : 1,
+			...options,
+		})
+	}
+
+	/**
+	 * Show a success notification
+	 */
+	public success(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
+		return this.notify({
+			message: message ?? '',
+			type: 'success',
+			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.success) : 1,
+			...options,
+		})
+	}
+
+	/**
+	 * Show a warning notification
+	 */
+	public warning(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
+		return this.notify({
+			message: message ?? '',
+			type: 'warning',
+			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.warning) : 1,
+			...options,
+		})
+	}
+
+	/**
+	 * Show an error notification
+	 */
+	public error(message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string {
+		return this.notify({
+			message: message ?? '',
+			type: 'error',
+			duration: message ? (options.duration ?? NotificationService.TYPE_DURATIONS.error) : 1,
+			...options,
+		})
+	}
+
+	/**
+	 * Show a notification with a custom duration
+	 */
+	public customDuration(
+		message: string,
+		duration: number,
+		options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {},
+	): string {
+		return this.notify({
+			message,
+			duration,
+			...options,
+		})
+	}
+
+	/**
+	 * Show a persistent notification (won't auto-dismiss)
+	 */
+	public persistent(message: string, options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {}): string {
+		return this.notify({
+			message,
+			duration: 0, // Zero duration means no auto-close
+			...options,
+		})
+	}
+}
+
+/**
+ * Global notification utility - provides a quick way to show notifications
+ */
+export const $notify = {
+	/**
+	 * Show a notification
+	 */
+	show: (options: NotificationOptions): string => {
+		return NotificationService.getInstance().notify(options)
+	},
+
+	/**
+	 * Show an info notification
+	 */
+	info: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
+		return NotificationService.getInstance().info(message, options)
+	},
+
+	/**
+	 * Show a success notification
+	 */
+	success: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
+		return NotificationService.getInstance().success(message, options)
+	},
+
+	/**
+	 * Show a warning notification
+	 */
+	warning: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
+		return NotificationService.getInstance().warning(message, options)
+	},
+
+	/**
+	 * Show an error notification
+	 */
+	error: (message?: string, options: Partial<Omit<NotificationOptions, 'message' | 'type'>> = {}): string => {
+		return NotificationService.getInstance().error(message, options)
+	},
+
+	/**
+	 * Show a notification with a custom duration
+	 * @param message The notification message
+	 * @param duration Duration in milliseconds before auto-dismissing (0 for no auto-dismiss)
+	 * @param options Additional notification options
+	 */
+	customDuration: (
+		message: string,
+		duration: number,
+		options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {},
+	): string => {
+		return NotificationService.getInstance().customDuration(message, duration, options)
+	},
+
+	/**
+	 * Show a persistent notification that won't auto-dismiss
+	 */
+	persistent: (message: string, options: Partial<Omit<NotificationOptions, 'message' | 'duration'>> = {}): string => {
+		return NotificationService.getInstance().persistent(message, options)
+	},
+
+	/**
+	 * Dismiss a notification
+	 * @param id Optional notification ID. If not provided, dismisses the most recent notification (queue-like behavior)
+	 */
+	dismiss: (id?: string): void => {
+		return NotificationService.getInstance().dismiss(id)
+	},
+
+	/**
+	 * Update a notification's content
+	 */
+	update: (id: string, options: Partial<NotificationOptions>): void => {
+		return NotificationService.getInstance().update(id, options)
+	},
+}
+
+export default NotificationService

package/src/notification/notification.scss

@@ -0,0 +1,117 @@
+:host {
+	display: block;
+}
+
+.notification {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 12px;
+	padding-right: 32px;
+	background: var(--schmancy-sys-color-surface-container);
+	border-radius: var(--schmancy-sys-shape-corner-extraLarge, 16px);
+	color: var(--schmancy-sys-color-surface-on);
+	max-width: 320px;
+	overflow: hidden;
+
+	/* Type-colored luminous glow */
+	--notification-glow-color: var(--schmancy-sys-color-primary-default);
+	box-shadow: 0 4px 24px -6px color-mix(in srgb, var(--notification-glow-color) 18%, transparent);
+	border-left: 2px solid color-mix(in srgb, var(--notification-glow-color) 50%, transparent);
+
+	transition:
+		box-shadow 300ms ease,
+		transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+	&.info { --notification-glow-color: var(--schmancy-sys-color-primary-default); }
+	&.success { --notification-glow-color: var(--schmancy-sys-color-success-default); }
+	&.warning { --notification-glow-color: var(--schmancy-sys-color-warning-default); }
+	&.error { --notification-glow-color: var(--schmancy-sys-color-error-default); }
+
+	&.hovered {
+		box-shadow: 0 8px 32px -4px color-mix(in srgb, var(--notification-glow-color) 28%, transparent);
+		transform: translateY(-2px);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		transition: box-shadow 200ms ease;
+		&.hovered { transform: none; }
+	}
+}
+
+.emoji {
+	font-size: 20px;
+	line-height: 1;
+	flex-shrink: 0;
+	margin-top: 1px;
+}
+
+.content {
+	flex: 1;
+	min-width: 0;
+}
+
+.title {
+	font-weight: 500;
+	font-size: 13px;
+	line-height: 1.4;
+	margin-bottom: 2px;
+	letter-spacing: 0.01em;
+
+	.info & {
+		color: var(--schmancy-sys-color-primary-default);
+	}
+	.success & {
+		color: var(--schmancy-sys-color-success-default);
+	}
+	.warning & {
+		color: var(--schmancy-sys-color-tertiary-default);
+	}
+	.error & {
+		color: var(--schmancy-sys-color-error-default);
+	}
+}
+
+.message {
+	font-size: 13px;
+	line-height: 1.4;
+	opacity: 0.75;
+	letter-spacing: 0.01em;
+}
+
+.close {
+	position: absolute;
+	top: 8px;
+	right: 6px;
+	background: none;
+	border: none;
+	font-size: 16px;
+	font-weight: 300;
+	color: var(--schmancy-sys-color-surface-onVariant);
+	cursor: pointer;
+	padding: 4px 6px;
+	line-height: 1;
+	opacity: 0.4;
+	border-radius: var(--schmancy-sys-shape-corner-full, 50%);
+	transition: opacity 200ms ease;
+
+	&:hover {
+		opacity: 0.8;
+	}
+
+	&:focus-visible {
+		outline: none;
+		opacity: 1;
+		box-shadow:
+			0 0 0 2px var(--schmancy-sys-color-primary-default),
+			0 0 8px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 25%, transparent);
+	}
+}
+
+.progress {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}

package/src/notification/notification.ts

@@ -0,0 +1,263 @@
+import { $LitElement } from '@mixins/index'
+import { html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { BehaviorSubject, timer, interval, NEVER } from 'rxjs'
+import { switchMap, takeUntil, map, tap, distinctUntilChanged } from 'rxjs/operators'
+import '../progress/progress'
+import style from './notification.scss?inline'
+
+export type NotificationType = 'info' | 'success' | 'warning' | 'error'
+
+/**
+ * Calculate a point on an arc between two points
+ */
+function calculateArcPoint(
+	start: { x: number; y: number },
+	end: { x: number; y: number },
+	arcDirection: 'up' | 'down' = 'up',
+	intensity: number = 0.3,
+): { x: number; y: number } {
+	const midX = (start.x + end.x) / 2
+	const midY = (start.y + end.y) / 2
+	const distance = Math.sqrt(Math.pow(end.x - start.x, 2) + Math.pow(end.y - start.y, 2))
+	const arcHeight = Math.min(distance * intensity, 150)
+	return {
+		x: midX,
+		y: arcDirection === 'up' ? midY - arcHeight : midY + arcHeight,
+	}
+}
+
+/**
+ * @fires close - When notification is closed
+ */
+@customElement('sch-notification')
+export default class SchmancyNotification extends $LitElement(style) {
+	@property({ type: String }) title = ''
+	@property({ type: String }) message = ''
+	@property({ type: String }) type: NotificationType = 'info'
+	@property({ type: Boolean }) closable = true
+	@property({ type: Number }) duration = 5000 // 0 means no auto-close
+	@property({ type: String }) id = `notification-${Date.now()}-${Math.floor(Math.random() * 10000)}`
+	@property({ type: Boolean }) playSound = true
+	@property({ type: Boolean }) showProgress = false // Show indeterminate progress bar
+	@property({ type: Object }) startPosition: { x: number; y: number } = { x: 0, y: 0 }
+
+	@state() private _visible = true
+	@state() private _progress = 100
+	@state() private _hovered = false
+	@state() private _closing = false
+
+	private paused$ = new BehaviorSubject<boolean>(false)
+	private startTime = 0
+	private pausedAt = 0
+	private elapsedBeforePause = 0
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		// Set fixed positioning for blackbird animation
+		this.style.position = 'fixed'
+		this.style.top = '16px'
+		this.style.right = '16px'
+		this.style.zIndex = '10001'
+		this.style.opacity = '0'
+
+		// Animate in after first render
+		this.updateComplete.then(() => {
+			this.animateIn()
+		})
+
+		if (this.duration > 0) {
+			this.setupAutoClose()
+			this.setupProgressUpdates()
+		}
+
+		if (this.playSound) {
+			this._playSound()
+		}
+	}
+
+	private async animateIn() {
+		// Get the notification element's final position
+		const rect = this.getBoundingClientRect()
+		const targetX = rect.left + rect.width / 2
+		const targetY = rect.top + rect.height / 2
+
+		// Calculate arc point for upward arc
+		const arcPoint = calculateArcPoint(this.startPosition, { x: targetX, y: targetY }, 'up', 0.3)
+
+		// Animate from click position to final position with arc
+		await this.animate(
+			[
+				{
+					transform: `translate(${this.startPosition.x - targetX}px, ${this.startPosition.y - targetY}px) scale(0.1)`,
+					opacity: 0,
+				},
+				{
+					transform: `translate(${arcPoint.x - targetX}px, ${arcPoint.y - targetY}px) scale(0.6)`,
+					opacity: 0.9,
+					offset: 0.5,
+				},
+				{
+					transform: 'translate(0, 0) scale(1)',
+					opacity: 1,
+				},
+			],
+			{
+				duration: 400,
+				easing: 'cubic-bezier(0.34, 1.2, 0.64, 1)',
+				fill: 'forwards',
+			},
+		).finished
+	}
+
+	private setupAutoClose() {
+		if (this.duration <= 0) return
+
+		this.startTime = Date.now()
+		this.elapsedBeforePause = 0
+
+		this.paused$
+			.pipe(
+				switchMap(paused => {
+					if (paused) {
+						this.pausedAt = Date.now()
+						this.elapsedBeforePause += this.pausedAt - this.startTime
+						return NEVER
+					} else {
+						this.startTime = Date.now()
+						const remaining = this.duration - this.elapsedBeforePause
+						if (remaining <= 0) {
+							this.close()
+							return NEVER
+						}
+						return timer(remaining)
+					}
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe(() => this.close())
+	}
+
+	private setupProgressUpdates() {
+		if (this.duration <= 0) return
+
+		interval(16)
+			.pipe(
+				switchMap(() =>
+					this.paused$.pipe(
+						map(paused => {
+							if (paused) return this._progress
+							const elapsed = this.elapsedBeforePause + (Date.now() - this.startTime)
+							const remaining = Math.max(0, this.duration - elapsed)
+							return (remaining / this.duration) * 100
+						}),
+					),
+				),
+				distinctUntilChanged(),
+				tap(progress => {
+					this._progress = progress
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+	}
+
+	private _playSound() {
+		this.dispatchEvent(
+			new CustomEvent('playsound', {
+				detail: { type: this.type },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	private _handleMouseEnter() {
+		this._hovered = true
+		this.paused$.next(true)
+	}
+
+	private _handleMouseLeave() {
+		this._hovered = false
+		this.paused$.next(false)
+	}
+
+	public async close() {
+		if (this._closing) return
+		this._closing = true
+		this._visible = false
+
+		// Animate out before dispatching close event
+		await this.animate(
+			[
+				{ transform: 'translate(0, 0) scale(1)', opacity: 1 },
+				{ transform: 'translate(0, -20px) scale(0.8)', opacity: 0 },
+			],
+			{
+				duration: 200,
+				easing: 'cubic-bezier(0.4, 0, 1, 1)',
+				fill: 'forwards',
+			},
+		).finished
+
+		this.dispatchEvent(
+			new CustomEvent('close', {
+				detail: { id: this.id },
+				bubbles: true,
+				composed: true,
+			}),
+		)
+	}
+
+	private _getEmoji(): string {
+		switch (this.type) {
+			case 'success':
+				return '\u2705'
+			case 'warning':
+				return '\u26A0\uFE0F'
+			case 'error':
+				return '\u274C'
+			default:
+				return '\u{1F4A1}'
+		}
+	}
+
+	render() {
+		if (!this._visible && this._closing) return html``
+
+		return html`
+			<div
+				class="notification ${this.type} ${this._closing ? 'closing' : ''} ${this._hovered ? 'hovered' : ''}"
+				role="alert"
+				@mouseenter=${this._handleMouseEnter}
+				@mouseleave=${this._handleMouseLeave}
+			>
+				<span class="emoji">${this._getEmoji()}</span>
+				<div class="content">
+					${this.title ? html`<div class="title">${this.title}</div>` : ''}
+					<div class="message">${this.message}</div>
+				</div>
+				${this.closable
+					? html`
+							<button class="close" aria-label="Close notification" @click=${this.close}>x</button>
+						`
+					: ''}
+				${this.showProgress || this.duration > 0
+					? html`<schmancy-progress
+						class="progress"
+						size="xs"
+						.value=${this._progress}
+						?indeterminate=${this.showProgress && this.duration === 0}
+					></schmancy-progress>`
+					: ''}
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'sch-notification': SchmancyNotification
+	}
+}