acinguiux-preact-components 0.0.1

package/src/wcs/components/decision-tree/decision-tree.js

@@ -0,0 +1,162 @@
+import ICON_BACK from './arrow-back.svg'
+import { google, apple } from './badges.js'
+
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Asset, Box, Button, Heading, Link, RichText, SVG } = matter
+const { useState, useEffect, useRef } = preactHooks
+
+function arrayStartsWith (array, starter) {
+  for (const [ii, element] of starter.entries()) {
+    if (array[ii] !== element) {
+      return false
+    }
+  }
+
+  return true
+}
+
+function getBranch (branches, trail) {
+  for (const branch of branches) {
+    const branchPath = branch[0]
+    if (arrayStartsWith(branchPath, trail)) {
+      return branch
+    }
+  }
+
+  return null
+}
+
+function getNextQuestion (branch, trail, questions) {
+  const branchPath = branch[0]
+
+  let ii = trail.length
+  while (branchPath[ii] === null) {
+    trail.push(null)
+    ++ii
+  }
+
+  return questions[ii] // Will return undefined when end is reached.
+}
+
+function DecisionTree ({ src }) {
+  if (!src) {
+    return null // Exit early if src is missing
+  }
+  const [state, setState] = useState()
+  const key = useRef(0)
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      const obj = await res.json()
+      setState({ ...obj, trail: [] })
+    })().catch(console.error)
+  }, [src])
+
+  if (!state) {
+    return null
+  }
+
+  const branch = getBranch(state.branches, state.trail)
+  const question = getNextQuestion(branch, state.trail, state.questions)
+  const results = question ? null : branch[1].map(id => state.results[id])
+
+  const handleAnswer = event => {
+    event.preventDefault()
+    const answer = event.target.textContent
+    state.trail.push(answer)
+    setState({ ...state })
+    key.current++
+  }
+
+  const handleBack = event => {
+    event.preventDefault()
+
+    const removeNulls = () => {
+      while (state.trail.at(-1) === null) {
+        state.trail.pop()
+      }
+    }
+
+    removeNulls()
+    state.trail.pop()
+    removeNulls()
+
+    setState({ ...state })
+    key.current++
+  }
+
+  return h('div',
+    // Question.
+    question && h(Box, { key: key.current, className: 'rounded-2xl bg-bga text-txa grid lg:grid-cols-2 gap-5 animate-fade' },
+      h('div', { className: 'flex flex-col justify-center space-y-5' },
+        h('div', { className: 'text-center' },
+          h(Heading, { _level: 3 }, question.text)
+        ),
+        h('div', { className: 'flex justify-center lg:flex-nowrap flex-wrap gap-5' },
+          question.answers.map(answer =>
+            h(Button, {
+              _model: { name: answer },
+              _wide: true,
+              onClick: handleAnswer
+            })
+          )
+        ),
+        state.trail.length > 0 && h('div', { className: 'text-center' },
+          h(Link, {
+            tabindex: 0,
+            _model: { name: 'Back', icon: ICON_BACK },
+            _variant: 'simple',
+            className: 'cursor-pointer',
+            onClick: handleBack,
+            onkeydown: event => event.key === 'Enter' && handleBack(event)
+          })
+        )
+      ),
+      h('div', { className: 'overflow-hidden rounded-lg h-full' },
+        h(Asset, {
+          _tall: true,
+          _model: {
+            image: { src: question.asset }
+          }
+        })
+      )
+    ),
+    // Recommendation.
+    results && h('div', { className: 'grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-5 animate-fade' },
+      results.map(result =>
+        h(Result, result)
+      )
+    )
+  )
+}
+
+function Result ({ title, text, link, cta, asset, appStoreText, appStoreUrl, playStoreText, playStoreUrl }) {
+  return h('div', { className: 'bg-bga text-txa h-full rounded-2xl overflow-hidden' },
+    asset && h('div',
+      h('img', { src: asset })
+    ),
+    h(Box, { className: 'bg-bga text-txa w-full' },
+      h(Heading, { _level: '3' }, title),
+      h(RichText, text),
+
+      link && cta && h(Link, { _model: { name: cta, value: link }, _variant: 'full', target: '_blank' }),
+
+      (appStoreUrl || playStoreUrl) && h('div', { className: 'flex gap-5 max-h-16' },
+        h(StoreButton, { name: 'App Store', url: appStoreUrl, text: appStoreText, svgGenerator: apple }),
+        h(StoreButton, { name: 'Google Play', url: playStoreUrl, text: playStoreText, svgGenerator: google })
+      )
+    )
+  )
+}
+
+function StoreButton ({ name, url, text, svgGenerator }) {
+  if (!url) {
+    return null
+  }
+
+  return h(Link, { _model: { name, value: url }, 'aria-label': `${text} ${name}`, className: 'h-16' },
+    h(SVG, { _tall: true, _model: { src: svgGenerator(text) }, className: 'h-12 w-auto' })
+  )
+}
+
+register(DecisionTree, 'decision-tree')

