pixel-react 1.8.3 → 1.8.5

package/src/components/Excel/ExcelFile.stories.tsx

@@ -133,34 +133,26 @@ export const Default: Story = {
       ],
     },
     toolbar: 'show',
-    contextOption: [
-      {
-        name: 'first option',
-        title: 'Custom Option 1: Get Data',
-        action: () => {},
-      },
-      {
-        name: 'second option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-      {
-        name: 'third option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-      {
-        name: 'fourth option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-      {
-        name: 'fifth option',
-        title: 'Custom Option 2',
-        action: () => {},
-      },
-    ],
-    sheetHeight:"300px",
+    contextOption: {
+      open: true,
+      options: [
+        {
+          label: 'Get data from Header',
+          value: 'Get data from Header',
+          iconName: 'success',
+          action: () => {},
+        },
+        {
+          label: 'Get Cell Value',
+          value: 'Get Cell Value',
+          iconName: 'success',
+          action: () => {},
+        },
+      ],
+    },
+    contextHeightPositioning: -220,
+    contextWidthPositioning: -180,
+    sheetHeight: '300px',
     onSave: () => {},
   },
 };

package/src/components/Excel/Types.ts

@@ -43,7 +43,7 @@ type BackendStyle = {
   color: string;
   backgroundColor: string;
   borderColor: string;
-  underline:string;
+  underline: string;
   border: {
     top: string;
     bottom: string;
@@ -79,20 +79,6 @@ interface ContextOption {
   value: ContextAction[];
 }
 
-interface ContextMenuState {
-  /** Whether the context menu is visible */
-  visible: boolean;
-
-  /** X-coordinate position for the context menu */
-  x: number;
-
-  /** Y-coordinate position for the context menu */
-  y: number;
-
-  /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
-  type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
-}
-
 interface SelectedCell {
   /** The row index of the selected cell */
   row: number;
@@ -112,6 +98,22 @@ interface ColorContainer {
   borderColor: string;
 }
 
+interface ContextMenuState {
+  open: boolean;
+  position: {
+    x: number;
+    y: number;
+  };
+  options: optionsType[];
+}
+
+interface optionsType {
+  label: string;
+  value: string;
+  iconName: string;
+  action: () => void;
+}
+
 interface SelectedValue {
   /** The value inside the selected cell */
   value: string;

package/src/components/Icon/iconList.ts

@@ -253,6 +253,10 @@ import suitesIcon from '../../assets/icons/suites_icon.svg?react';
 import executionsIcon from '../../assets/icons/executions_icon.svg?react';
 import ImportIcon from '../../assets/icons/import_icon.svg?react';
 import Settings from '../../assets/icons/settings.svg?react';
+import UnfollowIcon from '../../assets/icons/unfollow_icon.svg?react';
+import ExternalUser from '../../assets/icons/external_user.svg?react';
+import SingleUser from '../../assets/icons/single_user.svg?react';
+import GroupUser from '../../assets/icons/group_user.svg?react';
 import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
 
 Components['success'] = ToastSuccessIcon;
@@ -503,5 +507,9 @@ Components['suites_icon'] = suitesIcon;
 Components['import_icon'] = ImportIcon;
 Components['settings'] = Settings;
 Components['test_freshers_logo']=TestFreshersLogo;
+Components['unfollow_icon']=UnfollowIcon
+Components['external_user'] = ExternalUser;
+Components['single_user'] = SingleUser;
+Components['group_user'] = GroupUser;
 
 export default Components;

package/src/components/Modal/Modal.stories.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Modal from './Modal';
 import Button from '../Button';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
@@ -34,6 +35,12 @@ export const DefaultModalStory: Story = {
 export const Controlled: Story = {
   render: () => {
     const [openModal, setModal] = useState(false);
+    useKeyboardActions([
+      {
+        key: 'Enter',
+        action: () => alert('Enter key was pressed.'),
+      },
+    ]);
     return (
       <>
         <Button

package/src/components/Modal/Modal.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import { useKeyboardActions } from '../../utils/keyBoardActionUtil/UseKeyboardActions';
 
 const Modal: React.FC<ModalProps> = ({
   isOpen,
@@ -26,27 +27,23 @@ const Modal: React.FC<ModalProps> = ({
   border = '',
   background='',
 }) => {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && shouldCloseOnEsc) {
-        onClose();
-      }
-    };
 
-    if (isOpen) {
-      document.addEventListener('keydown', handleKeyDown);
-      if (ariaHideApp) {
-        document.body.style.overflow = 'hidden';
-      }
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      if (ariaHideApp) {
-        document.body.style.overflow = '';
-      }
-    };
-  }, [isOpen, onClose, ariaHideApp, shouldCloseOnEsc]);
+ useKeyboardActions(
+   shouldCloseOnEsc && isOpen
+     ? [
+         {
+           key: 'Escape',
+           action: onClose,
+         },
+       ]
+     : []
+ );
 
+ if (!isOpen) return null;
+
+ if (ariaHideApp) {
+   document.body.style.overflow = isOpen ? 'hidden' : '';
+ }
   if (!isOpen) return null;
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;

package/src/components/Select/Select.stories.tsx

@@ -352,4 +352,89 @@ export const IconOptionSelection: Story = {
   },
 };
 
+export const SelectWithPlaceHolder: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: '',
+      value: '',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        placeHolder="Search"
+        showLabel={false}
+        label="test"
+      />
+    );
+  },
+};
+
+export const SelectWithToolTip: Story = {
+  render: () => {
+    const optionsList = [
+      {
+        label: 'fire-flink-LIC4900-onPrem',
+        value: 'fire-flink-LIC4900-onPrem',
+      },
+      {
+        label: 'fire-flink-LIC3179',
+        value: 'fire-flink-LIC3179',
+      },
+      {
+        label: 'fire-flink-LIC4937',
+        value: 'fire-flink-LIC4937',
+      },
+      {
+        label: 'fire-flink-LIC4999',
+        value: 'fire-flink-LIC4999',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: '',
+      value: '',
+    });
+
+    const handleChange = (option: Option) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <Select
+        optionsList={optionsList}
+        selectedOption={selectedOption}
+        onChange={handleChange}
+        label="Select Option"
+        showToolTip={true}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/Select/Select.tsx

@@ -2,7 +2,7 @@ import { ChangeEvent, FC, useEffect, useRef, useState } from 'react';
 import './Select.scss';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { DrowdownPosition, Option, SelectProps } from './types';
+import { DropdownPosition, Option, SelectProps } from './types';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import Dropdown from './components/Dropdown';
@@ -31,6 +31,8 @@ const Select: FC<SelectProps> = ({
   onBlur = () => {},
   disableInput = false,
   showIcon = false,
+  placeHolder = '',
+  showToolTip = false,
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
 
@@ -41,7 +43,7 @@ const Select: FC<SelectProps> = ({
   });
   const { searchedText, searchedIcon } = searchedOption;
   const [selectOptionList, setSelectOptionList] = useState<Option[] | []>([]);
-  const [dropdownPosition, setDropdownPosition] = useState<DrowdownPosition>({
+  const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({
     positionX: 0,
     positionY: 0,
     width: 0,
@@ -170,6 +172,10 @@ const Select: FC<SelectProps> = ({
     setSelectOptionList(optionsList);
   }, [optionsList]);
 
+  if (showLabel) {
+    placeHolder = '';
+  }
+
   return (
     <div
       className={`ff-select-wrapper ${className}`}
@@ -206,6 +212,7 @@ const Select: FC<SelectProps> = ({
           disabled={disabled}
           onChange={handleChange}
           readOnly={disableInput}
+          placeholder={placeHolder}
         />
         {optionsRequired && (
           <div
@@ -266,6 +273,7 @@ const Select: FC<SelectProps> = ({
                 heightFromTop={height}
                 selectedOption={searchedText}
                 showIcon={showIcon}
+                showToolTip={showToolTip}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Icon from '../../Icon';
+import Tooltip from '../../Tooltip';
 
 const Dropdown: FC<DropdownProps> = ({
   options = [],
@@ -26,6 +27,7 @@ const Dropdown: FC<DropdownProps> = ({
   selectedOption,
   valueAccessor,
   showIcon = false,
+  showToolTip = false,
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -72,22 +74,28 @@ const Dropdown: FC<DropdownProps> = ({
       return label;
     }
     return (
-      <Typography
-        as="div"
-        lineHeight="30px"
-        color="var(--ff-select-text-color)"
-        className={classNames({
-          'ff-select-dropdown-icon-container': showIcon,
-        })}
+      <Tooltip
+        placement="bottom"
+        title={showToolTip ? label : ''}
+        zIndex={optionZIndex + 1}
       >
-        {showIcon && (
-          <Icon
-            name={icon}
-            className="ff-select-dropdown-icon-container__icon"
-          />
-        )}
-        {label}
-      </Typography>
+        <Typography
+          as="div"
+          lineHeight="30px"
+          color="var(--ff-select-text-color)"
+          className={classNames({
+            'ff-select-dropdown-icon-container': showIcon,
+          })}
+        >
+          {showIcon && (
+            <Icon
+              name={icon}
+              className="ff-select-dropdown-icon-container__icon"
+            />
+          )}
+          {label}
+        </Typography>
+      </Tooltip>
     );
   };
 

package/src/components/Select/components/types.ts

@@ -1,9 +1,9 @@
-import { DrowdownPosition, Option } from '../types';
+import { DropdownPosition, Option } from '../types';
 import { RefObject } from 'react';
 
 export interface DropdownProps {
   options: Option[];
-  dropdownPosition: DrowdownPosition;
+  dropdownPosition: DropdownPosition;
   optionZIndex: number;
   labelAccessor?: string;
   valueAccessor?: string;
@@ -14,6 +14,7 @@ export interface DropdownProps {
   heightFromTop: number;
   selectedOption?: Option;
   showIcon?: boolean;
+  showToolTip?: boolean
 }
 
 export const dropdownDefaultCSSData = {

package/src/components/Select/types.ts

@@ -108,9 +108,19 @@ export interface SelectProps {
    *  Provide the icon name for the select
    */
   iconName?: string;
+
+  /**
+   * Provide the placehoder for the select
+   */
+  placeHolder?: string;
+
+  /**
+   * Provide the boolean value if tooltip is reuired or not
+   */
+  showToolTip?: boolean
 }
 
-export interface DrowdownPosition {
+export interface DropdownPosition {
   positionX: number;
   positionY: number;
   width: number;
@@ -124,7 +134,7 @@ export interface SelectState {
   showOptions: boolean;
   options: Option[];
   option: string;
-  dropdownPosition: DrowdownPosition;
+  dropdownPosition: DropdownPosition;
 }
 
 type OptionValue = any;

package/src/index.ts

@@ -102,6 +102,7 @@ import FormatString from './utils/FormatString/FormatString';
 import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
+import { useKeyboardActions } from './utils/keyBoardActionUtil/UseKeyboardActions';
 import {
   EMAIL_REGEX,
   URL_REGEX,
@@ -148,6 +149,15 @@ import {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  UNIT_REGEX,
+  NUMBER_REGEX,
+  MEMORY_VALIDATION_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 } from './validations/regex';
 
 export {
@@ -254,6 +264,7 @@ export {
   useFileDropzone,
   FormatString,
   hasDuplicateFile,
+  useKeyboardActions,
   EMAIL_REGEX,
   URL_REGEX,
   PHONE_REGEX,
@@ -299,4 +310,13 @@ export {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  UNIT_REGEX,
+  NUMBER_REGEX,
+  MEMORY_VALIDATION_REGEX,
+  STEP_GROUP_NAME_REGEX,
+  NLP_DESCRIPTION_REGEX,
+  FILE_NAME_REGEX,
+  ELEMENTS_TRAILING_SPACE_REGEX,
+  ELEMENTS_WHITE_SPACE_REGEX,
+  PARAMETER_ALPHANUMERIC_REGEX,
 };

package/src/utils/keyBoardActionUtil/UseKeyboardAction.stories.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useKeyboardActions } from './UseKeyboardActions';
+
+// A demonstration component to showcase the `useKeyboardAction` utility
+const UseKeyboardActionComponent: React.FC = () => {
+  const [message, setMessage] = useState<string>(
+    'Press Escape or Enter to see actions.'
+  );
+
+  // Registering keyboard actions using the `useKeyboardAction` utility
+  useKeyboardActions([
+    {
+      key: 'Escape',
+      action: () => setMessage('Escape key was pressed.'),
+    },
+    {
+      key: 'Enter',
+      action: () => setMessage('Enter key was pressed.'),
+    },
+    {
+      key: 'ArrowUp',
+      action: () => setMessage('ArrowUp key was pressed.'),
+    },
+  ]);
+
+  return (
+    <div
+      style={{ textAlign: 'center', padding: '20px', border: '1px solid #ddd' }}
+    >
+      <h3>Keyboard Action Utility</h3>
+      <p>{message}</p>
+      <p>Try pressing Escape, Enter, or ArrowUp keys.</p>
+    </div>
+  );
+};
+
+// Meta configuration for the story
+const meta: Meta<typeof UseKeyboardActionComponent> = {
+  title: 'Utils/UseKeyboardAction',
+  component: UseKeyboardActionComponent,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UseKeyboardActionComponent>;
+
+// Default story for the component
+export const Primary: Story = {};

package/src/utils/keyBoardActionUtil/UseKeyboardActions.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { KeyboardAction } from "./types";
+
+export const useKeyboardActions = (actions: KeyboardAction[]) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      actions.forEach(({ key, action }) => {
+        if (event.key === key) {
+          action();
+        }
+      });
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [actions]);
+};

package/src/utils/keyBoardActionUtil/types.ts

@@ -0,0 +1,4 @@
+export type KeyboardAction = {
+  key: string;
+  action: () => void;
+};

package/src/validations/regex.stories.tsx

@@ -13,6 +13,7 @@ import {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -46,6 +47,9 @@ import {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  NUMBER_REGEX,
+  UNIT_REGEX,
+  MEMORY_VALIDATION_REGEX,
   STEP_GROUP_NAME_REGEX,
   NLP_DESCRIPTION_REGEX,
   FILE_NAME_REGEX,
@@ -125,6 +129,12 @@ export const Playground = () => {
       regex: ALPHANUMERIC_REGEX,
       description: 'Validates alphanumeric values (e.g. abc123)',
     },
+    
+    {
+      name: 'ALPHANUMERIC_WITH_ROUND_BRACES_REGEX',
+      regex: ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
+      description: 'Validates alphanumeric values with Underscore and RoundBraces Inclusive (e.g. abc123()_)',
+    },
     {
       name: 'DATE_REGEX',
       regex: DATE_REGEX,
@@ -294,6 +304,20 @@ export const Playground = () => {
       description: 'Validates Twitter handle (e.g. @username)',
     },
     {
+      name: 'NUMBER_REGEX',
+      regex: NUMBER_REGEX,
+      description: 'Validates a number (integer or float)',
+    },
+    {
+      name: 'UNIT_REGEX',
+      regex: UNIT_REGEX,
+      description: 'Validates a string of letters (unit)',
+    },
+    {
+      name: 'MEMORY_VALIDATION_REGEX',
+      regex: MEMORY_VALIDATION_REGEX,
+      description: 'Regular expression to match a number with an optional unit (GB, MB, or KB)',
+},{
       name: 'STEP_GROUP_NAME_REGEX',
       regex: STEP_GROUP_NAME_REGEX,
       description:

package/src/validations/regex.ts

@@ -38,6 +38,9 @@ const NUMBERS_ONLY_REGEX = /^\d+$/;
 // Alphanumeric Validation
 const ALPHANUMERIC_REGEX = /^[A-Za-z0-9]+$/;
 
+//Alphanumeric Validation With Round Braces and Underscore Inclusive (Used to validate Manual and Automation Script Names )
+const ALPHANUMERIC_WITH_ROUND_BRACES_REGEX = /^[a-zA-Z0-9-_() ]*$/;
+
 // Date Validation (YYYY-MM-DD)
 const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
 
@@ -145,6 +148,14 @@ const LINKEDIN_PROFILE_REGEX =
 // Twitter Handle Validation
 const TWITTER_HANDLE_REGEX = /^@?([a-zA-Z0-9_]{1,15})$/;
 
+//Match a number (integer or float)
+const NUMBER_REGEX = /([0-9\.]+)/;
+
+//Match a string of letters (unit)
+const UNIT_REGEX = /[a-zA-Z]+/;
+
+//Regular expression to match a number with an optional unit (GB, MB, or KB)
+const MEMORY_VALIDATION_REGEX = /^(\d+\.?\d*)\s*(GB|MB|KB)?$/i;
 const STEP_GROUP_NAME_REGEX = /^[a-zA-Z0-9()\-_ ]+$/;
 
 const NLP_DESCRIPTION_REGEX = /^[a-zA-Z0-9_$\s]*$/;
@@ -171,6 +182,7 @@ export {
   ALPHABET_ONLY_REGEX,
   NUMBERS_ONLY_REGEX,
   ALPHANUMERIC_REGEX,
+  ALPHANUMERIC_WITH_ROUND_BRACES_REGEX,
   DATE_REGEX,
   TIME_REGEX,
   FILE_EXTENSION_REGEX,
@@ -204,6 +216,9 @@ export {
   CURRENCY_GENERIC_REGEX,
   LINKEDIN_PROFILE_REGEX,
   TWITTER_HANDLE_REGEX,
+  UNIT_REGEX,
+  NUMBER_REGEX,
+  MEMORY_VALIDATION_REGEX,
   STEP_GROUP_NAME_REGEX,
   NLP_DESCRIPTION_REGEX,
   FILE_NAME_REGEX,