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.
Files changed (92) hide show
  1. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  2. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  5. package/lib/assets/utils/functionUtils.d.ts +7 -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/DashboardDonutChart/types.d.ts +13 -3
  13. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  14. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  15. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  16. package/lib/components/Chip/types.d.ts +1 -1
  17. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  18. package/lib/components/DownloadClient/DownloadClient.d.ts +4 -0
  19. package/lib/components/DownloadClient/index.d.ts +1 -0
  20. package/lib/components/DownloadClient/type.d.ts +35 -0
  21. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  22. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  23. package/lib/components/Editor/types.d.ts +1 -1
  24. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  25. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  26. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  27. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  28. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
  29. package/lib/components/MultiSelect/MultiSelect.stories.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/Toast/types.d.ts +1 -1
  33. package/lib/components/Toastify/Toastify.d.ts +1 -0
  34. package/lib/components/Toastify/types.d.ts +1 -1
  35. package/lib/index.d.ts +73 -50
  36. package/lib/index.esm.js +255 -102
  37. package/lib/index.esm.js.map +1 -1
  38. package/lib/index.js +255 -101
  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 +1 -1
  43. package/src/assets/Themes/BaseTheme.scss +21 -4
  44. package/src/assets/Themes/DarkTheme.scss +18 -0
  45. package/src/assets/icons/Header_preset.svg +17 -12
  46. package/src/assets/icons/add_archive.svg +9 -0
  47. package/src/assets/icons/add_user.svg +9 -0
  48. package/src/assets/icons/alert.svg +17 -0
  49. package/src/assets/icons/approval_pending.svg +8 -8
  50. package/src/assets/icons/configuration.svg +3 -3
  51. package/src/assets/icons/defects.svg +8 -8
  52. package/src/assets/icons/element.svg +4 -4
  53. package/src/assets/icons/info_icon.svg +16 -3
  54. package/src/assets/icons/no_data.svg +13 -0
  55. package/src/assets/icons/project_element.svg +4 -4
  56. package/src/assets/icons/remove_user.svg +3 -0
  57. package/src/assets/icons/step_group.svg +10 -10
  58. package/src/assets/icons/variable.svg +3 -3
  59. package/src/assets/utils/functionUtils.ts +55 -1
  60. package/src/components/Accordion/Accordion.scss +3 -1
  61. package/src/components/Accordion/Accordion.tsx +17 -17
  62. package/src/components/AttachImage/AttachImage.scss +20 -17
  63. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +6 -7
  64. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +172 -29
  65. package/src/components/Charts/DashboardDonutChart/types.ts +14 -3
  66. package/src/components/Chip/Chip.scss +15 -1
  67. package/src/components/Chip/Chip.stories.tsx +30 -1
  68. package/src/components/Chip/types.ts +1 -1
  69. package/src/components/DownloadClient/DownloadClient.scss +80 -0
  70. package/src/components/DownloadClient/DownloadClient.stories.tsx +26 -0
  71. package/src/components/DownloadClient/DownloadClient.tsx +81 -0
  72. package/src/components/DownloadClient/index.ts +1 -0
  73. package/src/components/DownloadClient/type.ts +41 -0
  74. package/src/components/Editor/Editor.stories.tsx +17 -2
  75. package/src/components/Editor/VariableDropdown.scss +1 -0
  76. package/src/components/Editor/types.ts +1 -2
  77. package/src/components/FileDropzone/FileDropzone.scss +4 -3
  78. package/src/components/Form/Forms.tsx +1 -1
  79. package/src/components/Icon/iconList.ts +12 -2
  80. package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +2 -2
  81. package/src/components/IconRadioGroup/IconRadioGroup.tsx +0 -2
  82. package/src/components/StatusButton/StatusButton.scss +1 -1
  83. package/src/components/TableTree/TableTree.scss +44 -48
  84. package/src/components/TableTree/TableTree.tsx +17 -6
  85. package/src/components/Toast/Toast.stories.tsx +47 -83
  86. package/src/components/Toast/Toast.tsx +2 -1
  87. package/src/components/Toast/types.ts +1 -1
  88. package/src/components/Toastify/Toastify.stories.tsx +9 -9
  89. package/src/components/Toastify/Toastify.tsx +2 -0
  90. package/src/components/Toastify/types.ts +1 -1
  91. package/src/index.ts +2 -0
  92. /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
@@ -1,8 +1,17 @@
1
1
  import React, { useState } from 'react';
2
- import { DashboardDonutChartProps, ChartItem, LegendType } from './types';
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-skipped-text-color)',
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
- const total = statusValues?.reduce((acc, { value }) => acc + value, 0);
47
- const nonZeroValues = statusValues?.filter(({ value }) => value > 0);
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 = 4;
83
- const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
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 && nonZeroValues[hoveredItemIndex]?.value}
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 = (legendData: ChartItem[], legendType: LegendType) => {
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.value} {showUnit && unit?.toUpperCase()}
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
- {((item.value / total) * 100).toFixed(1)}
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
- {legendDetailsType}
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 x="0" y="5" textAnchor="middle" fill={colorMapping[3]}>
297
- {legendType === 'tableLegend' &&
298
- hoveredItemIndex !== null &&
299
- nonZeroValues[hoveredItemIndex]
300
- ? `${(
301
- (nonZeroValues[hoveredItemIndex].value / total) *
302
- 100
303
- ).toFixed(1)}%`
304
- : `${total} ${
305
- showUnit && unit ? `${unit.toUpperCase()}` : ''
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
- {legendType === 'tableLegend' &&
316
- hoveredItemIndex !== null &&
317
- nonZeroValues[hoveredItemIndex]
318
- ? nonZeroValues[hoveredItemIndex].key
319
- : legendDetailsType}
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: boolean;
45
+ showOnlyLabel?: boolean;
37
46
  unit?: string;
38
- showUnit: boolean;
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 default meta;
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
  };
@@ -7,6 +7,7 @@
7
7
  background-color: var(--variable-dropdown-bg);
8
8
  border: 1px solid var(--border-color);
9
9
  border-radius: 3px;
10
+ z-index: 9999;
10
11
  }
11
12
  .ff-variable-option {
12
13
  display: flex;