@autoafleveren/ui 1.3.2 → 1.3.3

package/src/stories/components/DropdownButton/DropdownButton.stories.ts

@@ -0,0 +1,121 @@
+import { TrashIcon } from '~icons';
+import { AppDropdownButton } from '../../../modules/components';
+
+import type { Component } from 'vue';
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import type { DropdownItem } from '~/modules/components/AppDropdownButton/index.d';
+
+const colorTypeOptions = ['primary', 'secondary', 'plain'];
+const typeOptions = ['button', 'reset', 'submit'];
+const sizeOptions = ['small', 'medium', 'large'];
+const dropdownItems: DropdownItem[] = [
+  {
+    label: 'Item 1',
+  },
+  {
+    label: 'Item 2',
+    icon: TrashIcon,
+    iconClasses: 'text-red-500',
+  },
+  {
+    label: 'Item 3',
+    icon: TrashIcon,
+    name: 'slot',
+  },
+  {
+    label: 'Item 4',
+    icon: TrashIcon,
+    disabled: true,
+  },
+];
+
+const meta: Meta = {
+  title: 'Form/DropdownButton',
+  component: AppDropdownButton,
+  argTypes: {
+    colorType: {
+      control: { type: 'select' },
+      options: colorTypeOptions,
+    },
+    type: {
+      control: { type: 'select' },
+      options: typeOptions,
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizeOptions,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const createTemplate = (
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  props: Record<string, unknown[]>,
+  slots?: Record<'leadingIcon' | 'trailingIcon', Component>,
+): StoryFn<typeof AppDropdownButton> => {
+  return bindArguments => ({
+    components: {
+      AppDropdownButton,
+    },
+
+    setup(): unknown {
+      return { bindArguments, props, slots, dropdownItems };
+    },
+
+    template: `
+      <div
+        v-for="(values, key) in props"
+        class="flex items-start gap-3"
+      >
+        <AppDropdownButton
+          v-for="(value, index) in values"
+          v-bind="{ ...bindArguments, [key]: value, dropdownItems }"
+          class="capitalize"
+        >
+          <template
+            v-if="index % 2 === 0 && slots?.leadingIcon"
+            #leadingIcon
+          >
+            <Component :is="slots?.leadingIcon" />
+          </template>
+
+          {{ value }}
+
+          <template
+            v-if="index % 2 === 1 && slots?.trailingIcon"
+            #trailingIcon
+          >
+            <Component :is="slots?.trailingIcon" />
+          </template>
+        </AppDropdownButton>
+      </div>
+    `,
+  });
+};
+
+export const sizes = createTemplate({
+  size: sizeOptions,
+}).bind({});
+
+sizes.args = {
+  type: 'button',
+  colorType: 'primary',
+  disabled: false,
+  loading: false,
+};
+
+export const colorTypes = createTemplate({
+  colorType: colorTypeOptions,
+}).bind({});
+
+colorTypes.args = {
+  type: 'button',
+  size: 'medium',
+  disabled: false,
+  loading: false,
+};
+
+export default meta;

package/src/stories/components/Error/Error.stories.ts

@@ -0,0 +1,106 @@
+import { computed } from 'vue';
+import { PartyPopperIcon } from '~icons';
+import { AppButton } from '~components';
+import { useError } from '~composables';
+import AppError from '~components/AppError/AppError.vue';
+import { types } from '~components/AppError';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Error',
+  component: AppError,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: types,
+    },
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Alert description',
+    },
+    content: {
+      control: { type: 'text' },
+      defaultValue: 'Alert description',
+    },
+    confirmButtonText: {
+      control: { type: 'text' },
+      defaultValue: 'Confirm',
+    },
+    cancelButtonText: {
+      control: { type: 'text' },
+      defaultValue: 'Cancel',
+    },
+    html: {
+      control: { type: 'boolean' },
+    },
+    withBackdrop: {
+      control: { type: 'boolean' },
+    },
+    preventBackdropClose: {
+      control: { type: 'boolean' },
+    },
+    icon: {
+      control: 'select',
+      options: ['default', 'custom'],
+    },
+    extendedIconDomClasses: {
+      control: { type: 'text' },
+      defaultValue: '',
+    },
+  },
+};
+
+const errorComposable = useError();
+const template: StoryFn<typeof AppError> = args => ({
+  components: {
+    AppButton,
+    AppError,
+  },
+
+  setup(): unknown {
+    const icon = computed(() => {
+      return args.icon === 'custom' ? PartyPopperIcon : undefined;
+    });
+
+    async function openError(): Promise<void> {
+      await errorComposable.open({ ...args, icon });
+    }
+
+    return {
+      args,
+      types,
+      icon,
+      openError,
+    };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppButton @click="openError">
+        Open error
+      </AppButton>
+
+      <AppError
+        v-bind="args"
+        :icon="icon"
+      />
+    </div>
+  `,
+});
+
+export const error = template.bind({});
+error.args = {
+  type: 'success',
+  title: 'Example title',
+  content: 'Example alert description',
+  confirmButtonText: 'Confirm',
+  cancelButtonText: 'Cancel',
+  preventBackdropClose: true,
+  withBackdrop: true,
+  html: false,
+  icon: 'default',
+  extendedIconDomClasses: '',
+};
+
+export default meta;

package/src/stories/components/ImageDropzone/ImageDropzone.stories.ts

@@ -0,0 +1,41 @@
+import { AppImageDropzone } from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/ImageDropzone',
+  component: AppImageDropzone,
+  argTypes: {
+    description: {
+      control: { type: 'text' },
+      defaultValue: 'of selecteer een afbeelding van je computer (jpg, jpeg of png).',
+    },
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Drag & drop',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+  },
+};
+
+const template: StoryFn<typeof AppImageDropzone> = args => ({
+  components: {
+    AppImageDropzone,
+  },
+
+  setup(): unknown {
+    return {
+      args,
+    };
+  },
+
+  template: '<AppImageDropzone v-bind="args" />',
+});
+
+export const logo = template.bind({});
+logo.args = {};
+
+export default meta;

package/src/stories/components/Input/Input.stories.ts

@@ -0,0 +1,180 @@
+import { computed, ref } from 'vue';
+import { CalendarIcon } from '~/modules/icons';
+import { AppInput } from '~/modules/components';
+import { inputTypes } from '~components/AppInput';
+import { isChoiceInputCheck } from '~components/AppInput/choice';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/Input',
+  // @ts-expect-error doesn't work with generic components yet
+  component: AppInput,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: inputTypes,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    plain: {
+      control: { type: 'boolean' },
+    },
+    readonly: {
+      control: { type: 'boolean' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    hasError: {
+      control: { type: 'boolean' },
+    },
+    errorMessage: {
+      control: { type: 'text' },
+    },
+    modelValue: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const choiceOptions = ['Developer', 'Designer', 'Product owner'] as const;
+const radioModelValue = ref<(typeof choiceOptions)[number]>(choiceOptions[0]);
+const checkboxModelValue = ref<Array<(typeof choiceOptions)[number]>>([
+  choiceOptions[0],
+]);
+const dateTimeModelValue = ref<Date>();
+
+const template: StoryFn<typeof AppInput> = args => ({
+  components: {
+    AppInput,
+    CalendarIcon,
+  },
+
+  setup(): unknown {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const isChoiceInput = computed(() => isChoiceInputCheck(args.type));
+
+    return {
+      args,
+      isChoiceInput,
+      radioModelValue,
+      checkboxModelValue,
+    };
+  },
+
+  template: `
+    <form @submit.prevent>
+      <legend
+        v-if="isChoiceInput"
+        class="mb-2"
+      >
+        Selected role{{ args.type === 'checkbox' ? 's' : '' }}:
+        {{ args.type === 'checkbox' ? checkboxModelValue : radioModelValue }}
+      </legend>
+
+      <Component
+        :is="isChoiceInput ? 'fieldset' : 'div'"
+        :class="{
+          'space-x-4': isChoiceInput,
+          'flex-col space-y-5': !isChoiceInput,
+        }"
+        class="flex"
+      >
+        <AppInput
+          v-for="(role, index) in ['Developer', 'Designer', 'Product owner']"
+          :key="'input-' + index"
+          :value="isChoiceInput ? role : undefined"
+          v-bind="args"
+        >
+          <template v-if="isChoiceInput">
+            {{ role }}
+          </template>
+
+          <template
+            v-if="!isChoiceInput"
+            #label
+          >
+            Input {{ index + 1 }}
+          </template>
+
+          <template
+            v-if="index === 1"
+            #leadingIcon
+          >
+            <CalendarIcon />
+          </template>
+
+          <template
+            v-if="index === 2"
+            #trailingIcon
+          >
+            <CalendarIcon />
+          </template>
+        </AppInput>
+      </Component>
+    </form>
+  `,
+});
+
+export const text = template.bind({});
+text.args = {
+  type: 'text',
+  disabled: false,
+  readonly: false,
+  loading: false,
+  required: false,
+  hasError: false,
+  plain: false,
+  modelValue: '',
+  errorMessage: '',
+};
+
+export const radio = template.bind({});
+radio.args = {
+  type: 'radio',
+  disabled: false,
+  required: false,
+  hasError: false,
+  plain: false,
+  modelValue: radioModelValue,
+  // @ts-expect-error doesn't work with generic components yet
+  'onUpdate:modelValue': (choice: (typeof choiceOptions)[number]): void => {
+    radioModelValue.value = choice;
+  },
+};
+
+export const checkbox = template.bind({});
+checkbox.args = {
+  type: 'checkbox',
+  disabled: false,
+  required: false,
+  hasError: false,
+  modelValue: checkboxModelValue,
+  // @ts-expect-error doesn't work with generic components yet
+  'onUpdate:modelValue': (
+    choice: Array<(typeof choiceOptions)[number]>,
+  ): void => {
+    checkboxModelValue.value = choice;
+  },
+};
+
+export const datetime = template.bind({});
+datetime.args = {
+  type: 'datetime',
+  disabled: false,
+  required: false,
+  hasError: false,
+  plain: false,
+  modelValue: dateTimeModelValue,
+  // @ts-expect-error doesn't work with generic components yet
+  'onUpdate:modelValue': (value: Date): void => {
+    dateTimeModelValue.value = value;
+  },
+};
+
+export default meta;

package/src/stories/components/Input/LocationInput.stories.ts

@@ -0,0 +1,77 @@
+import { ref } from 'vue';
+import { AppInput } from '~/modules/components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import type { LocationModelValue } from '~components/AppInput/index.d';
+
+const meta: Meta = {
+  title: 'Form/Input',
+  // @ts-expect-error doesn't work with generic components yet
+  component: AppInput,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['location'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    readonly: {
+      control: { type: 'boolean' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    hasError: {
+      control: { type: 'boolean' },
+    },
+    errorMessage: {
+      control: { type: 'text' },
+    },
+    modelValue: {
+      control: { type: 'text' },
+    },
+  },
+};
+
+const locationModelValue = ref<LocationModelValue>();
+
+const template: StoryFn<typeof AppInput> = args => ({
+  components: {
+    AppInput,
+  },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <form @submit.prevent>
+      <div class="flex flex-col space-y-5">
+        <AppInput v-bind="args">
+          <template #label>
+            Location
+          </template>
+        </AppInput>
+      </div>
+    </form>
+  `,
+});
+
+export const location = template.bind({});
+location.args = {
+  type: 'location',
+  disabled: false,
+  required: false,
+  hasError: false,
+  modelValue: locationModelValue,
+  // @ts-expect-error doesn't work with generic components yet
+  'onUpdate:modelValue': (value: LocationModelValue): void => {
+    locationModelValue.value = value;
+  },
+};
+
+export default meta;

