pixel-react 1.9.1 → 1.9.3

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 (233) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
  4. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -3
  5. package/lib/components/Excel/Types.d.ts +1 -1
  6. package/lib/components/Table/Table.d.ts +1 -1
  7. package/lib/components/Table/Types.d.ts +8 -0
  8. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  9. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  10. package/lib/components/TableTree/data.d.ts +54 -262
  11. package/lib/components/TableTree/types.d.ts +0 -6
  12. package/lib/index.d.ts +18 -7
  13. package/lib/index.esm.js +21547 -21727
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +21554 -21733
  16. package/lib/index.js.map +1 -1
  17. package/lib/tsconfig.tsbuildinfo +1 -1
  18. package/lib/utils/indexDBStore/indexDB.d.ts +2 -2
  19. package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
  20. package/package.json +1 -2
  21. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
  22. package/src/assets/Themes/BaseTheme.scss +17 -6
  23. package/src/assets/Themes/BlueTheme.scss +12 -0
  24. package/src/assets/Themes/DarkTheme.scss +20 -6
  25. package/src/assets/icons/approval_pending.svg +8 -8
  26. package/src/assets/icons/azure.svg +9 -0
  27. package/src/assets/icons/bitbucket.svg +9 -0
  28. package/src/assets/icons/clear_history.svg +6 -0
  29. package/src/assets/icons/code.svg +4 -0
  30. package/src/assets/icons/code_colored.svg +4 -0
  31. package/src/assets/icons/configuration.svg +3 -3
  32. package/src/assets/icons/csharp.svg +9 -0
  33. package/src/assets/icons/cypress.svg +9 -0
  34. package/src/assets/icons/defects.svg +8 -8
  35. package/src/assets/icons/delete_filled.svg +12 -0
  36. package/src/assets/icons/design_link.svg +7 -0
  37. package/src/assets/icons/disable_icon.svg +3 -0
  38. package/src/assets/icons/element.svg +4 -4
  39. package/src/assets/icons/enable_icon.svg +3 -0
  40. package/src/assets/icons/file_colored.svg +5 -0
  41. package/src/assets/icons/github.svg +9 -0
  42. package/src/assets/icons/gitlab.svg +9 -0
  43. package/src/assets/icons/java.svg +4 -0
  44. package/src/assets/icons/javascript.svg +11 -0
  45. package/src/assets/icons/jenkins.svg +9 -0
  46. package/src/assets/icons/jira_colored.svg +15 -0
  47. package/src/assets/icons/jira_logo.svg +9 -0
  48. package/src/assets/icons/mic.svg +4 -0
  49. package/src/assets/icons/mic_filled.svg +28 -0
  50. package/src/assets/icons/playwright.svg +9 -0
  51. package/src/assets/icons/primary_calendar_icon.svg +3 -0
  52. package/src/assets/icons/project_element.svg +4 -4
  53. package/src/assets/icons/python.svg +19 -0
  54. package/src/assets/icons/regenerate.svg +4 -0
  55. package/src/assets/icons/right_arrow_filled_icon.svg +5 -0
  56. package/src/assets/icons/screenshot.svg +7 -0
  57. package/src/assets/icons/slack.svg +9 -0
  58. package/src/assets/icons/step_group.svg +10 -10
  59. package/src/assets/icons/variable.svg +3 -3
  60. package/src/assets/icons/web_service_icon.svg +3 -3
  61. package/src/components/Button/Button.tsx +2 -0
  62. package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
  63. package/src/components/Charts/BarChart/BarChart.tsx +6 -2
  64. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
  65. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
  66. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
  67. package/src/components/Charts/MultiRadialChart/types.ts +2 -0
  68. package/src/components/DatePicker/DatePicker.scss +379 -632
  69. package/src/components/DatePicker/DatePicker.tsx +130 -98
  70. package/src/components/DatePicker/Timepicker.tsx +1 -13
  71. package/src/components/Excel/ExcelFile/ExcelFile.tsx +48 -42
  72. package/src/components/Excel/ExcelFile.stories.tsx +98 -96
  73. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +65 -28
  74. package/src/components/Excel/Types.ts +1 -1
  75. package/src/components/Excel/dataConversion.ts +8 -10
  76. package/src/components/Icon/iconList.ts +60 -3
  77. package/src/components/Table/Table.scss +44 -11
  78. package/src/components/Table/Table.stories.tsx +60 -1
  79. package/src/components/Table/Table.tsx +190 -123
  80. package/src/components/Table/Types.ts +8 -0
  81. package/src/components/TableTree/Components/TableBody.tsx +18 -20
  82. package/src/components/TableTree/Components/TableCell.tsx +28 -16
  83. package/src/components/TableTree/Components/TableRow.tsx +4 -7
  84. package/src/components/TableTree/TableTree.stories.tsx +10 -10
  85. package/src/components/TableTree/TableTree.tsx +19 -16
  86. package/src/components/TableTree/data.ts +53 -362
  87. package/src/components/TableTree/types.ts +0 -6
  88. package/src/components/TextArea/Textarea.scss +24 -6
  89. package/src/index.ts +3 -1
  90. package/src/utils/indexDBStore/indexDB.ts +63 -33
  91. package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
  92. package/lib/1fb4472b34e4fe07.css +0 -1
  93. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  94. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  95. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  96. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  97. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  98. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  99. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  100. package/lib/components/AddButton/AddButton.d.ts +0 -5
  101. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  102. package/lib/components/AddButton/index.d.ts +0 -1
  103. package/lib/components/AddButton/types.d.ts +0 -4
  104. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  105. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  106. package/lib/components/AddVariables/index.d.ts +0 -1
  107. package/lib/components/AddVariables/types.d.ts +0 -35
  108. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  109. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  110. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  111. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  112. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  113. package/lib/components/Button/Button.stories.d.ts +0 -13
  114. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  115. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  116. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  117. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  118. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  119. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  120. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  121. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  122. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  123. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  124. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  125. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  126. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  127. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  128. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  129. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  130. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  131. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  132. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  133. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  134. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  135. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  136. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  137. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  138. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  139. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  140. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  141. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  142. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  143. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  144. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  145. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  146. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  147. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  148. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  149. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  150. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  151. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  152. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  153. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  154. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  155. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  156. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  157. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  158. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  159. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  160. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  161. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  162. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  163. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  164. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  165. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  166. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  167. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  168. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  169. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  170. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  171. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  172. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  173. package/lib/components/ExcelFile/Types.d.ts +0 -129
  174. package/lib/components/ExcelFile/index.d.ts +0 -1
  175. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  176. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  177. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  178. package/lib/components/Form/Form.stories.d.ts +0 -7
  179. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  180. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  181. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  182. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  183. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  184. package/lib/components/Input/Input.stories.d.ts +0 -9
  185. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  186. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  187. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  188. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  189. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  190. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  191. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  192. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  193. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  194. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  195. package/lib/components/NLPInput/type.d.ts +0 -70
  196. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  197. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  198. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  199. package/lib/components/Search/Search.stories.d.ts +0 -6
  200. package/lib/components/Select/Select.stories.d.ts +0 -14
  201. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  202. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  203. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  204. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  205. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  206. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  207. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  208. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  209. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  210. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  211. package/lib/components/Table/Table.stories.d.ts +0 -13
  212. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  213. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  214. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  215. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  216. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  217. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  218. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  219. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  220. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  221. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  222. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  223. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  224. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  225. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  226. package/lib/utils/find/findAndInsert.d.ts +0 -7
  227. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  228. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  229. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  230. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  231. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  232. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  233. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -123,7 +123,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
