@mhmo91/schmancy 0.8.4 → 0.9.2

package/src/tooltip/tooltip.directive.ts

@@ -0,0 +1,277 @@
+import { arrow, autoUpdate, computePosition, flip, offset, Placement, shift, Strategy } from '@floating-ui/dom'
+import { Directive, directive, ElementPart, ElementPartInfo, PartType } from 'lit/directive.js'
+import { fromEvent, Subscription } from 'rxjs'
+
+// Store tooltip data for elements
+const tooltipMap = new WeakMap<
+	Element,
+	{
+		tooltipElement: HTMLElement
+		arrowElement?: HTMLElement
+		cleanup?: () => void
+		showTimeout?: number
+		subscriptions?: Subscription[]
+	}
+>()
+
+class TooltipDirective extends Directive {
+	constructor(partInfo: ElementPartInfo) {
+		super(partInfo)
+		if (partInfo.type !== PartType.ELEMENT) {
+			throw new Error('The tooltip directive can only be used on elements')
+		}
+	}
+
+	render(
+		text: string,
+		options: {
+			position?: 'top' | 'right' | 'bottom' | 'left'
+			delay?: number
+			showArrow?: boolean
+		} = {},
+	) {
+		return { text, options }
+	}
+
+	update(part: ElementPart, [text, options = {}]: [string, any]) {
+		const element = part.element as HTMLElement
+		const position = options?.position || 'top'
+		const delay = options?.delay || 300
+		const showArrow = options?.showArrow !== false // Default to true
+
+		// Get or create tooltip data
+		let tooltipData = tooltipMap.get(element)
+
+		if (!tooltipData) {
+			// Create tooltip element
+			const tooltipElement = document.createElement('div')
+			tooltipElement.className = 'schmancy-tooltip'
+
+			// Apply styles
+			Object.assign(tooltipElement.style, {
+				position: 'absolute',
+				zIndex: '10000',
+				backgroundColor: 'var(--schmancy-sys-color-surface-highest, #333)',
+				color: 'var(--schmancy-sys-color-surface-on, white)',
+				padding: '8px 12px',
+				borderRadius: '4px',
+				fontSize: '14px',
+				fontWeight: 'normal',
+				maxWidth: '300px',
+				pointerEvents: 'none',
+				opacity: '0',
+				transition: 'opacity 150ms ease',
+				boxShadow: 'var(--schmancy-sys-elevation-2)',
+				textAlign: 'center',
+				// Important: start with visibility hidden to avoid flash
+				visibility: 'hidden',
+			})
+
+			// Create arrow element if needed
+			let arrowElement: HTMLElement | undefined
+			if (showArrow) {
+				arrowElement = document.createElement('div')
+				arrowElement.className = 'schmancy-tooltip-arrow'
+				Object.assign(arrowElement.style, {
+					position: 'absolute',
+					width: '8px',
+					height: '8px',
+					background: 'inherit',
+					visibility: 'hidden',
+					// We'll rotate this to create an arrow
+					transform: 'rotate(45deg)',
+				})
+				tooltipElement.appendChild(arrowElement)
+			}
+
+			// Set ARIA attributes
+			tooltipElement.setAttribute('role', 'tooltip')
+
+			// Generate unique ID
+			const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`
+			tooltipElement.id = tooltipId
+			element.setAttribute('aria-describedby', tooltipId)
+
+			// Add to document
+			document.body.appendChild(tooltipElement)
+
+			// Create tooltip data
+			tooltipData = {
+				tooltipElement,
+				arrowElement,
+			}
+
+			tooltipMap.set(element, tooltipData)
+
+			// Define show handler
+			const showTooltip = () => {
+				if (tooltipData?.showTimeout) {
+					clearTimeout(tooltipData.showTimeout)
+				}
+
+				tooltipData.showTimeout = window.setTimeout(() => {
+					// Set content
+					tooltipData.tooltipElement.textContent = text
+
+					// Add arrow back if it was removed
+					if (showArrow && tooltipData.arrowElement && !tooltipData.tooltipElement.contains(tooltipData.arrowElement)) {
+						tooltipData.tooltipElement.appendChild(tooltipData.arrowElement)
+					}
+
+					// Make sure element is visible first
+					tooltipData.tooltipElement.style.visibility = 'visible'
+
+					// Clean up existing positioning
+					if (tooltipData.cleanup) {
+						tooltipData.cleanup()
+					}
+
+					// Set up positioning
+					tooltipData.cleanup = autoUpdate(element, tooltipData.tooltipElement, () =>
+						updatePosition(element, tooltipData, position, showArrow),
+					)
+
+					// Make opacity 1 after positioning is set up
+					requestAnimationFrame(() => {
+						tooltipData.tooltipElement.style.opacity = '1'
+					})
+				}, delay)
+			}
+
+			// Define hide handler
+			const hideTooltip = () => {
+				if (tooltipData?.showTimeout) {
+					clearTimeout(tooltipData.showTimeout)
+				}
+
+				tooltipData.tooltipElement.style.opacity = '0'
+
+				// Set visibility to hidden after fade out
+				setTimeout(() => {
+					tooltipData.tooltipElement.style.visibility = 'hidden'
+				}, 150) // Match transition time
+
+				// Clean up positioning
+				if (tooltipData?.cleanup) {
+					tooltipData.cleanup()
+					tooltipData.cleanup = undefined
+				}
+			}
+
+			// Add event listeners using fromEvent
+			const subscriptions = [
+				fromEvent(element, 'mouseenter').subscribe(showTooltip),
+				fromEvent(element, 'focus').subscribe(showTooltip),
+				fromEvent(element, 'mouseleave').subscribe(hideTooltip),
+				fromEvent(element, 'blur').subscribe(hideTooltip),
+				fromEvent<KeyboardEvent>(document, 'keydown').subscribe((e: KeyboardEvent) => {
+					if (e.key === 'Escape' && tooltipData?.tooltipElement.style.opacity === '1') {
+						hideTooltip()
+					}
+				})
+			]
+
+			// Store subscriptions for cleanup
+			tooltipData.subscriptions = subscriptions
+		} else {
+			// Update content for existing tooltip
+			tooltipData.tooltipElement.textContent = text
+
+			// Update arrow visibility if needed
+			if (tooltipData.arrowElement) {
+				tooltipData.arrowElement.style.visibility = showArrow ? 'visible' : 'hidden'
+			}
+		}
+
+		return { text, options }
+	}
+
+	disconnected(part: ElementPart) {
+		const element = part.element
+		const tooltipData = tooltipMap.get(element)
+
+		if (tooltipData) {
+			// Clean up subscriptions
+			if (tooltipData.subscriptions) {
+				tooltipData.subscriptions.forEach(subscription => subscription.unsubscribe())
+			}
+
+			// Clean up timeouts and positioning
+			if (tooltipData.showTimeout) {
+				clearTimeout(tooltipData.showTimeout)
+			}
+
+			if (tooltipData.cleanup) {
+				tooltipData.cleanup()
+			}
+
+			// Remove tooltip element
+			if (document.body.contains(tooltipData.tooltipElement)) {
+				document.body.removeChild(tooltipData.tooltipElement)
+			}
+
+			// Remove ARIA attributes
+			if (element.hasAttribute('aria-describedby')) {
+				element.removeAttribute('aria-describedby')
+			}
+
+			// Remove from WeakMap
+			tooltipMap.delete(element)
+		}
+	}
+}
+
+// Separate positioning function for clarity and reuse
+async function updatePosition(element: HTMLElement, tooltipData: any, position: string, showArrow: boolean) {
+	// Use floating-ui to compute position
+	const middleware = [
+		offset(8), // Distance from the element
+		flip({
+			fallbackPlacements: ['top', 'right', 'bottom', 'left'].filter(p => p !== position) as Placement[],
+			padding: 5, // How far from the edges before flipping
+		}),
+		shift({ padding: 5 }), // Keep it within viewport bounds
+	]
+
+	// Add arrow middleware if needed
+	if (showArrow && tooltipData.arrowElement) {
+		middleware.push(arrow({ element: tooltipData.arrowElement }))
+	}
+
+	const { x, y, placement, middlewareData } = await computePosition(element, tooltipData.tooltipElement, {
+		placement: position as Placement,
+		middleware,
+		strategy: 'fixed' as Strategy, // Fixed positioning works better across contexts
+	})
+
+	// Apply position
+	Object.assign(tooltipData.tooltipElement.style, {
+		left: `${x}px`,
+		top: `${y}px`,
+		position: 'fixed',
+	})
+
+	// Position the arrow if it exists
+	if (showArrow && tooltipData.arrowElement && middlewareData.arrow) {
+		const { x: arrowX, y: arrowY } = middlewareData.arrow
+
+		// Determine which side the arrow should be on based on placement
+		const staticSide =
+			{
+				top: 'bottom',
+				right: 'left',
+				bottom: 'top',
+				left: 'right',
+			}[placement.split('-')[0]] || 'bottom'
+
+		// Position the arrow
+		Object.assign(tooltipData.arrowElement.style, {
+			left: arrowX != null ? `${arrowX}px` : '',
+			top: arrowY != null ? `${arrowY}px` : '',
+			[staticSide]: '-4px', // Position the arrow on the correct side
+			visibility: 'visible',
+		})
+	}
+}
+
+export const tooltip = directive(TooltipDirective)

package/src/tooltip/tooltip.ts

@@ -0,0 +1,216 @@
+import { TailwindElement } from '@mixins/tailwind.mixin'
+import { html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { fromEvent, merge, takeUntil } from 'rxjs'
+import { computePosition, flip, shift, offset, autoUpdate, Placement } from '@floating-ui/dom'
+
+/**
+ * A tooltip component that displays a text tooltip when hovering over content.
+ * Addresses shadow DOM limitations by teleporting the tooltip to document.body.
+ *
+ * @element schmancy-tooltip
+ */
+@customElement('schmancy-tooltip')
+export class SchmancyTooltip extends TailwindElement(css`
+	:host {
+		display: inline-block;
+		position: relative;
+	}
+`) {
+	@property({ type: String })
+	text = ''
+
+	@property({ type: String })
+	position: 'top' | 'right' | 'bottom' | 'left' = 'top'
+
+	@property({ type: Number })
+	delay = 50
+
+	@property({ type: Boolean })
+	disabled = false
+
+	@state() private visible = false
+
+	private triggerElement: HTMLElement | null = null
+	private tooltipElement: HTMLElement | null = null
+	private cleanup: (() => void) | undefined
+	private showTimeoutId: number | undefined
+
+	connectedCallback() {
+		super.connectedCallback()
+
+		// Create tooltip element once
+		if (!this.tooltipElement) {
+			this.createTooltipElement()
+		}
+	}
+
+	firstUpdated() {
+		// Wait for slotted elements to be available
+		this.updateComplete.then(() => {
+			// Get the first slotted element as trigger
+			const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement
+			const slottedElements = slot?.assignedElements() || []
+
+			if (slottedElements.length > 0) {
+				this.triggerElement = slottedElements[0] as HTMLElement
+				this.setupEvents()
+			}
+		})
+	}
+
+	private createTooltipElement() {
+		// Create the tooltip element in document.body
+		this.tooltipElement = document.createElement('div')
+		this.tooltipElement.className = 'schmancy-tooltip'
+
+		// Apply styles
+		Object.assign(this.tooltipElement.style, {
+			position: 'absolute',
+			zIndex: '10000',
+			backgroundColor: 'var(--schmancy-sys-color-surface-highest, #333)',
+			color: 'var(--schmancy-sys-color-surface-on, white)',
+			padding: '8px 12px',
+			borderRadius: '4px',
+			fontSize: '14px',
+			fontWeight: 'normal',
+			maxWidth: '300px',
+			pointerEvents: 'none',
+			opacity: '0',
+			transition: 'opacity 150ms ease',
+			boxShadow: 'var(--schmancy-sys-elevation-2)',
+			textAlign: 'center',
+		})
+
+		// Set ARIA attributes
+		this.tooltipElement.setAttribute('role', 'tooltip')
+
+		// Add to document
+		document.body.appendChild(this.tooltipElement)
+	}
+
+	private setupEvents() {
+		if (!this.triggerElement || this.disabled) return
+
+		// Generate unique ID for ARIA
+		const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 9)}`
+		if (this.tooltipElement) {
+			this.tooltipElement.id = tooltipId
+			this.triggerElement.setAttribute('aria-describedby', tooltipId)
+		}
+
+		// Setup event streams using RxJS
+		const mouseEnter$ = fromEvent(this.triggerElement, 'mouseenter')
+		const focus$ = fromEvent(this.triggerElement, 'focus')
+		const mouseLeave$ = fromEvent(this.triggerElement, 'mouseleave')
+		const blur$ = fromEvent(this.triggerElement, 'blur')
+
+		// Global escape key handler
+		fromEvent<KeyboardEvent>(document, 'keydown')
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe(event => {
+				if (event.key === 'Escape' && this.visible) {
+					this.hideTooltip()
+				}
+			})
+
+		// Handle showing
+		merge(mouseEnter$, focus$)
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe(() => {
+				this.showTooltip()
+			})
+
+		// Handle hiding
+		merge(mouseLeave$, blur$)
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe(() => {
+				this.hideTooltip()
+			})
+	}
+
+	disconnectedCallback() {
+		// Clean up
+		if (this.tooltipElement && document.body.contains(this.tooltipElement)) {
+			document.body.removeChild(this.tooltipElement)
+		}
+		this.cleanup?.()
+		clearTimeout(this.showTimeoutId)
+		super.disconnectedCallback()
+	}
+
+	private showTooltip() {
+		if (this.disabled || !this.tooltipElement || !this.triggerElement) return
+
+		// Clear any existing timeout
+		clearTimeout(this.showTimeoutId)
+
+		// Set timeout for showing
+		this.showTimeoutId = window.setTimeout(() => {
+			// Update content
+			if (this.tooltipElement) {
+				this.tooltipElement.textContent = this.text
+
+				// Make visible
+				this.visible = true
+				this.tooltipElement.style.opacity = '1'
+
+				// Initialize positioning
+				this.initializePositioning()
+			}
+		}, this.delay)
+	}
+
+	private hideTooltip() {
+		// Clear showing timeout
+		clearTimeout(this.showTimeoutId)
+
+		// Hide tooltip
+		if (this.tooltipElement) {
+			this.visible = false
+			this.tooltipElement.style.opacity = '0'
+		}
+
+		// Clean up positioning
+		if (this.cleanup) {
+			this.cleanup()
+			this.cleanup = undefined
+		}
+	}
+
+	private initializePositioning() {
+		if (!this.triggerElement || !this.tooltipElement) return
+
+		// Clean up existing positioning
+		if (this.cleanup) {
+			this.cleanup()
+		}
+
+		// Set up auto-updating position
+		this.cleanup = autoUpdate(this.triggerElement, this.tooltipElement, () => {
+			// Compute position
+			computePosition(this.triggerElement!, this.tooltipElement!, {
+				placement: this.position as Placement,
+				middleware: [offset(8), flip({ padding: 5 }), shift({ padding: 5 })],
+			}).then(({ x, y }) => {
+				// Apply position
+				if (this.tooltipElement) {
+					Object.assign(this.tooltipElement.style, {
+						left: `${x}px`,
+						top: `${y}px`,
+					})
+				}
+			})
+		})
+	}
+
+	render() {
+		return html`<slot></slot>`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-tooltip': SchmancyTooltip
+	}
+}

package/src/tree/README.md

@@ -0,0 +1,59 @@
+It looks like you're interested in creating a README for a custom web component named `schmancy-tree`. A README file typically includes information about the component's purpose, usage, installation, and possibly some examples. Here's a template you can use and customize according to your specific component's features and requirements:
+
+---
+
+# Schmancy Tree Component
+
+## Overview
+
+The `schmancy-tree` component is a customizable tree view designed for web applications. It allows for hierarchical data to be displayed in a structured, collapsible tree format.
+
+## Features
+
+- **Customizable Layout**: Easily style the tree view to match your application's theme.
+- **Expand/Collapse**: Users can expand or collapse branches to view the information that's relevant to them.
+- **Nested Items**: Supports multiple levels of nesting for complex hierarchical data.
+
+## Installation
+
+To use `schmancy-tree` in your project, follow these steps:
+
+1. Install the component via npm:
+   ```
+   npm install schmancy-tree
+   ```
+2. Import the component in your JavaScript file:
+   ```javascript
+   import 'schmancy-tree/schmancy-tree.js'
+   ```
+
+## Usage
+
+Here is a basic example of how to use the `schmancy-tree` component in your HTML:
+
+```html
+<schmancy-tree>
+	<div slot="root">root</div>
+	<schmancy-list>
+		<schmancy-list-item>Item 1.1</schmancy-list-item>
+		<schmancy-list-item>Item 1.2</schmancy-list-item>
+		<schmancy-list-item>Item 1.3</schmancy-list-item>
+	</schmancy-list>
+</schmancy-tree>
+```
+
+## Customization
+
+You can customize the appearance and behavior of `schmancy-tree` using CSS and JavaScript. For detailed documentation on available properties and events, see [Customization Guide](#).
+
+## Contributing
+
+We welcome contributions to the `schmancy-tree` project. Please read our [Contributing Guidelines](#) for more information on how to get involved.
+
+## License
+
+`schmancy-tree` is licensed under the [MIT License](#).
+
+---
+
+Feel free to adjust the content to match the actual capabilities and usage of your component. This template is just a starting point.

package/src/tree/index.ts

@@ -0,0 +1 @@
+export * from './tree';

package/src/tree/tree.ts

@@ -0,0 +1,132 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { fromEvent, merge, switchMap, takeUntil, tap, zip } from 'rxjs'
+
+/**
+ * @element schmancy-tree
+ * @slot root - The root element of the tree
+ * @slot - The children of the tree
+ */
+@customElement('schmancy-tree')
+export class SchmancyTree extends TailwindElement(css`
+	:host {
+		display: block;
+		position: relative;
+		background-color: initial;
+	}
+	::slotted([slot='root']) {
+		width: 100%;
+		text-align: left;
+	}
+	::slotted([slot='root'] + *) {
+		margin-top: 0.5rem;
+	}
+`) {
+	/**
+	 * Whether the tree’s children are visible
+	 */
+	@property({ type: Boolean }) open = false
+
+	@query('#toggler') toggler!: HTMLSlotElement
+	@query('slot:not([name="root"])') defaultSlot!: HTMLSlotElement
+
+	// Since it's actually a <schmancy-button>, use HTMLElement or a custom type
+	@query('#chevron') chevron!: HTMLElement
+
+	firstUpdated() {
+		// Hide or show the slot initially based on `open`
+		if (!this.open) {
+			this.defaultSlot.hidden = true
+		}
+
+		// Root toggler
+		const toggleClick$ = fromEvent<MouseEvent>(this.toggler, 'click').pipe(
+			takeUntil(this.disconnecting),
+			tap(e => {
+				e.preventDefault()
+				e.stopPropagation()
+				this.dispatchEvent(new CustomEvent('toggle', { bubbles: false, composed: true }))
+			}),
+		)
+
+		// Chevron (the schmancy-button) click
+		const chevronClick$ = fromEvent<MouseEvent>(this.chevron, 'click')
+
+		merge(toggleClick$, chevronClick$)
+			.pipe(
+				switchMap(() => {
+					// 1. Animate the chevron rotation
+					//    If `open` is true, rotate from 180 -> 0; if false, from 0 -> 180
+					const fromDeg = this.open ? 180 : 0
+					const toDeg = this.open ? 0 : 180
+					const chevronAnimation = this.chevron.animate(
+						[{ transform: `rotate(${fromDeg}deg)` }, { transform: `rotate(${toDeg}deg)` }],
+						{
+							duration: 150,
+							easing: 'ease-in',
+							fill: 'forwards',
+						},
+					)
+
+					// 2. Animate the slot’s height + opacity
+					if (!this.open) {
+						// We are about to open, so remove `hidden` to measure scrollHeight
+						this.defaultSlot.hidden = false
+					}
+
+					const fromOpacity = this.open ? 1 : 0
+					const toOpacity = this.open ? 0 : 1
+
+					const slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {
+						duration: 150,
+						easing: 'ease-out',
+						fill: 'forwards',
+					})
+
+					// Hide the slot if we just closed it
+					slotAnimation.onfinish = () => {
+						if (this.open) {
+							this.defaultSlot.hidden = true
+						} else {
+							this.defaultSlot.style.height = 'auto'
+							this.defaultSlot.style.opacity = '1'
+						}
+					}
+
+					// Return an Observable that completes when both animations finish
+					return zip(fromEvent(chevronAnimation, 'finish'), fromEvent(slotAnimation, 'finish')).pipe(
+						takeUntil(this.disconnecting),
+					)
+				}),
+				tap(() => {
+					// Flip the open state
+					this.open = !this.open
+				}),
+				takeUntil(this.disconnecting),
+			)
+			.subscribe()
+	}
+
+	render() {
+		return html`
+			<div class="flex content-center items-center justify-between">
+				<!-- Root toggler content -->
+				<slot id="toggler" name="root"></slot>
+
+				<!-- The chevron or arrow symbol -->
+				<!-- Stop propagation on the schmancy-button itself just to avoid double triggers -->
+				<schmancy-button slot="trailing" id="chevron" @click=${(e: Event) => e.stopPropagation()}> ⌅ </schmancy-button>
+			</div>
+
+			<!-- The default slot: tree children -->
+			<slot></slot>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-tree': SchmancyTree
+	}
+}

package/src/types/events.ts

@@ -0,0 +1,5 @@
+export enum SchmancyEvents {
+	NavDrawer_toggle = 'SchmancytoggleSidebar',
+	ContentDrawerToggle = 'ContentDrawerToggle',
+	ContentDrawerResize = 'ContentDrawerResize',
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './events';
+export * from './surface';
+export * from './mood-audio.types';