@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/form/Form.stx

@@ -1,95 +0,0 @@
-<script server>
-export const action = $props.action || ''
-export const method = $props.method || 'POST'
-export const validationSchema = $props.validationSchema || {}
-export const className = $props.className || ''
-
-export const formClasses = `space-y-6 ${className}`.trim()
-export const errorClasses = `mt-1 text-sm text-red-600 dark:text-red-400`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const validationSchema = {{ validationSchema }}
-
-const errors = state({})
-const isSubmitting = state(false)
-const submitCount = state(0)
-
-function validateField(name, value, allValues) {
-  const schema = validationSchema[name]
-  if (!schema) return null
-  if (schema.required && !value) {
-    return schema.requiredMessage || `${name} is required`
-  }
-  if (schema.minLength && String(value).length < schema.minLength) {
-    return schema.minLengthMessage || `${name} must be at least ${schema.minLength} characters`
-  }
-  if (schema.maxLength && String(value).length > schema.maxLength) {
-    return schema.maxLengthMessage || `${name} must be at most ${schema.maxLength} characters`
-  }
-  if (schema.pattern && !new RegExp(schema.pattern).test(value)) {
-    return schema.patternMessage || `${name} is invalid`
-  }
-  return null
-}
-
-function validateForm(values) {
-  const next = {}
-  let valid = true
-  for (const name of Object.keys(validationSchema)) {
-    const err = validateField(name, values[name], values)
-    if (err) {
-      next[name] = err
-      valid = false
-    }
-  }
-  errors.set(next)
-  return valid
-}
-
-async function onSubmit(event) {
-  event.preventDefault()
-  submitCount.set(submitCount() + 1)
-
-  const formData = new FormData(event.target)
-  const values = {}
-  for (const [k, v] of formData.entries()) values[k] = v
-
-  if (!validateForm(values)) {
-    emit('error', errors())
-    return
-  }
-
-  isSubmitting.set(true)
-  try {
-    emit('submit', values)
-  }
-  finally {
-    isSubmitting.set(false)
-  }
-}
-
-function setErrors(next) {
-  errors.set({ ...errors(), ...next })
-}
-
-function reset(form) {
-  errors.set({})
-  isSubmitting.set(false)
-  submitCount.set(0)
-  if (form?.reset) form.reset()
-}
-
-defineExpose({ errors, isSubmitting, submitCount, setErrors, reset, validateForm })
-</script>
-
-<form
-  class="{{ formClasses }}"
-  @if(action)action="{{ action }}"@endif
-  method="{{ method }}"
-  @submit="onSubmit($event)"
-  novalidate
->
-  <slot />
-</form>

package/src/ui/form/index.ts

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

@@ -1,294 +0,0 @@
-<script server>
-export const id = $props.id || `stx-heatmap-${Math.random().toString(36).slice(2, 8)}`
-export const mode = $props.mode || 'overlay'
-export const width = $props.width || null
-export const height = $props.height || null
-export const radius = $props.radius || 20
-export const blur = $props.blur || 15
-export const opacity = $props.opacity || 0.6
-export const showLegend = $props.showLegend !== false
-export const interactive = $props.interactive || false
-export const dataSource = $props.dataSource || 'auto'
-export const endpoint = $props.endpoint || ''
-export const colorScheme = $props.colorScheme || 'default'
-
-const colorSchemes = {
-  default: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],
-  fire: ['#000000', '#ff0000', '#ffff00', '#ffffff'],
-  cool: ['#000033', '#0066ff', '#00ccff', '#ffffff'],
-  grayscale: ['#000000', '#444444', '#888888', '#cccccc', '#ffffff'],
-}
-
-export 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>

package/src/ui/image/Image.stx