123
123
  value: 'double_border',
124
124
  label: 'Double Underline',
125
125
  icon: 'double_underline',
126
- }
126
+ },
127
127
  ];
128
128
 
129
129
  const fontFamily = [
@@ -151,39 +151,77 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
151
151
  label: 'Courier New',
152
152
  value: '"Courier New"',
153
153
  },
154
- ];
155
-
156
- const fontSize = [
157
154
  {
158
- label: '5',
159
- value: '5',
155
+ label: 'Verdana',
156
+ value: 'Verdana',
157
+ },
158
+ {
159
+ label: 'Tahoma',
160
+ value: 'Tahoma',
161
+ },
162
+ {
163
+ label: 'Trebuchet MS',
164
+ value: '"Trebuchet MS"',
165
+ },
166
+ {
167
+ label: 'Comic Sans MS',
168
+ value: '"Comic Sans MS"',
169
+ },
170
+ {
171
+ label: 'Impact',
172
+ value: 'Impact',
173
+ },
174
+ {
175
+ label: 'Arial Black',
176
+ value: '"Arial Black"',
177
+ },
178
+ {
179
+ label: 'Lucida Console',
180
+ value: '"Lucida Console"',
160
181
  },
161
182
  {
162
- label: '9',
163
- value: '9',
183
+ label: 'Lucida Sans Unicode',
184
+ value: '"Lucida Sans Unicode"',
164
185
  },
165
186
  {
166
- label: '11',
167
- value: '11',
187
+ label: 'Courier',
188
+ value: 'Courier',
168
189
  },
169
190
  {
170
- label: '12',
171
- value: '12',
191
+ label: 'Helvetica',
192
+ value: 'Helvetica',
172
193
  },
173
194
  {
174
- label: '14',
175
- value: '14',
195
+ label: 'Arial Rounded MT Bold',
196
+ value: '"Arial Rounded MT Bold"',
176
197
  },
177
198
  {
178
- label: '16',
179
- value: '16',
199
+ label: 'Georgia',
200
+ value: 'Georgia',
180
201
  },
181
202
  {
182
- label: '18',
183
- value: '18',
203
+ label: 'sans-serif',
204
+ value: 'sans-serif',
205
+ },
206
+ {
207
+ label: 'serif',
208
+ value: 'serif',
209
+ },
210
+ {
211
+ label: 'monospace',
212
+ value: 'monospace',
184
213
  },
185
214
  ];
