@knowark/componarkjs 1.7.3

package/lib/components/translate/components/translate.test.js

@@ -0,0 +1,226 @@
+import { Translate } from './translate.js'
+
+describe('Translate', () => {
+  let container = null
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = /* html */`
+    <ark-translate>
+    </ark-translate>
+    `
+
+    const translate = container.querySelector('ark-translate')
+
+    expect(translate).toBeTruthy()
+    expect(translate).toBe(translate.init())
+  })
+
+  it('translates the marked text inside the given root', async () => {
+    const root = document.createElement('div')
+    root.innerHTML = /* html */`
+    <span data-i18n="hello">Hello</span>
+    <p>
+      <span data-i18n="happy">Happy</span>!!!
+      <span data-i18n="world">World</span>!!!
+    </p>
+    `
+    container.appendChild(root)
+    const translateContainer = document.createElement('div')
+    translateContainer.innerHTML = /* html */`
+    <ark-translate>
+      <template>{
+        "en": {
+          "default": {
+            "hello": "Hello",
+            "world": "World"
+          }
+        },
+        "es": {
+          "default": {
+            "hello": "Hola",
+            "world": "Mundo"
+          }
+        }
+      }</template>
+    </ark-translate>
+    `
+    container.appendChild(translateContainer)
+    const translate = /** @type Translate **/  (
+      translateContainer.querySelector('ark-translate'))
+
+    await translate.transliterate()
+
+    const expectedRoot = document.createElement('div')
+    expectedRoot.innerHTML = /* html */`
+    <span data-i18n="hello">Hola</span>
+    <p>
+      <span data-i18n="happy">Happy</span>!!!
+      <span data-i18n="world">Mundo</span>!!!
+    </p>
+    `
+    expect(root).toEqual(expectedRoot)
+  })
+
+  it('might use different translation languages and namespaces', async () => {
+    const root = document.createElement('div')
+    root.innerHTML = /* html */`
+    <span data-i18n="introModule:hello">hello</span>
+    <p>
+      <span data-i18n="introModule:happy">happy</span>!!!
+      <span data-i18n="introModule:world">world</span>!!!
+    </p>
+    `
+    container.appendChild(root)
+    const translateContainer = document.createElement('div')
+    translateContainer.innerHTML = /* html */`
+    <ark-translate>
+      <template>{
+        "es": {
+          "default": {
+            "hello": "Hola",
+            "world": "Mundo"
+          },
+          "introModule": {
+            "hello": "Quiubo",
+            "world": "Gente"
+          }
+        },
+        "en": {
+          "default": {
+            "hello": "Hello",
+            "world": "World"
+          },
+          "introModule": {
+            "hello": "Hey",
+            "world": "Folks"
+          }
+        }
+      }</template>
+    </ark-translate>
+    `
+    container.appendChild(translateContainer)
+    const translate = /** @type Translate **/ (
+      translateContainer.querySelector('ark-translate'))
+
+    let options = { language: 'en', }
+    await translate.transliterate(options)
+
+    const expectedRoot = document.createElement('div')
+    expectedRoot.innerHTML = /* html */`
+    <span data-i18n="introModule:hello">Hey</span>
+    <p>
+      <span data-i18n="introModule:happy">happy</span>!!!
+      <span data-i18n="introModule:world">Folks</span>!!!
+    </p>
+    `
+    expect(root).toEqual(expectedRoot)
+
+
+    // Unknown Namespace:
+
+    root.innerHTML = /* html */`
+    <span data-i18n="unknown:hello">Hello</span>
+    <p>
+      <span data-i18n="unknown:happy">Happy</span>!!!
+      <span data-i18n="unknown:world">World</span>!!!
+    </p>
+    `
+
+    options = { language: 'es' }
+    await translate.transliterate(options)
+
+    expectedRoot.innerHTML = /* html */`
+    <span data-i18n="unknown:hello">Hello</span>
+    <p>
+      <span data-i18n="unknown:happy">Happy</span>!!!
+      <span data-i18n="unknown:world">World</span>!!!
+    </p>
+    `
+    expect(root).toEqual(expectedRoot)
+  })
+
+  it('translates the page content on language changes', async () => {
+    const translateContainer = document.createElement('div')
+    translateContainer.innerHTML = /* html */`
+    <ark-translate languages="es,en">
+      <template>{
+        "es": {
+          "default": {
+            "hello": "Hola",
+            "world": "Mundo"
+          }
+        },
+        "en": {
+          "default": {
+            "hello": "Hello",
+            "world": "World"
+          }
+        }
+      }</template>
+    </ark-translate>
+    `
+    container.appendChild(translateContainer)
+    const translate = /** @type Translate **/ (
+      translateContainer.querySelector('ark-translate'))
+    const mockEvent = {
+      target: {value: 'en'}, stopPropagation: () => {}}
+    let givenOptions = null
+    translate.transliterate = async (options) => {
+      givenOptions = options }
+
+    await translate.onLanguageChanged(mockEvent)
+
+    expect(givenOptions).toEqual({language: 'en'})
+  })
+
+
+  it('fetches its translation files from the server', async () => {
+    const root = document.createElement('div')
+    root.innerHTML = /* html */`
+    <span data-i18n="hello">hello</span>
+    <p>
+      <span data-i18n="happy">happy</span>!!!
+      <span data-i18n="world">world</span>!!!
+    </p>
+    `
+    container.appendChild(root)
+    const translateContainer = document.createElement('div')
+    translateContainer.innerHTML = `
+    <ark-translate languages="es,en"></ark-translate>
+    `
+    container.appendChild(translateContainer)
+    const translate = /** @type Translate **/ (
+      translateContainer.querySelector('ark-translate'))
+
+    const mockFetch = async (url) => ({
+      json: async () => ({
+        "hello": "Hola",
+        "world": "Mundo",
+        "happy": "Feliz"
+      })
+    })
+    translate.init({ global: {
+      fetch: mockFetch, document: document } })
+
+    await translate.transliterate({language: 'es'})
+
+    const expectedRoot = document.createElement('div')
+    expectedRoot.innerHTML = /* html */`
+    <span data-i18n="hello">Hola</span>
+    <p>
+      <span data-i18n="happy">Feliz</span>!!!
+      <span data-i18n="world">Mundo</span>!!!
+    </p>
+    `
+    expect(root).toEqual(expectedRoot)
+  })
+})

