@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppError/__tests__/app-error.spec.ts

@@ -0,0 +1,366 @@
+import {
+  describe,
+  it,
+  expect,
+  vi,
+} from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import {
+  Dialog,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue';
+import Error from '../AppError.vue';
+import { AppButton } from '~components';
+import HeadlessUiTransitionRootStub from '~/tests/stubs/HeadlessUiTransitionRootStub';
+import HeadlessUiDialogStub from '~/tests/stubs/HeadlessUiDialogStub';
+import HeadlessUiTransitionChildStub from '~/tests/stubs/HeadlessUiTransitionChildStub';
+
+import type { ErrorProps } from '../index.d';
+
+function createWrapper(props: ErrorProps) {
+  return shallowMount(Error, {
+    props,
+    global: {
+      stubs: {
+        Dialog: HeadlessUiDialogStub,
+        TransitionRoot: HeadlessUiTransitionRootStub,
+        TransitionChild: HeadlessUiTransitionChildStub,
+      },
+    },
+  });
+}
+
+describe('generic AppError component', () => {
+  it('should display a confirm when title is set', () => {
+    const wrapper = createWrapper({ title: 'title' });
+
+    const transitionWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1];
+
+    expect(transitionWrapper.exists()).toBe(true);
+    expect(transitionWrapper.isVisible()).toBe(true);
+  });
+
+  it('should set the right title', () => {
+    const title = 'This is a test';
+
+    const wrapper = createWrapper({
+      title,
+      content: 'Bla',
+    });
+
+    const dialogTitleWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findComponent(DialogTitle);
+
+    expect(dialogTitleWrapper.text()).toStrictEqual(title);
+  });
+
+  it('should set the right content', () => {
+    const content = 'This is test content';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+    });
+
+    const dialogContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-error-content]');
+
+    expect(dialogContent.text()).toStrictEqual(content);
+  });
+
+  it('should render the content as text by default', () => {
+    const content = '<p>This is test content</p>';
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+    });
+
+    const dialogContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-error-content]');
+
+    expect(dialogContent.text()).toBe(content);
+  });
+
+  it('should render the content as html when html is enabled', () => {
+    const content = '<p>This is test content</p>';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+      html: true,
+    });
+
+    const dialogContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-error-content]');
+
+    expect(dialogContent.text()).toBe('This is test content');
+    expect(dialogContent.find('.app-error-html-content').find('p').exists()).toBe(true);
+    expect(dialogContent.find('.app-error-html-content').find('p').text()).toBe('This is test content');
+  });
+
+  it('should be able to set a custom text in confirm button', () => {
+    const confirmButtonText = 'huts';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText,
+      cancelButtonText: 'cancel button',
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    expect(confirmButton.exists()).toBe(true);
+    expect(confirmButton.text()).toStrictEqual(confirmButtonText);
+  });
+
+  it('should be able to set a custom text in cancel button', () => {
+    const cancelButtonText = 'huts';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm button',
+      cancelButtonText,
+    });
+
+    const cancelButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[1];
+
+    expect(cancelButton.exists()).toBe(true);
+    expect(cancelButton.text()).toStrictEqual(cancelButtonText);
+  });
+
+  it('should not have a default icon', () => {
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+    });
+
+    const appIconWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-error-icon]');
+
+    expect(appIconWrapper.exists()).toBe(false);
+  });
+
+  it('should have a default icon for type "success"', () => {
+    const wrapper = createWrapper({
+      type: 'success',
+      title: 'This is a test',
+      content: 'Bla',
+    });
+
+    const appIconWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-error-icon]');
+
+    expect(appIconWrapper.isVisible()).toBe(true);
+  });
+
+  it('should emit a close when confirm button is pressed', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm',
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await confirmButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(true);
+  });
+
+  it('should emit a close when cancel button is pressed', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      cancelButtonText: 'confirm',
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await confirmButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(false);
+  });
+
+  it('should process promise when onConfirm is function', async () => {
+    expect.assertions(3);
+
+    const onConfirm = vi.fn();
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm',
+      onConfirm,
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await confirmButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(true);
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('should process promise when onCancel is function', async () => {
+    expect.assertions(3);
+
+    const onCancel = vi.fn();
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      cancelButtonText: 'confirm',
+      onCancel,
+    });
+
+    const cancelButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await cancelButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(false);
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('should show spinner when confirming', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm',
+      cancelButtonText: 'confirm',
+    });
+
+    // @ts-expect-error setting data on wrapper works in this case but not according to Typescript
+    wrapper.vm.confirmLoading = true;
+    // @ts-expect-error setting data on wrapper works in this case but not according to Typescript
+    wrapper.vm.cancelLoading = true;
+
+    await flushPromises();
+
+    const buttons = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton);
+
+    expect(buttons[0].props('loading')).toBe(true);
+    expect(buttons[1].props('loading')).toBe(true);
+  });
+
+  it('should close confirm when backdrop is clicked and preventBackdropClose is "false"', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+      preventBackdropClose: false,
+    });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+
+    await flushPromises();
+
+    const closeConfirmEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeConfirmEmit).toBeDefined();
+    expect(closeConfirmEmit).toHaveLength(1);
+  });
+
+  it('should not close confirm when backdrop is clicked', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+    });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+
+    await flushPromises();
+
+    const closeConfirmEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeConfirmEmit).toBeUndefined();
+  });
+
+  it('shouldn\'t close confirm when backdrop is clicked with prevent prop', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+    });
+
+    await wrapper.setProps({ preventBackdropClose: true });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+    await flushPromises();
+
+    const closeConfirmEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeConfirmEmit).toBeUndefined();
+  });
+});

