Fix Pagination story config and array merge strategy in BentoProvider

Author: federico-ercoles

packages/bento-design-system/src/BentoConfigContext.tsx

@@ -10,6 +10,20 @@ export function useBentoConfig() {
   return useContext(BentoConfigContext);
 }
 
+export const deepmerge = deepmergeCustom({
+  mergeRecords: (value, utils) => {
+    // NOTE(vince): in case of a JSX.Element in the config (like the Navigation's activeVisualElement),
+    // we don't want to merge the props of the two elements, but we want to take just the second element instead.
+    if (React.isValidElement(value[0]) || React.isValidElement(value[1])) {
+      return value[1];
+    }
+    return utils.actions.defaultMerge;
+  },
+  // NOTE(fede): in case of an array in the config (like AreaLoader's dots),
+  // we don't want to merge the two arrays, but we want to take just the second one instead.
+  mergeArrays: (value) => value[1],
+});
+
 export function BentoConfigProvider({
   value: config,
   children,
@@ -23,17 +37,6 @@ export function BentoConfigProvider({
   // in case this is the top level provider.
   const parentConfig = useBentoConfig();
 
-  const deepmerge = deepmergeCustom({
-    mergeRecords: (value, utils) => {
-      // NOTE(vince): in case of a JSX.Element in the config (like the Navigation's activeVisualElement),
-      // we don't want to merge the props of the two elements, but we want to take just the second element instead.
-      if (React.isValidElement(value[0]) || React.isValidElement(value[1])) {
-        return value[1];
-      }
-      return utils.actions.defaultMerge;
-    },
-  });
-
   return (
     <BentoConfigContext.Provider value={deepmerge(parentConfig, config) as BentoConfig}>
       {children}

packages/bento-design-system/test/deepmerge.test.tsx

@@ -0,0 +1,22 @@
+import { deepmerge } from "../src/BentoConfigContext";
+
+describe("deepmerge", () => {
+  it("merges two objects", () => {
+    const input1 = { a: 1, b: 2 };
+    const input2 = { c: 3, d: 4 };
+    const output = { a: 1, b: 2, c: 3, d: 4 };
+    expect(deepmerge(input1, input2)).toEqual(output);
+  });
+
+  it("does not merge two arrays", () => {
+    const input1 = [1, 2, 3];
+    const input2 = [4, 5, 6];
+    expect(deepmerge(input1, input2)).toEqual(input2);
+  });
+
+  it("does not merge object fields that are valid React elements", () => {
+    const input1 = { a: 1, b: 2 };
+    const input2 = { a: <div>hello</div>, b: 4 };
+    expect(deepmerge(input1, input2)).toEqual(input2);
+  });
+});

packages/storybook/stories/index.tsx

@@ -140,6 +140,9 @@ export const BentoProvider = createBentoProvider(
         custom: "customColor1",
       },
     },
+    pagination: {
+      itemsPerPageOptions: [5, 10, 20, 50],
+    },
   },
   sprinkles
 );