@keenthemes/ktui 1.1.0 → 1.1.1

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

@@ -1,90 +0,0 @@
-/**
- * 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

@@ -1,91 +0,0 @@
-/**
- * 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

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,81 +0,0 @@
-/**
- * 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

@@ -1,84 +0,0 @@
-/**
- * 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

@@ -1,100 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-/**
- * 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

@@ -1,145 +0,0 @@
-/*
- * 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
-}