@jackuait/blok 0.4.1-beta.0 → 0.4.1-beta.11

package/src/components/utils/listeners.ts

@@ -0,0 +1,296 @@
+import { generateId } from '../utils';
+
+/**
+ * Event listener information
+ * @interface ListenerData
+ */
+export interface ListenerData {
+  /**
+   * Listener unique identifier
+   */
+  id: string;
+
+  /**
+   * Element where to listen to dispatched events
+   */
+  element: EventTarget;
+
+  /**
+   * Event to listen
+   */
+  eventType: string;
+
+  /**
+   * Event handler
+   * @param {Event} event - event object
+   */
+  handler: (event: Event) => void;
+
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+   */
+  options: boolean | AddEventListenerOptions;
+}
+
+interface NormalizedListenerOptions {
+  capture: boolean;
+  once: boolean;
+  passive: boolean;
+  signal?: AbortSignal | null;
+}
+
+/**
+ * Blok Listeners helper
+ *
+ * Decorator for event listeners assignment
+ * @author Blok Team
+ * @version 2.0.0
+ */
+
+/**
+ * @typedef {Listeners} Listeners
+ * @property {ListenerData[]} allListeners - listeners store
+ */
+export class Listeners {
+  /**
+   * Stores all listeners data to find/remove/process it
+   * @type {ListenerData[]}
+   */
+  private allListeners: ListenerData[] = [];
+
+  /**
+   * Assigns event listener on element and returns unique identifier
+   * @param {EventTarget} element - DOM element that needs to be listened
+   * @param {string} eventType - event type
+   * @param {Function} handler - method that will be fired on event
+   * @param {boolean|AddEventListenerOptions} options - useCapture or {capture, passive, once}
+   */
+  public on(
+    element: EventTarget,
+    eventType: string,
+    handler: (event: Event) => void,
+    options: boolean | AddEventListenerOptions = false
+  ): string | undefined {
+    const alreadyExist = this.findOne(element, eventType, handler, options);
+
+    if (alreadyExist) {
+      return undefined;
+    }
+
+    const id = generateId('l');
+    const assignedEventData: ListenerData = {
+      id,
+      element,
+      eventType,
+      handler,
+      options,
+    };
+
+    this.allListeners.push(assignedEventData);
+    element.addEventListener(eventType, handler, options);
+
+    return id;
+  }
+
+  /**
+   * Removes event listener from element
+   * @param {EventTarget} element - DOM element that we removing listener
+   * @param {string} eventType - event type
+   * @param {Function} handler - remove handler, if element listens several handlers on the same event type
+   * @param {boolean|AddEventListenerOptions} options - useCapture or {capture, passive, once}
+   */
+  public off(
+    element: EventTarget,
+    eventType: string,
+    handler?: (event: Event) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    const existingListeners = this.findAll(element, eventType, handler, options);
+
+    existingListeners.forEach((listener, i) => {
+      const index = this.allListeners.indexOf(existingListeners[i]);
+
+      if (index > -1) {
+        this.allListeners.splice(index, 1);
+
+        listener.element.removeEventListener(listener.eventType, listener.handler, listener.options);
+      }
+    });
+  }
+
+  /**
+   * Removes listener by id
+   * @param {string} id - listener identifier
+   */
+  public offById(id: string): void {
+    const listener = this.findById(id);
+
+    if (!listener) {
+      return;
+    }
+
+    listener.element.removeEventListener(listener.eventType, listener.handler, listener.options);
+    const index = this.allListeners.indexOf(listener);
+
+    if (index > -1) {
+      this.allListeners.splice(index, 1);
+    }
+  }
+
+  /**
+   * Finds and returns first listener by passed params
+   * @param {EventTarget} element - event target
+   * @param {string} [eventType] - event type
+   * @param {Function} [handler] - event handler
+   * @param {boolean|AddEventListenerOptions} [options] - event options
+   * @returns {ListenerData|null}
+   */
+  public findOne(
+    element: EventTarget,
+    eventType?: string,
+    handler?: (event: Event) => void,
+    options?: boolean | AddEventListenerOptions
+  ): ListenerData | null {
+    const foundListeners = this.findAll(element, eventType, handler, options);
+
+    return foundListeners[0] ?? null;
+  }
+
+  /**
+   * Return all stored listeners by passed params
+   * @param {EventTarget} element - event target
+   * @param {string} eventType - event type
+   * @param {Function} handler - event handler
+   * @param {boolean|AddEventListenerOptions} [options] - event options
+   * @returns {ListenerData[]}
+   */
+  public findAll(
+    element: EventTarget,
+    eventType?: string,
+    handler?: (event: Event) => void,
+    options?: boolean | AddEventListenerOptions
+  ): ListenerData[] {
+    if (!element) {
+      return [];
+    }
+
+    const foundByEventTargets = this.findByEventTarget(element);
+
+    return foundByEventTargets.filter((listener) => {
+      const matchesEventType = eventType === undefined || listener.eventType === eventType;
+      const matchesHandler = handler === undefined || listener.handler === handler;
+      const matchesOptions = this.areOptionsEqual(listener.options, options);
+
+      return matchesEventType && matchesHandler && matchesOptions;
+    });
+  }
+
+  /**
+   * Removes all listeners
+   */
+  public removeAll(): void {
+    this.allListeners.forEach((current) => {
+      current.element.removeEventListener(current.eventType, current.handler, current.options);
+    });
+
+    this.allListeners = [];
+  }
+
+  /**
+   * Module cleanup on destruction
+   */
+  public destroy(): void {
+    this.removeAll();
+  }
+
+  /**
+   * Search method: looks for listener by passed element
+   * @param {EventTarget} element - searching element
+   * @returns {Array} listeners that found on element
+   */
+  private findByEventTarget(element: EventTarget): ListenerData[] {
+    return this.allListeners.filter((listener) => listener.element === element);
+  }
+
+  /**
+   * Search method: looks for listener by passed event type
+   * @param {string} eventType - event type
+   * @returns {ListenerData[]} listeners that found on element
+   */
+  private findByType(eventType: string): ListenerData[] {
+    return this.allListeners.filter((listener) => listener.eventType === eventType);
+  }
+
+  /**
+   * Search method: looks for listener by passed handler
+   * @param {Function} handler - event handler
+   * @returns {ListenerData[]} listeners that found on element
+   */
+  private findByHandler(handler: (event: Event) => void): ListenerData[] {
+    return this.allListeners.filter((listener) => listener.handler === handler);
+  }
+
+  /**
+   * Returns listener data found by id
+   * @param {string} id - listener identifier
+   * @returns {ListenerData}
+   */
+  private findById(id: string): ListenerData | undefined {
+    return this.allListeners.find((listener) => listener.id === id);
+  }
+
+  /**
+   * Normalizes listener options to a comparable shape
+   * @param {boolean|AddEventListenerOptions} [options] - event options
+   * @returns {NormalizedListenerOptions}
+   */
+  private normalizeListenerOptions(options?: boolean | AddEventListenerOptions): NormalizedListenerOptions {
+    if (typeof options === 'boolean') {
+      return {
+        capture: options,
+        once: false,
+        passive: false,
+      };
+    }
+
+    if (!options) {
+      return {
+        capture: false,
+        once: false,
+        passive: false,
+      };
+    }
+
+    return {
+      capture: options.capture ?? false,
+      once: options.once ?? false,
+      passive: options.passive ?? false,
+      signal: options.signal,
+    };
+  }
+
+  /**
+   * Compares stored listener options with provided ones
+   * @param {boolean|AddEventListenerOptions} storedOptions - stored event options
+   * @param {boolean|AddEventListenerOptions} [providedOptions] - provided event options
+   * @returns {boolean}
+   */
+  private areOptionsEqual(
+    storedOptions: boolean | AddEventListenerOptions,
+    providedOptions?: boolean | AddEventListenerOptions
+  ): boolean {
+    if (providedOptions === undefined) {
+      return true;
+    }
+
+    const storedNormalized = this.normalizeListenerOptions(storedOptions);
+    const providedNormalized = this.normalizeListenerOptions(providedOptions);
+
+    return (
+      storedNormalized.capture === providedNormalized.capture &&
+      storedNormalized.once === providedNormalized.once &&
+      storedNormalized.passive === providedNormalized.passive &&
+      storedNormalized.signal === providedNormalized.signal
+    );
+  }
+}

