@knowark/componarkjs 1.7.3

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

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

package/showcase/design/screens/base/splitview/splitViewDemo.js

@@ -0,0 +1,58 @@
+import { Component } from 'base/component/index.js'
+import './detailDemo.js'
+
+const tag = 'demo-splitview'
+
+export class SplitViewDemo extends Component {
+  render () {
+    this.content = /* html */ `
+      <ark-splitview>
+        <ark-splitview-master resize master-event="list:selected">
+          <ark-list background='light' color='dark' data-list></ark-list>
+        </ark-splitview-master>
+
+        <ark-splitview-detail style="background:grey" title="Demo" hidden>
+          <ark-icon slot="icon" name='fas fa-chevron-left'></ark-icon>
+          <demo-splitview-detail></demo-splitview-detail>
+        </ark-splitview-detail>
+
+      </ark-splitview>
+
+      <a 
+        target="_blank"
+        href="https://github.com/knowark/componark/blob/master/lib/components/splitview/README.md" 
+        class="reference">
+      * Reference
+      </a>
+    `
+
+    this.initList()
+
+    return super.render()
+  }
+
+
+  initList () {
+    const template = item => /* html */ `
+      <h1>${item.year}</h1>
+      <span data-first>FIRST: ${item.first}</span>
+      <span> | </span>
+      <span data-second>SECOND: ${item.second}</span>
+    `
+
+    const source = [
+      { first: 'Colombia', second: 'Argentina', year: 2016 },
+      { first: 'Uruguay', second: 'Colombia', year: 2017 },
+      { first: 'Brasil', second: 'Argentina', year: 2018 },
+      { first: 'Perú', second: 'Bolivia', year: 2019 }
+    ]
+
+    this.select('[data-list]').init({
+      source: source,
+      template: template
+    }).render()
+
+  }
+}
+
+Component.define(tag, SplitViewDemo)

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

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

package/showcase/design/screens/base/translate/translateDemo.js

@@ -0,0 +1,43 @@
+import { Component } from "base/component/index.js"
+
+const tag = "demo-translate"
+export class TranslateDemo extends Component {
+  render() {
+    const context = JSON.stringify({name: 'Esteban'})
+    this.content = /* html */ `
+
+    <section class="translate-demo_container">
+      <span>
+        <ark-translate languages='en,es,fr'></ark-translate>
+      </span>
+
+      <span>
+        <span data-i18n="hello">Hello</span>
+        <span data-i18n="world">World</span>
+        <span>
+          <strong data-i18n="magic">Magic</strong>
+        </span>
+      </span>
+
+      <a 
+        target="_blank" 
+        href="https://github.com/knowark/componark/blob/master/lib/components/translate/README.md">
+        * Reference
+      </a>
+    </section>
+    `
+
+    return super.render()
+  }
+
+}
+const styles = /* css */ `
+
+.translate-demo_container {
+  display: grid;
+}
+
+
+`
+
+Component.define(tag, TranslateDemo, styles)

package/showcase/design/screens/main.js

@@ -0,0 +1,12 @@
+import { Injectark } from '@knowark/injectarkjs'
+import { buildInjector } from '../core/factories/index.js'
+import { setMainRoutes } from './screens.routes.js'
+
+/** @param {string} target */
+export function main (target) {
+  const { strategy, factory } = buildInjector(target)
+  const resolver = new Injectark({ strategy: strategy, factory: factory })
+  const mainComponent = document.querySelector('main')
+  const prefix = '/'
+  setMainRoutes(mainComponent, resolver, prefix)
+}

package/showcase/design/screens/screens.routes.js

@@ -0,0 +1,23 @@
+export function setMainRoutes (mainComponent, resolver, prefix) {
+  const router = resolver.resolve('Router')
+  router.addRoutes(prefix, [
+    {
+      path: '',
+      action: async () => {
+        return router.navigate('/base/accordion')
+      }
+    },
+    {
+      path: 'base',
+      action: async () => {
+        const module = await import('./base/index.js')
+        const _prefix = prefix + 'base/'
+        setMainComponent(mainComponent, module.hub(resolver, _prefix))
+      }
+    }
+  ])
+}
+
+function setMainComponent (mainComponent, screenComponent) {
+  mainComponent.parentElement.replaceChild(screenComponent, mainComponent)
+}

