cedro 0.1.0

package/src/core/themes.core.ts

@@ -0,0 +1,237 @@
+import { ITheme, IThemeManager } from "../interfaces/themes.interface";
+
+export class Theme implements ITheme {
+    name: string;
+    properties: Map<string, string>;
+    constructor(name: string) {
+        this.name = name;
+        this.properties = new Map<string, string>();
+    }
+
+    add(name: string, value: string): ITheme {
+        this.properties.set(name, value);
+        return this;
+    }
+}
+
+export const LightTheme = new Theme("light");
+export const DarkTheme = new Theme("dark");
+
+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-action-active", "rgba(0, 0, 0, 0.54)")
+    .add("--palette-action-disabled", "rgba(0, 0, 0, 0.26)")
+    .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", "rgba(0, 0, 0, 0.12)")
+
+    .add("--palette-link", "#1d79ee")
+    .add("--palette-link-hover", "#3393f2")
+
+    /*PRIMARY*/
+
+    .add("--palette-primary-main", "#90caf9")
+    .add("--palette-primary-dark", "#42a5f5")
+    .add("--palette-primary-light", "#e3f2fd")
+
+    .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");
+
+DarkTheme.add("--palette-text-primary", "#cdd0d3")
+    .add("--palette-text-secondary", "#9aa0a6")
+    .add("--palette-text-disabled", "rgba(255, 255, 255, 0.5)")
+
+    .add("--palette-background-default", "#121212")
+    .add("--palette-background-paper", "#121212")
+
+    .add("--palette-action-active", "#ffffff")
+    .add("--palette-action-disabled", "rgba(255, 255, 255, 0.3)")
+    .add("--palette-action-hover", "#252525")
+    .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", "#90caf9")
+    .add("--palette-link-hover", "#e3f2fd")
+
+    /*PRIMARY*/
+    .add("--palette-primary-main", "#90caf9")
+    .add("--palette-primary-dark", "#42a5f5")
+    .add("--palette-primary-light", "#e3f2fd")
+
+    .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;
+
+    constructor() {
+        this.themes = [];
+        this.current = null;
+    }
+
+    public toggleTheme(): void {
+        if (this.current) {
+            if (this.current.name === "dark") {
+                this.setTheme("light");
+                return;
+            } else {
+                this.setTheme("dark");
+                return;
+            }
+        }
+        this.setTheme("light");
+    }
+
+    public load(): void {
+        const storageThemeName = localStorage.getItem("papertrade-theme");
+
+        if (storageThemeName) {
+            this.setTheme(storageThemeName);
+            return;
+        }
+        this.setTheme("light");
+    }
+
+    public add(theme: ITheme): void {
+        this.themes.push(theme);
+    }
+
+    public get(name: string): ITheme | null {
+        for (const theme of this.themes) {
+            if (theme.name === name) {
+                return theme;
+            }
+        }
+        return null;
+    }
+
+    public setTheme(name: string): void {
+        this.current = this.get(name);
+
+        if (!this.current) return;
+
+        var root = document.querySelector(":root") as HTMLElement;
+
+        for (const prop of this.current.properties) {
+            const [name, value] = prop;
+            root.style.setProperty(name, value);
+        }
+
+        localStorage.setItem("papertrade-theme", this.current.name);
+    }
+
+    public getTheme(): string {
+        if (this.current) return this.current.name;
+        return "light";
+    }
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import Application from "./core/application.core"
+import {DOMcreateElement, DOMcreateFragment} from "./core/jsxsupport"
+import {Widget, WidgetTypes, WidgetAlignTypes} from "./ui/widget.ui"
+import {initWidgetCollection} from "./ui/widget.collection"
+
+initWidgetCollection();
+
+export{
+    Application,
+    Widget,
+    WidgetTypes,
+    WidgetAlignTypes,
+    DOMcreateElement,
+    DOMcreateFragment
+}
+

package/src/interfaces/application.interface.ts

@@ -0,0 +1,45 @@
+import Navigo from "navigo";
+import { IScreen } from "./screen.interface";
+import { IWidget } from "./widget.interface";
+import { Dialog } from "../ui/dialog";
+import { Seo } from "../core/seo";
+import { ThemeManager } from "../core/themes.core";
+
+export interface IScreenSize {
+    minWidth: number;
+    maxWidth: number;
+    cb: (app: IApplication) => void;
+}
+
+export enum WUIThemes {
+    LIGHT = "light",
+    DARK = "dark",
+}
+
+export interface IApplication {
+    seo: Seo;
+    screen: IScreen;
+    root: IWidget;
+    router: Navigo;
+    alertDialog: Dialog;
+    confirmDialog: Dialog;
+    mediaQueries: Map<string, IScreenSize>;
+
+    theme: ThemeManager;
+
+    attachWidget(guest: IWidget, host: IWidget): void;
+
+    addMediaQuery(
+        query: string,
+        minWidth: number,
+        maxWidth: number,
+        cb: (app: IApplication) => void
+    ): void;
+
+    init(): void;
+    setRoot(root: IWidget): void;
+    getRoot(): IWidget;
+
+    confirm(msg: string): void;
+    alert(msg: string): void;
+}

