pixel-react 1.6.8 → 1.7.0

package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts

@@ -12,7 +12,7 @@ import {
 
 export function applyBoldToCells(
   currentData: Matrix.Matrix<Types.CellBase<any>>,
-  selectedRange: PointRange,
+  selectedRange: PointRange
 ): Matrix.Matrix<Types.CellBase<any>> {
   if (!selectedRange) {
     return currentData;
@@ -217,10 +217,10 @@ export function applyBorderToCells(
         case 'border-none':
           updatedCell.style = {
             ...currentCell.style,
-            borderRight: `1px solid var(--toggle-strip-color)`,
-            borderLeft: `1px solid var(--toggle-strip-color)`,
-            borderTop: `1px solid var(--toggle-strip-color)`,
-            borderBottom: `1px solid var(--toggle-strip-color)`,
+            borderRight: `1px solid var(--excel-sheet-border)`,
+            borderLeft: `1px solid var(--excel-sheet-border)`,
+            borderTop: `1px solid var(--excel-sheet-border)`,
+            borderBottom: `1px solid var(--excel-sheet-border)`,
           };
           break;
         case 'border-right':
@@ -333,8 +333,7 @@ export function applyUnderlineToCells(
           ...currentCell,
           style: {
             ...currentCell.style,
-            textDecoration: 'none',
-            textDecorationStyle: 'solid' as TextDecorationStyle,
+            textDecoration: 'none solid',
           },
         };
       } else {
@@ -342,11 +341,8 @@ export function applyUnderlineToCells(
           ...currentCell,
           style: {
             ...currentCell.style,
-            textDecoration: value === 'double_border' ? 'underline' : value,
-            textDecorationStyle:
-              value === 'double_border'
-                ? 'double'
-                : ('none' as TextDecorationStyle),
+            textDecoration:
+              value === 'double_border' ? 'underline double' : value,
           },
         };
       }
@@ -480,6 +476,79 @@ export function applyFormatePainter(
   return undefined;
 }
 
+export function dragEndFormatePainter(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  formattedStyle: Types.formattedStyle
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange || !formattedStyle.open) {
+    return currentData;
+  }
+
+  const { start, end } = selectedRange;
+  let updatedData = currentData;
+
+  for (let row = start.row; row <= end.row; row++) {
+    for (let col = start.column; col <= end.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+      if (!currentCell) {
+        continue;
+      }
+      const updatedCell = {
+        ...currentCell,
+        style: formattedStyle.style,
+      };
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+  return updatedData;
+}
+
+export function dragEndAutoFill(
+  currentData: Matrix.Matrix<Types.CellBase<any>>,
+  selectedRange: PointRange | null,
+  cellValue: Types.CellBase,
+  activeCell: Point.Point | null
+): Matrix.Matrix<Types.CellBase<any>> {
+  if (!selectedRange) {
+    return currentData;
+  }
+  const { start, end } = selectedRange;
+  const rowCount = start.row - end.row;
+  const columnCount = start.column - end.column;
+  let startPoint = { row: 0, column: 0 };
+  let endPoint = { row: 0, column: 0 };
+
+  if (rowCount > columnCount) {
+    startPoint = { row: activeCell?.row ?? 0, column: start.column };
+    endPoint = { row: activeCell?.row ?? 0, column: end.column };
+  } else {
+    startPoint = { row: start.row, column: activeCell?.column ?? 0 };
+    endPoint = { row: end.row, column: activeCell?.column ?? 0 };
+  }
+
+  let updatedData = currentData;
+
+  for (let row = startPoint.row; row <= endPoint.row; row++) {
+    for (let col = startPoint.column; col <= endPoint.column; col++) {
+      const currentCell = Matrix.get({ row, column: col }, updatedData);
+
+      if (!currentCell) {
+        continue;
+      }
+
+      const updatedCell = {
+        ...currentCell,
+        style: cellValue.style,
+        value: cellValue.value,
+      };
+
+      updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
+    }
+  }
+  return updatedData;
+}
+
 export function edit(state: Types.StoreState): Types.StoreState {
   if (isActiveReadOnly(state)) {
     return state;
@@ -567,8 +636,6 @@ function convertPtToPx(pt: number): string {
 
 // Key Bindings
 
-type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
-
 type TextAlign = 'left' | 'center' | 'right';
 
 export type KeyDownHandler = (

package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts

@@ -55,19 +55,30 @@ export type StoreState<Cell extends CellBase = CellBase> = {
   copied: PointRange | null;
   hasPasted: boolean;
   cut: boolean;
+  autoFill: { open: boolean; cellValue: Cell };
   active: Point | null;
   mode: Mode;
-  rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
-  columnDimensions: Record<
-    number,
-    Pick<Dimensions, 'width' | 'left'> | undefined
-  >;
+  rowDimensions: rowDimensions;
+  columnDimensions: columnDimensions;
   dragging: boolean;
   lastChanged: Point | null;
   lastCommit: null | CellChange<Cell>[];
   selectedRow: null | number;
   selectedColumn: null | number;
-  formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
+  formattedStyle: formattedStyle;
+};
+
+export type rowDimensions = Record<
+  number,
+  Pick<Dimensions, 'height' | 'top'> | undefined
+>;
+export type columnDimensions = Record<
+  number,
+  Pick<Dimensions, 'width' | 'left'> | undefined
+>;
+export type formattedStyle = {
+  open: boolean;
+  style: undefined | React.CSSProperties;
 };
 
 export type CellChange<Cell extends CellBase = CellBase> = {

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

@@ -115,10 +115,10 @@ export const Default: Story = {
                   backgroundColor: 'C6E7FF', // Sample data from backend without #
                   borderColor: 'F2F2F2', // Sample data from backend without #
                   border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
+                    top: 'THIN',
+                    bottom: 'THIN',
+                    left: 'THIN',
+                    right: 'THIN',
                   },
                   alignment: {
                     horizontal: 'GENERAL',

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -51,22 +51,27 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   const data = useSelector((state) => state.model.data);
   const formattedStyle = useSelector((state) => state.formattedStyle.open);
 
-  const [cellStyle, setCellStyle] = useState(
-    cell?.style || {
-      color: 'var(--text-color)',
-      backgroundColor: 'var(--drawer-footer-bg)',
-      borderColor: 'var(--toggle-strip-color)',
-    }
-  );
+  // Default style to Excel
+  const basicStyle: React.CSSProperties = {
+    color: 'var(--input-hover-border-color)',
+    backgroundColor: 'var(--drawer-footer-bg)',
+    borderColor: 'var(--excel-sheet-border)',
+    textDecoration: 'none solid',
+    borderRight: `1px solid var(--excel-sheet-border)`,
+    borderLeft: `1px solid var(--excel-sheet-border)`,
+    borderTop: `1px solid var(--excel-sheet-border)`,
+    borderBottom: `1px solid var(--excel-sheet-border)`,
+    fontSize: '15px',
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    fontFamily: 'Times New Roman',
+    textAlign: 'center',
+  };
+
+  const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
 
   useEffect(() => {
-    setCellStyle(
-      cell?.style || {
-        color: 'var(--text-color)',
-        backgroundColor: 'var(--drawer-footer-bg)',
-        borderColor: 'var(--toggle-strip-color)',
-      }
-    );
+    setCellStyle(cell?.style || basicStyle);
   }, [cell]);
 
   useEffect(() => {
@@ -79,8 +84,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   }, [cell]);
 
   const styleBackend = convertStyleToBackend(cellStyle);
-  
-
   const [border, setBorder] = useState<string>('border-none');
   const [underLine, setUnderLine] = useState<string>('underline');
   const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -93,7 +96,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
     color: 'var(--error-light)',
     backgroundColor: 'var(--error-light)',
-    borderColor: 'var(--text-color)',
+    borderColor: 'var(--input-hover-border-color)',
   });
 
   const borderTypeIcon = [
@@ -124,6 +127,18 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       label: 'Arial',
       value: 'Arial',
     },
+    {
+      label: 'fantasy',
+      value: 'fantasy',
+    },
+    {
+      label: 'cursive',
+      value: 'cursive',
+    },
+    {
+      label: 'Poppins',
+      value: 'Poppins',
+    },
     {
       label: 'Courier New',
       value: '"Courier New"',
@@ -283,7 +298,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Underline Type'}>
           <div className="ff-excel-toolbar-icon-underline">
             <Icon
-              variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
+              variant={
+                cellStyle.textDecoration === underLine ? 'dark' : 'light'
+              }
               hoverEffect
               disabled={toolbar === 'disable'}
               onClick={() => setUnderlineType(data, underLine, true)}
@@ -308,7 +325,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       <div className="ff-excel-toolbar-icon">
         <Tooltip placement="top" title={'Format Painter'}>
           <Icon
-          variant={formattedStyle?'dark':'light'}
+            variant={formattedStyle ? 'dark' : 'light'}
             hoverEffect
             disabled={toolbar === 'disable'}
             onClick={() => {

package/src/components/Excel/dataConversion.ts

@@ -54,7 +54,7 @@ const getTextAlignmentBack = (
 
 export const getTextDecorationBack = (
   textDecoration: string
-): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {  
+): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
   switch (textDecoration.toLowerCase()) {
     case 'solid':
       return 'solid';
@@ -74,6 +74,40 @@ export const getTextDecorationBack = (
 export function convertStyleToFrontend(
   backendStyle: BackendStyle
 ): React.CSSProperties {
+
+  const { border } = backendStyle;
+
+  let borderTop = '';
+  let borderRight = '';
+  let borderBottom = '';
+  let borderLeft = '';
+
+  if (border.top !== 'NONE') {
+    borderTop =
+      border.top === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.right !== 'NONE') {
+    borderRight =
+      border.right === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.bottom !== 'NONE') {
+    borderBottom =
+      border.bottom === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+  if (border.left !== 'NONE') {
+    borderLeft =
+      border.left === 'THIN'
+        ? '2px solid var(--input-hover-border-color)'
+        : '1px solid var(--excel-sheet-border)';
+  }
+
+  // Return the converted styles
   return {
     fontSize: `${backendStyle.size}px`,
     fontFamily: backendStyle.name,
@@ -81,24 +115,13 @@ export function convertStyleToFrontend(
     backgroundColor: `#${backendStyle.backgroundColor}`,
     fontWeight: backendStyle.bold ? 'bold' : 'normal',
     fontStyle: backendStyle.italic ? 'italic' : 'normal',
-    textDecoration: backendStyle.underline ? 'underline' : 'value',
-    textDecorationStyle: getTextDecoration(backendStyle.underline),
-    borderTop:
-      backendStyle.border.top === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderRight:
-      backendStyle.border.right === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderBottom:
-      backendStyle.border.bottom === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
-    borderLeft:
-      backendStyle.border.left === 'NONE'
-        ? 'none'
-        : `1px solid ${backendStyle.borderColor}`,
+    textDecoration: backendStyle.underline
+      ? `underline ${getTextDecoration(backendStyle.underline)}`
+      : 'none',
+    borderTop: borderTop,
+    borderRight: borderRight,
+    borderBottom: borderBottom,
+    borderLeft: borderLeft,
     textAlign: getTextAlignment(backendStyle.alignment.horizontal),
   };
 }
@@ -133,7 +156,7 @@ export const convertStyleToBackend = (
     size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
     bold: frontendStyle.fontWeight === 'bold',
     italic: frontendStyle.fontStyle === 'italic',
-    underline:"solid",
+    underline: 'solid',
     color: frontendStyle.color?.replace('#', '') || '000000',
     backgroundColor:
       frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
@@ -109,7 +109,6 @@ export const WithRadioButton: Story = {
       useState<RadioOption>();
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
-    const fileInputRef = useRef<HTMLInputElement | null>(null);
 
     const drawerArgs = {
       primaryButtonProps: {
@@ -126,12 +125,6 @@ export const WithRadioButton: Story = {
       },
     };
 
-    useEffect(() => {
-      if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
-        fileInputRef.current.click();
-      }
-    }, [selectedRadioOption]);
-
     const radioOptions: RadioOption[] = [
       { value: 'Test Data', label: 'Test Data' },
       { value: 'Local File', label: 'Local File' },
@@ -146,10 +139,11 @@ export const WithRadioButton: Story = {
     };
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files?.[0];
+      
       if (file) {
         setSelectedFile(file);
       }
-    };
+    };    
 
     const handleRemoveFile = () => {
       setSelectedFile(null);
@@ -191,15 +185,7 @@ export const WithRadioButton: Story = {
             toastMessage={'Max 5 files can be uploaded'}
           />
         )}
-        {selectedRadioOption?.value === 'Local File' ? (
-          <input
-            ref={fileInputRef}
-            type="file"
-            className='ff-input-ref'
-            onChange={handleFileChange}
-            accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
-          />
-        ) : (
+        {selectedRadioOption?.value === 'Local File' &&
           <Drawer
             {...drawerArgs}
             isOpen={showModal}
@@ -210,7 +196,7 @@ export const WithRadioButton: Story = {
           >
             <Typography>Upload TestData Files Here</Typography>
           </Drawer>
-        )}
+        }
       </>
     );
   },

package/src/components/FileDropzone/FileDropzone.tsx

@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
 import './FileDropzone.scss';
 import Icon from '../Icon';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
 import classNames from 'classnames';
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   isApiResponseError = false,
   isDisable = false,
 }) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const {
     getRootProps,
     getInputProps,
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
     [acceptedFiles, handleRemoveClick, handleReplaceClick]
   );
 
+  useEffect(() => {
+    if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [selectedRadioOption]);
+
   useEffect(() => {
     if (!checkEmpty(acceptedFiles) && setSelectedFile) {
       setSelectedFile(acceptedFiles[0] || null);
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   );
 
   return (
-    <div className={classNames('ff-file-dropzone-wrapper',
-      {'ff-disable-file-dropzone-wrapper': isDisable,}
-    )} style={{ width: `${width}px` }}>
+    <div
+      className={classNames('ff-file-dropzone-wrapper', {
+        'ff-disable-file-dropzone-wrapper': isDisable,
+      })}
+      style={{ width: `${width}px` }}
+    >
       <Dropzone
         icon={icon}
         primaryLabel={primaryLabel}
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         isDisable={isDisable}
       />
 
+      {isWebServiceFileDropZone && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          className="ff-input-ref"
+          onChange={handleFileChange}
+          accept={accept.join(',')}
+        />
+      )}
+
       {isWebServiceFileDropZone ? null : (
         <div
           className={'ff-file-details-wrapper'}

package/src/components/Form/Forms.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useImperativeHandle } from 'react';
 import Form from './Form';
-
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
   id?: string;
   onSubmit: Form.SubmitHandler<T>;
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
   ref: React.Ref<any>
 ) => {
   const methods = Form.useForm<T>(rest);
-
   const { handleSubmit } = methods;
   const extendedMethods = {
     ...methods,

package/src/components/Icon/iconList.ts

@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
 import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
 
+import IosIcon from '../../assets/icons/ios_icon.svg?react';
+import HelpIcon from '../../assets/icons/help_icon.svg?react';
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
 import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
 import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
+import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
 import EyeClosed from '../../assets/icons/eye_closed.svg?react';
 import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
 import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
@@ -192,6 +195,8 @@ 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 AiSearch from '../../assets/icons/ai_search.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';
@@ -246,6 +251,7 @@ import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react'
 import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
 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';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -351,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
 Components['plus_user_icon'] = PlusUserIcon;
 Components['label_plus'] = LabelPlusIcon;
 Components['manual_locator'] = ManualLocator;
+Components['ios_icon'] = IosIcon;
+Components['help_icon'] = HelpIcon;
 Components['select_license'] = SwitchLicenseIcon;
 Components['fireflink-logo'] = FireflinkLogo;
 Components['wswb_delete_icon'] = WSWBDeleteIcon;
@@ -382,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
 Components['nlp_help_icon'] = NLPHelpIcon;
 Components['update_icon'] = UpdateIcon;
 Components['add_file'] = AddFile;
+Components['plus_round_icon'] = PlusRoundIcon;
 Components['clone_icon'] = CloneIcon;
 Components['move_icon'] = MoveIcon;
 Components['jira'] = Jira;
@@ -394,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
 Components['eye_closed'] = EyeClosed;
 Components['attachment_icon'] = AttachmentIcon;
 Components['authorization_icon'] = AuthorizationIcon;
+Components['ai_search'] = AiSearch;
 
 Components['fireflink_platform_logo'] = FireflinkPlatform;
 Components['fireflink_finder_logo'] = FireflinkFinder;
@@ -488,4 +498,6 @@ Components['machine_enable_icon'] = machineEnableIcon;
 Components['machine_disable_icon'] = machineDisableIcon;
 Components['executions_icon'] = executionsIcon;
 Components['suites_icon'] = suitesIcon;
+Components['import_icon'] = ImportIcon;
+
 export default Components;