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
@@ -17,6 +17,7 @@ const Textarea = ({
17
17
  onChange,
18
18
  onBlur,
19
19
  onFocus,
20
+ onPaste,
20
21
  rows = 4,
21
22
  cols = 40,
22
23
  resize = false,
@@ -65,6 +66,7 @@ const Textarea = ({
65
66
  onChange={onChange}
66
67
  onBlur={onBlur}
67
68
  onFocus={onFocus}
69
+ onPaste={onPaste}
68
70
  required={required}
69
71
  rows={rows}
70
72
  cols={cols}
@@ -49,6 +49,9 @@ export interface TextareaProps {
49
49
  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
50
50
 
51
51
  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
52
+
53
+ onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
54
+
52
55
  /**
53
56
  * id to select the textarea field uniquely
54
57
  */
package/src/index.ts CHANGED
@@ -71,6 +71,7 @@ import FieldSet from './components/FieldSet';
71
71
  import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
72
72
  import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
73
73
  import ProgressBar from './components/ProgressBar';
74
+ import ChooseFile from './components/ChooseFile/ChooseFile';
74
75
 
75
76
  // Utils imports
76
77
  import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -184,6 +185,8 @@ export {
184
185
  PhoneInputField,
185
186
  TableWithAccordion,
186
187
  ProgressBar,
188
+ ChooseFile,
189
+
187
190
  // utils exports
188
191
  checkEmpty,
189
192
  getExtension,
@@ -0,0 +1,49 @@
1
+ import React, { useState } from 'react';
2
+ import {
3
+ validateFileExtension,
4
+ validateZipFileExtension,
5
+ } from './validateFile';
6
+
7
+ export default {
8
+ title: 'Utils/validateFile',
9
+ };
10
+
11
+ const allowedFileTypes = {
12
+ '.txt': 'text/plain',
13
+ '.zip': 'application/zip',
14
+ '.jpg': 'image/jpeg',
15
+ };
16
+
17
+ export const ValidateFileExtension = () => {
18
+ const [result, setResult] = useState<string | boolean>('');
19
+
20
+ const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
21
+ const isValid = validateFileExtension(event, allowedFileTypes);
22
+ setResult(isValid ? 'Valid file type' : 'Invalid file type');
23
+ };
24
+
25
+ return (
26
+ <div>
27
+ <h3>Validate File Extension</h3>
28
+ <input type="file" onChange={handleFileChange} />
29
+ <p>Result: {result.toString()}</p>
30
+ </div>
31
+ );
32
+ };
33
+
34
+ export const ValidateZipFileExtension = () => {
35
+ const [result, setResult] = useState<string | boolean>('');
36
+
37
+ const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
38
+ const isValid = validateZipFileExtension(event);
39
+ setResult(isValid ? 'Valid ZIP file' : 'Invalid ZIP file');
40
+ };
41
+
42
+ return (
43
+ <div>
44
+ <h3>Validate ZIP File Extension</h3>
45
+ <input type="file" onChange={handleFileChange} />
46
+ <p>Result: {result.toString()}</p>
47
+ </div>
48
+ );
49
+ };
@@ -0,0 +1,39 @@
1
+ export const validateFileExtension = (
2
+ file: File | React.ChangeEvent<HTMLInputElement>,
3
+ allowedFileTypes: Record<string, string>
4
+ ) => {
5
+ const selectedFile =
6
+ (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
7
+ (file as File);
8
+ const fileExtension =
9
+ '.' + selectedFile?.name?.split('.')?.pop()?.toLowerCase();
10
+ const fileType = selectedFile?.type;
11
+ if (
12
+ ['.ipa', '.y4m', '.yml', '.md', '.pem', '.properties'].includes(
13
+ fileExtension
14
+ ) &&
15
+ Object.keys(allowedFileTypes)?.includes(fileExtension)
16
+ ) {
17
+ return true;
18
+ }
19
+ return (
20
+ allowedFileTypes[fileExtension] &&
21
+ fileType === allowedFileTypes[fileExtension]
22
+ );
23
+ };
24
+
25
+ export const validateZipFileExtension = (
26
+ file: File | React.ChangeEvent<HTMLInputElement>
27
+ ) => {
28
+ const selectedFile =
29
+ (file as React.ChangeEvent<HTMLInputElement>).target?.files?.[0] ||
30
+ (file as File);
31
+ // List of valid MIME types
32
+ const validMimeTypes = ['application/zip', 'application/x-zip-compressed'];
33
+ // Validating the file extension and MIME type
34
+ return (
35
+ selectedFile &&
36
+ validMimeTypes?.includes(selectedFile?.type) &&
37
+ selectedFile?.name?.toLowerCase()?.endsWith('.zip')
38
+ );
39
+ };
@@ -1,51 +0,0 @@
1
- .ff-connecting-datalist-modal-header-wrapper,
2
- .ff-connecting-modal-child-wrapper {
3
- width: 534px;
4
- padding: 0 4px;
5
- }
6
-
7
- .ff-connecting-datalist-modal-header-wrapper {
8
- border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
9
- margin-bottom: 4px;
10
- }
11
-
12
- .ff-connecting-modal-child-wrapper {
13
- .ff-branch-select-input-wrapper {
14
- display: flex;
15
- align-items: center;
16
- gap: 8px;
17
-
18
- .ff-select-browser {
19
- width: 263px;
20
- }
21
-
22
- .ff-branch-input-wrapper {
23
- display: flex;
24
- align-items: flex-end;
25
- height: 38px;
26
-
27
- .ff-input-browser {
28
- width: 245px;
29
- }
30
- }
31
- }
32
- }
33
-
34
- .ff-connecting-modal-footer-wrapper {
35
- display: flex;
36
- align-items: center;
37
- justify-content: space-between;
38
- padding: 0 8px;
39
- margin-top: 8px;
40
- border-top: 1px solid var(--ff-connecting-branch-modal-border);
41
-
42
- .ff-branch-toggle-wrapper,
43
- .ff-datalist-button-wrapper {
44
- display: flex;
45
- gap: 8px;
46
- }
47
-
48
- .ff-branch-toggle-wrapper {
49
- gap: 4px;
50
- }
51
- }
@@ -1,107 +0,0 @@
1
- import { forwardRef, RefObject } from 'react';
2
- import MiniModal from '../../../MiniModal';
3
- import Typography from '../../../Typography';
4
- import './AddBrowserModal.scss';
5
- import Select from '../../../Select';
6
- import Button from '../../../Button';
7
- import Toggle from '../../../Toggle';
8
- import Input from '../../../Input/Input';
9
- import { AddBrowserModalProps } from './types';
10
-
11
- const AddBrowserModal = forwardRef<HTMLButtonElement, AddBrowserModalProps>(
12
- (props, ref) => {
13
- // TODO: WILL BE REMOVE IN THE FUTURE
14
- const selectOptions = [
15
- { label: 'Execution Environment', inputName: 'number of runs' },
16
- { label: 'Browser', inputName: 'Browser Version' },
17
- { label: 'Android Device', inputName: 'os version' },
18
- { label: 'IOS Device', inputName: 'os version-1' },
19
- ];
20
-
21
- const renderSelectOptions = () => (
22
- <div>
23
- {selectOptions.map(({ label, inputName }, index) => (
24
- <div className="ff-branch-select-input-wrapper" key={index}>
25
- <Select
26
- optionsList={[]}
27
- onChange={() => {}}
28
- label={label}
29
- className="ff-select-browser"
30
- />
31
- <div className="ff-branch-input-wrapper">
32
- <Input
33
- value="0"
34
- label="Number of Runs"
35
- type="number"
36
- onChange={() => {}}
37
- name={inputName}
38
- className="ff-input-browser"
39
- />
40
- </div>
41
- </div>
42
- ))}
43
- </div>
44
- );
45
-
46
- const renderFooterContent = () => (
47
- <div className="ff-connecting-modal-footer-wrapper">
48
- <div className="ff-branch-toggle-wrapper">
49
- <Typography as="span" lineHeight="32px">
50
- Run in Headless Mode
51
- </Typography>
52
- <Toggle />
53
- </div>
54
- <div className="ff-datalist-button-wrapper">
55
- <Button label="Cancel" variant="tertiary" />
56
- <Button label="Update" variant="primary" />
57
- </div>
58
- </div>
59
- );
60
-
61
- return (
62
- <div>
63
- <MiniModal
64
- anchorRef={ref as RefObject<HTMLButtonElement>}
65
- headerProps={
66
- <div className="ff-connecting-datalist-modal-header-wrapper">
67
- <Typography
68
- as="span"
69
- color="var(--ff-connecting-branch-modal-header)"
70
- fontWeight="semi-bold"
71
- fontSize={12}
72
- lineHeight="38px"
73
- >
74
- Add Browser / Device
75
- </Typography>
76
- </div>
77
- }
78
- childContent={
79
- <div className="ff-connecting-modal-child-wrapper">
80
- {renderSelectOptions()}
81
- </div>
82
- }
83
- footerContent={renderFooterContent()}
84
- cancelButtonProps={{
85
- text: 'Cancel',
86
-
87
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
88
- onClick: props.onUpdateAddBrowser,
89
- }}
90
- proceedButtonProps={{
91
- text: 'Proceed',
92
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
93
- onClick: props.onUpdateAddBrowser,
94
- }}
95
- modalPosition="right"
96
- isPopOver
97
- leftTopArrow
98
- extraRightSpace={{ leftTopArrow: 45 }}
99
- extraLeftSpace={{ rightAlignModal: 115 }}
100
- {...props}
101
- />
102
- </div>
103
- );
104
- }
105
- );
106
-
107
- export default AddBrowserModal;
@@ -1,5 +0,0 @@
1
- export interface AddBrowserModalProps {
2
-
3
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
4
- onUpdateAddBrowser: () => void;
5
- }
@@ -1,31 +0,0 @@
1
- .ff-datalist-modal-header-wrapper,
2
- .ff-datalist-modal-child-wrapper,
3
- .ff-datalist-modal-footer-wrapper {
4
- margin: 0 8px;
5
- }
6
-
7
- .ff-datalist-modal-header-wrapper {
8
- width: 255px;
9
- border-bottom: 1px solid var(--ff-connecting-branch-modal-border);
10
- display: flex;
11
- align-items: center;
12
- }
13
-
14
- .ff-datalist-modal-child-wrapper {
15
- .variable {
16
- margin: 8px 0;
17
- }
18
- }
19
-
20
- .ff-datalist-modal-footer-wrapper {
21
- display: flex;
22
- justify-content: space-between;
23
- border-top: 1px solid var(--ff-connecting-branch-modal-border);
24
-
25
- .datalist-button-wrapper {
26
- display: flex;
27
- gap: 10px;
28
- margin-top: 4px;
29
- justify-content: flex-end;
30
- }
31
- }
@@ -1,85 +0,0 @@
1
- import { forwardRef, RefObject } from 'react';
2
- import MiniModal from '../../../MiniModal';
3
- import Typography from '../../../Typography';
4
- import './DatasetListModal.scss';
5
- import Select from '../../../Select';
6
- import Checkbox from '../../../Checkbox';
7
- import Button from '../../../Button';
8
- import { DatasetListModalProps } from './types';
9
-
10
- const DatasetListModal = forwardRef<HTMLButtonElement, DatasetListModalProps>(
11
- (props, ref) => {
12
- const selectOptions = [
13
- { label: 'Project Environment Variable' },
14
- { label: 'Global Variables' },
15
- { label: 'Test Data Set' },
16
- ];
17
-
18
- const renderSelectOptions = () =>
19
- selectOptions.map(({ label }, idx) => (
20
- <Select
21
- key={idx}
22
- optionsList={[]}
23
- onChange={() => {}}
24
- label={label}
25
- className="variable"
26
- />
27
- ));
28
-
29
- const renderFooterContent = () => (
30
- <div className="ff-datalist-modal-footer-wrapper">
31
- <Checkbox checked={false} label="Set as Default" />
32
- <div className="datalist-button-wrapper">
33
- <Button label="Cancel" variant="tertiary" />
34
- <Button label="Update" variant="primary" />
35
- </div>
36
- </div>
37
- );
38
-
39
- return (
40
- <div>
41
- <MiniModal
42
- anchorRef={ref as RefObject<HTMLButtonElement>}
43
- headerProps={
44
- <div className="ff-datalist-modal-header-wrapper">
45
- <Typography
46
- as="span"
47
- color="var(--ff-connecting-branch-modal-header)"
48
- fontWeight="semi-bold"
49
- fontSize={12}
50
- lineHeight="38px"
51
- >
52
- Data Sets
53
- </Typography>
54
- </div>
55
- }
56
- childContent={
57
- <div className="ff-datalist-modal-child-wrapper">
58
- {renderSelectOptions()}
59
- </div>
60
- }
61
- footerContent={renderFooterContent()}
62
- cancelButtonProps={{
63
- text: 'Cancel',
64
-
65
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
66
- onClick: props?.onUpdateDatasetList,
67
- }}
68
- proceedButtonProps={{
69
- text: 'Proceed',
70
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
71
- onClick: props?.onUpdateDatasetList,
72
- }}
73
- modalPosition="right"
74
- isPopOver
75
- leftTopArrow
76
- extraRightSpace={{ leftTopArrow: 40 }}
77
- extraLeftSpace={{ rightAlignModal: 110 }}
78
- {...props}
79
- />
80
- </div>
81
- );
82
- }
83
- );
84
-
85
- export default DatasetListModal;
@@ -1,4 +0,0 @@
1
- export interface DatasetListModalProps {
2
- // TODO: DEMO PURPOSE AND WILL BE REMOVED IN THE FUTURE
3
- onUpdateDatasetList: () => void;
4
- }