kempo 3.2.1 → 4.2.0

package/src/components/Toast.js

@@ -0,0 +1,424 @@
+import Component from './Component.js';
+import {
+  onEvent,
+  offEvent,
+  dispatchEvent
+} from '../utils/element.js';
+
+const _position = Symbol();
+export class ToastContainer extends Component {
+  constructor(position = 'bottom center'){
+    super();
+
+    /* Private Members */
+    this[_position] = position.toLowerCase();
+
+    /* Init */
+    this.setAttribute('position', this[_position]);
+  }
+
+  /* Protected Members */
+  get position(){
+    return this[_position];
+  }
+  set position(val){
+    if(val !== this[_position]){
+      this[_position] = val.toLowerCase();
+      this.setAttribute('position', this[_position]);
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      :host {
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        z-index: 1000;
+        pointer-events: none;
+        padding: 16px;
+        box-sizing: border-box;
+        max-width: 100%;
+        max-height: 100%;
+        overflow: hidden;
+      }
+
+      :host([position*="top"]) {
+        top: 0;
+      }
+
+      :host([position*="bottom"]) {
+        bottom: 0;
+      }
+
+      :host([position*="left"]) {
+        left: 0;
+        align-items: flex-start;
+      }
+
+      :host([position*="right"]) {
+        right: 0;
+        align-items: flex-end;
+      }
+
+      :host([position*="center"]:not([position*="top"]):not([position*="bottom"])) {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+      
+      :host([position="center"]),
+      :host([position*="center"][position*="top"]),
+      :host([position*="center"][position*="bottom"]) {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      :host([position*="center"]:not([position="center"])) {
+        align-items: center;
+      }
+      
+      /* Combined transforms for center vertically and horizontally */
+      :host([position*="center"]:not([position*="top"]):not([position*="bottom"]):not([position="center"])) {
+        transform: translate(-50%, -50%);
+      }
+
+      ::slotted(*) {
+        pointer-events: auto;
+      }
+    `;
+  }
+}
+window.customElements.define('k-toast-container', ToastContainer);
+
+const closeHandler = Symbol(),
+      actionHandler = Symbol(),
+      timeoutId = Symbol(),
+      animationEndHandler = Symbol(),
+      _toastPosition = Symbol(),
+      _closing = Symbol();
+
+export default class Toast extends Component {
+  constructor({
+    actionCallback = () => {},
+    closeCallback = () => {},
+    timeout = 0,
+    position = 'bottom center'
+  } = {}){
+    super();
+
+    /* Private Members */
+    this[timeoutId] = -1;
+    this[_toastPosition] = position.toLowerCase();
+    this[_closing] = false;
+
+    /* Private Methods */
+    this[closeHandler] = () => {
+      this.close();
+    }
+    this[actionHandler] = () => {
+      if(this.actionCallback() !== false){
+        this.close();
+      }
+    }
+    this[animationEndHandler] = (e) => {
+      if (e.animationName.includes('toast-hide')) {
+        this.removeAttribute('animating');
+        this.opened = false;
+        dispatchEvent(this, 'close openchange');
+        this.closeCallback();
+        this[_closing] = false;
+      } else if (e.animationName.includes('toast-show')) {
+        this.removeAttribute('animating');
+      }
+    }
+
+    /* Init */
+    this.registerProps({
+      actionCallback,
+      closeCallback
+    });
+    this.registerAttributes({
+      hasAction: false,
+      hasClose: false,
+      hasIcon: false,
+      timeout,
+      opened: false,
+      position: this[_toastPosition]
+    });
+  }
+
+  /* Lifecycle Callback */
+  async render(force){
+    if(await super.render(force)){
+      onEvent(this.shadowRoot.getElementById('action'), 'click', this[actionHandler]);
+      onEvent(this.shadowRoot.getElementById('close'), 'click', this[closeHandler]);
+      onEvent(this, 'animationend', this[animationEndHandler]);
+      return true;
+    }
+    return false;
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    clearTimeout(this[timeoutId]);
+    offEvent(this.shadowRoot.getElementById('action'), 'click', this[actionHandler]);
+    offEvent(this.shadowRoot.getElementById('close'), 'click', this[closeHandler]);
+    offEvent(this, 'animationend', this[animationEndHandler]);
+  }
+  attributeChangedCallback(n, oV, nV){
+    super.attributeChangedCallback(n, oV, nV);
+    if(n === 'opened' && oV !== nV && nV){
+      this.hasAction = !!this.querySelector('[slot="action"]');
+      this.hasClose = !!this.querySelector('[slot="close"]');
+      this.hasIcon = !!this.querySelector('[slot="icon"]');
+    }
+  }
+
+  /* Public Methods */
+  open(){
+    this[_closing] = false;
+    this.setAttribute('animating', 'in');
+    this.opened = true;
+    if(this.timeout){
+      clearTimeout(this[timeoutId]);
+      this[timeoutId] = setTimeout(() => {
+        this.close();
+      }, this.timeout);
+    }
+    dispatchEvent(this, 'open openchange');
+  }
+  
+  close(){
+    clearTimeout(this[timeoutId]);
+    if (this.opened && !this[_closing]) {
+      this[_closing] = true;
+      this.setAttribute('animating', 'out');
+      // We'll set opened to false in the animation end handler
+    }
+  }
+
+  /* Shadow DOM */
+  get shadowTemplate(){
+    return /*html*/`
+      <div id="icon">
+        <slot name="icon"></slot>
+      </div>
+      <div id="message">
+        ${super.shadowTemplate}
+      </div>
+      <button id="action" class="no-style">
+        <slot name="action"></slot>
+      </button>
+      <button id="close" class="no-style">
+        <slot name="close"></slot>
+      </button>
+    `;
+  }
+  get shadowStyles(){
+    return /*css*/`
+      ${super.shadowStyles}
+      @keyframes toast-show-bottom {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      @keyframes toast-hide-bottom {
+        from { opacity: 1; transform: translateY(0); }
+        to { opacity: 0; transform: translateY(20px); }
+      }
+      @keyframes toast-show-top {
+        from { opacity: 0; transform: translateY(-20px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      @keyframes toast-hide-top {
+        from { opacity: 1; transform: translateY(0); }
+        to { opacity: 0; transform: translateY(-20px); }
+      }
+      @keyframes toast-show-left {
+        from { opacity: 0; transform: translateX(-20px); }
+        to { opacity: 1; transform: translateX(0); }
+      }
+      @keyframes toast-hide-left {
+        from { opacity: 1; transform: translateX(0); }
+        to { opacity: 0; transform: translateX(-20px); }
+      }
+      @keyframes toast-show-right {
+        from { opacity: 0; transform: translateX(20px); }
+        to { opacity: 1; transform: translateX(0); }
+      }
+      @keyframes toast-hide-right {
+        from { opacity: 1; transform: translateX(0); }
+        to { opacity: 0; transform: translateX(20px); }
+      }
+      :host {
+        display: none;
+        min-width: 16rem;
+        max-width: calc(100% - ( 2 * var(--spacer) ));
+        background-color: var(--c_bg);
+        border-radius: var(--radius);
+        box-shadow: var(--drop_shadow);
+      }
+      :host([opened="true"]) {
+        display: flex;
+      }
+      :host([animating="in"][position*="bottom"]) {
+        animation: toast-show-bottom var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="out"][position*="bottom"]) {
+        animation: toast-hide-bottom var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="in"][position*="top"]) {
+        animation: toast-show-top var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="out"][position*="top"]) {
+        animation: toast-hide-top var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="in"][position*="left"]:not([position*="top"]):not([position*="bottom"])) {
+        animation: toast-show-left var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="out"][position*="left"]:not([position*="top"]):not([position*="bottom"])) {
+        animation: toast-hide-left var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="in"][position*="right"]:not([position*="top"]):not([position*="bottom"])) {
+        animation: toast-show-right var(--animation_ms, 300ms) ease forwards;
+      }
+      :host([animating="out"][position*="right"]:not([position*="top"]):not([position*="bottom"])) {
+        animation: toast-hide-right var(--animation_ms, 300ms) ease forwards;
+      }
+      #icon {
+        padding: var(--spacer);
+        padding-right: 0;
+      }
+      #message {
+        padding: var(--spacer);
+        flex: 1 1 auto;
+      }
+      :host(:not([has-close])) #close,
+      :host(:not([has-action])) #action,
+      :host(:not([has-icon])) #icon {
+        display: none;
+      }
+      #action {
+        background: transparent;
+        border: none;
+        color: var(--tc_primary, blue);
+        cursor: pointer;
+        padding: var(--spacer);
+      }
+      #action:hover {
+        color: var(--tc_primary__hover, lightblue);
+      }
+      #close {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: var(--spacer);
+        opacity: 0.7;
+        transition: opacity var(--animation_ms);
+      }
+      #close:hover {
+        opacity: 1;
+      }
+    `;
+  }
+
+  /* Static Members */
+  static observedAttributes = [...super.observedAttributes, 'opened'];
+
+  /* Static Methods */
+  static create(message, options = {}){
+    let {
+      position = 'auto',
+      removeOnClose = true,
+      closeCallback = () => {},
+      action = false,
+      close = false,
+      icon = false
+    } = options;
+    if(position === 'auto'){
+      position = window.innerWidth <= 768 ? 'bottom center' : 'top right';
+    }
+    let $container = document.querySelector(`k-toast-container[position="${position}"]`);
+    if(!$container){
+      $container = new ToastContainer(position);
+      document.body.appendChild($container);
+    }
+    const $toast = new Toast({
+      position,
+      timeout: 5000,
+      ...options,
+      closeCallback: (...args) => {
+        if(removeOnClose){
+          $toast.remove();
+          if($container.children.length === 0){
+            $container.remove();
+          }
+        }
+        closeCallback(...args);
+      }
+    });
+    $toast.innerHTML = message;
+    if(icon){
+      if(icon instanceof HTMLElement){
+        icon.slot = 'icon';
+        $toast.appencChild(icon);
+      } else if(typeof(icon) === 'string'){
+        const $span = document.createElement('span');
+        $span.slot = 'icon';
+        $span.innerHTML = icon;
+        $toast.appendChild($span);
+      }
+    }
+    if(action){
+      if(action instanceof HTMLElement){
+        action.slot = 'action';
+        $toast.appencChild(action);
+      } else if(typeof(action) === 'string'){
+        const $span = document.createElement('span');
+        $span.slot = 'action';
+        $span.innerHTML = action;
+        $toast.appendChild($span);
+      }
+    }
+    if(close){
+      if(close instanceof HTMLElement){
+        close.slot = 'close';
+        $toast.appencChild(close);
+      } else if(typeof(close) === 'string'){
+        const $span = document.createElement('span');
+        $span.slot = 'close';
+        $span.innerHTML = close;
+        $toast.appendChild($span);
+      }
+    }
+    $toast.open();
+    $container.appendChild($toast);
+    return $toast;
+  }
+  static success(message, options = {}){
+    const $toast = Toast.create(message, {
+      icon: '<k-icon name="check"></k-icon>',
+      ...options
+    });
+    $toast.classList.add('bg-success');
+    return $toast;
+  }
+  static warning(message, options = {}){
+    const $toast = Toast.create(message, {
+      icon: '<k-icon name="warning"></k-icon>',
+      ...options
+    });
+    $toast.classList.add('bg-warning');
+    return $toast;
+  }
+  static error(message, options = {}){
+    const $toast = Toast.create(message, {
+      icon: '<k-icon name="error"></k-icon>',
+      ...options
+    });
+    $toast.classList.add('bg-danger');
+    return $toast;
+  }
+}
+window.customElements.define('k-toast', Toast);

package/src/utils/Server.js

@@ -0,0 +1,189 @@
+import http from 'http';
+import { readFile } from 'fs/promises';
+import { join, extname, normalize } from 'path';
+
+export class Server {
+  constructor(options = {}) {
+    this.routes = [];
+  }
+
+  route(pattern, handler, methods) {
+    const routeMethods = methods ? methods.map(m => m.toUpperCase()) : ['ANY'];
+    this.routes.push({
+      pattern,
+      handler,
+      methods: routeMethods
+    });
+    return this;
+  }
+
+  get(path, handler) {
+    return this.route(path, handler, ['GET']);
+  }
+
+  post(path, handler) {
+    return this.route(path, handler, ['POST']);
+  }
+
+  put(path, handler) {
+    return this.route(path, handler, ['PUT']);
+  }
+
+  delete(path, handler) {
+    return this.route(path, handler, ['DELETE']);
+  }
+
+  patch(path, handler) {
+    return this.route(path, handler, ['PATCH']);
+  }
+
+  async handleRequest(req, res) {
+    try {
+      const [ url, paramStr = '' ] = req.url.split('?');
+      const params = paramStr.split('&').filter(p=>p!='').map(p => {
+        const [key, value] = p.split('=');
+        return { [key]: decodeURIComponent(value) };
+      });
+
+      const matchedRoute = this.routes.find(({ methods, pattern }) => {
+        if(
+          !methods.includes(req.method || 'GET') &&
+          !methods.includes('ANY')
+        ) return false;
+        const reqParts = url.split('/').filter(p=>p!='');
+        const patternParts = pattern.split('/').filter(p=>p!='');
+        if(reqParts.length == 0 && patternParts.length == 0) return true; // '/' == '/'
+        const hasWildcard = patternParts.length > 0 && 
+                  patternParts[patternParts.length - 1] === '*';
+        if (!hasWildcard && reqParts.length !== patternParts.length) return false;
+        if (hasWildcard && reqParts.length < patternParts.length - 1) return false;
+        const partsToCompare = hasWildcard ? patternParts.length - 1 : patternParts.length;
+        for (let i = 0; i < partsToCompare; i++) {
+          if (patternParts[i].startsWith(':')) continue;
+          if (patternParts[i] !== reqParts[i]) return false;
+        }
+        return true;
+      });
+
+      if(!matchedRoute) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('Not Found');
+        return;
+      }
+
+      const { pattern, handler } = matchedRoute;
+      if(typeof(handler) === 'string') {
+        // Extract the remaining path after the matched pattern
+        const patternParts = pattern.split('/').filter(p=>p!='');
+        const reqParts = url.split('/').filter(p=>p!='');
+        const hasWildcard = patternParts[patternParts.length - 1] === '*';
+        const remainingPath = hasWildcard 
+          ? reqParts.slice(patternParts.length - 1).join('/')
+          : '';
+
+        // Remove wildcard from handler if present
+        const baseHandler = handler.endsWith('*') 
+          ? handler.slice(0, -1) 
+          : handler;
+
+        const filePath = baseHandler.startsWith('/') || /^[A-Z]:/i.test(baseHandler)
+          ? normalize(join(baseHandler, remainingPath))
+          : join(process.cwd(), normalize(join(baseHandler, remainingPath)));
+
+        if (filePath.endsWith('/') || filePath.endsWith('\\')) {
+          await Server.serveFile(join(filePath, 'index.html'), res);
+        } else {
+          await Server.serveFile(filePath, res);
+        }
+      } else if(typeof(handler) === 'function'){
+        const reqVars = {};
+        if(pattern.includes(':')){ // Fix typo in includes
+          pattern.split('/').filter(p=>p!='').forEach((part, i) => {
+            if(part.startsWith(':')){
+              reqVars[part.slice(1)] = url.split('/').filter(p=>p!='')[i];
+            }
+          });
+        }
+        await handler(req, res, reqVars, params);
+      } else {
+        console.error('Invalid Route Handler');
+        res.writeHead(500, { 'Content-Type': 'text/plain' });
+        res.end('Internal server error');
+      }
+      
+    } catch (err) {
+      console.error('Request error:', err);
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('Internal server error');
+    }
+  }
+
+  listen(port = 8080) {
+    return new Promise((resolve, reject) => {
+      try {
+        const server = http.createServer((req, res) => this.handleRequest(req, res));
+        
+        server.on('error', (err) => {
+          if (err.code === 'EADDRINUSE') {
+            reject(new Error(`Port ${port} is already in use`));
+          } else {
+            reject(err);
+          }
+        });
+
+        server.listen(port, () => {
+          resolve(server);
+        });
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  /*
+    Static Members
+  */
+  static mimeTypes = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+    '.txt': 'text/plain; charset=utf-8',
+    '.md': 'text/plain; charset=utf-8',
+    '.map': 'application/json; charset=utf-8'
+  };
+
+  static textExtensions = ['.txt', '.md', '.js', '.css', '.html', '.json', '.map'];
+
+  /*
+    Static Methods
+  */
+  static getMimeType(filePath) {
+    const ext = extname(filePath).toLowerCase();
+    if (this.mimeTypes[ext]) return this.mimeTypes[ext];
+    if (this.textExtensions.includes(ext)) {
+      return 'text/plain; charset=utf-8';
+    }
+    return 'application/octet-stream';
+  }
+
+  static async serveFile(filePath, res, headers = {}) {
+    try {
+      const data = await readFile(filePath);
+      res.writeHead(200, {
+        'Content-Type': Server.getMimeType(filePath),
+        ...headers
+      });
+      res.end(data);
+    } catch (err) {
+      const status = err.code === 'ENOENT' ? 404 : 500;
+      const message = status === 404 ? 'Not found' : 'Internal server error';
+      res.writeHead(status, { 'Content-Type': 'text/plain' });
+      res.end(message);
+    }
+  }
+}

package/src/utils/fs-utils.js

@@ -0,0 +1,41 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function ensureDir(dirPath) {
+  try {
+    await fs.mkdir(dirPath, { recursive: true });
+  } catch (error) {
+    if (error.code !== 'EEXIST') {
+      throw error;
+    }
+  }
+}
+
+export async function copyDir(src, dest) {
+  await ensureDir(dest);
+  const entries = await fs.readdir(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      await copyDir(srcPath, destPath);
+    } else {
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+}
+
+export async function emptyDir(dirPath) {
+  try {
+    const entries = await fs.readdir(dirPath);
+    await Promise.all(entries.map(entry => 
+      fs.rm(path.join(dirPath, entry), { recursive: true, force: true })
+    ));
+  } catch (error) {
+    if (error.code !== 'ENOENT') {
+      throw error;
+    }
+  }
+}

package/src/utils/watchWindowSize.js

@@ -0,0 +1,15 @@
+import debounce from './debounce.js';
+
+const handlers = new Set();
+window.addEventListener('resize', debounce(()=>{
+  const width = window.innerWidth;
+  handlers.forEach( (handler) => handler(width));
+}));
+
+export const watchWindowSize = (handler) => {
+  handlers.add(handler);
+  return window.innerWidth;
+}
+export const unwatchWindowSize = (handler) => {
+  handlers.remove(handler);
+}