@autoafleveren/ui 1.3.2 → 1.3.3

package/src/stories/components/Navigation/Navigation.stories.ts

@@ -0,0 +1,62 @@
+import { defineComponent, h } from 'vue';
+import { AppNavigationMenu, AppAvatar } from '~/modules/components';
+import { useNavigation } from '~/modules/composables';
+import { HomeIcon } from '~/modules/icons';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const avatar = defineComponent({
+  components: {
+    AppAvatar,
+  },
+
+  setup(args) {
+    return { args };
+  },
+
+  render: () => {
+    return h(AppAvatar, { size: 'large' });
+  },
+});
+
+const meta: Meta = {
+  title: 'Structure',
+  component: AppNavigationMenu,
+};
+
+const template: StoryFn<typeof AppNavigationMenu> = args => ({
+  components: {
+    AppNavigationMenu,
+  },
+
+  setup(): unknown {
+    const navigation = useNavigation();
+
+    navigation.openMainMenu();
+    navigation.setLogo('<img src="/images/logo.png" class="h-7" />');
+    navigation.setAvatar(avatar);
+    navigation.setNavigationItems([
+      {
+        name: 'Home',
+        to: '/',
+        icon: HomeIcon,
+      },
+    ]);
+
+    return { args };
+  },
+
+  template: `
+    <div class="flex min-h-screen flex-col md:flex-row md:bg-secondary">
+      <div>
+        <AppNavigationMenu />
+      </div>
+
+      <div class="w-full bg-white"></div>
+    </div>
+  `,
+});
+
+export const navigation = template.bind({});
+
+export default meta;

package/src/stories/components/Pagination/Pagination.stories.ts

@@ -0,0 +1,62 @@
+import { ref } from 'vue';
+import { AppPagination } from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Pagination',
+  component: AppPagination,
+  argTypes: {
+    currentPage: {
+      control: { type: 'text' },
+    },
+    lastPage: {
+      control: { type: 'text' },
+    },
+    loaded: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template: StoryFn<typeof AppPagination> = args => ({
+  components: {
+    AppPagination,
+  },
+
+  setup(): unknown {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const currentPage = ref<number>(
+      parseInt(args.currentPage as unknown as string, 10),
+    );
+
+    function paginate(page: number): void {
+      if (page > 0 && page < 21) {
+        currentPage.value = page;
+      }
+    }
+
+    return { args, currentPage, paginate };
+  },
+
+  template: `
+    <div class="w-full h-screen">
+      <AppPagination
+        :current-page="currentPage"
+        :last-page="args.lastPage"
+        @paginate="paginate"
+        @next-page="() => paginate(currentPage + 1)"
+        @previous-page="() => paginate(currentPage - 1)"
+      />
+    </div>
+  `,
+});
+
+export const pagination = template.bind({});
+pagination.args = {
+  loaded: true,
+  lastPage: 20,
+  currentPage: 1,
+};
+
+export default meta;

package/src/stories/components/ProgressBar/ProgressBar.stories.ts

@@ -0,0 +1,48 @@
+import AppProgressBar from '~components/AppProgressBar/AppProgressBar.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/ProgressBar',
+  component: AppProgressBar,
+};
+
+const template: StoryFn<typeof AppProgressBar> = args => ({
+  components: { AppProgressBar },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <div class="w-full">
+      <AppProgressBar :steps="[
+        {
+          name: 'Step 1',
+          completed: true,
+          active: true,
+        },
+        {
+          name: 'Step 2',
+          completed: true,
+          active: true,
+        },
+        {
+          name: 'Step 3',
+          completed: false,
+          active: false,
+        },
+        {
+          name: 'Step 4',
+          completed: false,
+          active: false,
+        }
+      ]" />
+    </div>
+  `,
+});
+
+export const progressBar = template.bind({});
+progressBar.args = {};
+
+export default meta;

package/src/stories/components/Rating/Rating.stories.ts

@@ -0,0 +1,38 @@
+import { ref } from 'vue';
+import AppStepper from '~components/AppStepper/AppStepper.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/Stepper',
+  component: AppStepper,
+  argTypes: {
+    modelValue: {
+      control: { type: 'number' },
+      defaultValue: false,
+    },
+  },
+};
+
+const template: StoryFn<typeof AppStepper> = args => ({
+  components: { AppStepper },
+
+  setup(): unknown {
+    const value = ref(3);
+
+    return { args, value };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppStepper
+        v-model="args.value"
+      />
+    </div>
+  `,
+});
+
+export const stepper = template.bind({});
+stepper.args = {};
+
+export default meta;

package/src/stories/components/Section/Section.stories.ts