package/src/components/utils/mutations.ts

@@ -0,0 +1,39 @@
+/**
+ * Check if passed mutation belongs to a passed element
+ * @param mutationRecord - mutation to check
+ * @param element - element that is expected to contain mutation
+ */
+export const isMutationBelongsToElement = (mutationRecord: MutationRecord, element: Element): boolean => {
+  const { type, target, addedNodes, removedNodes } = mutationRecord;
+
+  /**
+   * Skip own technical mutations, for example, data-blok-empty attribute changes
+   */
+  if (mutationRecord.type === 'attributes' && mutationRecord.attributeName === 'data-blok-empty') {
+    return false;
+  }
+
+  /**
+   * Covers all types of mutations happened to the element or it's descendants with the only one exception - removing/adding the element itself;
+   */
+  if (element.contains(target)) {
+    return true;
+  }
+
+  /**
+   * In case of removing/adding the element itself, mutation type will be 'childList' and 'removedNodes'/'addedNodes' will contain the element.
+   */
+  if (type !== 'childList') {
+    return false;
+  }
+
+  const elementAddedItself = Array.from(addedNodes).some(node => node === element);
+
+  if (elementAddedItself) {
+    return true;
+  }
+
+  const elementRemovedItself = Array.from(removedNodes).some(node => node === element);
+
+  return elementRemovedItself;
+};

