acinguiux-preact-components 0.0.1

package/src/main/atoms/form.js

@@ -0,0 +1,30 @@
+import h from '../shared/h.js'
+import useLink from '../shared/use-link.js'
+import bubbleEvent from '../shared/bubble-event.js'
+
+export function Form ({ action, onSubmit, ...props }) {
+  const { href, onClick } = useLink({ href: action })
+
+  return h('form', {
+    ...props,
+    className: undefined, // Suppress.
+    action: href,
+    onSubmit: event => {
+      if (!event.composed && !onSubmit) {
+        // Include data in the action URL.
+        const { currentTarget: el } = event
+        const data = new FormData(el)
+        el.setAttribute('action', href + new URLSearchParams(data).toString())
+
+        // Navigation handler.
+        onClick?.(event)
+      }
+
+      bubbleEvent(event)
+
+      if (!event.composed && onSubmit) {
+        onSubmit(event)
+      }
+    }
+  })
+}

package/src/main/atoms/heading.js

@@ -0,0 +1,17 @@
+import h from '../shared/h.js'
+import idFromString from '../shared/id-from-string.js'
+
+const SIZES = ['4xl', '3xl', '2xl', 'xl', 'lg', 'base']
+
+export function Heading ({ _level = 1, _size, _align, id, children, ...props }) {
+  const index = _size || _level
+  const size = SIZES[index - 1]
+  const alignClass = _align ? `text-${_align}` : ''
+
+  return h(`h${_level}`, {
+    ...props,
+    children,
+    className: `font-custom font-bold text-txc text-${size} ${alignClass}`,
+    id: id || idFromString(children)
+  })
+}

package/src/main/atoms/icon.js

@@ -0,0 +1,24 @@
+import h from '../shared/h.js'
+import { SVG } from './svg.js'
+
+export function Icon ({ _size, _rtlFlip, children, ...props }) {
+  const size = { xs: '12', sm: '16' }[_size] ?? 24
+  const isRtl = document.documentElement.dir === 'rtl'
+  const transform = isRtl && _rtlFlip ? 'transform: scaleX(-1)' : ''
+
+  // Set size on the container. This prevents content shift.
+  return h('div', {
+    ...props,
+    className: undefined, // Suppress.
+    'aria-hidden': true,
+    style: `width: calc(var(--font-scale) * ${size}px); height: calc(var(--font-scale) * ${size}px);`,
+    children: h(SVG, {
+      _tall: true,
+      _model: { src: children },
+      _style: id => `
+        ${id} path, ${id} polygon { fill: currentColor; }
+        ${id} { ${transform} }
+      `
+    })
+  })
+}

package/src/main/atoms/img.js

