pixel-react 1.6.0 → 1.6.2

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 (112) hide show
  1. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  2. package/lib/components/AppHeader/types.d.ts +18 -6
  3. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  6. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  7. package/lib/components/MachineInputField/types.d.ts +1 -1
  8. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  9. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  10. package/lib/components/PopUpModal/types.d.ts +14 -0
  11. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  14. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  15. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  16. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  17. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  18. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  19. package/lib/components/TableTree/data.d.ts +36 -2
  20. package/lib/components/TableTree/types.d.ts +3 -4
  21. package/lib/index.d.ts +56 -17
  22. package/lib/index.esm.js +917 -552
  23. package/lib/index.esm.js.map +1 -1
  24. package/lib/index.js +917 -551
  25. package/lib/index.js.map +1 -1
  26. package/lib/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +1 -1
  28. package/src/assets/Themes/BaseTheme.scss +5 -14
  29. package/src/assets/Themes/DarkTheme.scss +5 -2
  30. package/src/assets/icons/approval_pending.svg +8 -8
  31. package/src/assets/icons/arrow_up.svg +1 -1
  32. package/src/assets/icons/configuration.svg +3 -3
  33. package/src/assets/icons/defects.svg +8 -8
  34. package/src/assets/icons/element.svg +4 -4
  35. package/src/assets/icons/project_element.svg +4 -4
  36. package/src/assets/icons/step_group.svg +10 -10
  37. package/src/assets/icons/variable.svg +3 -3
  38. package/src/assets/icons/web_service_icon.svg +3 -3
  39. package/src/assets/styles/_fonts.scss +4 -2
  40. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  41. package/src/components/AppHeader/AppHeader.tsx +158 -139
  42. package/src/components/AppHeader/types.ts +19 -6
  43. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  44. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  45. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  46. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  47. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  48. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  49. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  50. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  51. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  52. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  53. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  54. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  55. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  56. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  57. package/src/components/DatePicker/DatePicker.scss +15 -1
  58. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  59. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  60. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  62. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  63. package/src/components/Icon/Icons.scss +1 -1
  64. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  65. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  66. package/src/components/MachineInputField/types.ts +1 -1
  67. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  68. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  69. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  70. package/src/components/PopUpModal/types.ts +14 -0
  71. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  72. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  73. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  74. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  75. package/src/components/Select/Select.tsx +2 -3
  76. package/src/components/Select/components/Dropdown.tsx +34 -34
  77. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  78. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  79. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  80. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  81. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  82. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  83. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  84. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  85. package/src/components/TableTree/TableTree.stories.tsx +145 -98
  86. package/src/components/TableTree/TableTree.tsx +49 -14
  87. package/src/components/TableTree/data.ts +32 -391
  88. package/src/components/TableTree/types.ts +3 -4
  89. package/src/index.ts +3 -0
  90. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  91. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  92. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  93. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  94. package/lib/components/AddButton/AddButton.d.ts +0 -5
  95. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  96. package/lib/components/AddButton/index.d.ts +0 -1
  97. package/lib/components/AddButton/types.d.ts +0 -4
  98. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  99. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  100. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  101. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  102. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  103. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  104. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  105. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  106. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  107. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  108. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  109. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  110. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  111. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  112. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -4,7 +4,7 @@ import Button from '../Button';
4
4
  import treeData from './data';
5
5
  import Icon from '../Icon/Icon';
6
6
  import './TableTreeStories.scss';
7
- import React from 'react';
7
+ import React, { useState } from 'react';
8
8
 
