pixel-react 1.0.1 → 1.0.3

package/src/components/MultiSelect/Dropdown.scss

@@ -10,25 +10,27 @@
   box-sizing: border-box;
   margin-block: 4px;
   max-height: 160px;
-  overflow-y: auto; // Change from scroll to auto to avoid arrow buttons
 
-  // WebKit scrollbar styles
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 40px;
-    border-radius: 12px 0px 0px 0px;
-    background: var(--description-text);
+  .ff-multiselect-options-wrapper {
+    max-height: 128px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
 
-    &-track {
-      background: var(--ff-select-scroll-track-bg);
-    }
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
 
-    &-thumb {
-      background: var(--description-text);
-      border-radius: 10px;
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
 
-      &:hover {
-        background: var(--ff-select-scroll-thumb-hove);
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
       }
     }
   }
@@ -53,7 +55,7 @@
 
     .dropdown-option-label {
       @extend .fontMd;
-      color: var(--pop-up-background-blur);
+      color: var(--ff-select-text-color);
     }
     &:hover {
       background-color: var(--hover-color);
@@ -63,4 +65,13 @@
   &:focus {
     outline: none;
   }
+  .select-button-container {
+    box-sizing: border-box;
+    width: 100%;
+    border-top: 1px solid var(--slider-table-color);
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }

package/src/components/MultiSelect/Dropdown.tsx

@@ -1,9 +1,10 @@
-import { forwardRef, useContext } from 'react';
+import { forwardRef, useContext, useMemo } from 'react';
 import { dropdownDefaultCSSData, DropdownProps } from './dropdownTypes';
 
 import './Dropdown.scss';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import Button from '../Button';
 
 const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   (
@@ -13,6 +14,8 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       searchedKeyword = '',
       dropdownPosition = {},
       zIndex,
+      withSelectButton,
+      onSelect,
     },
     ref
   ) => {
@@ -23,19 +26,29 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       : [];
     const { verticalMargin, optionHeight, maxDropdownHeight } =
       dropdownDefaultCSSData;
-    const dropdownHeight = Math.min(
-      filteredOptions.length * optionHeight,
-      maxDropdownHeight
-    );
-    const isEnoughBottomSpaceAvailable =
-      dropdownPosition.fromBottom >= dropdownHeight + verticalMargin;
 
-    const topPosition = isEnoughBottomSpaceAvailable
-      ? dropdownPosition.top
-      : dropdownPosition.top -
-        dropdownHeight -
-        dropdownPosition.selectHeight -
-        2 * verticalMargin;
+    const topPosition = useMemo(() => {
+      let calculatedDropdownHeight = Math.min(
+        filteredOptions.length * optionHeight,
+        maxDropdownHeight
+      );
+
+      if (filteredOptions.length < 5 && withSelectButton) {
+        calculatedDropdownHeight += 32;
+      }
+
+      const isEnoughSpaceAvailable =
+        dropdownPosition.fromBottom >=
+        calculatedDropdownHeight + verticalMargin;
+      const topPosition = isEnoughSpaceAvailable
+        ? dropdownPosition.top
+        : dropdownPosition.top -
+          calculatedDropdownHeight -
+          dropdownPosition.selectHeight -
+          2 * verticalMargin;
+
+      return topPosition;
+    }, [filteredOptions.length, withSelectButton, dropdownPosition]);
     const themeContext = useContext(ThemeContext);
     const currentTheme = themeContext?.currentTheme;
     return (
@@ -52,22 +65,32 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
           zIndex,
         }}
       >
