acinguiux-preact-components 0.0.1

package/src/main/shared/update-head.js

@@ -0,0 +1,34 @@
+function findElement (name, attrs) {
+  const attrString = Object.entries(attrs).map(([k, v]) => `[${k}="${v}"]`).join('')
+  const selector = `${name}${attrString}`
+
+  return document.querySelector(selector)
+}
+
+function setAttrs (element, attrs) {
+  for (const [k, v] of Object.entries(attrs)) {
+    // Set only if different. Prevents re-setting styles.
+    if (element.getAttribute(k) !== v) {
+      element.setAttribute(k, v)
+    }
+  }
+}
+
+export default function updateHead (name, attrsToSearch, attrsToSet) {
+  const remove = Object.values(attrsToSet).every(a => a === null || a === undefined)
+  let element = findElement(name, attrsToSearch)
+
+  if (remove) {
+    element?.remove()
+    return
+  }
+
+  if (!element) {
+    // Create element if does not exist.
+    element = document.createElement(name)
+    setAttrs(element, attrsToSearch)
+    document.head.appendChild(element)
+  }
+
+  setAttrs(element, attrsToSet)
+}

package/src/main/shared/update-scrollbar-width.js

@@ -0,0 +1,30 @@
+const STYLE = [
+  'overflow-y: scroll',
+  'width: 100px',
+  'height: 100px',
+  'position: absolute',
+  'top: -9999'
+].join('; ')
+const DEBOUNCE = 500
+
+function setScrollbarWidthProperty () {
+  const div = document.createElement('div')
+  div.setAttribute('style', STYLE)
+  document.body.appendChild(div)
+  const scrollbarWidth = div.offsetWidth - div.clientWidth
+  div.remove()
+
+  document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`)
+}
+
+export default function updateScrollbarWidth () {
+  setScrollbarWidthProperty()
+
+  let resizeId = null
+  window.addEventListener('resize', () => {
+    clearTimeout(resizeId)
+    resizeId = setTimeout(() => {
+      setScrollbarWidthProperty()
+    }, DEBOUNCE)
+  })
+}

package/src/main/shared/use-link.js

@@ -0,0 +1,151 @@
+/* global location, confirm, history */
+import { useLayoutEffect, useState } from 'preact/hooks'
+import getMeta from './get-meta.js'
+import getSize from './get-size.js'
+
+const DOWNLOADABLE_EXTENSIONS = new Set(['zip', 'pdf', 'docx', 'xlsx', 'pptx', 'txt', 'csv', 'xps'])
+const DOMAIN_WHITELIST = [
+  'google.com',
+  'facebook.com',
+  'fuelrewards.com',
+  'instagram.com',
+  'linkedin.com',
+  'primeenergy.com.br',
+  'raizen.com',
+  'raizen.com.br',
+  'sonnen.de',
+  'twitter.com',
+  'ubitricity.com',
+  'vk.com',
+  'weibo.com',
+  'x.com',
+  'youku.com',
+  'youtube.com',
+  'share.google',
+]
+// Treat localhost as a trusted domain (similar behaviour to acinguiux domains) to ensure consistent behaviour in dev and prod.
+const LITERAL_WHITELIST = ['i.youku.com', 'localhost', 'wa.me']
+const WHITELIST = new Set([...DOMAIN_WHITELIST.flatMap(w => [w, `www.${w}`]), ...LITERAL_WHITELIST])
+
+// -----------------------------------------------------------------------------
+// Main export
+// -----------------------------------------------------------------------------
+
+// Simple link cache.
+const cache = {}
+
+export default function useLink ({ href, text, target }) {
+  const [state, setState] = useState({ text, target })
+  // Resolve cached links.
+  const key = `${href} :: ${text} :: ${target}`
+  if (cache[key]) {
+    return cache[key]
+  }
+
+  useLayoutEffect(() => {
+    const resolveLink = async () => {
+      if (!href) {
+        return null
+      }
+
+      // Javascript link sanitisation.
+      const urlObj = new URL(href, location)
+
+      // eslint-disable-next-line sonarjs/code-eval
+      if (['javascript:', 'vbscript:', 'data:'].some(p => href.startsWith(p))) {
+        console.error(`Invalid URL: '${href}'`)
+        return null
+      }
+
+      const newState = { ...state, text, href }
+
+      if (isHashOnlyLink(urlObj)) {
+        return newState
+      }
+
+      if (isDownloadLink(urlObj)) {
+        const downloadSuffix = await getDownloadSuffix(href)
+        return { ...newState, text: text + downloadSuffix, target: '_blank', isDownload: true }
+      }
+
+      if (isExternalLink(urlObj) && isTrustedLink(urlObj)) {
+        return { ...newState, onClick: target === '_blank' ? undefined : navigationHandler }
+      }
+
+      if (isExternalLink(urlObj)) {
+        return { ...newState, target: '_blank', onClick: getDisclaimerHandler('external-disclaimer-text') }
+      }
+
+      if (isPageLink(urlObj)) {
+        // Do not handle navigation when forced to new window.
+        return { ...newState, onClick: target === '_blank' ? undefined : navigationHandler }
+      }
+
+      return newState
+    }
+
+    resolveLink().then(newState => {
+      newState && setState(newState)
+      cache[key] = newState ?? state
+    })
+  }, [href, text, target])
+
+  return state
+}
+
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+
+export function isDownloadLink ({ href }) {
+  const ext = href?.substring?.(href?.lastIndexOf?.('.') + 1)
+  return DOWNLOADABLE_EXTENSIONS.has(ext)
+}
+
+export function isTrustedLink ({ hostname }) {
+  return hostname?.includes?.('acinguiux') || WHITELIST.has(hostname)
+}
+
+function isExternalLink ({ hostname }) {
+  return hostname && hostname !== location.hostname
+}
+
+function isHashOnlyLink ({ hash, href }) {
+  return hash && href.replace(/#.*/, '') === location.href.replace(/#.*/, '')
+}
+
+function isPageLink ({ hostname, pathname }) {
+  return location.hostname === hostname && (pathname.endsWith('/') || pathname.includes('.html'))
+}
+
+function getDisclaimerHandler (meta) {
+  const disclaimerText = getMeta(meta)
+  return disclaimerText ? event => !confirm(disclaimerText) && event.preventDefault() : null
+}
+
+async function getDownloadSuffix (href) {
+  const ext = href.substring(href.lastIndexOf('.') + 1)
+
+  try {
+    const res = await fetch(href, { headers: { Range: 'bytes=0-0' } })
+    const contentRange = res.headers.get('content-range')
+    const length = /bytes \d+-\d+\/(\d+)/.exec(contentRange)?.[1]
+    const fileSize = getSize(length)
+    return ` (${ext.toUpperCase()}, ${fileSize})`
+  } catch (error) {
+    console.log(`Unable to resolve file size: ${href}`, error)
+    return ` (${ext.toUpperCase()})`
+  }
+}
+
+function navigationHandler (event) {
+  const el = event.currentTarget
+  const elUrl = el.getAttribute('action') || el.getAttribute('href')
+
+  // Disable handler when forcing a new tab (ctrl + click).
+  if (!event.defaultPrevented && !event.ctrlKey && !event.altKey && !event.metaKey) {
+    history.pushState({}, '', elUrl)
+    globalThis.dispatchEvent(new Event('popstate'))
+    event.preventDefault()
+  }
+}

package/src/main/shared/use-persistent-state.js

@@ -0,0 +1,42 @@
+import { useState, useLayoutEffect } from 'preact/hooks'
+
+const PREFIX = 'acinguiux-preact_'
+
+export default function usePersistentState (key, initialState) {
+  const [state, setState] = useState(getGlobal(key) ?? initialState)
+  setGlobal(key, state) // Save initial state.
+
+  useLayoutEffect(() => {
+    // Update local state when the global state changes.
+    const listener = () => {
+      // Prevent empty state.
+      const globalState = getGlobal(key) ?? initialState
+      setState(globalState)
+    }
+
+    globalThis.addEventListener('storage', listener)
+    return () => globalThis.removeEventListener('storage', listener)
+  }, [key])
+
+  const setPersistentState = callback => {
+    const newState = callback(getGlobal(key))
+
+    // Update both global and local states.
+    if (JSON.stringify(newState) !== JSON.stringify(state)) {
+      setGlobal(key, newState)
+      // Force change in the same window.
+      globalThis.dispatchEvent(new Event('storage'))
+    }
+  }
+
+  return [state, setPersistentState]
+}
+
+function getGlobal (key) {
+  const value = localStorage.getItem(`${PREFIX}${key}`)
+  return value ? JSON.parse(value) : null
+}
+
+function setGlobal (key, value) {
+  localStorage.setItem(`${PREFIX}${key}`, JSON.stringify(value))
+}

package/src/main/shared/wait-for-dom-ready.js

@@ -0,0 +1,6 @@
+export default async function waitForDomReady () {
+  return new Promise(resolve => {
+    globalThis.addEventListener('DOMContentLoaded', resolve)
+    document.readyState !== 'loading' && resolve()
+  })
+}

package/src/main/shared/wcm-mode.js

@@ -0,0 +1,4 @@
+const wcmMode = document.documentElement.dataset.mode
+const isPublish = wcmMode === 'publish'
+const isEdit = wcmMode === 'edit'
+export { isEdit, isPublish }

package/src/wcs/components/acinguiux-preact-doc/acinguiux-preact-doc.js

@@ -0,0 +1,207 @@
+/* global location */
+import { marked } from 'marked'
+import { UTILS } from '#acinguiux-preact/main/shared/twind.js'
+import idFromString from '#acinguiux-preact/main/shared/id-from-string.js'
+
+const { h, register, matter, preactHooks, dataset, version } = globalThis.ami
+const { Box, Link, RichText, List, Table, Heading } = matter
+const { useState, useEffect } = preactHooks
+
+const JS_EXAMPLE_PATTERN = /```js example(.+?(?=```))```/gs
+const MATTER = Object.keys(globalThis.ami.matter).map(key => `const ${key} = window.ami.matter.${key}`).join('\n')
+
+function getData () {
+  const signature = new URL(location.href)
+  signature.pathname = signature.pathname.replace(/.html$/, '.model.json')
+  signature.search = ''
+  signature.hash = ''
+
+  const data = dataset[signature.href]
+    ?.children[0] // WebComponent
+    ?.model
+    ?.text
+
+  return { data }
+}
+
+function getTitleAndText (topicData) {
+  let title = ''
+  const text = topicData
+    // Add hash links.
+    .replaceAll(/(Atoms|Molecules|Organisms|Misc)\.([A-Za-z0-9]+)/gm, (match, _p1, p2) => `[${match}](#${p2.toLowerCase()})`)
+    // Remove examples.
+    .replaceAll(JS_EXAMPLE_PATTERN, '')
+    .replaceAll(/^# (.*)$/gm, (_match, g1) => {
+      title = g1
+      return ''
+    })
+
+  return [title, text]
+}
+
+function getExamples (topicData) {
+  const examples = []
+  topicData.replaceAll(JS_EXAMPLE_PATTERN, (_match, p1) => {
+    examples.push(p1.trim())
+    return ''
+  })
+  return examples
+}
+
+function getElementByHash () {
+  return document.getElementsByTagName('acinguiux-preact-doc')?.[0].shadowRoot.getElementById(location.hash?.substring(1))
+}
+
+function Styles () {
+  return h('div', { className: 'space-y-4 mt-6' },
+    h(Heading, { _level: 2, _size: 4 }, 'Utility class reference'),
+    h(Table,
+      h('tr',
+        h('th', { className: 'w-1/5' }, 'Name'),
+        h('th', 'Style')
+      ),
+      Array.from(UTILS).map(([util, css]) => h('tr',
+        h('td',
+          h('code', { className: 'text-xs' }, util)
+        ),
+        h('td',
+          h('pre',
+            h('code', { className: 'text-xs break-all whitespace-pre-wrap' }, css.replace('  }', '}'))
+          )
+        )
+      ))
+    )
+  )
+}
+
+function Markdown ({ content }) {
+  const renderer = {
+    heading ({ text, depth }) {
+      const level = depth === 2 ? 3 : depth
+      // Decrease the size of H2 for better readability.
+      return `<h${depth} _level="${level}">${text}</h${depth}>`
+    },
+    code ({ text }) {
+      return `<pre><code>${sanitizeTags(text)}</code></pre>`
+    },
+    codespan ({ text }) {
+      return `<code data-topic-code>${sanitizeTags(text)}</code>`
+    }
+  }
+  marked.use({ renderer })
+  const markedText = marked(content)
+  return h(RichText, markedText)
+}
+
+function TopicLink ({ topic }) {
+  return h(Link, {
+    _variant: 'underline',
+    _model: { name: topic, value: `#${topic.toLowerCase()}` }
+  })
+}
+
+function Preview ({ example }) {
+  const code = `(function () {
+      const { h, preactHooks } = window.ami
+      const { useState } = preactHooks
+      ${MATTER}
+      return ${example}
+    })()
+  `
+
+  let result
+  try {
+    result = (0, eval)(code) // eslint-disable-line no-eval
+  } catch (error) {
+    console.error(code)
+    console.error(error)
+    result = 'ERROR: Unable to parse!'
+  }
+
+  return result
+}
+
+function Example ({ example }) {
+  return h('div', { className: 'lg:grid grid-cols-2 bg-bga text-txa border-txa/20  border-t' },
+    h('div', { className: 'col-span-1 p-4 border-l border-r bg-bga text-txa border-txa/20' },
+      h('div', { className: 'bg-bga text-txa border-txa/20' },
+        h(Preview, { example })
+      )
+    ),
+    h('div', { className: 'col-span-1 p-4 border-r bg-bga text-txa border-txa/20 md:border sm:border sm:break-all' },
+      h('pre', { className: 'text-sm' },
+        h('code', { className: 'whitespace-pre-wrap break-all' }, example)
+      )
+    )
+  )
+}
+
+// Define Preact component.
+function AcinguiuxPreactDoc () {
+  const [state, setState] = useState({})
+
+  useEffect(() => {
+    setState(getData())
+    // Jump to element on hash change.
+    globalThis.addEventListener('hashchange', () => {
+      getElementByHash()?.scrollIntoView()
+    })
+  }, [])
+
+  if (!state.data) {
+    return null
+  }
+
+  // Get topics.
+  const sections = []
+  for (const [category, categoryData] of Object.entries(state.data)) {
+    for (const [topic, topicData] of Object.entries(categoryData)) {
+      const [title, text] = getTitleAndText(topicData)
+      const examples = getExamples(topicData)
+
+      sections.push(h(Box,
+        // Use z-10 for sticky elements.
+        h('div', { className: 'sticky top-0 bg-bga border-txa/20 border-b pb-2 z-10' },
+          h(Heading, { _level: 1, id: idFromString(title) },
+            h(Link, {
+              _variant: 'simple',
+              _model: { name: `${category} :: ${title}`, value: `#${title.toLowerCase()}` }
+            })
+          )
+        ),
+        h('div', { className: 'space-y-2' },
+          text && h(Markdown, { content: text }),
+          examples.length > 0 && h('div', { className: 'bg-bga text-txa border-txa/20 lg:border-b md:space-y-5 sm:space-y-5' }, examples.map(example =>
+            h(Example, { key: topic, example })
+          )),
+          topic === 'Styles' && h(Styles)
+        )
+      ))
+    }
+  }
+
+  return state.data && h('div', { className: 'bg-bga text-txa' },
+    h('div', { className: 'lg:flex m-auto', style: 'max-width: 1500px' },
+      // Navigation.
+      h(Box, { className: 'grow-0 shrink-0' },
+        h('p', version),
+        Object.keys(state.data).map(category => [
+          h('h3', { className: 'font-custom text-2xl' }, category),
+          h(List, Object.keys(state.data[category]).map(topic =>
+            h('li',
+              h(TopicLink, { topic })
+            )
+          ))
+        ])
+      ),
+      // Topic body.
+      h('div', sections)
+    )
+  )
+}
+
+function sanitizeTags (text) {
+  return text.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+}
+
+register(AcinguiuxPreactDoc, 'acinguiux-preact-doc')