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,171 +1,202 @@
1
- @use '../../assets/styles/fonts';
1
+ html,
2
+ * {
3
+ font-family: 'Open Sans';
4
+ }
2
5
 
3
- .ff-tree-container {
4
- width: 100%;
5
- font-size: 12px;
6
- color: var(--brand-color);
7
- transition: all 0.3s ease;
8
- @extend .fontSm;
6
+ .tree-table-space-block {
7
+ display: inline-block;
8
+ width: 20px;
9
+ }
9
10
 
10
- table {
11
- border-collapse: collapse;
12
- width: 100%;
13
- text-align: left;
14
- position: relative; /* Ensure the table has a relative position for z-index to work */
15
- }
11
+ .hidden {
12
+ display: none;
13
+ }
16
14
 
17
- .ff-toggle-arrow-icon {
18
- height: 12px;
19
- width: 12px;
20
- margin-left: 8px;
21
- display: grid;
22
- place-items: center;
23
- transform: rotate(0deg);
24
-
25
- svg {
26
- path {
27
- fill: var(--brand-color);
28
- }
29
- }
15
+ .show {
16
+ display: table-row;
17
+ }
30
18
 
31
- &.ff-expanded {
32
- transform: rotate(0deg);
33
- }
19
+ .btn-toggle {
20
+ &.expand {
21
+ cursor: pointer;
22
+ }
34
23
 
35
- &.ff-collapsed {
36
- transform: rotate(-90deg);
37
- }
24
+ &.is-close {
25
+ background: #f1f1f1;
26
+ border: 1px solid transparent;
27
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
38
28
  }
39
29
 
40
- th {
41
- vertical-align: middle;
42
- height: 32px;
43
- background-color: var(--slider-table-color);
44
- color: var(--text-color);
45
- font-weight: 600;
46
- text-transform: uppercase;
30
+ &::before {
31
+ display: none;
47
32
  }
48
33
 
34
+ &::after {
35
+ display: none;
36
+ }
37
+ }
38
+
39
+ .tree-table-wrap {
40
+ width: 100%;
41
+ }
42
+
43
+ .tree-table {
44
+ border: 1px solid #f1f1f1;
45
+ table-layout: fixed;
46
+ width: 100%;
47
+ border-collapse: collapse;
48
+ overflow: scroll;
49
49
  tr {
50
- .ff-action-section {
50
+ .table-tree-row-action {
51
51
  display: none;
52
52
  }
53
-
54
53
  &:hover {
55
54
  background-color: var(--hover-color);
56
-
57
- .ff-title-action-container {
58
- display: flex;
55
+ .table-tree-row-action {
56
+ display: inline-flex;
57
+ align-items: center;
59
58
  }
60
59
  }
61
60
  }
62
61
 
63
- .ff-title-container {
64
- display: flex;
65
- align-items: center;
66
- gap: 4px;
67
-
68
- .ff-toggle-folder {
69
- display: flex;
70
- cursor: pointer;
71
- }
72
-
73
- &.ff-folder {
74
- font-weight: 600;
75
- }
76
-
77
- &.ff-file {
78
- font-weight: 400;
62
+ th {
63
+ color: var(--brand-color);
64
+ text-align: center;
65
+ padding: 10px 0;
66
+ background: var(--slider-table-color);
67
+ font-size: 13px;
68
+ width: 400px;
69
+ text-align: left;
70
+ &:first-child {
71
+ width: 400px;
72
+ position: sticky;
73
+ left: 0;
79
74
  }
75
+ }
80
76
 
81
- .ff-title {
82
- display: flex;
83
- gap: 4px;
84
- white-space: nowrap;
85
- overflow: hidden;
86
- text-overflow: ellipsis;
87
- font-weight: 400;
88
- cursor: pointer;
89
-
90
- .ff-title-label {
91
- display: flex;
92
- align-items: center;
93
- }
77
+ td {
78
+ font-size: 14px;
79
+ color: var(--brand-color);
80
+ white-space: nowrap;
81
+ text-overflow: ellipsis;
82
+ overflow: hidden;
83
+ text-align: left;
84
+ height: 32px;
94
85
 
95
- .ff-hover-icon {
96
- display: none;
97
- position: absolute;
98
- right: 10px;
86
+ &:first-child {
87
+ overflow: initial;
88
+ width: 400px;
89
+ position: sticky;
90
+ left: 0;
91
+ background-color: white;
92
+ &:hover {
93
+ background-color: var(--hover-color);
99
94
  }
100
95
  }
101
- }
102
96
 
103
- .ff-node-li {
104
- --indent-size: 18px;
105
- --total-children-height: var(--node-height);
97
+ .tree-table-space-block {
98
+ border: 1px solid transparent;
99
+ display: inline-block;
100
+ width: 20px;
101
+ height: 20px;
102
+ line-height: 16px;
103
+ text-align: center;
104
+ vertical-align: top;
105
+ font-size: 19px;
106
+ position: relative;
107
+ box-sizing: border-box;
108
+ margin-top: 7px;
109
+ border-radius: 50%;
106
110
 
107
- td {
108
- padding: 0 8px;
109
- white-space: nowrap;
110
- text-overflow: ellipsis;
111
111
  &:first-child {
112
- padding-left: calc(var(--level) * var(--indent-size));
113
- height: 32px;
114
- z-index: 0;
112
+ margin-left: 7px;
115
113
  }
116
114
 
117
- .first-div {
118
- background-color: white;
119
- display: flex;
120
- width: 100%;
121
- height: 32px;
115
+ &.btn-toggle {
116
+ // border: 1px solid var(--brand-color);
117
+ position: relative;
118
+ cursor: pointer;
119
+ width: 22px;
120
+ height: 22px;
121
+ z-index: 12;
122
122
 
123
- &:hover {
124
- background-color: var(--hover-color);
123
+ &::before {
124
+ display: none;
125
125
  }
126
+ }
127
+
128
+ &.last-block {
126
129
  &::before {
127
- content: '';
128
- position: absolute;
129
- top: 0;
130
- left: calc(var(--level) * var(--indent-size) - 4px);
131
- width: 1px;
132
- height: calc(var(--total-children-height));
133
- background-color: var(--tree-connecting-lines-color);
134
- z-index: 9999;
130
+ display: none;
135
131
  }
136
132
 
137
- // Horizontal line connecting child node to parent
138
133
  &::after {
139
- content: '';
140
134
  position: absolute;
141
- top: 50%;
142
- left: calc(var(--level) * var(--indent-size) - 4px);
135
+ content: '';
143
136
  width: 12px;
144
137
  height: 1px;
145
- background-color: var(--tree-connecting-lines-color);
146
- z-index: 10; /* Ensure it stays above the content */
138
+ background: var(--tree-connecting-lines-color);
139
+ top: 50%;
140
+ margin-top: -1px;
141
+ left: -10px;
147
142
  }
148
-
149
- &.ff-is-last::before {
150
- height: calc(var(--node-height) / 2);
143
+ }
144
+ &.no-folder {
145
+ width: 8px;
146
+ &::after {
147
+ position: absolute;
148
+ content: '';
149
+ width: 18px;
150
+ height: 1px;
151
+ background: var(--tree-connecting-lines-color);
152
+ top: 50%;
153
+ margin-top: -1px;
154
+ left: -10px;
151
155
  }
152
156
  }
153
- }
154
157
 
155
- // Remove the lines for root level
156
- &[style*='--level: 0']::before,
157
- &[style*='--level: 0']::after {
158
- content: none;
158
+ &:not(.last-block)::before {
159
+ position: absolute;
160
+ content: '';
161
+ width: 1px;
162
+ height: 40px;
163
+ background: var(--tree-connecting-lines-color);
164
+ left: 50%;
165
+ top: -12px;
166
+ z-index: -1;
167
+ }
159
168
  }
160
169
  }
161
170
  }
162
171
 
163
- .ff-title-action-container {
164
- display: none;
172
+ .tree-table-td-content {
173
+ display: inline-flex;
165
174
  align-items: center;
175
+ padding: 7px;
176
+ font-size: 12px;
177
+ font-family: 'Poppins';
178
+ }
179
+
180
+ .hidden {
181
+ display: none;
182
+ }
183
+
184
+ .show {
185
+ visibility: visible;
166
186
  }
167
- th:first-child,
168
- td:first-child {
169
- position: sticky;
170
- left: 0;
187
+ .tree-row-expanded,
188
+ .tree-row-collapsed {
189
+ svg {
190
+ height: 12px;
191
+ width: 12px;
192
+ path {
193
+ fill: var(--brand-color);
194
+ }
195
+ }
196
+ }
197
+ .tree-row-collapsed {
198
+ svg {
199
+ transform: rotate(-90deg);
200
+ transition: all;
201
+ }
171
202
  }
@@ -23,14 +23,16 @@ export const Default: Story = {
23
23
  onPagination: (node) => {
24
24
  console.log(node);
25
25
  },
26
+ expandedNodes: ['/MOD100111111','/MOD1001/MOD1024'],
27
+ onExpand: (isExpand, node) => {
28
+ console.log(isExpand, node);
29
+ },
26
30
  select: 'radio',
27
31
  onChange: (e: any, node: any) => {
28
32
  e.preventDefault();
29
33
  e.stopPropagation();
30
-
31
- console.log(node, '------------', e.target.value);
32
34
  },
33
- selected: ['MOD1003'],
35
+ selected: ['/MOD1001/MOD1002/MOD10031111'],
34
36
  treeData,
35
37
  columnsData: [
36
38
  {
@@ -47,15 +49,18 @@ export const Default: Story = {
47
49
  <Icon hoverEffect name="more" />,
48
50
  ];
49
51
  },
52
+ isTree: true,
53
+ defaultValue: 'Project name',
54
+ defaultActions: () => [],
50
55
  },
51
56
 
52
57
  {
53
58
  name: 'Module Path',
54
- accessor: 'path',
59
+ accessor: 'searchKey',
55
60
  width: '200px',
56
61
  isClickable: true,
57
62
  },
58
-
63
+
59
64
  {
60
65
  name: 'Module Path',
61
66
  accessor: 'path',