@@ -1,165 +0,0 @@
-<script server>
-export const src = $props.src || ''
-export const srcSet = $props.srcSet || ''
-export const sizes = $props.sizes || ''
-export const webpSrc = $props.webpSrc || ''
-export const webpSrcSet = $props.webpSrcSet || ''
-export const alt = $props.alt || ''
-export const width = $props.width
-export const height = $props.height
-export const lazy = $props.lazy ?? true
-export const placeholder = $props.placeholder || 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3C/svg%3E'
-export const blurDataURL = $props.blurDataURL || ''
-export const aspectRatio = $props.aspectRatio
-export const objectFit = $props.objectFit || 'cover'
-export const rounded = $props.rounded ?? false
-export const zoomOnHover = $props.zoomOnHover || false
-export const className = $props.className || ''
-
-export const hasWebP = !!(webpSrc || webpSrcSet)
-
-const objectFitClasses = {
-  contain: 'object-contain',
-  cover: 'object-cover',
-  fill: 'object-fill',
-  none: 'object-none',
-  'scale-down': 'object-scale-down',
-}
-
-const roundedClass = rounded === true ? 'rounded-lg' : rounded === 'full' ? 'rounded-full' : rounded ? `rounded-${rounded}` : ''
-const zoomClasses = zoomOnHover ? 'transform hover:scale-110 transition-transform duration-300 ease-in-out cursor-zoom-in' : ''
-
-export const containerClasses = `relative overflow-hidden ${roundedClass} ${className}`.trim()
-export const imageClasses = `w-full h-full transition-opacity duration-300 ${objectFitClasses[objectFit]} ${zoomClasses}`.trim()
-export const blurPlaceholderClasses = `absolute inset-0 ${roundedClass} filter blur-lg scale-110`.trim()
-export const containerStyle = aspectRatio ? `padding-bottom: ${(1 / aspectRatio) * 100}%` : ''
-</script>
-
-<script client>
-const emit = defineEmits()
-const lazy = {{ lazy }}
-const realSrc = {{ src }}
-const realSrcSet = {{ srcSet }}
-const errorPlaceholder = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23e5e7eb" width="400" height="300"/%3E%3Ctext x="50%25" y="50%25" fill="%239ca3af" font-size="16" text-anchor="middle" dominant-baseline="middle"%3EImage not found%3C/text%3E%3C/svg%3E'
-
-function onImageLoad(event) {
-  const img = event.target
-  img.classList.remove('opacity-0')
-  img.classList.add('opacity-100')
-  emit('load', event)
-}
-
-function onImageError(event) {
-  const img = event.target
-  img.src = errorPlaceholder
-  emit('error', event)
-}
-
-onMount(() => {
-  if (!lazy) return
-  if (typeof IntersectionObserver === 'undefined') return
-  const lazyImages = document.querySelectorAll('.lazy-image:not([data-stx-img-loaded])')
-  const observer = new IntersectionObserver((entries, obs) => {
-    for (const entry of entries) {
-      if (!entry.isIntersecting) continue
-      const img = entry.target
-      img.setAttribute('data-stx-img-loaded', '1')
-      const dataSrc = img.getAttribute('data-src')
-      const dataSrcSet = img.getAttribute('data-srcset')
-      if (!dataSrc) continue
-      const probe = new Image()
-      probe.onload = () => {
-        img.src = dataSrc
-        if (dataSrcSet) img.srcset = dataSrcSet
-        img.classList.remove('opacity-0')
-        img.classList.add('opacity-100')
-        obs.unobserve(img)
-      }
-      probe.onerror = () => {
-        onImageError({ target: img })
-        obs.unobserve(img)
-      }
-      probe.src = dataSrc
-      if (dataSrcSet) probe.srcset = dataSrcSet
-    }
-  }, { rootMargin: '50px' })
-  for (const img of lazyImages) observer.observe(img)
-})
-</script>
-
-<div class="{{ containerClasses }}" style="{{ containerStyle }}">
-  @if(blurDataURL)
-    <img
-      src="{{ blurDataURL }}"
-      alt=""
-      class="{{ blurPlaceholderClasses }}"
-      aria-hidden="true"
-    />
-  @endif
-
-  @if(hasWebP)
-    <picture>
-      <source
-        type="image/webp"
-        @if(webpSrcSet)srcset="{{ webpSrcSet }}"@endif
-        @if(webpSrc && !webpSrcSet)srcset="{{ webpSrc }}"@endif
-        @if(sizes)sizes="{{ sizes }}"@endif
-      />
-      @if(lazy)
-        <img
-          src="{{ placeholder }}"
-          data-src="{{ src }}"
-          @if(srcSet)data-srcset="{{ srcSet }}"@endif
-          @if(sizes)sizes="{{ sizes }}"@endif
-          alt="{{ alt }}"
-          class="{{ imageClasses }} lazy-image opacity-0"
-          width="{{ width }}"
-          height="{{ height }}"
-          loading="lazy"
-          @load="onImageLoad($event)"
-          @error="onImageError($event)"
-        />
-      @else
-        <img
-          src="{{ src }}"
-          @if(srcSet)srcset="{{ srcSet }}"@endif
-          @if(sizes)sizes="{{ sizes }}"@endif
-          alt="{{ alt }}"
-          class="{{ imageClasses }}"
-          width="{{ width }}"
-          height="{{ height }}"
-          @load="onImageLoad($event)"
-          @error="onImageError($event)"
-        />
-      @endif
-    </picture>
-  @else
-    @if(lazy)
-      <img
-        src="{{ placeholder }}"
-        data-src="{{ src }}"
-        @if(srcSet)data-srcset="{{ srcSet }}"@endif
-        @if(sizes)sizes="{{ sizes }}"@endif
-        alt="{{ alt }}"
-        class="{{ imageClasses }} lazy-image opacity-0"
-        width="{{ width }}"
-        height="{{ height }}"
-        loading="lazy"
-        @load="onImageLoad($event)"
-        @error="onImageError($event)"
-      />
-    @else
-      <img
-        src="{{ src }}"
-        @if(srcSet)srcset="{{ srcSet }}"@endif
-        @if(sizes)sizes="{{ sizes }}"@endif
-        alt="{{ alt }}"
-        class="{{ imageClasses }}"
-        width="{{ width }}"
-        height="{{ height }}"
-        @load="onImageLoad($event)"
-        @error="onImageError($event)"
-      />
-    @endif
-  @endif
-</div>