@mhmo91/schmancy 0.10.6 → 0.10.7

package/src/payment-card-form/payment-card-form.ts

@@ -1,331 +0,0 @@
-import { SchmancyElement } from '@mixins/index'
-import SchmancyForm from '@schmancy/form/form'
-import { SchmancyInputChangeEvent } from '@schmancy/input'
-import SchmancyInput from '@schmancy/input/input'
-import Cleave from 'cleave.js'
-import { html } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-/**
- * @element schmancy-payment-card-form
- * A mobile-friendly payment card form component that provides real-time validation
- * and formatting for credit card information.
- *
- * @fires change - Fires when any field in the form changes
- * @slot - Default slot for any additional content
- */
-@customElement('schmancy-payment-card-form')
-export class SchmancyPaymentCardForm extends SchmancyElement {
-	/**
-	 * The form data containing all payment card information
-	 */
-	@property({ type: Object, reflect: true })
-	public value: {
-		cardName: string
-		cardNumber: string
-		expirationDate: string
-		cvv: string
-	} = {
-		cardName: '',
-		cardNumber: '',
-		expirationDate: '',
-		cvv: '',
-	}
-
-	/**
-	 * The detected card type (visa, mastercard, amex, etc.)
-	 * This is determined automatically by the Cleave.js library
-	 */
-	@state() cardType: string = ''
-
-	/**
-	 * Individual field values tracked with state properties for reactivity
-	 */
-	@state() cardName: string | undefined
-	@state() cardNumber: string | undefined
-	@state() expirationDate: string | undefined
-	@state() cvv: string | undefined
-
-	/**
-	 * Field validity states for enhanced validation feedback
-	 */
-	@state() isCardNameValid: boolean = true
-	@state() isCardNumberValid: boolean = true
-	@state() isExpirationDateValid: boolean = true
-	@state() isCvvValid: boolean = true
-
-	/**
-	 * Query selectors for the form elements
-	 */
-	@query('#cardNumber') cardNumberInput!: SchmancyInput
-	@query('#expirationDate') expirationDateInput!: SchmancyInput
-	@query('#cvv') cvvInput!: SchmancyInput
-	@query('#cardName') cardNameInput!: SchmancyInput
-	@query('schmancy-form') form!: SchmancyForm
-
-	/**
-	 * When the component is first updated, initialize the Cleave.js formatters
-	 * for the credit card fields with appropriate validations
-	 */
-	firstUpdated(): void {
-		// Credit card number formatter with type detection
-		void new Cleave(this.cardNumberInput, {
-			creditCard: true,
-			creditCardStrictMode: true,
-			onCreditCardTypeChanged: type => {
-				this.cardType = type
-
-				if (type === 'unknown') {
-					this.isCardNumberValid = false
-					this.cardNumberInput.setCustomValidity('Please enter a valid card number.')
-					this.cardNumberInput.error = true
-				} else {
-					this.isCardNumberValid = true
-					this.cardNumberInput.setCustomValidity('')
-					this.cardNumberInput.error = false
-
-					// Adjust CVV length based on card type
-					if (type === 'amex') {
-						this.cvvInput.maxlength = 4
-					} else {
-						this.cvvInput.maxlength = 3
-					}
-				}
-			},
-		})
-
-		// Expiration date formatter (MM/YY)
-		void new Cleave(this.expirationDateInput, {
-			date: true,
-			datePattern: ['m', 'y'],
-			onValueChanged: e => {
-				const value = e.target.value
-
-				if (!value || value.length < 5) {
-					this.isExpirationDateValid = false
-					this.expirationDateInput.setCustomValidity('Please enter a valid expiration date (MM/YY).')
-					this.expirationDateInput.error = true
-				} else {
-					// Validate expiration date is in the future
-					const [month, year] = value.split('/')
-					const now = new Date()
-					const currentYear = now.getFullYear() % 100 // Get last two digits of year
-					const currentMonth = now.getMonth() + 1 // JS months are 0-indexed
-
-					const monthNum = parseInt(month, 10)
-					const yearNum = parseInt(year, 10)
-
-					// Check if the card is expired
-					if (yearNum < currentYear || (yearNum === currentYear && monthNum < currentMonth)) {
-						this.isExpirationDateValid = false
-						this.expirationDateInput.setCustomValidity('Card has expired.')
-						this.expirationDateInput.error = true
-					} else {
-						this.isExpirationDateValid = true
-						this.expirationDateInput.setCustomValidity('')
-						this.expirationDateInput.error = false
-					}
-				}
-			},
-		})
-
-		// CVV formatter (numeric only)
-		void new Cleave(this.cvvInput, {
-			blocks: [4], // Maximum size for AMEX
-			numericOnly: true,
-			onValueChanged: e => {
-				const minLength = this.cardType === 'amex' ? 4 : 3
-
-				if (e.target.value.length < minLength) {
-					this.isCvvValid = false
-					this.cvvInput.setCustomValidity(`Please enter a valid ${minLength}-digit CVV.`)
-					this.cvvInput.error = true
-				} else {
-					this.isCvvValid = true
-					this.cvvInput.setCustomValidity('')
-					this.cvvInput.error = false
-				}
-			},
-		})
-
-		// Card name formatter (uppercase)
-		void new Cleave(this.cardNameInput, {
-			uppercase: true,
-			delimiter: ' ',
-			onValueChanged: e => {
-				// Basic name validation
-				if (!e.target.value || e.target.value.length < 3) {
-					this.isCardNameValid = false
-					this.cardNameInput.setCustomValidity('Please enter the name as it appears on the card.')
-					this.cardNameInput.error = true
-				} else {
-					this.isCardNameValid = true
-					this.cardNameInput.setCustomValidity('')
-					this.cardNameInput.error = false
-				}
-			},
-		})
-	}
-
-	/**
-	 * Checks for validity of the entire form
-	 * @returns {boolean} True if the form is valid
-	 */
-	public reportValidity() {
-		return this.form.reportValidity()
-	}
-
-	/**
-	 * Checks for validity of the form
-	 * @returns {boolean} True if the form is valid
-	 */
-	public checkValidity() {
-		return !!this.form.reportValidity()
-	}
-
-	/**
-	 * Emit change event when any input value changes
-	 */
-	private emitChange() {
-		this.dispatchEvent(
-			new CustomEvent('change', {
-				detail: { ...this.value },
-				bubbles: true,
-			}),
-		)
-	}
-
-	/**
-	 * Render the payment card form with a responsive grid layout
-	 */
-	protected render() {
-		// Determine icon based on card type
-		const cardIcon = this.getCardIcon()
-
-		return html`
-			<schmancy-form
-				@change=${e => {
-					e.stopPropagation()
-					e.preventDefault()
-				}}
-			>
-				<div class="grid grid-flow-row auto-rows-max flex-1 gap-4 w-full">
-					<!-- Card Name Field -->
-					<schmancy-input
-						autocomplete="cc-name"
-						id="cardName"
-						.value=${this.cardName ?? ''}
-						.error=${!this.isCardNameValid}
-						type="text"
-						.label=${'Name on card'}
-						.required=${true}
-						.hint=${!this.isCardNameValid
-							? 'Please enter the name as it appears on the card'
-							: 'Enter the name exactly as it appears on your card'}
-						@change=${(e: SchmancyInputChangeEvent) => {
-							this.cardName = e.detail.value
-							this.value.cardName = e.detail.value
-							this.emitChange()
-						}}
-					></schmancy-input>
-
-					<!-- Card Number Field with Card Type Indicator -->
-					<div class="relative w-full">
-						<schmancy-input
-							autocomplete="cc-number"
-							id="cardNumber"
-							type="text"
-							.label=${'Card number'}
-							.error=${!this.isCardNumberValid}
-							.required=${true}
-							.hint=${!this.isCardNumberValid ? 'Please enter a valid card number' : 'Your 16-digit card number'}
-							@change=${(e: SchmancyInputChangeEvent) => {
-								this.cardNumber = e.detail.value
-								this.value.cardNumber = e.detail.value
-								this.emitChange()
-							}}
-						></schmancy-input>
-						${cardIcon ? html`<div class="absolute right-3 top-1/2 transform -translate-y-1/4">${cardIcon}</div>` : ''}
-					</div>
-
-					<!-- Responsive grid for expiration date and CVV -->
-					<div class="grid grid-cols-[1fr_1fr] gap-4 w-full">
-						<schmancy-input
-							autocomplete="cc-exp"
-							id="expirationDate"
-							@change=${(e: SchmancyInputChangeEvent) => {
-								this.expirationDate = e.detail.value
-								this.value.expirationDate = e.detail.value
-								this.emitChange()
-							}}
-							type="text"
-							.error=${!this.isExpirationDateValid}
-							.label=${'Expiration date'}
-							placeholder="MM/YY"
-							.required=${true}
-							.hint=${!this.isExpirationDateValid ? 'Invalid expiration date' : 'MM/YY format'}
-						></schmancy-input>
-
-						<schmancy-input
-							id="cvv"
-							autocomplete="cc-csc"
-							@change=${(e: SchmancyInputChangeEvent) => {
-								this.cvv = e.detail.value
-								this.value.cvv = e.detail.value
-								this.emitChange()
-							}}
-							.label=${'CVV'}
-							.error=${!this.isCvvValid}
-							.required=${true}
-							type="text"
-							maxlength="${this.cardType === 'amex' ? '4' : '3'}"
-							minlength="${this.cardType === 'amex' ? '4' : '3'}"
-							.hint=${!this.isCvvValid ? 'Invalid security code' : 'Security code on back of card'}
-						></schmancy-input>
-					</div>
-
-					<!-- Show card acceptability notice -->
-					<div class="text-sm text-secondary-onContainer mt-2">${this.renderSecurityNotice()}</div>
-
-					<slot></slot>
-				</div>
-			</schmancy-form>
-		`
-	}
-
-	/**
-	 * Helper method to render card type icon based on detected card type
-	 */
-	private getCardIcon() {
-		switch (this.cardType) {
-			case 'visa':
-				return html`<schmancy-icon>credit_card</schmancy-icon>`
-			case 'mastercard':
-				return html`<schmancy-icon>credit_card</schmancy-icon>`
-			case 'amex':
-				return html`<schmancy-icon>credit_card</schmancy-icon>`
-			case 'discover':
-				return html`<schmancy-icon>credit_card</schmancy-icon>`
-			default:
-				return this.cardNumber ? html`<schmancy-icon>credit_card</schmancy-icon>` : null
-		}
-	}
-
-	/**
-	 * Helper method to render a security and acceptance notice
-	 */
-	private renderSecurityNotice() {
-		return html`
-			<div class="flex items-center gap-2">
-				<schmancy-icon size="18px">lock</schmancy-icon>
-				<span>Your payment information is secure and encrypted</span>
-			</div>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-payment-card-form': SchmancyPaymentCardForm
-	}
-}

package/src/qr-scanner/index.ts

@@ -1 +0,0 @@
-export * from './qr-scanner'

package/src/qr-scanner/qr-scanner.ts

@@ -1,242 +0,0 @@
-import { SchmancyElement } from '@mixins/index'
-import jsQR from 'jsqr'
-import { css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { when } from 'lit/directives/when.js'
-import { animationFrames, Subject, timer } from 'rxjs'
-import { distinctUntilChanged, filter, map, takeUntil, throttleTime } from 'rxjs/operators'
-
-interface QRScanResult {
-	data: string
-	timestamp: number
-}
-
-@customElement('schmancy-qr-scanner')
-export class SchmancyQRScanner extends SchmancyElement {
-	static styles = [css`
-	:host {
-		display: block;
-		width: 100%;
-		height: 100%;
-		min-height: 300px;
-	}
-`]
-
-	@property({ type: Boolean }) continuous = true
-
-	@state() private hasPermission = false
-	@state() private error = ''
-	@state() private showSuccess = false
-
-	private stream: MediaStream | null = null
-	private destroy$ = new Subject<void>()
-	private videoElement: HTMLVideoElement | null = null
-
-	connectedCallback() {
-		super.connectedCallback()
-		this.startCamera()
-	}
-
-	private async startCamera(): Promise<void> {
-		try {
-			const constraints: MediaStreamConstraints = {
-				video: {
-					facingMode: 'environment',
-					width: { ideal: 1280 },
-					height: { ideal: 720 },
-				},
-			}
-
-			this.stream = await navigator.mediaDevices.getUserMedia(constraints)
-			this.hasPermission = true
-			this.error = ''
-
-			await this.updateComplete
-
-			this.videoElement = this.shadowRoot?.querySelector('#video') as HTMLVideoElement
-			if (this.videoElement) {
-				this.videoElement.srcObject = this.stream
-				await this.videoElement.play()
-				this.startScanning()
-			}
-		} catch (error) {
-			console.error('Camera access denied:', error)
-			this.hasPermission = false
-			this.error = 'Camera access is required to scan QR codes. Please allow camera access and try again.'
-		}
-	}
-
-	private stopCamera(): void {
-		this.destroy$.next()
-
-		if (this.stream) {
-			this.stream.getTracks().forEach(track => track.stop())
-			this.stream = null
-		}
-
-		if (this.videoElement) {
-			this.videoElement.srcObject = null
-			this.videoElement = null
-		}
-
-		this.hasPermission = false
-		this.error = ''
-		this.showSuccess = false
-	}
-
-	private startScanning(): void {
-		if (!this.videoElement || !this.hasPermission) {
-			return
-		}
-
-		animationFrames()
-			.pipe(
-				map(() => this.scanFrame()),
-				filter((result): result is QRScanResult => result !== null),
-				distinctUntilChanged((prev, curr) => {
-					if (prev.data !== curr.data) return false
-					return curr.timestamp - prev.timestamp < 2000
-				}),
-				throttleTime(500),
-				takeUntil(this.destroy$),
-			)
-			.subscribe({
-				next: result => this.handleScanResult(result),
-				error: error => {
-					console.error('Scanning error:', error)
-				},
-			})
-	}
-
-	private scanFrame(): QRScanResult | null {
-		if (!this.videoElement || this.videoElement.readyState !== HTMLMediaElement.HAVE_ENOUGH_DATA) {
-			return null
-		}
-
-		try {
-			const canvas = document.createElement('canvas')
-			canvas.width = this.videoElement.videoWidth
-			canvas.height = this.videoElement.videoHeight
-
-			const ctx = canvas.getContext('2d')
-			if (!ctx) return null
-
-			ctx.drawImage(this.videoElement, 0, 0)
-			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-
-			const code = jsQR(imageData.data, imageData.width, imageData.height)
-
-			if (code && code.data) {
-				return {
-					data: code.data,
-					timestamp: Date.now(),
-				}
-			}
-		} catch (error) {
-			console.error('Frame scan error:', error)
-		}
-
-		return null
-	}
-
-	private handleScanResult(result: QRScanResult): void {
-		this.showSuccessFlash()
-
-		// Haptic feedback if available
-		if (navigator.vibrate) {
-			navigator.vibrate([100, 50, 100])
-		}
-
-		// Audio feedback
-		this.playSuccessSound()
-
-		// Dispatch scan result
-		this.dispatchEvent(
-			new CustomEvent('scan-result', {
-				detail: { data: result.data, timestamp: result.timestamp },
-				bubbles: true,
-				composed: true,
-			}),
-		)
-
-	}
-
-	private showSuccessFlash(): void {
-		this.showSuccess = true
-		timer(500)
-			.pipe(takeUntil(this.destroy$))
-			.subscribe(() => {
-				this.showSuccess = false
-			})
-	}
-
-	private playSuccessSound(): void {
-		try {
-			const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext
-			const audioContext = new AudioContextClass()
-			const oscillator = audioContext.createOscillator()
-			const gainNode = audioContext.createGain()
-
-			oscillator.connect(gainNode)
-			gainNode.connect(audioContext.destination)
-
-			oscillator.frequency.setValueAtTime(800, audioContext.currentTime)
-			oscillator.frequency.setValueAtTime(1000, audioContext.currentTime + 0.1)
-
-			gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
-			gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)
-
-			oscillator.start(audioContext.currentTime)
-			oscillator.stop(audioContext.currentTime + 0.2)
-		} catch {
-			// Audio feedback failed silently
-		}
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback()
-		this.stopCamera()
-		this.destroy$.complete()
-	}
-
-	render() {
-		if (this.error) {
-			return html`
-				<div class="w-full h-full flex flex-col items-center justify-center bg-black text-white text-center p-5">
-					<schmancy-icon size="64" class="mb-4">camera_alt</schmancy-icon>
-					<schmancy-typography type="headline" token="md" class="mb-4">Camera Permission Required</schmancy-typography>
-					<schmancy-typography type="body" token="md" class="mb-6 max-w-sm">${this.error}</schmancy-typography>
-					<schmancy-button variant="filled" @click=${() => window.location.reload()}>Retry</schmancy-button>
-				</div>
-			`
-		}
-
-		return html`
-			<div class="relative w-full h-full bg-black overflow-hidden rounded-xl">
-				<!-- Video Stream -->
-				<video id="video" class="absolute inset-0 w-full h-full object-cover" autoplay muted playsinline></video>
-
-				<!-- Success Flash -->
-				${when(this.showSuccess, () => html`<div class="absolute inset-0 bg-green-400/30 pointer-events-none"></div>`)}
-
-				<!-- Minimal corner brackets - Apple style -->
-				<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[250px] h-[250px] pointer-events-none animate-pulse">
-					<!-- Top-left corner -->
-					<div class="absolute top-0 left-0 w-12 h-12 border-t-4 border-l-4 border-white rounded-tl-2xl"></div>
-					<!-- Top-right corner -->
-					<div class="absolute top-0 right-0 w-12 h-12 border-t-4 border-r-4 border-white rounded-tr-2xl"></div>
-					<!-- Bottom-left corner -->
-					<div class="absolute bottom-0 left-0 w-12 h-12 border-b-4 border-l-4 border-white rounded-bl-2xl"></div>
-					<!-- Bottom-right corner -->
-					<div class="absolute bottom-0 right-0 w-12 h-12 border-b-4 border-r-4 border-white rounded-br-2xl"></div>
-				</div>
-			</div>
-		`
-	}
-}
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'schmancy-qr-scanner': SchmancyQRScanner
-	}
-}

package/src/timeline/index.ts

@@ -1 +0,0 @@
-export * from './timeline-tile'