package/src/wcs/components/dynamic-contact-details/dynamic-contact-details.js

@@ -0,0 +1,111 @@
+const { register, h, matter, preactHooks } = globalThis.ami
+const { Box, Heading, Link, Button } = matter
+const { useEffect, useState } = preactHooks
+
+async function getData (url) {
+  const profile = location.pathname.split('.html').at(-1)
+
+  if (!profile) {
+    return null
+  }
+
+  const profilePath = `${url}${profile}.json`
+
+  const res = await fetch(`${location.origin}/${profilePath}`)
+  if (!res.ok) {
+    console.error(`Failed to load resource: ${url}`)
+    return null
+  }
+
+  const json = await res.json()
+  const data = json?.properties?.elements
+
+  if (!data) {
+    return null
+  }
+
+  return {
+    name: data?.name?.value,
+    phone: data?.phone?.value,
+    mobile: data?.mobile?.value,
+    contactFilePath: data?.contactFile?.value,
+    email: data?.email?.value,
+    jobTitle: data?.jobTitle?.value,
+    ctaLink: data?.ctaLink?.value
+  }
+}
+
+function DynamicContactDetails (props) {
+  const {
+    src,
+    'phone-number-text': phoneNumberText,
+    'mobile-number-text': mobileNumberText,
+    'email-text': emailText,
+    'download-contact-text': downloadContactText,
+    'download-contact-icon': downloadContactIcon,
+    'call-to-action-text': callToActionText,
+    'call-to-action-icon': callToActionIcon
+  } = props
+
+  const [data, setData] = useState()
+
+  if (!src) {
+    console.error('Missing data source.')
+    return null
+  }
+
+  useEffect(() => {
+    const fetchData = () => {
+      getData(src).then(setData).catch(console.error)
+    }
+    fetchData()
+    globalThis.addEventListener('popstate', fetchData)
+
+    return () => {
+      globalThis.removeEventListener('popstate', fetchData)
+    }
+  }, [])
+
+  if (!data) {
+    return null
+  }
+
+  return h(Box, { className: 'bg-bga text-txa rounded-2xl', itemscope: true, itemtype: 'https://schema.org/Person' },
+    h(Heading, { _level: 3, itemprop: 'name', className: 'text-2xl' }, data.name),
+    h(Heading, { _level: 4, itemprop: 'jobTitle' }, data.jobTitle),
+    h('div', { className: 'space-y-2' },
+      data.phone && phoneNumberText && h('div',
+        h('span', { className: 'font-bold' }, `${phoneNumberText}: `),
+        h(Link, { _variant: 'underline', itemprop: 'telephone', _model: { name: data.phone, value: `tel:${data.phone}` } })
+      ),
+      data.mobile && mobileNumberText && h('div',
+        h('span', { className: 'font-bold' }, `${mobileNumberText}: `),
+        h(Link, { _variant: 'underline', itemprop: 'telephone', _model: { name: data.mobile, value: `tel:${data.mobile}` } })
+      ),
+      h('div',
+        h('span', { className: 'font-bold' }, `${emailText}: `),
+        h(Link, { _variant: 'underline', itemprop: 'email', _model: { name: data.email, value: `mailto:${data.email}` } })
+      )
+    ),
+    h('div', { className: 'flex gap-5 sm:flex-col' },
+      h(Button, {
+        _model: {
+          name: downloadContactText,
+          value: data.contactFilePath,
+          icon: downloadContactIcon
+        }
+      }),
+      data.ctaLink && callToActionText && h(Button, {
+        target: '_blank',
+        rel: 'noopener',
+        _model: {
+          name: callToActionText,
+          value: data.ctaLink,
+          icon: callToActionIcon
+        }
+      })
+    )
+  )
+}
+
+register(DynamicContactDetails, 'dynamic-contact-details')

