pixel-react 1.5.9 → 1.6.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 (79) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  5. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  6. package/lib/components/AddButton/AddButton.d.ts +5 -0
  7. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  8. package/lib/components/AddButton/index.d.ts +1 -0
  9. package/lib/components/AddButton/types.d.ts +4 -0
  10. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  11. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  12. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  13. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  14. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  15. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  16. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  17. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  18. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  19. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  20. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  21. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  22. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  23. package/lib/components/FieldSet/index.d.ts +1 -0
  24. package/lib/components/FieldSet/types.d.ts +7 -0
  25. package/lib/components/FileDropzone/types.d.ts +8 -0
  26. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
  27. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  28. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
  29. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  30. package/lib/components/Select/Select.stories.d.ts +1 -0
  31. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  32. package/lib/components/TableTree/TableTree.d.ts +4 -24
  33. package/lib/components/TableTree/data.d.ts +78 -273
  34. package/lib/components/TableTree/types.d.ts +29 -0
  35. package/lib/index.d.ts +98 -20
  36. package/lib/index.esm.js +367 -370
  37. package/lib/index.esm.js.map +1 -1
  38. package/lib/index.js +371 -370
  39. package/lib/index.js.map +1 -1
  40. package/lib/tsconfig.tsbuildinfo +1 -1
  41. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  42. package/package.json +2 -2
  43. package/src/assets/icons/approval_pending.svg +8 -8
  44. package/src/assets/icons/configuration.svg +3 -3
  45. package/src/assets/icons/defects.svg +8 -8
  46. package/src/assets/icons/element.svg +4 -4
  47. package/src/assets/icons/export.svg +5 -0
  48. package/src/assets/icons/import.svg +5 -0
  49. package/src/assets/icons/info_icon.svg +4 -16
  50. package/src/assets/icons/project_element.svg +4 -4
  51. package/src/assets/icons/replace_file.svg +14 -0
  52. package/src/assets/icons/step_group.svg +10 -10
  53. package/src/assets/icons/variable.svg +3 -3
  54. package/src/assets/icons/web_service_icon.svg +3 -0
  55. package/src/components/Checkbox/Checkbox.tsx +1 -7
  56. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  57. package/src/components/FieldSet/FieldSet.scss +9 -0
  58. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  59. package/src/components/FieldSet/FieldSet.tsx +29 -0
  60. package/src/components/FieldSet/index.ts +1 -0
  61. package/src/components/FieldSet/types.ts +8 -0
  62. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  63. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  64. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  65. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  66. package/src/components/FileDropzone/types.ts +8 -0
  67. package/src/components/Icon/iconList.ts +11 -7
  68. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  69. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  70. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  71. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  72. package/src/components/TableTree/TableTree.scss +154 -123
  73. package/src/components/TableTree/TableTree.stories.tsx +10 -5
  74. package/src/components/TableTree/TableTree.tsx +220 -287
  75. package/src/components/TableTree/data.ts +677 -569
  76. package/src/components/TableTree/types.ts +31 -0
  77. package/src/components/Toast/Toast.tsx +1 -1
  78. package/src/index.ts +8 -0
  79. /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
@@ -1,307 +1,240 @@
1
- /* eslint-disable */
2
- // @ts-nocheck
3
- import React, {
4
- ReactNode,
5
- useEffect,
6
- useLayoutEffect,
7
- useRef,
8
- useState,
9
- } from 'react';
1
+ import React, { useMemo, useCallback } from 'react';
2
+ import './TableTree.scss';
10
3
  import { prepareData } from '../../utils/TableCell/TableCell';
11
- import Icon from '../Icon';
12
- import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
13
-
4
+ import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
14
5
  import Checkbox from '../Checkbox';
15
- import './TableTree.scss';
16
6
  import RadioButton from '../RadioButton';
