cradova 1.0.0

package/scripts/Metrics.d.ts

@@ -0,0 +1,51 @@
+declare const metrics: {
+    base: string;
+    font: string;
+    radius: string;
+    padding: string;
+    large: string;
+    big: string;
+    small: string;
+    s5: string;
+    s8: string;
+    s10: string;
+    s16: string;
+    s20: string;
+    s30: string;
+    s40: string;
+    s50: string;
+    s60: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    body1: string;
+    body2: string;
+    body3: string;
+    body4: string;
+    body5: string;
+    body6: string;
+    borderWidth: string;
+    horizontalLineHeight: string;
+    screenWidth: string;
+    screenHeight: string;
+    drawerWidth: string;
+    navBarHeight: string;
+    buttonRadius: string;
+    icons: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+        xl: string;
+    };
+    images: {
+        small: string;
+        medium: string;
+        large: string;
+        logo: string;
+    };
+};
+export default metrics;

package/scripts/Metrics.js

@@ -0,0 +1,56 @@
+const { innerWidth, innerHeight } = window;
+const height = innerHeight;
+const width = innerWidth;
+const metrics = {
+    // global sizes
+    base: "8px",
+    font: "14px",
+    radius: "20px",
+    padding: "24px",
+    large: "40px",
+    big: "32px",
+    small: "24px",
+    s5: "5px",
+    s8: "8px",
+    s10: "10px",
+    s16: "16px",
+    s20: "20px",
+    s30: "30px",
+    s40: "40px",
+    s50: "50px",
+    s60: "60px",
+    // font sizes
+    h1: "30px",
+    h2: "24px",
+    h3: "20px",
+    h4: "16px",
+    h5: "14px",
+    h6: "13px",
+    body1: "30px",
+    body2: "22px",
+    body3: "16px",
+    body4: "14px",
+    body5: "13px",
+    body6: "12px",
+    borderWidth: "0.4px",
+    horizontalLineHeight: "1px",
+    screenWidth: width < height ? width + "px" : height + "px",
+    screenHeight: width < height ? height + "px" : width + "px",
+    drawerWidth: (3 / 4) * width + "px",
+    navBarHeight: "60px",
+    buttonRadius: "4px",
+    icons: {
+        tiny: "15px",
+        small: "20px",
+        medium: "30px",
+        large: "45px",
+        xl: "50px",
+    },
+    images: {
+        small: "20px",
+        medium: "40px",
+        large: "60px",
+        logo: "200px",
+    },
+};
+export default metrics;

package/scripts/Metrics.ts

@@ -0,0 +1,66 @@
+const { innerWidth, innerHeight } = window;
+const height = innerHeight;
+const width = innerWidth;
+
+const metrics = {
+  // global sizes
+  base: "8px",
+  font: "14px",
+  radius: "20px",
+  padding: "24px",
+  large: "40px",
+  big: "32px",
+  small: "24px",
+
+  s5: "5px",
+  s8: "8px",
+  s10: "10px",
+  s16: "16px",
+  s20: "20px",
+  s30: "30px",
+  s40: "40px",
+  s50: "50px",
+  s60: "60px",
+
+  // font sizes
+  h1: "30px",
+  h2: "24px",
+  h3: "20px",
+  h4: "16px",
+  h5: "14px",
+  h6: "13px",
+  body1: "30px",
+  body2: "22px",
+  body3: "16px",
+  body4: "14px",
+  body5: "13px",
+  body6: "12px",
+
+  borderWidth: "0.4px",
+
+  horizontalLineHeight: "1px",
+
+  screenWidth: width < height ? width + "px" : height + "px",
+  screenHeight: width < height ? height + "px" : width + "px",
+  drawerWidth: (3 / 4) * width + "px",
+  navBarHeight: "60px",
+
+  buttonRadius: "4px",
+
+  icons: {
+    tiny: "15px",
+    small: "20px",
+    medium: "30px",
+    large: "45px",
+    xl: "50px",
+  },
+
+  images: {
+    small: "20px",
+    medium: "40px",
+    large: "60px",
+    logo: "200px",
+  },
+};
+
+export default metrics;

package/scripts/Router.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Facilitates navigation within the application and initializes
+ * page views based on the matched routes.
+ */
+declare type r = {
+    routes: Record<string, Record<string, string | (() => void)>>;
+    route: (path: string, controller: () => void) => void;
+    navigate: (href: string) => void;
+    router: (e: unknown | undefined) => void;
+};
+declare let Router: r;
+export default Router;

package/scripts/Router.js

