npm - cedro - Versions diffs - 0.1.0 - Mend

cedro 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/LICENSE +21 -0
package/README.md +5 -0
package/index.html +13 -0
package/package.json +18 -0
package/src/core/application.core.ts +182 -0
package/src/core/index.ts +8 -0
package/src/core/jsxsupport.ts +100 -0
package/src/core/screeen.core.ts +81 -0
package/src/core/seo.ts +79 -0
package/src/core/themes.core.ts +237 -0
package/src/index.ts +16 -0
package/src/interfaces/application.interface.ts +45 -0
package/src/interfaces/screen.interface.ts +17 -0
package/src/interfaces/themes.interface.ts +19 -0
package/src/interfaces/widget.interface.ts +123 -0
package/src/types/vector2d.type.ts +4 -0
package/src/ui/Icon.ui.ts +70 -0
package/src/ui/IconButton.ui.ts +70 -0
package/src/ui/button.ui.ts +88 -0
package/src/ui/colors.ui.ts +7 -0
package/src/ui/dialog.tsx +398 -0
package/src/ui/index.ts +24 -0
package/src/ui/label.ui.ts +61 -0
package/src/ui/menu.ui.ts +192 -0
package/src/ui/select.ui.ts +74 -0
package/src/ui/styles/button.css +237 -0
package/src/ui/styles/dialog.css +48 -0
package/src/ui/styles/main.css +93 -0
package/src/ui/styles/menu.css +56 -0
package/src/ui/styles/textbox.css +35 -0
package/src/ui/styles/theme/dark.css +37 -0
package/src/ui/styles/theme/light.css +37 -0
package/src/ui/textbox.ui.ts +132 -0
package/src/ui/widget.builder.ui.tsx +676 -0
package/src/ui/widget.collection.ts +19 -0
package/src/ui/widget.ui.ts +832 -0
package/tsconfig.json +30 -0

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2024 hdrdevs
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,5 @@
+# webware
+Javascript library to build user interfece based on widgets.
+Don't use this library. "Webware" is on development.

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + TS</title>
+        <link rel="stylesheet" href="src/ui/styles/main.css" />
+    </head>
+    <body>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+    "name": "cedro",
+    "version": "0.1.0",
+    "type": "module",
+    "devDependencies": {
+        "@types/node": "^20.4.4",
+        "typescript": "^5.0.2"
+    },
+    "dependencies": {
+        "@fontsource/roboto": "^5.0.5",
+        "@oothkoo/seo-js": "1.0.5",
+        "@types/color": "3.0.3",
+        "@types/react": "18.2.17",
+        "color": "4.2.3",
+        "material-icons": "1.13.9",
+        "navigo": "8.11.1"
+    }
+}

package/src/core/application.core.ts ADDED Viewed

