@zeix/le-truc 0.15.0

package/examples/basic-pluralize/basic-pluralize.ts

@@ -0,0 +1,82 @@
+import {
+	asInteger,
+	type Component,
+	defineComponent,
+	setText,
+	show,
+	UI,
+} from '../..'
+
+export type BasicPluralizeProps = {
+	count: number
+}
+
+type BasicPluralizeUI = Partial<
+	Record<
+		| 'count'
+		| 'none'
+		| 'some'
+		| 'zero'
+		| 'one'
+		| 'two'
+		| 'few'
+		| 'many'
+		| 'other',
+		HTMLElement
+	>
+>
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'basic-pluralize': Component<BasicPluralizeProps>
+	}
+}
+
+const FALLBACK_LOCALE = 'en'
+
+/**
+ * Parse a string as a positive integer (>= 0), falling back to 0 for negative values
+ */
+const asPositiveInteger =
+	() =>
+	<U extends UI>(ui: U, value: string | null | undefined) => {
+		const parsed = asInteger()(ui, value)
+		return parsed < 0 ? 0 : parsed
+	}
+
+export default defineComponent<BasicPluralizeProps, BasicPluralizeUI>(
+	'basic-pluralize',
+	{
+		count: asPositiveInteger(),
+	},
+	({ first }) => ({
+		count: first('.count'),
+		none: first('.none'),
+		some: first('.some'),
+		zero: first('.zero'),
+		one: first('.one'),
+		two: first('.two'),
+		few: first('.few'),
+		many: first('.many'),
+		other: first('.other'),
+	}),
+	({ host }) => {
+		const pluralizer = new Intl.PluralRules(
+			host.closest('[lang]')?.getAttribute('lang') || FALLBACK_LOCALE,
+			host.hasAttribute('ordinal') ? { type: 'ordinal' } : undefined,
+		)
+
+		// Basic effects
+		const effects = {
+			count: setText(() => String(host.count)),
+			none: show(() => host.count === 0),
+			some: show(() => host.count > 0),
+		}
+
+		// Subset of plural categories for applicable pluralizer: ['zero', 'one', 'two', 'few', 'many', 'other']
+		const categories = pluralizer.resolvedOptions().pluralCategories
+		for (const category of categories)
+			effects[category] = show(() => pluralizer.select(host.count) === category)
+		return effects
+	},
+)

package/examples/card-callout/card-callout.css

