@stacksjs/components 0.2.3

package/src/ui/form/Form.stx

@@ -0,0 +1,209 @@
+<script>
+export const action = $props.action || ''
+export const method = $props.method || 'POST'
+export const validationSchema = $props.validationSchema || {}
+export const initialValues = $props.initialValues || {}
+export const validateOnChange = $props.validateOnChange ?? true
+export const validateOnBlur = $props.validateOnBlur ?? true
+export const onSubmit = $props.onSubmit
+export const onError = $props.onError
+export const className = $props.className || ''
+
+let values = { ...initialValues }
+let errors = {}
+let touched = {}
+let isSubmitting = false
+let isValidating = false
+let submitCount = 0
+
+// Validate a single field
+function validateField(name, value) {
+  const fieldSchema = validationSchema[name]
+  if (!fieldSchema)
+    return null
+
+  // Required validation
+  if (fieldSchema.required && !value) {
+    return fieldSchema.requiredMessage || `${name} is required`
+  }
+
+  // Min length validation
+  if (fieldSchema.minLength && value.length < fieldSchema.minLength) {
+    return fieldSchema.minLengthMessage || `${name} must be at least ${fieldSchema.minLength} characters`
+  }
+
+  // Max length validation
+  if (fieldSchema.maxLength && value.length > fieldSchema.maxLength) {
+    return fieldSchema.maxLengthMessage || `${name} must be at most ${fieldSchema.maxLength} characters`
+  }
+
+  // Pattern validation
+  if (fieldSchema.pattern && !fieldSchema.pattern.test(value)) {
+    return fieldSchema.patternMessage || `${name} is invalid`
+  }
+
+  // Custom validation
+  if (fieldSchema.validate && typeof fieldSchema.validate === 'function') {
+    return fieldSchema.validate(value, values)
+  }
+
+  return null
+}
+
+// Validate all fields
+function validateForm() {
+  const newErrors = {}
+  let isValid = true
+
+  Object.keys(validationSchema).forEach((name) => {
+    const error = validateField(name, values[name])
+    if (error) {
+      newErrors[name] = error
+      isValid = false
+    }
+  })
+
+  errors = newErrors
+  return isValid
+}
+
+// Handle field change
+function handleChange(event) {
+  const { name, value } = event.target
+  values[name] = value
+
+  if (validateOnChange && touched[name]) {
+    const error = validateField(name, value)
+    if (error) {
+      errors[name] = error
+    }
+    else {
+      delete errors[name]
+    }
+  }
+}
+
+// Handle field blur
+function handleBlur(event) {
+  const { name } = event.target
+  touched[name] = true
+
+  if (validateOnBlur) {
+    const error = validateField(name, values[name])
+    if (error) {
+      errors[name] = error
+    }
+    else {
+      delete errors[name]
+    }
+  }
+}
+
+// Handle form submission
+async function handleSubmit(event) {
+  event.preventDefault()
+  submitCount++
+
+  // Mark all fields as touched
+  Object.keys(validationSchema).forEach((name) => {
+    touched[name] = true
+  })
+
+  // Validate
+  isValidating = true
+  const isValid = validateForm()
+  isValidating = false
+
+  if (!isValid) {
+    if (onError) {
+      onError(errors)
+    }
+    return
+  }
+
+  // Submit
+  isSubmitting = true
+
+  try {
+    if (onSubmit) {
+      await onSubmit(values, { setErrors, setValues, resetForm })
+    }
+  }
+  catch (error) {
+    if (onError) {
+      onError(error)
+    }
+  }
+  finally {
+    isSubmitting = false
+  }
+}
+
+// Helper functions
+function setErrors(newErrors) {
+  errors = { ...errors, ...newErrors }
+}
+
+function setValues(newValues) {
+  values = { ...values, ...newValues }
+}
+
+function resetForm() {
+  values = { ...initialValues }
+  errors = {}
+  touched = {}
+  isSubmitting = false
+  submitCount = 0
+}
+
+function getFieldProps(name) {
+  return {
+    name,
+    value: values[name] || '',
+    error: errors[name],
+    touched: touched[name],
+    onChange: handleChange,
+    onBlur: handleBlur,
+  }
+}
+
+export const formClasses = `space-y-6 ${className}`.trim()
+export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
+</script>
+
+<form
+  class="{{ formClasses }}"
+  @if(action)action="{{ action }}"@endif
+  method="{{ method }}"
+  onsubmit="handleSubmit(event)"
+  novalidate
+>
+  <slot
+    values="{{ values }}"
+    errors="{{ errors }}"
+    touched="{{ touched }}"
+    isSubmitting="{{ isSubmitting }}"
+    isValidating="{{ isValidating }}"
+    submitCount="{{ submitCount }}"
+    getFieldProps="{{ getFieldProps }}"
+    setErrors="{{ setErrors }}"
+    setValues="{{ setValues }}"
+    resetForm="{{ resetForm }}"
+  />
+</form>
+
+<script>
+// Export context for child components
+if (typeof window !== 'undefined') {
+  window.__formContext = {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isValidating,
+    getFieldProps,
+    handleChange,
+    handleBlur,
+  }
+}
+</script>

