@mhmo91/schmancy 0.9.5 → 0.9.7

package/src/form/form-v2.ts

@@ -1,268 +0,0 @@
-import { TailwindElement } from '@mixins/index'
-import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { fromEvent, merge, Subject, takeUntil, tap } from 'rxjs'
-
-// Define interfaces for form element capabilities
-export interface FormElement extends HTMLElement {
-	name?: string
-	value?: string
-	disabled?: boolean
-	type?: string
-	defaultValue?: string
-}
-
-export interface CheckableFormElement extends FormElement {
-	checked?: boolean
-}
-
-export interface ValidatableFormElement extends FormElement {
-	reportValidity?: () => boolean
-}
-
-// Define interface for form control registry
-export interface FormControlConfig {
-	tagName: string
-	hasValue?: boolean
-	hasChecked?: boolean
-	canSubmit?: boolean
-}
-
-/**
- * The form is a component used to collect user input from
- * interactive controls.
- *
- * @element sch-form
- *
- * @slot - Default slot for the form.
- *
- * @fires submit - Emitted when the form is submitted.
- * @fires reset - Emitted when the form is reset.
- */
-@customElement('sch-form')
-export default class SchmancyFormV2 extends TailwindElement() {
-	private $disconnecting = new Subject()
-	public static readonly tagName = 'sch-form'
-
-	// Static registry of form controls
-	private static formControlRegistry: FormControlConfig[] = [
-		// Native elements
-		{ tagName: 'input', hasValue: true, hasChecked: true, canSubmit: true },
-		{ tagName: 'textarea', hasValue: true },
-		{ tagName: 'select', hasValue: true },
-		{ tagName: 'button', canSubmit: true },
-		{ tagName: 'radio', hasChecked: true },
-
-		// Custom elements
-		{ tagName: 'schmancy-input', hasValue: true, canSubmit: true },
-		{ tagName: 'schmancy-mask-input', hasValue: true },
-		{ tagName: 'schmancy-button', canSubmit: true },
-		{ tagName: 'schmancy-icon-button', canSubmit: true },
-		{ tagName: 'schmancy-radio', hasChecked: true },
-		{ tagName: 'schmancy-switch', hasChecked: true },
-		{ tagName: 'schmancy-checkbox', hasValue: true, hasChecked: true },
-		{ tagName: 'schmancy-radio-group', hasChecked: true },
-		{ tagName: 'schmancy-autocomplete', hasValue: true, hasChecked: true },
-		{ tagName: 'schmancy-select', hasValue: true, hasChecked: true },
-		{ tagName: 'schmancy-combo', hasValue: true },
-		{ tagName: 'schmancy-date-time-input', hasValue: true },
-		{ tagName: 'schmancy-rating', hasValue: true },
-	]
-
-	// Static methods to register new form controls
-	public static registerFormControl(config: FormControlConfig): void {
-		const existingIndex = this.formControlRegistry.findIndex(item => item.tagName === config.tagName)
-
-		if (existingIndex >= 0) {
-			this.formControlRegistry[existingIndex] = {
-				...this.formControlRegistry[existingIndex],
-				...config,
-			}
-		} else {
-			this.formControlRegistry.push(config)
-		}
-	}
-
-	// Helper methods to check control capabilities
-	private static hasValue(tagName: string): boolean {
-		const config = this.formControlRegistry.find(item => item.tagName === tagName)
-		return config?.hasValue || false
-	}
-
-	private static hasChecked(tagName: string): boolean {
-		const config = this.formControlRegistry.find(item => item.tagName === tagName)
-		return config?.hasChecked || false
-	}
-
-	private static canSubmit(tagName: string): boolean {
-		const config = this.formControlRegistry.find(item => item.tagName === tagName)
-		return config?.canSubmit || false
-	}
-
-	protected static shadowRootOptions = {
-		...LitElement.shadowRootOptions,
-		mode: 'open',
-		delegatesFocus: false,
-	}
-
-
-	/** Specifies if form data validation should be skipped on submit.
-	 * @attr novalidate
-	 * @type {boolean}
-	 * @public
-	 */
-	@property({ type: Boolean, reflect: true }) public novalidate = false
-
-	constructor() {
-		super()
-		merge(
-			fromEvent<MouseEvent>(this, 'click').pipe(
-				tap(e => {
-					const target = e.target as HTMLButtonElement
-					if (target.type?.toLowerCase() === 'submit') {
-						this.handleSubmitRequest(e)
-					}
-				}),
-			),
-			fromEvent<KeyboardEvent>(this, 'keydown').pipe(
-				tap(e => {
-					if (e.code === 'Enter' || e.key === 'Enter') {
-						this.handleSubmitRequest(e)
-					}
-				}),
-			),
-		)
-			.pipe(takeUntil(this.$disconnecting))
-			.subscribe()
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this.$disconnecting.next(null)
-		this.$disconnecting.complete()
-	}
-
-	/** Submits the form. */
-	public submit(): boolean {
-		const formData = this.getFormData()
-		if (!this.novalidate && !this.reportValidity()) {
-			return false
-		}
-		this.dispatchEvent(new CustomEvent('submit', { detail: formData }))
-		return true
-	}
-
-	/** Resets the form. */
-	public reset() {
-		const formElements = this.getFormElements()
-		formElements.forEach(element => {
-			const tagName = element.tagName.toLowerCase()
-
-			if (tagName === 'select') {
-				const selectElement = element as HTMLSelectElement
-				for (let i = 0; i < selectElement.options.length; i++) {
-					const option = selectElement.options[i]
-					option.selected = option.defaultSelected
-				}
-			} else if (
-				(tagName === 'input' && (element.type === 'checkbox' || element.type === 'radio')) ||
-				(tagName !== 'input' && SchmancyFormV2.hasChecked(tagName))
-			) {
-				;(element as CheckableFormElement).checked = element.hasAttribute('checked')
-			} else if (
-				tagName === 'schmancy-input' ||
-				tagName === 'schmancy-rating' ||
-				tagName === 'schmancy-mask-input' ||
-				tagName === 'schmancy-date-time-input'
-			) {
-				element.value = element.getAttribute('value')
-			} else if (SchmancyFormV2.hasValue(tagName)) {
-				element.value = element.defaultValue
-			}
-		})
-		this.dispatchEvent(new CustomEvent('reset'))
-	}
-
-	private getFormElements(): FormElement[] {
-		const slot = this.shadowRoot?.querySelector('slot')
-		const assignedElements = slot?.assignedElements({ flatten: true })
-		const formElements: FormElement[] = []
-
-		assignedElements?.forEach((element: FormElement) => {
-			if (!element.disabled) {
-				formElements.push(element)
-			}
-
-			const children = Array.from(element.getElementsByTagName('*')).filter(
-				(childElement: FormElement) => !childElement.disabled,
-			)
-			formElements.push(...(children as FormElement[]))
-		})
-
-		return formElements
-	}
-
-	public getFormData() {
-		const formData = new FormData()
-		const formElements = this.getFormElements()
-
-		formElements.forEach(element => {
-			if (!element.name) return
-
-			const tagName = element.tagName.toLowerCase()
-
-			if (tagName === 'select') {
-				for (let i = 0; i < (element as HTMLSelectElement).options.length; i++) {
-					const option = (element as HTMLSelectElement).options[i]
-					if (option.selected) {
-						formData.append(element.name, option.value)
-					}
-				}
-			} else if (SchmancyFormV2.hasChecked(tagName) && (element as CheckableFormElement).checked) {
-				formData.append(element.name, element.value || 'on')
-			} else if (
-				SchmancyFormV2.hasValue(tagName) &&
-				(element as HTMLInputElement).type !== 'checkbox' &&
-				(element as HTMLInputElement).type !== 'radio' &&
-				(element as HTMLInputElement).type !== 'submit'
-			) {
-				formData.append(element.name, element.value || '')
-			}
-		})
-
-		return formData
-	}
-
-	/** Checks for validity of the form. */
-	public reportValidity(): boolean {
-		const formElements = this.getFormElements()
-		return !formElements.some(
-			element =>
-				typeof (element as ValidatableFormElement).reportValidity === 'function' &&
-				(element as ValidatableFormElement).reportValidity() === false,
-		)
-	}
-
-	private handleSubmitRequest(event: MouseEvent | KeyboardEvent) {
-		const targetElement = event.target as HTMLElement
-		const tagName = targetElement.tagName.toLowerCase()
-
-		if (SchmancyFormV2.canSubmit(tagName)) {
-			this.submit()
-		} else if ((targetElement as HTMLButtonElement).type?.toLowerCase() === 'reset') {
-			this.reset()
-		}
-
-		return true
-	}
-
-	protected override render() {
-		return html`<slot></slot>`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'sch-form': SchmancyFormV2
-	}
-}

