pixel-react 1.1.1 → 1.1.2

package/src/components/Modal/modal.scss

@@ -15,7 +15,7 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px 12px 0 0;
+  border-radius: 12px;
   padding: 16px;
   
   .ff-modal-header {

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

@@ -60,14 +60,14 @@ export const EmailGroup: Story = {
     ]);
     const [selectedOptions, setSelectedOptions] = useState<
       { label?: string; value?: string }[]
-    >([{ label: 'Sample1@gmail.com', value: 'sample1@gmail.com'}]);
+    >([{ label: 'Sample1@gmail.com', value: 'sample1@gmail.com' }]);
     const onChange = (options: { label?: string; value?: string }[]) => {
       setSelectedOptions(options);
     };
     return (
       <MultiSelect
         label={'Enter Email'}
-        type='email'
+        type="email"
         required
         options={options}
         selectedOptions={selectedOptions}
@@ -101,7 +101,6 @@ export const Controlled: Story = {
     };
     return (
       <MultiSelect
-        // disabled
         label={'Fruits'}
         required
         options={options}

package/src/components/MultiSelect/MultiSelect.tsx

@@ -29,8 +29,8 @@ const ChipElement = ({
   return null;
 };
 const MultiSelect = ({
-  options,
-  type = "text",
+  options = [],
+  type = 'text',
   selectedOptions = [],
   onChange = () => {},
   acceptNewOption = false,
@@ -42,7 +42,7 @@ const MultiSelect = ({
   errorMessage = 'Fill this field',
   withSelectButton = false,
   onSelect = () => {},
-  displayCount = false
+  displayCount = false,
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -50,7 +50,7 @@ const MultiSelect = ({
   const [searchedKeyword, setSearchedKeyword] = useState('');
   const [isSelectFocusedOnce, setIsSelectFocusedOnce] =
     useState<boolean>(false);
-  const [inputError, setInputError] = useState<string>('')
+  const [inputError, setInputError] = useState<string>('');
 
   const [dropdownPosition, setDropdownPosition] = useState<{
     top: number;
@@ -110,13 +110,13 @@ const MultiSelect = ({
     handleOptionChange(option, false);
   };
   const handleKeyEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (acceptNewOption && e.key === "Enter") {
+    if (acceptNewOption && e.key === 'Enter') {
       setInputError('');
-      if (type === "email") {
+      if (type === 'email') {
         const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailPattern.test(searchedKeyword)) {
           setIsOpen(false);
-          setInputError("Please enter a valid email address.");
+          setInputError('Please enter a valid email address.');
           return;
         }
       }
@@ -126,11 +126,16 @@ const MultiSelect = ({
         value: searchedKeyword.toLowerCase(),
         isChecked: true,
       };
-      const filteredOptions = [...allOptions].filter(option => option.isChecked === true);
+      const filteredOptions = [...allOptions].filter(
+        (option) => option.isChecked === true
+      );
 
       setAllOptions([...allOptions, newOption]);
       setSearchedKeyword('');
-      onChange?.([...filteredOptions, { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() }]);
+      onChange?.([
+        ...filteredOptions,
+        { label: searchedKeyword, value: searchedKeyword.toLocaleLowerCase() },
+      ]);
       setIsOpen(false);
     }
   };
@@ -148,6 +153,17 @@ const MultiSelect = ({
       });
     }
   };
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    const input = e.target.value;
+    setSearchedKeyword(input);
+    const filteredOptions = options.filter((option) =>
+      option.value?.toLowerCase().includes(input.toLowerCase())
+    );
+    onSearch?.(input, filteredOptions.length);
+  };
   useEffect(() => {
     if (isOpen) {
       calculatePosition();
@@ -192,7 +208,7 @@ const MultiSelect = ({
         !dropdownRef.current.contains(event?.target as Node) &&
         !selectWrapper.current.contains(event?.target as Node)
       ) {
-        setInputError('')
+        setInputError('');
         setIsOpen(false);
         if (!isSelectFocusedOnce) {
           setIsSelectFocusedOnce(true);
@@ -213,7 +229,8 @@ const MultiSelect = ({
       className={classNames('ff-multiselect-wrapper', {
         'ff-multiselect-wrapper--with-options': selectedOptions?.length,
         'ff-multiselect-wrapper--opened-dropdown': isOpen,
-        'ff-multiselect-wrapper--error': (isFieldSkipped && required) || inputError,
+        'ff-multiselect-wrapper--error':
+          (isFieldSkipped && required) || inputError,
         'ff-multiselect-wrapper--disabled': disabled,
       })}
     >
@@ -231,7 +248,7 @@ const MultiSelect = ({
             {label}
           </span>
           <div className="ff-multiselect-chip-container">
-            {displayCount ?
+            {displayCount ? (
               <>
                 {selectedOptions.slice(0, maxVisibleChips).map((option) => (
                   <ChipElement
@@ -240,7 +257,8 @@ const MultiSelect = ({
                     onChipCloseClick={(e) => handleChipCloseClick(option, e)}
                   />
                 ))}
-              </> :
+              </>
+            ) : (
               selectedOptions.map((option) => (
                 <ChipElement
                   key={option?.label}
@@ -248,7 +266,7 @@ const MultiSelect = ({
                   onChipCloseClick={(e) => handleChipCloseClick(option, e)}
                 />
               ))
-            }
+            )}
             <div className="ff-multiselect-input-container">
               <input
                 value={searchedKeyword}
@@ -256,13 +274,7 @@ const MultiSelect = ({
                 autoComplete="off"
                 placeholder="search..."
                 ref={inputRef}
-                onChange={(e) => {
-                  if (!isOpen) {
-                    setIsOpen(true);
-                  }
-                  setSearchedKeyword(e.target.value);
-                  onSearch?.(e.target.value);
-                }}
+                onChange={handleSearch}
                 onKeyDown={handleKeyEnter}
                 id="input-ele"
                 className="ff-select-input"
@@ -295,7 +307,7 @@ const MultiSelect = ({
       </div>
       <div ref={dropdownWrapper}>
         {(inputError || (isFieldSkipped && required && errorMessage)) && (
-          <div className="error-text">{inputError || errorMessage }</div>
+          <div className="error-text">{inputError || errorMessage}</div>
         )}
         {isOpen &&
           createPortal(
@@ -317,4 +329,4 @@ const MultiSelect = ({
   );
 };
 
-export default MultiSelect;
+export default MultiSelect;

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -10,7 +10,7 @@ interface MultiSelectProps {
   label: string;
   selectedOptions?: Option[];
   disabled?: boolean;
-  onSearch?: (searchedKeyword: string) => void;
+  onSearch?: (searchedKeyword: string, resultsLength: number) => void;
   onChange?: (selectedOptions: Option[]) => void;
   acceptNewOption?: boolean;
   zIndex?: number;

package/src/components/NLPInput/NLPInput.scss

@@ -0,0 +1,246 @@
+@use '../../assets/styles/fonts';
+
+@mixin transition-all($time: 0.3s) {
+  transition: opacity $time ease-out, transform $time ease-out,
+    font-size $time ease-out, padding $time ease-out;
+}
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
+  opacity: $opacity;
+
+  @if $color {
+    color: $color;
+  }
+
+  @if $border-color-arg {
+    border-color: $border-color-arg;
+  }
+}
+
+.ff-nlp-input-wrapper {
+  position: relative;
+
+  .ff-nlp-input {
+    @extend .fontSm;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 32px;
+    min-width: 489px;
+    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%;
+      width: 100%;
+      border-radius: 4px;
+      display: block;
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--no-label {
+        padding: 30px 0px 0px 8px;
+      }
+
+      &--default {
+        @include opacity-style(0, null, var(--ff-nlp-input-border-color));
+      }
+
+      &--active {
+        @include opacity-style(1, null, var(--ff-nlp-input-brand-color));
+      }
+
+      &--option {
+        opacity: 1;
+      }
+
+      &--no-border {
+        border-color: transparent;
+      }
+
+      &--error {
+        border-color: var(--error-light);
+      }
+
+      .ff-nlp-input-legend {
+        @extend .font-size-8;
+        padding: 0 2px;
+        letter-spacing: 0.5px;
+
+        &--default {
+          @include transition-all(0.3s);
+          opacity: 0;
+        }
+
+        &--active {
+          @include transition-all(0.25s);
+          @include opacity-style(1, var(--ff-nlp-input-brand-color));
+        }
+
+        &--option {
+          @include opacity-style(1, var(--ff-nlp-input-default-color));
+        }
+
+        &--error {
+          color: var(--error-light);
+        }
+
+        &--required {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-input {
+      @extend .fontSm;
+      @include absolute-position(6px, auto, auto, auto);
+      width: calc(100% - 38px);
+      min-height: calc(100% - 8px);
+      padding: 0 28px 0 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      z-index: 100;
+      background: transparent;
+      outline: none;
+      color: var(--ff-nlp-input-text-color);
+
+      &:hover {
+        ~ .ff-nlp-input-label {
+          color: var(--ff-nlp-input-text-hover-color);
+        }
+      }
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--default {
+        @include opacity-style(1, null, var(--ff-nlp-input-border-color));
+
+        &:hover {
+          border-color: var(--ff-nlp-input-text-color);
+
+          ~ .ff-nlp-input-fieldset--option {
+            border-color: var(--ff-nlp-input-text-color);
+
+            .ff-nlp-input-legend--option {
+              color: var(--ff-nlp-input-text-color);
+            }
+          }
+        }
+      }
+
+      &--no-label {
+        min-height: calc(100% - 2px);
+        margin-top: 0px;
+        top: 0px;
+      }
+
+      &--active {
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+        }
+      }
+
+      &--no-border {
+        border: none;
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+
+          ~ .ff-nlp-input-fieldset--no-border {
+            border-color: transparent;
+          }
+        }
+      }
+
+      &--disable {
+        border-color: var(--ff-nlp-input-border-color);
+
+        &:hover {
+          border-color: var(--ff-nlp-input-border-color);
+
+          ~ .ff-nlp-input-label--default {
+            color: var(--ff-nlp-input-default-color);
+          }
+        }
+      }
+
+      &--error {
+        border-color: var(--error-light);
+
+        &:hover {
+          border-color: var(--error-light);
+        }
+      }
+    }
+
+    &-label {
+      @include absolute-position(13px, auto, auto, 8px);
+      z-index: 1;
+      font-size: 12px;
+      top: 60%;
+      padding-left: 8px;
+
+      &--default {
+        @include transition-all;
+        @include opacity-style(1, var(--ff-nlp-input-default-color));
+
+        transform: translateY(-50%);
+      }
+
+      &--active {
+        @extend .font-size-8;
+        @include transition-all;
+        opacity: 0;
+        transform: translateY(-150%);
+        padding: 0 6px;
+      }
+
+      &--required {
+        margin-right: 2px;
+      }
+    }
+
+    &-arrow {
+      position: absolute;
+      top: 60%;
+      height: 100%;
+      right: 10px;
+      transform: rotateX(180deg) translateY(50%);
+      cursor: pointer;
+
+      &--no-label {
+        top: 50%;
+      }
+
+      &--down {
+        transform: rotateX(0deg) translateY(-50%);
+        z-index: 101;
+      }
+    }
+  }
+
+  &-error-text {
+    @include absolute-position(auto, auto, -14px, 12px);
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NlpInput from './NlpInput';
+// import { useState } from 'react';
+// import { Option } from '../NLPInput/type';
+
+const meta: Meta<typeof NlpInput> = {
+  title: 'Components/NlpInput',
+  component: NlpInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof NlpInput>;
+
+export const Primary: 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',
+      },
+    ],
+  },
+};
+
+export const Disable: Story = {
+  args: {
+    label: 'NLP Input',
+    optionsList: [],
+    disabled: true,
+  },
+};
+
+// 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;