refactor: improvements

commercetools · Jan 18, 2024 · 91da6f3 · 91da6f3
1 parent 46b50d0
commit 91da6f3
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 34 deletions.
diff --git a/...-navigator/page-size-selector.stories.tsx → ...page-navigator/page-navigator.stories.tsx b/...-navigator/page-size-selector.stories.tsx → ...page-navigator/page-navigator.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Value } from 'react-value';
 import PageNavigator from './page-navigator';
 
 const meta = {
@@ -12,8 +13,21 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    totalPages: 3,
+    totalPages: 10,
     page: 1,
-    onPageChange: () => {},
+  },
+  render: (args) => {
+    return (
+      <Value
+        defaultValue={args.page}
+        render={(page, onPageChange) => (
+          <PageNavigator
+            totalPages={args.totalPages}
+            page={page}
+            onPageChange={onPageChange}
+          />
+        )}
+      />
+    );
   },
 };
diff --git a/packages/components/pagination/src/page-size-selector/page-size-selector.stories.tsx b/packages/components/pagination/src/page-size-selector/page-size-selector.stories.tsx
@@ -1,5 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import PageSizeSelector from './page-size-selector';
+import PageSizeSelector, { type TPageRangeSize } from './page-size-selector';
+
+const getMinimumPageSizeFromRange = (selectedRange: TPageRangeSize) => {
+  switch (selectedRange) {
+    case 'l':
+      return 200;
+    default:
+      return 20;
+  }
+};
 
 const meta = {
   title: 'Components/Pagination/PageSizeSelector',
@@ -19,10 +28,20 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  // @ts-ignore Not providing `perPage` as it's computed based on the provided `perPageRange`
   args: {
     pageItems: 18,
-    perPage: 20,
     perPageRange: 's',
-    onPerPageChange: () => {},
+  },
+  parameters: { controls: { exclude: ['perPage'] } },
+  render: (args) => {
+    return (
+      <PageSizeSelector
+        pageItems={args.pageItems}
+        perPage={getMinimumPageSizeFromRange(args.perPageRange)}
+        perPageRange={args.perPageRange}
+        onPerPageChange={() => {}}
+      />
+    );
   },
 };
diff --git a/packages/components/pagination/src/pagination.stories.tsx b/packages/components/pagination/src/pagination.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Value } from 'react-value';
 import Pagination from './pagination';
 
 const meta = {
@@ -24,7 +25,27 @@ export const Default: Story = {
     page: 1,
     perPage: 20,
     perPageRange: 's',
-    onPageChange: () => {},
-    onPerPageChange: () => {},
+  },
+  render: (args) => {
+    return (
+      <Value
+        defaultValue={args.perPage}
+        render={(perPage, onPerPageChange) => (
+          <Value
+            defaultValue={args.page}
+            render={(page, onPageChange) => (
+              <Pagination
+                totalItems={args.totalItems}
+                page={page}
+                perPageRange={args.perPageRange}
+                onPageChange={onPageChange}
+                perPage={perPage}
+                onPerPageChange={onPerPageChange}
+              />
+            )}
+          />
+        )}
+      />
+    );
   },
 };
diff --git a/packages/components/stamp/src/stamp.stories.tsx b/packages/components/stamp/src/stamp.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import * as icons from '@commercetools-uikit/icons';
-import Spacings from '@commercetools-uikit/spacings';
+import SpacingsStack from '../../spacings/spacings-stack';
+import SpacingsInline from '../../spacings/spacings-inline';
 import Stamp, { availableTones } from './stamp';
 
 const iconNames = Object.keys(icons);
@@ -21,36 +22,15 @@ export const Default: Story = {
   args: {
     isCondensed: false,
   },
-  argTypes: {
-    tone: {
-      table: {
-        disable: true,
-      },
-    },
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-    icon: {
-      table: {
-        disable: true,
-      },
-    },
-    label: {
-      table: {
-        disable: true,
-      },
-    },
-  },
+  parameters: { controls: { exclude: ['tone', 'children', 'icon', 'label'] } },
   render: (args) => {
     return (
-      <Spacings.Stack>
+      <SpacingsStack>
         {availableTones.map((tone) => {
           const iconIndex = getRandomIndex(0, numberOfIcons);
           const Icon = icons[iconNames[iconIndex] as keyof typeof icons];
           return (
-            <Spacings.Inline key={tone} alignItems="center">
+            <SpacingsInline key={tone} alignItems="center">
               <Stamp
                 tone={tone}
                 isCondensed={args.isCondensed}
@@ -62,10 +42,10 @@ export const Default: Story = {
                 isCondensed={args.isCondensed}
                 label={`tone="${tone}"`}
               />
-            </Spacings.Inline>
+            </SpacingsInline>
           );
         })}
-      </Spacings.Stack>
+      </SpacingsStack>
     );
   },
 };