pixel-react 1.9.1 → 1.9.2

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

@@ -17,9 +17,7 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 interface ExcelFileProps {
   /** The Excel data containing sheets and their content */
-  excelData: {
-    sheets: WorkSheet[];
-  };
+  excelData: WorkSheet[];
 
   /** Optional: Provide context menu options for actions like right-click */
   contextOption?: {
@@ -130,49 +128,57 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
 
   useEffect(() => {
     const payload = excelData;
-    const sheetNames = payload.sheets.map((e) => e.sheetName);
-    setSheetNames(sheetNames);
-    if (sheetNames.length > 0) {
-      pageRef.current = sheetNames[0] ? sheetNames[0] : '';
-      setSelectedSheet({ name: sheetNames[0] ? sheetNames[0] : '', index: 0 });
-    }
-    const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
-    payload.sheets.forEach((sheet) => {
-      const sheetName = sheet.sheetName;
-      const json = sheet.data;
-      const maxRows = Math.max(26, json.length + 2);
-      const maxCols = Math.max(
-        26,
-        Math.max(...json.map((row) => row.length)) + 2
-      );
-
-      let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
-        { length: maxRows },
-        () => Array.from({ length: maxCols }, () => EmptyRow)
-      );
-      json.forEach((row, rowIndex) => {
-        row.forEach((cell, colIndex) => {
-          if (rowIndex < maxRows && colIndex < maxCols) {
-            if (!spreadsheetData[rowIndex]) {
-              spreadsheetData[rowIndex] = [];
+    if (payload) {
+      const sheetNames = payload.map((e) => e.sheetName);
+      setSheetNames(sheetNames);
+
+      if (!checkEmpty(sheetNames.length)) {
+        pageRef.current = sheetNames[0] ? sheetNames[0] : ''; //Ternary is required, must use ''
+        setSelectedSheet({
+          name: sheetNames[0] ? sheetNames[0] : '', //Ternary is required, must use ''
+          index: 0,
+        });
+      }
+      const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
+      payload.forEach((sheet) => {
+        const sheetName = sheet.sheetName;
+        const json = sheet.data;
+        const maxRows = Math.max(26, json.length + 2);
+        const maxCols = Math.max(
+          26,
+          Math.max(...json.map((row) => row.length)) + 2
+        );
+
+        let spreadsheetData: Matrix.Matrix<CellBase> = Array.from(
+          { length: maxRows },
+          () => Array.from({ length: maxCols }, () => EmptyRow)
+        );
+
+        json.forEach((row, rowIndex) => {
+          row.forEach((cell, colIndex) => {
+            if (rowIndex < maxRows && colIndex < maxCols) {
+              if (!spreadsheetData[rowIndex]) {
+                spreadsheetData[rowIndex] = [];
+              }
+              spreadsheetData[rowIndex][colIndex] = {
+                value: checkVal(cell.value),
+                style: convertStyleToFrontend(cell?.styles), //TODO remove 's' for Style
+                type: true,
+              };
             }
-            spreadsheetData[rowIndex][colIndex] = {
-              value: checkVal(cell.value),
-              style: convertStyleToFrontend(cell?.style),
-              type: true,
-            };
-          }
+          });
         });
-      });
 
-      newWorksheetsData[sheetName] = spreadsheetData;
-    });
-    setWorksheetsData(newWorksheetsData);
-    const firstSheetName = Object.keys(newWorksheetsData)[0];
-    if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
-      setSelectedSheetData(newWorksheetsData[firstSheetName]);
+        newWorksheetsData[sheetName] = spreadsheetData;
+      });
+      setWorksheetsData(newWorksheetsData);
+      const firstSheetName = Object.keys(newWorksheetsData)[0];
+      if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
+        setSelectedSheetData(newWorksheetsData[firstSheetName]);
+      }
     }
-  }, []);
+  }, [excelData]);
+
   const handleSave = React.useCallback(
     (event: KeyboardEvent) => {
       if (event.ctrlKey && event.key === 's') {

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

@@ -27,111 +27,113 @@ type Story = StoryObj<typeof ExcelFile>;
 
 export const Default: Story = {
   args: {
-    excelData: {
-      sheets: [
-        {
-          sheetName: 'fireflink',
-          data: [
-            [
-              {
-                value: 'Test Sample Data 1',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: true,
-                  italic: false,
-                  color: 'ffffff', // Sample data from backend without #
-                  backgroundColor: '434db8', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+    excelData: [
+      {
+        sheetName: 'fireflink',
+        data: [
+          [
+            {
+              value: 'Test Sample Data 1',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: true,
+                italic: false,
+                color: 'ffffff', // Sample data from backend without #
+                backgroundColor: '434db8', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Data 2',
-                style: {
-                  name: 'Arial',
-                  size: 12,
-                  bold: true,
-                  italic: true,
-                  color: 'EB5B00', // Sample data from backend without #
-                  backgroundColor: '88C273', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Data 2',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 12,
+                bold: true,
+                italic: true,
+                color: 'EB5B00', // Sample data from backend without #
+                backgroundColor: '88C273', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
-            [
-              {
-                value: 'Test Data 3',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '000000', // Sample data from backend without #
-                  backgroundColor: 'EB5B00', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'NONE',
-                    bottom: 'NONE',
-                    left: 'NONE',
-                    right: 'NONE',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+          ],
+          [
+            {
+              value: 'Test Data 3',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '000000', // Sample data from backend without #
+                backgroundColor: 'EB5B00', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'NONE',
+                  bottom: 'NONE',
+                  left: 'NONE',
+                  right: 'NONE',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-              {
-                value: 'Test Sample Data 4',
-                style: {
-                  name: 'Arial',
-                  size: 11,
-                  bold: false,
-                  italic: false,
-                  color: '3D0301', // Sample data from backend without #
-                  backgroundColor: 'C6E7FF', // Sample data from backend without #
-                  borderColor: 'F2F2F2', // Sample data from backend without #
-                  border: {
-                    top: 'THIN',
-                    bottom: 'THIN',
-                    left: 'THIN',
-                    right: 'THIN',
-                  },
-                  alignment: {
-                    horizontal: 'GENERAL',
-                    vertical: 'BOTTOM',
-                    wrapText: false,
-                  },
+            },
+            {
+              value: 'Test Sample Data 4',
+              styles: {
+                //TODO remove 's' for Style
+                name: 'Arial',
+                size: 11,
+                bold: false,
+                italic: false,
+                color: '3D0301', // Sample data from backend without #
+                backgroundColor: 'C6E7FF', // Sample data from backend without #
+                borderColor: 'F2F2F2', // Sample data from backend without #
+                border: {
+                  top: 'THIN',
+                  bottom: 'THIN',
+                  left: 'THIN',
+                  right: 'THIN',
+                },
+                alignment: {
+                  horizontal: 'GENERAL',
+                  vertical: 'BOTTOM',
+                  wrapText: false,
                 },
               },
-            ],
+            },
           ],
-        },
-      ],
-    },
+        ],
+      },
+    ],
     toolbar: 'show',
     contextOption: {
       open: true,

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

@@ -123,7 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       value: 'double_border',
       label: 'Double Underline',
       icon: 'double_underline',
-    }
+    },
   ];
 
   const fontFamily = [
@@ -151,39 +151,77 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
       label: 'Courier New',
       value: '"Courier New"',
     },
-  ];
-
-  const fontSize = [
     {
-      label: '5',
-      value: '5',
+      label: 'Verdana',
+      value: 'Verdana',
+    },
+    {
+      label: 'Tahoma',
+      value: 'Tahoma',
+    },
+    {
+      label: 'Trebuchet MS',
+      value: '"Trebuchet MS"',
+    },
+    {
+      label: 'Comic Sans MS',
+      value: '"Comic Sans MS"',
+    },
+    {
+      label: 'Impact',
+      value: 'Impact',
+    },
+    {
+      label: 'Arial Black',
+      value: '"Arial Black"',
+    },
+    {
+      label: 'Lucida Console',
+      value: '"Lucida Console"',
     },
     {
-      label: '9',
-      value: '9',
+      label: 'Lucida Sans Unicode',
+      value: '"Lucida Sans Unicode"',
     },
     {
-      label: '11',
-      value: '11',
+      label: 'Courier',
+      value: 'Courier',
     },
     {
-      label: '12',
-      value: '12',
+      label: 'Helvetica',
+      value: 'Helvetica',
     },
     {
-      label: '14',
-      value: '14',
+      label: 'Arial Rounded MT Bold',
+      value: '"Arial Rounded MT Bold"',
     },
     {
-      label: '16',
-      value: '16',
+      label: 'Georgia',
+      value: 'Georgia',
     },
     {
-      label: '18',
-      value: '18',
+      label: 'sans-serif',
+      value: 'sans-serif',
+    },
+    {
+      label: 'serif',
+      value: 'serif',
+    },
+    {
+      label: 'monospace',
+      value: 'monospace',
     },
   ];
 
+  const fontSizeList = [
+    5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 72,
+  ];
+
+  const fontSize = fontSizeList.map((fontSize) => ({
+    label: fontSize,
+    value: fontSize,
+  }));
+
   const getTextColor = (color: string) => {
     setColorPicker((prev) => ({ ...prev, color: color }));
   };
@@ -259,7 +297,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Text Left'}>
           <Icon
             variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={cellStyle.textAlign === 'left' ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'left')}
             name="text_align_left"
@@ -268,7 +306,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Text Center'}>
           <Icon
             variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={cellStyle.textAlign === 'center' ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'center')}
             name="text_align_center"
@@ -278,7 +316,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Text Right'}>
           <Icon
             variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={cellStyle.textAlign === 'right' ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => setTextAlign(data, 'right')}
             name="text_align_right"
@@ -290,7 +328,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Bold'}>
           <Icon
             variant={styleBackend.bold ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={styleBackend.bold ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => onBold(data)}
             name="bold"
@@ -298,8 +336,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         </Tooltip>
         <Tooltip placement="top" title={'Italic'}>
           <Icon
-            hoverEffect
             variant={styleBackend.italic ? 'dark' : 'light'}
+            hoverEffect={styleBackend.italic ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => onItalic(data)}
             name="italic"
@@ -311,7 +349,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
               variant={
                 cellStyle.textDecoration === underLine ? 'dark' : 'light'
               }
-              hoverEffect
+              hoverEffect={
+                cellStyle.textDecoration === underLine ? false : true
+              }
               disabled={toolbar === 'disable'}
               onClick={() => setUnderlineType(data, underLine, true)}
               name={getUnderlineIcon()}
@@ -324,7 +364,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
                 iconSize={12}
                 options={underlineTypeIcon}
                 tooltipPlacement="top"
-                variant="light"
                 onOptionClick={(e) => {
                   let selectedValue = e.value as string;
                   setUnderlineType(data, selectedValue, true);
@@ -340,7 +379,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         <Tooltip placement="top" title={'Format Painter'}>
           <Icon
             variant={formattedStyle ? 'dark' : 'light'}
-            hoverEffect
+            hoverEffect={formattedStyle ? false : true}
             disabled={toolbar === 'disable'}
             onClick={() => {
               setFormatePainter(data);
@@ -403,7 +442,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
                 zIndex={1000}
                 options={borderTypeIcon}
                 tooltipPlacement="top"
-                variant="light"
                 onOptionClick={(e) => {
                   let selectedValue = e.value as string;
                   setBorderType(data, selectedValue, 'black');
@@ -415,7 +453,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
         </Tooltip>
       </div>
 
-  
       {/* <div className="ff-excel-toolbar-divider"></div>  TODO */}
       {/* <div className="ff-excel-toolbar-menu"> 
         <Tooltip placement="top" title={'Formula'}>

package/src/components/Excel/Types.ts

@@ -31,7 +31,7 @@ interface WorkData {
   value: string;
 
   /** Styling options for the cell */
-  style: BackendStyle;
+  styles: BackendStyle; //TODO remove 's' for Style
   type?: boolean;
 }
 

package/src/components/Excel/dataConversion.ts

@@ -74,7 +74,6 @@ export const getTextDecorationBack = (
 export function convertStyleToFrontend(
   backendStyle: BackendStyle
 ): React.CSSProperties {
-
   const { border } = backendStyle;
 
   let borderTop = '';
@@ -82,32 +81,31 @@ export function convertStyleToFrontend(
   let borderBottom = '';
   let borderLeft = '';
 
-  if (border.top !== 'NONE') {
+  if (border.top !== 'THIN') {
     borderTop =
-      border.top === 'THIN'
+      border.top === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
         : '1px solid var(--excel-sheet-border)';
   }
-  if (border.right !== 'NONE') {
+  if (border.right !== 'THIN') {
     borderRight =
-      border.right === 'THIN'
+      border.right === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
         : '1px solid var(--excel-sheet-border)';
   }
-  if (border.bottom !== 'NONE') {
+  if (border.bottom !== 'THIN') {
     borderBottom =
-      border.bottom === 'THIN'
+      border.bottom === 'MEDIUM'
         ? '2px solid var(--input-hover-border-color)'
         : '1px solid var(--excel-sheet-border)';
   }
-  if (border.left !== 'NONE') {
+  if (border.left !== 'THIN') {
     borderLeft =
-      border.left === 'THIN'
+      border.left === 'MEDIUM'
         ? '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,

package/src/components/Icon/iconList.ts

@@ -250,7 +250,7 @@ import variableSet from '../../assets/icons/variable_set.svg?react';
 
 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 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';
@@ -259,6 +259,27 @@ 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';
+import DisableIcon from '../../assets/icons/disable_icon.svg?react';
+import EnableIcon from '../../assets/icons/enable_icon.svg?react';
+
+import ClearHistory from '../../assets/icons/clear_history.svg?react';
+import Csharp from '../../assets/icons/csharp.svg?react';
+import Cypress from '../../assets/icons/cypress.svg?react';
+import Java from '../../assets/icons/java.svg?react';
+import JavaScript from '../../assets/icons/javascript.svg?react';
+import PlayWright from '../../assets/icons/playwright.svg?react';
+import Python from '../../assets/icons/python.svg?react';
+import Code from '../../assets/icons/code.svg?react';
+import Regenerate from '../../assets/icons/regenerate.svg?react';
+import Mic from '../../assets/icons/mic.svg?react';
+import MicActive from '../../assets/icons/mic_filled.svg?react';
+import RightArrowFilled from '../../assets/icons/right_arrow_filled_icon.svg?react';
+import CodeColored from '../../assets/icons/code_colored.svg?react';
+import DesignLink from '../../assets/icons/design_link.svg?react';
+import FileColored from '../../assets/icons/file_colored.svg?react';
+import JiraColored from '../../assets/icons/jira_colored.svg?react';
+import Screenshot from '../../assets/icons/screenshot.svg?react';
+import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -508,10 +529,30 @@ Components['executions_icon'] = executionsIcon;
 Components['suites_icon'] = suitesIcon;
 Components['import_icon'] = ImportIcon;
 Components['settings'] = Settings;
-Components['test_freshers_logo']=TestFreshersLogo;
-Components['unfollow_icon']=UnfollowIcon
+Components['test_freshers_logo'] = TestFreshersLogo;
+Components['unfollow_icon'] = UnfollowIcon;
 Components['external_user'] = ExternalUser;
 Components['single_user'] = SingleUser;
 Components['group_user'] = GroupUser;
+Components['disable_icon'] = DisableIcon;
+Components['enable_icon'] = EnableIcon;
+Components['clear_history'] = ClearHistory;
+Components['csharp'] = Csharp;
+Components['cypress'] = Cypress;
+Components['java'] = Java;
+Components['javascript'] = JavaScript;
+Components['playwright'] = PlayWright;
+Components['python'] = Python;
+Components['code'] = Code;
+Components['regenerate'] = Regenerate;
+Components['mic'] = Mic;
+Components['mic_filled'] = MicActive;
+Components['right_arrow_filled_icon'] = RightArrowFilled;
+Components['code_colored'] = CodeColored;
+Components['design_link'] = DesignLink;
+Components['file_colored'] = FileColored;
+Components['jira_colored'] = JiraColored;
+Components['screenshot'] = Screenshot;
+Components['delete_filled'] = DeleteFilled;
 
 export default Components;

package/src/components/TableTree/Components/TableBody.tsx

@@ -12,7 +12,7 @@ const TableBody = React.memo(
     onToggleExpand,
     onCheckBoxChange,
   }: TableBodyProps) => (
-    <tbody className='ff-table-tree-body'>
+    <tbody className="ff-table-tree-body">
       <tr id="ff-table-tree-first-node" />
       {flattenedTreeData?.map(
         ({ node, level, parentSiblings = [], isLast = false }) => {