pixel-react 1.5.6 → 1.5.8

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 (28) hide show
  1. package/.storybook/main.ts +7 -1
  2. package/lib/components/Charts/LineChart/types.d.ts +3 -0
  3. package/lib/components/LabelEditTextField/types.d.ts +5 -0
  4. package/lib/components/MiniModal/types.d.ts +9 -0
  5. package/lib/index.d.ts +17 -0
  6. package/lib/index.esm.js +169 -95
  7. package/lib/index.esm.js.map +1 -1
  8. package/lib/index.js +169 -95
  9. package/lib/index.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/assets/icons/info_user.svg +5 -0
  12. package/src/assets/icons/license_info.svg +12 -12
  13. package/src/components/Charts/LineChart/LineChart.scss +8 -7
  14. package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
  15. package/src/components/Charts/LineChart/LineChart.tsx +30 -27
  16. package/src/components/Charts/LineChart/types.ts +22 -20
  17. package/src/components/EditTextField/EditTextField.stories.tsx +1 -1
  18. package/src/components/Icon/iconList.ts +2 -0
  19. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -0
  20. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +11 -15
  21. package/src/components/LabelEditTextField/LabelEditTextField.tsx +44 -13
  22. package/src/components/LabelEditTextField/types.ts +5 -0
  23. package/src/components/MiniModal/MiniModal.scss +9 -5
  24. package/src/components/MiniModal/MiniModal.stories.tsx +28 -1
  25. package/src/components/MiniModal/MiniModal.tsx +110 -74
  26. package/src/components/MiniModal/types.ts +9 -0
  27. package/src/components/MultiSelect/MultiSelect.stories.tsx +1 -1
  28. package/src/components/MultiSelect/MultiSelect.tsx +11 -8
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react';
2
2
  import { LineChartProps } from './types';
3
3
  import './LineChart.scss';
4
+ import Typography from '../../Typography';
4
5
 
