pixel-react 1.7.8 → 1.8.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 (99) hide show
  1. package/lib/components/AllProjectsDropdown/types.d.ts +2 -0
  2. package/lib/components/Button/Button.d.ts +2 -2
  3. package/lib/components/Button/types.d.ts +17 -0
  4. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  5. package/lib/components/Charts/MultiRadialChart/types.d.ts +3 -0
  6. package/lib/components/ChooseFile/ChooseFile.d.ts +3 -0
  7. package/lib/components/ChooseFile/types.d.ts +68 -0
  8. package/lib/components/ConnectingBranch/ConnectingBranch.d.ts +2 -1
  9. package/lib/components/ConnectingBranch/data.d.ts +19 -33
  10. package/lib/components/ConnectingBranch/types.d.ts +10 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +7 -1
  12. package/lib/components/LabelEditTextField/types.d.ts +2 -0
  13. package/lib/components/MachineInputField/MachineInputField.d.ts +4 -1
  14. package/lib/components/Select/types.d.ts +1 -1
  15. package/lib/components/StatusCard/types.d.ts +2 -0
  16. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  17. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  18. package/lib/components/TableTree/data.d.ts +74 -0
  19. package/lib/components/TableTree/types.d.ts +4 -0
  20. package/lib/components/TextArea/Textarea.d.ts +1 -1
  21. package/lib/components/TextArea/Types.d.ts +1 -0
  22. package/lib/index.d.ts +176 -63
  23. package/lib/index.esm.js +458 -273
  24. package/lib/index.esm.js.map +1 -1
  25. package/lib/index.js +458 -272
  26. package/lib/index.js.map +1 -1
  27. package/lib/tsconfig.tsbuildinfo +1 -1
  28. package/lib/utils/validateFile/validateFile.d.ts +2 -0
  29. package/package.json +2 -2
  30. package/src/assets/Themes/BaseTheme.scss +1 -0
  31. package/src/assets/Themes/BlueTheme.scss +44 -44
  32. package/src/assets/Themes/DarkTheme.scss +1 -0
  33. package/src/assets/icons/failed_status_icon.svg +1 -1
  34. package/src/assets/icons/flaky_status_icon.svg +1 -1
  35. package/src/assets/icons/settings.svg +3 -0
  36. package/src/assets/icons/skipped_status_icon.svg +1 -1
  37. package/src/assets/icons/warning_status_icon.svg +1 -1
  38. package/src/components/AllProjectsDropdown/types.ts +2 -0
  39. package/src/components/AppHeader/AppHeader.scss +6 -2
  40. package/src/components/Button/Button.scss +12 -0
  41. package/src/components/Button/Button.tsx +29 -11
  42. package/src/components/Button/types.ts +21 -0
  43. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +83 -30
  44. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +3 -0
  45. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +39 -16
  46. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  47. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -1
  48. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +2 -1
  49. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +18 -4
  50. package/src/components/Charts/MultiRadialChart/types.ts +4 -1
  51. package/src/components/ChooseFile/ChooseFile.stories.tsx +190 -0
  52. package/src/components/ChooseFile/ChooseFile.tsx +46 -0
  53. package/src/components/ChooseFile/types.ts +78 -0
  54. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +94 -79
  55. package/src/components/ConnectingBranch/ConnectingBranch.scss +183 -195
  56. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +33 -1
  57. package/src/components/ConnectingBranch/ConnectingBranch.tsx +121 -107
  58. package/src/components/ConnectingBranch/{data.ts → data.tsx} +106 -17
  59. package/src/components/ConnectingBranch/types.ts +21 -0
  60. package/src/components/Excel/ExcelFile/ExcelFile.tsx +1 -1
  61. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +13 -8
  62. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +6 -1
  63. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +30 -11
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +65 -19
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +14 -0
  66. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +16 -0
  67. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +6 -5
  68. package/src/components/Icon/iconList.ts +2 -0
  69. package/src/components/InputWithDropdown/InputWithDropdown.tsx +1 -1
  70. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +8 -3
  71. package/src/components/LabelEditTextField/LabelEditTextField.tsx +28 -11
  72. package/src/components/LabelEditTextField/types.ts +2 -0
  73. package/src/components/MachineInputField/MachineInputField.tsx +67 -70
  74. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +1 -1
  75. package/src/components/Select/Select.tsx +4 -4
  76. package/src/components/Select/types.ts +1 -1
  77. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +1 -0
  78. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +2 -8
  79. package/src/components/StatusCard/StatusCard.scss +2 -1
  80. package/src/components/StatusCard/StatusCard.stories.tsx +59 -1
  81. package/src/components/StatusCard/StatusCard.tsx +10 -2
  82. package/src/components/StatusCard/types.ts +2 -0
  83. package/src/components/TableTree/Components/TableBody.tsx +19 -15
  84. package/src/components/TableTree/Components/TableCell.tsx +47 -31
  85. package/src/components/TableTree/Components/TableRow.tsx +4 -0
  86. package/src/components/TableTree/TableTree.scss +122 -109
  87. package/src/components/TableTree/data.ts +16 -1
  88. package/src/components/TableTree/types.ts +4 -0
  89. package/src/components/TextArea/Textarea.tsx +2 -0
  90. package/src/components/TextArea/Types.ts +3 -0
  91. package/src/index.ts +3 -0
  92. package/src/utils/validateFile/validateFile.stories.tsx +49 -0
  93. package/src/utils/validateFile/validateFile.ts +39 -0
  94. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +0 -51
  95. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +0 -107
  96. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +0 -5
  97. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +0 -31
  98. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +0 -85
  99. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +0 -4
