@keenthemes/ktui 1.0.28 → 1.1.0

package/src/components/alert/tests/dismissal/manual-dismiss.test.ts

@@ -0,0 +1,90 @@
+/**
+ * TEST SUITE: Manual Dismissal
+ * PURPOSE: Test dismissing via close button and confirm/cancel
+ * SCOPE: KTAlert manual dismissal logic
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert manual dismissal', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should dismiss alert via close button', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showCloseButton: true });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    const closeButton = element.querySelector('[data-kt-alert-close]') as HTMLElement;
+    closeButton?.click();
+    // ASSERT
+    expect(fireEventSpy).toHaveBeenCalledWith('dismiss', {});
+    expect((alert as any)._state.isDismissed).toBe(true);
+    expect(element.innerHTML).toBe('');
+  });
+
+  it('should dismiss alert via confirm button', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showConfirmButton: true });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    const confirmButton = element.querySelector('[data-kt-alert-confirm]') as HTMLElement;
+    confirmButton?.click();
+    // ASSERT
+    expect(fireEventSpy).toHaveBeenCalledWith('confirm', { inputValue: undefined });
+    expect((alert as any)._state.isDismissed).toBe(true);
+    expect(element.innerHTML).toBe('');
+  });
+
+  it('should dismiss alert via cancel button', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showCancelButton: true });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    const cancelButton = element.querySelector('[data-kt-alert-cancel]') as HTMLElement;
+    cancelButton?.click();
+    // ASSERT
+    expect(fireEventSpy).toHaveBeenCalledWith('cancel', {});
+    expect((alert as any)._state.isDismissed).toBe(true);
+    expect(element.innerHTML).toBe('');
+  });
+
+  it('should not dismiss if close button is disabled', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { showCloseButton: false });
+    const fireEventSpy = vi.spyOn(alert as any, '_fireEvent');
+    // ACT
+    const closeButton = element.querySelector('[data-kt-alert-close]');
+    // ASSERT
+    expect(closeButton).toBeNull();
+    expect(fireEventSpy).not.toHaveBeenCalled();
+  });
+
+  it('should clear timer when manually dismissed', () => {
+    // ARRANGE
+    const element = document.createElement('div');
+    document.body.appendChild(element);
+    const alert = new KTAlert(element, { timer: 5000, showCloseButton: true });
+    const clearTimerSpy = vi.spyOn(alert as any, '_clearTimer');
+    // ACT
+    const closeButton = element.querySelector('[data-kt-alert-close]') as HTMLElement;
+    closeButton?.click();
+    // ASSERT
+    expect(clearTimerSpy).toHaveBeenCalled();
+  });
+});

package/src/components/alert/tests/dismissal/outside-click-dismiss.test.ts

@@ -0,0 +1,91 @@
+/**
+ * TEST SUITE: Outside Click Dismissal
+ * PURPOSE: Test dismissal by clicking outside modal (if allowed)
+ * SCOPE: KTAlert outside click dismissal logic
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert outside click dismissal', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should dismiss alert by clicking outside modal if allowed', () => {
+    // ARRANGE
+    const config = { modal: true, allowOutsideClick: true, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const overlay = document.querySelector('[data-kt-alert-overlay]');
+    const fireEventSpy = vi.spyOn(overlay as any, 'dispatchEvent');
+    // Simulate click on overlay (outside the alert)
+    const outsideClick = new MouseEvent('click', { bubbles: true });
+    overlay?.dispatchEvent(outsideClick);
+    // ASSERT
+    // The event should be handled by the overlay click listener
+    expect(overlay).toBeTruthy();
+  });
+
+  it('should not dismiss if allowOutsideClick is false', () => {
+    // ARRANGE
+    const config = { modal: true, allowOutsideClick: false, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const overlay = document.querySelector('[data-kt-alert-overlay]');
+    const alert = overlay?.querySelector('[data-kt-alert]');
+    // Simulate click on overlay
+    const outsideClick = new MouseEvent('click', { bubbles: true });
+    overlay?.dispatchEvent(outsideClick);
+    // ASSERT
+    // Alert should still be present
+    expect(alert).toBeTruthy();
+  });
+
+  it('should not dismiss if clicking inside the alert', () => {
+    // ARRANGE
+    const config = { modal: true, allowOutsideClick: true, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate click inside the alert
+    const insideClick = new MouseEvent('click', { bubbles: true });
+    alert?.dispatchEvent(insideClick);
+    // ASSERT
+    // Alert should still be present
+    expect(alert).toBeTruthy();
+  });
+
+  it('should not dismiss if not modal', () => {
+    // ARRANGE
+    const config = { modal: false, allowOutsideClick: true, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const alert = document.querySelector('[data-kt-alert]');
+    // Simulate click outside
+    const outsideClick = new MouseEvent('click', { bubbles: true });
+    document.body.dispatchEvent(outsideClick);
+    // ASSERT
+    // Alert should still be present
+    expect(alert).toBeTruthy();
+  });
+
+  it('should clear timer when dismissed by outside click', () => {
+    // ARRANGE
+    const config = { modal: true, allowOutsideClick: true, timer: 5000, title: 'Test' };
+    // ACT
+    KTAlert.fire(config);
+    const overlay = document.querySelector('[data-kt-alert-overlay]');
+    // Simulate click on overlay
+    const outsideClick = new MouseEvent('click', { bubbles: true });
+    overlay?.dispatchEvent(outsideClick);
+    // ASSERT
+    // The overlay should be removed
+    expect(document.querySelector('[data-kt-alert-overlay]')).toBeNull();
+  });
+});

package/src/components/alert/tests/edge-cases/invalid-config.test.ts

@@ -0,0 +1,19 @@
+/**
+ * TEST SUITE: Invalid Config Handling
+ * PURPOSE: Test handling of invalid/missing config, fallback to defaults, error handling
+ * SCOPE: KTAlert invalid config and error handling
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert invalid config handling', () => {
+  it('should fallback to defaults on missing config', () => {
+    // TODO: Implement test
+  });
+  it('should handle invalid config gracefully', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/tests/edge-cases/multiple-alerts.test.ts

@@ -0,0 +1,19 @@
+/**
+ * TEST SUITE: Multiple Alerts
+ * PURPOSE: Test stacking/multiple alerts, overlay handling, and cleanup
+ * SCOPE: KTAlert multiple/stacked alerts
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert multiple/stacked alerts', () => {
+  it('should handle multiple alerts and overlays correctly', () => {
+    // TODO: Implement test
+  });
+  it('should clean up overlays and DOM after dismissal', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/tests/rendering/custom-content.test.ts

@@ -0,0 +1,81 @@
+/**
+ * TEST SUITE: Custom Content Alert Rendering
+ * PURPOSE: Test rendering of alerts with custom HTML/content
+ * SCOPE: KTAlert rendering with customContent config
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTAlert } from '../../alert';
+
+function getAlertElements() {
+  // KTAlert.fire() creates an overlay structure
+  const overlay = document.querySelector('[data-kt-alert-overlay]');
+  const alert = overlay?.querySelector('[data-kt-alert]') || document.querySelector('[data-kt-alert]');
+  return {
+    alert,
+    overlay,
+    custom: alert?.querySelector('[data-kt-alert-custom-content]'),
+    icon: alert?.querySelector('[data-kt-alert-icon]'),
+    title: alert?.querySelector('[data-kt-alert-title]'),
+    message: alert?.querySelector('[data-kt-alert-message]'),
+  };
+}
+
+describe('KTAlert custom content rendering', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should render alert with custom HTML content', () => {
+    // ARRANGE
+    const config = {
+      type: 'info',
+      title: 'Custom',
+      customContent: '<div id="my-custom">Hello <b>World</b></div>'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { alert, custom } = getAlertElements();
+    // ASSERT
+    expect(alert).toBeTruthy();
+    expect(custom?.innerHTML).toContain('Hello <b>World</b>');
+    expect(custom?.querySelector('#my-custom')).toBeTruthy();
+  });
+
+  it('should render custom content alongside title and message', () => {
+    // ARRANGE
+    const config = {
+      type: 'info',
+      title: 'Custom',
+      text: 'This is a message',
+      customContent: '<span id="extra">Extra</span>'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { title, message, custom } = getAlertElements();
+    // ASSERT
+    expect(title?.textContent).toBe('Custom');
+    expect(message?.textContent).toBe('This is a message');
+    expect(custom?.innerHTML).toContain('Extra');
+    expect(custom?.querySelector('#extra')).toBeTruthy();
+  });
+
+  it('should not render custom content if not provided', () => {
+    // ARRANGE
+    const config = {
+      type: 'info',
+      title: 'No Custom'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { custom } = getAlertElements();
+    // ASSERT
+    // custom-content fragment may be present but empty
+    expect(custom?.innerHTML === '' || custom == null).toBeTruthy();
+  });
+});

package/src/components/alert/tests/rendering/info-alert.test.ts

@@ -0,0 +1,84 @@
+/**
+ * TEST SUITE: Info Alert Rendering
+ * PURPOSE: Test rendering of info alerts (icon, title, message, ARIA, default config)
+ * SCOPE: KTAlert rendering for info type
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTAlert } from '../../alert';
+
+function getAlertElements() {
+  // KTAlert.fire() creates an overlay structure
+  const overlay = document.querySelector('[data-kt-alert-overlay]');
+  const alert = overlay?.querySelector('[data-kt-alert]') || document.querySelector('[data-kt-alert]');
+  return {
+    alert,
+    overlay,
+    icon: alert?.querySelector('[data-kt-alert-icon]'),
+    title: alert?.querySelector('[data-kt-alert-title]'),
+    message: alert?.querySelector('[data-kt-alert-message]'),
+  };
+}
+
+describe('KTAlert info alert rendering', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should render info alert with correct icon, title, and message', () => {
+    // ARRANGE
+    const config = {
+      type: 'info',
+      title: 'Information',
+      text: 'This is an info alert.',
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { alert, icon, title, message } = getAlertElements();
+    // ASSERT
+    expect(alert).toBeTruthy();
+    expect(alert?.getAttribute('data-kt-alert-type')).toBe('info');
+    expect(title?.textContent).toBe('Information');
+    expect(message?.textContent).toBe('This is an info alert.');
+    expect(icon).toBeTruthy();
+    // Check ARIA
+    expect(alert?.getAttribute('role')).toBe('alertdialog');
+    expect(alert?.getAttribute('aria-modal')).toBe('true');
+  });
+
+  it('should fallback to default title/message if not provided', () => {
+    // ARRANGE
+    const config = { type: 'info' };
+    // ACT
+    KTAlert.fire(config);
+    const { title, message } = getAlertElements();
+    // ASSERT
+    expect(title?.textContent).toBeDefined();
+    expect(message?.textContent).toBeDefined();
+  });
+
+  it('should render with custom id if provided', () => {
+    // ARRANGE
+    const config = { type: 'info', title: 'Info', text: 'Msg', id: 'custom-id' };
+    // ACT
+    KTAlert.fire(config);
+    const { alert } = getAlertElements();
+    // ASSERT
+    expect(alert?.id).toBe('custom-id');
+  });
+
+  it('should not render icon if icon: false is set', () => {
+    // ARRANGE
+    const config = { type: 'info', title: 'Info', text: 'Msg', icon: false };
+    // ACT
+    KTAlert.fire(config);
+    const { icon } = getAlertElements();
+    // ASSERT
+    expect(icon).toBeNull();
+  });
+});

package/src/components/alert/tests/rendering/success-alert.test.ts

@@ -0,0 +1,100 @@
+/**
+ * TEST SUITE: Success Alert Rendering
+ * PURPOSE: Test rendering of success alerts (icon, color, confirm button)
+ * SCOPE: KTAlert rendering for success type
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTAlert } from '../../alert';
+
+function getAlertElements() {
+  // KTAlert.fire() creates an overlay structure
+  const overlay = document.querySelector('[data-kt-alert-overlay]');
+  const alert = overlay?.querySelector('[data-kt-alert]') || document.querySelector('[data-kt-alert]');
+  return {
+    alert,
+    overlay,
+    icon: alert?.querySelector('[data-kt-alert-icon]'),
+    title: alert?.querySelector('[data-kt-alert-title]'),
+    message: alert?.querySelector('[data-kt-alert-message]'),
+    confirm: alert?.querySelector('[data-kt-alert-confirm]'),
+  };
+}
+
+describe('KTAlert success alert rendering', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should render success alert with correct icon, color, and confirm button', () => {
+    // ARRANGE
+    const config = {
+      type: 'success',
+      title: 'Success!',
+      text: 'Operation completed successfully.',
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { alert, icon, title, message, confirm } = getAlertElements();
+    // ASSERT
+    expect(alert).toBeTruthy();
+    expect(alert?.getAttribute('data-kt-alert-type')).toBe('success');
+    expect(title?.textContent).toBe('Success!');
+    expect(message?.textContent).toBe('Operation completed successfully.');
+    expect(icon).toBeTruthy();
+    expect(confirm).toBeTruthy();
+    // Check ARIA
+    expect(alert?.getAttribute('role')).toBe('alertdialog');
+    expect(alert?.getAttribute('aria-modal')).toBe('true');
+  });
+
+  it('should use custom confirm button text if provided', () => {
+    // ARRANGE
+    const config = {
+      type: 'success',
+      title: 'Success!',
+      text: 'Done!',
+      confirmText: 'Great!'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { confirm } = getAlertElements();
+    // ASSERT
+    expect(confirm?.textContent).toBe('Great!');
+  });
+
+  it('should not render confirm button if showConfirmButton is false', () => {
+    // ARRANGE
+    const config = {
+      type: 'success',
+      title: 'Success!',
+      text: 'Done!',
+      showConfirmButton: false
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { confirm } = getAlertElements();
+    // ASSERT
+    expect(confirm).toBeNull();
+  });
+
+  it('should apply correct color class for success type', () => {
+    // ARRANGE
+    const config = {
+      type: 'success',
+      title: 'Success!',
+      text: 'Done!'
+    };
+    // ACT
+    KTAlert.fire(config);
+    const { alert } = getAlertElements();
+    // ASSERT
+    // The class is applied via Tailwind, but we can check the attribute for type
+    expect(alert?.getAttribute('data-kt-alert-type')).toBe('success');
+  });
+});

package/src/components/alert/tests/templates/default-templates.test.ts

@@ -0,0 +1,16 @@
+/**
+ * TEST SUITE: Default Templates
+ * PURPOSE: Test rendering with default templates
+ * SCOPE: KTAlert default template rendering
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert default templates', () => {
+  it('should render alert using default templates', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/tests/templates/user-templates.test.ts

@@ -0,0 +1,16 @@
+/**
+ * TEST SUITE: User Templates
+ * PURPOSE: Test rendering with user-provided template overrides
+ * SCOPE: KTAlert user template rendering
+ * DEPENDENCIES: vitest, jsdom
+ * LAST UPDATED: 2024-06-08
+ */
+
+import { describe, it, expect } from 'vitest';
+import { KTAlert } from '../../alert';
+
+describe('KTAlert user templates', () => {
+  it('should render alert using user-provided template overrides', () => {
+    // TODO: Implement test
+  });
+});

