acinguiux-preact-components 0.0.1

package/src/main/organisms/search-result.js

@@ -0,0 +1,53 @@
+import { Box } from '../atoms/box.js'
+import { Heading } from '../atoms/heading.js'
+import { Icon } from '../atoms/icon.js'
+import { Link } from '../atoms/link.js'
+import { RichText } from '../atoms/rich-text.js'
+import h from '../shared/h.js'
+import idFromString from '../shared/id-from-string.js'
+import { ARROW_NEXT } from '../shared/icons.js'
+
+function LinkTrail ({ _model }) {
+  const { links } = _model
+
+  // Get a list of <LI> elements.
+  const lis = []
+  for (let ii = 0; ii < links.length; ++ii) {
+    const { [ii]: link } = links
+    const isLast = ii === links.length - 1
+
+    // Item
+    lis.push(h('li',
+      h('span',
+        h(Link, { _variant: 'simple', _model: link })
+      )
+    ))
+
+    // >
+    isLast || lis.push(
+      h('li', { 'aria-hidden': true },
+        h(Icon, { _size: 'xs', _rtlFlip: true }, ARROW_NEXT)
+      )
+    )
+  }
+
+  return h('div',
+    h('ol', {
+      className: 'flex sm:flex-wrap md:flex-wrap items-center p-0 space-x-2',
+      children: lis
+    })
+  )
+}
+
+export function SearchResult ({ _model, ...props }) {
+  const { links, text } = _model
+  const lastBreadcrumbLink = links?.at(-1)
+
+  return h(Box, { ...props, className: 'bg-bga text-txa rounded-2xl' },
+    h(Heading, { _level: 3, id: idFromString(lastBreadcrumbLink.name) },
+      h(Link, { _model: { ...lastBreadcrumbLink, icon: null }, _variant: 'full' })
+    ),
+    h(LinkTrail, { _model: { links: _model.links.slice(0, -1) } }),
+    h(RichText, text)
+  )
+}

package/src/main/organisms/slider.js

@@ -0,0 +1,26 @@
+import { Scroller } from '../atoms/scroller.js'
+import h from '../shared/h.js'
+
+const VARIANTS = {
+  xl: [1.25, 1.25, 1.25]
+}
+
+export function Slider ({ _model, _variant, children, ...props }) {
+  const autoplay = props.autoplay ?? _model?.autoplay ?? false
+  const infinite = props.infinite ?? _model?.infinite ?? false
+  const interval = props.interval ?? _model?.interval ?? 3500
+  const hideControls = props.hideControls ?? _model?.hideControls ?? false
+
+  return h('div', {
+    ...props,
+    className: 'w-full',
+    children: h(Scroller, {
+      _count: VARIANTS[_variant],
+      _autoplay: autoplay,
+      _infinite: infinite,
+      _interval: interval,
+      _hideControls: hideControls,
+      children
+    })
+  })
+}

package/src/main/organisms/standalone-asset.js

@@ -0,0 +1,22 @@
+import { Heading } from '../atoms/heading.js'
+import { Asset } from '../molecules/asset.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function StandaloneAsset ({ _model, ...props }) {
+  const { asset, title } = _model
+  if (!asset.src) {
+    throw new ValidationError()
+  }
+
+  // StandaloneAsset should inherit parent colour.
+  return h('div', { ...props, _color: null, className: 'space-y-2' }, [
+    title && h(Heading, { _level: 3 }, title),
+    h('figure', { className: 'col-span-2 space-y-2' },
+      h('div', { className: 'rounded-2xl overflow-hidden' },
+        h(Asset, { _model })
+      ),
+      asset.caption && h('figcaption', asset.caption)
+    )
+  ])
+}

package/src/main/organisms/tabs.js