package/src/stories/components/LicensePlate/LicensePlate.stories.ts

@@ -0,0 +1,39 @@
+import { AppLicensePlate } from '../../../modules/components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Other/Car',
+  component: AppLicensePlate,
+  argTypes: {
+    license: {
+      control: { type: 'text' },
+      defaultValue: '7-SNZ-01',
+    },
+    country: {
+      control: { type: 'select' },
+      options: ['NL'],
+    },
+  },
+};
+
+const template: StoryFn<typeof AppLicensePlate> = args => ({
+  components: {
+    AppLicensePlate,
+  },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <AppLicensePlate :license="args.license"  />
+  `,
+});
+
+export const licensePlate = template.bind({});
+licensePlate.args = {
+  license: '7-SNZ-01',
+};
+
+export default meta;

package/src/stories/components/Maps/Maps.stories.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { AppLoader, AppMaps } from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Maps',
+  component: AppMaps,
+};
+
+const template: StoryFn<typeof AppMaps> = args => ({
+  components: {
+    AppMaps,
+    AppLoader,
+  },
+
+  setup(): unknown {
+    const isLoading = ref(true);
+
+    return { args, isLoading };
+  },
+
+  template: `
+    <AppLoader v-if="isLoading" />
+    <AppMaps v-else />
+  `,
+});
+
+export const maps = template.bind({});
+maps.args = {
+  disableUserInteraction: true,
+  mapCenterLatitude: 52.242_924_599_602_254,
+  mapCenterLongitude: 6.167_870_413_758_901_5,
+};
+
+export default meta;

package/src/stories/components/Menu/Menu.stories.ts

@@ -0,0 +1,41 @@
+import { defineComponent } from 'vue';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { vueRouter } from 'storybook-vue3-router';
+import AppMenu from '~components/AppMenu/AppMenu.vue';
+import { items } from '~components/AppMenu/__mocks__';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Menu',
+  component: AppMenu,
+  argTypes: {},
+};
+
+const template: StoryFn<typeof AppMenu> = args => ({
+  components: { AppMenu },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <AppMenu v-bind="args" />
+  `,
+});
+
+export const menu = template.bind({});
+menu.args = {
+  items: [...items, { ...items[1], visible: true, name: 'Second' }],
+};
+
+const routerPages = items.map(item => ({
+  // @ts-expect-error RouteLocationRaw name not found
+  path: `/${item.to?.name}`,
+  name: item.name,
+  component: defineComponent({ template: '<div>Dashboard</div>' }),
+}));
+
+menu.decorators = [vueRouter(routerPages)];
+
+export default meta;