@@ -0,0 +1,79 @@
+card-callout {
+	display: block;
+	position: relative;
+	padding: var(--space-s) var(--space-s) var(--space-s) var(--space-xl);
+	margin: 0 0 var(--space-l);
+	font-size: var(--font-size-m);
+	line-height: var(--line-height-l);
+	background: var(--color-blue-20);
+	border-left: var(--space-xxs) solid var(--color-blue-50);
+	border-radius: var(--space-s);
+
+	&::before {
+		position: absolute;
+		content: "ℹ️";
+		left: var(--space-s);
+	}
+
+	> *:last-child {
+		margin-bottom: 0;
+	}
+
+	&.tip {
+		background: var(--color-green-20);
+		border-color: var(--color-green-50);
+
+		&::before {
+			content: "💡";
+		}
+	}
+
+	&.note {
+		background: var(--color-neutral-20);
+		border-color: var(--color-neutral-50);
+
+		&::before {
+			content: "💬";
+		}
+	}
+
+	&.caution {
+		background: var(--color-orange-20);
+		border-color: var(--color-orange-50);
+
+		&::before {
+			content: "⚠️";
+		}
+	}
+
+	&.danger {
+		background: var(--color-pink-20);
+		border-color: var(--color-pink-50);
+
+		&::before {
+			content: "🚨";
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	card-callout {
+		background: var(--color-blue-80);
+
+		&.tip {
+			background: var(--color-green-80);
+		}
+
+		&.note {
+			background: var(--color-neutral-80);
+		}
+
+		&.caution {
+			background: var(--color-orange-80);
+		}
+
+		&.danger {
+			background: var(--color-pink-80);
+		}
+	}
+}

package/examples/card-callout/card-callout.html

@@ -0,0 +1,5 @@
+<card-callout>This is an informational message.</card-callout>
+<card-callout class="tip">Remember to hydrate while coding!</card-callout>
+<card-callout class="caution">Be careful with this operation.</card-callout>
+<card-callout class="danger">This action is irreversible!</card-callout>
+<card-callout class="note">This is just a side note.</card-callout>

package/examples/card-mediaqueries/card-mediaqueries.html

@@ -0,0 +1,29 @@
+<card-mediaqueries>
+	<h2>Without Context</h2>
+	<dl>
+		<dt>Motion Preference:</dt>
+		<dd class="motion"></dd>
+		<dt>Theme Preference</dt>
+		<dd class="theme"></dd>
+		<dt>Device Viewport:</dt>
+		<dd class="viewport"></dd>
+		<dt>Device Orientation:</dt>
+		<dd class="orientation"></dd>
+	</dl>
+</card-mediaqueries>
+
+<context-media>
+	<card-mediaqueries>
+		<h2>With Context</h2>
+		<dl>
+			<dt>Motion Preference:</dt>
+			<dd class="motion"></dd>
+			<dt>Theme Preference:</dt>
+			<dd class="theme"></dd>
+			<dt>Device Viewport:</dt>
+			<dd class="viewport"></dd>
+			<dt>Device Orientation:</dt>
+			<dd class="orientation"></dd>
+		</dl>
+	</card-mediaqueries>
+</context-media>

package/examples/card-mediaqueries/card-mediaqueries.spec.ts

@@ -0,0 +1,300 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('card-mediaqueries component', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('http://localhost:3000/test/card-mediaqueries.html')
+		await page.waitForSelector('card-mediaqueries')
+	})
+
+	test('renders component elements correctly', async ({ page }) => {
+		// Check both instances exist
+		const componentWithoutContext = page.locator('card-mediaqueries').first()
+		const componentWithContext = page.locator('context-media card-mediaqueries')
+
+		await expect(componentWithoutContext).toBeVisible()
+		await expect(componentWithContext).toBeVisible()
+
+		// Check that each has the expected structure
+		for (const component of [componentWithoutContext, componentWithContext]) {
+			await expect(component.locator('h2')).toBeVisible()
+			await expect(component.locator('.motion')).toBeVisible()
+			await expect(component.locator('.theme')).toBeVisible()
+			await expect(component.locator('.viewport')).toBeVisible()
+			await expect(component.locator('.orientation')).toBeVisible()
+		}
+	})
+
+	test('shows fallback values without context provider', async ({ page }) => {
+		const componentWithoutContext = page.locator('card-mediaqueries').first()
+
+		// All values should show 'unknown' fallback
+		await expect(componentWithoutContext.locator('.motion')).toHaveText(
+			'unknown',
+		)
+		await expect(componentWithoutContext.locator('.theme')).toHaveText(
+			'unknown',
+		)
+		await expect(componentWithoutContext.locator('.viewport')).toHaveText(
+			'unknown',
+		)
+		await expect(componentWithoutContext.locator('.orientation')).toHaveText(
+			'unknown',
+		)
+	})
+
+	test('receives context values from provider', async ({ page }) => {
+		const componentWithContext = page.locator('context-media card-mediaqueries')
+
+		// Motion preference should be detected
+		const motionText = await componentWithContext
+			.locator('.motion')
+			.textContent()
+		expect(['no-preference', 'reduce']).toContain(motionText)
+
+		// Theme preference should be detected
+		const themeText = await componentWithContext.locator('.theme').textContent()
+		expect(['light', 'dark']).toContain(themeText)
+
+		// Viewport should be detected based on current window size
+		const viewportText = await componentWithContext
+			.locator('.viewport')
+			.textContent()
+		expect(['xs', 'sm', 'md', 'lg', 'xl']).toContain(viewportText)
+
+		// Orientation should be detected
+		const orientationText = await componentWithContext
+			.locator('.orientation')
+			.textContent()
+		expect(['portrait', 'landscape']).toContain(orientationText)
+	})
+
+	test('context values differ from fallback values', async ({ page }) => {
+		const componentWithoutContext = page.locator('card-mediaqueries').first()
+		const componentWithContext = page.locator('context-media card-mediaqueries')
+
+		// Get values from both components
+		const [
+			motionWithoutContext,
+			motionWithContext,
+			themeWithoutContext,
+			themeWithContext,
+			viewportWithoutContext,
+			viewportWithContext,
+			orientationWithoutContext,
+			orientationWithContext,
+		] = await Promise.all([
+			componentWithoutContext.locator('.motion').textContent(),
+			componentWithContext.locator('.motion').textContent(),
+			componentWithoutContext.locator('.theme').textContent(),
+			componentWithContext.locator('.theme').textContent(),
+			componentWithoutContext.locator('.viewport').textContent(),
+			componentWithContext.locator('.viewport').textContent(),
+			componentWithoutContext.locator('.orientation').textContent(),
+			componentWithContext.locator('.orientation').textContent(),
+		])
+
+		// Without context should always be 'unknown'
+		expect(motionWithoutContext).toBe('unknown')
+		expect(themeWithoutContext).toBe('unknown')
+		expect(viewportWithoutContext).toBe('unknown')
+		expect(orientationWithoutContext).toBe('unknown')
+
+		// With context should be actual detected values (not 'unknown')
+		expect(motionWithContext).not.toBe('unknown')
+		expect(themeWithContext).not.toBe('unknown')
+		expect(viewportWithContext).not.toBe('unknown')
+		expect(orientationWithContext).not.toBe('unknown')
+	})
+
+	test('properties reflect context values', async ({ page }) => {
+		const componentWithContext = page.locator('context-media card-mediaqueries')
+
+		// Check that component properties are accessible and match displayed values
+		const [
+			displayedMotion,
+			displayedTheme,
+			displayedViewport,
+			displayedOrientation,
+		] = await Promise.all([
+			componentWithContext.locator('.motion').textContent(),
+			componentWithContext.locator('.theme').textContent(),
+			componentWithContext.locator('.viewport').textContent(),
+			componentWithContext.locator('.orientation').textContent(),
+		])
+
+		const [
+			propertyMotion,
+			propertyTheme,
+			propertyViewport,
+			propertyOrientation,
+		] = await page.evaluate(() => {
+			const element = document.querySelector(
+				'context-media card-mediaqueries',
+			) as any
+			return [
+				element.motion,
+				element.theme,
+				element.viewport,
+				element.orientation,
+			]
+		})
+
+		expect(propertyMotion).toBe(displayedMotion)
+		expect(propertyTheme).toBe(displayedTheme)
+		expect(propertyViewport).toBe(displayedViewport)
+		expect(propertyOrientation).toBe(displayedOrientation)
+	})
+
+	test('responds to media query changes', async ({ page, isMobile }) => {
+		const componentWithContext = page.locator('context-media card-mediaqueries')
+
+		// Change viewport size to trigger media query changes
+		if (!isMobile) {
+			// Test desktop -> mobile transition
+			await page.setViewportSize({ width: 400, height: 600 })
+			await page.waitForTimeout(100) // Allow time for media query listeners
+
+			const mobileViewport = await componentWithContext
+				.locator('.viewport')
+				.textContent()
+
+			// Should show mobile viewport size
+			expect(['xs', 'sm']).toContain(mobileViewport)
+
+			// Change back to desktop
+			await page.setViewportSize({ width: 1200, height: 800 })
+			await page.waitForTimeout(100)
+
+			const desktopViewport = await componentWithContext
+				.locator('.viewport')
+				.textContent()
+
+			// Should show larger viewport size
+			expect(['md', 'lg', 'xl']).toContain(desktopViewport)
+
+			// Values should have changed
+			expect(mobileViewport).not.toBe(desktopViewport)
+		}
+	})
+
+	test('context provider supports custom breakpoints via attributes', async ({
+		page,
+	}) => {
+		// Add custom breakpoint attributes to the context-media element
+		await page.evaluate(() => {
+			const contextMedia = document.querySelector('context-media')
+			if (contextMedia) {
+				contextMedia.setAttribute('sm', '40em')
+				contextMedia.setAttribute('md', '60em')
+				contextMedia.setAttribute('lg', '80em')
+				contextMedia.setAttribute('xl', '120em')
+			}
+		})
+
+		// Wait a moment for the changes to take effect
+		await page.waitForTimeout(100)
+
+		const componentWithContext = page.locator('context-media card-mediaqueries')
+
+		// Viewport should still be a valid value
+		const viewportText = await componentWithContext
+			.locator('.viewport')
+			.textContent()
+		expect(['xs', 'sm', 'md', 'lg', 'xl']).toContain(viewportText)
+	})
+
+	test('multiple components receive same context values', async ({ page }) => {
+		// Add another card-mediaqueries component inside the context provider
+		await page.evaluate(() => {
+			const contextMedia = document.querySelector('context-media')
+			if (contextMedia) {
+				const newCard = document.createElement('card-mediaqueries')
+				newCard.innerHTML = `
+					<h2>Additional Card</h2>
+					<dl>
+						<dt>Motion:</dt><dd class="motion"></dd>
+						<dt>Theme:</dt><dd class="theme"></dd>
+						<dt>Viewport:</dt><dd class="viewport"></dd>
+						<dt>Orientation:</dt><dd class="orientation"></dd>
+					</dl>
+				`
+				contextMedia.appendChild(newCard)
+			}
+		})
+
+		const firstCard = page.locator('context-media card-mediaqueries').first()
+		const secondCard = page.locator('context-media card-mediaqueries').nth(1)
+
+		await expect(secondCard).toBeVisible()
+
+		// Both cards should receive the same context values
+		const [
+			firstMotion,
+			firstTheme,
+			firstViewport,
+			firstOrientation,
+			secondMotion,
+			secondTheme,
+			secondViewport,
+			secondOrientation,
+		] = await Promise.all([
+			firstCard.locator('.motion').textContent(),
+			firstCard.locator('.theme').textContent(),
+			firstCard.locator('.viewport').textContent(),
+			firstCard.locator('.orientation').textContent(),
+			secondCard.locator('.motion').textContent(),
+			secondCard.locator('.theme').textContent(),
+			secondCard.locator('.viewport').textContent(),
+			secondCard.locator('.orientation').textContent(),
+		])
+
+		expect(firstMotion).toBe(secondMotion)
+		expect(firstTheme).toBe(secondTheme)
+		expect(firstViewport).toBe(secondViewport)
+		expect(firstOrientation).toBe(secondOrientation)
+	})
+
+	// TODO: Re-enable this test when context-theme component is implemented
+	// This test doesn't make sense with context-media since it always returns
+	// the same browser/system values regardless of nesting
+	test.skip('context isolation - nested providers override parent values', async ({
+		page,
+	}) => {
+		// Create a nested context structure where inner context might override values
+		await page.evaluate(() => {
+			const outerContext = document.querySelector('context-media')
+			if (outerContext) {
+				const innerContext = document.createElement('context-media')
+				const nestedCard = document.createElement('card-mediaqueries')
+				nestedCard.innerHTML = `
+					<h2>Nested Card</h2>
+					<dl>
+						<dt>Motion:</dt><dd class="motion"></dd>
+						<dt>Theme:</dt><dd class="theme"></dd>
+						<dt>Viewport:</dt><dd class="viewport"></dd>
+						<dt>Orientation:</dt><dd class="orientation"></dd>
+					</dl>
+				`
+				innerContext.appendChild(nestedCard)
+				outerContext.appendChild(innerContext)
+			}
+		})
+
+		const outerCard = page.locator('context-media > card-mediaqueries')
+		const nestedCard = page.locator(
+			'context-media context-media card-mediaqueries',
+		)
+
+		await expect(nestedCard).toBeVisible()
+
+		// Both should receive context values (same source since it's media queries)
+		const [outerMotion, nestedMotion] = await Promise.all([
+			outerCard.locator('.motion').textContent(),
+			nestedCard.locator('.motion').textContent(),
+		])
+
+		// Should both be valid motion preferences (not 'unknown')
+		expect(['no-preference', 'reduce']).toContain(outerMotion)
+		expect(['no-preference', 'reduce']).toContain(nestedMotion)
+	})
+})

