@mhmo91/schmancy 0.7.1 → 0.7.2

package/mixins/baseElement.ts

@@ -0,0 +1,73 @@
+import type { Constructor } from './constructor'
+import { LitElement } from 'lit'
+import { Subject, fromEvent, Observable } from 'rxjs'
+import { takeUntil } from 'rxjs/operators'
+import { classMap } from 'lit/directives/class-map.js'
+import { styleMap } from 'lit/directives/style-map.js'
+import { discoverComponent } from './discovery.service'
+
+export declare class IBaseMixin {
+	disconnecting: Subject<boolean>
+	classMap: typeof classMap
+	styleMap: typeof styleMap
+	discover<T extends HTMLElement>(tag: string): Observable<T | null>
+}
+
+export const BaseElement = <T extends Constructor<LitElement>>(superClass: T) => {
+	class BaseElement extends superClass {
+		disconnecting = new Subject<boolean>()
+
+		classMap(classes: Record<string, boolean>) {
+			const newClasses: Record<string, boolean> = {}
+			Object.keys(classes).forEach(key => {
+				key
+					.trim()
+					.split(' ')
+					.filter(Boolean)
+					.forEach(k => {
+						newClasses[k] = classes[key]
+					})
+			})
+			return classMap(newClasses)
+		}
+
+		styleMap(styles: Record<string, string | number>) {
+			return styleMap(styles)
+		}
+
+		connectedCallback() {
+			super.connectedCallback()
+			this.setupDiscoveryResponse()
+		}
+
+		private setupDiscoveryResponse() {
+			const tagName = this.tagName.toLowerCase()
+			const whereAreYouEvent = `${tagName}-where-are-you`
+			const hereIAmEvent = `${tagName}-here-i-am`
+
+			fromEvent(window, whereAreYouEvent)
+				.pipe(takeUntil(this.disconnecting))
+				.subscribe(() => {
+					window.dispatchEvent(
+						new CustomEvent(hereIAmEvent, {
+							detail: { component: this },
+							bubbles: true,
+							composed: true,
+						}),
+					)
+				})
+		}
+
+		// Make discover public to match the interface
+		discover<T extends HTMLElement>(tag: string): Observable<T | null> {
+			return discoverComponent<T>(tag)
+		}
+
+		disconnectedCallback() {
+			this.disconnecting.next(true)
+			this.disconnecting.complete()
+			super.disconnectedCallback()
+		}
+	}
+	return BaseElement as Constructor<IBaseMixin> & T
+}

package/mixins/constructor.ts

@@ -0,0 +1,3 @@
+export type Constructor<T = {}> = new (...args: any[]) => T
+
+export type AbstractConstructor<T = {}> = abstract new (...args: any[]) => T

package/mixins/discovery.service.ts

