@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/composables/useEcho/index.ts

@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ref } from 'vue';
+import Echo from 'laravel-echo';
+import { ConnectionManager } from 'pusher-js';
+import mitt from 'mitt';
+
+import type { Authorizer, Channel } from 'pusher-js';
+
+interface Listener {
+  name: string;
+  isListening: boolean;
+}
+
+interface Caster {
+  here: (callback: CallableFunction) => this;
+  joining: (callback: CallableFunction) => this;
+  whisper: (eventName: string, data: Record<any, any>) => this;
+  leaving: (callback: CallableFunction) => this;
+}
+
+const state = {
+  listeners: ref<Listener[]>([]),
+  echo: null as Echo<'pusher'> | null,
+  key: null as string | null,
+  authorizer: null as ((channel: Channel) => Authorizer) | null,
+  emitter: mitt(),
+  casters: ref<Caster[]>([]),
+};
+
+export function getOrCreateListener(listerName = 'unique'): Listener {
+  if (!state.listeners.value.some(listener => listener.name === listerName)) {
+    state.listeners.value?.push({
+      name: listerName,
+      // @ts-expect-error refs unwrapped
+      isListening: ref<boolean>(false),
+    });
+  }
+
+  // @ts-expect-error find always return a listener
+  return state.listeners.value.find(listener => listener.name === listerName);
+}
+
+export function registerEcho(key: string, authorizer: (channel: Channel) => Authorizer): void {
+  state.echo = new Echo({
+    broadcaster: 'pusher',
+    client: ConnectionManager,
+    key,
+    authorizer,
+    cluster: 'eu',
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    forceTLS: true,
+    encrypted: true,
+  });
+}
+
+export function useEcho(listenerName: string | null = null) {
+  const listener: Listener = getOrCreateListener(listenerName ?? undefined);
+
+  function join(channel: string): Caster {
+    if (state.echo === null) {
+      throw new Error('Echo is not initialized');
+    }
+
+    state.casters[channel] = state.echo.join(channel);
+
+    return state.casters[channel] as Caster;
+  }
+
+  function whisper<T = unknown>(event: string, data: T, channel?: string): void {
+    if (state.echo === null) {
+      throw new Error('Echo is not initialized');
+    }
+
+    const channelName = channel ?? Object.keys(state.casters)[0];
+
+    state.casters[channelName]?.whisper?.(event, data);
+  }
+
+  function listen<T = unknown>(event: string, callback: (data: T) => void, channel?: string): void {
+    if (state.echo === null) {
+      throw new Error('Echo is not initialized');
+    }
+
+    const channelName = channel ?? Object.keys(state.casters)[0];
+
+    if (typeof state.casters[channelName]?.listenForWhisper === 'function') {
+      state.casters[channelName]?.listenForWhisper?.(event, callback);
+
+      return;
+    }
+
+    throw new Error(`Nothing to whisper to on this channel ${event}-${channelName}`);
+  }
+
+  function leave(channel: string): void {
+    if (state.echo === null) {
+      throw new Error('Echo is not initialized');
+    }
+
+    state.echo.leave(channel);
+
+    delete state.casters[channel];
+  }
+
+  function on(channel: string, event: string, handler: (data: any) => unknown, privateChannel = true, unique = false): void {
+    if (state.echo === null) {
+      throw new Error('Echo is not initialized');
+    }
+
+    const channelEventKey = `${channel}.${event}`;
+    const isSubscribed = state.emitter.all.has(channelEventKey);
+
+    if (listener) {
+      listener.isListening = true;
+    }
+
+    if (isSubscribed && unique) {
+      return;
+    }
+
+    if (!isSubscribed) {
+      const channelConnection = privateChannel
+        ? state.echo.private(channel)
+        : state.echo.channel(channel);
+
+      channelConnection.listen(`.${event}`, (data: any) => {
+        state.emitter.emit(channelEventKey, data);
+      });
+    }
+
+    state.emitter.on(channelEventKey, async (data: any) => {
+      const closeOnCompletion = await handler(data) ?? false;
+
+      if (listener) {
+        listener.isListening = false;
+      }
+
+      if (closeOnCompletion) {
+        off(channel, event);
+      }
+    });
+  }
+
+  function off(channel: string, event: string): void {
+    if (state.echo === null) {
+      throw new Error('Echo is not initialized');
+    }
+
+    state.emitter.off(`${channel}.${event}`);
+    state.emitter.all.delete(`${channel}.${event}`);
+
+    state.echo.leave(channel);
+
+    listener.isListening = false;
+  }
+
+  return {
+    on,
+    off,
+    join,
+    leave,
+    whisper,
+    listen,
+    listener,
+    state,
+  };
+}