9
9
  const meta: Meta<typeof TableTree> = {
10
10
  title: 'Components/Table tree',
@@ -14,119 +14,166 @@ const meta: Meta<typeof TableTree> = {
14
14
 
15
15
  type Story = StoryObj<typeof TableTree>;
16
16
 
17
- // NOTE :: For Action section use ff-action-section classname
17
+ const colData = [
18
+ {
19
+ name: 'Script Name',
20
+ accessor: 'title',
21
+ width: '400px',
22
+ isClickable: true,
23
+ actions: (row) => {
24
+ console.log('🚀 ~ row:', row);
25
+ return [
26
+ <Icon hoverEffect name="file" />,
27
+ <Icon hoverEffect name="manage_apps" />,
28
+ <Icon hoverEffect name="dropzone_icon" />,
29
+ <Icon hoverEffect name="more" />,
30
+ ];
31
+ },
32
+ isTree: true,
33
+ defaultValue: 'Project name',
34
+ defaultActions: () => [],
35
+ },
18
36
 
19
- // TODO :: below code is a temporary will Modify later
37
+ {
38
+ name: 'Module Path',
39
+ accessor: 'id',
40
+ width: '200px',
41
+ isClickable: true,
42
+ },
43
+
44
+ {
45
+ name: 'Module Path',
46
+ accessor: 'path',
47
+ width: '200px',
48
+ isClickable: true,
49
+ },
50
+ {
51
+ name: 'Module Path',
52
+ accessor: 'path',
53
+ width: '200px',
54
+ isClickable: true,
55
+ },
56
+ {
57
+ name: 'Module Path',
58
+ accessor: 'path',
59
+ width: '200px',
60
+ isClickable: true,
61
+ },
62
+ {
63
+ name: 'Module Path',
64
+ accessor: 'path',
65
+ width: '200px',
66
+ isClickable: true,
67
+ },
68
+ {
69
+ name: 'Module Path',
70
+ accessor: 'path',
71
+ width: '200px',
72
+ isClickable: true,
73
+ },
74
+ {
75
+ name: 'Module Path',
76
+ accessor: 'path',
77
+ width: '200px',
78
+ isClickable: true,
79
+ },
80
+ { name: 'Created By', accessor: 'createdByUname', width: '200px' },
81
+ {
82
+ name: 'Script Count',
83
+ accessor: 'moduleLevelScriptCount',
84
+ width: '200px',
85
+ },
86
+ {
87
+ name: 'state',
88
+ accessor: 'state',
89
+ width: '100px',
90
+ cell: ({ value }) => {
91
+ return (
92
+ value && (
93
+ <Button
94
+ variant="secondary"
95
+ onClick={() => {
96
+ console.log('====', value); //Todo:need to remove
97
+ }}
98
+ >
99
+ {value}
100
+ </Button>
101
+ )
102
+ );
103
+ },
104
+ },
105
+ ];
20
106
 
21
107
  export const Default: Story = {
22
108
  args: {
23
109
  onPagination: (node) => {
24
110
  console.log(node);
25
111
  },
26
- expandedNodes: ['/MOD100111111','/MOD1001/MOD1024'],
112
+ expandedNodes: ['MOD1102'],
27
113
  onExpand: (isExpand, node) => {
28
114
  console.log(isExpand, node);
29
115
  },
30
- select: 'radio',
31
- onChange: (e: any, node: any) => {
32
- e.preventDefault();
33
- e.stopPropagation();
116
+ select: 'checkbox',
117
+ onChange: (node: string[]) => {
118
+ console.log('-------------------', node);
34
119
  },
35
- selected: ['/MOD1001/MOD1002/MOD10031111'],
120
+ selected: ['MOD1102'],
36
121
  treeData,
37
- columnsData: [
38
- {
39
- name: 'Script Name',
40
- accessor: 'title',
41
- width: '400px',
42
- isClickable: true,
43
- actions: (row) => {
44
- console.log('🚀 ~ row:', row);
45
- return [
46
- <Icon hoverEffect name="file" />,
47
- <Icon hoverEffect name="manage_apps" />,
48
- <Icon hoverEffect name="dropzone_icon" />,
49
- <Icon hoverEffect name="more" />,
50
- ];
51
- },
52
- isTree: true,
53
- defaultValue: 'Project name',
54
- defaultActions: () => [],
55
- },
56
-
57
- {
58
- name: 'Module Path',
59
- accessor: 'searchKey',
60
- width: '200px',
61
- isClickable: true,
62
- },
63
-
64
- {
65
- name: 'Module Path',
66
- accessor: 'path',
67
- width: '200px',
68
- isClickable: true,
69
- },
70
- {
71
- name: 'Module Path',
72
- accessor: 'path',
73
- width: '200px',
74
- isClickable: true,
75
- },
76
- {
77
- name: 'Module Path',
78
- accessor: 'path',
79
- width: '200px',
80
- isClickable: true,
81
- },
82
- {
83
- name: 'Module Path',
84
- accessor: 'path',
85
- width: '200px',
86
- isClickable: true,
87
- },
88
- {
89
- name: 'Module Path',
90
- accessor: 'path',
91
- width: '200px',
92
- isClickable: true,
93
- },
94
- {
95
- name: 'Module Path',
96
- accessor: 'path',
97
- width: '200px',
98
- isClickable: true,
99
- },
100
- { name: 'Created By', accessor: 'createdByUname', width: '200px' },
101
- {
102
- name: 'Script Count',
103
- accessor: 'moduleLevelScriptCount',
104
- width: '200px',
105
- },
106
- {
107
- name: 'state',
108
- accessor: 'state',
109
- width: '100px',
110
- cell: ({ value }) => {
111
- return (
112
- value && (
113
- <Button
114
- variant="secondary"
115
- onClick={() => {
116
- console.log('====', value); //Todo:need to remove
117
- }}
118
- >
119
- {value}
120
- </Button>
121
- )
122
- );
123
- },
124
- },
125
- ],
122
+ columnsData: colData,
126
123
  onClick: (e, data) => {
127
124
  console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
128
125
  },
129
126
  },
130
127
  };
131
128
 
129
+ export const ControlledCheckBox: Story = {
130
+ render: () => {
131
+ const [selected, setSelected] = useState<string[]>([]);
132
+ return (
133
+ <TableTree
134
+ expandedNodes={['MOD1102']}
135
+ onExpand={(isExpand, node) => {
136
+ console.log(isExpand, node);
137
+ }}
138
+ select="checkbox"
139
+ onChange={(nodes: string[]) => {
140
+ setSelected(nodes);
141
+ }}
142
+ selected={selected}
143
+ treeData={treeData}
144
+ columnsData={colData}
145
+ onClick={(e, data) => {
146
+ console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
147
+ }}
148
+ onPagination={(direction) => {
149
+ console.log(direction,'-------------------');
150
+ }}
151
+ />
152
+ );
153
+ },
154
+ };
155
+ export const ControlledRadio: Story = {
156
+ render: () => {
157
+ const [selected, setSelected] = useState<string[]>([]);
158
+ return (
159
+ <TableTree
160
+ expandedNodes={['MOD1102']}
161
+ onExpand={(isExpand, node) => {
162
+ console.log(isExpand, node);
163
+ }}
164
+ select="radio"
165
+ onChange={(nodes: string[]) => {
166
+ setSelected(nodes);
167
+ }}
168
+ selected={selected}
169
+ treeData={treeData}
170
+ columnsData={colData}
171
+ onClick={(e, data) => {
172
+ console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
173
+ }}
174
+ />
175
+ );
176
+ },
177
+ };
178
+
132
179
  export default meta;
@@ -12,6 +12,20 @@ const renderSpaces = (level: number) =>
12
12
  <span key={i} className="tree-table-space-block" />
13
13
  ));
14
14
 
15
+ // Recursive function to get all child node IDs (including nested children)
16
+ const getAllChildIds = (nodeId: string, data: any[]): string[] => {
17
+ let result = [nodeId];
18
+
19
+ // Traverse the tree and find children based on parentId
20
+ data.forEach(({ node }) => {
21
+ if (node.parentId === nodeId) {
22
+ result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
23
+ }
24
+ });
25
+
26
+ return result;
27
+ };
28
+
15
29
  // Component: TableCell
16
30
  const TableCell = React.memo(
17
31
  ({
@@ -30,7 +44,7 @@ const TableCell = React.memo(
30
44
  isExpanded: boolean;
31
45
  selected: string[];
32
46
  select: string | null;
33
- onCheckBoxChange: (e: any, node: any) => void;
47
+ onCheckBoxChange: (type: string, node: any) => void;
34
48
  onToggleExpand: (node: any) => void;
35
49
  }) => (
36
50
  <td>
@@ -39,7 +53,7 @@ const TableCell = React.memo(
39
53
  <span
40
54
  className={`tree-table-space-block last-block ${
41
55
  isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
42
- } ${node.folder ? '': 'no-folder'}`}
56
+ } ${node.folder ? '' : 'no-folder'}`}
43
57
  onClick={() => onToggleExpand(node)}
44
58
  >
45
59
  {node.folder && <Arrow />}
@@ -48,16 +62,16 @@ const TableCell = React.memo(
48
62
  <span className="tree-table-td-content">
49
63
  {col.isTree && select === 'checkbox' && (
50
64
  <Checkbox
51
- checked={selected.includes(node.searchKey)}
52
- onChange={(e) => onCheckBoxChange(e, node)}
65
+ checked={selected.includes(node.id)}
66
+ onChange={() => onCheckBoxChange('checkbox', node)}
53
67
  />
54
68
  )}
55
69
  {col.isTree && select === 'radio' && (
56
70
  <RadioButton
57
71
  name={node.title}
58
- checked={selected.includes(node.searchKey)}
59
- value={node.searchKey}
60
- onChange={(e) => onCheckBoxChange(e, node)}
72
+ checked={selected.includes(node.id)}
73
+ value={node.id}
74
+ onChange={() => onCheckBoxChange('radio', node)}
61
75
  />
62
76
  )}
63
77
  {prepareData(node, col)}
@@ -90,7 +104,7 @@ const TableRow = React.memo(
90
104
  select: string | null;
91
105
  onRowClick: (e: any, node: any) => void;
92
106
  onToggleExpand: (node: any) => void;
93
- onCheckBoxChange: (e: any, node: any) => void;
107
+ onCheckBoxChange: (type: string, node: any) => void;
94
108
  }) => (
95
109
  <tr
96
110
  data-level={level}
@@ -169,11 +183,11 @@ const TableBody = React.memo(
169
183
  select: string | null;
170
184
  onRowClick: (e: any, node: any) => void;
171
185
  onToggleExpand: (node: any) => void;
172
- onCheckBoxChange: (e: any, node: any) => void;
186
+ onCheckBoxChange: (type: string, node: any) => void;
173
187
  }) => (
174
188
  <tbody>
175
189
  {flattenedTreeData.map(({ node, level }) => {
176
- const isExpanded = expandedNodes.includes(node.searchKey);
190
+ const isExpanded = expandedNodes.includes(node?.id);
177
191
  return (
178
192
  <TableRow
179
193
  key={node.id}
@@ -205,14 +219,35 @@ const TreeTable: React.FC<TreeTableProps> = ({
205
219
  onExpand,
206
220
  }) => {
207
221
  const handleToggleExpand = useCallback(
208
- (node: any) =>
209
- onExpand?.(!expandedNodes.includes(node.searchKey), node.searchKey),
222
+ (node: any) => onExpand?.(!expandedNodes.includes(node?.id), node?.id),
210
223
  [expandedNodes, onExpand]
211
224
  );
225
+
212
226
  const handleCheckBoxChange = useCallback(
213
- (e: any, node: any) => onChange?.(e, node),
214
- [onChange]
227
+ (type: string, node: any) => {
228
+ const nodeId = node.id;
229
+
230
+ if (type === 'radio') {
231
+ onChange?.([nodeId]);
232
+ } else {
233
+ let updatedSelected = [...selected];
234
+
235
+ if (!updatedSelected.includes(nodeId)) {
236
+ const childIds = getAllChildIds(nodeId, treeData);
237
+ updatedSelected = [...new Set([...updatedSelected, ...childIds])]; // Add children
238
+ } else {
239
+ const childIds = getAllChildIds(nodeId, treeData);
240
+ updatedSelected = updatedSelected.filter(
241
+ (id) => !childIds.includes(id)
242
+ );
243
+ }
244
+
245
+ onChange?.(updatedSelected);
246
+ }
247
+ },
248
+ [selected, treeData, onChange]
215
249
  );
250
+
216
251
  const handleRowClick = useCallback(
217
252
  (e: any, node: any) => onClick?.(e, node),
218
253
  [onClick]