@dropi/ui-components 1.0.0

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

@@ -0,0 +1,21 @@
+<div class="container">
+  <app-tillte-table-documentation [dataTable]="shadowSizes" [tittle]="'Shadow'" [description]="description"
+    type="shadow"></app-tillte-table-documentation>
+
+
+  <h3 style="margin-top: 3rem;">
+    Uso de Tokens de Sombra en un Componente
+  </h3>
+
+  <p style="margin-top: 1rem;">
+    A continuación, se muestra cómo aplicar las sombras en un div de clase element utilizando los tokens de sombra.
+  </p>
+
+  <pre>
+  <code appPrismHighlight class="language-css">
+{{'.element {
+  box-shadow: var(--shadow-small);
+}'}}
+  </code>
+</pre>
+</div>

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

@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { TillteTableDocumentationComponent } from '@app/ui/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+
+@Component({
+  selector: 'app-shadow-storybook',
+  templateUrl: './shadow-storybook.component.html',
+  styleUrls: ['./shadow-storybook.component.scss'],
+  standalone:true,
+  imports:[TillteTableDocumentationComponent,PrismHighlightDirective]
+})
+export class ShadowStorybookComponent implements OnInit {
+  shadowSizes = [
+    {
+      preview: "0px 0px 12px rgba(0, 0, 0, 0.04)",
+      nombreToken: "Shadow-small",
+      x: "0px",
+      y: "0px",
+      blur: "12px",
+      opacity: "4%",
+      color: "#000000",
+      classname: ""
+    },
+    {
+      preview: "0px 0px 8px rgba(0, 0, 0, 0.08)",
+      nombreToken: "Shadow-medium",
+      x: "0.5px",
+      y: "4px",
+      blur: "8px",
+      opacity: "8%",
+      color: "#000000",
+      classname: ""
+    },
+    {
+      preview: "0px 0px 16px rgba(0, 0, 0, 0.16)",
+      nombreToken: "Shadow-large",
+      x: "0px",
+      y: "4px",
+      blur: "16px",
+      opacity: "16%",
+      color: "#000000",
+      classname: ""
+    },
+    {
+      preview: "0px 0px 4px rgba(0, 0, 0, 0.16)",
+      nombreToken: "Shadow-icon",
+      x: "0px",
+      y: "0px",
+      blur: "4px",
+      opacity: "16%",
+      color: "#000000",
+      classname: ""
+    }
+  ];
+  
+  
+
+  description ='Las sombras en nuestra interfaz están diseñadas para mejorar la jerarquía visual, proporcionar profundidad y resaltar elementos clave. Se utilizan de manera estratégica para asegurar una experiencia clara y coherente en toda la plataforma. El sistema de sombras está basado en tokens reutilizables que establecen propiedades específicas, incluyendo desplazamiento en los ejes X e Y, desenfoque, opacidad y color. Cada nivel de sombra tiene un propósito definido dentro de la interfaz. La sombra Shadow-small se aplica en elementos sutiles, como contornos ligeros en tarjetas o componentes flotantes pequeños. Shadow-medium se utiliza en botones, modales y elementos interactivos para aumentar su visibilidad y dar una sensación de elevación. Shadow-large está destinada a contenedores principales y secciones destacadas, aportando una mayor profundidad y separación visual. Shadow-icon es una sombra específica para iconos, diseñada para dar un realce sutil sin afectar la claridad del diseño. El uso consistente de estas sombras garantiza una interfaz equilibrada, en la que cada elemento mantiene su propósito visual sin generar distracciones innecesarias.'
+  
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,33 @@
+
+<div class="container">
+  <app-tillte-table-documentation
+  [dataTable]="sizeScale"
+  [tittle]="'Spacing'"
+  [description]="description"
+  [type]="'spacing'"
+></app-tillte-table-documentation>
+<div class="container">
+  <br>
+  <br>
+  <h1>Estructura de la Escala</h1>
+  <br>
+  <p class="description"><span class="highlight">- name:</span> Nombre del tamaño, siguiendo una numeración progresiva.</p>
+  <p class="description"><span class="highlight">- pixels:</span> Valor en píxeles que define la dimensión del tamaño.</p>
+  <p class="description"><span class="highlight">- rem:</span> Equivalente en unidades relativas para mejorar la accesibilidad y flexibilidad.</p>
+  <p class="description"><span class="highlight">- classname:</span> Nombre de la clase, útil para definir estilos en CSS o frameworks como Tailwind o Styled Components.</p>
+</div>
+<br>
+<h3>Ejemplo de Uso:</h3> 
+<p>Este sistema de tamaños puede aplicarse en distintos elementos de la interfaz, como márgenes, paddings, fuentes o separaciones:</p>
+<pre style="margin-top: 2rem;">
+  <code appPrismHighlight class="language-css" >
+ {{'   .element {
+      padding: var(--Size-Size-4); /* 16px o 1rem */
+      margin-bottom: var(--Size-Size-6); /* 32px o 2rem */
+    }'}}
+  </code>
+</pre>
+
+</div>
+
+

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { TillteTableDocumentationComponent } from '@app/ui/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+
+@Component({
+  selector: 'app-spacing-storybook',
+  templateUrl: './spacing-storybook.component.html',
+  styleUrls: ['./spacing-storybook.component.scss'],
+  standalone:true,
+  imports:[TillteTableDocumentationComponent,PrismHighlightDirective]
+})
+export class SpacingStorybookComponent implements OnInit {
+
+
+  sizeScale = [
+    { preview: "4px", name: "Size-1", pixels: "4px", rem: "0.25rem", classname: "size1" },
+    { preview: "8px", name: "Size-2", pixels: "8px", rem: "0.5rem", classname: "size2" },
+    { preview: "12px", name: "Size-3", pixels: "12px", rem: "0.7rem", classname: "size3" },
+    { preview: "16px", name: "Size-4", pixels: "16px", rem: "1rem", classname: "size4" },
+    { preview: "24px", name: "Size-5", pixels: "24px", rem: "1.5rem", classname: "size5" },
+    { preview: "32px", name: "Size-6", pixels: "32px", rem: "2rem", classname: "size6" },
+    { preview: "40px", name: "Size-7", pixels: "40px", rem: "2.5rem", classname: "size7" },
+    { preview: "48px", name: "Size-8", pixels: "48px", rem: "3rem", classname: "size8" },
+    { preview: "56px", name: "Size-9", pixels: "56px", rem: "3.5rem", classname: "size9" },
+    { preview: "64px", name: "Size-10", pixels: "64px", rem: "4rem", classname: "size10" }
+  ];
+
+  description='La escala de tamaños en Dropi define un conjunto de valores en píxeles y rem para garantizar consistencia en el diseño y escalabilidad en distintos dispositivos. Cada tamaño está representado por un identificador (name), su valor en píxeles (pixels), su equivalente en rem (rem) y una clase en camelCase (classname) que puede ser utilizada en estilos CSS o frameworks de diseño.'
+  
+  
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/components-source/storybook-doc-components/story-page/story-page.component.html

@@ -0,0 +1,74 @@
+<div class="container-doc">
+  <div class="max-margin">
+    <div class="background-tittle">
+      <h1>
+        {{ tittle }}
+      </h1>
+    </div>
+
+    <div class="container-Typography">
+      <h2>Descripción general</h2>
+      <hr />
+      <p>
+        Al igual que en otras interfaces de usuario de dropi, la tipografía funciona según el
+        principio de accesibilidad antes que el de estética. Por lo tanto, el texto debe ser legible
+        y ayudar al usuario a comprender lo que es importante mediante un tamaño y una jerarquía de
+        colores bien contrastados.
+      </p>
+
+      <br />
+      <h2>Estilos tipográficos</h2>
+      <hr />
+      <p>Utilizamos dos estilos de tipografía clave: encabezado y texto.</p>
+
+      <app-tillte-table-documentation
+        [dataTable]="heading"
+        [tittle]="'Heading'"
+        [description]="descriptionHeading"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="label"
+        [tittle]="'Label'"
+        [description]="descriptionLabel"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="body"
+        [tittle]="'Body'"
+        [description]="descriptionBody"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="caption"
+        [tittle]="'Caption'"
+        [description]="descriptionCaption"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="fontSize"
+        [tittle]="'Font size'"
+        [description]="descriptionFontSize"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="fontWeight"
+        [tittle]="'Font weight'"
+        [description]="descriptionFontWeight"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="fontLineheight"
+        [tittle]="'Font lineheight'"
+        [description]="descriptionFontLineHeight"
+
+      ></app-tillte-table-documentation>
+      <app-tillte-table-documentation
+        [dataTable]="fontFamily"
+        [tittle]="'Font family'"
+        [description]="descriptionFontFamily"
+
+      ></app-tillte-table-documentation>
+    </div>
+  </div>
+</div>

package/src/components-source/storybook-doc-components/story-page/story-page.component.scss

@@ -0,0 +1,103 @@
+@import "../../../../tokens.scss";
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  
+  .background-tittle {
+    position: relative;
+    display: inline-block;
+    padding: 30px;
+    color: black; /* Asegura que el texto sea visible sobre el fondo */
+    width: 100%;
+  }
+
+  .background-tittle::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('../../../../assets/images/8289982_25332.jpg'); /* Imagen de fondo */
+    background-size: cover;
+    background-position: center;
+    opacity: 0.1;
+    z-index: -1; 
+  }
+
+  .container-Typography{
+    padding: 30px;
+  }
+
+  .container-doc{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 30px;
+  }
+
+  .max-margin{
+    width: 85%;
+  }
+
+  .code-box{
+    background-color: black;
+    color: rgb(116, 198, 34);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  h2{
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  hr{
+    margin-bottom: 1rem;
+  }
+
+  table {
+    border-collapse: collapse; /* Combinamos los bordes de las celdas */
+    width: 100%; /* Tabla ocupa todo el ancho disponible */
+  }
+
+  th, td {
+    padding: 10px;
+    border: 1px solid #ddd; /* Opcional: para ver las líneas de la tabla */
+    text-align: center; /* Alinea horizontalmente */
+    vertical-align: middle; /* Centra verticalmente */
+  }
+
+  th {
+    background-color: #f2f2f2; /* Fondo gris para encabezados */
+  }
+
+
+  .cell-content {
+    display: flex;
+    align-items: center; /* Centra verticalmente dentro del div */
+    justify-content: center; /* Opcional: centra horizontalmente */
+    height: 100%; /* Asegura que tome el alto de la celda */
+  }
+
+  .cell-content > div {
+    padding: 5px 0;
+    border-bottom: 1px solid #ccc; /* Líneas horizontales de separación */
+  }
+
+  .cell-content > div:last-child {
+    border-bottom: none; /* Eliminamos la última línea para no tener borde extra */
+  }
+
+  
+  
+  .table-heading{
+    margin-top: 2rem;
+  }