package/src/wcs/components/example-accordion/example-accordion.js

@@ -0,0 +1,10 @@
+const { h, register, matter } = globalThis.ami
+const { AccordionItem } = matter
+
+function ExampleAccordion ({ title = 'Click me' }) {
+  return h(AccordionItem, {
+    _model: { title, text: 'You can see me now.' }
+  })
+}
+
+register(ExampleAccordion, 'example-accordion')

package/src/wcs/components/example-asset/example-asset.js

@@ -0,0 +1,12 @@
+const { h, register, matter } = globalThis.ami
+const { Asset } = matter
+
+function ExampleAsset ({ src }) {
+  return h(Asset, {
+    _model: {
+      image: { src, width: 1920, height: 1080 }
+    }
+  })
+}
+
+register(ExampleAsset, 'example-asset')

package/src/wcs/components/example-form/example-form.js

@@ -0,0 +1,59 @@
+const { h, register, matter, preactHooks } = globalThis.ami
+const { useState } = preactHooks
+const { Input, Box, Form, Button } = matter
+
+function ExampleForm (props) {
+  const [submitted, setSubmitted] = useState(false)
+
+  const onSubmit = event => {
+    event.preventDefault()
+    setSubmitted(true)
+  }
+
+  if (submitted) {
+    return h(Box, { className: 'bg-bga text-txa rounded-2xl' }, 'Thank you for submitting the form.')
+  }
+
+  const options = [
+    h('option'),
+    h('option', 'A'),
+    h('option', 'B'),
+    h('option', 'C'),
+  ]
+
+  return h(Form, { name: 'Example form', onSubmit },
+    h(Box, { ...props, className: 'bg-bga text-txa rounded-2xl' },
+      h('div', { className: 'grid grid-cols-2 gap-4' },
+        h('div', { className: 'space-y-4' },
+          h(Field, { label: 'Required input', required: true }),
+          h(Field, { type: 'select', label: 'Required select', required: true, children: options }),
+          h(Field, { type: 'textarea', label: 'Required textarea', required: true }),
+          h(Field, { type: 'checkbox', label: 'Required checkbox', required: true }),
+          h(Field, { type: 'radio', label: 'Required radio', required: true })
+        ),
+        h('div', { className: 'space-y-4' },
+          h(Field, { label: 'Disabled input', disabled: true }),
+          h(Field, { type: 'select', label: 'Disabled select', disabled: true, children: options }),
+          h(Field, { type: 'textarea', label: 'Disabled textarea', disabled: true }),
+          h(Field, { type: 'checkbox', label: 'Disabled checkbox', disabled: true }),
+          h(Field, { type: 'radio', label: 'Disabled radio', disabled: true }),
+          h(Field, { type: 'file', label: 'Disabled file', disabled: true })
+        )
+      ),
+      h(Button, { type: 'submit', _model: { name: 'Submit' } })
+    )
+  )
+}
+
+function Field ({ type, label, required, disabled, children }) {
+  const fullLabel = required ? `${label} *` : label
+
+  return h('label', { className: 'block' },
+    h('span', { className: 'font-bold' }, fullLabel),
+    h('div',
+      h(Input, { type, 'data-label': label, required, disabled, children })
+    )
+  )
+}
+
+register(ExampleForm, 'example-form')