186
215
 
216
+ const fontSizeList = [
217
+ 5, 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 32, 36, 40, 48, 56, 72,
218
+ ];
219
+
220
+ const fontSize = fontSizeList.map((fontSize) => ({
221
+ label: fontSize,
222
+ value: fontSize,
223
+ }));
224
+
187
225
  const getTextColor = (color: string) => {
188
226
  setColorPicker((prev) => ({ ...prev, color: color }));
189
227
  };
@@ -259,7 +297,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
259
297
  <Tooltip placement="top" title={'Text Left'}>
260
298
  <Icon
261
299
  variant={cellStyle.textAlign === 'left' ? 'dark' : 'light'}
262
- hoverEffect
300
+ hoverEffect={cellStyle.textAlign === 'left' ? false : true}
263
301
  disabled={toolbar === 'disable'}
264
302
  onClick={() => setTextAlign(data, 'left')}
265
303
  name="text_align_left"
@@ -268,7 +306,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
268
306
  <Tooltip placement="top" title={'Text Center'}>
269
307
  <Icon
270
308
  variant={cellStyle.textAlign === 'center' ? 'dark' : 'light'}
271
- hoverEffect
309
+ hoverEffect={cellStyle.textAlign === 'center' ? false : true}
272
310
  disabled={toolbar === 'disable'}
273
311
  onClick={() => setTextAlign(data, 'center')}
274
312
  name="text_align_center"
@@ -278,7 +316,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
278
316
  <Tooltip placement="top" title={'Text Right'}>
279
317
  <Icon
280
318
  variant={cellStyle.textAlign === 'right' ? 'dark' : 'light'}
281
- hoverEffect
319
+ hoverEffect={cellStyle.textAlign === 'right' ? false : true}
282
320
  disabled={toolbar === 'disable'}
283
321
  onClick={() => setTextAlign(data, 'right')}
284
322
  name="text_align_right"
@@ -290,7 +328,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
290
328
  <Tooltip placement="top" title={'Bold'}>
291
329
  <Icon
292
330
  variant={styleBackend.bold ? 'dark' : 'light'}
