acinguiux-preact-components 0.0.1

package/src/main/organisms/cart.js

@@ -0,0 +1,162 @@
+import { useState, useEffect } from 'preact/hooks'
+import { Img } from '../atoms/img.js'
+import { Link } from '../atoms/link.js'
+import h from '../shared/h.js'
+
+export function Cart ({ _model, ...props }) {
+  const { items = [], currency = '\u20b9', deliveryCharge = 0, discount = 0 } = _model || {}
+
+  const [cartItems, setCartItems] = useState(() =>
+    items.map((item, idx) => ({
+      ...item,
+      _key: item.id || idx,
+      quantity: Math.max(1, Number.parseInt(item.quantity, 10) || 1)
+    }))
+  )
+
+  // Sync when external items prop changes (e.g. from DB/API)
+  useEffect(() => {
+    setCartItems(items.map((item, idx) => ({
+      ...item,
+      _key: item.id || idx,
+      quantity: Math.max(1, Number.parseInt(item.quantity, 10) || 1)
+    })))
+  }, [JSON.stringify(items)])
+
+  const updateQuantity = (idx, delta) => {
+    setCartItems(prev => prev.map((item, i) => {
+      if (i !== idx) return item
+      const maxQty = Number.parseInt(item.maxQuantity, 10)
+      const newQty = item.quantity + delta
+      if (newQty < 1) return item
+      if (Number.isFinite(maxQty) && newQty > maxQty) return item
+      return { ...item, quantity: newQty }
+    }))
+  }
+
+  const removeItem = (idx) => {
+    setCartItems(prev => prev.filter((_, i) => i !== idx))
+  }
+
+  const subtotal = cartItems.reduce((sum, item) => sum + (Number(item.price) || 0) * item.quantity, 0)
+  const totalSavings = cartItems.reduce((sum, item) => {
+    if (item.oldPrice) return sum + ((Number(item.oldPrice) - Number(item.price)) * item.quantity)
+    return sum
+  }, 0)
+  const grandTotal = subtotal - Number(discount) + Number(deliveryCharge)
+  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0)
+
+  return h('div', {
+    ...props,
+    className: 'bg-bga text-txa border border-txa/10 rounded-xl w-full overflow-hidden',
+    'data-cart-total': grandTotal,
+    'data-cart-items': totalItems
+  },
+
+  // Header
+  h('div', { className: 'flex items-center justify-between p-3 lg:p-4 border-b border-txa/10' },
+    h('h2', { className: 'text-sm lg:text-base font-bold' }, 'Your Cart'),
+    h('span', { className: 'text-xs text-txa/60' }, `${totalItems} item${totalItems !== 1 ? 's' : ''}`)
+  ),
+
+  // Cart items list
+  cartItems.length > 0
+    ? h('ul', { className: 'divide-y divide-txa/10' },
+      cartItems.map((item, idx) =>
+        h('li', { key: item._key, className: 'p-3 lg:p-4' },
+          h('div', { className: 'grid grid-cols-12 gap-x-2 lg:gap-x-4 items-center' },
+
+            // Image
+            h('div', { className: 'col-span-2' },
+              item.image?.src
+                ? h(Img, {
+                  _model: item.image,
+                  _fit: 'contain',
+                  className: 'w-full rounded-md bg-bgb/5',
+                  style: 'aspect-ratio: 1 / 1;'
+                })
+                : h('div', { className: 'w-full rounded-md bg-txa/5', style: 'aspect-ratio: 1 / 1;' })
+            ),
+
+            // Info
+            h('div', { className: 'col-span-4 flex flex-col gap-0.5' },
+              h('span', { className: 'text-xs lg:text-sm font-semibold leading-tight' }, item.title),
+              h('div', { className: 'flex items-center gap-1' },
+                h('span', { className: 'text-xs font-bold' }, formatPrice(item.price, currency)),
+                item.oldPrice && h('span', { className: 'text-[10px] line-through opacity-60' }, formatPrice(item.oldPrice, currency))
+              ),
+              item.unitLabel && h('span', { className: 'text-[10px] text-txa/60' }, item.unitLabel)
+            ),
+
+            // Quantity controls
+            h('div', { className: 'col-span-3 flex items-center justify-center' },
+              h('div', { className: 'inline-flex items-center rounded-md border border-bgb overflow-hidden' },
+                h('button', {
+                  type: 'button',
+                  className: 'clickable bg-bgb text-txb w-6 h-6 lg:w-7 lg:h-7 text-sm font-bold',
+                  onClick: () => updateQuantity(idx, -1),
+                  'aria-label': 'Decrease quantity'
+                }, '\u2212'),
+                h('span', { className: 'px-2 min-w-6 text-center text-xs font-semibold' }, item.quantity),
+                h('button', {
+                  type: 'button',
+                  className: 'clickable bg-bgb text-txb w-6 h-6 lg:w-7 lg:h-7 text-sm font-bold',
+                  onClick: () => updateQuantity(idx, 1),
+                  'aria-label': 'Increase quantity'
+                }, '+')
+              )
+            ),
+
+            // Subtotal + remove
+            h('div', { className: 'col-span-3 flex flex-col items-end gap-1' },
+              h('span', { className: 'text-xs lg:text-sm font-bold' }, formatPrice((Number(item.price) || 0) * item.quantity, currency)),
+              h('button', {
+                type: 'button',
+                className: 'clickable text-[10px] text-txa/50 hover:text-txa',
+                onClick: () => removeItem(idx),
+                'aria-label': `Remove ${item.title}`
+              }, 'Remove')
+            )
+          )
+        )
+      )
+    )
+    : h('div', { className: 'p-6 text-center text-sm text-txa/50' }, 'Your cart is empty'),
+
+  // Grand total footer
+  cartItems.length > 0 && h('div', { className: 'border-t border-txa/10 p-3 lg:p-4 space-y-2 bg-txa/3' },
+    h('div', { className: 'flex justify-between text-xs lg:text-sm' },
+      h('span', { className: 'text-txa/70' }, 'Subtotal'),
+      h('span', { className: 'font-semibold' }, formatPrice(subtotal, currency))
+    ),
+    totalSavings > 0 && h('div', { className: 'flex justify-between text-xs lg:text-sm' },
+      h('span', { className: 'text-bgb' }, 'Savings'),
+      h('span', { className: 'font-semibold text-bgb' }, `-${formatPrice(totalSavings, currency)}`)
+    ),
+    discount > 0 && h('div', { className: 'flex justify-between text-xs lg:text-sm' },
+      h('span', { className: 'text-txa/70' }, 'Discount'),
+      h('span', { className: 'font-semibold text-bgb' }, `-${formatPrice(discount, currency)}`)
+    ),
+    deliveryCharge > 0 && h('div', { className: 'flex justify-between text-xs lg:text-sm' },
+      h('span', { className: 'text-txa/70' }, 'Delivery'),
+      h('span', { className: 'font-semibold' }, formatPrice(deliveryCharge, currency))
+    ),
+    h('div', { className: 'flex justify-between text-sm lg:text-base font-bold pt-2 border-t border-txa/10' },
+      h('span', null, 'Grand Total'),
+      h('span', null, formatPrice(grandTotal, currency))
+    ),
+    h('button', {
+      type: 'button',
+      className: 'clickable w-full mt-2 bg-bgb text-txb py-2.5 lg:py-3 rounded-lg text-sm lg:text-base font-bold hover:bg-txb hover:text-bgb transition',
+      'aria-label': 'Proceed to checkout',
+      'data-cart': JSON.stringify(cartItems.map(({ _key, ...rest }) => rest))
+    }, `Checkout \u2022 ${formatPrice(grandTotal, currency)}`)
+  )
+  )
+}
+
+function formatPrice (value, currency) {
+  const num = Number(value)
+  if (Number.isFinite(num)) return `${currency}${num % 1 === 0 ? num : num.toFixed(2)}`
+  return `${currency}0`
+}

