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,4 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
+ import { DynamicObj } from '../CreateVariable/types';
2
3
 
3
4
  export interface ButtonProps {
4
5
  /**
@@ -66,4 +67,24 @@ export interface ButtonProps {
66
67
  * form to accept form id in string
67
68
  */
68
69
  form?: string;
70
+
71
+ /**
72
+ * Is the Type ChooseFile for the button
73
+ */
74
+ isChooseFile?: boolean;
75
+
76
+ /**
77
+ * Custom Width for the button
78
+ */
79
+ buttonWidth?: string;
80
+
81
+ /**
82
+ * selectedfile object will be send.
83
+ */
84
+ selectedFile?: File | DynamicObj | null;
85
+
86
+ /**
87
+ * handleCloseIcon function will set to the initial state .
88
+ */
89
+ handleCloseIcon?: () => void;
69
90
  }
@@ -18,14 +18,15 @@
18
18
 
19
19
  .ff-dashboard-donut-chart-svg-container {
20
20
  text-align: center;
21
+
21
22
  svg {
22
23
  display: block;
24
+
23
25
  text:nth-of-type(1) {
24
- @extend .font2Xl;
25
26
  font-weight: 600;
26
27
  }
28
+
27
29
  text:nth-of-type(2) {
28
- @extend .fontMd;
29
30
  font-weight: 500;
30
31
  }
31
32
  }
@@ -40,28 +41,95 @@
40
41
  }
41
42
  }
42
43
 
44
+ @mixin ff-legend-item-styles {
45
+ box-sizing: border-box;
46
+ display: flex;
47
+ flex-direction: column;
48
+ align-items: center;
49
+ flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
50
+
51
+ .ff-legend-value {
52
+ white-space: nowrap;
53
+ }
54
+ }
55
+
56
+ @mixin ff-side-legend-styles {
57
+ flex-direction: column;
58
+ flex-wrap: wrap;
59
+ height: 200px;
60
+ width: auto;
61
+ justify-content: center;
62
+
63
+ .ff-legend-item {
64
+ flex: 0 0 auto !important;
65
+ width: 100%;
66
+ justify-content: center;
67
+ }
68
+ }
69
+
43
70
  .ff-legend-container {
44
- display: grid;
45
- grid-auto-rows: 1fr;
71
+ display: flex;
72
+ flex-wrap: wrap;
73
+ width: 100%;
74
+ gap: var(--donut-legend-gap, 5px); // Dynamic gap support with fallback
75
+
76
+ .ff-legend-item {
77
+ @include ff-legend-item-styles;
78
+ }
79
+
80
+ &.ff-count-2,
81
+ &.ff-count-4 {
82
+ .ff-legend-item {
83
+ flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
84
+ }
85
+ }
46
86
 
47
- &.ff-number-legend {
48
- grid-template-columns: repeat(3, 100px);
87
+ &.ff-count-5 {
88
+ .ff-legend-item:nth-child(-n + 3) {
89
+ flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
90
+ }
49
91
 
50
- &.ff-side-legend {
51
- grid-template-columns: repeat(2, 100px);
92
+ .ff-legend-item:nth-child(n + 4) {
93
+ flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));
52
94
  }
95
+ }
96
+
97
+ &.ff-count-3,
98
+ &.ff-count-6,
99
+ &.ff-count-more {
53
100
  .ff-legend-item {
54
- display: flex;
55
- flex-direction: column;
56
- align-items: center;
101
+ flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));
102
+ }
103
+ }
104
+
105
+ &.ff-side-legend {
106
+ @include ff-side-legend-styles;
107
+
108
+ &.ff-count-2,
109
+ &.ff-count-4 {
110
+ .ff-legend-item {
111
+ height: calc(50% - var(--donut-legend-gap, 5px));
112
+ }
113
+ }
114
+
115
+ &.ff-count-3,
116
+ &.ff-count-5,
117
+ &.ff-count-6,
118
+ &.ff-count-more {
119
+ .ff-legend-item {
120
+ height: calc(33.33% - var(--donut-legend-gap, 5px));
121
+ }
57
122
  }
58
123
  }
