From 68831d370c48459ef7c1e7f4ae6320ca70e21f6b Mon Sep 17 00:00:00 2001
From: roshni73 <roshnipoudel73@gmail.com>
Date: Fri, 7 Jun 2024 15:08:11 +0545
Subject: [PATCH] Use Template to write Pager  story fix bugs

---
 .../src/stories/Pager.stories.tsx             | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/go-ui-storybook/src/stories/Pager.stories.tsx b/packages/go-ui-storybook/src/stories/Pager.stories.tsx
index 18ab3cb47..63a4844dc 100644
--- a/packages/go-ui-storybook/src/stories/Pager.stories.tsx
+++ b/packages/go-ui-storybook/src/stories/Pager.stories.tsx
@@ -1,15 +1,15 @@
 import { PagerProps } from '@ifrc-go/ui';
 import { useArgs } from '@storybook/preview-api';
 import type {
+    Args,
     Meta,
     StoryObj,
 } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import Pager from './Pager';
 
-type PagerSpecificProps = PagerProps & {
-    onChange: (e: number) => void;
-};
+type PagerSpecificProps = PagerProps
 
 type Story = StoryObj<PagerSpecificProps>;
 
@@ -23,52 +23,53 @@ const meta: Meta<typeof Pager> = {
             url: 'https://www.figma.com/file/myeW85ibN5p2SlnXcEpxFD/IFRC-GO---UI-Current---1?type=design&node-id=0-4957&mode=design&t=KwxbuoUQxqcLyZbG-0',
         },
     },
+    args: {
+        onActivePageChange: fn(),
+    },
     tags: ['autodocs'],
-    decorators: [
-        function Component(_, ctx) {
-            const componentArgs = ctx.args as PagerSpecificProps;
-            const [{ activePage, maxItemsPerPage }, handleArgsChange] = useArgs();
-
-            const setActivePage = (e: number) => {
-                handleArgsChange({ activePage: e });
-            };
-
-            return (
-                <Pager
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...componentArgs}
-                    onActivePageChange={setActivePage}
-                    maxItemsPerPage={maxItemsPerPage}
-                    activePage={activePage}
-                />
-            );
-        },
-    ],
 };
 
 export default meta;
 
+function Template(args:Args) {
+    const [{ activePage, maxItemsPerPage }, handleArgsChange] = useArgs();
+
+    const onChange = (e: number) => {
+        handleArgsChange({ activePage: e });
+    };
+    return (
+        <Pager
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...args}
+            onActivePageChange={onChange}
+            maxItemsPerPage={maxItemsPerPage}
+            activePage={activePage}
+            itemsCount={10}
+        />
+    );
+}
+
 export const Default: Story = {
+    render: Template,
     args: {
         activePage: 3,
-        itemsCount: 10,
         maxItemsPerPage: 1,
     },
 };
 
 export const Disabled: Story = {
+    render: Template,
     args: {
         activePage: 5,
-        itemsCount: 10,
         maxItemsPerPage: 1,
         disabled: true,
     },
 };
 
 export const ShowAllPages: Story = {
+    render: Template,
     args: {
         activePage: 5,
-        itemsCount: 10,
         maxItemsPerPage: 1,
         showAllPages: true,
     },