package/src/main/organisms/contact-form.js

@@ -0,0 +1,141 @@
+import { Button } from '../atoms/button.js'
+import { Form } from '../atoms/form.js'
+import { Heading } from '../atoms/heading.js'
+import { Input } from '../atoms/input.js'
+import { RichText } from '../atoms/rich-text.js'
+import getId from '../shared/get-id.js'
+import h from '../shared/h.js'
+
+const DEFAULT_FIELDS = [
+  { name: 'name', label: 'Full name', required: true, placeholder: 'Your name' },
+  { name: 'email', label: 'Email', type: 'email', required: true, placeholder: 'you@email.com' },
+  { name: 'phone', label: 'Phone', type: 'tel', required: true, placeholder: '+91 9XXXXXXXXX' },
+  { name: 'city', label: 'City', required: true, placeholder: 'Bengaluru / Seegehalli' },
+  { name: 'budget', label: 'Budget range', placeholder: '₹8L - ₹18L' },
+  { name: 'message', label: 'Tell us about your home', type: 'textarea', required: true, placeholder: 'Rooms, layout, timelines, and style goals' }
+]
+
+function getFields (fields) {
+  if (!Array.isArray(fields) || fields.length === 0) {
+    return DEFAULT_FIELDS
+  }
+
+  return fields
+    .filter(field => field?.name)
+    .map(field => ({
+      type: 'text',
+      required: false,
+      ...field
+    }))
+}
+
+function getValueMap (data) {
+  const map = {}
+  for (const [key, value] of data.entries()) {
+    map[key] = value || ''
+  }
+  return map
+}
+
+export function ContactForm ({ _model, ...props }) {
+  const {
+    title,
+    text,
+    email,
+    to,
+    subject,
+    endpoint = '/api/contact',
+    fields,
+    submitLabel = 'Submit enquiry',
+    submittingLabel = 'Sending...',
+    successMessage = 'Enquiry sent successfully.',
+    errorMessage = 'Unable to send enquiry. Please try again.'
+  } = _model
+
+  const resolvedFields = getFields(fields)
+
+  const baseId = getId()
+  const ids = Object.fromEntries(resolvedFields.map(field => [field.name, `${baseId}-${field.name}`]))
+
+  const onSubmit = async event => {
+    event.preventDefault()
+    const form = event.currentTarget
+    const submitButton = form.querySelector('button[type="submit"]')
+    if (submitButton?.disabled) {
+      return
+    }
+
+    const data = new FormData(event.currentTarget)
+    const values = getValueMap(data)
+    const payload = {
+      to: to || email,
+      subject: subject || 'Interior design enquiry',
+      replyTo: values.email || '',
+      formName: title || 'Contact form',
+      fields: values
+    }
+
+    const originalLabel = submitButton?.textContent
+
+    try {
+      if (submitButton) {
+        submitButton.disabled = true
+        submitButton.textContent = submittingLabel
+      }
+
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+
+      const result = await response.json().catch(() => ({}))
+      if (!response.ok) {
+        throw new Error(result.message || 'Unable to send enquiry')
+      }
+
+      form.reset()
+      globalThis.alert(successMessage)
+    } catch (error) {
+      globalThis.alert(error.message || errorMessage)
+    } finally {
+      if (submitButton) {
+        submitButton.disabled = false
+        submitButton.textContent = originalLabel || submitLabel
+      }
+    }
+  }
+
+  return h('section', { ...props, className: 'bg-bga text-txa rounded-2xl p-6 space-y-5' },
+    title && h(Heading, { _level: 2, _size: '6' }, title),
+    text && h(RichText, text),
+    h(Form, { onSubmit, 'aria-label': title ?? 'Contact form' },
+      h('div', { className: 'grid gap-4' },
+        ...resolvedFields.map(field => {
+          if (field.type === 'hidden') {
+            return h(Input, {
+              type: 'hidden',
+              name: field.name,
+              value: field.value ?? ''
+            })
+          }
+
+          return h('div', { className: 'grid gap-2' },
+            h('label', { for: ids[field.name], className: 'text-sm font-bold' }, field.label || field.name),
+            h(Input, {
+              id: ids[field.name],
+              name: field.name,
+              type: field.type,
+              required: field.required,
+              placeholder: field.placeholder,
+              value: field.value
+            })
+          )
+        }),
+        h('div', { className: 'flex flex-wrap gap-3 items-center' },
+          h(Button, { _model: { name: submitLabel }, type: 'submit' }),
+        )
+      )
+    )
+  )
+}

