pixel-react 1.5.9 → 1.6.0

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import FieldSet from './FieldSet';
+
+const meta: Meta<typeof FieldSet> = {
+  title: 'Components/FieldSet',
+  component: FieldSet,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FieldSet>;
+
+const defaultArgs = {
+  legendName: 'Default Legend',
+  height: '200px',
+  width: '300px',
+  children: 'Default content inside the FieldSet.',
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const CustomDimensions: Story = {
+  args: {
+    ...defaultArgs,
+    height: '300px',
+    width: '400px',
+    legendName: 'Custom Dimensions',
+  },
+};
+
+export const WithNestedChildren: Story = {
+  args: {
+    ...defaultArgs,
+    legendName: 'Nested Content',
+    children: (
+      <div>
+        <p>This is some nested content inside the FieldSet.</p>
+        <button>Click Me</button>
+      </div>
+    ),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [legend, setLegend] = useState('Controlled FieldSet');
+    const [content, setContent] = useState('Initial Content');
+
+    const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setLegend(event.target.value);
+
+    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setContent(event.target.value);
+
+    return (
+      <>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Legend:
+            <input
+              type="text"
+              value={legend}
+              onChange={handleLegendChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Content:
+            <input
+              type="text"
+              value={content}
+              onChange={handleContentChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <FieldSet legendName={legend} height="250px" width="350px">
+          {content}
+        </FieldSet>
+      </>
+    );
+  },
+};
+
+export const EmptyFieldSet: Story = {
+  args: {
+    legendName: 'Empty FieldSet',
+    height: '32px',
+    width: '317px',
+    children: null,
+  },
+};
+
+export default meta;

package/src/components/FieldSet/FieldSet.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import './FieldSet.scss';
+import { fieldSetProps } from './types';
+import Typography from '../Typography';
+const FieldSet: FC<fieldSetProps> = ({
+  legendName,
+  height,
+  width,
+  children,
+}) => {
+  return (
+    <div className="ff_fieldSet_container">
+      <fieldset className="ff_fieldSet" style={{ height, width }}>
+        <legend className="ff_legend_container">
+          <Typography
+            color="var(--license_header_text_color)"
+            fontSize={8}
+            lineHeight="12px"
+          >
+            {legendName}
+          </Typography>
+        </legend>
+        <div className="ff_children_container">{children}</div>
+      </fieldset>
+    </div>
+  );
+};
+
+export default FieldSet;

package/src/components/FieldSet/index.ts

@@ -0,0 +1 @@
+export { default } from './FieldSet';

package/src/components/FieldSet/types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface fieldSetProps {
+  legendName: string;
+  height: string;
+  width: string;
+  children: ReactNode | string;
+}

package/src/components/FileDropzone/FileDropzone.scss

@@ -94,7 +94,7 @@
           display: flex;
           align-items: center;
           gap: 4px;
-          width: 90%;
+          width: 87%;
 
           .ff-file-info__icon {
             @include center;

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
 import { useState } from 'react';
-import React from 'react';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -23,8 +23,8 @@ const defaultArgs = {
   maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
   invalidFileMessage: 'Invalid file format',
   fileExistMessage: 'File already exist with same name and type',
-  width: 700,
-  height: 350,
+  width: 640,
+  height: 188,
 };
 
 export const Primary: Story = {
@@ -49,6 +49,8 @@ export const withMIMEValidation: Story = {
 export const Controlled: Story = {
   render: () => {
     const [showToaster, setShowToaster] = useState<boolean>(false);
+    const [acceptedFiles, setAcceptedFiles] = useState([]);
+    const [rejectedFiles, setRejectedFiles] = useState([]);
 
     const showMaxFilesError = () => {
       setShowToaster(true);
@@ -57,6 +59,14 @@ export const Controlled: Story = {
       }, 2000);
     };
 
+    const getAcceptedFiles = (files) => { 
+      setAcceptedFiles(files);
+    }
+
+    const getRejectedFiles = (files) => {
+      setRejectedFiles(files);
+    }
+
     return (
       <>
         <FileDropzone
@@ -69,6 +79,8 @@ export const Controlled: Story = {
           ]}
           validateMIMEType={true}
           onMaxFilesError={showMaxFilesError}
+          getAcceptedFiles={getAcceptedFiles}
+          getRejectedFiles={getRejectedFiles}
         />
         {showToaster && (
           <Toaster

package/src/components/FileDropzone/FileDropzone.tsx

@@ -25,6 +25,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   validateMIMEType = false,
   width = 640,
   height = 188,
+  getAcceptedFiles = () => {},
+  getRejectedFiles = () => {},
 }) => {
   const {
     getRootProps,
@@ -47,6 +49,9 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
   });
 
+  getAcceptedFiles(acceptedFiles);
+  getRejectedFiles(rejectedFiles);
+
   const acceptedFilesList = useMemo(
     () =>
       acceptedFiles.map((file) => (

package/src/components/FileDropzone/FilePreview.tsx

@@ -48,7 +48,7 @@ const FilePreview: React.FC<FilePreviewProps> = ({
         <div className="ff-file-actions__icon-replace">
           <Tooltip title="Replace">
             <Icon
-              name="replace"
+              name="replace_file"
               color={'var(--icons-default-color)'}
               height={16}
               width={16}

package/src/components/FileDropzone/types.ts

@@ -57,6 +57,14 @@ export interface FileDropzoneProps {
   width?: number | string;
 
   height?: number | string;
+  /**
+   *  Returns the accepted files in the state
+   **/
+  getAcceptedFiles?: (files: File[]) => void;
+  /**
+   *  Returns the rejected files in the state
+   **/
+  getRejectedFiles?: (files: FileRejection[]) => void;
 }
 export interface FileState {
   accepted: File[];

package/src/components/Icon/iconList.ts

@@ -31,7 +31,7 @@ import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
 import Alert from '../../assets/icons/alert.svg?react';
-
+import ReplaceFile from '../../assets/icons/replace_file.svg?react';
 import RightArrow from '../../assets/icons/right_arrow_icon.svg?react';
 import LeftArrow from '../../assets/icons/left_arrow_icon.svg?react';
 import ClockIcon from '../../assets/icons/clock_icon.svg?react';
@@ -46,7 +46,7 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
 import ImpactListIcon from '../../assets/icons/impactList.svg?react';
-
+import Export from '../../assets/icons/export.svg?react';
 import FormatePainter from '../../assets/icons/formate_painter.svg?react';
 import Bold from '../../assets/icons/bold.svg?react';
 import Italic from '../../assets/icons/italic.svg?react';
@@ -191,7 +191,7 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
 import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
 import UserWarning from '../../assets/icons/user_warning.svg?react';
 import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
-
+import Import from '../../assets/icons/import.svg?react';
 import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
 import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
 import dashboardWebMobileIcon from '../../assets/icons/web_mobile_icon.svg?react';
@@ -221,9 +221,11 @@ import RemoveUser from '../../assets/icons/remove_user.svg?react';
 import AddToArchive from '../../assets/icons/add_archive.svg?react';
 import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
 import InfoUser from '../../assets/icons/info_user.svg?react';
+import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
+Components['alert'] = Alert;
 Components['delete_info'] = DeleteInfoIcon;
 Components['warning'] = WarningIcon;
 Components['toast_info'] = ToastInfoIcon;
@@ -266,7 +268,7 @@ Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable'] = AddVariable;
-
+Components['replace_file'] = ReplaceFile;
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
 Components['italic'] = Italic;
@@ -286,7 +288,7 @@ Components['text_color'] = TextColor;
 Components['fill_color'] = FillColor;
 Components['formula_icon'] = FormulaIcon;
 Components['excel_corner_menu'] = ExcelCornerMenu;
-
+Components['export'] = Export;
 Components['apk_file_type'] = ApkFileType;
 Components['csv_file_type'] = CsvFileType;
 Components['compressed_file_type'] = CompressedFileType;
@@ -301,7 +303,7 @@ Components['ipk_file_type'] = IpkFileType;
 Components['txt_file_type'] = TxtFileType;
 Components['gif_file_type'] = GifFileType;
 Components['jpg_file_type'] = JpgFileType;
-
+Components['import'] = Import;
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
@@ -424,6 +426,7 @@ Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
 Components['replace_icon'] = ReplaceIcon;
+Components['replace_icon'] = ReplaceIcon;
 Components['header_preset'] = HeaderPreset;
 Components['project_element'] = ProjectElement;
 Components['element'] = Element;
@@ -436,7 +439,8 @@ Components['no_data'] = NoData;
 Components['add_user'] = AddUser;
 Components['add_to_archive'] = AddToArchive;
 Components['remove_user'] = RemoveUser;
-Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
+Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = InfoUser;
+Components['web_service_icon'] = WebServiceIcon;
 
 export default Components;

package/src/components/MultiSelect/Dropdown.tsx

@@ -91,15 +91,19 @@ const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
                 role="option"
                 className={`dropdown-option-container`}
                 key={getLabel(info, labelAccessor)}
-                onClick={() =>
-                  !info?.isDisabled && handleOptionChange(info, !info.isChecked)
+                onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
+                  const target = e.target as HTMLInputElement;
+                  if(target.type==='checkbox'){
+                    return
+                  }
+                  !info?.isDisabled && handleOptionChange(info, !info.isChecked);
+                }
                 }
               >
                 <Checkbox
                   checked={info.isChecked}
                   disabled={info?.isDisabled}
                 />
-
                 <Tooltip
                   zIndex={zIndex + 1}
                   title={

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

@@ -87,7 +87,7 @@ export const Default3: Story = {
 };
 export const EmailGroup: Story = {
   render: () => {
-    const [options] = useState([
+    const [options,setOptions] = useState([
       {
         label: 'Sample1@gmail.com',
         value: 'sample1@gmail.com',
@@ -109,6 +109,10 @@ export const EmailGroup: Story = {
     ) => {
       setSelectedOptions(options);
     };
+    const onEnter=(newOption:string)=>{
+setOptions(prev=>[...prev,{label:newOption,value:newOption}])
+setSelectedOptions(prev=>[...prev,{label:newOption,value:newOption}])
+    }
     return (
       <MultiSelect
         label={'Enter Email'}
@@ -120,6 +124,7 @@ export const EmailGroup: Story = {
         acceptNewOption={true}
         displayCount={true}
         labelAccessor="label"
+        onEnter={onEnter}
       />
     );
   },

package/src/components/MultiSelect/MultiSelect.tsx

@@ -76,8 +76,9 @@ const MultiSelect = ({
   highlightedMachine = '',
   onSelectButtonClick = () => {},
   labelAccessor = '',
-  valueAccessor = '',
+  valueAccessor = labelAccessor,
   withSelectButton = variant === 'machines' ? true : false,
+  onEnter=()=>{}
 }: MultiSelectProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -168,25 +169,8 @@ const MultiSelect = ({
           return;
         }
       }
-
-      const newOption = {
-        [labelAccessor]: searchedKeyword,
-        [valueAccessor]: searchedKeyword.toLowerCase(),
-        isChecked: true,
-      };
-      const filteredOptions = [...allOptions].filter(
-        (option) => option.isChecked === true
-      );
-
-      setAllOptions([...allOptions, newOption]);
+     onEnter?.(searchedKeyword)
       setSearchedKeyword('');
-      onChange?.([
-        ...filteredOptions,
-        {
-          [labelAccessor]: searchedKeyword,
-          [valueAccessor]: searchedKeyword.toLocaleLowerCase(),
-        },
-      ]);
       setIsOpen(false);
     }
   };
@@ -447,7 +431,7 @@ const MultiSelect = ({
               className="error-text"
             />
           )}
-          {displayIcon && (
+          {displayIcon && variant==='labels' && (
             <Typography
               onClick={onManageLabelsClick}
               fontSize={8}

package/src/components/MultiSelect/MultiSelectTypes.ts

@@ -40,6 +40,8 @@ interface MultiSelectProps {
   labelAccessor?: string;
 
   valueAccessor?: string;
+
+  onEnter?:(newOption:string)=>void
 }
 
 export { Option, MultiSelectProps };