pixel-react 1.8.0 → 1.8.1

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

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

@@ -1,33 +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;
-};
+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/src/utils/truncateText/truncateText.stories.tsx

@@ -1,37 +1,37 @@
-import { truncateText } from './truncateText';
-
-export default {
-  title: 'Utils/truncateText',
-  component: truncateText,
-};
-
-export const Default = () => {
-  const testCases = [
-    {
-      text: 'This is a placeholder text that might be too long',
-      maxLength: 25,
-      expected: 'This is a placeholder text...',
-    },
-    { text: 'Short text', maxLength: 25, expected: 'Short text' },
-    { text: 'Another example', maxLength: 10, expected: 'Another ex...' },
-    { text: 'Testing with a long text', maxLength: 5, expected: 'Testi...' },
-    { text: '', maxLength: 10, expected: '' },
-    {
-      text: 'Exactly twenty-five chars!',
-      maxLength: 25,
-      expected: 'Exactly twenty-five chars!',
-    }, 
-  ];
-
-  return (
-    <div>
-      {testCases.map((test, index) => (
-        <div key={index}>
-          truncateText({JSON.stringify(test.text)}, {test.maxLength}) -
-          Expected: {test.expected}, Result:{' '}
-          {truncateText(test.text, test.maxLength)}
-        </div>
-      ))}
-    </div>
-  );
-};
+import { truncateText } from './truncateText';
+
+export default {
+  title: 'Utils/truncateText',
+  component: truncateText,
+};
+
+export const Default = () => {
+  const testCases = [
+    {
+      text: 'This is a placeholder text that might be too long',
+      maxLength: 25,
+      expected: 'This is a placeholder text...',
+    },
+    { text: 'Short text', maxLength: 25, expected: 'Short text' },
+    { text: 'Another example', maxLength: 10, expected: 'Another ex...' },
+    { text: 'Testing with a long text', maxLength: 5, expected: 'Testi...' },
+    { text: '', maxLength: 10, expected: '' },
+    {
+      text: 'Exactly twenty-five chars!',
+      maxLength: 25,
+      expected: 'Exactly twenty-five chars!',
+    }, 
+  ];
+
+  return (
+    <div>
+      {testCases.map((test, index) => (
+        <div key={index}>
+          truncateText({JSON.stringify(test.text)}, {test.maxLength}) -
+          Expected: {test.expected}, Result:{' '}
+          {truncateText(test.text, test.maxLength)}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/utils/truncateText/truncateText.ts

@@ -1,4 +1,4 @@
-export const truncateText = (text: string, maxLength: number): string => {
-  if (!text || maxLength <= 0) return ''; 
-  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
-};
+export const truncateText = (text: string, maxLength: number): string => {
+  if (!text || maxLength <= 0) return ''; 
+  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+};

package/src/utils/validateFile/validateFile.stories.tsx

@@ -1,49 +1,49 @@
-import React, { useState } from 'react';
-import {
-  validateFileExtension,
-  validateZipFileExtension,
-} from './validateFile';
-
-export default {
-  title: 'Utils/validateFile',
-};
-
-const allowedFileTypes = {
-  '.txt': 'text/plain',
-  '.zip': 'application/zip',
-  '.jpg': 'image/jpeg',
-};
-
-export const ValidateFileExtension = () => {
-  const [result, setResult] = useState<string | boolean>('');
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const isValid = validateFileExtension(event, allowedFileTypes);
-    setResult(isValid ? 'Valid file type' : 'Invalid file type');
-  };
-
-  return (
-    <div>
-      <h3>Validate File Extension</h3>
-      <input type="file" onChange={handleFileChange} />
-      <p>Result: {result.toString()}</p>
-    </div>
-  );
-};
-
-export const ValidateZipFileExtension = () => {
-  const [result, setResult] = useState<string | boolean>('');
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const isValid = validateZipFileExtension(event);
-    setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
-  };
-
-  return (
-    <div>
-      <h3>Validate ZIP File Extension</h3>
-      <input type="file" onChange={handleFileChange} />
-      <p>Result: {result.toString()}</p>
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import {
+  validateFileExtension,
+  validateZipFileExtension,
+} from './validateFile';
+
+export default {
+  title: 'Utils/validateFile',
+};
+
+const allowedFileTypes = {
+  '.txt': 'text/plain',
+  '.zip': 'application/zip',
+  '.jpg': 'image/jpeg',
+};
+
+export const ValidateFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateFileExtension(event, allowedFileTypes);
+    setResult(isValid ? 'Valid file type' : 'Invalid file type');
+  };
+
+  return (
+    <div>
+      <h3>Validate File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};
+
+export const ValidateZipFileExtension = () => {
+  const [result, setResult] = useState<string | boolean>('');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const isValid = validateZipFileExtension(event);
+    setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
+  };
+
+  return (
+    <div>
+      <h3>Validate ZIP File Extension</h3>
+      <input type="file" onChange={handleFileChange} />
+      <p>Result: {result.toString()}</p>
+    </div>
+  );
+};

package/src/utils/validateFile/validateFile.ts

@@ -1,39 +1,39 @@
-export const validateFileExtension = (
-  file: File | React.ChangeEvent<HTMLInputElement>,
-  allowedFileTypes: Record<string, string>
-) => {
-  const selectedFile =
-    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
-    (file as File);
-  const fileExtension =
-    '.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
-  const fileType = selectedFile?.type;
-  if (
-    ['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
-      fileExtension
-    ) &&
-    Object.keys(allowedFileTypes)?.includes(fileExtension)
-  ) {
-    return true;
-  }
-  return (
-    allowedFileTypes[fileExtension] &&
-    fileType === allowedFileTypes[fileExtension]
-  );
-};
-
-export const validateZipFileExtension = (
-  file: File | React.ChangeEvent<HTMLInputElement>
-) => {
-  const selectedFile =
-    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
-    (file as File);
-  // List of valid MIME types
-  const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
-  // Validating the file extension and MIME type
-  return (
-    selectedFile &&
-    validMimeTypes?.includes(selectedFile?.type) &&
-    selectedFile?.name?.toLowerCase()?.endsWith('.zip')
-  );
-};
+export const validateFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>,
+  allowedFileTypes: Record<string, string>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  const fileExtension =
+    '.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
+  const fileType = selectedFile?.type;
+  if (
+    ['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
+      fileExtension
+    ) &&
+    Object.keys(allowedFileTypes)?.includes(fileExtension)
+  ) {
+    return true;
+  }
+  return (
+    allowedFileTypes[fileExtension] &&
+    fileType === allowedFileTypes[fileExtension]
+  );
+};
+
+export const validateZipFileExtension = (
+  file: File | React.ChangeEvent<HTMLInputElement>
+) => {
+  const selectedFile =
+    (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
+    (file as File);
+  // List of valid MIME types
+  const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
+  // Validating the file extension and MIME type
+  return (
+    selectedFile &&
+    validMimeTypes?.includes(selectedFile?.type) &&
+    selectedFile?.name?.toLowerCase()?.endsWith('.zip')
+  );
+};

package/tsconfig.json

@@ -1,55 +1,55 @@
-{
-  "compilerOptions": {
-    /* Language and Environment */
-    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
-
-    /* Modules */
-    "module": "ESNext" /* Specify what module code is generated. */,
-    "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
-
-    /* JavaScript Support */
-    "allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
-    "maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
-
-    /* Emit */
-    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
-    // "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
-    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
-    "outDir": "lib" /* Specify an output folder for all emitted files. */,
-    "declarationDir": "lib" /* Specify the output directory for generated declaration files. */,
-
-    /* Interop Constraints */
-    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
-    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
-    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-
-    /* Type Checking */
-    "strict": true /* Enable all strict type-checking options. */,
-    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
-    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
-    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
-    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
-    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
-    "allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
-
-    /* Completeness */
-    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
-    "types": ["vite-plugin-svgr/client"],
-    "noEmit": true,
-
-    //Able to import json file with alias name
-    "resolveJsonModule": true
-
-    // Path alias
-    // "paths": {
-    //   "@components": ["./src/components/"],
-    //   "@styles": ["./src/assets/styles/"],
-    //   "@icons": ["./src/assets/icons/"],
-    //   "@/*": ["./src/*"]
-    // }
-  },
-
-  "include": ["src"],
-  "exclude": ["node_modules", "lib", "**/*.stories.tsx"]
-}
+{
+  "compilerOptions": {
+    /* Language and Environment */
+    "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+
+    /* Modules */
+    "module": "ESNext" /* Specify what module code is generated. */,
+    "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+
+    /* JavaScript Support */
+    "allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+    "maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
+
+    /* Emit */
+    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+    // "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
+    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
+    "outDir": "lib" /* Specify an output folder for all emitted files. */,
+    "declarationDir": "lib" /* Specify the output directory for generated declaration files. */,
+
+    /* Interop Constraints */
+    "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
+
+    /* Completeness */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "types": ["vite-plugin-svgr/client"],
+    "noEmit": true,
+
+    //Able to import json file with alias name
+    "resolveJsonModule": true
+
+    // Path alias
+    // "paths": {
+    //   "@components": ["./src/components/"],
+    //   "@styles": ["./src/assets/styles/"],
+    //   "@icons": ["./src/assets/icons/"],
+    //   "@/*": ["./src/*"]
+    // }
+  },
+
+  "include": ["src"],
+  "exclude": ["node_modules", "lib", "**/*.stories.tsx"]
+}