package/src/ui/form/index.ts

@@ -0,0 +1,67 @@
+import type { PropSchema, ValidationResult } from '../../utils/prop-validation'
+import { createPropValidator, PropTypes } from '../../utils/prop-validation'
+
+export { default as Form } from './Form.stx'
+
+export interface FieldSchema {
+  required?: boolean
+  requiredMessage?: string
+  minLength?: number
+  minLengthMessage?: string
+  maxLength?: number
+  maxLengthMessage?: string
+  pattern?: RegExp
+  patternMessage?: string
+  validate?: (value: any, values: Record<string, any>) => string | null | undefined
+}
+
+export interface ValidationSchema {
+  [fieldName: string]: FieldSchema
+}
+
+export interface FormHelpers {
+  setErrors: (errors: Record<string, string>) => void
+  setValues: (values: Record<string, any>) => void
+  resetForm: () => void
+}
+
+export interface FormProps {
+  action?: string
+  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  validationSchema?: ValidationSchema
+  initialValues?: Record<string, any>
+  validateOnChange?: boolean
+  validateOnBlur?: boolean
+  onSubmit?: (values: Record<string, any>, helpers: FormHelpers) => void | Promise<void>
+  onError?: (errors: Record<string, string> | Error) => void
+  className?: string
+}
+
+export interface FieldProps {
+  name: string
+  value: any
+  error?: string
+  touched?: boolean
+  onChange: (event: Event) => void
+  onBlur: (event: Event) => void
+}
+
+/**
+ * Form prop validation schema
+ */
+export const formPropSchema: PropSchema = {
+  action: PropTypes.string,
+  method: PropTypes.oneOf(['GET', 'POST', 'PUT', 'DELETE', 'PATCH']),
+  validationSchema: PropTypes.object,
+  initialValues: PropTypes.object,
+  validateOnChange: PropTypes.boolean,
+  validateOnBlur: PropTypes.boolean,
+  onSubmit: PropTypes.func,
+  onError: PropTypes.func,
+  className: PropTypes.string,
+}
+
+/**
+ * Validate Form component props
+ */
+export const validateFormProps: (props: Record<string, any>) => ValidationResult = createPropValidator('Form', formPropSchema)

package/src/ui/heatmap/Heatmap.stx