package/src/wcs/components/example-nested/example-nested.js

@@ -0,0 +1,10 @@
+const { h, register, matter } = globalThis.ami
+const { WebComponent } = matter
+
+function ExampleNested ({ 'nested-component-script': nestedComponentScript }) {
+  return h(WebComponent, {
+    _model: { links: [{ value: nestedComponentScript }] }
+  })
+}
+
+register(ExampleNested, 'example-nested')

package/src/wcs/components/example-routing/example-routing.js

@@ -0,0 +1,51 @@
+/* global location */
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Box, Link } = matter
+const { useState, useEffect } = preactHooks
+
+function ExampleRouting () {
+  const [state, setState] = useState(getSuffix())
+
+  useEffect(() => {
+    globalThis.addEventListener('popstate', () => setState(getSuffix()))
+  })
+
+  return h(Box, { className: 'bg-bga text-txa rounded-2xl' },
+    h('p', `Current suffix: ${state}`),
+    h('div', { className: 'space-x-2' },
+      h(Link, {
+        _variant: 'underline',
+        _model: {
+          name: 'Link 1',
+          value: setSuffix('/suffix/1')
+        }
+      }),
+      h(Link, {
+        _variant: 'underline',
+        _model: {
+          name: 'Link 2',
+          value: setSuffix('/suffix/2')
+        }
+      })
+    )
+  )
+}
+
+function getSuffix () {
+  return location.pathname.split('.html')[1]
+}
+
+function setSuffix (suffix) {
+  const url = new URL(location)
+
+  const index = url.pathname.indexOf('.html')
+  let pathname = url.pathname.substring(0, index + 5)
+  if (pathname.endsWith('/')) {
+    pathname = `${pathname}index.html`
+  }
+
+  url.pathname = pathname + suffix
+  return url.href
+}
+
+register(ExampleRouting, 'example-routing')

package/src/wcs/components/example-rtl/example-rtl.js

@@ -0,0 +1,28 @@
+import { ARROW_TAIL_RIGHT } from '#acinguiux-preact/main/shared/icons.js'
+
+const { h, register, matter, } = globalThis.ami
+const { Button, NavLink, SearchResult } = matter
+
+function ExampleRTL () {
+  return h('div', { className: 'space-y-5' },
+    h(SearchResult, {
+      className: 'p-5',
+      _model: {
+        links: [
+          { name: 'One', value: '#' },
+          { name: 'Two', value: '#' },
+          { name: 'Three', value: '#' }
+        ]
+      }
+    }),
+    h(NavLink, {
+      _expanded: false,
+      _model: { name: 'Nav Link', value: '#', icon: ARROW_TAIL_RIGHT }
+    }),
+    h(Button, {
+      _model: { name: 'Button', value: '#', icon: ARROW_TAIL_RIGHT }
+    })
+  )
+}
+
+register(ExampleRTL, 'example-rtl')

package/src/wcs/components/example-tabs/example-tabs.js

@@ -0,0 +1,12 @@
+const { h, register, matter } = globalThis.ami
+const { Tabs } = matter
+
+function ExampleTabs () {
+  return h(Tabs, {
+    _model: {
+      links: [...Array.from({ length: 5 }).keys()].map(ii => ({ name: `Web Component Tab ${++ii}`, value: '#' }))
+    }
+  })
+}
+
+register(ExampleTabs, 'example-tabs')

package/src/wcs/components/example-web-component/example-web-component.js