package/showcase/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+  <title></title>
+</head>
+<style>
+  * {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  html {
+    height: 100%;
+  }
+
+  body {
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    color: #001e3d;
+    font-family: "Roboto","Helvetica","Arial",sans-serif;
+    min-height: 100%;
+  }
+
+  .titles {
+    display: flex;
+    gap: 0.8rem;
+  }
+
+  #version {
+    align-self: center;
+    font-weight: 300;
+    font-size: 0.9rem;
+  }
+
+  .themes {
+    padding: 0;
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+    align-self: center;
+    text-align: center;
+    list-style-type: none;
+  }
+
+  .theme__link {
+    user-select: none;
+    padding: 1rem;
+    background: #001e3d;
+    color: #00ffff;
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .theme__link:hover {
+    background: #00ffff;
+    color: #001e3d;
+  }
+</style>
+
+<body>
+  <main>
+    <div class="titles">
+      <img src="../showcase/logo-knowark.svg" alt="" class="brand">
+      <h1>Componark</h1>
+      <h2 id="version"></h2>
+    </div>
+    <ul class="themes">
+      <a class="theme__link" href="/ark/base/accordion">
+        <li> ARK </li>
+      </a>
+    </ul>
+  </main>
+</body>
+
+</html>

package/showcase/index.js

@@ -0,0 +1,5 @@
+
+const version = VERSION
+
+const versionElement = document.getElementById('version')
+versionElement.textContent = version

package/showcase/locales/en/default.json

@@ -0,0 +1,5 @@
+{
+  "hello": "Hello",
+  "world": "World",
+  "magic": "Magic"
+}

package/showcase/locales/es/default.json

@@ -0,0 +1,5 @@
+{
+  "hello": "Hola",
+  "world": "Mundo",
+  "magic": "Mágico"
+}

package/showcase/locales/fr/default.json

@@ -0,0 +1,5 @@
+{
+  "hello": "Bonjour",
+  "world": "Monde",
+  "magic": "Magie"
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "commonjs",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "noImplicitThis": false,
+    "noImplicitAny": false,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "baseUrl": "lib",
+    "paths": {
+      "@base*": [
+          "base"
+          "base*"
+      ],
+      "*": [
+        "*"
+      ]
+    }
+  }
+}

package/webpack.config.cjs

@@ -0,0 +1,118 @@
+const path = require("path")
+const { DefinePlugin, EnvironmentPlugin } = require("webpack")
+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
+const CopyWebpackPlugin = require("copy-webpack-plugin")
+const HtmlWebpackPlugin = require("html-webpack-plugin")
+
+module.exports = (env, argv) => {
+  const devMode = argv.mode === "development"
+  const target = env.TARGET
+
+  const commonConfig = {
+    mode: argv.mode,
+    entry: {
+      showcase: "./lib/showcase/design/index.js",
+    },
+    plugins: [
+      new CleanWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        chunks: ["showcase", "runtime"],
+        title: "Componark",
+        template: "./lib/showcase/design/index.html",
+      }),
+      new CopyWebpackPlugin({
+        patterns: ["lib/showcase/design/.htaccess"],
+      }),
+      new DefinePlugin({
+        PRODUCTION: !devMode,
+        VERSION: JSON.stringify(require("./package.json").version),
+        TARGET: JSON.stringify(target),
+      }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.(png|svg|jpg|gif)$/,
+          use: ["file-loader"],
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          use: [
+            {
+              loader: "file-loader",
+              options: {
+                name: "[name].[ext]",
+                outputPath: "fonts/",
+              },
+            },
+          ],
+        }
+      ],
+    },
+    resolve: {
+      alias: {
+        base: path.resolve(__dirname, "./lib/base/"),
+        components: path.resolve(__dirname, "./lib/components/"),
+        screens: path.resolve(__dirname, "./lib/showcase/screens/"),
+      },
+    },
+  }
+
+  const arkConfig = Object.assign({}, commonConfig, {
+    name: "ark",
+    mode: argv.mode,
+    output: {
+      publicPath: "/ark/",
+      filename: "[name].[contenthash].js",
+      path: path.join(__dirname, "/dist/ark"),
+    },
+    plugins: commonConfig.plugins.concat([
+      new EnvironmentPlugin({
+        ARK_DESIGN: "ark",
+      }),
+    ]),
+  })
+
+  const rootConfig = {
+    name: "root",
+    mode: argv.mode,
+    entry: {
+      index: "./lib/showcase/index.js",
+    },
+    plugins: [
+      new CleanWebpackPlugin(),
+      new DefinePlugin({
+        PRODUCTION: !devMode,
+        VERSION: JSON.stringify(require("./package.json").version),
+        TARGET: JSON.stringify(target),
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: "lib/showcase/locales/", to: "locales/" }
+        ],
+      }),
+      new HtmlWebpackPlugin({
+        title: "Componark",
+        template: "./lib/showcase/index.html",
+      }),
+    ],
+  }
+
+  if (devMode) {
+    rootConfig.devServer = {
+      static: [
+        path.join(__dirname, "dist"),
+        path.join(__dirname, "dist/ark"),
+      ],
+      historyApiFallback: {
+        rewrites: [
+          { from: /^\/$/, to: "/index.html" },
+          { from: /^\/ark/, to: "/ark/index.html" },
+        ],
+      },
+      port: 7890,
+    }
+  }
+
+  return [rootConfig, arkConfig]
+}