package/examples/card-mediaqueries/card-mediaqueries.ts

@@ -0,0 +1,41 @@
+import { Component, defineComponent, requestContext, setText } from '../..'
+import {
+	MEDIA_MOTION,
+	MEDIA_ORIENTATION,
+	MEDIA_THEME,
+	MEDIA_VIEWPORT,
+} from '../context-media/context-media'
+
+type CardMediaqueriesPropKeys = 'motion' | 'theme' | 'viewport' | 'orientation'
+
+export type CardMediaqueriesProps = Record<CardMediaqueriesPropKeys, string>
+
+type CardMediaqueriesUI = Partial<Record<CardMediaqueriesPropKeys, HTMLElement>>
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'card-mediaqueries': Component<CardMediaqueriesProps>
+	}
+}
+
+export default defineComponent<CardMediaqueriesProps, CardMediaqueriesUI>(
+	'card-mediaqueries',
+	{
+		motion: requestContext(MEDIA_MOTION, 'unknown'),
+		theme: requestContext(MEDIA_THEME, 'unknown'),
+		viewport: requestContext(MEDIA_VIEWPORT, 'unknown'),
+		orientation: requestContext(MEDIA_ORIENTATION, 'unknown'),
+	},
+	({ first }) => ({
+		motion: first('.motion'),
+		theme: first('.theme'),
+		viewport: first('.viewport'),
+		orientation: first('.orientation'),
+	}),
+	() => ({
+		motion: setText('motion'),
+		theme: setText('theme'),
+		viewport: setText('viewport'),
+		orientation: setText('orientation'),
+	}),
+)