package/src/main/organisms/container/ab-test.js

@@ -0,0 +1,47 @@
+import { useLayoutEffect } from 'preact/hooks'
+import { ValidationError } from '#acinguiux-preact/main/routing/error-handler.js'
+import h from '#acinguiux-preact/main/shared/h.js'
+import usePersistentState from '#acinguiux-preact/main/shared/use-persistent-state.js'
+
+// 100 days in milliseconds.
+const EXPERIMENT_RETENTION = 8_640_000_000
+const EXPERIMENTS_KEY = 'experiments'
+
+// Randomly show one of the children.
+export function ABTest ({ _model, children, ...props }) {
+  const { title } = _model
+  if (!title) {
+    throw new ValidationError()
+  }
+
+  const [experiments, setExperiments] = usePersistentState(EXPERIMENTS_KEY, {})
+
+  useLayoutEffect(() => {
+    setExperiments(data => {
+      // Clean expired experiments.
+      for (const key in data) {
+        if (new Date(data[key].date).getTime() + EXPERIMENT_RETENTION < Date.now()) {
+          delete data[key]
+        }
+      }
+
+      // Initialize new experiment.
+      data[title] ??= {
+        // In this case, Math.random() is appropriate and safe as it not relevant for security
+        // eslint-disable-next-line sonarjs/pseudo-random
+        index: Math.floor(Math.random() * (children?.length ?? 0)),
+        date: new Date().toISOString()
+      }
+
+      return data
+    })
+  }, [title])
+
+  const experiment = experiments[title]
+  return experiment && h('div', {
+    ...props,
+    'data-experiment': `${title} | ${experiment.index + 1}`,
+    className: 'h-full',
+    children: children[experiment.index]
+  })
+}