@@ -0,0 +1,44 @@
+import AppSection from '~components/AppSection/AppSection.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Section',
+  component: AppSection,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Section title',
+    },
+    description: {
+      control: { type: 'text' },
+      // eslint-disable-next-line max-len
+      defaultValue: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et aliquet augue. Proin in pharetra nulla. Ut eu ullamcorper turpis. Nam euismod porttitor pharetra',
+    },
+  },
+};
+
+const template: StoryFn<typeof AppSection> = args => ({
+  components: {
+    AppSection,
+  },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <AppSection v-bind="args">
+      <slot>Content</slot>
+    </AppSection>
+  `,
+});
+
+export const section = template.bind({});
+section.args = {
+  title: 'Section title',
+  // eslint-disable-next-line max-len
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et aliquet augue. Proin in pharetra nulla. Ut eu ullamcorper turpis. Nam euismod porttitor pharetra',
+};
+
+export default meta;

package/src/stories/components/Select/Select.stories.ts

@@ -0,0 +1,90 @@
+import { AppSelect } from '../../../modules/components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const items = [
+  'Item #1',
+  'Item #2',
+  'Item #3',
+  'Item #4',
+  'Item #5',
+  'Item #6',
+];
+
+const meta: Meta = {
+  title: 'Form/Select',
+  component: AppSelect,
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+      defaultValue: 'Label',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    hideSelected: {
+      control: { type: 'boolean' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const createTemplate = (
+  // eslint-disable-next-line unicorn/prevent-abbreviations
+  props?: Record<string, unknown[]>,
+): StoryFn<typeof AppSelect> => {
+  return bindArguments => ({
+    components: {
+      AppSelect,
+    },
+
+    setup(): unknown {
+      return { bindArguments, props };
+    },
+
+    template: `
+      <AppSelect
+        v-bind="{ ...bindArguments, ...props }"
+      />
+    `,
+  });
+};
+
+export const single = createTemplate().bind({});
+
+single.args = {
+  // @ts-expect-error options not exists in type
+  options: items,
+  label: 'Label',
+  disabled: false,
+  loading: false,
+  hideSelected: false,
+};
+
+export const multi = createTemplate().bind({});
+
+multi.args = {
+  // @ts-expect-error options not exists in type
+  options: items,
+  label: 'Label',
+  mode: 'multiple',
+  disabled: false,
+  loading: false,
+  hideSelected: false,
+};
+
+export const tags = createTemplate().bind({});
+
+tags.args = {
+  // @ts-expect-error options not exists in type
+  options: items,
+  label: 'Label',
+  mode: 'tags',
+  disabled: false,
+  loading: false,
+  hideSelected: false,
+};
+
+export default meta;

package/src/stories/components/Stepper/Stepper.stories.ts

@@ -0,0 +1,38 @@
+import { ref } from 'vue';
+import AppRating from '~components/AppRating/AppRating.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Form/Rating',
+  component: AppRating,
+  argTypes: {
+    modelValue: {
+      control: { type: 'number' },
+      defaultValue: false,
+    },
+  },
+};
+
+const template: StoryFn<typeof AppRating> = args => ({
+  components: { AppRating },
+
+  setup(): unknown {
+    const value = ref(3);
+
+    return { args, value };
+  },
+
+  template: `
+    <div class="flex space-x-3">
+      <AppToggle
+        v-model="args.value"
+      />
+    </div>
+  `,
+});
+
+export const rating = template.bind({});
+rating.args = {};
+
+export default meta;

package/src/stories/components/Table/DataTable.stories.ts

@@ -0,0 +1,96 @@
+import { AppDataTable } from '~components';
+
+import type { Header, Item } from 'vue3-easy-data-table';
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Structure/Table',
+  // @ts-expect-error doesn't work with generic components yet
+  component: AppDataTable,
+};
+
+const template: StoryFn<typeof AppDataTable> = args => ({
+  components: {
+    AppDataTable,
+  },
+
+  setup(): unknown {
+    const headers: Header[] = [
+      { text: '#', value: 'player' },
+      { text: 'Name', value: 'team' },
+      { text: 'Number', value: 'number' },
+      { text: 'Position', value: 'position' },
+      { text: 'Height', value: 'indicator.height' },
+      { text: 'Weight', value: 'indicator.weight', sortable: true },
+      { text: 'Last changed', value: 'lastAttended', width: 200 },
+      { text: 'Country', value: 'country' },
+    ];
+
+    const items: Item[] = [
+      {
+        id: 1,
+        player: 'Stephen Curry',
+        team: 'GSW',
+        number: 30,
+        position: 'G',
+        indicator: { height: '6-2', weight: 185 },
+        lastAttended: 'Davidson',
+        country: 'USA',
+      },
+      {
+        id: 2,
+        player: 'Lebron James',
+        team: 'LAL',
+        number: 6,
+        position: 'F',
+        indicator: { height: '6-9', weight: 250 },
+        lastAttended: 'St. Vincent-St. Mary HS (OH)',
+        country: 'USA',
+      },
+      {
+        id: 3,
+        player: 'Kevin Durant',
+        team: 'BKN',
+        number: 7,
+        position: 'F',
+        indicator: { height: '6-10', weight: 240 },
+        lastAttended: 'Texas-Austin',
+        country: 'USA',
+      },
+      {
+        id: 4,
+        player: 'Giannis Antetokounmpo',
+        team: 'MIL',
+        number: 34,
+        position: 'F',
+        indicator: { height: '6-11', weight: 242 },
+        lastAttended: 'Filathlitikos',
+        country: 'Greece',
+      },
+    ];
+
+    return {
+      args,
+      headers,
+      items: [...items, ...items, ...items, ...items, ...items].map(
+        (item, index) => ({
+          ...item,
+          id: index,
+        }),
+      ),
+    };
+  },
+
+  template: `
+    <AppDataTable
+      :headers="headers"
+      :items="items"
+      :rows-per-page="8"
+    />
+  `,
+});
+
+export const dataTable = template.bind({});
+dataTable.args = {};
+
+export default meta;

package/src/stories/components/Table/Table.stories.ts

@@ -0,0 +1,45 @@
+import { AppTable } from '~components';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Structure/Table',
+  component: AppTable,
+};
+
+const template: StoryFn<typeof AppTable> = args => ({
+  components: { AppTable },
+
+  setup(): unknown {
+    return { args };
+  },
+
+  template: `
+    <div>
+      <AppTable class="w-full">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Name</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Stephen Curry</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Alpha Bravo</td>
+          </tr>
+        </tbody>
+      </AppTable>
+    </div>
+  `,
+});
+
+export const simpleTable = template.bind({});
+simpleTable.args = {};
+
+export default meta;

package/src/stories/components/Timeline/Timeline.stories.ts

@@ -0,0 +1,46 @@
+import { RocketLaunchIcon } from '~icons';
+import { timelineItems } from '~components/AppTimeline/__mocks__/timeline';
+import AppTimeline from '~components/AppTimeline/AppTimeline.vue';
+import AppCard from '~components/AppCard/AppCard.vue';
+
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import type { TimelineItem } from '~components/AppTimeline/index.d';
+
+const meta: Meta = {
+  title: 'Components/Timeline',
+  component: AppTimeline,
+};
+
+const items: TimelineItem[] = [
+  ...timelineItems,
+  ...timelineItems.map(item => {
+    return { ...item, icon: item.icon ? RocketLaunchIcon : item.icon };
+  }),
+];
+
+const template: StoryFn<typeof AppTimeline> = args => ({
+  components: {
+    AppTimeline,
+    AppCard,
+  },
+
+  setup(): unknown {
+    return { args, items };
+  },
+
+  template: `
+    <div class="bg-zinc-100 w-full h-screen p-4">
+      <AppCard class="max-w-2xl mx-auto">
+        <AppTimeline :items="items"/>
+      </AppCard>
+    </div>
+  `,
+});
+
+export const timeline = template.bind({});
+timeline.args = {
+  // @ts-expect-error icon works but doesn't have the same type according to Typescript
+  timelineItems: items,
+};
+
+export default meta;

package/src/stories/components/Toast/Toast.stories.ts

@@ -0,0 +1,47 @@
+import { AppButton } from '~components';
+import { useToast } from '~/modules';
+// eslint-disable-next-line import/no-unresolved
+import Toast from '~plugins/Toast/Toast.vue';
+
+// eslint-disable-next-line import/order
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+
+const meta: Meta = {
+  title: 'Components/Toast',
+  component: Toast,
+};
+
+const template: StoryFn<typeof Toast> = args => ({
+  components: {
+    AppButton,
+  },
+
+  setup(): unknown {
+    const toast = useToast();
+
+    return { args, toast };
+  },
+
+  template: `
+    <div class="w-full h-screen">
+      <div class="flex items-center justify-center space-x-4 w-full h-full">
+        <AppButton @click="toast.warning('Toast succesfull', 'This toast is shown successfully')">
+          Warning
+        </AppButton>
+
+        <AppButton @click="toast.error('Toast succesfull', 'This toast is shown successfully')">
+          Error
+        </AppButton>
+
+        <AppButton @click="toast.success('Toast succesfull', 'This toast is shown successfully')">
+          Success
+        </AppButton>
+      </div>
+    </div>
+  `,
+});
+
+export const toast = template.bind({});
+toast.args = {};
+
+export default meta;

package/src/stories/components/Toggle/Toggle.stories.ts

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

package/src/stories/components/ToggleCard/ToggleCard.stories.ts

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