5
6
  interface HoverState {
6
7
  cursorX: number | null;
@@ -21,6 +22,9 @@ const LineChart: React.FC<LineChartProps> = ({
21
22
  xAxisColor,
22
23
  yAxisColor,
23
24
  yAxisLabelColor,
25
+ textSize,
26
+ fontWeight,
27
+ numberSize,
24
28
  }) => {
25
29
  const margin = 40;
26
30
  const xMax = width - margin * 2;
@@ -29,29 +33,25 @@ const LineChart: React.FC<LineChartProps> = ({
29
33
  const isDefaultLineChart =
30
34
  data[0]?.data[0]?.hasOwnProperty('date') &&
31
35
  data[0]?.data[0]?.hasOwnProperty('totalMemory');
32
- const xKey = isDefaultLineChart ? 'date' : 'date'; // 'date' for DefaultLineChart, 'x' for StatusLineChart
33
- const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; // 'totalMemory' for DefaultLineChart, 'y' for StatusLineChart
34
-
35
- const allZero = data.every((line) =>
36
- line.data.every((d: { [key: string]: any }) => d[yKey] === 0)
37
- );
38
-
39
- const yMaxExtended = allZero
40
- ? 4
41
- : Math.max(
42
- ...data.flatMap((line) =>
43
- line.data.map((d: { [key: string]: any }) => d[yKey])
44
- )
45
- ) + 3;
46
-
36
+ const xKey = isDefaultLineChart ? 'date' : 'date';
37
+ const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
47
38
  const xScale = (x: string) => {
48
- if (isDefaultLineChart) {
49
- return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
50
- }
51
- return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
39
+ const date = new Date(x);
40
+ const time = date.getTime();
41
+ const minDate = new Date(
42
+ Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
43
+ );
44
+ const maxDate = new Date(
45
+ Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
46
+ );
47
+
48
+ return (
49
+ ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
50
+ xMax
51
+ );
52
52
  };
53
53
 
54
- const yScale = (y: number) => yMax - (y * yMax) / yMaxExtended;
54
+ const yScale = (y: number) => yMax - (y * yMax) / 1024;
55
55
 
56
56
  const generateLinePath = (lineData: { [key: string]: any }[]) =>
57
57
  lineData.reduce((path, point, i) => {
@@ -127,11 +127,11 @@ const LineChart: React.FC<LineChartProps> = ({
127
127
  currentXValue: null,
128
128
  });
129
129
 
130
- const xTickInterval = Math.floor(data[0].data.length / 6);
130
+ const xTickInterval = Math.floor(data[0].data.length / 4);
131
131
 
132
132
  return (
133
133
  <div className="ff-line-chart-text">
134
- <p className="ff-line-chart-text1">{yAxisLabel}</p>
134
+ <Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
135
135
  <svg
136
136
  width={width}
137
137
  height={height}
@@ -155,6 +155,7 @@ const LineChart: React.FC<LineChartProps> = ({
155
155
  textAnchor="middle"
156
156
  fill={yAxisLabelColor}
157
157
  className="ff-line-chart-x-axis-label"
158
+ style={{fontSize:textSize , fontWeight:fontWeight}}
158
159
  >
159
160
  {xAxisLabel}
160
161
  </text>
@@ -185,7 +186,7 @@ const LineChart: React.FC<LineChartProps> = ({
185
186
  r={5}
186
187
  fill="white"
187
188
  stroke={line.color}
188
- strokeWidth={2}
189
+ strokeWidth={lineChartWidth}
189
190
  style={{ transition: 'cx 0.1s, cy 0.1s' }}
190
191
  />
191
192
  <line
@@ -212,23 +213,25 @@ const LineChart: React.FC<LineChartProps> = ({
212
213
  textAnchor="middle"
213
214
  fill={yAxisColor}
214
215
  className="ff--line-chart-x-line-data"
216
+ style={{ fontSize:numberSize}}
215
217
  >
216
218
  {point[xKey] != null ? String(point[xKey]) : ''}
217
219
  </text>
218
220
  ))}
219
221
 
220
222
  {Array.from({ length: 6 }).map((_, i) => {
221
- const yValue = (i * yMaxExtended) / 5;
223
+ const yValueInGB = i * 0.2;
222
224
  return (
223
225
  <text
224
- key={yValue}
226
+ key={yValueInGB}
225
227
  x={-15}
226
- y={yScale(yValue)}
228
+ y={yScale(yValueInGB * 1024)}
227
229
  textAnchor="middle"
228
230
  fill={yAxisValueColor}
229
231
  className="ff-line-chart-y-axis-text"
232
+ style={{ fontSize:numberSize}}
230
233
  >
231
- {yValue.toFixed(1)}
234
+ {yValueInGB.toFixed(1)}
232
235
  </text>
233
236
  );
234
237
  })}
@@ -1,27 +1,29 @@
1
1
  export interface LineChartDataPoint {
2
- point: any;
3
- x: string;
4
- y: number;
2
+ point: any;
3
+ x: string;
4
+ y: number;
5
5
  }
6
6
 
7
7
  export interface Line {
8
- show: boolean;
9
- color: string;
10
- data: LineChartDataPoint[];
8
+ show: boolean;
9
+ color: string;
10
+ data: LineChartDataPoint[];
11
11
  }
12
12
 
13
13
  export interface LineChartProps {
14
- data: any[];
15
- width: number;
16
- height: number;
17
- axisColor: string;
18
- isStatusVariant?: boolean;
19
- lineChartWidth?:number;
20
- yAxisLabel?:string;
21
- xAxisLabel?:string;
22
- yAxisValueColor?:string;
23
- xAxisColor?:string;
24
- yAxisColor?:string;
25
- yAxisLabelColor?:string;
26
-
27
- }
14
+ data: any[];
15
+ width: number;
16
+ height: number;
17
+ axisColor: string;
18
+ isStatusVariant?: boolean;
19
+ lineChartWidth?: number;
20
+ yAxisLabel?: string;
21
+ xAxisLabel?: string;
22
+ yAxisValueColor?: string;
23
+ xAxisColor?: string;
24
+ yAxisColor?: string;
25
+ yAxisLabelColor?: string;
26
+ textSize?: string | number;
27
+ fontWeight?: string | number;
28
+ numberSize?: string | number;
29
+ }
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
2
2
  import EditTextField from './EditTextField';
3
3
  import '../../assets/styles/_colors.scss';
4
4
  import './EditTextField.scss';
5
- import { useState } from 'react';
5
+ import React, { useState } from 'react';
6
6
 
7
7
  const meta: Meta<typeof EditTextField> = {
8
8
  title: 'Components/EditTextField',
@@ -220,6 +220,7 @@ import AddUser from '../../assets/icons/add_user.svg?react';
220
220
  import RemoveUser from '../../assets/icons/remove_user.svg?react';
221
221
  import AddToArchive from '../../assets/icons/add_archive.svg?react';
222
222
  import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
223
+ import InfoUser from '../../assets/icons/info_user.svg?react';
223
224
 
224
225
  Components['success'] = ToastSuccessIcon;
225
226
  Components['alert'] = Alert;
@@ -436,5 +437,6 @@ Components['add_user'] = AddUser;
436
437
  Components['add_to_archive'] = AddToArchive;
437
438
  Components['remove_user'] = RemoveUser;
438
439
  Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
440
+ Components['info_user'] = InfoUser;
439
441
 
440
442
  export default Components;
@@ -47,6 +47,7 @@
47
47
  @extend .fontSm;
48
48
  }
49
49
  .ff-text-field {
50
+ position: relative;
50
51
  padding: 0 4px;
51
52
  border-radius: 4px;
52
53
  }
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import LabelEditTextField from './LabelEditTextField';
3
4
  import '../../assets/styles/_colors.scss';
@@ -17,7 +18,7 @@ export const textField: Story = {
17
18
  render: () => {
18
19
  const handleConfirmAction = (inputValue: string) => {
19
20
  //DEMO: we are getting that value from LabelEditTextField
20
- console.log('Confirmed input value:', inputValue);
21
+ return inputValue;
21
22
  };
22
23
  return (
23
24
  <LabelEditTextField
@@ -31,9 +32,13 @@ export const textField: Story = {
31
32
  name: 'close',
32
33
  onClick: () => {},
33
34
  }}
34
- width="300px"
35
35
  height="22px"
36
36
  confirmAction={handleConfirmAction}
37
+ onClick={() => {}}
38
+ tooltip={{
39
+ tooltipTitle: 'text',
40
+ tooltipPlacement: 'bottom',
41
+ }}
37
42
  />
38
43
  );
39
44
  },
@@ -42,7 +47,7 @@ export const textFieldWithOutLabel: Story = {
42
47
  render: () => {
43
48
  const handleConfirmAction = (inputValue: string) => {
44
49
  //DEMO: we are getting that value from LabelEditTextField
45
- console.log('Confirmed input value:', inputValue);
50
+ return inputValue;
46
51
  };
47
52
  return (
48
53
  <LabelEditTextField
@@ -66,7 +71,7 @@ export const openTextFieldWithOutLabel: Story = {
66
71
  render: () => {
67
72
  const handleConfirmAction = (inputValue: string) => {
68
73
  //DEMO: we are getting that value from LabelEditTextField
69
- console.log('Confirmed input value:', inputValue);
74
+ return inputValue;
70
75
  };
71
76
  return (
72
77
  <LabelEditTextField
@@ -91,11 +96,7 @@ export const textFieldWithDropdown: Story = {
91
96
  render: () => {
92
97
  const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
93
98
  //DEMO: we are getting that value from LabelEditTextField
94
- console.log(
95
- 'Confirmed input value and dropdown value:',
96
- inputValue,
97
- dropdownValue
98
- );
99
+ return { inputValue, dropdownValue };
99
100
  };
100
101
  return (
101
102
  <LabelEditTextField
@@ -125,12 +126,7 @@ export const textFieldWithHighlight: Story = {
125
126
  render: () => {
126
127
  const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
127
128
  //DEMO: we are getting that value from LabelEditTextField
128
-
129
- console.log(
130
- 'Confirmed input value and dropdown value:',
131
- inputValue,
132
- dropdownValue
133
- );
129
+ return { inputValue, dropdownValue };
134
130
  };
135
131
  return (
136
132
  <LabelEditTextField
@@ -4,6 +4,7 @@ import { LabelEditTextFieldTypes } from './types';
4
4
  import Typography from '../Typography';
5
5
  import HighlightText from '../HighlightText';
6
6
  import Icon from '../Icon';
7
+ import Tooltip from '../Tooltip';
7
8
 
8
9
  const getErrorMessage = (
9
10
  inputValue: string,
@@ -32,10 +33,12 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
32
33
  cancelIcon,
33
34
  variant = 'textField',
34
35
  dropdownData = [],
35
- width = '300px',
36
+ width,
36
37
  height = '22px',
37
38
  isOpen = false,
38
39
  confirmAction,
40
+ onClick,
41
+ tooltip,
39
42
  }) => {
40
43
  const [isEditing, setIsEditing] = useState(isOpen ?? false);
41
44
  const [inputValue, setInputValue] = useState(text);
@@ -47,12 +50,38 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
47
50
  const [isDropdownModified, setIsDropdownModified] = useState(false);
48
51
  const containerRef = useRef<HTMLDivElement | null>(null);
49
52
  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
50
-
53
+ const [clickTimeout, setClickTimeout] = useState<number | null>(null);
54
+ useEffect(() => {
55
+ return () => {
56
+ if (clickTimeout) {
57
+ clearTimeout(clickTimeout);
58
+ }
59
+ };
60
+ }, [clickTimeout]);
51
61
  const handleDoubleClick = () => {
62
+ if (clickTimeout) {
63
+ clearTimeout(clickTimeout);
64
+ setClickTimeout(null);
65
+ }
52
66
  setIsEditing(true);
53
67
  setShowError('');
54
68
  };
69
+ const handleSingleClick = () => {
70
+ if (onClick) onClick();
71
+ };
72
+ const handleClick = () => {
73
+ if (clickTimeout) {
74
+ clearTimeout(clickTimeout);
75
+ setClickTimeout(null);
76
+ }
55
77
 
78
+ const timeout = window.setTimeout(() => {
79
+ handleSingleClick();
80
+ setClickTimeout(null);
81
+ }, 1000);
82
+
83
+ setClickTimeout(timeout);
84
+ };
56
85
  const handleConfirm = () => {
57
86
  const errorMessage = getErrorMessage(
58
87
  inputValue,
@@ -116,11 +145,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
116
145
  }, [inputValue]);
117
146
 
118
147
  return (
119
- <div
120
- className="ff-label-edit-text-field"
121
- ref={containerRef}
122
- style={{ width }}
123
- >
148
+ <div className="ff-label-edit-text-field" ref={containerRef}>
124
149
  {isEditing ? (
125
150
  <div className="ff-label-text-field">
126
151
  {variant === 'textFieldWithDropdown' ? (
@@ -195,13 +220,19 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
195
220
  </div>
196
221
  </div>
197
222
  ) : (
198
- <span
199
- className="display-text"
200
- onDoubleClick={handleDoubleClick}
201
- role="button"
223
+ <Tooltip
224
+ title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
225
+ placement={'bottom'}
202
226
  >
203
- <HighlightText text={inputValue} highlight={highlightText} />
204
- </span>
227
+ <span
228
+ className="display-text"
229
+ onDoubleClick={handleDoubleClick}
230
+ role="button"
231
+ onClick={handleClick}
232
+ >
233
+ <HighlightText text={inputValue} highlight={highlightText} />
234
+ </span>
235
+ </Tooltip>
205
236
  )}
206
237
  {showError && isEditing && (
207
238
  <Typography as="p" fontSize={8} className="error-text">
@@ -38,4 +38,9 @@ export interface LabelEditTextFieldTypes {
38
38
  isOpen?: boolean;
39
39
  /**for conditionally handle custom error */
40
40
  customErrorCondition?: boolean;
41
+ onClick?: () => void;
42
+ tooltip?: {
43
+ tooltipTitle?: string;
44
+ tooltipPlacement?: string;
45
+ };
41
46
  }
@@ -8,6 +8,12 @@
8
8
  top: $top;
9
9
  left: $left;
10
10
  }
11
+ .ff-mini-modal-overlay {
12
+ position: fixed;
13
+ inset: 0;
14
+ width: 100vw;
15
+ height: 100vh;
16
+ }
11
17
  .ff-mini-edit-modal-container {
12
18
  width: fit-content;
13
19
  padding: 0;
@@ -17,9 +23,7 @@
17
23
  visibility: visible;
18
24
  }
19
25
  &.animatedModal {
20
- animation:
21
- slideDown 0.5s ease,
22
- opacity 0.5s ease;
26
+ animation: slideDown 0.5s ease, opacity 0.5s ease;
23
27
  }
24
28
 
25
29
  .popover-arrow {
@@ -91,7 +95,7 @@
91
95
  position: absolute;
92
96
  top: -34px;
93
97
  border-radius: 7px 7px 0 0;
94
- box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);
98
+
95
99
  &::before,
96
100
  &::after {
97
101
  position: absolute;
@@ -121,7 +125,7 @@
121
125
  width: 100%;
122
126
  margin: 0 0 0 -5px;
123
127
  height: 100%;
124
- box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
128
+
125
129
  &.mini-edit-modal-wrapper-shadow {
126
130
  box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
127
131
  }
@@ -51,6 +51,10 @@ const BasicModalComponent = () => {
51
51
  {currentModal === 1 && (
52
52
  <MiniModal
53
53
  anchorRef="112233"
54
+ overlay={{
55
+ isOverlay: true,
56
+ zIndexOverlay: 99,
57
+ }}
54
58
  modalProperties={{ width: 300, height: 180 }}
55
59
  headerProps={
56
60
  <>
@@ -263,7 +267,12 @@ export const CustomModalWithArrow = () => {
263
267
  {currentModal === 1 && (
264
268
  <MiniModal
265
269
  anchorRef="1a2b"
270
+ overlay={{
271
+ isOverlay: true,
272
+ zIndexOverlay: 99,
273
+ }}
266
274
  modalProperties={{ width: 300, height: 250 }}
275
+ arrowZIndex={1000}
267
276
  headerProps={
268
277
  <>
269
278
  <Typography as="p">Modal 1</Typography>
@@ -287,6 +296,7 @@ export const CustomModalWithArrow = () => {
287
296
  text: 'Cancel',
288
297
  onClick: handleCancel,
289
298
  }}
299
+ outSideClick={handleCancel}
290
300
  proceedButtonProps={{
291
301
  text: 'Proceed',
292
302
  onClick: () => {},
@@ -326,6 +336,7 @@ export const CustomModalWithArrow = () => {
326
336
  text: 'Cancel',
327
337
  onClick: handleCancel,
328
338
  }}
339
+ outSideClick={handleCancel}
329
340
  proceedButtonProps={{
330
341
  text: 'Proceed',
331
342
  onClick: () => {},
@@ -368,6 +379,7 @@ export const CustomModalWithArrow = () => {
368
379
  text: 'Cancel',
369
380
  onClick: handleCancel,
370
381
  }}
382
+ outSideClick={handleCancel}
371
383
  proceedButtonProps={{
372
384
  text: 'Proceed',
373
385
  onClick: () => {},
@@ -408,6 +420,7 @@ export const CustomModalWithArrow = () => {
408
420
  text: 'Cancel',
409
421
  onClick: handleCancel,
410
422
  }}
423
+ outSideClick={handleCancel}
411
424
  proceedButtonProps={{
412
425
  text: 'Proceed',
413
426
  onClick: () => {},
@@ -451,6 +464,7 @@ export const CustomModalWithArrow = () => {
451
464
  <button onClick={handleCancel}>Cancel</button>
452
465
  </>
453
466
  }
467
+ outSideClick={handleCancel}
454
468
  cancelButtonProps={{
455
469
  text: 'Cancel',
456
470
  onClick: handleCancel,
@@ -492,6 +506,11 @@ export const CustomModalWithWrapper = () => {
492
506
  {currentModal === 1 && (
493
507
  <MiniModal
494
508
  anchorRef={btnRef1}
509
+ overlay={{
510
+ isOverlay: true,
511
+ zIndexOverlay: 99,
512
+ backgroundColorOverlay: 'var(--pop-up-background-blur)',
513
+ }}
495
514
  modalProperties={{ width: 487, height: 180 }}
496
515
  headerProps={
497
516
  <>
@@ -506,6 +525,7 @@ export const CustomModalWithWrapper = () => {
506
525
  </Typography>
507
526
  </>
508
527
  }
528
+ outSideClick={handleCancel}
509
529
  cancelButtonProps={{
510
530
  text: 'Cancel',
511
531
  onClick: handleCancel,
@@ -551,6 +571,7 @@ export const CustomModalWithWrapper = () => {
551
571
  text: 'Export',
552
572
  onClick: () => {},
553
573
  }}
574
+ outSideClick={handleCancel}
554
575
  isWrapped={true}
555
576
  isAnimated={false}
556
577
  firstAnchorRef={btnRef1}
@@ -575,8 +596,9 @@ export const CustomModalWithWrapper = () => {
575
596
  height: 210,
576
597
  borderRadius: 0,
577
598
  zIndex: 3,
599
+ boxShadow: 'none',
578
600
  }}
579
- wrapperProperties={{ width: 30, zIndex: 4 }}
601
+ wrapperProperties={{ width: 30, zIndex: 4, boxShadow: 'none' }}
580
602
  headerProps={
581
603
  <>
582
604
  <Typography as="p">Delete Selected Scripts</Typography>
@@ -600,6 +622,7 @@ export const CustomModalWithWrapper = () => {
600
622
  }}
601
623
  isWrapped={true}
602
624
  isAnimated={true}
625
+ outSideClick={handleCancel}
603
626
  firstAnchorRef={btnRef1}
604
627
  anchorRefLeftNum={225}
605
628
  anchorLeftDistanceForWrapper={170}
@@ -630,6 +653,10 @@ export const normalModalFollowedByIcon = () => {
630
653
  <MiniModal
631
654
  anchorRef={iconRef1}
632
655
  modalProperties={{ width: 168, height: 108 }}
656
+ overlay={{
657
+ isOverlay: true,
658
+ zIndexOverlay: 99,
659
+ }}
633
660
  childContent={
634
661
  <>
635
662
  <Typography as="p">