293
- hoverEffect
331
+ hoverEffect={styleBackend.bold ? false : true}
294
332
  disabled={toolbar === 'disable'}
295
333
  onClick={() => onBold(data)}
296
334
  name="bold"
@@ -298,8 +336,8 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
298
336
  </Tooltip>
299
337
  <Tooltip placement="top" title={'Italic'}>
300
338
  <Icon
301
- hoverEffect
302
339
  variant={styleBackend.italic ? 'dark' : 'light'}
340
+ hoverEffect={styleBackend.italic ? false : true}
303
341
  disabled={toolbar === 'disable'}
304
342
  onClick={() => onItalic(data)}
305
343
  name="italic"
@@ -311,7 +349,9 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
311
349
  variant={
312
350
  cellStyle.textDecoration === underLine ? 'dark' : 'light'
313
351
  }
314
- hoverEffect
352
+ hoverEffect={
353
+ cellStyle.textDecoration === underLine ? false : true
354
+ }
315
355
  disabled={toolbar === 'disable'}
316
356
  onClick={() => setUnderlineType(data, underLine, true)}
317
357
  name={getUnderlineIcon()}
@@ -324,7 +364,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
324
364
  iconSize={12}
325
365
  options={underlineTypeIcon}
326
366
  tooltipPlacement="top"
