pixel-react 1.9.0 → 1.9.2

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

@@ -127,6 +127,7 @@ import LabelPlusIcon from '../../assets/icons/label_plus.svg?react';
 import Drag from '../../assets/icons/drag_icon.svg?react';
 import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
 import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
+import ClearCache from '../../assets/icons/clear_cache.svg?react';
 import Reload from '../../assets/icons/reload.svg?react';
 import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
 import WindowRestore from '../../assets/icons/window_restore.svg?react';
@@ -249,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';
@@ -258,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;
@@ -384,6 +406,7 @@ Components['browser_stack_icon'] = BrowserStack;
 Components['run_icon'] = Run;
 Components['backward_icon'] = BackwardIcon;
 Components['forward_icon'] = ForwardIcon;
+Components['clear_cache'] = ClearCache;
 Components['reload'] = Reload;
 Components['window_maximize'] = WindowMaximize;
 Components['window_restore'] = WindowRestore;
@@ -506,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/MobileSkin/MobileSkin.scss

@@ -12,56 +12,56 @@
   &.landscape {
     gap: 38px;
   }
-}
 
-.ff-mobileskin-container {
-  @extend .ff-mobileskin-wrapper;
-}
+  .ff-mobileskin-container {
+    @extend .ff-mobileskin-wrapper;
+    .ff-mobile-container {
+      @include center-content;
+      border: 8px solid var(--text-color);
+      border-radius: 30px;
+      position: relative;
+      overflow: hidden;
 
-.ff-mobile-container {
-  border: 8px solid var(--text-color);
-  @include center-content;
-  position: relative;
-  overflow: hidden;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+      }
 
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+      }
+      .ff-mobile-image-container {
+        @include center-content;
+        overflow: hidden;
+      }
+    }
   }
 
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
+  .ff-notch {
+    background-color: var(--text-color);
+    border-radius: 24px;
+    position: absolute;
+    &.android-notch {
+      border-radius: 50%;
+    }
   }