package/src/modules/components/AppError/index.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+
+export type Error = (options: ErrorProps) => Promise<void>;
+export type ErrorType = 'default' | 'success' | 'error';
+export type OnConfirm = () => unknown;
+export type OnCancel = () => unknown;
+
+export interface ErrorProps {
+  title: string;
+  type?: ErrorType;
+  content?: string;
+  confirmButtonText?: string;
+  confirmButtonTrailingIcon?: Component;
+  confirmButtonLeadingIcon?: Component;
+  cancelButtonText?: string;
+  cancelButtonTrailingIcon?: Component;
+  cancelButtonLeadingIcon?: Component;
+  withBackdrop?: boolean;
+  preventBackdropClose?: boolean;
+  icon?: string | Component;
+  html?: boolean;
+  extendedIconDomClasses?: string;
+  onConfirm?: OnConfirm;
+  onCancel?: OnCancel;
+}
+
+export interface ErrorInstance {
+  instance: App;
+  element: HTMLDivElement;
+}

package/src/modules/components/AppError/index.ts

@@ -0,0 +1 @@
+export const types = ['default', 'success', 'error'] as const;

package/src/modules/components/AppImageDropzone/AppImageDropzone.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+  import { ref, onMounted, watch } from 'vue';
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+  import { useDropZone } from '@vueuse/core';
+  import { byPrefixAndName } from '~icons';
+
+  import type { ImageDropzoneProps } from '.';
+
+  const props = withDefaults(defineProps<ImageDropzoneProps>(), {
+    title: 'Drag & drop',
+    description: 'of selecteer een afbeelding van je computer (jpg, jpeg of png).',
+    name: '',
+    disabled: false,
+    multiple: false,
+    dataTypes: () => ['image/png', 'image/gif', 'image/jpeg'],
+  });
+
+  const emit = defineEmits<{ (event: 'update:modelValue', value: File | null): void }>();
+
+  const file = ref<File | null>(null);
+  const preview = ref<string | null>(null);
+  const fileInput = ref<HTMLElement>();
+  const dropZoneRef = ref<HTMLDivElement>();
+  const { isOverDropZone } = useDropZone(dropZoneRef, { onDrop, dataTypes: props.dataTypes });
+
+  watch(file, newFile => {
+    emit('update:modelValue', newFile);
+  });
+
+  onMounted(() => {
+    if (props.existingFileUrl) {
+      preview.value = props.existingFileUrl;
+
+      file.value = new File([], props.existingFileUrl.split('/').pop() ?? '');
+    }
+  });
+
+  function onDrop(files: File[] | null): void {
+    if (files && !props.disabled) {
+      const droppedFile = files[0];
+
+      file.value = droppedFile;
+      preview.value = URL.createObjectURL(droppedFile);
+    }
+  }
+
+  function handleFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const selectedFile = input.files?.[0];
+
+    if (selectedFile && props.dataTypes.includes(selectedFile.type)) {
+      file.value = selectedFile;
+      preview.value = URL.createObjectURL(selectedFile);
+    }
+  }
+
+  function removeImage(): void {
+    file.value = null;
+    preview.value = null;
+    (fileInput.value as HTMLInputElement).value = '';
+  }
+
+  function handleClick(): void {
+    fileInput.value?.click();
+  }
+</script>
+
+<template>
+  <div
+    ref="dropZoneRef"
+    :class="{ 'cursor-pointer': !disabled, 'cursor-not-allowed': disabled, 'bg-zinc-700': isOverDropZone }"
+    class="group relative flex size-60 items-center justify-center rounded-2xl bg-secondary text-center drop-shadow-card"
+    @click="handleClick"
+  >
+    <input
+      ref="fileInput"
+      :disabled="disabled"
+      :accept="dataTypes.join(', ')"
+      :name="name"
+      type="file"
+      class="hidden"
+      @change="handleFileChange"
+    >
+
+    <div
+      v-if="!file"
+      class="flex flex-col items-center px-6 py-10 text-white"
+    >
+      <FontAwesomeIcon
+        :icon="byPrefixAndName.far?.['arrow-up-to-line']"
+        class="size-10"
+      />
+
+      <h3 class="mb-2 mt-4 text-xl font-bold">
+        {{ title }}
+      </h3>
+
+      <p class="text-sm">
+        {{ description }}
+      </p>
+    </div>
+
+    <img
+      v-if="preview"
+      :src="preview"
+      alt="Preview"
+      class="size-full rounded-2xl object-cover"
+    >
+
+    <span
+      v-if="file && !disabled"
+      class="absolute inset-0 hidden size-full flex-col items-center justify-center rounded-2xl bg-secondary p-1 text-white
+        group-hover:flex"
+      @click.stop="removeImage"
+    >
+      <FontAwesomeIcon
+        :icon="byPrefixAndName.far?.trash"
+        class="size-10"
+      />
+
+      <h3 class="mb-2 mt-4 text-xl font-bold">
+        Verwijderen
+      </h3>
+
+      <p class="text-sm">
+        Klik hier om de afbeelding te verwijderen
+      </p>
+    </span>
+  </div>
+</template>