@@ -0,0 +1,95 @@
+/**
+ * Facilitates navigation within the application and initializes
+ * page views based on the matched routes.
+ */
+let Router = {
+    routes: {},
+    navigate: () => console.log(""),
+    route: () => console.log(""),
+    router: () => console.log(""),
+};
+/**
+ *
+ * @param {object} context Any initial context to be passed to pages.
+ */
+/**
+ * Registers a route.
+ *
+ * @param {string}   path     Route path.
+ * @param {Function} controller Callback method.
+ */
+Router.route = function (path = "/", controller) {
+    const link = document.createElement("a");
+    link.href = window.location.href.replace(/#(.*)$/, "") + path.split("/")[1];
+    Router.routes[path] = {
+        templateId: path.split("/")[1] !== "" ? path.split("/")[1] : window.location.hostname,
+        controller: controller,
+    };
+    return link;
+};
+Router.navigate = function (href) {
+    let route = null, link = null;
+    if (href.includes(".")) {
+        if (new URL(href).pathname === window.location.pathname) {
+            return;
+        }
+        route = Router.routes[new URL(href).pathname];
+        link = new URL(href).pathname;
+    }
+    else {
+        if (href === window.location.pathname) {
+            return;
+        }
+        route = Router.routes[href];
+        link = href;
+    }
+    if (route && typeof route.controller === "function") {
+        route.controller();
+    }
+    else {
+        throw new Error("cradova err route doesn't exist");
+    }
+    window.history.pushState(href, "", link);
+    window.scrollTo(0, 0);
+    return;
+};
+Router.router = function (e) {
+    const Alink = e.path.find((el) => el.tagName === "A");
+    if (Alink && Alink.href.includes("#")) {
+        return;
+    }
+    e.preventDefault();
+    if (Alink) {
+        if (Alink.href === "" ||
+            new URL(Alink.href).pathname === window.location.pathname) {
+            return;
+        }
+        const route = Router.routes[new URL(Alink.href).pathname];
+        if (route && typeof route.controller === "function") {
+            route.controller();
+        }
+        else {
+            throw new Error("cradova err route doesn't exist  " + Alink.href);
+        }
+        window.history.pushState(Alink.href, "", new URL(Alink.href).pathname);
+        window.scrollTo(0, 0);
+        return;
+    }
+    const url = window.location.pathname;
+    const route = Router.routes[url];
+    if (route && typeof route.controller === "function") {
+        route.controller();
+    }
+    window.scrollTo(0, 0);
+};
+/**
+ * Responds to click events anywhere in the document and when
+ * the click happens on a link that is supposed to be handled
+ * by the router, loads and displays the target page.
+ *
+ * @param {Event} e Click event.
+ */
+document.addEventListener("click", Router.router);
+window.addEventListener("load", Router.router);
+window.addEventListener("popstate", Router.router);
+export default Router;

package/scripts/Router.ts

@@ -0,0 +1,105 @@
+/**
+ * Facilitates navigation within the application and initializes
+ * page views based on the matched routes.
+ */
+
+const Router = {};
+/**
+ *
+ * @param {object} context Any initial context to be passed to pages.
+ */
+
+Router.routes = {};
+
+/**
+ * Registers a route.
+ *
+ * @param {string}   path     Route path.
+ * @param {Function} controller Callback method.
+ */
+
+Router.route = function (path = "/", controller) {
+  const link = document.createElement("a");
+  link.href = window.location.href.replace(/#(.*)$/, "") + path.split("/")[1];
+  Router.routes[path] = {
+    templateId:
+      path.split("/")[1] !== "" ? path.split("/")[1] : window.location.hostname,
+    controller: controller,
+  };
+  return link;
+};
+Router.navigate = function (href) {
+  let route = null,
+    link = null;
+  if (href.includes(".")) {
+    if (new URL(href).pathname === window.location.pathname) {
+      return;
+    }
+    route = Router.routes[new URL(href).pathname];
+    link = new URL(href).pathname;
+  } else {
+    if (href === window.location.pathname) {
+      return;
+    }
+    route = Router.routes[href];
+    link = href;
+  }
+
+  if (route) {
+    route.controller();
+  } else {
+    throw new Error("cradova err route doesn't exist");
+  }
+  window.history.pushState(href, null, link);
+  window.scrollTo(0, 0);
+  return;
+};
+
+Router.router = function (e) {
+  const Alink = e.path.find((el) => el.tagName === "A");
+  if (Alink && Alink.href.includes("#")) {
+    return;
+  }
+  e.preventDefault();
+  if (Alink) {
+    if (
+      Alink.href === "" ||
+      new URL(Alink.href).pathname === window.location.pathname
+    ) {
+      return;
+    }
+    const route = Router.routes[new URL(Alink.href).pathname];
+    if (route) {
+      route.controller(e);
+    } else {
+      throw new Error("cradova err route doesn't exist  " + Alink.href);
+    }
+    window.history.pushState(Alink.href, null, new URL(Alink.href).pathname);
+    window.scrollTo(0, 0);
+    return;
+  }
+
+  const url = window.location.pathname;
+  const route = Router.routes[url];
+  if (route) {
+    route.controller(e);
+  }
+  window.scrollTo(0, 0);
+};
+
+/**
+ * Responds to click events anywhere in the document and when
+ * the click happens on a link that is supposed to be handled
+ * by the router, loads and displays the target page.
+ *
+ * @param {Event} e Click event.
+ */
+
+document.addEventListener("click", Router.router);
+window.addEventListener("load", Router.router);
+window.addEventListener("popstate", (e) => {
+  e.preventDefault();
+  Router.router(e);
+});
+
+export default Router;

package/scripts/Screen.d.ts

@@ -0,0 +1,11 @@
+declare class Screen {
+    name: string;
+    template: HTMLElement;
+    callBacks: ((html: ChildNode | null) => void)[];
+    constructor(name: string, template: HTMLElement | (() => HTMLElement));
+    onActivate(cb: (html: ChildNode | null) => void): void;
+    addChild(...addOns: HTMLElement[] | (() => HTMLElement)[] | string[]): void;
+    detach(): void;
+    Activate(): void;
+}
+export default Screen;

package/scripts/Screen.js

@@ -0,0 +1,62 @@
+class Screen {
+    constructor(name, template) {
+        this.name = name;
+        this.template = document.createElement("div");
+        this.template.style.width = "100%";
+        this.template.style.display = "flex";
+        this.template.style.flexDirection = "column";
+        this.template.id = "cradova-screen-set";
+        if (typeof template === "function") {
+            let fuc = template();
+            this.template.append(fuc);
+            // if (typeof fuc === "function") {
+            //   this.template.append(fuc());
+            // } else {
+            //   this.template.append(fuc);
+            // }
+        }
+        else {
+            if (!(template instanceof HTMLElement)) {
+                throw new Error("Cradova err only should a html element is valid");
+            }
+            else {
+                this.template.append(template);
+            }
+        }
+        this.callBacks = [];
+    }
+    onActivate(cb) {
+        this.callBacks.push(cb);
+    }
+    addChild(...addOns) {
+        for (let i = 0; i < addOns.length; i++) {
+            if (addOns[i] && addOns[i] instanceof HTMLElement) {
+                this.template.append(addOns[i]);
+            }
+            if (typeof addOns[i] === "function") {
+                this.template.append(addOns[i]());
+            }
+        }
+    }
+    detach() {
+        var _a;
+        const screen = document.querySelector("#cradova-screen-set");
+        if (screen) {
+            (_a = document.querySelector("#app-wrapper")) === null || _a === void 0 ? void 0 : _a.removeChild(screen);
+        }
+    }
+    Activate() {
+        var _a;
+        if (document.title === this.name) {
+            return;
+        }
+        const screen = document.querySelector("#cradova-screen-set");
+        if (screen) {
+            this.detach();
+        }
+        document.title = this.name;
+        (_a = document.querySelector("#app-wrapper")) === null || _a === void 0 ? void 0 : _a.append(this.template);
+        this.callBacks.forEach((cb) => cb(this.template.firstChild));
+    }
+}
+export default Screen;

package/scripts/Screen.ts

@@ -0,0 +1,62 @@
+class Screen {
+  name: string;
+  template: HTMLElement;
+  callBacks: ((html: ChildNode | null) => void)[];
+  constructor(name: string, template: HTMLElement | (() => HTMLElement)) {
+    this.name = name;
+    this.template = document.createElement("div");
+    this.template.style.width = "100%";
+    this.template.style.display = "flex";
+    this.template.style.flexDirection = "column";
+    this.template.id = "cradova-screen-set";
+    if (typeof template === "function") {
+      let fuc: HTMLElement | (() => HTMLElement) = template();
+      this.template.append(fuc);
+      // if (typeof fuc === "function") {
+      //   this.template.append(fuc());
+      // } else {
+      //   this.template.append(fuc);
+      // }
+    } else {
+      if (!(template instanceof HTMLElement)) {
+        throw new Error("Cradova err only should a html element is valid");
+      } else {
+        this.template.append(template);
+      }
+    }
+    this.callBacks = [];
+  }
+  onActivate(cb: (html: ChildNode | null) => void) {
+    this.callBacks.push(cb);
+  }
+  addChild(...addOns: HTMLElement[] | (() => HTMLElement)[] | string[]) {
+    for (let i = 0; i < addOns.length; i++) {
+      if (addOns[i] && addOns[i] instanceof HTMLElement) {
+        this.template.append(addOns[i]);
+      }
+      if (typeof addOns[i] === "function") {
+        this.template.append(addOns[i]());
+      }
+    }
+  }
+  detach() {
+    const screen = document.querySelector("#cradova-screen-set");
+    if (screen) {
+      document.querySelector("#app-wrapper")?.removeChild(screen);
+    }
+  }
+  Activate() {
+    if (document.title === this.name) {
+      return;
+    }
+    const screen = document.querySelector("#cradova-screen-set");
+    if (screen) {
+      this.detach();
+    }
+    document.title = this.name;
+    document.querySelector("#app-wrapper")?.append(this.template);
+    this.callBacks.forEach((cb) => cb(this.template.firstChild));
+  }
+}
+
+export default Screen;

package/scripts/animate.d.ts

@@ -0,0 +1,25 @@
+/**
+Write animation value in javascript
+
+@example
+
+_.animate("popanimation",
+["from",
+{
+    transform: "scale3D(2)" ,
+    height: "10%",
+    "background-color": "#0000"
+}],
+
+["to",
+{
+    transform: "scale3D(1)" ,
+    height: "100%",
+    "background-color": "#ff9800"
+}]
+)
+
+*/
+declare type props = Record<string, string>;
+export default function animate(indentifier: string, ...properties: props[]): void;
+export {};

package/scripts/animate.js

@@ -0,0 +1,47 @@
+/**
+Write animation value in javascript
+
+@example
+
+_.animate("popanimation",
+["from",
+{
+    transform: "scale3D(2)" ,
+    height: "10%",
+    "background-color": "#0000"
+}],
+
+["to",
+{
+    transform: "scale3D(1)" ,
+    height: "100%",
+    "background-color": "#ff9800"
+}]
+)
+
+*/
+export default function animate(indentifier, ...properties) {
+    /*This is for creating css
+   animations  using javascipt*/
+    const styS = "@keyframes " + indentifier + " " + "{", styE = "}", proplen = properties.length;
+    let style = " ", aniSty = " ", Animation = "  ", totalAnimation = null;
+    const animationStep = (num) => {
+        for (const [k, v] of Object.entries(properties[num][1])) {
+            style += "" + k + ": " + v + ";";
+        }
+        aniSty += "" + properties[num][0] + "{" + style + "}";
+        return aniSty;
+    };
+    for (let i = 0; i < proplen; i++) {
+        Animation += animationStep(i);
+    }
+    let aniStyleTag = document.querySelector("style");
+    if (aniStyleTag === null) {
+        aniStyleTag = document.createElement("style");
+    }
+    aniStyleTag.media = "screen";
+    totalAnimation = aniStyleTag.innerHTML;
+    totalAnimation += styS + Animation + styE;
+    aniStyleTag.innerHTML = totalAnimation;
+    document.head.append(aniStyleTag);
+}

package/scripts/animate.ts

@@ -0,0 +1,57 @@
+/**
+Write animation value in javascript 
+
+@example
+
+_.animate("popanimation",
+["from",
+{
+    transform: "scale3D(2)" ,
+    height: "10%",
+    "background-color": "#0000"
+}],
+
+["to",
+{
+    transform: "scale3D(1)" ,
+    height: "100%",
+    "background-color": "#ff9800"
+}]
+)
+
+*/
+
+type props = Record<string, string>;
+
+export default function animate(indentifier: string, ...properties: props[]) {
+  /*This is for creating css  
+ animations  using javascipt*/
+  const styS = "@keyframes " + indentifier + " " + "{",
+    styE = "}",
+    proplen = properties.length;
+
+  let style = " ",
+    aniSty = " ",
+    Animation = "  ",
+    totalAnimation = null;
+
+  const animationStep = (num: number) => {
+    for (const [k, v] of Object.entries(properties[num][1])) {
+      style += "" + k + ": " + v + ";";
+    }
+    aniSty += "" + properties[num][0] + "{" + style + "}";
+    return aniSty;
+  };
+  for (let i = 0; i < proplen; i++) {
+    Animation += animationStep(i);
+  }
+  let aniStyleTag = document.querySelector("style");
+  if (aniStyleTag === null) {
+    aniStyleTag = document.createElement("style");
+  }
+  aniStyleTag.media = "screen";
+  totalAnimation = aniStyleTag.innerHTML;
+  totalAnimation += styS + Animation + styE;
+  aniStyleTag.innerHTML = totalAnimation;
+  document.head.append(aniStyleTag);
+}

package/scripts/css.d.ts

@@ -0,0 +1,20 @@
+/**
+Write CSS styles in Javascript
+@example
+
+css("#container",
+{
+    height: "100%",
+    height: "100%",
+    background-color: "#ff9800"
+})
+
+css(".btn:hover",
+{
+    height: "100%",
+    height: "100%",
+    background-color: "#ff9800"
+})
+
+*/
+export default function css(indentifier: string, properties: Record<string, string>): void;