@autoafleveren/ui 1.3.2 → 1.3.3

package/src/stories/components/Avatar/Avatar.stories.ts

@@ -0,0 +1,44 @@
+import AppAvatar from '~components/AppAvatar/AppAvatar.vue';
+import { sizes } from '~components/AppAvatar';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Avatar',
+  component: AppAvatar,
+  argTypes: {
+    src: {
+      control: { type: 'text' },
+      defaultValue: '',
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
+};
+
+const template: StoryFn<typeof AppAvatar> = args => ({
+  components: {
+    AppAvatar,
+  },
+
+  setup(): unknown {
+    return { args, sizes };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppAvatar
+        v-for="size in sizes"
+        :size="size"
+        :src="args.src"
+      />
+    </div>
+  `,
+});
+
+export const avatar = template.bind({});
+avatar.args = {};
+
+export default meta;

package/src/stories/components/BackButton/BackButton.stories.ts

@@ -0,0 +1,39 @@
+import { AppBackButton } from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/BackButton',
+  component: AppBackButton,
+  argTypes: {
+    buttonText: {
+      control: { type: 'text' },
+      defaultValue: 'Ga terug',
+    },
+  },
+};
+
+const template: StoryFn<typeof AppBackButton> = args => ({
+  components: {
+    AppBackButton,
+  },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <div class="bg-zinc-100 h-screen p-5">
+      <div class="w-1/2 mx-auto">
+        <AppBackButton v-bind="args" />
+      </div>
+    </div>
+  `,
+});
+
+export const backButton = template.bind({});
+backButton.args = {
+  buttonText: 'Ga terug',
+};
+
+export default meta;

package/src/stories/components/Badge/Badge.stories.ts

@@ -0,0 +1,42 @@
+import AppBadge from '~components/AppBadge/AppBadge.vue';
+import { types } from '~components/AppBadge';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Badge',
+  component: AppBadge,
+  argTypes: {
+    rounded: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template: StoryFn<typeof AppBadge> = args => ({
+  components: {
+    AppBadge,
+  },
+
+  setup(): unknown {
+    return { args, types };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppBadge
+        v-for="type in types"
+        :type="type"
+        class="capitalize"
+      >
+        {{ type }} badge
+      </AppBadge>
+    </div>
+  `,
+});
+
+export const badge = template.bind({
+  rounded: false,
+});
+
+export default meta;

package/src/stories/components/Button/Button.stories.ts

@@ -0,0 +1,132 @@
+import { PhoneIcon } from '@heroicons/vue/24/solid';
+import { AppButton } from '../../../modules/components';
+
+import type { Component } from 'vue';
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const colorTypeOptions = ['primary', 'secondary', 'plain'];
+const typeOptions = ['button', 'reset', 'submit'];
+const sizeOptions = ['small', 'medium', 'large'];
+
+const meta: Meta = {
+  title: 'Form/Button',
+  component: AppButton,
+  argTypes: {
+    colorType: {
+      control: { type: 'select' },
+      options: colorTypeOptions,
+    },
+    type: {
+      control: { type: 'select' },
+      options: typeOptions,
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizeOptions,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    bordered: {
+      control: { type: 'boolean' },
+    },
+    block: {
+      control: { type: 'boolean' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const createTemplate = (
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  props: Record<string, unknown[]>,
+  slots?: Record<'leadingIcon' | 'trailingIcon', Component>,
+): StoryFn<typeof AppButton> => {
+  return bindArguments => ({
+    components: {
+      AppButton,
+    },
+
+    setup(): unknown {
+      return { bindArguments, props, slots };
+    },
+
+    template: `
+      <div
+        v-for="(values, key) in props"
+        class="flex items-start gap-3"
+      >
+        <AppButton
+          v-for="(value, index) in values"
+          v-bind="{ ...bindArguments, [key]: value }"
+          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>
+        </AppButton>
+      </div>
+    `,
+  });
+};
+
+export const sizes = createTemplate({
+  size: sizeOptions,
+}).bind({});
+
+sizes.args = {
+  type: 'button',
+  colorType: 'primary',
+  disabled: false,
+  loading: false,
+  bordered: false,
+  block: false,
+};
+
+export const colorTypes = createTemplate({
+  colorType: colorTypeOptions,
+}).bind({});
+
+colorTypes.args = {
+  type: 'button',
+  size: 'medium',
+  disabled: false,
+  loading: false,
+  bordered: false,
+  block: false,
+};
+
+export const icons = createTemplate(
+  {
+    colorType: colorTypeOptions,
+  },
+  {
+    leadingIcon: PhoneIcon,
+    trailingIcon: PhoneIcon,
+  },
+).bind({});
+
+icons.args = {
+  type: 'button',
+  size: 'medium',
+  disabled: false,
+  loading: false,
+  bordered: false,
+  block: false,
+};
+
+export default meta;

package/src/stories/components/Card/Card.stories.ts

@@ -0,0 +1,70 @@
+import { AppCard } from '~components';
+import { CalendarIcon } from '~icons';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Card',
+  component: AppCard,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Card title',
+    },
+    description: {
+      control: { type: 'text' },
+      defaultValue: 'Card description',
+    },
+    content: {
+      control: { type: 'text' },
+      defaultValue: 'Card content',
+    },
+    icon: {
+      control: { type: 'text' },
+      defaultValue: '?',
+    },
+    bordered: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template: StoryFn<typeof AppCard> = args => ({
+  components: {
+    AppCard,
+  },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <div class="bg-zinc-100 h-screen p-5">
+      <div class="w-1/2 mx-auto">
+        <AppCard v-bind="args">
+          <slot>{{ args.content }}</slot>
+        </AppCard>
+      </div>
+    </div>
+  `,
+});
+
+export const card = template.bind({});
+card.args = {
+  title: 'Example title',
+  description: 'Example description',
+  content: 'Card content',
+  // @ts-expect-error icon works but doesn't have the same type according to Typescript
+  icon: CalendarIcon,
+  bordered: true,
+  showActions: false,
+  // @ts-expect-error icon works but doesn't have the same type according to Typescript
+  actions: [
+    {
+      name: 'action #1',
+      icon: CalendarIcon,
+    },
+  ],
+};
+
+export default meta;

package/src/stories/components/Color/Color.stories.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue';
+import AppColor from '~components/AppColor/AppColor.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/Color',
+  component: AppColor,
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+  },
+};
+
+const template: StoryFn<typeof AppColor> = args => ({
+  components: {
+    AppColor,
+  },
+
+  setup(): unknown {
+    const color = ref('#000FFF');
+
+    return { args, color };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppColor
+        v-model="args.color"
+        :disabled="args.disabled"
+      />
+    </div>
+  `,
+});
+
+export const color = template.bind({});
+color.args = {};
+
+export default meta;

package/src/stories/components/ColorCard/ColorCard.stories.ts

@@ -0,0 +1,43 @@
+import { ref } from 'vue';
+import { AppColorCard } from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/ColorCard',
+  component: AppColorCard,
+  argTypes: {
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+  },
+};
+
+const template: StoryFn<typeof AppColorCard> = args => ({
+  components: {
+    AppColorCard,
+  },
+
+  setup(): unknown {
+    const color = ref('#000000');
+
+    return { args, color };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppColorCard
+        v-model="args.color"
+        :title="args.title"
+        :disabled="args.disabled"
+      >
+      </AppColorCard>
+    </div>
+  `,
+});
+
+export const colorCard = template.bind({});
+colorCard.args = {};
+
+export default meta;

package/src/stories/components/Confirm/Confirm.stories.ts

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

package/src/stories/components/ContextMenu/ContextMenu.stories.ts

@@ -0,0 +1,85 @@
+import { ArrowDownIcon, CheckIcon, TrashIcon } from '~icons';
+import { AppButton } from '~components';
+import AppContextMenu from '~components/AppContextMenu/AppContextMenu.vue';
+import { useActionBar, useContextMenu } from '~composables';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import type { Shortcut } from '~components/AppContextMenu';
+
+const meta: Meta = {
+  title: 'Components/ContextMenu',
+  component: AppContextMenu,
+};
+
+const template: StoryFn<typeof AppContextMenu> = args => ({
+  components: {
+    AppContextMenu,
+    AppButton,
+  },
+
+  setup(): unknown {
+    const actionBar = useActionBar();
+    const contextMenu = useContextMenu();
+
+    actionBar.setSelection([]);
+    actionBar.setActions([
+      {
+        name: 'test',
+        icon: CheckIcon,
+      },
+      {
+        name: 'test',
+        icon: ArrowDownIcon,
+        confirm: true,
+      },
+      {
+        name: 'delete',
+        icon: TrashIcon,
+        confirm: true,
+        type: 'danger',
+        onClick: async (): Promise<void> => {
+          await new Promise(resolve => {
+            setTimeout(resolve, 1500);
+          });
+        },
+      },
+    ]);
+    contextMenu.setShortcuts([
+      {
+        name: 'Copy link',
+        click: (item: Shortcut): void => {
+          item.name = 'Copied!';
+
+          setTimeout(() => {
+            item.name = 'Copy link';
+          }, 1000);
+        },
+      },
+      {
+        name: 'Copy ID',
+        click: (item: Shortcut): void => {
+          item.name = 'Copied!';
+
+          setTimeout(() => {
+            item.name = 'Copy ID';
+          }, 1000);
+        },
+      },
+    ]);
+    return { args, actionBar, contextMenu };
+  },
+
+  template: `
+    <div
+      class="w-full h-screen bg-zinc-200 text-zinc-300 text-xl text-center flex items-center justify-center"
+      @contextmenu.prevent="(event) => contextMenu.open({}, event)"
+    >
+      <span>Right click me</span>
+    </div>
+  `,
+});
+
+export const contextMenu = template.bind({});
+contextMenu.args = {};
+
+export default meta;

package/src/stories/components/DefinitionList/DefinitionList.stories.ts

@@ -0,0 +1,32 @@
+import AppDefinitionList from '~components/AppDefinitionList/AppDefinitionList.vue';
+import { items } from '~components/AppDefinitionList/__mocks__';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/DefinitionList',
+  component: AppDefinitionList,
+};
+
+const template: StoryFn<typeof AppDefinitionList> = args => ({
+  components: {
+    AppDefinitionList,
+  },
+
+  setup(): unknown {
+    return { args, items };
+  },
+
+  template: `
+    <div class="w-full">
+      <AppDefinitionList
+        :items="items"
+      />
+    </div>
+  `,
+});
+
+export const definitionList = template.bind({});
+definitionList.args = {};
+
+export default meta;

package/src/stories/components/Disclosure/Disclosure.stories.ts

@@ -0,0 +1,61 @@
+import {
+  AppCard,
+  AppDisclosure,
+  AppDisclosureButton,
+  AppDisclosurePanel,
+} from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Disclosure',
+  component: AppDisclosure,
+};
+
+const template: StoryFn<typeof AppDisclosure> = args => ({
+  components: {
+    AppCard,
+    AppDisclosure,
+    AppDisclosureButton,
+    AppDisclosurePanel,
+  },
+
+  setup(): unknown {
+    const fakeDescription = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh mi, gravida vel metus'
+      + 'dapibus, sagittis consequat nibh. Donec condimentum imperdiet euismod. Mauris ullamcorper erat quis sagittis'
+      + 'venenatis. Aliquam erat volutpat. Aenean aliquet eu ipsum eu laoreet. Aenean eu maximus nisl. Donec eget'
+      + 'vehicula sem, a auctor urna.';
+    const questions = [
+      'Can I still change my location?',
+      'Can I still change the delivery time?',
+      'What time does the driver arrive?',
+    ];
+
+    return { args, questions, fakeDescription };
+  },
+
+  template: `
+    <div class="container mx-auto mt-8 flex flex-col p-4 bg-zinc-100">
+      <h3 class="mb-4 text-xl font-bold text-zinc-900">FAQ</h3>
+
+      <AppCard>
+        <AppDisclosure
+          v-for="(question, index) in questions"
+          :key="'question-' + index"
+        >
+          <AppDisclosureButton>
+            {{ question }}
+          </AppDisclosureButton>
+
+          <AppDisclosurePanel>
+            {{ fakeDescription }}
+          </AppDisclosurePanel>
+        </AppDisclosure>
+      </AppCard>
+    </div>
+  `,
+});
+
+export const disclosure = template.bind({});
+
+export default meta;