Added pagination and filter properties for the BucketViewer component

packages/components/stories/BucketViewer.stories.ts

@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 
 import { BucketViewer, BucketViewerProps } from '../src/components/BucketViewer';
+import LoadingSpinner from '../src/components/LoadingSpinner';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta = {
@@ -16,6 +17,16 @@ const meta: Meta = {
       description:
         'Suffix of bucket domain',
     },
+    downloadComponent: {
+      description:
+        'Component to be displayed on hover of each bucket data',
+    },
+    filterState: {
+      description: `State with values used to filter the bucket files`
+    },
+    paginationConfig: {
+      description: `Configuration to show and stylise the pagination on the component`,
+    },
   },
 };
 
@@ -44,3 +55,49 @@ export const Normal: Story = {
     }
   },
 };
+
+export const WithPagination: Story = {
+  name: 'With pagination',
+  args: {
+    domain: 'https://ssen-smart-meter.datopian.workers.dev',
+    suffix: '/',
+    paginationConfig: {
+      itemsPerPage: 3
+    },
+    dataMapperFn: async (rawData: Response) => {
+      const result = await rawData.json();
+      return result.objects.map(
+        e => ({
+          downloadFileUri: e.downloadLink,
+          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+          dateProps: {
+            date: new Date(e.uploaded),
+            dateFormatter: (date) => date.toLocaleDateString()
+          }
+        })
+      )
+    }
+  },
+};
+
+export const WithComponentOnHoverOfEachBucketFile: Story = {
+  name: 'With component on hover of each bucket file',
+  args: {
+    domain: 'https://ssen-smart-meter.datopian.workers.dev',
+    suffix: '/',
+    downloadComponent: LoadingSpinner(),
+    dataMapperFn: async (rawData: Response) => {
+      const result = await rawData.json();
+      return result.objects.map(
+        e => ({
+          downloadFileUri: e.downloadLink,
+          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+          dateProps: {
+            date: new Date(e.uploaded),
+            dateFormatter: (date) => date.toLocaleDateString()
+          }
+        })
+      )
+    }
+  },
+};