pixel-react 1.8.2 → 1.8.4

package/src/utils/downloadFile/saveFileFromBlob.stories.tsx

@@ -1,62 +1,62 @@
-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 />
-    </>
-  );
-};
+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 +1,40 @@
-// 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);
-  }
-};
+// 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 +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;
+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 +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)
-  );
+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,119 +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>
-  );
-};
+// 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

@@ -1,49 +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);
-}
+// 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

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

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