package/src/components/utils/notifier/draw.ts

@@ -0,0 +1,190 @@
+import { twMerge, twJoin } from '../tw';
+import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
+
+export const CSS = {
+  wrapper: twJoin(
+    'fixed z-[2] bottom-5 left-5',
+    'font-[-apple-system,BlinkMacSystemFont,"Segoe_UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira_Sans","Droid_Sans","Helvetica_Neue",sans-serif]'
+  ),
+  notification: twJoin(
+    'relative w-[230px] mt-[15px] py-[13px] px-4',
+    'bg-white shadow-[0_11px_17px_0_rgba(23,32,61,0.13)] rounded-[5px]',
+    'text-sm leading-[1.4em] break-words',
+    'before:content-[""] before:absolute before:block before:top-0 before:left-0',
+    'before:w-[3px] before:h-[calc(100%-6px)] before:m-[3px] before:rounded-[5px] before:bg-transparent'
+  ),
+  crossBtn: twJoin(
+    'absolute top-[7px] right-[15px] w-2.5 h-2.5 p-[5px] opacity-55 cursor-pointer',
+    'before:content-[""] before:absolute before:left-[9px] before:top-[5px] before:h-3 before:w-0.5 before:bg-[#575d67] before:rotate-[-45deg]',
+    'after:content-[""] after:absolute after:left-[9px] after:top-[5px] after:h-3 after:w-0.5 after:bg-[#575d67] after:rotate-45',
+    'hover:opacity-100'
+  ),
+  btnsWrapper: 'flex flex-row flex-nowrap mt-[5px]',
+  btn: 'border-none rounded-[3px] text-[13px] py-[5px] px-2.5 cursor-pointer last:ml-2.5',
+  okBtn: 'bg-[#34c992] shadow-[0_1px_1px_0_rgba(18,49,35,0.05)] text-white hover:bg-[#2db583]',
+  cancelBtn: 'bg-[#f2f5f7] shadow-[0_2px_1px_0_rgba(16,19,29,0)] text-[#656b7c] hover:bg-[#e9ecee]',
+  input: twJoin(
+    'max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]',
+    'text-[13px] text-[#656b7c] outline-none',
+    'placeholder:text-[#656b7c] focus:placeholder:text-[rgba(101,107,124,0.3)]'
+  ),
+  successNotification: twJoin(
+    '!bg-[#fafffe]',
+    'before:!bg-[#41ffb1]'
+  ),
+  errorNotification: twJoin(
+    '!bg-[#fffbfb]',
+    'before:!bg-[#fb5d5d]'
+  ),
+};
+
+/**
+ * @param {NotifierOptions} options - options for the notification
+ * @returns {HTMLElement} - the notification element
+ */
+export const alert = (options: NotifierOptions): HTMLElement => {
+  const notify = document.createElement('DIV');
+  const cross = document.createElement('DIV');
+  const message = options.message;
+  const style = options.style;
+
+  const getStyleClasses = (): string => {
+    if (style === 'success') {
+      return CSS.successNotification;
+    }
+
+    if (style === 'error') {
+      return CSS.errorNotification;
+    }
+
+    return '';
+  };
+
+  notify.className = twMerge(CSS.notification, getStyleClasses());
+
+  if (style) {
+    notify.setAttribute('data-blok-testid', `notification-${style}`);
+  } else {
+    notify.setAttribute('data-blok-testid', 'notification');
+  }
+
+  notify.innerHTML = message;
+
+  cross.className = CSS.crossBtn;
+  cross.setAttribute('data-blok-testid', 'notification-cross');
+  cross.addEventListener('click', () => notify.remove());
+
+  notify.appendChild(cross);
+
+  return notify;
+};
+
+/**
+ * @param {ConfirmNotifierOptions} options - options for the confirmation notification
+ * @returns {HTMLElement} - the notification element
+ */
+export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
+  const notify = alert(options);
+  const btnsWrapper = document.createElement('div');
+  const okBtn = document.createElement('button');
+  const cancelBtn = document.createElement('button');
+  const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
+  const cancelHandler = options.cancelHandler;
+  const okHandler = options.okHandler;
+
+  btnsWrapper.className = CSS.btnsWrapper;
+  btnsWrapper.setAttribute('data-blok-testid', 'notification-buttons-wrapper');
+
+  okBtn.innerHTML = options.okText || 'Confirm';
+  cancelBtn.innerHTML = options.cancelText || 'Cancel';
+
+  okBtn.className = twJoin(CSS.btn, CSS.okBtn);
+  cancelBtn.className = twJoin(CSS.btn, CSS.cancelBtn);
+
+  okBtn.setAttribute('data-blok-testid', 'notification-confirm-button');
+  cancelBtn.setAttribute('data-blok-testid', 'notification-cancel-button');
+
+  if (cancelHandler && typeof cancelHandler === 'function') {
+    cancelBtn.addEventListener('click', cancelHandler);
+  }
+
+  if (cancelHandler && typeof cancelHandler === 'function' && crossBtn) {
+    crossBtn.addEventListener('click', cancelHandler);
+  }
+
+  if (okHandler && typeof okHandler === 'function') {
+    okBtn.addEventListener('click', okHandler);
+  }
+
+  okBtn.addEventListener('click', () => notify.remove());
+  cancelBtn.addEventListener('click', () => notify.remove());
+
+  btnsWrapper.appendChild(okBtn);
+  btnsWrapper.appendChild(cancelBtn);
+
+  notify.appendChild(btnsWrapper);
+
+  return notify;
+};
+
+/**
+ * @param {PromptNotifierOptions} options - options for the prompt notification
+ * @returns {HTMLElement} - the notification element
+ */
+export const prompt = (options: PromptNotifierOptions): HTMLElement => {
+  const notify = alert(options);
+  const btnsWrapper = document.createElement('div');
+  const okBtn = document.createElement('button');
+  const input = document.createElement('input');
+  const crossBtn = notify.querySelector('[data-blok-testid="notification-cross"]');
+  const cancelHandler = options.cancelHandler;
+  const okHandler = options.okHandler;
+
+  btnsWrapper.className = CSS.btnsWrapper;
+
+  okBtn.innerHTML = options.okText || 'Ok';
+  okBtn.className = twJoin(CSS.btn, CSS.okBtn);
+
+  input.className = CSS.input;
+  input.setAttribute('data-blok-testid', 'notification-input');
+
+  if (options.placeholder) {
+    input.setAttribute('placeholder', options.placeholder);
+  }
+
+  if (options.default) {
+    input.value = options.default;
+  }
+
+  if (options.inputType) {
+    input.type = options.inputType;
+  }
+
+  if (cancelHandler && typeof cancelHandler === 'function' && crossBtn) {
+    crossBtn.addEventListener('click', cancelHandler);
+  }
+
+  if (okHandler && typeof okHandler === 'function') {
+    okBtn.addEventListener('click', () => {
+      okHandler(input.value);
+    });
+  }
+
+  okBtn.addEventListener('click', () => notify.remove());
+
+  btnsWrapper.appendChild(input);
+  btnsWrapper.appendChild(okBtn);
+
+  notify.appendChild(btnsWrapper);
+
+  return notify;
+};
+
+export const getWrapper = (): HTMLElement => {
+  const wrapper = document.createElement('DIV');
+
+  wrapper.className = CSS.wrapper;
+  wrapper.setAttribute('data-blok-testid', 'notifier-container');
+
+  return wrapper;
+};