package/src/modules/composables/useError/__tests__/index.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect, beforeAll, vi } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import { useError } from '../index';
+import ResizeObserverMock from '~/tests/mocks/resize-observer';
+
+describe('the useError composables', () => {
+  const error = useError();
+  beforeAll(() => {
+    global.ResizeObserver = ResizeObserverMock;
+
+    window.scrollTo = vi.fn();
+  });
+
+  it('create a div, append this to the body and destroys on unmount', async () => {
+    error.open({ title: 'title' });
+
+    await flushPromises();
+
+    let documentModalHolder = document.querySelector('[data-test-error-dialog]');
+
+    expect(documentModalHolder).not.toBeNull();
+
+    error.close();
+
+    documentModalHolder = document.querySelector('[data-test-error-dialog]');
+
+    expect(documentModalHolder).toBeNull();
+  });
+});

package/src/modules/composables/useError/index.ts

@@ -0,0 +1,61 @@
+import { createApp, ref } from 'vue';
+import { AppError } from '~components';
+
+import type { App } from 'vue';
+import type { ErrorInstance, ErrorProps } from '~components/AppError/index.d';
+
+const state = {
+  instances: ref<ErrorInstance[]>([]),
+};
+
+function closeError(confirmInstance: ErrorInstance): void {
+  confirmInstance?.instance?.unmount();
+  confirmInstance?.element?.remove();
+}
+
+export function useError() {
+  async function open(options: ErrorProps): Promise<unknown> {
+    window.scrollTo(0, 0);
+
+    const errorRootElement = document.createElement('div');
+    document.body.append(errorRootElement);
+
+    let errorInstance = null as null | App;
+
+    return new Promise(resolve => {
+      errorInstance = createApp(AppError, {
+        ...options,
+
+        onClose: resolve,
+      });
+
+      errorInstance.mount(errorRootElement);
+
+      state.instances.value.push({
+        instance: errorInstance,
+        element: errorRootElement,
+      });
+    }).finally(() => {
+      if (errorInstance) {
+        setTimeout(() => {
+          closeError({
+            instance: errorInstance,
+            element: errorRootElement,
+          });
+        }, 500);
+      }
+    });
+  }
+
+  async function close(): Promise<void> {
+    state.instances.value.forEach(instance => closeError(instance));
+
+    return Promise.resolve();
+  }
+
+  return {
+    ...state,
+    open,
+    close,
+  };
+}

package/src/modules/composables/useGoogleApi/__tests__/index.spec.ts

@@ -0,0 +1,39 @@
+import {
+  describe,
+  it,
+  expect,
+  vi,
+} from 'vitest';
+import { useGoogleApi } from '../index';
+
+const apiLoaderMock = vi.fn();
+
+vi.mock('@googlemaps/js-api-loader', () => ({
+  Loader: class {
+    private readonly options: unknown = null;
+    private constructor(options: unknown) {
+      this.options = options;
+    }
+
+    public async load(): Promise<unknown> {
+      apiLoaderMock(this.options);
+
+      return Promise.resolve(this.options);
+    }
+  },
+}));
+
+describe('the useGoogleApi composables', () => {
+  const googleApi = useGoogleApi();
+
+  it('loads google api', async () => {
+    expect(googleApi.loaded.value).toBe(false);
+    expect(apiLoaderMock).toHaveBeenCalledTimes(0);
+
+    await googleApi.load('apikey');
+
+    expect(apiLoaderMock).toHaveBeenCalledTimes(1);
+    expect(apiLoaderMock).toHaveBeenCalledWith({ apiKey: 'apikey', version: 'weekly' });
+    expect(googleApi.loaded.value).toBe(true);
+  });
+});