@@ -0,0 +1,277 @@
+/* global ResizeObserver, getComputedStyle */
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { Icon } from '../atoms/icon.js'
+import { Menu } from '../atoms/menu.js'
+import { NavLink } from '../atoms/nav-link.js'
+import { ValidationError } from '../routing/error-handler.js'
+import getId from '../shared/get-id.js'
+import h from '../shared/h.js'
+import { ARROW_BACK, ARROW_NEXT } from '../shared/icons.js'
+import t from '../shared/t.js'
+import { MEDIUM } from '../shared/twind.js'
+
+const SCROLL_TOLERANCE = 2
+const MOBILE_STYLE = 'overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap'
+
+export function Tabs ({ _model, _variant, _color, children, ...props }) {
+  // We cannot exit here on falsy model to avoid breaking rules of hooks.
+  const rawLinks = _model?.links || []
+  if (rawLinks.length === 0) {
+    throw new ValidationError()
+  }
+
+  const hasPanels = Boolean(children?.length)
+
+  // Generate ids for tabs and panels.
+  const ids = useMemo(() => ({
+    tabs: rawLinks.map(getId), // Needed for the compact variant regardless of panel presence.
+    panels: hasPanels && rawLinks.map(getId)
+  }), [])
+  // Configure links.
+  const tabPanelHashes = useMemo(() => hasPanels && rawLinks.map(link =>
+    link.name ? `tab-${hashFromString(link.name)}` : getId()), []
+  )
+  const links = useMemo(() => hasPanels
+    ? rawLinks.map((link, i) => ({ ...link, value: `#${tabPanelHashes[i]}` }))
+    : rawLinks)
+
+  const [selectedIndex] = useSelectedTab({ rawLinks, tabPanelHashes })
+
+  return h('div', { ...props, className: 'w-full relative', style: '--actual-bg-color: transparent' },
+    _variant === 'compact'
+      ? h(TabDropdown, { links, hasPanels, ids, selectedIndex })
+      : h(TabButtons, { links, hasPanels, ids, selectedIndex }),
+    hasPanels && h(TabPanels, { panels: children, ids, selectedIndex })
+  )
+}
+
+function getInheritedBgColor (element) {
+  const defaultColor = 'rgba(0, 0, 0, 0)'
+  if (element) {
+    const bgColor = getComputedStyle(element).backgroundColor
+    if (bgColor !== defaultColor) {
+      return bgColor
+    }
+
+    // Needs to work in Shadow DOM.
+    return getInheritedBgColor(element?.parentElement ?? element?.parentNode?.host)
+  }
+
+  return defaultColor
+}
+
+function hashFromString (text) {
+  return text?.trim().toLowerCase().replaceAll(/\s+/g, '-')
+}
+
+function TabButtons ({ links, hasPanels, ids, selectedIndex }) {
+  const ref = useRef(null)
+  const [state, setState] = useState({ left: false, right: false })
+
+  // Update left and right arrows based on the scroll.
+  const updateBlurs = el => {
+    setState({
+      left: el.scrollWidth > el.clientWidth && Math.abs(el.scrollLeft) > SCROLL_TOLERANCE,
+      right: el.scrollWidth > el.clientWidth && Math.abs(el.scrollLeft) < el.scrollWidth - el.clientWidth - SCROLL_TOLERANCE
+    })
+  }
+
+  useEffect(() => {
+    const outerContainer = ref?.current
+    if (!outerContainer) {
+      return
+    }
+
+    // Tabs do not support palettes.
+    // The left and right gradient must therefore use the actual background colour.
+    // Since there is no currentBackgroundColour variable (akin to currentColour), we need to get it via ref.
+    const bgColor = getInheritedBgColor(outerContainer)
+    outerContainer.style.setProperty('--actual-bg-color', bgColor)
+
+    // Update left and right arrows on resize.
+    const tabContainer = outerContainer.querySelector('[role="tablist"]')
+    const resizeObserver = new ResizeObserver(() => updateBlurs(tabContainer))
+    resizeObserver.observe(tabContainer)
+  }, [])
+
+  return h('div', {
+    className: `relative border-txa/20 border-b ${hasPanels ? 'mb-5' : ''}`,
+    ref,
+    style: '--actual-bg-color: transparent',
+    children: [
+      h(Arrow, { right: false, visible: state.left }),
+      h('div', { // Tabs
+        // Make it scrollable on mobile and touch (and with mobile class for testing).
+        _style: id => `
+          ${id} { scrollbar-width: none; -ms-overflow-style: none }
+          ${id}::-webkit-scrollbar { display: none }
+          .mobile ${id} { ${MOBILE_STYLE} }
+          @media screen and (max-width: ${MEDIUM}px) and (hover: none) {
+            ${id} { ${MOBILE_STYLE} }
+          }
+        `,
+        onScroll: event => updateBlurs(event.target),
+        className: 'w-full flex flex-wrap px-6',
+        role: 'tablist',
+        'aria-owns': ids.tabs?.join?.(' '),
+        children: links.map((link, ii) => {
+          const selected = ii === selectedIndex
+          return h('div', { className: 'shrink-0' },
+            h(NavLink, {
+              id: ids.tabs?.[ii],
+              className: 'cursor-pointer',
+              role: 'tab',
+              'aria-controls': ids.panels?.[ii],
+              'aria-selected': selected,
+              _selection: 'bottom',
+              _size: 'lg',
+              _model: {
+                value: link.value,
+                name: link.name === 'All' ? t('All') : link.name,
+                selected
+              }
+            })
+          )
+        })
+      }),
+      h(Arrow, { right: true, visible: state.right })
+    ]
+  })
+}
+
+function Arrow ({ right, visible }) {
+  const icon = { false: ARROW_BACK, true: ARROW_NEXT }[right]
+  const style = {
+    false: 'left: 0; justify-content: left; background: linear-gradient(90deg, var(--actual-bg-color) 33%, transparent)',
+    true: 'right: 0; justify-content: right; background: linear-gradient(-90deg, var(--actual-bg-color) 33%, transparent)'
+  }[document.dir === 'rtl' ? !right : right]
+
+  return h('div', {
+    className: `absolute top-0 bottom-0 w-12 bg-bga items-center animate-fade ${visible ? 'flex' : 'hidden'}`,
+    style,
+    children: h(Icon, { _size: 'xs', _rtlFlip: true }, icon)
+  })
+}
+
+function TabDropdown ({ links, hasPanels, ids, selectedIndex }) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const buttonRef = useRef(null)
+  const menuId = useMemo(() => getId(), [])
+  const currentLink = links[selectedIndex]
+
+  const closeDropdown = () => {
+    buttonRef.current?.base?.querySelector?.('a')?.focus()
+    setIsExpanded(false)
+  }
+
+  let menu
+  if (isExpanded) {
+    // Show menu.
+    menu = h(Menu, {
+      id: menuId,
+      onClick: closeDropdown,
+      children: h('div', {
+        className: 'py-1',
+        role: 'tablist',
+        'aria-owns': ids.tabs?.join?.(' '),
+        children: links.map((link, ii) => h(NavLink, {
+          id: ids.tabs?.[ii],
+          _selection: 'right',
+          role: 'tab',
+          'aria-controls': ids.panels?.[ii],
+          'aria-selected': ii === selectedIndex,
+          _model: {
+            ...link,
+            name: link.name === 'All' ? t('All') : link.name,
+            selected: ii === selectedIndex
+          }
+        }))
+      })
+    })
+  } else {
+    menu = h('div', { id: menuId, className: 'hidden' })
+  }
+
+  return h('div', {
+    className: `border-txa/20 border-b ${hasPanels ? 'mb-5' : ''} flex`,
+    onKeyDown: event => { event.key === 'Escape' && closeDropdown() },
+    children: h('div', { className: 'relative mx-6' },
+      h(NavLink, {
+        _selection: 'bottom',
+        _size: 'lg',
+        _highlighted: isExpanded,
+        _expanded: false,
+        _model: { ...currentLink, selected: true },
+        ref: buttonRef,
+        tabindex: '0', // Applies focus outline.
+        role: 'button',
+        'aria-expanded': isExpanded,
+        'aria-controls': menuId,
+        onClick: event => {
+          event.preventDefault()
+          if (isExpanded) {
+            closeDropdown()
+          } else {
+            setIsExpanded(true)
+          }
+        }
+      }),
+      menu
+    )
+  })
+}
+
+function TabPanels ({ panels, ids, selectedIndex }) {
+  return panels?.map?.((child, ii) => {
+    const selected = ii === selectedIndex
+    const id = ids.panels?.[ii]
+    return (selected || id) && h('div', {
+      className: `${selected ? 'animate-fade' : 'hidden'}`,
+      ...id && {
+        role: 'tabpanel',
+        id
+      }
+    }, selected ? child : undefined)
+  })
+}
+
+function useSelectedTab ({ rawLinks, tabPanelHashes }) {
+  const linksSelectedIndex = rawLinks.findIndex(l => l.selected === true) || 0
+  const lastLiksSelectedIndex = useRef(linksSelectedIndex)
+
+  const [selectedIndex, setSelectedIndex] = useState(getSelectedIndexByHash)
+
+  function getSelectedIndexByHash (defaultOnlyIfNoHash = false) {
+    const hash = globalThis.decodeURIComponent(globalThis.location.hash.substring(1))
+    const anchorIndex = tabPanelHashes?.findIndex?.(id => id === hash)
+    if (anchorIndex >= 0) {
+      return anchorIndex
+    } else {
+      return (!defaultOnlyIfNoHash || !hash) ? Math.max(linksSelectedIndex, 0) : null
+    }
+  }
+
+  useEffect(() => {
+    const hashChangeHandler = () => {
+      // Prevent resetting current tab if the hash was changed to an unknown value (e.g. anchor or a different Tabs organism).
+      const newSelectedIndex = getSelectedIndexByHash(true)
+      newSelectedIndex !== null && setSelectedIndex(newSelectedIndex)
+    }
+
+    globalThis.addEventListener('hashchange', hashChangeHandler)
+
+    return () => {
+      globalThis.removeEventListener('hashchange', hashChangeHandler)
+    }
+  }, [])
+
+  // React on model selected flag change
+  useEffect(() => {
+    if ((linksSelectedIndex !== lastLiksSelectedIndex.current) && (linksSelectedIndex >= 0)) {
+      setSelectedIndex(linksSelectedIndex)
+      lastLiksSelectedIndex.current = linksSelectedIndex
+    }
+  }, [linksSelectedIndex !== lastLiksSelectedIndex.current])
+
+  return [selectedIndex]
+}

