pixel-react 1.6.8 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. package/src/components/AddVariables/types.ts +0 -36
@@ -12,7 +12,7 @@ import {
12
12
 
13
13
  export function applyBoldToCells(
14
14
  currentData: Matrix.Matrix<Types.CellBase<any>>,
15
- selectedRange: PointRange,
15
+ selectedRange: PointRange
16
16
  ): Matrix.Matrix<Types.CellBase<any>> {
17
17
  if (!selectedRange) {
18
18
  return currentData;
@@ -217,10 +217,10 @@ export function applyBorderToCells(
217
217
  case 'border-none':
218
218
  updatedCell.style = {
219
219
  ...currentCell.style,
220
- borderRight: `1px solid var(--toggle-strip-color)`,
221
- borderLeft: `1px solid var(--toggle-strip-color)`,
222
- borderTop: `1px solid var(--toggle-strip-color)`,
223
- borderBottom: `1px solid var(--toggle-strip-color)`,
220
+ borderRight: `1px solid var(--excel-sheet-border)`,
221
+ borderLeft: `1px solid var(--excel-sheet-border)`,
222
+ borderTop: `1px solid var(--excel-sheet-border)`,
223
+ borderBottom: `1px solid var(--excel-sheet-border)`,
224
224
  };
225
225
  break;
226
226
  case 'border-right':
@@ -333,8 +333,7 @@ export function applyUnderlineToCells(
333
333
  ...currentCell,
334
334
  style: {
335
335
  ...currentCell.style,
336
- textDecoration: 'none',
337
- textDecorationStyle: 'solid' as TextDecorationStyle,
336
+ textDecoration: 'none solid',
338
337
  },
339
338
  };
340
339
  } else {
@@ -342,11 +341,8 @@ export function applyUnderlineToCells(
342
341
  ...currentCell,
343
342
  style: {
344
343
  ...currentCell.style,
345
- textDecoration: value === 'double_border' ? 'underline' : value,
346
- textDecorationStyle:
347
- value === 'double_border'
348
- ? 'double'
349
- : ('none' as TextDecorationStyle),
344
+ textDecoration:
345
+ value === 'double_border' ? 'underline double' : value,
350
346
  },
351
347
  };
352
348
  }
@@ -480,6 +476,79 @@ export function applyFormatePainter(
480
476
  return undefined;
481
477
  }
482
478
 
479
+ export function dragEndFormatePainter(
480
+ currentData: Matrix.Matrix<Types.CellBase<any>>,
481
+ selectedRange: PointRange | null,
482
+ formattedStyle: Types.formattedStyle
483
+ ): Matrix.Matrix<Types.CellBase<any>> {
484
+ if (!selectedRange || !formattedStyle.open) {
485
+ return currentData;
486
+ }
487
+
488
+ const { start, end } = selectedRange;
489
+ let updatedData = currentData;
490
+
491
+ for (let row = start.row; row <= end.row; row++) {
492
+ for (let col = start.column; col <= end.column; col++) {
493
+ const currentCell = Matrix.get({ row, column: col }, updatedData);
494
+ if (!currentCell) {
495
+ continue;
496
+ }
497
+ const updatedCell = {
498
+ ...currentCell,
499
+ style: formattedStyle.style,
500
+ };
501
+ updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
502
+ }
503
+ }
504
+ return updatedData;
505
+ }
506
+
507
+ export function dragEndAutoFill(
508
+ currentData: Matrix.Matrix<Types.CellBase<any>>,
509
+ selectedRange: PointRange | null,
510
+ cellValue: Types.CellBase,
511
+ activeCell: Point.Point | null
512
+ ): Matrix.Matrix<Types.CellBase<any>> {
513
+ if (!selectedRange) {
514
+ return currentData;
515
+ }
516
+ const { start, end } = selectedRange;
517
+ const rowCount = start.row - end.row;
518
+ const columnCount = start.column - end.column;
519
+ let startPoint = { row: 0, column: 0 };
520
+ let endPoint = { row: 0, column: 0 };
521
+
522
+ if (rowCount > columnCount) {
523
+ startPoint = { row: activeCell?.row ?? 0, column: start.column };
524
+ endPoint = { row: activeCell?.row ?? 0, column: end.column };
525
+ } else {
526
+ startPoint = { row: start.row, column: activeCell?.column ?? 0 };
527
+ endPoint = { row: end.row, column: activeCell?.column ?? 0 };
528
+ }
529
+
530
+ let updatedData = currentData;
531
+
532
+ for (let row = startPoint.row; row <= endPoint.row; row++) {
533
+ for (let col = startPoint.column; col <= endPoint.column; col++) {
534
+ const currentCell = Matrix.get({ row, column: col }, updatedData);
535
+
536
+ if (!currentCell) {
537
+ continue;
538
+ }
539
+
540
+ const updatedCell = {
541
+ ...currentCell,
542
+ style: cellValue.style,
543
+ value: cellValue.value,
544
+ };
545
+
546
+ updatedData = Matrix.set({ row, column: col }, updatedCell, updatedData);
547
+ }
548
+ }
549
+ return updatedData;
550
+ }
551
+
483
552
  export function edit(state: Types.StoreState): Types.StoreState {
484
553
  if (isActiveReadOnly(state)) {
485
554
  return state;
@@ -567,8 +636,6 @@ function convertPtToPx(pt: number): string {
567
636
 
568
637
  // Key Bindings
569
638
 
570
- type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy';
571
-
572
639
  type TextAlign = 'left' | 'center' | 'right';
573
640
 
574
641
  export type KeyDownHandler = (
@@ -55,19 +55,30 @@ export type StoreState<Cell extends CellBase = CellBase> = {
55
55
  copied: PointRange | null;
56
56
  hasPasted: boolean;
57
57
  cut: boolean;
58
+ autoFill: { open: boolean; cellValue: Cell };
58
59
  active: Point | null;
59
60
  mode: Mode;
60
- rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
61
- columnDimensions: Record<
62
- number,
63
- Pick<Dimensions, 'width' | 'left'> | undefined
64
- >;
61
+ rowDimensions: rowDimensions;
62
+ columnDimensions: columnDimensions;
65
63
  dragging: boolean;
66
64
  lastChanged: Point | null;
67
65
  lastCommit: null | CellChange<Cell>[];
68
66
  selectedRow: null | number;
69
67
  selectedColumn: null | number;
70
- formattedStyle: { open: boolean; style: undefined | React.CSSProperties };
68
+ formattedStyle: formattedStyle;
69
+ };
70
+
71
+ export type rowDimensions = Record<
72
+ number,
73
+ Pick<Dimensions, 'height' | 'top'> | undefined
74
+ >;
75
+ export type columnDimensions = Record<
76
+ number,
77
+ Pick<Dimensions, 'width' | 'left'> | undefined
78
+ >;
79
+ export type formattedStyle = {
80
+ open: boolean;
81
+ style: undefined | React.CSSProperties;
71
82
  };
72
83
 
73
84
  export type CellChange<Cell extends CellBase = CellBase> = {
@@ -115,10 +115,10 @@ export const Default: Story = {
115
115
  backgroundColor: 'C6E7FF', // Sample data from backend without #
116
116
  borderColor: 'F2F2F2', // Sample data from backend without #
117
117
  border: {
118
- top: 'NONE',
119
- bottom: 'NONE',
120
- left: 'NONE',
121
- right: 'NONE',
118
+ top: 'THIN',
119
+ bottom: 'THIN',
120
+ left: 'THIN',
121
+ right: 'THIN',
122
122
  },
123
123
  alignment: {
124
124
  horizontal: 'GENERAL',
@@ -51,22 +51,27 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
51
51
  const data = useSelector((state) => state.model.data);
52
52
  const formattedStyle = useSelector((state) => state.formattedStyle.open);
53
53
 
54
- const [cellStyle, setCellStyle] = useState(
55
- cell?.style || {
56
- color: 'var(--text-color)',
57
- backgroundColor: 'var(--drawer-footer-bg)',
58
- borderColor: 'var(--toggle-strip-color)',
59
- }
60
- );
54
+ // Default style to Excel
55
+ const basicStyle: React.CSSProperties = {
56
+ color: 'var(--input-hover-border-color)',
57
+ backgroundColor: 'var(--drawer-footer-bg)',
58
+ borderColor: 'var(--excel-sheet-border)',
59
+ textDecoration: 'none solid',
60
+ borderRight: `1px solid var(--excel-sheet-border)`,
61
+ borderLeft: `1px solid var(--excel-sheet-border)`,
62
+ borderTop: `1px solid var(--excel-sheet-border)`,
63
+ borderBottom: `1px solid var(--excel-sheet-border)`,
64
+ fontSize: '15px',
65
+ fontWeight: 'normal',
66
+ fontStyle: 'normal',
67
+ fontFamily: 'Times New Roman',
68
+ textAlign: 'center',
69
+ };
70
+
71
+ const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
61
72
 
62
73
  useEffect(() => {
63
- setCellStyle(
64
- cell?.style || {
65
- color: 'var(--text-color)',
66
- backgroundColor: 'var(--drawer-footer-bg)',
67
- borderColor: 'var(--toggle-strip-color)',
68
- }
69
- );
74
+ setCellStyle(cell?.style || basicStyle);
70
75
  }, [cell]);
71
76
 
72
77
  useEffect(() => {
@@ -79,8 +84,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
79
84
  }, [cell]);
80
85
 
81
86
  const styleBackend = convertStyleToBackend(cellStyle);
82
-
83
-
84
87
  const [border, setBorder] = useState<string>('border-none');
85
88
  const [underLine, setUnderLine] = useState<string>('underline');
86
89
  const [selectedFontFamily, setSelectedFontFamily] = useState<{
@@ -93,7 +96,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
93
96
  const [colorContainer, setColorPicker] = useState<ColorContainer>({
94
97
  color: 'var(--error-light)',
95
98
  backgroundColor: 'var(--error-light)',
96
- borderColor: 'var(--text-color)',
99
+ borderColor: 'var(--input-hover-border-color)',
97
100
  });
98
101
 
99
102
  const borderTypeIcon = [
@@ -124,6 +127,18 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
124
127
  label: 'Arial',
125
128
  value: 'Arial',
126
129
  },
130
+ {
131
+ label: 'fantasy',
132
+ value: 'fantasy',
133
+ },
134
+ {
135
+ label: 'cursive',
136
+ value: 'cursive',
137
+ },
138
+ {
139
+ label: 'Poppins',
140
+ value: 'Poppins',
141
+ },
127
142
  {
128
143
  label: 'Courier New',
129
144
  value: '"Courier New"',
@@ -283,7 +298,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
283
298
  <Tooltip placement="top" title={'Underline Type'}>
284
299
  <div className="ff-excel-toolbar-icon-underline">
285
300
  <Icon
286
- variant={cellStyle.textDecoration===underLine?'dark' : 'light'}
301
+ variant={
302
+ cellStyle.textDecoration === underLine ? 'dark' : 'light'
303
+ }
287
304
  hoverEffect
288
305
  disabled={toolbar === 'disable'}
289
306
  onClick={() => setUnderlineType(data, underLine, true)}
@@ -308,7 +325,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
308
325
  <div className="ff-excel-toolbar-icon">
309
326
  <Tooltip placement="top" title={'Format Painter'}>
310
327
  <Icon
311
- variant={formattedStyle?'dark':'light'}
328
+ variant={formattedStyle ? 'dark' : 'light'}
312
329
  hoverEffect
313
330
  disabled={toolbar === 'disable'}
314
331
  onClick={() => {
@@ -54,7 +54,7 @@ const getTextAlignmentBack = (
54
54
 
55
55
  export const getTextDecorationBack = (
56
56
  textDecoration: string
57
- ): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
57
+ ): 'solid' | 'dotted' | 'dashed' | 'wavy' | 'NONE' => {
58
58
  switch (textDecoration.toLowerCase()) {
59
59
  case 'solid':
60
60
  return 'solid';
@@ -74,6 +74,40 @@ export const getTextDecorationBack = (
74
74
  export function convertStyleToFrontend(
75
75
  backendStyle: BackendStyle
76
76
  ): React.CSSProperties {
77
+
78
+ const { border } = backendStyle;
79
+
80
+ let borderTop = '';
81
+ let borderRight = '';
82
+ let borderBottom = '';
83
+ let borderLeft = '';
84
+
85
+ if (border.top !== 'NONE') {
86
+ borderTop =
87
+ border.top === 'THIN'
88
+ ? '2px solid var(--input-hover-border-color)'
89
+ : '1px solid var(--excel-sheet-border)';
90
+ }
91
+ if (border.right !== 'NONE') {
92
+ borderRight =
93
+ border.right === 'THIN'
94
+ ? '2px solid var(--input-hover-border-color)'
95
+ : '1px solid var(--excel-sheet-border)';
96
+ }
97
+ if (border.bottom !== 'NONE') {
98
+ borderBottom =
99
+ border.bottom === 'THIN'
100
+ ? '2px solid var(--input-hover-border-color)'
101
+ : '1px solid var(--excel-sheet-border)';
102
+ }
103
+ if (border.left !== 'NONE') {
104
+ borderLeft =
105
+ border.left === 'THIN'
106
+ ? '2px solid var(--input-hover-border-color)'
107
+ : '1px solid var(--excel-sheet-border)';
108
+ }
109
+
110
+ // Return the converted styles
77
111
  return {
78
112
  fontSize: `${backendStyle.size}px`,
79
113
  fontFamily: backendStyle.name,
@@ -81,24 +115,13 @@ export function convertStyleToFrontend(
81
115
  backgroundColor: `#${backendStyle.backgroundColor}`,
82
116
  fontWeight: backendStyle.bold ? 'bold' : 'normal',
83
117
  fontStyle: backendStyle.italic ? 'italic' : 'normal',
84
- textDecoration: backendStyle.underline ? 'underline' : 'value',
85
- textDecorationStyle: getTextDecoration(backendStyle.underline),
86
- borderTop:
87
- backendStyle.border.top === 'NONE'
88
- ? 'none'
89
- : `1px solid ${backendStyle.borderColor}`,
90
- borderRight:
91
- backendStyle.border.right === 'NONE'
92
- ? 'none'
93
- : `1px solid ${backendStyle.borderColor}`,
94
- borderBottom:
95
- backendStyle.border.bottom === 'NONE'
96
- ? 'none'
97
- : `1px solid ${backendStyle.borderColor}`,
98
- borderLeft:
99
- backendStyle.border.left === 'NONE'
100
- ? 'none'
101
- : `1px solid ${backendStyle.borderColor}`,
118
+ textDecoration: backendStyle.underline
119
+ ? `underline ${getTextDecoration(backendStyle.underline)}`
120
+ : 'none',
121
+ borderTop: borderTop,
122
+ borderRight: borderRight,
123
+ borderBottom: borderBottom,
124
+ borderLeft: borderLeft,
102
125
  textAlign: getTextAlignment(backendStyle.alignment.horizontal),
103
126
  };
104
127
  }
@@ -133,7 +156,7 @@ export const convertStyleToBackend = (
133
156
  size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
134
157
  bold: frontendStyle.fontWeight === 'bold',
135
158
  italic: frontendStyle.fontStyle === 'italic',
136
- underline:"solid",
159
+ underline: 'solid',
137
160
  color: frontendStyle.color?.replace('#', '') || '000000',
138
161
  backgroundColor:
139
162
  frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useRef } from 'react';
1
+ import React from 'react';
2
2
  import { StoryObj, Meta } from '@storybook/react';
3
3
  import FileDropzone from './FileDropzone';
4
4
  import Toaster from '../Toast';
@@ -109,7 +109,6 @@ export const WithRadioButton: Story = {
109
109
  useState<RadioOption>();
110
110
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
111
111
 
112
- const fileInputRef = useRef<HTMLInputElement | null>(null);
113
112
 
114
113
  const drawerArgs = {
115
114
  primaryButtonProps: {
@@ -126,12 +125,6 @@ export const WithRadioButton: Story = {
126
125
  },
127
126
  };
128
127
 
129
- useEffect(() => {
130
- if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
131
- fileInputRef.current.click();
132
- }
133
- }, [selectedRadioOption]);
134
-
135
128
  const radioOptions: RadioOption[] = [
136
129
  { value: 'Test Data', label: 'Test Data' },
137
130
  { value: 'Local File', label: 'Local File' },
@@ -146,10 +139,11 @@ export const WithRadioButton: Story = {
146
139
  };
147
140
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
148
141
  const file = event.target.files?.[0];
142
+
149
143
  if (file) {
150
144
  setSelectedFile(file);
151
145
  }
152
- };
146
+ };
153
147
 
154
148
  const handleRemoveFile = () => {
155
149
  setSelectedFile(null);
@@ -191,15 +185,7 @@ export const WithRadioButton: Story = {
191
185
  toastMessage={'Max 5 files can be uploaded'}
192
186
  />
193
187
  )}
194
- {selectedRadioOption?.value === 'Local File' ? (
195
- <input
196
- ref={fileInputRef}
197
- type="file"
198
- className='ff-input-ref'
199
- onChange={handleFileChange}
200
- accept="image/png, image/jpeg, application/x-zip-compressed, application/zip"
201
- />
202
- ) : (
188
+ {selectedRadioOption?.value === 'Local File' &&
203
189
  <Drawer
204
190
  {...drawerArgs}
205
191
  isOpen={showModal}
@@ -210,7 +196,7 @@ export const WithRadioButton: Story = {
210
196
  >
211
197
  <Typography>Upload TestData Files Here</Typography>
212
198
  </Drawer>
213
- )}
199
+ }
214
200
  </>
215
201
  );
216
202
  },
@@ -3,7 +3,7 @@ import { FileDropzoneProps } from './types';
3
3
  import './FileDropzone.scss';
4
4
  import Icon from '../Icon';
5
5
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
6
- import { useEffect, useMemo } from 'react';
6
+ import { useEffect, useMemo, useRef } from 'react';
7
7
  import Dropzone from './Dropzone';
8
8
  import FilePreview from './FilePreview';
9
9
  import classNames from 'classnames';
@@ -39,6 +39,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
39
39
  isApiResponseError = false,
40
40
  isDisable = false,
41
41
  }) => {
42
+ const fileInputRef = useRef<HTMLInputElement | null>(null);
42
43
  const {
43
44
  getRootProps,
44
45
  getInputProps,
@@ -77,6 +78,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
77
78
  [acceptedFiles, handleRemoveClick, handleReplaceClick]
78
79
  );
79
80
 
81
+ useEffect(() => {
82
+ if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
83
+ fileInputRef.current.click();
84
+ }
85
+ }, [selectedRadioOption]);
86
+
80
87
  useEffect(() => {
81
88
  if (!checkEmpty(acceptedFiles) && setSelectedFile) {
82
89
  setSelectedFile(acceptedFiles[0] || null);
@@ -98,9 +105,12 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
98
105
  );
99
106
 
100
107
  return (
101
- <div className={classNames('ff-file-dropzone-wrapper',
102
- {'ff-disable-file-dropzone-wrapper': isDisable,}
103
- )} style={{ width: `${width}px` }}>
108
+ <div
109
+ className={classNames('ff-file-dropzone-wrapper', {
110
+ 'ff-disable-file-dropzone-wrapper': isDisable,
111
+ })}
112
+ style={{ width: `${width}px` }}
113
+ >
104
114
  <Dropzone
105
115
  icon={icon}
106
116
  primaryLabel={primaryLabel}
@@ -123,6 +133,16 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
123
133
  isDisable={isDisable}
124
134
  />
125
135
 
136
+ {isWebServiceFileDropZone && (
137
+ <input
138
+ ref={fileInputRef}
139
+ type="file"
140
+ className="ff-input-ref"
141
+ onChange={handleFileChange}
142
+ accept={accept.join(',')}
143
+ />
144
+ )}
145
+
126
146
  {isWebServiceFileDropZone ? null : (
127
147
  <div
128
148
  className={'ff-file-details-wrapper'}
@@ -1,6 +1,5 @@
1
1
  import React, { forwardRef, useImperativeHandle } from 'react';
2
2
  import Form from './Form';
3
-
4
3
  interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
5
4
  id?: string;
6
5
  onSubmit: Form.SubmitHandler<T>;
@@ -16,7 +15,6 @@ const Forms = <T extends Form.FieldValues>(
16
15
  ref: React.Ref<any>
17
16
  ) => {
18
17
  const methods = Form.useForm<T>(rest);
19
-
20
18
  const { handleSubmit } = methods;
21
19
  const extendedMethods = {
22
20
  ...methods,
@@ -117,6 +117,8 @@ import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
117
117
  import AddLocator from '../../assets/icons/add_locator.svg?react';
118
118
  import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
119
119
 
120
+ import IosIcon from '../../assets/icons/ios_icon.svg?react';
121
+ import HelpIcon from '../../assets/icons/help_icon.svg?react';
120
122
  import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
121
123
  import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
122
124
  import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
@@ -142,6 +144,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
142
144
  import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
143
145
  import UpdateIcon from '../../assets/icons/update_icon.svg?react';
144
146
  import AddFile from '../../assets/icons/add_file.svg?react';
147
+ import PlusRoundIcon from '../../assets/icons/plus_round_icon.svg?react';
145
148
  import EyeClosed from '../../assets/icons/eye_closed.svg?react';
146
149
  import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
147
150
  import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
@@ -192,6 +195,8 @@ import SystemWarning from '../../assets/icons/system_warning.svg?react';
192
195
  import UserPasswordLock from '../../assets/icons/user_password_lock.svg?react';
193
196
  import UserWarning from '../../assets/icons/user_warning.svg?react';
194
197
  import UserWithSystem from '../../assets/icons/user_with_system.svg?react';
198
+ import AiSearch from '../../assets/icons/ai_search.svg?react';
199
+
195
200
  import Import from '../../assets/icons/import.svg?react';
196
201
  import dashboardWebIcon from '../../assets/icons/dashboard_web_icon.svg?react';
197
202
  import dashboardMobileIcon from '../../assets/icons/dashboard_mobile_icon.svg?react';
@@ -246,6 +251,7 @@ import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react'
246
251
  import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
247
252
  import suitesIcon from '../../assets/icons/suites_icon.svg?react';
248
253
  import executionsIcon from '../../assets/icons/executions_icon.svg?react';
254
+ import ImportIcon from '../../assets/icons/import_icon.svg?react';
249
255
 
250
256
  Components['success'] = ToastSuccessIcon;
251
257
  Components['alert'] = Alert;
@@ -351,6 +357,8 @@ Components['android_icon'] = AndroidIcon;
351
357
  Components['plus_user_icon'] = PlusUserIcon;
352
358
  Components['label_plus'] = LabelPlusIcon;
353
359
  Components['manual_locator'] = ManualLocator;
360
+ Components['ios_icon'] = IosIcon;
361
+ Components['help_icon'] = HelpIcon;
354
362
  Components['select_license'] = SwitchLicenseIcon;
355
363
  Components['fireflink-logo'] = FireflinkLogo;
356
364
  Components['wswb_delete_icon'] = WSWBDeleteIcon;
@@ -382,6 +390,7 @@ Components['notification_icon'] = NotificationIcon;
382
390
  Components['nlp_help_icon'] = NLPHelpIcon;
383
391
  Components['update_icon'] = UpdateIcon;
384
392
  Components['add_file'] = AddFile;
393
+ Components['plus_round_icon'] = PlusRoundIcon;
385
394
  Components['clone_icon'] = CloneIcon;
386
395
  Components['move_icon'] = MoveIcon;
387
396
  Components['jira'] = Jira;
@@ -394,6 +403,7 @@ Components['hide_access_icon'] = HideAccessIcon;
394
403
  Components['eye_closed'] = EyeClosed;
395
404
  Components['attachment_icon'] = AttachmentIcon;
396
405
  Components['authorization_icon'] = AuthorizationIcon;
406
+ Components['ai_search'] = AiSearch;
397
407
 
398
408
  Components['fireflink_platform_logo'] = FireflinkPlatform;
399
409
  Components['fireflink_finder_logo'] = FireflinkFinder;
@@ -488,4 +498,6 @@ Components['machine_enable_icon'] = machineEnableIcon;
488
498
  Components['machine_disable_icon'] = machineDisableIcon;
489
499
  Components['executions_icon'] = executionsIcon;
490
500
  Components['suites_icon'] = suitesIcon;
501
+ Components['import_icon'] = ImportIcon;
502
+
491
503
  export default Components;