@@ -0,0 +1,315 @@
+<script>
+/**
+ * Heatmap Component
+ *
+ * A privacy-compliant heatmap visualization component that displays user interaction data.
+ * Can be used to show click heatmaps, movement heatmaps, or scroll depth visualizations.
+ *
+ * Props:
+ * @prop {string} id - Unique identifier for the heatmap container
+ * @prop {string} mode - Visualization mode: 'overlay' | 'standalone' | 'thumbnail' (default: 'overlay')
+ * @prop {number} width - Width in pixels (default: 100% of container)
+ * @prop {number} height - Height in pixels (default: 100% of container)
+ * @prop {number} radius - Heat point radius (default: 20)
+ * @prop {number} blur - Blur amount for heatmap (default: 15)
+ * @prop {number} opacity - Maximum opacity (default: 0.6)
+ * @prop {boolean} showLegend - Show color legend (default: true)
+ * @prop {boolean} interactive - Enable zoom/pan interactions (default: false)
+ * @prop {string} dataSource - Source of data: 'auto' | 'manual' | 'endpoint' (default: 'auto')
+ * @prop {string} endpoint - API endpoint for fetching heatmap data
+ * @prop {string} colorScheme - Color scheme: 'default' | 'fire' | 'cool' | 'grayscale' (default: 'default')
+ */
+const id = props.id || 'stx-heatmap-' + Math.random().toString(36).slice(2, 8)
+const mode = props.mode || 'overlay'
+const width = props.width || null
+const height = props.height || null
+const radius = props.radius || 20
+const blur = props.blur || 15
+const opacity = props.opacity || 0.6
+const showLegend = props.showLegend !== false
+const interactive = props.interactive || false
+const dataSource = props.dataSource || 'auto'
+const endpoint = props.endpoint || ''
+const colorScheme = props.colorScheme || 'default'
+
+// Color schemes
+const colorSchemes = {
+  default: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],
+  fire: ['#000000', '#ff0000', '#ffff00', '#ffffff'],
+  cool: ['#000033', '#0066ff', '#00ccff', '#ffffff'],
+  grayscale: ['#000000', '#444444', '#888888', '#cccccc', '#ffffff']
+}
+
+const colors = colorSchemes[colorScheme] || colorSchemes.default
+</script>
+
+<div
+  id="{{ id }}"
+  class="stx-heatmap stx-heatmap--{{ mode }}"
+  data-heatmap-radius="{{ radius }}"
+  data-heatmap-blur="{{ blur }}"
+  data-heatmap-opacity="{{ opacity }}"
+  data-heatmap-colors="{{ JSON.stringify(colors) }}"
+  data-heatmap-source="{{ dataSource }}"
+  @if(endpoint)
+  data-heatmap-endpoint="{{ endpoint }}"
+  @endif
+  @if(width)
+  style="width: {{ width }}px; {{ height ? 'height: ' + height + 'px;' : '' }}"
+  @endif
+>
+  <canvas class="stx-heatmap__canvas"></canvas>
+
+  @if(showLegend)
+  <div class="stx-heatmap__legend">
+    <span class="stx-heatmap__legend-label">Low</span>
+    <div class="stx-heatmap__legend-gradient" style="background: linear-gradient(to right, {{ colors.join(', ') }})"></div>
+    <span class="stx-heatmap__legend-label">High</span>
+  </div>
+  @endif
+
+  @if(interactive)
+  <div class="stx-heatmap__controls">
+    <button type="button" class="stx-heatmap__control" data-action="zoom-in" aria-label="Zoom in">+</button>
+    <button type="button" class="stx-heatmap__control" data-action="zoom-out" aria-label="Zoom out">-</button>
+    <button type="button" class="stx-heatmap__control" data-action="reset" aria-label="Reset view">Reset</button>
+  </div>
+  @endif
+
+  {{ slot }}
+</div>
+
+<style>
+.stx-heatmap {
+  position: relative;
+  overflow: hidden;
+}
+
+.stx-heatmap--overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.stx-heatmap--standalone {
+  display: block;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #f9f9f9;
+}
+
+.stx-heatmap--thumbnail {
+  display: inline-block;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background: #f9f9f9;
+}
+
+.stx-heatmap__canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.stx-heatmap__legend {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-size: 12px;
+  pointer-events: auto;
+}
+
+.stx-heatmap__legend-gradient {
+  width: 100px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.stx-heatmap__legend-label {
+  color: #666;
+}
+
+.stx-heatmap__controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  pointer-events: auto;
+}
+
+.stx-heatmap__control {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.2s;
+}
+
+.stx-heatmap__control:hover {
+  background: #f0f0f0;
+}
+
+.stx-heatmap__control:active {
+  background: #e0e0e0;
+}
+</style>
+
+<script client>
+(function() {
+  const container = document.getElementById('{{ id }}');
+  if (!container) return;
+
+  const canvas = container.querySelector('.stx-heatmap__canvas');
+  const ctx = canvas.getContext('2d');
+
+  const config = {
+    radius: parseInt(container.dataset.heatmapRadius) || 20,
+    blur: parseInt(container.dataset.heatmapBlur) || 15,
+    opacity: parseFloat(container.dataset.heatmapOpacity) || 0.6,
+    colors: JSON.parse(container.dataset.heatmapColors || '[]'),
+    source: container.dataset.heatmapSource || 'auto',
+    endpoint: container.dataset.heatmapEndpoint || ''
+  };
+
+  // Resize canvas to match container
+  function resizeCanvas() {
+    const rect = container.getBoundingClientRect();
+    canvas.width = rect.width || window.innerWidth;
+    canvas.height = rect.height || window.innerHeight;
+  }
+
+  // Create color gradient for heatmap
+  function createGradient(colors) {
+    const gradientCanvas = document.createElement('canvas');
+    gradientCanvas.width = 256;
+    gradientCanvas.height = 1;
+    const gradientCtx = gradientCanvas.getContext('2d');
+    const gradient = gradientCtx.createLinearGradient(0, 0, 256, 0);
+
+    colors.forEach((color, i) => {
+      gradient.addColorStop(i / (colors.length - 1), color);
+    });
+
+    gradientCtx.fillStyle = gradient;
+    gradientCtx.fillRect(0, 0, 256, 1);
+    return gradientCtx.getImageData(0, 0, 256, 1).data;
+  }
+
+  // Render heatmap from data points
+  function render(points) {
+    resizeCanvas();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw heat points
+    points.forEach(function(p) {
+      const x = (p.x / 100) * canvas.width;
+      const y = (p.y / 100) * canvas.height;
+      const intensity = p.type === 'click' ? 1 : 0.3;
+
+      const gradient = ctx.createRadialGradient(x, y, 0, x, y, config.radius);
+      gradient.addColorStop(0, 'rgba(0,0,0,' + intensity + ')');
+      gradient.addColorStop(1, 'rgba(0,0,0,0)');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(x - config.radius, y - config.radius, config.radius * 2, config.radius * 2);
+    });
+
+    // Apply blur
+    if (config.blur > 0) {
+      ctx.filter = 'blur(' + config.blur + 'px)';
+      ctx.drawImage(canvas, 0, 0);
+      ctx.filter = 'none';
+    }
+
+    // Colorize
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const pixels = imageData.data;
+    const gradientColors = createGradient(config.colors);
+
+    for (let i = 0; i < pixels.length; i += 4) {
+      const alpha = pixels[i + 3];
+      if (alpha > 0) {
+        const colorIndex = Math.min(alpha, 255) * 4;
+        pixels[i] = gradientColors[colorIndex];
+        pixels[i + 1] = gradientColors[colorIndex + 1];
+        pixels[i + 2] = gradientColors[colorIndex + 2];
+        pixels[i + 3] = Math.round(alpha * config.opacity);
+      }
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+  }
+
+  // Load data based on source
+  function loadData() {
+    if (config.source === 'auto' && window.stxHeatmap) {
+      render(window.stxHeatmap.getData().points);
+    } else if (config.source === 'endpoint' && config.endpoint) {
+      fetch(config.endpoint)
+        .then(r => r.json())
+        .then(data => render(data.points || data))
+        .catch(console.error);
+    }
+  }
+
+  // Initialize
+  resizeCanvas();
+  loadData();
+
+  // Handle resize
+  window.addEventListener('resize', function() {
+    resizeCanvas();
+    loadData();
+  });
+
+  // Handle interactive controls
+  const controls = container.querySelectorAll('.stx-heatmap__control');
+  let zoom = 1;
+  let panX = 0;
+  let panY = 0;
+
+  controls.forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      const action = btn.dataset.action;
+      if (action === 'zoom-in') {
+        zoom = Math.min(zoom * 1.2, 5);
+      } else if (action === 'zoom-out') {
+        zoom = Math.max(zoom / 1.2, 0.5);
+      } else if (action === 'reset') {
+        zoom = 1;
+        panX = 0;
+        panY = 0;
+      }
+      canvas.style.transform = 'scale(' + zoom + ') translate(' + panX + 'px, ' + panY + 'px)';
+    });
+  });
+
+  // Expose API
+  container.stxHeatmap = {
+    render: render,
+    refresh: loadData,
+    setData: function(points) { render(points); },
+    getCanvas: function() { return canvas; },
+    toDataURL: function() { return canvas.toDataURL(); }
+  };
+})();
+</script>