@dropi/ui-components 1.0.0

package/src/components-source/storybook-doc-components/icons-storybook/icons-storybook.component.html

@@ -0,0 +1,111 @@
+<div class="container">
+  <h1>Documentación: Uso del Componente app-icon</h1>
+  <br />
+  <p style="margin-bottom: 3rem">
+    El componente &lt;app-icon&gt; permite insertar un ícono personalizado en la aplicación con
+    distintos estilos configurables mediante atributos.
+  </p>
+  <br />
+
+  <h2>Uso del Componente</h2>
+  <br />
+  <p>Para invocar el componente en tu aplicación, utiliza la siguiente sintaxis:</p>
+
+  <pre>
+    <code appPrismHighlight class="language-html">
+      &lt;app-icon name="Apps" width="32px" height="32px" color="Neutral-Black"&gt;&lt;/app-icon&gt;
+    </code>
+  </pre>
+
+  <h2>Propiedades Disponibles</h2>
+  <hr />
+  <br />
+  <p>El componente acepta los siguientes atributos para personalizar su apariencia:</p>
+  <table class="icon-table">
+    <thead>
+      <tr>
+        <th>Propiedad</th>
+        <th>Descripción</th>
+        <th>Ejemplo</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>name</td>
+        <td>Nombre del ícono a mostrar</td>
+        <td>"Apps"</td>
+      </tr>
+      <tr>
+        <td>width</td>
+        <td>Ancho del ícono en cualquier unidad válida</td>
+        <td>"32px"</td>
+      </tr>
+      <tr>
+        <td>height</td>
+        <td>Alto del ícono en cualquier unidad válida</td>
+        <td>"32px"</td>
+      </tr>
+      <tr>
+        <td>color</td>
+        <td>Color del ícono (según la paleta definida)</td>
+        <td>"Neutral-Black"</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2 style="margin-top: 3rem">Importación del Componente</h2>
+  <h3 style="margin-top: 2rem">Si el componente es <strong>Standalone</strong></h3>
+  <p style="margin-top: 1rem">
+    Si el componente es independiente (standalone), es necesario importarlo directamente en el
+    archivo donde se usará:
+  </p>
+
+  <pre style="margin-top: 2rem">
+    <code appPrismHighlight class="language-ts">
+      {{"import { IconComponent } from '@app/ui/icon/icon.component';"}}
+    </code>
+  </pre>
+
+  <h3 style="margin-top: 3rem">Si el componente proviene de un Módulo</h3>
+  <p style="margin-top: 1rem">
+    Si el componente está incluido dentro de un módulo, entonces se debe importar en el módulo
+    correspondiente:
+  </p>
+
+  <pre style="margin-top: 2rem">
+    <code appPrismHighlight class="language-ts">
+      {{"import { UiDropiModule } from '@app/ui/ui-dropi.module';
+
+      @NgModule({
+        imports: [UiDropiModule],
+      })
+      export class SomeModule {}"}}
+    </code>
+  </pre>
+
+  <h2 style="margin-top: 3rem">Consideraciones</h2>
+  <ul style="margin-top: 1rem">
+    <li>Asegúrate de utilizar nombres de íconos válidos según la biblioteca definida.</li>
+    <li>La paleta de colores debe seguir la convención establecida en el proyecto.</li>
+    <li>
+      Verifica que el módulo o componente esté correctamente importado para evitar errores en la
+      compilación.
+    </li>
+  </ul>
+
+  <h2 class="tittleIcon" style="margin-top: 5rem">Iconos</h2>
+
+  <div class="container-icons" style="margin-top: 4rem">
+    <div
+      *ngFor="let icon of iconsList"
+      class="content-icon-list"
+      style="margin-top: 1rem"
+      (click)="copyIconName(icon)"
+    >
+      <img [src]="'assets/icons/optimized_svgs/' + icon + '.svg'" alt="" />
+      <p>{{ icon }}</p>
+    </div>
+  </div>
+
+  <p-toast></p-toast>
+</div>

package/src/components-source/storybook-doc-components/icons-storybook/icons-storybook.component.ts

@@ -0,0 +1,196 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule, NgFor } from '@angular/common';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+import { ToastModule } from 'primeng/toast';
+import { MessageService } from 'primeng/api';
+
+@Component({
+  selector: 'app-icons-storybook',
+  templateUrl: './icons-storybook.component.html',
+  styleUrls: ['./icons-storybook.component.css'],
+  standalone: true,
+  imports: [CommonModule, PrismHighlightDirective, ToastModule],
+  providers: [MessageService],
+})
+export class IconsStorybookComponent implements OnInit {
+  constructor(private messageService: MessageService) {}
+
+  iconsList = [
+    'Add-circle',
+    'Alarm-clock',
+    'Apps-add',
+    'Apps',
+    'Arrow-alt',
+    'Arrow-diagonal-down',
+    'Arrow-diagonal-up',
+    'Arrow-double-small-left',
+    'Arrow-double-small-right',
+    'Arrow-down',
+    'Arrow-left',
+    'Arrow-next',
+    'Arrow-right',
+    'Arrow-undo',
+    'Arrow-up',
+    'Ban',
+    'Bank',
+    'Bell-ring',
+    'Bell',
+    'Bold',
+    'Bolt',
+    'Book',
+    'Bookmark',
+    'Box-back',
+    'Box-close',
+    'Box',
+    'Boxes',
+    'Calculator',
+    'Calendar',
+    'Call-history',
+    'Call-incoming',
+    'Call-missed',
+    'Call-outgoing',
+    'Callcenter-alt',
+    'Canvan',
+    'Card',
+    'Caret-down-up',
+    'Caret-down',
+    'Caret-left',
+    'Caret-right',
+    'Caret-up',
+    'Certificated',
+    'Chat-arrow-down',
+    'Chat-arrow-grow',
+    'Chat-bars-grow',
+    'Check-circle',
+    'Checkbox',
+    'City',
+    'Clip',
+    'Clock',
+    'Close-large',
+    'Close-small',
+    'Comment-round-info',
+    'Comment-round-check',
+    'Comment-round-heart',
+    'Comment-round',
+    'Comment-square-user',
+    'Comment-square',
+    'Comments-round',
+    'Comments-square-dots',
+    'Comments-square',
+    'Computer',
+    'Cross-circle',
+    'Disk',
+    'Download',
+    'Dropdown-down',
+    'Dropdown-left',
+    'Dropdown-Right',
+    'Dropdown-up',
+    'Duplicate',
+    'Envelope-ban',
+    'Envelope-download',
+    'Envelope-marker',
+    'Envelope-open',
+    'Envelope-plus',
+    'Envelope',
+    'Expand',
+    'External-link',
+    'Eye-crossed',
+    'Eye',
+    'Face-smile',
+    'Facebook',
+    'File-add',
+    'File-delete',
+    'File-download',
+    'File-jpg',
+    'File-music',
+    'File-pdf',
+    'File-text',
+    'File-upload',
+    'File-video',
+    'File',
+    'Filter-alt',
+    'Filter-settings',
+    'Filter',
+    'Globe',
+    'Graduation-cap',
+    'Grid-alt',
+    'Headset',
+    'Heart-solid',
+    'Heart',
+    'Hexagon',
+    'Home',
+    'House-building',
+    'Id-badge',
+    'Image-add',
+    'Image-uploading',
+    'Inbox-in',
+    'Inbox-out',
+    'Inbox',
+    'Info',
+    'Instagram',
+    'Light-alarm',
+    'Light-bulb',
+    'Link',
+    'List-alt',
+    'List-check',
+    'List',
+    'Location-market',
+    'Lock',
+    'Map-marker-check',
+    'Map-marker-cross',
+    'Map-marker-edit',
+    'Map-marker-exclamation',
+    'Map-marker-home',
+    'Map-marker-minus',
+    'Map-marker-plus',
+    'Map-marker',
+    'Megaphone',
+    'Menu-burger',
+    'Menu-dots-vertical',
+    'Menu-dots',
+    'Minus-small',
+    'Money-1',
+    'Money-arrow-up-alt',
+    'Money-arrow-up',
+    'Money-bag',
+    'Money-coin',
+    'Money-Fee',
+    'Money-hand',
+    'Money-sending',
+    'Money-transfer',
+    'Money',
+    'Notification',
+    'Page-check',
+    'Page-edit',
+    'Page',
+    'Palette',
+    'Paper-plane',
+    'Pencil',
+    'Phone-call',
+    'Phone-cross',
+    'Play',
+  ];
+
+  ngOnInit() {}
+
+  copyIconName(icon) {
+    navigator.clipboard
+      .writeText(icon)
+      .then(() => {
+        console.log('lkhfskdfhjsdfjkhjk');
+
+        this.messageService.add({
+          severity: 'success',
+          summary: 'Copiado',
+          detail: `El nombre "${icon}" ha sido copiado!`,
+        });
+      })
+      .catch((error) => {
+        this.messageService.add({
+          severity: 'error',
+          summary: 'Error',
+          detail: 'No se pudo copiar el nombre.',
+        });
+      });
+  }
+}

package/src/components-source/storybook-doc-components/logo-storybook/logo-foundations.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+
+@Component({
+  selector: 'app-logo-storybook',
+  templateUrl: './logo-storybook.component.html',
+  styleUrls: ['./logo-storybook.component.css'],
+  imports:[CommonModule,PrismHighlightDirective],
+  standalone:true
+})
+export class LogoStorybookComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/components-source/storybook-doc-components/logo-storybook/logo-storybook.component.html

@@ -0,0 +1,104 @@
+<div class="container">
+  <h1>Documentación: Uso del Componente app-icon</h1>
+  <br>
+  <p style="margin-bottom: 3rem;">
+    El componente &lt;app-icon&gt; permite insertar un ícono personalizado en la aplicación con distintos estilos
+    configurables mediante atributos.
+  </p>
+  <br>
+
+  <h2>Uso del Componente</h2>
+  <br>
+  <p>
+    Para invocar el componente en tu aplicación, utiliza la siguiente sintaxis:
+  </p>
+
+  <pre>
+    <code appPrismHighlight class="language-html">
+      &lt;app-icon name="Apps" width="32px" height="32px" color="Neutral-Black"&gt;&lt;/app-icon&gt;
+    </code>
+  </pre>
+
+
+  <h2>Propiedades Disponibles</h2>
+  <hr>
+  <br>
+  <p>El componente acepta los siguientes atributos para personalizar su apariencia:</p>
+  <table class="icon-table">
+    <thead>
+      <tr>
+        <th>Propiedad</th>
+        <th>Descripción</th>
+        <th>Ejemplo</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>name</td>
+        <td>Nombre del ícono a mostrar</td>
+        <td>"Apps"</td>
+      </tr>
+      <tr>
+        <td>width</td>
+        <td>Ancho del ícono en cualquier unidad válida</td>
+        <td>"32px"</td>
+      </tr>
+      <tr>
+        <td>height</td>
+        <td>Alto del ícono en cualquier unidad válida</td>
+        <td>"32px"</td>
+      </tr>
+      <tr>
+        <td>color</td>
+        <td>Color del ícono (según la paleta definida)</td>
+        <td>"Neutral-Black"</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2 style="margin-top: 3rem;">Importación del Componente</h2>
+  <h3 style="margin-top: 2rem;">Si el componente es <strong>Standalone</strong></h3>
+  <p style="margin-top: 1rem;">
+    Si el componente es independiente (standalone), es necesario importarlo directamente en el archivo donde se usará:
+  </p>
+
+  <pre style="margin-top: 2rem;">
+    <code appPrismHighlight class="language-ts">
+      {{"import { AppIcon } from 'ruta/del/componente/app-icon';"}}
+    </code>
+  </pre>
+
+  <h3 style="margin-top: 3rem;">Si el componente proviene de un Módulo</h3>
+  <p style="margin-top: 1rem;">Si el componente está incluido dentro de un módulo, entonces se debe importar en el
+    módulo correspondiente:</p>
+
+
+  <pre style="margin-top: 2rem;">
+    <code appPrismHighlight class="language-ts">
+      {{"import { AppIconModule } from 'ruta/del/modulo/app-icon.module';
+
+      @NgModule({
+        imports: [AppIconModule],
+      })
+      export class SomeModule {}"}}
+    </code>
+  </pre>
+
+  <h2 style="margin-top: 3rem;">Consideraciones</h2>
+  <ul style="margin-top: 1rem;">
+    <li>Asegúrate de utilizar nombres de íconos válidos según la biblioteca definida.</li>
+    <li>La paleta de colores debe seguir la convención establecida en el proyecto.</li>
+    <li>Verifica que el módulo o componente esté correctamente importado para evitar errores en la compilación.</li>
+  </ul>
+
+  <h2 class="tittleIcon" style="margin-top: 5rem;">Iconos</h2>
+
+  <div class="container-icons"   style="margin-top: 4rem;">
+    <div *ngFor="let icon of iconsList" class="content-icon-list" style="margin-top: 1rem;" (click)="copyIconName(icon)">
+      <img [src]="'assets/icons/optimized_svgs/' + icon + '.svg'" alt="">
+      <p>{{ icon }}</p>
+    </div>
+  </div>
+
+  <p-toast></p-toast>
+</div>

package/src/components-source/storybook-doc-components/lustration-storybook/lustration-storybook.component.html

@@ -0,0 +1,218 @@
+<div class="container">
+  <h1><code appPrismHighlight>&lt;dropi-ilustration-icon&gt;</code></h1>
+
+  <h2>Descripción</h2>
+  <p>
+    El componente <code appPrismHighlight>&lt;dropi-ilustration-icon&gt;</code> permite representar
+    ilustraciones gráficas para diferentes estados:
+    <strong>éxito, error, advertencia, carga, información</strong> o <strong>insignias</strong>.
+  </p>
+
+  <h2>Uso Básico</h2>
+  <div style="display: flex; align-items: center; gap: 2rem">
+    <div style="flex: 0">
+      <dropi-ilustration-icon [type]="'dropi'" [state]="'success'"></dropi-ilustration-icon>
+    </div>
+    <div style="flex: 1">
+      <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'dropi'"
+  [state]="'success'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+    </div>
+  </div>
+
+  <p>o para insignias:</p>
+
+  <div style="display: flex; align-items: center; gap: 2rem">
+    <div style="flex: 0">
+      <dropi-ilustration-icon
+        [type]="'insignia'"
+        [stateInsignia]="'verified'"
+      ></dropi-ilustration-icon>
+    </div>
+    <div style="flex: 1">
+      <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'insignia'"
+  [stateInsignia]="'verified'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+    </div>
+  </div>
+
+  <h2>Propiedades</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Propiedad</th>
+        <th>Tipo</th>
+        <th>Descripción</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code appPrismHighlight>type</code></td>
+        <td>string</td>
+        <td>
+          Tipo de ilustración: <code appPrismHighlight>'dropi'</code>,
+          <code appPrismHighlight>'mb'</code>, <code appPrismHighlight>'insignia'</code>.
+        </td>
+      </tr>
+      <tr>
+        <td><code appPrismHighlight>state</code></td>
+        <td>string</td>
+        <td>
+          Estado para ilustraciones comunes: <code appPrismHighlight>'success'</code>,
+          <code appPrismHighlight>'warning'</code>, <code appPrismHighlight>'error'</code>,
+          <code appPrismHighlight>'info'</code>, <code appPrismHighlight>'loading'</code>.
+        </td>
+      </tr>
+      <tr>
+        <td><code appPrismHighlight>stateInsignia</code></td>
+        <td>string</td>
+        <td>
+          Estado especial para insignias: <code appPrismHighlight>'verified'</code>,
+          <code appPrismHighlight>'premium'</code>.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Tipos y Ejemplos</h2>
+
+  <h3>1. Ilustraciones tipo <code appPrismHighlight>'dropi'</code></h3>
+
+  <div style="display: flex; flex-direction: column; gap: 2rem">
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'dropi'" [state]="'warning'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'dropi'"
+  [state]="'warning'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'dropi'" [state]="'success'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'dropi'"
+  [state]="'success'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'dropi'" [state]="'loading'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'dropi'"
+  [state]="'loading'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'dropi'" [state]="'error'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'dropi'"
+  [state]="'error'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <h3>2. Ilustraciones tipo <code appPrismHighlight>'marca blanca'</code></h3>
+
+  <div style="display: flex; flex-direction: column; gap: 2rem">
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'mb'" [state]="'success'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'mb'"
+  [state]="'success'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'mb'" [state]="'error'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'mb'"
+  [state]="'error'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'mb'" [state]="'info'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'mb'"
+  [state]="'info'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon [type]="'mb'" [state]="'warning'"></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'mb'"
+  [state]="'warning'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <h3>3. Ilustraciones tipo <code appPrismHighlight>'insignia'</code></h3>
+
+  <div style="display: flex; flex-direction: column; gap: 2rem">
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon
+          [type]="'insignia'"
+          [stateInsignia]="'verified'"
+        ></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'insignia'"
+  [stateInsignia]="'verified'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+
+    <div style="display: flex; align-items: center; gap: 2rem">
+      <div style="flex: 0">
+        <dropi-ilustration-icon
+          [type]="'insignia'"
+          [stateInsignia]="'premium'"
+        ></dropi-ilustration-icon>
+      </div>
+      <div style="flex: 1">
+        <pre><code appPrismHighlight>&lt;dropi-ilustration-icon
+  [type]="'insignia'"
+  [stateInsignia]="'premium'"
+&gt;&lt;/dropi-ilustration-icon&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components-source/storybook-doc-components/lustration-storybook/lustration-storybook.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+import { DropiIlustrationIconComponent } from '@app/ui/dropi-ilustration-icon/dropi-ilustration-icon.component';
+
+@Component({
+  selector: 'app-lustration-storybook',
+  templateUrl: './lustration-storybook.component.html',
+  styleUrls: ['./lustration-storybook.component.css'],
+  imports:[CommonModule,PrismHighlightDirective, DropiIlustrationIconComponent],
+  standalone:true
+})
+export class LustrationStorybookComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}