-}
-
-.ff-mobile-image-container {
-  @include center-content;
-  overflow: hidden;
-}
-
-.ff-notch {
-  background-color: var(--text-color);
-  border-radius: 24px;
-  position: absolute;
-}
-
-.ff-nav-bar {
-  height: 32px;
-  padding: 8px;
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  border: 1px solid var(--brand-color);
-  border-radius: 24px;
-}
-
-.ff-nav-bar-icon {
-  height: 16px;
-  padding: 8px;
-  border-right: 1px solid var(--brand-color);
-  @include center-content;
+  .ff-nav-bar {
+    height: 32px;
+    padding: 8px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border: 1px solid var(--brand-color);
+    border-radius: 24px;
+  }
+  .ff-nav-bar-icon {
+    height: 16px;
+    padding: 8px;
+    border-right: 1px solid var(--brand-color);
+    @include center-content;
 
-  &.last-icon {
-    border-right: none;
+    &.last-icon {
+      border-right: none;
+    }
   }
 }

package/src/components/MobileSkin/MobileSkin.tsx

@@ -22,7 +22,9 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
 
   return (
     <div
-      className={`ff-mobileskin-wrapper ${isPortrait ? 'portrait' : 'landscape'}`}
+      className={`ff-mobileskin-wrapper ${
+        isPortrait ? 'portrait' : 'landscape'
+      }`}
     >
       <div
         className="ff-mobileskin-container"
@@ -36,7 +38,6 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
           style={{
             width: containerWidth,
             height: containerHeight,
-            borderRadius: isIos ? '30px' : '10px',
           }}
         >
           <div className="ff-mobile-image-container">
@@ -55,18 +56,18 @@ const MobileSkin: React.FC<MobileSkinProps> = ({
           </div>
         </div>
 
-        {isIos && (
-          <div
-            className="ff-notch"
-            style={{
-              height: isPortrait ? notchHeight : notchWidth,
-              width: isPortrait ? notchWidth : notchHeight,
-              transform: isPortrait
-                ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.46}px)`
-                : `translate(${containerWidth * -0.46}px, ${containerHeight * -0.01}px)`,
-            }}
-          ></div>
-        )}
+        <div
+          className={`ff-notch ${!isIos ? 'android-notch' : ''}`}
+          style={{
+            height: !isIos ? 15 : isPortrait ? notchHeight : notchWidth,
+            width: !isIos ? 15 : isPortrait ? notchWidth : notchHeight,
+            transform: isPortrait
+              ? `translate(${mobileWidth * 0.01}px, ${mobileHeight * -0.43}px)`
+              : `translate(${containerWidth * -0.46}px, ${
+                  containerHeight * -0.01
+                }px)`,
+          }}
+        ></div>
       </div>
       <div className="ff-nav-bar">
         {navBarIcons.map((icon, index) => (

package/src/components/MobileSkin/types.ts

@@ -12,7 +12,7 @@ export interface MobileSkinProps {
   /**
    *    Portrait or landScape View of the Mobile
    */
-  orientation: string;
+  orientation: "portrait" | "landscape";
   /**
    * type either it will be ios or android
    */

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 }) => {

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

@@ -4,23 +4,37 @@ import RadioButton from '../../RadioButton';
 import { TableCellProps } from '../types';
 import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
 import React from 'react';
+import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
 
 const renderSpaces = (
   level: number,
   parentSiblings: boolean[],
   isLast?: boolean | undefined
-) => (
-  <div className="tree-table-space-container">
-    {parentSiblings.reverse().map((line, i) => (
-      <span
-        key={i}
-        className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
-          isLast && i === level - 1 ? 'last-node' : ''
-        }`}
-      />
-    ))}
-  </div>
-);
+) => {
+  let siblingsArray = parentSiblings;
+  let isLastNode = isLast;
+  if (checkEmpty(parentSiblings)) {
+    isLastNode = false;
+
+    if (!isNaN(level)) {
+      siblingsArray = Array(level).fill(true);
+    }
+  }
+
+  parentSiblings;
+  return (
+    <div className="tree-table-space-container">
+      {siblingsArray.reverse().map((line, i) => (
+        <span
+          key={i}
+          className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
+            isLastNode && i === level - 1 ? 'last-node' : ''
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
 
 const TableCell = React.memo(
   ({

package/src/components/TableTree/TableTree.tsx

@@ -16,23 +16,26 @@ const TreeTable: React.FC<TreeTableProps> = ({
   onExpand,
   loadMore = () => {},
 }) => {
-  useIntersectionObserver(['ff-table-tree-last-node'], {
-    root: null,
-    rootMargin: '0px',
-    threshold: 0.1,
-    onIntersect: (entry) => {
-      if (entry.isIntersecting) {
-        if (functionCheck(loadMore)) {
-          let direction = 'up';
-          if (entry.target.id === 'ff-table-tree-last-node') {
-            direction = 'down';
+  useIntersectionObserver(
+    ['ff-table-tree-last-node', 'ff-table-tree-first-node'],
+    {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1,
+      onIntersect: (entry) => {
+        if (entry.isIntersecting) {
+          if (functionCheck(loadMore)) {
+            let direction = 'up';
+            if (entry.target.id === 'ff-table-tree-last-node') {
+              direction = 'down';
+            }
+            loadMore(direction);
           }
-          loadMore(direction);
+          console.log('Element in view:', entry.target.id);
         }
-        console.log('Element in view:', entry.target.id);
-      }
-    },
-  });
+      },
+    }
+  );
 
   const handleToggleExpand = useCallback(
     (node: any) => onExpand?.(true, node?.id),

package/src/components/TableTree/data.ts

@@ -31,37 +31,6 @@ const data = [
     isLast: true,
     parentSiblings: [true],
   },
-  {
-    node: {
-      subModuleCount: 15,
-      title: 'mod1',
-      scriptCount: 0,
-      path: '/Root',
-      expanded: true,
-      modifiedOn: '19-12-2023 15:32',
-      children: false,
-      lastExecutionOrder: 3,
-      imported: false,
-      modifiedBy: '--',
-      moduleCountWithScript: 1,
-      state: 'NEW',
-      key: 'MOD1001',
-      ver: 1,
-      hierarchy: 0,
-      assigneeCount: 0,
-      searchKey: '/MOD1001111110000000000',
-      modifiedByUname: '--',
-      executionOrder: 0,
-      createdByUname: 'Shivaprasad',
-      folder: true,
-      moduleLevelScriptCount: 0,
-      name: 'Root Module',
-      parentId: 'MOD1001', // Root has no parent
-      id: 'MOD1002', // Unique ID
-    },
-    parentSiblings: [true, false],
-    lines: 1,
-  },
   {
     node: {
       subModuleCount: 10,

package/src/index.ts

@@ -162,6 +162,7 @@ import {
   ELEMENTS_WHITE_SPACE_REGEX,
   PARAMETER_ALPHANUMERIC_REGEX,
 } from './validations/regex';
+import { getFromIndexedDB, saveToIndexedDB } from './utils/indexDBStore/indexDB';
 
 export {
   Button,
@@ -270,6 +271,8 @@ export {
   FormatString,
   hasDuplicateFile,
   useKeyboardActions,
+  saveToIndexedDB,
+  getFromIndexedDB,
   
   EMAIL_REGEX,
   URL_REGEX,