package/src/main/organisms/topbar.js

@@ -0,0 +1,83 @@
+import { useMemo, useState, useEffect } from 'preact/hooks'
+import { Button } from '../atoms/button.js'
+import { Menu } from '../atoms/menu.js'
+import { NavLink } from '../atoms/nav-link.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+import markSelection from '../shared/mark-selection.js'
+import splitLinks from '../shared/split-links.js'
+
+export function Topbar ({ _model, _variant, ...props }) {
+  const { links } = _model
+  if (links.length === 0) {
+    throw new ValidationError()
+  }
+
+  const [mainLinks, sideLinks] = useMemo(() => splitLinks(links), [links])
+  markSelection(mainLinks)
+  const left = _variant === 'left' || Boolean(sideLinks)
+
+  return h('div', {
+    ...props,
+    className: 'w-full bg-bga text-txa',
+    children: h('div', { className: 'm-auto max-w-page flex', role: 'list' },
+      h(MainLinks, { links: mainLinks, left }),
+      sideLinks && h(SideLinks, { links: sideLinks })
+    )
+  })
+}
+
+function MainLinks ({ links, left = false }) {
+  return [
+    !left && h('div', { className: 'grow' }),
+    h('div', { className: 'flex' },
+      links.map(link => h('div', { className: left ? 'grow-0 text-sm' : 'grow-0', role: 'listitem' },
+        h(NavLink, { _model: link, _selection: 'top' })
+      ))
+    )
+  ]
+}
+
+function SideLinks ({ links }) {
+  const [isExpanded, setExpanded] = useState(false)
+
+  useEffect(() => {
+    const handler = () => setExpanded(false)
+    globalThis.addEventListener('route', handler)
+    return () => globalThis.removeEventListener('route', handler)
+  }, [])
+
+  if (!links || links.length === 0) {
+    return null
+  }
+
+  const moreThanOne = links.length > 1
+  const onKeyUp = event => event.key.startsWith('Esc') && setExpanded(false)
+
+  return [
+    h('div', { className: 'grow' }),
+    h('div', { className: 'grow-0 flex items-center h-12 relative px-1', onKeyUp },
+      !moreThanOne && h(Button, { _model: links[0], _size: 'xs' }),
+      moreThanOne && [
+        h(Button, {
+          _expanded: isExpanded,
+          _model: { ...links[0], value: undefined },
+          _size: 'xs',
+          onClick (event) {
+            event.preventDefault()
+            setExpanded(expanded => !expanded)
+          }
+        }),
+        isExpanded && h(Menu, { role: 'list', style: 'top: calc(100% + 8px); inset-inline-end: 4px' },
+          h('div', { className: 'py-1' },
+            links.slice(1).map(link =>
+              h('div', { role: 'listitem' },
+                h(NavLink, { _model: link, _selection: 'right' })
+              )
+            )
+          )
+        )
+      ]
+    )
+  ]
+}

