slicejs-cli 1.0.45 → 1.0.47

package/PROJECT_TEMPLATES/Basic/Slice/Slice.js

@@ -1,172 +1,194 @@
 import Logger from "./Components/Structural/Logger/Logger.js";
 import Controller from "./Components/Structural/Controller/Controller.js";
 import StylesManager from "./Components/Structural/StylesManager/StylesManager.js";
-import Debugger from "./Components/Structural/Debugger/Debugger.js";
 import sliceConfig from "./sliceConfig.json" assert { type: "json" };
 
-
 export default class Slice {
+  constructor() {
+    this.logger = new Logger();
+    this.controller = new Controller();
+    this.stylesManager = new StylesManager();
+    this.paths = sliceConfig.paths;
+  }
+
+  async getClass(module) {
+    try {
+      const { default: myClass } = await import(module);
+      return await myClass;
+    } catch (error) {
+      this.logger.logError("Slice", `Error loading class ${module}`, error);
+    }
+  }
+
+  async build(componentName, props = {}) {
+    if (!componentName) {
+      this.logger.logError(
+        "Slice",
+        null,
+        `Component name is required to build a component`
+      );
+      return null;
+    }
 
-    constructor() {
-        this.logger = new Logger();
-        this.controller = new Controller();
-        this.stylesManager = new StylesManager();
-        this.paths = {
-            components: "../../../../Slice/Components",
-            themes: "../../../../Slice/Themes"
-        };
-        
-
-        this.getClass = async function getClass(module) {
-            try {
-                const { default: myClass } = await import(module);
-                return await myClass;
-            } catch (error) {
-                this.logger.logError("Slice", `Error loading class ${module}`, error);
-            }
-        }
-        
+    if (!this.controller.componentCategories.has(componentName)) {
+      this.logger.logError(
+        "Slice",
+        null,
+        `Component ${componentName} not found in components.js file`
+      );
+      return null;
     }
 
+    let compontentCategory =
+      this.controller.componentCategories.get(componentName);
 
-    async build(componentName, props = {}) {
-
-        if(!componentName) {
-            this.logger.logError("Slice", null, `Component name is required to build a component`);
-            return null;
-        }
-
-        if(!this.controller.componentCategories.has(componentName)) {
-            this.logger.logError("Slice", null, `Component ${componentName} not found in components.js file`);
-            return null;
-        }
-
-        let compontentCategory = this.controller.componentCategories.get(componentName);
-
-        //Pregunta para la posteridad: ¿Deberíamos dejar que el usuario pueda crear componentes de categoría Structural?
-        //Por ahora no lo permitimos, pero si en el futuro se decide que sí, se debe cambiar el código de abajo para que funcione
-        //con componentes de categoría Structural
-
-                if(compontentCategory === "Structural") {
-                    this.logger.logError("Slice", null, `Component ${componentName} is a Structural component and cannot be built`);
-                    return null;
-                }
-
-
-        const isVisual = compontentCategory === "Visual";
-
-        let modulePath = `${this.paths.components}/${compontentCategory}/${componentName}/${componentName}.js`;
-
-        
-        // Load template if not loaded previously and component category is Visual
-        if (!this.controller.templates.has(componentName) && isVisual ) {
-            try {
-                const html = await this.controller.fetchText(componentName, "html");
-                const template = document.createElement("template");
-                template.innerHTML = html;
-                this.controller.templates.set(componentName, template);
-                this.logger.logInfo("Slice", `Template ${componentName} loaded`)
-            } catch (error) {
-                console.log(error)
-                this.logger.logError("Slice", `Error loading template ${componentName}`, error);
-            }
-        }
-
-    
-        //Load class if not loaded previously 
-        if (!this.controller.classes.has(componentName)) {
-            try {
-                const ComponentClass = await this.getClass(modulePath);
-                this.controller.classes.set(componentName, ComponentClass);
-                this.logger.logInfo("Slice", `Class ${componentName} loaded`)
-            } catch (error) {
-                console.log(error)
-                this.logger.logError("Slice", `Error loading class ${modulePath}`, error);
-            }
-        }
-
-        //Load css if not loaded previously and component category is Visual
-        if (!this.controller.requestedStyles.has(componentName) && isVisual) {
-            try {
-                const css = await this.controller.fetchText(componentName, "css");
-                this.stylesManager.registerComponentStyles(componentName, css);
-                this.logger.logInfo("Slice", `CSS ${componentName} loaded`)
-            } catch (error) {
-                console.log(error)
-                this.logger.logError("Slice", `Error loading css ${componentName}`, error);
-            }
-        }
-
-
-        //Create instance
-        try {
-            let componentIds = {};
-            if(props.id) componentIds.id = props.id;
-            if(props.sliceId) componentIds.sliceId = props.sliceId;
-
-            delete props.id;
-            delete props.sliceId;
-            
-            const ComponentClass = this.controller.classes.get(componentName);
-            const componentInstance = new ComponentClass(props);
-
-            if(componentIds.id) componentInstance.id = componentIds.id;
-            if(componentIds.sliceId) componentInstance.sliceId = componentIds.sliceId;
-
-            this.stylesManager.handleInstanceStyles(componentInstance,props);
-
-            if(!this.controller.registerComponent(componentInstance)) {
-                this.logger.logError("Slice", `Error registering instance ${componentName} ${componentInstance.sliceId}`);
-                return null;
-            }
-
-            if(this.debugger.enabled && compontentCategory === "Visual"){
-                this.debugger.attachDebugMode(componentInstance);
-            }
-
-            //if the component has a method called init, call it
-            if(componentInstance.init ) await componentInstance.init();
-
-            this.logger.logInfo("Slice", `Instance ${componentInstance.sliceId} created`)
-            return componentInstance;
-
-        } catch (error) {
-            console.log(error)
-            this.logger.logError("Slice", `Error creating instance ${componentName}`, error);
-        }
-
-        
+    //Pregunta para la posteridad: ¿Deberíamos dejar que el usuario pueda crear componentes de categoría Structural?
+    //Por ahora no lo permitimos, pero si en el futuro se decide que sí, se debe cambiar el código de abajo para que funcione
+    //con componentes de categoría Structural
+
+    if (compontentCategory === "Structural") {
+      this.logger.logError(
+        "Slice",
+        null,
+        `Component ${componentName} is a Structural component and cannot be built`
+      );
+      return null;
     }
 
-    setPaths(paths) {
-        this.paths = paths;
+    const isVisual = compontentCategory === "Visual";
+
+    let modulePath = `${this.paths.components}/${compontentCategory}/${componentName}/${componentName}.js`;
+
+    // Load template if not loaded previously and component category is Visual
+    if (!this.controller.templates.has(componentName) && isVisual) {
+      try {
+        const html = await this.controller.fetchText(componentName, "html");
+        const template = document.createElement("template");
+        template.innerHTML = html;
+        this.controller.templates.set(componentName, template);
+        this.logger.logInfo("Slice", `Template ${componentName} loaded`);
+      } catch (error) {
+        console.log(error);
+        this.logger.logError(
+          "Slice",
+          `Error loading template ${componentName}`,
+          error
+        );
+      }
     }
 
-    setTheme(themeName) {
-        this.stylesManager.setTheme(themeName);
+    //Load class if not loaded previously
+    if (!this.controller.classes.has(componentName)) {
+      try {
+        const ComponentClass = await this.getClass(modulePath);
+        this.controller.classes.set(componentName, ComponentClass);
+        this.logger.logInfo("Slice", `Class ${componentName} loaded`);
+      } catch (error) {
+        console.log(error);
+        this.logger.logError(
+          "Slice",
+          `Error loading class ${modulePath}`,
+          error
+        );
+      }
     }
 
-    attachTemplate(componentInstance) {
-        this.controller.loadTemplateToComponent(componentInstance);
+    //Load css if not loaded previously and component category is Visual
+    if (!this.controller.requestedStyles.has(componentName) && isVisual) {
+      try {
+        const css = await this.controller.fetchText(componentName, "css");
+        this.stylesManager.registerComponentStyles(componentName, css);
+        this.logger.logInfo("Slice", `CSS ${componentName} loaded`);
+      } catch (error) {
+        console.log(error);
+        this.logger.logError(
+          "Slice",
+          `Error loading css ${componentName}`,
+          error
+        );
+      }
     }
 
-    
+    //Create instance
+    try {
+      let componentIds = {};
+      if (props.id) componentIds.id = props.id;
+      if (props.sliceId) componentIds.sliceId = props.sliceId;
+
+      delete props.id;
+      delete props.sliceId;
+
+      const ComponentClass = this.controller.classes.get(componentName);
+      const componentInstance = new ComponentClass(props);
+
+      if (componentIds.id) componentInstance.id = componentIds.id;
+      if (componentIds.sliceId)
+        componentInstance.sliceId = componentIds.sliceId;
+
+      this.stylesManager.handleInstanceStyles(componentInstance, props);
+
+      if (!this.controller.registerComponent(componentInstance)) {
+        this.logger.logError(
+          "Slice",
+          `Error registering instance ${componentName} ${componentInstance.sliceId}`
+        );
+        return null;
+      }
+
+      if (sliceConfig.debugger.enabled && compontentCategory === "Visual") {
+        this.debugger.attachDebugMode(componentInstance);
+      }
+
+      //if the component has a method called init, call it
+      if (componentInstance.init) await componentInstance.init();
+
+      this.logger.logInfo(
+        "Slice",
+        `Instance ${componentInstance.sliceId} created`
+      );
+      return componentInstance;
+    } catch (error) {
+      console.log(error);
+      this.logger.logError(
+        "Slice",
+        `Error creating instance ${componentName}`,
+        error
+      );
+    }
+  }
 
-    
+  setTheme(themeName) {
+    this.stylesManager.setTheme(themeName);
+  }
 
+  attachTemplate(componentInstance) {
+    this.controller.loadTemplateToComponent(componentInstance);
+  }
 }
 
 async function init() {
-    window.slice = new Slice();
-    window.slice.debugger = new Debugger();
-
-    if(window.slice.debugger.enabled){
-       await window.slice.debugger.enableDebugMode();
-       document.body.appendChild(window.slice.debugger);
-    }
-
-    await window.slice.stylesManager.setTheme(sliceConfig.stylesManager.defaultTheme);
-
+  window.slice = new Slice();
+
+  if (sliceConfig.debugger.enabled) {
+    const DebuggerModule = await window.slice.getClass(
+      `${sliceConfig.paths.components}/Structural/Debugger/Debugger.js`
+    );
+    window.slice.debugger = new DebuggerModule();
+    await window.slice.debugger.enableDebugMode();
+    document.body.appendChild(window.slice.debugger);
+  }
+
+  if (sliceConfig.translator.enabled) {
+    const translator = await window.slice.build("Translator");
+    window.slice.translator = translator;
+    window.slice.logger.logInfo("Slice", "Translator succesfuly enabled");
+  }
+
+  await window.slice.stylesManager.init();
+
+  await window.slice.stylesManager.setTheme(
+    sliceConfig.stylesManager.defaultTheme
+  );
 }
 
-init();
+await init();

package/PROJECT_TEMPLATES/Basic/Slice/Styles/sliceStyles.css

@@ -0,0 +1,10 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
+
+:root {
+  --font-family: "Roboto", sans-serif;
+  --border-radius-slice: 5px;
+  --slice-border: 1px;
+}
+body {
+  background-color: var(--primary-background-color);
+}

package/PROJECT_TEMPLATES/Basic/Slice/Themes/Dark.css

@@ -1,14 +1,38 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
+:root {
+  --font-primary-color: #fff;
 
-* {
-  font-family: "Roboto", sans-serif;
-}
+  /** primary **/
+  --primary-color: #0066ff;
+  --primary-color-rgb: rgb(0, 102, 255);
+  --primary-background-color: #000;
+  --primary-color-contrast: #000;
+  --primary-color-shade: #222;
 
-:root {
-  --primary-color: #cecece;
-  --primary-color-border: rgb(206, 206, 206, 0.5);
-  --primary-background-color: #191919;
-  --secundary-background-color: #292929;
+  /** secondary **/
+  --secondary-color: #63ccfd;
+  --secondary-color-rgb: rgb(99, 204, 253);
+  --secondary-background-color: #222;
+  --secondary-color-contrast: #fff;
+
+  /** tertiary **/
+  --tertiary-background-color: #444;
 
+  /** success **/
+  --success-color: #00ff40;
+  --success-contrast: #000;
+
+  /** warning **/
+  --warning-color: #ffff40;
+  --warning-contrast: #000;
+
+  /** danger **/
   --danger-color: #ff0000;
+  --danger-contrast: #000;
+
+  /** medium **/
+  --medium-color: #92949c;
+  --medium-contrast: #fff;
+
+  /* Disabled color */
+  --disabled-color: #7f7f7f;
 }

package/PROJECT_TEMPLATES/Basic/Slice/Themes/Light.css

@@ -1,14 +1,31 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
-
-* {
-  font-family: "Roboto", sans-serif;
-}
-
 :root {
-  --primary-color: #000;
-  --primary-color-border: rgb(0, 0, 0, 0.5);
+  --font-primary-color: #000;
+  --font-secondary-color: #474747;
+  /** primary **/
+  --primary-color: #0066ff;
+  --primary-color-rgb: rgb(0, 102, 255);
   --primary-background-color: #fff;
-  --secundary-background-color: #dddddd;
-  
+  --primary-color-contrast: #fff;
+  --primary-color-shade: #ddd;
+  /** secondary **/
+  --secondary-color: #63ccfd;
+  --secondary-color-rgb: rgb(99, 204, 253);
+  --secondary-background-color: #ddd;
+  --secondary-color-contrast: #fff;
+  /** tertiary **/
+  --tertiary-background-color: #c4c4c4;
+  /** success **/
+  --success-color: #00ff40;
+  --success-contrast: #fff;
+  /** warning **/
+  --warning-color: #ffff40;
+  --warning-contrast: #000;
+  /** danger **/
   --danger-color: #ff0000;
+  --danger-contrast: #fff;
+  /** medium **/
+  --medium-color: #92949c;
+  --medium--contrast: #000;
+
+  --disabled-color: #7f7f7f;
 }

package/PROJECT_TEMPLATES/Basic/Slice/Themes/Slice.css

@@ -1,15 +1,30 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&family=Roboto&display=swap");
-
-* {
-  font-family: "Roboto", sans-serif;
-}
-
 :root {
-  --primary-color: rgba(67, 83, 52);
-  --primary-color-border: rgba(67, 83, 52);
-  --primary-background-color: rgba(158, 179, 132);
-  --secundary-background-color: rgba(250, 241, 228);
-  --secondary-color: rgba(250, 241, 228)
+  --font-primary-color: #2f1335;
+  /** primary **/
+  --primary-color: #8e44ad; /* Morado oscuro */
+  --primary-color-rgb: rgb(142, 68, 173);
+  --primary-background-color: #fff;
+  --primary-color-contrast: #fff;
+  --primary-color-shade: #ddd;
+  /** secondary **/
+  --secondary-color: #9b59b6; /* Morado */
+  --secondary-color-rgb: rgb(155, 89, 182);
+  --secondary-background-color: #ddd;
+  --secondary-color-contrast: #fff;
+  /** tertiary **/
+  --tertiary-background-color: #3498db; /* Azul */
+  /** success **/
+  --success-color: #27ae60; /* Verde */
+  --success-contrast: #fff;
+  /** warning **/
+  --warning-color: #f39c12; /* Naranja */
+  --warning-contrast: #000;
+  /** danger **/
+  --danger-color: #e74c3c; /* Rojo */
+  --danger-contrast: #fff;
+  /** medium **/
+  --medium-color: #bdc3c7; /* Plata */
+  --medium--contrast: #000;
 
-  --danger-color: #b31313;
+  --disabled-color: #7f7f7f;
 }

package/PROJECT_TEMPLATES/Basic/Slice/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "slice",
+  "version": "1.0.0",
+  "description": "Framework with frontend and backend components",
+  "main": "Slice.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/PROJECT_TEMPLATES/Basic/Slice/sliceConfig.json

@@ -4,7 +4,7 @@
         "click": "right"
     },
     "stylesManager": {
-        "defaultTheme": "Slice"
+        "defaultTheme": "Light"
     },
     "logger": {
         "enabled": true,
@@ -20,5 +20,13 @@
                 "info": true
             }
         }
+    },
+    "translator": {
+        "enabled": true
+    },
+    "paths": {
+        "components": "./Components",
+        "themes": "./Themes",
+        "styles": "./Styles"
     }
 }

package/PROJECT_TEMPLATES/Basic/src/Views/LandingPage/index.html

@@ -1,18 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <link rel="stylesheet" href="style.css">
-</head>
+  </head>
 
-<body>
-    <div>Slice web Framework</div>
-    <button id="boton"></button>
-    <script src="../../../Slice/Slice.js" type="module"></script>
+  <body>
+    <script src="/Slice/Slice.js" type="module"></script>
     <script src="index.js" type="module"></script>
-</body>
-
-</html>
+    <div style="width: 300px" id="form"></div>
+  </body>
+</html>