@@ -1,233 +1,221 @@
1
- .ff-grid-container {
2
- display: grid;
3
- grid-template-columns: 1fr 4fr 1fr 6fr;
4
- padding: 24px 0;
5
- grid-auto-rows: auto;
6
-
7
- .ff-selectedMachines {
8
- display: contents;
9
- }
10
-
11
- .ff-selectedMachines-input {
12
- grid-column: 2 / 3;
1
+ .connecting-branch-container {
2
+ .ff-connecting-branch-grid-container {
13
3
  display: grid;
14
- }
15
-
16
- .ff-input-box-container {
17
- border: 1px solid var(--description-text); //Todo: will remove once components integrate
18
- width: 100%;
19
- height: 32px;
20
- }
4
+ grid-template-columns:
5
+ minmax(100px, 0.5fr) minmax(240px, 1.5fr) minmax(130px, 0.8fr)
6
+ 5fr;
7
+ grid-auto-rows: auto;
21
8
 
22
- .ff-machine-instance-row {
23
- display: contents;
24
- }
25
-
26
- .ff-selectedMachines-connecting-line {
27
- grid-column: 3 / 4;
28
- position: relative;
29
-
30
- .ff-line {
31
- position: absolute;
32
- height: 1px;
33
- background-color: var(--brand-color);
34
- display: flex;
35
- align-items: center;
36
- justify-content: space-between;
37
- width: 100%;
9
+ .ff-selectedMachines {
10
+ display: contents;
38
11
  }
39
12
 
40
- .ff-left-icon {
41
- height: 8px;
42
- width: 8px;
43
- background-color: var(--brand-color);
44
- border-radius: 50%;
45
- margin-right: 5px;
13
+ .ff-selectedMachines-input {
14
+ grid-column: 2 / 3;
15
+ display: grid;
46
16
  }
47
17
 
48
- .ff-selectedMachines-connecting-line-text {
49
- position: absolute;
50
- top: -10px;
51
- left: 50%;
52
- transform: translateX(-50%);
53
- background-color: var(--brand-color);
54
- color: var(--tooltip-text-color);
55
- padding: 4px;
56
- border-radius: 12px;
57
- text-align: center;
18
+ .ff-input-box-container {
19
+ margin-bottom: 24px;
20
+ width: 100%;
58
21
  }
59
22
 
60
- .ff-right-icon {
61
- width: 0;
62
- height: 0;
63
- border-top: 4px solid transparent;
64
- border-bottom: 4px solid transparent;
65
- border-left: 8px solid var(--brand-color);
66
- margin-left: 84px;
67
- bottom: -4px;
23
+ .ff-machine-instance-row {
24
+ display: contents;
68
25
  }
69
26
 
70
- &.ff-second-line {
27
+ .ff-selectedMachines-connecting-line {
28
+ grid-column: 3 / 4;
71
29
  position: relative;
72
- margin-left: 20px;
73
- }
74
- .ff-vertical-line {
75
- position: absolute;
76
- left: 22px;
77
- top: 0;
78
- width: 1px;
79
- height: auto;
80
- background-color: var(--brand-color);
81
- }
82
- }
83
30
 
84
- .ff-machine-instance {
85
- grid-column: 4 / 5;
31
+ .ff-line {
32
+ position: absolute;
33
+ height: 1px;
34
+ background-color: var(--brand-color);
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: space-between;
38
+ width: 100%;
39
+ }
86
40
 
87
- .ff-add-browser-device {
88
- margin-bottom: 16px;
89
- }
90
- }
41
+ .ff-left-icon {
42
+ height: 8px;
43
+ width: 8px;
44
+ background-color: var(--brand-color);
45
+ border-radius: 50%;
46
+ margin-right: 5px;
47
+ }
91
48
 
92
- .ff-selectedMachines-connecting-line {
93
- margin-top: 20px;
94
- }
49
+ .ff-selectedMachines-connecting-line-text {
50
+ position: absolute;
51
+ top: -10px;
52
+ left: 50%;
53
+ transform: translateX(-50%);
54
+ background-color: var(--brand-color);
55
+ color: var(--tooltip-text-color);
56
+ padding: 4px;
57
+ border-radius: 12px;
58
+ text-align: center;
59
+ }
95
60
 
96
- .ff-selectedMachines-connecting-line.ff-no-instance-line {
97
- margin-top: 20px;
98
- }
61
+ .ff-right-icon {
62
+ width: 0;
63
+ height: 0;
64
+ border-top: 4px solid transparent;
65
+ border-bottom: 4px solid transparent;
66
+ border-left: 8px solid var(--brand-color);
67
+ margin-left: 84px;
68
+ bottom: -4px;
69
+ }
99
70
 
100
- .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
101
- width: 100%;
102
- background-color: var(--brand-color);
103
- height: 1px;
104
- position: relative;
105
- }
71
+ &.ff-second-line {
72
+ position: relative;
73
+ margin-left: 20px;
74
+ }
75
+ .ff-vertical-line {
76
+ position: absolute;
77
+ left: 24px;
78
+ top: 0;
79
+ width: 1px;
80
+ height: auto;
81
+ background-color: var(--brand-color);
82
+ }
83
+ }
106
84
 
107
- .ff-selectedMachines-connecting-line.ff-no-instance-line
108
- .ff-selectedMachines-connecting-line-text {
109
- position: absolute;
110
- top: -10px;
111
- left: 50%;
112
- transform: translateX(-50%);
113
- background-color: var(--brand-color);
114
- color: var(--tooltip-text-color);
115
- font-weight: bold;
116
- font-size: 8px;
117
- padding: 4px;
118
- border-radius: 12px;
119
- text-align: center;
120
- }
85
+ .ff-machine-instance {
86
+ grid-column: 4 / 5;
87
+ }
88
+ .ff-machine-env-button {
89
+ padding: 4px 0;
90
+ margin-bottom: 16px;
91
+ }
92
+ .ff-selectedMachines-connecting-line {
93
+ margin-top: 16px;
94
+ }
121
95
 
122
- .ff-run-level-execution-dataset p {
123
- margin: 0;
124
- font-size: 12px;
125
- }
96
+ .ff-selectedMachines-connecting-line.ff-no-instance-line {
97
+ margin-top: 16px;
98
+ }
126
99
 
127
- .ff-run-level-execution-dataset {
128
- min-height: 70px;
129
- max-width: 600px;
130
- border: 1px solid var(--description-text); //Todo: will remove once components integrate
131
- margin-bottom: 8px;
132
- border-radius: 4px;
133
- margin-bottom: 16px;
134
- position: relative;
135
-
136
- .ff-curved-connector {
137
- position: absolute;
138
- left: -12%;
139
- transform: translateX(-50%);
140
- width: 40px;
141
- height: 0;
142
-
143
- .ff-curve {
144
- position: relative;
145
- width: 88px;
100
+ .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {
101
+ width: 100%;
102
+ background-color: var(--brand-color);
103
+ height: 1px;
104
+ position: relative;
105
+ }
106
+
107
+ .ff-run-level-execution-dataset {
108
+ height: 66px;
109
+ margin-bottom: 8px;
110
+ border-radius: 4px;
111
+ margin-bottom: 16px;
112
+ position: relative;
113
+
114
+ .ff-curved-connector {
115
+ position: absolute;
116
+ left: -70px;
117
+ transform: translateX(-50%);
118
+ width: 40px;
146
119
  height: 0;
147
- border: 1px dashed var(--brand-color);
148
- border-top: none;
149
- border-right: none;
150
- border-bottom-left-radius: 8px;
151
- display: flex;
152
- flex-direction: column-reverse;
153
120
 
154
- .ff-curve-right-icon {
155
- width: 0;
121
+ .ff-curve {
122
+ position: relative;
123
+ width: 80px;
156
124
  height: 0;
157
- border-top: 4px solid transparent;
158
- border-bottom: 4px solid transparent;
159
- border-left: 8px solid var(--brand-color);
160
- margin-left: 84px;
161
- position: absolute;
162
- bottom: -4px;
125
+ border: 1px dashed var(--brand-color);
126
+ border-top: none;
127
+ border-right: none;
128
+ border-bottom-left-radius: 8px;
129
+ display: flex;
130
+ flex-direction: column-reverse;
131
+
132
+ .ff-curve-right-icon {
133
+ width: 0;
134
+ height: 0;
135
+ border-top: 4px solid transparent;
136
+ border-bottom: 4px solid transparent;
137
+ border-left: 8px solid var(--brand-color);
138
+ margin-left: 81px;
139
+ position: absolute;
140
+ bottom: -4px;
141
+ }
142
+
143
+ .ff-selectedMachines-connecting-line-text {
144
+ position: absolute;
145
+ left: 50%;
146
+ top: 75px;
147
+ transform: translateX(-50%);
148
+ background-color: var(--brand-color);
149
+ color: var(--tooltip-text-color);
150
+ font-weight: 400;
151
+ font-size: 8px;
152
+ padding: 4px;
153
+ border-radius: 12px;
154
+ text-align: center;
155
+ width: 44px;
156
+ }
163
157
  }
164
158
 
165
- .ff-selectedMachines-connecting-line-text {
166
- position: absolute;
167
- left: 50%;
168
- top: 85px;
169
- transform: translateX(-50%);
170
- background-color: var(--brand-color);
171
- color: var(--tooltip-text-color);
172
- font-weight: 400;
173
- font-size: 8px;
174
- padding: 4px;
175
- border-radius: 12px;
176
- text-align: center;
177
- width: 44px;
159
+ .ff-connector-0 {
160
+ border: none;
161
+ bottom: 3px;
178
162
  }
179
- }
180
-
181
- .ff-connector-0 {
182
- bottom: 8px;
183
- border: none;
184
- }
185
163
 
186
- .ff-curve-right-icon-0 {
187
- display: none;
164
+ .ff-curve-right-icon-0 {
165
+ display: none;
166
+ }
188
167
  }
189
168
  }
190
- }
191
-
192
- .ff-select-machine-input {
193
- grid-column: 2 / 3;
194
169
 
195
- input {
196
- width: 430px;
197
- height: 32px;
170
+ .ff-select-machine-input {
171
+ grid-column: 2 / 3;
198
172
  }
199
- }
200
173
 
201
- .ff-grid-item.ff-dynamic-item {
202
- grid-column: 1;
203
- display: flex;
204
- align-items: center;
205
- justify-content: center;
206
- position: relative;
207
- place-self: first baseline;
208
- top: 1px;
209
- left: 20px;
210
- }
174
+ .ff-grid-item.ff-dynamic-item {
175
+ grid-column: 1;
176
+ display: flex;
177
+ align-items: center;
178
+ justify-content: center;
179
+ position: relative;
180
+ place-self: first baseline;
181
+ top: 1px;
182
+ left: 20px;
183
+ }
211
184
 
212
- .ff-script-count-container {
213
- grid-column: 1;
214
- align-self: center;
215
- background-color: var(--brand-color);
216
- color: var(--tooltip-text-color);
217
- text-align: center;
218
- border-radius: 4px;
219
- display: flex;
220
- justify-content: center;
221
- align-items: center;
222
- padding: 4px;
223
-
224
- .ff-script-count-box {
185
+ .ff-script-count-container {
186
+ grid-column: 1;
187
+ align-self: center;
188
+ background-color: var(--brand-color);
189
+ color: var(--tooltip-text-color);
190
+ text-align: center;
191
+ border-radius: 4px;
225
192
  display: flex;
226
- flex-direction: column;
227
193
  justify-content: center;
228
194
  align-items: center;
229
- width: 100%;
230
- height: 100%;
195
+ padding: 4px;
196
+
197
+ .ff-script-count-box {
198
+ display: flex;
199
+ flex-direction: column;
200
+ justify-content: center;
201
+ align-items: center;
202
+ width: 100%;
203
+ height: 100%;
204
+ }
231
205
  }
232
206
  }
233
207
  }
208
+ // Styles for stories
209
+ .ff-parent-node-container {
210
+ border: 1px solid green;
211
+ height: 30px;
212
+ border-radius: 10px;
213
+ padding: 2px;
214
+ }
215
+ .ff-child-node-container {
216
+ border: 1px solid red;
217
+ height: 40px;
218
+ width: 300px;
219
+ border-radius: 10px;
220
+ padding: 8px;
221
+ }
@@ -1,6 +1,9 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import ConnectingBranch from './ConnectingBranch';
3
4
  import machineData from './data';
5
+ import Button from '../Button/Button';
6
+
4
7
  const meta: Meta<typeof ConnectingBranch> = {
5
8
  title: 'Components/ConnectingBranch',
6
9
  component: ConnectingBranch,
@@ -14,8 +17,37 @@ export default meta;
14
17
 
15
18
  type Story = StoryObj<typeof ConnectingBranch>;
16
19
 
20
+ const getChildNodeComponent = (isButton: boolean) => {
21
+ if (isButton) {
22
+ return (
23
+ <div>
24
+ {' '}
25
+ <Button variant="primary" label="Add execution Env" />
26
+ </div>
27
+ );
28
+ } else {
29
+ return (
30
+ <div className="ff-child-node-container"> Execution Env details</div>
31
+ );
32
+ }
33
+ };
34
+
35
+ const getParentNodeComponentActionItems = () => {
36
+ return <div> Machine Action Items</div>;
37
+ };
38
+
39
+ const getParentNodeComponent = (isMultiSelect: boolean) => (
40
+ <div className="ff-parent-node-container">
41
+ {' '}
42
+ {isMultiSelect ? 'MultiSelect' : 'Select'} DropDown
43
+ </div>
44
+ );
45
+
17
46
  export const Default: Story = {
18
47
  args: {
19
- machineData,
48
+ data: machineData,
49
+ getParentNodeComponent,
50
+ getParentNodeComponentActionItems,
51
+ getChildNodeComponent,
20
52
  },
21
53
  };