17
- import Typography from '../Typography';
18
-
19
- import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
20
-
21
- interface ColumnDataProps {
22
- name: string;
23
- accessor: string;
24
- width: string;
25
- isClickable?: boolean;
26
- minWidth?: string;
27
- cell?: (e: any) => JSX.Element | string | ReactNode;
28
- actions?: (e: any) => JSX.Element | string | ReactNode;
29
- }
30
-
31
- interface ObjectProps {
32
- [key: string]: any;
33
- }
34
-
35
- interface TableTreeProps {
36
- select: 'checkbox' | 'radio' | 'none';
37
- columnsData: Array<ColumnDataProps>;
38
- treeData: Array<ObjectProps>;
39
- onClick?: (
40
- event: React.MouseEvent<HTMLDivElement, MouseEvent>,
41
- data: any
42
- ) => void;
43
- onChange?: (e: any, node: any) => void;
44
- selected: Array<string>;
45
- onPagination?: (node: ObjectProps) => void; // New prop for pagination
46
- }
47
-
48
- const TableTree = ({
49
- columnsData,
50
- treeData,
51
- select,
52
- onClick = () => {},
53
- onChange,
54
- selected,
55
- onPagination,
56
- }: TableTreeProps) => {
57
- const [expandedNodes, setExpandedNodes] = useState<Set<ObjectProps>>(
58
- new Set()
7
+ import { TreeTableProps } from './types';
8
+
9
+ // Helper to render spaces for levels
10
+ const renderSpaces = (level: number) =>
11
+ Array.from({ length: level }).map((_, i) => (
12
+ <span key={i} className="tree-table-space-block" />
13
+ ));
14
+
15
+ // Component: TableCell
16
+ const TableCell = React.memo(
17
+ ({
18
+ col,
19
+ node,
20
+ level,
21
+ isExpanded,
22
+ selected,
23
+ select,
24
+ onCheckBoxChange,
25
+ onToggleExpand,
26
+ }: {
27
+ col: any;
28
+ node: any;
29
+ level: number;
30
+ isExpanded: boolean;
31
+ selected: string[];
32
+ select: string | null;
33
+ onCheckBoxChange: (e: any, node: any) => void;
34
+ onToggleExpand: (node: any) => void;
35
+ }) => (
36
+ <td>
37
+ {col.isTree && renderSpaces(level + 1)}
38
+ {col.isTree && (
39
+ <span
40
+ className={`tree-table-space-block last-block ${
41
+ isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
42
+ } ${node.folder ? '': 'no-folder'}`}
43
+ onClick={() => onToggleExpand(node)}
44
+ >
45
+ {node.folder && <Arrow />}
46
+ </span>
47
+ )}
48
+ <span className="tree-table-td-content">
49
+ {col.isTree && select === 'checkbox' && (
50
+ <Checkbox
51
+ checked={selected.includes(node.searchKey)}
52
+ onChange={(e) => onCheckBoxChange(e, node)}
53
+ />
54
+ )}
55
+ {col.isTree && select === 'radio' && (
56
+ <RadioButton
57
+ name={node.title}
58
+ checked={selected.includes(node.searchKey)}
59
+ value={node.searchKey}
60
+ onChange={(e) => onCheckBoxChange(e, node)}
61
+ />
62
+ )}
63
+ {prepareData(node, col)}
64
+ </span>
65
+ {col.actions && (
66
+ <div className="table-tree-row-action">{col.actions(node)}</div>
67
+ )}
68
+ </td>
69
+ )
70
+ );
71
+
72
+ // Component: TableRow
73
+ const TableRow = React.memo(
74
+ ({
75
+ node,
76
+ level,
77
+ columnsData,
78
+ isExpanded,
79
+ selected,
80
+ select,
81
+ onRowClick,
82
+ onToggleExpand,
83
+ onCheckBoxChange,
84
+ }: {
85
+ node: any;
86
+ level: number;
87
+ columnsData: any[];
88
+ isExpanded: boolean;
89
+ selected: string[];
90
+ select: string | null;
91
+ onRowClick: (e: any, node: any) => void;
92
+ onToggleExpand: (node: any) => void;
93
+ onCheckBoxChange: (e: any, node: any) => void;
94
+ }) => (
95
+ <tr
96
+ data-level={level}
97
+ className="show"
98
+ onClick={(e) => onRowClick(e, node)}
99
+ >
100
+ {columnsData.map((col) => (
101
+ <TableCell
102
+ key={col.name}
103
+ col={col}
104
+ node={node}
105
+ level={level}
106
+ isExpanded={isExpanded}
107
+ selected={selected}
108
+ select={select}
109
+ onCheckBoxChange={onCheckBoxChange}
110
+ onToggleExpand={onToggleExpand}
111
+ />
112
+ ))}
113
+ </tr>
114
+ )
115
+ );
116
+
117
+ // Component: TableHead
118
+ const TableHead = React.memo(({ columnsData }: { columnsData: any[] }) => {
119
+ const hasDefaultValues = useMemo(
120
+ () => columnsData.some(({ defaultValue }) => !!defaultValue),
121
+ [columnsData]
59
122
  );
60
- const triggeredPaginationNodes = useRef(new Set()); // Tracks nodes for which pagination is triggered
61
-
62
- useLayoutEffect(() => {
63
- const defaultExpanded: Set<ObjectProps> = new Set();
64
-
65
- // Recursive function to add nodes and their children to the expanded set
66
- const expandNodeRecursively = (node: ObjectProps) => {
67
- if (node.expanded) {
68
- defaultExpanded.add(node);
69
-
70
- if (node.children) {
71
- node.children.forEach((child: ObjectProps) =>
72
- expandNodeRecursively(child)
73
- );
74
- }
75
- }
76
- };
77
-
78
- treeData.forEach((node) => {
79
- expandNodeRecursively(node);
80
- });
81
-
82
- setExpandedNodes(defaultExpanded);
83
- }, [treeData]);
84
-
85
- // Function to calculate total children height
86
- const calculateTotalChildrenHeight = (node: any): number => {
87
- if (!node.children || node.children.length === 0) {
88
- return 1;
89
- }
90
- let totalHeight = 1;
91
- if (expandedNodes.has(node)) {
92
- node.children.forEach((child: any) => {
93
- totalHeight += calculateTotalChildrenHeight(child);
94
- });
95
- }
96
- return totalHeight;
97
- };
98
-
99
- const TreeNode = ({ node, level, isLast }: any) => {
100
- const nodeRef = useRef<HTMLTableRowElement | null>(null);
101
- const lastChildRef = useRef<HTMLTableRowElement | null>(null); // Ref for pagination
102
- const [nodeHeight, setNodeHeight] = useState<number>(0);
103
- const [totalChildrenHeight, setTotalChildrenHeight] = useState<number>(0);
104
-
105
- const isExpanded = expandedNodes.has(node);
106
-
107
- useLayoutEffect(() => {
108
- if (nodeRef.current) {
109
- const observer = new ResizeObserver(() => {
110
- const currentHeight = nodeRef.current?.offsetHeight || 0;
111
- setNodeHeight(currentHeight);
112
-
113
- const childrenHeight = calculateTotalChildrenHeight(node);
114
- setTotalChildrenHeight(childrenHeight);
115
- });
116
-
117
- observer.observe(nodeRef.current);
118
-
119
- return () => {
120
- observer.disconnect();
121
- };
122
- }
123
- }, [isExpanded, node]);
124
-
125
- useEffect(() => {
126
- if (!isExpanded || !lastChildRef.current || !onPagination) return;
127
123
 
128
- const observer = new IntersectionObserver(
129
- (entries) => {
130
- if (
131
- entries[0].isIntersecting &&
132
- !triggeredPaginationNodes.current.has(node.key)
133
- ) {
134
- triggeredPaginationNodes.current.add(node.key); // Mark node as paginated
135
- onPagination(node); // Trigger the pagination callback
136
- }
137
- },
138
- {
139
- root: null, // Use the viewport as the root
140
- threshold: 1.0, // Trigger when fully visible
141
- }
142
- );
143
-
144
- observer.observe(lastChildRef.current);
145
-
146
- return () => observer.disconnect();
147
- }, [isExpanded, onPagination, node]);
148
-
149
- const handleToggleExpand = () => {
150
- setExpandedNodes((prev) => {
151
- const newExpandedNodes = new Set(prev);
152
- if (newExpandedNodes.has(node)) {
153
- newExpandedNodes.delete(node); // Collapse the node
154
- } else {
155
- newExpandedNodes.add(node); // Expand the node
156
- }
157
- return newExpandedNodes;
158
- });
159
- };
160
-
161
- const handleCheckBoxChange = (e, node) => {
162
- if (onChange) {
163
- onChange(e, node);
164
- }
165
- };
166
-
167
- const renderRowData = (columnsData: any) => {
168
- return columnsData.map((column: any) => {
169
- if (column.accessor === 'title') {
170
- return (
171
- <td className={`ff-title-container ${isLast ? 'ff-is-last' : ''}`}>
172
- <div className="first-div">
173
- {' '}
174
- <span className="ff-toggle-folder" onClick={handleToggleExpand}>
175
- {node.folder && (
176
- <span
177
- className={`ff-toggle-arrow-icon ${
178
- isExpanded ? 'ff-expanded' : 'ff-collapsed'
179
- }`}
180
- >
181
- <Arrow />
182
- </span>
183
- )}
184
- </span>
185
- <div
186
- className="ff-title"
187
- style={{ fontWeight: node.folder ? 600 : 400 }}
188
- onClick={(event) => onClick(event, node)}
189
- >
190
- {select === 'checkbox' && (
191
- <Checkbox
192
- checked={selected.includes(node.key)}
193
- onChange={(e) => handleCheckBoxChange(e, node)}
194
- />
195
- )}
196
- {select === 'radio' && (
197
- <RadioButton
198
- name={node.title}
199
- value={node.key}
200
- onChange={(e) => handleCheckBoxChange(e, node)}
201
- />
202
- )}
203
-
204
- <Typography className="ff-title-label" fontWeight="medium">
205
- {prepareData(node, column)}
206
- </Typography>
207
-
208
- {column.actions && (
209
- <div className="ff-title-action-container">
210
- {column.actions(node)}
124
+ return (
125
+ <thead>
126
+ <tr>
127
+ {columnsData.map(({ name }) => (
128
+ <th key={name}>{name}</th>
129
+ ))}
130
+ </tr>
131
+ {hasDefaultValues && (
132
+ <tr>
133
+ {columnsData.map(({ defaultValue, defaultActions }, index) => (
134
+ <td key={index}>
135
+ {defaultValue && (
136
+ <span className="">
137
+ {defaultValue}
138
+ {defaultActions && (
139
+ <div className="table-tree-row-action">
140
+ {defaultActions()}
211
141
  </div>
212
142
  )}
213
- </div>
214
- </div>
215
- </td>
216
- );
217
- } else if (column.accessor) {
218
- return (
219
- <td key={column.accessor} style={{ maxWidth: column.width }}>
220
- {prepareData(node, column)}
143
+ </span>
144
+ )}
221
145
  </td>
222
- );
223
- }
224
- });
225
- };
226
-
227
- const renderTree = (nodes: any, level = 0) => {
228
- return nodes.map((childNode: any, index: number) => {
229
- const isChildLast = index === nodes.length - 1;
230
- const ref = isChildLast ? lastChildRef : null;
146
+ ))}
147
+ </tr>
148
+ )}
149
+ </thead>
150
+ );
151
+ });
152
+
153
+ // Component: TableBody
154
+ const TableBody = React.memo(
155
+ ({
156
+ flattenedTreeData,
157
+ columnsData,
158
+ expandedNodes,
159
+ selected,
160
+ select,
161
+ onRowClick,
162
+ onToggleExpand,
163
+ onCheckBoxChange,
164
+ }: {
165
+ flattenedTreeData: any[];
166
+ columnsData: any[];
167
+ expandedNodes: string[];
168
+ selected: string[];
169
+ select: string | null;
170
+ onRowClick: (e: any, node: any) => void;
171
+ onToggleExpand: (node: any) => void;
172
+ onCheckBoxChange: (e: any, node: any) => void;
173
+ }) => (
174
+ <tbody>
175
+ {flattenedTreeData.map(({ node, level }) => {
176
+ const isExpanded = expandedNodes.includes(node.searchKey);
231
177
  return (
232
- <TreeNode
233
- key={childNode.key || index}
234
- node={childNode}
178
+ <TableRow
179
+ key={node.id}
180
+ node={node}
235
181
  level={level}
236
- isLast={isChildLast}
237
- ref={ref}
182
+ columnsData={columnsData}
183
+ isExpanded={isExpanded}
184
+ selected={selected}
185
+ select={select}
186
+ onRowClick={onRowClick}
187
+ onToggleExpand={onToggleExpand}
188
+ onCheckBoxChange={onCheckBoxChange}
238
189
  />
239
190
  );
240
- });
241
- };
242
-
243
- return (
244
- <>
245
- <tr
246
- ref={nodeRef}
247
- className={`ff-node-li ${node.children ? 'ff-has-children' : ''} `}
248
- style={
249
- {
250
- '--level': level,
251
- '--node-height': `${nodeHeight}px`,
252
- '--total-children-height': `${
253
- totalChildrenHeight * nodeHeight
254
- }px`,
255
- } as React.CSSProperties
256
- }
257
- >
258
- {renderRowData(columnsData)}
259
- </tr>
191
+ })}
192
+ </tbody>
193
+ )
194
+ );
260
195
 
261
- {isExpanded &&
262
- !checkEmpty(node?.children) &&
263
- renderTree(node.children, level + 1)}
264
- </>
265
- );
266
- };
267
-
268
- const renderTree = (nodes: any, level = 0) => {
269
- return nodes.map((node: any, index: number) => {
270
- const isLast = index === nodes.length - 1;
271
- return (
272
- <TreeNode
273
- key={node.key || index}
274
- node={node}
275
- level={level}
276
- isLast={isLast}
277
- />
278
- );
279
- });
280
- };
196
+ // Component: TreeTable
197
+ const TreeTable: React.FC<TreeTableProps> = ({
198
+ treeData,
199
+ columnsData,
200
+ selected = [],
201
+ select = null,
202
+ onChange,
203
+ onClick,
204
+ expandedNodes = [],
205
+ onExpand,
206
+ }) => {
207
+ const handleToggleExpand = useCallback(
208
+ (node: any) =>
209
+ onExpand?.(!expandedNodes.includes(node.searchKey), node.searchKey),
210
+ [expandedNodes, onExpand]
211
+ );
212
+ const handleCheckBoxChange = useCallback(
213
+ (e: any, node: any) => onChange?.(e, node),
214
+ [onChange]
215
+ );
216
+ const handleRowClick = useCallback(
217
+ (e: any, node: any) => onClick?.(e, node),
218
+ [onClick]
219
+ );
281
220
 
282
221
  return (
283
- <div className="ff-tree-container">
284
- <table>
285
- <thead>
286
- <tr>
287
- {columnsData.map((column: any, index) => (
288
- <th
289
- key={column.accessor}
290
- style={
291
- index === 0
292
- ? { minWidth: column.width }
293
- : { width: column.width }
294
- }
295
- >
296
- {column.name}
297
- </th>
298
- ))}
299
- </tr>
300
- </thead>
301
- <tbody>{renderTree(treeData)}</tbody>
222
+ <div className="tree-table-wrap">
223
+ <table className="tree-table">
224
+ <TableHead columnsData={columnsData} />
225
+ <TableBody
226
+ flattenedTreeData={treeData}
227
+ columnsData={columnsData}
228
+ expandedNodes={expandedNodes}
229
+ selected={selected}
230
+ select={select}
231
+ onRowClick={handleRowClick}
232
+ onToggleExpand={handleToggleExpand}
233
+ onCheckBoxChange={handleCheckBoxChange}
234
+ />
302
235
  </table>
303
236
  </div>
304
237
  );
305
238
  };
306
239
 
307
- export default TableTree;
240
+ export default TreeTable;