59
124
 
60
125
  &.ff-pill-legend {
61
- grid-template-columns: repeat(2, 130px);
126
+ display: grid;
127
+ grid-template-columns: repeat(2, 1fr);
128
+ gap: var(--donut-legend-gap, 5px);
62
129
 
63
130
  .ff-legend-item {
64
131
  display: flex;
132
+ flex-direction: row;
65
133
  align-items: center;
66
134
 
67
135
  .ff-legend-capsule {
@@ -80,22 +148,6 @@
80
148
  }
81
149
  }
82
150
  }
83
-
84
- &.ff-memory-legend {
85
- grid-template-columns: repeat(3, 100px);
86
-
87
- &.ff-side-legend {
88
- grid-template-columns: repeat(2, 100px);
89
- }
90
-
91
- .ff-legend-item {
92
- box-sizing: border-box;
93
- display: flex;
94
- flex-direction: column;
95
- align-items: center;
96
- width: 100%;
97
- }
98
- }
99
151
  }
100
152
 
101
153
  .ff-legend-table-wrapper {
@@ -112,9 +164,9 @@
112
164
  text-align: left;
113
165
 
114
166
  .ff-legend-table-thead {
115
- position: static;
167
+ position: static;
116
168
  top: auto;
117
- }
169
+ }
118
170
  .ff-table-header {
119
171
  @extend .fontXs;
120
172
  font-weight: bold;
@@ -160,6 +212,7 @@
160
212
  gap: 5px;
161
213
  color: var(--input-hover-border-color);
162
214
  }
215
+
163
216
  .ff-legend-count {
164
217
  text-align: right;
165
218
  }