package/src/main/organisms/web-component.js

@@ -0,0 +1,53 @@
+import { useMemo } from 'preact/hooks'
+import { Message } from '../atoms/message.js'
+import { Annotation } from '../routing/annotation.js'
+import h from '../shared/h.js'
+import { isPublish } from '../shared/wcm-mode.js'
+
+function isInvalidAttribute (name) {
+  try {
+    document.createAttribute(name)
+    return false
+  } catch {
+    return true
+  }
+}
+
+export function WebComponent ({ _model, ...props }) {
+  const { links } = _model
+  const src = links?.[0]?.value
+  const [elementName, attrs] = useMemo(() => [
+    src
+      ?.replace(/\?.*/, '')
+      .split('/')
+      .pop()
+      .split('.')
+      .shift()
+      .replaceAll(/[^a-zA-Z-]/g, ''),
+    links
+      .slice(1)
+      .reduce((obj, link) => ({ ...obj, [link.name]: link.value }), {})
+  ], [src, links])
+
+  // Validate attrs.
+  const invalidAttrNames = useMemo(() => Object.keys(attrs).filter(isInvalidAttribute), [attrs])
+
+  // Allow only same origin script.
+  if (!src || globalThis.origin !== new URL(src, globalThis.origin).origin) {
+    return h(Message, props, 'Invalid script source.')
+  }
+
+  // Invalid attrs.
+  if (invalidAttrNames.length) {
+    const formattedNames = invalidAttrNames.map(attrName => `"${attrName}"`).join(', ')
+    return h(Message, props, `Invalid attribute name: ${formattedNames}`)
+  }
+
+  return h('div', { ...props, className: 'w-full h-full' },
+    !isPublish && h('div', { className: 'relative' },
+      h(Annotation, elementName) // Annotate web components on author.
+    ),
+    h('script', { src, type: 'module', crossorigin: 'anonymous', async: true }),
+    h(elementName, { ...attrs, className: 'w-full h-full' })
+  )
+}

