slicejs-cli 1.0.54 → 1.0.56

package/PROJECT_TEMPLATES/Basic/Slice/Slice.js

@@ -1,194 +0,0 @@
-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 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;
-    }
-
-    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 (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();
-
-  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
-  );
-}
-
-await init();

package/PROJECT_TEMPLATES/Basic/Slice/Styles/Custom/custom.css

@@ -1,23 +0,0 @@
-
-
-
-slice-tester {
-
-   
-        &.red{
-            background-color: red;
-        }
-    
-        &.blue{
-            background-color: blue;
-        }
-    
-        &.green{
-            background-color: green;
-            }
-        
-    
-            
-    
-
-}

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

@@ -1,10 +0,0 @@
-@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,38 +0,0 @@
-:root {
-  --font-primary-color: #fff;
-
-  /** primary **/
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  --primary-background-color: #000;
-  --primary-color-contrast: #000;
-  --primary-color-shade: #222;
-
-  /** 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,31 +0,0 @@
-:root {
-  --font-primary-color: #000;
-  --font-secondary-color: #474747;
-  /** primary **/
-  --primary-color: #0066ff;
-  --primary-color-rgb: rgb(0, 102, 255);
-  --primary-background-color: #fff;
-  --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,30 +0,0 @@
-:root {
-  --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;
-
-  --disabled-color: #7f7f7f;
-}

package/PROJECT_TEMPLATES/Basic/Slice/package.json

@@ -1,12 +0,0 @@
-{
-  "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

@@ -1,32 +0,0 @@
-{
-    "debugger": {
-        "enabled": true,
-        "click": "right"
-    },
-    "stylesManager": {
-        "defaultTheme": "Light"
-    },
-    "logger": {
-        "enabled": true,
-        "showLogs": {
-            "console": {
-                "error": true,
-                "warning": true,
-                "info": true
-            },
-            "toast": {
-                "error": true,
-                "warning": true,
-                "info": true
-            }
-        }
-    },
-    "translator": {
-        "enabled": true
-    },
-    "paths": {
-        "components": "./Components",
-        "themes": "./Themes",
-        "styles": "./Styles"
-    }
-}

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

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