@@ -0,0 +1,34 @@
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Box, Heading } = matter
+const { useState, useEffect } = preactHooks
+
+// Create Preact component based on hooks.
+function MyPreactComponent ({ src }) {
+  const [data, setData] = useState()
+
+  // The src parameter is a URL to the data feed.
+  // It can be configured by an editor for each instance of the component.
+  if (!src) {
+    console.error('Missing data source.')
+    return null
+  }
+
+  // Fetch the data source.
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      const json = await res.json()
+      setData(json)
+    })()
+  }, [])
+
+  // Shape the HTML output.
+  // This is a hyperscript syntax; feel free to use JSX.
+  return h(Box, { className: 'bg-bga text-txa w-full h-full rounded-2xl overflow-hidden' },
+    h(Box, { className: 'pal-brand3-solid bg-bga text-txa h-full rounded-lg text-center' },
+      h(Heading, { _level: 3 }, data ? data.title : 'Fetching data...')
+    )
+  )
+}
+
+register(MyPreactComponent, 'example-web-component')

package/src/wcs/components/floating-button/floating-button.js

@@ -0,0 +1,17 @@
+const { h, matter, register } = globalThis.ami
+const { Button } = matter
+
+export function FloatingButton ({ label, href, icon, onClick }) {
+  return h('div', {
+    dir: document.documentElement.dir,
+    _style: id => `
+      ${id} button, ${id} a { display: flex }
+      ${id}:dir(ltr) { transform: rotate(270deg) translateX(100%); transform-origin: bottom right }
+      ${id}:dir(rtl) { transform: rotate(90deg) translateX(-100%); transform-origin: bottom left }
+    `,
+    className: 'fixed -end-1 bottom-24 animate-fade shadow rounded-lg print:hidden',
+    children: h(Button, { _size: 'xs', _model: { name: label, value: href, icon }, onClick })
+  })
+}
+
+register(FloatingButton, 'floating-button')

package/src/wcs/components/formstack-form/fields/address.js

@@ -0,0 +1,38 @@
+const { h, matter } = globalThis.ami
+
+function Subfield ({ field, name, className }) {
+  const subfield = field.subfields[name]
+  if (!subfield) {
+    return null
+  }
+
+  const id = `${field.attrs.name}[${name}]`
+  return h('div', { className },
+    h(matter.Input, {
+      ...field.attrs,
+      className: 'w-full',
+      name: id,
+      id,
+      type: subfield.options ? 'select' : field.attrs.type,
+      'data-label': subfield.label,
+      children: subfield.options?.map(option => h('option', { value: option.value }, option.name))
+    }),
+    h('label', { for: id, className: 'text-sm' }, subfield.label)
+  )
+}
+
+export function Address ({ field }) {
+  const label = field.required === '1' ? `${field.label} *` : field.label
+
+  return h('fieldset',
+    h('legend', { className: 'block font-bold' }, label),
+    h(Subfield, { field, name: 'address' }),
+    h(Subfield, { field, name: 'address2' }),
+    h('div', { className: 'flex flex-row gap-x-5 md:flex-col sm:flex-col' },
+      h(Subfield, { field, name: 'city', className: 'w-full' }),
+      h(Subfield, { field, name: 'state', className: 'w-full' }),
+      h(Subfield, { field, name: 'zip', className: 'shrink-0 lg:w-20 md:w-full sm:w-full' })
+    ),
+    h(Subfield, { field, name: 'country' })
+  )
+}

package/src/wcs/components/formstack-form/fields/checkbox.js