package/src/main/routing/annotation.js

@@ -0,0 +1,9 @@
+import h from '../shared/h.js'
+
+export function Annotation ({ children }) {
+  return h('div', {
+    // Use z-20 for floating elements.
+    className: 'absolute start-0 top-0 bg-txa text-bga text-xs uppercase z-20 tracking-widest px-1',
+    children
+  })
+}

package/src/main/routing/component.js

@@ -0,0 +1,138 @@
+import { Message } from '../atoms/message.js'
+import * as matter from '../export-matter.js'
+import h from '../shared/h.js'
+import { isPublish } from '../shared/wcm-mode.js'
+import { Empty } from './empty.js'
+import { ErrorHandler } from './error-handler.js'
+
+const AUTHOR_SNIPPET_ORGANISMS = {
+  Notification: 'Notification'
+}
+
+// Track all component models by the Preact key.
+export const componentModels = new Map()
+
+function normalizeNestedColumns (componentModel, parentComponentModel) {
+  if (parentComponentModel?.colspan) {
+    // Make sure the child is capped.
+    if (!componentModel.colspan) {
+      componentModel.colspan = parentComponentModel.colspan
+    }
+
+    // Reset colstart if larger than available width of the container.
+    if (componentModel.colstart && componentModel.colstart > parentComponentModel.colspan) {
+      componentModel.colstart = 1
+    }
+
+    // Adjust colspan if colstart + colspan does not fit in the container.
+    const colstart = componentModel.colstart || 1
+    if (componentModel.colspan + colstart + 1 > parentComponentModel.colspan) {
+      componentModel.colspan = parentComponentModel.colspan - colstart + 1
+    }
+  }
+}
+
+function getChildren (componentModel, trail) {
+  // Container handling.
+  const children = []
+  const _wrap = []
+
+  const childrenToIterate = componentModel?.children ?? []
+  for (const [ii, childComponentModel] of childrenToIterate.entries()) {
+    normalizeNestedColumns(childComponentModel, componentModel)
+
+    // Get wrapper configuration for container.
+    const { colstart, colspan } = childComponentModel
+    _wrap.push({ colstart, colspan })
+
+    // Get children
+    children.push(h(Component, {
+      _componentModel: childComponentModel,
+      _model: childComponentModel.model,
+      _parentColspan: colspan,
+      _trail: trail && [...trail, ii]
+    }))
+  }
+
+  return { _wrap, children }
+}
+
+function resolveOrganism (_componentModel) {
+  let [organismName, variantName] = (_componentModel?.organism ?? '').split('.')
+  variantName = variantName?.toLowerCase()
+
+  let Organism = matter[organismName]
+  if (!Organism) {
+    Organism = Empty
+    organismName = 'Empty'
+    console.log(`Unable to resolve organism: ${_componentModel.id}`)
+  }
+
+  return { Organism, organismName, variantName }
+}
+
+function fastHash (str) {
+  let hash = 0
+  for (let ii = 0; ii < str.length; ++ii) {
+    hash = (hash << 5) - hash + str.codePointAt(ii)
+  }
+  return hash >>> 0
+}
+
+function getKey (componentModel, trail) {
+  // Return trail for containers.
+  if (trail && componentModel.children) {
+    return trail.join('/')
+  }
+
+  // Return hash for web components
+  if (componentModel.organism === 'WebComponent') {
+    return fastHash(JSON.stringify(componentModel.model))
+  }
+
+  // Do not use keys for regular components.
+  return componentModel.id
+}
+
+export function Component ({ _componentModel, _parentColspan, _trail = ['0'] }) {
+  const { Organism, organismName, variantName } = resolveOrganism(_componentModel)
+
+  // Clear component models for each new page.
+  if (_componentModel?.organism === 'Page') {
+    componentModels.clear()
+  }
+
+  // Reset trail for main container (and children)
+  if (_componentModel?.organism === 'Container.Main') {
+    _trail = null
+  }
+
+  // Get key and store component model.
+  const key = getKey(_componentModel, _trail)
+  componentModels.set(key, _componentModel)
+
+  // Get organism properties.
+  const organismProps = {
+    key,
+    _color: _componentModel.color,
+    _model: _componentModel.model,
+    _variant: variantName,
+    _parentColspan,
+    _mobileCols: _componentModel.mobileCols,
+    'data-key': key,
+    'data-name': organismName,
+    id: _componentModel.id
+  }
+
+  if (!isPublish && Object.keys(AUTHOR_SNIPPET_ORGANISMS).includes(organismName)) {
+    // Show author snippet for selected components.
+    return h(Message, AUTHOR_SNIPPET_ORGANISMS[organismName])
+  }
+
+  // Resolve children and wrap configuration.
+  const { _wrap, children } = getChildren(_componentModel, _trail)
+
+  return h(ErrorHandler,
+    h(Organism, { ...organismProps, _wrap }, children)
+  )
+}

package/src/main/routing/empty.js

@@ -0,0 +1,5 @@
+import h from '../shared/h.js'
+
+export function Empty (props) {
+  return h('div', { ...props })
+}