package/src/interfaces/screen.interface.ts

@@ -0,0 +1,17 @@
+import { Vector2D } from "../types/vector2d.type";
+
+export interface IScreen {
+    dimensions: Vector2D;
+
+    onResizeCB: () => void;
+
+    getWidth(): number;
+    getHeight(): number;
+
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    updateSize(): void;
+    populateSize(): void;
+
+    onResize(cb: () => void): void;
+}

package/src/interfaces/themes.interface.ts

@@ -0,0 +1,19 @@
+export interface ITheme {
+    name: string;
+    properties: Map<string, string>;
+    add(name: string, value: string): ITheme;
+}
+
+export interface IThemeManager {
+    themes: ITheme[];
+    current: ITheme | null;
+
+    toggleTheme(): void;
+
+    load(): void;
+    add(theme: ITheme): void;
+    get(name: string): ITheme | null;
+
+    setTheme(name: string): void;
+    getTheme(): string;
+}

package/src/interfaces/widget.interface.ts

@@ -0,0 +1,123 @@
+import { WidgetAlignTypes, WidgetTypes } from "../ui/widget.ui";
+import { Vector2D } from "../types/vector2d.type";
+
+export type WUIEvent =
+    | "click"
+    | "resize"
+    | "mousedown"
+    | "mouseup"
+    | "mousemove"
+    | "option-clicked";
+
+export type WUICallback = {
+    event: WUIEvent;
+    then: (event: Event, wuie: IWidget) => void;
+};
+
+export interface IWidget {
+    readonly id: string;
+
+    subscribers: Map<string, WUICallback>;
+
+    padding: number;
+
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+
+    initialWidth: number;
+    initialHeight: number;
+
+    fixedSize: number | null;
+
+    type: WidgetTypes;
+    align: WidgetAlignTypes;
+
+    visible: boolean;
+    enabled: boolean;
+
+    parent: IWidget | null;
+    childs: IWidget[];
+    bodyTagName: string;
+    body: HTMLElement;
+
+    overflow: boolean;
+
+    free: () => void;
+
+    subscribe: (cb: WUICallback) => void;
+    unsubscribe: (event: WUIEvent) => void;
+
+    setPadding(p: number): void;
+
+    setX(x: number): void;
+    setY(y: number): void;
+    setW(w: number): void;
+    setH(h: number): void;
+    setWH(w: number, h: number): void;
+
+    setInitialW(w: number): void;
+    setInitialH(h: number): void;
+
+    setFixedSize(s: number): void;
+
+    setType(type: WidgetTypes): void;
+    setAlign(align: WidgetAlignTypes): void;
+
+    setVisible(visible: boolean): void;
+    setEnabled(enabled: boolean): void;
+
+    setParent(parent: IWidget | null): void;
+    setBody(body: HTMLElement): void;
+    setChilds(childs: IWidget[]): void;
+
+    setOverflow(overflow: boolean): void;
+
+    addClass(cssClass: string): void;
+    deleteClass(cssClass: string): void;
+    deleteAllClasses(): void;
+
+    getPadding(): number;
+
+    getX(): number;
+    getY(): number;
+    getW(): number;
+    getH(): number;
+
+    getPosition(scroll: boolean): Vector2D;
+
+    getFixedSize(): number | null;
+
+    getType(): WidgetTypes;
+    getAlign(): WidgetAlignTypes;
+
+    getEnabled(): boolean;
+    getVisible(): boolean;
+
+    getParent(): IWidget | null;
+    getBody(): HTMLElement;
+    getChilds(): IWidget[];
+
+    getOverflow(): boolean;
+
+    addChild(child: IWidget | null): void;
+    disableSelection(): void;
+    display(): void;
+    enableSelection(): void;
+    hide(): void;
+    init(): void;
+    initPosition(): void;
+    render(): void;
+    resize(): void;
+    toggle(): void;
+
+    renderHTML(content: any): HTMLElement;
+
+    setZIndex(zIndex: number): void;
+    raisteTop(): void;
+    raiseBottom(): void;
+
+    attachWidget(guest: IWidget): void;
+    removeAllChilds(): void;
+}

package/src/types/vector2d.type.ts

@@ -0,0 +1,4 @@
+export type Vector2D = {
+    x: number;
+    y: number;
+};

package/src/ui/Icon.ui.ts

