acinguiux-preact-components 0.0.1

package/src/wcs/components/single-stat/single-stat.js

@@ -0,0 +1,85 @@
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Box, SVG } = matter
+const { useState, useEffect } = preactHooks
+
+function StatContent ({ data }) {
+  const alignmentMap = { right: 'justify-end', center: 'justify-center' }
+  const alignmentClass = alignmentMap[data.customModel.elements.alignment.value] ?? ''
+  const prefix = data.customModel.elements.prefix?.value
+  const suffix = data.customModel.elements.suffix?.value
+
+  return h('div', { className: 'grow items-center h-full' },
+    h('div', { className: 'text-lg font-custom font-bold' }, data.customModel.elements.label.value),
+    h('div', { className: `grow flex items-end ${alignmentClass}` },
+      prefix && h('div', { className: 'flex items-end text-xl font-custom font-bold' },
+        h('div', { className: 'mr-1 mb-1' }, prefix)
+      ),
+      h('div', { className: 'flex items-end text-5xl font-custom font-bold' },
+        h('div', data.customModel.elements.value.value)
+      ),
+      suffix && h('div', { className: 'flex items-end text-xl font-custom font-bold' },
+        h('div', { className: 'ml-1 mb-1' }, suffix)
+      )
+    )
+  )
+}
+
+function SingleStat ({ src }) {
+  if (!src) {
+    console.error('Missing data source.')
+    return null
+  }
+
+  const [data, setData] = useState()
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      if (!res.ok) {
+        console.error(`Error fetching ${src}. Status: ${res.status}`)
+        return
+      }
+      const json = await res.json()
+      setData(json)
+    })().catch(console.error)
+  }, [src])
+
+  if (!data) {
+    return null
+  }
+
+  const alignment = data.customModel.elements.alignment?.value
+  const icon = data.customModel.elements.icon?.value
+
+  return h(Box, {
+    _style: id => `${id} svg path { fill: currentColor }`,
+    className: 'text-center rounded-2xl w-full text-txa bg-bga',
+    children: h('div', { className: 'items-center h-full text-center w-full' },
+      h('div', { className: 'grow items-center h-full justify-center' },
+        h('div', { className: 'grow flex items-center h-full justify-center' },
+          alignment === 'left' && h('div', { className: 'flex items-end align-bottom' },
+            icon && h('div', { className: 'block w-14 h-14' },
+              h(SVG, { _model: { src: icon } })
+            ),
+            icon && h('div', { className: 'w-4' }, ''),
+            h(StatContent, { data })
+          ),
+          alignment === 'right' && h('div', { className: 'flex items-end align-bottom' },
+            h(StatContent, { data }),
+            icon && h('div', { className: 'w-4' }, ''),
+            icon && h('div', { className: 'block w-14 h-14' },
+              h(SVG, { _model: { src: icon } })
+            )
+          ),
+          alignment === 'center' && h('div', { className: 'flex items-end align-bottom justify-center' },
+            h(StatContent, { data })
+          )
+        ),
+        h('div', { className: 'grow flex items-center h-full justify-center mt-2' },
+          h('div', { className: 'text-xs' }, data.customModel.elements.supportingInfo.value)
+        )
+      )
+    )
+  })
+}
+
+register(SingleStat, 'single-stat')

package/src/wcs/components/site-feedback/site-feedback.js