package/src/components/utils/notifier/index.ts

@@ -0,0 +1,66 @@
+import { alert, confirm, getWrapper, prompt } from './draw';
+import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
+
+const DEFAULT_TIME = 8000;
+
+/**
+ * Prepare wrapper for notifications
+ * @returns {HTMLElement}
+ */
+const prepare_ = (): HTMLElement => {
+  const existingWrapper = document.querySelector('[data-blok-testid="notifier-container"]') as HTMLElement;
+
+  if (existingWrapper) {
+    return existingWrapper;
+  }
+
+  const wrapper = getWrapper();
+
+  document.body.appendChild(wrapper);
+
+  return wrapper;
+};
+
+/**
+ * Show new notification
+ * @param {NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions} options - notification options
+ */
+export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void => {
+  if (!options.message) {
+    return;
+  }
+
+  const wrapper = prepare_();
+
+  const time = options.time || DEFAULT_TIME;
+
+  const notify: HTMLElement = (() => {
+    switch (options.type) {
+      case 'confirm':
+        return confirm(options as ConfirmNotifierOptions);
+
+      case 'prompt':
+        return prompt(options as PromptNotifierOptions);
+
+      default: {
+        const alertElement = alert(options);
+
+        window.setTimeout(() => {
+          alertElement.remove();
+        }, time);
+
+        return alertElement;
+      }
+    }
+  })();
+
+  if (wrapper && notify) {
+    wrapper.appendChild(notify);
+    notify.className = `${notify.className} animate-notify-bounce-in`;
+    notify.setAttribute('data-blok-bounce-in', 'true');
+  }
+};
+
+export const Notifier = {
+  show,
+};

