pixel-react 1.8.1 → 1.8.2

package/src/utils/compareArrays/compareArrays.stories.tsx

@@ -1,62 +1,62 @@
-import { compareArrays } from './compareArrays'; // Adjust the import path as necessary
-
-export default {
-  title: 'Utils/compareArrays',
-  component: compareArrays,
-};
-
-export const Default = () => {
-  const testCases = [
-    { arr1: [1, 2, 3], arr2: [1, 2, 3], expected: true },
-    { arr1: [1, 2, 3], arr2: [1, 2, 4], expected: false },
-    { arr1: [1, { a: 1 }], arr2: [1, { a: 1 }], expected: true },
-    { arr1: [1, { a: 1 }], arr2: [1, { a: 2 }], expected: false },
-    { arr1: [1, 2, 3], arr2: [1, 2, 3, 4], expected: false },
-    { arr1: [], arr2: [], expected: true },
-    { arr1: [null, undefined], arr2: [null, undefined], expected: true },
-    { arr1: [null], arr2: [undefined], expected: false },
-    {
-      arr1: [
-        [1, 2],
-        [3, 4],
-      ],
-      arr2: [
-        [1, 2],
-        [3, 4],
-      ],
-      expected: true,
-    },
-    {
-      arr1: [
-        [1, 2],
-        [3, 4],
-      ],
-      arr2: [
-        [1, 2],
-        [4, 3],
-      ],
-      expected: false,
-    },
-  ];
-
-  return (
-    <div>
-      <h1>
-        <u>compareArrays(arr1, arr2)</u> - Expected / Actual
-      </h1>
-      {testCases.map(({ arr1, arr2, expected }, index) => {
-        const actual = compareArrays(arr1, arr2);
-        return (
-          <div key={index}>
-            <strong>
-              compareArrays({JSON.stringify(arr1)}, {JSON.stringify(arr2)}) -
-            </strong>
-            <span style={{ color: actual === expected ? 'green' : 'red' }}>
-              {` Expected: ${expected}, Actual: ${actual}`}
-            </span>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import { compareArrays } from './compareArrays'; // Adjust the import path as necessary
+
+export default {
+  title: 'Utils/compareArrays',
+  component: compareArrays,
+};
+
+export const Default = () => {
+  const testCases = [
+    { arr1: [1, 2, 3], arr2: [1, 2, 3], expected: true },
+    { arr1: [1, 2, 3], arr2: [1, 2, 4], expected: false },
+    { arr1: [1, { a: 1 }], arr2: [1, { a: 1 }], expected: true },
+    { arr1: [1, { a: 1 }], arr2: [1, { a: 2 }], expected: false },
+    { arr1: [1, 2, 3], arr2: [1, 2, 3, 4], expected: false },
+    { arr1: [], arr2: [], expected: true },
+    { arr1: [null, undefined], arr2: [null, undefined], expected: true },
+    { arr1: [null], arr2: [undefined], expected: false },
+    {
+      arr1: [
+        [1, 2],
+        [3, 4],
+      ],
+      arr2: [
+        [1, 2],
+        [3, 4],
+      ],
+      expected: true,
+    },
+    {
+      arr1: [
+        [1, 2],
+        [3, 4],
+      ],
+      arr2: [
+        [1, 2],
+        [4, 3],
+      ],
+      expected: false,
+    },
+  ];
+
+  return (
+    <div>
+      <h1>
+        <u>compareArrays(arr1, arr2)</u> - Expected / Actual
+      </h1>
+      {testCases.map(({ arr1, arr2, expected }, index) => {
+        const actual = compareArrays(arr1, arr2);
+        return (
+          <div key={index}>
+            <strong>
+              compareArrays({JSON.stringify(arr1)}, {JSON.stringify(arr2)}) -
+            </strong>
+            <span style={{ color: actual === expected ? 'green' : 'red' }}>
+              {` Expected: ${expected}, Actual: ${actual}`}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/utils/compareArrays/compareArrays.ts

@@ -1,31 +1,31 @@
-import { compareObjects } from '../compareObjects/compareObjects';
-
-// Define a type for any object
-export type AnyObject = Record<string, unknown>;
-
-/**
- * Compare two arrays for equality.
- * This function checks if both arrays contain the same elements in the same order,
- * including nested structures.
- *
- * @param arr1 - The first array to compare.
- * @param arr2 - The second array to compare.
- * @returns - A boolean indicating if the arrays are equal.
- */
-export const compareArrays = (arr1: unknown[], arr2: unknown[]): boolean => {
-  // Check if both are arrays
-  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
-
-  // Check if lengths are different
-  if (arr1.length !== arr2.length) return false;
-
-  // Compare each element
-  return arr1.every((element, index) => {
-    const otherElement = arr2[index];
-    // Recursively compare objects or arrays, or check for strict equality
-    return compareObjects(
-      element as AnyObject | null,
-      otherElement as AnyObject | null
-    );
-  });
-};
+import { compareObjects } from '../compareObjects/compareObjects';
+
+// Define a type for any object
+export type AnyObject = Record<string, unknown>;
+
+/**
+ * Compare two arrays for equality.
+ * This function checks if both arrays contain the same elements in the same order,
+ * including nested structures.
+ *
+ * @param arr1 - The first array to compare.
+ * @param arr2 - The second array to compare.
+ * @returns - A boolean indicating if the arrays are equal.
+ */
+export const compareArrays = (arr1: unknown[], arr2: unknown[]): boolean => {
+  // Check if both are arrays
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
+
+  // Check if lengths are different
+  if (arr1.length !== arr2.length) return false;
+
+  // Compare each element
+  return arr1.every((element, index) => {
+    const otherElement = arr2[index];
+    // Recursively compare objects or arrays, or check for strict equality
+    return compareObjects(
+      element as AnyObject | null,
+      otherElement as AnyObject | null
+    );
+  });
+};

package/src/utils/compareObjects/compareObjects.stories.tsx

@@ -1,51 +1,51 @@
-import { compareObjects } from './compareObjects'; // Adjust the import path as necessary
-
-export default {
-  title: 'Utils/compareObjects',
-  component: compareObjects,
-};
-
-export const Default = () => {
-  const testCases = [
-    {
-      obj1: { a: 1, b: [2, { c: 3 }] },
-      obj2: { a: 1, b: [2, { c: 3 }] },
-      expected: true,
-    },
-    {
-      obj1: { a: 1, b: [2, { c: 3 }] },
-      obj2: { a: 1, b: [3, 2] },
-      expected: false,
-    },
-    {
-      obj1: { a: 1, b: { c: 2 } },
-      obj2: { a: 1, b: { c: 2 } },
-      expected: true,
-    },
-    {
-      obj1: { a: 1, b: { c: 2 } },
-      obj2: { a: 1, b: { c: 3 } },
-      expected: false,
-    },
-    { obj1: null, obj2: null, expected: true },
-    { obj1: { a: null }, obj2: { a: null }, expected: true },
-    { obj1: { a: 1 }, obj2: { a: null }, expected: false },
-    { obj1: {}, obj2: {}, expected: true },
-    { obj1: { a: 0 }, obj2: { a: 0 }, expected: true },
-    { obj1: { a: 0 }, obj2: { a: 1 }, expected: false },
-  ];
-
-  return (
-    <div>
-      <h1>
-        <u>compareObjects(obj1, obj2)</u> - true / false
-      </h1>
-      {testCases.map(({ obj1, obj2, expected }, index) => (
-        <div key={index}>
-          compareObjects({JSON.stringify(obj1)}, {JSON.stringify(obj2)}) -
-          {compareObjects(obj1, obj2) === expected ? ' True' : ' False'}
-        </div>
-      ))}
-    </div>
-  );
-};
+import { compareObjects } from './compareObjects'; // Adjust the import path as necessary
+
+export default {
+  title: 'Utils/compareObjects',
+  component: compareObjects,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      obj1: { a: 1, b: [2, { c: 3 }] },
+      obj2: { a: 1, b: [2, { c: 3 }] },
+      expected: true,
+    },
+    {
+      obj1: { a: 1, b: [2, { c: 3 }] },
+      obj2: { a: 1, b: [3, 2] },
+      expected: false,
+    },
+    {
+      obj1: { a: 1, b: { c: 2 } },
+      obj2: { a: 1, b: { c: 2 } },
+      expected: true,
+    },
+    {
+      obj1: { a: 1, b: { c: 2 } },
+      obj2: { a: 1, b: { c: 3 } },
+      expected: false,
+    },
+    { obj1: null, obj2: null, expected: true },
+    { obj1: { a: null }, obj2: { a: null }, expected: true },
+    { obj1: { a: 1 }, obj2: { a: null }, expected: false },
+    { obj1: {}, obj2: {}, expected: true },
+    { obj1: { a: 0 }, obj2: { a: 0 }, expected: true },
+    { obj1: { a: 0 }, obj2: { a: 1 }, expected: false },
+  ];
+
+  return (
+    <div>
+      <h1>
+        <u>compareObjects(obj1, obj2)</u> - true / false
+      </h1>
+      {testCases.map(({ obj1, obj2, expected }, index) => (
+        <div key={index}>
+          compareObjects({JSON.stringify(obj1)}, {JSON.stringify(obj2)}) -
+          {compareObjects(obj1, obj2) === expected ? ' True' : ' False'}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/utils/compareObjects/compareObjects.ts

@@ -1,53 +1,53 @@
-// Define a type for any object
-export type AnyObject = Record<string, unknown>;
-
-export const compareObjects = (
-  obj1: AnyObject | null,
-  obj2: AnyObject | null
-): boolean => {
-  // Check if both are strictly equal (handles primitive types and same reference)
-  if (obj1 === obj2) return true;
-
-  // Check if either is null or not an object
-  if (
-    obj1 == null ||
-    obj2 == null ||
-    typeof obj1 !== 'object' ||
-    typeof obj2 !== 'object'
-  ) {
-    return false;
-  }
-
-  // Handle array comparison
-  const isArray1 = Array.isArray(obj1);
-  const isArray2 = Array.isArray(obj2);
-  if (isArray1 !== isArray2) return false; // One is an array, the other is not
-
-  // Create arrays of keys for both objects
-  const keys1 = isArray1 ? obj1 : Object.keys(obj1);
-  const keys2 = isArray2 ? obj2 : Object.keys(obj2);
-
-  // Check if the number of keys is different
-  if (keys1.length !== keys2.length) return false;
-
-  // Create a Set for keys2 for O(1) lookups (only for objects)
-  if (!isArray1) {
-    const keysSet2 = new Set<string>(keys2 as string[]);
-
-    // Check each key and value
-    return keys1.every((key) => {
-      return (
-        keysSet2.has(key) &&
-        compareObjects(
-          obj1[key] as AnyObject | null,
-          obj2[key] as AnyObject | null
-        )
-      );
-    });
-  } else {
-    // If arrays, compare elements directly
-    return keys1.every((item, index) =>
-      compareObjects(item as AnyObject | null, keys2[index] as AnyObject | null)
-    );
-  }
-};
+// Define a type for any object
+export type AnyObject = Record<string, unknown>;
+
+export const compareObjects = (
+  obj1: AnyObject | null,
+  obj2: AnyObject | null
+): boolean => {
+  // Check if both are strictly equal (handles primitive types and same reference)
+  if (obj1 === obj2) return true;
+
+  // Check if either is null or not an object
+  if (
+    obj1 == null ||
+    obj2 == null ||
+    typeof obj1 !== 'object' ||
+    typeof obj2 !== 'object'
+  ) {
+    return false;
+  }
+
+  // Handle array comparison
+  const isArray1 = Array.isArray(obj1);
+  const isArray2 = Array.isArray(obj2);
+  if (isArray1 !== isArray2) return false; // One is an array, the other is not
+
+  // Create arrays of keys for both objects
+  const keys1 = isArray1 ? obj1 : Object.keys(obj1);
+  const keys2 = isArray2 ? obj2 : Object.keys(obj2);
+
+  // Check if the number of keys is different
+  if (keys1.length !== keys2.length) return false;
+
+  // Create a Set for keys2 for O(1) lookups (only for objects)
+  if (!isArray1) {
+    const keysSet2 = new Set<string>(keys2 as string[]);
+
+    // Check each key and value
+    return keys1.every((key) => {
+      return (
+        keysSet2.has(key) &&
+        compareObjects(
+          obj1[key] as AnyObject | null,
+          obj2[key] as AnyObject | null
+        )
+      );
+    });
+  } else {
+    // If arrays, compare elements directly
+    return keys1.every((item, index) =>
+      compareObjects(item as AnyObject | null, keys2[index] as AnyObject | null)
+    );
+  }
+};

package/src/utils/debounce/debounce.stories.tsx

@@ -1,81 +1,81 @@
-import { debounce } from './debounce'; // Adjust the import path as necessary
-
-export default {
-  title: 'Utils/debounce',
-  component: debounce,
-};
-
-export const Default = () => {
-  const testCases = [
-    {
-      description: 'Basic function call',
-      expectedOutput: 'Function called! (after delay)',
-      delay: 300,
-      setup: () => {
-        const debouncedFunc = debounce(
-          () => console.log('Function called!'),
-          300
-        );
-        debouncedFunc(); // Call the debounced function
-      },
-      code: `const debouncedFunc = debounce(() => console.log('Function called!'), 300);\ndebouncedFunc();`,
-    },
-    {
-      description: 'Rapid calls within delay',
-      expectedOutput: 'Debounced call! (only once after delay)',
-      delay: 500,
-      setup: () => {
-        const debouncedFunc = debounce(
-          () => console.log('Debounced call!'),
-          500
-        );
-        for (let i = 0; i < 5; i++) {
-          debouncedFunc(); // Call the debounced function multiple times
-        }
-      },
-      code: `const debouncedFunc = debounce(() => console.log('Debounced call!'), 500);\nfor (let i = 0; i < 5; i++) {\n  debouncedFunc();\n}`,
-    },
-    {
-      description: 'Cancel debounced function',
-      expectedOutput: 'Function should not be called if canceled',
-      delay: 200,
-      setup: () => {
-        const debouncedFunc = debounce(
-          () => console.log('Should not be called!'),
-          200
-        );
-        debouncedFunc(); // Call the debounced function
-        debouncedFunc.cancel(); // Cancel the function
-      },
-      code: `const debouncedFunc = debounce(() => console.log('Should not be called!'), 200);\ndebouncedFunc();\ndebouncedFunc.cancel();`,
-    },
-  ];
-
-  return (
-    <div>
-      <h1>
-        <u>debounce(function, delay)</u> - Demonstrating debounce functionality
-      </h1>
-      {testCases.map(
-        ({ description, expectedOutput, delay, setup, code }, index) => (
-          <div key={index}>
-            <h3>{description}</h3>
-            <button
-              onClick={() => {
-                setup(); // Run the setup for the test case
-                setTimeout(() => {
-                  console.log(expectedOutput);
-                }, delay + 100); // Wait a bit longer than the delay to check output
-              }}
-            >
-              Run Test
-            </button>
-            <pre>
-              <code>{code}</code>
-            </pre>
-          </div>
-        )
-      )}
-    </div>
-  );
-};
+import { debounce } from './debounce'; // Adjust the import path as necessary
+
+export default {
+  title: 'Utils/debounce',
+  component: debounce,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      description: 'Basic function call',
+      expectedOutput: 'Function called! (after delay)',
+      delay: 300,
+      setup: () => {
+        const debouncedFunc = debounce(
+          () => console.log('Function called!'),
+          300
+        );
+        debouncedFunc(); // Call the debounced function
+      },
+      code: `const debouncedFunc = debounce(() => console.log('Function called!'), 300);\ndebouncedFunc();`,
+    },
+    {
+      description: 'Rapid calls within delay',
+      expectedOutput: 'Debounced call! (only once after delay)',
+      delay: 500,
+      setup: () => {
+        const debouncedFunc = debounce(
+          () => console.log('Debounced call!'),
+          500
+        );
+        for (let i = 0; i < 5; i++) {
+          debouncedFunc(); // Call the debounced function multiple times
+        }
+      },
+      code: `const debouncedFunc = debounce(() => console.log('Debounced call!'), 500);\nfor (let i = 0; i < 5; i++) {\n  debouncedFunc();\n}`,
+    },
+    {
+      description: 'Cancel debounced function',
+      expectedOutput: 'Function should not be called if canceled',
+      delay: 200,
+      setup: () => {
+        const debouncedFunc = debounce(
+          () => console.log('Should not be called!'),
+          200
+        );
+        debouncedFunc(); // Call the debounced function
+        debouncedFunc.cancel(); // Cancel the function
+      },
+      code: `const debouncedFunc = debounce(() => console.log('Should not be called!'), 200);\ndebouncedFunc();\ndebouncedFunc.cancel();`,
+    },
+  ];
+
+  return (
+    <div>
+      <h1>
+        <u>debounce(function, delay)</u> - Demonstrating debounce functionality
+      </h1>
+      {testCases.map(
+        ({ description, expectedOutput, delay, setup, code }, index) => (
+          <div key={index}>
+            <h3>{description}</h3>
+            <button
+              onClick={() => {
+                setup(); // Run the setup for the test case
+                setTimeout(() => {
+                  console.log(expectedOutput);
+                }, delay + 100); // Wait a bit longer than the delay to check output
+              }}
+            >
+              Run Test
+            </button>
+            <pre>
+              <code>{code}</code>
+            </pre>
+          </div>
+        )
+      )}
+    </div>
+  );
+};

package/src/utils/debounce/debounce.ts

@@ -1,28 +1,28 @@
-type Callback = (...args: any[]) => void;
-
-// Export the DebouncedFunction interface to make it publicly accessible
-export interface DebouncedFunction extends Function {
-  cancel: () => void;
-}
-
-export const debounce = (func: Callback, delay: number): DebouncedFunction => {
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  const debounced: DebouncedFunction = function (this: any, ...args: any[]) {
-    // Clear the previous timeout if it exists
-    if (timeoutId) clearTimeout(timeoutId);
-
-    // Set a new timeout
-    timeoutId = setTimeout(() => {
-      func.apply(this, args);
-    }, delay);
-  };
-
-  // Method to cancel the debounced function
-  debounced.cancel = () => {
-    if (timeoutId) clearTimeout(timeoutId);
-    timeoutId = null;
-  };
-
-  return debounced;
-};
+type Callback = (...args: any[]) => void;
+
+// Export the DebouncedFunction interface to make it publicly accessible
+export interface DebouncedFunction extends Function {
+  cancel: () => void;
+}
+
+export const debounce = (func: Callback, delay: number): DebouncedFunction => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const debounced: DebouncedFunction = function (this: any, ...args: any[]) {
+    // Clear the previous timeout if it exists
+    if (timeoutId) clearTimeout(timeoutId);
+
+    // Set a new timeout
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+
+  // Method to cancel the debounced function
+  debounced.cancel = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = null;
+  };
+
+  return debounced;
+};