package/src/modules/composables/useGoogleApi/index.ts

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+import { Loader } from '@googlemaps/js-api-loader';
+
+const state = {
+  loaded: ref<boolean>(false),
+};
+
+export function useGoogleApi() {
+  async function load(apiKey: string): Promise<void> {
+    if (!state.loaded) {
+      return;
+    }
+
+    await new Loader({
+      apiKey,
+      version: 'weekly',
+    }).load();
+
+    state.loaded.value = true;
+  }
+
+  return {
+    ...state,
+    load,
+  };
+}

package/src/modules/composables/useLayout/__tests__/index.spec.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { useLayout } from '../index';
+
+describe('the useLayout composables', () => {
+  const layout = useLayout();
+
+  it('can set layout image', () => {
+    expect(layout.layoutImage.value).toBeNull();
+
+    layout.setLayoutImage('/images/layout.png');
+
+    expect(layout.layoutImage.value).toBe('/images/layout.png');
+  });
+
+  it('can set primary colors', () => {
+    expect(layout.colors.primaryColor.value).toBe('#47A6DC');
+    expect(layout.colors.primaryColorActive.value).toBe('#3094CD');
+
+    layout.setPrimaryColors('primary', 'primary-active');
+
+    expect(layout.colors.primaryColor.value).toBe('primary');
+    expect(layout.colors.primaryColorActive.value).toBe('primary-active');
+  });
+
+  it('can set secondary colors', () => {
+    expect(layout.colors.secondaryColor.value).toBe('#27272A');
+    expect(layout.colors.secondaryColorActive.value).toBe('#202023');
+
+    layout.setSecondaryColors('secondary', 'secondary-active');
+
+    expect(layout.colors.secondaryColor.value).toBe('secondary');
+    expect(layout.colors.secondaryColorActive.value).toBe('secondary-active');
+  });
+});

package/src/modules/composables/useLayout/index.d.ts

@@ -0,0 +1 @@
+export type LayoutImage = string | null;

package/src/modules/composables/useLayout/index.ts

