@mhmo91/schmancy 0.9.5 → 0.9.7

package/mixins/discovery.service.ts

@@ -1,221 +0,0 @@
-import { fromEvent, timer, race, Observable } from 'rxjs'
-import { takeUntil, map, defaultIfEmpty, take } from 'rxjs/operators'
-
-/**
- * Global discovery event names
- */
-const DISCOVER_EVENT = 'schmancy-discover'
-const DISCOVER_RESPONSE_EVENT = 'schmancy-discover-response'
-
-/**
- * Discovery request detail
- */
-interface DiscoverRequest {
-	selector: string
-	requestId: string
-}
-
-/**
- * Discovery response detail
- */
-interface DiscoverResponse {
-	requestId: string
-	element: HTMLElement
-}
-
-/**
- * Discover a component in the DOM using the WhereAreYou/HereIAm pattern.
- *
- * @param componentTag - The tag name of the component to discover (e.g., 'schmancy-navigation-rail')
- * @param timeout - How long to wait for a response in milliseconds (default: 100)
- * @returns Observable that emits the discovered component or null if not found
- */
-export function discoverComponent<T extends HTMLElement>(
-	componentTag: string,
-	timeout = 100,
-): Observable<T | null> {
-	const whereAreYouEvent = `${componentTag}-where-are-you`
-	const hereIAmEvent = `${componentTag}-here-i-am`
-
-	return new Observable(subscriber => {
-		// Listen for response first (you were right!)
-		const subscription = fromEvent<CustomEvent>(window, hereIAmEvent)
-			.pipe(
-				takeUntil(timer(timeout)),
-				map(e => e.detail.component as T),
-				defaultIfEmpty(null),
-			)
-			.subscribe(component => {
-				subscriber.next(component)
-				subscriber.complete()
-			})
-
-		// Then dispatch discovery request
-		window.dispatchEvent(
-			new CustomEvent(whereAreYouEvent, {
-				bubbles: true,
-				composed: true,
-			}),
-		)
-
-		// Return cleanup function
-		return () => subscription.unsubscribe()
-	})
-}
-
-/**
- * Discover any of multiple components using race.
- * Returns the first component that responds.
- *
- * @param componentTags - Array of component tag names to discover
- * @returns Observable that emits the first discovered component or null if none found
- */
-export function discoverAnyComponent<T extends HTMLElement>(...componentTags: string[]): Observable<T | null> {
-	if (componentTags.length === 0) {
-		return new Observable(subscriber => {
-			subscriber.next(null)
-			subscriber.complete()
-		})
-	}
-
-	return race(...componentTags.map(tag => discoverComponent<T>(tag)))
-}
-
-/**
- * Universal element discovery - finds ANY element by CSS selector across shadow DOM boundaries.
- * Uses event-based discovery pattern - no DOM traversal needed.
- *
- * How it works:
- * 1. Broadcasts a discovery request event on window
- * 2. All $LitElement components receive this event and check their shadow DOM
- * 3. If a match is found, they respond with the element
- *
- * @param selector - CSS selector (e.g., '#my-id', '.my-class', '[data-attr]')
- * @param timeout - How long to wait for a response in milliseconds (default: 150)
- * @returns Observable that emits the discovered element or null if not found
- *
- * @example
- * ```typescript
- * // Find element by ID across shadow boundaries
- * discoverElement('#app-card').subscribe(el => {
- *   if (el) console.log('Found:', el)
- * })
- *
- * // Find element by class
- * discoverElement('.special-button').subscribe(el => {...})
- * ```
- */
-export function discoverElement<T extends HTMLElement>(
-	selector: string,
-	timeout = 150,
-): Observable<T | null> {
-	const requestId = `discover-${Date.now()}-${Math.random().toString(36).slice(2)}`
-
-	return new Observable(subscriber => {
-		// Listen for response first
-		const subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)
-			.pipe(
-				takeUntil(timer(timeout)),
-				map(e => e.detail),
-				// Filter for our specific request
-				map(detail => (detail.requestId === requestId ? (detail.element as T) : null)),
-				// Only take the first non-null response
-				take(1),
-				defaultIfEmpty(null),
-			)
-			.subscribe(element => {
-				subscriber.next(element)
-				subscriber.complete()
-			})
-
-		// Broadcast discovery request
-		window.dispatchEvent(
-			new CustomEvent<DiscoverRequest>(DISCOVER_EVENT, {
-				detail: { selector, requestId },
-				bubbles: true,
-				composed: true,
-			}),
-		)
-
-		return () => subscription.unsubscribe()
-	})
-}
-
-/**
- * Discover multiple elements matching a selector.
- * Collects all responses within the timeout period.
- *
- * @param selector - CSS selector
- * @param timeout - How long to collect responses (default: 150ms)
- * @returns Observable that emits array of discovered elements
- */
-export function discoverAllElements<T extends HTMLElement>(
-	selector: string,
-	timeout = 150,
-): Observable<T[]> {
-	const requestId = `discover-all-${Date.now()}-${Math.random().toString(36).slice(2)}`
-	const elements: T[] = []
-
-	return new Observable(subscriber => {
-		// Collect all responses
-		const subscription = fromEvent<CustomEvent<DiscoverResponse>>(window, DISCOVER_RESPONSE_EVENT)
-			.pipe(takeUntil(timer(timeout)))
-			.subscribe({
-				next: e => {
-					if (e.detail.requestId === requestId) {
-						elements.push(e.detail.element as T)
-					}
-				},
-				complete: () => {
-					subscriber.next(elements)
-					subscriber.complete()
-				},
-			})
-
-		// Broadcast discovery request
-		window.dispatchEvent(
-			new CustomEvent<DiscoverRequest>(DISCOVER_EVENT, {
-				detail: { selector, requestId },
-				bubbles: true,
-				composed: true,
-			}),
-		)
-
-		return () => subscription.unsubscribe()
-	})
-}
-
-/**
- * Smart discovery - automatically detects if input is a CSS selector or component tag.
- *
- * @param query - CSS selector (starts with #, ., [) OR component tag name
- * @param timeout - How long to wait (default: 150ms)
- * @returns Observable that emits the discovered element or null
- *
- * @example
- * ```typescript
- * // CSS selector - uses discoverElement
- * discover('#my-element').subscribe(...)
- *
- * // Component tag - uses discoverComponent
- * discover('schmancy-fancy').subscribe(...)
- * ```
- */
-export function discover<T extends HTMLElement>(
-	query: string,
-	timeout = 150,
-): Observable<T | null> {
-	// Check if it's a CSS selector (starts with #, ., or [)
-	const isCssSelector = /^[#.\[]/.test(query)
-
-	if (isCssSelector) {
-		return discoverElement<T>(query, timeout)
-	}
-
-	// Otherwise treat as component tag name
-	return discoverComponent<T>(query, timeout)
-}
-
-// Export event names for use in baseElement
-export { DISCOVER_EVENT, DISCOVER_RESPONSE_EVENT }
-export type { DiscoverRequest, DiscoverResponse }

package/mixins/formField.mixin.ts

@@ -1,228 +0,0 @@
-import { CSSResult, LitElement, PropertyValueMap } from 'lit'
-import { property } from 'lit/decorators.js'
-import { IBaseMixin } from './baseElement'
-import { Constructor } from './constructor'
-import { ITailwindElementMixin, TailwindElement } from './tailwind.mixin'
-
-/**
- * Interface defining the properties and methods that the FormFieldMixin adds.
- */
-export interface IFormFieldMixin extends Element {
-	// Properties
-	name: string
-	value: string | string[] | boolean | number | undefined
-	label: string
-	required: boolean
-	disabled: boolean
-	readonly: boolean
-	error: boolean
-	validationMessage: string
-	hint?: string
-	id: string
-
-	// Form association
-	form: HTMLFormElement | null
-
-	// Methods
-	checkValidity(): boolean
-	reportValidity(): boolean
-	setCustomValidity(message: string): void
-
-	// Event emitter helper
-	emitChange(detail: any): void
-}
-
-/**
- * A mixin that adds form field capabilities to a LitElement class.
- * This provides common form field properties, validation, and form association.
- *
- * @example
- * ```ts
- * class MyInput extends FormFieldMixin(TailwindElement(css`...`)) {
- *   // Your component code here
- * }
- * ```
- */
-export function FormFieldMixin<T extends Constructor<LitElement>>(superClass: T) {
-	class FormFieldMixinClass extends superClass {
-		static formAssociated = true
-
-		// Element internals for form association
-		private internals: ElementInternals | undefined
-
-		// Properties common to form fields
-		/**
-		 * The name of the form field (used for form submission)
-		 */
-		@property({ type: String })
-		name: string = ''
-
-		/**
-		 * The current value of the form field
-		 */
-		@property({ reflect: true })
-		value: string | string[] | boolean | number | undefined = ''
-
-		/**
-		 * Label text for the form field
-		 */
-		@property({ type: String })
-		label: string = ''
-
-		/**
-		 * Whether the field is required
-		 */
-		@property({ type: Boolean, reflect: true })
-		required: boolean = false
-
-		/**
-		 * Whether the field is disabled
-		 */
-		@property({ type: Boolean, reflect: true })
-		disabled: boolean = false
-
-		/**
-		 * Whether the field is read-only
-		 */
-		@property({ type: Boolean, reflect: true })
-		readonly: boolean = false
-
-		/**
-		 * Whether the field is in an error state
-		 */
-		@property({ type: Boolean, reflect: true })
-		error: boolean = false
-
-		/**
-		 * The validation message to display
-		 */
-		@property({ type: String })
-		validationMessage: string = ''
-
-		/**
-		 * Optional hint text to display below the field
-		 */
-		@property({ type: String })
-		hint?: string
-
-		/**
-		 * Unique identifier for the field
-		 */
-		@property({ reflect: true })
-		override id: string = `schmancy-field-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-
-		constructor(...args: any[]) {
-			super(...args)
-			try {
-				this.internals = this.attachInternals()
-			} catch {
-				this.internals = undefined
-			}
-		}
-
-		/**
-		 * Gets the form this element is associated with
-		 */
-		get form(): HTMLFormElement | null {
-			return this.internals?.form ?? null
-		}
-
-		/**
-		 * Lifecycle method called when properties change
-		 */
-		protected willUpdate(changedProps: PropertyValueMap<any>): void {
-			super.willUpdate(changedProps)
-
-			// Update form value when value changes
-			if (changedProps.has('value')) {
-				this.internals?.setFormValue(this.value as string | File | FormData | null)
-			}
-
-			// Update validation state when error or validation message changes
-			if (changedProps.has('error') || changedProps.has('validationMessage')) {
-				if (this.error && this.validationMessage) {
-					this.internals?.setValidity({ customError: true }, this.validationMessage)
-				} else {
-					this.internals?.setValidity({})
-				}
-			}
-		}
-
-		/**
-		 * Checks if the field is valid without showing validation UI
-		 */
-		checkValidity(): boolean {
-			if (this.disabled) return true
-
-			if (this.required && (this.value === '' || this.value === undefined || this.value === null)) {
-				this.error = true
-				this.validationMessage = 'This field is required'
-				return false
-			}
-
-			return true
-		}
-
-		/**
-		 * Reports validity and shows validation UI if invalid
-		 */
-		reportValidity(): boolean {
-			const isValid = this.checkValidity()
-			if (!isValid) {
-				this.internals?.reportValidity()
-			}
-			return isValid
-		}
-
-		/**
-		 * Sets a custom validation message
-		 */
-		setCustomValidity(message: string): void {
-			this.validationMessage = message
-			this.error = message !== ''
-			if (message) {
-				this.internals?.setValidity({ customError: true }, message)
-			} else {
-				this.internals?.setValidity({})
-			}
-		}
-
-		/**
-		 * Helper method to emit change events using dispatchScopedEvent for instance isolation
-		 */
-		emitChange(detail: any): void {
-			// Use dispatchScopedEvent if available (from BaseElement mixin)
-			if ('dispatchScopedEvent' in this && typeof this.dispatchScopedEvent === 'function') {
-				this.dispatchScopedEvent('change', detail, { bubbles: true })
-			} else {
-				this.dispatchEvent(
-					new CustomEvent('change', {
-						detail,
-						bubbles: true,
-						composed: true,
-					}),
-				)
-			}
-		}
-	}
-
-	return FormFieldMixinClass as Constructor<IFormFieldMixin> & T
-}
-
-/**
- * A convenience function that composes FormFieldMixin with TailwindElement
- * to create a base class for Schmancy form components.
- *
- * @example
- * ```ts
- * class MyInput extends SchmancyFormField(css`...`) {
- *   // Your component code here
- * }
- * ```
- */
-export function SchmancyFormField<T extends CSSResult>(componentStyle?: T) {
-	return FormFieldMixin(TailwindElement(componentStyle)) as Constructor<IFormFieldMixin> &
-		Constructor<ITailwindElementMixin> &
-		Constructor<LitElement> &
-		Constructor<IBaseMixin>
-}

package/mixins/index.ts

@@ -1,7 +0,0 @@
-export * from './baseElement';
-export * from './constructor';
-export * from './discovery.service';
-export * from './formField.mixin';
-export * from './litElement.mixin';
-export * from './surface.mixin';
-export * from './tailwind.mixin';

package/mixins/litElement.mixin.ts

@@ -1,15 +0,0 @@
-import { CSSResult, LitElement } from 'lit'
-import { TailwindElement } from './tailwind.mixin'
-import { BaseElement, IBaseMixin } from './baseElement'
-import { Constructor } from './constructor'
-
-export const $LitElement = <T extends CSSResult>(componentStyle?: T) => {
-	class TailwindMixinClass extends BaseElement(TailwindElement(componentStyle)) {
-		disconnectedCallback = () => {
-			super.disconnectedCallback()
-		}
-	}
-	return TailwindMixinClass as CustomElementConstructor &
-		Constructor<LitElement> &
-		Constructor<IBaseMixin> /* see "typing the subclass" below */
-}

package/mixins/scss.d.ts

@@ -1,21 +0,0 @@
-declare module '*.scss?inline' {
-	import { type CSSResult } from 'lit'
-	const styles: CSSResult
-	export default styles
-}
-
-declare module '*.module.scss' {
-	const classes: Record<string, string>
-	export default classes
-}
-
-declare module '*.css?inline' {
-	import { type CSSResult } from 'lit'
-	const styles: CSSResult
-	export default styles
-}
-
-declare module '*.module.css' {
-	const classes: Record<string, string>
-	export default classes
-}

package/mixins/surface.mixin.ts

@@ -1,93 +0,0 @@
-import type { Constructor } from './constructor'
-import { CSSResultGroup, CSSResultOrNative, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-import type { TSurfaceColor } from '../src/types/surface'
-import { surfaceStyles } from '../src/surface/surface.styles'
-
-export type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'
-export type SchmancySurfaceRounded = 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all'
-export type SchmancySurfaceElevation = 0 | 1 | 2 | 3 | 4 | 5
-
-export declare class ISurfaceMixin {
-	fill: SchmancySurfaceFill
-	rounded: SchmancySurfaceRounded
-	elevation: SchmancySurfaceElevation
-	type: TSurfaceColor
-	clickable: boolean
-}
-
-/**
- * SurfaceMixin - Adds surface styling properties AND styles to any LitElement
- *
- * Uses Lit's finalizeStyles hook to inject surfaceStyles CSS for all surface type selectors.
- * This is the recommended pattern for mixins that need to add styles.
- *
- * Provides these reflected properties:
- * - `fill`: 'all' | 'width' | 'height' | 'auto' - Controls element dimensions
- * - `rounded`: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' - Corner rounding
- * - `elevation`: 0-5 - Shadow depth level
- * - `type`: TSurfaceColor - Surface color variant (26+ options)
- *
- * Usage:
- * ```typescript
- * import { SurfaceMixin } from '@mixins/surface.mixin'
- *
- * @customElement('my-component')
- * class MyComponent extends SurfaceMixin(TailwindElement(css`
- *   :host { display: block; }
- * `)) {
- *   // Component now has type, fill, rounded, elevation properties
- *   // AND surfaceStyles are automatically included
- * }
- * ```
- */
-export const SurfaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {
-	class SurfaceMixinClass extends superClass {
-		/**
-		 * Override finalizeStyles to inject surfaceStyles.
-		 * This is the Lit-recommended way for mixins to add styles.
-		 */
-		protected static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[] {
-			// Get parent's finalized styles using LitElement's method
-			const parentStyles = (superClass as unknown as typeof LitElement).finalizeStyles(styles)
-			// Append surfaceStyles at the end (higher specificity)
-			return [...parentStyles, surfaceStyles as CSSResultOrNative]
-		}
-
-		/**
-		 * Fill the width and/or height of the parent container.
-		 * @default 'auto'
-		 */
-		@property({ type: String, reflect: true })
-		fill: SchmancySurfaceFill = 'auto'
-
-		/**
-		 * Specifies the rounding style of the component's corners.
-		 * @default 'none'
-		 */
-		@property({ reflect: true })
-		rounded: SchmancySurfaceRounded = 'none'
-
-		/**
-		 * Defines the elevation level (shadow depth) of the surface.
-		 * @default 0
-		 */
-		@property({ type: Number, reflect: true })
-		elevation: SchmancySurfaceElevation = 0
-
-		/**
-		 * Specifies the surface type for styling.
-		 * @default 'container'
-		 */
-		@property({ reflect: true })
-		type: TSurfaceColor = 'subtle'
-
-		/**
-		 * Makes the surface interactive with hover, active states and cursor pointer.
-		 * @default false
-		 */
-		@property({ type: Boolean, reflect: true })
-		clickable = false
-	}
-	return SurfaceMixinClass as Constructor<ISurfaceMixin> & T
-}