@dropi/ui-components 1.0.0

package/src/components-source/dropi-modal/dropi-modal.component.scss

@@ -0,0 +1,274 @@
+:host {
+  display: contents;
+}
+
+.dropi-modal-root {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.dropi-modal-root--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dropi-modal-root--closing {
+  opacity: 1;
+  pointer-events: none;
+}
+
+.dropi-modal-close {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  color: inherit;
+}
+
+/* ------------------ Estilos del panel (sin PrimeNG) ------------------ */
+
+.dropi-modal__mask {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: ease;
+  background: #060b10a8;
+}
+
+.dropi-modal-root--open .dropi-modal__mask {
+  opacity: 1;
+}
+
+.dropi-modal-root--closing .dropi-modal__mask {
+  opacity: 0;
+}
+
+.dropi-modal__panel {
+  position: relative;
+  pointer-events: auto;
+
+  opacity: 0;
+  transform: translateY(16px) scale(0.92);
+  transition-property: opacity, transform;
+  transition-timing-function: ease;
+
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--Border-2, 8px);
+  background: var(--White, #fff);
+  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  padding: var(--Size-6, 32px);
+  gap: var(--Size-5, 32px);
+  max-height: calc(100vh - 60px);
+}
+
+.dropi-modal-root--open .dropi-modal__panel {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.dropi-modal-root--closing .dropi-modal__panel {
+  opacity: 0;
+  transform: translateY(-12px) scale(1.06);
+}
+
+.dropi-modal__header {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.dropi-modal__title {
+  color: var(--Gray-700, #32394d);
+  font-size: var(--Size-5);
+  font-weight: 700;
+  line-height: 110%;
+}
+
+.dropi-modal__content {
+  padding: 0px 8px 0px 0px;
+  overflow: auto;
+}
+
+/* Scroll WebKit */
+.dropi-modal__content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.dropi-modal__content::-webkit-scrollbar-track {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-radius: 16px;
+}
+
+.dropi-modal__content::-webkit-scrollbar-thumb {
+  background: var(--Gray-Gray-300, #a3abbf);
+  border-radius: 16px;
+}
+
+.dropi-modal__content::-webkit-scrollbar-thumb:hover {
+  background: var(--Gray-Gray-500, #69738c);
+}
+
+/* Scroll Firefox */
+.dropi-modal__content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--Gray-Gray-300, #a3abbf) var(--Gray-Gray-50, #f7f8fa);
+}
+
+.dropi-modal__content--sidebar {
+  height: 100%;
+}
+
+.dropi-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: var(--Size-1, 4px);
+}
+
+.dropi-modal__footer .button-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Size-4);
+  min-width: 470px;
+}
+
+.dropi-modal__footer .button-container .btn {
+  width: 100%;
+}
+
+/* Tamaños (compatibles con clases existentes) */
+.dropi-modal__panel.size-full {
+  min-height: 100vh;
+  width: 100%;
+  height: 100%;
+  max-height: 100vh;
+  border-radius: 0 !important;
+}
+
+.dropi-modal__panel.size-xxl {
+  width: calc(100% - 60px);
+  max-width: 1520px;
+  height: calc(100vh - 120px);
+  max-height: 900px;
+}
+
+.dropi-modal__panel.size-l {
+  width: 1137px;
+  // height: 754px;
+  max-width: 1137px;
+  max-height: 754px;
+}
+
+.dropi-modal__panel.size-m {
+  max-width: 550px;
+  width: 550px;
+  // height: 786px;
+}
+
+.dropi-modal__panel.size-m .dropi-modal__footer {
+  justify-content: center;
+}
+
+.dropi-modal__panel.size-m .dropi-modal__footer .button-container {
+  width: 100%;
+  min-width: unset !important;
+}
+
+.dropi-modal__panel.size-s {
+  width: 454px;
+}
+
+.dropi-modal__panel.size-s .dropi-modal__footer {
+  justify-content: center;
+}
+
+.dropi-modal__panel.size-s .dropi-modal__footer .button-container {
+  width: 100%;
+  min-width: unset !important;
+}
+
+@media (max-width: 599px) {
+  .dropi-modal__panel {
+    padding: 20px;
+    width: 100% !important;
+  }
+
+  .dropi-modal__panel:not(.size-s) {
+    border-radius: 0 !important;
+    height: 100% !important;
+    max-height: unset !important;
+  }
+
+  .dropi-modal__footer {
+    justify-content: center;
+  }
+
+  .dropi-modal__footer .button-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--Size-4);
+  }
+
+  .dropi-modal__panel.size-s {
+    margin: 0 20px !important;
+  }
+}
+
+/* ------------------ Posiciones (para sidebars) ------------------ */
+
+.dropi-modal-root--right {
+  align-items: stretch;
+  justify-content: flex-end;
+}
+
+.dropi-modal-root--right .dropi-modal__panel {
+  height: 100vh;
+  max-height: 100vh;
+  padding: 0;
+  border-radius: 0;
+  gap: 0;
+  opacity: 1;
+  transform: translateX(100%);
+  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropi-modal-root--open.dropi-modal-root--right .dropi-modal__panel {
+  transform: translateX(0);
+}
+
+.dropi-modal-root--closing.dropi-modal-root--right .dropi-modal__panel {
+  transform: translateX(100%);
+}
+
+/* Tamaño de sidebar 50vw */
+.dropi-modal-root--right .dropi-modal__panel.size-sidebar-half {
+  width: 50vw;
+  min-width: 600px;
+  box-shadow: -10px 0 40px 0 rgba(0, 0, 0, 0.15);
+}
+
+@media (max-width: 768px) {
+  .dropi-modal-root--right .dropi-modal__panel.size-sidebar-half {
+    width: 100vw;
+    min-width: unset;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropi-modal__mask,
+  .dropi-modal__panel {
+    transition: none !important;
+  }
+}

package/src/components-source/dropi-modal/dropi-modal.component.spec.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/common';
+
+import { DropiModalComponent } from './dropi-modal.component';
+import { PTemplateDirective } from './p-template.directive';
+
+@Component({
+  standalone: true,
+  imports: [DropiModalComponent, PTemplateDirective],
+  template: `
+    <dropi-modal
+      [(visible)]="visible"
+      [modal]="true"
+      [showHeader]="false"
+      styleClass="dropi-dialog size-s"
+    >
+      <ng-template pTemplate="content">
+        <div data-testid="content">Contenido</div>
+      </ng-template>
+    </dropi-modal>
+  `,
+})
+class HostComponent {
+  visible = true;
+}
+
+describe('DropiModalComponent', () => {
+  it('renders mask and content when visible', async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+
+    // El modal se adjunta al body via CDK Overlay (microtask).
+    await new Promise((r) => setTimeout(r));
+    fixture.detectChanges();
+
+    const doc = TestBed.inject(DOCUMENT);
+
+    expect(doc.querySelector('.dropi-modal__mask')).toBeTruthy();
+    expect(doc.querySelector('[data-testid="content"]')?.textContent).toContain('Contenido');
+  });
+});

package/src/components-source/dropi-modal/dropi-modal.component.stories.ts

@@ -0,0 +1,392 @@
+/**
+ * @fileoverview Dropi Modal component stories for Storybook
+ * @description Overlay-based modal and drawer component (no PrimeNG)
+ */
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
+
+import { DropiModalComponent } from './dropi-modal.component';
+import { PTemplateDirective } from './p-template.directive';
+import { ButtonComponent } from '../dropi-button/dropi-button.component';
+
+@Component({
+  selector: 'dropi-modal-story-host',
+  standalone: true,
+  imports: [CommonModule, DropiModalComponent, PTemplateDirective, ButtonComponent],
+  template: `
+    <div style="padding: 24px; display: flex; gap: 12px; align-items: center;">
+      <dropi-button
+        text="Open Modal"
+        severity="primary"
+        size="normal"
+        (onClick)="visible = true"
+      ></dropi-button>
+      <span style="color: var(--Gray-500);">Visible: {{ visible }}</span>
+    </div>
+
+    <dropi-modal
+      [visible]="visible"
+      (visibleChange)="visible = $event"
+      [modal]="modal"
+      [dismissableMask]="dismissableMask"
+      [dismissible]="dismissible"
+      [closeOnEscape]="closeOnEscape"
+      [blockScroll]="blockScroll"
+      [autoZIndex]="autoZIndex"
+      [baseZIndex]="baseZIndex"
+      [transitionOptions]="transitionOptions"
+      [position]="position"
+      [showHeader]="showHeader"
+      [header]="header"
+      [showCloseIcon]="showCloseIcon"
+      [closable]="closable"
+      [draggable]="draggable"
+      [resizable]="resizable"
+      [styleClass]="styleClass"
+      (onShow)="onShow?.()"
+      (onHide)="onHide?.()"
+    >
+      <ng-template pTemplate="content">
+        <div style="min-width: 320px;">
+          <p style="margin: 0 0 12px; color: var(--Gray-700);">
+            This content is rendered in an overlay attached to <code>document.body</code>.
+          </p>
+          <p style="margin: 0; color: var(--Gray-500);">
+            Click the mask (if enabled) or press <kbd>Esc</kbd> to close.
+          </p>
+        </div>
+      </ng-template>
+
+      <ng-template pTemplate="footer">
+        <div style="display: flex; gap: 12px; justify-content: flex-end; width: 100%;">
+          <dropi-button
+            text="Cancel"
+            severity="secondary"
+            size="normal"
+            (onClick)="visible = false"
+          ></dropi-button>
+          <dropi-button
+            text="Confirm"
+            severity="primary"
+            size="normal"
+            (onClick)="visible = false"
+          ></dropi-button>
+        </div>
+      </ng-template>
+    </dropi-modal>
+  `,
+})
+class DropiModalStoryHostComponent {
+  visible = true;
+
+  // Inputs
+  @Input() modal = true;
+  @Input() dismissableMask = true;
+  @Input() dismissible = true;
+  @Input() closeOnEscape = true;
+  @Input() blockScroll = true;
+  @Input() autoZIndex = true;
+  @Input() baseZIndex = 1100;
+  @Input() transitionOptions = '0.15s';
+  @Input() position: 'center' | 'right' | 'left' | 'top' | 'bottom' = 'center';
+  @Input() showHeader = true;
+  @Input() header: string | null = 'Dropi Modal';
+  @Input() showCloseIcon = true;
+  @Input() closable = true;
+  @Input() draggable = false;
+  @Input() resizable = false;
+  @Input() styleClass: string | null = 'size-s';
+
+  // Events (storybook actions)
+  @Input() onShow?: () => void;
+  @Input() onHide?: () => void;
+}
+
+const meta: Meta<DropiModalComponent> = {
+  title: 'UI Dropi/Dropi Modal',
+  component: DropiModalComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [DropiModalStoryHostComponent],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'light',
+    },
+    docs: {
+      description: {
+        component: `
+An overlay-based modal component built with Angular CDK Overlay.
+
+## Key Features
+- **Appended to body**: Renders inside an overlay attached to document.body
+- **Mask + dismiss**: Supports mask click and Escape key closing
+- **Drawer support**: Use position="right" (or left/top/bottom) for sidebar-like layouts
+- **PrimeNG-like API**: Compatible inputs/outputs such as visible, visibleChange, dismissableMask, and baseZIndex
+- **Smooth animations**: Uses double requestAnimationFrame for reliable open/close animations
+- **Configurable timing**: Use transitionOptions to control animation duration (e.g., '300ms')
+
+## Animation Classes
+The component applies CSS classes for animation states:
+- \`.dropi-modal-root--open\`: Applied when modal is visible
+- \`.dropi-modal-root--closing\`: Applied during close animation
+
+## Usage
+~~~html
+<dropi-modal 
+  [(visible)]="visible" 
+  [modal]="true" 
+  styleClass="size-m"
+  transitionOptions="300ms"
+  (onHide)="onModalClosed()">
+  <ng-template pTemplate="header">My Header</ng-template>
+  <ng-template pTemplate="content">My Content</ng-template>
+  <ng-template pTemplate="footer">My Footer</ng-template>
+</dropi-modal>
+~~~
+        `,
+      },
+    },
+  },
+  argTypes: {
+    visible: {
+      control: 'boolean',
+      description: 'Controls modal visibility',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'State',
+      },
+    },
+    modal: {
+      control: 'boolean',
+      description: 'When true, renders a mask behind the panel',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    dismissableMask: {
+      control: 'boolean',
+      description: 'Allows closing when the mask is clicked',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'Allows dismiss interactions (mask click / escape)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    closeOnEscape: {
+      control: 'boolean',
+      description: 'Closes the modal when pressing Escape',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    blockScroll: {
+      control: 'boolean',
+      description: 'Locks page scroll while visible',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    autoZIndex: {
+      control: 'boolean',
+      description: 'Manages stacking order automatically',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Behavior',
+      },
+    },
+    baseZIndex: {
+      control: 'number',
+      description: 'Base z-index used for mask/panel',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1100' },
+        category: 'Behavior',
+      },
+    },
+    transitionOptions: {
+      control: 'text',
+      description: 'CSS transition duration (e.g. "0.15s" or "150ms")',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '0.15s' },
+        category: 'Behavior',
+      },
+    },
+    position: {
+      control: 'select',
+      options: ['center', 'right', 'left', 'top', 'bottom'],
+      description: 'Panel placement. Use right for drawers/sidebars.',
+      table: {
+        type: { summary: "'center' | 'right' | 'left' | 'top' | 'bottom'" },
+        defaultValue: { summary: 'center' },
+        category: 'Behavior',
+      },
+    },
+    showHeader: {
+      control: 'boolean',
+      description: 'Shows the header area',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Appearance',
+      },
+    },
+    header: {
+      control: 'text',
+      description: 'Text header (used when no header template is provided)',
+      table: {
+        type: { summary: 'string | null' },
+        defaultValue: { summary: 'null' },
+        category: 'Appearance',
+      },
+    },
+    showCloseIcon: {
+      control: 'boolean',
+      description: 'Shows the close icon in the header',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Appearance',
+      },
+    },
+    closable: {
+      control: 'boolean',
+      description: 'PrimeNG-compatible alias for showing the close icon',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Appearance',
+      },
+    },
+    draggable: {
+      control: 'boolean',
+      description: 'PrimeNG-compatible no-op (kept for API parity)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    resizable: {
+      control: 'boolean',
+      description: 'PrimeNG-compatible no-op (kept for API parity)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Behavior',
+      },
+    },
+    styleClass: {
+      control: 'text',
+      description: 'Additional classes applied to the panel (e.g. "size-m")',
+      table: {
+        type: { summary: 'string | null' },
+        defaultValue: { summary: 'null' },
+        category: 'Appearance',
+      },
+    },
+    visibleChange: {
+      action: 'visibleChange',
+      description: 'Emitted when visibility changes',
+      table: { category: 'Events' },
+    },
+    onShow: {
+      action: 'onShow',
+      description: 'Emitted after opening',
+      table: { category: 'Events' },
+    },
+    onHide: {
+      action: 'onHide',
+      description: 'Emitted after closing',
+      table: { category: 'Events' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiModalComponent>;
+
+/**
+ * Centered modal with mask and header.
+ */
+export const Centered: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `<dropi-modal-story-host
+      [modal]="modal"
+      [dismissableMask]="dismissableMask"
+      [dismissible]="dismissible"
+      [closeOnEscape]="closeOnEscape"
+      [blockScroll]="blockScroll"
+      [autoZIndex]="autoZIndex"
+      [baseZIndex]="baseZIndex"
+      [transitionOptions]="transitionOptions"
+      [position]="position"
+      [showHeader]="showHeader"
+      [header]="header"
+      [showCloseIcon]="showCloseIcon"
+      [closable]="closable"
+      [draggable]="draggable"
+      [resizable]="resizable"
+      [styleClass]="styleClass"
+      [onShow]="onShow"
+      [onHide]="onHide"
+    ></dropi-modal-story-host>`,
+  }),
+  args: {
+    modal: true,
+    dismissableMask: true,
+    dismissible: true,
+    closeOnEscape: true,
+    blockScroll: true,
+    autoZIndex: true,
+    baseZIndex: 1100,
+    transitionOptions: '0.15s',
+    position: 'center',
+    showHeader: true,
+    header: 'Dropi Modal',
+    showCloseIcon: true,
+    closable: true,
+    draggable: false,
+    resizable: false,
+    styleClass: 'size-s',
+  },
+};
+
+/**
+ * Drawer variant using position="right".
+ */
+export const RightDrawer: Story = {
+  ...Centered,
+  args: {
+    ...(Centered.args as any),
+    position: 'right',
+    showHeader: true,
+    header: 'Add products',
+    styleClass: 'add-products-sidebar',
+  },
+};