@@ -0,0 +1,131 @@
+import { useEffect, useLayoutEffect, useRef } from 'preact/hooks'
+import getSizeClass from '../shared/get-size-class.js'
+import h from '../shared/h.js'
+
+const MINIMUM_SUPPORTED_WIDTH = 48
+const MAXIMUM_SUPPORTED_WIDTH = 3840
+const DEBOUNCE = 100
+const MAXIMUM_RESCALE_FACTOR = 1.3
+
+function * generateWidths (factor) {
+  for (let size = MINIMUM_SUPPORTED_WIDTH; size <= MAXIMUM_SUPPORTED_WIDTH; size *= factor) {
+    yield Math.round(size)
+  }
+}
+
+// Maximum linear upscale is 130%, only generate widths that produce scaling factor of 1.3 or less
+const WIDTHS = [...generateWidths(MAXIMUM_RESCALE_FACTOR)].sort((a, b) => b - a)
+
+// Global resize handler
+const registeredImages = new Set()
+
+let resizeId = null
+// The resize handler is debounced to avoid excessive processing during window resizing.
+const handleResize = () => {
+  clearTimeout(resizeId)
+  resizeId = setTimeout(() => {
+    for (const img of registeredImages) {
+      // Prune any images that may no longer be in the DOM
+      if (!img.isConnected) {
+        registeredImages.delete(img)
+        continue
+      }
+
+      // Refresh image size parameters
+      refreshImage(img)
+    }
+  }, DEBOUNCE)
+}
+
+// Register the resize handler
+globalThis.addEventListener('resize', handleResize)
+
+export function Img ({ _model, _fit = 'cover', _tall, role, ...props }) {
+  const { src, alt = '', width, height } = _model
+  if (!src) {
+    return null
+  }
+
+  const sizeClass = getSizeClass(_tall)
+  const ref = useRef(null)
+
+  // Set the resize handler once for the current image on mount.
+  useEffect(() => {
+    const img = ref.current
+    if (!img) {
+      // For consistency, explicitly return undefined here.
+      return undefined
+    }
+
+    registeredImages.add(img)
+    return () => {
+      registeredImages.delete(img)
+    }
+  }, [])
+
+  // Set eager loading when the image is in the viewport on mount.
+  useLayoutEffect(() => {
+    const img = ref.current
+    if (!img) {
+      return
+    }
+
+    // Ensure the image size parameters are correctly set.
+    refreshImage(img)
+
+    // Check if any part of the image is part of the initial viewport (even partially).
+    const rect = img.getBoundingClientRect()
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth
+    const isVisible = rect.bottom >= 0 && rect.right >= 0 && rect.top <= viewportHeight && rect.left <= viewportWidth
+
+    // Ensure that the image is loaded eagerly if it is in the initial viewport. All those images are part of the Largest Contentful Paint.
+    if (isVisible) {
+      img.loading = 'eager'
+      img.fetchPriority = 'high'
+    }
+  }, []) // Run once only on mount
+
+  return h('img', {
+    ...props,
+    className: `cq-dd-image block object-${_fit} ${sizeClass}`,
+    ref,
+    src,
+    loading: 'lazy',
+    alt: role === 'presentation' ? '' : alt,
+    role: alt ? role : 'presentation',
+    width,
+    height
+  })
+}
+
+function refreshImage (img) {
+  const src = img.getAttribute('src')
+  const baseSrc = URL.parse(src, globalThis.location.href)
+  if (!baseSrc) {
+    return // Invalid URL
+  }
+
+  if (baseSrc.protocol === 'data:') {
+    return // Do not refresh data URLs
+  }
+
+  const params = baseSrc.searchParams
+
+  // Set the current pixel density of the device
+  params.set('imdensity', window.devicePixelRatio || 1)
+
+  // Set new width if larger than the current.
+  const currentWidth = Number.parseInt(params.get('imwidth') || '0', 10)
+  const newWidth = WIDTHS.find(w => w <= img.width) || WIDTHS.at(-1)
+  if (newWidth > currentWidth) {
+    params.set('imwidth', newWidth)
+  }
+
+  // Set image policy.
+  const ratio = img.dataset.ratio ? `-${img.dataset.ratio}` : ''
+  params.set('impolicy', `acinguiux-preact-image${ratio}`)
+
+  // Update image source.
+  img.src = baseSrc.toString()
+}

package/src/main/atoms/input.js

@@ -0,0 +1,55 @@
+import h from '../shared/h.js'
+import bubbleEvent from '../shared/bubble-event.js'
+
+export function Input ({ type, disabled, ...props }) {
+  const disabledClass = disabled ? 'bg-txa/10' : 'pal-brand1 bg-bga'
+  const commonClass = `block rounded-lg text-txa border-txa/60 border w-full p-3 ${disabledClass}`
+  const style = 'box-shadow: inset 1px 1px 2px 2px hsla(var(--color-txa), 0.1)'
+  const onInvalid = bubbleEvent
+
+  switch (type) {
+    case 'checkbox':
+    case 'radio':
+      return h('input', { ...props, onInvalid, type, disabled, className: 'appearance-auto' })
+    case 'file':
+      return h('input', {
+        ...props,
+        type,
+        disabled,
+        className: `block cursor-pointer ${disabled ? 'grayscale' : ''}`,
+        onInvalid,
+        _style: id => `
+          ${id}::file-selector-button {
+            border-radius: 6px;
+            padding: 4px 12px;
+            border-width: 1px;
+            border-style: solid;
+            background-color: hsl(var(--color-bgb));
+            border-color: hsl(var(--color-bgb));
+            color: hsl(var(--color-txb));
+            font-weight: bold;
+            transition-property: background-color, border-color, color;
+            transition-duration: var(--anim-time);
+            height: 32px;
+            cursor: pointer;
+          }
+          ${id}:not([disabled])::file-selector-button:hover {
+            background-color: hsl(var(--color-txb));
+            color: hsl(var(--color-bgb));
+          }
+        `
+      })
+    case 'textarea':
+      return h('textarea', {
+        ...props,
+        disabled,
+        onInvalid,
+        style: `${style}; resize: vertical`,
+        className: `${commonClass} h-36`
+      })
+    case 'select':
+      return h('select', { ...props, onInvalid, disabled, style, className: `${commonClass} h-12` })
+    default:
+      return h('input', { ...props, type, onInvalid, disabled, style, className: `${commonClass} h-12` })
+  }
+}

package/src/main/atoms/link-text.js