@@ -18,6 +18,7 @@ export const Default: Story = {
18
18
  radius: 70,
19
19
  lineWidth: 15,
20
20
  tableWidth: 500,
21
+ tableHeight: 190,
21
22
  legendDetailsType: 'Scripts',
22
23
  isLegendDetails: true,
23
24
  statusValues: [
@@ -25,6 +26,8 @@ export const Default: Story = {
25
26
  { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
26
27
  { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
27
28
  { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
29
+ { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
30
+ { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
28
31
  ],
29
32
  gapAngle: 0,
30
33
  legendType: 'numberLegend',
@@ -40,6 +40,7 @@ const colorMapping = [
40
40
  const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
41
41
  radius = 60,
42
42
  tableWidth,
43
+ tableHeight = 190,
43
44
  lineWidth = 15,
44
45
  statusValues = [],
45
46
  gapAngle = 0,
@@ -58,6 +59,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
58
59
  legendKeyFontSize = 12,
59
60
  labelYoffSet = -5,
60
61
  subLabelYoffSet = 20,
62
+ onSelectedStatus = (_value) => {},
61
63
  }) => {
62
64
  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
63
65
  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
@@ -142,6 +144,10 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
142
144
  });
143
145
  };
144
146
 
147
+ const handleSelectStatus = (value: string) => {
148
+ onSelectedStatus(value);
149
+ };
150
+
145
151
  const SVG_PADDING = 3;
146
152
  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
147
153
  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
@@ -172,6 +178,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
172
178
  onMouseLeave={handleMouseLeave}
173
179
  strokeOpacity={0.8}
174
180
  onMouseMove={handleMouseMove}
181
+ onClick={() => handleSelectStatus(chartItem?.key)}
175
182
  />
176
183
  </g>
177
184
  );
@@ -188,7 +195,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
188
195
  >
189
196
  <Typography fontSize={12}>
190
197
  {hoveredItemIndex !== null &&
191
- `${nonZeroValues[hoveredItemIndex]?.key}:`}
198
+ `${nonZeroValues[hoveredItemIndex]?.key} : `}
192
199
  </Typography>
193
200
  <Typography fontSize={12}>
194
201
  {hoveredItemIndex !== null &&
@@ -205,15 +212,25 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
205
212
  legendType: LegendType,
206
213
  legendPosition: string
207
214
  ) => {
215
+ const legendCount = legendData.length;
216
+ const legendCountClass =
217
+ legendCount > 6 ? 'ff-count-more' : `ff-count-${legendCount}`;
218
+ const isSideLegend =
219
+ legendPosition === 'left' || legendPosition === 'right';
220
+
208
221
  switch (legendType) {
209
- case 'numberLegend':
222
+ case 'numberLegend': {
210
223
  return (
211
224
  <div
212
- className={classNames('ff-legend-container ff-number-legend', {
213
- 'ff-side-legend':
214
- legendPosition === 'left' || legendPosition === 'right',
215
- })}
216
- style={{ gap: `${legendGap}px` }}
225
+ className={classNames(
226
+ 'ff-legend-container',
227
+ 'ff-number-legend',
228
+ legendCountClass,
229
+ { 'ff-side-legend': isSideLegend }
230
+ )}
231
+ style={
232
+ { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
233
+ }
217
234
  >
218
235
  {legendData.map((item, index) => (
219
236
  <div className="ff-legend-item" key={index}>
@@ -240,12 +257,14 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
240
257
  ))}
241
258
  </div>
242
259
  );
243
-
260
+ }
244
261
  case 'pillLegend':
245
262
  return (
246
263
  <div
247
264
  className="ff-legend-container ff-pill-legend"
248
- style={{ gap: `${legendGap}px` }}
265
+ style={
266
+ { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
267
+ }
249
268
  >
250
269
  {legendData.map((item, index) => (
251
270
  <div className="ff-legend-item" key={index}>
@@ -273,11 +292,15 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
273
292
  case 'memoryLegend':
274
293
  return (
275
294
  <div
276
- className={classNames('ff-legend-container ff-memory-legend', {
277
- 'ff-side-legend':
278
- legendPosition === 'left' || legendPosition === 'right',
279
- })}
280
- style={{ gap: `${legendGap}px` }}
295
+ className={classNames(
296
+ 'ff-legend-container',
297
+ 'ff-memory-legend',
298
+ legendCountClass,
299
+ { 'ff-side-legend': isSideLegend }
300
+ )}
301
+ style={
302
+ { '--donut-legend-gap': `${legendGap}px` } as React.CSSProperties
303
+ }
281
304
  >
282
305
  {legendData.map((item, index) => (
283
306
  <React.Fragment key={index}>
@@ -313,8 +336,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
313
336
  case 'tableLegend':
314
337
  return (
315
338
  <div className="ff-legend-table-wrapper">
316
- <table className="ff-legend-table">
317
- <thead className='ff-legend-table-thead'>
339
+ <table className="ff-legend-table" style={{ height: tableHeight }}>
340
+ <thead className="ff-legend-table-thead">
318
341
  <tr>
319
342
  <th className="ff-table-header" style={{ width: tableWidth }}>
320
343
  Name
@@ -51,8 +51,10 @@ export type DashboardDonutChartProps = {
51
51
  chartGap?: number;
52
52
  legendGap?: number;
53
53
  tableWidth?: number;
54
+ tableHeight?:number;
54
55
  legendValueFontSize?: number;
55
56
  legendKeyFontSize?: number;
56
57
  labelYoffSet?: number;
57
58
  subLabelYoffSet?: number;
59
+ onSelectedStatus?: (_value: string) => void;
58
60
  };
@@ -19,7 +19,6 @@
19
19
  font-weight: 600;
20
20
  }
21
21
  .ff-center-text {
22
- @extend .fontSm;
23
22
  color: var(--text-color);
24
23
  font-weight: 400;
25
24
  }
@@ -82,7 +82,6 @@ export const PillLegend: Story = {
82
82
  radius: 50,
83
83
  lineWidth: 4,
84
84
  labelHeading: '00 module',
85
- fontSize: 16,
86
85
  barValues: [
87
86
  {
88
87
  value: 10,
@@ -112,5 +111,7 @@ export const PillLegend: Story = {
112
111
  lineCap: 'round',
113
112
  legendType: 'pillLegend',
114
113
  isLegendDetails: true,
114
+ labelFontSize: 12,
115
+ subLabelFontSize: 8
115
116
  },
116
117
  };
@@ -30,6 +30,8 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
30
30
  labelHeading,
31
31
  legendType = 'numberLegend',
32
32
  isLegendDetails = true,
33
+ labelFontSize = 12,
34
+ subLabelFontSize = 8,
33
35
  }) => {
34
36
  const [tooltip, setTooltip] = useState<{
35
37
  visible: boolean;
@@ -53,7 +55,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
53
55
  const svgSize = 2 * (maxRadius + lineWidth);
54
56
  const reversedBarValues = [...barValues].reverse();
55
57
 
56
- const labelLines = labelHeading.split(' ');
58
+ const labelLines = labelHeading.trim().split(' ');
57
59
 
58
60
  const renderLegend = (legendData: ChartItem[], legendType: LegendType) => {
59
61
  switch (legendType) {
@@ -85,7 +87,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
85
87
  case 'pillLegend':
86
88
  return (
87
89
  <div className={`ff-legend-container ff-pill-legend`}>
88
- {legendData.map((item, index) => (
90
+ {legendData.reverse().map((item, index) => (
89
91
  <div className="ff-legend-item" key={index}>
90
92
  <span
91
93
  className="ff-legend-capsule"
@@ -178,6 +180,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
178
180
  0,
179
181
  2 * Math.PI
180
182
  );
183
+
181
184
  const foregroundArcPath = calculateArc(
182
185
  0,
183
186
  0,
@@ -238,10 +241,20 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
238
241
  const [firstWord, ...restWords] = line.split(' ');
239
242
  return (
240
243
  <tspan key={index}>
241
- <tspan x="0" dy="0" className="ff-center-first-text">
244
+ <tspan
245
+ x="0"
246
+ dy="0"
247
+ style={{ fontSize: `${labelFontSize}px` }}
248
+ className="ff-center-first-text"
249
+ >
242
250
  {firstWord}
243
251
  </tspan>
244
- <tspan x="0" dy={18} className="ff-center-text">
252
+ <tspan
253
+ x="0"
254
+ dy={18}
255
+ style={{ fontSize: `${subLabelFontSize}px` }}
256
+ className="ff-center-text"
257
+ >
245
258
  {restWords.join(' ')}
246
259
  </tspan>
247
260
  </tspan>
@@ -253,6 +266,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
253
266
  x="0"
254
267
  dy={index === 0 ? 0 : 18}
255
268
  className="ff-center-text"
269
+ style={{ fontSize: `${subLabelFontSize}px` }}
256
270
  >
257
271
  {line}
258
272
  </tspan>
@@ -15,7 +15,10 @@ export interface MultiRadialChartProps {
15
15
  lineCap: 'square' | 'round';
16
16
  barValues: BarValue[];
17
17
  legendType?: LegendType;
18
- isLegendDetails?: boolean;
18
+ isLegendDetails?: boolean;
19
+ labelFontSize?: number,
20
+ subLabelFontSize?: number
21
+ gapAngle?:number;
19
22
  }
20
23
  export interface ChartItem extends BarValue{
21
24
  label: string;
@@ -0,0 +1,190 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import React, { useEffect, useState } from 'react';
3
+ import ChooseFile from './ChooseFile';
4
+ import Drawer from '../Drawer/Drawer';
5
+ import FileDropzone from '../FileDropzone/FileDropzone';
6
+ import { RadioOption } from '../FileDropzone/types';
7
+ import { DynamicObj } from '../CreateVariable/types';
8
+ import Button from '../Button';
9
+ import ConditionalDropdown from '../ConditionalDropdown/ConditionalDropdown';
10
+
11
+ const meta: Meta<typeof ChooseFile> = {
12
+ title: 'Components/ChooseFile',
13
+ component: ChooseFile,
14
+ parameters: {
15
+ layout: 'centered',
16
+ },
17
+ tags: ['autodocs'],
18
+ };
19
+
20
+ type Story = StoryObj<typeof ChooseFile>;
21
+
22
+ const defaultArgs = {
23
+ disabled: false,
24
+ };
25
+
26
+ export const ChooseFileDisplay: Story = {
27
+ render: () => {
28
+ const [isOpen, setIsOpen] = useState(false);
29
+ const [showModal, setShowModal] = useState(false);
30
+ const [selectedRadioOption, setSelectedRadioOption] =
31
+ useState<RadioOption>();
32
+ const [selectedFile, setSelectedFile] = useState<File | DynamicObj | null>(
33
+ null
34
+ );
35
+ const [testDataSelectedFile, setTestDataSelectedFile] = useState<
36
+ DynamicObj | File | null
37
+ >(null);
38
+
39
+ const testData = [
40
+ {
41
+ _id: '1',
42
+ name: 'File1.txt',
43
+ actualPath: '/documents/File1.txt',
44
+ searchKey: 'file1',
45
+ parentId: 'root',
46
+ },
47
+ {
48
+ _id: '2',
49
+ name: 'File2.doc',
50
+ actualPath: '/documents/File2.doc',
51
+ searchKey: 'file2',
52
+ parentId: 'root',
53
+ },
54
+ {
55
+ _id: '3',
56
+ name: 'Image1.png',
57
+ actualPath: '/images/Image1.png',
58
+ searchKey: 'image1',
59
+ parentId: 'folder1',
60
+ },
61
+ {
62
+ _id: '4',
63
+ name: 'Presentation.ppt',
64
+ actualPath: '/presentations/Presentation.ppt',
65
+ searchKey: 'presentation',
66
+ parentId: 'folder2',
67
+ },
68
+ ];
69
+
70
+ const radioOptions: RadioOption[] = [
71
+ { value: 'Test Data', label: 'Test Data' },
72
+ { value: 'Local File', label: 'Local File' },
73
+ ];
74
+
75
+ const handleOptionChange = (option: RadioOption) => {
76
+ setSelectedRadioOption(option);
77
+ setShowModal(option.value === 'Test Data');
78
+ };
79
+
80
+ const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
81
+ const file = event.target.files?.[0];
82
+ setSelectedFile(file || null);
83
+ };
84
+
85
+ const handleRemoveFile = () => setSelectedFile(null);
86
+
87
+ const handleSaveButton = () => {
88
+ setSelectedFile(testDataSelectedFile);
89
+ setShowModal(false);
90
+ };
91
+
92
+ const handleCloseIcon = () => {
93
+ setSelectedFile(null);
94
+ setIsOpen(false);
95
+ };
96
+
97
+ const handleSaveChooseFile = () => {
98
+ setIsOpen(false);
99
+
100
+ };
101
+
102
+ const renderFooterButtons = (onSave: () => void, onCancel: () => void) => (
103
+ <div className="footer_basic_button">
104
+ <Button
105
+ type="button"
106
+ variant="secondary"
107
+ size="small"
108
+ onClick={onCancel}
109
+ label="Cancel"
110
+ />
111
+ <Button
112
+ type="button"
113
+ variant="primary"
114
+ size="small"
115
+ onClick={onSave}
116
+ label="Save"
117
+ />
118
+ </div>
119
+ );
120
+
121
+ useEffect(() => {
122
+ setSelectedFile(testDataSelectedFile);
123
+ }, [testDataSelectedFile]);
124
+
125
+ return (
126
+ <>
127
+ <ChooseFile
128
+ label={selectedFile?.name || 'Choose File'}
129
+ variant="secondary"
130
+ buttonWidth="308px"
131
+ isChooseFile
132
+ iconName={selectedFile?.name ? 'close' : 'attachment_icon'}
133
+ onClick={() => setIsOpen(true)}
134
+ selectedFile={selectedFile}
135
+ handleCloseIcon={handleCloseIcon}
136
+ />
137
+
138
+ <Drawer
139
+ isOpen={isOpen}
140
+ onClose={() => setIsOpen(false)}
141
+ isFooterRequired={false}
142
+ _isExpanded={false}
143
+ size="medium"
144
+ >
145
+ <FileDropzone
146
+ {...defaultArgs}
147
+ accept={[
148
+ 'image/png',
149
+ 'image/jpeg',
150
+ 'application/x-zip-compressed',
151
+ 'application/zip',
152
+ ]}
153
+ validateMIMEType
154
+ isWebServiceFileDropZone
155
+ selectedRadioOption={selectedRadioOption}
156
+ radioOptions={radioOptions}
157
+ handleOptionChange={handleOptionChange}
158
+ setSelectedFile={setSelectedFile}
159
+ selectedFile={selectedFile}
160
+ handleFileChange={handleFileChange}
161
+ handleRemoveFile={handleRemoveFile}
162
+ setShowDrawer={setShowModal}
163
+ />
164
+ {selectedRadioOption?.value === 'Test Data' && (
165
+ <Drawer
166
+ isOpen={showModal}
167
+ onClose={() => setShowModal(false)}
168
+ isFooterRequired={false}
169
+ _isExpanded={false}
170
+ size="small"
171
+ >
172
+ <ConditionalDropdown
173
+ label="Select Path Using #"
174
+ placeholder="Enter # to search files"
175
+ isHash
176
+ dataFiles={testData}
177
+ dropdownWidth="auto"
178
+ setHashInputValue={setTestDataSelectedFile}
179
+ />
180
+ {renderFooterButtons(handleSaveButton, () => setShowModal(false))}
181
+ </Drawer>
182
+ )}
183
+ {renderFooterButtons(handleSaveChooseFile, () => setIsOpen(false))}
184
+ </Drawer>
185
+ </>
186
+ );
187
+ },
188
+ };
189
+
190
+ export default meta;
@@ -0,0 +1,46 @@
1
+ import { memo, type FC } from 'react'
2
+ import { ChooseFileProps } from './types'
3
+ import Button from '../Button'
4
+
5
+ const areEqual = (prevProps: ChooseFileProps, nextProps: ChooseFileProps) =>
6
+ prevProps.selectedFile?.name === nextProps.selectedFile?.name;
7
+
8
+ const ChooseFile:FC<ChooseFileProps> = ({
9
+ variant = 'primary',
10
+ size = 'small',
11
+ onClick,
12
+ label='Choose File',
13
+ disabled = false,
14
+ type = 'button',
15
+ className = '',
16
+ style = {},
17
+ iconName,
18
+ isChooseFile=false,
19
+ buttonWidth='auto',
20
+ selectedFile = {},
21
+ handleCloseIcon,
22
+ }) => {
23
+
24
+ return (
25
+ <div>
26
+ <Button
27
+ variant={variant}
28
+ label={label}
29
+ type={type}
30
+ onClick={onClick}
31
+ buttonWidth={buttonWidth}
32
+ isChooseFile={isChooseFile}
33
+ size={size}
34
+ disabled={disabled}
35
+ className={className}
36
+ iconName={iconName}
37
+ style={style}
38
+ iconPosition='right'
39
+ selectedFile={selectedFile}
40
+ handleCloseIcon={handleCloseIcon}
41
+ />
42
+ </div>
43
+ )
44
+ }
45
+
46
+ export default memo(ChooseFile, areEqual);