@dropi/ui-components 1.0.0

package/src/components-source/alert/alert.component.stories.ts

@@ -0,0 +1,310 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { AlertComponent } from './alert.component';
+
+/**
+ * # Alert Component
+ *
+ * A notification component for displaying important messages to users.
+ * Alerts can convey success, error, warning, or informational messages.
+ *
+ * ## Features
+ * - **Multiple states**: success, error, warning, info
+ * - **Types**: default (inline) or flag (prominent)
+ * - **Dismissable**: Optional close button
+ * - **Action button**: Optional button for user actions
+ * - **HTML support**: Message can contain HTML for rich formatting
+ *
+ * ## Usage
+ * ```html
+ * <app-alert
+ *   message="Operation completed successfully"
+ *   state="success"
+ *   [dismissable]="true"
+ *   (onClose)="handleClose()">
+ * </app-alert>
+ * ```
+ */
+const meta: Meta<AlertComponent> = {
+  title: 'UI Dropi/Alert',
+  component: AlertComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A notification component for displaying important messages to users.
+Alerts can convey success, error, warning, or informational messages.
+
+### Key Features
+- **Multiple states**: success, error, warning, info
+- **Types**: default (inline) or flag (prominent)
+- **Dismissable**: Optional close button
+- **Action button**: Optional button for user actions
+- **HTML support**: Message can contain HTML for rich formatting
+        `,
+      },
+    },
+  },
+  argTypes: {
+    message: {
+      description: 'The alert message text. Supports HTML tags for formatting.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    type: {
+      description: 'Alert display type. "default" for inline, "flag" for prominent display.',
+      control: 'radio',
+      options: ['default', 'flag'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    state: {
+      description: 'Visual state indicating the alert severity or meaning.',
+      control: 'radio',
+      options: ['success', 'error', 'warning', 'info'],
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'success' },
+      },
+    },
+    dismissable: {
+      description: 'Whether the alert can be closed by the user.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    showButton: {
+      description: 'Whether to show an action button.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    buttonText: {
+      description: 'Text displayed on the action button.',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Close' },
+      },
+    },
+    showAlert: {
+      description: 'Controls the visibility of the alert.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+  args: {
+    onClose: action('onClose'),
+    onButtonClick: action('onButtonClick'),
+  },
+};
+
+export default meta;
+type Story = StoryObj<AlertComponent>;
+
+/** Default success alert */
+export const Default: Story = {
+  args: {
+    message: 'This is an alert message',
+    type: 'default',
+    state: 'success',
+    dismissable: true,
+    showButton: false,
+    buttonText: 'Close',
+    showAlert: true,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=26-199&p=f&m=dev',
+    },
+    docs: {
+      description: {
+        story: 'Default inline alert with success state. Use for positive feedback messages.',
+      },
+    },
+  },
+};
+
+/** Alert with HTML formatted message */
+export const DefaultAlertWithHtml: Story = {
+  args: {
+    ...Default.args,
+    message:
+      '<b>Request created successfully</b> Your order is <b>on its way</b> to your delivery address.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Alert supporting HTML content for rich text formatting like bold, links, etc.',
+      },
+    },
+  },
+};
+
+/** Flag-style alert with prominent display */
+export const FlagAlertWithHtml: Story = {
+  args: {
+    ...Default.args,
+    type: 'flag',
+    message:
+      '<b>Request created successfully</b> Your order is <b>on its way</b> to your delivery address.',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Flag-type alert with more prominent visual display. Use for important notifications.',
+      },
+    },
+  },
+};
+
+/** Error alert for failure messages */
+export const DefaultErrorAlert: Story = {
+  args: {
+    ...Default.args,
+    state: 'error',
+    message: 'An unexpected error occurred',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Error state alert for displaying failure or error messages.',
+      },
+    },
+  },
+};
+
+/** Warning alert for caution messages */
+export const DefaultWarningAlert: Story = {
+  args: {
+    ...Default.args,
+    state: 'warning',
+    message: 'Warning: This action cannot be undone',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Warning state alert for cautionary messages that require user attention.',
+      },
+    },
+  },
+};
+
+/** Informational alert */
+export const DefaultInfoAlert: Story = {
+  args: {
+    ...Default.args,
+    state: 'info',
+    message: 'Important information for the user',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Info state alert for neutral informational messages.',
+      },
+    },
+  },
+};
+
+/** Alert with action button */
+export const DefaultAlertWithButton: Story = {
+  args: {
+    ...Default.args,
+    showButton: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Alert with an action button that can trigger custom actions.',
+      },
+    },
+  },
+};
+
+/** Alert with custom button text */
+export const DefaultAlertWithButtonAndProvidedButtonText: Story = {
+  args: {
+    ...Default.args,
+    showButton: true,
+    buttonText: 'Accept',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Alert with customized button text for specific call-to-actions.',
+      },
+    },
+  },
+};
+
+export const DefaultAlertWithoutDismiss: Story = {
+  args: {
+    ...Default.args,
+    dismissable: false,
+  },
+};
+
+export const DefaultLinkInfo: Story = {
+  args: {
+    ...Default.args,
+    state: 'info',
+    message: 'Información importante para el usuario',
+    textLink: 'Ir a dropi',
+    linkUrl: 'https://dropi.co/',
+  },
+};
+
+export const FlagSuccessAlert: Story = {
+  args: {
+    ...Default.args,
+    type: 'flag',
+    state: 'success',
+  },
+};
+
+export const FlagErrorAlert: Story = {
+  args: {
+    ...Default.args,
+    type: 'flag',
+    state: 'error',
+  },
+};
+
+export const FlagWarningAlert: Story = {
+  args: {
+    ...Default.args,
+    type: 'flag',
+    state: 'warning',
+  },
+};
+
+export const FlagInfoAlert: Story = {
+  args: {
+    ...Default.args,
+    type: 'flag',
+    state: 'info',
+  },
+};
+
+export const FlagAlertWithoutDismiss: Story = {
+  args: {
+    ...Default.args,
+    type: 'flag',
+    dismissable: false,
+  },
+};

package/src/components-source/alert/alert.component.ts

@@ -0,0 +1,203 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { animate, keyframes, style, transition, trigger } from '@angular/animations';
+
+import { IconComponent } from '../icon/icon.component';
+import { ButtonComponent } from '../dropi-button/dropi-button.component';
+
+/**
+ * Componente que muestra una alerta en la pantalla.
+ *
+ * Basado en: https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=26-199&p=f&m=dev
+ *
+ * @example
+ * <app-alert
+ *   [message]="'Este es un mensaje de alerta'"
+ *   [type]="'default'"
+ *   [state]="'success'"
+ *   [dismissable]="true"
+ *   [showButton]="true"
+ *   [buttonText]="'Cerrar'"
+ * ></app-alert>
+ *
+ * @example
+ * <app-alert
+ *   [message]="'Este es un <b>mensaje</b> de alerta'"
+ *   [type]="'flag'"
+ *   [state]="'error'"
+ *   [dismissable]="false"
+ *   [showButton]="false"
+ *   [buttonText]="'Cerrar'"
+ * ></app-alert>
+ *
+ * @param message Texto del mensaje que se mostrar, puede contener etiquetas HTML.
+ * @param type Tipo de alerta que se mostrar  (default o flag).
+ * @param state Estado de la alerta (success, error, warning o info).
+ * @param dismissable Si se puede cerrar la alerta.
+ * @param showButton Si se mostrar  el bot n de cierre.
+ * @param buttonText Texto del bot n de cierre.
+ * @param textLink Texto del link
+ * @param linkUrl Url del link
+ */
+@Component({
+  selector: 'app-alert',
+  standalone: true,
+  imports: [CommonModule, IconComponent, ButtonComponent],
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss'],
+  animations: [
+    trigger('fade', [
+      transition(':enter', [
+        animate(
+          '300ms ease-out',
+          keyframes([
+            style({ opacity: 0, transform: 'translateY(-20px)', offset: 0 }),
+            style({ opacity: 0.5, transform: 'translateY(-10px)', offset: 0.5 }),
+            style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
+          ]),
+        ),
+      ]),
+      transition(':leave', [
+        animate(
+          '300ms ease-in',
+          keyframes([
+            style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
+            style({ opacity: 0.5, transform: 'translateY(-10px)', offset: 0.5 }),
+            style({ opacity: 0, transform: 'translateY(-20px)', offset: 1 }),
+          ]),
+        ),
+      ]),
+    ]),
+  ],
+})
+export class AlertComponent implements OnInit, OnChanges {
+  /** Texto del mensaje que se mostrará en la alerta. Puede contener etiquetas HTML */
+  @Input() message: string = '';
+
+  /** Tipo de alerta que se mostrar (default o flag) */
+  @Input() type: 'default' | 'flag' = 'default';
+
+  /** Estado de la alerta (success, error, warning o info) */
+  @Input() state: 'success' | 'error' | 'warning' | 'info' = 'success';
+
+  /** Si se puede cerrar la alerta */
+  @Input() dismissable: boolean = true;
+
+  /** Si se mostrar  el botón de cierre */
+  @Input() showButton: boolean = false;
+
+  /** Texto del botón de cierre */
+  @Input() buttonText: string = 'Close';
+
+  @Input() anchorText: string = 'none';
+
+  @Input() anchorUrl: string = 'none';
+
+  /**
+   * Indica si la alerta debe ser visible.
+   * Por defecto es `true`.
+   */
+  @Input() showAlert = true;
+
+  /** Texto del link  */
+  @Input() textLink: string;
+
+  /** funcion clickeable del texto */
+  @Input() clickedText: string = '';
+
+  /** Url del link  */
+  @Input() linkUrl: string;
+
+  /**
+   * Emite un evento cuando se cierra la alerta.
+   */
+  @Output() onClose = new EventEmitter<void>();
+
+  /**
+   * Emite un evento cuando se hace click en el botón opcional.
+   */
+  @Output() onButtonClick = new EventEmitter<void>();
+
+  /**
+   * Emite un evento cuando se hace click en el botón opcional.
+   */
+  @Output() onClickLink = new EventEmitter<void>();
+
+  sanitinezedMessage: SafeHtml;
+  alertState = {
+    success: {
+      icon: 'Check-circle',
+      color: 'Success-Success-500',
+      anchorStyle: 'color: var(--Success-Success-500);',
+    },
+    error: {
+      icon: 'Cross-circle',
+      color: 'Error-Error-500',
+      anchorStyle: 'color: var(--Error-Error-500);',
+    },
+    warning: {
+      icon: 'Warning-circle',
+      color: 'Warning-Warning-500',
+      anchorStyle: 'color: var(--Warning-Warning-500);',
+    },
+    info: {
+      icon: 'Info',
+      color: 'Info-Info-500',
+      anchorStyle: 'color: var(--Info-Info-500);',
+    },
+  };
+
+  constructor(private readonly sanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    this.sanitizeMessage();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!changes.firstChange) this.sanitizeMessage();
+  }
+
+  /**
+   * Sanitiza el mensaje de la alerta para que pueda incluir una etiqueta <a> con un enlace
+   * y un texto de enlace. Si no se proporciona texto de enlace ni url, se devuelve el
+   * mensaje sanitizado.
+   */
+  sanitizeMessage() {
+    if (!this.textLink || !this.linkUrl) {
+      this.sanitinezedMessage = this.sanitizer.bypassSecurityTrustHtml(this.message);
+      return;
+    }
+
+    const message = `${this.message} <a   style="${this.alertState[this.state].anchorStyle}" href="${this.linkUrl}" target="_blank"> ${this.textLink} </a>`;
+    this.sanitinezedMessage = this.sanitizer.bypassSecurityTrustHtml(message);
+  }
+
+  /**
+   * Cierra la alerta.
+   * Llama a la función closeAlert() y cambia el valor de showAlert a false.
+   */
+  closeAlert() {
+    this.showAlert = false;
+    this.onClose.emit();
+  }
+
+  /**
+   * Emite un evento cuando se hace click en el botón opcional.
+   */
+  buttonClick() {
+    this.onButtonClick.emit();
+  }
+
+  emitClickLink(e) {
+    this.onClickLink.emit(e);
+  }
+}

package/src/components-source/alert-legacy/alert.component.html

@@ -0,0 +1,21 @@
+<div
+  *ngIf="visible"
+  class="alert-base"
+  [ngClass]="{ success: type === 'success', error: type === 'error', warning: type === 'warning' }"
+>
+  <div class="content-type">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path
+        d="M13.2048 7.23238L14.2516 8.29488L9.93225 12.5501C9.6437 12.8387 9.26418 12.9826 8.88317 12.9826C8.50216 12.9826 8.11892 12.8372 7.82738 12.5464L5.75309 10.5362L6.79173 9.46475L8.87423 11.4831L13.2048 7.23238ZM18.9475 10.0001C18.9475 14.9338 14.9338 18.9475 10.0001 18.9475C5.06637 18.9475 1.05273 14.9338 1.05273 10.0001C1.05273 5.06637 5.06637 1.05273 10.0001 1.05273C14.9338 1.05273 18.9475 5.06637 18.9475 10.0001ZM17.4562 10.0001C17.4562 5.88879 14.1114 2.54396 10.0001 2.54396C5.88879 2.54396 2.54396 5.88879 2.54396 10.0001C2.54396 14.1114 5.88879 17.4562 10.0001 17.4562C14.1114 17.4562 17.4562 14.1114 17.4562 10.0001Z"
+        fill="#078560"
+      />
+    </svg>
+    <p>
+      {{ message }}
+    </p>
+  </div>
+
+  <div class="close">
+    <i class="pi pi-times" (click)="closeAlert()" style="color: #708090; cursor: pointer"></i>
+  </div>
+</div>

package/src/components-source/alert-legacy/alert.component.scss

@@ -0,0 +1,42 @@
+.alert-base {
+  display: flex;
+  padding: 8px 12px;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  &.success {
+    border-radius: 8px;
+    border: 1px solid var(--Success-success-400, #3bc99f);
+    background: var(--Success-success-50, #e7f8f3);
+  }
+
+  .content-type {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    p {
+      color: var(--Gray-gray-900, #495057);
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .close {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: #7b8190;
+    }
+  }
+}