package/lib/components/translate/index.js

@@ -0,0 +1 @@
+export { Translate } from './components/translate.js'

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from './base/index.js'
+export * from './components/index.js'

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@knowark/componarkjs",
+  "version": "1.7.3",
+  "author": "Knowark",
+  "description": "Knowark's Web Components Library",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' npx jest --coverage",
+    "dev": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' webpack serve --mode development --env development",
+    "prod": "NODE_OPTIONS='--experimental-vm-modules --no-warnings' webpack --mode production --env production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/knowark/componark.git"
+  },
+  "keywords": [
+    "web",
+    "components"
+  ],
+  "devDependencies": {
+    "@knowark/injectarkjs": "^0.9.1",
+    "@knowark/routarkjs": "^0.6.5",
+    "@types/jest": "^29.5.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.1",
+    "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.5.1",
+    "jest-environment-jsdom": "^29.5.0",
+    "jsdom": "^22.1.0",
+    "npm-check-updates": "^16.10.12",
+    "webpack": "^5.85.1",
+    "webpack-cli": "^5.1.3",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "directories": {
+    "test": "tests"
+  },
+  "standard": {
+    "env": [
+      "jest"
+    ]
+  },
+  "jest": {
+    "verbose": true,
+    "clearMocks": true,
+    "testEnvironment": "jsdom",
+    "coverageDirectory": "/tmp/componark/coverage",
+    "transform": {},
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "lib"
+    ],
+    "collectCoverageFrom": [
+      "**/lib/**",
+      "!**/showcase/**"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!@knowark)"
+    ]
+  }
+}

package/showcase/design/.htaccess

@@ -0,0 +1,8 @@
+RewriteEngine On
+RewriteCond %{HTTPS} off
+RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+RewriteCond %{REQUEST_FILENAME} -f [OR]
+RewriteCond %{REQUEST_FILENAME} -d
+RewriteRule ^ - [L]
+RewriteRule ^ index.html

package/showcase/design/core/factories/development/development.factory.js

