pixel-react-excel-sheet 1.2.0

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/ffID/ffID.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ffid } from './ffid'; // Adjust the import path if needed
+import { useState } from 'react';
+
+const meta: Meta<typeof ffid> = {
+  title: 'Utils/ffid',
+  component: ffid,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj;
+
+// Primary story to display a generated ID
+export const Primary: Story = {
+  render: () => {
+    const [generatedId, setGeneratedId] = useState(ffid());
+
+    const regenerateId = () => {
+      setGeneratedId(ffid());
+    };
+
+    return (
+      <div>
+        <h3>Generated Unique ID</h3>
+        <p>{generatedId}</p>
+        <button onClick={regenerateId}>Generate New ID</button>
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/utils/ffID/ffid.ts

@@ -0,0 +1,7 @@
+export const ffid = (): string =>
+  'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char) =>
+    (
+      (char === 'x' ? Math.random() * 16 : ((Math.random() * 16) & 0x3) | 0x8) |
+      0
+    ).toString(16)
+  );

package/src/utils/findAndInsert/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/findAndInsert/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/getEncryptedData/getEncryptedData.stories.tsx

@@ -0,0 +1,55 @@
+// getEncryptData.stories.tsx
+import { useState } from 'react';
+import { getEncryptedData } from './getEncryptedData';
+
+export default {
+  title: 'Utils/getEncryptedData',
+  component: getEncryptedData,
+};
+
+export const InteractivePlayground = () => {
+  const [data, setData] = useState<string>('Sensitive information');
+  const [publicKey, setPublicKey] = useState<string>(`Add your public key`);
+  const [encryptedData, setEncryptedData] = useState<string | null>(null);
+
+  const handleEncrypt = () => {
+    const result = getEncryptedData(data, publicKey);
+    setEncryptedData(result.toString());
+  };
+
+  return (
+    <div>
+      <h1>Interactive Playground for getEncryptData</h1>
+
+      <div>
+        <label htmlFor="data">Data to Encrypt:</label>
+        <input
+          type="text"
+          id="data"
+          value={data}
+          onChange={(e) => setData(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="publicKey">Public Key:</label>
+        <textarea
+          id="publicKey"
+          value={publicKey}
+          onChange={(e) => setPublicKey(e.target.value)}
+          rows={5}
+          cols={50}
+        />
+      </div>
+
+      <button onClick={handleEncrypt}>Encrypt Data</button>
+
+      <h2>Encrypted Data:</h2>
+      {encryptedData ? (
+        <pre>{encryptedData}</pre>
+      ) : (
+        <p>No encrypted data yet. Click "Encrypt Data" to generate it.</p>
+      )}
+    </div>
+  );
+};

package/src/utils/getEncryptedData/getEncryptedData.ts

@@ -0,0 +1,8 @@
+import JSEncrypt from 'jsencrypt';
+
+export const getEncryptedData = (data: string, publicKey: string) => {
+  const encrypt = new JSEncrypt();
+  encrypt.setPublicKey(publicKey);
+  const enData = encrypt.encrypt(data);
+  return enData;
+};

package/src/utils/getExtension/getExtension.stories.tsx

@@ -0,0 +1,23 @@
+import { getExtension } from './getExtension';
+
+export default {
+  title: 'Utils/getExtension',
+  component: getExtension,
+};
+
+export const Default = () => {
+  const testCases = [
+    { value:  'test.txt', expected: 'txt' },
+  ];
+
+  return (
+    <div>
+      {testCases.map((test, index) => (
+        <div key={index}>
+          getExtension( {JSON.stringify(test.value)} ) -
+          {getExtension(test.value) ? 'True' : 'False'}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/utils/getExtension/getExtension.ts

@@ -0,0 +1,28 @@
+type valueType = File | string;
+
+export const getExtension = (value: valueType) => {
+  if (typeof value === 'string' && value.includes('.')) {
+    const extension = value.split('.').pop();
+    return extension !== value ? extension : '';
+  }
+
+  if (value instanceof File) {
+    return value.name.split('.').pop();
+  }
+
+  return '';
+};
+
+export const getExtensionWithPeriod = (value: valueType) => {
+  if (typeof value === 'string' && value.includes('.')) {
+    const extension = value.slice(value.lastIndexOf('.'));
+    return extension !== value ? extension : '';
+  }
+
+  if (value instanceof File) {
+    const extensionIndex = value.name.lastIndexOf('.');
+    return extensionIndex !== -1 ? value.name.slice(extensionIndex) : '';
+  }
+
+  return '';
+};

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