cedro 0.1.9 → 0.1.10

package/README.md

@@ -1,8 +1,9 @@
-# cedro
+<div align="center">
+  <img src="https://raw.githubusercontent.com/hdrdevs/cedro/main/public/cedro-logo.svg" alt="Cedro" width="170">
+  <h1>cedro</h1>
 
-Javascript library to build user interfece based on widgets.
-
-**Don't use this library. "cedro" is on development.**
+</div>
+<h6>Javascript library to build user interfece based on widgets.</h6>
 
 ## Getting Started
 
@@ -14,3 +15,5 @@ npx degit hdrdevs/vite-cedro#main my-app-name
 npm install
 npm run dev
 ```
+
+⚠️ **Warning:** Don't use this library. "cedro" is on development.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "cedro",
-    "version": "0.1.9",
+    "version": "0.1.10",
     "type": "module",
     "devDependencies": {
         "@types/node": "^20.4.4",
@@ -11,8 +11,10 @@
         "@oothkoo/seo-js": "1.0.5",
         "@types/color": "3.0.3",
         "@types/react": "18.2.17",
+        "html-entities": "^2.5.2",
         "color": "4.2.3",
-        "material-icons": "1.13.9",
+        "glob": "^11.0.0",
+        "material-icons": "1.13.12",
         "navigo": "8.11.1"
     }
 }

package/src/core/application.builder.tsx

@@ -1,60 +1,121 @@
-//import { createWidget } from "src/ui/builder/widget.builder";
-import { WidgetAlignTypes } from "../ui";
-import { createWidget } from "../ui/widget.builder";
-import Application, { ApplicationProps } from "./application.core";
-
-function getApplicationProps(content: any): ApplicationProps {
-    let props: ApplicationProps = {
-        title: content.title,
-        padding: 0,
-        orientation: null,
-        children: null,
-    };
-
-    if (content.getAttribute("w-title") !== null) {
-        props.title = content.getAttribute("w-title");
-    }
-
-    if (content.getAttribute("w-padding") !== null) {
-        props.padding = parseInt(content.getAttribute("w-padding"));
-    }
-
-    if (content.getAttribute("w-orientation") !== null) {
-        props.orientation = content.getAttribute("w-orientation");
-    }
-
-    return props;
-}
-
-export function createApplication(content: any): Application {
-    const appProps = getApplicationProps(content);
-    const newApp = new Application(appProps.title);
-
-    if (appProps.padding) {
-        newApp.getRoot().setPadding(appProps.padding);
-    }
-
-    if (appProps.orientation) {
-        if (appProps.orientation === "horizontal") {
-            newApp.getRoot().setAlign(WidgetAlignTypes.HORIZONTAL);
-        } else {
-            newApp.getRoot().setAlign(WidgetAlignTypes.VERTICAL);
-        }
-    }
-
-    content.childNodes.forEach((item: HTMLElement) => {
-        if (item.getAttribute("w-widget-collection")) {
-            item.childNodes.forEach((ietmWidget: any) => {
-                const appWidgets = createWidget(ietmWidget);
-
-                if (appWidgets !== null) {
-                    newApp.getRoot().addChild(appWidgets);
-                }
-            });
-        } else if (item.getAttribute("w-routes")) {
-            console.log("routes:", item);
-        }
-    });
-
-    return newApp;
-}
+//import { createWidget } from "src/ui/builder/widget.builder";
+import { Widget, WidgetAlignTypes } from "../ui";
+import { createWidget } from "../ui/widget.builder";
+import Application, { ApplicationProps } from "./application.core";
+import { decode } from "html-entities";
+
+function getApplicationProps(content: any): ApplicationProps {
+    let props: ApplicationProps = {
+        title: content.title,
+        padding: 0,
+        theme: null,
+        orientation: null,
+        children: null,
+    };
+
+    if (content.getAttribute("w-title") !== null) {
+        props.title = content.getAttribute("w-title");
+    }
+
+    if (content.getAttribute("w-padding") !== null) {
+        props.padding = parseInt(content.getAttribute("w-padding"));
+    }
+
+    if (content.getAttribute("w-orientation") !== null) {
+        props.orientation = content.getAttribute("w-orientation");
+    }
+
+    if (content.getAttribute("w-theme") !== null) {
+        props.theme = content.getAttribute("w-theme");
+    }
+
+    return props;
+}
+
+export function createApplication(content: any): Application {
+    const appProps = getApplicationProps(content);
+    const newApp = new Application(appProps.title);
+
+    if (appProps.padding) {
+        newApp.getRoot().setPadding(appProps.padding);
+    }
+
+    if (appProps.orientation) {
+        if (appProps.orientation === "horizontal") {
+            newApp.getRoot().setAlign(WidgetAlignTypes.HORIZONTAL);
+        } else {
+            newApp.getRoot().setAlign(WidgetAlignTypes.VERTICAL);
+        }
+    }
+
+    if (appProps.theme) {
+        newApp.theme.setTheme(appProps.theme);
+    }
+
+    content.childNodes.forEach((item: HTMLElement) => {
+        if (item.getAttribute("w-widget-collection")) {
+            item.childNodes.forEach((ietmWidget: any) => {
+                const appWidgets = createWidget(ietmWidget);
+
+                if (appWidgets !== null) {
+                    newApp.getRoot().addChild(appWidgets);
+                }
+            });
+        } else if (item.getAttribute("w-routes")) {
+            newApp.setRouterHostId(item.getAttribute("w-host-id"));
+            item.childNodes.forEach((ietmRoute: any) => {
+                if (ietmRoute.getAttribute("w-route-path") && ietmRoute.getAttribute("href")) {
+                    newApp.router.on(decode(ietmRoute.getAttribute("href")), () => {
+                        const url = decode(ietmRoute.getAttribute("href"));
+                        const timestamp = new Date().getTime();
+                        const isProduction = process.env.NODE_ENV === "production";
+
+                        const pathDev = ".." + url + "?ts=" + timestamp;
+
+                        const pathProduction = `../../assets${decode(
+                            ietmRoute.getAttribute("href")
+                        )}/index.js?ts=${timestamp}`;
+
+                        const path = isProduction ? pathProduction : pathDev;
+
+                        import(/*@vite-ignore*/ path).then((module) => {
+                            newApp.clearLoadedModule();
+                            newApp.setLoadedModule(module.default);
+                            const host = w.get(newApp.getRouterHostId());
+                            if (host) {
+                                newApp.attachWidget(newApp.getLoadedModule() as Widget, host);
+                            }
+                            newApp.hideLoading();
+                        });
+
+                        const loadCss = async () => {
+                            try {
+                                const timestamp = new Date().getTime();
+                                const cssName = "../../assets" + url + "/style.css?ts=" + timestamp;
+
+                                // Crear un elemento <link> para cargar el CSS
+                                const link = document.createElement("link");
+                                link.rel = "stylesheet";
+                                link.href = cssName;
+                                document.head.appendChild(link);
+                            } catch (error) {
+                                console.log(error);
+                            }
+                        };
+
+                        if (isProduction) loadCss();
+                    });
+                }
+            });
+            newApp.router.resolve();
+        }
+    });
+
+    appConnections.forEach((cb) => {
+        newApp.subscribe(cb);
+    });
+
+    appConnections = [];
+
+    return newApp;
+}

package/src/core/application.core.tsx

@@ -14,10 +14,20 @@ 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";
+import {
+    CedroLightTheme,
+    CedroDarkTheme,
+    DarkTheme,
+    LightTheme,
+    ThemeManager,
+} from "./themes.core";
 import { Loading } from "../ui/loading.ui";
 import { OrientationTypes } from "../types/orientation.type";
 
+declare global {
+    var appConnections: Array<WUICallback>;
+}
+
 class WApplication implements IApplication {
     seo: Seo;
 
@@ -26,6 +36,7 @@ class WApplication implements IApplication {
     screen: Screen;
     root: Widget;
     router: Navigo;
+    routerHostId: string;
 
     alertDialog: Dialog;
     confirmDialog: Dialog;
@@ -35,6 +46,8 @@ class WApplication implements IApplication {
 
     theme: ThemeManager;
 
+    loadedModule: any;
+
     constructor(title: string) {
         this.seo = new Seo(title);
 
@@ -45,12 +58,15 @@ class WApplication implements IApplication {
         this.root.setType(WidgetTypes.FILL);
         this.screen = new Screen();
         this.router = new Navigo("/");
+        this.routerHostId = this.getRoot().id;
 
         this.mediaQueries = new Map<string, IScreenSize>();
 
         this.theme = new ThemeManager();
         this.theme.add(LightTheme);
         this.theme.add(DarkTheme);
+        this.theme.add(CedroDarkTheme);
+        this.theme.add(CedroLightTheme);
 
         this.screen.onResize(() => {
             this.getRoot().resize();
@@ -62,6 +78,12 @@ class WApplication implements IApplication {
             this.run("load");
         });
 
+        window.addEventListener("resize", () => {
+            this.screen.updateSize();
+            this.getRoot().resize();
+            this.run("resize");
+        });
+
         this.alertDialog = new Dialog("Dialog.alert", null);
         this.confirmDialog = new Dialog("Dialog.confirm", null);
 
@@ -70,6 +92,30 @@ class WApplication implements IApplication {
         this.theme.load();
     }
 
+    public setLoadedModule(module: any): void {
+        this.loadedModule = module;
+    }
+
+    public getLoadedModule(): any {
+        return this.loadedModule;
+    }
+
+    public clearLoadedModule(): void {
+        this.loadedModule = null;
+    }
+
+    public setRouterHostId(id: string | null): void {
+        if (!id) {
+            this.routerHostId = this.getRoot().id;
+            return;
+        }
+        this.routerHostId = id;
+    }
+
+    public getRouterHostId(): string {
+        return this.routerHostId;
+    }
+
     public run(eventId: WUIEvent): void {
         this.subscribers.forEach((callback) => {
             if (callback.event == eventId) {
@@ -90,13 +136,20 @@ class WApplication implements IApplication {
         this.subscribers.delete(`${event}`);
     }
 
-    alert(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
+    public alert(
+        title: string = "",
+        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.titleBar.setText(title);
+
         this.alertDialog.setOkCallback({ event: "click", then: onOk });
         this.alertDialog.setCancellCallback({
             event: "click",
@@ -108,7 +161,11 @@ class WApplication implements IApplication {
         this.alertDialog.show();
     }
 
-    confirm(msg: string, onOk: () => void = () => {}, onCancell: () => void = () => {}): void {
+    public confirm(
+        msg: string,
+        onOk: () => void = () => {},
+        onCancell: () => void = () => {}
+    ): void {
         const mesageLabel = new Label("alert.label", "span");
 
         mesageLabel.setType(WidgetTypes.FILL);
@@ -126,10 +183,16 @@ class WApplication implements IApplication {
         this.confirmDialog.show();
     }
 
-    attachWidget(guest: IWidget, host: IWidget): void {
+    public attachWidget(guest: IWidget, host: IWidget): void {
         if (!host) {
             console.log("guest:", guest);
+            return;
         }
+
+        if (!guest) {
+            return;
+        }
+
         for (const child of host.getBody().childNodes) {
             child.parentNode?.removeChild(child);
         }
@@ -141,13 +204,14 @@ class WApplication implements IApplication {
         host.removeAllChilds();
 
         host.addChild(guest);
+        guest.populate(); //tiene que recorrer todos los widgets hijos en forma recursiva e ir agregandolos a window.w
         guest.setParent(host);
         guest.render();
         this.root.resize();
         this.root.render();
     }
 
-    addMediaQuery(
+    public addMediaQuery(
         query: string,
         minWidth: number,
         maxWidth: number,
@@ -161,7 +225,7 @@ class WApplication implements IApplication {
      *
      * @return {void} This function does not return a value.
      */
-    init(): void {
+    public init(): void {
         this.root.subscribe({
             event: "resize",
             then: () => {
@@ -186,7 +250,7 @@ class WApplication implements IApplication {
      *
      * @return {Widget} The root widget of the application.
      */
-    getRoot(): Widget {
+    public getRoot(): Widget {
         return this.root;
     }
 
@@ -196,7 +260,7 @@ class WApplication implements IApplication {
      * @param {Widget} root - The root widget to set.
      * @return {void}
      */
-    setRoot(root: Widget): void {
+    public setRoot(root: Widget): void {
         this.root = root;
     }
 
@@ -208,18 +272,48 @@ class WApplication implements IApplication {
     public hideLoading(): void {
         this.loading.setVisible(false);
     }
+
+    public goTo(path: string): void {
+        this.router.navigate(path);
+    }
 }
 
+export const initApplicationConnections = () => {
+    if (!window.appConnections) {
+        window.appConnections = new Array<WUICallback>();
+    }
+};
+export const connectApplication = (cb: WUICallback) => {
+    initApplicationConnections();
+    window.appConnections.push(cb);
+};
+
 export type ApplicationProps = {
     title: string;
     padding?: number | null;
     orientation?: OrientationTypes | null;
+    theme?: string | null;
     children: any;
+    onResize?: (args: any) => void;
+    onLoad?: (args: any) => void;
 };
 
 export const Application = (props: ApplicationProps) => {
+    if (props.onLoad) {
+        connectApplication({ event: "load", then: props.onLoad });
+    }
+
+    if (props.onResize) {
+        connectApplication({ event: "resize", then: props.onResize });
+    }
+
     return (
-        <div title={props.title} w-padding={props.padding} w-orientation={props.orientation}>
+        <div
+            title={props.title}
+            w-padding={props.padding}
+            w-orientation={props.orientation}
+            w-theme={props.theme}
+        >
             {props.children}
         </div>
     );
@@ -234,11 +328,16 @@ export const Widgets = (props: WidgetsProps) => {
 };
 
 export type RoutesProps = {
+    hostId: string;
     children: any;
 };
 
 export const Routes = (props: RoutesProps) => {
-    return <div w-routes>{props.children}</div>;
+    return (
+        <div w-routes w-host-id={props.hostId}>
+            {props.children}
+        </div>
+    );
 };
 
 export type RouteProps = {
@@ -246,7 +345,7 @@ export type RouteProps = {
 };
 
 export const Route = (props: RouteProps) => {
-    return <a w-path href={props.src}></a>;
+    return <a w-route-path href={props.src}></a>;
 };
 
 export default WApplication;

package/src/core/themes.core.ts

@@ -16,12 +16,15 @@ export class Theme implements ITheme {
 
 export const LightTheme = new Theme("light");
 export const DarkTheme = new Theme("dark");
+export const CedroDarkTheme = new Theme("cedro-dark");
+export const CedroLightTheme = new Theme("cedro");
 
 LightTheme.add("--palette-text-primary", "rgba(0, 0, 0, 0.87)")
     .add("--palette-text-secondary", "rgba(0, 0, 0, 0.6)")
     .add("--palette-text-disabled", "rgba(0, 0, 0, 0.38)")
     .add("--palette-background-default", "#ffffff")
     .add("--palette-background-paper", "#ffffff")
+    .add("--palette-background-light", "#f5f5f5")
     .add("--palette-action-active", "rgba(0, 0, 0, 0.54)")
     .add("--palette-action-disabled", "rgba(0, 0, 0, 0.26)")
     .add("--palette-action-hover", "#f5f5f5")
@@ -37,7 +40,7 @@ LightTheme.add("--palette-text-primary", "rgba(0, 0, 0, 0.87)")
 
     .add("--palette-primary-main", "#90caf9")
     .add("--palette-primary-dark", "#42a5f5")
-    .add("--palette-primary-light", "#e3f2fd")
+    .add("--palette-primary-light", "#90caf9")
 
     .add("--palette-primary-text-main", "#2a3b49")
     .add("--palette-primary-text-dark", "#133048")
@@ -99,6 +102,7 @@ DarkTheme.add("--palette-text-primary", "#cdd0d3")
 
     .add("--palette-background-default", "#121212")
     .add("--palette-background-paper", "#121212")
+    .add("--palette-background-light", "rgba(255, 255, 255, 0.02)")
 
     .add("--palette-action-active", "#ffffff")
     .add("--palette-action-disabled", "rgba(255, 255, 255, 0.3)")
@@ -170,6 +174,161 @@ DarkTheme.add("--palette-text-primary", "#cdd0d3")
     .add("--palette-success-text-dark", "#263b27")
     .add("--palette-success-text-light", "#c3ddc5");
 
+CedroDarkTheme.add("--palette-text-primary", "#d3d0c8")
+    .add("--palette-text-secondary", "#a6a29a")
+    .add("--palette-text-disabled", "rgba(80, 81, 82, 0.5)")
+
+    .add("--palette-background-default", "#655349")
+    .add("--palette-background-paper", "#56473e")
+    .add("--palette-background-light", "#6d5a4e")
+
+    .add("--palette-action-active", "#655447")
+    .add("--palette-action-disabled", "rgba(39, 32, 27, 0.3)")
+    .add("--palette-action-hover", "#56473e")
+    .add("--palette-action-selected", "rgba(255, 255, 255, 0.16)")
+    .add("--palette-action-disabled-bg", "rgba(255, 255, 255, 0.12)")
+
+    .add("--palette-divider", "rgba(255, 255, 255, 0.12)")
+
+    .add("--palette-link", "#ffa500")
+    .add("--palette-link-hover", "#c07e06")
+
+    /*PRIMARY*/
+    .add("--palette-primary-main", "#f9ca90")
+    .add("--palette-primary-dark", "#da9f56")
+    .add("--palette-primary-light", "#fcd09a")
+
+    .add("--palette-primary-text-main", "#2a3b49")
+    .add("--palette-primary-text-dark", "#133048")
+    .add("--palette-primary-text-light", "#43474b")
+
+    /*SECONDARY*/
+
+    .add("--palette-secondary-main", "#ce93d8")
+    .add("--palette-secondary-dark", "#ab47bc")
+    .add("--palette-secondary-light", "#f3e5f5")
+
+    .add("--palette-secondary-text-main", "#3d2b40")
+    .add("--palette-secondary-text-dark", "#e6c8eb")
+    .add("--palette-secondary-text-light", "#484348")
+
+    /*ERROR*/
+
+    .add("--palette-error-main", "#9e5656")
+    .add("--palette-error-dark", "#d32f2f")
+    .add("--palette-error-light", "#e57373")
+
+    .add("--palette-error-text-main", "#fbc7c3")
+    .add("--palette-error-text-dark", "#f1c1c1")
+    .add("--palette-error-text-light", "#432222")
+
+    /*WARNING*/
+
+    .add("--palette-warning-main", "#ffa726")
+    .add("--palette-warning-dark", "#ffb74d")
+    .add("--palette-warning-light", "#f57c00")
+
+    .add("--palette-warning-text-main", "#4b310b")
+    .add("--palette-warning-text-dark", "#4b3616")
+    .add("--palette-warning-text-light", "#482400")
+
+    /*INFO*/
+
+    .add("--palette-info-main", "#29b6f6")
+    .add("--palette-info-dark", "#4fc3f7")
+    .add("--palette-info-light", "#0288d1")
+
+    .add("--palette-info-text-main", "#0c3649")
+    .add("--palette-info-text-dark", "#173949")
+    .add("--palette-info-text-light", "#b3dbf1")
+
+    /*SUCCESS*/
+
+    .add("--palette-success-main", "#599062")
+    .add("--palette-success-dark", "#81c784")
+    .add("--palette-success-light", "#388e3c")
+
+    .add("--palette-success-text-main", "#1e371f")
+    .add("--palette-success-text-dark", "#263b27")
+    .add("--palette-success-text-light", "#c3ddc5");
+
+CedroLightTheme.add("--palette-text-primary", "#4f3e2e")
+    .add("--palette-text-secondary", "rgba(0, 0, 0, 0.6)")
+    .add("--palette-text-disabled", "rgba(0, 0, 0, 0.38)")
+    .add("--palette-background-default", "#ffffff")
+    .add("--palette-background-paper", "#ffffff")
+    .add("--palette-background-light", "rgba(250, 243, 235, 0.5)")
+    .add("--palette-action-active", "rgba(0, 0, 0, 0.54)")
+    .add("--palette-action-disabled", "#ffe2ba")
+    .add("--palette-action-hover", "#f5f5f5")
+    .add("--palette-action-selected", "rgba(0, 0, 0, 0.08)")
+    .add("--palette-action-disabled-bg", "rgba(0, 0, 0, 0.12)")
+
+    .add("--palette-divider", "#ffe2ba")
+
+    .add("--palette-link", "#1d79ee")
+    .add("--palette-link-hover", "#3393f2")
+
+    /*PRIMARY*/
+
+    .add("--palette-primary-main", "#baf990")
+    .add("--palette-primary-dark", "#9bce79")
+    .add("--palette-primary-light", "#d1ffb2")
+
+    .add("--palette-primary-text-main", "#2a3b49")
+    .add("--palette-primary-text-dark", "#133048")
+    .add("--palette-primary-text-light", "#43474b")
+
+    /*SECONDARY*/
+
+    .add("--palette-secondary-main", "#ce93d8")
+    .add("--palette-secondary-dark", "#ab47bc")
+    .add("--palette-secondary-light", "#f3e5f5")
+
+    .add("--palette-secondary-text-main", "#3d2b40")
+    .add("--palette-secondary-text-dark", "#e6c8eb")
+    .add("--palette-secondary-text-light", "#484348")
+
+    /*ERROR*/
+
+    .add("--palette-error-main", "#f44336")
+    .add("--palette-error-dark", "#d32f2f")
+    .add("--palette-error-light", "#e57373")
+
+    .add("--palette-error-text-main", "#fbc7c3")
+    .add("--palette-error-text-dark", "#f1c1c1")
+    .add("--palette-error-text-light", "#432222")
+
+    /*WARNING*/
+
+    .add("--palette-warning-main", "#ffa726")
+    .add("--palette-warning-dark", "#ffb74d")
+    .add("--palette-warning-light", "#f57c00")
+
+    .add("--palette-warning-text-main", "#4b310b")
+    .add("--palette-warning-text-dark", "#4b3616")
+    .add("--palette-warning-text-light", "#482400")
+
+    /*INFO*/
+
+    .add("--palette-info-main", "#29b6f6")
+    .add("--palette-info-dark", "#4fc3f7")
+    .add("--palette-info-light", "#0288d1")
+
+    .add("--palette-info-text-main", "#0c3649")
+    .add("--palette-info-text-dark", "#173949")
+    .add("--palette-info-text-light", "#b3dbf1")
+
+    /*SUCCESS*/
+
+    .add("--palette-success-main", "#66bb6a")
+    .add("--palette-success-dark", "#81c784")
+    .add("--palette-success-light", "#388e3c")
+
+    .add("--palette-success-text-main", "#1e371f")
+    .add("--palette-success-text-dark", "#263b27")
+    .add("--palette-success-text-light", "#c3ddc5");
+
 export class ThemeManager implements IThemeManager {
     themes: ITheme[];
     current: ITheme | null;