pixel-react-excel-sheet 1.0.20 → 1.0.21

package/src/components/NLPInput/NLPInput.scss

@@ -15,13 +15,11 @@
 
 @mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
   opacity: $opacity;
-
   @if $color {
-    color: $color;
+    color: var(--nlp-input-placeholder-color);
   }
-
   @if $border-color-arg {
-    border-color: $border-color-arg;
+    border-color: var(--nlp-border-color);
   }
 }
 
@@ -29,22 +27,20 @@
   position: relative;
 
   .ff-nlp-input {
-    @extend .fontSm;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     min-height: 32px;
-    min-width: 489px;
+    min-width: 482px;
     display: flex;
     align-items: end;
     position: relative;
-
     &-fieldset {
       margin: 0;
       padding: 25px 0px 0px 8px;
       border: 1px solid transparent;
       box-sizing: border-box;
-      height: 100%;
+      height: 32px;
       width: 100%;
       border-radius: 4px;
       display: block;
@@ -81,7 +77,6 @@
         @extend .font-size-8;
         padding: 0 2px;
         letter-spacing: 0.5px;
-
         &--default {
           @include transition-all(0.3s);
           opacity: 0;
@@ -106,11 +101,10 @@
       }
     }
 
-    &-input {
-      @extend .fontSm;
+    &-container {
       @include absolute-position(6px, auto, auto, auto);
       width: calc(100% - 38px);
-      min-height: calc(100% - 8px);
+      height: 32px;
       padding: 0 28px 0 8px;
       border-radius: 4px;
       border: 1px solid transparent;
@@ -118,10 +112,12 @@
       background: transparent;
       outline: none;
       color: var(--ff-nlp-input-text-color);
+      text-indent: 22px;
 
       &:hover {
         ~ .ff-nlp-input-label {
-          color: var(--ff-nlp-input-text-hover-color);
+          color: var(--nlp-input-placeholder-color);
+          padding-left: 26px;
         }
       }
 
@@ -133,7 +129,7 @@
         @include opacity-style(1, null, var(--ff-nlp-input-border-color));
 
         &:hover {
-          border-color: var(--ff-nlp-input-text-color);
+          border-color: var(--nlp-input-placeholder-color);
 
           ~ .ff-nlp-input-fieldset--option {
             border-color: var(--ff-nlp-input-text-color);
@@ -208,7 +204,6 @@
       }
 
       &--active {
-        @extend .font-size-8;
         @include transition-all;
         opacity: 0;
         transform: translateY(-150%);
@@ -225,17 +220,12 @@
       top: 60%;
       height: 100%;
       right: 10px;
-      transform: rotateX(180deg) translateY(50%);
+      transform: rotateX(0deg) translateY(-50%);
       cursor: pointer;
 
       &--no-label {
         top: 50%;
       }
-
-      &--down {
-        transform: rotateX(0deg) translateY(-50%);
-        z-index: 101;
-      }
     }
   }
 
@@ -243,4 +233,70 @@
     @include absolute-position(auto, auto, -14px, 12px);
     white-space: nowrap;
   }
+  .ff-nlp-input-label {
+    display: flex;
+    align-items: center;
+    padding-left: 26px;
+    gap: 4px;
+  }
+  .ff-nlp-help_icon {
+    position: absolute;
+    bottom: 2px;
+    left: 8px;
+    width: 30px;
+    height: 30px;
+    z-index: 100;
+    cursor: pointer;
+  }
+}
+.ff-nlp-input-arrow {
+  z-index: 111;
+}
+.icon-container {
+  position: relative;
+  display: inline-block;
+}
+
+.icon-label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-55%);
+  transform: translateY(-145%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.icon-container:hover .icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+.help-icon-label {
+  position: absolute;
+  bottom: 80%;
+  left: 96%;
+  transform: translateX(-50%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.help-icon-container:hover .help-icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
 }

package/src/components/NLPInput/NlpInput.stories.tsx

@@ -1,7 +1,7 @@
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import NlpInput from './NlpInput';
-// import { useState } from 'react';
-// import { Option } from '../NLPInput/type';
+import { nlpList } from './sampleData';
 
 const meta: Meta<typeof NlpInput> = {
   title: 'Components/NlpInput',
@@ -14,74 +14,48 @@ const meta: Meta<typeof NlpInput> = {
 
 type Story = StoryObj<typeof NlpInput>;
 
-export const Primary: Story = {
+// Refactor primaryNlp to utilize args for control panel
+export const PrimaryNlp: Story = {
   args: {
-    label: 'NLP Input',
-    optionsList: [
-      {
-        desc: 'randomNumber',
-        displayName: 'randomNumber',
-        failMessage: 'randomNumber has failed',
-        isNonPE: false,
-        name: 'randomNumber',
-        nlpName: 'randomNumber',
-        nlpType: 'PROGRAM_ELEMENTS',
-        packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-        parentId: 'PKJ1017',
-        passMessage: 'randomNumber has passed',
-        programElementId: 'PRG_ELE1001',
-        projectId: 'PJT1001',
-        returnType: 'java.lang.Integer',
-        searchName: 'randomNumber',
-        stepInputs: [{}], // Placeholder, replace with actual data if needed
-        toolTip: 'Logics : randomNumber',
-        _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-        _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-      },
-      {
-        desc: 'randomNumber',
-        displayName: 'randomNumber',
-        failMessage: 'randomNumber has failed',
-        isNonPE: false,
-        name: 'randomNumber',
-        nlpName: 'randomNumber',
-        nlpType: 'PROGRAM_ELEMENTS',
-        packageName: 'com.tyss.optimize.programelement.LIC3813PJT1001.Logics',
-        parentId: 'PKJ1017',
-        passMessage: 'randomNumber has passed',
-        programElementId: 'PRG_ELE1001',
-        projectId: 'PJT1001',
-        returnType: 'java.lang.Integer',
-        searchName: 'randomNumber',
-        stepInputs: [
-          { name: 'Range Of The Number', type: 'java.lang.Integer' },
-        ], // Placeholder, replace with actual data if needed
-        toolTip: 'Logics : randomNumber',
-        _class: 'com.tyss.optimize.data.models.db.model.ProgramElementNlp',
-        _id: 'PE_NLPdbed27d0-b05a-4354-b9d3-c2f85307b4f2',
-      },
-      {
-        description: '',
-        displayName: 'Open Browser 1',
-        failMessage: 'Open Browser is failed',
-        imported: false,
-        libraryId: 'LIB1002',
-        name: 'Open Browser',
-        nlpName: 'Open Browser',
-        nlpType: 'STEP_GROUP',
-        parentId: 'STP_GRP1001',
-        passMessage: 'Open Browser is passed',
-        path: '/Root/Open and Close Browser/Open Browser',
-        platform: 'Web',
-        projectId: 'PJT1001',
-        returnType: 'void',
-        searchName: 'Open Browser',
-        stepInputs: [], // Empty array for step inputs
-        toolTip: 'Open and Close Browser : Open Browser : Web',
-        _class: 'com.tyss.optimize.data.models.db.model.StepGroupNlp',
-        _id: 'SG_NLP1001',
-      },
-    ],
+    label: 'Search NLP',
+    leftIcon: 'ai_search',
+    rightIcon: 'help_icon',
+    rightIconColor: 'var(--nlp-color)',
+    containerWidth: '1000px',
+    value: '',
+    optionsList: nlpList,
+  },
+  render: (args) => {
+    const [inputValue, setInputValue] = useState(args.value);
+    const [optionList, setOptionList] = useState(args.optionsList);
+
+    const handleChange = (e) => {
+      setInputValue(e.target.value);
+      setOptionList(nlpList);
+    };
+
+    const handleSelect = (e) => {
+      setInputValue(e.displayName);
+    };
+
+    return (
+      <NlpInput
+        {...args}
+        value={inputValue}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        optionsList={optionList}
+        webServiceClick={() => {
+          alert('webServiceClick!');
+        }}
+        onHelpIconClick={() => {
+          alert('Help icon clicked!!');
+        }}
+        aiIconClick={() => {
+          alert('aiIconClick!');
+        }}
+      />
+    );
   },
 };
 
@@ -93,44 +67,4 @@ export const Disable: Story = {
   },
 };
 
-// export const WithInitialValue: Story = {
-//   args: {
-//     label: 'NLP Input',
-//     selectedOption: { label: 'Option 2', value: '2' },
-//     optionsList: [
-//       { label: 'NLP 1', value: '1' },
-//       { label: 'NLP 2', value: '2' },
-//       { label: 'NLP 3', value: '3' },
-//     ],
-//   },
-// };
-
-// export const OptionSelection: Story = {
-//   render: () => {
-//     const optionsList = [
-//       { label: 'NLP 1', value: '1' },
-//       { label: 'NLP 2', value: '2' },
-//       { label: 'NLP 3', value: '3' },
-//     ];
-
-//     const [selectedOption, setSelectedOption] = useState<Option>({
-//       label: 'NLP 2',
-//       value: '2',
-//     });
-
-//     const handleChange = (option: Option) => {
-//       setSelectedOption(option);
-//     };
-
-//     return (
-//       <NlpInput
-//         label="NLP Input"
-//         optionsList={optionsList}
-//         selectedOption={selectedOption}
-//         onChange={handleChange}
-//       />
-//     );
-//   },
-// };
-
 export default meta;

package/src/components/NLPInput/NlpInput.tsx

@@ -1,5 +1,10 @@
-import { useReducer, useRef, useEffect, useMemo } from 'react';
-import { Option, SelectAction, SelectProps, SelectState } from './type';
+import { useReducer, useRef, useEffect, useMemo, useState } from 'react';
+import {
+  NlpRenderOption,
+  SelectAction,
+  SelectProps,
+  SelectState,
+} from './types';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
@@ -29,7 +34,6 @@ const nlpInputReducer = (
         options: action.payload.optionsList,
         option: action.payload.option,
 
-        // todo color need to be add in style guide
         iconColor: 'var(--ff-nlp-input-default-color)',
         isIconClick: false,
         showOptions: false,
@@ -47,8 +51,7 @@ const nlpInputReducer = (
     case 'MOUSE_LEAVE':
       return state.isInputFocused
         ? state
-        : // todo color need to be add in style guide
-          {
+        : {
             ...state,
             iconColor: 'var(--ff-nlp-input-default-color)',
             isIconClick: false,
@@ -102,7 +105,14 @@ const nlpInputReducer = (
 
 const NlpInput = ({
   label = '',
+  leftIcon,
+  rightIcon,
+  rightIconColor,
   showLabel = true,
+  onHelpIconClick = () => {},
+  aiIconClick = () => {},
+  webServiceClick = () => {},
+  containerWidth = '',
   optionsList = [],
   selectedOption = {
     displayName: '',
@@ -118,17 +128,22 @@ const NlpInput = ({
   borderRadius = true,
   showBorder = true,
   required = false,
+  value = '',
+  onSelect = () => {},
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
       isInputFocused: false,
 
-      // todo color need to be added in style guide
       iconColor: 'var(--ff-nlp-input-default-color)',
       isIconClick: false,
       showOptions: false,
       options: optionsList,
-      option: checkEmpty(selectedOption) ? '' : selectedOption?.projectId,
+      option:
+        checkEmpty(selectedOption) &&
+        typeof selectedOption?.displayName === 'string'
+          ? selectedOption.displayName
+          : '',
       dropdownPosition: { positionX: 0, positionY: 0, width: 0, fromBottom: 0 },
     }),
     [optionsList, selectedOption]
@@ -139,12 +154,29 @@ const NlpInput = ({
     initialState
   );
 
+  const [inputVal, setInputVal] = useState<NlpRenderOption>(selectedOption);
+
+  useEffect(() => {
+    const updatedDisplayName =
+      typeof selectedOption.displayName === 'string'
+        ? selectedOption.displayName
+        : String(selectedOption.displayName ?? '');
+
+    if (updatedDisplayName !== inputVal.displayName) {
+      setInputVal({ ...selectedOption, displayName: updatedDisplayName });
+    }
+  }, [selectedOption]);
+
+  useEffect(() => {
+    if (value) {
+      handleSelectAction('FOCUS_INPUT');
+    }
+  }, [value]);
   const DropDownRef = useRef<HTMLDivElement>(null);
   const InputRef = useRef<HTMLInputElement>(null);
 
   const {
     isInputFocused,
-    iconColor,
     isIconClick,
     showOptions,
     dropdownPosition,
@@ -166,7 +198,13 @@ const NlpInput = ({
       if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
         dispatch({
           type: actionType,
-          payload: { optionsList, option: selectedOption.projectId },
+          payload: {
+            optionsList,
+            option:
+              typeof selectedOption.displayName === 'string'
+                ? selectedOption.displayName
+                : String(selectedOption.displayName ?? ''),
+          },
         });
       } else {
         dispatch({ type: actionType });
@@ -174,18 +212,11 @@ const NlpInput = ({
     }
   };
 
-  const onSelectInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onSelectInputChange = (
+    e: React.ChangeEvent<HTMLInputElement> | any
+  ) => {
     if (disabled) return;
-    const { value } = e.target;
-
-    const filteredOptions = optionsList.filter((option) => {
-      return option.displayName
-        .toLowerCase()
-        .includes(value.toLowerCase().trim());
-    });
-
-    dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
-    dispatch({ type: 'UPDATE_OPTION', payload: value });
+    onChange(e);
   };
 
   const onSelectBlur = () => {
@@ -198,14 +229,8 @@ const NlpInput = ({
     }
   };
 
-  const onSelectOptionSelector = (option: Option) => {
-    if (!disabled) {
-      onSelectBlur();
-      dispatch({ type: 'UPDATE_OPTION', payload: option.projectId });
-      if (onChange) {
-        onChange(option);
-      }
-    }
+  const onSelectOptionSelector = (option: NlpRenderOption) => {
+    onSelect(option);
   };
 
   const onSelectUpdatePosition = () => {
@@ -255,29 +280,40 @@ const NlpInput = ({
       <div className="ff-nlp-input">
         <input
           type="text"
-          className={classNames('ff-nlp-input-input', {
-            'ff-nlp-input-input--default': !isInputFocused,
-            'ff-nlp-input-input--active': applyActiveOptionClasses,
-            'ff-nlp-input-input--no-label': !showLabel,
-            'ff-nlp-input-input--error':
+          className={classNames('ff-nlp-input-container', {
+            'ff-nlp-input-container--default': !isInputFocused,
+            'ff-nlp-input-container--active': applyActiveOptionClasses,
+            'ff-nlp-input-container--no-label': !showLabel,
+            'ff-nlp-input-container--error':
               errorMsg && !isInputFocused && !Boolean(option),
-            'ff-nlp-input-input--border-radius': !borderRadius,
-            'ff-nlp-input-input--disable': disabled,
-            'ff-nlp-input-input--no-border': !showBorder,
+            'ff-nlp-input-container--border-radius': !borderRadius,
+            'ff-nlp-input-container--disable': disabled,
+            'ff-nlp-input-container--no-border': !showBorder,
           })}
-          // inline css required due to multiple overlay scenarios are present
           style={{ zIndex: optionZIndex }}
           onFocus={() => handleSelectAction('FOCUS_INPUT')}
           onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
           onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}
           onChange={onSelectInputChange}
-          value={option}
+          value={value}
           disabled={disabled}
           autoComplete="off"
           spellCheck="false"
           ref={InputRef}
         />
 
+        <div className="icon-container">
+          <Icon
+            name={leftIcon || 'ai_search'}
+            className="ff-nlp-help_icon"
+            width={16}
+            height={16}
+            onClick={aiIconClick}
+          />
+          <Typography className="icon-label" fontSize={10}>
+            Search With Ai
+          </Typography>
+        </div>
         {showLabel && (
           <div
             className={classNames('ff-nlp-input-label', {
@@ -294,20 +330,27 @@ const NlpInput = ({
                 *
               </Typography>
             )}
+
             {label}
           </div>
         )}
 
-        <Icon
-          name="arrow_up"
-          height={7}
-          width={12}
-          className={classNames('ff-nlp-input-arrow', {
-            'ff-nlp-input-arrow--down': isIconClick,
-            'ff-nlp-input-arrow--no-label': !showLabel,
-          })}
-          color={iconColor}
-        />
+        <div className="help-icon-container">
+          <Icon
+            name={rightIcon || ''}
+            height={16}
+            width={16}
+            onClick={onHelpIconClick}
+            className={classNames('ff-nlp-input-arrow', {
+              'ff-nlp-input-arrow--down': !isIconClick,
+              'ff-nlp-input-arrow--no-label': !showLabel,
+            })}
+            color={rightIconColor}
+          />
+          <Typography className="help-icon-label" fontSize={10}>
+            Help
+          </Typography>
+        </div>
         <fieldset
           className={classNames('ff-nlp-input-fieldset', {
             'ff-nlp-input-fieldset--no-label': !showLabel,
@@ -319,7 +362,7 @@ const NlpInput = ({
             'ff-nlp-input-fieldset--no-border': !showBorder,
           })}
         >
-          {/* {showLabel && (
+          {showLabel && (
             <legend
               className={classNames('ff-nlp-input-legend', {
                 'ff-nlp-input-legend--default': !isInputFocused,
@@ -328,18 +371,9 @@ const NlpInput = ({
                 'ff-nlp-input-legend--error': errorMsg,
               })}
             >
-              {required && (
-                <Typography
-                  fontSize={8}
-                  color={'var(--$error-light)'}
-                  className="ff-nlp-input-legend--required"
-                >
-                  *
-                </Typography>
-              )}
               {label}
             </legend>
-          )} */}
+          )}
         </fieldset>
       </div>
 
@@ -363,6 +397,8 @@ const NlpInput = ({
               options={options}
               optionZIndex={optionZIndex}
               inputRef={InputRef}
+              webServiceClick={webServiceClick}
+              containerWidth = {containerWidth}
             />,
             document.body
           )}

package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts

@@ -1,15 +1,17 @@
-import { DrowdownPosition, Option } from '../../type';
+import { DrowdownPosition, NlpRenderOption } from '../../types';
 
 export interface NlpDropDownListProps {
   /*
    * Callback function triggered on blur event
    */
   onSelectBlur: () => void;
-
+  leftIcon?: string;
+  webServiceClick?: () => void;
+  containerWidth?:string | number,
   /*
    * Callback function triggered when an option is selected
    */
-  onSelectOptionSelector: (option: Option) => void;
+  onSelectOptionSelector: (option: NlpRenderOption) => void;
 
   /*
    * Position of the dropdown relative to the input
@@ -19,7 +21,7 @@ export interface NlpDropDownListProps {
   /*
    * List of options to display in the dropdown
    */
-  options?: Option[];
+  options?: NlpRenderOption[];
 
   /*
    * Optional z-index for controlling the dropdown's stacking order