@mhmo91/schmancy 0.8.6 → 0.9.2

package/src/code-highlight/code-preview.ts

@@ -0,0 +1,123 @@
+import { TailwindElement } from '@mixins/index'
+import { css, html } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { timer } from 'rxjs'
+import { take } from 'rxjs/operators'
+
+/**
+ * @element schmancy-code-preview
+ * A component that shows code and its rendered preview side by side
+ * Takes the content as a slot and displays both the source and rendered result
+ */
+@customElement('schmancy-code-preview')
+export class SchmancyCodePreview extends TailwindElement(
+	css`:host{
+		display:block;
+		overflow:hidden;
+		position:relative;
+		inset:0;
+	}`
+) {
+	/**
+	 * Programming language for syntax highlighting
+	 */
+	@property({ type: String })
+	language: string = 'html'
+
+	/**
+	 * Show code on top or side-by-side
+	 */
+	@property({ type: String })
+	layout: 'vertical' | 'horizontal' = 'vertical'
+
+	/**
+	 * Whether to render/execute the code in preview section
+	 * When false, only shows the code without rendering
+	 */
+	@property({ type: Boolean })
+	preview: boolean = true
+
+	@state()
+	private slotContent: string = ''
+
+	connectedCallback() {
+		super.connectedCallback()
+		// Capture the slot content as HTML string
+		timer(0).pipe(take(1)).subscribe(() => {
+			const slot = this.shadowRoot?.querySelector('slot')
+			if (slot) {
+				const nodes = slot.assignedNodes({ flatten: true })
+				const htmlStrings = nodes.map(node => {
+					if (node.nodeType === Node.ELEMENT_NODE) {
+						return (node as HTMLElement).outerHTML
+					} else if (node.nodeType === Node.TEXT_NODE) {
+						return node.textContent || ''
+					}
+					return ''
+				})
+				
+				// Clean up the HTML string
+				const rawContent = htmlStrings.join('')
+				
+				// Find the minimum indentation (excluding empty lines)
+				const lines = rawContent.split('\n')
+				const minIndent = lines
+					.filter(line => line.trim().length > 0)
+					.reduce((min, line) => {
+						const indent = line.match(/^(\s*)/)?.[1].length || 0
+						return Math.min(min, indent)
+					}, Infinity)
+				
+				// Remove the minimum indentation from all lines
+				this.slotContent = lines
+					.map(line => line.slice(minIndent))
+					.join('\n')
+					.trim()
+			}
+		})
+	}
+
+	render() {
+		const containerClass = this.layout === 'horizontal' 
+			? 'grid grid-cols-1 lg:grid-cols-2 gap-0' 
+			: 'flex flex-col'
+
+		const showPreview = this.preview && this.language.toLowerCase() === 'html'
+		
+		return html`
+			<schmancy-surface class="rounded-lg overflow-hidden">
+				<div class="${showPreview ? containerClass : ''}">
+					<!-- Code section with proper overflow handling -->
+					<div class="min-w-0 overflow-hidden">
+						<schmancy-code
+							language="${this.language}"
+							.code="${this.slotContent}"
+							?copyButton="${true}"
+							class="block w-full"
+						></schmancy-code>
+					</div>
+					
+					<!-- Preview section (only visible for HTML and when preview is enabled) -->
+					${showPreview ? html`
+						<div class="min-w-0 overflow-auto">
+							<schmancy-surface type="solid" class="p-2 h-full">
+								<slot></slot>
+							</schmancy-surface>
+						</div>
+					` : html`
+						<!-- Hidden slot to capture content -->
+						<div class="hidden">
+							<slot></slot>
+						</div>
+					`}
+				</div>
+			</schmancy-surface>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-code-preview': SchmancyCodePreview
+	}
+}

package/src/code-highlight/index.ts

@@ -0,0 +1,3 @@
+export { SchmancyCode } from './code-highlight'
+export { SchmancyCode as SchmancyCodeHighlight } from './code-highlight' // For backward compatibility
+export { SchmancyCodePreview } from './code-preview'

package/src/components/form-elements/index.ts

@@ -0,0 +1 @@
+export * from './payment-card-form';

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

@@ -0,0 +1,331 @@
+import { $LitElement } 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 $LitElement() {
+	/**
+	 * 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
+		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)
+		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)
+		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)
+		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()
+				}}
+			>
+				<schmancy-grid gap="md" class="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
+						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
+							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 -->
+					<schmancy-grid gap="md" cols="1fr 1fr" class="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
+							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
+							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>
+					</schmancy-grid>
+
+					<!-- Show card acceptability notice -->
+					<div class="text-sm text-secondary-onContainer mt-2">${this.renderSecurityNotice()}</div>
+
+					<slot></slot>
+				</schmancy-grid>
+			</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/components/index.ts

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

package/src/connectivity/connectivity-status.ts

@@ -0,0 +1,153 @@
+import { TailwindElement } from '@mixins/tailwind.mixin'
+import { css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { createRef, ref } from 'lit/directives/ref.js'
+import { merge, fromEvent, timer } from 'rxjs'
+import { map, distinctUntilChanged, tap, takeUntil, skip } from 'rxjs/operators'
+import { $sounds } from '../audio'
+
+/**
+ * @element schmancy-connectivity-status
+ * A beautiful connectivity status component that monitors online/offline state
+ * and shows subtle animated banners when connectivity changes.
+ *
+ * @example
+ * <!-- Add once to your app root -->
+ * <schmancy-connectivity-status></schmancy-connectivity-status>
+ */
+@customElement('schmancy-connectivity-status')
+export class SchmancyConnectivityStatus extends TailwindElement(css`
+	:host {
+		display: block;
+	}
+
+	.banner {
+		transform: translateY(-100%);
+		opacity: 0;
+		transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease-out;
+	}
+
+	.banner.visible {
+		transform: translateY(0);
+		opacity: 1;
+	}
+
+	.banner.exiting {
+		transform: translateY(-100%);
+		opacity: 0;
+		transition: transform 300ms ease-out, opacity 300ms ease-out;
+	}
+
+	@keyframes icon-pulse {
+		0%, 100% { transform: scale(1); }
+		50% { transform: scale(1.2); }
+	}
+
+	@keyframes icon-bounce {
+		0%, 100% { transform: translateY(0); }
+		25% { transform: translateY(-6px); }
+		50% { transform: translateY(0); }
+		75% { transform: translateY(-3px); }
+	}
+
+	.icon-pulse {
+		animation: icon-pulse 1s ease-in-out infinite;
+	}
+
+	.icon-bounce {
+		animation: icon-bounce 600ms ease-out;
+	}
+`) {
+	private bannerRef = createRef<HTMLDivElement>()
+	private surfaceRef = createRef<HTMLElement>()
+	private iconRef = createRef<HTMLSpanElement>()
+	private messageRef = createRef<HTMLSpanElement>()
+
+	connectedCallback(): void {
+		super.connectedCallback()
+
+		const connectivity$ = merge(
+			fromEvent(window, 'online').pipe(map(() => true)),
+			fromEvent(window, 'offline').pipe(map(() => false))
+		).pipe(distinctUntilChanged())
+
+		// UI updates via refs
+		connectivity$.pipe(
+			tap(online => this.updateBanner(online)),
+			takeUntil(this.disconnecting)
+		).subscribe()
+
+		// Sounds (skip initial)
+		connectivity$.pipe(
+			skip(1),
+			tap(online => $sounds.play(online ? 'celebrated' : 'disappointed')),
+			takeUntil(this.disconnecting)
+		).subscribe()
+	}
+
+	private updateBanner(online: boolean): void {
+		const banner = this.bannerRef.value
+		const surface = this.surfaceRef.value
+		const icon = this.iconRef.value
+		const message = this.messageRef.value
+
+		if (!banner || !surface || !icon || !message) return
+
+		if (!online) {
+			// Going offline
+			surface.setAttribute('type', 'error')
+			icon.textContent = '🙀'
+			icon.className = 'text-2xl icon-pulse'
+			message.textContent = "You're offline"
+			banner.classList.remove('exiting')
+			banner.classList.add('visible')
+		} else {
+			// Back online
+			surface.setAttribute('type', 'primary')
+			icon.textContent = '🎉'
+			icon.className = 'text-2xl icon-bounce'
+			message.textContent = 'Back online'
+			banner.classList.remove('exiting')
+			banner.classList.add('visible')
+
+			// Auto-dismiss after 1.5 seconds
+			timer(1500).pipe(
+				tap(() => {
+					banner.classList.add('exiting')
+					timer(300).pipe(
+						tap(() => banner.classList.remove('visible', 'exiting')),
+						takeUntil(this.disconnecting)
+					).subscribe()
+				}),
+				takeUntil(this.disconnecting)
+			).subscribe()
+		}
+	}
+
+	protected render(): unknown {
+		return html`
+			<div ${ref(this.bannerRef)} class="banner fixed top-0 inset-x-0 z-50 p-2 pointer-events-none">
+				<schmancy-surface
+					${ref(this.surfaceRef)}
+					type="error"
+					rounded="all"
+					elevation="3"
+					class="mx-auto max-w-sm shadow-lg pointer-events-auto"
+				>
+					<div class="flex items-center gap-3 px-4 py-3">
+						<span ${ref(this.iconRef)} class="text-2xl">🙀</span>
+						<schmancy-typography type="body" token="md">
+							<span ${ref(this.messageRef)}>You're offline</span>
+						</schmancy-typography>
+					</div>
+				</schmancy-surface>
+			</div>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-connectivity-status': SchmancyConnectivityStatus
+	}
+}

package/src/connectivity/index.ts

@@ -0,0 +1 @@
+export * from './connectivity-status'

package/src/content-drawer/context.ts

@@ -0,0 +1,13 @@
+import { createContext } from '@lit/context'
+export type TSchmancyContentDrawerSheetMode = 'push' | 'overlay'
+export const SchmancyContentDrawerSheetMode = createContext<TSchmancyContentDrawerSheetMode>('push')
+
+export type TSchmancyContentDrawerSheetState = 'open' | 'close'
+export const SchmancyContentDrawerSheetState = createContext<TSchmancyContentDrawerSheetState>('close')
+
+export const SchmancyContentDrawerID = createContext<string>(Math.floor(Math.random() * Date.now()).toString())
+export const SchmancyContentDrawerMaxHeight = createContext<string>('100%')
+export const SchmancyContentDrawerMinWidth = createContext<{
+	main: number
+	sheet: number
+}>({})