@@ -0,0 +1,182 @@
+import "../ui/styles/main.css";
+import "@fontsource/roboto/100.css";
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+import "@fontsource/roboto/900.css";
+import "material-icons/iconfont/material-icons.css";
+import { Widget, WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
+import { Screen } from "./screeen.core";
+import { IApplication, IScreenSize } from "../interfaces/application.interface";
+import { IWidget } from "../interfaces/widget.interface";
+import Navigo from "navigo";
+import { Dialog } from "../ui/dialog";
+import { Label } from "../ui/label.ui";
+import { Seo } from "./seo";
+import { DarkTheme, LightTheme, ThemeManager } from "./themes.core";
+class WApplication implements IApplication {
+    seo: Seo;
+    screen: Screen;
+    root: Widget;
+    router: Navigo;
+    alertDialog: Dialog;
+    confirmDialog: Dialog;
+    mediaQueries: Map<string, IScreenSize>;
+    theme: ThemeManager;
+    constructor(title: string) {
+        this.seo = new Seo(title);
+        this.root = new Widget("root");
+        this.root.setType(WidgetTypes.FILL);
+        this.screen = new Screen();
+        this.router = new Navigo("/");
+        this.mediaQueries = new Map<string, IScreenSize>();
+        this.theme = new ThemeManager();
+        this.theme.add(LightTheme);
+        this.theme.add(DarkTheme);
+        this.screen.onResize(() => {
+            this.getRoot().resize();
+        });
+        window.addEventListener("load", () => {
+            this.screen.updateSize();
+        });
+        this.alertDialog = new Dialog("Dialog.alert", null);
+        this.confirmDialog = new Dialog("Dialog.confirm", null);
+        this.theme.load();
+    }
+    alert(
+        msg: string,
+        onOk: () => void = () => {},
+        onCancell: () => void = () => {}
+    ): void {
+        const mesageLabel = new Label("alert.label", "span");
+        mesageLabel.setType(WidgetTypes.FILL);
+        mesageLabel.setAlign(WidgetAlignTypes.VERTICAL);
+        mesageLabel.setText(msg);
+        this.alertDialog.setOkCallback({ event: "click", then: onOk });
+        this.alertDialog.setCancellCallback({
+            event: "click",
+            then: onCancell,
+        });
+        this.alertDialog.getContentCntainer().attachWidget(mesageLabel);
+        this.alertDialog.show();
+    }
+    confirm(
+        msg: string,
+        onOk: () => void = () => {},
+        onCancell: () => void = () => {}
+    ): void {
+        const mesageLabel = new Label("alert.label", "span");
+        mesageLabel.setType(WidgetTypes.FILL);
+        mesageLabel.setAlign(WidgetAlignTypes.VERTICAL);
+        mesageLabel.setText(msg);
+        this.confirmDialog.setOkCallback({ event: "click", then: onOk });
+        this.confirmDialog.setCancellCallback({
+            event: "click",
+            then: onCancell,
+        });
+        this.confirmDialog.getContentCntainer().attachWidget(mesageLabel);
+        this.confirmDialog.show();
+    }
+    attachWidget(guest: IWidget, host: IWidget): void {
+        if (!host) {
+            console.log("guest:", guest);
+        }
+        for (const child of host.getBody().childNodes) {
+            child.parentNode?.removeChild(child);
+        }
+        for (const child of host.childs) {
+            child.free();
+        }
+        host.removeAllChilds();
+        host.addChild(guest);
+        guest.setParent(host);
+        guest.render();
+        this.root.resize();
+        this.root.render();
+    }
+    addMediaQuery(
+        query: string,
+        minWidth: number,
+        maxWidth: number,
+        cb: (app: IApplication) => void
+    ): void {
+        this.mediaQueries.set(query, { minWidth, maxWidth, cb });
+    }
+    /**
+     * Initializes the application.
+     *
+     * @return {void} This function does not return a value.
+     */
+    init(): void {
+        this.root.subscribe({
+            event: "resize",
+            then: () => {
+                const app = this;
+                for (let query of app.mediaQueries.entries()) {
+                    const { minWidth, maxWidth, cb } = query[1];
+                    if (
+                        minWidth <= app.screen.dimensions.x &&
+                        maxWidth > app.screen.dimensions.x
+                    ) {
+                        cb(this as IApplication);
+                        //break; quite el break para dar soporte a mas de un media quiery del mismo tipo.
+                    }
+                }
+            },
+        });
+        this.root.render();
+    }
+    /**
+     * Retrieves the root widget of the application.
+     *
+     * @return {Widget} The root widget of the application.
+     */
+    getRoot(): Widget {
+        return this.root;
+    }
+    /**
+     * Sets the root widget of the object.
+     *
+     * @param {Widget} root - The root widget to set.
+     * @return {void}
+     */
+    setRoot(root: Widget): void {
+        this.root = root;
+    }
+}
+export default WApplication;

package/src/core/index.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import Application from "./application.core"
+import {DOMcreateElement, DOMcreateFragment} from "./jsxsupport"
+export{
+    Application,
+    DOMcreateElement,
+    DOMcreateFragment
+}

package/src/core/jsxsupport.ts ADDED Viewed

@@ -0,0 +1,100 @@
+/*export function h(el: any, attrs: any, content: any) {
+    const node = document.createElement(el);
+    Object.entries(attrs || {}).forEach(([name, value]) => {
+        node.setAttribute(name, value);
+    });
+    if (typeof content === "string") {
+        content = document.createTextNode(content);
+    }
+    node.appendChild(content);
+    return node;
+}*/
+interface entityMapData {
+    [key: string]: string;
+}
+export const entityMap: entityMapData = {
+    "&": "amp",
+    "<": "lt",
+    ">": "gt",
+    '"': "quot",
+    "'": "#39",
+    "/": "#x2F",
+};
+export const escapeHtml = (str: object[] | string) =>
+    String(str).replace(/[&<>"'\/\\]/g, (s) => `&${entityMap[s]};`);
+// To keep some consistency with React DOM, lets use a mapper
+// https://reactjs.org/docs/dom-elements.html
+export const AttributeMapper = (val: string) =>
+    ({
+        tabIndex: "tabindex",
+        className: "class",
+        readOnly: "readonly",
+    }[val] || val);
+// tslint:disable-next-line:no-default-export
+export function DOMcreateElement(
+    tag: Function | string,
+    attrs?: { [key: string]: any },
+    ...children: (HTMLElement | string)[]
+): HTMLElement {
+    attrs = attrs || {};
+    const stack: any[] = [...children];
+    // Support for components(ish)
+    if (typeof tag === "function") {
+        attrs.children = stack;
+        return tag(attrs);
+    }
+    const elm = document.createElement(tag);
+    // Add attributes
+    for (let [name, val] of Object.entries(attrs)) {
+        name = escapeHtml(AttributeMapper(name));
+        if (name.startsWith("on") && name.toLowerCase() in window) {
+            elm.addEventListener(name.toLowerCase().substr(2), val);
+        } else if (name === "ref") {
+            val(elm);
+        } else if (name === "style") {
+            Object.assign(elm.style, val);
+        } else if (val === true) {
+            elm.setAttribute(name, name);
+        } else if (val !== false && val != null) {
+            elm.setAttribute(name, escapeHtml(val));
+        } else if (val === false) {
+            elm.removeAttribute(name);
+        }
+    }
+    // Append children
+    while (stack.length) {
+        const child = stack.shift();
+        // Is child a leaf?
+        if (!Array.isArray(child)) {
+            elm.appendChild(
+                (child as HTMLElement).nodeType == null
+                    ? document.createTextNode(child.toString())
+                    : child
+            );
+        } else {
+            stack.push(...child);
+        }
+    }
+    return elm;
+}
+export const DOMcreateFragment = (
+    _attrs?: { [key: string]: any },
+    ...children: (HTMLElement | string)[]
+): (HTMLElement | string)[] => {
+    return children;
+};

package/src/core/screeen.core.ts ADDED Viewed

@@ -0,0 +1,81 @@
+import { IScreen } from "../interfaces/screen.interface";
+import { Vector2D } from "../types/vector2d.type";
+export class Screen implements IScreen {
+    dimensions: Vector2D;
+    onResizeCB: () => void;
+    constructor() {
+        this.dimensions = {
+            x: 0,
+            y: 0,
+        };
+        this.onResizeCB = () => {};
+        window.addEventListener("resize", () => {
+            this.updateSize();
+            this.onResizeCB();
+        })
+        this.updateSize();
+    }
+    onResize(cb: () => void): void {
+        this.onResizeCB = cb;
+    }
+    /**
+     * Populates the size of the object.
+     *
+     * @return {void} This function does not return anything.
+     */
+    populateSize(): void {
+        console.log("populateSize", this.dimensions);
+    }
+    updateSize(): void {
+        this.setWidth(window.innerWidth);
+        this.setHeight(window.innerHeight);
+    }
+    /**
+     * Retrieves the width of the object.
+     *
+     * @return {number} The width of the object.
+     */
+    getWidth(): number {
+        return this.dimensions.x;
+    }
+    /**
+     * Get the height of the object.
+     *
+     * @return {number} The height of the object.
+     */
+    getHeight(): number {
+        return this.dimensions.y;
+    }
+    /**
+     * Sets the width of the object.
+     *
+     * @param {number} width - The width value to set.
+     * @return {void} This function does not return anything.
+     */
+    setWidth(width: number): void {
+        this.dimensions.x = width;
+    }
+    /**
+     * Sets the height of the object.
+     *
+     * @param {number} height - The height value to set.
+     * @return {void} This function does not return a value.
+     */
+    setHeight(height: number): void {
+        this.dimensions.y = height;
+    }
+}

package/src/core/seo.ts ADDED Viewed

@@ -0,0 +1,79 @@
+export type TextDirectionValue = "ltr" | "rtl" | "auto";
+export interface IMetaDataElement {
+    lang: string | null;
+    dir: TextDirectionValue | null;
+    name: string;
+    content: string;
+}
+export interface IMetaData {
+    items: IMetaDataElement[];
+    add(element: IMetaDataElement): void;
+    get(name: string): IMetaDataElement | null;
+    deleteByName(name: string): void;
+}
+export class MetaData implements IMetaData {
+    items: IMetaDataElement[];
+    constructor() {
+        this.items = [];
+    }
+    add(element: IMetaDataElement): void {
+        this.items.push(element);
+        const meta = document.createElement("meta");
+        meta.setAttribute("name", element.name);
+        meta.setAttribute("content", element.content);
+        if (element.lang) meta.setAttribute("lang", element.lang);
+        if (element.dir) meta.setAttribute("dir", element.dir);
+        document.head.appendChild(meta);
+    }
+    get(name: string): IMetaDataElement | null {
+        for (let i = 0; i < this.items.length; i++) {
+            if (this.items[i].name === name) {
+                return this.items[i];
+            }
+        }
+        return null;
+    }
+    deleteByName(name: string): void {
+        for (let i = 0; i < this.items.length; i++) {
+            if (this.items[i].name === name) {
+                this.items.splice(i, 1);
+                const deleteItem = document.querySelector(
+                    `meta[name="${name}"]`
+                );
+                if (deleteItem) document.head.removeChild(deleteItem);
+            }
+        }
+    }
+}
+export interface ISeo {
+    title: string;
+    meta: MetaData;
+    setTitle(title: string): void;
+    getTitle(): string;
+}
+export class Seo implements ISeo {
+    title: string;
+    meta: MetaData;
+    constructor(title: string) {
+        this.title = title;
+        this.meta = new MetaData();
+    }
+    setTitle(title: string): void {
+        document.title = title;
+        this.title = title;
+    }
+    getTitle(): string {
+        return this.title;
+    }
+}