package/examples/context-media/context-media.html

@@ -0,0 +1,3 @@
+<context-media>
+	<!-- Arbitrarily nested HTML with one or many context consumers -->
+</context-media>

package/examples/context-media/context-media.ts

@@ -0,0 +1,127 @@
+import {
+	type Component,
+	type Context,
+	createState,
+	defineComponent,
+	provideContexts,
+} from '../..'
+
+export type ContextMediaMotion = 'no-preference' | 'reduce'
+export type ContextMediaTheme = 'light' | 'dark'
+export type ContextMediaViewport = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ContextMediaOrientation = 'portrait' | 'landscape'
+
+export type ContextMediaProps = {
+	readonly 'media-motion': ContextMediaMotion
+	readonly 'media-theme': ContextMediaTheme
+	readonly 'media-viewport': ContextMediaViewport
+	readonly 'media-orientation': ContextMediaOrientation
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'context-media': Component<ContextMediaProps>
+	}
+}
+
+/* === Exported Contexts === */
+
+export const MEDIA_MOTION = 'media-motion' as Context<
+	'media-motion',
+	() => ContextMediaMotion
+>
+export const MEDIA_THEME = 'media-theme' as Context<
+	'media-theme',
+	() => ContextMediaTheme
+>
+export const MEDIA_VIEWPORT = 'media-viewport' as Context<
+	'media-viewport',
+	() => ContextMediaViewport
+>
+export const MEDIA_ORIENTATION = 'media-orientation' as Context<
+	'media-orientation',
+	() => ContextMediaOrientation
+>
+
+/* === Component === */
+
+export default defineComponent<ContextMediaProps>(
+	'context-media',
+	{
+		// Context for motion preference; true for no-preference, false for reduce
+		[MEDIA_MOTION]: () => {
+			const mql = matchMedia('(prefers-reduced-motion: reduce)')
+			const motion = createState(mql.matches ? 'reduce' : 'no-preference')
+			mql.addEventListener('change', e => {
+				motion.set(e.matches ? 'reduce' : 'no-preference')
+			})
+			return motion
+		},
+
+		// Context for preferred color scheme
+		[MEDIA_THEME]: () => {
+			const mql = matchMedia('(prefers-color-scheme: dark)')
+			const theme = createState(mql.matches ? 'dark' : 'light')
+			mql.addEventListener('change', e => {
+				theme.set(e.matches ? 'dark' : 'light')
+			})
+			return theme
+		},
+
+		// Context for screen viewport size
+		[MEDIA_VIEWPORT]: (ui: { host: HTMLElement }) => {
+			const getBreakpoint = (attr: string, fallback: string) => {
+				const value = ui.host.getAttribute(attr)
+				const trimmed = value?.trim()
+				if (!trimmed) return fallback
+				const unit = trimmed.match(/em$/) ? 'em' : 'px'
+				const v = parseFloat(trimmed)
+				return Number.isFinite(v) ? v + unit : fallback
+			}
+			const mqlSM = matchMedia(`(min-width: ${getBreakpoint('sm', '32em')})`)
+			const mqlMD = matchMedia(`(min-width: ${getBreakpoint('md', '48em')})`)
+			const mqlLG = matchMedia(`(min-width: ${getBreakpoint('lg', '72em')})`)
+			const mqlXL = matchMedia(`(min-width: ${getBreakpoint('xl', '104em')})`)
+			const getViewport = () => {
+				if (mqlXL.matches) return 'xl'
+				if (mqlLG.matches) return 'lg'
+				if (mqlMD.matches) return 'md'
+				if (mqlSM.matches) return 'sm'
+				return 'xs'
+			}
+			const viewport = createState(getViewport())
+			mqlSM.addEventListener('change', () => {
+				viewport.set(getViewport())
+			})
+			mqlMD.addEventListener('change', () => {
+				viewport.set(getViewport())
+			})
+			mqlLG.addEventListener('change', () => {
+				viewport.set(getViewport())
+			})
+			mqlXL.addEventListener('change', () => {
+				viewport.set(getViewport())
+			})
+			return viewport
+		},
+
+		// Context for screen orientation
+		[MEDIA_ORIENTATION]: () => {
+			const mql = matchMedia('(orientation: landscape)')
+			const orientation = createState(mql.matches ? 'landscape' : 'portrait')
+			mql.addEventListener('change', e => {
+				orientation.set(e.matches ? 'landscape' : 'portrait')
+			})
+			return orientation
+		},
+	},
+	undefined,
+	() => ({
+		host: provideContexts([
+			MEDIA_MOTION,
+			MEDIA_THEME,
+			MEDIA_VIEWPORT,
+			MEDIA_ORIENTATION,
+		]),
+	}),
+)