pixel-react 1.5.3 → 1.5.5
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.
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/assets/utils/functionUtils.d.ts +7 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +13 -3
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/DownloadClient/DownloadClient.d.ts +4 -0
- package/lib/components/DownloadClient/index.d.ts +1 -0
- package/lib/components/DownloadClient/type.d.ts +35 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Editor/types.d.ts +1 -1
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
- package/lib/components/Select/Select.stories.d.ts +1 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/components/Toast/types.d.ts +1 -1
- package/lib/components/Toastify/Toastify.d.ts +1 -0
- package/lib/components/Toastify/types.d.ts +1 -1
- package/lib/index.d.ts +73 -50
- package/lib/index.esm.js +255 -102
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +255 -101
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +21 -4
- package/src/assets/Themes/DarkTheme.scss +18 -0
- package/src/assets/icons/Header_preset.svg +17 -12
- package/src/assets/icons/add_archive.svg +9 -0
- package/src/assets/icons/add_user.svg +9 -0
- package/src/assets/icons/alert.svg +17 -0
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/info_icon.svg +16 -3
- package/src/assets/icons/no_data.svg +13 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/remove_user.svg +3 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/utils/functionUtils.ts +55 -1
- package/src/components/Accordion/Accordion.scss +3 -1
- package/src/components/Accordion/Accordion.tsx +17 -17
- package/src/components/AttachImage/AttachImage.scss +20 -17
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +6 -7
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +172 -29
- package/src/components/Charts/DashboardDonutChart/types.ts +14 -3
- package/src/components/Chip/Chip.scss +15 -1
- package/src/components/Chip/Chip.stories.tsx +30 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/DownloadClient/DownloadClient.scss +80 -0
- package/src/components/DownloadClient/DownloadClient.stories.tsx +26 -0
- package/src/components/DownloadClient/DownloadClient.tsx +81 -0
- package/src/components/DownloadClient/index.ts +1 -0
- package/src/components/DownloadClient/type.ts +41 -0
- package/src/components/Editor/Editor.stories.tsx +17 -2
- package/src/components/Editor/VariableDropdown.scss +1 -0
- package/src/components/Editor/types.ts +1 -2
- package/src/components/FileDropzone/FileDropzone.scss +4 -3
- package/src/components/Form/Forms.tsx +1 -1
- package/src/components/Icon/iconList.ts +12 -2
- package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +2 -2
- package/src/components/IconRadioGroup/IconRadioGroup.tsx +0 -2
- package/src/components/StatusButton/StatusButton.scss +1 -1
- package/src/components/TableTree/TableTree.scss +44 -48
- package/src/components/TableTree/TableTree.tsx +17 -6
- package/src/components/Toast/Toast.stories.tsx +47 -83
- package/src/components/Toast/Toast.tsx +2 -1
- package/src/components/Toast/types.ts +1 -1
- package/src/components/Toastify/Toastify.stories.tsx +9 -9
- package/src/components/Toastify/Toastify.tsx +2 -0
- package/src/components/Toastify/types.ts +1 -1
- package/src/index.ts +2 -0
- /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
@@ -1,8 +1,17 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
|
-
import {
|
2
|
+
import {
|
3
|
+
DashboardDonutChartProps,
|
4
|
+
ChartItem,
|
5
|
+
LegendType,
|
6
|
+
NormalizedChartItem,
|
7
|
+
} from './types';
|
3
8
|
import Typography from '../../Typography';
|
4
9
|
import './DashBoardDonutChart.scss';
|
5
10
|
import classNames from 'classnames';
|
11
|
+
import {
|
12
|
+
normalizeStorageValue,
|
13
|
+
formatMemoryValue,
|
14
|
+
} from '../../../assets/utils/functionUtils';
|
6
15
|
|
7
16
|
const calculateArc = (
|
8
17
|
x: number,
|
@@ -24,7 +33,7 @@ const colorMapping = [
|
|
24
33
|
'var(--status-success-text-color)',
|
25
34
|
'var(--status-rejected-text-color)',
|
26
35
|
'var(--status-warning-text-color)',
|
27
|
-
'var(--status-
|
36
|
+
'var(--status-button-text-skipped)',
|
28
37
|
'var(--brand-color)',
|
29
38
|
];
|
30
39
|
|
@@ -39,12 +48,58 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
39
48
|
showOnlyLabel = false,
|
40
49
|
unit,
|
41
50
|
showUnit = true,
|
51
|
+
labelFontSize = 24,
|
52
|
+
subLabelFontSize = 14,
|
42
53
|
}) => {
|
43
54
|
const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);
|
44
55
|
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
|
45
56
|
const [showTooltip, setShowTooltip] = useState<boolean>(false);
|
46
|
-
|
47
|
-
|
57
|
+
|
58
|
+
// Normalize data if legendType is 'memoryLegend'
|
59
|
+
const normalizedStatusValues: NormalizedChartItem[] =
|
60
|
+
legendType === 'memoryLegend'
|
61
|
+
? statusValues.map((item) => {
|
62
|
+
if (typeof item.value === 'string') {
|
63
|
+
const { normalizedValue, unit, value } = normalizeStorageValue(
|
64
|
+
item.value
|
65
|
+
);
|
66
|
+
return { ...item, normalizedValue, unit, labelValue: value };
|
67
|
+
}
|
68
|
+
return {
|
69
|
+
...item,
|
70
|
+
normalizedValue: item.value as number,
|
71
|
+
labelValue: item.value,
|
72
|
+
unit: 'B',
|
73
|
+
}; // Default to bytes
|
74
|
+
})
|
75
|
+
: statusValues.map((item) => {
|
76
|
+
if (typeof item.value === 'string') {
|
77
|
+
console.warn(
|
78
|
+
`String value "${item.value}" is not supported for legendType "${legendType}". Defaulting to 0.`
|
79
|
+
);
|
80
|
+
return { ...item, normalizedValue: 0, unit: '', labelValue: 0 };
|
81
|
+
}
|
82
|
+
return {
|
83
|
+
...item,
|
84
|
+
normalizedValue: item.value as number,
|
85
|
+
unit: '',
|
86
|
+
labelValue: item.value,
|
87
|
+
};
|
88
|
+
});
|
89
|
+
|
90
|
+
// Use normalized values for chart calculations
|
91
|
+
const chartValues = normalizedStatusValues.map((item) => ({
|
92
|
+
key: item.key,
|
93
|
+
value: item.normalizedValue ?? (item.value as number),
|
94
|
+
color: item.color,
|
95
|
+
unit: item.unit,
|
96
|
+
labelValue: item.labelValue,
|
97
|
+
}));
|
98
|
+
|
99
|
+
const total = chartValues?.reduce((acc, { value }) => acc + value, 0);
|
100
|
+
const nonZeroValues = chartValues?.filter(({ value }) => value > 0);
|
101
|
+
|
102
|
+
const totalMemory = formatMemoryValue(total);
|
48
103
|
|
49
104
|
// Calculate angles and gaps
|
50
105
|
const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
|
@@ -79,8 +134,9 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
79
134
|
});
|
80
135
|
};
|
81
136
|
|
82
|
-
const SVG_PADDING =
|
83
|
-
const DONUT_SVG_SIZE =
|
137
|
+
const SVG_PADDING = 3;
|
138
|
+
const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
|
139
|
+
const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
|
84
140
|
|
85
141
|
const renderArc = (chartItem: ChartItem, endAngle: number, i: number) => {
|
86
142
|
const isFullCircle = nonZeroValues.length === 1;
|
@@ -127,13 +183,19 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
127
183
|
`${nonZeroValues[hoveredItemIndex]?.key} : `}
|
128
184
|
</Typography>
|
129
185
|
<Typography fontSize={12}>
|
130
|
-
{hoveredItemIndex !== null &&
|
186
|
+
{hoveredItemIndex !== null &&
|
187
|
+
(legendType === 'memoryLegend'
|
188
|
+
? `${nonZeroValues[hoveredItemIndex]?.labelValue} ${nonZeroValues[hoveredItemIndex]?.unit}`
|
189
|
+
: nonZeroValues[hoveredItemIndex]?.value)}
|
131
190
|
</Typography>
|
132
191
|
</div>
|
133
192
|
);
|
134
193
|
};
|
135
194
|
|
136
|
-
const renderLegend = (
|
195
|
+
const renderLegend = (
|
196
|
+
legendData: NormalizedChartItem[],
|
197
|
+
legendType: LegendType
|
198
|
+
) => {
|
137
199
|
switch (legendType) {
|
138
200
|
case 'numberLegend':
|
139
201
|
return (
|
@@ -197,7 +259,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
197
259
|
: colorMapping[index % colorMapping.length]
|
198
260
|
}
|
199
261
|
>
|
200
|
-
{item.
|
262
|
+
{item.labelValue} {item.unit}
|
201
263
|
</Typography>
|
202
264
|
<Typography className="ff-legend-key">{item.key}</Typography>
|
203
265
|
</div>
|
@@ -239,7 +301,9 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
239
301
|
<Typography fontSize={10}>{item.key}</Typography>
|
240
302
|
</td>
|
241
303
|
<td className="ff-legend-percentage">
|
242
|
-
{
|
304
|
+
{typeof item.value === 'string'
|
305
|
+
? ((parseFloat(item.value) / total) * 100).toFixed(1)
|
306
|
+
: ((item.value / total) * 100).toFixed(1)}
|
243
307
|
</td>
|
244
308
|
<td className="ff-legend-count">{item.value}</td>
|
245
309
|
</tr>
|
@@ -254,6 +318,45 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
254
318
|
}
|
255
319
|
};
|
256
320
|
|
321
|
+
function wrapText(
|
322
|
+
text: string,
|
323
|
+
maxWidth: number,
|
324
|
+
fontSize: number
|
325
|
+
): string[] {
|
326
|
+
const words: string[] = text.split(' ');
|
327
|
+
const lines: string[] = [];
|
328
|
+
let currentLine: string = '';
|
329
|
+
|
330
|
+
words.forEach((word) => {
|
331
|
+
const testLine = currentLine ? `${currentLine} ${word}` : word;
|
332
|
+
|
333
|
+
if (measureTextWidth(testLine, fontSize) <= maxWidth) {
|
334
|
+
currentLine = testLine;
|
335
|
+
} else {
|
336
|
+
if (currentLine) {
|
337
|
+
lines.push(currentLine);
|
338
|
+
}
|
339
|
+
currentLine = word;
|
340
|
+
}
|
341
|
+
});
|
342
|
+
|
343
|
+
if (currentLine) {
|
344
|
+
lines.push(currentLine);
|
345
|
+
}
|
346
|
+
|
347
|
+
return lines;
|
348
|
+
}
|
349
|
+
|
350
|
+
function measureTextWidth(text: string, fontSize: number): number {
|
351
|
+
const canvas: HTMLCanvasElement = document.createElement('canvas');
|
352
|
+
const context: CanvasRenderingContext2D | null = canvas.getContext('2d');
|
353
|
+
if (!context) {
|
354
|
+
throw new Error('Unable to get canvas context');
|
355
|
+
}
|
356
|
+
context.font = `${fontSize}px Poppins`; // Font size and family of SVG font
|
357
|
+
return context.measureText(text).width;
|
358
|
+
}
|
359
|
+
|
257
360
|
return (
|
258
361
|
<div
|
259
362
|
className={classNames('ff-dashboard-donut-chart-section', {
|
@@ -268,8 +371,8 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
268
371
|
viewBox={`0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`}
|
269
372
|
>
|
270
373
|
<g
|
271
|
-
transform={`translate(${radius + lineWidth + SVG_PADDING}, ${
|
272
|
-
radius + lineWidth + SVG_PADDING
|
374
|
+
transform={`translate(${radius + lineWidth / 2 + SVG_PADDING}, ${
|
375
|
+
radius + lineWidth / 2 + SVG_PADDING
|
273
376
|
})`}
|
274
377
|
>
|
275
378
|
{nonZeroValues?.map((status, i) => {
|
@@ -280,6 +383,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
280
383
|
|
281
384
|
return renderArc(status, endAngle, i);
|
282
385
|
})}
|
386
|
+
|
283
387
|
{showOnlyLabel ? (
|
284
388
|
<text
|
285
389
|
x="0"
|
@@ -287,23 +391,52 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
287
391
|
className="ff-svg-label-text"
|
288
392
|
textAnchor="middle"
|
289
393
|
fill={colorMapping[3]}
|
394
|
+
style={{ fontSize: `${labelFontSize}px` }}
|
290
395
|
>
|
291
|
-
{
|
396
|
+
{wrapText(
|
397
|
+
legendDetailsType,
|
398
|
+
LABEL_MAX_WIDTH,
|
399
|
+
labelFontSize
|
400
|
+
).map((line, index, lines) => (
|
401
|
+
<tspan
|
402
|
+
x="0"
|
403
|
+
dy={index === 0 ? (lines.length > 1 ? -8 : 0) : 24}
|
404
|
+
key={index}
|
405
|
+
>
|
406
|
+
{line}
|
407
|
+
</tspan>
|
408
|
+
))}
|
292
409
|
</text>
|
293
410
|
) : (
|
294
411
|
(legendType !== 'tableLegend' || hoveredItemIndex !== null) && (
|
295
412
|
<>
|
296
|
-
<text
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
413
|
+
<text
|
414
|
+
x="0"
|
415
|
+
y="5"
|
416
|
+
textAnchor="middle"
|
417
|
+
fill={colorMapping[3]}
|
418
|
+
style={{ fontSize: `${labelFontSize}px` }}
|
419
|
+
>
|
420
|
+
{wrapText(
|
421
|
+
legendType === 'tableLegend' &&
|
422
|
+
hoveredItemIndex !== null &&
|
423
|
+
nonZeroValues[hoveredItemIndex]
|
424
|
+
? `${(
|
425
|
+
(nonZeroValues[hoveredItemIndex].value / total) *
|
426
|
+
100
|
427
|
+
).toFixed(1)}%`
|
428
|
+
: legendType === 'memoryLegend'
|
429
|
+
? `${totalMemory}`
|
430
|
+
: `${total} ${
|
431
|
+
showUnit && unit ? `${unit.toUpperCase()}` : ''
|
432
|
+
}`,
|
433
|
+
LABEL_MAX_WIDTH,
|
434
|
+
labelFontSize
|
435
|
+
).map((line, index) => (
|
436
|
+
<tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
|
437
|
+
{line}
|
438
|
+
</tspan>
|
439
|
+
))}
|
307
440
|
</text>
|
308
441
|
|
309
442
|
<text
|
@@ -311,18 +444,28 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
|
|
311
444
|
y="26"
|
312
445
|
textAnchor="middle"
|
313
446
|
fill="var(--text-color)"
|
447
|
+
style={{ fontSize: `${subLabelFontSize}px` }}
|
314
448
|
>
|
315
|
-
{
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
449
|
+
{wrapText(
|
450
|
+
legendType === 'tableLegend' &&
|
451
|
+
hoveredItemIndex !== null &&
|
452
|
+
nonZeroValues[hoveredItemIndex]
|
453
|
+
? nonZeroValues[hoveredItemIndex].key
|
454
|
+
: legendDetailsType,
|
455
|
+
LABEL_MAX_WIDTH,
|
456
|
+
subLabelFontSize
|
457
|
+
).map((line, index) => (
|
458
|
+
<tspan x="0" dy={index === 0 ? 0 : 16} key={index}>
|
459
|
+
{line}
|
460
|
+
</tspan>
|
461
|
+
))}
|
320
462
|
</text>
|
321
463
|
</>
|
322
464
|
)
|
323
465
|
)}
|
324
466
|
</g>
|
325
467
|
</svg>
|
468
|
+
|
326
469
|
{legendType === 'tableLegend' && (
|
327
470
|
<div>
|
328
471
|
<Typography fontWeight="semi-bold">{legendDetailsType} </Typography>
|
@@ -15,8 +15,17 @@ export type StatusValue = {
|
|
15
15
|
|
16
16
|
export type ChartItem = {
|
17
17
|
key: string;
|
18
|
-
value: number;
|
18
|
+
value: string | number;
|
19
|
+
color?: string;
|
20
|
+
};
|
21
|
+
|
22
|
+
export type NormalizedChartItem = {
|
23
|
+
key: string;
|
24
|
+
value: number | string;
|
19
25
|
color?: string;
|
26
|
+
normalizedValue?: number;
|
27
|
+
unit?: string;
|
28
|
+
labelValue?: number;
|
20
29
|
};
|
21
30
|
|
22
31
|
export type LegendType =
|
@@ -33,7 +42,9 @@ export type DashboardDonutChartProps = {
|
|
33
42
|
isLegendDetails: boolean;
|
34
43
|
gapAngle?: number;
|
35
44
|
legendType: LegendType;
|
36
|
-
showOnlyLabel
|
45
|
+
showOnlyLabel?: boolean;
|
37
46
|
unit?: string;
|
38
|
-
showUnit
|
47
|
+
showUnit?: boolean;
|
48
|
+
labelFontSize?: number;
|
49
|
+
subLabelFontSize?: number;
|
39
50
|
};
|
@@ -48,7 +48,6 @@
|
|
48
48
|
&--error {
|
49
49
|
@include chip-variant-background(var(--ff-error-light));
|
50
50
|
}
|
51
|
-
|
52
51
|
&--warning {
|
53
52
|
@include chip-variant-background(var(--ff-warning));
|
54
53
|
}
|
@@ -67,5 +66,20 @@
|
|
67
66
|
color: #fdfaff; //TODO: add color code name
|
68
67
|
}
|
69
68
|
}
|
69
|
+
&--public {
|
70
|
+
@include chip-variant-background(var(--public-chip-bg-color));
|
71
|
+
}
|
72
|
+
|
73
|
+
&--partial-public {
|
74
|
+
@include chip-variant-background(var(--partial-public-chip-bg-color));
|
75
|
+
}
|
76
|
+
|
77
|
+
&--private {
|
78
|
+
@include chip-variant-background(var(--private-chip-bg-color));
|
79
|
+
}
|
80
|
+
|
81
|
+
&--disabled {
|
82
|
+
@include chip-variant-background(var(--disabled-chip-bg-color));
|
83
|
+
}
|
70
84
|
}
|
71
85
|
}
|
@@ -85,4 +85,33 @@ export const Warning: Story = {
|
|
85
85
|
fullText: 'Sub Modules 0',
|
86
86
|
},
|
87
87
|
};
|
88
|
-
export
|
88
|
+
export const Public: Story = {
|
89
|
+
args: {
|
90
|
+
...defaultArgs,
|
91
|
+
variant: 'public',
|
92
|
+
fullText: 'Sub Modules 0',
|
93
|
+
},
|
94
|
+
};
|
95
|
+
export const PartialPublic: Story = {
|
96
|
+
args: {
|
97
|
+
...defaultArgs,
|
98
|
+
variant: 'partial-public',
|
99
|
+
fullText: 'Sub Modules 0',
|
100
|
+
},
|
101
|
+
};
|
102
|
+
export const Private: Story = {
|
103
|
+
args: {
|
104
|
+
...defaultArgs,
|
105
|
+
variant: 'private',
|
106
|
+
fullText: 'Sub Modules 0',
|
107
|
+
},
|
108
|
+
};
|
109
|
+
export const Disabled: Story = {
|
110
|
+
args: {
|
111
|
+
...defaultArgs,
|
112
|
+
variant: 'disabled',
|
113
|
+
fullText: 'Sub Modules 0',
|
114
|
+
},
|
115
|
+
};
|
116
|
+
|
117
|
+
export default meta;
|
@@ -10,7 +10,7 @@ export interface ChipsProps {
|
|
10
10
|
/**
|
11
11
|
* The variant of the Chip.
|
12
12
|
*/
|
13
|
-
variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom';
|
13
|
+
variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
|
14
14
|
|
15
15
|
/**
|
16
16
|
* The callback function to be executed when the Chip is clicked.
|
@@ -0,0 +1,80 @@
|
|
1
|
+
@use '../../assets/styles/colors' as *;
|
2
|
+
@use '../../assets/styles/fonts';
|
3
|
+
@use '../../assets/styles/mixins' as *;
|
4
|
+
|
5
|
+
.ff-download-client-overlay {
|
6
|
+
width: 378px;
|
7
|
+
height: 217px;
|
8
|
+
position: absolute;
|
9
|
+
@include center-content;
|
10
|
+
z-index: 9999;
|
11
|
+
|
12
|
+
.ff-download-client-container {
|
13
|
+
width: 370px;
|
14
|
+
@include center-content;
|
15
|
+
flex-direction: column;
|
16
|
+
border-radius: 8px;
|
17
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
18
|
+
border: 1px solid var(--download-client-border-color);
|
19
|
+
margin-left: 5px;
|
20
|
+
|
21
|
+
.ff-download-client-header {
|
22
|
+
width: 100%;
|
23
|
+
@include center-content;
|
24
|
+
justify-content: space-between;
|
25
|
+
padding: 7px 4px;
|
26
|
+
margin-bottom: 8px;
|
27
|
+
border-radius: 4px 4px 0 0;
|
28
|
+
background-color: var(--download-client-header-bg-color);
|
29
|
+
box-sizing: border-box;
|
30
|
+
|
31
|
+
.ff-header-arrow {
|
32
|
+
content: "";
|
33
|
+
display: block;
|
34
|
+
position: absolute;
|
35
|
+
top: 10px;
|
36
|
+
right: 70px;
|
37
|
+
width: 10px;
|
38
|
+
height: 10px;
|
39
|
+
background-color: var(--download-client-icon-container-bg-color) ;
|
40
|
+
transform: translateY(-50%) rotate(-45deg);
|
41
|
+
z-index: -999;
|
42
|
+
border: 1px solid var(--download-client-header-bg-color);
|
43
|
+
}
|
44
|
+
|
45
|
+
}
|
46
|
+
|
47
|
+
.ff-download-client-content {
|
48
|
+
width: 100%;
|
49
|
+
@include center-content;
|
50
|
+
flex-direction: column;
|
51
|
+
padding-left: 8px;
|
52
|
+
padding-right: 24px;
|
53
|
+
gap: 8px;
|
54
|
+
margin-bottom: 8px;
|
55
|
+
color: var(--popup-text-color);
|
56
|
+
.ff-download-install,
|
57
|
+
.ff-choose-os {
|
58
|
+
padding: 4px 0;
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
.ff-download-client-actions {
|
63
|
+
width: 240px;
|
64
|
+
@include center-content;
|
65
|
+
gap: 12px;
|
66
|
+
margin-bottom: 17px;
|
67
|
+
.ff-icons-container {
|
68
|
+
@include center-content;
|
69
|
+
width: 64px;
|
70
|
+
height: 64px;
|
71
|
+
border-radius: 8px;
|
72
|
+
border: 1px solid var(--download-client-icon-container-border-color);
|
73
|
+
background-color: var(--download-client-icon-container-bg-color);
|
74
|
+
cursor: pointer;
|
75
|
+
box-shadow: 0px 0px 10px 0px
|
76
|
+
var(--download-client-icon-container-box-shadow-color);
|
77
|
+
}
|
78
|
+
}
|
79
|
+
}
|
80
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import DownloadClient from './DownloadClient';
|
3
|
+
|
4
|
+
const meta: Meta<typeof DownloadClient> = {
|
5
|
+
title: 'Components/DownloadClient',
|
6
|
+
component: DownloadClient,
|
7
|
+
parameters: {
|
8
|
+
layout: 'centered',
|
9
|
+
},
|
10
|
+
tags: ['autodocs'],
|
11
|
+
};
|
12
|
+
|
13
|
+
type Story = StoryObj<typeof DownloadClient>;
|
14
|
+
|
15
|
+
export const Default: Story = {
|
16
|
+
args: {
|
17
|
+
onClose: () =>{},
|
18
|
+
onClickWindows: () =>{},
|
19
|
+
onClickLinux: () =>{},
|
20
|
+
onClickMac: () =>{},
|
21
|
+
top: '100px',
|
22
|
+
left: '50px',
|
23
|
+
},
|
24
|
+
};
|
25
|
+
|
26
|
+
export default meta;
|
@@ -0,0 +1,81 @@
|
|
1
|
+
import { useEffect } from 'react';
|
2
|
+
import './DownloadClient.scss';
|
3
|
+
import Icon from '../Icon';
|
4
|
+
import Typography from '../Typography';
|
5
|
+
import { DownloadClientProps } from './type';
|
6
|
+
|
7
|
+
const DownloadClient: React.FC<DownloadClientProps> = ({
|
8
|
+
onClose,
|
9
|
+
onClickWindows,
|
10
|
+
onClickLinux,
|
11
|
+
onClickMac,
|
12
|
+
top = '10px',
|
13
|
+
left = '10px',
|
14
|
+
}) => {
|
15
|
+
const title = 'Download Client';
|
16
|
+
const description =
|
17
|
+
'Download and Install the fireflink client to run the script';
|
18
|
+
const chooseOSText = 'Choose OS';
|
19
|
+
|
20
|
+
useEffect(() => {
|
21
|
+
const handleCloseDownloadClient = (event: KeyboardEvent) => {
|
22
|
+
if (event.key === 'Escape') {
|
23
|
+
onClose?.();
|
24
|
+
}
|
25
|
+
};
|
26
|
+
document.addEventListener('keydown', handleCloseDownloadClient);
|
27
|
+
return () => {
|
28
|
+
document.removeEventListener('keydown', handleCloseDownloadClient);
|
29
|
+
};
|
30
|
+
}, [onClose]);
|
31
|
+
|
32
|
+
return (
|
33
|
+
<div className="ff-download-client-overlay" style={{ top, left }}>
|
34
|
+
<div className="ff-download-client-container">
|
35
|
+
<div className="ff-download-client-header">
|
36
|
+
<div className="ff-header-arrow"></div>
|
37
|
+
<Typography
|
38
|
+
color="var(--table-header-text-color)"
|
39
|
+
fontWeight="semi-bold"
|
40
|
+
>
|
41
|
+
{title}
|
42
|
+
</Typography>
|
43
|
+
<div onClick={onClose}>
|
44
|
+
<Icon name="close" width={12} height={12} />
|
45
|
+
</div>
|
46
|
+
</div>
|
47
|
+
<div className="ff-download-client-content">
|
48
|
+
<div className="ff-download-install">
|
49
|
+
<Typography
|
50
|
+
fontWeight="semi-bold"
|
51
|
+
color="var(--download-client-content-text-color)"
|
52
|
+
>
|
53
|
+
{description}
|
54
|
+
</Typography>
|
55
|
+
</div>
|
56
|
+
<div className="ff-choose-os">
|
57
|
+
<Typography
|
58
|
+
fontWeight="semi-bold"
|
59
|
+
color="var(--download-client-choose-os-text-color)"
|
60
|
+
>
|
61
|
+
{chooseOSText}
|
62
|
+
</Typography>
|
63
|
+
</div>
|
64
|
+
</div>
|
65
|
+
<div className="ff-download-client-actions">
|
66
|
+
<div className="ff-icons-container" onClick={onClickWindows}>
|
67
|
+
<Icon name="windows" width={32} height={38} />
|
68
|
+
</div>
|
69
|
+
<div className="ff-icons-container" onClick={onClickLinux}>
|
70
|
+
<Icon name="linux" width={32} height={38} />
|
71
|
+
</div>
|
72
|
+
<div className="ff-icons-container" onClick={onClickMac}>
|
73
|
+
<Icon name="mac_icon" width={32} height={38} />
|
74
|
+
</div>
|
75
|
+
</div>
|
76
|
+
</div>
|
77
|
+
</div>
|
78
|
+
);
|
79
|
+
};
|
80
|
+
|
81
|
+
export default DownloadClient;
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './DownloadClient';
|
@@ -0,0 +1,41 @@
|
|
1
|
+
export interface DownloadClientProps {
|
2
|
+
/**
|
3
|
+
* Title of the popup.
|
4
|
+
*/
|
5
|
+
title: string;
|
6
|
+
|
7
|
+
/**
|
8
|
+
* Description or body text of the popup.
|
9
|
+
*/
|
10
|
+
description: string;
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Callback for when the "Cancel" icon is clicked.
|
14
|
+
*/
|
15
|
+
onCancel: () => void;
|
16
|
+
|
17
|
+
/**
|
18
|
+
* Callback for when the "Download for Windows" icon is clicked.
|
19
|
+
*/
|
20
|
+
onDownloadWindows: () => void;
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Callback for when the "Download for macOS" icon is clicked.
|
24
|
+
*/
|
25
|
+
onDownloadMac: () => void;
|
26
|
+
|
27
|
+
/**
|
28
|
+
* Optional flag to control whether to display icons for download actions instead of buttons.
|
29
|
+
* Defaults to `false` for buttons.
|
30
|
+
*/
|
31
|
+
showIcons?: boolean;
|
32
|
+
}
|
33
|
+
|
34
|
+
export interface DownloadClientProps {
|
35
|
+
onClose?: () => void;
|
36
|
+
onClickWindows: () => void;
|
37
|
+
onClickLinux: () => void;
|
38
|
+
onClickMac: () => void;
|
39
|
+
top?: string;
|
40
|
+
left?: string;
|
41
|
+
}
|
@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
|
|
3
3
|
import Editor from './Editor';
|
4
4
|
import { EditorProps } from './types';
|
5
5
|
import { varibaleList } from './constants';
|
6
|
+
import { useState } from 'react';
|
6
7
|
|
7
8
|
const meta: Meta<EditorProps> = {
|
8
9
|
title: 'Components/Editor',
|
@@ -27,13 +28,27 @@ export default meta;
|
|
27
28
|
type Story = StoryObj<EditorProps>;
|
28
29
|
|
29
30
|
export const Default: Story = {
|
31
|
+
render: (args) => {
|
32
|
+
const [value, setValue] = useState('// Start typing your code here');
|
33
|
+
|
34
|
+
const handleChange = (newValue: string | undefined): void => {
|
35
|
+
setValue(newValue || '');
|
36
|
+
};
|
37
|
+
|
38
|
+
return (
|
39
|
+
<Editor
|
40
|
+
{...args}
|
41
|
+
value={value}
|
42
|
+
setValue={setValue}
|
43
|
+
handleChange={handleChange}
|
44
|
+
/>
|
45
|
+
);
|
46
|
+
},
|
30
47
|
args: {
|
31
48
|
language: 'javascript',
|
32
49
|
width: '100%',
|
33
50
|
height: '90vh',
|
34
|
-
showToolbar: false,
|
35
51
|
readOnly: false,
|
36
52
|
variableOptionsList: varibaleList,
|
37
|
-
// theme: 'vs',
|
38
53
|
},
|
39
54
|
};
|