refactor: make HOC more flexible

commercetools · Jan 18, 2024 · 7d8f97d · 7d8f97d
1 parent 91da6f3
commit 7d8f97d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 24 deletions.
diff --git a/.storybook/helpers/with-controlled-value.tsx b/.storybook/helpers/with-controlled-value.tsx
@@ -16,20 +16,22 @@ type TControlledComponentProps = {
 };
 
 const withControlledValue = <T extends {}>(
-  Component: FunctionComponent<T & TControlledComponentProps>
+  Component: FunctionComponent<T & TControlledComponentProps>,
+  controlledArgName = 'value',
+  controlledArgHandlerName = 'onChange'
 ) => {
-  const WithControlledValue: StoryObj['render'] = (args) => {
-    const [{ value, onChange }, updateArgs] = useArgs();
+  const WithControlledValue: StoryObj['render'] = (allStoryArgs) => {
+    const [args, updateArgs] = useArgs();
 
     const _onChange = (event: TCustomEvent) => {
       updateArgs({ value: event.target.value });
-      onChange(event);
+      args[controlledArgHandlerName](event);
     };
 
     const props = {
-      ...(args as T),
-      value,
-      onChange: _onChange,
+      ...(allStoryArgs as T),
+      [controlledArgName]: args[controlledArgName],
+      [controlledArgHandlerName]: _onChange,
     };
 
     return <Component {...props} />;

diff --git a/packages/components/pagination/src/page-navigator/page-navigator.stories.tsx b/packages/components/pagination/src/page-navigator/page-navigator.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Value } from 'react-value';
-import PageNavigator from './page-navigator';
+import { withControlledValue } from '@/storybook-helpers';
+import PageNavigator, { type TPageNavigatorProps } from './page-navigator';
 
 const meta = {
   title: 'Components/Pagination/PageNavigator',
@@ -16,18 +16,9 @@ export const Default: Story = {
     totalPages: 10,
     page: 1,
   },
-  render: (args) => {
-    return (
-      <Value
-        defaultValue={args.page}
-        render={(page, onPageChange) => (
-          <PageNavigator
-            totalPages={args.totalPages}
-            page={page}
-            onPageChange={onPageChange}
-          />
-        )}
-      />
-    );
-  },
+  render: withControlledValue<TPageNavigatorProps>(
+    PageNavigator,
+    'page',
+    'onPageChange'
+  ),
 };
diff --git a/packages/components/pagination/src/page-navigator/page-navigator.tsx b/packages/components/pagination/src/page-navigator/page-navigator.tsx
@@ -10,7 +10,7 @@ import Label from '@commercetools-uikit/label';
 import { isValid, normalizePageValue } from './utils';
 import messages from './messages';
 
-type TPageNavigatorProps = {
+export type TPageNavigatorProps = {
   /**
    * Total number of pages available
    */