@@ -0,0 +1,60 @@
+import { fromEvent, timer, race, Observable } from 'rxjs'
+import { takeUntil, map, defaultIfEmpty } from 'rxjs/operators'
+
+/**
+ * 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)))
+}

package/mixins/formField.mixin.ts

@@ -0,0 +1,223 @@
+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
+		 */
+		emitChange(detail: any): void {
+			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

@@ -0,0 +1,5 @@
+export * from './baseElement';
+export * from './constructor';
+export * from './formField.mixin';
+export * from './litElement.mixin';
+export * from './tailwind.mixin';

package/mixins/litElement.mixin.ts

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

@@ -0,0 +1,21 @@
+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/tailwind.css

@@ -0,0 +1,201 @@
+@import 'tailwindcss';
+:host,
+:root {
+	font-family: var(--schmancy-font-family);
+}
+@theme inline {
+	--md-ref-typeface-brand: var(--schmancy-font-family);
+	--md-ref-typeface-plain: var(--schmancy-font-family);
+	--md-sys-color-primary: var(--schmancy-sys-color-primary-default);
+	--md-sys-color-secondary: var(--schmancy-sys-color-secondary-default);
+
+	--*: initial;
+	--border-style: solid;
+	--spacing: 4px;
+	--color-scrim: var(--schmancy-sys-color-scrim);
+	--color-outline: var(--schmancy-sys-color-outline);
+	--color-outlineVariant: var(--schmancy-sys-color-outlineVariant);
+	--color-surface-default: var(--schmancy-sys-color-surface-default);
+	--color-surface-dim: var(--schmancy-sys-color-surface-dim);
+	--color-surface-bright: var(--schmancy-sys-color-surface-bright);
+	--color-surface-container: var(--schmancy-sys-color-surface-container);
+	--color-surface-low: var(--schmancy-sys-color-surface-low);
+	--color-surface-high: var(--schmancy-sys-color-surface-high);
+	--color-surface-highest: var(--schmancy-sys-color-surface-highest);
+	--color-surface-lowest: var(--schmancy-sys-color-surface-lowest);
+	--color-surface-on: var(--schmancy-sys-color-surface-on);
+	--color-surface-onVariant: var(--schmancy-sys-color-surface-onVariant);
+	--color-primary-default: var(--schmancy-sys-color-primary-default);
+	--color-primary-on: var(--schmancy-sys-color-primary-on);
+	--color-primary-container: var(--schmancy-sys-color-primary-container);
+	--color-primary-onContainer: var(--schmancy-sys-color-primary-onContainer);
+	--color-secondary-default: var(--schmancy-sys-color-secondary-default);
+	--color-secondary-on: var(--schmancy-sys-color-secondary-on);
+	--color-secondary-container: var(--schmancy-sys-color-secondary-container);
+	--color-secondary-onContainer: var(--schmancy-sys-color-secondary-onContainer);
+	--color-tertiary-default: var(--schmancy-sys-color-tertiary-default);
+	--color-tertiary-on: var(--schmancy-sys-color-tertiary-on);
+	--color-tertiary-container: var(--schmancy-sys-color-tertiary-container);
+	--color-tertiary-onContainer: var(--schmancy-sys-color-tertiary-onContainer);
+	--color-error-default: var(--schmancy-sys-color-error-default);
+	--color-error-on: var(--schmancy-sys-color-error-on);
+	--color-error-container: var(--schmancy-sys-color-error-container);
+	--color-error-onContainer: var(--schmancy-sys-color-error-onContainer);
+	--color-success-default: var(--schmancy-sys-color-success-default);
+	--color-success-on: var(--schmancy-sys-color-success-on);
+	--color-success-container: var(--schmancy-sys-color-success-container);
+	--color-success-onContainer: var(--schmancy-sys-color-success-onContainer);
+	--shadow-0: var(--schmancy-sys-elevation-0);
+	--shadow-1: var(--schmancy-sys-elevation-1);
+	--shadow-2: var(--schmancy-sys-elevation-2);
+	--shadow-3: var(--schmancy-sys-elevation-3);
+	--shadow-4: var(--schmancy-sys-elevation-4);
+	--shadow-5: var(--schmancy-sys-elevation-5);
+	--outline-1: var(--schmancy-sys-outline-1);
+	--font-sans:
+		var(--schmancy-font-family), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+		'Segoe UI Symbol', 'Noto Color Emoji';
+	--font-serif: var(--schmancy-font-family), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+	--font-mono:
+		var(--schmancy-font-family), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
+	--color-black: #000;
+	--color-white: #fff;
+	--spacing: 0.25rem;
+	--breakpoint-sm: 40rem;
+	--breakpoint-md: 48rem;
+	--breakpoint-lg: 64rem;
+	--breakpoint-xl: 80rem;
+	--breakpoint-2xl: 96rem;
+	--container-3xs: 16rem;
+	--container-2xs: 18rem;
+	--container-xs: 20rem;
+	--container-sm: 24rem;
+	--container-md: 28rem;
+	--container-lg: 32rem;
+	--container-xl: 36rem;
+	--container-2xl: 42rem;
+	--container-3xl: 48rem;
+	--container-4xl: 56rem;
+	--container-5xl: 64rem;
+	--container-6xl: 72rem;
+	--container-7xl: 80rem;
+	--text-xs: 0.75rem;
+	--text-xs--line-height: calc(1 / 0.75);
+	--text-sm: 0.875rem;
+	--text-sm--line-height: calc(1.25 / 0.875);
+	--text-base: 1rem;
+	--text-base--line-height: calc(1.5 / 1);
+	--text-lg: 1.125rem;
+	--text-lg--line-height: calc(1.75 / 1.125);
+	--text-xl: 1.25rem;
+	--text-xl--line-height: calc(1.75 / 1.25);
+	--text-2xl: 1.5rem;
+	--text-2xl--line-height: calc(2 / 1.5);
+	--text-3xl: 1.875rem;
+	--text-3xl--line-height: calc(2.25 / 1.875);
+	--text-4xl: 2.25rem;
+	--text-4xl--line-height: calc(2.5 / 2.25);
+	--text-5xl: 3rem;
+	--text-5xl--line-height: 1;
+	--text-6xl: 3.75rem;
+	--text-6xl--line-height: 1;
+	--text-7xl: 4.5rem;
+	--text-7xl--line-height: 1;
+	--text-8xl: 6rem;
+	--text-8xl--line-height: 1;
+	--text-9xl: 8rem;
+	--text-9xl--line-height: 1;
+	--font-weight-thin: 100;
+	--font-weight-extralight: 200;
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-weight-extrabold: 800;
+	--font-weight-black: 900;
+	--tracking-tighter: -0.05em;
+	--tracking-tight: -0.025em;
+	--tracking-normal: 0em;
+	--tracking-wide: 0.025em;
+	--tracking-wider: 0.05em;
+	--tracking-widest: 0.1em;
+	--leading-tight: 1.25;
+	--leading-snug: 1.375;
+	--leading-normal: 1.5;
+	--leading-relaxed: 1.625;
+	--leading-loose: 2;
+	--radius-xs: 0.125rem;
+	--radius-sm: 0.25rem;
+	--radius-md: 0.375rem;
+	--radius-lg: 0.5rem;
+	--radius-xl: 0.75rem;
+	--radius-2xl: 1rem;
+	--radius-3xl: 1.5rem;
+	--radius-4xl: 2rem;
+	--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+	--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+	--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+	--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+	--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+	--drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+	--drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+	--drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+	--drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+	--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+	--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+	--blur-xs: 4px;
+	--blur-sm: 8px;
+	--blur-md: 12px;
+	--blur-lg: 16px;
+	--blur-xl: 24px;
+	--blur-2xl: 40px;
+	--blur-3xl: 64px;
+	--perspective-dramatic: 100px;
+	--perspective-near: 300px;
+	--perspective-normal: 500px;
+	--perspective-midrange: 800px;
+	--perspective-distant: 1200px;
+	--aspect-video: 16 / 9;
+	--ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+	--animate-spin: spin 1s linear infinite;
+	--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+	--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	--animate-bounce: bounce 1s infinite;
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes ping {
+		75%,
+		100% {
+			transform: scale(2);
+			opacity: 0;
+		}
+	}
+	@keyframes pulse {
+		50% {
+			opacity: 0.5;
+		}
+	}
+	@keyframes bounce {
+		0%,
+		100% {
+			transform: translateY(-25%);
+			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+		}
+		50% {
+			transform: none;
+			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+		}
+	}
+}

package/mixins/tailwind.mixin.ts

@@ -0,0 +1,30 @@
+import { CSSResult, LitElement, unsafeCSS } from 'lit'
+
+import style from './tailwind.css?inline'
+import { BaseElement, IBaseMixin } from './baseElement'
+import { Constructor } from './constructor'
+
+export declare class ITailwindElementMixin {
+	styles: (typeof CSSResult)[]
+}
+
+export const tailwindStyles = unsafeCSS(style)
+
+const TailwindElementBase = <T extends CSSResult>(componentStyle?: T) => {
+	class TailwindMixinClass extends LitElement {
+		static styles = [unsafeCSS(componentStyle), tailwindStyles]
+	}
+	return TailwindMixinClass as Constructor<LitElement> /* see "typing the subclass" below */
+}
+
+export const TailwindElement = <T extends CSSResult>(componentStyle?: T) => {
+	class TailwindMixinClass extends BaseElement(TailwindElementBase(componentStyle)) {
+		disconnectedCallback = () => {
+			super.disconnectedCallback()
+		}
+	}
+	return TailwindMixinClass as Constructor<CustomElementConstructor> &
+		Constructor<ITailwindElementMixin> &
+		Constructor<LitElement> &
+		Constructor<IBaseMixin>
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"exports": {
@@ -10,7 +10,7 @@
 		},
 		"./mixins": {
 			"types": "./types/mixins/index.d.ts",
-			"default": "./dist/mixins.js"
+			"default": "./mixins/index.ts"
 		},
 		"./ai/*": "./ai/*",
 		"./*": {
@@ -34,6 +34,7 @@
 	"files": [
 		"dist",
 		"types",
+		"mixins",
 		"ai",
 		"README.md"
 	],