@knowark/componarkjs 1.7.3

package/lib/base/styles/styles.js

@@ -0,0 +1,320 @@
+const userActions = ['-hover',  '-active' ]
+
+const formActions = ['-focus-within', '-valid', '-invalid', '-checked']
+
+const actions = ['', ...userActions, ...formActions]
+
+const sides = ['', '-top', '-right', '-bottom', '-left']
+
+const mutableProperties = [
+  'display', 'background', 'color', 'outline',
+  'border-style', 'border-width', 'border-color', 'border-radius']
+
+const effects = [
+  'animation', 'filter', 'mix-blend-mode', 'transition', 'transform']
+
+const css = String.raw; export default css`
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  /* COLORS (RGB) */
+
+  --primary-rgb: 0, 0, 255; /* blue */
+  --secondary-rgb: 255, 165, 0; /* orange */
+  --tertiary-rgb: 238, 130, 238; /* violet */
+  --success-rgb: 0, 255, 0; /* green */
+  --danger-rgb: 255, 0, 0; /* red */
+  --warning-rgb: 255, 255, 0; /* yellow */
+  --info-rgb: 0, 255, 255; /* cyan */
+  --dark-rgb: 0, 0, 0; /* black */
+  --muted-rgb: 128, 128, 128; /* gray */
+  --light-rgb: 211, 211, 211; /*lightgray */
+
+  --primary: rgb(var(--primary-rgb));
+  --secondary: rgb(var(--secondary-rgb));
+  --success: rgb(var(--success-rgb));
+  --danger: rgb(var(--danger-rgb));
+  --warning: rgb(var(--warning-rgb));
+  --info: rgb(var(--info-rgb));
+  --dark: rgb(var(--dark-rgb));
+  --muted: rgb(var(--muted-rgb));
+  --light: rgb(var(--light-rgb));
+
+  /* TYPOGRAPHY */
+
+  --font-size-step: 0.25rem;
+  --line-height-step: 0.5;
+  --word-spacing-step: 0.1rem;
+  --letter-spacing-step: 0.05rem;
+
+  /* SPACING */
+
+  --margin-step: 4px;
+  --padding-step: 4px;
+
+  /* LAYOUT */
+
+  --row-step: 80px;
+  --column-step: 240px;
+  --gap-step: 4px;
+  --width-step: 12px;
+  --height-step: 12px;
+  --position-step: 12px;
+
+  /* BORDERS */
+
+  --border-width-step: 1px;
+  --outline-width-step: 1px;
+  --border-radius-step: 1px;
+
+  /* SHADOWS */
+
+  --box-shadow-offset-step: 1px;
+  --box-shadow-blur-step: 2px;
+  --box-shadow-spread-step: -0.25px;
+  --box-shadow-color: rgb(var(--dark-rgb), 0.5);
+}
+
+[style*='--all:'] {
+  all: var(--all);
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* COLORS */
+
+${actions.map(action => css`
+[style*='--color${action}:']${action.replace('-', ':')} {
+  color: var(--color${action});
+}
+`.trim()).join('\n')}
+${actions.map(action => css`
+[style*='--background${action}:']${action.replace('-', ':')} {
+  background: var(--background${action});
+}
+`.trim()).join('\n')}
+
+/* TYPOGRAPHY */
+
+[style*='--font-size:'] {
+  font-size: calc(var(--font-size-step) * var(--font-size));
+}
+[style*='--line-height:'] {
+  line-height: calc(var(--line-height-step) * var(--line-height));
+}
+[style*='--word-spacing:'] {
+  word-spacing: calc(var(--word-spacing-step) * var(--word-spacing));
+}
+[style*='--letter-spacing:'] {
+  letter-spacing: calc(var(--letter-spacing-step) * var(--letter-spacing));
+}
+
+/* SPACING */
+
+${sides.map(side => css`
+[style*='--margin${side}:'] {
+  margin${side}: calc(var(--margin-step) * var(--margin${side}));
+}
+`.trim()).join('\n')}
+[style*='--margin-horizontal:'] {
+  margin-left: calc(var(--margin-step) * var(--margin-horizontal));
+  margin-right: calc(var(--margin-step) * var(--margin-horizontal));
+}
+[style*='--margin-vertical:'] {
+  margin-top: calc(var(--margin-step) * var(--margin-vertical));
+  margin-bottom: calc(var(--margin-step) * var(--margin-vertical));
+}
+
+${sides.map(side => css`
+[style*='--padding${side}:'] {
+  padding${side}: calc(var(--padding-step) * var(--padding${side}));
+}
+`.trim()).join('\n')}
+[style*='--padding-horizontal:'] {
+  padding-left: calc(var(--padding-step) * var(--padding-horizontal));
+  padding-right: calc(var(--padding-step) * var(--padding-horizontal));
+}
+[style*='--padding-vertical:'] {
+  padding-top: calc(var(--padding-step) * var(--padding-vertical));
+  padding-bottom: calc(var(--padding-step) * var(--padding-vertical));
+}
+
+/* LAYOUT */
+
+[style*='--grid:'] {
+  display: grid;
+  grid: var(--grid);
+}
+[style*='--flow:'] {
+  display: grid;
+  grid-auto-flow: var(--flow);
+  place-items: center;
+}
+[style*='--row-span:'] {
+  grid-row: span var(--row-span);
+}
+[style*='--column-span:'] {
+  grid-column: span var(--column-span);
+}
+[style*='--rows:'] {
+  display: grid;
+  grid-template-rows: repeat(auto-fit, minmax(
+    min(100%, max(var(--row-step), 100%/var(--rows))), 1fr));
+}
+[style*='--columns:'] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(
+    min(100%, max(var(--column-step), 100%/var(--columns))), 1fr));
+}
+[style*='--gap:'] {
+  gap: calc(var(--gap-step) * var(--gap));
+}
+[style*='--display:'] {
+  display: var(--display);
+}
+
+[style*='--width:'] {
+  width: calc(var(--width-step) * var(--width));
+}
+[style*='--max-width:'] {
+  max-width: calc(var(--width-step) * var(--max-width));
+}
+[style*='--min-width:'] {
+  min-width: calc(var(--width-step) * var(--min-width));
+}
+
+[style*='--height:'] {
+  height: calc(var(--height-step) * var(--height));
+}
+[style*='--max-height:'] {
+  max-height: calc(var(--height-step) * var(--max-height));
+}
+[style*='--min-height:'] {
+  min-height: calc(var(--height-step) * var(--min-height));
+}
+
+[style*='--inset:'] {
+  inset: calc(var(--position-step) * var(--inset));
+}
+${sides.filter(Boolean).map(side => css`
+[style*='-${side}:'] {
+  ${side.replace('-', '')}: calc(var(--position-step) * var(-${side}));
+}
+`.trim()).join('\n')}
+
+/* BORDERS */
+
+${actions.map(action => css`
+[style*='--border-style${action}:']${action.replace('-', ':')} {
+  border-style: var(--border-style${action});
+}
+[style*='--border-width${action}:']${action.replace('-', ':')} {
+  border-width: var(--border-width${action});
+}
+[style*='--border-color${action}:']${action.replace('-', ':')} {
+  border-color: var(--border-color${action});
+}
+[style*='--border-radius${action}:']${action.replace('-', ':')} {
+  border-radius: var(--border-radius${action});
+}
+`.trim()).join('\n')}
+
+${actions.map(action => css`
+[style*='--outline${action}:']${action.replace('-', ':')} {
+  outline: var(--outline${action});
+}
+`.trim()).join('\n')}
+
+/* SHADOWS */
+
+${actions.map(action => css`
+[style*='--box-shadow${action}:']${action.replace('-', ':')} {
+  box-shadow: 0
+    calc(var(--box-shadow-offset-step) * var(--box-shadow${action}))
+    calc(var(--box-shadow-blur-step) * var(--box-shadow${action}))
+    calc(var(--box-shadow-spread-step) * var(--box-shadow${action}))
+    var(--box-shadow-color);
+}
+`.trim()).join('\n')}
+
+/* EFFECTS */
+
+${effects.map(effect => actions.map(action => css`
+[style*='--${effect}${action}:']${action.replace('-', ':')} {
+  ${effect}: var(--${effect}${action});
+}
+`.trim())).flat().join('\n')}
+
+/* COMBINATORS */
+
+${[...mutableProperties,  ...effects].map(
+  effect => userActions.map(action => css`
+*${action.replace('-', ':')} > [style*='--${effect}-parent${action}:'] {
+  ${effect}: var(--${effect}-parent${action});
+}
+`.trim())).flat().join('\n')}
+
+${[...mutableProperties, ...effects].map(
+  effect => formActions.map(action => css`
+*${action.replace('-', ':')} ~ [style*='--${effect}-antecessor${action}:'] {
+  ${effect}: var(--${effect}-antecessor${action});
+}
+`.trim())).flat().join('\n')}
+
+/* MEDIA QUERIES */
+
+@media (min-width: 960px) {             
+  [style*='--grid-large:'] {
+    display: grid;
+    grid: var(--grid-large);
+  }
+
+  [style*='--display-large:'] {
+    display: var(--display-large);
+  }
+}                                       
+
+/* ANIMATIONS */
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+`.trim()