@@ -0,0 +1,21 @@
+import h from '../shared/h.js'
+import { TOGGLE_NEWWINDOW } from '../shared/icons.js'
+import useLink from '../shared/use-link.js'
+import { Icon } from './icon.js'
+
+export function LinkText ({ _model, target: forcedTarget, ...props }) {
+  const { name, value } = _model
+  const { text, target } = useLink({ href: value, text: name, target: forcedTarget })
+  const newWindow = target === '_blank'
+
+  if (!newWindow) {
+    return text?.length > 0 ? h('span', text) : null
+  }
+
+  return h('span', { ...props, className: 'space-x-1' },
+    text?.length > 0 ? h('span', text) : null,
+    h('span', { className: 'inline-block align-top' },
+      h(Icon, { _size: 'sm' }, TOGGLE_NEWWINDOW)
+    )
+  )
+}

package/src/main/atoms/link.js

@@ -0,0 +1,60 @@
+import { useMemo } from 'preact/hooks'
+import h from '../shared/h.js'
+import useLink from '../shared/use-link.js'
+import { Icon } from './icon.js'
+import { LinkText } from './link-text.js'
+
+const VARIANTS_CLICKABLE = {
+  default: 'clickable cursor-pointer',
+  simple: 'clickable cursor-pointer hover:underline',
+  underline: 'clickable cursor-pointer underline',
+  bold: 'clickable cursor-pointer hover:underline font-bold',
+  full: 'clickable cursor-pointer font-bold underline',
+  tag: 'clickable cursor-pointer transition px-2 py-1 text-sm bg-txa/10 hover:text-bga hover:bg-txa/100 rounded-sm',
+}
+
+const VARIANTS_NON_CLICKABLE = {
+  bold: 'font-bold',
+  full: 'font-bold',
+  tag: 'transition px-2 py-1 text-sm bg-txa/10 rounded-sm',
+}
+
+export function Link ({ _model, _variant, target: forcedTarget, className = '', children, ...props }) {
+  const { name, value, icon } = _model
+  const { href, onClick, target } = useLink({ href: value, text: name, target: forcedTarget })
+  const isClickable = value || props.onClick
+  const variant = _variant || 'default'
+  const variantMap = isClickable ? VARIANTS_CLICKABLE : VARIANTS_NON_CLICKABLE
+
+  const isContainer = useMemo(() => {
+    const arr = (Array.isArray(children) ? children : [children]).filter(Boolean) // Normalize to array.
+    return arr.some(c => typeof c !== 'string')
+  }, [children])
+
+  const linkProps = {
+    onClick,
+    ...props,
+    target,
+    rel: target === '_blank' ? 'noopener' : undefined,
+    className: [variantMap[variant], className].map(x => x ?? '').join(' ').trim() || undefined,
+    href
+  }
+
+  // Container link.
+  if (isContainer) {
+    return h('a', linkProps, children)
+  }
+
+  // Add classes for icon alignment.
+  if (icon) {
+    linkProps.className += ' space-x-2 inline-flex items-center'
+  }
+
+  // Output regular link.
+  return h('a', linkProps,
+    icon && h('span', { className: 'grow-0' },
+      h(Icon, icon)
+    ),
+    h(LinkText, { _model, target })
+  )
+}

package/src/main/atoms/list.js

@@ -0,0 +1,12 @@
+import h from '../shared/h.js'
+
+export function List ({ _ordered, ...props }) {
+  const tag = _ordered ? 'ol' : 'ul'
+  const prefix = _ordered ? 'list-decimal' : 'list-disc'
+  return h(tag, {
+    ...props,
+    // Ensure equal space for nested lists.
+    _style: id => `li > ${id} { margin-top: 8px }`,
+    className: `ps-6 space-y-2 ${prefix}`
+  })
+}

package/src/main/atoms/logo.js

@@ -0,0 +1,9 @@
+import h from '../shared/h.js'
+
+export function Logo (props) {
+  return h('div', {
+    ...props,
+    className: 'bg-no-repeat bg-center bg-contain h-16',
+    style: 'background-image: var(--logo); width: calc(var(--logo-ratio) * 64px)'
+  })
+}

package/src/main/atoms/menu.js

@@ -0,0 +1,10 @@
+import h from '../shared/h.js'
+
+export function Menu (props) {
+  return h('div', {
+    style: 'top: calc(100% + 10px); inset-inline-start: -5px', // Align text.
+    ...props,
+    // Use z-10 for sticky elements.
+    className: 'absolute bg-bga text-txa z-20 overflow-x-hidden overflow-y-auto shadow animate-expand rounded-lg w-72',
+  })
+}

package/src/main/atoms/message.js

