slicejs-cli 2.0.6 → 2.0.8

package/client.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import { program } from "commander";
 import inquirer from "inquirer";
 import initializeProject from "./commands/init/init.js";
@@ -70,6 +70,10 @@ componentCommand
         choices: categories,
       }])
 
+      validations.categories = validations.loadConfig().paths.components; // Cargamos las categorías al instanciar
+
+
+
       if(validations.getCategoryType(answers.category)==='Visual'){
         const properties = await inquirer.prompt([
           {

package/commands/Validations.js

@@ -6,8 +6,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 class Validations {
     constructor() {
-        this.config = this.loadConfig(); // Cargamos la configuración solo una vez al instanciar
-        this.categories = this.config?.paths?.components;
+        
 
     }
 

package/commands/init/init.js

@@ -7,26 +7,27 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export default async function initializeProject(projectType) {
     try {
         // Directorio de origen en el paquete
-        let sliceDir;
-        let basicPosibilities = ["basic", "Basic", "-b", "-B", "b", "B"];
-        if (basicPosibilities.includes(projectType)) {
-            sliceDir = path.join(__dirname, '../../PROJECT_TEMPLATES/Basic/Slice');
-        }
+        let sliceBaseDir = path.join(__dirname, '../','../','../','node_modules','slicejs-web-framework')
+        let apiDir = `${sliceBaseDir}/api`
+        let srcDir = `${sliceBaseDir}/src`
+
+        let destinationApi = path.join(__dirname, '../../../../api')
+        let destinationSrc = path.join(__dirname, '../../../../src')
 
-        // Directorio de destino en la raíz del proyecto
-        const destinationDir = path.join(__dirname, '../../../../Slice');
-        const destinationSrc = path.join(__dirname, '../../../../src')
-        const srcDir = path.join(__dirname, '../../PROJECT_TEMPLATES/Basic/src')
 
         // Verificar si el directorio de destino ya existe
-        if (fs.existsSync(destinationDir)) {
-            Print.error('El proyecto ya cuenta con un directorio "Slice". No es posible inicializar el proyecto nuevamente');
+        if (fs.existsSync(destinationApi)) {
+            Print.error('El proyecto ya cuenta con un directorio "api". No es posible inicializar el proyecto nuevamente');
+            return;
+        }
+
+        if (fs.existsSync(destinationSrc)) {
+            Print.error('El proyecto ya cuenta con un directorio "src". No es posible inicializar el proyecto nuevamente');
             return;
         }
 
-        // Copiar el contenido del directorio de origen al directorio de destino 
-        await fs.copy(sliceDir, destinationDir, { recursive: true });
-        await fs.copy(srcDir, destinationSrc, { recursive: true });
+        await fs.copy(apiDir, destinationApi , { recursive: true });
+        await fs.copy(srcDir, destinationSrc , { recursive: true });
 
         Print.success('Proyecto inicializado correctamente.');
     } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-cli",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Command client for developing web applications with Slice.js framework",
   "main": "client.js",
   "scripts": {

package/ProjectTemplate/api/index.js

@@ -1,97 +0,0 @@
-import express from 'express';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import inquirer from 'inquirer';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-import sliceConfig from '../src/sliceConfig.json' assert { type: 'json' };
-
-let server;
-
-const app = express();
-const PORT = 3001;
-
-const isProduction = sliceConfig.production === true;
-const folderDeployed = isProduction ? 'dist' : 'src';
-
-// Servir archivos estáticos desde la carpeta 'Slice'
-app.use('/Slice/', express.static(path.join(__dirname,'..','Slice')));
-// Servir archivos estáticos desde la carpeta 'App'
-
-
-
-app.get('/testing1', (req, res) => {
-   res.send(` Actual route in server: __dirname: ${__dirname} __filename: ${__filename} - checking if file exists: ${path.join(__dirname, '..', 'src','App', 'index.html')}`);
-});
-
-
-app.use(express.static(path.join(__dirname,'..', folderDeployed)));
-
-
-app.get('/testing2', (req, res) => {
-   res.send(` Actual route in server: __dirname: ${__dirname} __filename: ${__filename} - checking if file exists: ${path.join(__dirname, '..', 'src','App', 'index.html')}`);
-});
-
-if(isProduction){
-   
-}
-
-
-// Ruta para servir el index.html desde la carpeta 'App'
-app.get('*', (req, res) => {
-   const filePath = path.join(__dirname, '..', 'src','App', 'index.html');
-   res.sendFile(filePath);
-});
-
-function startServer() {
-   server = app.listen(PORT, () => {    
-      showMenu();
-   });
-}
-
-async function showMenu() {
-
-   console.clear();
-   console.log("\n=================================");
-   console.log("       SLICE SERVER MENU       ");
-   console.log("=================================\n");
-
-   const url = `http://localhost:${PORT}`;
-      console.log(`Server is running on port ${PORT}, ${url}\n`);
-
-   while (true) {
-      const { action } = await inquirer.prompt([
-         {
-            type: 'list',
-            name: 'action',
-            message: 'Select an option:',
-            choices: ['Restart Server', 'Stop Server (Exit)']
-         }
-      ]);
-      
-      if (action === 'Stop Server (Exit)') {
-         console.log('\nShutting down server...');
-         server.close(() => {
-            console.log('Server stopped.');
-            process.exit(0);
-         });
-         break;
-      } else if (action === 'Restart Server') {
-         console.log('\nRestarting server...');
-         server.close(() => {
-            console.log('Server stopped. Restarting...');
-            startServer();
-         });
-         break;
-      }
-   }
-}
-
-startServer();
-
-
-export default app;
-
-

package/ProjectTemplate/src/App/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slice - Documentation</title>
-    <link rel="icon" type="image/x-icon" href="/../../images/favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="/App/style.css" />
-
-    <!-- Prism -->
-
-   
-
-    <!-- Eliminar Prism despues-->
-  </head>
-
-  <body>
-    <div id="app">
-      <script src="/App/index.js" type="module"></script>
-    </div>
-  </body>
-</html>

package/ProjectTemplate/src/App/index.js

@@ -1,63 +0,0 @@
-import Slice from '../../Slice/Slice.js';
-
-const CACHE_NAME = 'slice-cache-v1';
-const urlsToCache = [
-   // Añade aquí las rutas de los archivos que deseas almacenar
-   './Slice/Slice.js',
-   './Slice/Components/Structural/Logger/Logger.js',
-   './Slice/Components/Structural/Debugger/Debugger.js',
-   './Slice/Components/Structural/Router/Router.js',
-   './Slice/Components/Structural/Router/routes.js',
-   './Slice/Components/Structural/Controller/Controller.js',
-   './Slice/Components/Structural/StylesManager/StylesManager.js',
-   './Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js',
-];
-
-self.addEventListener('install', (event) => {
-   event.waitUntil(
-      caches.open(CACHE_NAME).then((cache) => {
-         console.log('Opened cache');
-         return cache.addAll(urlsToCache);
-      })
-   );
-});
-
-self.addEventListener('fetch', (event) => {
-   event.respondWith(
-      caches.match(event.request).then((response) => {
-         if (response) {
-            return response;
-         }
-         return fetch(event.request);
-      })
-   );
-});
-
-self.addEventListener('activate', (event) => {
-   const cacheWhitelist = [CACHE_NAME];
-
-   event.waitUntil(
-      caches.keys().then((cacheNames) => {
-         return Promise.all(
-            cacheNames.map((cacheName) => {
-               if (cacheWhitelist.indexOf(cacheName) === -1) {
-                  return caches.delete(cacheName);
-               }
-            })
-         );
-      })
-   );
-});
-
-if ('serviceWorker' in navigator) {
-   window.addEventListener('load', () => {
-      navigator.serviceWorker
-         .register('/service-worker.js')
-         .then((registration) => {
-            console.log('Service Worker registrado con éxito:', registration);
-         })
-         .catch((error) => {
-            console.log('Error al registrar el Service Worker:', error);
-         });
-   });
-}

package/ProjectTemplate/src/App/style.css

@@ -1,40 +0,0 @@
-/* :root {
-  --docs-width: 64%;
-}
-slice-layout {
-  display: flex;
-  justify-content: center;
-}
-
-p {
-  text-align: justify;
-}
-h1 {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--secondary-background-color);
-}
-h2 {
-  padding-top: 10px;
-}
-.grid-container {
-  overflow-x: auto;
-}
-@media only screen and (max-width: 770px) {
-  :root {
-    --docs-width: 100%;
-  }
-}
-* {
-  font-family: var(--font-family);
-}
-.docs_container {
-  color: var(--font-primary-color);
-  margin-top: 100px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: var(--docs-width);
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-bottom: 25px;
-} */

package/ProjectTemplate/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.css

@@ -1,16 +0,0 @@
-.buttonsGrid {
-  width: 100%;
-}
-.buttons {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.buttonsContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  /* width: 100%; */
-}

package/ProjectTemplate/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.html

@@ -1,22 +0,0 @@
-<h1 id="sliceButton">Slice Button</h1>
-<div class="myButton">
-  <p>
-    To build a simple Slice Button you only need to use the "slice.build"
-    method, just like that you have a Slice Button that you can customize with a
-    value prop.
-  </p>
-</div>
-<div class="colorButton">
-  <h2 id="customization">Customization</h2>
-  <p>
-    You can also cutomize your Slice Button specifying it's background color
-    with "customColor.button" and it's font color with "customColor.label".
-  </p>
-</div>
-<div class="onClick">
-  <h2 id="onClickCallback">onClickCallback</h2>
-  <p>
-    At last but not least you can add a function to your button with the prop
-    "onClickCallback".
-  </p>
-</div>

package/ProjectTemplate/src/Components/AppComponents/ButtonDocumentation/ButtonDocumentation.js

@@ -1,102 +0,0 @@
-export default class ButtonDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      const grid = await slice.build('Grid', { columns: 2, rows: 1 });
-      grid.classList.add('buttonsGrid');
-
-      const simpleButton = await this.createButton(null, {});
-      const myButton = await this.createButton(
-         null,
-         {
-            value: 'Slice Button',
-         },
-         `{
-        value: "Slice Button",
-      }`
-      );
-
-      if (window.screen.width <= 770) {
-         grid.columns = 1;
-      }
-
-      await grid.setItem(simpleButton);
-      await grid.setItem(myButton);
-
-      this.querySelector('.myButton').appendChild(grid);
-
-      await this.createButton(
-         this.querySelector('.colorButton'),
-         {
-            value: 'Color Button',
-            customColor: { label: 'black', button: 'red' },
-         },
-         `{
-        value: "Color Button",
-        customColor: { label: "black", button: "red" },
-      }`
-      );
-      const clickButton = await this.createButton(
-         this.querySelector('.onClick'),
-         {
-            value: 'Click',
-            onClickCallback: () => {
-               if (clickButton.value === 'Click') {
-                  clickButton.value = 'Clicked';
-               } else {
-                  clickButton.value = 'Click';
-               }
-            },
-         },
-         `{
-        value: "Click",
-        onClickCallback: () => {
-          if (myButton.value === "Click") {
-            myButton.value = "Clicked";
-          } else {
-            myButton.value = "Click";
-          }
-        },
-      }`
-      );
-   }
-
-   async createButton(appendTo, buttonProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myButton = await slice.build('Button', buttonProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myButton = await slice.build("Button", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const buttonDiv = document.createElement('div');
-      buttonDiv.classList.add('buttons');
-      buttonDiv.appendChild(myButton);
-      div.classList.add('buttonsContainer');
-      div.appendChild(buttonDiv);
-      div.appendChild(componentCode);
-
-      if (appendTo) {
-         appendTo.appendChild(div);
-      }
-      if (buttonProps.onClickCallback) {
-         return myButton;
-      }
-
-      return div;
-   }
-}
-
-customElements.define('slice-buttondocumentation', ButtonDocumentation);

package/ProjectTemplate/src/Components/AppComponents/CardDocumentation/CardDocumentation.css

@@ -1,15 +0,0 @@
-:root {
-  --cards-padding: 30%;
-}
-.cards {
-  padding-left: var(--cards-padding);
-  padding-right: var(--cards-padding);
-  margin-top: 50px;
-  margin-bottom: 50px;
-}
-
-@media only screen and (max-width: 770px) {
-  :root {
-    --cards-padding: 20px;
-  }
-}

package/ProjectTemplate/src/Components/AppComponents/CardDocumentation/CardDocumentation.html

@@ -1,38 +0,0 @@
-<h1 id="sliceCard">Slice Card</h1>
-<div class="sliceCard">
-  <p>
-    When building a "Card" component, by default it's created with the Slice
-    logo, and with a default title and text.
-  </p>
-</div>
-<div class="myCard">
-  <h2 id="myCard">Title and Text</h2>
-  <p>
-    To build your own Slice Card with your information it's as simple as just
-    adding "title" and "text" props to your component.
-  </p>
-</div>
-<div class="cardClick">
-  <h2 id="cardClick">Click Event | "isOpen" prop</h2>
-  <p>
-    The Slice Card component has an click eventListener. While the card is
-    uncovered and shows the information inside, it's cover can be clicked to
-    keep open. Changing it's "isOpen" prop to true. That same eventListener can
-    change it back to false, and cover up the card again.
-  </p>
-</div>
-<h1 id="customization">Customization</h1>
-<div class="cardIcon">
-  <h2 id="icon">Icon</h2>
-  <p>
-    You can start your Slice Card customization by assignin another icon to it.
-  </p>
-</div>
-<div class="cardColor">
-  <h2 id="customColor">Custom Color</h2>
-  <p>
-    You can also change card color by using "customColor" props, using
-    "customColor.card" to change it's background, and "customColor.icon" to
-    change the icon's color.
-  </p>
-</div>

package/ProjectTemplate/src/Components/AppComponents/CardDocumentation/CardDocumentation.js

@@ -1,113 +0,0 @@
-export default class CardDocumentation extends HTMLElement {
-   constructor(props) {
-      super();
-      slice.attachTemplate(this);
-
-      slice.controller.setComponentProps(this, props);
-      this.debuggerProps = [];
-   }
-
-   async init() {
-      await this.createCard(this.querySelector('.sliceCard'), {});
-      await this.createCard(
-         this.querySelector('.myCard'),
-         {
-            title: 'My Slice Card',
-            text: "My Slice Card's information.",
-         },
-         `{
-        title: "My Slice Card",
-        text: "My Slice Card's information.",
-      }`
-      );
-      await this.createCard(
-         this.querySelector('.cardClick'),
-         {
-            title: 'Uncover Slice Card',
-            text: 'isOpen is true.',
-            isOpen: true,
-         },
-         `{
-        title: "Uncover Slice Card",
-        text: "isOpen is true",
-        isOpen: true
-      }`
-      );
-      await this.createCard(
-         this.querySelector('.cardIcon'),
-         {
-            title: 'Discord',
-            text: 'This card has Discord Icon.',
-            icon: {
-               name: 'discord',
-               iconStyle: 'filled',
-            },
-         },
-         `{
-        title: "Discord",
-        text: "This card has Discord Icon.",
-        icon: {
-          name: "discord",
-          iconStyle: "filled",
-        }
-      }`
-      );
-      await this.createCard(
-         this.querySelector('.cardColor'),
-         {
-            title: 'Github',
-            text: 'This card has customized colors.',
-            icon: {
-               name: 'github',
-               iconStyle: 'filled',
-            },
-            customColor: {
-               card: 'darkblue',
-               icon: 'white',
-            },
-         },
-         `{
-        title: "Github",
-        text: "This card has customized colors.",
-        icon: {
-          name: "github",
-          iconStyle: "filled",
-        },
-        customColor: {
-          card: "darkblue",
-          icon: "white",
-        },
-      }`
-      );
-   }
-
-   async createCard(appendTo, cardProps, codeProps) {
-      if (!codeProps) {
-         codeProps = '{}';
-      }
-      const myCard = await slice.build('Card', cardProps);
-
-      const componentCode = await slice.build('CodeVisualizer', {
-         value: `const myCard = await slice.build("Card", ${codeProps});
-
-`,
-         language: 'javascript',
-      });
-
-      const div = document.createElement('div');
-      const cardDiv = document.createElement('div');
-      cardDiv.classList.add('cards');
-      cardDiv.appendChild(myCard);
-      div.classList.add('cards_container');
-      div.appendChild(cardDiv);
-      div.appendChild(componentCode);
-
-      if (appendTo) {
-         appendTo.appendChild(div);
-      }
-
-      return div;
-   }
-}
-
-customElements.define('slice-carddocumentation', CardDocumentation);

package/ProjectTemplate/src/Components/AppComponents/CheckboxDocumentation/CheckboxDocumentation.css

@@ -1,21 +0,0 @@
-.checkboxs {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.labelCheckbox {
-  display: grid;
-  align-items: end;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(1, 1fr);
-  gap: 10px;
-  margin: 0 auto;
-}
-
-@media only screen and (max-width: 770px) {
-  .labelCheckbox {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}

package/ProjectTemplate/src/Components/AppComponents/CheckboxDocumentation/CheckboxDocumentation.html

@@ -1,35 +0,0 @@
-<h1 id="sliceCheckbox">Slice CheckBox</h1>
-<div class="myCheckbox">
-  <p>This is a Slice Checkbox.</p>
-</div>
-<div class="colorCheckbox">
-  <h2 id="customColor">Custom color</h2>
-  <p>
-    You cand customize your Slice Checkbox by changing it's color with the color
-    prop
-  </p>
-</div>
-<h1 id="label">Label</h1>
-<div class="label">
-  <p>You can set a label to your checkbox.</p>
-</div>
-<h2 id="labelPlacement">Label Placement</h2>
-<p>You can also set in wich position to put the label to.</p>
-<div class="labelCheckbox">
-  <div class="labelLeft">
-    <h2>Left</h2>
-    <p>This label is positioned at left.</p>
-  </div>
-  <div class="labelTop">
-    <h2>Top</h2>
-    <p>This label is positioned at top.</p>
-  </div>
-  <div class="labelRight">
-    <h2>Right (default)</h2>
-    <p>This label is positioned at right.</p>
-  </div>
-  <div class="labelBottom">
-    <h2>Bottom</h2>
-    <p>This label is positioned at bottom.</p>
-  </div>
-</div>