@@ -0,0 +1,68 @@
+import { ref } from 'vue';
+
+import type { LayoutImage } from './index.d';
+
+function componentToHex(colorPart: number): string {
+  const hex = colorPart.toString(16);
+
+  return hex.length === 1 ? `0${hex}` : hex;
+}
+
+export function rgb2Hex(rgb: number[]): string {
+  return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`;
+}
+
+export function hex2rgb(hex: string, asString: boolean): string;
+export function hex2rgb(hex: string): number[];
+export function hex2rgb(hex: string, asString = false): number[] | string {
+  const red = parseInt(hex.slice(1, 3), 16);
+  const green = parseInt(hex.slice(3, 5), 16);
+  const blue = parseInt(hex.slice(5, 7), 16);
+
+  if (asString) {
+    return `${red} ${green} ${blue}`;
+  }
+
+  return [red, green, blue];
+}
+
+const state = {
+  layoutImage: ref<LayoutImage>(null),
+  colors: {
+    primaryColor: ref<string>('#47A6DC'),
+    primaryColorActive: ref<string>('#3094CD'),
+    secondaryColor: ref<string>('#27272A'),
+    secondaryColorActive: ref<string>('#202023'),
+  },
+};
+
+export function useLayout() {
+  function setLayoutImage(image: LayoutImage): void {
+    state.layoutImage.value = image;
+  }
+
+  function setPrimaryColors(color: string, colorActive: string): void {
+    state.colors.primaryColor.value = color;
+    state.colors.primaryColorActive.value = colorActive;
+
+    document.documentElement.style.setProperty('--color-primary', `rgb(${hex2rgb(color, true)})`);
+    document.documentElement.style.setProperty('--color-primary-active', `rgb(${hex2rgb(colorActive, true)})`);
+  }
+
+  function setSecondaryColors(color: string, colorActive: string): void {
+    state.colors.secondaryColor.value = color;
+    state.colors.secondaryColorActive.value = colorActive;
+
+    document.documentElement.style.setProperty('--color-secondary', `rgb(${hex2rgb(color, true)})`);
+    document.documentElement.style.setProperty('--color-secondary-active', `rgb(${hex2rgb(colorActive, true)})`);
+  }
+
+  return {
+    ...state,
+    setLayoutImage,
+    setPrimaryColors,
+    setSecondaryColors,
+  };
+}
+
+export type { LayoutImage };

package/src/modules/composables/useModal/__tests__/index.spec.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect, beforeAll, vi } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import { useModal } from '../index';
+import ResizeObserverMock from '~/tests/mocks/resize-observer';
+
+describe('the useModal composables', () => {
+  const modal = useModal('content');
+
+  beforeAll(() => {
+    global.ResizeObserver = ResizeObserverMock;
+
+    window.scrollTo = vi.fn();
+  });
+
+  it('create a div, append this to the body and destroys on unmount', async () => {
+    expect.assertions(2);
+
+    modal.open({ title: 'title' });
+
+    await flushPromises();
+
+    let documentModalHolder = document.querySelector('[data-test-modal-dialog]');
+
+    expect(documentModalHolder).not.toBeNull();
+
+    modal.close();
+
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    documentModalHolder = document.querySelector('[data-test-modal-dialog]');
+
+    expect(documentModalHolder).toBeNull();
+  });
+});

package/src/modules/composables/useModal/index.ts

@@ -0,0 +1,97 @@
+import { createApp, inject, isRef, ref } from 'vue';
+import { AppModal } from '~components';
+
+import type { App, Component, MaybeRef } from 'vue';
+import type { ModalInstance, ModalProps } from '~components/AppModal/index.d';
+
+const state = {
+  instances: ref<ModalInstance[]>([]),
+};
+
+function closeModal(modalInstance: ModalInstance): void {
+  modalInstance?.instance?.unmount();
+  modalInstance?.element?.remove();
+}
+
+export function useModal(component: MaybeRef<Component | string>, options?: ModalProps) {
+  const instance = ref<ModalInstance>();
+  const plugins = inject<Plugin[]>('plugins');
+
+  async function open(openOptions: ModalProps): Promise<unknown> {
+    if (options) {
+      options.content = component;
+    }
+
+    window.scrollTo(0, 0);
+
+    const modalRootElement = document.createElement('div');
+    document.body.append(modalRootElement);
+
+    let modalInstance = null as null | App;
+    let modalRef = null as null | typeof AppModal;
+
+    return new Promise(resolve => {
+      if (isRef(component)) {
+        modalRef = component.value as typeof AppModal;
+      } else {
+        modalInstance = createApp(AppModal, {
+          ...options,
+
+          ...openOptions,
+
+          onClose: (data: unknown) => {
+            options?.onClose?.();
+
+            resolve(data);
+          },
+        });
+
+        plugins?.forEach(plugin => {
+          // @ts-expect-error plugin not typed correctly
+          modalInstance?.use(plugin);
+        });
+
+        modalRef = modalInstance.mount(modalRootElement) as unknown as typeof AppModal;
+      }
+
+      modalRef.open();
+
+      instance.value = {
+        ref: modalRef,
+        instance: modalInstance,
+        element: modalRootElement,
+      };
+
+      state.instances.value.push(instance.value);
+    }).finally(() => {
+      if (modalInstance) {
+        setTimeout(() => {
+          closeModal({
+            ref: modalRef,
+            instance: modalInstance,
+            element: modalRootElement,
+          });
+        }, 500);
+      }
+    });
+  }
+
+  async function close(): Promise<void> {
+    instance.value?.ref.close();
+
+    setTimeout(() => {
+      if (instance.value) {
+        closeModal(instance.value);
+      }
+    }, 300);
+
+    return Promise.resolve();
+  }
+
+  return {
+    ...state,
+    instance,
+    open,
+    close,
+  };
+}

package/src/modules/composables/useNavigation/__mocks__/navigation.ts

@@ -0,0 +1,22 @@
+import { HomeIcon } from '@heroicons/vue/24/outline';
+
+import type { NavigationItem } from '../index.d';
+
+export const navigationItem: NavigationItem = {
+  name: 'Home',
+  to: {
+    name: 'index',
+    // eslint-disable-next-line unicorn/prevent-abbreviations
+    params: {},
+    matched: [],
+    query: {},
+    fullPath: '',
+    hash: '',
+    redirectedFrom: undefined,
+    meta: {},
+    path: '',
+  },
+  href: '/href',
+  icon: HomeIcon,
+  active: true,
+};

package/src/modules/composables/useNavigation/__tests__/index.spec.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest';
+import { RouterLinkStub } from '@vue/test-utils';
+import { useNavigation } from '../index';
+import { navigationItem as navigationItemMock } from '../__mocks__/navigation';
+
+describe('the useNavigation composables', () => {
+  const navigation = useNavigation();
+
+  it('can set navigation items', () => {
+    expect(navigation.navigationItems.value).toHaveLength(0);
+
+    navigation.setNavigationItems([
+      navigationItemMock,
+      navigationItemMock,
+    ]);
+
+    expect(navigation.navigationItems.value).toHaveLength(2);
+  });
+
+  it('can set navigation component', () => {
+    expect(navigation.navigationComponent.value).toBe('a');
+
+    navigation.setNavigationComponent(RouterLinkStub);
+
+    expect(navigation.navigationComponent.value).toBe(RouterLinkStub);
+  });
+
+  it('can set logo', () => {
+    expect(navigation.logo.value).toBeNull();
+
+    navigation.setLogo('logo.png');
+
+    expect(navigation.logo.value).toBe('logo.png');
+  });
+
+  it('can open, close and toggle main menu', () => {
+    expect(navigation.mainMenuOpen.value).toBe(false);
+
+    navigation.openMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(true);
+
+    navigation.closeMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(false);
+
+    navigation.toggleMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(true);
+
+    navigation.toggleMainMenu();
+
+    expect(navigation.mainMenuOpen.value).toBe(false);
+  });
+
+  it('can open,close and toggle mobile menu', () => {
+    expect(navigation.mobileMenuOpen.value).toBe(false);
+
+    navigation.openMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(true);
+
+    navigation.closeMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(false);
+
+    navigation.toggleMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(true);
+
+    navigation.toggleMobileMenu();
+
+    expect(navigation.mobileMenuOpen.value).toBe(false);
+  });
+
+  it('should export the state', () => {
+    const states = [
+      'navigationItems',
+      'mainMenuOpen',
+      'mobileMenuOpen',
+      'navigationComponent',
+      'logo',
+      'contactRoute',
+    ];
+
+    expect(states.every(state => Object.keys(navigation).includes(state))).toBe(true);
+  });
+});

package/src/modules/composables/useNavigation/index.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'vue';
+import type { RouteLocationNormalized } from 'vue-router';
+
+export interface NavigationItem {
+  name: string;
+  icon: string | Component;
+  to?: RouteLocationNormalized | string;
+  href?: string;
+  active?: boolean;
+  rounded?: boolean;
+  bottom?: boolean;
+  visible?: boolean;
+  onClick?: () => unknown;
+  linkClasses?: string;
+}
+
+export type Logo = string | Component;