327
- variant="light"
328
367
  onOptionClick={(e) => {
329
368
  let selectedValue = e.value as string;
330
369
  setUnderlineType(data, selectedValue, true);
@@ -340,7 +379,7 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
340
379
  <Tooltip placement="top" title={'Format Painter'}>
341
380
  <Icon
342
381
  variant={formattedStyle ? 'dark' : 'light'}
343
- hoverEffect
382
+ hoverEffect={formattedStyle ? false : true}
344
383
  disabled={toolbar === 'disable'}
345
384
  onClick={() => {
346
385
  setFormatePainter(data);
@@ -403,7 +442,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
403
442
  zIndex={1000}
404
443
  options={borderTypeIcon}
405
444
  tooltipPlacement="top"
406
- variant="light"
407
445
  onOptionClick={(e) => {
408
446
  let selectedValue = e.value as string;
409
447
  setBorderType(data, selectedValue, 'black');
@@ -415,7 +453,6 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
415
453
  </Tooltip>
416
454
  </div>
417
455
 
418
-
419
456
  {/* <div className="ff-excel-toolbar-divider"></div> TODO */}
420
457
  {/* <div className="ff-excel-toolbar-menu">
421
458
  <Tooltip placement="top" title={'Formula'}>
@@ -31,7 +31,7 @@ interface WorkData {
31
31
  value: string;
32
32
 
33
33
  /** Styling options for the cell */
34
- style: BackendStyle;
34
+ styles: BackendStyle; //TODO remove 's' for Style
35
35
  type?: boolean;
36
36
  }
37
37
 
@@ -74,7 +74,6 @@ export const getTextDecorationBack = (
74
74
  export function convertStyleToFrontend(
75
75
  backendStyle: BackendStyle
76
76
  ): React.CSSProperties {
77
-
78
77
  const { border } = backendStyle;
79
78
 
80
79
  let borderTop = '';
@@ -82,32 +81,31 @@ export function convertStyleToFrontend(
82
81
  let borderBottom = '';
83
82
  let borderLeft = '';
84
83
 
85
- if (border.top !== 'NONE') {
84
+ if (border.top !== 'THIN') {
86
85
  borderTop =
87
- border.top === 'THIN'
86
+ border.top === 'MEDIUM'
88
87
  ? '2px solid var(--input-hover-border-color)'
89
88
  : '1px solid var(--excel-sheet-border)';
90
89
  }
91
- if (border.right !== 'NONE') {
90
+ if (border.right !== 'THIN') {
92
91
  borderRight =
93
- border.right === 'THIN'
92
+ border.right === 'MEDIUM'
94
93
  ? '2px solid var(--input-hover-border-color)'
95
94
  : '1px solid var(--excel-sheet-border)';
96
95
  }
97
- if (border.bottom !== 'NONE') {
96
+ if (border.bottom !== 'THIN') {
98
97
  borderBottom =
99
- border.bottom === 'THIN'
98
+ border.bottom === 'MEDIUM'
100
99
  ? '2px solid var(--input-hover-border-color)'
101
100
  : '1px solid var(--excel-sheet-border)';
102
101
  }
103
- if (border.left !== 'NONE') {
102
+ if (border.left !== 'THIN') {
104
103
  borderLeft =
105
- border.left === 'THIN'
104
+ border.left === 'MEDIUM'
106
105
  ? '2px solid var(--input-hover-border-color)'
107
106
  : '1px solid var(--excel-sheet-border)';
108
107
  }
109
108
 
110
- // Return the converted styles
111
109
  return {
112
110
  fontSize: `${backendStyle.size}px`,
113
111
  fontFamily: backendStyle.name,
@@ -250,7 +250,7 @@ import variableSet from '../../assets/icons/variable_set.svg?react';
250
250
 
251
251
  import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react';
252
252
  import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
253
- import suitesIcon from '../../assets/icons/suites_icon.svg?react';
253
+ import suitesIcon from '../../assets/icons/suites_icon.svg?react';
254
254
  import executionsIcon from '../../assets/icons/executions_icon.svg?react';
255
255
  import ImportIcon from '../../assets/icons/import_icon.svg?react';
256
256
  import Settings from '../../assets/icons/settings.svg?react';
@@ -259,6 +259,35 @@ import ExternalUser from '../../assets/icons/external_user.svg?react';
259
259
  import SingleUser from '../../assets/icons/single_user.svg?react';
260
260
  import GroupUser from '../../assets/icons/group_user.svg?react';
261
261
  import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
262
+ import Azure from '../../assets/icons/azure.svg?react';
263
+ import Bitbucket from '../../assets/icons/bitbucket.svg?react';
264
+ import Github from '../../assets/icons/github.svg?react';
265
+ import Gitlab from '../../assets/icons/gitlab.svg?react';
266
+ import Jenkins from '../../assets/icons/jenkins.svg?react';
267
+ import JiraLogo from '../../assets/icons/jira_logo.svg?react';
268
+ import Slack from '../../assets/icons/slack.svg?react';
269
+ import DisableIcon from '../../assets/icons/disable_icon.svg?react';
270
+ import EnableIcon from '../../assets/icons/enable_icon.svg?react';
271
+
272
+ import ClearHistory from '../../assets/icons/clear_history.svg?react';
273
+ import Csharp from '../../assets/icons/csharp.svg?react';
274
+ import Cypress from '../../assets/icons/cypress.svg?react';
275
+ import Java from '../../assets/icons/java.svg?react';
276
+ import JavaScript from '../../assets/icons/javascript.svg?react';
277
+ import PlayWright from '../../assets/icons/playwright.svg?react';
278
+ import Python from '../../assets/icons/python.svg?react';
279
+ import Code from '../../assets/icons/code.svg?react';
280
+ import Regenerate from '../../assets/icons/regenerate.svg?react';
281
+ import Mic from '../../assets/icons/mic.svg?react';
282
+ import MicActive from '../../assets/icons/mic_filled.svg?react';
283
+ import RightArrowFilled from '../../assets/icons/right_arrow_filled_icon.svg?react';
284
+ import CodeColored from '../../assets/icons/code_colored.svg?react';
285
+ import DesignLink from '../../assets/icons/design_link.svg?react';
286
+ import FileColored from '../../assets/icons/file_colored.svg?react';
287
+ import JiraColored from '../../assets/icons/jira_colored.svg?react';
288
+ import Screenshot from '../../assets/icons/screenshot.svg?react';
289
+ import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
290
+ import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
262
291
 
263
292
  Components['success'] = ToastSuccessIcon;
264
293
  Components['alert'] = Alert;
@@ -508,10 +537,38 @@ Components['executions_icon'] = executionsIcon;
508
537
  Components['suites_icon'] = suitesIcon;
509
538
  Components['import_icon'] = ImportIcon;
510
539
  Components['settings'] = Settings;
511
- Components['test_freshers_logo']=TestFreshersLogo;
512
- Components['unfollow_icon']=UnfollowIcon
540
+ Components['test_freshers_logo'] = TestFreshersLogo;
541
+ Components['unfollow_icon'] = UnfollowIcon;
513
542
  Components['external_user'] = ExternalUser;
514
543
  Components['single_user'] = SingleUser;
515
544
  Components['group_user'] = GroupUser;
545
+ Components['azure'] = Azure;
546
+ Components['bitbucket'] = Bitbucket;
547
+ Components['github'] = Github;
548
+ Components['gitlab'] = Gitlab;
549
+ Components['jenkins'] = Jenkins;
550
+ Components['jira_logo'] = JiraLogo;
551
+ Components['slack'] = Slack;
552
+ Components['disable_icon'] = DisableIcon;
553
+ Components['enable_icon'] = EnableIcon;
554
+ Components['clear_history'] = ClearHistory;
555
+ Components['csharp'] = Csharp;
556
+ Components['cypress'] = Cypress;
557
+ Components['java'] = Java;
558
+ Components['javascript'] = JavaScript;
559
+ Components['playwright'] = PlayWright;
560
+ Components['python'] = Python;
561
+ Components['code'] = Code;
562
+ Components['regenerate'] = Regenerate;
563
+ Components['mic'] = Mic;
564
+ Components['mic_filled'] = MicActive;
565
+ Components['right_arrow_filled_icon'] = RightArrowFilled;
566
+ Components['code_colored'] = CodeColored;
567
+ Components['design_link'] = DesignLink;
568
+ Components['file_colored'] = FileColored;
569
+ Components['jira_colored'] = JiraColored;
570
+ Components['screenshot'] = Screenshot;
571
+ Components['delete_filled'] = DeleteFilled;
572
+ Components['primary_calendar_icon'] = PrimaryCalendarIcon
516
573
 
517
574
  export default Components;
@@ -1,6 +1,7 @@
1
1
  .ff-fixed-header-table {
2
2
  overflow-y: auto;
3
3
  }
4
+
4
5
  .ff-table-icon {
5
6
  position: absolute;
6
7
  top: 10px;
@@ -12,21 +13,25 @@
12
13
 
13
14
  .ff-table {
14
15
  width: 100%;
16
+
15
17
  th,
16
18
  td {
17
19
  text-align: left;
18
20
  font-size: 12px;
19
21
  padding: 9px 8px;
20
22
  }
23
+
21
24
  thead {
22
25
  tr {
23
26
  th {
24
27
  border-bottom: 1px solid var(--slider-table-color);
25
28
  }
29
+
26
30
  th {
27
31
  .ff-label-checkbox-container {
28
32
  display: flex;
29
33
  align-items: center;
34
+
30
35
  .ff-table-checkbox {
31
36
  padding-right: 8px;
32
37
  }
@@ -34,19 +39,42 @@
34
39
  }
35
40
  }
36
41
  }
42
+
37
43
  tbody {
38
44
  tr {
39
45
  .action-column {
40
46
  opacity: 0;
41
47
  }
48
+
42
49
  .icon-container {
43
- padding-left: 10px;
50
+ padding-left: 8px;
44
51
  opacity: 0;
45
52
  display: flex;
46
53
  justify-content: flex-end;
47
54
  transition: opacity 0.3s ease, transform 0.3s ease;
48
55
  transform: translateX(20px);
49
56
  }
57
+
58
+ .ff-data-checkbox-container {
59
+ display: flex;
60
+ align-items: center;
61
+
62
+ .ff-table-checkbox {
63
+ padding-right: 8px;
64
+ }
65
+
66
+ .ff-table-drag {
67
+ opacity: 0;
68
+ transition: opacity 0.3s ease, transform 0.3s ease;
69
+ }
70
+
71
+ .ff-table-drag-icon {
72
+ opacity: 0;
73
+ transition: opacity 0.3s ease, transform 0.3s ease;
74
+ cursor: grab;
75
+ }
76
+ }
77
+
50
78
  &:hover {
51
79
  background-color: var(--hover-color);
52
80
 
@@ -54,7 +82,13 @@
54
82
  opacity: 1;
55
83
  transform: translateX(0);
56
84
  }
85
+
86
+ .ff-table-drag,
87
+ .ff-table-drag-icon {
88
+ opacity: 1;
89
+ }
57
90
  }
91
+
58
92
  td {
59
93
  position: relative;
60
94
  color: var(--table-column-text-color);
@@ -63,36 +97,34 @@
63
97
  cursor: pointer;
64
98
  }
65
99
  }
66
- td {
67
- .ff-data-checkbox-container {
68
- display: flex;
69
- align-items: center;
70
- .ff-table-checkbox {
71
- padding-right: 8px;
72
- }
73
- }
74
- }
75
100
  }
76
101
  }
102
+
77
103
  .primary-bg {
78
104
  background-color: var(--brand-color);
79
105
  }
106
+
80
107
  .secondary-bg {
81
108
  background-color: var(--slider-table-color);
82
109
  }
110
+
83
111
  .tertiary-bg {
84
112
  background-color: var(--custom-table-header-bg-color);
85
113
  }
114
+
86
115
  .default-bg {
87
116
  background-color: transparent;
88
117
  }
118
+
89
119
  .default-color {
90
120
  color: var(--table-header-text-color);
91
121
  }
122
+
92
123
  .primary-color {
93
124
  color: var(--brand-color);
94
125
  }
95
126
  }
127
+
96
128
  .border-borderRadius {
97
129
  border: 1px solid var(--slider-table-color);
98
130
  border-radius: 5px;
@@ -105,6 +137,7 @@
105
137
  z-index: 99;
106
138
  background-color: Var(--file-details-bg);
107
139
  }
140
+
108
141
  .no-data-content {
109
142
  display: flex;
110
143
  flex-direction: column;
@@ -115,4 +148,4 @@
115
148
  tbody tr.disabled-row {
116
149
  opacity: 0.5;
117
150
  cursor: not-allowed;
118
- }
151
+ }
@@ -2,7 +2,8 @@ import React from 'react';
2
2
  import { useEffect, useState } from 'react';
3
3
  import { StoryObj, Meta } from '@storybook/react';
4
4
  import Table from './Table';
5
-
5
+ import { ffid } from '../../utils/ffID/ffid';
6
+ import { rearrangeDragItem } from '../../utils/swapArrayItem/dragAndDropUtils';
6
7
  const meta: Meta<typeof Table> = {
7
8
  title: 'Components/Table',
8
9
  component: Table,
@@ -20,6 +21,7 @@ const defaultArgs = {
20
21
  const sampleData = [
21
22
  {
22
23
  project: {
24
+ id: ffid(),
23
25
  modifiedByUname: 'user4',
24
26
  modifiedOn: '18-03-2024 10:47',
25
27
  name: 'Test1',
@@ -31,6 +33,7 @@ const sampleData = [
31
33
  },
32
34
  {
33
35
  project: {
36
+ id: ffid(),
34
37
  modifiedByUname: 'user3',
35
38
  modifiedOn: '13-03-2024 15:15',
36
39
  name: 'Test2',
@@ -42,6 +45,7 @@ const sampleData = [
42
45
  },
43
46
  {
44
47
  project: {
48
+ id: ffid(),
45
49
  modifiedByUname: 'user2',
46
50
  modifiedOn: '13-03-2024 15:30',
47
51
  name: 'Test3',
@@ -53,6 +57,7 @@ const sampleData = [
53
57
  },
54
58
  {
55
59
  project: {
60
+ id: ffid(),
56
61
  modifiedByUname: 'user1',
57
62
  modifiedOn: '18-03-2024 15:36',
58
63
  name: 'Test4',
@@ -64,6 +69,7 @@ const sampleData = [
64
69
  },
65
70
  {
66
71
  project: {
72
+ id: ffid(),
67
73
  modifiedByUname: 'user4',
68
74
  modifiedOn: '18-03-2024 10:47',
69
75
  name: 'Test1',
@@ -75,6 +81,7 @@ const sampleData = [
75
81
  },
76
82
  {
77
83
  project: {
84
+ id: ffid(),
78
85
  modifiedByUname: 'user3',
79
86
  modifiedOn: '13-03-2024 15:15',
80
87
  name: 'Test2',
@@ -86,6 +93,7 @@ const sampleData = [
86
93
  },
87
94
  {
88
95
  project: {
96
+ id: ffid(),
89
97
  modifiedByUname: 'user2',
90
98
  modifiedOn: '13-03-2024 15:30',
91
99
  name: 'Test3',
@@ -97,6 +105,7 @@ const sampleData = [
97
105
  },
98
106
  {
99
107
  project: {
108
+ id: ffid(),
100
109
  modifiedByUname: 'user1',
101
110
  modifiedOn: '18-03-2024 15:36',
102
111
  name: 'Test4',
@@ -108,6 +117,7 @@ const sampleData = [
108
117
  },
109
118
  {
110
119
  project: {
120
+ id: ffid(),
111
121
  modifiedByUname: 'user4',
112
122
  modifiedOn: '18-03-2024 10:47',
113
123
  name: 'Test1',
@@ -119,6 +129,7 @@ const sampleData = [
119
129
  },
120
130
  {
121
131
  project: {
132
+ id: ffid(),
122
133
  modifiedByUname: 'user3',
123
134
  modifiedOn: '13-03-2024 15:15',
124
135
  name: 'Test2',
@@ -130,6 +141,7 @@ const sampleData = [
130
141
  },
131
142
  {
132
143
  project: {
144
+ id: ffid(),
133
145
  modifiedByUname: 'user2',
134
146
  modifiedOn: '13-03-2024 15:30',
135
147
  name: 'Test3',
@@ -141,6 +153,7 @@ const sampleData = [
141
153
  },
142
154
  {
143
155
  project: {
156
+ id: ffid(),
144
157
  modifiedByUname: 'user1',
145
158
  modifiedOn: '18-03-2024 15:36',
146
159
  name: 'Test4',
@@ -247,6 +260,7 @@ export const PageTable: Story = {
247
260
  );
248
261
  },
249
262
  };
263
+
250
264
  export const PrimaryHeader: Story = {
251
265
  args: {
252
266
  ...defaultArgs,
@@ -370,4 +384,49 @@ export const TableWithNoData: Story = {
370
384
  );
371
385
  },
372
386
  };
387
+
388
+ export const DragAndDropTable: Story = {
389
+ args: {
390
+ ...defaultArgs,
391
+ data: sampleData.map((x) => x.project),
392
+
393
+ columns: columnsData,
394
+ tableDataTextColor: 'var(--brand-color)',
395
+ },
396
+ render: () => {
397
+ // important prerequisite tableData should have unique IDs
398
+ const [tableData, setTableData] = useState(
399
+ sampleData.map((data) => data.project)
400
+ );
401
+ useEffect(() => {
402
+ let sampleArray: any = [];
403
+ sampleData.forEach((data) => {
404
+ sampleArray.push(data.project);
405
+ });
406
+ setTableData(sampleArray);
407
+ }, []);
408
+
409
+ const handleIconClick = () => {};
410
+
411
+ const onDragEnd = (oldIndex: number, newIndex: number) => {
412
+ const updatedData = rearrangeDragItem(tableData, oldIndex, newIndex);
413
+ setTableData(updatedData);
414
+ };
415
+ return (
416
+ <>
417
+ <Table
418
+ draggable
419
+ onDragEnd={onDragEnd}
420
+ {...defaultArgs}
421
+ data={tableData}
422
+ columns={columnsData}
423
+ headerType="secondary"
424
+ noDataContent="No data found"
425
+ headerIconName={'expand_icon'}
426
+ headerIconOnClick={handleIconClick}
427
+ />
428
+ </>
429
+ );
430
+ },
431
+ };
373
432
  export default meta;