acinguiux-preact-ui

Preact UI library with atoms, molecules, organisms, and web components for building branded multi-page experiences.

Links

• Documentation: acinguiuxpreactdoc | Home
• Sample website: Home
• Starter kit ZIP: Download Starter Kit

Installation

npm install acinguiux-preact-ui preact

Starter kit quick start:

1. Download the ZIP from the link above.
2. Extract it.
3. Run:

npm install
npm run dev

Peer dependency:

• preact ^10.29.2

Import Paths

• acinguiux-preact-ui: core runtime utilities
• acinguiux-preact-ui/matter: atoms, molecules, organisms
• acinguiux-preact-ui/preact: preact re-export
• acinguiux-preact-ui/preact/hooks: preact hooks re-export

Simple Setup (Navbar + Multi-Page)

Use this as a quick starter structure.

import { h, renderPage } from 'acinguiux-preact-ui'
import {
  Page,
  PageHeader,
  Navigation,
  Container,
  Heading,
  LegalFooter,
  Link,
  RichText
} from 'acinguiux-preact-ui/matter'

const routes = {
  '/': {
    title: 'Home',
    body: '<p>Welcome to the home page.</p>'
  },
  '/about': {
    title: 'About',
    body: '<p>About this application.</p>'
  },
  '/contact': {
    title: 'Contact',
    body: '<p>Contact details here.</p>'
  }
}

const currentPath = location.pathname in routes ? location.pathname : '/'
const pageData = routes[currentPath]

const navLinks = [
  h(Link, { href: '/', text: 'Home' }),
  h(Link, { href: '/about', text: 'About' }),
  h(Link, { href: '/contact', text: 'Contact' })
]

const model = {
  links: [
    { name: 'theme', value: '/themes/theme-base' }
  ]
}

const page = h(Page, {
  _model: model,
  children: [
    h(PageHeader, { title: pageData.title }),
    h(Navigation, { links: navLinks }),
    h(Container, {
      children: [
        h(Heading, { level: 2, text: pageData.title }),
        h(RichText, pageData.body)
      ]
    }),
    h(LegalFooter)
  ]
})

renderPage(page, document.getElementById('app'))

Themes

Themes are located in src/content/themes.

Primary yellow themes:

• theme-yellow-classic
• theme-base

Note: renaming theme folders is a breaking change for existing consumers. Do this in a new version release.

Testing

npm test

Code Coverage

Coverage uses Istanbul instrumentation with Playwright.

Run:

npm run test:coverage

Reports are generated under:

• target/playwright/coverage/lcov.info
• target/playwright/coverage/clover.xml
• target/playwright/coverage/cobertura-coverage.xml

Optional HTML report:

npx nyc report --reporter=html --temp-dir=target/playwright/coverage --report-dir=target/playwright/coverage/html

Open target/playwright/coverage/html/index.html.

Scripts

• npm start: dev build
• npm run build: production build
• npm test: playwright tests
• npm run test:coverage: tests with coverage instrumentation

Keywords

• preact
• components
• design-system
• web-components
• ui-library
• themes
• navbar
• multi-page

License

See LICENSE.