package/src/components/utils/notifier/types.ts

@@ -0,0 +1 @@
+export type * from '@/types/configs/notifier';

package/src/components/utils/notifier.ts

@@ -0,0 +1,77 @@
+/**
+ * Use local module for notifications
+ */
+import type { ConfirmNotifierOptions, NotifierOptions, PromptNotifierOptions } from './notifier/types';
+
+type NotifierModule = {
+  show: (options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions) => void;
+};
+
+/**
+ * Util for showing notifications
+ */
+export class Notifier {
+  /**
+   * Cached notifier module instance
+   */
+  private notifierModule: NotifierModule | null = null;
+
+  /**
+   * Promise used to avoid multiple parallel loads of the notifier module
+   */
+  private loadingPromise: Promise<NotifierModule> | null = null;
+
+  /**
+   * Lazily load notifier only when necessary.
+   * @returns {Promise<NotifierModule>} loaded notifier module
+   */
+  private loadNotifierModule(): Promise<NotifierModule> {
+    if (this.notifierModule !== null) {
+      return Promise.resolve(this.notifierModule);
+    }
+
+    if (this.loadingPromise === null) {
+      this.loadingPromise = import('./notifier/index')
+        .then((module) => {
+          const resolvedModule = module as unknown;
+
+          if (!this.isNotifierModule(resolvedModule)) {
+            throw new Error('notifier module does not expose a "show" method.');
+          }
+
+          this.notifierModule = resolvedModule;
+
+          return resolvedModule;
+        })
+        .catch((error) => {
+          this.loadingPromise = null;
+
+          throw error;
+        });
+    }
+
+    return this.loadingPromise;
+  }
+
+  /**
+   * Show web notification
+   * @param {NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions} options - notification options
+   */
+  public show(options: NotifierOptions | ConfirmNotifierOptions | PromptNotifierOptions): void {
+    void this.loadNotifierModule()
+      .then((notifier) => {
+        notifier.show(options);
+      })
+      .catch((error) => {
+        console.error('[Blok] Failed to display notification. Reason:', error);
+      });
+  }
+
+  /**
+   * Narrow unknown module to notifier module shape
+   * @param {unknown} candidate - module to verify
+   */
+  private isNotifierModule(candidate: unknown): candidate is NotifierModule {
+    return typeof candidate === 'object' && candidate !== null && 'show' in candidate && typeof (candidate as { show?: unknown }).show === 'function';
+  }
+}