pixel-react 1.10.15 → 1.10.16

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

@@ -1,62 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-// 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 +0,0 @@
-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 +0,0 @@
-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/downloadFile/saveFileFromBlob.stories.tsx

@@ -1,62 +0,0 @@
-import { saveFileFromBlob } from './saveFileFromBlob';
-import { Toastify, toast } from '../../components/Toastify/Toastify';
-
-export default {
-  title: 'Utils/saveFileFromBlob',
-  component: saveFileFromBlob,
-};
-
-export const Default = () => {
-  const testCases = [
-    {
-      blob: new Blob(['Hello, world!'], { type: 'text/plain' }),
-      filename: 'hello.txt',
-    },
-    {
-      blob: new Blob(['{ "key": "value" }'], { type: 'application/json' }),
-      filename: 'data.json',
-    },
-    {
-      blob: null,
-      filename: 'invalid.txt',
-      expectedError: 'Invalid Blob object',
-    },
-  ];
-
-  const handleDownload = (blob: Blob | null, filename: string) => {
-    try {
-      if (blob instanceof Blob) {
-        saveFileFromBlob(blob, filename);
-        toast.success(`File "${filename}" downloaded successfully!`);
-      } else {
-        throw new Error('Invalid Blob object');
-      }
-    } catch (error: any) {
-      toast.error(error.message);
-    }
-  };
-
-  return (
-    <>
-      <div>
-        <h1>saveFileFromBlob - Test Cases</h1>
-        {testCases.map(({ blob, filename, expectedError }, index) => (
-          <div key={index} style={{ marginBottom: '1rem' }}>
-            <button
-              onClick={() => handleDownload(blob as Blob, filename)}
-              style={{ marginRight: '1rem' }}
-            >
-              Download {filename}
-            </button>
-            {expectedError && (
-              <span style={{ color: 'red' }}>
-                Expected Error: {expectedError}
-              </span>
-            )}
-          </div>
-        ))}
-      </div>
-      <Toastify />
-    </>
-  );
-};

package/src/utils/downloadFile/saveFileFromBlob.ts

@@ -1,40 +0,0 @@
-// saveFileFromBlob.ts
-
-/**
- * Save a file from a Blob object.
- * This utility handles downloading files in browsers, including IE support.
- *
- * @param blob - The Blob object representing the file.
- * @param filename - The name of the file to save.
- */
-interface NavigatorWithMsSaveBlob extends Navigator {
-  msSaveOrOpenBlob?: (_blob: Blob, _filename: string) => void;
-}
-
-export const saveFileFromBlob = (blob: Blob, filename: string): void => {
-  if (!blob || !(blob instanceof Blob)) {
-    console.error('Invalid Blob object');
-    throw new Error('Invalid Blob object');
-  }
-
-  const navigatorWithMsSaveBlob = window.navigator as NavigatorWithMsSaveBlob;
-
-  if (navigatorWithMsSaveBlob.msSaveOrOpenBlob) {
-    const saveBlob = navigatorWithMsSaveBlob.msSaveOrOpenBlob;
-    if (saveBlob) {
-      saveBlob(blob, filename);
-    }
-  } else {
-    // For modern browsers
-    const anchorElement = document.createElement('a');
-    document.body.appendChild(anchorElement);
-    const objectURL = window.URL.createObjectURL(blob);
-    anchorElement.href = objectURL;
-    anchorElement.download = filename;
-    anchorElement.click();
-    setTimeout(() => {
-      window.URL.revokeObjectURL(objectURL);
-      document.body.removeChild(anchorElement);
-    }, 0);
-  }
-};

package/src/utils/ffID/ffID.stories.tsx

@@ -1,35 +0,0 @@
-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

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

@@ -1,120 +0,0 @@
-// findAndInsert.stories.tsx
-import { useState } from 'react';
-import { findAndInsert, AnyObject } from './findAndInsert';
-import React from 'react';
-
-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

@@ -1,49 +0,0 @@
-// 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/formData/ConvertFormDataToObject.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { convertFormDataToObject } from './ConvertFormDataToObject';
-
-export default {
-  title: 'Utils/convertFormDataToObject',
-  component: convertFormDataToObject,
-};
-
-export const Default = () => {
-  const formData = new FormData();
-  formData.append('username', 'Md Imran');
-  formData.append('email', 'im@xyz.com');
-  formData.append('age', '23');
-
-  const result = convertFormDataToObject(formData);
-
-  return (
-    <div>
-      <h3>Test convertFormDataToObject</h3>
-      <pre>
-        Convertion to an Array to show existing FormData:
-        {JSON.stringify(Array.from(formData.entries()), null, 2)}
-      </pre>
-      <pre>Result: {JSON.stringify(result, null, 2)}</pre>
-    </div>
-  );
-};

package/src/utils/formData/ConvertFormDataToObject.ts

@@ -1,14 +0,0 @@
-export const convertFormDataToObject = (formData: FormData): Record<string, any> => {
-  const obj: Record<string, any> = {};
-  formData.forEach((value, key) => {
-    if (obj[key]) {
-      // If the key already exists, convert it to an array
-      obj[key] = Array.isArray(obj[key])
-        ? [...obj[key], value]
-        : [obj[key], value];
-    } else {
-      obj[key] = value;
-    }
-  });
-  return obj;
-};

package/src/utils/functionCheck/functionCheck.ts

@@ -1,8 +0,0 @@
-import { checkEmpty } from '../checkEmpty/checkEmpty';
-
-const functionCheck = (functionToCheck: any) =>
-  !checkEmpty(functionToCheck) &&
-  functionToCheck &&
-  {}.toString.call(functionToCheck) === '[object Function]';
-
-export default functionCheck;

package/src/utils/getAnchorElement/getAnchorElement.ts

@@ -1,7 +0,0 @@
-// Helper function to get the anchor element
-export const getAnchorElement = (anchorRef: React.RefObject<HTMLElement> | string) => {
-  if (typeof anchorRef === 'string') {
-    return document.getElementById(anchorRef);
-  }
-  return anchorRef?.current || null;
-};