pixel-react-excel-sheet 1.0.39 → 1.0.41

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

@@ -34,7 +34,8 @@ export const Default: Story = {
           [
             {
               value: 'Test Sample Data 1',
-              style: {
+              styles: {
+                //TODO remove 's' for Style
                 name: 'Arial',
                 size: 11,
                 bold: true,
@@ -57,7 +58,8 @@ export const Default: Story = {
             },
             {
               value: 'Test Data 2',
-              style: {
+              styles: {
+                //TODO remove 's' for Style
                 name: 'Arial',
                 size: 12,
                 bold: true,
@@ -82,7 +84,8 @@ export const Default: Story = {
           [
             {
               value: 'Test Data 3',
-              style: {
+              styles: {
+                //TODO remove 's' for Style
                 name: 'Arial',
                 size: 11,
                 bold: false,
@@ -105,7 +108,8 @@ export const Default: Story = {
             },
             {
               value: 'Test Sample Data 4',
-              style: {
+              styles: {
+                //TODO remove 's' for Style
                 name: 'Arial',
                 size: 11,
                 bold: false,

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

@@ -151,39 +151,73 @@ 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: '9',
-      value: '9',
+      label: 'Arial Black',
+      value: '"Arial Black"',
     },
     {
-      label: '11',
-      value: '11',
+      label: 'Lucida Console',
+      value: '"Lucida Console"',
     },
     {
-      label: '12',
-      value: '12',
+      label: 'Lucida Sans Unicode',
+      value: '"Lucida Sans Unicode"',
     },
     {
-      label: '14',
-      value: '14',
+      label: 'Courier',
+      value: 'Courier',
     },
     {
-      label: '16',
-      value: '16',
+      label: 'Arial Rounded MT Bold',
+      value: '"Arial Rounded MT Bold"',
     },
     {
-      label: '18',
-      value: '18',
+      label: 'Georgia',
+      value: 'Georgia',
     },
+    {
+      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 }));
   };

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

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,

package/src/utils/indexDBStore/indexDB.ts

@@ -0,0 +1,37 @@
+import { openDB, DBSchema } from 'idb';
+
+// Define the database schema
+interface MyDB extends DBSchema {
+  items: {
+    key: string; // Key for each item
+    value: string; // Stored value, encoded as a string
+  };
+}
+
+// Open the database
+const dbPromise = openDB<MyDB>('my-database', 1, {
+  upgrade(db) {
+    if (!db.objectStoreNames.contains('items')) {
+      db.createObjectStore('items');
+    }
+  },
+});
+
+// Encoding utility
+const encode = (data: string): string => btoa(unescape(encodeURIComponent(data))); // Example: Base64 encoding
+// Decoding utility
+const decode = (data: string): string => decodeURIComponent(escape(atob(data)));
+
+// Save data to IndexedDB
+export const saveToIndexedDB = async (key: string, value: string): Promise<void> => {
+  const db = await dbPromise;
+  const encodedValue = encode(value);
+  await db.put('items', encodedValue, key);
+};
+
+// Get data from IndexedDB
+export const getFromIndexedDB = async (key: string): Promise<string | null> => {
+  const db = await dbPromise;
+  const encodedValue = await db.get('items', key);
+  return encodedValue ? decode(encodedValue) : null;
+};