@@ -0,0 +1,70 @@
+import { Colors } from "./colors.ui";
+import { Widget } from "./widget.ui";
+
+export type IconVariants =
+    | "Filled"
+    | "Outlined"
+    | "Round"
+    | "Sharp"
+    | "Two Tone";
+
+export class Icon extends Widget {
+    variant: IconVariants;
+    color: Colors;
+    icon: string;
+
+    constructor(
+        id: string,
+        icon: string,
+        variant: IconVariants = "Filled",
+        parent: Widget
+    ) {
+        super(id, "span", parent);
+
+        this.variant = variant;
+        this.color = "primary";
+        this.icon = icon;
+
+        if (this.variant === "Filled") {
+            this.addClass("material-icons");
+        } else {
+            this.addClass(
+                "material-icons-" +
+                    this.variant.toString().replace(" ", "-").toLowerCase()
+            );
+        }
+
+        this.setIcon(icon);
+
+        this.init();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    setIcon(icon: string): void {
+        this.icon = icon;
+        this.body.innerHTML = icon;
+    }
+
+    setVariant(variant: IconVariants = "Filled"): void {
+        this.variant = variant;
+    }
+
+    setColor(color: Colors = "primary"): void {
+        this.color = color;
+    }
+
+    getVariant(): IconVariants {
+        return this.variant;
+    }
+
+    getColor(): Colors {
+        return this.color;
+    }
+
+    getIcon(): string {
+        return this.icon;
+    }
+}

package/src/ui/IconButton.ui.ts

@@ -0,0 +1,70 @@
+import "./styles/button.css";
+import { Widget, WidgetTypes } from "./widget.ui";
+import { Button } from "./button.ui";
+import { Icon } from "./Icon.ui";
+import { Label } from "./label.ui";
+
+export class IconButton extends Button {
+    icon: Icon;
+    label: Label;
+
+    constructor(
+        id: string,
+        icon: string = "dark_mode",
+        parent: Widget | null = null
+    ) {
+        super(id, parent);
+
+        this.icon = new Icon(id + ".icon", icon, undefined, this);
+        this.label = new Label(id + ".label", undefined, this);
+
+        this.icon.setType(WidgetTypes.FREE);
+        this.label.setType(WidgetTypes.FREE);
+
+        this.init();
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    public render(): void {
+        super.render();
+
+        this.label.getBody().style.position = "absolute";
+        this.icon.getBody().style.position = "absolute";
+
+        const labelHeight = this.label.getBody().clientHeight;
+        const labelWidth = this.label.getBody().clientWidth;
+
+        //const iconHeight = this.icon.getBody().clientHeight;
+        const iconWidth = 24;
+
+        const startX =
+            this.getBody().clientWidth / 2 - (iconWidth + labelWidth) / 2;
+        const startY = this.getH() / 2 - 24 / 2;
+        const startLabelY = this.getH() / 2 - labelHeight / 2;
+
+        if (startX < 0 || startY < 0) {
+            setTimeout(() => {
+                this.render();
+            }, 500);
+            return;
+        }
+
+        this.icon.setX(startX);
+        this.label.setX(startX + iconWidth + 5);
+
+        this.icon.setY(startY);
+        this.label.setY(startLabelY);
+    }
+
+    public setText(text: string): void {
+        //super.setText(text);
+        this.label.setText(text);
+    }
+
+    public setIcon(icon: string): void {
+        this.icon.setIcon(icon);
+    }
+}

package/src/ui/button.ui.ts

@@ -0,0 +1,88 @@
+import "./styles/button.css";
+import { Colors } from "./colors.ui";
+import { Widget } from "./widget.ui";
+
+export type ButonVariants = "contained" | "outlined" | "text";
+export type ButonSizes = "small" | "medium" | "large";
+
+export class Button extends Widget {
+    variant: ButonVariants;
+    color: Colors;
+    fullWidth: boolean;
+    size: ButonSizes;
+    href: string;
+    text: string;
+
+    constructor(id: string, parent: Widget | null = null) {
+        super(id, "button", parent);
+
+        this.fullWidth = false;
+        //this.setType(WidgetTypes.CUSTOM);
+        this.variant = "text";
+        this.color = "primary"; //primary";
+        this.size = "medium";
+        this.href = "#";
+        this.text = "";
+
+        this.configureStyles();
+
+        this.init();
+    }
+
+    private configureStyles(): void {
+        this.deleteAllClasses();
+        this.addClass(`WUIButton-${this.variant}`);
+        this.addClass(`WUIButton-${this.variant}-color-${this.color}`);
+    }
+
+    public init(): void {
+        super.init();
+    }
+
+    setText(text: string): void {
+        this.text = text;
+        this.body.innerHTML = text;
+    }
+
+    setVariant(variant: ButonVariants = "contained"): void {
+        this.variant = variant;
+        this.configureStyles();
+    }
+
+    setColor(color: Colors = "primary"): void {
+        this.color = color;
+        this.configureStyles();
+    }
+
+    setFullWidth(fullWidth: boolean = false): void {
+        this.fullWidth = fullWidth;
+    }
+
+    setSize(size: ButonSizes = "medium"): void {
+        this.size = size;
+    }
+
+    setHref(href: string): void {
+        this.href = href;
+    }
+
+    getVariant(): ButonVariants {
+        return this.variant;
+    }
+
+    getColor(): Colors {
+        return this.color;
+    }
+
+    getSize(): ButonSizes {
+        return this.size;
+    }
+
+    getHref(): string {
+        return this.href;
+    }
+
+    getText(): string {
+        return this.text;
+    }
+}

package/src/ui/colors.ui.ts

@@ -0,0 +1,7 @@
+export type Colors =
+    | "primary"
+    | "secondary"
+    | "success"
+    | "error"
+    | "info"
+    | "warning";