[#17] create story for preview-event-mapper virtual list

Author: Kreezag

components/PreviewEventMapper/PreviewEventMapper.stories.ts

@@ -1,16 +1,16 @@
 import { Meta, Story } from "@storybook/vue3";
-import PreviewEventMapper from '~/components/PreviewEventMapper/PreviewEventMapper.vue';
-import monologEventMock from '~/mocks/monolog.json'
-import sentryEventMock from '~/mocks/sentry-spiral.json'
-import smtpEventMock from '~/mocks/smtp-welcome.json'
-import varDumpEventMock from '~/mocks/var-dump-object.json'
-import profilerEventMock from '~/mocks/profiler.json'
-import inspectorEventMock from '~/mocks/inspector.json'
-import httpDumpEventMock from '~/mocks/http-dump.json'
+import PreviewEventMapper from "~/components/PreviewEventMapper/PreviewEventMapper.vue";
+import monologEventMock from "~/mocks/monolog.json";
+import sentryEventMock from "~/mocks/sentry-spiral.json";
+import smtpEventMock from "~/mocks/smtp-welcome.json";
+import varDumpEventMock from "~/mocks/var-dump-object.json";
+import profilerEventMock from "~/mocks/profiler.json";
+import inspectorEventMock from "~/mocks/inspector.json";
+import httpDumpEventMock from "~/mocks/http-dump.json";
 
 export default {
   title: "Preview/PreviewEventMapper",
-  component: PreviewEventMapper
+  component: PreviewEventMapper,
 } as Meta<typeof PreviewEventMapper>;
 
 const Template: Story = (args) => ({
@@ -26,7 +26,7 @@ const Template: Story = (args) => ({
 export const Default = Template.bind({});
 
 Default.args = {
-  event: { ...smtpEventMock, type: 'unknown' },
+  event: { ...smtpEventMock, type: "unknown" },
 };
 
 export const Monolog = Template.bind({});
@@ -70,21 +70,57 @@ HttpDump.args = {
   event: httpDumpEventMock,
 };
 
+const eventsList = [
+  monologEventMock,
+  sentryEventMock,
+  smtpEventMock,
+  varDumpEventMock,
+  profilerEventMock,
+  inspectorEventMock,
+  httpDumpEventMock,
+];
+
 const TemplateList: Story = (args) => ({
   components: { PreviewEventMapper },
   setup() {
-
     return {
       args,
-      eventsList: [monologEventMock,sentryEventMock,smtpEventMock,varDumpEventMock,profilerEventMock,inspectorEventMock,httpDumpEventMock]
+      eventsList,
     };
   },
   template: `<PreviewEventMapper class="border-b" v-for="event in eventsList" :event="event" :key="event.uuid"/>`,
 });
 
-
 export const EventsList = TemplateList.bind({});
 
 EventsList.args = {
   event: inspectorEventMock,
 };
+
+const TemplateListVirtual: Story = (args) => ({
+  components: { PreviewEventMapper },
+  setup() {
+    return {
+      args,
+      eventsList: eventsList
+        .concat(eventsList)
+        .concat(eventsList)
+        .concat(eventsList)
+        .concat(eventsList)
+        .concat(eventsList)
+        .map((item, index) => ({ ...item, uuid: String(index + 1) })) // make uniq ids
+        .sort(() => Math.random() - 0.5), // shuffle
+    };
+  },
+  template: `
+    <template v-for="item in eventsList">
+      <PreviewEventMapper class="border-b" :event="item" />
+    </template>
+  `,
+});
+
+export const EventsListVirtual = TemplateListVirtual.bind({});
+
+EventsListVirtual.args = {
+  event: inspectorEventMock,
+};