pixel-react 1.6.8 → 1.6.9

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

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

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

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

@@ -1,28 +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 '';
-};
+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/getSelectOptionValue/getSelectOptionValue.ts

@@ -1,31 +1,31 @@
-type DynamicValues = any;
-
-interface dynamicObject {
-  [key: string]: DynamicValues;
-}
-
-type accessorType = string | undefined;
-
-export const getLabel = (
-  option: dynamicObject,
-  accessor: accessorType = ''
-) => {
-  if (!accessor) {
-    if (option.hasOwnProperty('label')) {
-      return option.label;
-    }
-  }
-  return option[accessor];
-};
-
-export const getValue = (
-  option: dynamicObject,
-  accessor: accessorType = ''
-) => {
-  if (!accessor) {
-    if (option.hasOwnProperty('value')) {
-      return option.value;
-    }
-  }
-  return option[accessor];
-};
+type DynamicValues = any;
+
+interface dynamicObject {
+  [key: string]: DynamicValues;
+}
+
+type accessorType = string | undefined;
+
+export const getLabel = (
+  option: dynamicObject,
+  accessor: accessorType = ''
+) => {
+  if (!accessor) {
+    if (option.hasOwnProperty('label')) {
+      return option.label;
+    }
+  }
+  return option[accessor];
+};
+
+export const getValue = (
+  option: dynamicObject,
+  accessor: accessorType = ''
+) => {
+  if (!accessor) {
+    if (option.hasOwnProperty('value')) {
+      return option.value;
+    }
+  }
+  return option[accessor];
+};