@@ -0,0 +1,5 @@
+import h from '../shared/h.js'
+
+export function Message ({ children, ...props }) {
+  return h('div', { ...props, className: 'px-6 py-4 text-sm pal-system-solid text-txa bg-bga w-full', children })
+}

package/src/main/atoms/nav-link.js

@@ -0,0 +1,49 @@
+import h from '../shared/h.js'
+import { ARROW_DOWN, ARROW_UP } from '../shared/icons.js'
+import { Icon } from './icon.js'
+import { LinkText } from './link-text.js'
+import { Link } from './link.js'
+
+const SIZE_CLASSES = { md: 8, lg: 12 }
+const SELECTION_CLASSES = {
+  default: 'p-2',
+  top: 'border-t-4 px-1 pb-2 pt-1',
+  bottom: 'border-b-4 px-1 pb-1 pt-2',
+  right: 'border-e-4 ps-2 pe-1 py-1'
+}
+
+export function NavLink ({ _model, _level, _expanded, _textless, _size, _bold, _highlighted, _selection, ...props }) {
+  const { name, value, icon, selected } = _model
+
+  const size = SIZE_CLASSES[_size ?? 'md']
+  const sizeClass = _textless ? `min-h-${size} min-w-${size}` : `w-full min-h-${size}`
+  const highlightClass = _highlighted ? 'bg-txa/10' : ''
+  const indentClass = `ps-${2 + (_level ?? 0) * 4}`
+  const boldClass = _bold ? 'font-bold' : ''
+
+  return h('div', {
+    className: `h-full transition ${selected ? 'border-bgb/100' : 'border-bgb/0'} ${SELECTION_CLASSES[_selection ?? 'default']}`,
+    children: h(Link, {
+      ...props,
+      title: _textless ? name : undefined,
+      className: 'h-full',
+      _model: { name, icon, value: value ?? '#' }, // Make sure it's tabbable.
+      children: h('div', {
+        className: `h-full transition hover:bg-txa/10 pe-2 py-1 flex space-x-2 items-center justify-center rounded overflow-hidden ${sizeClass} ${highlightClass} ${indentClass} ${boldClass}`,
+        children: [
+          // Custom icon.
+          icon && h('div', { className: 'flex items-center' },
+            h(Icon, icon)
+          ),
+          _textless || h('div', { className: 'grow' },
+            h(LinkText, { _model })
+          ),
+          // Expand and collapse arrow.
+          _expanded !== undefined && h('div', { className: 'flex items-center' },
+            h(Icon, { _size: 'xs' }, _expanded ? ARROW_UP : ARROW_DOWN)
+          )
+        ]
+      })
+    })
+  })
+}

package/src/main/atoms/popup.js

@@ -0,0 +1,47 @@
+import { useMemo, useRef, useLayoutEffect } from 'preact/hooks'
+import h from '../shared/h.js'
+
+const PADDINGS = { full: 3, center: 6, toast: 9 }
+const LAYOUTS = {
+  // Follow the page scroll behaviour for full width popups.
+  full: 'm-0 w-full h-full overflow-y-scroll',
+  toast: 'ml-0 mr-0 mb-0 mt-auto max-h-4/5 w-full overflow-y-scroll',
+  center: 'm-auto rounded-xl w-128 h-fit'
+}
+
+export function Popup ({ _show, _layout = 'toast', _modal = true, children, ...props }) {
+  const classes = LAYOUTS[_layout]
+  const popupRef = useRef(null)
+  const scrollbarWidth = useMemo(() => window.innerWidth - document.body.clientWidth, [])
+
+  useLayoutEffect(() => {
+    if (!popupRef?.current) {
+      return
+    }
+
+    if (!_show) {
+      popupRef?.current?.close?.()
+      return
+    }
+
+    _modal ? popupRef?.current?.showModal?.() : popupRef?.current?.show?.()
+  }, [_show, _modal, children])
+
+  return [
+    h('dialog', {
+      ...props,
+      ref: popupRef,
+      className: `z-30 overscroll-none scrollbar-stable animate-toast shadow-lg bg-bga text-txa focus-visible:outline-none ${classes}`,
+      // Limit max size on center popups to leave some space around when the viewport is too small.
+      style: _layout === 'center' ? 'max-width: calc(100dvw - 12px); max-height: calc(100dvh - 12px)' : null,
+      // Overlay style.
+      _style: id => `${id}::backdrop { background: hsla(0, 0%, 0%, 0.5); backdrop-filter: blur(4px) }`,
+      children: h('div', {
+        className: `max-w-page m-auto space-y-5 w-full h-full p-${PADDINGS[_layout]}`,
+        // Compensate for scrollbar in center layout.
+        style: _layout === 'center' ? `padding-inline-end: ${24 - scrollbarWidth}px` : null,
+        children
+      })
+    })
+  ]
+}