package/lib/base/utils/define.js

@@ -0,0 +1,21 @@
+// @ts-nocheck
+
+/** @param {string} tag
+ * @param {CustomElementConstructor} element
+ * @param {string} styles **/
+export function define(tag, element, styles='') {
+  customElements.define(tag, element)
+  if (!styles?.trim()) return
+
+  try {
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync(styles)
+    return document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets, sheet]
+  } catch (error) {
+    const style = document.createElement('style')
+    style.textContent = styles
+    document.head.appendChild(style);
+  }
+
+}

package/lib/base/utils/define.test.js

@@ -0,0 +1,62 @@
+import { jest } from '@jest/globals'
+import { define } from './define.js'
+
+describe('Define', () => {
+  it('can define a custome element', () => {
+    class NewElement extends HTMLElement {}
+    define('new-element', NewElement)
+
+    const newElement = document.createElement('new-element')
+    expect(newElement).toBeTruthy()
+  })
+
+  it('can define a custom element using constructable CSSStyleSheet', () => {
+    let definedStyles = null
+    class MockCSSStyleSheet extends CSSStyleSheet {
+      replaceSync (styles) {
+        definedStyles = styles
+      }
+    }
+
+    jest.spyOn(window, "CSSStyleSheet").mockReturnValue(
+      new MockCSSStyleSheet())
+
+    class CSSStyledElement extends HTMLElement {}
+    const styles = `
+    body {
+      color: red;
+    }
+
+    div {
+      margin: 5px;
+    }
+    `
+
+    define('css-styled-element', CSSStyledElement, styles)
+
+    const styledElement = document.createElement('css-styled-element')
+    expect(styledElement).toBeTruthy()
+
+    expect(styles).toEqual(definedStyles)
+  })
+
+  it('can define a custom element using an style fallback element', () => {
+    class StyledElement extends HTMLElement {}
+    const styles = `
+    body {
+      color: red;
+    }
+
+    div {
+      margin: 5px;
+    }
+    `
+
+    define('styled-element', StyledElement, styles)
+
+    const styledElement = document.createElement('styled-element')
+    expect(styledElement).toBeTruthy()
+    const style = document.head.querySelector('style')
+    expect(style).toBeTruthy()
+  })
+})