@@ -0,0 +1,56 @@
+import { FloatingButton } from '../floating-button/floating-button.js'
+import { FormstackForm } from '../formstack-form/formstack-form.js'
+const { h, register, matter, preactHooks } = globalThis.ami
+const { useState } = preactHooks
+const { Popup, Button } = matter
+
+const ICON_CLOSE = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<polygon fill="#595959" points="19.293 3.293 20.707 4.707 13.414 12 20.707 19.293 19.293 20.707 12 13.414 4.707 20.707 3.293 19.293 10.586 12 3.293 4.707 4.707 3.293 12 10.586"/>
+</svg>`
+
+const DEFAULTS = {
+  BUTTON_TEXT: 'Feedback',
+  CLOSE_TEXT: 'Close'
+}
+
+function SiteFeedback (props) {
+  const {
+    'button-text': buttonText = DEFAULTS.BUTTON_TEXT,
+    'close-text': closeText = DEFAULTS.CLOSE_TEXT,
+    'form-id': formId,
+  } = props
+
+  const [show, setShow] = useState(false)
+
+  if (!formId) {
+    return null
+  }
+
+  return [
+    h(FloatingButton, { label: buttonText, onClick: () => setShow(true) }),
+    h(Popup, { _show: show, _layout: 'center', 'aria-label': buttonText },
+      h('div', { className: 'flex justify-end' },
+        h(Button, {
+          _variant: 'plain',
+          _textless: true,
+          _size: 'xs',
+          _model: {
+            icon: ICON_CLOSE,
+            name: closeText
+          },
+          onClick: event => {
+            event.preventDefault()
+            setShow(false)
+          }
+        })
+      ),
+      h('div', {
+        // Reset padding in the inner Box.
+        _style: id => `${id} form > div { padding: 0 }`,
+        children: h(FormstackForm, props)
+      })
+    )
+  ]
+}
+
+register(SiteFeedback, 'site-feedback')

package/src/wcs/components/skds-search/navigation-search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#595959" d="M10.5,2 C15.1944204,2 19,5.80557963 19,10.5 C19,12.4865245 18.3185332,14.3138839 17.1766205,15.7610573 L21.7071068,20.2928932 L20.2928932,21.7071068 L15.7610573,17.1766205 C14.3138839,18.3185332 12.4865245,19 10.5,19 C5.80557963,19 2,15.1944204 2,10.5 C2,5.80557963 5.80557963,2 10.5,2 Z M10.5,4 C6.91014913,4 4,6.91014913 4,10.5 C4,14.0898509 6.91014913,17 10.5,17 C14.0898509,17 17,14.0898509 17,10.5 C17,6.91014913 14.0898509,4 10.5,4 Z"/>
+</svg>

package/src/wcs/components/skds-search/skds-search.js

@@ -0,0 +1,103 @@
+import Excel from 'exceljs'
+
+import ICON_NAVIGATION_SEARCH from './navigation-search.svg'
+
+const { h, register, matter, preactHooks } = globalThis.ami
+const { Box, Button, Form, Input, Table } = matter
+const { useState, useEffect } = preactHooks
+
+function SKDSSearch ({ src }) {
+  const [data, setData] = useState()
+  const [inputValue, setInputValue] = useState('')
+
+  if (!src) {
+    console.error('Missing document source.')
+    return null
+  }
+
+  useEffect(() => {
+    (async function () {
+      const res = await fetch(src)
+      const buf = await res.arrayBuffer()
+
+      const workbook = new Excel.Workbook()
+      await workbook.xlsx.load(buf)
+      setData({ all: processWorksheets(workbook.worksheets), filtered: [], query: null })
+    })().catch(console.error)
+  }, [src])
+
+  if (!data) {
+    return null
+  }
+
+  return h(Box, { className: 'bg-bga text-txa rounded-2xl' },
+    h(Form, {
+      onSubmit: event => {
+        event.preventDefault()
+        const query = inputValue.trim()
+        const filtered = data.all.filter(row => row.BRN === query)
+        setData({ all: data.all, filtered, query })
+      }
+    },
+    h('div', { className: 'flex gap-5' },
+      h('div', { className: 'grow' },
+        h(Input, {
+          placeholder: 'Enter your BRN',
+          type: 'search',
+          value: inputValue,
+          onInput: e => setInputValue(e.target.value)
+        })
+      ),
+      h('div', { className: 'grow-0' },
+        h(Button, {
+          type: 'submit',
+          _textless: true,
+          _model: {
+            name: 'Search',
+            title: 'Search',
+            icon: ICON_NAVIGATION_SEARCH
+          }
+        })
+      ))
+    ),
+    data.query !== null && data.filtered.length === 0 && h('p', 'No records found.'),
+    data.filtered.length > 0 && [
+      h('p', `Found ${data.filtered.length} record(s).`),
+      h(Table,
+        h('tr', Object.keys(data.all[0]).map(key =>
+          h('th', key)
+        )),
+        data.filtered.map(row =>
+          h('tr', Object.values(row).map(value =>
+            h('td', value)
+          ))
+        )
+      )
+    ]
+  )
+}
+
+function processWorksheets (worksheets) {
+  if (worksheets.length < 1) {
+    throw new Error('No sheets found in the document.')
+  }
+
+  const data = []
+  let headers
+  for (const row of worksheets[0]._rows) {
+    if (row.number === 1) {
+      headers = row._cells.map(cell => cell.value)
+      continue
+    }
+
+    const obj = row._cells.reduce((acc, cell, ii) => {
+      acc[headers[ii]] = cell.value?.toString?.()?.trim?.()
+      return acc
+    }, {})
+
+    data.push(obj)
+  }
+  return data
+}
+
+register(SKDSSearch, 'skds-search')

package/src/wcs/components/smart-banner/smart-banner.js

@@ -0,0 +1,104 @@
+/* global localStorage */
+import { NAVIGATION_CLOSE } from '#acinguiux-preact/main/shared/icons.js'
+
+const { h, register, preactHooks, matter } = globalThis.ami
+const { useState, useEffect } = preactHooks
+const { Icon, Img } = matter
+
+// Expire after 7 days (the value is in milliseconds).
+const RETENTION = 604_800_000
+const STORAGE_KEY = 'suppressed-smart-banners'
+
+function getPlatform () {
+  if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+    return 'ios'
+  } else if (/android/i.test(navigator.userAgent)) {
+    return 'android'
+  }
+
+  return null
+}
+
+function isHidden (url) {
+  const obj = JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? {}
+  const date = new Date(obj[url] ?? null)
+  if (Date.parse(date) + RETENTION < Date.now()) {
+    delete obj[url]
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(obj))
+    return false
+  }
+
+  return true
+}
+
+function hide (url) {
+  const obj = JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? {}
+  obj[url] = new Date().toISOString()
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(obj))
+}
+
+function SmartBanner ({ src }) {
+  if (!src) {
+    console.error('Missing data source.')
+    return null
+  }
+
+  const platform = getPlatform()
+  if (!platform) {
+    return null
+  }
+
+  const [data, setData] = useState()
+  useEffect(() => {
+    (async () => {
+      const res = await fetch(src)
+      const json = await res.json()
+      setData(json)
+    })()
+  }, [])
+
+  if (!data) {
+    return null
+  }
+
+  const suffix = data[`${platform}Suffix`]
+  const url = data[`${platform}Url`]
+
+  if (isHidden(url)) {
+    return null
+  }
+
+  return h('div', { className: 'p-2 bg-bga text-txa w-full animate-fade flex gap-2 border-txa/90 border-b' },
+    h('button', {
+      className: 'm-2 cursor-pointer',
+      title: data.closeText,
+      'aria-label': data.closeText,
+      children: h(Icon, { _size: 'sm' }, NAVIGATION_CLOSE),
+      onClick: event => {
+        event.preventDefault()
+        hide(url)
+        setData({ ...data }) // Force update.
+      }
+    }),
+    h('div', { className: 'flex items-center' },
+      h('div', { className: 'w-16 h-16' },
+        h(Img, { _tall: true, _model: { src: data.icon } })
+      )
+    ),
+    h('div', { className: 'grow flex items-center text-sm' },
+      h('div',
+        h('div', data.title),
+        h('div', data.author),
+        h('div', suffix)
+      )
+    ),
+    h('div', { className: 'flex items-center pe-2' }, // Compensate for bigger close button.
+      h('a', {
+        className: 'transition rounded-lg overflow-hidden border bg-bgb text-txb border-bgb hover:bg-txb hover:text-bgb font-bold py-1 px-2',
+        href: url
+      }, data.viewText)
+    )
+  )
+}
+
+register(SmartBanner, 'smart-banner')

package/src/wcs/components/standalone-table/arrow-up-down.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#404040">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.746 9.046a.5.5 0 0 1-.707 0l-.693-.692a.5.5 0 0 1 0-.708l5.293-5.292a.5.5 0 0 1 .708 0l5.292 5.292a.5.5 0 0 1 0 .708l-.692.692a.5.5 0 0 1-.708 0L11.993 4.8 7.746 9.046Zm0 5.908a.5.5 0 0 0-.707 0l-.693.692a.5.5 0 0 0 0 .707l5.293 5.293a.5.5 0 0 0 .708 0l5.292-5.293a.5.5 0 0 0 0-.707l-.692-.693a.5.5 0 0 0-.708 0L11.993 19.2l-4.247-4.246Z"/>
+</svg>

package/src/wcs/components/standalone-table/arrow-up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#404040">
+<path fill-rule="evenodd" clip-rule="evenodd" transform="translate(0,6)" d="M7.746 9.046a.5.5 0 0 1-.707 0l-.693-.692a.5.5 0 0 1 0-.708l5.293-5.292a.5.5 0 0 1 .708 0l5.292 5.292a.5.5 0 0 1 0 .708l-.692.692a.5.5 0 0 1-.708 0L11.993 4.8 7.746 9.046Zm0 5.908a.5.5 0 0 0-.707"/>
+</svg>