package/src/stories/components/Modal/Modal.stories.ts

@@ -0,0 +1,68 @@
+import { AppButton } from '~components';
+import { useModal } from '~composables';
+import AppModal from '~components/AppModal/AppModal.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Modal',
+  component: AppModal,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Alert description',
+    },
+    content: {
+      control: { type: 'text' },
+      defaultValue: 'Modal description',
+    },
+    submitButtonText: {
+      control: { type: 'text' },
+      defaultValue: 'Submit',
+    },
+    cancelButtonText: {
+      control: { type: 'text' },
+      defaultValue: 'Cancel',
+    },
+    withBackdrop: {
+      control: { type: 'boolean' },
+    },
+    preventBackdropClose: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template: StoryFn<typeof AppModal> = args => ({
+  components: {
+    AppButton,
+    AppModal,
+  },
+
+  setup(): unknown {
+    // @ts-expect-error args not typed
+    const { open } = useModal(args.content as string, args);
+
+    return { args, open };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppButton @click="open">
+        Open modal
+      </AppButton>
+    </div>
+  `,
+});
+
+export const modal = template.bind({});
+modal.args = {
+  title: 'Example title',
+  content: 'Example modal description',
+  submitButtonText: 'Submit',
+  cancelButtonText: 'Cancel',
+  preventBackdropClose: true,
+  withBackdrop: true,
+};
+
+export default meta;