package/lib/base/utils/format.js

@@ -0,0 +1,24 @@
+/**
+ * Convert Strings from camelCase to kebab-case
+ * @param {string} input @returns {string} */
+export function camelToKebab (input) {
+  return input.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/**
+ * Convert Strings from kebab-case to camelCase
+ * @param {string} input @returns {string} */
+export function kebabToCamel (input) {
+  return input.replace(/-([a-z])/g, function (g) {
+    return g[1].toUpperCase()
+  })
+}
+
+/**
+ * Convert Strings from snake to camelCase
+ * @param {string} input @returns {string} */
+export function snakeToCamel (input) {
+  return input.replace(/_([a-z])/g, function (g) {
+    return g[1].toUpperCase()
+  })
+}

package/lib/base/utils/format.test.js

@@ -0,0 +1,19 @@
+import { camelToKebab, kebabToCamel, snakeToCamel } from './format.js'
+
+describe('Format', () => {
+  it('can convert camel to kebab', () => {
+    const camel = 'myVariable'
+    const kebab = camelToKebab(camel)
+    expect(kebab).toBe('my-variable')
+  })
+  it('can convert kebab to camel', () => {
+    const kebab = 'my-variable'
+    const camel = kebabToCamel(kebab)
+    expect(camel).toBe('myVariable')
+  })
+  it('can convert snake to camel', () => {
+    const kebab = 'my_variable'
+    const camel = snakeToCamel(kebab)
+    expect(camel).toBe('myVariable')
+  })
+})

package/lib/base/utils/helpers.js

@@ -0,0 +1,96 @@
+import { camelToKebab } from './format.js'
+
+/** @param {HTMLElement} self */
+export function listen (self) {
+  const binding = self['binding']
+  const elements = self.querySelectorAll(`[${binding}]`)
+  for (const element of elements) {
+    for (const attribute of Array.from(element.attributes)) {
+      if (attribute.name.startsWith('on-')) {
+        const eventName = attribute.name.replace('on-', '').trim()
+        let handler = self[attribute.value]
+
+        const [assignment] = attribute.value.match(/[^{{]+(?=\}})/g) || []
+
+        if (assignment) {
+          let [objectPath, eventPath] = assignment.split('=')
+          eventPath = eventPath || 'target.value'
+          handler = function (event) {
+            set(this, objectPath.trim(), get(
+              event, eventPath, get(event, 'detail', '')))
+          } 
+        } 
+
+        if (!handler) continue
+
+        const catchingHandler = async function (event) {
+          try {
+            return await Promise.resolve(handler.bind(this)(event))
+          } catch (error) {
+            this.dispatchEvent(new CustomEvent('error', {
+              detail: error, bubbles: true, cancelable: true }))
+          }
+        }
+
+        element.addEventListener(eventName, catchingHandler.bind(self))
+        element.removeAttribute(binding)
+      }
+    }
+  }
+}
+
+/** @param {HTMLElement} self  */
+function provide (self) {
+  if (!self.provide) return
+  self.addEventListener('resolve', (event) => {
+    const resource = event.detail.resource
+    const dependency = self.provide(resource)
+    if (dependency === undefined) return
+    event.detail[resource] = dependency
+  })
+  
+}
+
+/** @param {HTMLElement} self @param {string[]} properties */
+export function reflect (self, properties) {
+  /** @type {PropertyDescriptorMap} */
+  const descriptors = {}
+  for (const property of properties) {
+    const attribute = camelToKebab(property)
+    descriptors[property] = {
+      get: () => self.getAttribute(attribute) || '',
+      set: value => {
+        if (value !== undefined) {
+          self.setAttribute(attribute, value)
+        }
+      }
+    }
+  }
+  Object.defineProperties(self, descriptors)
+  provide(self)
+}
+
+/** @param {object} object @param {string} path @param {any} value */
+export function set (object, path, value) {
+  const pathArray = path.match(/([^[.\]])+/g)
+
+  pathArray.reduce((accumulator, key, index) => {
+    if (accumulator[key.trim()] === undefined) accumulator[key.trim()] = {}
+    if (index === pathArray.length - 1) accumulator[key.trim()] = value
+    return accumulator[key.trim()]
+  }, object)
+}
+
+/** @param {object} object @param {string} path @param {any} fallback */
+export function get (object, path, fallback) {
+  const pathArray = path.match(/([^[.\]])+/g)
+
+  return pathArray.reduce((accumulator, key) => accumulator &&
+    accumulator[key.trim()], object) || fallback
+}
+
+/** @param {object} object @return {string} */
+export function keys (object) {
+  return Object.keys(object).filter(
+    key => Boolean(object[key])).join(' ')
+}

package/lib/base/utils/helpers.test.js

@@ -0,0 +1,154 @@
+import { listen, reflect, set, get, keys } from './helpers.js'
+
+describe('Helpers', () => {
+  it('does not allow invalid attribute', () => {
+    const element = document.createElement('div')
+    element.innerHTML = /* html */`
+      <button on-open="click" listen on-click="click" on-click="myMethod"
+      on-close="click"></button>
+    `
+
+    listen(element)
+
+    element.querySelector('button').click()
+    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
+  })
+
+  it('does not allow invalid attribute', () => {
+    const element = document.createElement('div')
+    element.innerHTML = /* html */`
+	    <button listen ark-on-click="myMethod"></button>
+	  `
+
+    listen(element)
+
+    element.querySelector('button').click()
+    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
+  })
+
+  it('attribute ', () => {
+    const button = document.createElement('button')
+    button.setAttribute('listen', '')
+    button.setAttribute('on-abc', 'method')
+    button.setAttribute('on-xyz', 'method')
+
+    const content = document.createElement('div')
+    content.appendChild(button)
+
+    listen(content)
+  })
+
+  it('It does not allow to execute undeclared methods.', () => {
+    const element = document.createElement('div')
+    element.innerHTML = /* html */`
+	    <button listen on-click="myMethod"></button>
+	  `
+
+    listen(element)
+
+    element.querySelector('button').click()
+    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
+  })
+
+  it('can listen events', () => {
+    const element = document.createElement('div')
+    element['binding'] = 'listen'
+    element.innerHTML = /* html */`
+	    <button listen on-click="myMethod"></button>
+	  `
+    // @ts-ignore
+    element.myMethod = function () {
+      element.setAttribute('clicked-element', '')
+    }
+
+    listen(element)
+
+    element.querySelector('button').click()
+    expect(element.hasAttribute('clicked-element')).toBeTruthy()
+  })
+
+  it('ignores missing methods when listening', () => {
+    const element = document.createElement('div')
+    element['binding'] = 'listen'
+    element.innerHTML = /* html */`
+	    <button listen on-click="missing"></button>
+	  `
+    // @ts-ignore
+    element.myMethod = function () {
+      element.setAttribute('clicked-element', '')
+    }
+
+    listen(element)
+
+    element.querySelector('button').click()
+    expect(element.hasAttribute('clicked-element')).toBeFalsy()
+  })
+
+  it('can create attribute', () => {
+    const element = document.createElement('div')
+    const properties = ['myProperty']
+
+    reflect(element, properties)
+
+    // @ts-ignore
+    element.myProperty = 'value'
+
+    // @ts-ignore
+    expect(element.myProperty).toBe('value')
+    expect(element.hasAttribute('my-property')).toBeTruthy()
+  })
+
+  it('cannot create attribute with property undefined', () => {
+    const element = document.createElement('div')
+    const properties = ['myProperty']
+
+    reflect(element, properties)
+
+    // @ts-ignore
+    element.myProperty = undefined
+
+    // @ts-ignore
+    expect(element.myProperty).toBe('')
+    expect(!element.hasAttribute('my-property')).toBeTruthy()
+  })
+
+  it('sets an object properties by a given path', () => {
+    const object = {}
+
+    set(object, 'value.data', 'Hello')
+
+    expect(object.value.data).toEqual('Hello')
+  })
+
+  it('gets an object properties by a given path', () => {
+    const object = {state: {data: {value: 25}}, data: 13}
+
+    let value = get(object, 'data')
+
+    expect(value).toEqual(13)
+
+    value = get(object, 'state.data.value')
+
+    expect(value).toEqual(25)
+
+    const fallback = get(object, 'state.missing.value', 7)
+
+    expect(fallback).toEqual(7)
+  })
+
+  it('retrieves the object keys of truthy values', () => {
+    const background = 'primary'
+    const shadow = 'small'
+    const color = ''
+
+    const classes = {
+      [`background-${background}`]: background,
+      [`color-${color}`]: color,
+      [`shadow-${shadow}`]: shadow,
+    }
+
+    let result = keys(classes)
+
+    expect(result).toEqual('background-primary shadow-small')
+  })
+})

package/lib/base/utils/index.js

@@ -0,0 +1,5 @@
+export * from './define.js'
+export * from './format.js'
+export * from './helpers.js'
+export * from './slots.js'
+export * from './uuid.js'