@@ -0,0 +1,5 @@
+import { StandardFactory, standardStrategy } from '../standard.factory.js'
+
+export class DevelopmentFactory extends StandardFactory { }
+
+export const developmentStrategy = Object.assign({}, standardStrategy, {})

package/showcase/design/core/factories/development/index.js

@@ -0,0 +1 @@
+export * from './development.factory.js'

package/showcase/design/core/factories/index.js

@@ -0,0 +1,11 @@
+import { 
+  DevelopmentFactory, developmentStrategy 
+} from './development/index.js'
+
+/** @param {string} target */
+export function buildInjector (target) {
+  return {
+    strategy: developmentStrategy,
+    factory: new DevelopmentFactory()
+  }
+}

package/showcase/design/core/factories/standard.factory.js

@@ -0,0 +1,19 @@
+import { Routark } from '@knowark/routarkjs'
+
+export class StandardFactory {
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _router () {
+    const design = process.env.ARK_DESIGN
+    return new Routark(window, `/${design}/`)
+  }
+}
+
+export const standardStrategy = {
+  Router: {
+    method: 'router'
+  }
+}

package/showcase/design/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,
+      initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>Componark</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
+    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
+    crossorigin="anonymous" />
+  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap" rel="stylesheet">
+
+</head>
+
+<body>
+  <main></main>
+</body>
+
+</html>

package/showcase/design/index.js

@@ -0,0 +1,7 @@
+import { main } from './screens/main.js'
+
+// @ts-ignore
+// eslint-disable-next-line no-undef
+const target = TARGET
+
+main(target)

package/showcase/design/screens/base/audio/audioDemo.js

@@ -0,0 +1,32 @@
+import { Component } from 'base/component/index.js'
+
+export class AudioDemo extends Component {
+  init (context) {
+    return super.init(context)
+  }
+
+  render () {
+    this.content = /* html */ `
+      <ark-audio></ark-audio>
+
+      <a 
+        target="_blank"
+        href="https://github.com/knowark/componark/blob/master/lib/components/audio/README.md">
+      * Reference
+      </a>
+    `
+    return super.render()
+  }
+}
+
+const styles = `
+  demo-audio{
+    padding: 1rem;
+  }
+
+  audio{
+    margin: 1rem;
+  }
+`
+ 
+Component.define('demo-audio', AudioDemo, styles)

package/showcase/design/screens/base/audio/index.js

@@ -0,0 +1,25 @@
+import { AudioDemo } from './audioDemo.js'
+
+export function hub (parentResolver) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      AudioDemo: {
+        method: 'component'
+      }
+    },
+    factory: new ComponentFactory()
+  })
+
+  return resolver.resolve('AudioDemo')
+}
+
+export class ComponentFactory {
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _component () {
+    return new AudioDemo()
+  }
+}

package/showcase/design/screens/base/camera/cameraDemo.js

@@ -0,0 +1,83 @@
+import { Component } from 'base/component/index.js'
+
+const tag = 'demo-camera'
+export class CameraDemo extends Component {
+  render () {
+    this.innerHTML = /* html */ `
+      <div class="camera-container">
+          <ark-camera></ark-camera>
+          <div class="menu">
+            <ark-button background="primary" listen on-click="takepicture">Take photo</ark-button>
+            <ark-button background="success" listen on-click="startCamera">Start</ark-button>
+            <ark-button background="danger"  color="dark" listen on-click="stopCamera">stop</ark-button>
+          </div>
+      </div>
+
+      <img data-photo>
+
+      <br>
+
+      <a 
+        target="_blank"
+        href="https://github.com/knowark/componark/blob/master/lib/components/camera/README.md">
+      * Reference
+      </a>
+    `
+
+    this.camera['start']()
+
+    return super.render()
+  }
+
+  disconnectedCallback () {
+    this.camera['stop']()
+  }
+
+  takepicture () {
+    this.photo.setAttribute('src', this.camera['dataURL'](200, 200))
+  }
+
+  startCamera () {
+    this.camera['start']()
+  }
+
+  stopCamera () {
+    this.camera['stop']()
+  }
+
+  get camera () {
+    return this.select('ark-camera')
+  }
+
+  /** @returns {HTMLImageElement} */
+  get photo () {
+    return this.querySelector('[data-photo]')
+  }
+
+}
+
+const styles = /* css */`
+
+        demo-camera{
+          display: flex;
+          flex-direction: column;
+        }
+
+        ark-camera, img{
+          border-radius: 5px;
+        }
+
+        .camera-container{
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          padding: 1rem;
+          width: 100%;
+        }
+
+        .ark-button{
+          margin:1rem 0.6rem;
+        }
+
+`
+Component.define(tag, CameraDemo, styles)