package/src/main/atoms/rich-text.js

@@ -0,0 +1,128 @@
+/* global DOMParser, Node */
+import h from '../shared/h.js'
+import { Link } from '../atoms/link.js'
+import { Heading } from '../atoms/heading.js'
+import { Table } from '../atoms/table.js'
+import { List } from '../atoms/list.js'
+import { Img } from '../atoms/img.js'
+
+// Rich text provides basic typography rules for HTML content.
+export function RichText ({ children: text, ...props }) {
+  if (text) {
+    const dp = new DOMParser()
+    const doc = dp.parseFromString(text, 'text/html')
+    const parsedChildren = [...doc.body.childNodes].map(child => getNode(child))
+
+    return h('div', {
+      ...props,
+      className: 'space-y-4',
+      _style: id => `
+        ${id} :is(h1, h2, h3, h4, h5, h6):not(:first-child) { margin-top: 24px }
+        ${id} pre { background-color: hsla(var(--color-txa), 0.05) }
+        ${id} pre code { background: none; margin: 0; padding: 0; }
+        ${id} code { background-color: hsla(var(--color-txa), 0.05) }
+        ${id} details[open] > summary::after { rotate: 270deg }
+        ${id} details[open] > *:not(:last-child) { margin-bottom: 8px }
+        ${id} details > summary::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          content: '❯';
+          transition: var(--anim-time);
+          rotate: 90deg;
+          width: 12px;
+          font-weight: normal;
+          margin-right: 8px;
+        }
+      `,
+      children: parsedChildren
+    })
+  }
+
+  return null
+}
+
+function getNode (parent) {
+  if (parent.nodeType === Node.ELEMENT_NODE) {
+    const children = [...parent.childNodes].map(child => getNode(child))
+    const tag = parent.tagName.toLowerCase()
+
+    // Pass all attributes except style and class.
+    const attrs = parent.getAttributeNames().reduce((obj, name) => {
+      if (!['style', 'class'].includes(name)) {
+        obj[name] = parent.getAttribute(name)
+      }
+
+      return obj
+    }, { id: parent.id || undefined })
+
+    const dispatcher = [{
+      tags: ['a'],
+      handler: () => {
+        const _model = { value: parent.getAttribute('href') }
+
+        // Text links.
+        if (children.length === 1 && typeof children[0] === 'string') {
+          _model.name = parent.text
+        }
+
+        return h(Link, {
+          ...attrs,
+          name: parent.name || undefined,
+          target: parent.target || undefined,
+          children,
+          _model,
+          _variant: 'underline'
+        })
+      }
+    }, {
+      tags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      handler: () => h(Heading, { _level: tag.substr(1), ...attrs }, children)
+    }, {
+      tags: ['table'],
+      handler: () => h(Table, attrs, h('tbody', {}, children))
+    }, {
+      tags: ['thead', 'tbody'],
+      handler: () => children
+    }, {
+      tags: ['ol', 'ul'],
+      handler: () => h(List, { _ordered: tag === 'ol' }, children)
+    }, {
+      tags: ['hr'],
+      handler: () => h('hr', { className: 'w-6 h-1 bg-bgb' }, children)
+    }, {
+      tags: ['img'],
+      handler: () => h('div', { className: 'rounded-lg overflow-hidden' },
+        h(Img, { _model: { src: parent.src, alt: parent.alt } })
+      )
+    }, {
+      tags: ['pre'],
+      handler: () => h('pre', { className: 'p-2 rounded-lg' }, children)
+    }, {
+      tags: ['code'],
+      handler: () => h('code', { className: 'inline-block rounded-sm font-mono text-sm px-1 py-px m-px break-all whitespace-pre-wrap' }, children)
+    }, {
+      tags: ['details'],
+      handler: () => h('details', { className: 'rounded-md border border-txa/20 p-2', open: parent.open }, children)
+    }, {
+      tags: ['summary'],
+      handler: () => h('summary', { className: 'clickable rounded-md py-2 ps-2 pe-6 -m-2 relative block pe-7 cursor-pointer font-bold' }, children)
+    }]
+
+    // Use predefined components if available.
+    const route = dispatcher.find(item => item.tags.includes(tag))
+    if (route) {
+      return route.handler()
+    }
+
+    // Everything else.
+    return h(tag, attrs, children)
+  }
+
+  // Text nodes.
+  return parent.data
+}