package/src/modules/components/AppImageDropzone/__tests__/app-image-dropzone.spec.ts

@@ -0,0 +1,92 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
+import { AppImageDropzone } from '~components';
+
+describe('the AppImageDropzone component', () => {
+  let originalCreateObjectUrl: typeof URL.createObjectURL;
+
+  beforeAll(() => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    originalCreateObjectUrl = URL.createObjectURL;
+    URL.createObjectURL = vi.fn(() => 'blob:http://localhost:8080/12345').bind(URL);
+  });
+
+  afterAll(() => {
+    URL.createObjectURL = originalCreateObjectUrl;
+  });
+
+  it('renders the component', () => {
+    const wrapper = shallowMount(AppImageDropzone);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('emits update:modelValue when file changes', async () => {
+    expect.assertions(3);
+
+    const wrapper = shallowMount(AppImageDropzone);
+    const file = new File([''], 'test.png', { type: 'image/png' });
+    const inputElement = wrapper.find('input[type="file"]').element as HTMLInputElement;
+
+    Object.defineProperty(inputElement, 'files', {
+      value: [file],
+      writable: false,
+    });
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    await wrapper.find('input').trigger('change');
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(wrapper.emitted('update:modelValue')?.[0]).toStrictEqual([file]);
+  });
+
+  it('displays the preview image when file is set', async () => {
+    expect.assertions(3);
+
+    const wrapper = shallowMount(AppImageDropzone);
+
+    const file = new File([''], 'test.png', { type: 'image/png' });
+    const inputElement = wrapper.find('input').element as HTMLInputElement;
+
+    Object.defineProperty(inputElement, 'files', {
+      value: [file],
+      writable: false,
+    });
+
+    expect(wrapper.find('img').exists()).toBe(false);
+
+    await wrapper.find('input').trigger('change');
+    await wrapper.vm.$nextTick();
+
+    const img = wrapper.find('img');
+
+    expect(img.exists()).toBe(true);
+    expect(img.attributes('src')).toContain('blob:');
+  });
+
+  it('removes the image when remove button is clicked', async () => {
+    expect.assertions(3);
+
+    const wrapper = shallowMount(AppImageDropzone);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const wrapperVm = wrapper.vm as unknown as typeof AppImageDropzone;
+    const file = new File([''], 'test.png', { type: 'image/png' });
+    const inputElement = wrapper.find('input[type="file"]').element as HTMLInputElement;
+
+    Object.defineProperty(inputElement, 'files', {
+      value: [file],
+      writable: false,
+    });
+
+    await wrapper.find('input').trigger('change');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('img').exists()).toBe(true);
+
+    const removeButton = wrapper.find('span');
+    await removeButton.trigger('click');
+
+    expect(wrapperVm.file).toBeNull();
+    expect(wrapper.find('img').exists()).toBe(false);
+  });
+});

package/src/modules/components/AppImageDropzone/index.d.ts

@@ -0,0 +1,8 @@
+export interface ImageDropzoneProps {
+  title?: string;
+  description?: string;
+  disabled?: boolean;
+  existingFileUrl?: string;
+  dataTypes?: string[];
+  name?: string;
+}