ngx-carnival-tourbo-components v0.0.76

🚀 Ngx-carnival-tourbo-components

🛠 Instalación de la Librería de Componentes

1️⃣ Instalamos Angular Material

ng add @angular/material@17.2.0

📌 Configuración recomendada:

• Tema: Custom
• Typography styles: No
• Animations: Include and enable animations

2️⃣ Eliminamos las siguientes líneas de styles.css para evitar conflictos:

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

3️⃣ Instalamos la librería de componentes propia

npm i ngx-carnival-tourbo-components

4️⃣ Modificamos angular.json para incluir los estilos y assets propios

{
  "projects": {
    "tu-proyecto": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-carnival-tourbo-components/src/assets",
                "output": "/assets/"
              }
            ],
            "styles": ["src/styles.css", "node_modules/ngx-carnival-tourbo-components/src/assets/css/ngx-carnival-tourbo-components.css"]
          }
        }
      }
    }
  }
}

5️⃣ Agregamos el componente en app.component.html

<ngx-table [data]="dataList" routerLink="users/" [navItems]="navItems" />

6️⃣ Importamos los módulos necesarios en app.component.ts

import { ETableCellUser, EOrder, INavTable, List, TableComponent } from "ngx-carnival-tourbo-components";

📌 Nota: Si deseas testear desde la librería, importa de la siguiente manera:

import { ETableCellUser, EOrder, INavTable, List, TableComponent } from "../../projects/ngx-carnival-tourbo-components/src/table/table.component";

7️⃣ Agregamos TableComponent en los imports del módulo

imports: [TableComponent],

8️⃣ Configuramos las variables en AppComponent

export class AppComponent {
  dataList: List = {
    content: [
      {
        id: "1",
        delegatorId: "00001",
        agencyName: "Generic Agency 1",
        name: "Generic Name 1",
        status: "Active",
        agencyGroup: "A",
        address: "123 Generic St",
        phone: "0000000000",
        imageProfile: "https://img.test.com/1.jpg",
        email: "generic1@example.com",
      },
      {
        id: "2",
        delegatorId: "00002",
        agencyName: "Generic Agency 2",
        name: "Generic Name 2",
        status: "Blocked",
        agencyGroup: "B",
        address: "456 Generic Ave",
        phone: "1111111111",
        imageProfile: "https://img.test.com/2.jpg",
        email: "generic2@example.com",
      },
      {
        id: "3",
        delegatorId: "00003",
        agencyName: "Generic Agency 3",
        name: "Generic Name 3",
        status: "Deleted",
        agencyGroup: "C",
        address: "789 Generic Blvd",
        phone: "2222222222",
        imageProfile: "https://img.test.com/3.jpg",
        email: "generic3@example.com",
      },
    ],
    pageable: {
      pageNumber: 0,
      pageSize: 7,
      sort: {
        empty: false,
        sorted: true,
        unsorted: false,
      },
      offset: 0,
      paged: true,
      unpaged: false,
    },
    totalPages: 6,
    totalElements: 37,
    last: false,
    size: 7,
    number: 0,
    sort: {
      empty: false,
      sorted: true,
      unsorted: false,
    },
    numberOfElements: 7,
    first: true,
    empty: false,
  };

  navItems: INavTable[] = [
    {
      label: "Nombre de colaborador",
      action: true,
      type: ETableCellUser.BY_NAME,
      value: EOrder.ASC,
    },
    {
      label: "Email",
      action: true,
      type: ETableCellUser.BY_EMAIL,
      value: EOrder.ASC,
    },
    {
      label: "Telefono",
      action: false,
    },
    {
      label: "Estado",
      action: false,
    },
  ];
}

📂 Creación de un Nuevo Componente

1. 📁 Navega a la carpeta del proyecto:

   cd projects/ngx-carnival-tourbo-components/src

2. 🛠️ Crea un nuevo componente usando Angular CLI:

   ng generate component nombre-del-componente

3. 📌 Agrega el nuevo componente en public-api.ts:

   export * from "./lib/nombre-del-componente/nombre-del-componente.component";

📦 Publicación en npm

🔐 Autenticación en npm

Si no estás autenticado, ejecuta:

npm login

💡 Este comando puede pedir la verificación de dos pasos si está activada.

🚀 Construcción y Publicación

🔄 Actualización de la versión

Antes de publicar, asegúrate de actualizar la versión en package.json:

npm version [patch|minor|major]

💡 Ejemplo: npm version patch para una pequeña actualización. Ejecuta el siguiente comando para construir y publicar la librería:

npm run build:publish

📌 Este comando realiza las siguientes acciones:

1. 🗑️ Borra la carpeta dist si existe.
2. 🔨 Construye la librería.
3. 📂 Se mueve a la carpeta dist.
4. 📦 Empaqueta la librería.
5. 🚀 Ejecuta npm publish, lo que puede requerir la verificación en dos pasos.

✅ Verificación de la Publicación

Para asegurarte de que la librería está publicada correctamente, puedes ejecutar:

npm info ngx-carnival-tourbo-components

Si ves la versión publicada, la operación fue exitosa. 🎉

⚡ ¡Listo! Ahora tu componente está disponible en npm y listo para ser utilizado. 🚀