package/src/main/organisms/container/default.js

@@ -0,0 +1,6 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+export function Default (props) {
+  return h(Grid, { ...props, _gap: true, _color: undefined })
+}

package/src/main/organisms/container/filtered-section.js

@@ -0,0 +1,293 @@
+import { Button } from '#acinguiux-preact/main/atoms/button.js'
+import { Input } from '#acinguiux-preact/main/atoms/input.js'
+import { Link } from '#acinguiux-preact/main/atoms/link.js'
+import getId from '#acinguiux-preact/main/shared/get-id.js'
+import h from '#acinguiux-preact/main/shared/h.js'
+import t from '#acinguiux-preact/main/shared/t.js'
+import { useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { Section } from './section.js'
+
+const LOAD_MORE_LIMIT = 12
+const SEARCH_DEBOUNCE = 300
+const SEARCH_PARAM = 'q'
+
+export function FilteredSection (props) {
+  return h(SearchableSection, { ...props, _hideSearch: true })
+}
+
+export function SearchableSection ({ _model, _hideSearch, _wrap, children = [], ...props }) {
+  const { tags } = _model
+  const [items, allLabels] = useMemo(() => getItemsAndLabels(children, _wrap), [children, _wrap])
+
+  // Each filter is an object: { name, values: [] }
+  const allFilters = useMemo(() => tags
+    ?.filter?.(tag => allLabels[tag.name])
+    ?.map?.(({ name }) => ({
+      name,
+      values: [...allLabels[name]].toSorted((a, b) => {
+        if (isNumber(a) && isNumber(b)) {
+          return Number.parseFloat(a) - Number.parseFloat(b)
+        }
+        return a.localeCompare(b)
+      })
+    })),
+  [tags])
+
+  const [limit, setLimit] = useState(LOAD_MORE_LIMIT)
+  const [selection, setSelection] = useState({})
+  const [search, setSearch] = useState(null)
+  const [id] = useState(() => getId())
+
+  const updateFiltersAndSearchFromUrl = () => {
+    const params = new URLSearchParams(location.hash.substring(1))
+    const selected = {}
+
+    for (const [name, value] of params) {
+      if (allLabels[name] && value) {
+        selected[name] = value
+      }
+    }
+
+    setSelection(selected)
+    setSearch(params.get(SEARCH_PARAM))
+    setLimit(LOAD_MORE_LIMIT)
+  }
+
+  useLayoutEffect(() => {
+    updateFiltersAndSearchFromUrl()
+    globalThis.addEventListener('hashchange', updateFiltersAndSearchFromUrl)
+    return () => globalThis.removeEventListener('hashchange', updateFiltersAndSearchFromUrl)
+  }, [])
+
+  // Get filtered and limited children.
+  const [filteredItems, limitedItems] = useMemo(() => {
+    const fc = filterItems(selection, search, items)
+    const lc = fc.slice(0, limit)
+    return [fc, lc]
+  }, [items, selection, search, limit])
+
+  // Get filter instance.
+  const filterInstance = useMemo(() => h(Filters, { _hideSearch, allFilters, selection, search, items, id }),
+    [allFilters, selection, search, items])
+
+  //
+  // Resolver section combined children.
+  //
+
+  const combinedWrap = []
+  const combinedChildren = []
+
+  // Add filters.
+  if (filterInstance) {
+    combinedWrap.push({ colspan: 12, key: 'filters' })
+    combinedChildren.push(filterInstance)
+  }
+
+  // Add items.
+  for (const item of limitedItems) {
+    combinedWrap.push(item.wrap)
+    combinedChildren.push(h('div', { className: 'animate-fade h-full' }, item.child))
+  }
+
+  // Load more button.
+  if (filteredItems.length > limit) {
+    combinedWrap.push({ colspan: 12, key: 'load-more' })
+    combinedChildren.push(h('div', { className: 'flex justify-center animate-fade' },
+      h(Button, {
+        'aria-controls': id,
+        onClick: () => {
+          setLimit(prev => prev + LOAD_MORE_LIMIT)
+        },
+        _model: { name: t('Load more') }
+      })
+    ))
+  }
+
+  // Add no results message.
+  if (filteredItems.length === 0) {
+    combinedWrap.push({ colspan: 12, key: 'no-results' })
+    combinedChildren.push(h('p', { className: 'animate-fade' }, t('No results found.')))
+  }
+
+  return h(Section, {
+    ...props,
+    id,
+    ariaLive: 'polite',
+    _model: { ..._model, tags: null },
+    _wrap: combinedWrap,
+    children: combinedChildren
+  })
+}
+
+function setFilterRoute (params) {
+  const paramHash = params ? `#${params.toString()}` : ''
+  globalThis.history.replaceState({}, '', `${globalThis.location.href.split('#')[0]}${paramHash}`)
+  globalThis.dispatchEvent(new globalThis.HashChangeEvent('hashchange'))
+}
+
+function Filters ({ _hideSearch, allFilters, selection, search, items, id }) {
+  const searchTimeoutRef = useRef(null)
+
+  if (Object.keys(allFilters).length === 0 && _hideSearch) {
+    return null
+  }
+
+  return h('div', { className: 'space-y-5' },
+    h('div', { className: 'flex gap-5 sm:flex-col' },
+      _hideSearch || h('label', { className: 'flex-1 block' },
+        h('span', { className: 'font-bold' }, t('Search')),
+        h(Input, {
+          'aria-controls': id,
+          type: 'search',
+          name: t('Search'),
+          value: search || '',
+          onInput: event => {
+            // Avoid flooding updates when user is typing.
+            clearTimeout(searchTimeoutRef.current)
+            searchTimeoutRef.current = setTimeout(() => {
+              const query = event.target.value
+              const params = new URLSearchParams(location.hash.substring(1))
+              query ? params.set(SEARCH_PARAM, query) : params.delete(SEARCH_PARAM)
+              setFilterRoute(params)
+            }, SEARCH_DEBOUNCE)
+          }
+        })
+      ),
+      allFilters.map(({ name, values }) => h(Filter, {
+        id,
+        name,
+        values,
+        selectedValue: selection[name],
+        selection,
+        search,
+        items,
+        onChange: value => {
+          const params = new URLSearchParams(location.hash.substring(1))
+          value ? params.set(name, value) : params.delete(name)
+          setFilterRoute(params)
+        }
+      }))
+    ),
+    // Reset filters.
+    h(Link, {
+      'aria-controls': id,
+      _variant: 'underline',
+      _model: {
+        name: t('Reset filters'),
+        value: '#'
+      },
+      role: 'button',
+      onClick: e => {
+        e.preventDefault()
+        // Route to avoid scroll to top.
+        setFilterRoute()
+      }
+    })
+  )
+}
+
+function Filter ({ name, values, selectedValue, selection, search, items, onChange, id }) {
+  // Remove current selection from the list to calculate counts.
+  const adjustedSelection = { ...selection }
+  delete adjustedSelection[name]
+
+  // Get counts for the current filter based on partially filtered children
+  const filteredItems = filterItems(adjustedSelection, search, items)
+  const count = getCountForFilter(name, filteredItems)
+
+  return h('label', { className: 'block flex-1' },
+    h('span', { className: 'font-bold' }, name),
+    h(Input, {
+      'aria-controls': id,
+      name,
+      type: 'select',
+      onChange: event => onChange(event.target.value),
+      children: [
+        h('option'),
+        values.map(value => h('option', { value, selected: value === selectedValue },
+          `${value} (${count[value] ?? 0})`
+        ))
+      ]
+    })
+  )
+}
+
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+
+function getItemsAndLabels (children, _wrap) {
+  const items = []
+  const labels = {}
+
+  for (const [ii, child] of children.entries()) {
+    const model = child.props._model
+    const wrap = { colspan: _wrap[ii]?.colspan }
+    items.push({ child, model, wrap })
+
+    for (const tag of model.tags) {
+      labels[tag.name] ||= new Set()
+      labels[tag.name].add(tag.value)
+    }
+  }
+
+  return [items, labels]
+}
+
+function filterItems (selection, search, items) {
+  const itemMatchesSelection = item => Object.entries(selection).every(([name, value]) => {
+    const tags = item.model.tags
+    return tags.some(tag => tag.name === name && tag.value === value)
+  })
+
+  // Skip filtering if no criteria.
+  if (Object.keys(selection).length === 0 && !search) {
+    return items
+  }
+
+  const filteredItems = []
+
+  for (const item of items) {
+    // Match search.
+    if (search) {
+      const searchIndex = item.model.tags.map(tag => tag.value.toLowerCase())
+
+      const title = item.model.title?.toLowerCase()
+      title && searchIndex.push(title)
+      const text = item.model.text?.toLowerCase()
+      text && searchIndex.push(text)
+
+      if (!searchIndex.some(s => s.includes(search.trim().toLowerCase()))) {
+        continue
+      }
+    }
+
+    // Match selection.
+    if (!itemMatchesSelection(item)) {
+      continue
+    }
+
+    filteredItems.push(item)
+  }
+
+  return filteredItems
+}
+
+function getCountForFilter (name, items) {
+  const count = {}
+
+  for (const item of items) {
+    for (const tag of item.model.tags) {
+      if (name === tag.name) {
+        count[tag.value] ||= 0
+        count[tag.value] += 1
+      }
+    }
+  }
+
+  return count
+}
+
+function isNumber (value) {
+  return !Number.isNaN(Number.parseFloat(value))
+}

package/src/main/organisms/container/footer.js

@@ -0,0 +1,12 @@
+import h from '#acinguiux-preact/main/shared/h.js'
+import { Grid } from './grid.js'
+
+export function Footer (props) {
+  return h('div', {
+    ...props,
+    className: 'text-txa bg-bga border-txa/20 border-t pt-12 pb-12',
+    children: h('div', { className: 'max-w-page m-auto px-3' },
+      h(Grid, { ...props, _tag: 'footer' })
+    )
+  })
+}