package/src/layout/v2/grid.ts

@@ -1,93 +0,0 @@
-import { css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import Layout from '../layout'
-
-@customElement('sch-grid')
-export class SchmancyGridV2 extends Layout {
-	static styles = [
-		Layout.styles,
-		css`
-			:host {
-				display: block;
-			}
-		`,
-	]
-
-	/**
-	 * Display mode: 'grid' or 'inline-grid'.
-	 */
-	@property({ type: String, reflect: true })
-	display: 'grid' | 'inline-grid' = 'grid'
-
-	/**
-	 * Grid template columns.
-	 * Examples: '1', '2', '3', 'none', 'subgrid', '[200px_minmax(900px,_1fr)_100px]'
-	 */
-	@property({ type: String, reflect: true })
-	columns: string = 'none'
-
-	/**
-	 * Grid template rows.
-	 * Examples: '1', '2', '3', 'none', 'subgrid', '[200px_minmax(900px,_1fr)_100px]'
-	 */
-	@property({ type: String, reflect: true })
-	rows: string = 'none'
-
-	/**
-	 * Grid auto flow.
-	 * Options: 'row', 'column', 'dense', 'row-dense', 'column-dense'
-	 */
-	@property({ type: String, reflect: true })
-	flow: 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense' = 'row'
-
-	/**
-	 * Gap between grid items.
-	 * Examples: '0', '1', '2', '4', '8', '16', '32', '64'
-	 */
-	@property({ type: String, reflect: true })
-	gap: string = '0'
-
-	/**
-	 * Gap between columns.
-	 * Overrides the general gap if specified.
-	 */
-	@property({ type: String, reflect: true })
-	gapX?: string
-
-	/**
-	 * Gap between rows.
-	 * Overrides the general gap if specified.
-	 */
-	@property({ type: String, reflect: true })
-	gapY?: string
-
-	/**
-	 * Responsive variants.
-	 * Example: { sm: 'grid-cols-2', md: 'grid-cols-4' }
-	 */
-	@property({ type: Object })
-	responsive: { [key: string]: string } = {}
-
-	render() {
-		const classes = [
-			this.display === 'inline-grid' ? 'inline-grid' : 'grid',
-			this.columns !== 'none' ? `grid-cols-${this.columns}` : '',
-			this.rows !== 'none' ? `grid-rows-${this.rows}` : '',
-			`grid-flow-${this.flow}`,
-			this.gap ? `gap-${this.gap}` : '',
-			this.gapX ? `gap-x-${this.gapX}` : '',
-			this.gapY ? `gap-y-${this.gapY}` : '',
-			...Object.entries(this.responsive).map(([breakpoint, utility]) => `${breakpoint}:${utility}`),
-		]
-			.filter(Boolean)
-			.join(' ')
-
-		return html`<div class="${classes}"><slot></slot></div>`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'sch-grid': SchmancyGridV2
-	}
-}

package/src/notification/outlet.ts

@@ -1,16 +0,0 @@
-import { TailwindElement } from '@mixins/index'
-import { html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-@customElement('schmancy-notification-outlet')
-export class SchmancyNotificationOutlet extends TailwindElement() {
-	render() {
-		return html` <slot></slot> `
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-notification-outlet': SchmancyNotificationOutlet
-	}
-}

package/src/store/immer-integration.ts

@@ -1,99 +0,0 @@
-// src/store/immutable-helpers.ts
-import { produce, Draft, castDraft, castImmutable, Immutable, enableMapSet } from 'immer'
-enableMapSet()
-
-/**
- * Create an immutable update for Maps
- * @param map Original Map to update
- * @param updater Function that can make "mutable" changes to the draft
- * @returns A new Map with the changes applied
- */
-export function updateMap<K, V>(map: Immutable<Map<K, V>>, updater: (draft: Draft<Map<K, V>>) => void): Map<K, V> {
-	return produce(map, updater) as unknown as Map<K, V>
-}
-
-/**
- * Create an immutable update for a specific item in a Map
- * @param map Original Map to update
- * @param key Key of the item to update
- * @param updater Function that can make "mutable" changes to the item
- * @returns A new Map with the item updated
- */
-export function updateItem<K, V>(map: Immutable<Map<K, V>>, key: K, updater: (item: Draft<V>) => void): Map<K, V> {
-	return produce(map, draft => {
-		// Cast the key to the appropriate type for draft.get
-		const draftKey = key as unknown as Draft<Immutable<K>>
-		const item = draft.get(draftKey)
-		if (item !== undefined) {
-			// Cast the item to the expected type for the updater
-			updater(item as unknown as Draft<V>)
-		}
-	}) as unknown as Map<K, V>
-}
-
-/**
- * Immutably filter a Map
- * @param map Original Map to filter
- * @param predicate Function that returns true for items to keep
- * @returns A new Map with only the matching items
- */
-export function filterMap<K, V>(
-	map: Immutable<Map<K, V>>,
-	predicate: (value: Immutable<V>, key: Immutable<K>) => boolean,
-): Map<K, V> {
-	return produce(map, draft => {
-		for (const [key, value] of draft.entries()) {
-			if (!predicate(value as Immutable<V>, key as unknown as Immutable<K>)) {
-				draft.delete(key)
-			}
-		}
-	}) as unknown as Map<K, V>
-}
-
-/**
- * Create an immutable update for an object
- * @param obj Original object to update
- * @param updater Function that can make "mutable" changes to the draft
- * @returns A new object with the changes applied
- */
-export function updateObject<T extends Record<string, any>>(obj: Immutable<T>, updater: (draft: Draft<T>) => void): T {
-	return produce(obj, updater) as unknown as T
-}
-
-/**
- * Merge objects immutably
- * @param target Original object
- * @param source Source object to merge in
- * @returns A new object with properties merged
- */
-export function mergeObjects<T extends Record<string, any>>(target: Immutable<T>, source: Partial<T>): T {
-	return produce(target, draft => {
-		Object.assign(draft, castDraft(source) as Draft<Partial<T>>)
-	}) as unknown as T
-}
-
-/**
- * Type guard to check if an object is a Map
- */
-export function isMap<K = unknown, V = unknown>(value: unknown): value is Map<K, V> {
-	return value instanceof Map
-}
-
-/**
- * Creates a readonly version of a type
- * This is a utility that uses Immer's Immutable type to make a type readonly
- * @param value The value to cast as immutable
- * @returns The same value but typed as immutable
- */
-export function asReadonly<T>(value: T): Immutable<T> {
-	return castImmutable(value)
-}
-
-/**
- * Makes an object or Map deeply immutable at runtime by freezing
- * @param value The value to freeze
- * @returns The frozen value
- */
-export function freeze<T>(value: T): Immutable<T> {
-	return produce(value, () => {}) as Immutable<T>
-}

package/src/tooltip/tooltip.ts

@@ -1,216 +0,0 @@
-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
-	}
-}