package/src/components/alert/types.ts

@@ -0,0 +1,145 @@
+/*
+ * types.ts - Type definitions for KTAlert (modular alert/dialog component)
+ * Defines config, template, and state interfaces for extensible template customization.
+ */
+
+// Template keys for all customizable UI fragments
+export type KTAlertTemplateKey =
+  | 'container'
+  | 'overlay'
+  | 'modal'
+  | 'icon'
+  | 'title'
+  | 'message'
+  | 'actions'
+  | 'confirmButton'
+  | 'cancelButton'
+  | 'confirmButtonCustomClass'
+  | 'cancelButtonCustomClass'
+  | 'input'
+  | 'inputText'
+  | 'inputTextarea'
+  | 'inputSelect'
+  | 'inputRadio'
+  | 'inputCheckbox'
+  | 'inputError'
+  | 'closeButton'
+  | 'customContent'
+  | 'loaderHtml'
+  | 'option'
+  | 'radioOption'
+  | 'checkboxOption';
+
+// Template string map
+export type KTAlertTemplateStrings = {
+  [K in KTAlertTemplateKey]?: string | ((data: any) => string);
+};
+
+/**
+ * Configuration options for KTAlert
+ */
+export interface KTAlertConfig {
+  /** Custom templates for UI fragments */
+  templates?: KTAlertTemplateStrings;
+  /** Alert type (success, error, warning, info, question, custom) */
+  type?: string;
+  /** Title text or HTML */
+  title?: string;
+  /** Message text or HTML */
+  message?: string;
+  /** Icon name or HTML (success, error, warning, info, question, or custom HTML) */
+  icon?: string;
+  /** Position of the alert (top, center, bottom, etc.) */
+  position?: string;
+  /** Whether the alert is dismissible */
+  dismissible?: boolean;
+  /** Whether the alert is modal (blocks background) */
+  modal?: boolean;
+  /** Whether to show an input field */
+  input?: boolean;
+  /** Input placeholder text */
+  inputPlaceholder?: string;
+  /** Input default value */
+  inputValue?: string;
+  /** Input type (text, password, email, textarea, select, radio, checkbox, etc.) */
+  inputType?: string;
+  /** Input label */
+  inputLabel?: string;
+  /** Input attributes (object of key-value pairs) */
+  inputAttributes?: Record<string, string>;
+  /** Input options (for select, radio, checkbox, etc.) */
+  inputOptions?: Array<{ value: string; label: string; checked?: boolean; disabled?: boolean }>;
+  /** Custom content HTML */
+  customContent?: string;
+  /** Confirm button text */
+  confirmText?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Show confirm button */
+  showConfirmButton?: boolean;
+  /** Show cancel button */
+  showCancelButton?: boolean;
+  /** Show close (X) button */
+  showCloseButton?: boolean;
+  /** Auto-dismiss timer (ms) */
+  timer?: number;
+  /** Allow dismiss by clicking outside the alert */
+  allowOutsideClick?: boolean;
+  /** Allow dismiss by pressing Escape key */
+  allowEscapeKey?: boolean;
+  /** Focus confirm button on open */
+  focusConfirm?: boolean;
+  /** Show loader on confirm */
+  showLoaderOnConfirm?: boolean;
+  /** Custom class for alert container */
+  customClass?: string;
+  /** Loader HTML or template */
+  loaderHtml?: string;
+
+  // Validation and processing callbacks
+  /** Input validation function - return string for error, null/undefined for success */
+  inputValidator?: (value: string) => string | null | undefined | Promise<string | null | undefined>;
+  /** Pre-confirmation processing function - can return Promise for async processing */
+  preConfirm?: (value: string) => string | Promise<string>;
+  /** Auto-focus the input field when alert opens */
+  inputAutoFocus?: boolean;
+
+  // Granular class overrides for individual UI elements
+  overlayClass?: string;
+  modalClass?: string;
+  containerClass?: string;
+  iconClass?: string;
+  titleClass?: string;
+  messageClass?: string;
+  actionsClass?: string;
+  inputClass?: string;
+  inputLabelClass?: string;
+  closeButtonClass?: string;
+  customContentClass?: string;
+  loaderClass?: string;
+  /**
+   * Per-type theming overrides (e.g., { success: { customClass, icon, confirmText, ... }, ... })
+   */
+  theme?: {
+    [type: string]: {
+      customClass?: string;
+      icon?: string;
+      confirmText?: string;
+      cancelText?: string;
+      confirmButtonClass?: string;
+      cancelButtonClass?: string;
+      // Add more per-type overrides as needed
+    }
+  };
+  /** Additional config options */
+  [key: string]: any;
+}
+
+// State interface for KTAlert
+export interface KTAlertState {
+  isOpen: boolean;
+  isModal: boolean;
+  isDismissed: boolean;
+  inputValue?: string;
+  // Add more state fields as needed
+}