-        {filteredOptions.length === 0 ? (
-          <div className="dropdown-option-container">
-            <p className="no-options">No Option</p>
-          </div>
-        ) : (
-          filteredOptions.map((info) => (
-            <div
-              role="option"
-              className={`dropdown-option-container`}
-              key={info.label}
-              onClick={() => handleOptionChange(info, !info.isChecked)}
-            >
-              <input type="checkbox" checked={info.isChecked} readOnly />
-              <span className="dropdown-option-label">{info.label}</span>
+        <div
+          className="ff-multiselect-options-wrapper"
+          style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
+        >
+          {filteredOptions.length === 0 ? (
+            <div className="dropdown-option-container ">
+              <p className="no-options">No Option</p>
             </div>
-          ))
+          ) : (
+            filteredOptions.map((info) => (
+              <div
+                role="option"
+                className={`dropdown-option-container`}
+                key={info.label}
+                onClick={() => handleOptionChange(info, !info.isChecked)}
+              >
+                <input type="checkbox" checked={info.isChecked} readOnly />
+                <span className="dropdown-option-label">{info.label}</span>
+              </div>
+            ))
+          )}
+        </div>
+        {withSelectButton && filteredOptions.length > 0 && (
+          <div className="select-button-container">
+            <Button label="Select" variant="tertiary" onClick={onSelect} />
+          </div>
         )}
       </div>
     );

package/src/components/MultiSelect/MultiSelect.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 @mixin flex-center($justify: space-between) {
   display: flex;

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -22,17 +22,21 @@ export const Default: Story = {
   args: {
     ...defaultArgs,
     required: true,
+    withSelectButton: true,
+    onSelect: () => {
+      alert('selected');
+    },
     options: [
       { label: 'Apple', value: 'apple' },
       { label: 'Banana', value: 'banana' },
       { label: 'Cherry', value: 'cherry' },
       { label: 'Date', value: 'date' },
       { label: 'Grape', value: 'grape' },
-      { label: 'Kiwi', value: 'kiwi' },
-      { label: 'Mango', value: 'mango' },
-      { label: 'Orange', value: 'orange' },
-      { label: 'Peach', value: 'peach' },
-      { label: 'Strawberry', value: 'strawberry' },
+      // { label: 'Kiwi', value: 'kiwi' },
+      // { label: 'Mango', value: 'mango' },
+      // { label: 'Orange', value: 'orange' },
+      // { label: 'Peach', value: 'peach' },
+      // { label: 'Strawberry', value: 'strawberry' },
     ],
     // selectedOptions: [{ label: 'Apple', value: 'apple' }],
   },

package/src/components/MultiSelect/MultiSelect.tsx

@@ -38,6 +38,8 @@ const MultiSelect = ({
   required = false,
   disabled = false,
   errorMessage = 'Fill this field',
+  withSelectButton = false,
+  onSelect = () => {},
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -249,6 +251,8 @@ const MultiSelect = ({
               options={allOptions}
               dropdownPosition={dropdownPosition}
               zIndex={zIndex}
+              withSelectButton={withSelectButton}
+              onSelect={onSelect}
             />,
             document.body
           )}

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -14,6 +14,8 @@ interface MultiSelectProps {
   zIndex?: number;
   required?: boolean;
   errorMessage?: string;
+  withSelectButton?: boolean;
+  onSelect?: () => void;
 }
 
 export { Option, MultiSelectProps };

package/src/components/MultiSelect/dropdownTypes.ts

@@ -12,4 +12,6 @@ export interface DropdownProps {
   searchedKeyword: undefined | string;
   dropdownPosition: any;
   zIndex: number;
+  withSelectButton?: boolean;
+  onSelect?: () => void;
 }

package/src/components/RadioButton/RadioButton.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/_colors';
-@import '../../assets/styles/_fonts';
+@use '../../assets/styles/_fonts';
 
 @mixin circle($size, $border: none) {
   width: $size;
@@ -16,7 +15,7 @@
 .ff-radio {
   @extend .fontSm;
   position: relative;
-  color: $text-color;
+  color: var(--text-color);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Search/Search.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 
 .ff-search-container {

package/src/components/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/_fonts';
+@use '../../assets/styles/_fonts';
 
 .ff-fixed-header-table {
   overflow-y: auto;

package/src/components/TextArea/Textarea.scss

@@ -1,5 +1,4 @@
-@use '../../assets/styles/colors' as *;
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-textarea-container {
   display: flex;

package/src/components/Toggle/Toggle.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 $switch-sizes: (
   small: (
     button-size: 16px,
@@ -20,10 +21,10 @@ $switch-sizes: (
 );
 
 @mixin switch-size($size) {
-  $button-size: map-get(map-get($switch-sizes, $size), button-size);
-  $container-width: map-get(map-get($switch-sizes, $size), container-width);
-  $container-height: map-get(map-get($switch-sizes, $size), container-height);
-  $translate-x: map-get(map-get($switch-sizes, $size), translate-x);
+  $button-size: map.get(map.get($switch-sizes, $size), button-size);
+  $container-width: map.get(map.get($switch-sizes, $size), container-width);
+  $container-height: map.get(map.get($switch-sizes, $size), container-height);
+  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
 
   width: $container-width;
   height: $container-height;

package/src/components/Tooltip/Tooltip.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-tooltip-container {
   cursor: auto;

package/src/index.ts

@@ -26,7 +26,6 @@ import Typography from './components/Typography';
 import useTheme from './hooks/useTheme';
 import Form from './components/Form';
 
-
 import InputWithDropdown from './components/InputWithDropdown';
 import RadioButton from './components/RadioButton';
 import RadioGroup from './components/RadioGroup';
@@ -35,7 +34,7 @@ import TableTree from './components/TableTree';
 import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
-import Search from './components/Search/Search'
+import Search from './components/Search/Search';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -69,11 +68,9 @@ export {
   useTheme,
   InputWithDropdown,
   Table,
-
   RadioButton,
   RadioGroup,
   Form,
-
   MiniModal,
   Container,
   Row,

package/src/utils/checkEmpty/checkEmpty.stories.tsx

@@ -1,7 +1,7 @@
 import { checkEmpty } from './checkEmpty';
 
 export default {
-  title: 'Utils/isEmptyValue',
+  title: 'Utils/checkEmpty',
   component: checkEmpty,
 };
 

package/src/utils/checkEmpty/checkEmpty.ts

@@ -1,10 +1,24 @@
 type valueType = any;
 
-export const checkEmpty = (value: valueType) => {
-  if (!value) {
-    return true;
-  } else if (typeof value === 'object') {
-    if (Array.isArray(value)) return value.length === 0;
-    else return Object.keys(value).length === 0;
-  } else return false;
+export const checkEmpty = (value: valueType): boolean => {
+  // Check for null or undefined
+  if (value == null) return true;
+
+  // Check for strings
+  if (typeof value === 'string') return value.trim().length === 0;
+
+  // Check for arrays
+  if (Array.isArray(value)) return value.length === 0;
+
+  // Check for objects
+  if (typeof value === 'object') {
+    // Handle Map and Set
+    if (value instanceof Map || value instanceof Set) return value.size === 0;
+
+    // Handle regular objects
+    return Object.keys(value).length === 0;
+  }
+
+  // For all other types (numbers, booleans, etc.), return false as they are not "empty"
+  return false;
 };

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

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

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