pixel-react 1.0.0 → 1.0.2

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

@@ -0,0 +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>
+  );
+};

package/src/utils/compareArrays/compareArrays.ts

@@ -0,0 +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
+    );
+  });
+};

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

@@ -0,0 +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>
+  );
+};

package/src/utils/compareObjects/compareObjects.ts

@@ -0,0 +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)
+    );
+  }
+};

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

@@ -0,0 +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>
+  );
+};

package/src/utils/debounce/debounce.ts

@@ -0,0 +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;
+};

package/src/utils/find/findAndInsert.stories.tsx

@@ -0,0 +1,119 @@
+// findAndInsert.stories.tsx
+import { useState } from 'react';
+import { findAndInsert, AnyObject } from './findAndInsert';
+
+export default {
+  title: 'Utils/findAndInsert',
+  component: findAndInsert,
+};
+
+const initialData: AnyObject[] = [
+  { id: 1, name: 'Object 1' },
+  {
+    id: 2,
+    name: 'Object 2',
+    children: [
+      { id: 3, name: 'Child 1', children: [{ id: 5, name: 'SubChild 1' }] },
+      { id: 4, name: 'Child 2' },
+    ],
+  },
+];
+
+export const InteractivePlayground = () => {
+  const [data, setData] = useState<AnyObject[]>(initialData);
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [newEntryName, setNewEntryName] = useState<string>('New Object');
+  const [insertPosition, setInsertPosition] = useState<
+    'above' | 'below' | 'replace'
+  >('below');
+
+  const handleInsert = () => {
+    if (selectedId !== null) {
+      const newEntry = { id: Date.now(), name: newEntryName };
+      const result = findAndInsert(
+        data,
+        'id',
+        selectedId,
+        newEntry,
+        insertPosition,
+        'children'
+      );
+      if (result) {
+        setData(result.updatedArray);
+      } else {
+        alert('Item not found in nested structure');
+      }
+    }
+  };
+
+  const generateOptions = (
+    data: AnyObject[],
+    prefix = ''
+  ): { id: number; label: string }[] => {
+    const options: { id: number; label: string }[] = [];
+    function recurse(items: AnyObject[], levelPrefix: string) {
+      items.forEach((item) => {
+        options.push({
+          id: item.id,
+          label: `${levelPrefix}${item.name} (ID: ${item.id})`,
+        });
+        if (item.children) recurse(item.children, `${levelPrefix}- `);
+      });
+    }
+    recurse(data, prefix);
+    return options;
+  };
+
+  const options = generateOptions(data);
+
+  return (
+    <div>
+      <h1>Interactive Playground for findAndInsert</h1>
+      <label htmlFor="targetId">Select Object:</label>
+      <select
+        id="targetId"
+        onChange={(e) => setSelectedId(Number(e.target.value))}
+        value={selectedId !== null ? selectedId : ''}
+      >
+        <option value="" disabled>
+          Select an object
+        </option>
+        {options.map((option) => (
+          <option key={option.id} value={option.id}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+
+      <div>
+        <label htmlFor="newEntryName">New Entry Name:</label>
+        <input
+          type="text"
+          id="newEntryName"
+          value={newEntryName}
+          onChange={(e) => setNewEntryName(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="insertPosition">Insert Position:</label>
+        <select
+          id="insertPosition"
+          value={insertPosition}
+          onChange={(e) =>
+            setInsertPosition(e.target.value as 'above' | 'below' | 'replace')
+          }
+        >
+          <option value="above">Above</option>
+          <option value="below">Below</option>
+          <option value="replace">Replace</option>
+        </select>
+      </div>
+
+      <button onClick={handleInsert}>Insert Entry</button>
+
+      <h2>Current Data:</h2>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};

package/src/utils/find/findAndInsert.ts

@@ -0,0 +1,49 @@
+// findAndInsert.ts
+export type AnyObject = { id: number; [key: string]: any };
+
+export function findAndInsert<T extends AnyObject>(
+  data: T[],
+  key: keyof T,
+  targetId: number,
+  newEntry: T,
+  insertPosition: 'above' | 'below' | 'replace',
+  childrenKey: string = 'children' // Allow dynamic key for nested children
+): { updatedArray: T[] } | null {
+  function recursiveSearch(items: T[]): { updatedArray: T[] } | null {
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+
+      // Check if the item matches the target id
+      if (item && item[key] === targetId) {
+        const updatedItems = [...items];
+
+        if (insertPosition === 'replace') {
+          updatedItems[i] = newEntry; // Replace the current item
+        } else {
+          // Insert above or below
+          updatedItems.splice(
+            insertPosition === 'above' ? i : i + 1,
+            0,
+            newEntry
+          );
+        }
+
+        return { updatedArray: updatedItems };
+      }
+
+      // Dynamically check nested children using the `childrenKey`
+      if (item && item[childrenKey] && Array.isArray(item[childrenKey])) {
+        const result = recursiveSearch(item[childrenKey] as T[]);
+        if (result) {
+          return {
+            updatedArray: items.map((x, idx) =>
+              idx === i ? { ...x, [childrenKey]: result.updatedArray } : x
+            ),
+          };
+        }
+      }
+    }
+    return null;
+  }
+  return recursiveSearch(data);
+}

package/src/utils/throttle/throttle.stories.tsx

@@ -0,0 +1,100 @@
+import { throttle } from './throttle'; // Adjust the import path as necessary
+
+export default {
+  title: 'Utils/throttle',
+  component: throttle,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      description: 'Basic function call',
+      expectedOutput: 'Function called! (at most once every 300ms)',
+      limit: 300,
+      setup: () => {
+        const throttledFunc = throttle(
+          () => console.log('Function called!'),
+          300
+        );
+        for (let i = 0; i < 5; i++) {
+          throttledFunc(); // Call the throttled function multiple times
+        }
+      },
+      code: `const throttledFunc = throttle(() => console.log('Function called!'), 300);\nfor (let i = 0; i < 5; i++) {\n  throttledFunc();\n}`,
+    },
+    {
+      description: 'Throttling with rapid calls',
+      expectedOutput: 'Function called! (at most once every 500ms)',
+      limit: 500,
+      setup: () => {
+        const throttledFunc = throttle(
+          () => console.log('Throttled call!'),
+          500
+        );
+        for (let i = 0; i < 10; i++) {
+          throttledFunc(); // Call the throttled function rapidly
+        }
+      },
+      code: `const throttledFunc = throttle(() => console.log('Throttled call!'), 500);\nfor (let i = 0; i < 10; i++) {\n  throttledFunc();\n}`,
+    },
+    {
+      description: 'Cancel throttled function',
+      expectedOutput: 'Function should not be called if canceled',
+      limit: 200,
+      setup: () => {
+        const throttledFunc = throttle(
+          () => console.log('Should not be called!'),
+          200
+        );
+        throttledFunc(); // Call the throttled function
+        throttledFunc.cancel(); // Cancel the function
+      },
+      code: `const throttledFunc = throttle(() => console.log('Should not be called!'), 200);\nthrottledFunc();\nthrottledFunc.cancel();`,
+    },
+    {
+      description: 'Scroll event handling',
+      expectedOutput: 'Scroll event handled (at most once every 400ms)',
+      limit: 400,
+      setup: () => {
+        const throttledScroll = throttle(
+          () => console.log('Scroll event handled'),
+          400
+        );
+
+        // Simulating rapid scroll events
+        for (let i = 0; i < 10; i++) {
+          throttledScroll(); // Simulate scroll event
+        }
+      },
+      code: `const throttledScroll = throttle(() => console.log('Scroll event handled'), 400);\nfor (let i = 0; i < 10; i++) {\n  throttledScroll();\n}`,
+    },
+  ];
+
+  return (
+    <div>
+      <h1>
+        <u>throttle(function, limit)</u> - Demonstrating throttle functionality
+      </h1>
+      {testCases.map(
+        ({ description, expectedOutput, limit, setup, code }, index) => (
+          <div key={index}>
+            <h3>{description}</h3>
+            <button
+              onClick={() => {
+                setup(); // Run the setup for the test case
+                setTimeout(() => {
+                  console.log(expectedOutput);
+                }, limit + 100); // Wait a bit longer than the limit to check output
+              }}
+            >
+              Run Test
+            </button>
+            <pre>
+              <code>{code}</code>
+            </pre>
+          </div>
+        )
+      )}
+    </div>
+  );
+};

package/src/utils/throttle/throttle.ts

@@ -0,0 +1,33 @@
+type Callback = (...args: any[]) => void;
+
+export interface ThrottledFunction extends Function {
+  cancel: () => void;
+}
+
+export const throttle = (func: Callback, limit: number): ThrottledFunction => {
+  let lastFunc: ReturnType<typeof setTimeout> | null;
+  let lastRan: number | null = null;
+
+  const throttled: ThrottledFunction = function (this: any, ...args: any[]) {
+    const context = this;
+    if (lastRan === null || Date.now() - lastRan >= limit) {
+      func.apply(context, args);
+      lastRan = Date.now();
+    } else {
+      if (lastFunc) clearTimeout(lastFunc);
+      lastFunc = setTimeout(() => {
+        func.apply(context, args);
+        lastRan = Date.now();
+      }, limit - (Date.now() - lastRan));
+    }
+  };
+
+  // Method to cancel the throttled function
+  throttled.cancel = () => {
+    if (lastFunc) clearTimeout(lastFunc);
+    lastFunc = null;
+    lastRan = null;
+  };
+
+  return throttled;
+};

package/vite.config.js

@@ -4,27 +4,11 @@ import svgrPlugin from 'vite-plugin-svgr';
 
 export default {
   plugins: [
-    react(),
+    react({ fastRefresh: false }),
     svgrPlugin({
       svgrOptions: {
         icon: true,
       },
     }),
   ],
-
-  // resolve: {
-  //   alias: {
-  //     '@components': path.resolve(__dirname, './src/components'),
-  //     '@styles': path.resolve(__dirname, './src/assets/styles'),
-  //     '@icons': path.resolve(__dirname, './src/assets/icons'),
-  //   },
-  // },
-
-  // css: {
-  //   preprocessorOptions: {
-  //     scss: {
-  //       additionalData: `@import "./src/assets/styles/_colors.scss";`,
-  //     },
-  //   },
-  // },
 };