@@ -0,0 +1,42 @@
+const { h, matter, preactHooks } = globalThis.ami
+const { useState } = preactHooks // Preact hooks
+
+export function Checkbox ({ field }) {
+  const isRequired = field.required === '1'
+  const label = isRequired ? `${field.label} *` : field.label
+  // Mark as required only if no box is checked.
+  const [isMarkedRequired, setIsMarkedRequired] = useState(isRequired)
+  let id = 1
+
+  return h('fieldset', { className: 'block space-y-1' },
+    h('legend', { className: 'block font-bold' }, label),
+    field.options.map((option, index) =>
+      h('label', { className: 'space-x-2 flex items-center cursor-pointer' },
+        h(matter.Input, {
+          ...field.attrs,
+          id: `${field.attrs.id}_${id++}`,
+          type: 'checkbox',
+          name: null,
+          value: option.value,
+          required: (index === 0) && isMarkedRequired,
+          'data-label': field.label,
+          onChange (event) {
+            // Set value of the hidden field.
+            const fieldset = event.currentTarget.closest('fieldset')
+            const values = [...fieldset.querySelectorAll('input[type="checkbox"')]
+              .map(input => input.checked ? input.value : null)
+            const value = values
+              .filter(v => v != null)
+              .join('\n')
+
+            fieldset.querySelector('input[type="hidden"]').value = value
+            setIsMarkedRequired(isRequired && !values.some(Boolean))
+          }
+        }),
+        h('span', option.label)
+      )
+    ),
+    h(matter.Input, { type: 'hidden', name: field.attrs.name }),
+    field.description && h('span', { className: 'text-sm' }, field.description)
+  )
+}

package/src/wcs/components/formstack-form/fields/date.js

@@ -0,0 +1,22 @@
+import { Wrapper } from './wrapper'
+const { h, matter } = globalThis.ami
+
+function getDatetimeFieldType (field) {
+  if (field.date_format && field.time_format) {
+    return 'datetime-local'
+  } else if (field.time_format) {
+    return 'time'
+  } else {
+    return 'date'
+  }
+}
+
+export function DateTime ({ field }) {
+  return h(Wrapper, { field },
+    h(matter.Input, {
+      ...field.attrs,
+      type: getDatetimeFieldType(field),
+      'data-label': field.label
+    })
+  )
+}

package/src/wcs/components/formstack-form/fields/description.js

@@ -0,0 +1,8 @@
+import { Wrapper } from './wrapper'
+const { h, matter } = globalThis.ami
+
+export function Description ({ field }) {
+  return h(Wrapper, { field },
+    h(matter.RichText, { ...field.attrs, className: 'w-full' }, field.section_text)
+  )
+}

package/src/wcs/components/formstack-form/fields/input.js

@@ -0,0 +1,8 @@
+import { Wrapper } from './wrapper'
+const { h, matter } = globalThis.ami
+
+export function Input ({ field }) {
+  return h(Wrapper, { field },
+    h(matter.Input, { ...field.attrs, className: 'w-full', 'data-label': field.label })
+  )
+}

package/src/wcs/components/formstack-form/fields/name.js

@@ -0,0 +1,39 @@
+const { h, matter } = globalThis.ami
+
+const SHORT_FIELD = 'lg:w-20 md:w-full sm:w-full shrink-0'
+const HALF_FIELD = 'lg:w-1/2 md:w-full sm:w-full'
+
+function Subfield ({ field, name, className }) {
+  const subfield = field.subfields[name]
+  if (!subfield) {
+    return null
+  }
+
+  const id = `${field.attrs.name}[${name}]`
+  return h('div', { className },
+    h(matter.Input, {
+      ...field.attrs,
+      className: 'w-full',
+      name: id,
+      id,
+      'data-label': subfield.label
+    }),
+    h('label', { for: id, className: 'text-sm' }, subfield.label)
+  )
+}
+
+export function Name ({ field }) {
+  const label = field.required === '1' ? `${field.label} *` : field.label
+
+  return h('fieldset',
+    h('legend', { className: 'block font-bold' }, label),
+    h('div', { className: 'flex flex-row gap-x-5 md:flex-col sm:flex-col' },
+      h(Subfield, { field, name: 'prefix', className: SHORT_FIELD }),
+      h(Subfield, { field, name: 'first', className: HALF_FIELD }),
+      h(Subfield, { field, name: 'middle', className: SHORT_FIELD }),
+      h(Subfield, { field, name: 'initial', className: SHORT_FIELD }),
+      h(Subfield, { field, name: 'last', className: HALF_FIELD }),
+      h(Subfield, { field, name: 'suffix', className: SHORT_FIELD })
+    )
+  )
+}