package/showcase/design/screens/base/camera/index.js

@@ -0,0 +1,25 @@
+import { CameraDemo } from './cameraDemo.js'
+
+export function hub (parentResolver) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      CameraDemo: {
+        method: 'component'
+      }
+    },
+    factory: new ComponentFactory()
+  })
+
+  return resolver.resolve('CameraDemo')
+}
+
+export class ComponentFactory {
+  /** @param {string} method */
+  extract (method) {
+    return this[`_${method}`]
+  }
+
+  _component () {
+    return new CameraDemo()
+  }
+}

package/showcase/design/screens/base/droparea/dropareaDemo.js

@@ -0,0 +1,88 @@
+import { Component } from 'base/component/index.js'
+
+const tag = 'demo-droparea'
+export class DropareaDemo extends Component {
+  init(context) {
+    return super.init(context)
+  }
+
+  render() {
+    this.innerHTML = /* html */ `
+      <h1 class="title">
+        This is a drop area
+      </h1>
+      <div class="droparea-demo">
+        <p>Default(multi)</p>
+        <ark-droparea listen on-alter="onFileList"></ark-droparea>
+
+        <h4>Output as objectURL:</h4>
+        <div data-file-multi></div>
+      </div>
+      <div class="droparea-demo">
+        <p>Single</p>
+        <ark-droparea single accept="image" max-size="5"></ark-droparea>
+      </div>
+      <div class="droparea-demo">
+        <p>Single</p>
+        <ark-droparea data-load single accept="image" max-size="5"></ark-droparea>
+      </div>
+
+      <a
+        class="reference"
+        target="_blank"
+        href="https://github.com/knowark/componark/tree/master/lib/components/droparea/README.md"
+      >
+        * Reference
+      </a>
+    `
+    return super.render()
+  }
+
+  async load() {
+    const myUrl =
+      'https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1888&q=80'
+
+    const myFile = await this.getFileFromUrl(myUrl, 'Dogo.jpeg')
+    this.select('ark-droparea[data-load]').update({ contextFiles: [myFile] })
+  }
+
+  async getFileFromUrl(url, name, defaultType = 'image/jpeg') {
+    const response = await fetch(url)
+    const data = await response.blob()
+    return new File([data], name, {
+      type: response.headers.get('content-type') || defaultType,
+    })
+  }
+
+  async onFileList(event) {
+    const element = this.querySelector('[data-file-multi]')
+    const droparea = this.select('.ark-droparea')
+    const urlList = []
+    if (element) {
+      droparea.fileList.forEach((file, index) =>
+        urlList.push(
+          `
+          <p>
+          <strong>${index}</strong> : ${file.name} 
+          <strong>url:</strong>"${droparea.mediaList[index].url}"
+          <a href="${droparea.mediaList[index].url}" target="_blank">link</a>
+          </p>
+          `
+        )
+      )
+      element.innerHTML = urlList.join('')
+    }
+  }
+}
+
+const styles = /* css */ `
+    .title{
+        color: var(--primary);
+    }
+    .droparea-demo{
+        max-width: 80%;
+        min-width: 250px
+    }
+`
+
+Component.define(tag, DropareaDemo, styles)

package/showcase/design/screens/base/droparea/index.js

@@ -0,0 +1,25 @@
+import { DropareaDemo } from "./dropareaDemo.js"
+
+export function hub(parentResolver) {
+  const resolver = parentResolver.forge({
+    strategy: {
+      DropareaDemo: {
+        method: "component",
+      },
+    },
+    factory: new ComponentFactory(),
+  })
+
+  return resolver.resolve("DropareaDemo")
+}
+
+export class ComponentFactory {
+  /** @param {string} method */
+  extract(method) {
+    return this[`_${method}`]
+  }
+
+  _component() {
+    return new DropareaDemo()
+  }
+}