pixel-react 1.9.1 → 1.9.3

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,35 @@ 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 Azure from '../../assets/icons/azure.svg?react';
+import Bitbucket from '../../assets/icons/bitbucket.svg?react';
+import Github from '../../assets/icons/github.svg?react';
+import Gitlab from '../../assets/icons/gitlab.svg?react';
+import Jenkins from '../../assets/icons/jenkins.svg?react';
+import JiraLogo from '../../assets/icons/jira_logo.svg?react';
+import Slack from '../../assets/icons/slack.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';
+import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -508,10 +537,38 @@ 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['azure'] = Azure;
+Components['bitbucket'] = Bitbucket;
+Components['github'] = Github;
+Components['gitlab'] = Gitlab;
+Components['jenkins'] = Jenkins;
+Components['jira_logo'] = JiraLogo;
+Components['slack'] = Slack;
+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;
+Components['primary_calendar_icon'] = PrimaryCalendarIcon
 
 export default Components;

package/src/components/Table/Table.scss

@@ -1,6 +1,7 @@
 .ff-fixed-header-table {
   overflow-y: auto;
 }
+
 .ff-table-icon {
   position: absolute;
   top: 10px;
@@ -12,21 +13,25 @@
 
 .ff-table {
   width: 100%;
+
   th,
   td {
     text-align: left;
     font-size: 12px;
     padding: 9px 8px;
   }
+
   thead {
     tr {
       th {
         border-bottom: 1px solid var(--slider-table-color);
       }
+
       th {
         .ff-label-checkbox-container {
           display: flex;
           align-items: center;
+
           .ff-table-checkbox {
             padding-right: 8px;
           }
@@ -34,19 +39,42 @@
       }
     }
   }
+
   tbody {
     tr {
       .action-column {
         opacity: 0;
       }
+
       .icon-container {
-        padding-left: 10px;
+        padding-left: 8px;
         opacity: 0;
         display: flex;
         justify-content: flex-end;
         transition: opacity 0.3s ease, transform 0.3s ease;
         transform: translateX(20px);
       }
+
+      .ff-data-checkbox-container {
+        display: flex;
+        align-items: center;
+
+        .ff-table-checkbox {
+          padding-right: 8px;
+        }
+
+        .ff-table-drag {
+          opacity: 0;
+          transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+
+        .ff-table-drag-icon {
+          opacity: 0;
+          transition: opacity 0.3s ease, transform 0.3s ease;
+          cursor: grab;
+        }
+      }
+
       &:hover {
         background-color: var(--hover-color);
 
@@ -54,7 +82,13 @@
           opacity: 1;
           transform: translateX(0);
         }
+
+        .ff-table-drag,
+        .ff-table-drag-icon {
+          opacity: 1;
+        }
       }
+
       td {
         position: relative;
         color: var(--table-column-text-color);
@@ -63,36 +97,34 @@
           cursor: pointer;
         }
       }
-      td {
-        .ff-data-checkbox-container {
-          display: flex;
-          align-items: center;
-          .ff-table-checkbox {
-            padding-right: 8px;
-          }
-        }
-      }
     }
   }
+
   .primary-bg {
     background-color: var(--brand-color);
   }
+
   .secondary-bg {
     background-color: var(--slider-table-color);
   }
+
   .tertiary-bg {
     background-color: var(--custom-table-header-bg-color);
   }
+
   .default-bg {
     background-color: transparent;
   }
+
   .default-color {
     color: var(--table-header-text-color);
   }
+
   .primary-color {
     color: var(--brand-color);
   }
 }
+
 .border-borderRadius {
   border: 1px solid var(--slider-table-color);
   border-radius: 5px;
@@ -105,6 +137,7 @@
   z-index: 99;
   background-color: Var(--file-details-bg);
 }
+
 .no-data-content {
   display: flex;
   flex-direction: column;
@@ -115,4 +148,4 @@
 tbody tr.disabled-row {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}

package/src/components/Table/Table.stories.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Table from './Table';
-
+import { ffid } from '../../utils/ffID/ffid';
+import { rearrangeDragItem } from '../../utils/swapArrayItem/dragAndDropUtils';
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
   component: Table,
@@ -20,6 +21,7 @@ const defaultArgs = {
 const sampleData = [
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user4',
       modifiedOn: '18-03-2024 10:47',
       name: 'Test1',
@@ -31,6 +33,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user3',
       modifiedOn: '13-03-2024 15:15',
       name: 'Test2',
@@ -42,6 +45,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user2',
       modifiedOn: '13-03-2024 15:30',
       name: 'Test3',
@@ -53,6 +57,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user1',
       modifiedOn: '18-03-2024 15:36',
       name: 'Test4',
@@ -64,6 +69,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user4',
       modifiedOn: '18-03-2024 10:47',
       name: 'Test1',
@@ -75,6 +81,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user3',
       modifiedOn: '13-03-2024 15:15',
       name: 'Test2',
@@ -86,6 +93,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user2',
       modifiedOn: '13-03-2024 15:30',
       name: 'Test3',
@@ -97,6 +105,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user1',
       modifiedOn: '18-03-2024 15:36',
       name: 'Test4',
@@ -108,6 +117,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user4',
       modifiedOn: '18-03-2024 10:47',
       name: 'Test1',
@@ -119,6 +129,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user3',
       modifiedOn: '13-03-2024 15:15',
       name: 'Test2',
@@ -130,6 +141,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user2',
       modifiedOn: '13-03-2024 15:30',
       name: 'Test3',
@@ -141,6 +153,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user1',
       modifiedOn: '18-03-2024 15:36',
       name: 'Test4',
@@ -247,6 +260,7 @@ export const PageTable: Story = {
     );
   },
 };
+
 export const PrimaryHeader: Story = {
   args: {
     ...defaultArgs,
@@ -370,4 +384,49 @@ export const TableWithNoData: Story = {
     );
   },
 };
+
+export const DragAndDropTable: Story = {
+  args: {
+    ...defaultArgs,
+    data: sampleData.map((x) => x.project),
+
+    columns: columnsData,
+    tableDataTextColor: 'var(--brand-color)',
+  },
+  render: () => {
+    // important prerequisite tableData should have unique IDs
+    const [tableData, setTableData] = useState(
+      sampleData.map((data) => data.project)
+    );
+    useEffect(() => {
+      let sampleArray: any = [];
+      sampleData.forEach((data) => {
+        sampleArray.push(data.project);
+      });
+      setTableData(sampleArray);
+    }, []);
+
+    const handleIconClick = () => {};
+
+    const onDragEnd = (oldIndex: number, newIndex: number) => {
+      const updatedData = rearrangeDragItem(tableData, oldIndex, newIndex);
+      setTableData(updatedData);
+    };
+    return (
+      <>
+        <Table
+          draggable
+          onDragEnd={onDragEnd}
+          {...defaultArgs}
+          data={tableData}
+          columns={columnsData}
+          headerType="secondary"
+          noDataContent="No data found"
+          headerIconName={'expand_icon'}
+          headerIconOnClick={handleIconClick}
+        />
+      </>
+    );
+  },
+};
 export default meta;